Post on 29-Dec-2015
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.