একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল বডি ও ডিভ সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-10 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব। সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল বডি ও ডিভ (HTML Body & Div: Part-10)
এইচটিএমএল বডি (HTML Body):
body ট্যাগ এর আগের টিউটোলিয়ালগুলির প্রায় সব জায়গায় ব্যবহার করা হয়েছে। <body></body> এর ভিতরেই সব কনটেন্ট রাখতে হয়। ul, li, a, h1 … h6, p, div এক কথায় সব এলিমেন্ট এর ভিতরে থাকবে html আর head এর ভিতর যে কয়েকটি এলিমেন্ট নির্দিষ্ট করা আছে সে কয়েকটি ছাড়া।
যেকোন ওয়েব পেজে যান এবং সেটার সোর্স কোড দেখুন, স……ব এলিমেন্ট body এর ভিতর দেখতে পাবেন। মজিলা ফায়ারফক্স দিয়ে সোর্স দেখার জন্য ওয়েব পেজের উপর রাইট বাটন ক্লিক করে “View Page Source” এ ক্লিক করুন তাহলে পেজটির পুরো এইচটিএমএল দেখতে পাবেন।
leftmargin, topmargin, text, background, bgcolor এরকম আরো বেশকিছু এট্রিবিউট ছিল body এলিমেন্টের জন্য.
তবে HTML 5 এ এখন এটা Deprecated (ডেপ্রিকেটেড অর্থ হচ্ছে এইচটিএমএল অর্গানাইজেশন আর এটার জন্য সাপোর্ট দিচ্ছেনা এবং শীঘ্রই এইচটিএমএল থেকে সমপূর্ন সরিয়ে ফেলা হবে তবে সরিয়ে ফেলার আগ পর্যন্ত ব্রাউজার সাপোর্ট করবে backward compitability এর জন্য)।
আরেকটা টেকনিকাল শব্দ আছে Obsolete. এর অর্থ হচ্ছে সম্পূর্ন সরিয়ে ফেলা। যখন কোন কিছু W3C specification থেকে Obsolete করা হয় তার কিছু আগে আগে জিনিসটি Deprecated করে দেয় (এইচটিএমএল অর্গানাইজেশন)
যাইহোক গ্লোবাল এট্রিবিউটগুলি body এলিমেন্টে ব্যবহার করা যাবে। আসলে সব এইচটিএমএল এলিমেন্টেই গ্লোবাল এট্রিবিউট ব্যবহার করা যায়। যেমন
এইচটিএমএল বডি ও ডিভ –
dir : ডকুমেন্টের এলিমেন্টগুলির দিক নির্নয়ের জন্য। এর ৩টি মান দেয়া যায়
১. ltr দিলে বা থেকে ডানে টেক্টট দেখাবে যেমন আমাদের সাইটটি দেখাচ্ছে।
২. rtl দিলে লেখা ডান থেকে বামে দেখাবে যেমন আরবী, হিব্রু ভাষার সাইটগুলিতে দেখবেন
<body dir=”rtl”> এমন থাকে
৩. auto দিলে ব্রাউজার নিজেই বের করে নেয়ার চেষ্টা করবে যে কোন দিকে দেখাবে।
এমন ভাষার যদি সাইট বানান যেটা বা থেকে ডানে নাকি ডান থেকে বামে হবে জানেন না তখন এটা ব্যবহার করতে পারেন।
id, class, style, lang (ভাষার জন্য যেমন বাংলা ভাষার সাইট বানালে দিতে হবে <body lang=”bn”>) ইত্যাদি।
01.<!DOCTYPE html>02.<html>03.<head>04.<title>HTML body element tutorial</title>05.06.</head>07.<bodylang="en"id="main_container",style="background:#ddd;">08.09.<h1>Jagorik demo heading</h1>10.11.<p>demo content goes here.</p>12.13.</body>14.</html>
এছাড়া HTML 5 নতুন কিছু এট্রিবিউট আছে এগুলি দিতে পারেন। dropzone, draggable, spellcheck ইত্যাদি। এগুলি নিয়ে পরে আরো উদাহরন + কাজসহ আলোচনা হবে।
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল ডিভ টিউটোরিয়াল:
div ট্যাগ (<div></div>) খুব গুরত্বপূর্ন একটি ট্যাগ এইচটিএমএল এর। এইচটিএমএল এর এলিমেন্ট এর ভিতরে রেখে section (খন্ড) তৈরী করা হয়। যতগুলি div ততগুলি খন্ড। একটা <div></div> এলিমেন্ট তার ভিতরে থাকা সব এলিমেন্টের জন্য পাত্র বা container হিসেবে কাজ করে।
লেআউট বানানোর জন্য div এর জুরি নেই। এইচটিএমএল এ লেআউটের জন্য টেবিল ব্যবহার শূন্যের কোঠায় চলে এসেছে বিভিন্ন কারনে। আর তাই div এখন লেআউট তৈরীর অবিচ্ছেদ্য উপাদান।
01.<divstyle="border:1px solid #f00">02.<h1>HTML div tutorial in Jagorik</h1>03.<p>Basically div layout designed by CSS</p>04.05.</div>06.<divstyle="border:1px solid #f00">07.<h1>HTML div tutorial in Jagorik</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.<divstyle="float:left;background:yellow;width:100%;">02.<ul>03.<li>item1</li>04.<li>item 2</li>05.</ul>06.</div>07.<divstyle="border:1px solid #f00; float:left ;width:48% ">08.09.<h1>HTML div tutorial in Jagorik</h1>10.11.<p>Basically div layout designed by CSS</p>12.13.</div>14.15.<divstyle="border:1px solid #f00; float:left;width:48%;margin-left:5px">16.17.<h1>HTML div tutorial in Jagorik</h1>18.19.<p>Basically div layout designed by CSS</p>20.21.</div>22.<divstyle="background:#000;width:100%;float:left;color:#fff;text-align:center;">23.Copyright © Webcoachbd24.</div>
div এ গ্লোবাল (যেমন id, class, style, dir etc) এবং ইভেন্ট এট্রিবিউট (যেমন onmouseover, dblclick etc) ব্যবহার করা যাবে।
এইচটিএমএল বডি ও ডিভ –
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
