Lecture 1: Introduction & Document Structure

Learning Objectives

Explain what HTML is and its role in the web

HTML stands for Hypertext Markup Language. It's the standard language used to create the structure and content of webpages.

• HyperText — text that contains links (hyperlinks) connecting to other pages or resources, letting you "jump" from one piece of content to another. This is the foundation of how the web works — clicking a link takes you somewhere else.
• Markup Language — a language that uses "tags" to label and organize pieces of content, telling the browser what each part is (a heading, a paragraph, an image, etc.) rather than telling it what to do like a programming language would.

HTML itself isn't a programming language — it has no logic, loops, or calculations. It's more like a set of instructions that describes the skeleton/structure of a page.

Its Role in the Web

Think of building a webpage like building a house:

HTML's specific jobs:

1.   Defines content — text, images, videos, forms, tables, etc.

2.   Gives content meaning — a browser knows the difference between a heading and a normal paragraph because of the tags used (<h1> vs <p>)

3.   Creates the skeleton other technologies build on — CSS styles the HTML, JavaScript adds interactivity to it

4.   Enables linking — the "hyper" part; HTML is what makes the entire web connected through clickable links

5.   Helps search engines and accessibility tools understand your page — using proper tags (like <nav>, <article>, <h1>) helps Google rank you and helps screen readers read your site aloud to visually impaired users

Simple example:

<!DOCTYPE html>

<html>

<head>

  <title>My First Page</title>

</head>

<body>

  <h1>Welcome!</h1>

  <p>This is my very first webpage.</p>

</body>

</html>

Without HTML, there would be no webpages at all — it's the very first and most essential building block of everything on the internet.

Want me to turn this into a simple visual diagram (like the house analogy) for your lesson slides?

Create a correctly structured HTML5 document

Here's a correctly structured HTML5 document with all the essential elements explained:

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>My First Page</title>

</head>

<body>

    <h1>Welcome to My Page</h1>

    <p>This is a paragraph of text on my webpage.</p>

</body>

</html>

Breakdown of each part (great for teaching):

Key teaching points for students:

1.   <head> = invisible setup info, <body> = visible content

2.   Tags usually come in pairs: <h1>...</h1> (opening + closing)

3.   Indentation isn't required by the browser, but keeps code readable — always teach clean formatting habits

4.   This structure is the template every HTML page starts from

Use essential head elements (title, meta)

Essential <head> Elements: <title> and <meta>

The <head> section doesn't display on the page itself, but it's critical — it tells the browser (and search engines) important info about the page.

1. <title>

html

<title>My First Website</title>

• Sets the text shown in the browser tab
• Shown as the clickable headline in Google search results
• Used as the default name when someone bookmarks the page
• Every page should have a unique, descriptive title (not just "Home" or "Page 1")

Good vs bad example:

2. <meta> Tags

<meta> tags provide metadata — info about the page that isn't visible content itself. They're self-closing (no closing tag needed).

The 3 most essential ones for beginners:

html

<meta charset="UTF-8">

• Sets character encoding so text (including Arabic, emojis, accented letters) displays correctly
• Without this, special characters can show as broken symbols (□ or �)

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Makes the page responsive — scales correctly on mobile phones
• Without it, mobile users see a tiny, zoomed-out desktop version

html

<meta name="description" content="A short summary of the page for search engines">

• This text often appears under your title in Google search results
• Important for SEO (Search Engine Optimization)

Quick Comparison Table (good for slide)

Mini Practice Exercise:

"Write a <title> and a <meta description> for a webpage about your favorite hobby."

Example answer:

html

<title>Ahmed's Photography Hobby</title>

<meta name="description" content="Explore Ahmed's photography tips, tools, and favorite shots.">

Content Outline

1.   What is HTML? (markup vs programming language)

HTML (HyperText Markup Language) is a markup language used to structure and organize content on the web — headings, paragraphs, images, links, etc.

Markup Language vs. Programming Language

This is a common beginner confusion, so it's worth explaining clearly:

Simple Analogy

Think of HTML like the labels on boxes when moving house:

