Introduction to HTML

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

  1. Use Notepad to script HTML code,
  2. Save it as a HTML file
  3. 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

Source: https://www.w3schools.com/html/html_elements.asp

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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: