5. Images
Images can be added to your web page to make it more visual.
​
The guide below shows you how to find a picture online, download it and place it in your web page.
Find & Save the Image
Firstly you can perform a Google Image search to find a picture that you like.
​
As an ethical Computer Scientist, you should be searching for copyright free images.
Click on Tools and then Usage Rights to change it to 'Labeled for reuse'.
Choose an appropriate image and download it to the same folder as your html file.
Save the image in the same folder as where your HTML file is saved.
​
If you don't do this, your image won't work.
If you are using a school computer and the image automatically downloads, without giving you the option to rename it and save it, click on 'Show in folder' and move it to the folder where your HTML file is.
Make sure that the image is saved in the exact same folder as your HTML file and that is has a suitable name.
Create the Image Tag
The tag for images does not have an end tag - it is all written within one set of angle brackets.
​
src stands for source.
​
You must type the image exactly as it is saved, including the file type (e.g. .jpg or .png). Don't forget the speech marks either.
Create the img tag, using the exact name of the image you downloaded.
Change the Image Size
You can directly state the width and height of the image by defining the style within the image tag.
If your image is too large or too small, change the size of it yourself.
