1 of 12

Lesson 1: Website building blocks

Year 8 – Developing for the web

2 of 12

Think, pair, share

Starter activity

What would make the walls of his house more interesting to look at?

How many bricks do you estimate would be needed to build a whole house?

If you wanted to add a stencil motif to each brick, and each one took 2 minutes to do, how long would it take?

Have the slide displayed on the screen as learners enter the classroom. Ask them to think about this scenario.

After a short period of contemplation, ask learners to feedback their suggestions. From the third point draw out that, no matter the difference in answers provided, changing the appearance of each individual element will take a significant amount of time. In computing, we should look to ways to automate repeated common tasks to help us reach solutions to problems more quickly.

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 understanding it first.

Image source: https://pixabay.com/vectors/brick-wall-construction-real-estate-295225/

3 of 12

Lesson 1: Website building blocks

Objectives

In this lesson, you will:

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

3

4 of 12

HTML

Activity 1

Hypertext markup language.

The ‘bricks’ of the website that provide the structure to organise the text and images of web pages.

Each of these building blocks are identified with pairs of tags; one to mark the start of the block, one to identify the end.

4

<p>

</p>

<b>

</b>

On sale

Introduce the concept of HTML as building blocks for websites. These blocks are pieced together as a structure to make webpages. At the most basic level, a webpage 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. For example, some important text can be made bold to stand out from the rest.

Note here before moving on that tags use angular brackets and symbols inside. 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 /.

Image source: Image title: Brick texture red brick from Public domain images website, http://www.public-domain-image.com/full-image/textures-and-patterns-public-domain-images-pictures/wall-texture-public-domain-images-pictures/brick-wall-texture-pictures/brick-texture-red-brick.jpg.html

5 of 12

HTML examples

Activity 1

For example:

<h1>Developing for the Web</h1> Developing for the Web
<em>Using HTML and CSS</em> Using HTML and CSS
Building <b>web pages</b> Building web pages

Note: Any text not enclosed by a tag is just presented as plain text.

5

6 of 12

Make a web page

Activity 1

Download and open the file ‘A1 Home.html’ in a web browser to see what plain text looks like without HTML tags.
Now open the file in a plain text editor.
Use the <p></p> to break up the text into paragraphs to make it easier to read.
Try some of the following tags to improve the appearance of the page:
<b></b>
<em></em>
<q></q>
<center></center>
<ul><li></li><li></li></ul> - bulleted list with each item enclosed in <li></li> tags.

6

7 of 12

Changing appearances

Activity 2

Formatted text is all well and good, but wouldn’t it look better in colour?

Here, the web page looks no different to a page in a book.

7

8 of 12

Inline formatting

Activity 2

You can make websites look nice directly in the HTML.

But you have to do this for each individual piece of text you want to change the look of.

For example:

<h2 style="color:red;">Title</h2>

Some arbitrary text.

<h2 style="color:green;">Another title</h2>

Some more arbitrary text.

Note how color is spelt. Do you know why?

8

Title

Some arbitrary text.

Another title

Some more arbitrary text.

9 of 12

Style it up!

Activity 2

Open ‘Activity instructions’

Work through the activities on the sheet to practise formatting your web page in different ways

9

10 of 12

Can you remember?

Plenary

What are the answers to the following questions about content from this lesson?

What is used to provide structure in a HTML document?

What will the following line of HTML display?�Using <em><b>HTML</b></em> to format web pages

What mistakes are in this line of HTML?

<h1 style="colour:blue;">Search engines<h2>

10

11 of 12

How did you do?

Plenary

What is used to provide structure in a HTML document?�Tags

What will the following line of HTML display?�Using <em><b>HTML</b></em> to format web pages�Using HTML to format web pages

What mistakes are in this line of HTML?

<h1 style="colour:blue;">Search engines<h2> �Different open and close tag, close tag missing / , color spelt as colour

11

12 of 12

Next lesson

Summary

12

In this lesson, you...

Explored how to structure web pages with HTML tags, changing their formatting to improve the appearance of on-screen text

Next lesson, you will...

Develop a web page including images to meet design requirements