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

698KB
Web Development Lesson 1.pptx
Slide deck
2MB
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. 

    <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 TimetableNext2. More Html/CSS

Last updated

Was this helpful?