diff --git a/web/02/labor/02_loesungen/.DS_Store b/web/02/labor/02_loesungen/.DS_Store new file mode 100644 index 0000000..aa96508 Binary files /dev/null and b/web/02/labor/02_loesungen/.DS_Store differ diff --git a/web/02/labor/02_loesungen/uebung1.html b/web/02/labor/02_loesungen/uebung1.html new file mode 100644 index 0000000..0f24b9d --- /dev/null +++ b/web/02/labor/02_loesungen/uebung1.html @@ -0,0 +1,24 @@ + + + + + + + Ungeordnete Liste + + + +

Webentwicklung lernen

+ + + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung2.html b/web/02/labor/02_loesungen/uebung2.html new file mode 100644 index 0000000..5832053 --- /dev/null +++ b/web/02/labor/02_loesungen/uebung2.html @@ -0,0 +1,21 @@ + + + + + + + Geordnete Liste + + + +

Muffins backen

+
    +
  1. Backofen auf 180 °C vorheizen
    2. +
  2. Teig vorbereiten (Mehl, Zucker, Eier etc. verrühren)
    3. +
  3. Teig in Förmchen füllen
    4. +
  4. Muffins 20 Minuten backen
    5. +
  5. Abkühlen lassen und servieren
    6. +
+ + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung3.html b/web/02/labor/02_loesungen/uebung3.html new file mode 100644 index 0000000..ffe58cd --- /dev/null +++ b/web/02/labor/02_loesungen/uebung3.html @@ -0,0 +1,49 @@ + + + + + + Stundenplan - Klasse 8a + + + +

Aktueller Stundenplan

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Stundenplan - 8. Schuljahr
ZeitMontagDienstagMittwochDonnerstagFreitag
08–10 UhrMatheEnglischPhysikChemieSport
10–12 UhrDeutschBiologieMusikMatheKunst
Stand: Juli 2025
+ + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung4.html b/web/02/labor/02_loesungen/uebung4.html new file mode 100644 index 0000000..cc0e608 --- /dev/null +++ b/web/02/labor/02_loesungen/uebung4.html @@ -0,0 +1,47 @@ + + + + + + Web-News + + + + +
+

WebWeekly – Aktuelle Nachrichten aus der Webentwicklung

+ +
+ +
+
+

Neuigkeiten aus der Webwelt

+ +
+

HTML

+

Das W3C hat erste Entwürfe für HTML6 veröffentlicht...

+
+ +
+

CSS

+

Immer mehr Entwickler setzen auf moderne CSS-Techniken...

+
+
+ +
+

Tipp der Woche

+

Nutze <section> und <article>, um Inhalte logisch zu gliedern!

+
+
+ + + + + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung5/bilder/chickentikkamasala.jpg b/web/02/labor/02_loesungen/uebung5/bilder/chickentikkamasala.jpg new file mode 100644 index 0000000..ae7b26f Binary files /dev/null and b/web/02/labor/02_loesungen/uebung5/bilder/chickentikkamasala.jpg differ diff --git a/web/02/labor/02_loesungen/uebung5/bilder/falafeln.jpg b/web/02/labor/02_loesungen/uebung5/bilder/falafeln.jpg new file mode 100644 index 0000000..b379ab6 Binary files /dev/null and b/web/02/labor/02_loesungen/uebung5/bilder/falafeln.jpg differ diff --git a/web/02/labor/02_loesungen/uebung5/bilder/flammkuchen.jpg b/web/02/labor/02_loesungen/uebung5/bilder/flammkuchen.jpg new file mode 100644 index 0000000..78e69c4 Binary files /dev/null and b/web/02/labor/02_loesungen/uebung5/bilder/flammkuchen.jpg differ diff --git a/web/02/labor/02_loesungen/uebung5/bilder/kaiserschmarrn.jpg b/web/02/labor/02_loesungen/uebung5/bilder/kaiserschmarrn.jpg new file mode 100644 index 0000000..b2bad37 Binary files /dev/null and b/web/02/labor/02_loesungen/uebung5/bilder/kaiserschmarrn.jpg differ diff --git a/web/02/labor/02_loesungen/uebung5/bilder/spaghettibolognese.jpg b/web/02/labor/02_loesungen/uebung5/bilder/spaghettibolognese.jpg new file mode 100644 index 0000000..a03cfce Binary files /dev/null and b/web/02/labor/02_loesungen/uebung5/bilder/spaghettibolognese.jpg differ diff --git a/web/02/labor/02_loesungen/uebung5/index.html b/web/02/labor/02_loesungen/uebung5/index.html new file mode 100644 index 0000000..2d20bd5 --- /dev/null +++ b/web/02/labor/02_loesungen/uebung5/index.html @@ -0,0 +1,81 @@ + + + + + + + + Meine Lieblingsrezepte + + + +
+ +
+
+

Lieblingsrezepte

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Top 5 Rezepte
TitelBildAufwandPortionen
Spaghetti BologneseSpaghetti Bolognese45 Min4
FalafelnFalafeln30 Min2
KaiserschmarrnKaiserschmarrn20 Min4
FlammkuchenFlammkuchen25 Min2
Chicken Tikka MasalaChicken Tikka Masala60 Min6
Die besten Rezepte der Welt!
+
+
+ + + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung5/rezepte/rezept1.html b/web/02/labor/02_loesungen/uebung5/rezepte/rezept1.html new file mode 100644 index 0000000..12d53dd --- /dev/null +++ b/web/02/labor/02_loesungen/uebung5/rezepte/rezept1.html @@ -0,0 +1,31 @@ + + + + + + + Spaghetti Bolognese + + + +

