how to insert image in html

There are many reasons why you might want to add an image to a web page,

you want to include a logo, pictures , diagram , or chat because

a pictures can say thousands of words , today our tutorials is  how to insert image in html

you can read previous article

Table in HTML

how to create a list in html

how to insert image in html

how to insert image in html

how to insert image in html

to add image in webpage   use <img> tag . <img> is an empty tag , which means that , it has no closing tag . <img> tag has two attributes

 

src

src attribute tells browser  image file path.   In src attribute you specify image’s name and its type , make sure your page and image are in same folder or directory , if they are in different folder or directory , then you need to specify the complete path of image. you can use any type of image like PNG, GIF and JPEG .  Remember image name is case sensitive

 

img alt :

img alt attribute is optional  in <img> element  , which specify alternative text for image , if image can’t   display properly .  always use alt text in image because Google’s crawler can’t read or recognize image , they can only read or recognize image by alt text.

 

Title :

You can use title attribute to provide title of image  .

ax :

<img src=”image.type” alt=”alt_text” title=”title”>

 

html code to insert image
<img src="Quid e Azam.jpg"alt="Quid e Azam" title=” Founder of Pakistan”>

 

In above example code, image Name is Quid e Azam and its type is .jpg (you can check image type from image’s properties and alternative text is Quid e Azam , if image for some reason will  not display , alt text will be display.

Height and Width of image

Height and width attribute are use to define size of image according to  your requirements . you can define height and width in pixel or percentage  .

 

Syntax:

<img src=”image.type” alt=”alt_text” title=”title” height=”” width=””>:

 

html code to insert image

<img src="Quid e Azam.jpg"alt="Quid e Azam" title=" Founder of Pakistan" height="300px" width="300px">

Now image will be display in 300×300 pixels on screen.

Image border :

You can specify image border  by using image border attribute .A thick line will be around the image.

Syntax :

<img src="Quid e Azam.jpg"alt="Quid e Azam" title=" Founder of Pakistan" height="300px" width="300px" border=”2”>

complete html code to insert image

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Images in HTML</title>

</head>

<body>

<div style="margin-left:40px">

<h2>How to insert Image in HTML</h2>

<img src="Quid e Azam.jpg"alt="Quid e Azam" title=" Founder of Pakistan" height="300px" width="300px" border="2"> &nbsp;&nbsp;&nbsp;

</div>

</body>

</html>

 

Image alignment

By default  when you insert image , image are display on left side of the web page page , if you  want to display in  page’s center or right  , you use align attribute to set it spot .

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Images in HTML</title>

</head>

<body>

<div style="margin-left:40px">

<h2>How to insert Image in HTML</h2>

<img src="Quid e Azam.jpg"alt="Quid e Azam" title=" Founder of Pakistan" height="300px" width="300px" border="2" align="right"> &nbsp;

</div>

</body>

</html>

 

Summary :

<img> tag is used to add images to web page.

src attribute is used to indicate source of an image and alt attribute is used for alternative text .

weight and width attribute are used to define size of image.

Border attribute is used to define border of image.

Align attribute is used to set the alignment of image.

 

NEXT :  how to make a link in html

 

Leave a Reply

Your email address will not be published. Required fields are marked *