Introduction

This session builds on the previous lesson of getting started with HTML. These activities previously used Glitch.com and Thimble, but neither resource is available any more, so we have recreated the activity using Canva's website capabilities. 

 

Begin by recapping the previous lesson and what the students have done so far with HTML code. Ask the class:

• What can you remember about HTML from the last lesson?
• What tags can you remember and what do they do?
• Why is HTML called a markup language?

 

Remixing a web page

Ask the children to type the following address directly into the address bar of their web browser. it will not work if they simply use a search engine to search for it.

tinyurl.com/remixweb

 

 

Keep calm and ...

This project is based on the famous Keep Calm and Carry On poster.

‘Keep Calm and Carry On’ was a motivational poster produced by the Government of the UK in 1939 in preparation for World War II. The poster was intended to raise the morale of the British public. It was rediscovered in the 2000s and republished in many different forms with the ‘Keep Calm and ... ’ slogan being changed for fun alternatives that were published as signs, logos and posts on social media.

 

In this session will consider web page structure, and how tags are "built" to create a web page. The project’s split screen means that it's easy to see how the code actually looks on the web. The code is on the left and you see the page you are creating on the right.

 

 

Ask the class to look at the HTML tab of the code editor. Can you recognise any elements and work out what it does?

Each <div> tag defines a section in an HTML document. 

The <div> tag is used as a container for HTML elements.

 

Let’s change the text on the poster. Can you spot which lines the code is on? 

 

 

The uppercase text is the bit we can edit. Ask the class to edit the last line to create their own version of the message, for example:

 

 

Now let’s change the image. Go to the Insert Icon tab and choose a new emoji image to fit with your slogan.

 

 

Changing colours

There are 216 web safe colours, which means that these colours will always show up exactly as you intend them to on any computer monitor or browser. Each colour has its own unique ‘hex code’.

 

Styling with CSS

CSS stands for Cascading Style Sheets. It’s a stylesheet language used to control the visual appearance, formatting, and layout of web pages written in HTML.  

Ask the class to switch to the CSS tab.

 

 

On the CSS tab. Find the *Main poster container* section.

 

There is space for two colours on the background where the hex codes are shown. What effect can this create?

 

 

If we change one colour we will see a fade effect. This is created by the linear gradient setting. A gradient is a fade.

 

 

Ask the class to try different colours on their poster, in the two # positions. Type any hex code or simply the name of the colour (without the #). 

 

 

The degrees option lets us rotate the direction of the linear gradient (fade).

 

 

Ask the class - What effect  does changing the % number after each colour have?

 

Remixing fonts

1. Scroll down to find /* Keep Calm text styling */
2. Edit the font-family for the text on your poster if wanted.
3. Change ‘Arial’. Try Verdana, Impact, Cambria, Times New Roman, Trebuchet MS or other fonts you know.
4. Repeat this for the /* AND text styling */ and /* Carry On text styling */ sections

 

What else can you change?

How about:

• Font colours
• Border colour
• Border thickness
• Text colour when you hover over it.  

 

Saving

Near the end of the lesson, save an image of their work by pressing the print screen key and pasting their image into a document (as described in the previous lesson). Ask them to add their name and perhaps a short description of their task or learning objective and then save the document.  

 

Plenary

Review the students’ understanding of the lesson. Ask the class:

• What is the difference between HTML and CSS code?
• What job does each do? HTML dictates the content and structure of the page, CSS dictates the style of it.
• What features did editing the CSS let us change in this project?
• What is a hexadecimal code? Hexadecimal codes are unique colour codes for colours on the web. 

Revisit the lesson objectives and ask them to consider their success in the lesson.