Html Tutorial Lesson 6: Inserting Images in a Web Page

TwitterShare/Bookmark

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

The element  for inserting an image in a web page is img and the tag  is written as follows, where src is the attribute that points to the source of the image file.

<img src=”image filename”>

Web browsers support several types of image files, but the usual ones are the graphic 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. Besides, there are countless 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

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