ad

Sunday, September 21, 2025

how to use the img tag in html with example

how to use the img tag in html with example 

https://webdesigningtheory.blogspot.com

HTML Image Tag 


html <img> tag is use to embed images into web pages. images play an important role in web design. 


   <img>     image tag 
 
     src          source (path or URL) of the image.
     
     alt           Alternate text 


   <img>     tag is self-closing tag  no need to closing </img>


Syntax

                    <Img src = "Url">

HTML Image Tag 

Attribute


1) Align   :-.   Top bottom middle left right

Not supported in HTML5  Specifies the alignment of an image according to surrounding element.


2) Alt    :-  Text 

Specifies an alternate text for an image.


3) border    :-  Pixels

Specifies the width of the border around an image.


4) height   :-  Pixels

Specifies the height of an image.


5) width  :-  Pixels 

Specifies the width of an Image.


6) Src  :-   pixels

specifies the URL of an image.

HTML Image Tag 

Example

<!Doctype html>

<html>

<Body bgcolor ="blue"  text="yellow" link="red" >

<center><h1>photo Art Gallery </h1></center>

<img src="1.jpg" height="100" width="100" align ="left">

<img src="2.jpg" height="100" width="100"align="center" alt ="middle image">

</body>

</html>

HTML Image Tag 

Explain Program

Step 1 ]

<!Doctype html>

  • <!doctype html>  always be the first line of any HTML document.

Step 2 ]

   <html> and </html>

   html  is the root element.

Step 3 ]

<body> and </body>

body  is  main content area.

All visible content inside to  the <body> tag

Step 4]

<body bgcolor  = "blue"  text="yellow"  link="red">


 bgcolor   =  "blue"  background color  page to blue
 text         =  "yellow"  sets text on the page yellow
 link        =  "red"  color of hyperlinks to red


Step 5]

<center><h1>photo Art Gallery </h1></center>

displays a large heading(<h1>) the text . use photo gallery.

<center> tag centers heading .


Step 6]

<img src =" 1.jpg"  height ="100"  width ="100"  align ="left">

Displays image
 file name : 1.jpg
 height    : 100 pixels
 width     : 100 pixels
 align     : left side 

Step 7]

<img src = "2.jpg"  height  = "100"   width  = "100"  align = "center"  alt = "middle image">

file name: 2.jpg

Height  :100
width : 100
align : center 
alt   : middle image


HTML Image Tag output


Image 1(left)




                                                         Image 2(middle)




a

No comments:

Post a Comment