HTML পর্ব-৫ : Heading

Heading:

Heading সম্পর্কে আসলে আলাদা ভবে বলার কিছু নেই। সাধারন ভাবে Heading ব্যবহার করা হয় কোন পেজ এর অনেক কিছুর ভীরে একজন visitor যেন সহজে কোন কিছু খুঁজে পান সে জন্য। কিন্তু বস্তুত এর সবথেকে গুরুত্বপূর্ণ দিক হলো, কোন সার্চ ইঞ্জিন সার্চ করার সময় মূ্লত এই Heading গুলো ব্যবহার করেই Indexing করে। তাই আপনার ওয়েব পেজ কে সুন্দর করার জন্য এবং এটি যেন সহজে সার্চ করে পাওয়া যায় সেজন্য অবশ্যই Heading ব্যবহার করা উচিত।

HTML Heading:

HTML Heading : HTML এ ৬ ধরনের Heading পাওয়া যায়। অর্থাৎ HTML এ ৬ টি লেভেলের বা মাপের Heading আছে। এদের কে <h1>, <h2>, <h3>, <h4>, <h5> ও <h6> tag গুলি দিয়ে লেখা হয়। <h1> Heading টি সবথেকে গুরুতবপূর্ণ, তারপর <h2>, <h3> এবং এভাবে পর্যায়ক্রমে <h6>.
HTML Heading নির্ধারনের ক্ষেত্রে আমাদের অবিশ্যই খেয়াল রাখা উচিত যে তা যেন আমাদের লেখার বিষয়ের সাথে সংগতি পূর্ণ হয়। এর পাশাপাশি অবশ্যই খেয়াল রাখতে হবে যে আমরদের Heading এর ক্রম যেন ঠিক থাকে। তাহলে আমাদের ওয়েব পেজ যেমন দেখতে সুন্দর হবে তেমন তা visitor দের জন্যও বোধগম্য পুর্ণহবে। অপরদিকে সার্চ ইঞ্জিন খুব সহজে আপনার সাইট কে খুঁজে পাবে।
নিচে HTML এর ৬ রকমের Heading দেখানো হলো।

Heading Tag

HTML Form	Output
<h1>Heading 1</h1>	Heading 1
<h2>Heading 2</h2>	Heading 2
<h3>Heading 3</h3>	Heading 3
<h4>Heading 4</h4>	Heading 4
<h5>Heading 5</h5>	Heading 5
<h6>Heading 6</h6>	Heading 6

উপরের table এ আমরা দেখতে পাচ্ছি HTML এ কিভাবে ৬ রকমের Heading লেখা হয়।

Heading Size ও সাধারন Text Editor:

HTML তে যে ৬ ধরেন Heading আছে, তারা শুধু তাদের মাপের বা Size এর দিক থেকে ভিন্ন। তাছাড়া তাদের অন্য সব বৈশিষ্ট একি রকম। আমরা যখন কোন Text Editor এ লিখি তখন আমরা নিজের ইচ্ছামত বিভিন্ন মাপের ফন্ট select করতে পারি। এসকল Text Editor Point(pt) এককের ভিত্তিতে Text এর size নির্ধারন করে। এই "pt" এককে ৬ ধরনের HTML Heading ও তাদের উদাহরন নীম্নে দেয়া হলো।

Heading Size With Text

Heading	Level	Size in point
<h1>Heading 1</h1>	level #1	24 point — Largest
<h1>Heading 2</h1>	level #2	18 point
<h1>Heading 3</h1>	level #3	14 point
<h1>Heading 4</h1>	level #4	12 point
<h1>Heading 5</h1>	level #5	10 point
<h1>Heading 6</h1>	level #6	8 point - Smallest

HTML এর ৬ রকমের Heading এবং আমাদের সাধারন Text Editor এর Font size এর মধ্যে সম্পর্ক দেখানো হলো।

Heading Size ও HTML <font> tag:

এছারাও আমরা HTML এ কোড লেখার সময় আমাদের font tag ব্যবহার করে এর size পরিবর্তন করে Heading এর সমান আকারের Font পেতে পারি। নিচে দুটি Table দেয়া হলো। প্রথম Table টিতে একিভাবে HTML Heading ও Html font tag ব্যাবহার করার পদ্ধতি দেখানো হলো এবং দ্বিতীয় টিতে তাদের Output.

