img Element – How to add image in webpage using html?

How to Add Image in Webpage using HTML: Web Pages में Images को Add करने के लिए हमें <img> Element को उपयोग में लेना होता है। मूलत: Web Pages में GIF, JPEG या PNG Format की Image Files को उपयोग में लिया जाता है, क्‍योंकि इनकी Size कम होती है, इसलिए इन्‍हें Web Browser में Download होने में कम समय लगता है।

इस Element में src व alt नाम के दो Attributes होते, जिनकी Value Image के लिए एक Alternate Description होता है, जो उस स्थिति में Web Browser में Display होता है, जब किसी कारणवश Image Web Browser में Load नहीं हो पाता है। उदाहरण के लिए निम्‍न Statement Web Browser में एक Logo Place करेगा, जो कि Same Folder में Stored है:

<img src=”logo.gif” alt=”Google Logo” />

<img> Element में हम सभी Universal Attributes व UI Event Attributes के अलावा निम्‍न Attributes को भी उपयोग में ले सकते हैं:

src alt align border height width hspace vspace ismap usemap longdesc name

The src Attribute

ये Attribute Source Image के उस URL का Specify करता है, जिसे Load करना है। ये URL Absolute हो सकता है अथवा Relative हो सकता है। जैसे:

<img src=”www.google.com/logo.gif” />

The alt Attribute

इस Attribute में हम उस नाम को Specify करते हैं, जो उस समय दिखाई देता है, जब किसी कारणवश कोई Image Browser में Load नहीं हो पाता है अथवा Image पर Mouse Pointer को Place करने पर ये नाम एक Tooltip कर तरह दिखाई देता है।

<img src=”www.google.com/logo.gif” alt=”Google Search”/>

The align Attribute (Deprecated)

इस Attribute का प्रयोग करके हम हमारी Image को अथवा हमारी Image को Hold करने वाले Element को Align करने का काम करता है। हम इसमें top, middle, bottom, left अथवा right में से किसी भी मान को Set कर सकते हैं। जैसे:

<img src=”www.google.com/logo.gif” alt=”Google Search” align=”right”/>

ये Statement Image को Web Page के Right में Align कर देता है।

The border Attribute (Deprecated)

इस Attribute में हम जो संख्‍या Specify करते हैं, Image के चारों ओर की Border उतने Pixels की बन जाती है। इसका Default मान 0 होता है, इसलिए यदि हम इस मान को Specify ना करें, तो हमें Image के चारों और कोई Border दिखाई नहीं देती है। इसे निम्‍नानुसार उपयोग में लेते हैं:

<img src=”www.google.com/logo.gif” alt=”Google Search” <strong>border=”2”</strong> >

The height and width Attributes

इन Attributes द्वारा हम दिखाई देने वाली Image की Height व Width Specify करते हैं। हम जो मान Specify करते हैं, वह मान Pixels में हो सकता है अथवा उस Page के Percentage के आधार पर हो सकता है, जिस पर हम Image को Place कर रहे हैं। जब हम Pixels का प्रयोग करते हैं, तब Image की Size सभी Resolutions पर समान रहती है, लेकिन जब हम Percentage का प्रयोग करते हैं, तब हमारा Browser स्‍वयं ही हमारी Image की Size को Maintain करता रहता है।

<img src=”www.google.com/logo.gif” <strong>height=”120” width=”150”</strong> >

The hspace and vspace Attributes (Deprecated)

इन Attributes का प्रयोग करके हम हमारी Image के चारों ओर दिखाई देने वाले White Space को तय कर सकते हैं। इस Value को Pixels में Specify किया जाता है, जो White Space Border कर तरह दिखाई देता है। इसका प्रयोग करके हम हमारी Image के चारों और Texts को Wrap कर सकते हैं। (How to Add Image in Webpage using HTML)