What is HTML?
Inside the internet - Lesson 3
Objectives
- To understand that web pages are written in HTML
- To recognise simple HTML formatting language
- To view the HTML page in a browser
- To make simple edits to HTML and ‘remix’ a web page.
Lesson Resources
Lesson 1 - What is a network?
Lesson 2 - What is the Internet?
Lesson 3 - What is HTML?
Lesson 4 - Remixing the web
Lesson 5 - HTML and CSS
Lesson 6 - More HTML and CSS tinkering
Introduction
In this session we need to talk about the structure of the web, and how it is built in blocks, the same way as Lego models and other programs like Scratch.
Discuss what file extensions are. Ask the class - What do the following mean?:
- .doc (Word files)
- .ppt (Powerpoint files)
- .jpg, .gif or .png? (image files)
- .wav or .mp3? (sound files)
- .mp4, .wmv, .avi (video files)
They all instruct a computer which piece of software the file is compatible with, and the type of data that is in the file. When you double-click a .doc file in your Documents folder, the computer knows to open it with Word.
Ask - Has anyone heard of HTML before? What is it? It stands for Hypertext Markup Language. A markup language consists of rules about how a document should be formed and displayed. It is a code, but it is NOT a programming language. Code is a set of rules written as human readable text to be executed by a computer. Therefore, writing HTML is coding, but it's not programming, because it does not involve writing algorithms, steps that lead to a solution of a problem.
Web pages are written in HTML , it ‘marks up’ elements on the page to say how they should be displayed on the page. The HTML code is read by a web browser, which understands all the markups and displays the web page to us appropriately, a bit like the file extensions tell the computer what type of file it is and what to do with it.
There are lots of different HTML tags which can be used to markup elements, you could mark up some text as a heading, a paragraph, that it should be in bold, underlined or preceded by a bullet point. Images need HTML tags as do hyperlinks that send us off to other websites when we click on them.
HTML tags < /> are placed around text to tell the browser how to display it, for example:
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
Would show in a browser as:
This text is bold
This text is italic
You probably can spot the tags for bold <b> and italic <i>, but what do you think the <p> tags mean? This is the HTML tag for a paragraph. You might have also spotted that the same tag has to go at the start and the end of the text to wrap around it, the closing tag also has a / inside the brackets.
HTML Tags
Here are a few more simple HTML tags. These can be found in the HTML Student Helpsheet
Let’s try some basics out for ourselves using the learning tools at http://www.w3schools.com/.
Click LEARN HTML.
Then HTML Introduction in the side menu.
Here you’ll find a super simple example where you can see some HTML in action, plus an explanation of what everything on the page means. Click Try it Yourself to take a look.
You’ll see a page like this open up. On the left is the HTML that’s marking up the content on the page. On the right is the result of that HTML code on the webpage. The browser reads the HTML and displays the text in a particular format.
But you’ll notice not everything on the left is displayed on the right. Some of the HTML is doing a bit of ‘set up’ work for the document, which is explained on the project intro page, and also below.
Example Explained
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
Give out the HTML help sheet (at least 1:2). The students are going to create their first simple web page, all about them.
If we start at the top of the table, we already have an example of a paragraph <p> heading <h1> on the activity page. Ask - Which words on the page are marked as a heading? (‘My first heading’) Which words on the page are marked as a paragraph? (‘My first paragraph’) Once they have identified these, we can edit them, but it's really important that we only edit the text inside the tags, don’t delete the tags themselves or the text won’t display in the browser window.
Start by editing the text that is already on the left hand side of the screen, to something like this:
After you make any changes on the left just click the green Run button to update the browser on the right.
Ask the class - How would I put my name in bold? I’d need to add the HTML tag for bold <b> around that part of the text. Don’t forget, with most HTML tags, when you close the tags a / is needed:
<b> text goes here </b>
Ask the students to try it out. Here’s how it should look:
Next we’ll add three fun facts about ourselves as a list. While there is no intention to publish this work publicly, remind the students that these should be fun, appropriate facts and not private information.
Ask the class - What are the HTML tags for a list? There’s some choice here as we can use a numbered list <ol> or simple bullet points <ul>, but each item on the list is marked by <li>
It might look something like this when complete:
Some students might be able to go on and add some more detail about their fun facts and add a heading for each below the list. For example:
They can choose the size of their headings.
Also encourage them to perhaps markup some words with bold or italics where appropriate.
Saving
We’ve found the save option on the w3schools page a little temperamental at best. So instead of using that, the best way to capture their work is to print screen it and paste it into a document.
Most keyboards have a Print Screen key (sometimes abbreviated to Prt Scr), just press the key to capture a ‘photo’ of whatever is on the screen at the time (tip - you can zoom out a bit if you can’t see everything you want by holding Ctrl and the - sign, or from the settings button in Chrome). Nothing obvious happens when you press print screen, but the image is saved to the computer’s clipboard, ready for you to paste it somewhere.
Once you’ve pressed print screen, open a document in a landscape orientation (Google Docs, Slides, Word, Powerpoint, Publisher etc) and paste the captured image into it by pressing Ctrl+V.
An example pasted into Google Slides:
From here the students could add a short explanation of their work, the lesson objective, or text boxes and labels to show what they did if working in Google Slides or Publisher.
If you plan to print, ensure your image fills the page.
Plenary
Review the students’ understanding of the lesson. Ask the class:
- What is HTML? A markup language that tells web browsers how to display the content on a webpage.
- What are HTML tags? The code that wraps around some content to define how it looks.
- What is the tag for a paragraph? <p>
- What is the tag for a large heading? <h1>
- What is the tag for a numbered list? <ol>
- What must be added to the closing tag every time? A forward slash / .
Revisit the lesson objectives and ask them to consider their success and understanding
in the lesson and what they may need to work more on.