Spaghetti Bolognese

+

Zutaten:

+ +

Zubereitung:

+
    +
  1. Spaghetti in Salzwasser al dente kochen.
    2. +
  2. Zwiebeln und Knoblauch in Öl anbraten.
    3. +
  3. Hackfleisch hinzufügen und krümelig braten.
    4. +
  4. Tomaten und Gewürze dazugeben und köcheln lassen.
    5. +
  5. Spaghetti mit der Sauce vermengen und servieren.
    6. +
+ + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung5/rezepte/rezept2.html b/web/02/labor/02_loesungen/uebung5/rezepte/rezept2.html new file mode 100644 index 0000000..98ba826 --- /dev/null +++ b/web/02/labor/02_loesungen/uebung5/rezepte/rezept2.html @@ -0,0 +1,33 @@ + + + + + + + Falafeln + + + +

Falafeln

+

Zutaten:

+ + +

Zubereitung:

+
    +
  1. Eingeweichte Kichererbsen mit Zwiebel, Knoblauch und Kräutern pürieren.
    2. +
  2. Gewürze, Mehl und Backpulver untermischen.
    3. +
  3. Aus der Masse kleine Bällchen formen.
    4. +
  4. Falafeln in heißem Öl goldbraun frittieren.
    5. +
  5. Mit Dip oder im Fladenbrot servieren.
    6. +
+ + + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung5/rezepte/rezept3.html b/web/02/labor/02_loesungen/uebung5/rezepte/rezept3.html new file mode 100644 index 0000000..ac53fce --- /dev/null +++ b/web/02/labor/02_loesungen/uebung5/rezepte/rezept3.html @@ -0,0 +1,30 @@ + + + + + + + Kaiserschmarrn + + + +

Kaiserschmarrn

+

Zutaten:

+ +

Zubereitung:

+
    +
  1. Eier trennen und Eiweiß steif schlagen.
    2. +
  2. Eigelb mit Milch, Mehl und Zucker verrühren.
    3. +
  3. Eischnee unterheben.
    4. +
  4. Teig in Butter in der Pfanne goldbraun backen.
    5. +
  5. Mit zwei Gabeln zerreißen, mit Puderzucker bestreuen und servieren.
    6. +
+ + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung5/rezepte/rezept4.html b/web/02/labor/02_loesungen/uebung5/rezepte/rezept4.html new file mode 100644 index 0000000..770f0f7 --- /dev/null +++ b/web/02/labor/02_loesungen/uebung5/rezepte/rezept4.html @@ -0,0 +1,30 @@ + + + + + + + Flammkuchen + + + +

Flammkuchen

+

Zutaten:

+ +

Zubereitung:

+
    +
  1. Mehl, Wasser, Öl und Salz zu einem glatten Teig verkneten.
    2. +
  2. Teig dünn ausrollen und auf ein Backblech legen.
    3. +
  3. Mit Crème fraîche bestreichen.
    4. +
  4. Speckwürfel und fein geschnittene Zwiebeln darauf verteilen.
    5. +
  5. Im vorgeheizten Ofen bei 220 °C ca. 12–15 Minuten backen.
    6. +
+ + + \ No newline at end of file diff --git a/web/02/labor/02_loesungen/uebung5/rezepte/rezept5.html b/web/02/labor/02_loesungen/uebung5/rezepte/rezept5.html new file mode 100644 index 0000000..1716e30 --- /dev/null +++ b/web/02/labor/02_loesungen/uebung5/rezepte/rezept5.html @@ -0,0 +1,32 @@ + + + + + + + Chicken Tikka Masala + + + +

Chicken Tikka Masala

+

Zutaten:

+ + +

Zubereitung:

+
    +
  1. Hähnchenstücke in Joghurt und Gewürzen marinieren.
    2. +
  2. Fleisch in der Pfanne oder im Ofen garen.
    3. +
  3. Zwiebeln und Gewürze in Öl anbraten.
    4. +
  4. Passierte Tomaten und Sahne oder Joghurt hinzufügen.
    5. +
  5. Hähnchen in die Sauce geben und kurz köcheln lassen.
    6. +
+ + + \ No newline at end of file diff --git a/web/03/labor/03_aufgaben.md b/web/03/labor/03_aufgaben.md new file mode 100644 index 0000000..697646d --- /dev/null +++ b/web/03/labor/03_aufgaben.md @@ -0,0 +1,116 @@ +# Übungsblatt 03 + +*Keine Abgabe erforderlich!* + +## 1. URL-Übung: Bestandteile + +**Aufgabenstellung:** +Untersuchen Sie folgende Webadresse (_nicht echt_): +`https://lernportal.schule-xyz.de/materialien/arbeitsblatt?id=2025#download` + +#### Fragen +- Was ist das Protokoll? +- Was ist die Subdomain? +- Was ist der Domainname? +- Was ist die Top-Level-Domain? +- Gibt es einen Pfad? Wenn ja: Wie heißt er? +- Sind Query-Parameter oder Sprungmarken enthalten? Wenn ja: Welche? + +## 2. DNS-Übung: Abfrage mit nslookup + +**Aufgabenstellung:** Ermitteln Sie die IP-Adresse mit `nslookup` hinter folgenden 2 Domänennamen: + +1. `www.wikipedia.de` +2. `www.thalia.de` +3. `www.tagesschau.de` +4. `www.zalando.de` + +#### Arbeitsschritte + +Führen Sie die DNS-Abfrage durch und notieren Sie die gefundene IP-Adresse des Domänennamens. + +## 3. HTTP-Übung – Ressourcen abrufen und Query-Parameter + +#### Vorbereitung: +- Öffnen Sie ein Terminal (macOS/Linux) oder PowerShell/CMD (Windows). +- Prüfen Sie, ob `curl` installiert ist: + `curl --version` + +**Aufgabenstellung A:** +1. Rufen Sie die Beispiel-Webseite `https://www.example.com` mit `curl`auf und untersuchen Sie die Antwort. + +#### Arbeitsschritte + +1. Führen Sie `curl https://www.example.com` in einem Terminal aus. +2. Server-Anwort: Was fällt Ihnen auf bzw. was wird zurückgeliefert? +3. Nur die Header anzeigen mit `curl -I https://www.example.com`. +4. Kopieren Sie die Server-Antwort. +5. Erklären Sie die einzelnen Header-Zeilen. + +**Aufgabenstellung B:** Stellen Sie eine HTTP-Anfrage mit einem Query-Parameter und beobachten Sie das Ergebnis im Browser. + +#### Arbeitsschritte +1. Geben Sie in einem Browser Ihrer Wahl folgende Adresse ein: `https://www.google.com/search?q=tim+berners+lee` +2. Beschreiben Sie kurz, was Sie sehen und warum. + +## 4. HTTP-Übung: Statuscodes verstehen + +#### 1. Was bedeutet der HTTP-Statuscode `404`? + +- [ ] Die Verbindung wurde abgelehnt +- [ ] Der Server ist überlastet +- [ ] Die Ressource wurde nicht gefunden +- [ ] Die Anfrage war erfolgreich + +#### 2. Welcher Statuscode steht für eine erfolgreiche POST-Anfrage, bei der eine neue Ressource erstellt wurde? + +- [ ] `200 OK` +- [ ] `302 Found` +- [ ] `204 No Content` +- [ ] `201 Created` + +#### 3. Was bedeutet der Statuscode `500`? + +- [ ] Umleitung +- [ ] Serverfehler +- [ ] Erfolgreiche Anfrage +- [ ] Clientfehler + +#### 4. Welcher Statuscode zeigt an, dass eine Ressource dauerhaft verschoben wurde? + +- [ ] `301 Moved Permanently` +- [ ] `404 Not Found` +- [ ] `302 Found` +- [ ] `403 Forbidden` + +## 5. Historie-Übung: Entstehungsgeschichte des WWW kennen + +#### 1. Welche Eigenschaft gehört zur Paketvermittlung? + +- [ ] Geringe Flexibilität - Leitung muss reserviert bleiben. +- [ ] Keine feste Verbindung - Datenpakete werden einzeln gesendet. +- [ ] Alle Daten nutzen denselben Kanal. +- [ ] Beispiel: analoges Telefonnetz + +#### 2. Wer entwickelte das Konzept eines Memex? + +- [ ] Ted Nelson +- [ ] Tim Berners Lee +- [ ] Steve Jobs +- [ ] Vannevar Bush + +#### 3. In welcher Organisation entstand der erste Projektvorschlag zum World Wide Web? + +- [ ] ARPA +- [ ] CERN +- [ ] Bell Labs +- [ ] W3C + +#### 4. Wer gründete das World Wide Web Consortium (W3C) im Jahr 1994? + +- [ ] Vannevar Bush +- [ ] Bill Gates +- [ ] Tim Berners-Lee +- [ ] Ted Nelson + + diff --git a/web/03/labor/03_loesungen/uebung1.md b/web/03/labor/03_loesungen/uebung1.md new file mode 100644 index 0000000..15f9974 --- /dev/null +++ b/web/03/labor/03_loesungen/uebung1.md @@ -0,0 +1,18 @@ +## 1. Lösung + +`https://lernportal.schule-xyz.de/materialien/arbeitsblatt?id=2025#download` + + +**Protokoll**: https + +**Subdomain**: lernportal + +**Second-Level-Domain**: schule-xyz + +**Top-Level-Domain**: .de + +**Pfad**: /materialien/arbeitsblatt + +**Parameter**: id=2025 + +**Sprungmarke**: download \ No newline at end of file diff --git a/web/03/labor/03_loesungen/uebung2.md b/web/03/labor/03_loesungen/uebung2.md new file mode 100644 index 0000000..4d84a2d --- /dev/null +++ b/web/03/labor/03_loesungen/uebung2.md @@ -0,0 +1,36 @@ +## 2. Lösung + +### IP (Domänenname): + +1. `www.wikipedia.de` : 49.13.55.174 +2. `www.thalia.de` : 104.16.2.25 und 104.16.3.25 +3. `www.tagesschau.de`: 23.67.129.182 +4. `www.zalando.de`: 23.207.210.206 und 23.207.210.218 + +## Erläuterung + +Der Befehl `nslookup` fragt einen DNS-Server nach der IP-Adresse zu einem Domainnamen. Die Ausgabe enthält typischerweise: + +- **Server**: Der DNS-Server, der für die Abfrage verwendet wurde. +- **Address**: Die IP-Adresse dieses DNS-Servers. +- **Name**: Der Name (Domain), der abgefragt wurde. +- **Address(es)**: Die IP-Adresse(n), die zur Domain gehören. + +### Beispielausgabe + +```bash +> nslookup www.heise.de +Server: fritz.box +Address: 192.168.178.1 + +Non-authoritative answer: +Name: www.heise.de +Addresses: 2a02:2e0:3fe:1001:302:: (IPv6) + 193.99.144.80 (IPv4) +``` + +**Erklärung:** + +- Die Abfrage wurde an den lokalen DNS-Server `fritz.box` (IP: 192.168.178.1) geschickt – typischerweise der Router. +- Die Antwort ist „non-authoritative“, d. h. sie stammt nicht direkt von der zuständigen Quelle, sondern wurde zwischengespeichert. +- Die Domain `www.heise.de` hat zwei IP-Adressen: eine IPv6- und eine IPv4-Adresse. diff --git a/web/03/labor/03_loesungen/uebung3.md b/web/03/labor/03_loesungen/uebung3.md new file mode 100644 index 0000000..235af27 --- /dev/null +++ b/web/03/labor/03_loesungen/uebung3.md @@ -0,0 +1,28 @@ +## 3. Lösung + +#### Aufgabe A + +```http +HTTP/2 200 +content-type: text/html +etag: "bc2473a18e003bdb249eba5ce893033f:1760028122.592274" +last-modified: Thu, 09 Oct 2025 16:42:02 GMT +cache-control: max-age=86000 +date: Fri, 10 Oct 2025 13:36:32 GMT +alt-svc: h3=":443"; ma=93600 +``` + +- *Response Line*: Statuscode 200 (=Erfolg) und HTTP/2-Protokoll +- *Inhaltstyp*: HTML-Webseite +- *ETag*: eindeutiger Bezeichner für Version der Ressource +- *last-modified*: Letzte Änderung am 9. Oktober 2025 16:42:02 GMT +- *Cache-Control*: Ressource kann für 86000 Sekunden direkt aus dem Cache verwendet werden +- *Date*: Zeitpunkt, zu dem die Antwort von Server generiert wurde: 10. Oktober 2025 13:36:32 GMT + +- *alt-svc*: nicht relevant für uns + +#### Aufgabe B + +*Eingabe*: `https://www.google.com/search?q=tim+berners+lee` + +*Antwort*: Es wird eine Google-Suche für "Tim Berners Lee" durchgeführt und das Ergebnis im Browser angezeigt. Der Browser sendet also eine HTTP-Anfrage an `https://www.google.com/search` mit dem Query-Parameter `q=tim+berners+lee`. diff --git a/web/03/labor/03_loesungen/uebung4.md b/web/03/labor/03_loesungen/uebung4.md new file mode 100644 index 0000000..01e8852 --- /dev/null +++ b/web/03/labor/03_loesungen/uebung4.md @@ -0,0 +1,37 @@ +## 4. Lösung + +#### 1. Was bedeutet der HTTP-Statuscode `404`? + +- [ ] Die Verbindung wurde abgelehnt +- [ ] Der Server ist überlastet +- [x] Die Ressource wurde nicht gefunden +- [ ] Die Anfrage war erfolgreich + +**Erklärung:** `404` bedeutet, dass die angeforderte Ressource auf dem Server nicht gefunden wurde. + +#### 2. Welcher Statuscode steht für eine erfolgreiche POST-Anfrage, bei der eine neue Ressource erstellt wurde? + +- [ ] `200 OK` +- [ ] `302 Found` +- [ ] `204 No Content` +- [x] `201 Created` + +**Erklärung:** `201 Created` zeigt an, dass die Ressource erfolgreich erstellt wurde. + +#### 3. Was bedeutet der Statuscode `500`? + +- [ ] Umleitung +- [x] Serverfehler +- [ ] Erfolgreiche Anfrage +- [ ] Clientfehler + +**Erklärung:** `500` ist ein interner Serverfehler – der Server konnte die Anfrage nicht verarbeiten. + +#### 4. Welcher Statuscode zeigt an, dass eine Ressource dauerhaft verschoben wurde? + +- [x] `301 Moved Permanently` +- [ ] `307 Temporary Redirect` +- [ ] `302 Found` +- [ ] `410 Gone` + +**Erklärung:** `301` bedeutet, dass die Ressource dauerhaft unter einer neuen URL erreichbar ist. \ No newline at end of file diff --git a/web/03/labor/03_loesungen/uebung5.md b/web/03/labor/03_loesungen/uebung5.md new file mode 100644 index 0000000..aa0bfba --- /dev/null +++ b/web/03/labor/03_loesungen/uebung5.md @@ -0,0 +1,29 @@ +## 5. Historie-Übung: Entstehungsgeschichte des WWW kennen + +#### 1. Welche Eigenschaft gehört zur Paketvermittlung? + +- [ ] Geringe Flexibilität - Leitung muss reserviert bleiben. +- [x] Keine feste Verbindung - Datenpakete werden einzeln gesendet. +- [ ] Alle Daten nutzen denselben Kanal. +- [ ] Beispiel: analoges Telefonnetz + +#### 2. Wer entwickelte das Konzept eines Memex? + +- [ ] Ted Nelson +- [ ] Tim Berners Lee +- [ ] Steve Jobs +- [x] Vannevar Bush + +#### 3. In welcher Organisation entstand der erste Projektvorschlag zum World Wide Web? + +- [ ] ARPA +- [x] CERN +- [ ] Bell Labs +- [ ] W3C + +#### 4. Wer gründete das World Wide Web Consortium (W3C) im Jahr 1994? + +- [ ] Vannevar Bush +- [ ] Bill Gates +- [x] Tim Berners-Lee +- [ ] Ted Nelson \ No newline at end of file diff --git a/web/04/demos/basic_get.html b/web/04/demos/basic_get.html new file mode 100644 index 0000000..375da29 --- /dev/null +++ b/web/04/demos/basic_get.html @@ -0,0 +1,18 @@ + + + + + Formular + + +
+ +

