আসুন HTML শিখি (পর্ব-৫)

এটি 18 পর্বের HTML বেসিক ট্রেনিং ফ্রি বিষয়ক টিউনের 5 পর্ব

আসালামু আলাইকুম। কেমন আছেন সবাই।আশা করি সবাই ভাল আছেন। আজকে ৫ ম পর্ব নিয়ে আসলাম আপনাদের কাছে। গত পর্বগুলি যারা মিস করেছেন তারা এই লিঙ্ক এ ক্লিক করে দেখে নিতে পারেন । ( এই লিঙ্ক এর ভিতর আগের ৪ টি পর্ব আছে । )

***আজকে আমরা আলোচোনা করব heading element নিয়ে।
***প্রথমে আপনাদের মাথায় আসতে পারে heading element কী?

এর উত্তর যদি দিতে বলেন তা হলে আমি বলব →→ ওয়েব পেজের কোন বাক্য বা বাক্যাংশকে শিরোণাম হিসেবে ব্যবহার করার জন্য এই HTML Heading ট্যাগটি ব্যবহৃত হয় ।ওয়ার্ডপ্রেসের যেকোন ব্লগে পোস্ট করার সময় এই ট্যাগটি সরাসরি ব্যবহার করা যায় ।HTML Heading-এর প্রধান কাজ হল পেজ মধ্যস্হ কোন বাক্য বা বাক্যাংশকে মোটা(bold) এবং আকারে বড় করা । এই ট্যাগটি শুরু হয় “<h1>”-এই চিহ্ন দিয়ে আর শেষ হয় “</h1>” -চিহ্ন দিয়ে ।ট্যাগটির h-এর পাশের 1-এর মান 1 থেকে 6 পর্যন্ত হতে পারে ।অর্থাত্‍ <h1> …… </h1>,<h2> …… </h2>,<h3>……</h3>,<h4>……</h4>,<h5>……</h5>,<h6>……</h6> এই রূপে হয়ে থাকে ।এর মধ্যে <h1>-এর লেখার আকার সবচেয়ে বড় আর সবচেয়ে ছোট হল <h6>-এর লেখার আকার ।

চলুন আর একটি উদাহরণ দেখে নেই তা হলে পুরোপরি clear হয়ে যাবে ।

***ধরুন আপনি একটি paragraph লিখছেন। এখন এই পারাগ্রাফ এর শিরোনাম দিতে হবে। তারপর paragraph এর বিষয়বস্তু। আজকে আমরা শিখব কিভাবে এই শিরোনাম দিতে হয়।

***এই শিরোনাম দিতে যে ট্যাগ ব্যাবহার হরা হয় তা হচ্ছে <h1>…………………</h1> ট্যাগ। তো আসুন দেখি কিভাবে এই ট্যাগ ব্যাবহার করা যায়।

***এই ট্যাগ ব্যাবহার করা খুবই simple.আপনি যেই লাইনকে শিরোনাম বানাতে চান,সেই লাইন এর শুরুতে <h1> আর লাইন এর শেষে </h1> অ্যাড করুন। আসুন এবার এই নিয়ম অনুসারে একটি কোডিং করি।

যদি দেখে দেখে লিখতে problem হয় তা হলে নিছে আমি সবটুক code দিয়ে দিলাম । আপনি শধু নিছের code গুলো কপি করে notepad এ paste করেন ।

CODE

<html>
<head>
<title>www.pchelpcenterbd.com</title>
</head>
<body>
<h1>This is a Paragraph</h1>
<p>A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of many sentence.They are usually between four to eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again; this makes telling when one paragraph ends and another begins easier.</p>
</body>
</html>

***এবার এটিকে নোটপ্যাড এ লিখে a.html দিয়ে সেভ করে double click করে ওপেন করুন। দেখুন নিছের ছবির মত আসছে ।

***এতক্ষন আমারা শিখলাম কিভাবে heading দেওয়া যায় । এবার আমরা শিখব heading এর নানা রুপ নিয়ে।

***এই লেখাটি মন দিয়ে পড়ুন । কারন পরবর্তীতে অনেক টিউন এ এটার ব্যাবহার রয়েছে। খুব ভাল করে পরবেন তা হলে ভাল এবং তারাতারি শিকতে পারবেন ।

আমরা যে heading নিয়ে আলোচোনা করেছি তার ৬টি রুপ আছে । আসুন দেখি সেগুলো কি কি?

নিচে দেখুন

***আপনাদের মনে প্রশ্ন আস্তে পারে h1,h2,h3,h4,h5,h6 কেন?? আমি start হওয়ার সময় এই নিয়ে একটু আলোচনা করছিলাম এখন বিস্তারিত বলছি ।

***খুবই সহজ ব্যাপার। h1 হতে ক্রমানুসারে যত নিচের দিকে নামতে থাকবে heading তত ছোট হতে থাকবে।মানে <h1>……..</h1> হতে <h2>…….</h2> এর heading ছোট। আর <h6>…….</h6> এর heading সবছেয়ে ছোট।

***তাহলে আসুন এবার বাস্তব উদাহরন দেখি। আপনারা নিচের এই কোডিংটুকু লিখুন।

<html>
<head>
<title> www.pchelpcenterbd.com</title>
</head>
<h1>This is an example of heading 1</h1>
<h2>This is an example of heading 2</h2>
<h3>This is an example of heading 3</h3>
<h4>This is an example of heading 4</h4>
<h5>This is an example of heading 5</h5>
<h6>This is an example of heading 6</h6>
</body>
</html>

*** নোটপ্যাড এ লিখে এবার এটাকে aya.html নামে সেভ করে double click করে ওপেন করুন। দেখুন নিচের ছবির মত আসছে ।