# Terrarium-Projekt Teil 1: Einführung in HTML ```mermaid journey title Deine HTML-Lernreise section Grundlagen HTML-Datei erstellen: 3: Student DOCTYPE hinzufügen: 4: Student Dokument strukturieren: 5: Student section Inhalt Metadaten hinzufügen: 4: Student Bilder einbinden: 5: Student Layout organisieren: 5: Student section Semantik Richtige Tags verwenden: 4: Student Barrierefreiheit verbessern: 5: Student Terrarium bauen: 5: Student ``` ![Einführung in HTML](../../../../translated_images/de/webdev101-html.4389c2067af68e98.webp) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) HTML, oder HyperText Markup Language, ist die Grundlage jeder Website, die du je besucht hast. Betrachte HTML als das Skelett, das Webseiten Struktur verleiht – es definiert, wo Inhalte platziert werden, wie sie organisiert sind und was jeder Abschnitt repräsentiert. Während CSS später dein HTML mit Farben und Layouts „einkleidet“ und JavaScript es mit Interaktivität zum Leben erweckt, liefert HTML die wesentliche Struktur, die alles andere möglich macht. In dieser Lektion erstellst du die HTML-Struktur für eine virtuelle Terrarien-Oberfläche. Dieses praktische Projekt vermittelt dir grundlegende HTML-Konzepte, während du etwas optisch ansprechendes baust. Du lernst, Inhalte mit semantischen Elementen zu organisieren, mit Bildern zu arbeiten und die Grundlage für eine interaktive Webanwendung zu schaffen. Am Ende dieser Lektion hast du eine funktionierende HTML-Seite, die Pflanzenbilder in organisierten Spalten anzeigt, bereit zum Stylen in der nächsten Lektion. Mach dir keine Sorgen, wenn es am Anfang einfach aussieht – genau so soll HTML sein, bevor CSS das visuelle Finish hinzufügt. ```mermaid mindmap root((HTML Grundlagen)) Structure DOCTYPE-Deklaration HTML-Element Kopfbereich Körperinhalt Elements Tags & Attribute Selbstschließende Tags Verschachtelte Elemente Block vs Inline Content Textelemente Bilder Container (div) Listen Semantics Bedeutungsvolle Tags Zugänglichkeit Bildschirmleser SEO-Vorteile Best Practices Richtiges Verschachteln Gültiges Markup Beschreibender Alt-Text Organisierte Struktur ``` ## Pre-Lecture Quiz [Pre-Lecture Quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Anschauen und Lernen**: Sieh dir diese hilfreiche Videoübersicht an > > [![HTML Grundlagen Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Einrichten deines Projekts Bevor wir in den HTML-Code eintauchen, richten wir einen passenden Arbeitsbereich für dein Terrarium-Projekt ein. Eine gut organisierte Verzeichnisstruktur von Anfang an zu erstellen, ist eine wichtige Gewohnheit, die dir während deiner gesamten Webentwicklungsreise zugutekommt. ### Aufgabe: Erstelle deine Projektstruktur Du legst einen dedizierten Ordner für dein Terrarium-Projekt an und fügst deine erste HTML-Datei hinzu. Hier sind zwei Ansätze, die du nutzen kannst: **Option 1: Mit Visual Studio Code** 1. Öffne Visual Studio Code 2. Klicke auf „Datei“ → „Ordner öffnen“ oder nutze `Strg+K, Strg+O` (Windows/Linux) bzw. `Cmd+K, Cmd+O` (Mac) 3. Erstelle einen neuen Ordner namens `terrarium` und wähle ihn aus 4. Klicke im Explorer-Bereich auf das Symbol „Neue Datei“ 5. Benenne deine Datei `index.html` ![VS Code Explorer zeigt Neuerstellung Datei](../../../../translated_images/de/vs-code-index.e2986cf919471eb9.webp) **Option 2: Mit Terminal-Befehlen** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Das bewirken diese Befehle:** - **Erstellt** einen neuen Ordner namens `terrarium` für dein Projekt - **Navigiert** in den terrarium-Ordner - **Erstellt** eine leere Datei `index.html` - **Öffnet** die Datei in Visual Studio Code zur Bearbeitung > 💡 **Pro Tipp**: Der Dateiname `index.html` hat in der Webentwicklung eine besondere Bedeutung. Wenn jemand eine Website besucht, suchen Browser automatisch nach `index.html` als Standardseite. Das bedeutet, eine URL wie `https://mysite.com/projects/` zeigt automatisch die `index.html` Datei im Ordner `projects`, ohne dass der Dateiname in der URL stehen muss. ## Verständnis der HTML-Dokumentstruktur Jedes HTML-Dokument folgt einer bestimmten Struktur, die Browser benötigen, um es richtig darzustellen. Stell dir diese Struktur wie einen formellen Brief vor – sie enthält erforderliche Elemente in einer bestimmten Reihenfolge, die dem Empfänger (hier dem Browser) helfen, den Inhalt korrekt zu verarbeiten. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Überschrift"] G --> I["<div> Behälter"] G --> J["<img> Bilder"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Fangen wir damit an, die essenzielle Grundlage hinzuzufügen, die jeder HTML-Dokument benötigt. ### Die DOCTYPE-Deklaration und das Wurzel-Element Die ersten beiden Zeilen jeder HTML-Datei dienen als „Einleitung“ des Dokuments für den Browser: ```html <!DOCTYPE html> <html></html> ``` **Was dieser Code bewirkt:** - **Deklariert** den Dokumenttyp als HTML5 mit `<!DOCTYPE html>` - **Erstellt** das Wurzel-Element `<html>`, das den gesamten Seiteninhalt enthält - **Legt** moderne Web-Standards für korrekte Browserdarstellung fest - **Sorgt** für eine konsistente Anzeige über unterschiedliche Browser und Geräte hinweg > 💡 **VS Code Tipp**: Fahre in VS Code mit der Maus über ein beliebiges HTML-Tag, um hilfreiche Informationen von MDN Web Docs zu sehen, inklusive Anwendungsbeispielen und Browserkompatibilität. > 📚 **Mehr erfahren**: Die DOCTYPE-Deklaration verhindert, dass Browser in den „Quirks Mode“ wechseln, der zur Unterstützung sehr alter Websites genutzt wurde. Moderne Webentwicklung nutzt die einfache Deklaration `<!DOCTYPE html>`, um eine [standards-konforme Darstellung](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) sicherzustellen. ### 🔄 **Pädagogischer Check-in** **Pause und Nachdenken**: Bevor du weitermachst, stelle sicher, dass du verstehst: - ✅ Warum jedes HTML-Dokument eine DOCTYPE-Deklaration benötigt - ✅ Was das `<html>` Wurzelelement enthält - ✅ Wie diese Struktur Browsern hilft, Seiten korrekt darzustellen **Schnell-Selbsttest**: Kannst du mit eigenen Worten erklären, was „standards-konforme Darstellung“ bedeutet? ## Hinzufügen essenzieller Metadaten zum Dokument Der `<head>` Bereich eines HTML-Dokuments enthält wichtige Informationen, die Browser und Suchmaschinen brauchen, die Besucher aber nicht direkt auf der Seite sehen. Denk an ihn als die „Hinter den Kulissen“-Information, die deiner Webseite hilft, richtig zu funktionieren und auf verschiedenen Geräten und Plattformen korrekt zu erscheinen. Diese Metadaten sagen dem Browser, wie er deine Seite anzeigen soll, welche Zeichencodierung zu verwenden ist und wie verschiedene Bildschirmgrößen behandelt werden – alles entscheidend für professionelle, zugängliche Webseiten. ### Aufgabe: Füge den Dokument-Kopf hinzu Füge diesen `<head>`-Abschnitt zwischen deine öffnenden und schließenden `<html>`-Tags ein: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Was jedes Element bewirkt:** - **Setzt** den Seitentitel, der in Browser-Tabs und Suchergebnissen erscheint - **Legt** die UTF-8-Zeichencodierung für korrekte Anzeige weltweit fest - **Sorgt** für Kompatibilität mit modernen Versionen des Internet Explorers - **Konfiguriert** ein responsives Design, indem die Viewport-Breite an das Gerät angepasst wird - **Steuert** den Anfangs-Zoom, damit Inhalte in natürlicher Größe angezeigt werden > 🤔 **Denk mal nach**: Was würde passieren, wenn du ein Viewport-Meta-Tag wie dieses setzt: ``? Das würde die Seite immer auf 600 Pixel Breite festlegen und das responsive Design zerstören! Erfahre mehr über [die richtige Viewport-Konfiguration](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Aufbau des Dokument-Inhaltsbereichs Das ``-Element enthält den gesamten sichtbaren Inhalt deiner Webseite – alles, was Nutzer sehen und womit sie interagieren. Während der `` Bereich dem Browser Anweisungen gab, enthält der `` Bereich den eigentlichen Inhalt: Text, Bilder, Schaltflächen und weitere Elemente, die deine Benutzeroberfläche bilden. Fügen wir die Body-Struktur hinzu und verstehen, wie HTML-Tags zusammenwirken, um sinnvollen Inhalt zu erzeugen. ### Verstehen der HTML-Tag-Struktur HTML verwendet gepaarte Tags, um Elemente zu definieren. Die meisten Tags besitzen einen Öffnungs-Tag, z. B. `

