HTML Images Kya Hai? – आपने कभी ना कभी तो वेबपेज देखे ही होंगे, जिनमें विभिन्न प्रकार की फोटो दिखाई देती हैं। क्या आप जानते हैं कि इन फोटो को वेबपेज में कैसे जोड़ा जाता है? इसके लिए HTML में एक विशेष तरह का टैग उपलब्ध है, जिसे HTML Images कहते हैं।
HTML Images का उपयोग वेबपेज में फोटो डालने के लिए किया जाता है। फोटो वेबपेज को ज्यादा आकर्षक और सुंदर बनाती हैं। इसके अलावा, फोटो से वेबपेज का मुख्य संदेश भी आसानी से समझ में आता है।
इस ब्लॉग में हम आपको HTML Images के बारे में विस्तार से बताएंगे, जैसे कि HTML Images का Syntax, HTML Images के Attributes, HTML Images के फॉर्मेट, HTML Images के साइज और एलाइनमेंट, आदि। इसके साथ ही, हम आपको कुछ उदाहरण भी दिखाएंगे, जिनसे आप HTML Images का उपयोग करना सीख सकेंगे।
HTML Images का Syntax
HTML Images Kya Hai? – HTML Images को वेबपेज में जोड़ने के लिए, हमें `<img>` टैग का उपयोग करना पड़ता है। `<img>` टैग एक Empty HTML Tag होता है, जिसका कोई Closing Tag नहीं होता है। `<img>` टैग में कुछ Attributes होते हैं, जिनकी मदद से हम फोटो की विशेषताओं को निर्धारित कर सकते हैं।
HTML Images का Syntax नीचे दिया गया है:
<img src="url" alt="alternatetext" some attributes... />
इस Syntax में, दो Attributes बहुत ही महत्वपूर्ण होते हैं, जो हैं src और alt।
src Attribute :- src Attribute का काम फोटो के Source यानि URL को बताना होता है। आप जिस फोटो को वेबपेज में दिखाना चाहते हैं, उसका पूरा URL Double Quotation Mark (“”) के अंदर लिखना पड़ता है। उदाहरण के लिए:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
alt Attribute:- alt Attribute का काम फोटो के बारे में एक Alternate Text बताना होता है। यह Text तब दिखाई देता है, जब फोटो किसी कारण से लोड नहीं हो पाती है, या जब वेबपेज को Screen Reader द्वारा पढ़ा जाता है। alt Attribute में फोटो का एक सार या विवरण लिखना चाहिए, जो फोटो की सामग्री को दर्शाता हो। उदाहरण के लिए:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli houses in Italy" />
HTML Images के Attributes जैसा कि हमने ऊपर बताया, <img> टैग में कुछ Attributes होते हैं, जिनकी मदद से हम फोटो की विशेषताओं को निर्धारित कर सकते हैं। इन Attributes के बारे में हम नीचे विस्तार से जानेंगे।
src Attribute
src Attribute का काम फोटो के Source यानि URL को बताना होता है। यह Attribute बहुत ही जरूरी होता है, क्योंकि इसके बिना फोटो वेबपेज में नहीं दिखाई देगी। src Attribute में आप दो प्रकार के URL लिख सकते हैं:
Absolute URL: यह वह URL होता है, जो फोटो का पूरा वेब एड्रेस बताता है। इसमें फोटो का Protocol, Domain Name, Folder Name, File Name, आदि सब कुछ शामिल होता है। उदाहरण के लिए:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
Relative URL: यह वह URL होता है, जो फोटो का लोकल एड्रेस बताता है। इसमें फोटो का File Name और Folder Name ही शामिल होता है। यह URL तब काम करता है, जब फोटो और वेबपेज एक ही सर्वर पर हों। उदाहरण के लिए:
<img src="images/pic_trulli.jpg" />
alt Attribute
alt Attribute का काम फोटो के बारे में एक Alternate Text बताना होता है। यह Text तब दिखाई देता है, जब फोटो किसी कारण से लोड नहीं हो पाती है, या जब वेबपेज को Screen Reader द्वारा पढ़ा जाता है। alt Attribute में फोटो का एक सार या विवरण लिखना चाहिए, जो फोटो की सामग्री को दर्शाता हो।
alt Attribute का एक और महत्वपूर्ण काम होता है, वह है SEO (Search Engine Optimization)। SEO का मतलब है, अपने वेबपेज को ऐसे बनाना, कि वह Search Engine के रिजल्ट में ऊपर आए। जब कोई यूजर Search Engine में कोई Keyword लिखता है, तो Search Engine उस Keyword को वेबपेज के Text में ढूंढता है। लेकिन फोटो के Text को Search Engine नहीं पढ़ सकता, इसलिए वह alt Attribute को पढ़ता है। अगर आप alt Attribute में अपने Keyword को शामिल करते हैं, तो आपका वेबपेज Search Engine के रिजल्ट में ज्यादा दिखाई देगा।
उदाहरण के लिए, अगर आपका Keyword है “HTML Images”, तो आप alt Attribute में इसे लिख सकते हैं:
<img src="images/pic_trulli.jpg" alt="Example of HTML Images - Trulli houses in Italy" />
width और height Attributes
width और height Attributes का काम फोटो की चौड़ाई और लंबाई को निर्धारित करना होता है। इन Attributes की मदद से हम फोटो का साइज बदल सकते हैं। इन Attributes में फोटो की चौड़ाई और लंबाई को Pixels में लिखना पड़ता है। उदाहरण के लिए:
<img src="images/pic_trulli.jpg" width="300" height="200" />
width और height Attributes का एक फायदा यह भी होता है, कि वे वेबपेज को फोटो के लिए एक Space रिजर्व कर देते हैं। इससे वेबपेज को लोड होने में कम समय लगता है, और वेबपेज का Layout भी बिगड़ता नहीं है।
style Attribute
style Attribute का काम फोटो की शैली को निर्धारित करना होता है। इस Attribute की मदद से हम फोटो के बॉर्डर, मार्जिन, पैडिंग, एलाइनमेंट, आदि को बदल सकते हैं। इस Attribute में हम CSS (Cascading Style Sheets) का उपयोग करते हैं। CSS के बारे में आप यहां पढ़ सकते हैं। उदाहरण के लिए:
<img src="images/pic_trulli.jpg" style="border:5px solid black; margin:10px; float:right;" />
HTML Images के फॉर्मेट
HTML Images Kya Hai? – HTML Images के लिए विभिन्न प्रकार के फॉर्मेट उपलब्ध हैं, जैसे JPEG, PNG, GIF, SVG, आदि। इनमें से हर एक फॉर्मेट का अपना-अपना फायदा और नुकसान होता है। इन फॉर्मेट के बारे में हम नीचे जानेंगे।
JPEG
JPEG (Joint Photographic Experts Group) एक लोकप्रिय फॉर्मेट है, जो फोटो को कम्प्रेस करने के लिए उपयोग किया जाता है। JPEG फॉर्मेट का फायदा यह है, कि इसमें फोटो का साइज कम हो जाता है, जिससे वेबपेज को लोड होने में कम समय लगता है।
JPEG फॉर्मेट का नुकसान यह है, कि इसमें फोटो की Quality थोड़ी कम हो जाती है। JPEG फॉर्मेट को उन फोटो के लिए उपयोग करना चाहिए, जिनमें बहुत सारे Colors हों, जैसे नेचुरल फोटो, पोर्ट्रेट फोटो, आदि।
JPEG फॉर्मेट की फाइल का Extension .jpg या .jpeg होता है।
PNG
PNG (Portable Network Graphics) एक और लोकप्रिय फॉर्मेट है, जो फोटो को कम्प्रेस करने के लिए उपयोग किया जाता है। PNG फॉर्मेट का फायदा यह है, कि इसमें फोटो की Quality नहीं खराब होती है, चाहे फोटो को कितनी बार भी कम्प्रेस किया जाए।
PNG फॉर्मेट का एक और बड़ा फायदा है, कि इसमें फोटो का Background Transparent हो सकता है, जिससे फोटो को किसी भी Background पर लगाया जा सकता है। PNG फॉर्मेट का नुकसान यह है, कि इसमें फोटो का साइज ज्यादा हो जाता है, जिससे वेबपेज को लोड होने में ज्यादा समय लगता है।
PNG फॉर्मेट को उन फोटो के लिए उपयोग करना चाहिए, जिनमें कम Colors हों, जैसे लोगो, आइकन, ग्राफ, आदि। PNG फॉर्मेट की फाइल का Extension .png होता है।
GIF
GIF (Graphics Interchange Format) एक ऐसा फॉर्मेट है, जो फोटो को एनिमेट करने के लिए उपयोग किया जाता है। GIF फॉर्मेट का फायदा यह है, कि इसमें फोटो को एक से ज्यादा Frames में बदला जा सकता है, जिससे फोटो में एक छोटा-सा वीडियो जैसा एफेक्ट आता है। GIF फॉर्मेट का नुकसान यह है, कि इसमें फोटो की Quality बहुत कम होती है, और इसमें सिर्फ 256 Colors ही दिखाए जा सकते हैं।
GIF फॉर्मेट को उन फोटो के लिए उपयोग करना चाहिए, जिनमें कोई सरल एनिमेशन हो, जैसे बैनर, बटन, आदि। GIF फॉर्मेट की फाइल का Extension .gif होता है।
SVG
SVG (Scalable Vector Graphics) एक ऐसा फॉर्मेट है, जो फोटो को वेक्टर ग्राफिक्स के रूप में बनाता है। वेक्टर ग्राफिक्स का मतलब है, कि फोटो को एक समीकरण के रूप में डिफाइन किया जाता है, जिसमें फोटो के हर भाग को एक ज्यामितीय आकृति के रूप में दर्शाया जाता है। SVG फॉर्मेट का फायदा यह है, कि इसमें फोटो को किसी भी साइज में बढ़ाया या घटाया जा सकता है, बिना किसी Quality Loss के।
SVG फॉर्मेट का एक और फायदा यह है, कि इसमें फोटो को HTML, CSS और JavaScript के साथ इंटरैक्टिव बनाया जा सकता है। SVG फॉर्मेट का नुकसान यह है, कि इसमें फोटो का साइज ज्यादा हो जाता है, और इसमें फोटो को बनाने में ज्यादा कॉडिंग की जरूरत होती है।
SVG फॉर्मेट को उन फोटो के लिए उपयोग करना चाहिए, जिनमें कोई शेप, लाइन, कर्व, आदि हो, जैसे लोगो, आइकन, ग्राफ, आदि। SVG फॉर्मेट की फाइल का Extension .svg होता है।
HTML Images Kya Hai? – HTML Images के साइज और एलाइनमेंट
HTML Images के साइज और एलाइनमेंट को बदलने के लिए, हम दो तरीके उपयोग कर सकते हैं:
HTML Attributes: जैसा कि हमने पहले बताया, हम width और height Attributes का उपयोग करके फोटो की चौड़ाई और लंबाई को बदल सकते हैं। इसके अलावा,
हम align Attribute का उपयोग करके फोटो को वेबपेज में किसी भी दिशा में एलाइन कर सकते हैं। align Attribute में हम निम्नलिखित Values लिख सकते है
- left: इस Value के साथ, फोटो को वेबपेज के बाएं ओर एलाइन किया जाता है, और फोटो के दाएं ओर Text Wrap होता है।
- right: इस Value के साथ, फोटो को वेबपेज के दाएं ओर एलाइन किया जाता है, और फोटो के बाएं ओर Text Wrap होता है।
- center: इस Value के साथ, फोटो को वेबपेज के बीच में एलाइन किया जाता है, और फोटो के ऊपर और नीचे Text Wrap नहीं होता है।
- top: इस Value के साथ, फोटो को वेबपेज के ऊपरी हिस्से में एलाइन किया जाता है, और फोटो के बाएं और दाएं ओर Text Wrap होता है।
- middle: इस Value के साथ, फोटो को वेबपेज के मध्य हिस्से में एलाइन किया जाता है, और फोटो के बाएं और दाएं ओर Text Wrap होता है।
- bottom: इस Value के साथ, फोटो को वेबपेज के निचले हिस्से में एलाइन किया जाता है, और फोटो के बाएं और दाएं ओर Text Wrap होता है।
उदाहरण के लिए, अगर हम फोटो को वेबपेज के दाएं ओर एलाइन करना चाहते हैं, तो हम align Attribute में right Value लिख सकते हैं:
<img src="images/pic_trulli.jpg" align="right" />
HTML Images Kya Hai? – HTML Images के FAQs
Q. HTML में फोटो को कैसे जोड़ते हैं?
A. HTML में फोटो को जोड़ने के लिए, हमें <img> टैग का उपयोग करना पड़ता है। <img> टैग में हमें फोटो के Source यानि URL को src Attribute में लिखना पड़ता है। उदाहरण के लिए:
<img src="https://www.w3schools.com/html/pic_trulli.jpg" />
Q. HTML में फोटो का साइज कैसे बदलते हैं?
A. HTML में फोटो का साइज बदलने के लिए, हमें width और height Attributes का उपयोग करना पड़ता है। width और height Attributes में हमें फोटो की चौड़ाई और लंबाई को Pixels में लिखना पड़ता है। उदाहरण के लिए:
<img src="images/pic_trulli.jpg" width="300" height="200" />
Q. HTML में फोटो को किसी भी दिशा में एलाइन कैसे करते हैं?
A. HTML में फोटो को किसी भी दिशा में एलाइन करने के लिए, हमें align Attribute का उपयोग करना पड़ता है। align Attribute में हम left, right, center, top, middle, या bottom Values लिख सकते हैं। उदाहरण के लिए, अगर हम फोटो को वेबपेज के बीच में एलाइन करना चाहते हैं, तो हम align Attribute में center Value लिख सकते हैं:
<img src="images/pic_trulli.jpg" align="center" />
HTML Images का निष्कर्ष
HTML Images Kya Hai? – इस ब्लॉग में हमने HTML Images के बारे में जाना, जिनका उपयोग वेबपेज को आकर्षक और सुंदर बनाने के लिए किया जाता है। हमने जाना कि HTML Images का Syntax क्या है, HTML Images के Attributes कौन-कौन से हैं, HTML Images के फॉर्मेट कौन-कौन से हैं, HTML Images के साइज और एलाइनमेंट कैसे बदलते हैं, और HTML Images के FAQs कौन-कौन से हैं।
हमें उम्मीद है कि आपको यह ब्लॉग पसंद आया होगा, और आप HTML Images का उपयोग करना सीख गए होंगे। अगर आपको कोई भी सवाल या सुझाव हो, तो आप हमें Comment Box में लिख सकते हैं। धन्यवाद! 😊