छवियाँ एक वेब पेज का एक बहुत ही महत्वपूर्ण हिस्सा हैं क्योंकि यह एक वेब पेज की उपस्थिति में सुधार करता है और ग्राहक संपर्क बढ़ाता है। कई वेबसाइटों की यूएसपी यह है कि वे अपने वेबपेज पर विभिन्न छवियों को कैसे व्यवस्थित करते हैं और इसमें फ्लेवर जोड़ते हैं। इसमें छवियाँ लेख, हम निम्न क्रम में HTML का उपयोग करके वेबपेज में छवियों को एम्बेड करने का तरीका समझेंगे:
HTML में Image कैसे Add करें
एक वेबपेज में एक छवि एम्बेड करने के लिए HTML आपको देता है टैग। याद रखने के लिए एक और महत्वपूर्ण बिंदु है,
एक समापन टैग नहीं है छानना विशेषता का उपयोग छवि के पथ को निर्दिष्ट करने के लिए किया जाता है, जो सिस्टम / सर्वर से एक यूआरएल या छवि पथ हो सकता है। आइए हम पहले HTML का उपयोग करके वेबपेज में इमेज को एम्बेड करने के मूल सिंटैक्स के साथ शुरू करें।
वाक्य - विन्यास
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>नमूना कोड
वेबपेज में HTML इमेज एंबेडिंग इमेज
अन्य टैगों की तरह ही, इसके साथ जुड़े विभिन्न गुण हैं टैग। आइए हम उनमें से प्रत्येक को एक-एक करके देखें, उनकी आवश्यकता को समझें और उनका उपयोग कैसे करें।
HTML छवियाँ टैग
- alt विशेषता
एक छवि के लिए वैकल्पिक विशेषता वैकल्पिक विशेषता है। ऑल्ट एट्रिब्यूशन क्यों पेश किया गया इसका कारण यह है कि यदि किसी कारण से इमेज लोड नहीं हो पाती है तो एक वैकल्पिक टेक्स्ट इमेज के बारे में एक विचार देता है। छवि लोड न होने के कारण धीमे इंटरनेट कनेक्शन हो सकते हैं या छवि प्रदान स्रोत में नहीं रहती है, आदि।
यदि छवि उसी फ़ोल्डर के अंदर रहती है जहां HTML फ़ाइल है, तो आप सीधे फ़ाइल का नाम निर्दिष्ट कर सकते हैं। अन्यथा, आपके पास छवि फ़ाइल का पूर्ण पथ उपलब्ध है।
Alt विशेषता का मान छवि का वर्णन करना चाहिए।
उदाहरण
वेबपेज में HTML इमेज एंबेडिंग इमेज
जावा में पुनरावृत्ति का उपयोग
- चौड़ाई और ऊंचाई एक छवि
शैली की विशेषता का उपयोग किसी छवि की ऊंचाई और चौड़ाई निर्धारित करने के लिए किया जाता है। शैली विशेषता में आप CSS स्टाइलिंग निर्दिष्ट करते हैं।
वेबपेज में HTML इमेज एंबेडिंग इमेज
HTML का उपयोग करते हुए एक वेबपेज में एक छवि एम्बेड करते समय कुछ महत्वपूर्ण बिंदु हैं:
- पिक्सल में चौड़ाई और ऊंचाई की विशेषताओं को परिभाषित किया गया है।
- आप किसी छवि की चौड़ाई और ऊंचाई को प्रतिशत में भी परिभाषित कर सकते हैं। यह संपूर्ण वेबपृष्ठ के अनुसार प्रतिशत पर विचार करेगा।
- यदि आप उनमें से केवल एक को निर्दिष्ट करते हैं तो यह दूसरे को उसी के अनुसार समायोजित करता है।
- URL का उपयोग करके इमेज एम्बेड करना
HTML आपको वह लचीलापन भी देता है जहाँ आप URL को निर्दिष्ट करके किसी अन्य सर्वर से छवि चुन सकते हैं। आप छवियों को होस्ट करने के लिए एक अलग सर्वर का उपयोग कर सकते हैं और फिर URL का उपयोग करके उन चित्रों को एम्बेड कर सकते हैं।
वेबपेज में HTML इमेज एंबेडिंग इमेज
- एक लिंक के रूप में छवि
आप छवि को एक लिंक के रूप में भी उपयोग कर सकते हैं जहां उपयोगकर्ता छवि पर क्लिक कर सकता है और एक नए वेबपेज पर उतर सकता है। ऐसा करने के लिए, आपको बस इसे लगाना होगा दिन में टैग।
वेबपेज में HTML इमेज एंबेडिंग इमेज
- इमेज फ्लोटिंग
आप सीएसएस फ्लोट संपत्ति का उपयोग करके छवि के संरेखण को भी समायोजित कर सकते हैं। सभी सीएसएस संपत्ति को शैली की विशेषता में निर्दिष्ट करने की आवश्यकता है।
HTML छवि
- छवि मानचित्र
यह HTML द्वारा प्रदान की जाने वाली महत्वपूर्ण विशेषताओं में से एक है। टैग छवि-मानचित्र को परिभाषित करने में मदद करता है। आप सोच रहे होंगे कि इमेज मैप क्या है। एक छवि-मानचित्र क्लिक करने योग्य क्षेत्रों के साथ एक छवि है
HTML छवि
- पृष्ठभूमि छवि
आप एक वेबपेज में एक पृष्ठभूमि छवि भी जोड़ सकते हैं। आपको बस CSS संपत्ति यानि बैकग्राउंड-इमेज को स्टाइल टैग में इस्तेमाल करना होगा और उसे HTML एलिमेंट में जोड़ना होगा।
HTML छविपृष्ठभूमि छवि
शरीर तत्व
जावा में पैकेज का उपयोग कैसे करें
इसके साथ ही हम इस HTML Images ब्लॉग के अंत में आते हैं।अब उपरोक्त स्निपेट्स को निष्पादित करने के बाद आप समझ गए होंगे कि HTML में छवि कैसे डालें। मुझे उम्मीद है कि यह ब्लॉग जानकारीपूर्ण है और आपके लिए मूल्य वर्धित है।
हमारी जाँच करें जो प्रशिक्षक के नेतृत्व वाले लाइव प्रशिक्षण और वास्तविक जीवन की परियोजना के अनुभव के साथ आता है। यह प्रशिक्षण आपको बैक-एंड और फ्रंट-एंड वेब तकनीकों के साथ काम करने के लिए कौशल में कुशल बनाता है। इसमें वेब डेवलपमेंट, jQuery, Angular, NodeJS, ExpressJS और MongoDB पर प्रशिक्षण शामिल है।
क्या आप हमसे कोई प्रश्न पूछना चाहते हैं? कृपया 'HTML Images' ब्लॉग के टिप्पणी अनुभाग में इसका उल्लेख करें और हम आपके पास वापस आ जाएंगे।