MyKeyZ Tutorial · Basics

HTML 101

The language of the internet: understand it from the ground up and build your very first website. No prior knowledge needed.

Beginner9 chapters and a bonusabout 3 to 4 hoursProject: MyFirst Site

Completely new to this? Then start with Your first website, the short introduction in eight chapters. HTML 101 goes deeper afterwards.

Chapter 01

What is HTML?

The language of the internet — and why you need it.

Assembly planA website is like a house

Every part has its job. In HTML 101 you build the walls.

HTMLstructure, the walls

CSScolour and decoration

JavaScriptwiring, functions

Domainaddress and house number

Serverthe plot the house stands on

HTML 101: build the house
Bonus: address and going online

HTML stands for HyperText Markup Language – the language of the internet! Without HTML there is no website – it is the absolute foundation. Every page you have ever seen – Google, YouTube, all of them – is based on HTML!

Imagine a website as a house:

HTML = the framework, the walls
CSS = paint, decoration
JS = wiring, functions
Domain = street and house number (e.g. mykeyz.app)
Server = the plot of land the house stands on

In HTML 101 you learn:
→ Building the house (HTML)
→ Basic decoration (CSS intro)

In the bonus chapter:
→ Giving the house an address
→ Putting the house online

Chapter 02

Tools you need

The beauty of HTML — you need hardly anything!

Assembly planYour workshop

An editor to write, a browser to look, one folder for everything.

EditorNotepad, Notepad++ or VS Code

myfirstsite/with images, css, js

Browsershows the page

F12developer tools

With the Live Server extension in VS Code, the browser reloads by itself after every change.

Editor
Browser
folder with subfolders

The minimum:

✅ Computer (Windows, Mac or Linux)
✅ Text editor
✅ Browser

That's it! No expensive program, no subscription, no complicated setup!

Text editor — which one?

Option 1 — Notepad

Already on Windows
Free ✅
Very simple
No syntax highlighting ⚠️
Good for getting started!

Option 2 — Notepad++

Free ✅
notepad-plus-plus.org
Syntax highlighting ✅
Better than Notepad!

Option 3 — VS Code

Free ✅
code.visualstudio.com
Syntax highlighting ✅
Autocomplete ✅
Live Preview extension ✅
The standard worldwide!

VS Code — Live Server extension:

→ Right-click index.html → "Open with Live Server"
→ The browser opens automatically
→ Changes in the code? The browser updates instantly! ✅
→ No more pressing F5 by hand!

Installing Live Server:
1. Open VS Code
2. Extensions icon (Ctrl+Shift+X)
3. Search for "Live Server" (by Ritwick Dey)
4. Click "Install" → done! ✅

Browser — which one?

Recommended for development:

Chrome / Edge / Brave / Vivaldi / Firefox → all with good developer tools ✅

Tip: Brave is a great choice! Chrome power + privacy!

Not recommended: Tor, DuckDuckGo → limited dev tools ⚠️

Pressing F12 opens the developer tools — see errors, inspect HTML, test CSS live, simulate the phone view. Your best tool!

Folder structure

myfirstsite/
├── index.html → home page
├── about.html → about us
├── content.html → content
├── contact.html → contact
├── images/ → all images
├── css/ → all CSS files
└── js/ → all JS files

Homework

Download and install VS Code
Install the Live Server extension
Use Brave or Chrome for development
Create the folder myfirstsite
Create the subfolders images, css, js
Open VS Code → open the folder

CheckMate tip: Use CheckMate to tick off your homework! → Open CheckMate

Chapter 03

The basic structure

Every HTML page needs a basic structure — like a house without furniture, but with walls, a roof and foundations.

Assembly planThe basic structure

First the announcement, then the invisible head, then the stage.

<!DOCTYPE html>announcement: this is HTML

<html lang="en">wraps everything

inside

<head>invisible, for the browser

<body>the stage, what you see

Comments  are notes for you. The browser does not show them.

DOCTYPE html head body
meta charset
meta viewport

The magic basic structure

HTML · Starter code for EVERY new page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My page</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>

<!DOCTYPE html> — Not an HTML tag but an announcement: "Hey, this is HTML5!" Always right at the top. Always. No exceptions.

<html lang="de"> — The root element. lang="de" tells the browser: the language is German. For English you write lang="en".

<head> — The invisible head. Visitors do not see what is in here — but the browser needs it.

<body> — The stage. Everything the visitor sees goes in here.

 — Notes for you — the browser ignores them completely.

Why no HTML version number?
There used to be HTML 4, XHTML 1.0, XHTML 1.1 — each version had a long, ugly DOCTYPE nobody knew by heart. HTML5 simplified this: one short DOCTYPE, for ever. Remember: always <!DOCTYPE html> — never think about it again!

