hdm/223015c
1
0
Fork 0
Code Pull Requests Activity

update termin-1 slides

Browse Source
This commit is contained in:
libretech
2025-12-21 22:11:30 +01:00
parent 9aa00de565
commit 4d32c8fcee
1 changed files with 175 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
+175 -575
View File
@@ -77,26 +77,26 @@ Hochschule der Medien Stuttgart
| # | Datum | Thema | | # | Datum | Thema |
|---|-------|-------| |---|-------|-------|
| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** | | 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
| 2 | 10.01.2026 | Netzwerke, Protokolle & **CSS** | | 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** |
| 3 | 24.01.2026 | Interaktivität & **JavaScript** | | 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** |
**Format:** Theorie + viele Hands-On-Übungen **Format:** Theorie + viele Hands-On-Übungen
**Ziel:** Ihr könnt am Ende eine eigene interaktive Webseite bauen! **Ziel:** "Gelernte Hilflosigkeit" ablegen
--- ---
<!-- _class: lead --> <!-- _class: lead -->
# Teil 1: Die Geschichte # Teil 1: Die Geschichte
## Von der Lochkarte zum Internet ## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus
--- ---
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _footer: '' -->
![bg fit](./assets/Ada_Lovelace_daguerreotype_by_Antoine_Claudet_1843_-_cropped.png) ![bg fit](./assets/Ada_Lovelace.jpg)
<!-- <!--
Ada Lovelace, Daguerreotypie 1843 Ada Lovelace, Daguerreotypie 1843
@@ -105,7 +105,7 @@ Antoine Claudet
--- ---
![bg right:30% contain](./assets/Ada_Lovelace_daguerreotype_by_Antoine_Claudet_1843_-_cropped.png) ![bg right:30% contain](./assets/Ada_Lovelace.jpg)
# Ada Lovelace (1815–1852) # Ada Lovelace (1815–1852)
@@ -118,12 +118,17 @@ Antoine Claudet
- Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde - Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde
<!-- <!--
100 Jahre vor den ersten echten Computern Babbage: Mathematiker, besessen von Rechenmaschinen. Erst die Difference Engine, dann die Analytical Engine – nie fertig gebaut, aber revolutionär im Konzept.
Analytical Engine wurde nie gebaut
Ada erkannte das Potenzial
Programmiersprache "Ada" nach ihr benannt
ZITAT: "Die Maschine ist kein denkendes Wesen, sondern lediglich ein Automat, der nach Gesetzen handelt, die ihm auferlegt wurden." Ada: Tochter von Lord Byron, dem Dichter. Die Mutter – selbst Mathematikerin – hatte Angst, Ada könnte den "Wahnsinn" des Vaters erben. Also: strikte naturwissenschaftliche Erziehung. Weg von der Poesie, hin zur Logik.
5. Juni 1833, Ada ist 17: Sie trifft Babbage bei seinen legendären »Saturday night soirées«. Elitekreise. Er zeigt ihr seine Maschine – und sie versteht sie. Besser als fast alle anderen.
1835 heiratet sie William King → Ada King, Countess of Lovelace.
Das Zusammenspiel dieser beiden: Ein Ingenieur, der Hardware baut. Eine Dichterstochter, die Software denkt. 100 Jahre vor den ersten echten Computern.
Programmiersprache "Ada" (1980) nach ihr benannt.
--> -->
--- ---
@@ -239,15 +244,15 @@ Wichtige Lektion für MedienethikerInnen
# Lektionen für heute # Lektionen für heute
**Hollerith-Maschinen zeigen:** * Keine
1. **Daten sind Macht** – *"Wer Daten kontrolliert, kontrolliert Menschen"*
2. **Technologie verstärkt** – Gut UND Böse
3. **"Neutrale" Tools** sind nie neutral
**2025:** Big Data, AI, Social Media → dieselben Fragen
<!-- <!--
* **2025:**
* Big Data
* Generative KI
* Social Media
* Rasterfahndung ([https://netzpolitik.org/](https://netzpolitik.org/2025/stuttgart-buendnis-plant-demonstration-gegen-palantir-einsatz/))
Facebook, Cambridge Analytica, Oracle Blue Kai Facebook, Cambridge Analytica, Oracle Blue Kai
Gesichtserkennung, Überwachung, Social Credit System (China) Gesichtserkennung, Überwachung, Social Credit System (China)
Verantwortung von TechnikerInnen und MedienarbeiterInnen Verantwortung von TechnikerInnen und MedienarbeiterInnen
@@ -257,7 +262,7 @@ Verantwortung von TechnikerInnen und MedienarbeiterInnen
<!-- _class: lead --> <!-- _class: lead -->
# Der Zweite Weltkrieg # Vom Ende des Zweiten Weltkriegs
## Geburt des modernen Computers ## Geburt des modernen Computers
--- ---
@@ -281,8 +286,6 @@ Bletchley Park
- 1936: **Turing-Maschine** – theoretisches Modell eines Computers - 1936: **Turing-Maschine** – theoretisches Modell eines Computers
- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung - 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
- 1950: "Computing Machinery and Intelligence" → **Turing-Test** - 1950: "Computing Machinery and Intelligence" → **Turing-Test**
- 1952: Verurteilung wegen Homosexualität
- Chemische Kastration als "Behandlung"
- **2013:** Posthume königliche Begnadigung - **2013:** Posthume königliche Begnadigung
<!-- <!--
@@ -309,12 +312,10 @@ Geheimes Entschlüsselungszentrum im WWII
**Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen **Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen
**Turings Lösung:** Elektromechanischer Entschlüssler **Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler
**Ergebnis:** **Ergebnis:**
- Alliierten konnten deutschen Funkverkehr mitlesen - Alliierten konnten deutschen Funkverkehr mitlesen
- Krieg wurde um geschätzt **2 Jahre** verkürzt
- Bis zu **14 Millionen** Leben gerettet
**Geheim bis 1970er!** Turing starb ohne Anerkennung. **Geheim bis 1970er!** Turing starb ohne Anerkennung.
@@ -362,11 +363,6 @@ Church-Turing-These
![bg fit opacity:0.4](./assets/oppenheimer.png) ![bg fit opacity:0.4](./assets/oppenheimer.png)
<!--
Oppenheimer-Filmplakat (2023)
Christopher Nolan
-->
--- ---
# Das Manhattan-Projekt (1942–1945) # Das Manhattan-Projekt (1942–1945)
@@ -393,8 +389,6 @@ Von Neumann kam 1943 als Berater
# John von Neumann (1903–1957) # John von Neumann (1903–1957)
**"Das letzte Universalgenie"**
- Geboren in Budapest, Österreich-Ungarn - Geboren in Budapest, Österreich-Ungarn
- Mit 8: Konnte Telefonbücher auswendig - Mit 8: Konnte Telefonbücher auswendig
- Mit 22: Doktor in Mathematik - Mit 22: Doktor in Mathematik
@@ -420,10 +414,10 @@ Arbeitete am Manhattan-Projekt mit
- Implosions-Simulationen - Implosions-Simulationen
- Nuklearphysik-Gleichungen - Nuklearphysik-Gleichungen
**Lösung 1943:** Menschliche "Computer" (meist Frauen!) **Lösung 1943:** Menschliche "Computer"
→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten → Mit Taschenrechnern, Tabellen, IBM-Lochkarten
**Zu langsam!** → Bedarf an automatischer Berechnung **Zu langsam** → Bedarf an automatischer Berechnung
<!-- <!--
"Computer" war ein Job-Titel! "Computer" war ein Job-Titel!
@@ -467,6 +461,16 @@ Programmiert durch 6 Frauen (ENIAC Girls)
--- ---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg fit](./assets/First_Computer_Bug,_1947.jpg)
---
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _footer: '' -->
@@ -573,7 +577,7 @@ Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
- Kein Betriebssystem - Kein Betriebssystem
- Keine Apps - Keine Apps
- Kein Multitasking - Kein Multitasking
- Keine Updates - Keine Updates bzw. Veränderungen am Computer System
**Die meisten Computer** basieren auf diesem Prinzip: **Die meisten Computer** basieren auf diesem Prinzip:
Laptop, Smartphone, Server, Spielkonsole... Laptop, Smartphone, Server, Spielkonsole...
@@ -701,13 +705,6 @@ Latenz: Frankfurt → New York = ~80ms
<!-- _class: lead --> <!-- _class: lead -->
# Pause
## 15 Minuten
---
<!-- _class: lead -->
# Teil 2: Bits & Bytes # Teil 2: Bits & Bytes
## Die Sprache der Computer ## Die Sprache der Computer
@@ -792,7 +789,7 @@ Farbbild: Rot + Grün + Blau
**Jede Hex-Ziffer = 4 Bits** **Jede Hex-Ziffer = 4 Bits**
0-9, A-F (A=10, B=11, ..., F=15) 0-9, A-F (A=10, B=11, ..., F=15)
**Ihr kennt das:** `#FF0000` = Rot in CSS! **Ihr kennt das:** `#FF0000` = Rot in CSS
<!-- <!--
Hex = Shortcut für Menschen Hex = Shortcut für Menschen
@@ -833,7 +830,7 @@ CSS-Farben nutzen Hex
<!-- <!--
Speicheradressen werden hexadezimal angegeben Speicheradressen werden hexadezimal angegeben
Einfacher zu lesen als binär Einfacher zu lesen als binär
Programmierer:innen arbeiten damit täglich ProgrammiererInnen arbeiten damit täglich
--> -->
--- ---
@@ -845,17 +842,20 @@ Programmierer:innen arbeiten damit täglich
--- ---
# Was ist HTML? # Was ist HTML? (1/2)
**H**yper**T**ext **M**arkup **L**anguage **H**yper**T**ext **M**arkup **L**anguage
- **Keine** Programmiersprache! * **Keine** Programmiersprache
- Beschreibt **Struktur** einer Webseite * Am ehesten eine Formattierungssprache
- Tags markieren Inhalt * Beschreibt **Struktur und Aufbau** einer Webseite
* ```html
<p>Das ist ein Absatz.</p>
<input type="date"/>
```
```html
<p>Das ist ein Absatz.</p>
```
<!-- <!--
HTML = Auszeichnungssprache (wie Markdown) HTML = Auszeichnungssprache (wie Markdown)
@@ -865,10 +865,91 @@ Aktuelle Version: HTML5 (seit 2014)
--- ---
# HTML-Anatomie # Was ist HTML? (2/2)
* Mit HTML werden **HTML-Dokumente** beschrieben (bspw. `index.html`)
* Ein HTML-Dokument beschreibt das/den `Document Object Model (DOM)`
* Der DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
* *parent nodes / elements*
* *child nodes / elements*
* *sibling nodes / elements*
* <small>Während wir in HTML von Elementen bzw. *elements* sprechen, so werden sie in JavaScript (JS) eher als *nodes* gelesen.</small>
---
# HTML-Anatomie (1/2)
Formattierungssprache
* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten
* Syntax: `<element attribute="value"> ... </element>`
* Öffnende und schließende HTML-Tags müssen identisch sein
* Das schließende Tag muss ein `/` nach der Spitzenklammer haben
---
# HTML-Anatomie (2/2)
* Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
* **Umschließend**
* `<b> ... </b>` fett-gedruckter Text (inline)
* `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
* `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
* `<details> ... </details>` Collapsable / Akkordion / Aufklapp-Text
* **Selbst-schließend**
* `<img />` Bild, Vektorgrafik etc.
* `<input />` Eingabefeld
* `<meta />` Metadaten
---
# Darstellungsebene und Metadaten
```html ```html
<p class="wichtig">Das ist ein Absatz.</p> <html>
<head>
METADATEN
</head>
<body>
DARSTELLUNGSEBENE
</body>
</html>
```
* Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
* `<head> ... </head>` Metadaten für den Browser, zum Teilen, für Suchmaschinen
* `<body> ... </body>` Darzustellender Inhalt, Text, Formulare
---
# HTML Metadaten
```html
<html>
<head>
<title>Im Browsertab als Überschrift sichtbar</title>
<meta name="description" content="" />
<meta name="og:image" content="https://...." />
</head>
...
</html>
```
* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
---
# HTML-Tags und Attribute
```html
<body>
<p class="wichtig">Das ist ein Absatz.</p>
</body>
``` ```
| Teil | Bezeichnung | | Teil | Bezeichnung |
@@ -878,37 +959,39 @@ Aktuelle Version: HTML5 (seit 2014)
| `Das ist ein Absatz.` | Inhalt | | `Das ist ein Absatz.` | Inhalt |
| `</p>` | Closing Tag (schließendes Tag) | | `</p>` | Closing Tag (schließendes Tag) |
<!-- ---
Tags = Etiketten
Attribute = Zusatzinfos # HTML-Tags und Attribute (selbst-schließend)
Manche Tags sind selbstschließend: <img />
--> ```html
<input type="" />
```
| Teil | Bezeichnung |
|------|-------------|
| `<input ...` | Eingabefeld |
| `type="date"` | Attribut *type* mit dem Wert *date* |
| `... />` | Schließendes `/` im *(öffnenden) Tag* enthalten |
--- ---
# Grundgerüst # Vollständiges Grundgerüst
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <title>Portfolio von ...</title>
<title>Meine erste Seite</title> <meta name="description" content="Hier gibt es die besten ..." />
<meta name="og:image" content="https://...." />
</head> </head>
<body> <body>
<h1>Hallo Welt!</h1> <h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz.</p> <p>Das ist mein erster Absatz.</p>
</body> </body>
</html> </html>
``` ```
<!--
DOCTYPE: Sagt Browser "das ist HTML5"
html: Wurzelelement
head: Metadaten (nicht sichtbar)
body: Sichtbarer Inhalt
-->
--- ---
# Die wichtigsten Tags # Die wichtigsten Tags
@@ -917,8 +1000,8 @@ body: Sichtbarer Inhalt
|-----|-----------| |-----|-----------|
| `<h1>` bis `<h6>` | Überschriften (h1 = größte) | | `<h1>` bis `<h6>` | Überschriften (h1 = größte) |
| `<p>` | Absatz (Paragraph) | | `<p>` | Absatz (Paragraph) |
| `<a href="...">` | Link | | `<a href="..."> ... </a>` | Hyper-Link |
| `<img src="...">` | Bild | | `<img src="..."/>` | Bild |
| `<ul>`, `<ol>`, `<li>` | Listen | | `<ul>`, `<ol>`, `<li>` | Listen |
| `<div>` | Container/Box | | `<div>` | Container/Box |
| `<span>` | Inline-Container | | `<span>` | Inline-Container |
@@ -942,159 +1025,7 @@ a = anchor (Anker)
- Extension: "Live Server" - Extension: "Live Server"
**Option 3: Online-Editoren** **Option 3: Online-Editoren**
- [https://stackblitz.com](https://stackblitz.com) - [https://codepen.io/pen/](https://codepen.io/pen/)
- [https://codepen.io](https://codepen.io)
<!--
Erstmal ohne IDE starten!
Verstehen: HTML ist nur Text
-->
---
# Terminal & Paketmanager
**Warum brauchen wir das?**
- Professionelle Webentwicklung läuft über die Kommandozeile
- Tools wie `git`, `node`, `npm` werden später benötigt
- Bash-Skripte automatisieren wiederkehrende Aufgaben
**Je nach Betriebssystem:**
| macOS | Windows |
|-------|---------|
| Terminal ist vorinstalliert | **WSL** installieren |
| **Homebrew** als Paketmanager | Ubuntu-Terminal nutzen |
<!--
Heute nur Einrichtung
Später: git, node.js, npm
Bash = Standard-Shell für Entwickler
-->
---
# macOS: Homebrew installieren
**Terminal öffnen:** Spotlight → "Terminal"
**Homebrew installieren:**
```bash
/bin/bash -c "$(curl -fsSL https://homebrew.sh/install.sh)"
```
**Danach verfügbar:**
```bash
brew install git # Versionskontrolle
brew install node # JavaScript-Runtime
brew install --cask visual-studio-code
```
**Homebrew** = Der fehlende Paketmanager für macOS
https://brew.sh
<!--
Einzeiler kopieren, im Terminal einfügen
Passwort eingeben
Dauert 2-5 Minuten
-->
---
# Windows: WSL installieren (1/2)
**PowerShell als Administrator öffnen:**
1. `Windows-Taste` drücken
2. `powershell` eintippen
3. Rechtsklick → **"Als Administrator ausführen"**
*(oder: Rechts auf "Als Administrator ausführen" klicken)*
**Im PowerShell-Fenster eingeben:**
```powershell
wsl --install
```
**Danach: Neustart erforderlich!**
<!--
WSL = Windows Subsystem for Linux
Echtes Linux im Windows
Alle Linux-Tools verfügbar
-->
---
# Windows: WSL einrichten (2/2)
**Nach dem Neustart:** Ubuntu wird als App in Windows installiert
→ Ubuntu-Terminal öffnet sich zur Einrichtung
→ Username + Passwort festlegen (Passwort wird nicht angezeigt!)
**Im Ubuntu-Terminal:**
```bash
sudo apt update
sudo apt install git nodejs npm
```
**VS Code installieren:** [https://code.visualstudio.com](https://code.visualstudio.com)
→ Extension **"WSL"** installieren
→ Danach: `code .` öffnet VS Code aus Ubuntu heraus
<!--
Passwort-Eingabe: Cursor bewegt sich nicht, einfach tippen
sudo = Super User DO (Admin-Rechte)
VS Code verbindet sich automatisch mit WSL
-->
---
# Hands-On: Erste HTML-Seite (45 Min)
**Aufgabe:**
1. Erstelle Datei `index.html`
2. Schreibe das Grundgerüst (abtippen, nicht kopieren!)
3. Füge hinzu:
- Eine Überschrift über dich
- Einen Absatz mit kurzem Steckbrief
- Eine Liste deiner Hobbies
- Ein Bild (aus dem Internet)
- Einen Link zu einer Webseite
**Hilfe:** https://nextlevelshit.github.io/html-over-js/
<!--
Abtippen = besser lernen als Copy-Paste
Fehler sind erlaubt und wichtig!
Untereinander helfen
-->
---
# Beispiel-Lösung
```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Über mich</title>
</head>
<body>
<h1>Max Mustermann</h1>
<p>Ich studiere Medienwirtschaft an der HdM.</p>
<h2>Meine Hobbies</h2>
<ul>
<li>Musik hören</li>
<li>Kochen</li>
<li>Gaming</li>
</ul>
<img src="https://placekitten.com/200/200" alt="Katze">
<a href="https://hdm-stuttgart.de">HdM Website</a>
</body>
</html>
```
--- ---
@@ -1108,7 +1039,7 @@ Untereinander helfen
| Popup/Modal | `<dialog>` | | Popup/Modal | `<dialog>` |
| Fortschrittsbalken | `<progress>` | | Fortschrittsbalken | `<progress>` |
| Datum-Auswahl | `<input type="date">` | | Datum-Auswahl | `<input type="date">` |
| Validierung | `required`, `min`, `max` | | Validierung | Attribute beliebig verknüpfbar `required`, `min`, `max` |
**→ HTML first, JavaScript later!** **→ HTML first, JavaScript later!**
@@ -1125,13 +1056,11 @@ Accessibility ist eingebaut
```html ```html
<details> <details>
<summary>Klick mich!</summary> <summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p> <p>Dieser Text war versteckt.</p>
</details> </details>
``` ```
**Probiert es aus!** Kein JavaScript nötig.
--- ---
# Beispiel: Dialog # Beispiel: Dialog
@@ -1158,7 +1087,7 @@ Besser als selbstgebaute Modals
--- ---
# Hands-On: Native HTML Features (30 Min) # Hands-On: Native HTML Features
**Erweitert eure Seite:** **Erweitert eure Seite:**
@@ -1166,336 +1095,30 @@ Besser als selbstgebaute Modals
2. Erstellt ein Kontaktformular mit: 2. Erstellt ein Kontaktformular mit:
- `<input type="email">` (automatische Validierung!) - `<input type="email">` (automatische Validierung!)
- `<input type="date">` - `<input type="date">`
- `<textarea>` - `<textarea> ... </textarea>`
- `<button type="submit">` - `<button type="submit"> ... </button>`
**Tipp:** Browser validiert automatisch!
--- ---
<!-- _class: lead --> # Zusammenfassung Termin 1
# Mittagspause **Geschichte:**
## 60 Minuten - Lovelace, Hollerith, Turing, Hopper – PionierInnen
- IBM & NS-Deutschland → Verantwortung
- Von-Neumann-Architektur
- ARPANET → Internet → WWW
**Technik:**
- Bits & Bytes, Hexadezimal
- Von-Neumann-Architektur
--- ---
<!-- _class: lead --> # Zusammenfassung Termin 1 (Praxis)
# Teil 4: Rechner verbinden **Was wir gemacht haben:**
## Netzwerk-Grundlagen - HTML-Grundstruktur erstellt
- Native HTML-Features genutzt
---
# Warum Rechner verbinden?
**Ein Rechner allein macht nicht glücklich!**
- Daten teilen
- Zusammenarbeiten
- Kommunizieren
- Ressourcen teilen (Drucker, Speicher)
**Was für Kommunikationsmöglichkeiten kennt ihr?**
(ohne Internet)
<!--
Interaktive Frage an Studierende
Antworten sammeln: Brief, Telefon, Fax, Funk...
-->
---
# Kommunikationsarten
| Kategorie | Beispiel |
|-----------|----------|
| **Synchron** | Telefonat, Video-Call |
| **Asynchron** | E-Mail, Brief, SMS |
| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
| **Verbindungslos** | Brief, Postkarte |
<!--
Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
-->
---
# Das OSI-Modell
**7 Schichten der Netzwerkkommunikation:**
| Schicht | Name | Beispiel |
|---------|------|----------|
| 7 | Anwendung | HTTP, FTP, SMTP |
| 6 | Darstellung | Verschlüsselung, Kompression |
| 5 | Sitzung | Sessions |
| 4 | Transport | TCP, UDP |
| 3 | Vermittlung | IP, Routing |
| 2 | Sicherung | Ethernet, MAC |
| 1 | Bitübertragung | Kabel, WLAN |
<!--
OSI = Open Systems Interconnection
ISO-Standard
Theoretisches Modell
TCP/IP ist die praktische Implementierung
-->
---
# TCP/IP: Die Praxis
**Das Internet nutzt TCP/IP (4 Schichten):**
| TCP/IP | Entspricht OSI | Protokolle |
|--------|----------------|------------|
| Anwendung | 5-7 | HTTP, DNS, SMTP |
| Transport | 4 | TCP, UDP |
| Internet | 3 | IP |
| Netzzugang | 1-2 | Ethernet, WLAN |
**TCP/IP = Transmission Control Protocol / Internet Protocol**
<!--
TCP/IP einfacher als OSI
Praktisch gewachsen, nicht theoretisch geplant
-->
---
# IP-Adressen
**Jeder Rechner im Netzwerk braucht eine Adresse**
**IPv4:** 4 Zahlen (0-255), Punkt-getrennt
`192.168.1.1`
**Problem:** 2³² = nur 4,3 Milliarden Adressen
→ Reicht nicht für alle Geräte!
**IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen
`2001:0db8:85a3:0000:0000:8a2e:0370:7334`
<!--
Eure IP: ipconfig (Win) / ifconfig (Mac/Linux)
Private IPs: 192.168.x.x, 10.x.x.x
Öffentliche IP: Router hat eine
NAT = Network Address Translation
-->
---
# Spezielle IP-Adressen
| Adresse | Bedeutung |
|---------|-----------|
| `127.0.0.1` | **Localhost** – Ihr eigener Rechner |
| `192.168.x.x` | Private Adressen (Heimnetz) |
| `10.x.x.x` | Private Adressen (Firmen) |
**Localhost = "Ich selbst"**
→ Perfekt für Web-Entwicklung!
<!--
Localhost für lokale Entwicklung
Private IPs werden nicht im Internet geroutet
Router macht NAT (Network Address Translation)
-->
---
# Ports: Die Türnummern
**IP-Adresse = Hausnummer**
**Port = Wohnungstür**
| Port | Dienst |
|------|--------|
| 80 | HTTP (Web) |
| 443 | HTTPS (Web, verschlüsselt) |
| 22 | SSH (Terminal) |
| 25 | SMTP (E-Mail senden) |
**Beispiel:** `192.168.1.1:8080`
(IP-Adresse : Port)
<!--
Ein Server kann viele Dienste anbieten
Ports 0-1023 = "well-known" (reserviert)
Ports 1024-65535 = frei nutzbar
-->
---
# Routing: Der Weg durchs Netz
**Router = Postamt**
- Entscheidet, wohin Pakete gehen
- Findet besten Weg
- Pakete können verschiedene Wege nehmen!
**Traceroute:** Zeigt den Weg
```bash
traceroute google.de # Mac/Linux
tracert google.de # Windows
```
<!--
Live-Demo: traceroute zu google.de
Zeigt alle Router auf dem Weg
Pakete können verschiedene Wege nehmen
Adaptives Routing bei Auslastung
-->
---
# HTTP: Das Web-Protokoll
**H**yper**T**ext **T**ransfer **P**rotocol
```
Browser Server
| |
|---- GET /index.html --------->|
| |
|<------ 200 OK + HTML ---------|
| |
```
**Methoden:**
- `GET` – Daten abrufen
- `POST` – Daten senden
- `PUT` – Daten aktualisieren
- `DELETE` – Daten löschen
<!--
Stateless: Jede Anfrage ist unabhängig
Request → Response
HTTPS = HTTP + TLS-Verschlüsselung
-->
---
# Hands-On: Netzwerk erkunden (20 Min)
**Terminal öffnen:** PowerShell (Win) / Terminal (Mac/Linux)
```bash
ipconfig # IP-Adresse (Win)
ifconfig # IP-Adresse (Mac/Linux)
ping google.de # Erreichbarkeit testen
tracert google.de # Weg zum Server (Win)
```
---
<!-- _class: lead -->
# Teil 5: HTML vertiefen
## Semantik & Formulare
---
# Semantisches HTML
**Nicht alles ist ein `<div>`!**
| Statt | Besser |
|-------|--------|
| `<div class="header">` | `<header>` |
| `<div class="nav">` | `<nav>` |
| `<div class="main">` | `<main>` |
| `<div class="footer">` | `<footer>` |
| `<div class="article">` | `<article>` |
**Warum?** Accessibility, SEO, Wartbarkeit
<!--
ScreenReader nutzen semantische Tags
Google nutzt sie für SEO
Code wird lesbarer
-->
---
# Semantisches Grundgerüst
```html
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">Über uns</a>
</nav>
</header>
<main>
<article>
<h1>Hauptinhalt</h1>
<p>...</p>
</article>
</main>
<footer>
<p>© 2025 Meine Webseite</p>
</footer>
</body>
```
---
# Formulare: Input-Typen
```html
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="E-Mail">
<input type="password" placeholder="Passwort">
<input type="number" min="0" max="100">
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<button type="submit">Absenden</button>
</form>
```
**Browser validiert automatisch!** (type="email" prüft @)
<!--
Viele Typen, die Arbeit abnehmen
Keyboard passt sich an (Handy)
Validierung kostenlos
-->
---
# Hands-On: Komplette Seite (60 Min)
**Baut eine "Über mich"-Seite mit:**
1. Semantisches Grundgerüst (header, nav, main, footer)
2. Navigation mit Links zu Abschnitten
3. Über-mich-Abschnitt mit Bild
4. Hobbies-Liste
5. Kontaktformular (Name, E-Mail, Nachricht, Button)
**Ziel:** Vollständige, valide HTML-Seite
---
# Fleißaufgabe bis 10.01.
**Erweitert eure Seite:**
1. Fügt mindestens 3 weitere Abschnitte hinzu
2. Nutzt `<details>` für FAQ-Bereich
3. Erstellt zweite HTML-Datei und verlinkt sie
4. Bonus: Fügt Tabelle mit Stundenplan ein
**Ressourcen:**
- MDN Web Docs: https://developer.mozilla.org/de/
- HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
--- ---
@@ -1509,29 +1132,6 @@ Validierung kostenlos
--- ---
# Zusammenfassung Termin 1
**Geschichte:**
- Hollerith → IBM → NS-Deutschland → Verantwortung
- Manhattan-Projekt → Von Neumann → Computer-Architektur
- ARPANET → Internet → WWW
**Technik:**
- Bits & Bytes, Hexadezimal
- Von-Neumann-Architektur
- IP-Adressen, Ports, HTTP
---
# Zusammenfassung Termin 1 (Praxis)
**Was wir gemacht haben:**
- HTML-Grundstruktur erstellt
- Semantische Tags angewendet
- Native HTML-Features genutzt
---
# Lizenz # Lizenz
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)** Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**