Getting Started with HTML: From Zero to Your First Webpage

This lesson guides absolute beginners through the basics of HTML, explaining how the web works, what HTML is, and how to write clean, structured markup. By the end of this session, students will be able to build a simple webpage containing text, images, links, lists, and forms.

📑 Table of Contents

What is a Website?
How the Web Works
Real-Life Example: Newspaper
What is HTML?
Your First HTML Example
Anatomy of an HTML Element
Nesting HTML Elements
Anatomy of an HTML Document
Starting HTML with VS Code
Common HTML Elements
Lists
Forms and Inputs
Self-Closing Elements
Attributes and Class
Formatting Elements
Practice Task
Learning Resources
Lesson Summary

What is a Website?

A website is a collection of interlinked web pages, images, videos, and other digital assets, identified by a common domain name (e.g., www.example.com) and published on at least one web server. Accessible via the internet, websites are used for information, commerce, or communication. They are viewed using a web browser.

How the Web Works

When you open a website:

You type a web address (URL)
The browser requests files from a server
The server sends back HTML, CSS, and JavaScript
The browser reads HTML and displays the webpage

Behind the scenes, this is what happens:

[ You ]
   │ type URL
   ▼
[ Browser ]  ───── request ─────▶  [ Server ]
     ▲                               │
     └──────── HTML, CSS, JS ◀───────┘

The browser does not understand human language. It understands HTML structure.

Real-Life Example: Newspaper

Think of a webpage like a newspaper 📰

A newspaper has:

Headlines
Articles
Images
Sections

HTML works the same way. It organizes information so browsers and users can understand it easily.

What is HTML?

HTML (HyperText Markup Language) is the standard language used to create and structure webpages.

HTML tells the browser:

🧱 This is a heading
📄 This is a paragraph
🖼️ This is an image
🔗 This is a link

👉 HTML describes the structure of content, not logic or behavior.

HTML = skeleton of the website
CSS = design and beauty
JavaScript = actions and logic

Your First HTML Example

Plain text:

My dog is very playful

HTML version:

<p>My dog is very playful</p>

Now the browser understands: "This is a paragraph."

Anatomy of an HTML Element

<p>My cat is very grumpy</p>

An element has:

Opening tag → <p>
Content → My cat is very grumpy
Closing tag → </p>

⚠️ Important: Most HTML tags must be closed.

Nesting HTML Elements

HTML elements can go inside other elements.

<body>
  <div>
    <p>Hello world</p>
  </div>
</body>

This creates a clear structure, just like boxes inside boxes 📦

Anatomy of an HTML Document

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

Explanation:

Element	Purpose
`<!DOCTYPE html>`	HTML5 declaration
`<html>`	Root element of the page
`<head>`	Contains invisible information (title, SEO, charset)
`<title>`	Browser tab name
`<body>`	Contains all visible content

Starting HTML with VS Code

Step 1 — Download VS Code

👉 https://code.visualstudio.com/download

Step 2 — Create a project folder

Example: my-first-website

Step 3 — Create your first file

index.html

Step 4 — Generate structure

Type ! then press Enter

VS Code will auto-generate a full HTML template ✅

Common HTML Elements

Headings

<h1>Main heading</h1>
<h2>Subheading</h2>
<h3>Smaller heading</h3>
<h6>Smallest heading</h6>

Paragraph

<p>This is a paragraph of text.</p>

Link

<a href="https://www.google.com">Visit Google</a>

Image

<img src="cat.jpg" alt="Cat image" />

Div (Container)

<div>
  <p>Content here</p>
  <p>More content</p>
</div>

Lists

Unordered List (Bullets)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List (Numbers)

<ol>
  <li>Open VS Code</li>
  <li>Create HTML file</li>
  <li>Write your code</li>
</ol>

Forms and Inputs

<form>
  <label>Name:</label>
  <input type="text" placeholder="Enter your name" />
  <button>Submit</button>
</form>

Forms are used for:

Login pages
Search bars
Contact forms
Registration forms

Self-Closing Elements

<img src="image.jpg" alt="Description" />
<input type="text" placeholder="Enter text" />
<br />
<hr />

These elements do not wrap content and are self-contained.

Attributes and Class

<div class="card">
  <h2>London</h2>
  <p>Capital city of England.</p>
</div>

Attributes provide extra information to elements:

class for styling
id for unique identification
src for image source
href for link destination

Formatting Elements

Tag	Purpose	Example
`<b>`	Bold text	`<b>Bold</b>`
`<i>`	Italic text	`<i>Italic</i>`
`<u>`	Underline	`<u>Underlined</u>`
`<strong>`	Important text	`<strong>Important!</strong>`
`<small>`	Small text	`<small>Small text</small>`
`<sup>`	Superscript	`E = mc<sup>2</sup>`
`<sub>`	Subscript	`H<sub>2</sub>O`

Example:

<p>This is <strong>important</strong> and <i>italicized</i> text.</p>

Practice Task

Create a webpage with the following elements:

✅ A main heading with your name
✅ A paragraph about yourself
✅ An unordered list of your skills
✅ A link to your favorite website
✅ An image (you can use a placeholder)
✅ A simple contact form with name and email fields

Learning Resources

Resource	Description	Link
W3Schools HTML	Beginner-friendly tutorials	https://www.w3schools.com/html/
MDN Web Docs	Professional reference	https://developer.mozilla.org/en-US/docs/Web/HTML
freeCodeCamp	Interactive courses	https://www.freecodecamp.org/learn
VS Code	Code editor	https://code.visualstudio.com/download

Lesson Summary

You learned:

✔ What HTML is and why it's important
✔ How websites work behind the scenes
✔ Basic HTML structure and syntax
✔ Common HTML elements (headings, paragraphs, links, images)
✔ How to create lists and forms
✔ Proper element nesting and self-closing tags
✔ How to use attributes and classes
✔ Text formatting options
✔ How to set up your development environment

🚀 Next lesson: CSS — Designing beautiful websites

The content is now properly organized with:

Logical flow from basic concepts to practical implementation
Clear section hierarchy
Consistent formatting
Better visual separation between topics
All links and code examples properly formatted