Modul 1: Mein erstes HTML-Dokument

lock
Bevorstehend

Lerne die Grundstruktur eines HTML-Dokuments kennen und erstelle deine erste Webseite

Ziele dieses Moduls
  • Sie koennen ein valides HTML5-Dokument mit korrekter Grundstruktur erstellen
    Verstehen

HTML ist die Grundlage jeder Webseite. In diesem Modul lernst du die wichtigsten HTML-Elemente kennen und erstellst dein erstes eigenes Dokument.

Was ist HTML?

HTML steht für HyperText Markup Language und ist die Sprache, mit der Webseiten strukturiert werden. HTML besteht aus sogenannten Tags, die den Browser anweisen, wie Inhalte dargestellt werden sollen.

Jedes HTML-Dokument hat eine feste Grundstruktur, die immer gleich aussieht.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite!</h1>
    <p>Das ist mein erster Absatz.</p>
</body>
</html>

Die wichtigsten Elemente erklärt:

  • <!DOCTYPE html> - Teilt dem Browser mit, dass es sich um HTML5 handelt
  • <html> - Das Wurzelelement, alle anderen Elemente stehen darin
  • <head> - Enthält Meta-Informationen (Titel, Zeichensatz, etc.)
  • <body> - Hier steht der sichtbare Inhalt der Webseite
  • <h1> - Die Hauptüberschrift (h1 bis h6 möglich)
  • <p> - Ein Textabsatz

Challenge

Übung: Deine digitale Visitenkarte

Erstelle eine HTML-Seite, die wie eine Visitenkarte funktioniert. Sie soll enthalten:

  • Eine Hauptüberschrift mit deinem Namen
  • Einen Absatz mit einer kurzen Beschreibung über dich (2-3 Sätze)
  • Einen Link zu einer Website deiner Wahl (z.B. deine Lieblingsband, ein Hobby)

Tipp: Für Links verwendest du das <a>-Tag: <a href="https://example.com">Linktext</a>

Note

Hinweis: Du kannst dein HTML-Dokument mit jedem Texteditor erstellen (z.B. VS Code, Notepad++) und als .html-Datei speichern. Öffne die Datei dann im Browser, um deine Seite zu sehen.