Lesson 2: Words are not

enough
Year 8 – Developing for the Web
 Starter activity

Do you remember?

Remember that web pages are

structured using HTML tags.

Complete the ‘HTML tags’

worksheet to refresh your memory
about some of the key facts from
the last lesson.
 Starter activity

Were you right?

<h1>HTML tags</h1>
<p>A HTML page ...

- em means that the text will become <em>italicised</em>

<br>- b means that the text will be <b>bold</b>
...
<p>For example:</p>

- style="color:red;" changes the text of the h3 tag to become:

<h3 style="color:red;">red</h3>
<br>- style="font-size:25px;" changes the text of the h3 tag to become size:
<h3 style="font-size:100px;">100px</h3>
</p>
</body>
 Objectives

Lesson 2: Words are not enough

In this lesson, you will:
● Display images within a web page
● Apply HTML tags to construct a web page structure from a provided design

4
 Activity 1

Placing images

Web pages wouldn’t be very interesting to look at if they were just lines of text.

This HTML document includes an image. Can you imagine what it would look like on
your screen if you viewed it?
<p>Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are
used to create and format pages of a website. CSS allows you to make formatting
changes to your website in one document. The 'instructions' in this document are
then applied to your web pages.
</p>

<img src="code.png" alt="screenshot of HTML code">

 Activity 1

How is the image included on the page?

Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS) are used
to create and format pages of a website. CSS allows you to make formatting
changes to your website in one document. The 'instructions' in this document are
then applied to your web pages.

Screenshot of HTML code

 Activity 1

Image tags
Like the tags you have seen before, image tags mark a place in a document where an
image should be displayed.

The src attribute identifies the filename of the image that should be loaded.

The alt attribute is used to associate some helpful text with image and is only visible
when the mouse hovers over the image or if it doesn’t load.

Screenshot of HTML code

<img src="code.jpg" alt="Screenshot of HTML code">

7
 Activity 1

Loading a file
The image tag creates a space where an image should be displayed.

Images are stored like any other file in computer by being given a name and a location.

When the web page is viewed, the web browser collects the image from where it is
stored.

Hypertext Markup Language (HTML) and Cascading

Style Sheets (CSS) are used to create and format pages
of a website. CSS allows you to make formatting
changes to your website in one document. The
'instructions' in this document are then applied to your
web pages.
 Activity 1

Using images
1. Open your ‘A2 Hometags.html’ web page from last lesson in a plain text editor,
(there is another copy available to download if you missed this).
2. Download ‘A1 web page files.zip’ and extract the images to the same place where
your hometags page is saved.
3. Place one of the images in an appropriate place in your HTML document.
4. Resize the image by adding the property width="15%".
5. Experiment with the layout of the image by placing image tags inside of modified
<p> tags, e.g.
<p style="text-align:center;"><img src="code.jpg"></p>
6. Repeat for the other images and add subheadings for each.

9
 Activity 2

The purpose of web pages

Remember that a web page is designed for an audience and purpose.

The use of images should enhance a web page and complement the text.

Also remember that web pages need to get across useful information to the reader, so the
formatting of the page should enable this to happen.

10
 Activity 2

Formatting
What formatting can you spot on this web page?

11
 Activity 2

What did you spot?

bold
h1, red font colour

Emphasised (italics)
Underlined

h2, black font colour Light blue background 12

 Activity 2

Make a web page

1. Download the file ‘A2
Web page design.pdf’ and
the ‘code.jpg’ image.
2. Try to recreate this web
page as closely as you can.
Hint: You will need to
account for using tags in
your text, so: <
becomes &lt;
> becomes &gt;

13
 Plenary

What’s gone wrong?

Carefully look at this HTML document. Can you spot three reasons why it won’t work in the
way the designer expected?

<h1>Astro Pi - Mission Zero<h1>

Young people write a simple program to take a humidity reading onboard the International
Space Station and communicate it to the astronauts with a personalised message, which will be
displayed for 30 seconds!</p>

<p style="text-align:center;"><img src “astronaut.jpg”></p>

14
 Plenary

What’s gone wrong?

Carefully look at this HTML document. Can you spot three reasons why it won’t work in
the way the designer expected?

<h1>Astro Pi - Mission Zero</h1>

<p>Young people write a simple program to take a humidity reading onboard the International
Space Station and communicate it to the astronauts with a personalised message, which will be
displayed for 30 seconds!</p>

<p style="text-align:center;"><img src="astronaut.jpg"></p>

15
 Summary

Next lesson

In this lesson, you... Next lesson, you will...

Explored how to utilise images as a part Explore how to save work when
of carefully designed HTML webpages formatting larger webpages

16