forked from WEB-IB-SS26/development-ib
Compare commits
5 Commits
86d5d20b32
...
bcaddea2e2
| Author | SHA1 | Date |
|---|---|---|
 Oliver Stolle
|
bcaddea2e2 | |
 Teena Steger
|
5711dfd4de | |
|
Teena Steger
|
b1fe4d07f4 | |
|
Teena Steger
|
c53b337c3b | |
|
Teena Steger
|
40eb341fd9 |
Binary file not shown.
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ungeordnete Liste</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Webentwicklung lernen</h1>
|
||||
<ul>
|
||||
<li>HTML lernen</li>
|
||||
<ul>
|
||||
<li>Tags</li>
|
||||
<li>Listen</li>
|
||||
<li>Formulare</li>
|
||||
</ul>
|
||||
<li>CSS entdecken</li>
|
||||
<li>Javascript üben</li>
|
||||
</ul>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Geordnete Liste</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Muffins backen</h1>
|
||||
<ol type="I" start="4" reversed>
|
||||
<li>Backofen auf 180 °C vorheizen</li>
|
||||
<li>Teig vorbereiten (Mehl, Zucker, Eier etc. verrühren)</li>
|
||||
<li>Teig in Förmchen füllen</li>
|
||||
<li>Muffins 20 Minuten backen</li>
|
||||
<li>Abkühlen lassen und servieren</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Stundenplan - Klasse 8a</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Aktueller Stundenplan</h1>
|
||||
<table>
|
||||
<caption>Stundenplan - 8. Schuljahr</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Zeit</th>
|
||||
<th scope="col">Montag</th>
|
||||
<th scope="col">Dienstag</th>
|
||||
<th scope="col">Mittwoch</th>
|
||||
<th scope="col">Donnerstag</th>
|
||||
<th scope="col">Freitag</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>08–10 Uhr</td>
|
||||
<td>Mathe</td>
|
||||
<td>Englisch</td>
|
||||
<td>Physik</td>
|
||||
<td>Chemie</td>
|
||||
<td>Sport</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10–12 Uhr</td>
|
||||
<td>Deutsch</td>
|
||||
<td>Biologie</td>
|
||||
<td>Musik</td>
|
||||
<td>Mathe</td>
|
||||
<td>Kunst</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="6">Stand: Juli 2025</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Web-News</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>WebWeekly – Aktuelle Nachrichten aus der Webentwicklung</h1>
|
||||
<nav>
|
||||
<a href="haupt">Hauptinhalt</a> | <a href="#technik">Technik</a> | <a href="#design">Design</a> | <a
|
||||
href="#kontakt">Kontakt</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="haupt">
|
||||
<section>
|
||||
<h2>Neuigkeiten aus der Webwelt</h2>
|
||||
|
||||
<article id="technik">
|
||||
<h3>HTML</h3>
|
||||
<p>Das W3C hat erste Entwürfe für HTML6 veröffentlicht...</p>
|
||||
</article>
|
||||
|
||||
<article id="design">
|
||||
<h3>CSS</h3>
|
||||
<p>Immer mehr Entwickler setzen auf moderne CSS-Techniken...</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Tipp der Woche</h2>
|
||||
<p>Nutze <section> und <article>, um Inhalte logisch zu gliedern!</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer id="kontakt">
|
||||
<p>© 2025 WebWeekly Redaktion</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="./">
|
||||
<title>Meine Lieblingsrezepte</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<a href="rezepte/rezept1.html">Spaghetti Bolognese</a> | <a href="rezepte/rezept2.html">Falafeln</a> | <a
|
||||
href="rezepte/rezept3.html">Kaiserschmarrn</a> | <a href="rezepte/rezept4.html">Flammkuchen</a> | <a
|
||||
href="rezepte/rezept5.html">Chicken Tikka Masala</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Lieblingsrezepte</h1>
|
||||
<table>
|
||||
<caption>Top 5 Rezepte</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Titel</th>
|
||||
<th scope="col">Bild</th>
|
||||
<th scope="col">Aufwand</th>
|
||||
<th scope="col">Portionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><a href="rezepte/rezept1.html">Spaghetti Bolognese</a></th>
|
||||
<td><a href="rezepte/rezept1.html"><img src="bilder/spaghettibolognese.jpg" alt="Spaghetti Bolognese"
|
||||
height="100" width="150"></a></td>
|
||||
<td>45 Min</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="rezepte/rezept2.html">Falafeln</a></th>
|
||||
<td><a href="rezepte/rezept2.html"><img src="bilder/falafeln.jpg" alt="Falafeln" height="100"
|
||||
width="150"></a></td>
|
||||
<td>30 Min</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="rezepte/rezept3.html">Kaiserschmarrn</a></th>
|
||||
<td><a href="rezepte/rezept3.html"><img src="bilder/kaiserschmarrn.jpg" alt="Kaiserschmarrn" height="100"
|
||||
width="150"></a></td>
|
||||
<td>20 Min</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="rezepte/rezept4.html">Flammkuchen</a></th>
|
||||
<td><a href="rezepte/rezept4.html"><img src="bilder/flammkuchen.jpg" alt="Flammkuchen" height="100"
|
||||
width="150"></a></td>
|
||||
<td>25 Min</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><a href="rezepte/rezept5.html">Chicken Tikka Masala</a></th>
|
||||
<td><a href="rezepte/rezept5.html"><img src="bilder/chickentikkamasala.jpg" alt="Chicken Tikka Masala"
|
||||
height="100" width="150"></a></td>
|
||||
<td>60 Min</td>
|
||||
<td>6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">Die besten Rezepte der Welt!</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<br>
|
||||
</main>
|
||||
<footer>
|
||||
Kontakt: <a href="mailto:t.steger@hs-mannheim.de">Teena Steger</a>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Spaghetti Bolognese</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Spaghetti Bolognese</h1>
|
||||
<h2>Zutaten:</h2>
|
||||
<ul>
|
||||
<li>250g Spaghetti</li>
|
||||
<li>300g Rinderhackfleisch</li>
|
||||
<li>1 Zwiebel</li>
|
||||
<li>2 Knoblauchzehen</li>
|
||||
<li>400g gehackte Tomaten (aus der Dose)</li>
|
||||
<li>2 EL Olivenöl</li>
|
||||
</ul>
|
||||
<h2>Zubereitung:</h2>
|
||||
<ol>
|
||||
<li>Spaghetti in Salzwasser al dente kochen.</li>
|
||||
<li>Zwiebeln und Knoblauch in Öl anbraten.</li>
|
||||
<li>Hackfleisch hinzufügen und krümelig braten.</li>
|
||||
<li>Tomaten und Gewürze dazugeben und köcheln lassen.</li>
|
||||
<li>Spaghetti mit der Sauce vermengen und servieren.</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Falafeln</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Falafeln</h1>
|
||||
<h2>Zutaten:</h2>
|
||||
<ul>
|
||||
<li>250g Kichererbsen</li>
|
||||
<li>1 Zwiebel</li>
|
||||
<li>2–3 Knoblauchzehen</li>
|
||||
<li>1 Bund Petersilie</li>
|
||||
<li>1 TL Kreuzkümmel</li>
|
||||
<li>1 TL Backpulver</li>
|
||||
</ul>
|
||||
|
||||
<h2>Zubereitung:</h2>
|
||||
<ol>
|
||||
<li>Eingeweichte Kichererbsen mit Zwiebel, Knoblauch und Kräutern pürieren.</li>
|
||||
<li>Gewürze, Mehl und Backpulver untermischen.</li>
|
||||
<li>Aus der Masse kleine Bällchen formen.</li>
|
||||
<li>Falafeln in heißem Öl goldbraun frittieren.</li>
|
||||
<li>Mit Dip oder im Fladenbrot servieren.</li>
|
||||
</ol>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kaiserschmarrn</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Kaiserschmarrn</h1>
|
||||
<h2>Zutaten:</h2>
|
||||
<ul>
|
||||
<li>4 Eier</li>
|
||||
<li>250 ml Milch</li>
|
||||
<li>150 g Mehl</li>
|
||||
<li>2 EL Zucker</li>
|
||||
<li>Apfelmus oder Zwetschgenröster als Beilage</li>
|
||||
</ul>
|
||||
<h2>Zubereitung:</h2>
|
||||
<ol>
|
||||
<li>Eier trennen und Eiweiß steif schlagen.</li>
|
||||
<li>Eigelb mit Milch, Mehl und Zucker verrühren.</li>
|
||||
<li>Eischnee unterheben.</li>
|
||||
<li>Teig in Butter in der Pfanne goldbraun backen.</li>
|
||||
<li>Mit zwei Gabeln zerreißen, mit Puderzucker bestreuen und servieren.</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Flammkuchen</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Flammkuchen</h1>
|
||||
<h2>Zutaten:</h2>
|
||||
<ul>
|
||||
<li>200g Mehl</li>
|
||||
<li>100ml Wasser</li>
|
||||
<li>2 EL Öl</li>
|
||||
<li>100g Creme fraîche</li>
|
||||
<li>100g Speckwürfel</li>
|
||||
</ul>
|
||||
<h2>Zubereitung:</h2>
|
||||
<ol>
|
||||
<li>Mehl, Wasser, Öl und Salz zu einem glatten Teig verkneten.</li>
|
||||
<li>Teig dünn ausrollen und auf ein Backblech legen.</li>
|
||||
<li>Mit Crème fraîche bestreichen.</li>
|
||||
<li>Speckwürfel und fein geschnittene Zwiebeln darauf verteilen.</li>
|
||||
<li>Im vorgeheizten Ofen bei 220 °C ca. 12–15 Minuten backen.</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chicken Tikka Masala</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Chicken Tikka Masala</h1>
|
||||
<h2>Zutaten:</h2>
|
||||
<ul>
|
||||
<li>300g Hähnchenbrustfilet</li>
|
||||
<li>150g Naturjoghurt</li>
|
||||
<li>2 TL Garam Masala</li>
|
||||
<li>1 TL Paprikapulver (edelsüß)</li>
|
||||
<li>1 Zwiebel</li>
|
||||
<li>200 ml passierte Tomaten</li>
|
||||
</ul>
|
||||
|
||||
<h2>Zubereitung:</h2>
|
||||
<ol>
|
||||
<li>Hähnchenstücke in Joghurt und Gewürzen marinieren.</li>
|
||||
<li>Fleisch in der Pfanne oder im Ofen garen.</li>
|
||||
<li>Zwiebeln und Gewürze in Öl anbraten.</li>
|
||||
<li>Passierte Tomaten und Sahne oder Joghurt hinzufügen.</li>
|
||||
<li>Hähnchen in die Sauce geben und kurz köcheln lassen.</li>
|
||||
</ol>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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.
|
||||
|
|
@ -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`.
|
||||
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Formular</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="http://localhost:8080/submit" method="GET">
|
||||
<label for="vorname">Vorname:</label>
|
||||
<input type="text" id="vorname" name="vorname"><br><br>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br><br>
|
||||
|
||||
<button type="submit">Absenden</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Formular</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="http://localhost:8080/submit" method="POST">
|
||||
<label for="vorname">Vorname:</label>
|
||||
<input type="text" id="vorname" name="vorname"><br><br>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br><br>
|
||||
|
||||
<button type="submit">Absenden</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Einfache Suche</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form action="/search" method="get">
|
||||
<input type="text" name="q">
|
||||
<input type="submit" value="Suchen">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Gastbestellung</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form action="http://localhost:8080/gast" method="post" target="_blank">
|
||||
<fieldset>
|
||||
<legend>Persönliche Angaben:</legend>
|
||||
<label for="vorname">Vorname:</label><br>
|
||||
<input type="text" name="vorname" id="vorname" placeholder="Vorname" maxlength="15" required><br>
|
||||
<label for="nachname">Nachname:</label><br>
|
||||
<input type="text" name="name" id="nachname" value="Muster"><br>
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="text" name="email" id="email" autocomplete="email"><br>
|
||||
<label for="plz">PLZ:</label><br>
|
||||
<input type="text" name="plz" id="plz" pattern="[0-9]{5}"><br><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Artikelbeschreibung:</legend>
|
||||
<label for="artikel">Artikel:</label><br>
|
||||
<input type="text" name="artikel" id="artikel" value="Blauer Kugelschreiber" readonly disabled><br><br>
|
||||
|
||||
<label for="language">Wähle die Farbe deines Artikels:</label><br>
|
||||
<select id="language" name="language" multiple size="2">
|
||||
<option value="rot">Rot</option>
|
||||
<option value="schwarz">Schwarz</option>
|
||||
<option value="blau">Blau</option>
|
||||
<option value="gelb">Gelb</option>
|
||||
</select><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Optionen:</legend>
|
||||
<input type="checkbox" id="agb" name="agb" required>
|
||||
<label for="agb">Ich habe die Allgemeinen Geschäftsbedingungen gelesen und akzeptiere sie.</label><br>
|
||||
<input type="checkbox" id="newsletter" name="newsletter" value="ja">
|
||||
<label for="newsletter">Ich möchte den kostenlosen Newsletter abonnieren und regelmäßig informiert
|
||||
werden.</label><br>
|
||||
<input type="checkbox" id="geschenk" name="geschenk" value="ja">
|
||||
<label for="geschenk">Bitte als Geschenk verpacken (zzgl. 5 € Verpackungspauschale).</label><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Versand:</legend>
|
||||
Versandart wählen:<br>
|
||||
<input type="radio" id="versand" name="lieferoption" value="versand" required>
|
||||
<label for="versand">Lieferung nach Hause (Standardversand)</label><br>
|
||||
<input type="radio" id="filiale" name="lieferoption" value="filiale">
|
||||
<label for="filiale">Abholung in einer Filiale Ihrer Wahl</label><br>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" value="Bestellung abschicken">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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 `<datalist>`-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:
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
|
@ -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
|
||||
```
|
||||
|
|
@ -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`.
|
||||
|
|
@ -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 "<h1>Willkommen bei {IhrName}</h1>" > /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 "<h1>Willkommen bei {IhrName}</h1>" > /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
|
||||
<VirtualHost *:80>
|
||||
ServerName localhost
|
||||
DocumentRoot /home/{IhrVerzeichnis}/meine-website
|
||||
|
||||
<Directory /home/{IhrVerzeichnis}/meine-website">
|
||||
Options Indexes FollowSymLinks
|
||||
AllowOverride None
|
||||
Require all granted
|
||||
</Directory>
|
||||
</VirtualHost>
|
||||
```
|
||||
|
||||
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
|
||||
```
|
||||
|
|
@ -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 "<h1>Willkommen bei {IhrName}</h1>" > ~/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 "<h1>Willkommen bei {IhrUser}</h1>" > ~/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
|
||||
<VirtualHost *:8080>
|
||||
DocumentRoot "/Users/{IhrUser}/meine-website"
|
||||
ServerName localhost
|
||||
|
||||
<Directory "/Users/{IhrUser}/meine-website">
|
||||
Options Indexes FollowSymLinks
|
||||
AllowOverride None
|
||||
Require all granted
|
||||
</Directory>
|
||||
</VirtualHost>
|
||||
```
|
||||
|
||||
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).
|
||||
|
|
@ -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
|
||||
<h1>Willkommen bei {IhrName}</h1>
|
||||
```
|
||||
|
||||
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
|
||||
<h1>Willkommen bei {IhrName}</h1>
|
||||
```
|
||||
|
||||
3. Passen Sie die Konfiguration an:
|
||||
- Datei: `C:\Apache24\conf\httpd.conf`
|
||||
```apache
|
||||
DocumentRoot "C:/Apache24/htdocs/meine-website"
|
||||
<Directory "C:/Apache24/htdocs/meine-website">
|
||||
Options Indexes FollowSymLinks
|
||||
AllowOverride None
|
||||
Require all granted
|
||||
</Directory>
|
||||
```
|
||||
|
||||
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).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue