হাইপারলিংক (Hyperlink)

একটি গল্প দিয়ে শুরু করি

কল্পনা করো তুমি ঢাকার একটি বিশাল লাইব্রেরিতে বসে আছ। তুমি "বাংলাদেশের ইতিহাস" বইটি পড়ছ। বইয়ের ভেতরে একটি জায়গায় লেখা: "মুক্তিযুদ্ধের বিস্তারিত জানতে দেখুন — পৃষ্ঠা ২৪৭।" তুমি পৃষ্ঠা উল্টে ২৪৭-এ গেলে। এটাই মূলত hyperlink-এর ধারণা — শুধু পার্থক্য হলো, বইয়ে নিজে পৃষ্ঠা উল্টাতে হয়, কিন্তু ওয়েবে click করলেই মুহূর্তে চলে যাওয়া যায়।

এই "ক্লিক করলেই অন্য জায়গায় যাওয়া"-র প্রযুক্তিই হলো Hyperlink (হাইপারলিংক)।

মাকড়সার জালের সাথে সম্পর্ক

"World Wide Web" — এই নামটি এসেছে কেন? কারণ সব ওয়েব পেজ একে অপরের সাথে hyperlink দিয়ে যুক্ত, ঠিক মাকড়সার জালের মতো:

মাকড়সার জাল:
     [পেজ A] ──────── [পেজ B]
         \               /
          \             /
           \           /
         [পেজ C] ── [পেজ D]
               \   /
                \ /
             [পেজ E]

প্রতিটি সুতা = একটি Hyperlink
প্রতিটি গিঁট = একটি Web Page
পুরো জাল = World Wide Web!

Tim Berners-Lee যখন 1989 সালে WWW (World Wide Web) আবিষ্কার করলেন, তখন এই hyperlink ধারণাটিই ছিল মূল উদ্ভাবন।

ভিজ্যুয়াল মডেল (ASCII Diagram)

Hyperlink কীভাবে কাজ করে:

ওয়েব পেজে দেখা যায়:
┌───────────────────────────────────┐
│  bKash ব্যবহার করতে              │
│  এখানে ক্লিক করুন               │
│  ┌──────────────────────────────┐ │
│  │ bKash-এ টাকা পাঠান          │ │  ← নীল রঙে underline = hyperlink
│  └──────────────────────────────┘ │
│                                   │
└───────────────────────────────────┘

HTML কোডে:
<a href="https://bkash.com">bKash-এ টাকা পাঠান</a>
 ↑         ↑                  ↑
anchor  destination          clickable text
tag     (গন্তব্য URL)        (যা দেখা যায়)

মানসিক মডেল (Mental Model)

<a> ট্যাগকে ভাবো একটা রিকশার গ্যারেজের সাইনবোর্ড-এর মতো:

[সাইনবোর্ড: "ঢাকা বিশ্ববিদ্যালয়ের জন্য রিকশা"]
   ↑ যা দেখা যায় (clickable text)

রিকশা যাবে: শাহবাগ → TSC → কার্জন হল
   ↑ href = গন্তব্য (destination)

মূল ধারণা (Formal Concept)

Hyperlink হলো HTML-এ এমন একটি উপাদান যা click করলে ব্যবহারকারীকে অন্য একটি পেজ, ফাইল, ইমেইল ঠিকানা বা পেজের অন্য অংশে নিয়ে যায়। HTML-এ Hyperlink তৈরি করতে <a> (Anchor — নোঙর) ট্যাগ ব্যবহার করা হয়।

<a href="গন্তব্য_URL">Clickable Text</a>

<a> = Anchor tag (নোঙর ট্যাগ — নোঙরের মতো একটি জায়গায় আটকে রাখে)
href = Hypertext Reference (হাইপারটেক্সট রেফারেন্স — গন্তব্যের ঠিকানা)

Module 1: বাহ্যিক লিংক (External Link)

অন্য ওয়েবসাইটে যাওয়ার লিংক:

<a href="https://www.wikipedia.org">উইকিপিডিয়া</a>
<a href="https://bkash.com">bKash-এ যান</a>
<a href="https://www.prothomalo.com">প্রথম আলো</a>

এখানে href-এ সম্পূর্ণ URL দিতে হয় — এটি Absolute URL (পরম ঠিকানা)।

Absolute URL কী?

https://www.example.com/folder/page.html
│       │                │      │
│       │                │      └── ফাইলের নাম
│       │                └───────── ফোল্ডারের নাম
│       └────────────────────────── Domain নাম
└────────────────────────────────── Protocol

