Lesson 6: Inserting Graphics in the Web Page

 


The tag for inserting graphics in a web page is

<img src="image filename">

Web page normally support two types of image file, image.gif and image.jpg.There are countless graphics files that you might copy from the World Wide Web and then insert them into your web page. You could also create your very own own graphics using scanner and graphics tools like PC Paint Brush, Corel Draw, Adobe Photoshop and etc.

You could control the alignment, size of the image using the align, width and height parameter respectively as follows:

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

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

Graphics could also be used as background for your web pages using the tag as follows:

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

Now please type the text below and save the file as graphic.html
 
<html>
 <head>
 <title>Inserting Graphics</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 image below and save them as your local files. They must be in the same folder as your graphic.html file.

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

Click here for the sample output.

 

[Back to Main Page]