Introduction

This session builds on the previous lesson with X-Ray Goggles, and develops pupils' understanding of web page structure in HTML by using the excellent glitch.com. These activities were previously written around using Mozilla’s Thimble tool, which was retired in December 2019. 

Glitch is very similar and has versions of many of the projects that were previously available in Thimble. 

Recap 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 two lessons?
• What tags can you remember and what do they do?
• What were you able to change in your newspaper article in the last lesson?

 

Introduce glitch.com  and start a new project with the button in the top right of the screen.

 

 

In the previous lessons, pupils were using X-Ray Goggles to look for HTML tags, but probably weren't contemplating the structure of the page. In-fact, this is quite hard to do in X-Ray Goggles. 

However, Glitch copes with this a lot better. 

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

As your first project opens you’ll see the welcome page which explains the different elements of your project which can be seen in the left hand pane. 

 

Have a quick look at the explanations on the welcome page, but you don’t need to go through each file in detail at this stage. However, ensure the students understand that each of these files will control a different element of their web page.  The index.html file is the main one to focus on for now as that is where the HTML code lives. 

Click on the index.html file to take a look:

 

Ask the students to scan the contents of this file to see if they recognise any elements and can work out what any of it does. 

There’s plenty they can ignore, but they should hopefully spot at least the heading <h1> and a paragraph <p> tags. Some might notice the hyperlinks <a>.

Ask the class - What do you think the parts in grey wrapped with <!--    --> are for?  These are comments and not part of the code. They let an author leave notes on the code that the browser will ignore. They are really useful for explaining your code to others. This is possible with most coding and programming languages and the students might have experience of doing it in Scratch or other programs. 

But where is the web page that this code is creating? Click the Show button and choose how you want the page to be displayed. You can open it in a new window or side-by-side with the code, which is the better option for these lessons. 

This now works very much like the editor from www.w3schools.com that we used in lesson 3. Ask the students to edit the heading and paragraph by just editing the code in the central window between the <h1> tags and the <p> tags. 

Explain that you can build your own web pages from scratch with this tool or you can remix project examples provided, which is what we are going to do in this lesson.

 

Main task

We’re going to start with a Keep Calm web poster. You can find this project at glitch.com/~keepcalmposter1

 

Click the Remix Your Own button in the bottom right of the screen and when the project opens click on the Show > Next to the code options so your screen looks like this

 

Start by discussing the different files available and what each one is:

• Crown.svg - an image of a crown which we can use in this project
• Index.html - the main file where the HTML for the poster is contained
• Style.css - This is called a stylesheet and is some extra code that dictates the look and feel of the web page, it controls things like colours and fonts etc. This code is referred to as CSS (Cascading Style Sheets) and can be found inside <style> tags
• Thimble.svg - the thimble image currently in use on the poster
• Tutorial.html - the tutorial guide for remixing the page.

 

To remix this page let’s begin with the HTML and the index.html file. 

Let’s change the text on the poster. Can you spot which line this code is on? Line 18 onwards. 

 

 

Ask - What type of text is this? What does the <h1> tag tell us? It’s a large heading, what do the <br> tags do? They add a line break. Notice that they don’t wrap anything, unlike most tags <br> tags don’t need a corresponding closing tag.

Ask the students to edit the text, e.g.

 

Next, let’s switch the thimble image for the crown image that is already provided for us. Ask - Can you find the code for the crown image? (line 15) What tag defines it as an image? <img>.

Ask the students to delete the name of the image thimble.svg but not the speech marks. Ask - What other information is contained about the image? Its width is also defined. What measurement do you think 125 is?  This is how many pixels wide the image is.

 

 

Replace “thimble.svg” with “crown.svg” and the image should change on the poster. 

 

 

Changing colours

Next, let’s go to the stylesheet and change the background colour. Find the word cornflowerblue on line 2. There are different ways to use colours in CSS. You can name to colour directly or use hexadecimal codes. These give each colour it’s own unique code. 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. Other colours (or shades) can be achieved by blending colours together, but they may not always be consistently displayed on different devices. You can see all the web safe colours and their hexadecimal codes here.

 

So you can delete the cornflowerblue text and try a few things:

1. Pick a colour code from above and enter that (all 6 characters, no spaces)
2. Type the name of a colour 

 

Changing fonts

Next you could edit the fonts if wanted. You can edit “Gill Sans” for the name of any other fonts you know. CSS won’t recognise all fonts (there are thousands), find out more here.

 

You could try Verdana, Impact, Times New Roman or Trebuchet MS for example.

 

You can undo any changes you don’t like pressing Ctrl+Z.

Other things the students can tweak might be:

• Text colour (line 3)
• Border, adjust the thickness and colour (line 13)
• Font-size (line 17)
• Text-transform, try ‘none’, ‘lowercase’, ‘capitalize’ (US spelling), ‘uppercase’ (line 19)
• Font-weight, try ‘normal’, ‘bold’ or ‘bolder’ (line 20)

 

Save their work in the same way as previous lessons by print screening their work and pasting it into a document and adding a short description of their task or learning objective and then save the document.  

If time, students can then change the slogan and image and add further styling of their choice to really personalise it, e.g.

 

To achieve this they will need to find their own image. In a new tab do an image search but add ‘png’ or ‘svg’ to the end of your search then search for images with a transparent background (png and svg files are more likely to have this). You can tell it is transparent as when you click on it to preview it you’ll see a checked background.

 

Right click the image and choose Copy image address, then return to your tab with Thimble open. Find the image text that you’re replacing on the index.html file, delete it and paste in the address of the image you’ve just copied (Ctrl+V to paste)

 

Before

After

Ask the students to have a go at creating their own poster on their own, remembering the things we changed, but ask them to consider colour and consistency on their poster to make it look better. 

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.