বাস্তব উদাহরণ: তোমার বাড়ির সম্পূর্ণ ঠিকানা — "বাড়ি নং ১২, রোড ৫, ধানমন্ডি, ঢাকা-১২০৫" — এটা Absolute URL-এর মতো। যেকোনো জায়গা থেকে এই ঠিকানায় যাওয়া যাবে।

Module 2: আভ্যন্তরীণ লিংক (Internal Link) ও Relative URL

নিজের ওয়েবসাইটের অন্য পেজে যাওয়ার লিংক:

<!-- একই folder-এ আছে -->
<a href="about.html">আমাদের সম্পর্কে</a>

<!-- subfolder-এ আছে -->
<a href="pages/contact.html">যোগাযোগ</a>

<!-- এক স্তর উপরে -->
<a href="../index.html">মূল পেজ</a>

এটি Relative URL (আপেক্ষিক ঠিকানা) — বর্তমান পেজের সাপেক্ষে ঠিকানা দেওয়া।

Relative URL ব্যবহারের ফাইল কাঠামো:
website/
├── index.html          ← মূল পেজ
├── about.html          ← আমাদের সম্পর্কে
├── pages/
│   ├── contact.html    ← যোগাযোগ
│   └── gallery.html    ← গ্যালারি
└── images/
    └── logo.png

বাস্তব উদাহরণ: "এই বাড়ি থেকে ৩ বাড়ি পরে" — এটা Relative URL-এর মতো। নির্দিষ্ট জায়গা না জানলে বোঝা যাবে না।

Absolute URL	Relative URL
সম্পূর্ণ ঠিকানা	আংশিক ঠিকানা
`https://example.com/page.html`	`page.html` বা `../page.html`
অন্য সাইটে link করতে	নিজের সাইটের ভেতরে link করতে
Site move করলে কাজ করে	Site move করলেও কাজ করে

Module 3: `target` Attribute — কোথায় খুলবে

<!-- Same tab-এ খুলবে (default) -->
<a href="https://google.com">Google</a>

<!-- নতুন tab-এ খুলবে -->
<a href="https://google.com" target="_blank">Google (নতুন tab-এ)</a>

<!-- Same tab-এ (explicit) -->
<a href="about.html" target="_self">আমাদের সম্পর্কে</a>

target মান	কাজ
`_self`	Same tab-এ খুলবে (default)
`_blank`	নতুন tab বা window-এ খুলবে
`_parent`	Parent frame-এ খুলবে
`_top`	পুরো window-এ খুলবে

📝 HSC টিপস: target="_blank" সবচেয়ে বেশি ব্যবহৃত এবং পরীক্ষায় প্রায়ই আসে।

Module 4: বিভিন্ন ধরনের Hyperlink

4.1 Email Link

<a href="mailto:karim@baul.com">আমাকে ইমেইল করুন</a>
<a href="mailto:info@school.edu?subject=ভর্তি তথ্য">ভর্তির জন্য ইমেইল</a>

Click করলে ব্যবহারকারীর ইমেইল অ্যাপ খুলে যাবে।

4.2 Phone Link (Mobile-এ সরাসরি call)

<a href="tel:+8801711000000">01711-000000 তে call করুন</a>

Mobile-এ click করলে সরাসরি call শুরু হবে।

4.3 Download Link

<a href="files/bkash-guide.pdf" download>bKash গাইড ডাউনলোড করুন</a>
<a href="images/wallpaper.jpg" download="bangladesh-wallpaper.jpg">
  ওয়ালপেপার ডাউনলোড
</a>

download attribute যুক্ত করলে click-এ ফাইল download হবে, browser-এ খুলবে না।

4.4 Bookmark Link (একই পেজের ভেতরে)

দীর্ঘ পেজে নির্দিষ্ট অংশে লাফ দেওয়া:

<!-- Navigation এ link তৈরি -->
<a href="#chapter1">অধ্যায় ১</a>
<a href="#chapter2">অধ্যায় ২</a>
<a href="#summary">সারাংশ</a>

<!-- পেজের content-এ ID দাও -->
<h2 id="chapter1">অধ্যায় ১: পরিচিতি</h2>
...
<h2 id="chapter2">অধ্যায় ২: বিস্তারিত</h2>
...
<h2 id="summary">সারাংশ</h2>

Click করলে পেজটি সেই ID-তে scroll করে যাবে।

4.5 Image as Hyperlink

<a href="https://bkash.com">
  <img src="images/bkash-logo.png" alt="bKash ওয়েবসাইটে যান">
</a>

ছবিতে click করলে নির্দিষ্ট পেজে যাবে।

Module 5: `title` Attribute — Tooltip

<a href="https://bkash.com" title="bKash-এর অফিসিয়াল ওয়েবসাইট">
  bKash
</a>

Mouse hover করলে tooltip হিসেবে "bKash-এর অফিসিয়াল ওয়েবসাইট" দেখাবে।

Module 6: Link States (লিংকের অবস্থা)

Browser স্বয়ংক্রিয়ভাবে link-এর আলাদা অবস্থা দেখায়:

Link States:
┌─────────────────────────────────────────────┐
│                                             │
│  :link    → এখনো visit করা হয়নি (নীল)    │
│  :visited → আগে visit করা হয়েছে (বেগুনি)  │
│  :hover   → Mouse উপরে আছে (রঙ বদলায়)    │
│  :active  → Click করা হচ্ছে (লাল)         │
│                                             │
└─────────────────────────────────────────────┘

CSS দিয়ে এই states কাস্টমাইজ করা যায়।

Module 7: সম্পূর্ণ উদাহরণ — বাংলাদেশ তথ্য পেজ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>বাংলাদেশ তথ্যকোষ</title>
</head>
<body>

  <!-- Navigation -->
  <nav>
    <a href="#history">ইতিহাস</a> |
    <a href="#cricket">ক্রিকেট</a> |
    <a href="#contact">যোগাযোগ</a>
  </nav>

  <!-- Bookmark target -->
  <h2 id="history">বাংলাদেশের ইতিহাস</h2>
  <p>
    বিস্তারিত জানতে দেখুন:
    <a href="https://www.wikipedia.org/wiki/Bangladesh"
       target="_blank"
       title="উইকিপিডিয়ায় বাংলাদেশ">উইকিপিডিয়া</a>
  </p>

  <h2 id="cricket">বাংলাদেশ ক্রিকেট</h2>
  <p>
    <a href="https://www.tigercricket.com.bd" target="_blank">
      <img src="images/bcb-logo.png" alt="BCB ওয়েবসাইটে যান">
    </a>
  </p>
  <p>
    <a href="files/cricket-schedule.pdf" download>
      সময়সূচি ডাউনলোড করুন (PDF)
    </a>
  </p>

  <h2 id="contact">যোগাযোগ</h2>
  <p><a href="mailto:info@bd-info.com">ইমেইল করুন</a></p>
  <p><a href="tel:+88029112345">ফোন: 9112345</a></p>

  <!-- অন্য পেজে link -->
  <a href="about.html">আমাদের সম্পর্কে</a> |
  <a href="pages/gallery.html">গ্যালারি</a>

</body>
</html>

সাধারণ ভুলসমূহ (Common Mistakes)

ভুল	সমস্যা	সঠিক পদ্ধতি
`href` ছাড়া `<a>`	কাজ করবে না	`href` সবসময় দাও
`href="google.com"`	protocol ছাড়া ভুল URL	`href="https://google.com"`
`<a>` ট্যাগ বন্ধ না করা	পরের content-ও clickable হবে	`</a>` দিয়ে বন্ধ করো
`target="blank"` (underscore নেই)	কাজ করবে না	`target="_blank"` (underscore আছে)
Bookmark-এ `#` ছাড়া	কাজ করবে না	`href="#section-id"`
`id`-এ space	Bookmark কাজ করবে না	`id="chapter1"` (hyphen বা underscore ব্যবহার করো)

Trade-offs (সুবিধা-অসুবিধা)

বিষয়	সুবিধা	অসুবিধা
Absolute URL	যেকোনো জায়গা থেকে কাজ করে	Domain পরিবর্তন হলে সব link নষ্ট
Relative URL	Domain পরিবর্তনে নষ্ট হয় না	পেজ move করলে কাজ নাও করতে পারে
`target="_blank"`	User বর্তমান পেজ হারায় না	নতুন tab বেশি খুললে browser ধীর
Bookmark link	দীর্ঘ পেজে navigation সহজ	পেজ structure পরিবর্তনে কাজ নষ্ট
Image hyperlink	Clickable area বড় হয়	Alt text না দিলে accessibility নষ্ট

MCQ Quiz

1. HTML-এ Hyperlink তৈরি করতে কোন ট্যাগ ব্যবহার করা হয়?

(ক) <a> ✓
(খ) <link>
(গ) <href>
(ঘ) <url>

2. <a> ট্যাগের কোন attribute দিয়ে গন্তব্য URL নির্ধারণ করা হয়?

