লেসন ৪: বডি element

এই আলোচনাটি একটু বেশি দীর্ঘ হতে চলেছে কারন আমরা আমাদের ওয়েবপেজে text ফরম্যাটিং এর জন্য বিভিন রকমের element নিয়ে কাজ করব। এই পাঠে আমরা প্রত্যেকটি element এর মৌলিক গঠন ব্যবহার করতে যাচ্ছি। পরবর্তী পাঠে আপনারা শিখবেন কিভাবে text color, background color, font size, font style, text-alignment এবং অন্যান্য স্টাইলিং অপশন ব্যবহার করা যায়।

আপনার সুবিধার জন্য, আমি নিচে মেটা ট্যাগের HTML কোড দিয়ে দিয়েছি। নিচের কোডটিকে কপি করে নোটপ্যাড এর নতুন ডকুমেন্ট এ টেম্পলেট কোডের হেড element এ পেস্ট করে দিন,

<meta name="keywords" content=" ">
<meta name="description" content=" ">

Block-level এবং Inline element

প্রথমত আপনাকে HTML ডকুমেন্ট এ বডি সেকশনের মধ্যে থাকা দুটি ভিন্ন শ্রেণির element এর ব্যাপারে জানা দরকার যেটা হল, ১. block level element এবং ২. ইনলাইন element

দুই শ্রেণির এলিমেন্টের মধ্যে একটা পার্থক্য হল যখন ব্রাউজারে রেন্ডার করবে, তখন দৃশ্যগতভাবে block level element একটি নতুন লাইন নিয়ে শুরু হয় যেখানে ইনলাইন element এর ক্ষেত্রে এটা সম্ভব নয়।

আরেকটা পার্থক্য হল, block level element, ইনলাইন এবং কিছু block level element ধারন করতে পারে, অন্যদিকে ইনলাইন element শুধু মাত্র text এবং কিছু ইনলাইন element ধারন করতে পারবে।

উদাহরণস্বরূপ, block level element রুপে ব্যবহৃত heading (H), প্যারাগ্রাফ(P), ফর্ম(FORM), ডিভিশন(DIV), টেবিল(TABLE), এবং লিস্ট(OL/UL/DL) element।

Inline element হল সেগুলো যারা প্যারেন্ট এলিমেন্টের মধ্যে থেকে text ফরম্যাটিং করতে সাহায্য করে, যেমন বোল্ড(B) text, আন্ডারলাইন(U) text, সাবস্ক্রিপ্ট(SUB), সুপারস্ক্রিপ্ট(SUP), অ্যাঙ্কার ও হাইপারলিঙ্ক(A) ইত্যাদি।
আমরা এই টিউটোরিয়ালের কোর্সের মধ্য দিয়ে বিভিন্ন রকমের এলিমেন্টের সঙ্গে পরিচিত হব।

heading

heading  এলিমেন্টের জন্য H কথাটি লেখা হয়। heading এলিমেন্টে ৬টি স্তরের heading ব্যবহার করা হয়, যেখানে H1 হল বৃহত্তর এবং H6 হল ক্ষুদ্রতর heading এলিমেন্ট। heading এলিমেন্ট হল একধরনের ব্লক লেভেল এলিমেন্ট যাতে অন্যান্য এলিমেন্টের মত একটি ওপেনিং ট্যাগ, কিছু text এবং একটি ক্লোজিং ট্যাগ থাকে।

উদাহরনঃ ব্রাউজারে নিচের কোড যেরকম দেখাবে

<h1>H1 - the biggest headline</h1>
<h2>H2 - smaller than H1</h2>
<h3>H3 - smaller than H2</h3>
<h4>H4 - smaller than H3</h4>
<h5>H5 - smaller than H4</h5>
<h6>H6 - the smallest headline</h6>

যখন আপনি h1 heading element ব্যবহার করবেন সেক্ষেত্রে আপনাকে ওয়েবপেজের শুরুতেই এই h1 heading element ব্যবহার করা যুক্তিযুক্ত। প্রত্যেকটি ওয়েবপেজে প্রথম শ্রেণীর এলিমেন্ট একবারই ব্যবহার করা বাঞ্ছনীয়, প্রথম শ্রেণির এলিমেন্টের(h1) একের বেশি অতিরিক্ত ব্যবহারের ক্ষেত্রে SEO (Search Engine Optimization) এর উপর খারাপ প্রভাব পড়ে।

প্যারাগ্রাফ

আপনার ওয়েবপেজের বেশিরভাগ লেখা প্যারাগ্রাফ দ্বারা সজ্জিত থাকে।এই উদ্দেশ্যেই আমরা P এলিমেন্ট ব্যবহার করব। নিচের উদাহরণে দুটো প্যারাগ্রাফ দেখানো হয়েছে,

উদাহরনঃ ব্রাউজারে নিচের কোড যেরকম দেখাবে

<p>এটি একটি অনুচ্ছেদ। এটি একটি ওপেনিং ট্যাগ দিয়ে শুরু হয়...</p>
<p>দুই অনুচ্ছেদের মধ্যে একটি ফাঁকা লাইন সবসময় থাকে।</p>

নিচের ভিডিওতে আমি দেখাব কিভাবে আপনি ওয়েবপেজে কিছু প্যারাগ্রাফ যোগ করবেন, সেখানে আপনি প্যারাগ্রাফ সংক্রান্ত আরও মৌলিক ধারনা পাবেন, আশাকরি এই গুরুত্বপূর্ণ ভিডিও টাকে আপনি স্কিপ করবেন না। আপনার HTML কোডের মধ্যে থাকা বিভিন্ন সাদা স্পেস এবং ফাকা লাইন মিশে গিয়ে ব্রাউজার দ্বারা একটি ব্ল্যাঙ্ক স্পেস তৈরি হয়। আপনি দেখবেন কিভাবে ব্রাউজারকে বাধ্য করা যায় দুটো লেখার মধ্যে নতুন একটা লাইন ব্রেক তৈরি করার <br /> ট্যাগ দিয়ে।

Text ফরম্যাটিং-এর জন্য element সমূহ

কয়েকটি বিশেষ element text ফরম্যাটিং করতে সাহায্য করে। এই সব element opening tag, কিছু text এবং closing tag নিয়ে তৈরি হয়। নিচের টেবিলে আপনি দেখতে পাবেন সেই element গুলির নাম, ব্রাউজারে text গুলির উপর element গুলির প্রভাব এবং element গুলির ব্যবহারের উদাহরণ।

Name	Display Example	HTML Code
em	emphasized text	<em>emphasized text</em>
strong	bold text	<strong>bold text</strong>
u	underlined text	<u>underlined text</u>
sup	Asuperscript f.ex.: E=mc2	A<sup>superscript</sup> f.ex.: E=mc<sup>2</sup>
sub	Asubscript f.ex.: H2O	A<sub>subscript</sub> f.ex.: H<sub>2</sub>O
strike	strike-through	<strike>strike-through</strike>
tt	teletype writer	<tt>teletype writer</tt>

Element গুলির সঠিক ক্রমে ব্যবহার (Correct nesting of elements)

Element গুলিকে নিয়ে পরীক্ষা করবার আগে আপনাকে বিভিন্ন element এর সঠিকভাবে “nesting” করতে হবে, অর্থাৎ HTML এর বিভিন্ন element গুলির opening এবং closing tag সঠিক ক্রমে রাখতে হবে।
নিচে দুটি লাইন দিয়ে উদাহরণ দেখানো হয়েছে। প্রথম লাইনে pargraph(ব্লক লেভেল এলিমেন্ট) ট্যাগের মধ্যে strong element সঠিক ভাবে উপস্থাপন করা হয়েছে, আবার strike  এবং u এলিমেন্ট সঠিক ক্রমে strong element এর মাঝে রাখা হয়েছে। U এলিমেন্টের মাঝে আবার em element ব্যবহার করা হয়েছে। যদিও, দ্বিতীয় লাইন একটি অবৈধ HTML code যদিও ব্রাউজার এই অবৈধ HTML কোডকে সঠিকভাবে আমাদের দেখায়।

উদাহরনঃ ব্রাউজারে নিচের কোড যেরকম দেখাবে

<p>কিনুন <b><strike>৪০ টাকায়</strike> <u><big>মাত্র ২০ টাকায়</big></u></b></p> 
<p>কিনুন <strike><b>৪০ টাকায়</strike> <big><u>মাত্র ২০ টাকায়</b></u></big></p>

এই সম্পর্কে আরও ভালভাবে বুঝতে আপনাদের জন্য নিচে আমি একটি ছবি যোগ করেছি,

HTML Comment

কখনও কখনও আপনার ডকুমেন্টে মন্তব্য(comment) যোগ করা খুবই কার্যকরী কারন যদি আপনার ওয়েবপেজ খুব বড় হয় তাহলে অনেকসময় কনফিউশন এড়ানোর জন্য মন্তব্য যোগ করতে হয়। মন্তব্যে অনেক সময় কিছু নির্দেশ দেওয়া থাকে যে আমাদের ডকুমেন্টের গঠন কেমন হবে, এই মন্তব্য ডেভেলপার দের বুঝতে সাহায্য করবে ওয়েবপেজে HTML code কেন ব্যবহার করা হয়েছে। তাছাড়া কোন HTML code কে অদৃশ্য রাখার জন্যও কমেন্ট ব্যবহার করা হয়।

মন্তব্য শুরু হয় “<!--” এবং শেষ হয় “-->” দিয়ে। ফলে ব্রাউজারে যখন ডকুমেন্ট লোড হবে তখন কিন্তু এই কমেন্টে যে সমস্ত লেখা থাকবে তখন এটা ব্রাউজার দেখাবে না।

<!-- এটি একটি মন্তব্য (কমেন্ট) -->