Heading & Font tag (code)

HTML Headings	HTML Font tag
<h1>Heading 1</h1>	<font SIZE="6"><b>Heading 1</b></font>
<h2>Heading 2</h2>	<font SIZE="5"><b>Heading 2</b></font>
<h3>Heading 3</h3>	<font SIZE="5"><b>Heading 3</b></font>
<h4>Heading 4</h4>	<font SIZE="5"><b>Heading 4</b></font>
<h5>Heading 5</h5>	<font SIZE="5"><b>Heading 5</b></font>
<h6>Heading 6</h6>	<font SIZE="5"><b>Heading 6</b></font>

Heading & Font tag (output)

HTML Form	Output
Heading 1	Heading 1
Heading 2	Heading 2
Heading 3	Heading 3
Heading 4	Heading 4
Heading 5	Heading 5
Heading 6	Heading 6

HTML Heading With Different Attributes:

আগেই বলেছি যে সব HTML Heading এর বৈশিষ্ট-ই এক। কিন্তু এর মানে এই নয় যে এদের কে কখনো পরিবর্তন করা যায় না। আমরা এর পূর্বেই বিভিন্ন HTML Attributes এর কথা জেনেছি। আমরা এখন বিভিন্ন ধরনের HTML Attributes দিয়ে Heading লেখা শিখবো।

Heading With Align Attributes

Align	Output
<h2 align="left">Left Align</h2>	Left Align
<h2 align="center">Center Align</h2>	Center Align
<h2 align="right">Right Align</h2>	Right Align
<h2>Default Align</h2>	Default Align

উপরের উদাহরন লক্ষ্য করে দেখুন। আমরা তিন ধরনের Align attributes ব্যবহার করার ফলে আমরা তিন ধরনের output পেয়েছি। align="left" attribute এর ক্ষেত্রে আমাদের heading টি তার table cell এর left side এ, align="center" attribute এর ক্ষেত্রে আমাদের heading টি তার table cell এর center এ এবং align="right" attribute এর ক্ষেত্রে আমাদের heading টি তার table cell এর right side এ অবস্থান করছে। এর পরে যে Heading টি আছে সেখানে কোন attrfibute উল্লেখ নেই। ফলে Heading নিজেই তার default alignment attribute তথা "center"-এ অবস্থান করছে। অর্থাৎ আমরা যদি আমাদের Heading এর জন্য কোন align attribute ব্যবহার না করি তাহলে তা সব সময় center এ অবস্থান করবে।
অপর দিকে Heading tag যদি অন্য কোন tag এর content হয় এবং তাহলে Heading এর attribute উল্লেখ না থাকে তাহলে Heading এর alignment অবশ্যই সে যে tag এর content তার উপর নির্ভর করবে। নিচের উদাহরন টি দেখলে ব্যাপারটি আরো সহজ হবে।

Tag এর Content হিসেবে Heading

Align	Output
<div align="left"> <h2>Left Align</h2> </div>	Left Align
<div align="right"> <h2>Right Align</h2> </div>	Right Align
<div align="right"> <h2 align="left">Align overwright</h2> </div>	Align overwright
<div> <h2>Default Alignt</h2> </div>	Default Align

উপরের উদাহরনে আমরা দেখতে পাচ্ছি প্রতি ক্ষেত্রেই heading গুলো <div> tag এর মধ্যে অবস্থিত। প্রথম দুইটির ক্ষেত্রে Heading দ্বয়ের কোন align attribute নেই। তাই তারা যে tag (এক্ষেত্রে <div>) এর content সে tag এর align অনুযায়ী সে ভাবে অবস্থান করবে। এজন্য Heding দ্বয় <div> tag এর alignment অনুযায়ী প্রথম ক্ষেত্রে left এবং দ্বিতীয় ক্ষেত্রে right এ অবস্থান করছে
তৃতীয় ক্ষেত্রে <div> tag এর attribute align="right". অপরদিকে heading এর attribute align="left". যেহেতু heading এর নিজেস্ব attribute আছে তাই এক্ষেত্রে হয়ার কারনে তা তার নিজের attribute অনুযায়ী left এ অবস্থান করবে, অর্থাৎ <div> tag এর attribute align="right" কে overwright করবে।
শেষ উদাহরনে <div> tag বা heading এর কোন align attribute না থাকায় তা heading তার default অর্থাৎ center এ অবস্থান করছে।
উপরের উদাহরনে আমরা দেখতে পাচ্ছি প্রতি ক্ষেত্রেই heading গুলো <div> tag এর মধ্যে অবস্থিত। প্রথম দুইটির ক্ষেত্রে Heading দ্বয়ের কোন align attribute নেই। তাই তারা যে tag (এক্ষেত্রে <div>) এর content সে tag এর align অনুযায়ী সে ভাবে অবস্থান করবে। এজন্য Heding দ্বয় <div> tag এর alignment অনুযায়ী প্রথম ক্ষেত্রে left এবং দ্বিতীয় ক্ষেত্রে right এ অবস্থান করছে
তৃতীয় ক্ষেত্রে <div> tag এর attribute align="right". অপরদিকে heading এর attribute align="left". যেহেতু heading এর নিজেস্ব attribute আছে তাই এক্ষেত্রে হয়ার কারনে তা তার নিজের attribute অনুযায়ী left এ অবস্থান করবে, অর্থাৎ <div> tag এর attribute align="right" কে overwright করবে।
শেষ উদাহরনে <div> tag বা heading এর কোন align attribute না থাকায় তা heading তার default অর্থাৎ center এ অবস্থান করছে।

HTML Heading এর style Attributes:

এতক্ষন আমরা heading এর align attribute সম্পর্কে জানলাম। এখন আমরা কিছু style attribute দেখবো। style attribute সম্পর্কে বিস্তারিত আমাদের Style tag অংশে বর্ণনা করা আছে। আমরা এখানে শুধু এর application দেখবো। নিচের উদাহরন গুলো দেখুন।

<h3 style="color: #66f; font-family: segoe print background-color: #000">Different Attributes</h3>

Different Attributes

এই উদাহরনটিতে আমরা Style attribute ব্যাবহার করে heading তিন ধরনের পরিবর্তন এনেছি। "color:#66f;" এই অংশটি আমাদের heading এর default color black পরিবর্তন করে এক ধরনের light blue color তে পরিবর্তন করেছে। "font-family: segoe print" আমাদের heading এর font এর পরিবর্তন করেছে এবং "background-color: #000" এই অংশটির কারনে আমরা আমাদের heading এর background color হিসেবে black color পেয়েছি।তবে ছাড়াও আরো অনেক ভাবে আমরা পরিবর্তন আনতে পারি। সেগুলো আমরা ধীরে ধীরে শিখবো।

• মনে রাখবেনঃ
• Heading সর্বদা Bold অক্ষরের হয়। তাই Heading লেখার সময় আলাদা ভাবে bold tag <b> দেয়ার কোন প্রয়োজন নেই।
• 
  

***এত সময় আমরা যে সকল Attribute নিয়ে আলোচনা করলাম তা শুধু heading এর জন্য নয়, এগুলো একটি ওয়েব পেজ-এ প্রর্দশিত যেকোন text এর জন্য গুরুত্বপূর্ণ। তাই আপনারা এই সকল attribute এ যত পারদর্শি হবেন ততই সুন্দর করতে পারবেন আপনাদের ওয়েব পেজ কে। তাই চেষ্টা করবেন heading এর এই tutorial টি খুব ভালো ভাবে আয়ত্ত করতে।এর সাথে একটি খুশীর সংবাদ, তা হলো, এর পরের tutorial থেকে আমাদের HTML coding শুরু। এ প্রর্যন্ত আপনাদের উদ্দেশ্যে যে সকল কথা বলা হয়েছে, সেখানে হাতে-কলমে বা Practically করার মত তেমন কিছু ছিলো না। কিন্তু এর পরের Tutorial থেকে আমরা structure অনুযায়ি পূর্ণাঙ্গ কোডিং আকারে আমাদের Lession গুলো দিবো এবং আপনারাও সে অনুযায়ী আমাদের সাথে কাজ করবেন।

HTML পর্বের আগের পোস্ট সমূহ-

>> HTML পর্ব-১ : পরিচয়
>> HTML পর্ব-২ : STRUCTURE
>> HTML পর্ব-৩ : Element
>> HTML পর্ব-8 : Attribute