HTML : Image Tag
हेलो दोस्तों सुआगत है आपका फिर से Education Point मे आज Html के इस Tutorial मे हम Image Tag के बारे मे जानेंगे
जैसे की HTML मे Image Tag ये क्या काम आता है और कैसे Create कीया जाती है और भी बहुत कुछ तो चलिए इस सुरु
करते है।
image Tag का उपयोग Web page पर image Show करने के लिए किया जाता है, ताकी Web page का design देखने में आच्छा और सुंदर दिखे।
Image हमारे Web page को ज्यादा Attractive और beautiful बनाते है. Readers भी बिना Image के साथ बनाए गए Web page की तुलना में Image के साथ बनाए गए Post को ज्यादा पंसद करते है क्योकि सिर्फ Text-Text पड़ना कभी-कभी Boring भरा हो जाता है और आलश भी आते है.
जैसे छोटे बच्चो की books मे Images और daigrams की मदत से पढाया जाता है ताकी पढ़ने मे मजा भी आये और मन भी करे तो किसी भी Doucument और Books ,webpage आदि मे Image का role Important हो जाता है और वैसे भी Image की मदत से कोई चीज या Information को समझाना और Share करना आसान होता है
Images Formats:
एक HTML Document में अलग-अलग Format में Images को Insert किया जा सकता है. जैसे आप PNG, JPEG, GIFs, आदि Format में फोटो को जोड सकते है. हम जिस भी Format में Image को Use करना चाहते है, उस Format को हमे बताना पडता है.
Image की दुनिया में तरह तरह के formats होते हैं। उनमें से कुछ इस प्रकार हैं:
- PNG (Portable Network Graphics)
- GIF (Graphics Interchange Format)
- JPEG (Join Photographic Experts Group)
- SVG (Scalable Vector Graphics )
नोट: यदि आप web page में GIF का use कर रहें हो तो image name और अंत में .gif लगायें।
Syntax Of Image Tag
तो अब जानते है की हटम्ळ मे Image Tag का उपयोग कैसे किया जाता है इसके Syntax को समझते है।
Syntax :
जैसे ऊपर आप Syntax को देख सकते है की <img> Tag द्वारा Image को Define किया जाता है. <img> Tag एक Empty HTML Tag होता है यहाँ Empty Tag से मतलब है की वो Tag जिसका कोई Closing Tag नही होता है.
Example for
Output:
Note: File Name Case Sensitive होता है. इसलिए Image का नाम जैसे लिखा हुआ है. वैसा ही आप src Attribute में लिखे. क्योंकि Broswer के लिए picture.png और Picture.png दो अलग-अलग Files है.
इसके अलावा भी <img> Tag में कुछ और Attributes का इस्तेमाल किया जाता है. जो Image की अन्य features को Define करते है. जिनके बारे में नीचे बताया जा रहा है. तो अब हम इन Attributes के बारे मे विस्तार से जानते है।
Attribute Of Image Tag
SRC Attribute ये image tag का सबसे Important Attribute है क्योकि इसकी मदत से ही Image Show की जाती है इस Attribute में image का path देते है जैसे की आप Example मे देख सकते है|
Output:
ALT Attribute
ALT Attribute की full form Alternative होती है और इस attribute का use image का एक Alternate नाम देने के लिए किया जाता है ये भी एक Important Attributeहै जब कभी कभी हमारी image load नही हो पाता है तो उस condition मे हमारा alt attribute show होता है मतलब इस Attribute मे जो नाम लिखा था वो दिखाई देगा है |
Output:
Width and height
Width and height का use image को resize करने के लिए किया जाता है यानि जो Image हम Webpage पर Show कर रहे है उसकी Size हम Define कर सकते है जैसे Image की Width (चौड़ाई ) और Height (लम्बाई) क्या होगी निचे Example मे आप समझ सकते।
Output:
Border
border भी image tag का एक attribute ही है इस attribute का use image को border देने के लिए किया जाता है |
Output:
Style Attribute
style attribute का use image के ऊपर css apply करने के लिए किया जाता है और style attribute का use करके image को और भी attractive बनाया जाता है | लेकिन इसके लिए हमे css आनी चाहिए |
Output:
Image Aligning
आप align attribute की मदद से image को left, right, top, bottom या middle पर align कर सकते है |
Output:
Create Link on image tag
अगर हम चाहे तो अपने image को link मे convert भी कर सकते है इसके लिए हमे <a> tag का use करना पड़ता है, आप निचे दिये गये code को देखे |