এইচটিএমএল ডিভ টিউটোরিয়াল ( HTML Div Tutorial in Bangla)

 

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

লেআউট বানানোর জন্য div এর জুরি নেই। এইচটিএমএল এ লেআউটের জন্য টেবিল ব্যবহার শূন্যের কোঠায় চলে এসেছে বিভিন্ন কারনে। আর তাই div এখন লেআউট তৈরীর অবিচ্ছেদ্য উপাদান।

01.<div style="border:1px solid #f00">

02.<h1>HTML div tutorial in codestrickz</h1>

03.<p>Basically div layout designed by CSS</p>

04. 

05.</div>

06.<div style="border:1px solid #f00">

07.<h1>HTML div tutorial in codestrickz</h1>

08.<p>Basically div layout designed by CSS</p>

09. 

10.</div>

প্রয়োগ দেখুন

div দিয়ে কোড লেখার পর সিএসএস দিয়ে সেটা প্রয়োজনীয় আকৃতি দেয়া হয়। সিএসএস টিউটোরিয়ালে এসব আলোচনা হবে।

এখানে শুধু জেনে রাখুন div একটি অন্যান্য এ্ইচটিএমএল এলিমেন্টের মত একটা এলিমেন্ট । এটা ব্লক লেভেল এলিমেন্ট। align নামে একটা এট্রিবিউট ব্যবহার করা যায় তবে HTML 5 এটা deprecated, আসলে align এট্রিবিউটের সব কাজ সিএসএস দিয়ে করা যায় বা করা য়।

এখানে ইনলাইন সিএসএস লিখেছি (style="border:1px solid #ddd") এরুপ সিএসএস দিয়ে সুন্দর সুন্দর লেআউট বানানো যায়।

01.<div style="float:left;background:yellow;width:100%;">

02.<ul>

03.<li>item1</li>

04.<li>item 2</li>

05.</ul>

06.</div>

07.<div style="border:1px solid #f00; float:left ;width:48% ">

08. 

09.<h1>HTML div tutorial in codestrickz</h1>

10. 

11.<p>Basically div layout designed by CSS</p>

12. 

13.</div>

14. 

15.<div style="border:1px solid #f00; float:left;width:48%;margin-left:5px">

16. 

17.<h1>HTML div tutorial in codestrickz</h1>

18. 

19.<p>Basically div layout designed by CSS</p>

20. 

21.</div>

22.<div style="background:#000;width:100%;float:left;color:#fff;text-align:center;">

23.Copyright © codestrickz

24.</div>

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