Year 8 – Developing for the web Lesson plan

Lesson 2 – Words are not enough

Lesson 2: Words are not enough

Introduction
It is said that a picture paints a thousand words. Web pages that only use text are not going to be read
for long on a screen. The use of images on web pages is important as it can bring them to life and help
improve the reader’s experience.

Learners will begin by recapping the important fundamentals of web page design, specifically the use
of tags and their modification. They will explore the structure and operation of the img tag and
understand how they can be used to ‘add’ images to web pages. To consolidate the learning of the first
two lessons, they will also try to replicate a given web page design to see if they can use what they
have learnt in the most effective way.

Learning objectives
● Display images within a web page
● Apply HTML tags to construct a web page structure from a provided design

Key vocabulary
Image, tag, attribute, directory, render

Preparation
You will need:
● Slides
● Activities:
○ A0 worksheet - HTML tags recap
○ A0 solutions - HTML tags recap
○ A1 Hometags.html
○ A1 Solutions - Hometags.html
○ A1 Web Files.zip
○ A2 Web page design
○ A2 Solutions - Web page design
● Mini whiteboards

You may need:

● Colour printouts of web page designs if learners are not comfortable working with multiple
files on-screen

Page 1 Last updated: 19-07-21

Year 8 – Developing for the web Lesson plan
Lesson 2 – Words are not enough

● Remote control software (or some way of demonstrating learners’ work to the rest of the
group)

Assessment opportunities
All activities in this lesson offer the teacher the chance to formatively feed back to the learners.
Judgements should be made about the accuracy of designs compared to the provided target
documents.

There is also a short plenary activity that consolidates the key learning over the last few lessons and
should be used to gauge how much the learners are developing their ability to ‘read’ HTML.

Outline plan
Please note that the slide deck labels the activities in the top right-hand corner to help you navigate
the lesson.

*Timings are rough guides

Page 2 Last updated: 19-07-21

Year 8 – Developing for the web Lesson plan
Lesson 2 – Words are not enough

Starter Starter activity: Recap and predict

activity
(Slides 2-3) Have slide 2 displayed on the screen as learners enter the classroom. Remind the class
that tags are the building blocks of web pages.
10 mins
Direct them to look for the empty tags marked red and try to fill in as many tag pairs
as they can remember. Remind them to look for clues about how tags work together
and consider the outputs they want to produce.

Display the answers using slide 3 once learners have had enough time to fill in most of
the blanks. Ask learners to justify the choices of tags and why the tags as shown are
appropriate:

</h1> - closes the <h1> tag to mark where the document heading is
<p> - needed to start a new paragraph of text without continuing where the previous
line left off
<em></em> - italicises the enclosed text
</b> - closes the <b> tag that makes enclosed text bold
</p> - marks the end of a paragraph of text
Color:red - sets the font colour for that tag to red (highlight the importance of the
spelling of ‘color’)
<br> - method of forcing a line break
100px - sets the size of text
</body> - marks the end of the text of the web page

Note that there are often alternative tags that seemingly do the same things. For
example, <em> is an equivalent of <i> and both set text in italics. However, there is a
difference, as <em> has the added benefit of signalling to a screen reader (used by
people accessing websites who have visual impairments) that the text enclosed should
be emphasised differently when read. The <i> tag only changes the textual
presentation on the screen. Similarly, <strong> can be used instead of <b> for similar
reasons except this time the text would be read in a more forceful and louder way.

In this example, the use of <strong> might make a screen reader shout a lot of text and
so should be avoided. There is less ‘disruption’ when using <em> so its use is more
justifiable for these activities. Ultimately, however, it could be an important choice
when considering all audiences when designing web pages.

Activity 1 Using images

(Slides 5–9)
Introduce the need for images on web pages. Ask learners to predict what they think
20 mins the HTML snippet will produce when rendered in a web browser. Highlight that it is
important for computer scientists to predict what the output of actions might be, even
if they are wrong.

