Lesson 6: Adding Images to a Web Page

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.

Most 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

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

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

❮ Previous Lesson Next Lesson ❯