Images

Inserting an image on a web page

chcslonline.org 2

ITEMS REQUIRED

Go to the course download page on the course website and download

the 3 images under resources then place them in the images folder of

your school of programming folder.

chcslonline.org 3

GIF

GIF stands for graphic interchange format. GIF images have the

extension .gif it has a smaller file size and a lower quality. Its color is

capped at 256 colors. It uses a lossless compression format and it

supports animation.

chcslonline.org 4

JPEG

Jpeg stands for joint photographic experts group. Images can have

more than 256 colors. The size and quality of the image is higher. It

uses a loss compression format which means image quality continues

to go lower the more you compress the image. It doesn’t support

animation.

chcslonline.org 5

PNG

It is similar to gif, but an improvement to gif. It stands for Portable

Network Graphics. It uses lossless data compression. It has the file

extension .png but it doesn’t support animation.

chcslonline.org 6

Inserting Images on the Web Page

To insert images on a web page, the <img> tag is used. It has no closing tag and

is empty. it takes attributes.The attributes it takes are:src: the src attribute is used to specify the

address or url where the image is located. For this lecture, I have placed three images

in the images folder namely, car. jpg, moon. jpg, and work. jpg. <img src = “images/car.jpg”>

chcslonline.org 7

<Img> attributessrc : is used to specify the web address of the image. Like we just did. we

can also specify an external or internet url of an image to insert by writing the image url.alt : specifies the alternative text for an image incase the image does not

load or is not found. It is good that the value of the alt attribute describes the image. Screen

reader application reads the value of the alt attribute.Height and width: they are used to resize and image. They do not change

the file size. No matter how small you make the image, the file size is not affected. specifying

the height and width of an image prevents it from flickering when the image loads.<img src = “images/car.jpg” alt = “a red car” height = “150” width =

“150”>Style: is used as an alternative for specifying the height and width of an

image. <img src = “images/car.jpg” alt = “a red car” style = “height:150;

width:150”>The advantage of using the style over height and width is that it prevents the

style sheet from changing the default size of the image.Map: it defines clickable areas in the image.

chcslonline.org 8

Practical 3.1

Question 1: create a page in the pages folder called products.html and

Place the image of the car in it. The image should have a height of

250px and a width of 200px and the caption “2015 model of the red

car”.

chcslonline.org 9

Solution practical 3.1

First of all, open your template file and change the text between the title tags to

products.Then save it as products.html in the pages folder.Next open your index.html file and create a link to the

products page by writing the following between the body tags<a href = “pages/products.html”>Products </a>When you get to the products page, you will need a

link that will take you back to the home page. so open your products.html page

and write the following code between the body tags<a href = “../index.html”> Home </a>

chcslonline.org 10

Now to insert the image on the products page. write the following code on the

products page just below the hyperlink tag.<img src = “images/car.jpg”> This will insert the image on the page but note that the image is

very large. Supposing we want several other images on the same page, we

have to use the height and width attribute to resize the image. we also need a

text that will display in case the image fails to load this is done with the alt

attribute.Change your img tag to have the height, width and alt attribute.Run your file to see what it looks like. Now we need the link to be

above theImage. What we need to do is to put a break tag after the

hyperlink before the img tag so the body part of your products page should look like

this

chcslonline.org 11

<body><a href =“../index.html”>Home </a><br><img src =“images/car.jpg” alt = “a red car” height =

“250” width =“200”></body>Now we want to insert the caption on the image. This is done using the figure and figcaption tag.Just above the img tag, put the following<figure> and close it like this </figure> just below the

img tag. Now to insert a caption use the figcaption tag like thisAfter or before the <img> tag<figcaption> 2015 model of a red car </figcaption>If you want the caption above the image, put the

figcaption above the img tag and put it below if you want it below the image.