Migrate XAMPP tutorial.

content/material/Netzwerke/01-World-Wide-Web/03-Anfaenge-des-Web.mdx

@@ -1,7 +1,7 @@
 import {HeroContainer} from "@site/src/components/HeroContainer/HeroContainer";
 import {SourceReference} from "@site/src/components/SourceReference/SourceReference";
 
-# Die Anfänge des World Wide Web entdecken
+# Die Anfänge des World Wide Web erkunden
 <HeroContainer>
   ![Der erste Webserver vom Tim Berners-Lee am CERN](img/first-web-server.jpg)
 </HeroContainer>
@@ -46,3 +46,4 @@ Auch vom line-mode Browser gibt es eine Nachbildung, die Sie [hier ausprobieren]
 
 :::warning Verfügbarkeit
 Die Nachbildung des line-mode Browsers ist leider nicht immer verfügbar.
+:::

content/material/Netzwerke/01-World-Wide-Web/04-Webserver-mit-Xampp.mdx

@@ -0,0 +1,66 @@
+import {SourceReference} from "@site/src/components/SourceReference/SourceReference"
+
+# Den Laptop zum Web Server verwandeln
+Sie haben bereits mit HTML und CSS gearbeitet und eine eigene Webseite erstellt? Super! In diesem Abschnitt lernen Sie,
+wie Sie Ihren Laptop zu einem Web Server verwandeln, damit Ihre Kolleginnen und Kollegen auf Ihre Webseite zugreifen
+können.
+
+## XAMPP einrichten
+Um Ihren Laptop als Web Server verwenden zu können, müssen Sie zuerst ein entsprechendes Programm installieren.
+ir verwenden dazu eine Software namens XAMPP. Gehen Sie für die Einrichtung von XAMPP wie folgt vor:
+
+1. Laden Sie die aktuellste Version von XAMPP für Ihr Betriebssystem (Windows oder macOS) von dieser Webseite herunter:
+   https://www.apachefriends.org/de/index.html
+2. Führen Sie die heruntergeladene Datei aus, um das Programm zu installieren. Akzeptieren Sie dabei alle
+   Standardeinstellungen.
+3. Wenn die Windows Defender Firewall um Erlaubnis fragt, erlauben Sie den Zugriff sowohl für private als auch für
+   öffentliche Netzwerke (siehe Screenshot).
+4. Schliessen Sie die Installation ab und öffnen Sie am Schluss das "XAMPP Control Panel". Sie können dieses auch
+   jederzeit aus den Windows Start-Menü öffnen.
+
+![Windows Firewall: Zugriff für private und öffentliche Netzwerke erlauben](img/xampp-windows-firewall.png)
+<SourceReference>
+  Windows Firewall: Zugriff für private und öffentliche Netzwerke erlauben.
+</SourceReference>
+
+## Web Server starten
+Sobald Sie XAMPP installiert haben, starten Sie im Control Panel das "Apache"-Modul:
+![XAMPP Control Panel: Apache-Modul starten](img/xampp-control-panel-start-apache.png)
+
+Wenn alles funktioniert hat, sollte das Control Panel am Schluss wie folgt aussehen:
+![XAMPP Control Panel: So sollte es aussehen](img/xampp-control-panel-apache-running.png)
+
+Um das zu kontrollieren, rufen Sie die Adresse http://127.0.0.1 auf. Es sollte folgende Webseite angezeigt werden:
+![XAMPP Standard-Homepage im Browser](img/xampp-default-page.png)
+
+:::info Exkurs: Die Loopback-Adresse
+Sie haben damit auch gleich eine spezielle IP-Adresse kennengelernt: `127.0.0.1` ist die sogenannte
+**Loopback-Adresse**, auch **Localhost** genannt. Unter dieser Adresse erreicht jedes Gerät immer sich selbst
+(deshalb _Loopback_), unabhängig von der tatsächlichen IP-Adresse, welche dem Gerät im Netzwerk zugewiesen wurde.
+:::
+
+## Eigene Webseite anbieten
+Ihr Gerät fungiert nun also als Web Server. Eine von diesem Web Server angebotene Webseite haben Sie am Ende des letzten
+Schritts bereits gesehen. Jetzt sollen Sie aber auch Ihre eigene Webseite über diesen Server anbieten, die Sie bereits
+erstellt haben.
+
+Öffnen Sie dazu zuerst den XAMPP `htdocs`-Ordner:
+- Unter Windows finden Sie diesen unter `C:\xampp\htdocs`
+- Unter macOS befindet er sich unter `Programme → XAMPP → xamppfiles → htdocs`
+
+:::info Zur Orientierung...
+Im XAMPP `htdocs`-Ordner finden Sie einige Dateien wie `index.php` und `applications.html`, sowie einige Ordner wie
+`dashboard` und `img`. Wenn Sie diese sehen, dann sind sie am richtigen Ort.
+:::
+
+Erstellen Sie jetzt also in diesem `htdocs`-Ordner einen neuen Unterordner namens `meine-webseite`. Kopieren Sie zum
+Schluss alle Dateien Ihrer eigenen Webseite (also, die HTML-Datei, plus allfällige CSS-Dateien, Bilder, etc.)
+unverändert in den neu erstellten Ordner `meine-webseite`.
+
+Diese Webseite können Sie jetzt im Browser öffnen. Angenommen, Ihre HTML-Datei heisst `webseite.html`. Dann können Sie
+die Adresse http://127.0.0.1/meine-webseite/webseite.html aufrufen und sehen dort Ihr Werk!
+
+:::info Ausnahme: index.html
+Falls Sie Ihre HTML-Datei `index.html` genannt haben, dann reicht es, wenn Sie die Adresse nur als
+http://127.0.0.1/meine-webseite/ angeben - der Web Server sucht dann automatisch nach einer Datei namens `index.html`.
+:::