Class Notes

Notes for Students

HTML Images

Images are an important part of a website, they add flair and colour to a page that can look dull if it were just text.

Adding an image

The first step of adding an image to your page is to get an image saved in the same directory as your current HTML file. Once you have your image saved (mine is called "pig.png"), you can add it to your page using the following code:

<img src="pig.png" />

Image tags are self-closing tags that do not need a separate closing tag. In the example above, the name (and the extension of your picture) is put in the src attribute. If you get a broken image icon, like this , then you have used the correct code however your image may not be in the correct directory or you may have used the wrong file name (doesn't match the code).

Resizing an image

Resizing an image in HTML is very easy, all you need to do is add a width and/or height attribute to your image (shown below):

<img src="pig.png" width="200" />
Doing this will set the width to 200 pixels and adjust the height to match the ratio.


Comments are notes to other developers that let them know what your code is doing. Using comments makes your code much more readable and assists other people understanding it. It also allows you to reference images without leaving text on your page. To start a comment we use <!-- and to end a comment we use  -->, so a full comment would look like:

<!-- This is a comment -->


Below is an activity to test your HTML knowledge so far. Give it a try.

		<title>Sample Page</title>


  1. Insert a picture called "pig.jpg"
  2. Change the width of your picture to be 500px
  3. Add a comment to your page