-->

HTML  Images

Mostly images are used in webpage to improve the appearance, look and design of the webpage. So, for adding a image in HTML, we use <img> tag. This tag is a empty tag. It has no ending tag. It has only attributes.

Basic Syntax

<img src="url_of_image_OR_path_of_image"  >

Attributes of <img> tag

Attribute

Description

src

Defines the url of image.

alt

Defines the alternate text for an image, if it cannot be displayed

width

Defines the width of image

height

Defines the height of image

style

Defines the css style for the image

 

Example :

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" >

Setting Alternating Text to image

The alternating text is displayed in place of image if image is not available or error in image.

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="Simplykhozo Logo" > 

Setting Height of Image

Use height attribute to set the height of image as shown below :

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="Simplykhozo Logo"   height="100px" >

Setting Width of Image

Use width attribute to set the width of image as shown below :

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="Simplykhozo Logo"   width="200px" >

Setting Border of Image

To define border of image use border attribute as shown below:

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="Simplykhozo Logo"   width="200px" border="2" >

Setting border and Shadow of image

The another way to show border is using style. You can also define shadow to the image using style. The syntax to define border using style as given below:

style="border : THICKNESS BORDER_STYLE COLOR;"

Example :

style="border : 5px solid black;"

The syntax to define shadow is given below :

style="box-shadow : H_OFFSET V_OFFSET BLUR SPREAD COLOR;"

Example:

style="box-shadow : 5px 5px 6px 7px blue ;"

Appling above syntax to image :

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="Simplykhozo Logo"   width="200px"  style=" border : 5px solid black; box-shadow : 5px 5px 6px 7px blue ;">

HTML Code

<!DOCTYPE html>

<html>

            <head>

                        <title>HTML Images </title>

            </ head>

            <body>

                        <h1> HTML images</h1>

                        <img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="Simplykhozo Logo"   width="200px"  style=" border : 5px solid black; box-shadow : 5px 5px 6px 7px gray ;">

            </ body>

</ html>

Output

 


HTML छवियाँ (Images)

अधिकतर चित्र वेबपेज में उपस्थिति, सुधार और वेबपेज के डिजाइन को बेहतर बनाने के लिए उपयोग किया जाता है। HTML में एक छवि जोड़ने के लिए, हम <img> टैग का उपयोग करते हैं। यह टैग एक खाली टैग है। इसका कोई अंत टैग नहीं है।

Basic Syntax

<img src="url_of_image_OR_path_of_image"  >

Attributes of <img> tag

Attribute

Description

src

छवि के url को परिभाषित करता है

alt

एक छवि के वैकल्पिक text को परिभाषित करता है, अगर वह प्रदर्शित नहीं कि जाती

width

छवि की चौड़ाई को परिभाषित करता है

height

छवि की ऊंचाई को परिभाषित करता है

style

छवि के लिए css style को परिभाषित करता है

 

उदाहरण:

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" >

चित्र में वैकल्पिक text सेट करना

अगर छवि उपलब्ध नहीं है या छवि में त्रुटि है, तो वैकल्पिक text छवि के स्थान पर प्रदर्शित होता है इसके लिए alt attribute इस्तेमाल होता है।

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt=" सिम्पलीखोजो लोगो " > 

छवि की ऊंचाई निर्धारित करना

नीचे दिखाए गए अनुसार छवि की ऊंचाई निर्धारित करने के लिए height attribute का उपयोग करें:

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt=" सिम्पलीखोजो लोगो "   height="100px" >

छवि की चौड़ाई निर्धारित करना

नीचे दिखाए गए अनुसार छवि की चौड़ाई निर्धारित करने के लिए width attribute का उपयोग करें:

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt=" सिम्पलीखोजो लोगो "   width="200px" >

इमेज का बॉर्डर सेट करना

छवि के सीमा को परिभाषित करने के लिए नीचे दिखाए अनुसार border attribute का उपयोग करें:

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt=" सिम्पलीखोजो लोगो "   width="200px" border="2" >

छवि  का  बॉर्डर और छाया सेट करना

बॉर्डर दिखाने का दूसरा तरीका style का उपयोग करके है। आप style का उपयोग कर छवि की छाया भी परिभाषित कर सकते हैं। नीचे दी गई style का उपयोग करके सीमा को परिभाषित करने के लिए syntax :

style="border : THICKNESS BORDER_STYLE COLOR;"

उदाहरण:

style="border : 5px solid black;"

छाया परिभाषित करने के लिए syntax नीचे दिया गया है :

style="box-shadow : H_OFFSET V_OFFSET BLUR SPREAD COLOR;"

उदाहरण:

style="box-shadow : 5px 5px 6px 7px blue ;"

चित्र के लिए syntax का उपयोग करना:

<img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt="सिम्पलीखोजो लोगो"   width="200px"  style=" border : 5px solid black; box-shadow : 5px 5px 6px 7px blue ;">

HTML Code

<!DOCTYPE html>

<html>

            <head>

                        <title>HTML छवियाँ </title>

            </ head>

            <body>

                        <h1> HTML छवियाँ </h1>

                        <img src="https://simplykhozo.com/simplykhozo-beta/img/simplykhozo.png" alt=" सिम्पलीखोजो लोगो "   width="400px"  style=" border : 5px solid black; box-shadow : 5px 5px 6px 7px gray ;">

            </ body>

</ html>

Output

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h