How To Add Pictures?

So far we’ve focussed on adding content to our website in the form of words, such as titles, paragraphs or lists but images can add a lot to your website and are engaging for your audience.

For example, if you want to write about a recipe for a cake, including a picture of the finished cake is a great way to show people what they are aiming to do and will draw your audience in.

Or if you have a page giving information about yourself then you might want to include a picture of yourself or of some of your favourite things to give people a better idea of who you are.

As you probably expect, there is a HTML tag used for showing pictures and it is the ‘img’ tag where ‘img’ is short for image, which is another word for a picture. The ‘img’ tag has a slightly different structure than the other HTML tags we have looked at, so let’s look at a basic example and see if you can spot the difference.

        <img src="" alt="">
      

Aside from some confusion in her terms, Aria had correctly spotted that the closing tag is missing from the img tag. This is because you cannot put anything inside a picture and it has to be empty.

For paragraph elements, you open the tag, put your words in and close the tag but it doesn’t work like that for images. You can’t open the tag, put some colours in and close it. Instead you have the tell your image element where to find the appropriate picture; this is where we use the ‘src’ attribute.

Just like we used the ‘href’ attribute with the ‘a’ tag to point links at a specific place, for pictures we use the ‘src’ attribute (where ‘src’ is short for source) with the ‘img’ tag to point to a specific picture to show.

The value of the source attribute is the name of the picture which may include the file location if it not a file saved with your HTML file.

Here is an example Aria has put together. Aria has saved all her HTML files in the same folder called ‘My Website’ and has created a folder within ‘My Website’ called 'imgs' (short for images) which is where she is going to keep all her pictures for her website; who knew she could be so organised!

        <img src="imgs/selfie.jpg" alt="">
      

Because her pictures are not saved in the same folder as her HTML she has included the folder name and a forward slash (or forward scratch as Aria keeps calling them) in her ‘src’ attribute.

You can include multiple forward slashes in a file location, if you need to. The code Aria has written will show her selfie picture which is saved in the 'imgs' folder. We have used 'imgs' as the folder name as all of pictures saved in it will be shown by using the 'img' tag.

A file name which ends in .jpg is a picture but there are others too like .png.

Here is Aria's selfie in the image element below.

And here is what Aria's example looks like. Does it look how you expect it to?

Sometimes for various reasons your website might not be able to show the image you have told it to. This could be because of a server failure, because the image has moved and the code hasn’t been updated, because the image has been deleted or even because the image file name is spelt wrong.

When this happens, the ‘alt’ attribute gives the website some text to show as an alternative. Generally this is used to give a brief description of what the image should be.

Here’s Aria’s img tag example which I have finished for her by completing the alt attribute. If it worked perfectly, we wouldn't see the effect of the 'alt' attribute, so I've changed the folder name from 'imgs' to 'images' which doesn't exist. So the server will look for this folder and will be unable to find it because it doesn't exist. When this happens it displays whatever is written in the 'alt' attribute.

        <img src="images/selfie.jpg” alt=”A cat’s face”>
      

And here is Aria’s example once she edited it.

        <img src='images/selfie.jpg' alt='A beautiful cat’s beautiful face'>
      

And here is what it looks like once the server has looked for the image in the folder which doesn't exist.

;

Use the code below to experiment with changing the 'src' and 'alt' attributes. There are several different photos you can show, can you work out how many?

By changing the number in the 'src' attribute you can see different photos of Aria getting covered in dirt. If you enter a 'src' attribute which doesn't exist you will see the text in the 'alt' attribute which you can also change.