HTML ট্যাগ | HTML Tag Details

HTML-এ, ট্যাগগুলি একটি webpage গঠন এবং বিষয়বস্তু নির্ধারণ করতে ব্যবহৃত হয়। এগুলি উপাদান তৈরি করতে ব্যবহৃত হয়, যেমন headings, paragraphs, links, images এবং আরও অনেক কিছু। HTML ট্যাগগুলি angle brackets এ আবদ্ধ থাকে এবং এতে একটি ট্যাগের নাম, attributes (optional) এবং একটি closing tag (optional) থাকে। আসুন কিছু সাধারণ HTML ট্যাগগুলি ঘনিষ্ঠভাবে দেখে নেওয়া যাক।

মাথা ট্যাগ

“head” ট্যাগটি একটি HTML নথির শিরোনাম বিভাগকে সংজ্ঞায়িত করতে ব্যবহৃত হয়। এতে মেটাডেটা রয়েছে, যেমন নথির শিরোনাম, বহিরাগত স্টাইলশীট এবং স্ক্রিপ্টগুলির লিঙ্ক এবং আরও অনেক কিছু। একটি HTML নথিতে “head” ট্যাগটি সর্বদা “body” ট্যাগের আগে স্থাপন করা হয়। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

<link rel="stylesheet" href="styles.css">

<script src="script.js"></script>

</head>

<body>

<!-- The content of the webpage goes here -->

</body>

</html>

শরীরের ট্যাগ

একটি HTML নথির প্রধান বিষয়বস্তু বিভাগকে সংজ্ঞায়িত করতে “body” ট্যাগ ব্যবহার করা হয়। এটিতে ওয়েবপৃষ্ঠার সমস্ত দৃশ্যমান সামগ্রী রয়েছে, যেমন শিরোনাম, অনুচ্ছেদ, চিত্র এবং আরও অনেক কিছু। একটি HTML নথিতে “body” ট্যাগটি সর্বদা “head” ট্যাগের পরে স্থাপন করা হয়। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

<link rel="stylesheet" href="styles.css">

<script src="script.js"></script>

</head>

<body>

<h1>Welcome to my webpage</h1>

<p>This is the main content of my webpage.</p>

<img src="image.jpg" alt="A beautiful image">

</body>

</html>

h1-h6 ট্যাগ

“h1” থেকে “h6” ট্যাগগুলি বিভিন্ন আকারের শিরোনাম সংজ্ঞায়িত করতে ব্যবহৃত হয়। “h1” ট্যাগটি প্রধান শিরোনামের জন্য ব্যবহৃত হয়, যখন “h2” থেকে “h6” ট্যাগগুলি উপশিরোনামের জন্য ব্যবহৃত হয়। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<h2>About me</h2>

<p>I'm a web developer based in New York.</p>

<h2>My projects</h2>

<p>Here are some of my recent projects:</p>

<ul>

<li>Project 1</li>

<li>Project 2</li>

<li>Project 3</li>

</ul>

</body>

</html>

p ট্যাগ

“p” ট্যাগটি পাঠ্যের অনুচ্ছেদগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি সম্পর্কিত বিষয়বস্তুকে একত্রিত করতে এবং ওয়েবপৃষ্ঠাকে কাঠামো প্রদান করতে ব্যবহৃত হয়। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<p>This is the main content of my webpage.</p>

<p>Here's another paragraph of text.</p>

</body>

</html>

একটি ট্যাগ

HTML-এ “a” ট্যাগটি সবচেয়ে বেশি ব্যবহৃত ট্যাগগুলির মধ্যে একটি এবং হাইপারলিঙ্কগুলিকে সংজ্ঞায়িত করতে ব্যবহৃত হয়। হাইপারলিঙ্ক হল ক্লিকযোগ্য লিঙ্ক যা ব্যবহারকারীদের বিভিন্ন ওয়েব পেজ বা রিসোর্সের মধ্যে নেভিগেট করতে দেয়। “a” ট্যাগটি “অ্যাঙ্কর” এর জন্য দাঁড়ায় এবং অন্যান্য ওয়েব পৃষ্ঠা, ইমেল ঠিকানা বা অন্যান্য সংস্থানগুলির সাথে লিঙ্ক করতে ব্যবহৃত হয়।

