এইচটিএমএল-এর মূল বিষয়সমূহ
এই প্রবন্ধে, আমরা এইচটিএমএল-এর মৌলিক বিষয়সমূহ ব্যাখ্যা করি।
এটি DOCTYPE ঘোষণা, <html>, <head>, এবং <body> ট্যাগের মতো প্রধান ট্যাগগুলো ব্যাখ্যা করে। এটি ট্যাগ, অ্যাট্রিবিউট এবং বিশেষ অক্ষরগুলিও বর্ণনা করে।
YouTube Video
এইচটিএমএল-এর মূল বিষয়সমূহ
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>ফাইলের শুরুতে, আমরা ঘোষণা করি যে এটি একটি HTML5 ডকুমেন্ট, যা নির্দেশ করে যে এটি HTML5 এর নিয়মগুলি অনুসরণ করে।
-
<html><html>ট্যাগ একটি HTML ডকুমেন্টের বাহ্যিক উপাদান, যা পুরো বিষয়বস্তু মোড়ায়। প্রত্যেকটি HTML ফাইলে কেবল একটি<html>ট্যাগ থাকে, এবং সমস্ত অন্যান্য ট্যাগগুলি এই ট্যাগের ভিতরে নেস্ট করা থাকে। উদ্বোধনী<html>ট্যাগের ভিতরেরlang="en"এটিকে একটি অ্যাট্রিবিউট বলা হয় এবং এটি ব্রাউজারকে জানায় যে ডকুমেন্টটি ইংরেজিতে লেখা। এটি স্ক্রীন রিডার এবং সার্চ ইঞ্জিনকে ডকুমেন্টের ভাষা সম্পর্কে জানাতে সাহায্য করে। -
<head><head>ট্যাগ পৃষ্ঠার মেটাডেটা (তথ্য) সংজ্ঞায়িত করে। এতে পৃষ্ঠা শিরোনাম, চরিত্র এনকোডিং এবং প্রতিক্রিয়াশীল নকশা সেটিংস অন্তর্ভুক্ত। প্রতিক্রিয়াশীল নকশা বলতে ওয়েবসাইট বা অ্যাপ্লিকেশনগুলির জন্য এমন একটি পদ্ধতি বোঝানো হয় যা বিভিন্ন ডিভাইস এবং স্ক্রিন আকারে ভালভাবে মানিয়ে নিয়ে প্রদর্শিত হতে পারে। এটি ব্যবহারকারীদের স্মার্টফোন, ট্যাবলেট এবং ডেস্কটপের মতো বিভিন্ন ডিভাইসে স্বাচ্ছন্দ্যে সামগ্রী দেখতে সক্ষম করে।<meta charset="UTF-8">ডকুমেন্টের চরিত্র এনকোডিংকে UTF-8 হিসাবে নির্ধারণ করে।<meta name="viewport" content="width=device-width, initial-scale=1.0">এমন একটি সেটিং যা মোবাইল ডিভাইসের জন্য প্রদর্শন অপ্টিমাইজ করে। পৃষ্ঠাটি ডিভাইসের স্ক্রিনের প্রস্থের সাথে সামঞ্জস্যপূর্ণ হয়।<title>ব্রাউজার ট্যাবে প্রদর্শিত পৃষ্ঠার শিরোনামকে প্রতিনিধিত্ব করে। এই উদাহরণে, 'Basics of HTML' শিরোনাম সেট করা হয়েছে। -
<body><body>ট্যাগে সেই অংশটি থাকে যা ব্যবহারকারীদের কাছে বিষয়বস্তু প্রদর্শন করে। এই ট্যাগের মধ্যে, লেখা, চিত্র, লিঙ্ক ইত্যাদি লেখা হয়। -
<main><main>ট্যাগ পৃষ্ঠার প্রধান বিষয়বস্তুকে প্রতিনিধিত্ব করে। এতে শিরোনাম এবং অনুচ্ছেদ অন্তর্ভুক্ত। -
<h1><h1>ট্যাগ পৃষ্ঠার সবচেয়ে গুরুত্বপূর্ণ শিরোনামকে প্রতিনিধিত্ব করে। একটি ডকুমেন্টে<main>ট্যাগ এবং<h1>ট্যাগ কেবল একবার ব্যবহার করা সাধারণ। -
<p><p>ট্যাগ একটি অনুচ্ছেদকে প্রতিনিধিত্ব করে। -
<!-- Comment -->আপনি এই ফর্ম্যাটে HTML-এ মন্তব্য লিখতে পারেন। যেহেতু ক্লায়েন্ট-সাইড HTML যে কেউ দেখতে পারে, কমেন্টগুলিতে পাসওয়ার্ড বা API কী জ্ঞানের মতো সংবেদনশীল তথ্য অন্তর্ভুক্ত করবেন না।
HTML-এ অনেক ট্যাগ রয়েছে, কিন্তু এখানে নিম্নলিখিত বিষয়গুলোর প্রতি মনোযোগ দিন। একটি HTML ফাইল একটি DOCTYPE ঘোষণা এবং একটি <html> ট্যাগ নিয়ে গঠিত। <html> ট্যাগের মধ্যে একটি <head> ট্যাগ এবং একটি <body> ট্যাগ থাকে। এইচটিএমএলে, সকল ট্যাগ <html> ট্যাগের মধ্যে থাকে, যা টেকস্টের কাঠামোকে মূল, সন্তান এবং সহোদর সম্পর্কের মাধ্যমে প্রকাশ করে, গাছের কাঠামোর মতো। HTML লেখার সময়, নথির কাঠামোর ওপরও মনোনিবেশ করুন।
ট্যাগ এবং অ্যাট্রিবিউটস
পরবর্তী, HTML ট্যাগ এবং অ্যাট্রিবিউটগুলোর দিকে নজর দিন।
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->ট্যাগগুলো কোণা বন্ধনী (<, >) মধ্যে সংযুক্ত থাকে এবং সাধারণত একটি খোলার এবং বন্ধ করার ট্যাগের জোড়া হয়। তবে, এখানে কিছু একক ট্যাগও আছে, যেমন <meta> ট্যাগ এবং <img> ট্যাগ, যা কোনো বিষয়বস্তু ধারণ করে না। একক ট্যাগের জন্য একটি বন্ধ ট্যাগের প্রয়োজন হয় না।
ট্যাগগুলির গুণাবলী থাকতে পারে, যা ট্যাগটিকে অতিরিক্ত তথ্য প্রদান করে। গুণাবলী খোলা ট্যাগের ভিতরে attributeName="value" ফরম্যাটে লেখা হয়।
এখানে, <div> কে একটি ট্যাগ হিসেবে উল্লেখ করা হয়েছে এবং <div>Content</div> কে একটি উপাদান হিসেবে উল্লেখ করা হয়েছে।
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>এইচটিএমএলের সাধারণ গুণাবলীগুলোর মধ্যে রয়েছে id, class, এবং style। id গুণাবলীটি একটি উপাদানকে একটি অনন্য পরিচয় প্রদান করতে ব্যবহৃত হয়, এবং একটি পৃষ্ঠায় একই id সহ শুধুমাত্র একটি উপাদান থাকতে পারে। বিশেষ উপাদানগুলিকে JavaScript বা CSS দিয়ে পরিচালনা করার সময় এটি উপকারী। class গুণাবলী আপনাকে CSS বা JavaScript এর মাধ্যমে একটি ক্লাস নাম নির্ধারণ করে একাধিক উপাদানকে দলবদ্ধ করার অনুমতি দেয়। আপনি একাধিক উপাদানে একই ক্লাস নির্ধারণ করতে পারেন, যা শৈলী বিভাগ শেয়ার করতে সহায়ক। style গুণাবলী একটি উপাদানের জন্য ইনলাইন CSS শৈলী নির্ধারণ করে। সাধারণত, শৈলী একটি বাইরের stylesheet এ বা <style> ট্যাগের মধ্যে নির্ধারণ করা হয়, কিন্তু এই গুণাবলীটি তখন ব্যবহৃত হয় যখন আপনি নির্দিষ্ট উপাদানের জন্য সরাসরি শৈলী নির্ধারণ করতে চান।
এইচটিএমএলে বিশেষ অক্ষরসমূহ
পরবর্তী, HTML-এ বিশেষ অক্ষরগুলোর দিকে নজর দিন।
HTML-এ, নির্দিষ্ট প্রতীক এবং অক্ষর প্রদর্শনের জন্য বিশেষ অক্ষর ব্যবহার করা হয়। এই বিশেষ অক্ষরগুলোকে এনটিটি বলা হয়। বিশেষ অক্ষরগুলো & (ampersand) দিয়ে শুরু হয়, তার পরে একটি নাম বা সংখ্যা, এবং ; (semicolon) দিয়ে শেষ হয়।
এইচটিএমএলে প্রতিনিধিত্বমূলক বিশেষ অক্ষর
এখানে কিছু সাধারণ বিশেষ অক্ষর রয়েছে।
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
এইচটিএমএলে বিশেষ অক্ষর ব্যবহারের উদাহরণসমূহ
বিশেষত, কোণা বন্ধনী (<, >) এবং ডাবল উদ্ধৃতি বৃহত্তরকরণ অবশ্যই HTML এ সঠিকভাবে ব্যবহার করতে হবে।
কোণ বন্ধনী (<, >) এবং ডাবল উদ্ধৃতি চিহ্ন এইচটিএমএলে নিচে দেখানো অনুযায়ী বিশেষ অক্ষর হিসেবে উপস্থাপন করতে হবে।
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
এইচটিএমএল সংস্করণগুলি
এখানে HTML এর সংস্করণগুলি দেখে নেই।
HTML সংস্করণগুলো ওয়েব পৃষ্ঠার গঠন এবং কার্যকারিতা নির্ধারণ করতে বিকশিত হয়েছে। এখানে প্রধান সংস্করণগুলো:।
-
এইচটিএমএল ১.০ (১৯৯৩)
প্রথম HTML সংস্করণে কেবল খুব মৌলিক মার্কআপ বৈশিষ্ট্য ছিল। এটি লিঙ্ক, শিরোনাম, অনুচ্ছেদ, এবং তালিকা ইত্যাদি উপাদানের সংজ্ঞা নির্ধারণ করেছিল।
-
এইচটিএমএল ২.০ (১৯৯৫)
প্রথম মানক সংস্করণ, যেখানে আরও অনেক উপাদান যোগ করা হয়েছিল, ফর্ম এবং টেবিলের সমর্থন সহ।
-
এইচটিএমএল ৩.২ (১৯৯৭)
আরও লেআউট বৈশিষ্ট্য যোগ করা হয়েছিল, যা স্টাইল উপাদান এবং স্ক্রিপ্টগুলোর এম্বেডিংকে সম্ভব করে। অতিরিক্তভাবে,
<table>উপাদান ব্যবহার করে লেআউট সাধারণ হয়ে উঠেছিল। -
এইচটিএমএল ৪.০১ (১৯৯৯)
কাঠামো এবং উপস্থাপনার পৃথকীকরণ উন্নত হয়েছিল এবং CSS প্রবর্তিত হয়েছিল। মাননুগ অনুবর্তী সাইটগুলোর তৈরি সুপারিশ করা শুরু হয়েছিল। অধিকন্তু, ডকুমেন্টগুলির আর্ন্তজাতিকীকরণ এবং অভিগম্যতা উন্নত করা হয়েছে।
-
এইচটিএমএল৫ (২০১৪)
সর্বশেষ প্রধান সংস্করণটি ভিডিও এবং অডিও, ক্যানভাস, লোকাল স্টোরেজ, জিপিএস লোকেশন এবং অন্যান্য নতুন এপিআইগুলির জন্য সমর্থন অন্তর্ভুক্ত করে। এটি মোবাইল-বান্ধব, যা আরও ইন্টারেক্টিভ ওয়েব অ্যাপ্লিকেশনগুলির উন্নয়ন সম্ভব করে তোলে।
HTML5.2 হল 2017 সালে সুপারিশ করা HTML এর একটি সংস্করণ এবং এটি HTML5 এর একটি উন্নত সংস্করণ। HTML5.2 থেকে এটি স্থির সংস্করণ নম্বরের পরিবর্তে HTML Living Standard হিসেবে ক্রমাগত আপডেট করা হচ্ছে।
এই সংস্করণগুলির মাধ্যমে HTML বিকশিত হয়েছে, আরও নমনীয় এবং শক্তিশালী ওয়েব প্রযুক্তিতে পরিণত হয়েছে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।