---
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/)
---
---
# Kursübersicht
**Kapitel:**
1. Geschichte, Grundlagen & **HTML**
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
3. Interaktivität, Animationen & **JavaScript**
**Ziel:** "Gelernte Hilflosigkeit" ablegen
---
# Ressourcen zum Selbstlernen
* **CODE CRISPIES: https://codecrispi.es/**
* Online Code-Editor: https://codepen.io/pen/
* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
* Flexbox-Spiel: https://flexboxfroggy.com/
* Grid-Spiel: https://cssgridgarden.com/
---
---
# Kapitel 1
## Geschichte, Grundlagen & HTML
---
# Die Geschichte des Computers
## 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)
---
# 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)
**Problem:** Millionen von Berechnungen nötig für:
- Ballistik-Berechnungen
- Implosions-Simulationen
- Nuklearphysik-Gleichungen
**Lösung 1943:** Menschliche "Computer"
→ Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten
**Zu langsam** → Bedarf an automatischer Berechnung
**Schlüsselfigur:** 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**
---
---
# 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-Neumann-Architektur (1945)
**Die zentrale Idee: Programme und Daten im selben Speicher**
**Vorher (z.B. ENIAC):** Programme durch Umstecken von Kabeln
→ Tagelange Arbeit für jedes neue Problem
**Nachher:** Programme als austauschbare Daten im Speicher
→ Grundlage aller Computer: Laptop, Smartphone, Server
---
# Von-Neumann: 5 Komponenten
| Komponente | Funktion | Heute |
|------------|----------|-------|
| **Rechenwerk (ALU)** | Führt Berechnungen durch | Teil der CPU |
| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf | Teil der CPU |
| **Speicherwerk** | Speichert Programme UND Daten | RAM + SSD |
| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk | USB, WiFi, HDMI |
| **Bus-System** | Verbindet alle Komponenten | PCIe, SATA, DDR |
**Kernprinzip:** Programme und Daten teilen sich denselben Speicher.
→ Computer wird **universell programmierbar** (nicht mehr für ein Problem verdrahtet)
Bus = Adressbus (wohin?) + Datenbus (was?) + Steuerbus (lesen/schreiben?)
---
# 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)
---
---
---
# 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
---
# Kathleen Booth (1922–2022)
**Die erste Stufe über Maschinencode**
- Entwickelt am **Birkbeck College, London**
- Mnemonische Befehle statt Binärzahlen (`MOV`, `ADD`, `JMP`)
- Jeder Befehl entspricht direkt einer CPU-Instruktion
- Hardwarenah, aber für Menschen lesbar
**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
---
---
# 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
---
# Lektionen für heute
**Technologie ist nie neutral**
- Big Data ermöglicht Massenüberwachung
- KI-Systeme übernehmen Entscheidungen über Menschen
- Social Media schädigt nachweislich die psychische Gesundheit Minderjähriger
- PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre
→ Verantwortung liegt bei denen, die Technologie bauen, einsetzen und regulieren
---
# Vom Militär zum Netz
## Die Entstehung des Internets
---
# Kalter Krieg: Das Problem der Kommunikation
**1957:** Sputnik-Schock → USA investiert massiv in Forschung
→ **ARPA** (Advanced Research Projects Agency) wird gegründet
**Das Problem:** Zentrale Netzwerke sind verwundbar
→ Ein Treffer = gesamte Kommunikation tot
**Die Idee (Paul Baran, 1964):** Packet Switching
→ Nachrichten in kleine Pakete aufteilen
→ Jedes Paket findet seinen eigenen Weg
→ Kein einzelner Punkt kann das Netz zerstören
---
# 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)
Keine "Cloud" ohne Kabel – das Internet ist physische Infrastruktur.
**Five Eyes** (USA, UK, Kanada, Australien, Neuseeland):
→ Zapfen Unterseekabel an – globale Massenüberwachung
---
# Bit & Byte
## Die Sprache der Computer
---
---
# Das Bit
### Kleinste *logische* 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 Bit = 1 Byte**
```
0 0 1 0 1 0 1 0
```
**Wie viele Kombinationen?**
2⁸ = 2 x 2 x 2 x 2 x 2 x 2 x 2 x 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**
---
2⁸
2⁴ 2⁴
16 16
0-F 0-F
---
# Hexadezimal: Lesbarkeit
**Für den Menschen ungeeignet:**
`01001101 01010000 00110011`
**Hexadezimal (Base 16):**
`4D 50 33` (= "MP3" in ASCII)
**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
0-9, A-F (A=10, B=11, ..., F=15)
`4 = 0100` `D = 1101`
`5 = 0101` `0 = 0000`
`3 = 0011` `3 = 0011`
---
---
# Wo begegnet Ihnen Hex-Code?
| Kontext | Beispiel |
|---------|----------|
| CSS-Farben | `#FF5733` |
| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
| Fehlercodes | `0x80070005` |
| Speicheradressen | `0xA04F20` |
| Unicode | `U+00E4` (ä) |
---
# Bit vs. Byte: Die Verwirrung
**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
| Einheit (Bit) | Einheit (Byte) |
|---------------|----------------|
| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte = 8.000 Bit |
| 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
| 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |
100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
---
# Unsere 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
HdM Webseite - Hochschule der Medien
...
...
```
*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen 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 (Ehemals Facebook, 2010):**
```html
```
Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, 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 wichtiger Absatz.</p>
<p>Das ist ein gewöhnlicher Absatz.</p>
</body>
```
| Teil | Bezeichnung |
|------|-------------|
| `<p>` | Opening Tag (öffnendes Tag) |
| `class="wichtig"` | Attribut |
| `Das ist ein wichtiger Absatz.` | Inhalt |
| `</p>` | Closing Tag (schließendes Tag) |
---
# HTML-Tags und Attribute (selbst-schließend)
```html
Geburtsdatum <input type="date" />
```
| 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 ...