“a” ট্যাগের মৌলিক সিনট্যাক্স হল:<a href="URL">Link text</a>

এখানে, “href” বৈশিষ্ট্যটি লিঙ্কের URL নির্দিষ্ট করতে ব্যবহৃত হয় এবং “a” ট্যাগ খোলার এবং বন্ধ করার মধ্যে পাঠ্যটি দৃশ্যমান পাঠ্য যা ব্যবহারকারী ক্লিক করে।

আসুন “a” ট্যাগের জন্য কিছু সাধারণ ব্যবহারের ক্ষেত্রে ঘনিষ্ঠভাবে নজর দেওয়া যাক।

অন্যান্য ওয়েব পেজ লিঙ্ক তৈরি করা

“a” ট্যাগের সবচেয়ে সাধারণ ব্যবহার হল অন্য ওয়েব পেজের লিঙ্ক তৈরি করা। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<p>Check out my <a href="https://example.com">website</a>.</p>

</body>

</html>

এই উদাহরণে, “a” ট্যাগে ” https://example.com ” মান সহ একটি “href” বৈশিষ্ট্য রয়েছে ৷ এটি অ্যাট্রিবিউট মানতে নির্দিষ্ট করা URL-এর একটি হাইপারলিঙ্ক তৈরি করে।

ইমেল ঠিকানার লিঙ্ক তৈরি করা

“a” ট্যাগটি ইমেল ঠিকানাগুলির লিঙ্ক তৈরি করতেও ব্যবহার করা যেতে পারে। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<p>Send me an <a href="mailto:me@example.com">email</a>.</p>

</body>

</html>

এই উদাহরণে, “a” ট্যাগে “mailto: me@example.com ” মান সহ একটি “href” বৈশিষ্ট্য রয়েছে। এটি একটি হাইপারলিঙ্ক তৈরি করে যা ব্যবহারকারীর ডিফল্ট ইমেল ক্লায়েন্ট খোলে এবং অ্যাট্রিবিউট মানতে নির্দিষ্ট করা ইমেল ঠিকানায় একটি নতুন ইমেল বার্তা তৈরি করে।

একই পৃষ্ঠার অন্যান্য বিভাগে লিঙ্ক তৈরি করা

একই পৃষ্ঠার অন্যান্য বিভাগে লিঙ্ক তৈরি করতে “a” ট্যাগ ব্যবহার করা যেতে পারে। এটি প্রায়শই বিষয়বস্তুর একটি সারণী তৈরি করতে বা ব্যবহারকারীদের একটি দীর্ঘ ওয়েবপৃষ্ঠার একটি নির্দিষ্ট বিভাগে যেতে অনুমতি দিতে ব্যবহৃত হয়। এখানে একটি উদাহরণ:

<!DOCTYPE html>

<html>

<head>

<title>My Webpage</title>

</head>

<body>

<h1>Welcome to my webpage</h1>

<ul>

<li><a href="#section1">Section 1</a></li>

<li><a href="#section2">Section 2</a></li>

<li><a href="#section3">Section 3</a></li>

</ul>

<h2 id="section1">Section 1</h2>

<p>This is section 1.</p>

<h2 id="section2">Section 2</h2>

<p>This is section 2.</p>

<h2 id="section3">Section 3</h2>

<p>This is section 3.</p>

</body>

</html>

এই উদাহরণে, “a” ট্যাগগুলিতে “href” বৈশিষ্ট্য রয়েছে যার মানগুলি বিভাগ শিরোনামের “id” বৈশিষ্ট্যগুলির সাথে মেলে। এটি হাইপারলিঙ্ক তৈরি করে যা ব্যবহারকারীদের ওয়েবপৃষ্ঠার নির্দিষ্ট বিভাগে যেতে দেয়।

178