यह पोस्ट एक URL से छवि जोड़ने की विधि को संक्षेप में बताएगी।
HTML/CSS में URL से इमेज कैसे जोड़ें?
HTML/CSS में, URL का उपयोग करके छवि जोड़ने के लिए दो विधियाँ उपलब्ध हैं, जो नीचे सूचीबद्ध हैं:
विधि 1: ![]()
तत्व का उपयोग करके छवि जोड़ें
' ”तत्व एक एकल शून्य तत्व है जिसमें कोई बाल सामग्री और समाप्ति टैग नहीं है। ' स्रोत ' और ' सब कुछ ” दो प्रमुख विशेषताएं हैं जिनका उपयोग “
” टैग के अंदर किया जाता है।
तत्व का उपयोग करके एक छवि जोड़ने के लिए नीचे दिए गए निर्देशों को देखें!
चरण 1: एक डिव कंटेनर बनाएं
सबसे पहले, 'का उपयोग करके एक div कंटेनर बनाएं' <दिव> ' टैग। फिर, 'डालें' कक्षा ” विशेषता और इच्छा के अनुसार वर्ग को एक नाम दें।
चरण 2: शीर्षक डालें
अगला, आवश्यक शीर्षक टैग का उपयोग करें ' <एच1> ' को ' <एच6> ' टैग। उदाहरण के लिए, हम
टैग का उपयोग करेंगे और विशेष टेक्स्ट को ओपनिंग और क्लोजिंग टैग के अंदर हेडिंग के रूप में जोड़ेंगे।
चरण 3: URL का उपयोग करके एक छवि जोड़ें
चरण 3: URL का उपयोग करके एक छवि जोड़ें
उसके बाद, 'जोड़ें' ”टैग करें और छवि टैग के अंदर नीचे सूचीबद्ध विशेषताओं को सम्मिलित करें:
- ' स्रोत मीडिया फ़ाइल को जोड़ने के लिए विशेषता का उपयोग किया जाता है। उस प्रयोजन के लिए, अपना इच्छित वेब ब्राउज़र लॉन्च करें और वांछित छवि URL की प्रतिलिपि बनाएँ।
- फिर, URL को “के मान के रूप में निर्दिष्ट करें स्रोत ' गुण।
- अगला, ' सब कुछ ” का उपयोग छवि के लिए एक नाम जोड़ने के लिए किया जाता है जब यह किसी कारण से प्रदर्शित नहीं होता है।
- ' कद 'गुण दिए गए मान के अनुसार तत्व की ऊंचाई निर्दिष्ट करता है।
- ' चौड़ाई 'तत्व की चौड़ाई निर्धारित करने के लिए उपयोग किया जाता है:
< एच 2 > URL के साथ छवि जोड़ें < / एच 2 >
< आईएमजी स्रोत = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' सब कुछ = 'छवि!' कद = '400 पीएक्स' चौड़ाई = '300 पीएक्स' / >
< / डिव >
नीचे दिए गए आउटपुट के अनुसार, निर्दिष्ट इमेज को सफलतापूर्वक जोड़ा गया है:
विधि 2: HTML में CSS गुणों का उपयोग करके छवि जोड़ें
डेवलपर CSS का उपयोग करके URL से छवि भी जोड़ सकते हैं ” पृष्ठभूमि छवि 'सीएसएस। इस प्रयोजन के लिए, नीचे दिए गए चरणों का पालन करें।
चरण 1: शीर्षक डालें
पहले
ओपनिंग और क्लोजिंग टैग की मदद से एक हेडिंग टेक्स्ट डालें।
चरण 2: div कंटेनर बनाएँ
अगला,
<डिव वर्ग = 'आईएमजी-कंटेनर' > >
चरण 3: एक्सेस कंटेनर
अब, डॉट चयनकर्ता के माध्यम से कक्षा तक पहुँचें ' . ” और वर्ग का नाम जो पहले बनाया गया था।
चरण 4: 'पृष्ठभूमि-छवि' सीएसएस संपत्ति का उपयोग करके छवि जोड़ें
उसके बाद, कक्षा के अंदर एक यूआरएल से छवि जोड़ने के लिए नीचे सूचीबद्ध सीएसएस गुणों को लागू करें:
आईएमजी-कंटेनर {कद : 400 पीएक्स ;
चौड़ाई : 250 पीएक्स ;
पृष्ठभूमि-आकार : शामिल होना ;
पृष्ठभूमि छवि : यूआरएल ( HTTPS के : //इमेजिस .pexels .com/तस्वीरें/ 2260800 /पेक्सल्स-फोटो- 2260800 जेपीईजी? ऑटो = सेक और सीएस = smallsrgb&w = 1260 &एच = 750 और डीपीआर = एक )
}
ऊपर दिए गए कोड में:
- ' कद ” संपत्ति का उपयोग तत्व की ऊंचाई निर्धारित करने के लिए किया जाता है।
- ' चौड़ाई ' का उपयोग तत्व की चौड़ाई के आकार को निर्दिष्ट करने के लिए किया जाता है।
- ' पृष्ठभूमि-आकार ” पृष्ठभूमि तत्व आकार सेट करने के लिए उपयोग किया जाता है।
- ' पृष्ठभूमि छवि ' संपत्ति तत्व के पीछे एक छवि जोड़ती है। इसी उद्देश्य के लिए, ' यूआरएल () 'फ़ंक्शन का उपयोग छवि को जोड़ने और फ़ंक्शन में छवि के URL को चिपकाने के लिए किया जाता है' () ”।
उत्पादन
आपने URL से चित्र जोड़ने के विभिन्न तरीकों के बारे में सीखा है।
निष्कर्ष
एक URL से एक छवि जोड़ने के लिए, डेवलपर्स 'का उपयोग कर सकते हैं' ' टैग। फिर, 'डालें' स्रोत विशेषता दें और URL को 'src' मान के रूप में असाइन करें। इसके अलावा, उपयोगकर्ता CSS का उपयोग करके URL से एक छवि जोड़ सकता है ' पृष्ठभूमि छवि ' संपत्ति। इस राइट-अप में HTML/CSS में URL से इमेज जोड़ने के तरीके बताए गए हैं।