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
Web Development Lesson 1.pptx
Slide deck
Web Dev_Lesson 1.pptx

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.
    <title>This is a title</title>
    <p>Hello world!</p>
  • 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