Images

This lesson will look at how to add images to a webpage​

​

Adding images can be tricky so make sure to follow these rules:​

Save the image in the same folder as your webpage​

Give it a short, sensible name – you will need to type this exactly into the HTML​

Know the file type of the image

The HTML code that you need to add to your webpage is:​

<img src = “[name of image and file type]”>​

For example: <img src = “pic of me.jpg”>​

​

When adding the HTML code to your webpage, think about where you want the image to be ​

The code should be typed in the place that you would like the image to show when you view the webpage

The next part of the new tag to add is the alt keyword. This provides the image with alternative text to show in case the image doesn’t load, or if someone is using a screen reader​

​

Finally, we can add the style to the image to control how big it is on our page.​

The finished tag will look like this:​

<img src = “pic of me.jpg” alt = “picture of me” style=“width:250px; height:250px;”>​

Notice that unlike the text rules, there is no semi-colon between these instructions.