Why and how to use Base and Anchor Tags?

The <base> Element

जैसाकि हमने पहले भी कहा कि जब हम Relative Addresses उपयोग में लेते हैं, तब भी हमारा Browser उस Relative URL को Absolute URL में Convert करके ही Actual Resource को Uniquely Identify करता है। <base> Element हमें उस Base URL को Specify करने की सुविधा प्रदान करता है, जिससे हमारे सारे Relative URL Related होते हैं। हमें Base URL को भी href Attribute के मान के रूप में Specify करना होता है।

उदाहरण के लिए यदि हमारी Web Site का Base Address http://www.exampleSite1.com/ हो तो हम हमारे Base Address को निम्‍नानुसार Set कर सकते हैं:

<base href=”<a href="http://www.examplesite1.com/">http://www.exampleSite1.com/</a>” >

इस स्थिति में यदि निम्‍नानुसार कोई Relative Address हो:

<a href=”<a href="http://www.examplesite1.com/">Entertainment/Artl/index.htm/</a>” >

तो ये Relative URL निम्‍नानुसार Absolute URL में Convert हो जाता है:

<base href=”<a href="http://www.examplesite1.com/">http://www.exampleSite1.com/</a>Entertainment/Arts/index.htm” >

इस Element को उपयोग में लेने का फायदा ये है कि यदि हम हमारी Site को एक Web Server से किसी दूसरे Web Server पर Move करते हैं, तो हमें केवल हमारी Site के <base> Element के Base Address को ही Modify करना होता है, Site के सभी Relative Links को Modify करने की जरूरत नहीं होती है।

The <a> Element

एक Web Page पर जितने भी Hypertext Links होते हैं, वे हमें Web के एक हिस्‍से से दूसरे हिस्‍से पर ले जाते हैं। हम ऐसे Links देख चुके हैं, जो हमें एक Page से दूसरे Page पर ले जाते हैं। इनके अलावा हम ऐसे Links भी Create कर सकते हैं, जो हमें एक ही Page के विभिन्‍न हिस्‍सों पर ले जाते हैं। ये हिस्‍से Same Page के भी हो सकते हैं और किसी दूसरे Page के भी।

Link बनाते समय हमें वास्‍तव में दो Points Create करने पडते हैं, जहां पहला Point Source को Represent करता है, जबकि दूसरा Point Target को Represent करता है। किसी Page पर दिखाई देने वाला हर वह Link, जिसे हम Click कर सकते हैं, Source Anchor कहलाता है और हर Source Anchor को हम <a> Element द्वारा Create करते हैं।

Source Anchor वह Text या Image होता है, जिस पर Click करके हम किसी नए Page पर पहुंच जाते हैं। जैसकि हम पहले ही देख चुके हैं कि हमें जिस Text को Clickable बनाना होता है, उसे हम <a></a> Tag Pair के बीच में लिखते हैं और इस Text पर Click करने के बाद हमें जिस Target पर पहुंचना होता है, उसे हम <a> Element के href Attribute में Value के रूप में Specify कर देते हैं।

Destination Anchor हम तब बनाते हैं जब हमें समान Page के ही किसी Specific हिस्‍से पर पहुंचना होता है। उदाहरण के लिए मानलो कि यदि हमारा कोई Web Page काफी बडा है और User को वांछित जानकारी के लिए काफी Scroll करना पडता है। इस स्थिति में हम हमारे Web Page को कई हिस्‍सों में विभाजित करते हुए हर हिस्‍से के साथ एक Destination Anchor Set कर सकते हैं। User जिस किसी भी Anchor को Click करेगा, User उस Anchor से सम्‍बंधित हिस्‍से वाले स्‍थान पर पहुंच जाएगा।

Destination Anchor हमें हमारे Page पर ऐसे Mark Set करने की सुविधा प्रदान करता है, जिन्‍हें हम Source Anchor से Link कर सकते हैं। हम Destination Anchor Create करने के लिए भी <a> Element का ही प्रयोग करते हैं, लेकिन जब हम इस Element का प्रयोग Destination Anchor Create करने के लिए करते हैं, तब हमें इसके name या id Attribute को उपयोग में लेना पडता है।

मानलो कि हमारा Web Page काफी बडा है, जिसमें कई Heading व Sub-Headings हैं। हमारा Page हमारे Browser Window में पूरी तरह से Fit नहीं होता है, इसलिए हम हमारे Page की शुरूआत में अपने Page की हर Heading से एक Link Set करना चाहते हैं, जिस पर Click करके User Page की किसी भी Heading तक पहुंच सके।

Source Anchor का प्रयोग करके हम हमारे Page के हर Section से Link स्‍थापित करें, इससे पहले हमें अपनी हर Heading के लिए एक Destination Anchor Set करना होगा। ये काम हम निम्‍नानुसार कर सकते हैं, जिसमें हर Heading 2 में एक <a> Element है और उसके अन्‍दर एक name Attribute को Set किया गया है, जो उस Section को Uniquely Identify करता है:

<h1>Linking and Navigation</h1>
<h2><a name="URL">URLs</a></h2>
<h2><a name="SourceAnchors">Source Anchors</a></h2>
<h2><a name="DestinationAnchors">Destination Anchors</a></h2>
<h2><a name="Examples">Examples</a></h2>

Destination Anchor Create करने के बाद हम निम्‍नानुसार Source Anchor Create कर सकते हैं:

<p>This page covers the following topics:
 <ul>
<li><a href="#URL">URLs</a></li>
<li><a href="#SourceAnchors">Source Anchors</a></li>
<li><a href="#DestinationAnchors">Destination Anchors</a></li>
<li><a href="#Examples">Examples</a></li>
</ul>
</p>

