---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: "Kapitel 1: Geschichte, Grundlagen & HTML"
---
# Grundlagen IT- und Internettechnik
**223015c** · Modul "Technik 1" · 1. Semester
Digital- und Medienwirtschaft
Hochschule der Medien Stuttgart
**Sommersemester 2026**
[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
---
---
# Kapitel 1
## Geschichte, Grundlagen & HTML
---
# Kursübersicht
**Themen:**
1. Geschichte, Grundlagen & **HTML**
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
3. Interaktivität, Animationen & **JavaScript**
**Format:** Theorie + viele Hands-On-Übungen
**Ziel:** "Gelernte Hilflosigkeit" ablegen
---
# Teil 1: Die Geschichte
## Vom ersten Algorithmus bis zum globalen Netzwerk
---
---
# Ada Lovelace (1815–1852)
**Die erste Programmiererin der Welt**
- Erste Programmiererin – 100 Jahre vor dem ersten Computer
- Zusammenarbeit mit Charles Babbage an der *Analytical Engine*
- Ihre Notizen: umfangreicher als sein Originaltext
- Erst 1953 wiederentdeckt und gewürdigt
---
---
# Herman Hollerith (1860–1929)
**Erfinder der Lochkarten-Datenverarbeitung**
- **Problem:** Volkszählung 1880 brauchte 7 Jahre zur Auswertung
- **Lösung:** Lochkarten + elektromechanische Tabelliermaschine
- **Ergebnis:** 1890 Census in 2,5 Jahren – 5 Mio. Dollar gespart
- Gründete Firma, die später zu IBM wurde
---
---
---
---
# Die Geburt von IBM
**Vom Einmannbetrieb zum Technologieriesen**
- 1896: Hollerith gründet *Tabulating Machine Company*
- 1911: Fusion zur *Computing-Tabulating-Recording Company* (CTR)
- 1924: Umbenennung in **International Business Machines (IBM)**
- Dominiert die nächsten 50 Jahre die Computerwelt
---
---
# IBM und NS-Deutschland
**Technologie im Dienst des Terrors**
- **Dehomag:** Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
- Volkszählung 1933: Identifikation von Juden
- Verwaltung der Konzentrationslager
- Logistik der Deportationen
→ Edwin Black: *"IBM and the Holocaust"* (2001)
---
# Lektionen für heute
**Technologie ist nie neutral**
- Big Data ermöglicht Massenüberwachung
- KI-Systeme übernehmen Entscheidungen über Menschen
- Social Media schädigt die psychische Gesundheit Minderjähriger
- PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre
→ Verantwortung liegt bei denen, die Technologie bauen und einsetzen
---
# Vom Ende des Zweiten Weltkriegs
## Geburt des modernen Computers
---
---
# Alan Turing (1912–1954)
**Begründer der theoretischen Informatik**
- 1936: Turing-Maschine – definiert, was Computer können (und was nicht)
- 1940er: Enigma-Entschlüsselung mit elektromechanischen Maschinen
- 1950: Turing-Test – erste formale Definition von "Künstlicher Intelligenz"
---
---
# 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)
- 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"
→ 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
---
---
---
# Grace Hopper (1906–1992)
**"Amazing Grace" – Pionierin der Softwareentwicklung**
- **1944:** Programmierte den Mark I (Harvard)
- **1952:** Entwickelte den ersten **Compiler** (A-0)
- **1959:** Mitentwicklung von **COBOL**
- **Rear Admiral** der US Navy
**Der erste "Bug":**
1947 fand sie eine echte Motte im Mark II
→ "Debugging" wurde zum Begriff
---
---
# Margaret Hamilton (*1936)
**Pionierin des Software Engineering**
- **1965–1969:** Leitete das Software-Team am MIT für Apollo
- Entwickelte die **Flugsoftware für Apollo 11**
- Prägte den Begriff **"Software Engineering"**
- Software verhinderte Abbruch der Mondlandung
**Apollo 11 (1969):**
Ihre Fehlererkennung rettete die Mission, als der Computer überlastet wurde
---
# Von-Neumann-Architektur (1945)
**Programme und Daten im selben Speicher**
1. **Rechenwerk (ALU)** – rechnet
2. **Steuerwerk** – steuert den Ablauf
3. **Speicherwerk** – speichert Code UND Daten
4. **Ein-/Ausgabe** – Tastatur, Bildschirm, Netzwerk
5. **Bus-System** – verbindet alles
→ Grundlage aller Computer: Laptop, Smartphone, Server
---
# 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!
---
# Von-Neumann-Architektur: Bedeutung
**Ohne Von-Neumann-Architektur:**
- Kein Betriebssystem
- Keine Apps
- Kein Multitasking
- Keine Updates bzw. Veränderungen am Computer System
**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
- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
**Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
---
# 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
---
---
---
# Wo begegnet euch Hex?
| Kontext | Beispiel |
|---------|----------|
| CSS-Farben | `#FF5733` |
| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
| Fehlercodes | `0x80070005` |
| Speicheradressen | `0xA04F20` |
| Unicode | `U+00E4` (ä) |
→ Hex ist überall in der Technik
---
# Bits vs. Bytes: Die Verwirrung
**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes
| Einheit (Bit) | Einheit (Byte) |
|---------------|----------------|
| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte |
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte |
| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte |
**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download
**Aber:** Computer rechnen binär (Basis 2)!
---
# Warum zeigt meine 1TB-Festplatte nur 931GB?
**Zwei Zählweisen:**
| Dezimal (Hersteller) | Binär (Computer) |
|---------------------|------------------|
| Kilo = 1.000 | Kibi = 1.024 (2¹⁰) |
| Mega = 1.000.000 | Mebi = 1.048.576 (2²⁰) |
| Giga = 1.000.000.000 | Gibi = 1.073.741.824 (2³⁰) |
| Tera = 1.000.000.000.000 | Tebi = 1.099.511.627.776 (2⁴⁰) |
**Das Problem:**
- Hersteller verkauft: 1 TB = 1.000.000.000.000 Bytes
- Computer rechnet: 1 TiB = 1.099.511.627.776 Bytes
- Differenz: **9,1%** → zeigt nur **931 GB**
---
# Teil 3: Eure erste Webseite
## HTML-Grundlagen
---
# Was ist HTML? (1/2)
**H**yper**T**ext **M**arkup **L**anguage
* **Keine** Programmiersprache
* Am ehesten eine Formattierungssprache
* Beschreibt **Struktur und Aufbau** einer Webseite
* ```html
Das ist ein Absatz.
```
---
# 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*
* Während wir in HTML von Elementen bzw. *elements* sprechen, so werden sie in JavaScript (JS) eher als *nodes* gelesen.
---
# HTML-Anatomie (1/2)
Formattierungssprache
* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten
* Syntax: ` ... `
* Ö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**
* ` ... ` fett-gedruckter Text (inline)
* ` ... ` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
* ` ... ` Sichtbarer Teil eines HTML-Dokuments
* ` ... ` Collapsable / Akkordion / Aufklapp-Text
* **Selbst-schließend**
* `` Bild, Vektorgrafik etc.
* `` Eingabefeld
* `` Metadaten
---
# Darstellungsebene und Metadaten
```html
METADATEN
DARSTELLUNGSEBENE
```
* Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
* ` ... ` Metadaten für den Browser, zum Teilen, für Suchmaschinen
* ` ... ` Darzustellender Inhalt, Text, Formulare
---
# HTML Metadaten
```html
Im Browsertab als Überschrift sichtbar
...
```
* *Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*
* *Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*
---
# HTML Metadaten – Vertiefung
Der ``-Bereich enthält Informationen *über* das Dokument, nicht den sichtbaren Inhalt. Diese Metadaten steuern Browser-Verhalten, Suchmaschinen-Indexierung und Social-Media-Vorschauen.
**Kritische Meta-Tags:**
| Tag | Funktion | Beispiel |
|-----|----------|----------|
| `` | Browser-Tab, Suchergebnis-Titel | `<title>HdM Stuttgart` |
| `` | Zeichenkodierung (Umlaute!) | `` |
| `` | Mobile Darstellung | `width=device-width, initial-scale=1` |
| `` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |
**Open Graph Protocol (Facebook, 2010):**
```html
```
Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
**SEO-Relevanz:** Google nutzt `` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.
---
# HTML-Tags und Attribute
```html
<body>
<p class="wichtig">Das ist ein Absatz.</p>
</body>
```
| Teil | Bezeichnung |
|------|-------------|
| `<p>` | Opening Tag (öffnendes Tag) |
| `class="wichtig"` | Attribut |
| `Das ist ein Absatz.` | Inhalt |
| `</p>` | Closing Tag (schließendes Tag) |
---
# 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 |
---
# Vollständiges Grundgerüst
```html
<!DOCTYPE html>
<html lang="de">
<head>
<title>Portfolio von ...