Img and Anchor tags Free web designing Course Tutorials #6
Img and Anchor tags
अब तक, इस वेब डेवलपमेंट कोर्स में, हमने अब तक मूलभूत बातों के बारे में सीखा है। इस ट्यूटोरियल में, हम सीखेंगे कि "HTML में इमेज और लिंक को कैसे हैंडल करें"।
इससे पहले कि हम आगे बढ़ें मैं आपको बता दूं कि, इस ट्यूटोरियल से, हम अपनी सीखने की गति को बढ़ाने जा रहे हैं क्योंकि HTML काफी आसान है और बिंदु भाषा के लिए है और मुझे नहीं लगता कि अगर आप पढ़ेंगे और सीखेंगे तो आप किसी भी समस्या का सामना करेंगे। और हर ट्यूटोरियल बुद्धिमानी से।
सबसे पहले, बॉयलरप्लेट को सेट करें। यह सभी आवश्यक क्षेत्रों के साथ एक बुनियादी HTML टेम्पलेट है। यदि आपने पिछले ट्यूटोरियल की जांच नहीं की है, तो यह पहली बार में उनके माध्यम से जाने का सुझाव दिया गया है।
अब, एंकर टैग पर नजर डालते हैं जो मूल रूप से लिंक को संभालने में हमारी मदद करता है।
बॉडी टैग में, यदि आप "a" टाइप करते हैं, तो एंकर टैग दिखाई देगा। बस एंटर कुंजी दबाएं या यदि आप चाहें तो आप पूरे टैग को मैन्युअल रूप से लिख सकते हैं। नीचे दिए गए घोषणा को देखें:
<a href=""> </a>
यहाँ href एंकर टैग की विशेषता है जहाँ आपको उस वेबसाइट या लिंक का URL लिखना है जिसे आप खोलना चाहते हैं। इसके बाद, आपको कीवर्ड लिखना होगा, जिस पर आप उपयोगकर्ता को क्लिक करना चाहते हैं ताकि वह लिंक की गई वेबसाइट पर रीडायरेक्ट हो जाए। नीचे दिए गए उदाहरण का संदर्भ लें:
<a href="https://google.com">Go to Google</a>
अब, यहाँ समस्या यह है कि जैसे ही हम कीवर्ड पर क्लिक करते हैं, वेबसाइट उसी वेबपेज पर खुल जाएगी लेकिन यदि आप वेबसाइट को एक नए टैब में खोलना चाहते हैं तो आपको एंकर में एक नई विशेषता डालनी होगी। टैग Ie "लक्ष्य"।
आप टैग और विशेषता के बीच भ्रमित हो सकते हैं, तो मुझे जल्दी से दोनों के बीच का अंतर बताएं।
टैग एक कंटेनर की तरह है जो आपको एक तत्व को संभालने की अनुमति देता है जबकि विशेषता वह गुण है जो उस कंटेनर को बढ़ाता है जो इसे उपयोग करने के लिए अधिक सुविधाजनक बनाता है।
एक नए टैब में वेबसाइट खोलने के लिए, आपको कुछ इस तरह लिखना होगा:
<a href="https://google.com" target = "_blank">Go to Google</a>
इस एंकर टैग के माध्यम से, आप आंतरिक वेबपृष्ठों को भी लिंक कर सकते हैं जो आपकी निर्देशिका में स्थानीय रूप से उपलब्ध हैं। आपको बस इसके नाम के साथ फ़ाइल नाम सहित आंतरिक वेबपृष्ठों के पते का उपयोग करना होगा।
उदाहरण के लिए:
<a href="tut4.html" target = "_blank">Go to Google</a>
तो, यह सब HTML के एंकर टैग में था अब आइए अगले विषय पर जाएं। HTML में Images को संभालना।
किसी वेबपेज में एक इमेज डालने के लिए, आपको img टैग का उपयोग करना होगा।
एक img टैग में आम तौर पर दो बुनियादी गुण "src" और "alt" होते हैं।
<img src="" alt="">
यहां "src" वह फ़ील्ड है जहां आपको छवि का URL या पता सम्मिलित करना होगा और "alt" विशेषता एक फ़ील्ड है जो उपयोगकर्ताओं को प्रदर्शित करेगा यदि उनका ब्राउज़र छवि को लोड करने में विफल रहता है।
"ऑल्ट" टैग में, हम आम तौर पर उस छवि का एक कीवर्ड इनपुट करते हैं जो उस छवि को परिभाषित कर सकता है जब उपयोगकर्ता छवि नहीं देख सकता है।
उदाहरण के लिए:
<img src="https://source.unsplash.com/random" alt= "Error loading image">
यहां एक यादृच्छिक छवि लोड की जाएगी क्योंकि यह URL कई छवियों को संग्रहीत करता है और उनमें से किसी एक को वेबपेज को रीफ्रेश करने पर हर बार पुनः लोड किया जाता है।
इसके अलावा, आइए एक और उदाहरण देखें जहां हम केवल URL का उपयोग करके छवि की ऊंचाई और चौड़ाई को समायोजित कर सकते हैं। खैर, यह ऐसा कुछ नहीं है जो हम हर URL में कर सकते हैं। यहां हम यह कर सकते हैं क्योंकि वेबसाइट के डेवलपर्स ने इस URL को तदनुसार बनाया है।
उदाहरण के लिए:
<img src="https://source.unsplash.com/1600x900/?nature,water" alt= "Error loading image">
यदि आप छवियों के आयामों में हेरफेर करना चाहते हैं, तो आप img टैग की "ऊंचाई" और "चौड़ाई" विशेषता का उपयोग कर सकते हैं। हालांकि इन विशेषताओं का उपयोग करके आयाम में हेरफेर करने की अनुशंसा नहीं की जाती है, हम डिजाइन को बदलने के लिए सीएसएस का उपयोग करेंगे। नीचे चित्रण देखें:
<img src="https://source.unsplash.com/1600x900/?nature,water" alt= "Error loading image" width = "233" height="34">
यहां छवि नए आयामों के अनुसार लोड की जाएगी।
यह सब इस ट्यूटोरियल में था, HTML का उपयोग करके वेब विकास की बेहतर समझ के लिए पिछले ट्यूटोरियल की जाँच करना न भूलें।
वीडियो में वर्णित / लिखे अनुसार कोड
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Links and images</title>
</head>
<body>
<a href="https://google.com" target="_blank">Go to google</a><br>
<a href="https://facebook.com" target="_blank">Go to facebook</a><br>
<a href="https://twitter.com" target="_blank">Go to twitter</a><br>
<a href="https://linkedin.com" target="_blank">Go to Linkedin</a><br>
<a href="/tut4.html" target="_blank">Tut 4</a>
<a href="/tut5.html" target="_blank">Tut 5</a>
<!-- Image is not present hence alt text is shown -->
<!-- <img src="harry.jpg" alt="Error loading image"> -->
<img src="https://source.unsplash.com/200x110/?nature,water" alt="remote image" width="233" height="34">
</body>
</html>
