JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

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. Click on the link  graphics.html to view the output

back.gif
image1.gif
image2.gif
image3.jpg


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy