🌐 Willkommen!

Hast du dich schon mal gefragt, wie Webseiten wirklich funktionieren? In dieser AG lernst du, wie du deine eigenen Seiten bauen kannst.

                Das schauen wir uns heute an:
                Die Reise: Vom Klick im Browser zum Computer, wo die Seite wohnt.
Die Zutaten: Aus welchen drei Teilen besteht eigentlich jede Webseite?
Das Tool: Wo schreiben wir unseren Code?

            

1. Die Reise der Daten

Wenn du eine Adresse in den Browser tippst, starten Daten hin und her. Hier ist der Ablauf:

💻

Browser
(Client)

➡️

Request ("Gib mir die Seite!")

Response ("Hier ist der HTML-Code!")

⬅️

🖥️

Server
(Küche)

                💡 Wichtig zu wissen: Der Browser ist wie ein Übersetzer. Er versteht nur drei Sprachen: HTML, CSS und JavaScript. Damit eine Webseite korrekt dargestellt werden kann, muss der Server sie genau in diesen Formaten zurückschicken!
            

Der Browser (Request)

Stell dir den Browser wie einen Besteller in einem Restaurant vor. Er sagt an die Theke: "Ich hätte gerne die Seite google.de!" Das ist der Request.

Beispiele: Chrome, Firefox, Safari.

Der Server (Response)

Der Server ist wie die Küche. Er nimmt die Bestellung (Request) entgegen, sucht die Daten zusammen und schickt das Essen (die Webseite) als Response zurück.

2. Die 3 Bausteine

Eine Webseite ist wie ein Haus. Man braucht drei verschiedene Dinge, damit es gut aussieht und funktioniert:

HTML (Das Grundgerüst)
Bestimmt, was auf der Seite steht. Zum Beispiel: "Hier ist eine Überschrift".
```
<h1>Willkommen auf meiner Seite!</h1>
```
CSS (Die Farbe & Deko)
Bestimmt, wie es aussieht. Zum Beispiel: "Die Schrift soll rot sein".
```
h1 { color: red; }
```
JavaScript (Die Technik)
Sorgt für Action. Zum Beispiel: "Wenn ich auf den Knopf drücke, passiert etwas".
```
alert('Hallo! 👋');
```

2.1 Die Anatomie eines Dokuments

Bevor wir mit VS Code starten, schauen wir uns das Skelett jeder HTML-Datei an. Jedes Dokument hat denselben strengen Aufbau.

Das Baumhaus-Prinzip:

Stell dir HTML als ein Baumhaus vor. Du hast Äste (Tags), die wiederum kleinere Äste tragen. Wichtig: Alles, was du öffnest, musst du auch wieder schließen!

<!DOCTYPE html>  <-- Sagt dem Browser: "Ich bin eine HTML5-Seite!" -->
<html>             <-- Die Wurzel. Alles andere gehört hier rein. -->

  <head>
    <title>Meine Seite</title>  <-- Der Name im Browser-Tab (unsichtbar auf der Seite) -->
  </head>           <-- Hier stehen Infos für den Browser (Meta-Daten, CSS). -->

  <body>
    <!-- Hier kommt alles hin, was der Besucher SIEHT -->
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erster Text.</p>
  </body>           <-- Der sichtbare Körper der Seite. -->

</html>

                Merke:
                <body> = Hier steht der Inhalt für die Menschen.
<head> = Hier stehen Anweisungen für den Computer.

            

3. Unser Werkzeug: VS Code

Wir nutzen keinen normalen Texteditor (wie Word oder Notizblock), sondern eine "Super-Schreibmaschine" für Programmierer.

🧠 Schlaue Hilfe

Er schlägt dir Wörter vor, während du tippst (Autovervollständigung).

🎨 Bunte Farben

Der Code wird farbig markiert (Syntax Highlighting). Das hilft beim Fehlerfinden.

⚡ Live-Vorschau

Wir können unsere Seite sofort im Browser sehen, während wir schreiben.

3.1 Erste Schritte in VS Code

Jetzt richten wir unseren Arbeitsplatz ein. Folge diesen Schritten genau:

A. Projektordner anlegen

Gehe auf deinen Desktop (oder in Dokumente). Erstelle einen neuen Ordner und nenne ihn meine-webseite.

Warum? Damit alle Deine Dateien an einem Ort liegen.

B. VS Code starten & Ordner öffnen

Starte das Programm Visual Studio Code.
Klicke oben im Menü auf Datei → Ordner öffnen...
Suche deinen neu erstellten Ordner meine-webseite und wähle ihn aus.
Klicke auf "Ordner auswählen".

Die linke Seitenleiste in VS Code zeigt jetzt deinen (leeren) Ordner an.

C. Erste Datei erstellen

Bewege die Maus über den Ordnernamen in der Seitenleiste.
Klicke auf das Symbol Neue Datei (ein Blatt Papier mit Plus).
Tippe den Namen ein: HelloWorld.html
Drücke Enter.

D. Das HTML-Gerüst (Magie!)

In der neuen Datei:

Tippe ein einzelnes Ausrufezeichen ein: !
Drücke die Taste Enter (oder Tab).

Wow! VS Code schreibt automatisch das komplette Grundgerüst für dich!

E. Speichern & Live Server Setup

Drücke Strg + S (Windows) oder Cmd + S (Mac), um die Datei zu speichern.
Live Server installieren (nur einmalig): Klicke links auf die Quadrate (Extensions). Suche nach Live Server und klicke auf Installieren.
Anzeigen: Klicke mit der rechten Maustaste irgendwo in deinen Code-Text. Wähle Open with Live Server.

Dein Browser öffnet sich automatisch und zeigt deine (noch leere) Seite an. Wenn du jetzt in VS Code etwas änderst und speicherst, aktualisiert sich der Browser von alleine!

🚀 Jetzt bist du dran!

Nun kennst du das Werkzeug und den Aufbau.

Schritt 1
Erstelle deinen Ordner und öffne ihn in VS Code.
Schritt 2
Erstelle die HelloWorld.html und nutze das !-Gerüst.
Schritt 3
Schreibe deinen ersten Text zwischen den <body>-Tags und starte den Live Server.