1.
HTML কি?
- এইচটিএমএল মানে হাইপার টেক্সট
মার্কআপ ল্যাঙ্গুয়েজ
- এইচটিএমএল হল ওয়েব পেজ তৈরির
জন্য আদর্শ মার্কআপ ভাষা
- HTML একটি ওয়েব পেজের গঠন
বর্ণনা করে
- এইচটিএমএল উপাদানগুলির একটি
সিরিজ নিয়ে গঠিত
- HTML উপাদানগুলি ব্রাউজারকে বলে
যে কীভাবে সামগ্রী প্রদর্শন করতে হয়
- এইচটিএমএল উপাদানগুলি সামগ্রীর অংশগুলিকে লেবেল করে যেমন "এটি একটি শিরোনাম", "এটি একটি অনুচ্ছেদ", "এটি একটি লিঙ্ক" ইত্যাদি।
একটি
সাধারণ HTML নথি
উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
উদাহরণ ব্যাখ্যা করা হয়েছে
- ঘোষণাটি <!DOCTYPE
html>সংজ্ঞায়িত করে যে এই নথিটি একটি HTML5 নথি৷
- উপাদানটি <html>একটি
HTML পৃষ্ঠার মূল উপাদান
- উপাদানটিতে <head>HTML
পৃষ্ঠা সম্পর্কে মেটা তথ্য রয়েছে
- উপাদানটি <title>HTML
পৃষ্ঠার জন্য একটি শিরোনাম নির্দিষ্ট করে (যা ব্রাউজারের শিরোনাম বারে বা
পৃষ্ঠার ট্যাবে দেখানো হয়)
- উপাদানটি <body>নথির
মূল অংশকে সংজ্ঞায়িত করে এবং এটি সমস্ত দৃশ্যমান বিষয়বস্তুর জন্য একটি
ধারক, যেমন শিরোনাম, অনুচ্ছেদ, চিত্র, হাইপারলিঙ্ক, টেবিল, তালিকা ইত্যাদি।
- উপাদানটি <h1>একটি
বড় শিরোনাম সংজ্ঞায়িত করে
- উপাদানটি <p>একটি
অনুচ্ছেদ সংজ্ঞায়িত করে
2.
একটি HTML উপাদান কি?
একটি
HTML উপাদান একটি স্টার্ট ট্যাগ, কিছু বিষয়বস্তু এবং একটি শেষ ট্যাগ দ্বারা
সংজ্ঞায়িত করা হয়:
< tagname > বিষয়বস্তু
এখানে যায়... < /tagname >
এইচটিএমএল উপাদান হল
শুরু ট্যাগ থেকে শেষ ট্যাগ পর্যন্ত সবকিছু:
<h1> আমার প্রথম
শিরোনাম < / h1 >
<p> আমার
প্রথম অনুচ্ছেদ । < /p >
HTML নথি:
সমস্ত
HTML নথি অবশ্যই একটি নথির প্রকার ঘোষণা দিয়ে শুরু করতে হবে <!DOCTYPE
html>:
HTML
ডকুমেন্ট নিজেই শুরু হয় <html>এবং শেষ হয় </html>।
HTML
নথির দৃশ্যমান অংশটি <body>এবং এর মধ্যে </body>।
উদাহরণ:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE> ঘোষণা:
ঘোষণাটি <!DOCTYPE>নথির
প্রকারের প্রতিনিধিত্ব করে এবং ব্রাউজারগুলিকে ওয়েব পৃষ্ঠাগুলি সঠিকভাবে প্রদর্শন
করতে সহায়তা করে।
এটি
পৃষ্ঠার শীর্ষে (যেকোনও HTML ট্যাগের আগে) শুধুমাত্র একবার প্রদর্শিত হবে।
ঘোষণাটি <!DOCTYPE>কেস
সংবেদনশীল নয়।
HTML5
এর জন্য ঘোষণা <!DOCTYPE>হল:
<!DOCTYPE html>
HTML শিরোনাম:
এইচটিএমএল
শিরোনামগুলিকে ট্যাগ দিয়ে সংজ্ঞায়িত করা <h1>হয়েছে <h6>।
<h1>সবচেয়ে
গুরুত্বপূর্ণ শিরোনাম সংজ্ঞায়িত করে। <h6>সর্বনিম্ন গুরুত্বপূর্ণ
শিরোনাম সংজ্ঞায়িত করে:
উদাহরণ
<h1>This is heading
1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
এইচটিএমএল অনুচ্ছেদ:
HTML
অনুচ্ছেদ <p>ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়েছে:
উদাহরণ
<p>This is a
paragraph.</p>
<p>This is another paragraph.</p>
এইচটিএমএল লিংক:
HTML
লিঙ্ক <a>ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়:
উদাহরণ
<a href="https://https://dcareer-1.blogspot.com/">This
is a link</a>
লিঙ্কের
গন্তব্য বৈশিষ্ট্যে নির্দিষ্ট করা আছে href।
HTML
উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করতে বৈশিষ্ট্যগুলি ব্যবহার করা হয়।
আপনি
পরবর্তী অধ্যায়ে গুণাবলী সম্পর্কে আরও শিখবেন।
এইচটিএমএল ইমেজ:
HTML
ইমেজ <img>ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়.
উৎস
ফাইল ( src), বিকল্প পাঠ্য ( alt), width, এবং heightগুণাবলী
হিসাবে প্রদান করা হয়:
অধ্যায়ের
সারাংশ:
- সমস্ত HTML উপাদানের বৈশিষ্ট্য থাকতে পারে
- লিঙ্কটি
যে পৃষ্ঠায় যায় তার URL- hrefএর বৈশিষ্ট্যটি নির্দিষ্ট
করে <a>
- srcএর
বৈশিষ্ট্যটি প্রদর্শিত <img>হওয়ার জন্য চিত্রটির পথ
নির্দিষ্ট করে
- widthএবং heightএর
বৈশিষ্ট্যগুলি ছবির <img>জন্য আকারের তথ্য প্রদান করে
- altএর
বৈশিষ্ট্য একটি <img>চিত্রের জন্য একটি বিকল্প পাঠ্য প্রদান
করে
- বৈশিষ্ট্যটি styleএকটি
উপাদানে শৈলী যোগ করতে ব্যবহৃত হয়, যেমন রঙ, ফন্ট, আকার এবং আরও অনেক কিছু
- langট্যাগের
বৈশিষ্ট্য ওয়েব <html>পেজের ভাষা ঘোষণা করে
- বৈশিষ্ট্য titleএকটি
উপাদান সম্পর্কে কিছু অতিরিক্ত তথ্য সংজ্ঞায়িত করে
HTML শিরোনাম:
এইচটিএমএল শিরোনামগুলিকে ট্যাগ দিয়ে সংজ্ঞায়িত করা <h1>হয়েছে <h6>।
<h1>সবচেয়ে গুরুত্বপূর্ণ শিরোনাম সংজ্ঞায়িত করে। <h6>সর্বনিম্ন গুরুত্বপূর্ণ শিরোনাম সংজ্ঞায়িত করে।
উদাহরণ:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
শিরোনাম গুরুত্বপূর্ণ:
সার্চ ইঞ্জিন আপনার ওয়েব পৃষ্ঠাগুলির গঠন এবং বিষয়বস্তু সূচী করতে শিরোনাম ব্যবহার করে।
ব্যবহারকারীরা প্রায়ই একটি পৃষ্ঠার শিরোনাম দ্বারা স্কিম করে। নথির কাঠামো দেখানোর জন্য শিরোনাম ব্যবহার করা গুরুত্বপূর্ণ।
<h1>শিরোনামগুলি প্রধান শিরোনামের জন্য ব্যবহার করা উচিত, তারপরে <h2>শিরোনামগুলি, তারপরে কম গুরুত্বপূর্ণ <h3>, এবং আরও অনেক কিছু।
বড় শিরোনাম:
প্রতিটি HTML শিরোনামের একটি ডিফল্ট আকার আছে। যাইহোক, আপনি styleCSS প্রপার্টি ব্যবহার করে অ্যাট্রিবিউট সহ যেকোনো শিরোনামের জন্য আকার নির্দিষ্ট করতে পারেন font-size:
উদাহরণ:
<h1 style="font-size:60px;">Heading 1</h1>
এইচটিএমএল অনুচ্ছেদ:
HTML <p>উপাদান একটি অনুচ্ছেদ সংজ্ঞায়িত করে।
একটি অনুচ্ছেদ সর্বদা একটি নতুন লাইনে শুরু হয় এবং ব্রাউজার স্বয়ংক্রিয়ভাবে একটি অনুচ্ছেদের আগে এবং পরে কিছু সাদা স্থান (একটি মার্জিন) যোগ করে।
উদাহরণ:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
এইচটিএমএল ডিসপ্লে:
আপনি নিশ্চিত হতে পারবেন না কিভাবে HTML প্রদর্শিত হবে।
বড় বা ছোট স্ক্রিন, এবং রিসাইজ করা উইন্ডোগুলি বিভিন্ন ফলাফল তৈরি করবে।
HTML এর সাথে, আপনি আপনার HTML কোডে অতিরিক্ত স্পেস বা অতিরিক্ত লাইন যোগ করে ডিসপ্লে পরিবর্তন করতে পারবেন না।
পৃষ্ঠাটি প্রদর্শিত হলে ব্রাউজার স্বয়ংক্রিয়ভাবে যেকোনো অতিরিক্ত স্পেস এবং লাইন মুছে ফেলবে:
উদাহরণ:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML অনুভূমিক নিয়ম:
ট্যাগটি <hr>একটি এইচটিএমএল পৃষ্ঠায় একটি বিষয়গত বিরতি সংজ্ঞায়িত করে এবং এটি প্রায়শই একটি অনুভূমিক নিয়ম হিসাবে প্রদর্শিত হয়।
উপাদানটি <hr>একটি HTML পৃষ্ঠায় বিষয়বস্তু আলাদা করতে (বা একটি পরিবর্তন সংজ্ঞায়িত করতে) ব্যবহার করা হয়:
উদাহরণ:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
ট্যাগটি <hr>একটি খালি ট্যাগ, যার মানে এটির কোন শেষ ট্যাগ নেই।
HTML লাইন বিরতি:
HTML <br>উপাদান একটি লাইন বিরতি সংজ্ঞায়িত করে।
<br>আপনি যদি একটি নতুন অনুচ্ছেদ শুরু না করে একটি লাইন বিরতি (একটি নতুন লাইন) চান তবে ব্যবহার করুন :
উদাহরণ:
<p>This is<br>a paragraph<br>with line breaks.</p>
ট্যাগটি <br>একটি খালি ট্যাগ, যার মানে এটির কোন শেষ ট্যাগ নেই।
কবিতার সমস্যা:
এই কবিতাটি একটি একক লাইনে প্রদর্শিত হবে:
উদাহরণ:
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
সমাধান - HTML <pre> এলিমেন্ট:
এইচটিএমএল <pre>উপাদান প্রিফরম্যাট করা পাঠ্যকে সংজ্ঞায়িত করে।
একটি উপাদানের ভিতরের পাঠ্য <pre>একটি নির্দিষ্ট-প্রস্থ ফন্টে প্রদর্শিত হয় (সাধারণত কুরিয়ার), এবং এটি স্পেস এবং লাইন বিরতি উভয়ই সংরক্ষণ করে:
উদাহরণ:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML শৈলী বৈশিষ্ট্য:
একটি HTML উপাদানের শৈলী সেট করা, styleবৈশিষ্ট্য দিয়ে করা যেতে পারে।
HTML styleঅ্যাট্রিবিউটের নিম্নলিখিত সিনট্যাক্স রয়েছে:
<tagname style="property:value;">
সম্পত্তি একটি CSS সম্পত্তি . মান হল একটি CSS মান ।
আপনি এই টিউটোরিয়ালে পরে CSS সম্পর্কে আরও শিখবেন।
পেছনের রং:
CSS background-colorবৈশিষ্ট্য একটি HTML উপাদানের জন্য পটভূমির রঙ নির্ধারণ করে।
1. উদাহরণ:
একটি পৃষ্ঠার জন্য পটভূমির রঙ পাউডার নীলে সেট করুন:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
2. উদাহরণ:
দুটি ভিন্ন উপাদানের জন্য পটভূমির রঙ সেট করুন:
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
লেখার রঙ:
CSS colorবৈশিষ্ট্য একটি HTML উপাদানের জন্য পাঠ্য রঙ সংজ্ঞায়িত করে:
উদাহরণ:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
হরফ:
CSS font-familyবৈশিষ্ট্য একটি HTML উপাদানের জন্য ব্যবহার করা ফন্টকে সংজ্ঞায়িত করে:
উদাহরণ:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
অক্ষরের আকার:
CSS font-sizeবৈশিষ্ট্য একটি HTML উপাদানের জন্য পাঠ্য আকার সংজ্ঞায়িত করে:
উদাহরণ:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
লিখার বিন্যাস:
CSS text-alignবৈশিষ্ট্য একটি HTML উপাদানের জন্য অনুভূমিক পাঠ্য প্রান্তিককরণ সংজ্ঞায়িত করে:
উদাহরণ:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
অধ্যায়ের সারাংশ:
- styleHTML উপাদান স্টাইল করার জন্য বৈশিষ্ট্য ব্যবহার করুন
- background-colorপটভূমির রঙের জন্য ব্যবহার করুন
- colorটেক্সট রং জন্য ব্যবহার করুন
- font-familyপাঠ্য ফন্টের জন্য ব্যবহার করুন
- font-sizeপাঠ্য আকারের জন্য ব্যবহার করুন
- text-alignপাঠ্য প্রান্তিককরণের জন্য ব্যবহার করুন
0 Comments
Thank you for your comment.