+ + +

+ + +
+ + diff --git a/web/04/demos/basic_post.html b/web/04/demos/basic_post.html new file mode 100644 index 0000000..45b2d3d --- /dev/null +++ b/web/04/demos/basic_post.html @@ -0,0 +1,18 @@ + + + + + Formular + + +
+ +

+ + +

+ + +
+ + \ No newline at end of file diff --git a/web/04/demos/basic_search.html b/web/04/demos/basic_search.html new file mode 100644 index 0000000..daf981c --- /dev/null +++ b/web/04/demos/basic_search.html @@ -0,0 +1,17 @@ + + + + + + + Einfache Suche + + + +
+ + +
+ + + \ No newline at end of file diff --git a/web/04/demos/gastbestellung.html b/web/04/demos/gastbestellung.html new file mode 100644 index 0000000..ac24150 --- /dev/null +++ b/web/04/demos/gastbestellung.html @@ -0,0 +1,61 @@ + + + + + + Gastbestellung + + + +
+
+ Persönliche Angaben: +
+
+
+
+
+
+
+

+
+ +
+ Artikelbeschreibung: +
+

+ +
+
+
+ +
+ Optionen: + +
+ +
+ +
+
+ +
+ Versand: + Versandart wählen:
+ +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/web/04/labor/04_aufgaben.md b/web/04/labor/04_aufgaben.md new file mode 100644 index 0000000..702f548 --- /dev/null +++ b/web/04/labor/04_aufgaben.md @@ -0,0 +1,115 @@ +# Übungsblatt 04 + +## Nginx-Übung: Eigene Website + +_Keine Abgabe erforderlich_ + +**Aufgabenstellung**: Nginx installieren und testen: + +- MacOS: [Installationsanweisungen MacOS](installation/installation_macos.md) +- Windows: [Installationsanweisungen Windos](installation/installation_win.md) +- Linux: [Installationsanweisungen Linux](installation/installation_linux.md) + +## Apache-Übung: Eigene Website + +_Keine Abgabe erforderlich_ + +**Aufgabenstellung**: Apache installieren und testen: + +- MacOS: [Installationsanweisungen MacOS](installation/installation_macos.md) +- Windows: [Installationsanweisungen Windows](installation/installation_win.md) +- Linux: [Installationsanweisungen Linux](installation/installation_linux.md) + +## 1. HTML-Übung: GET - Login + +**Aufgabenstellung**: +Erstellen Sie eine Webseite mit einem Formular zur Eingabe von E-Mail-Adresse und Passwort. + +#### Arbeitsschritte + +1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und beliebigem Titel. + +2. Setzen Sie als Überschrift (Ebene 1) "Kundenkonto". + +3. Setzen Sie als Überschrift (Ebene 2) "Melden Sie sich bitte an:". + +4. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `GET`. Die Daten des Formulars sollen an die aktuelle Seite gesendet werden (`action=""`). + +5. Fügen Sie 2 Pflicht-Eingabefelder ein und versehen Sie diese mit jeweils einem Label. + + a. Eingabefeld vom Typ `email` + + b. Eingabefeld vom Typ `password` + +7. Benennen Sie den Submit-Button geeignet. + +8. Testen Sie Ihre Webseite: + + a. Geben Sie eine valide E-Mail-Adresse und ein beliebiges Passwort ein. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. (*Zusatzfrage: Warum ist das problematisch?*) + + b. Geben Sie eine nicht-valide E-Mail-Adresse ein. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zum E-Mail-Feld erhalten. + + c. Geben Sie eine valide E-Mail-Adresse ein. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zur fehlenden Passwort-Eingabe erhalten. + +## 2. HTML-Übung: GET - Obstbestellung + +**Aufgabenstellung**: +Erstellen Sie eine Webseite mit einem Formular zur Bestellung eines Obstkorbs. + +#### Arbeitsschritte + +1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und beliebigem Titel. + +2. Setzen Sie als Überschrift (Ebene 1) "Bestellen Sie sich Ihr Obst direkt nach Hause!". + +3. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `GET`. Die Daten des Formulars sollen an die aktuelle Seite gesendet werden (`action=""`). + +4. Fügen Sie 3 Eingabefelder ein und versehen Sie diese mit jeweils einem passenden Label. + + a. *Obst*: Eingabefeld mit Vorschlagsliste mit 5-10 Obstvorschlägen Ihrer Wahl. _(Tipp: `list`-Attribut, welches auf ein ``-Element verweist [W3Schools - datalist](https://www.w3schools.com/tags/tag_datalist.asp))_ + + b. *Stückzahl*: Eingabefeld vom Typ `number`. Es soll mindestens 1 Stück, höchstens 10 Stücke bestellt werden können. + + c. *Boxfarbe*: Eingabefeld vom Typ `color`. + +7. Benennen Sie den Submit-Button geeignet. + +8. Testen Sie Ihre Webseite: + + a. Wählen Sie ein Obst aus der Liste aus, geben Sie eine Stückzahl zwischen 1-10 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. + + b. Tippen Sie die ersten Buchstaben eines Obst ein und prüfen Sie, ob sie automatisch einen Vorschlag erhalten. + + c. Tippen Sie ein Obst ein, dass nicht in der Liste enthalten ist, geben Sie eine Stückzahl zwischen 1-10 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. + + d. Wählen Sie ein Obst aus der Liste aus, geben Sie eine Stückzahl zwischen 11-20 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zur fehlerhaften Stückzahl-Eingabe erhalten. + +## 3. HTML-Übung: POST - Workshopanmeldung + +**Aufgabenstellung**: +Erstellen Sie eine Webseite mit einem Formular und einem Absende-Button. + +#### Arbeitsschritte + +1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel. + +2. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `POST`. Die Ziel-Url soll `https://web-637691723779.europe-west2.run.app/registrierung` sein. + +3. Das Formular soll folgende Bereiche und Eingabefelder haben: + +![Workshop-Anmeldung](workshop-registrierung.png) + +4. Testen Sie Ihr Formular + 1. Geben Sie sinnvolle Eingaben ein senden Sie das Formular ab. + 2. Prüfen Sie, ob eine Auflistung Ihrer Eingaben als Antwort erscheint. + +**Hinweis**: *Damit die Server-Antwort korrekt ist, sollten Ihre Eingabefelder genau folgende Schlüssel (`name`-Attribut) verwenden:* +- vorname +- nachname +- email +- telefon +- sessions +- agb +- newsletter +- equipment +- format \ No newline at end of file diff --git a/web/04/labor/installation/deinstallation.md b/web/04/labor/installation/deinstallation.md new file mode 100644 index 0000000..fa08b40 --- /dev/null +++ b/web/04/labor/installation/deinstallation.md @@ -0,0 +1,102 @@ +## Ergänzung für macOS: Vollständige Deinstallation von Nginx und Apache + +### Nginx vollständig entfernen + +1. Dienst stoppen: +```bash +brew services stop nginx +``` + +2. Nginx deinstallieren: +```bash +brew uninstall nginx +``` + +3. Konfigurationsdateien und Logs löschen: + +Je nach Mac-Chip: + +- Intel-Mac: + ```bash + sudo rm -rf /usr/local/etc/nginx /usr/local/var/log/nginx + ``` + +- Apple Silicon: + ```bash + sudo rm -rf /opt/homebrew/etc/nginx /opt/homebrew/var/log/nginx + ``` + +4. Benutzerverzeichnis löschen (falls verwendet): +```bash +rm -rf ~/meine-website +``` + +--- + +### Apache vollständig entfernen + +1. Dienst stoppen: +```bash +brew services stop httpd +``` + +2. Apache deinstallieren: +```bash +brew uninstall httpd +``` + +3. Konfigurationsdateien und Logs löschen: + +- Intel-Mac: + ```bash + sudo rm -rf /usr/local/etc/httpd /usr/local/var/log/httpd + ``` + +- Apple Silicon: + ```bash + sudo rm -rf /opt/homebrew/etc/httpd /opt/homebrew/var/log/httpd + ``` + +4. Benutzerverzeichnis löschen: +```bash +rm -rf ~/meine-website +``` + +--- + +## Ergänzung für Windows: Vollständige Deinstallation von Nginx und Apache + +### Nginx vollständig entfernen + +1. Dienst stoppen (falls aktiv): + Öffnen Sie die Eingabeaufforderung als Administrator: +```cmd +nginx -s stop +``` + +2. Nginx-Verzeichnis löschen: +```cmd +rmdir /S /Q C:\nginx +``` + +3. Temporäre Dateien und Logs entfernen (falls vorhanden): +- Prüfen Sie z. B. `C:\nginx\logs` oder andere benutzerdefinierte Pfade. + +--- + +### Apache vollständig entfernen + +1. Dienst stoppen (falls aktiv): +```cmd +httpd -k stop +``` + +2. Apache-Verzeichnis löschen: +```cmd +rmdir /S /Q C:\Apache24 +``` + +3. Benutzerverzeichnis löschen: +```cmd +rmdir /S /Q C:\Apache24\htdocs\meine-website +``` \ No newline at end of file diff --git a/web/04/labor/installation/homebrew.md b/web/04/labor/installation/homebrew.md new file mode 100644 index 0000000..3bcc9de --- /dev/null +++ b/web/04/labor/installation/homebrew.md @@ -0,0 +1,34 @@ +## Homebrew installieren (macOS) + +1. **Terminal öffnen** + Öffnen Sie das Programm „Terminal“. Sie finden es über Spotlight (⌘ + Leertaste → „Terminal“ eingeben). + +2. **Installationsbefehl ausführen** + Kopieren Sie den folgenden Befehl und fügen Sie ihn ins Terminal ein: + + ```bash + /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" + ``` + +3. **Anweisungen im Terminal folgen** + Während der Installation werden Sie möglicherweise nach Ihrem macOS-Passwort gefragt. Geben Sie es ein und bestätigen Sie mit Enter. Die Installation kann einige Minuten dauern. + +4. **Pfad konfigurieren (nur bei Apple Silicon Macs)** + Wenn Sie einen Mac mit M1/M2/M3-Chip verwenden, fügen Sie Homebrew zum Pfad hinzu: + + ```bash + echo >> /Users/{IhrUser}/.zprofile + echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/{IhrUser}/.zprofile + eval "$(/opt/homebrew/bin/brew shellenv)" + ``` + + Bei Intel-Macs ist dieser Schritt nicht erforderlich. + +5. **Installation testen** + Prüfen Sie, ob Homebrew korrekt installiert wurde: + + ```bash + brew --version + ``` + + Sie sollten eine Versionsnummer sehen, z. B. `Homebrew 4.x.x`. \ No newline at end of file diff --git a/web/04/labor/installation/installation_linux.md b/web/04/labor/installation/installation_linux.md new file mode 100644 index 0000000..4fa2281 --- /dev/null +++ b/web/04/labor/installation/installation_linux.md @@ -0,0 +1,161 @@ +# Anleitung: Eigene Website mit Nginx oder Apache + +## Version für Linux + +### Voraussetzungen +- Linux-Distribution mit `apt`-Paketverwaltung (z. B. Ubuntu, Debian) +- Terminalzugriff +- Dev-Container schließen (!) + +--- + +### Eigene Website mit Nginx unter Linux + +1. Installieren Sie Nginx: + ```bash + sudo apt update + sudo apt install nginx + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p /home/{IhrVerzeichnis}/meine-website + echo "

