এইচটিএমএল টিউটোরিয়াল পর্ব - ৬

ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে এইচটিএমএল লিষ্ট নিয়ে আলোচনা করেছিলাম। আজ তোমাদের div ট্যাগ ব্যবহার নিয়ে আলোচনা করা হলো :

div ট্যাগ ব্যবহার :
div ট্যাগ (<div></div>) খুব গুরত্বপূর্ন একটি ট্যাগ এইচটিএমএল এ। এইচটিএমএল এর এলিমেন্ট এর ভিতরে রেখে section (খন্ড) তৈরী করা হয়। যতগুলি div ততগুলি খন্ড। একটা <div></div> এলিমেন্ট তার ভিতরে থাকা সব এলিমেন্টের জন্য পাত্র বা container হিসেবে কাজ করে।
লেআউট বানানোর জন্য div এর জুরি নেই। এইচটিএমএল এ লেআউটের জন্য টেবিল ব্যবহার শূন্যের কোঠায় চলে এসেছে বিভিন্ন কারনে। আর তাই div এখন লেআউট তৈরীর অবিচ্ছেদ্য উপাদান।

<div style="border:1px solid #f00">
<h1>HTML div tutorial in Webschoolbd</h1>
<p>Basically div layout designed by CSS</p>

</div>
<div style="border:1px solid #f00">
<h1>HTML div tutorial in Webschoolbd</h1>
<p>Basically div layout designed by CSS</p>
</div>

div দিয়ে কোড লেখার পর সিএসএস দিয়ে সেটা প্রয়োজনীয় আকৃতি দেয়া হয়। সিএসএস টিউটোরিয়ালে এসব আলোচনা হবে।
এখানে শুধু জেনে রাখুন div একটি অন্যান্য এ্ইচটিএমএল এলিমেন্টের মত একটা এলিমেন্ট । এটা ব্লক লেভেল এলিমেন্ট। align নামে একটা এট্রিবিউট ব্যবহার করা যায় তবে HTML 5 এটা deprecated, আসলে align এট্রিবিউটের সব কাজ সিএসএস দিয়ে করা যায় বা করা য়।
এখানে ইনলাইন সিএসএস লিখেছি (style="border:1px solid #ddd") এরুপ সিএসএস দিয়ে সুন্দর সুন্দর লেআউট বানানো যায়।

<div style="float:left;background:yellow;width:100%;">
<ul>
<li>item1</li>
<li>item 2</li>
</ul>

</div>
<div style="border:1px solid #f00; float:left ;width:48% ">
<h1>HTML div tutorial in Webschoolbd</h1>
<p>Basically div layout designed by CSS</p>
</div>

<div style="border:1px solid #f00; float:left;width:48%;margin-left:5px">
<h1>HTML div tutorial in Webschoolbd</h1>
<p>Basically div layout designed by CSS</p>
</div>

<div style="background:#000;width:100%;float:left;color:#fff;text-align:center;">
Copyright &copy; Webschoolbd
</div>

div এ গ্লোবাল (যেমন id, class, style, dir etc) এবং ইভেন্ট এট্রিবিউট (যেমন onmouseover, dblclick etc) ব্যবহার করা যাবে।