HTML Links

M2-R5.1 · Chapter 3: HTML Basics · 3 min read

HTML LINKS

HTML Links क्या हैं?

Links का उपयोग webpage से दूसरे webpage पर जाने या एक webpage के अंदर किसी दूसरे section पर जाने के लिए किया जाता है।

HTML में links बनाने के लिए Anchor Tag <a> का उपयोग किया जाता है।

<a> और </a> के बीच लिखा गया text hyperlink बन जाता है, जिस पर click करके user दूसरी location पर जा सकता है।

Syntax

<a href="URL">Link Text</a>

यहाँ:

  • <a> → Anchor Tag

  • href → Hypertext Reference

  • URL → जिस webpage या location पर जाना है उसका address

  • Link Text → webpage पर दिखाई देने वाला clickable text

href Attribute

Anchor tag का सबसे important attribute href है।

href का पूरा नाम Hypertext Reference है।

यह उस webpage या location का URL/path specify करता है जहाँ link click करने के बाद user को ले जाना है।

Example

<a href="https://www.google.com">Google</a>

इसमें Google webpage पर दिखाई देगा और उस पर click करने से Google website open होगी।

🔹 TYPES OF LINKS IN HTML

HTML में linking मुख्य रूप से दो प्रकार की होती है:

  1. External Link

  2. Internal Link

1. EXTERNAL LINK

External Link का उपयोग किसी दूसरे webpage, website या URL पर जाने के लिए किया जाता है।

यदि आपको अपनी website से किसी दूसरी website पर user को भेजना है, तो External Link का उपयोग किया जाता है।

Example

<a href="https://en.wikipedia.org/wiki/Bhagat_Singh">
    Bhagat Singh
</a>

जब user Bhagat Singh पर click करेगा, तो वह दिए गए Wikipedia webpage पर चला जाएगा।

External Link कब use करें?

External Link का उपयोग तब करें जब आपको:

  • दूसरी website open करनी हो।

  • किसी external resource पर जाना हो।

  • किसी दूसरी website का webpage link करना हो।

External URL के दो common forms

1. Absolute Path / URL

इसमें पूरा URL दिया जाता है।

<a href="https://www.google.com">Google</a>

यहाँ पूरा URL दिया गया है:

https://www.google.com

2. Relative Path

जब किसी same website/project की दूसरी HTML file को link करना हो, तो relative path का उपयोग किया जा सकता है।

मान लीजिए आपके project में ये files हैं:

index.html
about.html
contact.html

तो:

<a href="about.html">About Us</a>

यह index.html से about.html पर ले जाएगा।

2. INTERNAL LINK

Internal Link का उपयोग उसी webpage के अंदर एक section से दूसरे section पर जाने के लिए किया जाता है।

यह विशेष रूप से long webpages में useful होता है, जहाँ कई sections होते हैं।

उदाहरण के लिए, यदि किसी webpage में:

  • Introduction

  • HTML Basics

  • HTML Tags

  • HTML Links

  • HTML Forms

जैसे कई sections हैं, तो user को किसी particular section पर जल्दी पहुँचाने के लिए Internal Link का उपयोग किया जा सकता है।

Internal Link कैसे बनाएं?

Internal linking के लिए हम किसी target element को एक id देते हैं और फिर <a> tag के href में उस id के आगे # लगाकर लिखते हैं।

Step 1: Target Section को id दें

<h2 id="section1">HTML Basics</h2>

यहाँ section1 उस section की पहचान है।

Step 2: उस Section का Link बनाएं

<a href="#section1">Go to HTML Basics</a>

अब Go to HTML Basics पर click करने पर browser उसी webpage के section1 वाले section पर चला जाएगा।

Complete Example of Internal Link

<html>

<head>
    <title>Internal Link</title>
</head>

<body>

    <a href="#html">HTML</a>
    <br>
    <a href="#css">CSS</a>
    <br>
    <a href="#java">Java</a>

    <br><br><br><br><br>

    <h2 id="html">HTML</h2>
    <p>This section contains information about HTML.</p>

    <br><br><br><br><br>

    <h2 id="css">CSS</h2>
    <p>This section contains information about CSS.</p>

    <br><br><br><br><br>

    <h2 id="java">Java</h2>
    <p>This section contains information about Java.</p>

</body>

</html>

यह कैसे काम करेगा?

जब user:

HTML → click करेगा → id="html" वाले section पर जाएगा।

CSS → click करेगा → id="css" वाले section पर जाएगा।

Java → click करेगा → id="java" वाले section पर जाएगा।

मुख्य बात

<a href="#html">HTML</a>

में:

  • #html → target id को refer करता है।

और:

<h2 id="html">HTML</h2>

में:

  • id="html" → target section की पहचान है।

🔹 name Attribute से Internal Link

पुराने HTML में Internal Link बनाने के लिए name attribute का भी उपयोग किया जाता था।

Example

<a name="section1"></a>

<a href="#section1">Go to Section 1</a>

यहाँ:

  • name="section1" → target location define करता है।

  • href="#section1" → उस location पर जाने के लिए link बनाता है।

Note: Modern HTML में internal linking के लिए id attribute का उपयोग करना recommended है।

🔹 EXTERNAL vs INTERNAL LINK

External LinkInternal Link
दूसरी website या webpage पर जाने के लिए use होता है।उसी webpage के किसी section पर जाने के लिए use होता है।
इसमें URL/path दिया जाता है।इसमें #id का use किया जाता है।
Example: href="https://google.com"Example: href="#section1"
दूसरी website को connect कर सकता है।उसी page के अलग-अलग sections को connect करता है।

🔹 LINK COLORS

HTML में पुराने <body> attributes की सहायता से links के colors set किए जा सकते हैं।

तीन प्रकार के link states होते हैं:

  • Unvisited Link → जिसे अभी तक visit नहीं किया गया है।

  • Visited Link → जिसे पहले visit किया जा चुका है।

  • Active Link → जिस link पर अभी click किया जा रहा है।

Default Link Colors

  • Unvisited link → Blue और underlined

  • Visited link → Purple और underlined

  • Active link → Red और underlined

Example

<html>

<head>
    <title>Link Colors</title>
</head>

<body link="green" vlink="yellow" alink="black">

    <a href="https://www.google.com">Google</a>

</body>

</html>

यहाँ:

  • link → Unvisited links का color

  • vlink → Visited links का color

  • alink → Active link का color

Note: link, vlink और alink पुराने HTML attributes हैं। Modern websites में link colors के लिए CSS का उपयोग किया जाता है।

🔹 IMAGE AS HYPERLINK

यदि किसी image को hyperlink बनाना हो, तो <a> tag के अंदर <img> tag को लिखा जाता है।

Example

<a href="https://www.google.com">
    <img src="logo.png" alt="Google Logo">
</a>

अब image पर click करने से Google की website open होगी।