हम देख सकते हैं कि Source Anchor में href Attribute की Value में Destination Anchor के name Attribute के मान को Pound Symbol के साथ लिखा गया है। ऐसा करने का मतलब यही है, कि हमने जो Destination Anchor Create किया है, ये Source Anchors उन्‍हीं Destination Anchors को Link कर रहे हैं। यदि कोई Page किसी दूसरे Page के किसी Destination Anchor को Refer करना चाहे, तो उसे उस Destination Anchor के Absolute Address को Specify करना होता है। ये काम हम पहले Page में निम्‍नानुसार कर सकते हैं:

<a href="http://www.example.com/HTML/Links.htm#DestinationAnchors">
Destination Anchors
</a>

जिस तरह से हमने name Attribute को उपयोग में लेकर Destination Anchor Set किया है, उसी तरह से हम name Attribute के स्‍थान पर id Attribute का भी प्रयोग कर सकते हैं। <a> Element के साथ हम सभी Universal Attributes व  UI Event Attributes के साथ ही कुछ और Attributes का भी प्रयोग कर सकते हैं। ये Attributes निम्‍नानुसार हैं:

The accesskey Attribute

ये Attribute हमें ये सुविधा प्रदान करता है कि हम किसी Link को Activate करने के लिए उस Link के साथ किसी Keyboard Shortcut को Assign कर सकते हैं। उदाहरण के लिए हम किसी Link को Activate करने के लिए Alt या Ctrl Key के साथ Keyboard के T Button को Set कर सकते हैं। accesskey Attribute को हमें हमारे Source Anchor के साथ Specify करना होता है। उदाहरण के लिए यदि हम चाहते हैं कि किसी Link पर Click करने पर अथवा “T” Access Key को Press करने पर हम Web Page के Top पर पहुंच जाए, तो इस जरूरत को हम निम्‍नानुसार पूरा कर सकते हैं:

<a id=”top” accesskey=”t”>Back to TOP</a>

एक बार ध्‍यान रखने वाली ये है कि हम जिस Access Key को Set करते हैं, वह Key  Case Insensitive होती है, यानी हम Capital Letters को accesskey Attribute में Set करके Hyperlink को Small Letter के Button को Press करके भी Activate कर सकते हैं।

The charset Attribute

ये Attribute इस बात को Indicate करता है कि हमारा URL जिस Document को Point कर रहा है, उस Document में किस Character Encoding को उपयोग में लिया गया है। इस Encoding को हमें Double Quote के बीच में ही लिखना होता है। इस Attribute को भी सामान्‍यतया Source Anchor पर ही उपयोग में लिया जाता है और उसी स्थिति में उपयोग में लिया जाता है, जब हमारा Hyperlink किसी दूसरी Encoding वाले Web Page को Point कर रहा होता है। इसे निम्‍नानुसार उपयोग में लेते हैं:

<a href=”http://www.google.com” charset=”UTF-8”>Google Web Site</a>

The coords Attribute

इस Attribute को उस स्थिति में Source Anchor के साथ Use किया जाता है, जब इस Anchor में किसी Image को Address होता है। इसे इसलिए Design किया गया है, ताकि हम Image Map Create कर सकें, जो कि Images का एक ऐसा समूह होता है, जिसमें हर Image से कोई अन्‍य Document अथवा Same Document का कोई हिस्‍सा Linked होता है। इस Attribute में हमें x व y Coordinates के मानों को Specify करना होता है। इस Attribute के बारे में हम आगे विस्‍तार से समझेंगे।

The hreflang Attribute

इस Attribute का प्रयोग उस Document की Language को Specify करने के लिए किया जाता है, जिसे Source Link Point करता है और इसे केवल उसी स्थिति में उपयोग में लिया जा सकता है, जबकि हमने href Attribute को उपयोग में लिया हो। जैसे:

<a href=”http://www.google.com/” hreflang=”en-US”>Google Site</a>

The tabindex Attribute

इस Attribute को समझने के लिए हमें सबसे पहले Focus को समझना होगा। जब Web Page Browser में Load होता है, तब यदि User Tab Key को Press करता है, तो Browser Page के कुछ हिस्‍सों पर Focus को Move करता है। Page का वह हिस्‍सा जहां Focus Move होता है, वह हिस्‍सा या तो Link होता है अथवा Form का कोई Object होता है। जब कोई Link Focus प्राप्‍त करता है और User Enter Key Press कर देता है, तो वह Link Activate हो जाता है।

tabindex Attribute हमें ये तय करने की सुविधा देता है कि Tab Key को Pres करने पर कब और कौनसा Link Focus प्राप्‍त करेगा। इस Attribute में हम 1 से 32767 तक का मान Set कर सकते हैं। जिस Link के tabindex Attribute का मान कम होता है, वह Link पहले Focus प्राप्‍त करता है और जिस Link के tabindex Attribute का मान ज्‍यादा होता है, वह Link बाद में Focus प्राप्‍त करता है।

The target Attribute

इस Attribute को तब उपयोग में लिया जाता है, जब हम Frames का प्रयोग कर रहे होते हैं, इसलिए इस Attribute के बारे में हम Frames के बारे में जानकारी प्राप्‍त करते समय पढेंगे।

The title Attribute

इस Attribute में हम जो Text लिखते हैं, वह Text उस समय दिखाई देता है, जब हम Web Browser में अपने Link पर Mouse के Pointer को Place करते हैं। (Base and Anchor Tags)