HTML भाग 15 सीखना: ट्यूटोरियल HTML में लिंक कैसे बनायें
आप निश्चित रूप से पहले से ही परिचित हैंशब्द "लिंक" क्योंकि विभिन्न वेबसाइटों पर आप पाठ या छवियों के रूप में लिंक पा सकते हैं। प्रश्न यह है कि HTML दस्तावेज़ में लिंक कैसे बनाया जाए? इस सवाल का जवाब देने के लिए, इस लेख में मैं समझाऊंगा कि HTML डॉक्यूमेंट में लिंक कैसे डालें और लिंक से जुड़े अन्य मामले।
लिंक का उपयोग किसी एक के बीच लिंक के रूप में किया जाता हैएक पृष्ठ दूसरे पृष्ठ के साथ। अधिक स्पष्ट रूप से, HTML में लिंक का उपयोग HTML दस्तावेज़ को किसी अन्य पृष्ठ से लिंक करना है जो गंतव्य पता है। लिंक एक पाठ या छवि है जो किसी विशेष पते से जुड़ी है। ताकि आप सामग्री "लिंक" को बेहतर ढंग से समझ सकें, नीचे दिए गए स्पष्टीकरण पर विचार करें:
एक। <a> टैग का उपयोग
HTML दस्तावेज़ों में लिंक का उपयोग द्वारा इंगित किया गया हैलंगर तत्वों का उपयोग, अर्थात् जोड़े गए टैग <a> …… </a>। ब्राउज़रों में, लिंक को आमतौर पर नीले रंग के पाठ के साथ चिह्नित किया जाता है जिसमें एक रेखांकन होता है। यदि आप एक पाठ या छवि पर क्लिक करते हैं जिसमें एक लिंक होता है, तो लिंक का मार्ग या तो टैब में या नए टैब में खोला जाएगा। <a> टैग में शामिल विशेषताएँ इस प्रकार हैं:
| गुण | समारोह |
| href | गंतव्य दस्तावेज़ के स्थान को इंगित करता है |
| आईडी | लिंक शैली पत्रक (सीएसएस) या एक पृष्ठ पर स्थान चिह्नित करें |
| hreflang | उपयोग की गई भाषा को इंगित करता है |
| टाइप | गंतव्य दस्तावेज़ की सामग्री के प्रकार पर नोट्स दें |
| रेल | गंतव्य दस्तावेज़ के साथ वर्तमान दस्तावेज़ का संबंध बताएं |
| फिरना | गंतव्य दस्तावेज़ और मूल दस्तावेज़ के बीच संबंध का वर्णन करें |
| चारसेट | वेब दस्तावेज़ एन्कोडिंग के चरित्र को निर्दिष्ट करता है |
| शीर्षक | टूलटिप में एक लिंक का शीर्षक प्रदान करता है |
यहाँ HTML में लिंक का उपयोग करने का एक सरल उदाहरण है:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
</body>
</html>ब्राउज़र में ऊपर दिए गए HTML कोड को चलाने के बाद यह नीचे दिखाए गए अनुसार दिखाई देगा:
ख। आईडी विशेषता
<a> टैग में href विशेषता का उपयोग किया जाता हैएक गंतव्य फ़ाइल घोषित करें। दस्तावेज़ के एक निश्चित भाग में पाठक को ले जाने के लिए उपयोग की जाने वाली आईडी विशेषता का उपयोग करके <a> टैग के अंदर HTML गंतव्य पथ का उपयोग किया जा सकता है।
इसे समझना आसान बनाने के लिए, लिंक पर href विशेषता पर "#about" लिखने और <p> टैग पर "विशेषता" के बारे में आईडी लिखने की कोशिश करें। कोड लिखने के उदाहरणों के लिए आप नीचे देख सकते हैं:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
</body>
</html>ब्राउज़र में परिणाम इस तरह होंगे:
मैंने जानबूझकर बहुत सारे टैग इस्तेमाल किए हैंइस विशेषता के कार्य को समझना आपके लिए आसान बनाता है। जब आप "अबाउट" लिंक पर क्लिक करते हैं, तो आपको तुरंत वाक्य के इस भाग पर निर्देशित किया जाएगा "Nesabamedia.com कंप्यूटर ट्यूटोरियल के बारे में है ... ..."।
सी। शीर्षक विशेषता
अगला, यदि आप शीर्षक विशेषता का उपयोग करते हैं,तब शीर्षक की सामग्री एक टूलटिप के रूप में प्रदर्शित की जाएगी जो लिंक पर मँडरा करने पर दिखाई देगी। यहाँ HTML में लिखने का एक उदाहरण है:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<a href="https://id.wikipedia.org/wiki/Soekarno">Biografi</a>
</body>
</html>उपरोक्त कोड चलाने के बाद, आपको जीवनी लिंक पर मँडराते समय नीचे की तरह एक स्क्रीन दिखाई देगी:
घ। बाहरी लिंक और स्थानीय लिंक में अंतर
बाहरी लिंक वेब पेज खोलने के लिए उपयोग किए जाते हैंकिसी अन्य वेबसाइट (विभिन्न डोमेन) पर रहते हुए, आमतौर पर "http: //" अनुभाग के साथ पूरा गंतव्य पथ पता लिखकर। यह HTML में लिखने और इसका उपयोग करने का एक उदाहरण है:
<!DOCTYPE html>
<html>
<head>
<title>External Link</title>
</head>
<body>
<p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
</body>
</html>ब्राउज़र में HTML कोड चलने के बाद, यह नीचे की तरह दिखेगा:
एक ही वेबसाइट या दस्तावेज़ रूट पर एक वेब पेज खोलने के लिए उपयोग किए जाने वाले स्थानीय लिंक के विपरीत। उदाहरण के लिए आपकी वेबसाइट का पता www.nesabamedia.com और वेबसाइट पर एक पेज है जिसका नाम है belajarpiano.html, अगर आप उस पेज का लिंक बनाना चाहते हैं, तो आपको पूरा यूआरएल लिखने की जरूरत नहीं है www.nesabamedia.com/belajarpiano.html href विशेषता में, बस लिखें belajarpiano.html केवल। नीचे दिए गए लेखन के उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Local Link</title>
</head>
<body>
<p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
</body>
</html>इस तरह का एक और उदाहरण, मान लीजिए कि हमारे पास एक फ़ोल्डर है जिसे कहा जाता है HTML सीखें, फ़ोल्डर में 2 HTML फाइलें और 2 फ़ोल्डर हैं, जिनमें से प्रत्येक में 1 HTML फ़ाइल है। स्पष्ट होने के लिए, फ़ोल्डर संरचना इस तरह दिखती है:
तो यहाँ तुम जाओ, चलो बस वर्तमान में मैं कह रहा हूँwebku.html नामक फाइल को संपादित करें और मैं एक लिंक बनाना चाहता हूं, जो मेरी कहानी के पेज की ओर जाता है। इसलिए मुझे बस इस तरह HTML कोड लिखने की आवश्यकता है:
<a href="cinta/kisahku.html">यह मानते हुए कि मैं अभी भी अपनी web.html फ़ाइल का संपादन कर रहा हूं, लेकिन इस बार मैं एक लिंक बनाना चाहता हूं जो मेरे करियर पृष्ठ, html की ओर इशारा करता है, फिर HTML कोड इस तरह होगा:
<a href="bisnis/karirku.html">फिर भी मेरी web.html फ़ाइल का संपादन। अगर मैं एक लिंक बनाना चाहता हूं जो पोस्ट पृष्ठ पर इंगित करता है, तो HTML कोड इस तरह है:
<a href="posting.html">स्थानीय लिंक का उपयोग करके, आपको उस पृष्ठ का पूरा पता लिखने की आवश्यकता नहीं है, जिस पृष्ठ पर आप जाना चाहते हैं।
लिंक के रूप में चित्र बनाना
ऐसे समय होते हैं जब हम एक छवि बनाना चाहते हैंविशिष्ट आवश्यकताओं के लिए लिंक जैसे कि एक बटन बनाना जो दूसरे पृष्ठ पर जाता है, जहां बटन वास्तव में छवियों से बना होता है। HTML कोड के उदाहरणों के लिए आप नीचे देख सकते हैं:
<!DOCTYPE html>
<html>
<head>
<title>Gambar sebagai Link</title>
</head>
<body>
<p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
<a href="posting.html"><img src="/images/tombol.jpg" alt="halaman posting"></a>
</p>
</body>
</html>ब्राउज़र में ऊपर HTML कोड चलाने के बाद, यह नीचे की तरह दिखता है:
जब आप बटन छवि पर क्लिक करते हैं, तो आप करेंगेपोस्ट पृष्ठ पर पुनर्निर्देशित किया गया। अरे हाँ, लिखने के लिए <img scr = "चित्र पता" ... सुनिश्चित करें कि यह सही है, यदि यह गलत है तो चित्र दिखाई नहीं देगा। ऊपर HTML कोड में, फ़ाइल tombol.jpg मैंने इसे html फ़ाइल के साथ एक फ़ोल्डर में रखा था, इसलिए मैंने अभी लिखा है <img src = "button.jpg" ... छवि फ़ाइल का पूरा पता लिखने की आवश्यकता नहीं है। और html फाइल के लिए मैंने इसे नाम दिया है gambar.html जब मैंने नाम दिया छवि फ़ाइल बटन.
यदि आप स्थानीय लिंक की अवधारणा को समझते हैं जो मैंने पहले चर्चा की है, तो आप इस कदम पर भ्रमित नहीं होंगे।
घ। लिंक पर लक्ष्य विशेषता
निर्दिष्ट या निर्दिष्ट करने के लिए लक्ष्य विशेषता का उपयोग किया जाता हैयह निर्दिष्ट करें कि लिंक के क्लिक करने के बाद गंतव्य टैब कैसे प्रदर्शित होता है, चाहे वह वर्तमान टैब / विंडो में या नए टैब / विंडो में खोला गया हो। यहां लक्ष्य विशेषता के मान दिए गए हैं जिनका आप उपयोग कर सकते हैं:
| गुण | समारोह |
| _ खाली | गंतव्य वेब पेज को एक नए टैब या विंडो में खोलें |
| _self | वर्तमान टैब या विंडो में गंतव्य वेब पेज खोलें (डिफ़ॉल्ट) |
| _parent | पैरेंट फ़्रेम में डेस्टिनेशन वेब पेज खोलें |
| _शीर्ष | सभी फ़्रेमों को रद्द करने वाले टैब या विंडो में गंतव्य वेब पृष्ठ खोलता है |
HTML में ध्यान रखें, "_parent" का उपयोग करकेऔर "_top" को हटा दिया गया है क्योंकि वेबसाइट अब फ़्रेम या फ़्रेमसेट पर आधारित नहीं लिखी गई है। इसके अलावा इन दोनों विशेषताओं का उपयोग शायद ही कभी किया जाता है। यदि आप लिंक पर एक लक्ष्य विशेषता निर्दिष्ट नहीं करते हैं, तो डिफ़ॉल्ट रूप से गंतव्य वेब पृष्ठ उस टैब या विंडो में खोला जाएगा जो वर्तमान में खुला है ("_self")।
निम्नलिखित लेखन कोड का एक उदाहरण है और HTML में लक्ष्य = "_ blank" विशेषता का उपयोग कर रहा है:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Target _blank</title>
</head>
<body>
Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
</body>
</html>ब्राउज़र में उपरोक्त कोड चलाने के बाद यह नीचे दिखाए गए अनुसार दिखाई देगा:
यह है कि HTML में एक साथ लिंक कैसे बनाया जाता हैHTML में लिंक के साथ जुड़े टैग और विशेषताओं की व्याख्या। अगली सामग्री जिसे आपको सीखने की आवश्यकता है वह है HTML में छवियां कैसे जोड़ें।
