এইচটিএমএল ব্লক এবং ইনলাইন এলিমেন্ট
এইচটিএমএল গ্রুপিং ট্যাগ
| ট্যাগ | বিবরণ |
|---|---|
| <div> | ডকুমেন্টের মধ্যে সেকশন তৈরি করে(ব্লক-লেভেল) |
| <span> | ডকুমেন্টের মধ্যে সেকশন তৈরি করে(ইনলাইন) |
ইনলাইন এলিমেন্ট (Inline Element)
ইনলাইন এলিমেন্ট শুরু হতে কোন নতুন লাইনের প্রয়োজন হয় না এবং এই এলিমেন্টটি শুধুমাত্র প্রয়োজন অনুযায়ী প্রস্থ দখল করবে।
প্যারাগ্রাফ এলিমেন্টের ভিতরে <span> একটি ইনলাইন এলিমেন্ট।
ইনলাইন এলিমেন্টের উদাহরনঃ
<span>(Span এলিমেন্ট)<a>(Anchor এলিমেন্ট)<img>(ইমেজ এলিমেন্ট)
ব্লক-লেভেল এলিমেন্ট
ব্লক-লেভেল এলিমেন্ট সর্বদা একটি নতুন লাইন থেকে শুরু হয় এবং ঐ লাইনের সম্পূর্ন প্রস্থ দখল করে নেয়(বাম থেকে ডানে যতটু্কু প্রসারিত হতে পারে)।
<div> একটি ব্লক-লেভেল এলিমেন্টব্লক-লেভেল এলিমেন্টের উদাহরনঃ
<div>(div এলিমেন্ট)<h1>-<h6>(হেডিং এলিমেন্ট)<p>(প্যারাগ্রাফ এলিমেন্ট)<form>(ফর্ম এলিমেন্ট)
<span> এলিমেন্ট
<span> একটি ইনলাইন এলিমেন্ট যা প্রায়ই স্বল্প পরিমানে কিছু টেক্সট রাখার জন্য ব্যবহার করা হয়।
<span> এলিমেন্টের নিজস্ব প্রয়োজনীয় কোন এট্রিবিউট নেই কিন্তু সাধারানভাবে style এবং class এট্রিবিউট ব্যবহার হয়।
এইচটিএমএল এলিমেন্টের নির্দিষ্ট একটি টেক্সটকে ভিন্ন ভাবে স্টাইল করার জন্য <span> এলিমেন্ট ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<h1>এটি একটি <span style="color:MediumBlue">গুরুত্বপূর্ণ</span> হেডিং</h1>
</body>
</html>
ফলাফল
<div> এলিমেন্ট
<div> এলিমেন্টটি একটি ব্লক-লেভেল এলিমেন্ট, যা অন্য এইচটিএমএল এলিমেন্টের কন্টেইনার হিসাবে ব্যবহার করা হয়।
এইচটিএমএল ডকুমেন্টের নির্দিষ্ট ব্লকে ভিন্ন স্টাইল করার জন্য <div> এলিমেন্ট ব্যবহার করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<div style="background-color:IndianRed;color:white;padding:20px;">
<h2>লন্ডন</h2>
<p>ইংল্যান্ডের সবচেয়ে বড় শহর হলো লন্ডন।
এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর
এলাকায় ১৩লক্ষেরও বেশি লোক বাস করে।</p>
</div>
</body>
</html>
ফলাফল
অধ্যায়ের সারাংশ
- এইচটিএমএল ব্লক লেভেল এলিমেন্টগুলো তার ডানপাশের সম্পূর্ন প্রস্থ ধারণ করে
- এইচটিএমএল ইনলাইন এলিমেন্ট শুধুমাত্র তার নির্দিষ্ট প্রস্থ ধারণ করে
- এইচটিএমএল ব্লক এবং ইনলাইন এলিমেন্টগুলোকে
styleএট্রিবিউট,classওidএট্রিবিউট ব্যবহার করে স্টাইল করা যায়