वेबसाइटें उनके सामने आने वाले किसी भी संचार माध्यम के विपरीत हैं। प्रिंट, रेडियो और यहां तक कि टेलीविजन जैसे पिछले मीडिया प्रारूपों से अलग वेबसाइटों को सेट करने वाली मुख्य चीजों में से एक " हाइपरलिंक " की अवधारणा है।
हाइपरलिंक्स, जिसे आमतौर पर "लिंक" के नाम से भी जाना जाता है, वे वेब को इतना गतिशील बनाते हैं। एक मुद्रित प्रकाशन के विपरीत जो किसी अन्य आलेख या अन्य संसाधन का संदर्भ दे सकता है, वेबसाइटें इन लिंक का उपयोग वास्तव में उन अन्य पृष्ठों और संसाधनों को आगंतुकों को भेजने के लिए कर सकती हैं। कोई अन्य प्रसारण माध्यम ऐसा नहीं कर सकता है। आप रेडियो पर एक विज्ञापन सुन सकते हैं या टीवी पर देख सकते हैं, लेकिन कोई हाइपरलिंक्स नहीं है जो आपको उन विज्ञापनों में कंपनियों के लिए ले जा सकती है, जिस तरह से वेबसाइट आसानी से कर सकती है। लिंक वास्तव में एक अद्भुत संचार और बातचीत उपकरण हैं!
अक्सर, वेबसाइट पर पाए गए लिंक टेक्स्ट सामग्री होते हैं जो विज़िटर को उसी साइट के अन्य पृष्ठों पर निर्देशित करता है। एक वेबसाइट की नेविगेशन अभ्यास में टेक्स्ट लिंक का एक उदाहरण है लेकिन लिंक को पाठ-आधारित होने की आवश्यकता नहीं है। आप अपनी वेबसाइट पर छवियों को आसानी से लिंक भी कर सकते हैं। चलो देखते हैं कि यह कैसे किया जाता है, इसके बाद कुछ उदाहरणों के साथ आप छवि-आधारित हाइपरलिंक्स का उपयोग करना चाहते हैं।
एक छवि को कैसे लिंक करें
पहली चीज़ जो आपको करने की आवश्यकता होगी वह छवि को अपने HTML दस्तावेज़ में रखना है। छवि-आधारित लिंक का एक सामान्य उपयोग साइट का लोगो ग्राफ़िक है जिसे फिर साइट के मुखपृष्ठ पर लिंक किया जाता है। नीचे हमारे उदाहरण कोड में, हम जिस फ़ाइल का उपयोग कर रहे हैं वह हमारे लोगो के लिए एक एसवीजी है । यह एक अच्छी पसंद है क्योंकि यह छवियों की गुणवत्ता को बनाए रखने और एक छोटे से समग्र फ़ाइल आकार को बनाए रखने के दौरान, हमारी छवि को विभिन्न संकल्पों के लिए स्केल करने की अनुमति देगा।
यहां बताया गया है कि आप HTML छवि में अपनी छवि कैसे रखेंगे:
छवि टैग के आस-पास, अब आप एंकर लिंक जोड़ देंगे, छवि से पहले एंकर तत्व खोलेंगे और छवि के बाद एंकर बंद कर देंगे। यह टेक्स्ट के साथ कैसे लिंक करेगा, केवल शब्दों को लपेटने के बजाय आप एंकर टैग के साथ एक लिंक बनना चाहते हैं, आप छवि को लपेटते हैं। नीचे दिए गए हमारे उदाहरण में, हम अपनी साइट के मुखपृष्ठ पर वापस लिंक कर रहे हैं, जो "index.html" है।
अपने एचटीएमएल को अपने पेज पर जोड़ते समय, एंकर टैग और छवि टैग के बीच कोई रिक्त स्थान न रखें। यदि आप करते हैं, तो कुछ ब्राउज़र छवि के बगल में छोटी टिकियां जोड़ देंगे, जो अजीब लगेंगे।
लोगो छवि अब होमपेज बटन के रूप में भी कार्य करेगी, जो इन दिनों काफी वेब मानक है। ध्यान दें कि हमारे एचटीएमएल मार्कअप में, छवि की चौड़ाई और ऊंचाई जैसे किसी दृश्य शैलियों को शामिल नहीं किया गया है। हम इन दृश्य शैलियों को सीएसएस में छोड़ देंगे और एचटीएमएल संरचना और सीएसएस शैलियों का एक साफ अलगाव बनाए रखेंगे।
एक बार जब आप सीएसएस पर जाते हैं, तो इस लोगो ग्राफ़िक को लक्षित करने के लिए आपके द्वारा लिखे गए शैलियों में छवि का आकार शामिल हो सकता है, जिसमें बहु-डिवाइस अनुकूल छवियों के लिए उत्तरदायी शैलियों के साथ-साथ किसी भी दृश्य को आप छवि / लिंक, जैसे सीमाओं या सीएसएस में जोड़ना चाहते हैं छाया ड्रॉप यदि आपको अपनी सीएसएस शैलियों के साथ उपयोग करने के लिए अतिरिक्त "हुक" की आवश्यकता होती है तो आप अपनी छवि भी दे सकते हैं या क्लास एट्रिब्यूट को लिंक कर सकते हैं।
छवि लिंक के लिए मामलों का प्रयोग करें
तो एक छवि लिंक जोड़ना बहुत आसान है। जैसा कि हमने अभी देखा है, आपको बस इतना करना होगा कि छवि को उपयुक्त एंकर टैग के साथ लपेटें। आपका अगला प्रश्न "उपरोक्त लोगो / होमपेज लिंक उदाहरण के अलावा वास्तव में अभ्यास में कब होगा?"
यहां कुछ विचार दिए गए हैं:
- एक गैलरी में थंबनेल छवियां जो उन छवियों के बड़े संस्करणों से लिंक करती हैं।
- छवियों का प्रतिनिधित्व करने के लिए अकेले उपयोग की जाने वाली छवियां, जैसे ई-कॉमर्स वेबसाइट के लिए उत्पाद फ़ोटो।
- टीज़र छवियां जो अन्य सामग्री का हिस्सा हैं, जैसे कि ब्लॉग आलेख या प्रेस विज्ञप्ति, जो लोगों को यह ध्यान देने के लिए लुभाने लगती हैं कि सामग्री उन्हें पूर्ण लेख पढ़ने के लिए टैप करने या क्लिक करने के लिए लक्षित क्षेत्र प्रदान करती है।
- आइकन छवियों को साइट के भीतर विशिष्ट कार्यक्षमता या पृष्ठों से कनेक्ट करने के लिए बटन के रूप में उपयोग किया जाता है।
- सोशल मीडिया लिंक जो उस साइट या कंपनी के लिए महत्वपूर्ण विभिन्न सोशल मीडिया साइटों के पहचानने योग्य लोगो का उपयोग करते हैं।
- कुछ कार्यक्षमता के लिए बटन के रूप में उपयोग की जाने वाली छवियां, जैसे फॉर्म सबमिशन (सर्वोत्तम प्रथाओं नोट - वेबसाइट प्रदर्शन परिप्रेक्ष्य से, सीएसएस के साथ पूरी तरह स्टाइल बटन बटन बटन से बेहतर विकल्प हैं)।
छवियों का उपयोग करते समय एक अनुस्मारक
वेबसाइट की सफलता में छवियां एक महत्वपूर्ण भूमिका निभा सकती हैं। उस सामग्री पर ध्यान आकर्षित करने और लोगों को इसे पढ़ने के लिए अन्य सामग्री के साथ-साथ छवियों का उपयोग करके ऊपर दिए गए उदाहरणों में से एक।
छवियों का उपयोग करते समय, आपको अपनी ज़रूरतों के लिए सही छवि का चयन करने के लिए सावधान रहना चाहिए, इसमें सही छवि विषय वस्तु, प्रारूप, और यह सुनिश्चित करना भी शामिल है कि आप अपनी वेबसाइट पर उपयोग की जाने वाली किसी भी छवि को वेबसाइट वितरण के लिए उचित रूप से अनुकूलित कर रहे हैं। यह छवियों को जोड़ने के लिए बहुत सारे काम की तरह लग सकता है, लेकिन भुगतान इसके लायक है! छवियां वास्तव में साइट की सफलता में बहुत कुछ जोड़ सकती हैं।
अपनी साइट पर उचित छवियों का उपयोग करने में संकोच न करें, और अपनी छवियों पर कुछ अंतःक्रियात्मक रूप से जोड़ने के लिए उन छवियों को लिंक करें, लेकिन इन छवियों के सर्वोत्तम प्रथाओं के प्रति सावधान रहें और इन ग्राफिक्स / लिंक को अपने वेब डिज़ाइन कार्य में सही ढंग से और जिम्मेदार तरीके से उपयोग करें।