Willkommen bei {IhrName}

" > /home/{IhrVerzeichnis}/meine-website/index.html + ``` + +3. Erstellen Sie eine neue Nginx-Konfiguration: + ```bash + sudo nano /etc/nginx/sites-available/{IhrName} + ``` + + Inhalt der Datei: + ```nginx + server { + listen 80; + server_name localhost; + + root /home/{IhrVerzeichnis}/meine-website; + index index.html; + + location / { + try_files $uri $uri/ =404; + } + } + ``` + +4. Aktivieren Sie die Konfiguration und deaktivieren Sie die Standardseite: + ```bash + sudo rm /etc/nginx/sites-enabled/default + sudo ln -s /etc/nginx/sites-available/{IhrName} /etc/nginx/sites-enabled/ + ``` + +5. Zugriffsrechte prüfen: + ```bash + sudo chmod o+x /home/{IhrVerzeichnis} + sudo chmod -R o+r /home/{IhrVerzeichnis}/meine-website + ``` + +6. Nginx neu laden: + ```bash + sudo nginx -t + sudo systemctl reload nginx + ``` + +7. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost + ``` + +8. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +9. Nginx stoppen: + ```bash + sudo systemctl stop nginx + ``` + +10. Nginx vollständig entfernen: + ```bash + sudo apt remove nginx nginx-common + sudo apt purge nginx nginx-common + sudo apt autoremove + rm -r /home/{IhrVerzeichnis}/meine-website + sudo rm -r /etc/nginx /var/log/nginx + ``` + +--- + +### Eigene Website mit Apache unter Linux + +1. Installieren Sie Apache: + ```bash + sudo apt update + sudo apt install apache2 + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p /home/{IhrVerzeichnis}/meine-website + echo "

Willkommen bei {IhrName}

" > /home/{IhrVerzeichnis}/meine-website/index.html + ``` + +3. Erstellen Sie eine neue Apache-Konfiguration: + ```bash + sudo nano /etc/apache2/sites-available/{IhrName}.conf + ``` + + Inhalt der Datei: + ```apache + + ServerName localhost + DocumentRoot /home/{IhrVerzeichnis}/meine-website + + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + + ``` + +4. Aktivieren Sie die Konfiguration und deaktivieren Sie die Standardseite: + ```bash + sudo a2dissite 000-default.conf + sudo a2ensite {IhrName}.conf + ``` + +5. Zugriffsrechte prüfen: + ```bash + sudo chmod o+x /home/{IhrVerzeichnis} + sudo chmod -R o+r /home/{IhrVerzeichnis}/meine-website + ``` + +6. Apache neu laden: + ```bash + sudo apache2ctl configtest + sudo systemctl reload apache2 + ``` + +7. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost + ``` + +8. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +9. Apache stoppen: + ```bash + sudo systemctl stop apache2 + ``` + +10. Apache vollständig entfernen: + ```bash + sudo apt remove apache2 apache2-utils apache2-bin apache2-data + sudo apt purge apache2 apache2-utils apache2-bin apache2-data + sudo apt autoremove + rm -r /home/{IhrVerzeichnis}/meine-website + sudo rm -r /etc/apache2 /var/log/apache2 + ``` \ No newline at end of file diff --git a/web/04/labor/installation/installation_macos.md b/web/04/labor/installation/installation_macos.md new file mode 100644 index 0000000..ce7d423 --- /dev/null +++ b/web/04/labor/installation/installation_macos.md @@ -0,0 +1,135 @@ +# Anleitung: Eigene Website mit Nginx oder Apache + +## Version für macOS + +### Voraussetzungen +- macOS mit installiertem Homebrew +- Terminalzugriff +- Dev-Container schließen (!) + +--- + +### Eigene Website mit Nginx unter macOS + +1. Installieren Sie Nginx: + ```bash + brew install nginx + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p ~/meine-website + echo "

