Frei lesbar – ohne Anmeldung

HTML-Grundlagen

Du baust deine erste eigene Webseite. 5 kleine Aufgaben — Tags, Überschrift, Absatz, Link, Bild. Kein Vorwissen nötig.

Dauer: 25 Min.Niveau: EinsteigerAufgaben: 5

Deine erste HTML-Seite

HTML-Grundlagen: deine erste Webseite

HTML (HyperText Markup Language) ist die Sprache, in der Webseiten aufgebaut sind. HTML beschreibt mit Tags (Markierungen in spitzen Klammern), was ein Element ist — eine Überschrift, ein Absatz, ein Link, ein Bild.

Wichtige Begriffe

Tag: eine Markierung wie <p> (Anfang) und </p> (Ende). Dazwischen steht der Inhalt.
Element: ein vollständiges Tag-Paar mit Inhalt, z. B. <h1>Titel</h1>.
Attribut: eine Zusatzinfo in einem Tag, z. B. href bei einem Link oder src bei einem Bild.

Arbeite in der Datei /home/student/website/index.html. Lege den Ordner an: mkdir -p /home/student/website. Bearbeite die Datei mit nano /home/student/website/index.html.

Dein Ziel

Du baust eine vollständige kleine Webseite: Grundgerüst, Überschrift, Absatz, Link und Bild.

Aufgaben

1. Doctype + html-Tag
Begriff: Grundgerüst. Jede HTML-Seite beginnt mit <!doctype html> (sagt dem Browser „das ist HTML5") und umschließt alles mit <html>...</html>.

Lege den Ordner an und schreibe das Grundgerüst (nano /home/student/website/index.html):
```
<!doctype html>
<html>
  <head><title>Meine Seite</title></head>
  <body>
  </body>
</html>
```
Kontrolle: index.html enthält <!doctype html> und ein <html>...</html>-Element.
2. Eine Überschrift
Begriff: Überschrift <h1>. Die wichtigste Überschrift einer Seite ist <h1>. Füge sie innerhalb von <body> ein.
```
<h1>Willkommen auf meiner Seite</h1>
```
Kontrolle: index.html enthält ein <h1>-Element mit Text.
3. Ein Absatz
Begriff: Absatz <p>. Fließtext steht in einem Absatz-Tag <p>. Füge einen Absatz mit mindestens einem kurzen Satz ein.
```
<p>Das ist meine erste eigene Webseite, die ich selbst gebaut habe.</p>
```
Kontrolle: index.html enthält ein <p>-Element mit mindestens 10 Zeichen Text.
4. Ein Link
Begriff: Link <a> mit href. Ein Link führt zu einer anderen Seite. Das Tag ist <a>, das Ziel steht im Attribut href.
```
<a href="https://techlogia.de">Zu Techlogia</a>
```
Die URL muss mit http:// oder https:// beginnen.

Kontrolle: index.html enthält ein <a>-Element mit href="https://...".
5. Ein Bild
Begriff: Bild <img> mit src und alt. Ein Bild bindest du mit <img> ein: src ist die Bildquelle, alt ist ein Beschreibungstext (wichtig für Barrierefreiheit und falls das Bild nicht lädt).
```
<img src="https://picsum.photos/200" alt="Ein zufälliges Beispielbild">
```
Kontrolle: index.html enthält ein <img>-Element mit src und alt.

Jetzt selbst üben

Lesen ist gut – selbst machen ist besser. Starte diesen Kurs an einer echten Linux-VM, direkt im Browser. Ein kostenloses Konto genügt.

Kostenlos starten

Deine erste HTML-Seite

HTML-Grundlagen: deine erste Webseite

Wichtige Begriffe

Dein Ziel

Aufgaben

1. Doctype + html-Tag

2. Eine Überschrift

3. Ein Absatz

4. Ein Link

5. Ein Bild

Verwandte Kurse

Jetzt selbst üben