HTML मे Image Insert कैसे करे

इस lesson मे बात करेंगे HTML के द्वारा Web Page में Image Insert कैसे करते है (how to insert image in html) ?
साथ ही बात करेंगें
इसके Alternative Text/Alt Attribute, image resize और image border के बारे मे भी।

Image किसी भी Webpage का बहुत ही जरूरी हिस्सा होता है।
कहते है की जो हजार शब्द न बोल सके वह सिर्फ एक तस्वीर बयां कर देता है।
जिस webpage मे तस्वीर ना हो उसे पढ़ना अच्छा नही लगता है।
Webpage के अलग अलग जगहों पर अलग अलग size के image होना बहुत जरूरी है।

इसे भी पढे :- HTML का पहला document कैसा होना चाहिए

इस पोस्ट में मैं आपको HTML मे Image Add करने के बारे में सबकुछ detail से बातऊँगी । समझने मे आसानी हो इसके लिए इसे मैंने चार part मे बांटा है।

Webpage मे Image Insert कैसे करें
Image मे Alternative Text कैसे लगाए
Image को Resize कैसे करें
Border कैसे लगाए

Webpage मे Image Insert कैसे करें ?

सब से पहले यह जानना जरूरी है की HTML मे किस तरह के फोटो या इमेज लगाए जा सकते हैं । इसमे ज्यादातर jpg, png, BMP और GIF टाइप के इमेज का इस्तेमाल किया जाता है।
फोटो का साइज़ कम से कम रखें। यह जितना कम रहेगा site उतना ही जल्दी खुलेगा ।
अगर आप के फोटो का साइज़ बहुत ज्यादा है तो इसे आप किसी इमेज कंप्रेसर सॉफ्टवेयर की मदद से कम्प्रेस कर सकते हैं जिससे उसका साइज कम हो जायेगा |

HTML मे Image Insert करने के लिए img Tag के साथ src element का इस्तेमाल होता है। src का मतलब होता है Source, जो इमेज के location को define करता है।

img Tag एक Unpaired Tag है। इसका Closing Tag नही होता है।

दो तरीके से आप HTML मे Image Add कर सकते हैं।

Net से कोई भी Image सीधा ही अपने webpage मे शामिल कर सकते हैं।
आप के Computer मे कोई फोटो है तो उसे भी शामिल कर सकते हैं।

इसे भी पढे :- Word मे पासपोर्ट फोटो कैसे बनाये

Net से फोटो HTML page मे कैसे लगायें

अगर कोई फोटो Net पर Free मिल रहा है तो उसे अपने HTML page मे शामिल करने के लिए उसके url को copy करके अपने html code मे paste करना होगा double cots के साथ ।

Link Source

जरूरी बातें : url को सीधे ही अपने code पे paste करने के वजाय फोटो को Download करके उसका location देना ज्यादा सही होता है।
क्योंकि अगर url को सीधा ही इस्तेमाल करते हैं और किसी वजह से उसका url बदल जाए या फोटो delete हो जाए, तब आपके page मे भी वह फोटो नही दिखेगा।

Computer मे रखा फोटो HTML page मे कैसे लगायें

अगर आप अपने Computer मे रखे हुए किसी फोटो या Net से Download किया हुया फोटो को अपने webpage मे Insert करना चाहते हैं। तो सबसे पहले उस फोटो को उसी Folder मे ले जाइये जिस folder मे आपने HTML file को save किया है ।
या फिर उस Folder के अंदर एक नया Folder बना लीजिए और सभी फोटो को उसी folder के अंदर रखिए।

मैंने Media नाम का एक folder बनाया है और उस मे Image फाइल को save किया है।
इमेज फाइल के नाम को उसके folder के नाम के साथ html code मे type करना है।

मैंने दोनों तरीके को एक साथ मिलाकर एक code लिखा है ।
आप इसे अपने Notepad मे type कर ले या copy करके paste करे।
ध्यान रखें की आप को image का नाम और folder का नाम वही type करना है जो आपके computer मे है ।

Code

इस फाइल को image insert.html नाम से save कीजिए।
अब अपने पसन्द के Browser मे इसे open कीजिए।
आपको एक के बाद एक दो तस्वीरें दिखाई देगी।

Image मे Alternative Text कैसे लगायें

Webpage मे किसी Image के साथ Alternative Text/Alt Attribute का होना बहुत जरूरी है।

