1. Introduction

Intro to HTML

2 hours

Lesson objectives

Understand how internet works and browers work
First experience of making a web page
Understand role of html/js/css

Course materials

Slide deck by Emmanuel
Infographic How internet works
Infographic on How browser works
Html example file can create

Teacher instruction

Class Ex - As the teacher explain how to perform a task. Then each student individually performs the task on their machine. Once 80% of class has completed task move on.

Lecture (30 minutes):

Explain how the internet and browser works. Make sure explain browser is chrome/firefox/Safari...

Explain Html and demonstrate a html page
- What does HTML stand for? Ask class Answer: Hypertext Markup Language: Mark up language so way of describing text and how it should look.
- Explain may ways of creating a website: e.g. can use wix or wordpress which are more drag and drop. But all create HTML, js, and css. And this is what brower reads and unpacks to display info.
- Explain at moment html file browser just unpacking a file like word unpacks a word document. And that file is local. Later file will be online and browser will go to a site to get file (as in diagram)
- Explain opening and closing tags. Closing tag lets the computer know when something ends.
- Explain tag is <...>
- Go through some key tags: Like:
  <html>, <body>, <head>, <p>, <h1>, <title>, <div> <ul>, <ol>, <li>
  - Title: shows up on the tab header of the page
  - Div: grouping element. Will cover in more depth later in the course but this is one of the most versatile element in html
  - List element. Explain difference between <ul> and <ol>.
- Page layout.
```
<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
    <p>Hello world!</p>
</div>
</body>
</html>
```
Class Ex: open a webpage. View source (right click>View Page Source) and get them to spot the tags went through
Visual learning watch this Video:

Viewpure link. Prefer over youtube for educational purposes

Step by step guided excerise (1 hr):

Class Ex: Walk through (already set up) VS code. Then class to write the code teacher wrote, then add an extra tag of their choosing.

Explain CSS and demonstrate how css styling can change the background colour / text colour
Class Ex Everyone in class do that
Explain Javascript:
- Demonstrate how to open debug console in chrome
- Write code in chrome console (alert)
- Write a js file and link to html Will discuss more about js tomorrow.
  Class Ex: Everyone in class do above steps
Live server:
Class Ex Install liveserver plugin and demonstrate how to use to display live updating data. (By e.g. changing the colour of a page)
Live Server VS extension. Instructions there for how to start it up

Class Experiment (30 minutes):

Class Ex: Recreate the webpage. But each student to add own individual twist from what learnt

Teacher Recommendations:

Make lesson interactive for example:

Asking them if know internet works
Get them to pick the background colour of page

What worked well in the past:

The test student went bit over top and did a website with pics and sound. Was relatively easy homework

What hasn't worked well in the past

PreviousOverview and Timetable Next2. More Html/CSS

Last updated 3 years ago

Teacher instruction

Class Ex - As the teacher explain how to perform a task. Then each student individually performs the task on their machine. Once 80% of class has completed task move on.

Lecture (30 minutes):

Explain how the internet and browser works. Make sure explain browser is chrome/firefox/Safari...

Explain Html and demonstrate a html page

What does HTML stand for? Ask class Answer: Hypertext Markup Language: Mark up language so way of describing text and how it should look.
Explain may ways of creating a website: e.g. can use wix or wordpress which are more drag and drop. But all create HTML, js, and css. And this is what brower reads and unpacks to display info.
Explain at moment html file browser just unpacking a file like word unpacks a word document. And that file is local. Later file will be online and browser will go to a site to get file (as in diagram)
Explain opening and closing tags. Closing tag lets the computer know when something ends.
Explain tag is <...>
Go through some key tags: Like:
```
<html>, <body>, <head>, <p>, <h1>, <title>, <div>

<ul>, <ol>, <li>
```
- Title: shows up on the tab header of the page
- Div: grouping element. Will cover in more depth later in the course but this is one of the most versatile element in html
- List element. Explain difference between <ul> and <ol>.
Page layout.

<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
    <p>Hello world!</p>
</div>
</body>
</html>

Class Ex: open a webpage. View source (right click>View Page Source) and get them to spot the tags went through

Visual learning watch this Video:

Viewpure link. Prefer over youtube for educational purposes

Step by step guided excerise (1 hr):

Class Ex: Walk through (already set up) VS code. Then class to write the code teacher wrote, then add an extra tag of their choosing.

Explain CSS and demonstrate how css styling can change the background colour / text colour

Class Ex Everyone in class do that

Explain Javascript:

Demonstrate how to open debug console in chrome
Write code in chrome console (alert)
Write a js file and link to html Will discuss more about js tomorrow.
Class Ex: Everyone in class do above steps

Live server:

Class Ex Install liveserver plugin and demonstrate how to use to display live updating data. (By e.g. changing the colour of a page)

Live Server VS extension. Instructions there for how to start it up

Class Experiment (30 minutes):

Class Ex: Recreate the webpage. But each student to add own individual twist from what learnt