Adding Images

We have learnt that almost all tags have a start tag and an end tag. In-between the tags you will find the element content.

For example the <body> tag:

Images however don’t follow this rule, they use a single tag <img>.

The image tag requires an attribute to tell the web browser where to download the image from.

In the example above it will display an image called ‘example.jpg’ that can be found in a folder called images.

More Attributes

Other attributes can be added to the img tag.

The attributes ‘width’ and ‘height’ are used to tell the browser how big the image should appear in the browser. For example, the code...

<img src="images/example.jpg" width="500" height="400">

...would show the image example.jpg with the dimensions 500px X 400px.

Watch the video below to see how to add images to a web-page using HTML

Adding Images to Web Pages - HD 720p.mov

Challenges

Using the example below...

Task 1

Find the line:

<!-- Add the img tag for task 1 below this line -->

Add an img tag below this line that will show the file meme.jpg when the page is viewed in a web browser.

<img src="meme.jpg">

Task 2

Find the line:

<!-- Add the img tag for task 2 below this line -->

Add an img tag below this line that will show the file meme.jpg with the dimensions 400px X 284px when the page is viewed in a web browser.

Task 3

Find the line:

<!-- Add the img tag for task 3 below this line -->

Add an img tag below this line that will show the file meme.jpg with the dimensions 600px X 426px when the page is viewed in a web browser.