HTML Image in Hindi – HTML Image Element in Hindi.
HTML Image Tag की पूरी जानकारी
एक पूरानी कहावत है, “एक फोटो हजार शब्दों के बराबर होती है.” आप जो संदेश Image द्वारा बता सकते है. उतनी क्षमता शब्दों में नही होती है. Pictures की इसी ताकत को पहचानकर Webpages में भी Image का Use किया जाता है.
इस Tutorial में हम आपको बताएंगे कि Webpages में Image Insert कैसे की जाती है? HTML Document में Image Define कैसे करते है? Webpages में Image डालने का तरीका क्या है?
HTML Concept को सरल बनाने के लिए इस Lesson को हमने कई छोटे-छोटे Sections में बांटा है. इन Sections की सूची नीचे दी जा रही है.
Table of Content
- HTML Image का परिचय – Introduction to HTML Image in Hindi
- HTML Image का Syntax – Explanation of Image Syntax in Hindi
- Image Element के साथ Commonly Use होने वाले Attributes के नाम और उपयोग
- वेबपेज में फोटो जोडने का तरीका – Inserting Picture in HTML Document in Hindi
- आपने क्या सीखा?
1. HTML Image का परिचय – Introduction to HTML Image in Hindi
Image हमारे वेबपेज को ज्यादा आकर्षक और सुंदर बनाती है. पाठक (Readers) भी बिना फोटो के साथ बनाए गए वेबपेज की तुलना में फोटो के साथ बनाए गए ब्लॉग पोस्ट को ज्यादा पंसद करते है.
इसलिए HTML में Image Element को जोडा गया है. Image Element का उपयोग HTML Document में Picture Insert करने के लिए किया जाता है. <img> Tag द्वारा Image को Define किया जाता है. <img> Tag एक Empty HTML Tag होता है. जिसका कोई साथी Tag यानि Closing Tag नही होता है.
एक HTML Document में विभिन्न Format में Images को Insert किया जा सकता है. आप PNG, JPEG, GIFs, आदि Format में फोटो को जोड सकते है. हम जिस भी Format में Image को Use करना चाहते है, उस Format को हमे बताना पडता है.
2. HTML Image का Syntax
HTML Document में Image Insert करने का Syntax नीचे दिया जा रहा है.
Image Syntax में दो चीजे महत्वपूर्ण होती है. पहला, खुद <img> Tag और दूसरी src Attribute. <img> Tag से तो आप परिचित ही है. यह तो अन्य Opening HTML Tags की तरह ही कार्य करता है.
लेकिन, इस टैग में src Attribute बहुत ही उपयोग और महत्वपूर्ण होता है. इस Attribute का काम Document में Image Path को Define करना होता है. आप जिस Image को अपने वेबपेज में जोडना चाहते है. उस Picture का Full URL Double Quotation Mark (“”) के भीतर लिखना पडता है. ताकि, Image विशेष हमारे Document में Download हो सके.
ध्यान दें: File Name Case Sensitive होता है. इसलिए Image का नाम जैसे लिखा हुआ है. वैसा ही आप src Attribute में लिखे. क्योंकि ब्राउजर के लिए picture.png और Picture.png दो अलग-अलग फाईल है.
इसके अलावा भी <img> Tag में कुछ और Attributes का इस्तेमाल किया जाता है. जो Image की अन्य विशेषताओं को Define करते है. जिनके बारे में नीचे बताया जा रहा है.
3. Image Element के साथ Commonly Use होने वाले Attributes के नाम और उपयोग
- src – इस Attribute का उपयोग Image के Source यानि URL को Define करने के लिए किया जाता है.
- alt – इस Attribute से Image के बारे में बताने के लिए किया जाता है.
- style – Style Attribute से Image पर CSS Rules को Apply किया जाता है.
- width & height – ये दोनो Attributes अलग-अलग उपयोग किए जाते है. इनके द्वारा Image Width और Height को Define किया जाता है.
- align – इसके द्वारा Image Alignment को Define किया जाता है.
- border – Image Border को Border Attribute से Define किया जाता है.
- title – Image को Title देने के लिए इस Attribute का उपयोग किया जाता है.
वेबपेज में फोटो जोडने का तरीका – Inserting Picture in HTML Document in Hindi
नीचे दिए HTML Code को Copy करके अपने नोटपैड में Paste कीजिए या फिर अपने हाथों से इस कोड को Type करके फाईल को htmlimage.html नाम से Save कीजिए. और इसे Open कीजिए.
<html>
<head>
<title>HTML Image Example</title><body>
<img src=”tpc-logo.png”>
</body></html>
जब आप ऊपर दिए गए कोड को ब्राउजर में देखेंगे तो आपको कुछ इस प्रकार का परिणाम दिखाई देगा. हमने इस कोड के माध्यम से एक Image को वेबपेज में जोडा है. यह Image TutorialPandit का Official Logo है.
Image के लिए Alternative Text लिखना
Image के लिए Alternative Text लिखने के लिए alt Attribute का उपयोग किया जाता है. इसे Image Define करते समय src Attribute की तरह हमेशा Use करना चाहिए. क्योंकि जब किसी कारणवश Image Display नही होती है. तब यह Alternative Text ही User को दिखाई देता है. इसके अलावा Screen Readers, Search Engines आदि के लिए भी Alternative Text लिखना जरूरी है. क्योकि यह Image को देख नही सकते है. यह तो सिर्फ पढ सकते है.
इसे Try कीजिए
जब आप Image के लिए Alternative Text Define कर देते है तो यह Text User को दिखाई नही देता है. इसे सिर्फ Screen Readers और Search Engines Robots पढ सकते है. लेकिन, जब Image Display नही होती है, तो User को यह Text ही दिखाई देता है. एक Image के लिए Alternative Text इस प्रकार लिखा जाता है.
जब आप लिखे गए कोड से कोई Image Insert करेंगे और वह Image Show नही हो रही है. तो इसकी जगह पर हमे alt Attribute में लिखा गया Text दिखाए देगा.
Image की Width और Height Set करना
Image की Width और Height को Set करना एक सही काम है. आप Image Width और Height को CSS या फिर Style Attribute के द्वारा भी Set कर सकते है. लेकिन, हम यहाँ आपको width और height Attribute का उपयोग कर रहे है.
इसे Try कीजिए
हम Image की Width और Height Set करने के लिए ऊपर उपयोग की गए फोटो को ही ले रहे है. जिसकी Width 100px और Height 50 px Set की गई है. अब यह फोटो हमे इस Size में ही दिखाई देगी.
ऊपर दिये कोड से आपको Image इस प्रकार दिखाई देगी.
ध्यान दें: हमने यहाँ Image Width और Height को Pixels में Define किया है. आप चाहे तो Percentage (%), Points (pt), इसके अलावा भी कई अन्य Units में Set कर सकते है.
Image Alignment को Set करना
Image Alignment को align Attribute द्वारा Define किया जाता है. By Default Image हमें बांई तरफ दिखाई देती है. लेकिन, align Attribute से आप एक Image को Right और Center में भी Show करा सकते है.
इसे Try कीजिए
ऊपर दिए कोड में हमने Image को Center Align किया है. आपको अब यह Picture Webpage के बिचोबीच दिखाई देगी.
जिस प्रकार आपने यहाँ center Align Set किया है. ठीक इसी प्रकार आप right Align Set कर सकते है.
Image Border को Set करना
Image Border को Set करने के लिए border Attribute का इस्तेमाल किया जाता है. आप एक Image के लिए इस प्रकार Border Set कर सकते है.
इसे Try कीजिए
जब आप ऊपर लिखा गया कोड आपको इस प्रकार का परिणाम देगा.
आपने क्या सीखा?
इस Lesson में हमने आपको HTML Document में Image Insert करने के बारे में पूरी जानकारी दी है. आपने Image Element के साथ कुछ उपयोगी Attributes का Use करना भी सीखा है. हमे उम्मीद है कि यह Lesson आपके लिए उपयोगी साबित होगा
0 Comments