(ক) link
(খ) url
(গ) href ✓
(ঘ) src

3. নতুন browser tab-এ link খুলতে কোন attribute ব্যবহার করা হয়?

(ক) target="new"
(খ) target="tab"
(গ) target="_blank" ✓
(ঘ) target="window"

4. ইমেইল link তৈরি করতে href-এ কোন prefix ব্যবহার করা হয়?

(ক) email:
(খ) mail:
(গ) mailto: ✓
(ঘ) send:

5. পেজের নির্দিষ্ট অংশে link করতে (Bookmark) href-এ কী ব্যবহার করা হয়?

(ক) * চিহ্ন
(খ) # চিহ্ন ✓
(গ) @ চিহ্ন
(ঘ) & চিহ্ন

6. কোনটি Absolute URL-এর উদাহরণ?

(ক) about.html
(খ) ../pages/contact.html
(গ) https://www.example.com/page.html ✓
(ঘ) images/logo.png

7. file download করানোর জন্য <a> ট্যাগে কোন attribute ব্যবহার করা হয়?

(ক) save
(খ) get
(গ) download ✓
(ঘ) fetch

8. mouse hover করলে tooltip দেখানোর জন্য <a> ট্যাগে কোন attribute ব্যবহার করা হয়?

(ক) tooltip
(খ) title ✓
(গ) hint
(ঘ) info

প্রতিফলন প্রশ্ন (Reflection Questions)

Hyperlink কীভাবে World Wide Web-এর "জাল" তৈরিতে ভূমিকা রাখে?
Absolute URL ও Relative URL-এর মধ্যে পার্থক্য কী? কোন পরিস্থিতিতে কোনটি ব্যবহার করবে?
target="_blank" ব্যবহার করলে ব্যবহারকারীর কী সুবিধা হয়? কখন এটি ব্যবহার না করাই ভালো?
Bookmark link কীভাবে দীর্ঘ পেজে navigation সহজ করে? বাস্তব উদাহরণ দাও।
ছবিকে hyperlink হিসেবে ব্যবহার করলে কী কী বিষয় মাথায় রাখতে হবে?

অনুশীলন কাজ (Practice Tasks)

সহজ: একটি পেজ তৈরি করো যেখানে ৫টি বাংলাদেশি ওয়েবসাইটের লিংক থাকবে (প্রথম আলো, bKash, BCB, ইত্যাদি) — সব লিংক নতুন tab-এ খুলবে।
মধ্যম: একটি "আমার পছন্দের সাইট" পেজ তৈরি করো যেখানে:
- External links (target="_blank")
- Email link (তোমার ইমেইলে)
- Phone link
- একটি PDF download link থাকবে
উন্নত: একটি দীর্ঘ "বাংলাদেশ তথ্যকোষ" পেজ তৈরি করো:
- উপরে navigation menu (bookmark links)
- প্রতিটি section-এ উপযুক্ত id
- Images যা hyperlink হিসেবে কাজ করবে
- "উপরে যান" link প্রতিটি section-এর নিচে

📝 HSC পরীক্ষার টিপস:

<a> ট্যাগকে Anchor tag বলে — এটি মনে রাখতে হবে
href মানে Hypertext Reference — গন্তব্যের ঠিকানা
target="_blank" = নতুন tab-এ খুলবে (underscore অবশ্যই দিতে হবে)
Bookmark link: href="#id" দিয়ে link করো, target element-এ id="..." দাও
mailto: (email), tel: (phone), download (file download) — এই তিনটি বিশেষ ব্যবহার মনে রাখো
Absolute URL = সম্পূর্ণ ঠিকানা (https:// দিয়ে শুরু) | Relative URL = আংশিক ঠিকানা

সারাংশ:

Hyperlink হলো ওয়েব পেজের মধ্যে সংযোগ — click করলে অন্য পেজে যাওয়া যায়

<a href="URL">Text</a> — এটি হলো Hyperlink-এর মূল গঠন

href = গন্তব্য URL | target="_blank" = নতুন tab-এ খুলবে

Link-এর ধরন: External (অন্য সাইট) | Internal (নিজের সাইট) | Email | Phone | Download | Bookmark

Absolute URL: https://example.com/page.html — যেকোনো জায়গা থেকে কাজ করে

Relative URL: page.html বা ../folder/page.html — বর্তমান পেজের সাপেক্ষে

মাকড়সার জালের মতো সব ওয়েব পেজ hyperlink দিয়ে যুক্ত — তাই নাম "World Wide Web"

Hyperlink