Images Inserting an image on a web page

chcslonline.org2 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.org3 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.org4 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.org5 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.org6 Inserting Images on the Web Page To insert images on a web page, the 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.

chcslonline.org7 attributes src : 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. Style: is used as an alternative for specifying the height and width of an image. 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.org8 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.org9 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 Products 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 Home

chcslonline.org10 Now to insert the image on the products page. write the following code on the products page just below the hyperlink tag. 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 the Image. 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.org11 Home 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 and close it like this just below the img tag. Now to insert a caption use the figcaption tag like this After or before the tag 2015 model of a red car 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.