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 |
|---|-------|-------|
| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
| 2 | 10.01.2026 | Netzwerke, Protokolle & **CSS** |
| 3 | 24.01.2026 | Interaktivität & **JavaScript** |
| 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** |
| 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** |
**Format:** Theorie + viele Hands-On-Übungen
**Ziel:** Ihr könnt am Ende eine eigene interaktive Webseite bauen!
**Ziel:** "Gelernte Hilflosigkeit" ablegen
---
<!-- _class: lead -->
# Teil 1: Die Geschichte
## Von der Lochkarte zum Internet
## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus
---
<!-- _header: '' -->
<!-- _footer: '' -->
![bg fit](./assets/Ada_Lovelace_daguerreotype_by_Antoine_Claudet_1843_-_cropped.png)
![bg fit](./assets/Ada_Lovelace.jpg)
<!--
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)
@@ -118,12 +118,17 @@ Antoine Claudet
- Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde
<!--
100 Jahre vor den ersten echten Computern
Analytical Engine wurde nie gebaut
Ada erkannte das Potenzial
Programmiersprache "Ada" nach ihr benannt
Babbage: Mathematiker, besessen von Rechenmaschinen. Erst die Difference Engine, dann die Analytical Engine – nie fertig gebaut, aber revolutionär im Konzept.
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
**Hollerith-Maschinen zeigen:**
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
* Keine
<!--
* **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
Gesichtserkennung, Überwachung, Social Credit System (China)
Verantwortung von TechnikerInnen und MedienarbeiterInnen
@@ -257,7 +262,7 @@ Verantwortung von TechnikerInnen und MedienarbeiterInnen
<!-- _class: lead -->
# Der Zweite Weltkrieg
# Vom Ende des Zweiten Weltkriegs
## Geburt des modernen Computers
---
@@ -281,8 +286,6 @@ Bletchley Park
- 1936: **Turing-Maschine** – theoretisches Modell eines Computers
- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
- 1950: "Computing Machinery and Intelligence" → **Turing-Test**
- 1952: Verurteilung wegen Homosexualität
- Chemische Kastration als "Behandlung"
- **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
**Turings Lösung:** Elektromechanischer Entschlüssler
**Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler
**Ergebnis:**
- 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.
@@ -362,11 +363,6 @@ Church-Turing-These
![bg fit opacity:0.4](./assets/oppenheimer.png)
<!--
Oppenheimer-Filmplakat (2023)
Christopher Nolan
-->
---
# Das Manhattan-Projekt (1942–1945)
@@ -393,8 +389,6 @@ Von Neumann kam 1943 als Berater
# John von Neumann (1903–1957)
**"Das letzte Universalgenie"**
- Geboren in Budapest, Österreich-Ungarn
- Mit 8: Konnte Telefonbücher auswendig
- Mit 22: Doktor in Mathematik
@@ -420,10 +414,10 @@ Arbeitete am Manhattan-Projekt mit
- Implosions-Simulationen
- Nuklearphysik-Gleichungen
**Lösung 1943:** Menschliche "Computer" (meist Frauen!)
**Lösung 1943:** Menschliche "Computer"
→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten
**Zu langsam!** → Bedarf an automatischer Berechnung
**Zu langsam** → Bedarf an automatischer Berechnung
<!--
"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: '' -->
<!-- _footer: '' -->
@@ -573,7 +577,7 @@ Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
- Kein Betriebssystem
- Keine Apps
- Kein Multitasking
- Keine Updates
- Keine Updates bzw. Veränderungen am Computer System
**Die meisten Computer** basieren auf diesem Prinzip:
Laptop, Smartphone, Server, Spielkonsole...
@@ -701,13 +705,6 @@ Latenz: Frankfurt → New York = ~80ms
<!-- _class: lead -->
# Pause
## 15 Minuten
---
<!-- _class: lead -->
# Teil 2: Bits & Bytes
## Die Sprache der Computer
@@ -792,7 +789,7 @@ Farbbild: Rot + Grün + Blau
**Jede Hex-Ziffer = 4 Bits**
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
@@ -833,7 +830,7 @@ CSS-Farben nutzen Hex
<!--
Speicheradressen werden hexadezimal angegeben
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
- **Keine** Programmiersprache!
- Beschreibt **Struktur** einer Webseite
- Tags markieren Inhalt
* **Keine** Programmiersprache
* Am ehesten eine Formattierungssprache
* 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)
@@ -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
<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 |
@@ -878,37 +959,39 @@ Aktuelle Version: HTML5 (seit 2014)
| `Das ist ein Absatz.` | Inhalt |
| `</p>` | Closing Tag (schließendes Tag) |
<!--
Tags = Etiketten
Attribute = Zusatzinfos
Manche Tags sind selbstschließend: <img />
-->
---
# HTML-Tags und Attribute (selbst-schließend)
```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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine erste Seite</title>
<title>Portfolio von ...</title>
<meta name="description" content="Hier gibt es die besten ..." />
<meta name="og:image" content="https://...." />
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz.</p>
<h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz.</p>
</body>
</html>
```
<!--
DOCTYPE: Sagt Browser "das ist HTML5"
html: Wurzelelement
head: Metadaten (nicht sichtbar)
body: Sichtbarer Inhalt
-->
---
# Die wichtigsten Tags
@@ -917,8 +1000,8 @@ body: Sichtbarer Inhalt
|-----|-----------|
| `<h1>` bis `<h6>` | Überschriften (h1 = größte) |
| `<p>` | Absatz (Paragraph) |
| `<a href="...">` | Link |
| `<img src="...">` | Bild |
| `<a href="..."> ... </a>` | Hyper-Link |
| `<img src="..."/>` | Bild |
| `<ul>`, `<ol>`, `<li>` | Listen |
| `<div>` | Container/Box |
| `<span>` | Inline-Container |
@@ -942,159 +1025,7 @@ a = anchor (Anker)
- Extension: "Live Server"
**Option 3: Online-Editoren**
- [https://stackblitz.com](https://stackblitz.com)
- [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>
```
- [https://codepen.io/pen/](https://codepen.io/pen/)
---
@@ -1108,7 +1039,7 @@ Untereinander helfen
| Popup/Modal | `<dialog>` |
| Fortschrittsbalken | `<progress>` |
| Datum-Auswahl | `<input type="date">` |
| Validierung | `required`, `min`, `max` |
| Validierung | Attribute beliebig verknüpfbar `required`, `min`, `max` |
**→ HTML first, JavaScript later!**
@@ -1125,13 +1056,11 @@ Accessibility ist eingebaut
```html
<details>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
```
**Probiert es aus!** Kein JavaScript nötig.
---
# 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:**
@@ -1166,336 +1095,30 @@ Besser als selbstgebaute Modals
2. Erstellt ein Kontaktformular mit:
- `<input type="email">` (automatische Validierung!)
- `<input type="date">`
- `<textarea>`
- `<button type="submit">`
**Tipp:** Browser validiert automatisch!
- `<textarea> ... </textarea>`
- `<button type="submit"> ... </button>`
---
<!-- _class: lead -->
# Zusammenfassung Termin 1
# Mittagspause
## 60 Minuten
**Geschichte:**
- 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
## Netzwerk-Grundlagen
---
# 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/
**Was wir gemacht haben:**
- HTML-Grundstruktur erstellt
- Native HTML-Features genutzt
---
@@ -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
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**