How to বডি (body) div in Html | SP Foundationbd

body ট্যাগ এর আগের tutorials গুলির প্রায় সব জায়গায় ব্যবহার করা হয়েছে। <body></body> এর ভিতরেই সব কনটেন্ট রাখতে হয়। ul, li, a, h1 ... h6, p, div এক কথায় সব এলিমেন্ট এর ভিতরে থাকবে html আর head এর ভিতর যে কয়েকটি এলিমেন্ট নির্দিষ্ট করা আছে সে কয়েকটি ছাড়া।

যেকোন web page a যান এবং সেটার সোর্স কোড দেখুন, সব element body এর ভিতর দেখতে পাবেন। মজিলা ফায়ারফক্স দিয়ে সোর্স দেখার জন্য ওয়েব পেজের উপর রাইট বাটন click করে "View Page Source" এ click করুন তাহলে পেজটির পুরো html দেখতে পাবেন।

leftmargin, topmargin, text, background, bgcolor এরকম আরো বেশকিছু এট্রিবিউট ছিল body এলিমেন্টের জন্য তবে HTML 5 এ এখন এটা Deprecated (ডেপ্রিকেটেড অর্থ হচ্ছে এইচটিএমএল অর্গানাইজেশন আর এটার জন্য সাপোর্ট দিচ্ছেনা এবং শীঘ্রই এইচটিএমএল থেকে সমপূর্ন সরিয়ে ফেলা হবে তবে সরিয়ে ফেলার আগ পর্যন্ত ব্রাউজার সাপোর্ট করবে backward compitability এর জন্য)।

আরেকটা টেকনিকাল শব্দ আছে Obsolete. এর অর্থ হচ্ছে সম্পূর্ন সরিয়ে ফেলা। যখন কোন কিছু W3C specification থেকে Obsolete করা হয় তার কিছু আগে আগে জিনিসটি Deprecated করে দেয় (HTML Organization)

যাইহোক গ্লোবাল attribute গুলি body element ব্যবহার করা যাবে। আসলে সব এইচটিএমএল এলিমেন্টেই গ্লোবাল এট্রিবিউট ব্যবহার করা যায়। যেমন

dir : ডকুমেন্টের element গুলির দিক নির্নয়ের জন্য। এর ৩টি মান দেয়া যায়

১. ltr দিলে বা থেকে ডানে টেক্টট দেখাবে যেমন আমাদের সাইটটি দেখাচ্ছে।

২. rtl দিলে লেখা ডান থেকে বামে দেখাবে যেমন আরবী, হিব্রু ভাষার সাইটগুলিতে দেখবেন

<body dir="rtl"> এমন থাকে

৩.  auto দিলে ব্রাউজার নিজেই বের করে নেয়ার চেষ্টা করবে যে কোন দিকে দেখাবে। এমন ভাষার যদি সাইট বানান যেটা বা থেকে ডানে নাকি ডান থেকে বামে হবে জানেন না তখন এটা ব্যবহার করতে পারেন।

id, class, style, lang (ভাষার জন্য যেমন বাংলা ভাষার সাইট বানালে দিতে হবে <body lang=''bn">) ইত্যাদি।

<!DOCTYPE html>

<html>

<head>

<title>HTML body element tutorial</title> 

</head>

<body lang="en" id="main_container", style="background:#ddd;">

<h1>SPFoundation demo heading</h1> 

<p>demo content goes here.</p>

 

</body>

</html>

এছাড়া HTML 5 নতুন কিছু এট্রিবিউট আছে এগুলি দিতে পারেন। dropzone, draggable, spellcheck ইত্যাদি। এগুলি নিয়ে পরে আরো উদাহরন + কাজসহ আলোচনা হবে।

ডিভ (Div)

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

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

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

<h1>HTML div tutorial in SPFoundation</h1>

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

 

</div>

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

<h1>HTML div tutorial in SPFoundation</h1>

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

</div>

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

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

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

<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 SPFoundation</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 SPFoundation</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; SPFoundation

</div>

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