X

X

X

HTML শিরোনাম (Headings)


মনে রাখবেন HTML document এ শিরোনামসমূহ (Headings) খুবই গুরুত্বপূর্ণ। কেননা Search Engine সমূহ শিরোনামগুলোকে একটি ওয়েব পেজের গুরুত্বপূর্ণ keyword হিসেবে বিবেচনা করে। এটা সত্য যে যদিও একই ধরনের আউটপুট পাওয়ার জন্য CSS ব্যবহার করতে পারেন।


HTML শিরোনাম (Headings)

HTML এ <h1> থেকে <h6> tag ব্যবহার করে শিরোনাম (Heading) লিখা হয়।

<h1> হচ্ছে সবচেয়ে বড় শিরোনাম এবং <h6> সবচেয়ে ছোটো শিরোনাম। নিচের উদাহরণটি লক্ষ্য করুন।

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

HTML5 headings

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বিঃ দ্রঃ : ওয়েব ব্রাউজারসমূহ নিজে থেকে শিরোনামের (Heading) সামনে ও পেছনে কিছু white space (ফাঁকা জায়গা) যোগ করে। সাধারণত এর ডান ও বামে আর কোনো ইলামেন্ট থাকে না। কাজেই এগুলোকে ব্লক ইলামেন্টও বলা হয়।


Headings গুলো সত্যিই গুরুত্বপূর্ণ

আবার বলছি Search Engine সমূহ একটি ওয়েব পেজের স্ট্রাকচার বোঝার জন্য Heading গুলোকে ব্যবহার করে।

ওয়েব ব্যবহারকারীরা এইসব Heading সার্চ ইঞ্জিনে খুঁজে পায় এবং সেগুলো ব্যবহার করেই আপনার পেজে Navigate করে।
<h1> heading কে মূল শিরোনাম লেখার ক্ষেত্রে ব্যবহার করা উচিৎ এবং এরপর <h2> heading, এভাবে ক্রমান্বয়ে <h3> ইত্যাদি।

বিঃদ্রঃ: Heading সমূহকে শুধুমাত্র শিরোনাম লেখার জন্যই ব্যবহার করবেন। টেক্সট স্টাইল যেমন, bold বা highlight করার জন্য ব্যবহার করবেন না। এতে আপনার পেজের সার্চ ইঞ্জন ভিত্তিক স্টাকচার বিঘ্নিত হতে পারে। যদি স্টাইল করার প্রয়োজন হয় তবে সেক্ষেত্রে CSS ব্যবহার করবেন। CSS সম্পর্কে বিস্তারিত আমাদের CSS চ্যাপ্টারে জানতে পারবেন।


বড় শিরোনাম (Heading)

প্রতিটি HTML heading -এর একটি নির্দিষ্ট ডিফল্ট আকার রয়েছে। তবে আপনি এই ডিফল্ট আকারের পরিবর্তন করতে পারেন। CSS বা HTML attribute ব্যবহার করে এই কাজটি করা যাবে।

HTML5 এ বড় আকারের শিরোনাম

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

HTML আনুভূমিক রেখা (Horizontal Rule)

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
আনুভূমিক রেখা প্রদর্শনের জন্য Horizontal rule ( <hr>) ট্যাগ ব্যবহার করা হয়। এটি একটি ব্লক ইলামেন্ট। কাজেই একটি রেখা দ্বারা একটি ইলামেন্টের কন্টেন্টাকে দুটি আলাদাভাগে প্রকাশ করার জন্য এটিকে ব্যবহার করা যেতে পারে।

HTML5 Horizontal Rules (hr)

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


HTML <head> Element

এই Element -এর ভিতের যা কিছু লিখা হোক না কেনো তা পেজে দেখা যায় না। কিন্তু পেজের গুরুত্বপূর্ণ অনেক তথ্য এখানে লিখতে হয়। যেমন, বাইরে থেকে CSS বা Javascript ফাইল লোড করার জন্য, Scale size কত হবে সেটি বর্ণনা করার জন্য পেজের মূল শিরোনাম কি হবে তা বর্ণনা করার জন্য এটি ব্যবহার করা হয়।
সুতরাং, বলা যায় <head > হচ্ছে পেজের মেটাডাটা ধারক (Container) । মনে রাখবেন <head> এবং <h1>, <h2> ইত্যাদি একই জিনিস নয়।
<head> element -কে <html> ও <body> tag-এর মাঝখানে লিখা হয়।

HTML5 Head ELement (head)

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute.</p>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বিঃদ্রঃ: মেটাডাটা বলতে সাধারণত একটি পেজের শিরোনাম (title) , ক্যারাকটার সেট, স্টাইল, লিংক, স্ক্রিপ্ট ও অন্যান্য অনেক গুরুত্বপূর্ণ তথ্যকে বোঝায়।

 কিভাবে অন্য HTML পেজের Source দেখবেন?

কখনো কি আপনার মনে হয়েছে অমুক ওয়েবসাইটের পেজগুলো কত সুন্দর! কিভাবে ডিজাইন করেছে এগুলো ইত্যাদি ইত্যাদি।

HTML Source Code যেভাবে দেখতে হবে:

To find out, right-click in the page and select “View Page Source” (in Chrome) or “View Source” (in IE), or similar in other browsers. This will open a window containing the HTML source code of the page.
প্রথমে পেজের উপর মাউস রেখে ডান বাটন ক্লিক করুন। এরপর গুগল ক্রোম ব্রাউজারে “View Page Source” অথবা ইন্টারনেট এক্সপ্লোরারে “View Source” অপশনে ক্লিক করুন। তবে যদি ঐ ওয়েবসাইটে ডান বাটন বন্ধ করে রাখা হয় তবে এই সুবিধা আপনি সরাসরি পাবেন না। অথবা যদি পেজটি Front-end থেকে টেমপ্লেট তৈরি করে তবে সেক্ষেত্রে View Source -এ গিয়ে কাঙ্খিত কোড দেখতে পাবেন না।

HTML Element পরীক্ষা (Inspect) করুন:

একটি ওয়েব পেজ যখন লোড হয় তখন এটি ব্রাউজারে ডায়নামিক ভাবে কাজ করে। কাজেই পেজের ডায়নামিক অবস্থা দেখতে চাইলে সেটিকে Inspect করতে হবে।
যে ইলামেন্টটিকে Inspect করতে চান সেটির উপরে মাউসের ডান বাটন ক্লিক করুন এবং “Inspect” অথব “Inspect Element” এ ক্লিক করুন। ডায়নামিক্যালি ইলামেন্টের অবস্থা দেখতে পাবেন এবং চাইলে আপনি সেখান থেকে ইলামেন্টকে Edit করতে পারবেন। তবে পেজ Reload করলে আবার আগের অবস্থা ফিরে আসবে। অর্থাৎ, আপনি যা Edit করলেন তা আর থাকবে না।


HTML Tag রেফারেন্স

আমাদের এখানে প্রায় সব ট্যাগ সম্পর্কে বিস্তারিত পাবেন রেফারেন্স শাখায়। ট্যাগ রেফারেন্সে attribute সম্পর্কে আরও অতিরিক্ত তথ্য রয়েছে। পরবর্তী চ্যাপ্টারে ট্যাগ ও ইলামেন্ট সম্পর্কে আরও বিস্তারিত জানতে পারবেন।

Tag নাম বর্ণনা
<html> একটি HTML document এর মূল ইলামেন্ট বোঝায়
<body> এটি দ্বারা document -এর বডি বোঝায়।
<head> সব head element -এর ধারক (Container) এটি।
<h1> to <h6> HTML -এ শিরোনাম লেখার জন্য এগুলো ব্যবহৃত হয়।
<hr> আনুভূমিক রেখা তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি ব্লক ইলামেন্ট।