Lesson 8: Images
ग्राफिक्स और चित्र किसी भी वेबपेज का एक अनिवार्य हिस्सा हैं। वास्तव में, यह जटिल अवधारणाओं को चित्रित करने का सबसे अच्छा तरीका है। यह अध्याय इस बात पर चर्चा करता है कि वेबपृष्ठों के रूप में उसी के रूप और कार्यक्षमता को बढ़ाने के लिए छवियों को प्रभावी ढंग से कैसे उपयोग किया जा सकता है।
Inserting Images
<Img> टैग का उपयोग करके एक छवि को HTML दस्तावेज़ में डाला जा सकता है। इस टैग का उपयोग करने का सिंटैक्स नीचे दिया गया है - <img src = "URL of image" विशेषताओं की सूची /> जैसा कि सिंटैक्स से स्पष्ट है, img टैग एक खाली टैग है। दूसरे शब्दों में, इसमें क्लोजिंग टैग नहीं है। यह टैग कैसे काम करता है, यह बताने के लिए नमूना कोड नीचे दिया गया है।
<!doctype html>
<html>
<head>
<title>html Image demo</title>
</head>
<body>
<p>document body…</p>
<img src = "/html/images/sample.png" alt = "Sample" />
</body>
</html>
html gif, Png और jpeg / jpg स्वरूपों का समर्थन करता है। यदि आपको अपने वेब ब्राउज़र पर यह टैग सही लगने में परेशानी हो रही है, तो स्रोत फ़ाइल और उसके नाम के पथ की जांच करना न भूलें। html इस संबंध में संवेदनशील है और फ़ाइल को गलत तरीके से नाम देना सबसे सामान्य गलतियों में से एक है जो लोग छवि फ़ाइल को सम्मिलित या उपयोग करते समय करते हैं। छवि को लोड करने में विफल होने पर पाठ को निर्दिष्ट करने के लिए <img> टैग के भाग के रूप में दी गई पूरी विशेषता का उपयोग किया जाता है।
Setting the height and Width of Images
संबंधित विशेषताओं को सेट करने से छवि की ऊंचाई और चौड़ाई निर्धारित की जा सकती है। HTML प्रोग्रामर को पिक्सेल या प्रतिशत के संदर्भ में ऊंचाई और चौड़ाई का उल्लेख करने की अनुमति देता है। यह कैसे किया जा सकता है, यह बताने के लिए नमूना कोड नीचे दिखाया गया है -<!doctype html>
<html>
<head>
<title>Set Width and height of Image demo</title>
</head>
<body>
<p>Setting width and height of image</p>
<img src = "/html/images/sample.png" alt = "Sample Image" width = "150" height = "100"/>
</body>
</html>
how to Set the border of Image
डिफ़ॉल्ट रूप से, html में छवियों की सीमा होती है। वांछित प्रभाव प्राप्त करने के लिए आप सीमा की मोटाई को बदल सकते हैं। उदाहरण के लिए, आप "सीमा नहीं" कॉन्फ़िगरेशन के लिए मोटाई को 0 पर सेट कर सकते हैं। यह कैसे किया जा सकता है, यह बताने के लिए नमूना कोड नीचे दिया गया है -<!doctype html>
<html>
<head>
<title>Set Image border demo</title>
</head>
<body>
<p>Setting border of Image</p>
<img src = "/html/images/sample.png" alt = "Sample Image" border = "3"/>
</body>
</html>
how to Align Images
डिफ़ॉल्ट रूप से, वेबपृष्ठ में जोड़े गए चित्र बाईं ओर संरेखित होते हैं। हालांकि, संरेखण विशेषता का उपयोग करके, आप छवि संरेखण को केंद्र या दाएं में बदल सकते हैं। यह कैसे किया जा सकता है यह प्रदर्शित करने के लिए नमूना कोड नीचे दिया गया है।
<!doctype html>
<html>
<head>
<title>Set Image Alignment demo</title>
</head>
<body>
<p>Align Image</p>
<img src = "/html/images/sample.png" alt = "Sample Image" border = "3" align = "center"/>
</body>
</html>
0 टिप्पणियाँ