What you will learn
You will understand what HTML is and create your first working page - even on paper or a phone.
Websites are just documents with labels
HTML is not programming. It is labelling. Like labelling boxes in a shop: "bread here, sugar there."
Example: <p>This is bread</p> means: this is a paragraph about bread.
Rule: one tag opens, one tag closes. Content lives in the middle:
<tagname>content</tagname>
Your first page skeleton
Every HTML page has the same bones:
<!DOCTYPE html>
<html>
<head>
<title>My Klagon Shop</title>
</head>
<body>
<h1>Hello Klagon!</h1>
<p>My first web page.</p>
</body>
</html>
<!DOCTYPE html>= speak modern HTML<head>= hidden info, title shown in browser tab<body>= what people see
You can type this in phone Notepad, or write on paper to learn structure.
How to see it
- Phone: Install Acode or use online: html-online.com (needs data once)
- No data? Draw boxes: label head vs body on paper - counts for Day 1.
- Laptop: Save as
index.html> double-click to open in Chrome.
Exercise: sharpen your page
- Copy the skeleton above.
- Change title to your name + business e.g. "Ama - Bakery"
- Change h1 to "Welcome to [Your Shop]"
- Change paragraph to one sentence about Klagon.
- Show a friend and explain head vs body.
Why it works (theory in 3 lines): Browser reads top-down, head first for settings then body to draw. DOCTYPE tells modern mode, else quirks break layout. h1+p gives Google + screen reader the spine to announce.
Summary
- HTML = labels for content, not magic code
- Every page needs html, head, body
- h1 + p is enough for Day 1
- You can start on paper/phone
[+10 XP]