div ট্যাগ দিয়ে ওয়েব ডিজাইন করা অনেক সহজ হয়েছে।লেআউট বানানোর জন্য div ট্যাগের বিকল্প নাই। টেবিল ব্যাবহার করে লেআউট বানানো এখন আর দেখা যায় না। এইচটিএমএল এর একটা অতি গুরুত্বপূর্ণ ট্যাগ এটা। div ট্যাগ অন্যান্য ট্যাগের পাত্র (container ) হিসেবে কাজ করে।এটা দিয়ে ডিজাইনের সুবিধার্থে এইচটিএমএল এর এলিমেন্টের ভিতরে রেখে বিভিন্ন section বা খণ্ড তৈরি করা হয়।সিএসএস ছাড়া আবার div এর দাম নাই। div
ব্যাবহার করে লেআউট বানাতে হলে সিএসএস সম্পর্কে ধারনা থাকতে হবে।এইচটিএমএল এ বিভিন্ন section markup করার পরে সেটা সিএসএস দিয়ে পরিপূর্ণ রুপ দেয়া হয়।
div এর সাথে ব্যবহৃত কিছু attributes :id , width,
height, title ,style ইত্যাদি।
<div> </div> এলিমেন্ট এইচটিএমএল এর সকল এলিমেন্টকে div এর ভিতরে ধারন করতে পারে। div
ব্লক লেভেল এলিমেন্ট।
<div
style="border:1px solid #000000">
<h1>Div
Tutorial</h1>
<p>Design
With CSS</p>
</div>
<div
style="border:5px dotted #0000FF">
<h1>Div
Tutorial</h1>
<p>Designed
by CSS</p>
</div>
একটা এইচটিএমএল ডকুমেন্ট এর ভিতরে উপরের কোড লিখলে নিচের ছবির মত দেখাবে।
এখানে দেখুন style দিয়ে "border:1px solid #000000" লেখার কারনে একটা 1px কালো বর্ডার হয়েছে।<div> </div> এর ভিতরে লেখা h1 (hedding1) p (paragraph) সব কিছুই 1px কালো বর্ডার এর ভিতরে আছে। মানে এখানে div দিয়ে একটা নির্দিষ্ট section এর ডিজাইন করা হয়েছে।
অনুরুপ ভাবে border:5px dotted #0000FF দিয়ে বোঝানো হয়েছে যে 5px এর একটি বর্ডার ব্লু (#0000FF) কালারের হবে এবং সেগুলো আলাদা একটা section হিসেবে আছে।
আরেকটি লেআউট নিচে দেখেন।
<div
style="background-color:black;color:white;text-align:center;padding:5px;">
<h1>Div Layout</h1>
</div>
<div
style="border:3px solid #FF00FF;
float:left ;width:46%;margin:2px
">
<h1>Div Layout Example </h1>
<p>div
layout designed by CSS</p>
</div>
<div
style="border:3px solid #FF00FF;
float:left;width:46%;margin:2px
">
<h1>Div Layout Example</h1>
<p>div
layout designed by CSS</p>
</div>
<div
style="background:#000;width:100%;float:left;color:#fff;text-align:center;">
Copyright ©
bdtutorialweb
</div>
এইচটিএমএল ডকুমেন্টে save করলে নিচের ছবির মত দেখাবে।
div এ গ্লোবাল এবং ইভেন্ট এট্রিবিউট ব্যাবহার করতে পারবেন।
গ্লোবাল = id, class, style,
dir etc
ইভেন্ট = onmouseover,
dblclick etc
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন