Kapitel 1: Was ist HTML?

HTML steht für HyperText Markup Language und ist die Standard-Sprache zur Erstellung von Webseiten.

Mit HTML legst du die Struktur und den Inhalt einer Webseite fest. Du bestimmst zum Beispiel:

Welche Überschriften es gibt
Wo Absätze stehen
Wo Bilder und Links angezeigt werden

Ein Browser (wie Chrome, Firefox oder Safari) liest die HTML-Datei und zeigt sie für die Besucher der Webseite an.

Beispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Seite!</h1>
    <p>Dies ist ein Absatz.</p>
</body>
</html>

Extra: Probier mal!

Aufgabe:

Erstelle mit einem Texteditor (z. B. Notepad oder VS Code) deine erste HTML-Datei.
Schreibe eine Überschrift und einen Absatz.
Speichere die Datei als meineseite.html und öffne sie im Browser.

Kapitel 2: Der HTML-Editor und erste Datei

Um HTML-Dateien zu erstellen, brauchst du einen einfachen Texteditor. Es gibt viele Möglichkeiten:

Windows: Editor (Notepad), Notepad++
macOS: TextEdit (im Nur-Text-Modus)
Linux: Gedit, Nano, VS Code
Empfohlen: Visual Studio Code (VS Code) für komfortables Arbeiten

So erstellst du deine erste HTML-Datei:

Öffne den Texteditor.
Tippe den HTML-Code aus Kapitel 1 ein.
Speichere die Datei als meineseite.html ab.
Öffne die Datei im Browser (Doppelklick oder Rechtsklick → Öffnen mit → Browser).

Du solltest jetzt deine eigene Webseite mit einer Überschrift und einem Absatz sehen!

Extra: Probier mal!

Aufgabe:

Erstelle eine HTML-Datei mit deinem Namen als Titel der Seite. Als Inhalt kannst du das Beispiel aus Kapitel 1 nehmen.
Ändere den Text im Absatz auf einen kurzen Satz über dich.

Lösung ansehen

Kapitel 3: Grundstruktur eines HTML-Dokuments

Jede HTML-Datei folgt einer bestimmten Grundstruktur. Diese Struktur hilft dem Browser, die Webseite richtig darzustellen.

Die Grundstruktur:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Seitentitel</title>
</head>
<body>
    <h1>Überschrift</h1>
    <p>Hier steht der Text.</p>
</body>
</html>

Erklärung:

<!DOCTYPE html>: Sagt dem Browser, dass es sich um eine HTML5-Seite handelt.
<html>: Der gesamte Inhalt der Webseite.
<head>: Informationen über die Seite (z. B. der Titel).
<title>: Der Titel, der im Browser-Tab angezeigt wird.
<body>: Der sichtbare Inhalt der Seite (Überschriften, Absätze, Bilder usw.).

Extra: Probier mal!

Aufgabe:

Erstelle eine neue HTML-Datei mit vollständiger Grundstruktur.
Schreibe deinen eigenen Titel in das <title>-Element.
Füge eine Überschrift und einen Absatz im <body> hinzu.

Lösung ansehen

Kapitel 4: Überschriften und Absätze

Mit Überschriften und Absätzen gibst du deinem Webseiteninhalt eine sinnvolle Struktur.

Überschriften

HTML kennt sechs Stufen von Überschriften:

<h1>Größte Überschrift</h1>
<h2>Etwas kleinere Überschrift</h2>
...
<h6>Kleinste Überschrift</h6>

Die wichtigste Überschrift ist <h1>. Sie sollte nur einmal pro Seite vorkommen. Weitere Unterüberschriften folgen als <h2>, <h3> usw.

Absätze

Absätze werden mit <p> (paragraph) erstellt:

<p>Dies ist ein Absatz.</p>

Beispiel:

<body>
    <h1>Willkommen auf meiner Seite!</h1>
    <h2>Über mich</h2>
    <p>Ich lerne gerade HTML.</p>
</body>

Extra: Probier mal!

Aufgabe:

Erweitere deine HTML-Seite:
- Füge eine <h1>-Überschrift hinzu.
- Ergänze eine <h2>-Unterüberschrift.
- Schreibe einen Absatz mit einem kurzen Text über dein Hobby.

Lösung ansehen

Kapitel 5: Listen und Links

Mit Listen kannst du Aufzählungen und geordnete Reihenfolgen erstellen. Links machen deine Webseite interaktiv und ermöglichen es, zu anderen Seiten oder Dateien zu springen.

Listen

Es gibt zwei Hauptarten von Listen:

Ungeordnete Liste (bullet points):

<ul>
    <li>Äpfel</li>
    <li>Bananen</li>
    <li>Kirschen</li>
</ul>

Geordnete Liste (nummeriert):

<ol>
    <li>Erster Schritt</li>
    <li>Zweiter Schritt</li>
    <li>Dritter Schritt</li>
</ol>

Links

Mit <a> (anchor) kannst du einen Link erstellen:

<a href="https://www.example.com">Zur Beispielseite</a>

Das Attribut href gibt die Zieladresse des Links an.

Extra: Probier mal!

Aufgabe:

Füge zu deiner HTML-Seite eine Liste mit deinen drei Lieblingswebseiten hinzu.
Verwende sowohl eine ungeordnete Liste als auch einen Link in jedem Listenelement.

Lösung ansehen

Kapitel 6: Bilder und Alt-Texte

Mit Bildern kannst du deiner Webseite mehr Ausdruck verleihen. Dazu nutzt du das <img>-Element.

Ein Bild einfügen:

<img src="bild.jpg" alt="Beschreibung des Bildes">

src (source) gibt den Pfad zur Bilddatei an.
alt (alternative) enthält einen Text, der angezeigt wird, wenn das Bild nicht geladen werden kann oder von Screenreadern vorgelesen wird.

Beispiel:

<img src="katze.jpg" alt="Eine schwarze Katze sitzt auf einem Zaun">

Das alt-Attribut ist wichtig für die Barrierefreiheit und Suchmaschinenoptimierung (SEO).

Extra: Probier mal!

Aufgabe:

Füge deiner HTML-Seite ein Bild hinzu.
Vergib einen passenden alt-Text.
Wenn du kein eigenes Bild hast, verwende https://via.placeholder.com/300 als src (Platzhalterbild).

Lösung ansehen

Kapitel 7: Tabellen

Tabellen werden verwendet, um Daten in Zeilen und Spalten anzuordnen.

Grundstruktur einer Tabelle:

<table>
    <tr>
        <th>Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Max</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
    </tr>
</table>

Erklärung:

<table>: Start der Tabelle.
<tr> (table row): Eine Tabellenzeile.
<th> (table header): Tabellenüberschrift.
<td> (table data): Tabellenzelle mit Daten.

Extra: Probier mal!

Aufgabe:

Erstelle eine Tabelle mit den folgenden Spalten:
- Name
- Lieblingsfarbe
- Lieblingstier
Füge für mindestens zwei Personen Daten hinzu.

Lösung ansehen

Kapitel 8: Formulare (kurzer Überblick)

Mit Formularen können Besucher deiner Webseite Informationen eingeben. Formulare werden oft verwendet für Kontaktformulare, Anmeldungen oder Umfragen.

Grundstruktur eines Formulars:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email"><br>

    <input type="submit" value="Absenden">
</form>

Erklärung:

<form>: Start des Formulars.
<label>: Beschriftung für ein Eingabefeld.
<input>: Eingabefeld. Das type-Attribut bestimmt die Art (Text, E-Mail, Passwort usw.).
<submit>: Sendet das Formular ab.

Hinweis: In diesem Kurs verwenden wir Formulare nur zu Übungszwecken. Um Formulardaten zu verarbeiten, sind zusätzliche Techniken (wie PHP oder JavaScript) nötig.

Extra: Probier mal!

Aufgabe:

Erstelle ein einfaches Kontaktformular mit folgenden Feldern:
- Name
- E-Mail
- Ein „Absenden“-Button.

Lösung ansehen

Kapitel 9: Einfache Semantik und Strukturierung

HTML bietet spezielle Elemente, um deine Inhalte besser zu strukturieren und deren Bedeutung zu beschreiben. Das nennt man semantisches HTML.

Wichtige semantische Elemente:

<div>: Ein Block-Container ohne spezielle Bedeutung (wird für Gruppen von Elementen verwendet).
<span>: Ein Inline-Container ohne spezielle Bedeutung (z. B. um Wörter im Text hervorzuheben).
<strong>: Markiert einen wichtigen Textabschnitt (wird oft fett dargestellt).
<em>: Markiert einen betonten Textabschnitt (wird oft kursiv dargestellt).

Beispiel:

<div>
    <p>Das ist ein <strong>wichtiger</strong> Hinweis.</p>
    <p>Bitte <em>lesen</em> Sie ihn sorgfältig.</p>
</div>

Warum ist Semantik wichtig?

Semantische Elemente helfen:

Screenreadern, den Inhalt richtig vorzulesen.
Suchmaschinen, deine Webseite besser zu verstehen.
CSS und JavaScript, gezielt bestimmte Bereiche anzusprechen.

Extra: Probier mal!

Aufgabe:

Füge deiner HTML-Seite einen Bereich hinzu, in dem du einen Satz mit <strong> und einen mit <em> formatierst.
Verwende einen <div>-Container, um diese Sätze zusammenzufassen.

Lösung ansehen

Kapitel 10: Abschlusstest & Teilnahmebescheinigung

Herzlichen Glückwunsch! Du hast alle Kapitel abgeschlossen. Jetzt kannst du dein Wissen im Abschlusstest überprüfen und dir deine Teilnahmebescheinigung sichern.

Abschlusstest

Anhang: Cheatsheet HTML-Grundlagen

Grundstruktur

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Seitentitel</title>
</head>
<body>
    
</body>
</html>

Text und Überschriften

<h1> bis <h6>: Überschriften
<p>: Absatz
<strong>: Wichtiger Text
<em>: Betonter Text

Listen

<ul>: Ungeordnete Liste
<ol>: Geordnete Liste
<li>: Listenelement

Links und Bilder

<a href="URL">Linktext</a>
<img src="bild.jpg" alt="Beschreibung">

Tabellen

<table>: Tabelle
<tr>: Tabellenzeile
<th>: Tabellenüberschrift
<td>: Tabellenzelle

Formulare

<form>: Formular
<input type="text">: Texteingabe
<input type="submit">: Absenden-Button
<label>: Beschriftung

Strukturierung

<div>: Block-Container
<span>: Inline-Container

Barrierefreiheit

alt-Attribut bei Bildern nicht vergessen!

Weitere Kurse

Du möchtest noch mehr lernen? Hier findest du unsere weiteren Grundlagenkurse: