Html Tutorial Lesson 6: Adding Image to a Web Page

[Lesson 5]<<[Contents]>>[Lesson 7]

The element for Adding image to a web page is img and the tag is written as follows:

<img src=”image filename”>

where src is the attribute that points to the source of the image file.

Web browsers support several types of image files, but the usual ones are the graphics interchange format file(with extension gif ) and jpeg file(with extension jpg). Besides, they also support png file. You can also create your own images using scanner and graphics tools like PC Paint Brush, Corel Draw, Adobe Photoshop and more. In addition, there are countless of image files that you might copy from the World Wide Web but it is better to get consent from the images creators.

You can specify the alignment and size of the image using the align, width and height attributes of the img element respectively as follows:

<img src=”image.gif” align=position width=100 height=100 alt=image label>

* The alt attribute is to show the label of the image.

Images can also be used as background for your web pages using the body element as follows:

<body background=”image.gif”></body>

Now please type the text below and save the file as graphics.html

<!DOCTYPE html>
<title>Inserting Images</title>
<body background=”back.gif “>
<center><font size=”6″ color=”red”>Inserting Graphics in Web Page</font></center>
<img src=” image1.gif”>
<img src=”image2.gif ” width=100 height=100 >
<img src=”image3.jpg” width=30% height=50% align=right alt=”image3″>

Click on the images below and save them as your local files. They must be in the same folder as your graphics.html file. Click on the link  graphics.html to view the output


[Lesson 5]<<[Contents]>>[Lesson 7]