এইচটিএমএল পেজের মূল উপাদানগুলি হল:
- একটি ট্যাগ শিরোনাম, <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ট্যাগ ব্যবহার করে বোঝানো।
- <p> ট্যাগ ব্যবহার করে বোঝানো একটি অনুচ্ছেদ।
- একটি অনুভূমিক রুলার, একে <hr> ট্যাগ ব্যবহার করে চিহ্নিত করা হয়।
- একটি লিঙ্ক, <a> (অ্যাঙ্কর) ট্যাগ ব্যবহার করে বোঝানো হয়।
- একটি লিস্ট, <ul> (আনর্ডারড লিস্ট), <ol> (অর্ডারড লিস্ট) এবং <li> (লিস্ট এর উপাদান) ট্যাগ ব্যবহার করে বোঝানো হয়।
- একটি চিত্র, <img> ট্যাগ ব্যবহার করে বোঝানো।
- <div> ট্যাগ ব্যবহার করে একটি বিভাজক।
- <span> ট্যাগ ব্যবহার করে বোঝানো একটি পাঠ্য স্প্যান।
পরবর্তী কয়েকটি পেজ এই প্রাথমিক HTML উপাদানগুলির একটি সংক্ষিপ্ত বিবরণ দেবে।
প্রতিটি উপাদানের বৈশিষ্ট্যও থাকতে পারে – প্রতিটি উপাদানের সাথে উপাদানটির সাথে সম্পর্কিত বৈশিষ্ট্যের একটি আলাদা সেট থাকে। কয়েকটি বৈশ্বিক উপাদান রয়েছে যার মধ্যে সর্বাধিক সাধারণ:
- id – কোনও পৃষ্ঠায় কোনও উপাদানটির অনন্য আইডি চিহ্নিত করে। লিঙ্ক, জাভাস্ক্রিপ্ট এবং আরও অনেক কিছু ব্যবহার করে উপাদানগুলির অবস্থান নির্ধারণের জন্য ব্যবহৃত।
- class – একটি উপাদান সিএসএস class বোঝায়।
- style – একটি উপাদান প্রয়োগ করার জন্য সিএসএস স্টাইলগুলি চিহ্নিত করে।
- data-x- অ্যার্টিবিউটস – বৈশিষ্ট্যগুলির একটি সাধারণ উপসর্গ যা প্রোগ্রামেটিক উদ্দেশ্যে কাঁচা তথ্য সঞ্চয় করে।
শিরোনাম এবং অনুচ্ছেদ
HTML এ ছয়টি বিভিন্ন ধরণের header রয়েছে যা আপনি চয়ন করতে পারেন, h1 বৃহত্তম অক্ষর/শব্দ/বাক্যের সাথে শীর্ষস্থানীয় শিরোনাম এবং h6 সবচেয়ে ছোট অক্ষর/শব্দ/বাক্যের সাথে সর্বাধিক অভ্যন্তরীণ শিরোনাম। সাধারণভাবে, আপনার কোনও পেজে একটি মাত্র <h1> ট্যাগ থাকা উচিত, এটি HTML পৃষ্ঠার প্রাথমিক বিবরণ হওয়া উচিত।
যেমন আমরা শেষ উদাহরণে দেখেছি, Paragraph হল পাঠ্যের একটি ব্লক যা তার চারপাশের বাকী অংশ থেকে আলাদা করা হয়।
আসুন <h1>, <h2> এবং <p> ট্যাগগুলির কার্যকারিতা দেখি:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
</body>
</html>অনুভূমিক রুলার:
একটি অনুভূমিক শাসক <hr> ট্যাগ পেজের বিভাগগুলির মধ্যে একটি সাধারণ বিভাজক হিসাবে কাজ করে।
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<hr/>
<p>This is the footer ©All rights are reserved to Career Help BD.</p>
</body>
</html>