স্বাগতম! এই কোর্সের দ্বিতীয় দিনে আমরা HTML এর IBasic Tags এবং HTML Text Formatting নিয়ে আলোচনা করবো। নতুনদের জন্য এটি একদম বেসিক থেকে তৈরি করা হয়েছে যাতে সহজে বুঝতে পারো এবং পরবর্তীতে HTML এর উপর ভালো ধারণা তৈরি করতে পারো।
HTML কি?
HTML এর পুরো অর্থ হলো Hypertext Markup Language। এটা এমন একটি ভাষা যেটা ওয়েব পেজ বানাতে সবচেয়ে বেশি ব্যবহার করা হয়।
- Hypertext এমন একধরনের লেখা, যা অন্য পেজ বা ফাইলের সঙ্গে লিঙ্ক হয়ে থাকে। আপনি যখন ওয়েবসাইটে ক্লিক করে অন্য কোনো পেজে যান, তখন সেটা Hypertext-এর মাধ্যমে হয়।
- এর নাম থেকেই বোঝা যায়, HTML একটি Markup Language, যার মানে হলো— আপনি HTML ব্যবহার করে কোনো টেক্সট ডকুমেন্টকে “mark-up” করতে পারেন, যার মাধ্যমে ব্রাউজার বুঝে নেয় কীভাবে এটি প্রদর্শন করবে।
HTML তৈরি হয়েছিল কেন?
HTML শুরুতে তৈরি করা হয়েছিল ডকুমেন্টের গঠন নির্ধারণ করার জন্য যেমন: heading, paragraph, list ইত্যাদি — যাতে গবেষকরা একে অপরের সাথে বৈজ্ঞানিক তথ্য শেয়ার করতে পারেন।
বর্তমানে HTML ব্যাপকভাবে ব্যবহৃত হচ্ছে ওয়েব পেজ ডিজাইন ও ফরম্যাট করতে, HTML এর বিভিন্ন ট্যাগ ব্যবহার করে।
Basic HTML Document
HTML ডকুমেন্ট শুরু হয় <!DOCTYPE html> দিয়ে, যা বলে দিচ্ছে এটি HTML5 ডকুমেন্ট।
তারপর থাকে:
-
<html> – মূল কাঠামো
-
<head> – তথ্য যেমন টাইটেল
-
<body> – আপনার ওয়েবপেজের দৃশ্যমান অংশ
সবচেয়ে সাধারণভাবে নিচে একটি HTML ডকুমেন্টের উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
এই কোড আপনি test.htm নামে সেভ করে যেকোনো ব্রাউজারে খুললেই আউটপুট দেখতে পারবেন।
অবশেষে, এই ফাইলটি আপনি যেকোনো ওয়েব ব্রাউজার (যেমন: Google Chrome, Firefox, অথবা Internet Explorer) দিয়ে চালাতে পারেন।
চালানোর পর নিচের মতো আউটপুট দেখা যাবে:
HTML Tags
আগেই বলা হয়েছে, HTML একটি Markup Language এবং এতে বিভিন্ন ট্যাগ ব্যবহার করে কনটেন্ট ফরম্যাট করা হয়।
HTML এ প্রায় সব কিছুর জন্যই নির্দিষ্ট ট্যাগ আছে। প্রতিটি ট্যাগ দুই অংশে হয়:
-
Opening Tag → <tagname>
-
Closing Tag → </tagname>
যেমন:
<code><p>Paragraph Text</p></code>
<code><h1>Heading Text</h1></code>
HTML ডকুমেন্টে ব্যবহৃত কিছু সাধারণ ট্যাগ:
| ট্যাগ (Tag) | বর্ণনা (Description) |
|---|---|
| <!DOCTYPE…> | এই ট্যাগটি ডকুমেন্টের ধরন এবং HTML ভার্সন নির্ধারণ করে। |
| <html> | এই ট্যাগটি পুরো HTML ডকুমেন্টকে ঘিরে রাখে। এর মধ্যে থাকে header অংশ (<head>…</head>) এবং body অংশ (<body>…</body>)। |
| <head> | এই ট্যাগটি header উপস্থাপন করে, যার মধ্যে <title>, <link> ইত্যাদি ট্যাগ রাখা যায়। |
| <title> | এই ট্যাগটি <head> ট্যাগের ভিতরে ব্যবহার করা হয় ডকুমেন্টের শিরোনাম (title) প্রদর্শনের জন্য। |
| <body> | এই ট্যাগটি ডকুমেন্টের দৃশ্যমান অংশকে উপস্থাপন করে, যেখানে থাকে <h1>, <div>, <p> ইত্যাদি ট্যাগ। |
| <h1> | এই ট্যাগটি হেডিং (শিরোনাম) উপস্থাপন করে। |
| <p> | এই ট্যাগটি অনুচ্ছেদ (paragraph) উপস্থাপন করে। |
HTML শেখা খুব কঠিন নয়। আপনি যদি একবার বুঝতে পারেন কোন ট্যাগ কী কাজ করে, তাহলে সহজেই একটি সুন্দর ওয়েবপেজ বানাতে পারবেন।
W3C (World Wide Web Consortium) পরামর্শ দিয়েছে HTML লেখার সময় ছোট হাতের ট্যাগ ব্যবহার করতে।
HTML Document Structure
একটি সাধারণ HTML ডকুমেন্টের নিম্নলিখিত কাঠামো থাকবে:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE> Declaration
ডকুমেন্টে ব্যবহৃত HTML এর ভার্সন বোঝার জন্য ওয়েব ব্রাউজার <!DOCTYPE> ট্যাগ ব্যবহার করে। HTML এর বর্তমান ভার্সন ৫ এবং এটি নিম্নলিখিত ব্যবহার করে:
<!DOCTYPE html>
HTML ডকুমেন্টে আরও অনেক ধরণের ব্যবহার করা যেতে পারে যা HTML এর কোন সংস্করণ ব্যবহার করা হচ্ছে তার উপর নির্ভর করে। আমরা অন্যান্য HTML ট্যাগের সাথে <!DOCTYPE…> ট্যাগ নিয়ে আলোচনা করার সময় এই বিষয়ে আরও বিস্তারিত দেখব।
Heading Tags
প্রতিটি ডকুমেন্ট সাধারণত একটি শিরোনাম বা হেডিং দিয়ে শুরু হয়। HTML-এ হেডিং প্রদর্শনের জন্য ছয়টি ভিন্ন স্তরের ট্যাগ রয়েছে—যেগুলো হলো: <h1> থেকে শুরু করে <h6> পর্যন্ত। এর মধ্যে <h1> সবচেয়ে বড় এবং <h6> সবচেয়ে ছোট হেডিং। যখন আপনি একটি হেডিং ব্যবহার করেন, তখন ব্রাউজার স্বয়ংক্রিয়ভাবে তার আগে ও পরে কিছু জায়গা (space) রেখে দেয়, যাতে তা অন্যান্য কনটেন্ট থেকে আলাদা দেখা যায়।
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
<p> ট্যাগটি HTML-এ লেখাকে আলাদা আলাদা অনুচ্ছেদ বা প্যারাগ্রাফে ভাগ করার জন্য ব্যবহৃত হয়। প্রতিটি প্যারাগ্রাফ <p> দিয়ে শুরু হয় এবং </p> দিয়ে শেষ হয়। নিচের উদাহরণে এটি কিভাবে ব্যবহার করতে হয় তা দেখানো হয়েছে।
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
যখনই আপনি <br /> এলিমেন্ট ব্যবহার করেন, তখন এর পরে থাকা যেকোনো কিছু পরবর্তী লাইন থেকে শুরু হয়। এই
ট্যাগটি একটি খালি এলিমেন্টের উদাহরণ, যেখানে আপনার খোলা এবং বন্ধ করার ট্যাগের প্রয়োজন নেই, কারণ
এগুলির মধ্যে যাওয়ার মতো কিছুই নেই।
<br /> ট্যাগে br অক্ষর এবং ফরোয়ার্ড স্ল্যাশের মধ্যে একটি স্পেস থাকে। যদি আপনি এই
স্থানটি বাদ দেন, তাহলে পুরোনো ব্রাউজারগুলির লাইন ব্রেক রেন্ডার করতে সমস্যা হবে, আর যদি আপনি ফরোয়ার্ড স্ল্যাশ অক্ষরটি বাদ দেন এবং কেবল <br> ব্যবহার করেন তবে এটি XHTML-এ বৈধ নয়।
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
উপরের কোড চালালে নিচের ফলাফল দেখা যাবে:
Hello
You delivered your assignment on time.
Thanks
Mahnaz
Centering Content
আপনি পৃষ্ঠার কেন্দ্রে অথবা যেকোনো টেবিল কক্ষে যেকোনো বিষয়বস্তু রাখতে <center> ট্যাগ ব্যবহার করতে পারেন।
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
উপরের কোড চালালে নিচের ফলাফল দেখা যাবে:
This text is in the center.
Horizontal Lines
HTML ডকুমেন্টে যখন আপনি চাইবেন বিভিন্ন অংশকে আলাদাভাবে প্রদর্শন করতে, তখন অনুভূমিক একটি রেখা ব্যবহার করা যায়। এটি করার জন্য <hr> ট্যাগ ব্যবহার করা হয়। এই ট্যাগ যেখানে বসানো হয়, সেখান থেকে পুরো পৃষ্ঠার প্রস্থজুড়ে একটি সরল রেখা আঁকা হয়, যা সেই অংশটিকে পরবর্তী কনটেন্ট থেকে স্পষ্টভাবে আলাদা করে দেখায়।
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
উপরের কোড চালালে নিচের ফলাফল দেখা যাবে:
This is paragraph one and should be on top
This is paragraph two and should be at bottom
<hr /> ট্যাগটি একটি খালি (empty) এলিমেন্ট, অর্থাৎ এর মধ্যে কোনো কনটেন্ট থাকে না। তাই এর জন্য আলাদা করে শুরু ও শেষ ট্যাগ ব্যবহার করতে হয় না।
এই ট্যাগে hr ও ফরোয়ার্ড স্ল্যাশ (/) এর মাঝে একটি স্পেস রাখা ভালো, বিশেষ করে পুরনো ব্রাউজারগুলো ঠিকভাবে রেখা দেখাতে যেন সমস্যা না করে। তবে, যদি আপনি কেবল <hr> লেখেন (স্ল্যাশ ছাড়া), তাহলে সেটা HTML-এ চলে গেলেও XHTML স্ট্যান্ডার্ড অনুযায়ী সেটি সঠিক নয়।
Preserve Formatting
কখনো কখনো এমন হয় যে আপনি চান—যেভাবে আপনি HTML ডকুমেন্টে লেখাটি টাইপ করেছেন, ঠিক সেভাবেই সেটি প্রদর্শিত হোক। এই ধরনের পরিস্থিতিতে <pre> নামের প্রিফর্ম্যাটেড ট্যাগ ব্যবহার করা হয়।
এই ট্যাগের শুরু <pre> এবং শেষ </pre> এর মাঝের যেকোনো লেখা ব্রাউজার ঠিক একই ফরম্যাটে দেখায়—যেমন লাইনের ব্যবধান, স্পেস, ইনডেন্ট ইত্যাদি।
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
একই কোডটি একবার চেষ্টা করুন কিন্তু <pre>…</pre> ট্যাগের ভিতরে না রেখে।
Nonbreaking Spaces
ধরুন আপনি “12 Angry Men” এই বাক্যাংশটি ব্যবহার করতে চান। আপনি নিশ্চয়ই চান না যে ওয়েব ব্রাউজার এটি ভেঙে “12,” “Angry” এবং “Men”—তিনটি শব্দ আলাদা লাইনে দেখাক।
এই ধরনের সমস্যার সমাধানে, আপনি non-breaking space ব্যবহার করতে পারেন। সাধারণ space-এর জায়গায় (নন-ব্রেকিং স্পেস) ব্যবহার করলে ব্রাউজার ওই শব্দগুলোকে একই লাইনে রাখবে।
যেমন ধরুন, আপনি যদি HTML প্যারাগ্রাফে “12 Angry Men” লিখতে চান, তবে নিচের মতো করে কোড লিখতে পারেন:
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
তাহলে ভাই ভালো থাকুন সুস্থ থাকুন BanglaTrick এর সাথে থাকুন । আর এই সাইট যদি ভালো লাগে আপনার বন্ধুদের জানাবেন । ধন্যবাদ ।