---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik"
footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
title: "Termin 1: Geschichte, Grundlagen & HTML"
---
# Grundlagen IT- und Internettechnik
**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Wintersemester 2025/26**
[https://git.librete.ch/hdm/223015c](https://git.librete.ch/hdm/223015c)
---
# Termin 1 – 20.12.2025
## Geschichte, Grundlagen & HTML
---
# Kursübersicht
**3 Termine (10:00 – 16:30 Uhr):**
| # | Datum | Thema |
|---|-------|-------|
| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
| 2 | 10.01.2026 | Netzwerke, Protokolle & **CSS** |
| 3 | 24.01.2026 | Interaktivität & **JavaScript** |
**Format:** Theorie + viele Hands-On-Übungen
**Ziel:** Ihr könnt am Ende eine eigene interaktive Webseite bauen!
---
# Teil 1: Die Geschichte
## Von der Lochkarte zum Internet
---
---
# Herman Hollerith (1860–1929)
**Das Problem:** US-Volkszählung 1880 dauerte **7 Jahre** zur Auswertung
**Die Lösung:** Lochkarten + elektromechanische Tabelliermaschine
**1890 Census:** 62 Millionen Menschen in **2,5 Jahren** gezählt
**Ersparnis:** 5 Millionen Dollar (damals!)
---
---
---
# Die Geburt von IBM
**1896:** Hollerith gründet "Tabulating Machine Company"
**1911:** Fusion → "Computing-Tabulating-Recording Company" (CTR)
**1924:** Umbenennung in **International Business Machines (IBM)**
IBM dominiert die nächsten 50 Jahre die Computerwelt.
---
---
# IBM und NS-Deutschland
**Dehomag** = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
**Einsatz:**
- Volkszählung 1933 (Identifikation von Juden)
- Verwaltung der Konzentrationslager
- Logistik der Deportationen
**Edwin Black:** *"IBM and the Holocaust"* (2001)
---
# 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
---
# Der Zweite Weltkrieg
## Geburt des modernen Computers
---
---
# Alan Turing (1912–1954)
**Vater der theoretischen Informatik**
- 1936: **Turing-Maschine** – theoretisches Modell eines Computers
- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung
- 1950: "Computing Machinery and Intelligence" → **Turing-Test**
**Tragisches Ende:**
- 1952: Verurteilung wegen Homosexualität
- Chemische Kastration als "Behandlung"
- 1954: Tod durch Zyanid (vermutlich Suizid)
- **2013:** Posthume königliche Begnadigung
---
# Enigma & Bletchley Park
**Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen
**Turings Lösung:** Die "Bombe" – elektromechanischer 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.
---
# Die Turing-Maschine (1936)
**Theoretisches Modell eines Computers:**
```
┌─────────────────────────────────────────┐
│ ... │ 0 │ 1 │ 1 │ 0 │ 1 │ 0 │ ... │ ← Unendliches Band
└─────────────────────────────────────────┘
↑
┌─────────────┐
│ Lese-/ │
│ Schreibkopf │
└─────────────┘
↓
┌─────────────┐
│ Zustand │ ← Endliche Zustände
└─────────────┘
```
**Beweis:** Alles Berechenbare kann so berechnet werden!
→ Grundlage für **alle** modernen Computer
---
---
# Das Manhattan-Projekt (1942–1945)
**Ziel:** Bau der ersten Atombombe
**Problem:** Berechnung von Implosionswellen
→ Millionen von Berechnungen nötig
**Team:**
- J. Robert Oppenheimer (Leitung)
- Richard Feynman (Rechenabteilung)
- **John von Neumann** (Mathematik & Stoßwellen)
---
# John von Neumann (1903–1957)
**"Das letzte Universalgenie"**
- Geboren in Budapest, Österreich-Ungarn
- Mit 8: Konnte Telefonbücher auswendig
- Mit 22: Doktor in Mathematik
**Beiträge:**
- Quantenmechanik
- Spieltheorie
- **Computerarchitektur**
---
# Das Problem der Berechnung
**Manhattan-Projekt brauchte:**
- Ballistik-Berechnungen
- Implosions-Simulationen
- Nuklearphysik-Gleichungen
**Lösung 1943:** Menschliche "Computer" (meist Frauen!)
→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten
**Zu langsam!** → Bedarf an automatischer Berechnung
---
---
# ENIAC (1945)
**Electronic Numerical Integrator and Computer**
- **30 Tonnen**, 167 m² Fläche
- **18.000 Vakuumröhren**
- 5.000 Additionen pro Sekunde
- Programmierung durch **Umstecken von Kabeln**
**Problem:** Bei jedem neuen Problem → Wochen Umverkabelung
---
# Von Neumanns Idee (1945)
**"First Draft of a Report on the EDVAC"**
**Kernidee:** Programm und Daten im **selben Speicher**
**Vorher:** Hardware = Programm (Umstecken)
**Nachher:** Software = austauschbar (laden)
→ **Gespeichertes Programm** = Revolution
---
# Von-Neumann-Architektur
```
┌─────────────────────────────────────────┐
│ CPU │
│ ┌─────────────┐ ┌─────────────────┐ │
│ │ Rechenwerk │ │ Steuerwerk │ │
│ │ (ALU) │ │ (Control Unit) │ │
│ └─────────────┘ └─────────────────┘ │
└─────────────────────────────────────────┘
↕ Bus-System ↕
┌─────────────────┐ ┌──────────────────┐
│ Speicherwerk │ │ Ein-/Ausgabewerk │
│ (Memory) │ │ (I/O) │
└─────────────────┘ └──────────────────┘
```
---
# Die 5 Komponenten
| Komponente | Funktion |
|------------|----------|
| **Rechenwerk (ALU)** | Führt Berechnungen durch |
| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
| **Speicherwerk** | Speichert Programme UND Daten |
| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
| **Bus-System** | Verbindet alle Komponenten |
**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
---
# Warum ist das wichtig?
**Ohne Von-Neumann-Architektur:**
- Kein Betriebssystem
- Keine Apps
- Kein Multitasking
- Keine Updates
**Die meisten Computer** basieren auf diesem Prinzip:
Laptop, Smartphone, Server, Spielkonsole...
**Ausnahme:** Mikrocontroller & DSPs nutzen oft die **Harvard-Architektur**
(separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)
---
# Vom Militär zum Netz
## Die Entstehung des Internets
---
# Das Problem (1960er)
**Kalter Krieg:**
- Was passiert bei einem Nuklearangriff?
- Zentrale Kommunikation → ein Treffer = alles tot
**DARPA** (Defense Advanced Research Projects Agency):
→ Dezentrales Netzwerk, das Angriffe überlebt
---
# Internet-Timeline
| Jahr | Meilenstein |
|------|-------------|
| **1966** | ARPANET-Projekt startet |
| **1969** | Erste Verbindung: UCLA <-> Stanford |
| **1974** | TCP/IP-Protokoll entwickelt |
| **1983** | ARPANET wechselt zu TCP/IP |
| **1989** | Tim Berners-Lee erfindet das WWW |
| **1993** | Erster grafischer Browser (Mosaic) |
| **1995** | Kommerzialisierung, Amazon/eBay gegründet |
---
---
# Das WWW (1989)
**Tim Berners-Lee** am CERN (Genf)
**Problem:** WissenschaftlerInnen können Dokumente nicht verlinken
**Lösung:**
- **HTML** – Auszeichnungssprache für Dokumente
- **HTTP** – Protokoll zum Übertragen
- **URL** – Eindeutige Adressen
**1991:** Erste Webseite geht online
---
# 1,3 Millionen Kilometer Unterseekabel
**Heute:**
- **5,5 Milliarden** Menschen online
- **>400** Unterseekabel weltweit
- **1,3 Mio. km** Kabel unter Wasser
- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
**Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
---
# Pause
## 15 Minuten
---
# Teil 2: Bits & Bytes
## Die Sprache der Computer
---
---
# Das Bit
**Kleinste Informationseinheit**
- **0 oder 1**
- AN oder AUS
- Strom fließt oder nicht
**BIT** = **B**inary Dig**IT** (Binärziffer)
Geprägt 1948 von Claude Shannon
---
# Das Byte
**8 Bits = 1 Byte**
```
0 1 0 0 1 0 0 1
```
**Wie viele Kombinationen?**
2⁸ = **256 Möglichkeiten** (0-255)
---
# Was kann man mit 256 Zuständen machen?
- **256 Zeichen** (Buchstaben, Zahlen, Symbole)
- **256 Graustufen** (0 = Schwarz, 255 = Weiß)
- **256 Lautstärkestufen**
- **Zahlen 0-255**
**Für Farbe:** 3 Bytes pro Pixel (RGB)
R=0-255, G=0-255, B=0-255 → **16,7 Millionen Farben**
---
# Hexadezimal: Lesbarkeit
**Binär ist unleserlich:**
`01001101 01010000 00110011`
**Hexadezimal (Base 16):**
`4D 50 33` (= "MP3" in ASCII)
**Jede Hex-Ziffer = 4 Bits**
0-9, A-F (A=10, B=11, ..., F=15)
**Ihr kennt das:** `#FF0000` = Rot in CSS!
---
---
---
# Speicheradressen
**64-Bit-System:**
- Speicheradresse = 64 Bit lang
- 64 Bit = 16 Hex-Ziffern
**Beispiel (vereinfacht, 12 Bit):**
| Dezimal | Binär | Hexadezimal |
|---------|-------|-------------|
| 258 | 0001 0000 0010 | 102 |
**4 Bits = 1 Hex-Ziffer**
---
# Teil 3: Eure erste Webseite
## HTML-Grundlagen
---
# Was ist HTML?
**H**yper**T**ext **M**arkup **L**anguage
- **Keine** Programmiersprache!
- Beschreibt **Struktur** einer Webseite
- Tags markieren Inhalt
```html
Das ist ein Absatz.
```
---
# HTML-Anatomie
```html
Das ist ein Absatz.
```
| Teil | Bezeichnung |
|------|-------------|
| `` | Opening Tag (öffnendes Tag) |
| `class="wichtig"` | Attribut |
| `Das ist ein Absatz.` | Inhalt |
| `
` | Closing Tag (schließendes Tag) |
---
# Grundgerüst
```html
Meine erste Seite
Hallo Welt!
Das ist mein erster Absatz.
```
---
# Die wichtigsten Tags
| Tag | Bedeutung |
|-----|-----------|
| `` bis `` | Überschriften (h1 = größte) |
| `
` | Absatz (Paragraph) |
| `` | Link |
| `
` | Bild |
| `
HdM Website ``` --- # Native HTML: Mehr als ihr denkt! **Viele Dinge brauchen KEIN JavaScript:** | Funktion | HTML-Element | |----------|--------------| | Aufklapp-Text | `
` + `