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.

html12.PNG
html14.png

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.

html13.png

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.

html16.PNG

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.

html17.PNG

Create the img tag, using the exact name of the image you downloaded.

html18.PNG

Change the Image Size

You can directly state the width and height of the image by defining the style within the image tag.

html20.PNG
html19.PNG

If your image is too large or too small, change the size of it yourself.

html22.PNG
html21.PNG

Next it is time to organise the web page further so it looks more like a professional site.