अगर किसी वजह से webpage मे image दिखाई नही देता है तब उसके बदले Alternative Text दिखाई देता है।

दूसरी बात, सही Alt Attribute SEO को अच्छा बनाता है।
जिसके वजह से website का Search Engine मे Rank अच्छा होता है और आप का page सर्च मे ज्यादा आता है।

इसे भी पढे :- Excel का notes हिन्दी मे

Alternative Text/Alt Attribute लिखने का तरीका

Image को Resize कैसे करें

जब आप ने Image को page मे add किया होगा तब आपने देखा होगा की कुछ Image बहुत बड़े हैं तो कुछ Image छोटे दिखाई दे रहें हैं ।
कुछ इमेज तो इतने बड़े हैं की पूरे page को ही घेर ले रहें हैं ।
जब ऐसा होता है तब इमेज को जरूरत के हिसाब से छोटा या बड़ा करना पड़ता है |

इमेज को resize करने के लिए उसका Height और Width दोनों को बदल सकते है
या किसी एक को भी बदला जा सकता है
इमेज के size के लिए ज्यादातर Pixcel(px) unit का इस्तेमाल किया जाता है।
परन्तु आप दूसरे Unit भी इस्तेमाल कर सकते हैं।
इसके अलावा percentage(%) मे भी इमेज को Resize किया जाता है।

Note : पहले के code मे width और height दोनों define किया गया है। दूसरे code मे सिर्फ width define किया गया है और height को auto दिया गया है। अगर इमेज का width और hight दोनों define किया जाए तो उसका original ratio बरकरार नही रहता है। हो सकता है इमेज थोड़ा ज्यादा लम्बा या थोड़ा ज्यादा चौड़ा हो जाए।
इसलिए ज्यादातर width को define किया जाता है और height auto रखा जाता है । इससे इमेज का सही ratio बरकरार रहता है।

इमेज को responsive कैसे बनायें

Responsive का मतलब होता है screen के हिसाब से size का adjust हो जाना ।
अगर आप desktop या laptop मे देख रहे हैं तो इमेज बड़ा दिखाई दे। और अगर Tab या मोबाईल का इस्तेमाल कर रहे हैं तो इमेज उसके हिसाब से छोटा हो जाए।

इमेज को responsive बनाने के बहुत से तरीके हैं ।
इनमे से सबसे आसान तरीका होता है percentage(%) का इस्तेमाल करना ।

नीचे मैंने एक सम्पूर्ण code लिखा है । आप चाहे तो पहले के लिखे हुए code मे edit कर सकते है, या पूरा कोड copy करके Notepad मे paste कर सकते हैं।

Code

<html>
<head>
<title>image insert</title>
</head>
<body>
<img src=”https://i1.wp.com/kitchenaroma.net/wp-content/uploads/2020/07/haldi-wala-doodh.jpg?w=1024&ssl=1″ alt=”haldi wala doodh” width=300px height=auto>
<img src=”media/flowers.jpg” alt=”Flowers” width=50% height=auto>
</body>
</html>

File को image size.html नाम से save करे। अब इसे अपने पसन्द के browser मे open करे ।

Output

Note:तस्वीर responsive हुवा या नहीं देखने के लिए Browser को resize mode पर लायें और drag करके screen को छोटा करे ।
आप देखेंगे दूसरा इमेज screen के size के साथ छोटा और बड़ा हो रहा है। जब की पहला इमेज एक ही size का रह जा रहा है।

Border कैसे लगायें

इमेज को एक दूसरे से अलग दिखाने के लिए border लगाया जाता है। Border लगाने के लिए code कुछ इस तरह से है।

Complete Code

<html>
<head>
<title>image insert</title>
</head>
<body>
<img src=”https://i1.wp.com/kitchenaroma.net/wp-content/uploads/2020/07/haldi-wala-doodh.jpg?w=1024&ssl=1″ alt=”haldi wala doodh” width=300px height=auto border=5px>
<img src=”media/flowers.jpg” alt=”Flowers” width=50% height=auto>
</body>
</html>

Output

अगर आपको समझने में किसी प्रकार की समस्या हो तो नीचे कमेन्ट कर के अपना सवाल पूछ सकते हैं |

कृप्या पोस्ट को दोस्तों के साथ फ़ेसबुक और व्हाट्सअप मे शेयर करें |

Previous

Index Page

Next

HTML मे Image Insert कैसे करे

इसे भी पढे :- HTML का पहला document कैसा होना चाहिए