HTML 101 — Tutorial — MyKeyZ Creative Center

Kapitel 01

Was ist HTML?

Die Sprache des Internets — und warum du sie brauchst.

BauplanEine Webseite ist wie ein Haus

Jeder Teil hat seine Aufgabe. In HTML 101 baust du die Wände.

HTMLGrundgerüst, die Wände

CSSFarbe und Dekoration

JavaScriptElektrik, Funktionen

DomainAdresse und Hausnummer

ServerGrundstück, auf dem das Haus steht

HTML 101: das Haus bauen
Bonus: Adresse und online stellen

HTML steht für HyperText Markup Language – die Sprache des Internets! Ohne HTML gibt es keine Webseite – es ist die absolute Basis. Jede Seite die du je gesehen hast – Google, YouTube, alle – basieren auf HTML!

Stell dir eine Webseite wie ein Haus vor:

HTML = Grundgerüst, die Wände
CSS = Farbe, Dekoration
JS = Elektrik, Funktionen
Domain = Adresse + Hausnummer (z.B. mykeyz.app)
Server = Grundstück worauf das Haus steht

In HTML 101 lernst du:
→ Das Haus bauen (HTML)
→ Grundlegende Dekoration (CSS Intro)

Im Bonus Kapitel:
→ Dem Haus eine Adresse geben
→ Das Haus online stellen

Kapitel 02

Tools die du brauchst

Das Schöne an HTML — du brauchst fast nichts!

BauplanDeine Werkstatt

Editor zum Schreiben, Browser zum Ansehen, ein Ordner für alles.

EditorNotepad, Notepad++ oder VS Code

myfirstsite/mit images, css, js

Browserzeigt die Seite

F12Entwickler-Tools

Mit der Erweiterung Live Server in VS Code lädt der Browser bei jeder Änderung selbst neu.

Editor
Browser
Ordner mit Unterordnern

Das Minimum:

✅ Computer (Windows, Mac oder Linux)
✅ Text Editor
✅ Browser

Das war's! Kein teures Programm, kein Abo, kein kompliziertes Setup!

Text Editor — welcher?

Option 1 — Notepad

Bereits auf Windows drauf
Kostenlos ✅
Sehr einfach
Kein Syntax Highlighting ⚠️
Gut zum Starten!

Option 2 — Notepad++

Kostenlos ✅
notepad-plus-plus.org
Syntax Highlighting ✅
Besser als Notepad!

Option 3 — VS Code

Kostenlos ✅
code.visualstudio.com
Syntax Highlighting ✅
Autocomplete ✅
Live Preview Extension ✅
Standard weltweit!

VS Code — Live Server Extension:

→ Rechtsklick auf index.html → "Open with Live Server"
→ Browser öffnet sich automatisch
→ Änderungen im Code? Browser aktualisiert sich sofort! ✅
→ Kein manuelles F5 drücken mehr!

Live Server installieren:
1. VS Code öffnen
2. Extensions Icon (Ctrl+Shift+X)
3. "Live Server" suchen (von Ritwick Dey)
4. "Install" klicken → Fertig! ✅

Browser — welcher?

Empfohlen zum Entwickeln:

Chrome / Edge / Brave / Vivaldi / Firefox → alle mit guten Entwickler-Tools ✅

Tipp: Brave ist eine super Wahl! Chrome-Power + Datenschutz!

Nicht empfohlen: Tor, DuckDuckGo → eingeschränkte Dev-Tools ⚠️

F12 drücken öffnet die Entwickler-Tools — Fehler sehen, HTML inspizieren, CSS live testen, Handy-Ansicht simulieren. Dein bestes Werkzeug!

Ordner Struktur

myfirstsite/
├── index.html → Startseite
├── about.html → Über uns
├── content.html → Inhalt
├── contact.html → Kontakt
├── images/ → alle Bilder
├── css/ → alle CSS Dateien
└── js/ → alle JS Dateien

Hausaufgabe

VS Code herunterladen + installieren
Live Server Extension installieren
Brave oder Chrome zum Entwickeln nutzen
Ordner myfirstsite erstellen
Unterordner images, css, js erstellen
VS Code öffnen → Ordner öffnen

CheckMate-Tipp: Nutze CheckMate um deine Hausaufgaben abzuhaken! → CheckMate öffnen

Kapitel 03

Das Grundgerüst

Jede HTML-Seite braucht ein Grundgerüst — wie ein Haus ohne Möbel, aber mit Wänden, Dach und Fundament.

BauplanDas Grundgerüst

Oben die Ansage, dann der unsichtbare Kopf, dann die Bühne.

<!DOCTYPE html>Ansage: das ist HTML

<html lang="de">umschliesst alles

darin

<head>unsichtbar, für den Browser

<body>die Bühne, das sieht man

Kommentare  sind Notizen für dich. Der Browser zeigt sie nicht.

DOCTYPE html head body
meta charset
meta viewport

Das magische Grundgerüst

HTML · Startcode für JEDE neue Seite

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Seite</title>
  </head>
  <body>

    <!-- Hier kommt dein Inhalt rein -->

  </body>
</html>

<!DOCTYPE html> — Kein HTML-Tag, sondern eine Ansage: "Hey, das hier ist HTML5!" Immer ganz zuoberst. Immer. Keine Ausnahme.

<html lang="de"> — Das Wurzel-Element. lang="de" sagt dem Browser: Sprache ist Deutsch.

<head> — Der unsichtbare Kopf. Was hier steht, sieht der Besucher nicht — aber der Browser braucht es.

<body> — Die Bühne. Alles was der Besucher sieht kommt hier rein.

 — Notizen für dich — der Browser ignoriert sie komplett.

Warum keine HTML Versionsnummer?
Früher gab es HTML 4, XHTML 1.0, XHTML 1.1 — jede Version hatte einen langen, hässlichen DOCTYPE den niemand auswendig kannte. HTML5 hat das vereinfacht: ein kurzer DOCTYPE, für immer. Merksatz: Immer <!DOCTYPE html> — nie wieder drüber nachdenken!

Jetzt baust du!

index.html · Aufgabe 1

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyFirst Site – Home</title>
  </head>
  <body>

    <h1>Willkommen auf meiner ersten Webseite!</h1>
    <p>Diese Seite habe ich selbst gebaut. 💪</p>

  </body>
</html>

Ordnerstruktur nach Kapitel 3:
MyFirst-Site/
├── index.html ✅
├── about.html ✅
├── content.html ✅
├── contact.html ✅
├── images/ (noch leer)
├── css/ (noch leer)
└── js/ (noch leer)

CheckMate-Tipp: Kapitel 3 abgehakt? → CheckMate öffnen

Kapitel 04

Texte, Links und Bilder

Das Herzstück jeder Webseite — nach diesem Kapitel lebt deine MyFirst Site!

BauplanText, Link, Bild

Drei Bausteine machen deine Seite lebendig.

Texth1 bis h6, p, strong, em

Linka href: intern oder extern

Bildimg src und alt

Pro Seite nur ein <h1>.

h1 h2 p strong em br
a href
img src alt

Texte

Überschriften <h1> bis <h6> — h1 ist die grösste, h6 die kleinste. Wichtige Regel: Pro Seite nur ein <h1>!

Absätze <p> — jeder Absatz bekommt seinen eigenen <p> Tag.

Fett + Kursiv — <strong> für fett, <em> für kursiv.

Zeilenumbruch <br> — selbstschliessendes Tag, kein </br> nötig!

HTML · Texte Beispiele

<h1>Das bin ich – grösste Überschrift</h1>
<h2>Meine Hobbys</h2>
<p>HTML ist <strong>wichtig</strong> für jeden Webentwickler.</p>
<p>CSS macht die Seite <em>schön</em>.</p>
<p>
  Max Mustermann<br>
  Musterstrasse 1<br>
  9000 St. Gallen
</p>

Links

<a> steht für Anchor (Anker). href = Hypertext Reference — wohin soll der Link zeigen?

HTML · Link-Typen

<!-- Externer Link -->
<a href="https://google.com">Zu Google</a>

<!-- Interner Link -->
<a href="about.html">Über mich</a>

<!-- In neuem Tab öffnen -->
<a href="https://google.com" target="_blank">Google (neuer Tab)</a>

Tipp: target="_blank" immer bei externen Links — der Besucher verlässt so deine Seite nicht!

Bilder

HTML · Bilder

<img src="images/foto.jpg" alt="Beschreibung" width="300">

Tipp: Nur width angeben — die Höhe passt sich automatisch an. So wird das Bild nicht verzerrt!

Hausaufgabe: Füge auf der index.html einen externen Link zu deiner Lieblingswebseite ein — mit target="_blank"!

Kapitel 05

Listen und Tabellen

Struktur in deine Inhalte bringen — perfekt für Aufzählungen, Schritte und Vergleiche.

BauplanWelche Liste, welche Tabelle?

Reihenfolge wichtig: ol. Reihenfolge egal: ul. Vergleiche: table.

Deine PunkteIst die Reihenfolge wichtig?

Antwort

Ja: olmit Nummern

Nein: ulmit Punkten

Tabelletable

Zeiletr

Felderth Kopf, td Inhalt

ul ol li
table tr th td

<ul> = Unordered List — Liste mit Punkten, ohne Reihenfolge

<ol> = Ordered List — Liste mit Nummern, mit Reihenfolge

<li> = List Item — ein einzelner Listenpunkt

Wann <ul> wann <ol>? Reihenfolge wichtig → <ol>. Reihenfolge egal → <ul>.

HTML · Listen

<!-- Ungeordnet -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Geordnet -->
<ol>
  <li>VS Code installieren</li>
  <li>Live Server installieren</li>
  <li>Erste HTML Datei erstellen</li>
</ol>

Tabellen

HTML · Tabelle

<table border="1">
  <tr>
    <th>Name</th>
    <th>Alter</th>
    <th>Stadt</th>
  </tr>
  <tr>
    <td>Max</td>
    <td>25</td>
    <td>Zürich</td>
  </tr>
</table>

Hausaufgabe: Ergänze die Tabelle in content.html um alle restlichen Kapitel (6–9 + Bonus) mit Status ⏳ Ausstehend — und aktualisiere sie nach jedem Kapitel!

Kapitel 06

Navbar

Die Navigation deiner Webseite — erscheint auf jeder Seite und verbindet alles miteinander.

BauplanEine Navbar verbindet alles

Dieselbe Leiste auf jeder Seite. <nav> sagt: Das ist die Navigation.

Navbar<nav>

auf jeder Seite

index.html

about.html

content.html

contact.html

Fehlt die Navbar auf einer Seite, kommt man dort nicht mehr weg.

nav ul li a
vier Seiten

Navbar = Navigation Bar — die Leiste mit Links die du auf fast jeder Webseite oben siehst. In HTML bauen wir sie mit dem <nav> Tag.

Semantisch bedeutet: der Code beschreibt was etwas ist, nicht nur wie es aussieht.

Navbar Variationen

HTML · Variation 1 — Einfach mit Trennstrich

<nav>
  <a href="index.html">Home</a> |
  <a href="about.html">Über mich</a> |
  <a href="content.html">Inhalte</a> |
  <a href="contact.html">Kontakt</a>
</nav>
<hr>

HTML · Variation 2 — Als Liste (semantisch sauber)

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">Über mich</a></li>
    <li><a href="content.html">Inhalte</a></li>
    <li><a href="contact.html">Kontakt</a></li>
  </ul>
</nav>

Muss ich das in jede Datei kopieren? Ja — in reinem HTML gibt es keinen anderen Weg. Später lernst du Tricks: Mit JavaScript kannst du die Navbar automatisch laden, mit PHP sogar serverseitig einbinden. Für jetzt: einmal kopieren, viel lernen!

Hausaufgabe: Markiere auf jeder Seite den aktiven Link mit <strong> — also auf about.html ist "Über mich" fett.

Kapitel 07

Formular

Ein Kontaktformular ist auf fast jeder Webseite — nach diesem Kapitel hast du eines!

BauplanWas ein Formular kann und was nicht

Das Formular sammelt die Eingaben. Verschicken kann es erst mit einem Server oder Dienst.

Formularinput, textarea, select

Absendenbutton type="submit"

Server oder Dienstkommt später, noch nicht in diesem Kapitel

E-Mailerst dann kommt etwas an

label for und id müssen gleich heissen.

form label input
textarea select button
required

⚠️ Wichtig: Ein HTML-Formular alleine schickt noch keine E-Mails — dafür braucht es später einen Server (PHP!) oder einen Dienst. In diesem Kapitel bauen wir erstmal die Struktur!

Formular-Elemente:

<input type="text"> — Einzeiliges Textfeld (selbstschliessend!)
<input type="email"> — E-Mail Feld mit Validierung
<input type="checkbox"> — Checkbox
<textarea> — Mehrzeiliges Textfeld (hat </textarea>!)
<select> — Dropdown-Menü
<button type="submit"> — Absenden-Button
required — Pflichtfeld: leeres Absenden gibt Fehlermeldung

<label for="name"> — Beschriftung: for="name" und id="name" müssen gleich sein!

HTML · contact.html komplett

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyFirst Site – Kontakt</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a> |
      <a href="about.html">Über mich</a> |
      <a href="content.html">Inhalte</a> |
      <a href="contact.html"><strong>Kontakt</strong></a>
    </nav>
    <hr>
    <h1>Kontakt</h1>
    <form>
      <label for="name">Dein Name:</label><br>
      <input type="text" id="name" name="name" placeholder="Max Mustermann" required>
      <br><br>
      <label for="email">Deine E-Mail:</label><br>
      <input type="email" id="email" name="email" placeholder="deine@email.com" required>
      <br><br>
      <label for="nachricht">Deine Nachricht:</label><br>
      <textarea id="nachricht" name="nachricht" rows="5"></textarea>
      <br><br>
      <button type="submit">Absenden 📬</button>
    </form>
  </body>
</html>

Hausaufgabe: Füge ein <input type="checkbox"> hinzu mit dem Text "Ich habe die Datenschutzerklärung gelesen" — und mach es required!

Kapitel 08

MyFirst Site zusammenbauen

Alle Seiten sind gebaut — jetzt polieren wir alles und machen MyFirst Site komplett!

BauplanZusammenbauen: Review

Vor dem Fertig-Stempel jede Seite gleich prüfen.

Gleiche Navbarauf allen Seiten

Linksführen alle ans Ziel

Footerauf allen 4 Seiten

FertigReview oder QA

footer hr
erstes Inline-CSS

Was bedeutet "zusammenbauen"?

→ Sind alle Seiten konsistent? (gleiche Navbar, gleiche Struktur)
→ Sind alle Links korrekt?
→ Fehlt irgendwo Inhalt?
→ Sieht alles sauber aus?

Das ist in der Webentwicklung ein wichtiger Schritt — man nennt es Review oder QA (Quality Assurance)!

Footer hinzufügen

HTML · Footer (auf allen 4 Seiten einfügen)

<footer>
  <hr>
  <p>&copy; 2025 MyFirst Site – Mit ❤️ gebaut während HTML 101</p>
</footer>

Erster Vorgeschmack: Inline CSS

HTML · Hintergrundfarbe (Inline CSS)

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

⚠️ Das funktioniert — aber es ist nicht der saubere Weg! In CSS 101 lernst du warum. Für einen schnellen Test ist es praktisch!

Kapitel 09

Testen

Bevor eine Seite online geht, prüft der Profi alles systematisch.

BauplanTesten wie ein Profi

Bevor die Seite online geht, prüfst du sie Schritt für Schritt.

DoppelklickSeite öffnen

F12Handy-Ansicht, Untersuchen, Konsole

W3C Validatorkein roter Fehler

Entwickler-Tools
validator.w3.org

Seite öffnen ohne Live Server: Einfach Doppelklick auf die HTML-Datei! Für HTML 101 reicht Doppelklick völlig!

DevTools öffnen (F12):

1. Responsive Test — Handy-Icon klicken → Handy-Ansicht simulieren
2. HTML inspizieren — Rechtsklick → "Untersuchen"
3. Fehler-Konsole — Tab "Console" → rote Fehler = irgendwas stimmt nicht!

W3C Validator: validator.w3.org — Code reinkopieren → Fehler werden erklärt. Kein roter Fehler = sauberes HTML!

Bonus

Domain + Hosting

MyFirst Site läuft lokal — jetzt stellen wir sie online für die ganze Welt!

BauplanOnline mit einem Dienst

Hosting heisst: Deine Dateien liegen auf einem Server, der rund um die Uhr läuft.

Ganzer Ordnernicht einzelne Dateien

HineinziehenNetlify, «Deploy manually»

Server von Netlify24/7 online

HTTPSverschlüsselt, nicht gesperrt

Deine URLalle können sie öffnen

Eigene Domain wie meinname.ch: die Adresse zum Haus, kostet jedes Jahr.

Nur den Ordner hochladen, nicht zusätzlich die index.html einzeln.

Konto bei Netlify
dein Ordner

Du erinnerst dich? Die Haus-Analogie aus Kapitel 1!
Domain = Adresse | Hosting = Grundstück | Jetzt wird sie real!

Domain = deine Adresse im Internet (z.B. meinname.ch oder myfirstsite.com)

Eine .com Domain kostet ca. 10–15 CHF pro Jahr!

Hosting = deine Dateien liegen auf einem Server der 24/7 online ist.

Gratis Hosting — perfekt zum Starten: Netlify! Du ziehst deinen Ordner rein — fertig. Keine Konfiguration, keine Kommandozeile!

Mit Netlify online stellen

Schritt für Schritt

netlify.com → kostenloses Konto erstellen
Einloggen → "Add new site" → "Deploy manually"
Den ganzen MyFirst-Site Ordner ins Fenster ziehen — nicht nur eine Datei!
Kurz warten… Fertig!
Netlify zeigt deine URL — darauf klicken! (nicht selbst eintippen)

⚠️ Häufiger Fehler: "Ich habe den Ordner UND die index.html separat hochgeladen!" Das ist das Problem! Netlify braucht nur den Ordner — keine einzelnen Dateien extra. Seite löschen, neu starten, nur den Ordner reinziehen!

SSL / HTTPS — Netlify gibt dir automatisch ein SSL Zertifikat. Das Schloss bedeutet: Verbindung verschlüsselt. Kein Login nötig für Besucher! = sicher, nicht = gesperrt!

Seite aktualisieren: Änderungen lokal machen → In Netlify "Deploys" → Ordner wieder reinziehen → Fertig!

HTML 101 — Komplett abgeschlossen!

Das ist keine Übung mehr — das ist eine echte Webseite!

HTML Grundgerüst aufbauen
Texte, Links und Bilder einfügen
Listen und Tabellen bauen
Navbar und Footer auf allen Seiten
Kontaktformular mit Pflichtfeldern
Seiten professionell testen
Seite online stellen mit echter URL

Was kommt als nächstes?
CSS 101 — jetzt wird MyFirst Site so richtig schön! Farben, Schriften, Layout, Animationen...

→ Zu CSS 101