# 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
{% file src="/files/-MRzTuAuqOwaEg1Mftnr" %}
Slide deck
{% endfile %}
{% file src="/files/-MUYy2yNTg0-vhSpr-6L" %}
## 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:
```markup
, , , ,
, , <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.
```markup
<html>
<head>
<title>This is a title
```
* *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](http://www.viewpure.com/WTdLcipEqsc?start=0\&end=0). Prefer over youtube for educational purposes
{% embed url="" %}
### 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](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer). 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tbhp.gitbook.io/thebeta/lesson-plans/introduction.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.