HTML इमेज लिंक कैसे बनाएं

छवियां किसी भी वेब पेज के सामान्य घटक हैं। वे दूसरे पेज का लिंक बनाने का भी एक शानदार तरीका हैं। एक href विशेषता और छवि टैग के साथ एंकर टैग के संयोजन का उपयोग करके, हम एक ऐसी छवि बना सकते हैं जो दो पृष्ठों के बीच एक लिंक के रूप में काम करती है। आप नीचे दिए गए चरणों का पालन करके इसे पूरा कर सकते हैं:

एक डिव एलिमेंट बनाएं। यह हमारे छवि तत्व, हमारे एंकर टैग और लिंक का वर्णन करने के लिए हम जो कुछ भी उपयोग करना चाहते हैं, उसे धारण करेगा।
अगला, एक एंकर टैग बनाएं। टैग में हाइपरटेक्स्ट संदर्भ (href's) होते हैं जो किसी अन्य पृष्ठ के लिंक को इंगित करते हैं। href को उस साइट या फ़ाइल पर सेट करें जिस पर आप चाहते हैं कि आपका लिंक जाए।

ओपनिंग और क्लोजिंग टैग के बीच में, चलिए एक टैग बनाते हैं। याद रखें कि छवि टैग स्वयं बंद हो रहे हैं। src . नामक विशेषता जोड़ें जो आपके द्वारा अपने लिंक के लिए उपयोग की जा रही छवि के url या पथ को इंगित करेगा।

कुछ ऐसा बनाएं जो छवि का वर्णन करे ताकि उपयोगकर्ता को पता चले कि यह क्लिक करने योग्य है। यह एक <कैप्शन> टैग, एक

टैग, एक

तत्व, एक
टैग हो सकता है - जो भी आप चाहते हैं।

एक कामकाजी नमूना नीचे दिए गए कोड संपादक में है। इसके साथ खेलने के लिए निश्चित रूप से कुछ समय लें!

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Image Link</title>
   <style>
       div {
           width: 500px;
           display: flex;
           flex-flow: column wrap;
       }
       img {
           width: 100%;
       }
       caption {
           width: 100%;
           height: 50px;
       }
   </style>
</head>
<body>
   <div>
       <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer">
           <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Golden Gate Bridge"  refer/>
       </a>
       <caption>
           An icon in the San Francisco skyline, the Golden Gate bridge shines in the twilight night sky. Click the image to learn more information about the Golden Gate bridge.
       </caption>
 
   </div>
</body>
</html>

एक अंतिम नोट:<a> . डालना आकर्षक है केवल कैप्शन के इर्द-गिर्द - चूंकि लिंक यही कह रहा है। उपयोगकर्ता यह अपेक्षा करने लगे हैं कि यदि वे किसी चित्र पर क्लिक करते हैं, तो लिंक गंतव्य के साथ एक नया टैब खुल जाएगा (यह वही है जो लक्ष्य ="_ रिक्त" सिंटैक्स कर रहा है)। तो, <a> रखें लिंक के चारों ओर टैग लगाएं और चित्र का वर्णन करने के लिए टेक्स्ट छोड़ दें - या <a> . डालें टेक्स्ट और <img> . दोनों के आसपास टैग करें . दोनों तरीके व्यवहार्य विकल्प हैं।

HTML इमेज लिंक कैसे बनाएं

तत्व, एक टैग हो सकता है - जो भी आप चाहते हैं।

तत्व, एक
टैग हो सकता है - जो भी आप चाहते हैं।