🛠️ Arbeitsblatt: Erste Schritte in HTML

Name: ____________________
Datum: ____________________

1. Start mit Visual Studio Code (VS Code)

So startest du:
1. Erstelle auf deinem Computer einen neuen Ordner (z.B. MeinProjekt).
2. Öffne VS Code → Datei → Ordner öffnen... → Wähle deinen Ordner aus.
3. Klicke auf das "Datei neu"-Icon und nenne die Datei exakt: index.html.
🚀 Aufgabe 1: Setup

Erstelle deinen Ordner und die Datei index.html. Öffne die Datei in VS Code.

2. Die Magie: Deine Seite ansehen 👁️

Wichtig: Code in VS Code ist nur "Text". Damit er zur Webseite wird, muss ein Browser (Chrome, Firefox, Edge) ihn lesen.

Es gibt zwei Wege, dein Ergebnis zu sehen:
  • Der einfache Weg: Öffne deinen Projekt-Ordner im Explorer. Mache einen Doppelklick auf die Datei index.html.
  • Der Profi-Weg (Live Server):
    1. Klicke links auf die quadratischen Symbole (Extensions).
    2. Suche nach Live Server und klicke auf Install.
    3. Klicke unten rechts auf den Knopf "Go Live".
    Vorteil: Die Seite aktualisiert sich bei jedem Speichern von selbst!
🚀 Aufgabe 2: Erster Blick

Öffne deine (noch leere) Datei im Browser. Du solltest eine weiße, leere Seite sehen.

3. Das Grundgerüst einer Webseite

Jede HTML-Seite braucht ein "Skelett". Tippe diesen Code genau so in deine Datei:

<!DOCTYPE html> <html> <head> <title>Meine erste Webseite</title> </head> <body> <!-- Hier kommen später deine Inhalte hin --> </body> </html>
🚀 Aufgabe 3: Das Skelett

Übernehme den Code. Ändere den Text in <title> zu deinem eigenen Namen. Prüfe im Browser-Tab, ob die Änderung sichtbar ist!

4. Inhalte hinzufügen (Tags)

Wichtige Bausteine:
• <h1>...</h1> → Die wichtigste Überschrift.
• <p>...</p> → Ein normaler Textabsatz.
Besonders wichtig: Listen verstehen 📝
Eine Liste ist wie eine Schachtel. Du brauchst zuerst den Rahmen (Container) und darin die einzelnen Punkte (Items).

Struktur:
<ul> <!-- Start der ungeordneten Liste --> <li>Punkt eins</li> <li>Punkt zwei</li> <li>Punkt drei</li> </ul> <!-- Ende der Liste -->
Merke: Ein <li> darf niemals alleine stehen, es muss immer innerhalb von <ul> oder <ol> sein!
🚀 Aufgabe 4: Vorstellung

Schreibe zwischen <body> und </body>:

  • Eine große Überschrift (h1) mit deinem Namen.
  • Einen kurzen Text (p), was dein Hobby ist.
  • Eine Liste (ul) mit deinen 3 Lieblingsessen (verwende für jedes Essen ein li).

5. Links und Bilder

Interaktive Elemente:
• Link: <a href="https://google.de">Klick mich</a>
• Bild: <img src="bildname.jpg" alt="Beschreibung">
(Wichtig: Das Bild muss im selben Ordner liegen wie deine index.html!)
🚀 Aufgabe 5: Verknüpfungen

Erstelle einen Link zu deiner Lieblingsseite und versuche, ein Bild in deine Webseite einzubauen.

🌟 Profi-Challenge (für Schnelle)

Kannst du folgende Dinge herausfinden und ausprobieren?