এইচটিএমএল ডিভ টিউটোরিয়াল ( 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 Webcoachbd</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 Webcoachbd</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 Webcoachbd</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 Webcoachbd</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 © Webcoachbd24.</div>div এ গ্লোবাল (যেমন id, class, style, dir etc) এবং ইভেন্ট এট্রিবিউট (যেমন onmouseover, dblclick etc) ব্যবহার করা যাবে।
0 মন্তব্য(গুলি):
Post a Comment