HTML बुनियादी बातों - छवियों को प्रदर्शित करना

• मई 2, 2024

एक बार जब आप अपनी वेबसाइट का पाठ पोस्ट कर देते हैं और अपनी पसंद के अनुसार स्वरूपित कर लेते हैं, तो कुछ छवियों के साथ पृष्ठ को मसाला देने का समय आ जाता है। न केवल छवियां आपके पृष्ठों में रंग और जीवन जोड़ सकती हैं, आप उन्हें पाठ प्रभाव उत्पन्न करने के लिए भी उपयोग कर सकते हैं जो नियमित पाठ और स्वरूपण के साथ करना मुश्किल या असंभव होगा। उदाहरण के लिए, आपके फ़ॉन्ट विकल्प आम तौर पर उन फोंट की छोटी संख्या तक सीमित होंगे जिन्हें आप सुनिश्चित कर सकते हैं कि वे आगंतुकों के कंप्यूटर पर स्थापित हैं, क्योंकि यदि उनके पास फ़ॉन्ट स्थापित नहीं है तो वे इसे आपकी साइट पर नहीं देख सकते हैं! जब भी आप अनुपलब्ध फ़ॉन्ट में पाठ पोस्ट करते हैं, तो विज़िटर के कंप्यूटर इसे उस उपलब्ध रेंडर में प्रस्तुत करेंगे जो शैली में निकटतम है, जो अक्सर आपकी वेबसाइट के डिजाइन पर कहर ढा सकता है।

दूसरी ओर, यदि आप एक इमेज एडिटिंग प्रोग्राम का उपयोग करते हैं तो टेक्स्ट को फैंसी फॉन्ट में कैप्चर करने के लिए और इसे अपनी साइट पर GIF या JPEG के रूप में पोस्ट कर सकते हैं, कोई भी विज़िटर इसे ठीक वैसे ही देखेगा जैसा आप चाहते थे - क्योंकि यह अब टेक्स्ट की तस्वीर है। पाठ ही। यह आपको अपने हेडर में काल्पनिक फोंट का उपयोग करने और उन्हें असामान्य तरीके से समूह बनाने के लिए मुक्त कर सकता है।

छवियों को प्रदर्शित करने के लिए उपयोग किया जाने वाला मूल टैग निम्नलिखित है:



उपरोक्त कोड HTML में पूरी तरह से काम करेगा। यदि आप XHTML का उपयोग कर रहे हैं या यह सुनिश्चित करना चाहते हैं कि आपकी साइट XHTML- तैयार है, तो आपको टैग को बंद करने के लिए एक स्लैश जोड़ना चाहिए, क्योंकि XHTML में आप ओपन-एंडेड टैग का उपयोग नहीं कर सकते हैं:



'Src' स्रोत के लिए छोटा है, और आप इसका उपयोग अपनी छवि के लिए फ़ाइल पथ को निर्दिष्ट करने के लिए करेंगे - दूसरे शब्दों में, अपने ब्राउज़र को यह बताने के लिए कि छवि आपकी साइट पर कहाँ मिल सकती है। यदि आप अपनी छवियों को अपने वेब पृष्ठों के समान फ़ोल्डर में रखते हैं, तो आपको फ़ोल्डर को 'src' पाठ में सूचीबद्ध करने की आवश्यकता नहीं है - आप छवि फ़ाइल नाम में टाइप कर सकते हैं।

अपनी छवि स्रोत निर्दिष्ट करने के बाद, आप अपनी छवियों से अधिकतम लाभ पाने के लिए विभिन्न वैकल्पिक विशेषताओं के साथ इस बुनियादी ढांचे को बढ़ा सकते हैं। एक विशेषता जो आपको लगभग हमेशा उपयोग करनी चाहिए वह है 'ऑल्ट' विशेषता। यह आपको यह निर्दिष्ट करने की अनुमति देता है कि यदि किसी कारण से आपकी छवि को दिखाने में असमर्थ है तो ब्राउज़र को कौन सा पाठ प्रदर्शित करना चाहिए। 'ऑल्ट' पाठ इस प्रकार तैयार किया गया है:



विशेषताओं का एक और उपयोगी सेट 'चौड़ाई' और 'ऊंचाई' टैग है। ये आपको वास्तविक छवि आकार की तुलना में एक अलग आकार में चित्र प्रदर्शित करने की अनुमति देते हैं। आप उन्हें अपनी छवि को ट्विस्ट करने के लिए उपयोग कर सकते हैं ताकि यह आपके समग्र पृष्ठ डिज़ाइन में पूरी तरह फिट हो जाए। हालाँकि, यह आमतौर पर छवि संपादन कार्यक्रमों का उपयोग करके वास्तविक छवि आकार को बदलने और फिर दो कारणों से छवि को लाइन पर पोस्ट करने के लिए बेहतर है। सबसे पहले, छवि संपादन सॉफ्टवेयर लगभग हमेशा आपको हाथ से आकार को ट्विक करने की तुलना में बेहतर दिखने वाला परिणाम देगा। दूसरा, 'चौड़ाई' और 'ऊँचाई' टैग बदलने से वास्तविक छवि का फ़ाइल आकार नहीं बदलता है, इसलिए यदि आपके पास एक प्रचंड छवि है जिसे आप एक थंबनेल के रूप में प्रदर्शित करते हैं, तो छवि को लोड होने में लंबा समय लगेगा और बस चबाना होगा बहुत बैंडविड्थ के रूप में अगर आप इसे पूर्ण आकार में प्रदर्शित किया था।

एक छवि के आकार को निर्दिष्ट करते समय आप ऊंचाई, चौड़ाई या दोनों को सूचीबद्ध कर सकते हैं। आकार पिक्सेल द्वारा निर्दिष्ट किए गए हैं जैसा कि आप नीचे देख सकते हैं:



आप अपने चित्रों को अपने पाठ के प्रवाह के साथ सुचारू रूप से कार्य करने के लिए 'संरेखित' भी कर सकते हैं। यदि आप बाईं ओर संरेखण चुनते हैं, तो पाठ छवि के दाईं ओर शुरू होगा। यदि आप सही संरेखण चुनते हैं, तो छवि पृष्ठ के दाईं ओर प्रदर्शित होगी, और आपका पाठ छवि के बाईं ओर आएगा और फिर एक नई पंक्ति में विराम होगा।

छवि संरेखण इस प्रकार है:



आप टेक्स्ट लाइन के ऊपर या नीचे के साथ छवि रेखा बनाने के लिए संरेखण को "शीर्ष," "नीचे," या "मध्य" पर भी सेट कर सकते हैं। यदि आप संरेखण निर्दिष्ट नहीं करते हैं तो छवि "नीचे" के लिए डिफ़ॉल्ट होगी।

एक साइड नोट के रूप में, आप अपनी छवि विशेषताओं (src, align, alt, आदि) को किसी भी क्रम में छवि टैग में शामिल कर सकते हैं। मेरी व्यक्तिगत प्राथमिकता पहले 'src' विशेषता को सूचीबद्ध करना है, क्योंकि यह सबसे बुनियादी विशेषता है और इसे प्रत्येक छवि टैग में शामिल किया जाना चाहिए, लेकिन आप जो भी क्रम आपके लिए सबसे स्वाभाविक लगता है उसका उपयोग कर सकते हैं।

वीडियो निर्देश: 5. Building Web Applications: Element Attributes | HTML For Beginners ???? (मई 2024).