Curriculum
Course: HTML Mastery: From Basics to Brilliance
Login

Curriculum

HTML Mastery: From Basics to Brilliance

মডিউল ১: পরিচিতি এবং বেসিক HTML : 1. HTML পরিচিতি

0/4

মডিউল ১: পরিচিতি এবং বেসিক HTML : 2. HTML ডকুমেন্ট স্ট্রাকচার

0/2

মডিউল ১: পরিচিতি এবং বেসিক HTML : 3. বেসিক ট্যাগস

0/4

মডিউল ১: পরিচিতি এবং বেসিক HTML : 4. টেক্সট ফরম্যাটিং ট্যাগস

0/3

মডিউল ২: HTML লিস্ট এবং লিঙ্ক: 1. লিস্ট তৈরির ট্যাগস

0/3

মডিউল ২: HTML লিস্ট এবং লিঙ্ক: 2. লিঙ্ক তৈরির ট্যাগ

0/3
Text lesson

অ্যাঙ্কর ট্যাগ (<a>) এবং এট্রিবিউটস।

<a> ট্যাগের পরিচিতি:

HTML-এ <a> (Anchor) ট্যাগ ব্যবহার করা হয় লিঙ্ক (হাইপারলিংক) তৈরি করতে। এটি ব্যবহারকারীদের একটি পেজ থেকে অন্য পেজে বা একই পেজে একটি নির্দিষ্ট স্থানে নিয়ে যেতে সাহায্য করে।

1. অ্যাঙ্কর ট্যাগের মৌলিক গঠন

html
 
<a href="লিঙ্কের ঠিকানা">লিঙ্কের টেক্সট</a>

2. অ্যাঙ্কর ট্যাগের গুরুত্বপূর্ণ এট্রিবিউটস

i. href (Hyperlink Reference):

href এট্রিবিউট লিঙ্কের গন্তব্য নির্ধারণ করে।

  • এটি একটি URL বা ফাইলের পাথ হতে পারে।

উদাহরণ:

html
 
<a href="https://www.google.com">Google এ যান</a>

ii. target:

target এট্রিবিউট লিঙ্কটি কীভাবে খুলবে তা নির্ধারণ করে।

  • _self: একই ট্যাবে লিঙ্কটি খুলবে (ডিফল্ট)।
  • _blank: নতুন ট্যাবে লিঙ্কটি খুলবে।
  • _parent: প্যারেন্ট ফ্রেমে লিঙ্কটি খুলবে।
  • _top: পুরো উইন্ডোতে লিঙ্কটি খুলবে।

উদাহরণ:

html
 
<a href="https://www.wikipedia.org" target="_blank">Wikipedia এ যান</a>

iii. rel (Relationship):

rel এট্রিবিউট লিঙ্কের সাথে সম্পর্ক নির্দেশ করে।

  • nofollow: সার্চ ইঞ্জিনকে লিঙ্কটি অনুসরণ না করতে নির্দেশ দেয়।
  • noopener: নতুন ট্যাব খুললেও নিরাপত্তা নিশ্চিত করে।
  • noreferrer: রেফারার তথ্য শেয়ার করে না।

উদাহরণ:

html
 
<a href="https://example.com" target="_blank" rel="nofollow">Example</a>

iv. title:

title এট্রিবিউট লিঙ্কের উপর মাউস নেওয়া হলে একটি টুলটিপ দেখায়।

উদাহরণ:

html
 
<a href="https://www.yahoo.com" title="Yahoo এ যান">Yahoo</a>

v. download:

download এট্রিবিউট লিঙ্ক থেকে ফাইল ডাউনলোড করার জন্য ব্যবহৃত হয়।

উদাহরণ:

html
 
<a href="files/myfile.pdf" download>ডকুমেন্ট ডাউনলোড করুন</a>

3. অ্যাঙ্কর ট্যাগের বিভিন্ন ব্যবহার

i. একই পেজের মধ্যে লিঙ্ক তৈরি

একটি পেজের নির্দিষ্ট স্থানে লিঙ্ক করার জন্য আইডি (id) ব্যবহার করা হয়।

উদাহরণ:

html
 
<!-- লিঙ্ক -->
<a href="#section1">সেকশন ১ এ যান</a>

<!-- টার্গেট -->
<h2 id="section1">সেকশন ১</h2>
<p>এটি সেকশন ১ এর কন্টেন্ট।</p>

ii. ইমেইল লিঙ্ক তৈরি

mailto: দিয়ে ইমেইল লিঙ্ক তৈরি করা যায়।

উদাহরণ:

html
 
<a href="mailto:example@example.com">ইমেইল করুন</a>

iii. ফোন লিঙ্ক তৈরি

tel: দিয়ে ফোন নম্বরে কল করার লিঙ্ক তৈরি করা যায়।

উদাহরণ:

html
 
<a href="tel:+8801234567890">কল করুন</a>

4. অ্যাঙ্কর ট্যাগে ইমেজ ব্যবহার

লিঙ্কের টেক্সটের পরিবর্তে ইমেজ ব্যবহার করা যায়।

উদাহরণ:

html
 
<a href="https://www.youtube.com">
<img src="youtube-logo.png" alt="YouTube Logo">
</a>

5. সিএসএস দিয়ে স্টাইল করা

html
 
<style>
a {
color: blue;
text-decoration: none; /* আন্ডারলাইন সরানো */
}
a:hover {
color: red;
text-decoration: underline; /* মাউস নেওয়া হলে আন্ডারলাইন দেখাবে */
}
</style>
<a href="https://www.facebook.com">Facebook</a>

6. অ্যাঙ্কর ট্যাগ এবং নেভিগেশন মেনু

html
 
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

 

  • অ্যাঙ্কর ট্যাগ (<a>) ও এর এট্রিবিউটগুলি লিঙ্ক তৈরিতে অত্যন্ত গুরুত্বপূর্ণ।
  • বিভিন্ন ধরনের লিঙ্ক যেমন: ওয়েব পেজ, ইমেইল, ফোন, ফাইল ডাউনলোড ইত্যাদি সহজেই তৈরি করা যায়।
  • সঠিক স্টাইলিং ও নিরাপত্তা নিশ্চিত করতে rel, target, এবং title ব্যবহার করা উচিত।