TheBeta
Search…
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
698KB
Binary
Slide deck
Web Dev_Lesson 1.pptx
2MB
Binary

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

Copy link
On this page
Intro to HTML
Lesson objectives
Course materials
Teacher instruction
Lecture (30 minutes):
Step by step guided excerise (1 hr):
Class Experiment (30 minutes):
Teacher Recommendations: