The HyperText Markup Language
Behind any webpage, HTML is the code under the hood.
Learning Objective : What is HTML and what does it stand for? What are tags and how to use them.
Learning Outcome / Task : Create a simple webpage using HTML
- Use Notepad to script HTML code,
- Save it as a HTML file
- Open the file in a web browser (Google Chrome, Firefox, Microsoft Edge)
The Big Picture
What have we done? This is an introduction to HTML. Students may have had previous knowledge of coding concepts
What are we doing? We will create a simple web page using Notepad, with a heading and a paragraph
Where are we going? We can develop our knowledge of the source code, learning how to change colours and fonts and creating tables.
Starter : view the source code of existing web pages
Here is a webpage
Underneath the hood of the webpages, is the source code, known as HTML
Learning HTML helps you to understand how web pages are put together.
You can see the source code of any webpage.
On Google Chrome, right click on the webpage and choose View Page Source
Main Task : Let’s make our own webpage
You can actually code HTML by using Notepad
Here, I have scripted HTML code for my page to display the heading, Mr Neil’s Coding School. Then I have used a paragraph to say, Welcome to my first web page.
I will need to save the file as a HTML file
Tags and Elements
Tags : Notice that I am using a series of tags
<html> Let’s use HTML
<head> The heading information
<title> The title of the webside
<body> The main body of the code
<h1> The heading, 1 indicates the size of the text
<p> A paragraph
I will go to my saved file. I will see that it has the Google Chrome icon, which is my default browser
I will open the file and this will appear in my web browser
Extra extension task : investigate how to use tags change colours and fonts
Success Criteria
1. I can open Notepad and write some HTML code
2. I can use tags to script a title <title>
3. I can use tags script a heading <h1>
4. I can script a paragraph <p>
5. I can save my code as a HTML file
6. I can open the file and view the page in a web browser
7. I can go back to the original code and make changes
8. Extension or Next lesson: I can change the font of the text
9. Extension or Next lesson: I can change the colour of the text
Live Plenaries
If you are attending the live sessions, you will be asked to tell me how you did.
https://b.socrative.com/login/student/
Room Name : XFUTURE
Question 1
Question 2
What was the lesson objective?
Question 3
Teachers question, Is there anything else you would like to say?
Digital X Future 
Leave a Reply