Willkommen bei {IhrName}

" > ~/meine-website/index.html + ``` + +3. Passen Sie die Nginx-Konfiguration an: + + Der Pfad zur Konfigurationsdatei hängt vom verwendeten Mac-Chip ab: + + - Intel-Mac: + ```bash + nano /usr/local/etc/nginx/nginx.conf + ``` + - Apple Silicon (M1/M2/M3): + ```bash + nano /opt/homebrew/etc/nginx/nginx.conf + ``` + + Fügen Sie am Ende der Datei folgenden Server-Block hinzu oder passen Sie den bestehenden an: + ```nginx + server { + listen 8080; + server_name localhost; + + location / { + root /Users/{IhrUser}/meine-website; + index index.html index.htm; + try_files $uri $uri/ =404; + } + } + ``` + +4. Starten Sie Nginx: + ```bash + brew services start nginx + ``` + +5. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost:8080 + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Nginx stoppen +```cmd +brew services stop nginx +```` + +8. Nginx vollständig entfernen: +Siehe [Deinstallations-Anweisungen](deinstallation.md). + +--- + +### Eigene Website mit Apache unter macOS + +1. Installieren Sie Apache: + ```bash + brew install httpd + ``` + +2. Erstellen Sie Ihren Projektordner: + ```bash + mkdir -p ~/meine-website + echo "

