Lern-Fabrik – Ordnerstrukturen & Datei-Organisation

HTML-Datei in Visual Studio Code anlegen

🖥️ Schritt 1: Visual Studio Code öffnen

Starte Visual Studio Code (VS Code) und öffne deinen Arbeitsordner, in dem du die HTML-Datei erstellen möchtest.

🔎 Schritt 2: Neue Datei erstellen

Klicke auf Datei > Neu oder benutze den Shortcut Strg + N um eine neue Datei zu öffnen.

✍️ Schritt 3: Das HTML-Grundgerüst mit `!` erstellen

In Visual Studio Code kannst du schnell das HTML-Grundgerüst erstellen, indem du einfach `!` eintippst und dann die Enter-Taste drückst. VS Code wird automatisch das Grundgerüst einer HTML-Seite einfügen.

! [Enter]

So sieht dein Grundgerüst aus:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein erstes HTML-Dokument</title>
  </head>
  <body>
    <h1>Willkommen in der Welt von HTML!</h1>
    <p>Dies ist meine erste HTML-Seite.</p>
  </body>
</html>

💾 Schritt 4: Speichern

Speichere deine Datei, indem du auf Datei > Speichern unter klickst oder Strg + S drückst. Gib der Datei einen Namen wie index.html und wähle den richtigen Ordner aus.

🌐 Schritt 5: Datei im Browser öffnen

Öffne die Datei im Browser, um deine erste HTML-Seite zu sehen! Klicke mit der rechten Maustaste auf die gespeicherte Datei und wähle Im Browser öffnen.

🎯 Übung für dich

Öffne VS Code und erstelle eine neue Datei.
Verwende den Trick mit `!` und Enter, um das HTML-Grundgerüst zu generieren.
Speichere die Datei als index.html.
Erstelle einen einfachen Text in der <body> Sektion, wie z. B. <h1>Mein erster Versuch</h1>.
Öffne die Datei im Browser und überprüfe, ob alles richtig angezeigt wird.

📂 HTML-Datei mit externen Ressourcen und CSS gestalten

In dieser Übung erstellen wir eine vollständige HTML-Seite, binden CSS-Dateien extern ein und verwenden die erlernten Grundlagen.

Erstelle eine HTML-Datei mit grundlegender Struktur (Header, Navigation, Section, Footer).
Erstelle eine separate style.css Datei und füge grundlegende Stile hinzu (z. B. für Header, Navigation, Section, Footer).
Verlinke das Stylesheet korrekt in deiner HTML-Datei.
Speichere die Dateien und überprüfe sie im Browser.

Ordnerstruktur:

/Projekt
    index.html
    /images
        logo.png (optional)
    style.css

Mit diesem Wissen kannst du jetzt deine eigene Webseite gestalten und sie weiter ausbauen.

💡 Übung 1: HTML-Struktur erweitern

Erweitere deine HTML-Datei, indem du weitere grundlegende HTML-Elemente hinzufügst.

Füge einen <header> Tag mit einer Überschrift hinzu.
Erstelle einen <nav> Tag für eine einfache Navigation (z. B. <a href="#">Home</a>).
Füge einen <footer> Tag mit deinem Namen und einem Copyright-Vermerk hinzu.
Speichere die Datei und öffne sie erneut im Browser, um die Änderungen zu überprüfen.

📸 Übung 2: Bilder einfügen

In dieser Übung lernst du, wie du Bilder in deine HTML-Seite einfügst.

Finde ein Bild (z. B. aus dem Internet oder einer lokalen Datei) und speichere es im selben Ordner wie deine HTML-Datei.
Verwende den <img> Tag, um das Bild einzufügen, z. B. <img src="meinbild.jpg" alt="Beispielbild">.
Füge dem Bild auch ein alt-Attribut hinzu, um eine Beschreibung des Bildes bereitzustellen.
Speichere die Datei und überprüfe, ob das Bild korrekt angezeigt wird.

📝 Übung 3: Listen erstellen

In dieser Übung fügst du Listen in deine HTML-Datei ein.

Erstelle eine ungeordnete Liste (<ul>) mit mindestens drei Listenelementen (<li>).
Erstelle eine geordnete Liste (<ol>) mit mindestens fünf Listenelementen.
Speichere die Datei und überprüfe, ob die Listen im Browser korrekt angezeigt werden.

🔗 Übung 4: Hyperlinks hinzufügen

In dieser Übung lernst du, wie du Links zu deiner HTML-Seite hinzufügst.

Erstelle einen Link, der auf eine externe Webseite verweist, z. B. <a href="https://www.example.com">Besuche Example.com</a>.
Erstelle einen internen Link, der zu einem anderen Abschnitt auf der gleichen Seite führt, z. B. <a href="#footer">Zum Footer</a>.
Teste beide Links im Browser, um sicherzustellen, dass sie korrekt funktionieren.

📊 Übung 5: Tabellen erstellen

In dieser Übung lernst du, wie man einfache Tabellen in HTML erstellt.

Erstelle eine einfache Tabelle mit <table>, <tr> (Tabellenzeilen), <th> (Tabellenkopf) und <td> (Tabellenzellen).
Füge mindestens drei Spalten und drei Zeilen hinzu, z. B. eine Tabelle mit Namen, Alter und Beruf.
Verwende die border-Eigenschaft, um der Tabelle einen sichtbaren Rand zu geben.
Speichere und überprüfe die Tabelle im Browser.

📑 Übung 6: Formulare erstellen

In dieser Übung lernst du, wie man ein einfaches HTML-Formular erstellt, das Benutzereingaben entgegennimmt.

Erstelle ein Formular mit dem Tag <form>.
Füge ein Textfeld für den Namen, eine E-Mail-Adresse und eine Nachricht hinzu (<input> und <textarea>).
Füge einen <button> hinzu, um das Formular abzusenden.
Testen: Da das Formular derzeit keine Aktion hat, speichere und überprüfe, ob es korrekt angezeigt wird.

💬 Übung 7: Kommentare in HTML

In dieser Übung lernst du, wie du Kommentare in deinem HTML-Code hinzufügst.

Füge einen Kommentar hinzu, der beschreibt, was dein HTML-Code tut, z. B. .
Verwende Kommentare, um Abschnitte des Codes zu kennzeichnen, z. B. für den <header> oder den <footer> Bereich.
Speichere die Datei und überprüfe, dass die Kommentare im Browser nicht angezeigt werden.

🎨 Übung 8: CSS in HTML integrieren

In dieser Übung fügst du einfache CSS-Stile in dein HTML-Dokument ein.

Erstelle einen <style> Block im <head> Bereich.
Füge einen Stil für den <h1> Tag hinzu, um die Schriftfarbe und -größe zu ändern, z. B. h1 { color: blue; font-size: 36px; }.
Speichere die Datei und überprüfe, ob der Stil im Browser angewendet wird.

🎨 Übung 9: External Stylesheets verwenden

In dieser Übung lernst du, wie du ein externes Stylesheet erstellst und es mit deiner HTML-Datei verbindest.

Erstelle eine neue Datei namens style.css.
Füge einige grundlegende CSS-Regeln in diese Datei ein (z. B. für h1 und p).
Verlinke das Stylesheet in der <head> Sektion deiner HTML-Datei mit dem Tag <link rel="stylesheet" href="style.css">.
Speichere beide Dateien und teste sie im Browser.