Introduction

Recap last week’s lesson. Ask the class - What is the name of the code that webpages are written in? (HTML). Remind the students that HTML is a markup language that tells a web browser how to display elements on the page.  What are HTML tags? These are the HTML code that wraps around content on a web page to tell the browser how to display it, they are always written within angle brackets <>

 

e.g

<h1> heading

<b> bold text

<p>  paragraph

<img> image

<ol> ordered (numbered) list

 

Main task

This week we are going to use a web tool called X-Ray Goggles. 

X-Ray Goggles lets you look under the skin of a website to see the HTML code of the page. But it also lets you ‘remix’ the HTML to edit a copy of the site. 

 

At the point you start editing the page, X-Ray Goggles captures a copy of the webpage. It is that copy that you are editing, not the original web page, so at no point are you making any unauthorised changes to real websites (which would be illegal!). 

Go to X-Ray Goggles (https://x-ray-goggles.mouse.org/). 

To be able to use the tool you need to have the bookmark/favourites bar showing in your browser. Turning this feature on is done differently on different browsers and machines, but X-Ray Goggles has instructions for many different browsers on different operating systems. In Chrome, click the three dots/lines in the top right of the browser > Bookmarks > Show Bookmarks Bar.

Once the bookmarks bar is showing, follow step 2 and install Goggles by dragging the pink button onto your bookmarks bar at the top of your screen.

 

Ask the students to go to https://x-ray-goggles.mouse.org/ and install the X-Ray Goggles button in their bookmark bar. 

 

Once it is installed, demonstrate to the students how it's used. 

Not all websites are built with pure HTML, so some web pages work better than others for this. 

More text based pages generally work best, Sky News, Sky Sports or local news sites are a good place to start, though please check the news site you intend to visit right before the lesson as they may contain headlines/stories that may be upsetting and not always appropriate for students. If in any doubt create a link to a specific story that you have checked and are happy with.

Once on the page, click the X-Ray Goggles button you installed on your bookmark bar. 

 

As you hover your mouse cursor around the screen you’ll see coloured boxes appear over elements of the page, you’ll also see HTML tags in the corner of the boxes (don’t worry if you don’t recognise them all!)

 

As you click on the elements a box will open at the bottom of the page.

 

Inside the box you’ll see the HTML code for the element you clicked on, including the tags and the text inside them, in this example, the headline of the article. 

Ask - What type of HTML tags are being used on the headline of this article? <h1> tags.  But X-Ray Goggles doesn’t just let you see the HTML, it lets you edit the content as well!  Demonstrate changing the headline by editing the black text. 

 

 

It will immediately change the text on the page, and you can commit the changes by pressing the green Update button.

 

 

You can also cancel the change if wanted. Remember, you are not editing the actual webpage at this point, X-Ray Goggles captures a copy of the page’s code when you activate it. 

It's really important that you do not refresh or navigate away from the page while you are editing it as all your changes will be lost. Demonstrate and emphasise this to the students so they are aware when they begin their own edit. 

Direct the students to  a website of your choosing and ask them to activate X-Ray Goggles. Ask them to move their mouse around the page. Ask - what other HTML tags can you see on the coloured elements? Which do you recognise from our last lesson? Which are new? 

It's likely they’ll find <img> tags (images) and <a> tags (hyperlinks) on most news pages. 

Demonstrate editing some paragraph text on the page and perhaps the text of some hyperlinks. 

 

Your remix

Explain that you’d like them to remix the news story by editing the different HTML elements they can find on the page. But they will need a purpose for remixing the page, which could be a number of things. For example:

• Re-writing it for a different audience (perhaps simplifying the language)
• Adding yourself to the story and changing quotes to be from you - You might be selected for the latest England team or have reached the top of the charts with your new single.
• Re-writing the news to include fictional characters or be based around events in a fiction text you are reading
• Celebrate an event or achievement in school

 

Click on something you’d like to edit and have a go at remixing the content. Remember not to delete the tags, just the text inside them. 

 

 

You cannot add line breaks by just using the spacebar, instead you need to code them, use the tag <br> to add a line break.

Have a look at the example below, which bits do you think were edited with X-Ray Goggles?

 

 

Editing images

You can even replace images on the page, however, the new image needs to already be hosted online for it to work, so you couldn’t easily drop in a photo of yourself:

 

1.  If X-Ray Goggles is activated press the ESC key to exit the tool.

2.  Search for an image with a search engine in a new tab..

3.  On the results page, right-click on the image you want and then click ‘Copy image address’.

4.  Use X-Ray Goggles to find an image <img> inspect the code and look for the code for the current image, it should look a bit like this:

<img src=“imagecodegoeshere.jpg”>

This red code can often be quite long, don’t worry about it, just focus on looking for the image file extension (usually .jpg or .png) at the end and the inverted commas.

Highlight and delete only the part between the inverted commas.

5.  Paste the images address you copied in instead (Ctrl+V to paste). Don’t delete the actual inverted commas

6.  If you’re happy with it, update the page.

7.  Don’t forget to update image descriptions so they match the new image. 

 

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

Ask the students to swap seats with a partner and consider: has your partner made some good edits to their code? Can you spot any mistakes or things that could be improved? Review the students' understanding of the lesson.

Revisit the lesson objectives and ask them to consider their success in the lesson and what they may need to work more on.