Lesson 2 - Images

Learning Outcomes

ASPIRE: To be able to apply height and width settings to an image

CHALLENGE: To be able to use the HTML image tag to display an image on a web page

This lesson, you will be designing your web page in Trinket, which means you do not have to keep saving. You will be going back to using Notepad in a later lesson.

task 1 - adding images to a web page

You can use the editor below to make changes to the web page. This is just a practice.

The code for an image is:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" />

The bold text is a link to the image online (image URL). Try replacing the image URL on the Trinket below with your own appropriate image you have found on the internet.

To find the URL of an image you find online, find an image, then right click on the image and click on copy image address. Click to watch the video again.

Change the image below to the image you have found in the code.

Task 2 - resizing images

Sometimes images are too big or too small. We can adjust how big an image is using code. We can say what width and height we would like the image to display at.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/1200px-SNice.svg.png" height="300px" width="300px" />

I have used px as this is the number of dots on the screen. If you look really closely at the computer screen, you will see all of the little dots. In the example above, I have used the code to show 300 dots (or pixels) in height and width.

Try adjusting the size of the image below to 200 x 200 pixels, using the information above.

TASK 3 - COMPLETE THE RECIPE

A lazy web designer has left their web page unfinished, without a picture of the banana milkshake on the recipe page they have created.

Your task is to find an image of a banana milkshake online and complete the web page. An example is given below to help you, but you are not allowed to use the same image that I have!

Finish the lazy designer's web page below.

Task 4 - Make your own recipe web page IN NOTEPAD

Using the examples above and your skills, design your own recipe web page. You should find a recipe to copy here.

This web page should be in a folder called 'Recipe Webpage' and the page should be named index.html

Your recipe must include:

Title
Description
Ingredients
Image (must be 300px height)

This time, you will be making your web page using Notepad. If you need to remind yourself how to set up a web page in Notepad and save it properly, click here.

Report abuse