মূল উপাদানসমূহ – ফ্রি HTML ও CSS কোর্স – ক্লাস ৩

এইচটিএমএল পেজের মূল উপাদানগুলি হল:

  • একটি ট্যাগ শিরোনাম, <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>

Leave a Comment