Display slide 6 with the example rendered in a browser. Note that the blue border
marks the window of the web browser.
Page 3 Last updated: 19-07-21
Year 8 – Developing for the web Lesson plan
Lesson 2 – Words are not enough

The text is displayed first as it appears at the top of the source document. It is enclosed
in <p> tags, so is contained as a paragraph. The image follows below as it is outside of
this paragraph. The image is aligned to the left as it hasn’t been told to move anywhere
else. The alt attribute is only visible when the mouse hovers over the image, (though
this might not always happen, depending on the browser used and the way the website
has been designed). The label is a description of the image that can be used for times at
which the image hasn’t loaded. It is also used as an accessibility feature to assist those
with visual impairments who are using a screen reader. The reading software can read
out alt text to indicate to users what is on the page.

Reinforce the example by breaking apart the component parts of the image tag. Note
how the tag is constructed using the base tag <img> and any additional properties in
the same way that other tags are modified to change their behaviour. The img tag
needs to identify the source of the image using the src attribute. This is set to the image
file name including the extension. Note that when learners start using their own images
the extension might not always be jpg.

Note on slide 8 that the image is not inserted into the HTML document itself. What the
tag does is create a reference to the location of an image file that should be used. These
references are like any other resource stored on a computer. They are identified by
names and are located in system directories (commonly known as folders in some
operating systems). If a directory isn’t specified, then the file is assumed to be in the
same directory that the HTML document was found.

When the web page is viewed in a browser (rendered), the text and tags in the
document are processed. When an img tag is encountered, the image file is retrieved
by the viewing web browser and displayed in the position identified by the tag.

For the main activity, remind learners how to open a HTML file in a plain text editor.
If needed, learners can download a partially completed example to work through if
they don’t have a working example from last lesson. Guide learners to download the
four image files into the same directory of their HTML document.

To assist learners, model the creation of an image tag in a live document. Learners
should replicate your actions. Once they have tried this, they should continue to add
the other pictures in suitable locations within the story.

What they will notice is that the image size is natively very large. Again, depending on
the experience and ability of the group the teacher may need to model the controlling
of the image size. The teacher should also discuss the problems with the placement of
the image, demonstrating how to enclose the image within its own <p> tag to separate
it from the other text in the document.

Once confident, learners should repeat for the other images.

The file A1 Solutions - Hometags.html has also been provided should you wish to
demonstrate this to your students.
Page 4 Last updated: 19-07-21
Year 8 – Developing for the web Lesson plan
Lesson 2 – Words are not enough

Activity 2 Purposeful design

(Slides 10–
13) Make sure learners are aware that they need to focus on their audience. Simply adding
pictures to a web page is of no benefit if it does not enhance the reader’s experience.
25 mins
Consider the example of a textbook they use in science lessons. If the book used just
pages and pages of text to describe functions of the human body, it is likely they
wouldn’t read it all and it would be difficult for them to visualise what the text was
talking about.

Similarly, if the images were placed randomly around the book, they would not be
given any context by the writing.

Display the formatting slide and ask learners to spot what formatting has been applied.
The answers are on the following slide. Draw out from learners justification for the
choices made. For example, the heading is formatted orange to be made more eye-
catching.

For the main activity, direct learners to download the pdf file that shows the target
design for the web page they have to create. Note that the image will also need to be
downloaded.

The file A2 Solutions - Web page design.html has also been provided should you wish
to demonstrate this to your students.

Plenary Reflection about key knowledge and link forward

(Slides 14-15)
Display the plenary slide and ask learners to spot three faults with the HTML
5 mins document.

The mistakes are:

● No / in the closing h1 tag
● Missing <p> tag to open the main paragraph
● Missing = for the image source in the img tag

Resources are updated regularly — the latest version is available at: ncce.io/tcc.

This resource is licensed under the Open Government Licence, version 3. For more information on this licence, see
ncce.io/ogl.

Page 5 Last updated: 19-07-21