Skip to main content

How to Add Image in HTML Website

In this tutorial, we are going to show you how to add an image in HTML website.

<img> tag is used to display image in the document. It has no ending tag. It is an empty tag.The attribute of <img> tag is as follows.

Attributes of <img> tag



Attributes
Value
Description
Src
Path.
The path of the image.
Width
Value in pixels or %.
Sets the width of the image.
Height
Value in pixels or %.
Sets the height of the image.
Alt
Text.
To display the alternate text.
Hspace
Value in pixels.
To set the horizontal spacing in pixels or percentage.
Vspace
Value in pixels.
To set the vertical spacing in pixels or percentage.
Align
Left
Right
Top
Middle
Bottom
Absbottom   (absolute bottom).
To set the alignment of the image.
Border
Value in pixels or percentage.
Specifies the width of the images border.

Now. lets insert image in the html document.

Add Image In HTML Web Page 


<html>
<head>
<title>
image tag
</title>
</head>
<body>
<img src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg" width=200 height=200>
</body>
</html>

Output is


In the above example you have seen image with attribute width and height. 

Learn : How to add html frames


NEXT

Comments

Post a Comment

Popular posts from this blog

Lists in HTML - Unordered List

Unordered List An Unordered List is a collection of item that is not  in sequential order. It starts with the <ul> tag and ends with the </ul> tag. Each list item starts with the <li> tag. Each item is marked with the bullet i.e . with the disc or square or circle.  By default the tag starts with the disc . It is also called Bulleted list. Tags of Unordered List <ul> </ul> <li></li> Example    Write a  program to print the list given below pen pencil book <html> <head> <title> unordered list </title> </head> <body> <ul> <li>pen</li> <li>pencil</li> <li>book</li> </ul> </body> </html> Example of Attributes of <ul> tag with the Type attributes Write a program to print the list given below <html> <head> <title> unordered list </title> </head...
Post a Comment
Read more

Lists in HTML - Definition List

Definition lists is used to define the term and with  its description. It starts with the <DL> and endswith the </DL> tag The data term is defined inside the <DT> and </DT> tag. The data description is defined inside the tag <DD>and  </DD>. It has no attributes. Tags of Definition List <DL></DL> <DT></DT> <DD></DD> Example  <html> <head> <title> definition list </title> </head> <body> <dl> <dt>Word</dt> <dd> word is a word processor</dd> <dt>excel</dt> <dd> Excel is a spread sheet</dd> </dl> </body> </html> This will produce the following output Menu List It is used for creating menu list. It is created with the help of   <menu></menu> and <li></li> . Example <html> <head> <title> me...
Post a Comment
Read more

Linking in html

Linking is used for linking the web page with the another web page. One can create linking with  <a> </a> tag. It is also called anchor tag. One can create linking with the text, linking with the image. The attribute of <a></a> href="path" target="frame name" or _top or _blank or _self or _parent Linking with the Text  One can create linking with the text. Example of it is given below   Example <html> <head> <title> linking with text </title> </head> <body> <a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Welcome.html">click here</a> </body> </html> The output of the above  code is Linking with Image Now, one can also create linking with the image. Example <html> <head> <title> linking with image </title> </head> <body> <a href="file:///C:/Program%20Files/Java/jre1.8.0_31/Wel...
Post a Comment
Read more