Now you build!

index.html · Task 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyFirst Site – Home</title>
</head>
<body>
<h1>Welcome to my first website!</h1>
<p>I built this page myself. 💪</p>
</body>
</html>

Folder structure after chapter 3:
MyFirst-Site/
├── index.html ✅
├── about.html ✅
├── content.html ✅
├── contact.html ✅
├── images/ (still empty)
├── css/ (still empty)
└── js/ (still empty)

CheckMate tip: Chapter 3 ticked off? → Open CheckMate

Chapter 04

Text, links and images

The heart of every website — after this chapter your MyFirst Site comes to life!

Assembly planText, link, picture

Three building blocks bring your page to life.

Texth1 to h6, p, strong, em

Linka href: internal or external

Pictureimg src and alt

Only one <h1> per page.

h1 h2 p strong em br
a href
img src alt

Text

Headings <h1> to <h6> — h1 is the largest, h6 the smallest. Important rule: only one <h1> per page!

Paragraphs <p> — every paragraph gets its own <p> tag.

Bold + italic — <strong> for bold, <em> for italic.

Line break <br> — a self-closing tag, no </br> needed!

HTML · Text examples

<h1>This is me – biggest heading</h1>
<h2>My hobbies</h2>
<p>HTML is <strong>important</strong> for every web developer.</p>
<p>CSS makes the page <em>beautiful</em>.</p>
<p>
  Jane Doe<br>
  1 Example Street<br>
  9000 St. Gallen
</p>

Links

<a> stands for anchor. href = hypertext reference — where should the link point?

HTML · Types of link

<!-- External link -->
<a href="https://google.com">To Google</a>
<!-- Internal link -->
<a href="about.html">About me</a>
<!-- Open in a new tab -->
<a href="https://google.com" target="_blank">Google (new tab)</a>

Tip: Always use target="_blank" for external links — that way the visitor does not leave your page!

Images

HTML · Images

<img src="images/photo.jpg" alt="Description" width="300">

Tip: Only give the width — the height adjusts automatically. That way the image is not distorted!

Homework: Add an external link to your favourite website on index.html — with target="_blank"!

Chapter 05

Lists and tables

Bring structure to your content — perfect for lists, steps and comparisons.

Assembly planWhich list, which table?

Order matters: ol. Order does not matter: ul. Comparisons: table.

Your itemsDoes the order matter?

Answer

Yes: olnumbered

No: ulbullets

Tabletable

Rowtr

Cellsth header, td content

ul ol li
table tr th td

<ul> = unordered list — a list with bullet points, no order

<ol> = ordered list — a list with numbers, in order

<li> = list item — a single item in the list

When <ul>, when <ol>? Order matters → <ol>. Order does not matter → <ul>.

HTML · Lists

<!-- Unordered -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Ordered -->
<ol>
<li>Install VS Code</li>
<li>Install Live Server</li>
<li>Create your first HTML file</li>
</ol>

Tables

HTML · Table

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Max</td>
<td>25</td>
<td>Zurich</td>
</tr>
</table>

Homework: Add all the remaining chapters (6–9 + bonus) to the table in content.html with the status ⏳ Pending — and update it after every chapter!

Chapter 06

Navbar

The navigation of your website — it appears on every page and connects everything.

Assembly planA navbar connects everything

The same bar on every page. <nav> says: this is the navigation.

Navbar<nav>

on every page

index.html

about.html

content.html

contact.html

If the navbar is missing on a page, you cannot get away from there.

nav ul li a
four pages

Navbar = navigation bar — the strip of links you see at the top of almost every website. In HTML we build it with the <nav> tag.

Semantic means: the code describes what something is, not just how it looks.

Navbar variations

HTML · Variation 1 — simple with separators

<nav>
<a href="index.html">Home</a> |
  <a href="about.html">About me</a> |
  <a href="content.html">Content</a> |
  <a href="contact.html">Contact</a>
</nav>
<hr>

HTML · Variation 2 — as a list (semantically clean)

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="content.html">Content</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

Do I have to copy this into every file? Yes — in plain HTML there is no other way. Later you will learn tricks: with JavaScript you can load the navbar automatically, and with PHP even include it on the server. For now: copy once, learn a lot!

Homework: On every page, mark the active link with <strong> — so on about.html, "About me" is bold.

Chapter 07

Form

A contact form is on almost every website — after this chapter you will have one!

Assembly planWhat a form can and cannot do

The form collects the input. It can only send it with a server or a service.

Forminput, textarea, select

Submitbutton type="submit"

Server or servicecomes later, not in this chapter

Emailonly then does something arrive

label for and id must have the same name.

form label input
textarea select button
required

⚠️ Important: An HTML form on its own does not send any emails yet — that needs a server (PHP!) or a service later on. In this chapter we build the structure first!

Form elements:

<input type="text"> — single-line text field (self-closing!)
<input type="email"> — email field with validation
<input type="checkbox"> — checkbox
<textarea> — multi-line text field (has </textarea>!)
<select> — drop-down menu
<button type="submit"> — submit button
required — required field: submitting it empty shows an error message

<label for="name"> — the label: for="name" and id="name" must match!

HTML · contact.html complete

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyFirst Site – Contact</title>
</head>
<body>
<nav>
<a href="index.html">Home</a> |
      <a href="about.html">About me</a> |
      <a href="content.html">Content</a> |
      <a href="contact.html"><strong>Contact</strong></a>
</nav>
<hr>
<h1>Contact</h1>
<form>
<label for="name">Your name:</label><br>
<input type="text" id="name" name="name" placeholder="Jane Doe" required>
<br><br>
<label for="email">Your email:</label><br>
<input type="email" id="email" name="email" placeholder="you@example.com" required>
<br><br>
<label for="message">Your message:</label><br>
<textarea id="message" name="message" rows="5"></textarea>
<br><br>
<button type="submit">Send 📬</button>
</form>
</body>
</html>

Homework: Add an <input type="checkbox"> with the text "I have read the privacy policy" — and make it required!

Chapter 08

Putting MyFirst Site together

All the pages are built — now we polish everything and complete MyFirst Site!

Assembly planPutting it together: review

Check every page the same way before calling it done.

Same navbaron all pages

Linksall reach their target

Footeron all 4 pages

Donereview or QA

footer hr
first inline CSS

What does "putting it together" mean?

→ Are all pages consistent? (same navbar, same structure)
→ Are all links correct?
→ Is content missing anywhere?
→ Does everything look tidy?

In web development this is an important step — it is called review or QA (quality assurance)!

Adding a footer

HTML · Footer (add it to all 4 pages)

<footer>
<hr>
<p>&copy; 2025 MyFirst Site – Built with ❤️ during HTML 101</p>
</footer>

A first taste: inline CSS

HTML · Background colour (inline CSS)

<body style="background-color: black; color: white;">

⚠️ This works — but it is not the clean way! You will learn why in CSS 101. For a quick test it is handy!

Bonus

Domain + hosting

MyFirst Site runs locally — now we put it online for the whole world!

Assembly planOnline with a service

Hosting means: your files sit on a server that runs around the clock.

Whole foldernot single files

Drag inNetlify, “Deploy manually”

Netlify serveronline 24/7

HTTPSencrypted, not locked

Your URLeveryone can open it

Your own domain like yourname.ch: the address of the house, costs every year.

Upload only the folder, not the index.html separately as well.

Netlify account
your folder

Remember? The house analogy from chapter 1!
Domain = address | Hosting = plot of land | Now it becomes real!

Domain = your address on the internet (e.g. myname.ch or myfirstsite.com)

A .com domain costs about CHF 10–15 a year!

Hosting = your files sit on a server that is online 24/7.

Free hosting — perfect for getting started: Netlify! You drag your folder in — done. No configuration, no command line!

Putting it online with Netlify

Step by step

netlify.com → create a free account
Log in → "Add new site" → "Deploy manually"
Drag the whole MyFirst-Site folder into the window — not just a single file!
Wait a moment… Done!
Netlify shows your URL — click on it! (do not type it in yourself)

⚠️ Common mistake: "I uploaded the folder AND index.html separately!" That is the problem! Netlify only needs the folder — no extra individual files. Delete the site, start again, just drag the folder in!

SSL / HTTPS — Netlify automatically gives you an SSL certificate. The padlock means: the connection is encrypted. Visitors do not need to log in! = secure, not = locked!

Updating the page: Make changes locally → in Netlify go to "Deploys" → drag the folder in again → done!

HTML 101 — completely finished!

This is not an exercise any more — this is a real website!

Building the HTML basic structure
Adding text, links and images
Building lists and tables
Navbar and footer on all pages
Contact form with required fields
Testing pages professionally
Putting the page online with a real URL

What comes next?
CSS 101 — now MyFirst Site gets really beautiful! Colours, fonts, layout, animations...

→ To CSS 101

HTML 101

What is HTML?

Tools you need

Text editor — which one?

Browser — which one?

Folder structure

The basic structure

The magic basic structure

Now you build!

Text, links and images

Text

Links

Images

Lists and tables

Tables

Navbar

Navbar variations

Form

Putting MyFirst Site together

Adding a footer

A first taste: inline CSS

Testing

Domain + hosting

Putting it online with Netlify