• A box labeled "Kitchen" doesn't do anything — it just tells you what's inside and where it goes.
• HTML tags work the same way: <h1> labels something as a heading, <p> labels something as a paragraph.

A programming language, on the other hand, is like the moving truck driver — it makes decisions, follows routes, and performs actions based on conditions.

Why This Matters for Beginners?

Many new learners think "learning HTML" means "learning to code" in the traditional sense (with logic and functions). It's important they understand:

• HTML has no loops, no variables, no conditions
• You cannot make HTML "calculate" or "decide" anything
• To add interactivity/logic later, they'll need JavaScript
• HTML's job is purely structure and meaning

Quick Check Question (for class):

"True or False: HTML can calculate the total price of items in a shopping cart."
Answer: False — that requires JavaScript. HTML would only display the structure (e.g., a <table> showing items), not perform the calculation.

2.   How browsers read HTML

3.   The basic document skeleton:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Page Title</title>

</head>

<body>

  <!-- Content goes here -->

</body>

</html>

Purpose of each part (DOCTYPE, html, head, body, meta, title)

Let's break down why each piece exists in an HTML document — not just what it looks like, but what job it does.

<!DOCTYPE html>

Purpose: Tells the browser "this is an HTML5 document."

• Must be the very first line — no exceptions
• Without it, older browsers may render the page in "quirks mode" (inconsistent, buggy display)
• It's not a tag — it has no closing tag, and it's not technically an HTML element itself; it's a declaration

<html>

Purpose: The root/container element — everything else lives inside it.

• Wraps the entire page: both <head> and <body>
• The lang="en" attribute tells browsers and screen readers what language the content is in (important for accessibility and translation tools)

html

<html lang="en"> ... </html>

<head>

Purpose: Holds information about the page, not content shown to users.

• Think of it as the page's "ID card" — metadata, settings, links to other files (like CSS)
• Nothing inside <head> appears in the visible page (except <title>, indirectly, in the browser tab)

<meta>

Purpose: Provides metadata — extra details about the page for the browser/search engines.

• Self-closing tag (no </meta> needed)
• Common uses: character encoding (charset), mobile responsiveness (viewport), SEO description

<title>

Purpose: Sets the name of the page.

• Appears in the browser tab
• Appears as the clickable link text in Google search results
• Used when bookmarking

<body>

Purpose: Contains everything visible to the user.

• Text, images, links, buttons, videos — all visible content goes here
• This is where 90% of a student's actual "webpage building" will happen

Summary Table (great for a slide)

Quick Analogy (good for reinforcing)

Think of an HTML page like a letter:

• <!DOCTYPE html> = the type of paper/format you're using
• <html> = the envelope holding everything
• <head> = the sender info on the back of the envelope (not the main message, but useful info)
• <body> = the actual letter/message someone reads

Saving the file as .html and opening it in a browser

This is the first hands-on step students take — turning code into an actual webpage they can see.

Step-by-Step: Creating & Saving

1. Open a text/code editor

• Recommended: VS Code (free, most popular) — but Notepad also works for absolute beginners
• ⚠️ Avoid Microsoft Word — it adds hidden formatting that breaks HTML

2. Write the HTML code

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>My First Page</title>

</head>

<body>

    <h1>Hello World!</h1>

</body>

</html>

3. Save the file with the correct extension

• File name: index.html (or any name, e.g., mypage.html)
• Extension must be .html, not .txt
• In VS Code: Ctrl+S (or Cmd+S on Mac) → type filename with .html
• In Notepad: When saving, choose "Save as type: All Files" and manually type index.html — otherwise Notepad forces .txt

Step-by-Step: Opening in a Browser

Option A — Double-click

• Simply double-click the .html file → it opens automatically in your default browser

Option B — Right-click method

• Right-click the file → "Open with" → choose a browser (Chrome, Edge, Firefox, etc.)

Option C — Drag and drop

• Drag the file directly into an open browser window

Common Beginner Mistakes to Warn Students About

Quick Practice for Students:

"Create a file called about-me.html, add an <h1> with your name, save it, and open it in your browser to confirm it works."

Common beginner mistakes (forgetting closing tags, wrong file extension)

Live Demo Build a simple “Hello World” page together.

-------- END-------