`, und einen Schließ-Tag, z. B. `

`, mit dem Inhalt dazwischen: `

Hallo Welt!

`. Dadurch wird ein Absatz-Element mit dem Text „Hallo Welt!“ erzeugt. ### Aufgabe: Füge das Body-Element hinzu Aktualisiere deine HTML-Datei, sodass das `` Element enthalten ist: ```html Welcome to my Virtual Terrarium ``` **Das bietet diese komplette Struktur:** - **Legt** die grundlegende HTML5-Dokumentbasis fest - **Beinhaltet** wichtige Metadaten für korrekte Browserdarstellung - **Erstellt** einen leeren Body, bereit für sichtbare Inhalte - **Folgt** modernen Webentwicklungsbest-practices Jetzt bist du bereit, die sichtbaren Elemente deines Terrariums hinzuzufügen. Wir verwenden `
` Elemente als Container, um verschiedene Inhaltsabschnitte zu organisieren, und `` Tags, um die Pflanzenbilder darzustellen. ### Arbeiten mit Bildern und Layout-Containern Bilder sind in HTML speziell, weil sie „selbstschließende“ Tags verwenden. Im Gegensatz zu Elementen wie `

`, die Inhalte umschließen, enthält das `` Tag alle nötigen Informationen innerhalb des Tags selbst über Attribute wie `src` für den Pfad zur Bilddatei und `alt` für die Barrierefreiheit. Bevor du Bilder ins HTML einfügst, musst du deine Projektdateien richtig organisieren, indem du einen Bilderordner anlegst und die Pflanzen-Grafiken hinzufügst. **Zuerst deine Bilder einrichten:** 1. Lege einen Ordner `images` im terrarium-Projektordner an 2. Lade die Pflanzenbilder aus dem [Lösungsordner](../../../../3-terrarium/solution/images) herunter (insgesamt 14 Bilder) 3. Kopiere alle Pflanzenbilder in deinen neuen `images`-Ordner ### Aufgabe: Erstelle das Pflanzen-Anzeige-Layout Füge jetzt die Pflanzenbilder, organisiert in zwei Spalten, zwischen deine ``-Tags ein: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Schritt für Schritt, was dieser Code macht:** - **Erstellt** einen Hauptseiten-Container mit `id="page"`, der alle Inhalte hält - **Legt** zwei Spalten-Container an: `left-container` und `right-container` - **Organisiert** 7 Pflanzen in der linken und 7 Pflanzen in der rechten Spalte - **Verpackt** jedes Pflanzenbild in einen `plant-holder`-Div für individuelle Positionierung - **Verwendet** konsistente Klassennamen für CSS-Styling in der nächsten Lektion - **Vergibt** einzigartige IDs für jedes Pflanzenbild zur späteren JavaScript-Interaktion - **Bezieht** sich korrekt auf die Dateien im images-Ordner > 🤔 **Überlege mal**: Alle Bilder haben derzeit denselben alt-Text „plant“. Das ist für Barrierefreiheit nicht ideal. Screenreader-Nutzer würden 14 Mal „plant“ hören, ohne zu wissen, welche Pflanze jedes Bild zeigt. Kannst du dir bessere, aussagekräftigere alt-Texte für jedes Bild vorstellen? > 📝 **HTML-Element-Typen**: `
` Elemente sind „Block-Level“ und nehmen volle Breite ein, während `` Elemente „Inline“ sind und nur so breit wie nötig. Was glaubst du, würde passieren, wenn du alle `
` Tags hier durch `` Tags ersetzen würdest? ### 🔄 **Pädagogischer Check-in** **Struktur-Verständnis**: Nimm dir einen Moment, um deine HTML-Struktur zu überprüfen: - ✅ Kannst du die Hauptcontainer deiner Layout-Struktur benennen? - ✅ Verstehst du, warum jedes Bild eine eindeutige ID hat? - ✅ Wie würdest du die Funktion der `plant-holder`-Divs beschreiben? **Visuelle Prüfung**: Öffne deine HTML-Datei im Browser. Du solltest folgendes sehen: - Eine einfache Liste von Pflanzenbildern - Bilder organisiert in zwei Spalten - Ein schlichtes, ungestyltes Layout **Merke**: Dieses einfache Aussehen ist genau das, was HTML vor dem Styling durch CSS ausmachen sollte! Mit diesem Markup erscheinen die Pflanzen auf dem Bildschirm, sehen aber noch nicht poliert aus – dafür ist CSS in der nächsten Lektion verantwortlich! Du hast jetzt eine solide HTML-Basis, die deine Inhalte gut organisiert und Zugänglichkeitsbest-Practices folgt. ## Semantisches HTML für Barrierefreiheit verwenden Semantisches HTML bedeutet, HTML-Elemente aufgrund ihrer Bedeutung und Funktion auszuwählen, nicht nur nach ihrem Aussehen. Wenn du semantische Auszeichnung verwendest, kommunizierst du die Struktur und Bedeutung deiner Inhalte an Browser, Suchmaschinen und unterstützende Technologien wie Screenreader. ```mermaid flowchart TD A[Inhalt hinzufügen?] --> B{Welche Art?} B -->|Hauptüberschrift| C["

"] B -->|Unterüberschrift| D["

,

, usw."] B -->|Absatz| E["

"] B -->|Liste| F["

    ,
      "] B -->|Navigation| G["