Willkommen bei {IhrUser}

" > ~/meine-website/index.html + ``` + +3. Passen Sie die Apache-Konfiguration an: + + Der Pfad zur Konfigurationsdatei hängt ebenfalls vom Mac-Chip ab: + + - Intel-Mac: + ```bash + nano /usr/local/etc/httpd/httpd.conf + ``` + - Apple Silicon: + ```bash + nano /opt/homebrew/etc/httpd/httpd.conf + ``` + + Fügen Sie am Ende der Datei folgenden VirtualHost hinzu: + ```apache + + DocumentRoot "/Users/{IhrUser}/meine-website" + ServerName localhost + + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + + ``` + +4. Starten Sie Apache: + ```bash + brew services start httpd + ``` + +5. Testen Sie Ihre Website: + Öffnen Sie im Browser: + ``` + http://localhost:8080 + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Apache stoppen: + ```bash + brew services stop httpd + ``` + +8. Apache vollständig entfernen +Siehe [Deinstallations-Anweisungen](deinstallation.md). \ No newline at end of file diff --git a/web/04/labor/installation/installation_win.md b/web/04/labor/installation/installation_win.md new file mode 100644 index 0000000..38dedf7 --- /dev/null +++ b/web/04/labor/installation/installation_win.md @@ -0,0 +1,111 @@ +# Anleitung: Eigene Website mit Nginx oder Apache + +## Version für Windows (ohne WSL) + +### Voraussetzungen +- Windows 10 oder 11 +- Administratorrechte +- Dev-Container schließen (!) +- Nginx oder Apache für Windows installiert + +--- + +### Eigene Website mit Nginx unter Windows + +1. Laden Sie Nginx für Windows herunter: + - Website: https://nginx.org/en/download.html + - Entpacken Sie die ZIP-Datei z. B. nach `C:\nginx` + +2. Erstellen Sie Ihren Projektordner: + - Pfad: `C:\nginx\html\meine-website` + - Datei: `index.html` mit folgendem Inhalt: + ```html +

Willkommen bei {IhrName}

+ ``` + +3. Passen Sie die Konfiguration an: + - Datei: `C:\nginx\conf\nginx.conf` + ```nginx + server { + listen 8080; + server_name localhost; + + location / { + root html/meine-website; + index index.html index.htm; + try_files $uri $uri/ =404; + } + } + ``` + +4. Starten Sie Nginx: + Öffnen Sie die Eingabeaufforderung als Administrator: + ```cmd + cd C:\nginx + start nginx + ``` + +5. Testen Sie Ihre Website: + + Öffnen Sie im Browser: + ``` + http://localhost:8080 + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Nginx stoppen +```cmd + nginx -s stop +```` + +8. Nginx vollständig entfernen: +Siehe [Deinstallations-Anweisungen](deinstallation.md). + +--- + +### Eigene Website mit Apache unter Windows + +1. Laden Sie Apache für Windows herunter: + - Website: https://www.apachelounge.com/download/ + - Installieren Sie Apache z. B. nach `C:\Apache24` + +2. Erstellen Sie Ihren Projektordner: + - Pfad: `C:\Apache24\htdocs\meine-website` + - Datei: `index.html` mit folgendem Inhalt: + ```html +

Willkommen bei {IhrName}

+ ``` + +3. Passen Sie die Konfiguration an: + - Datei: `C:\Apache24\conf\httpd.conf` + ```apache + DocumentRoot "C:/Apache24/htdocs/meine-website" + + Options Indexes FollowSymLinks + AllowOverride None + Require all granted + + ``` + +4. Starten Sie Apache: + Öffnen Sie die Eingabeaufforderung als Administrator: + ```cmd + httpd + ``` + +5. Testen Sie Ihre Website: + Öffnen Sie im Browser: + ``` + http://localhost + ``` + +6. Kopieren Sie Ihre Rezepte-Sammlung aus Übungsblatt 02 in Ihren Projektordner (`meine-website`). Benennen Sie die Hauptseite mit der Tabelle um zu `index.html`. Aktualisieren Sie dann die Webseite im Browser. + +7. Apache stoppen: + ```bash + httpd -k stop + ``` + +8. Apache vollständig entfernen +Siehe [Deinstallations-Anweisungen](deinstallation.md). \ No newline at end of file diff --git a/web/04/labor/workshop-registrierung.png b/web/04/labor/workshop-registrierung.png new file mode 100644 index 0000000..2c43a5b Binary files /dev/null and b/web/04/labor/workshop-registrierung.png differ