Year 8 – Developing for the web Lesson plan

Lesson 1 – Website building blocks

Lesson 1: Website building blocks

Introduction
We use web pages every day without questioning how they work. This lesson looks
behind the curtain to help learners start to understand how webpages are constructed
using HTML tags, and how they can be modified to start to resemble the websites they
are accustomed to.

Learners will begin by considering the power of automation for repetitive tasks, before
delving into some practical web page formatting activities using HTML tags. Firstly, they
will practise formatting sections of text to improve readability. Learners will then modify
tags to change their appearance in a document, to make them different from the
defaults provided.

Learning objectives
● Describe what HTML is
● Use HTML to structure static web pages
● Modify HTML tags using inline styling to improve the appearance of web pages

Key vocabulary
HTML, tags, formatting

Preparation
You will need:
● Slides
● Activities:
○ Initial web page resource
○ Activity instructions: worksheet
○ Homework activity
● Remote control software (or some way to demonstrate learners’ work to the rest
of the group)
● Mini whiteboards

You may need:

Page 1 Last updated: 10-06-21

Year 8 – Developing for the web Lesson plan
Lesson 1 – Website building blocks

● Colour printouts of a page of a text-heavy website (e.g. a page of your school’s

website)

Assessment opportunities
In the final activity in the lesson, learners will be asked questions about key information
covered in the lesson. Completed as a whole group, this activity can provide formative
feedback about what they have understood as a class.

There is also consolidation homework that can further diagnose learners’ understanding
of the key points of the lesson.

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: 10-06-21

Year 8 – Developing for the web Lesson plan
Lesson 1 – Website building blocks

Starter Starter activity: Think, pair, share

activity
(Slide 2) Have the starter questions on slide 2 displayed on the screen as learners
enter the classroom. Ask them to think about the scenario and to estimate
5 mins their answers based on the facts they already know, (typical size of a brick
and general size of a house). They should also start to consider how
completion time is impacted when a single task is repeated multiple times.

After a short period of contemplation, ask learners to feed back their

suggestions. From the third point about repeated tasks, draw out that, no
matter the difference in answers provided, changing the appearance of
each individual brick will take a significant amount of time (5,000 bricks at 2
minute per brick is over 160 hours work!). In computing we often find
ourselves with lots of similar smaller jobs to do on a larger scale. We should
look for ways to automate repeated common tasks to help us reach
solutions to problems more quickly and with less effort on our part. We
should aim to work smarter and not harder.

Note: These types of ‘guesstimate’ problems have appeared in interviews

for high profile jobs at companies such as Google and Goldman Sachs.
There is not necessarily one correct answer, but the question is posed to
evaluate someone’s thinking and problem-solving skills. Computing
learners should be encouraged to tackle abstract problems as practise for
other problems they may encounter in life. Part of solving a problem is to
understand the scope of it first.

Activity 1 Using HTML tags

(Slides 4–6)
Introduce the concept of HTML as building blocks for websites. These
25 mins blocks are pieced together as a structure to make webpages. At the most
basic level, a web page is a plain text file. HTML marks sections of such text
files using tags, so that the behaviour of parts of the document differs from
the main text. For example, some important text can be made bold to stand
out from the rest. The image on slide 4 shows how this would be realised in
HTML.

Before you move on, note that on slide 4 the tags use symbols inside
angular brackets. These symbols indicate which structure behaviour to
apply to whatever is enclosed between the pair of tags. The closing tag
differs from the corresponding opening tag, through the inclusion of a /.

Show the learners the three examples on slide 5. Ask them to guess what
the letter in each tag corresponds to:

● <h1> is a heading tag used to turn text into a document title. The
Page 3 Last updated: 10-06-21
Year 8 – Developing for the web Lesson plan
Lesson 1 – Website building blocks

style of this text is interpreted by the web browser rendering the

document. This may change depending on the browser used.
● <em> changes the font emphasis of the enclosed text to italics.
● <b> changes the font emphasis of the enclosed text to bold.

Highlight on the last example that the formatting only applies to text that is
enclosed. Any text outside of a tag will be formatted using the default of
the browser.

For the practical part of the activity outlined on slide 6, demonstrate the
download and opening of the HTML file. Let the group experiment with tags
first, but be prepared to model how to apply the tags within the document if
they are struggling.

If there is time, use some examples of learners' work to compare the

formatting. Discuss with learners which they prefer and why. Highlight that
formating should be used to emphasise and structure text. Overuse of tags
may lessen the impact they have on the reader, so they will need to be
discerning in their use.

Activity 2 Applying formatting

(Slides 7–9)
Use the unformatted webpage example image to discuss what would turn
25 mins something that looks like a page in a book into an interesting webpage,
suitable for reading on-screen. Mention that tags can be modified to
change their appearance from the default browser behaviour.

Note in the examples on slide 8 that the <h2> tag has a similar behaviour to
<h1>. However, as the number increases inside the tags, the heading
becomes smaller, which is useful for less important subheadings.

The difference in the tags on the slide is the inclusion of a style modifier. In
this case, the colour of the heading changes firstly to red and then to green.
Note that this change is only for that particular instance of the tag. Also
flag up that the spelling of ‘color’ is American English and has to be used to
comply with HTML conventions. Browsers will not understand the modifier
‘colour’.

Draw out the fact that this method takes time, like the starter activity. If
there are 10 <h2> tags that need their colour changing, then the developer
will need to amend all 10 occurrences, which could be time-consuming.

As per Activity 1, learners need to trial changes to HTML tag styles. If

needed, demonstrate the first change to the <h1> tag outlined on slide 9.

Page 4 Last updated: 10-06-21

Year 8 – Developing for the web Lesson plan
Lesson 1 – Website building blocks

Learners should then progress through the rest of the document to improve
its appearance.

Once finished, discuss changes made to the <body> tag. Draw out why the
formatting does not apply to all text on the page, (tag modification
overrides previous settings, so setting the font on a single paragraph to
Verdana will take precedence over a body tag set to Arial).

Plenary Reflection about key knowledge and link forward

(Slides 10-11)
Consolidate the learning for this lesson with the three questions on slide 10:
5 mins
1. What is used to provide structure in a HTML document?
2. What will the following line of HTML display?
Using <em><b>HTML</b></em> to format web pages
3. What mistakes are in this line of HTML?
<h1 style="colour:blue;">Search engines<h2>

The activity works best with mini whiteboards for learners to hold up their
answers. It allows the teacher to highlight high-quality answers and also
address misconceptions.

Answers for questions:

1. Tags
2. Using HTML to format web pages
3. Different open and close tag, close tag missing / , color spelt as
colour

Homework
Direct learners to a page on your school website. Ask them to recreate the
text and style of the page using their HTML skills.

If internet access is an issue, give learners a printed page from the site to
hand-code the page.

Page 5 Last updated: 10-06-21

Year 8 – Developing for the web Lesson plan
Lesson 1 – Website building blocks

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 6 Last updated: 10-06-21