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
Last updated
Was this helpful?