update termin 2 slides based on feedback
- fix hdm ip address (212.132.79.37) - change website to codescripsi.es with basics/advanced - change email to mail@librete.ch - simplify overflow slides (http, css, pseudo elements)
This commit is contained in:
@@ -285,7 +285,7 @@ Ports = "Türnummern" auf Server
|
||||
# Das Problem
|
||||
|
||||
**Menschen:** `www.hdm-stuttgart.de`
|
||||
**Computer:** `141.62.1.53`
|
||||
**Computer:** `212.132.79.37`
|
||||
|
||||
**DNS** = Domain Name System
|
||||
→ Übersetzt Namen in IP-Adressen
|
||||
@@ -327,9 +327,9 @@ FQDN = Fully Qualified Domain Name
|
||||
1. Browser fragt lokalen DNS-Resolver
|
||||
2. Resolver fragt Root-Server → ".de ist bei..."
|
||||
3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
|
||||
4. Resolver fragt hdm-Server → "www = 141.62.1.53"
|
||||
4. Resolver fragt hdm-Server → "www = 212.132.79.37"
|
||||
5. Resolver cached Antwort
|
||||
6. Browser verbindet zu 141.62.1.53
|
||||
6. Browser verbindet zu 212.132.79.37
|
||||
```
|
||||
|
||||
**Caching:** Antworten werden gespeichert
|
||||
@@ -347,7 +347,7 @@ TTL = Time To Live (wie lange cachen)
|
||||
|
||||
| Typ | Bedeutung | Beispiel |
|
||||
|-----|-----------|----------|
|
||||
| **A** | IPv4-Adresse | `www → 141.62.1.53` |
|
||||
| **A** | IPv4-Adresse | `www → 212.132.79.37` |
|
||||
| **AAAA** | IPv6-Adresse | `www → 2001:db8::1` |
|
||||
| **CNAME** | Alias | `blog → www.example.com` |
|
||||
| **MX** | Mail-Server | `@ → mail.example.com` |
|
||||
@@ -427,27 +427,15 @@ Body kommt nach leerem Zeile (bei POST)
|
||||
HTTP/1.1 200 OK
|
||||
Content-Type: text/html; charset=UTF-8
|
||||
Content-Length: 1234
|
||||
Date: Fri, 10 Jan 2026 10:00:00 GMT
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
...
|
||||
</html>
|
||||
<html>...</html>
|
||||
```
|
||||
|
||||
**Status-Codes:**
|
||||
|
||||
| Code | Bedeutung |
|
||||
|------|-----------|
|
||||
| **2xx** | Erfolg (200 OK, 201 Created) |
|
||||
| **3xx** | Umleitung (301 Moved, 302 Found) |
|
||||
| **4xx** | Client-Fehler (404 Not Found, 403 Forbidden) |
|
||||
| **5xx** | Server-Fehler (500 Internal Error) |
|
||||
**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler
|
||||
|
||||
<!--
|
||||
Status-Codes merken!
|
||||
404 = Seite nicht gefunden
|
||||
500 = Server-Problem
|
||||
200 OK, 404 Not Found, 500 Internal Error
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -475,20 +463,14 @@ POST = nicht idempotent
|
||||
|
||||
# Hands-On: HTTP beobachten (20 Min)
|
||||
|
||||
**Browser DevTools öffnen:**
|
||||
- Windows/Linux: `F12` oder `Strg+Shift+I`
|
||||
- Mac: `Cmd+Option+I`
|
||||
**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)
|
||||
|
||||
**Tab "Netzwerk" (Network):**
|
||||
1. Beliebige Webseite öffnen
|
||||
2. Requests beobachten
|
||||
3. Auf Request klicken → Headers & Response analysieren
|
||||
|
||||
1. Öffnet eine beliebige Webseite
|
||||
2. Beobachtet die Requests
|
||||
3. Klickt auf einen Request
|
||||
4. Analysiert Headers und Response
|
||||
|
||||
**Fragen:**
|
||||
- Wie viele Requests für eine Seite?
|
||||
- Welche Dateitypen werden geladen?
|
||||
**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)
|
||||
|
||||
---
|
||||
|
||||
@@ -531,30 +513,23 @@ Separation of Concerns
|
||||
|
||||
# CSS einbinden
|
||||
|
||||
**Option 1: Externe Datei (empfohlen!)**
|
||||
**Option 1: Externe Datei** (empfohlen!)
|
||||
```html
|
||||
<head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
```
|
||||
|
||||
**Option 2: Im `<style>`-Tag**
|
||||
**Option 2: Style-Tag**
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p { color: blue; }
|
||||
</style>
|
||||
</head>
|
||||
<style>p { color: blue; }</style>
|
||||
```
|
||||
|
||||
**Option 3: Inline (vermeiden!)**
|
||||
**Option 3: Inline** (vermeiden!)
|
||||
```html
|
||||
<p style="color: blue;">Text</p>
|
||||
<p style="color: blue;">...</p>
|
||||
```
|
||||
|
||||
<!--
|
||||
Externe Datei = wiederverwendbar, cachebar
|
||||
Inline nur für Debugging/Ausnahmen
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -830,19 +805,14 @@ vw/vh = Viewport (sichtbarer Bereich)
|
||||
|
||||
**Erstellt `style.css` für eure HTML-Seite:**
|
||||
|
||||
1. Verlinkt die CSS-Datei im `<head>`
|
||||
2. Setzt eine Grundschrift:
|
||||
```css
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
```
|
||||
3. Stylt Überschriften, Links, Listen
|
||||
4. Experimentiert mit Farben und Abständen
|
||||
1. CSS-Datei im `<head>` verlinken
|
||||
2. Grundschrift setzen (`font-family`, `line-height`, `color`)
|
||||
3. Überschriften, Links, Listen stylen
|
||||
4. Mit Farben und Abständen experimentieren
|
||||
|
||||
**Ressource:** https://codecrispi.es/
|
||||
**Ressource:** https://codescripsi.es/
|
||||
- **Basics:** Alle machen
|
||||
- **Advanced:** Wer möchte
|
||||
|
||||
---
|
||||
|
||||
@@ -1037,24 +1007,17 @@ Oder gleichmäßig verteilt
|
||||
|
||||
```css
|
||||
/* Zustände */
|
||||
a:hover { color: red; } /* Maus drüber */
|
||||
a:active { color: darkred; } /* Beim Klicken */
|
||||
a:visited { color: purple; } /* Bereits besucht */
|
||||
|
||||
/* Formular */
|
||||
a:hover { color: red; }
|
||||
a:visited { color: purple; }
|
||||
input:focus { border-color: blue; }
|
||||
input:disabled { opacity: 0.5; }
|
||||
|
||||
/* Struktur */
|
||||
li:first-child { font-weight: bold; }
|
||||
li:last-child { border: none; }
|
||||
li:nth-child(odd) { background: #eee; }
|
||||
```
|
||||
|
||||
<!--
|
||||
Pseudo-Klassen = Zustände
|
||||
Kein JavaScript nötig!
|
||||
nth-child für Zebra-Streifen
|
||||
Pseudo-Klassen = Zustände, kein JavaScript nötig!
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -1062,26 +1025,18 @@ nth-child für Zebra-Streifen
|
||||
# Pseudo-Elemente
|
||||
|
||||
```css
|
||||
/* Vor dem Inhalt */
|
||||
.required::before {
|
||||
content: "* ";
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* Nach dem Inhalt */
|
||||
blockquote::after {
|
||||
content: " – Unbekannt";
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Erste Zeile/Buchstabe */
|
||||
p::first-line { font-weight: bold; }
|
||||
p::first-letter { font-size: 2em; }
|
||||
p::first-line { font-weight: bold; }
|
||||
```
|
||||
|
||||
**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
|
||||
|
||||
<!--
|
||||
:: = Pseudo-Element
|
||||
: = Pseudo-Klasse
|
||||
content nur bei ::before/::after
|
||||
-->
|
||||
|
||||
@@ -1089,34 +1044,22 @@ content nur bei ::before/::after
|
||||
|
||||
# Responsive Design
|
||||
|
||||
**Media Queries: CSS je nach Bildschirmgröße**
|
||||
**Media Queries:** CSS je nach Bildschirmgröße
|
||||
|
||||
```css
|
||||
/* Standard (Mobile First) */
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
/* Mobile First: Standard */
|
||||
.container { padding: 1rem; }
|
||||
|
||||
/* Ab 768px Breite (Tablet) */
|
||||
/* Ab 768px (Tablet) */
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
padding: 2rem;
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ab 1024px Breite (Desktop) */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
.container { padding: 2rem; max-width: 720px; }
|
||||
}
|
||||
```
|
||||
|
||||
**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
|
||||
|
||||
<!--
|
||||
Mobile First = Standard für klein
|
||||
Dann größere Screens überschreiben
|
||||
Breakpoints: 768px, 1024px, 1280px typisch
|
||||
Mobile First = Standard für klein, dann größere überschreiben
|
||||
-->
|
||||
|
||||
---
|
||||
@@ -1352,7 +1295,7 @@ Variablen machen's einfach
|
||||
4. Mindestens ein Kontaktformular
|
||||
|
||||
**Ressourcen:**
|
||||
- CSS lernen: https://codecrispi.es/
|
||||
- CSS lernen: https://codescripsi.es/
|
||||
- Flexbox: https://flexboxfroggy.com/
|
||||
- Grid: https://cssgridgarden.com/
|
||||
|
||||
@@ -1364,8 +1307,7 @@ Variablen machen's einfach
|
||||
|
||||
**Nächster Termin:** 24.01.2026 – JavaScript
|
||||
|
||||
**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
|
||||
**Repository:** git.librete.ch/hdm/223015b
|
||||
**Kontakt:** mail@librete.ch
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user