Images

Images can be added anywhere within your web page.

Key Points

Images use the <img> tag.

Set which image you want to display using ‘src=’.

Images must be in the same folder as your web page, or in an images folder.

Adding an Image

To add an image to your page you must use the <img> tag. Unlike other tags, this is self closing which means you don’t need to use </img>.

Inside of your image tag you must set the source (src) of the image. The source must include the file name and file extension.

Adding an image

<img src="logo.png">

Adding an image that is in a folder

<img src="images/logo.png">

Adding an image and setting its size

<img src="logo.png" width="100px" height="100px">

Styling an image

At National 5, you only need to be able to set the height and width of an image using CSS. This can also be done inline as shown above.

img{
    width: 100px;
    height: 100px;
}

National 5 Target

You should be able to add images to a page and set its size.