uni/slides/223015c/01-geschichte-grundlagen-html.md

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Grundlagen IT- und Internettechnik (223015c)	Michael Czechowski – HdM Stuttgart – SoSe 2026	Kapitel 1: Geschichte, Grundlagen & HTML

<style> :root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.7rem; } h1 { color: #a02060; } section.invert h1 { color: #fff; } h2 { color: #1f2937; } pre { background: #0f0f23; color: #d63384; border-radius: 8px; border-left: 3px solid #d63384; } pre code { background: transparent; color: inherit; } code { background: #0f0f23; padding: 0.15em 0.4em; border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } section code:not(.hljs) { color: #d63384 !important; } section code.hljs { color: #f8f8f8 !important; } a { color: var(--color-highlight); } section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, #fce4ec 40px, #fff 40px, #fff 80px ) !important; } @media print { section.klausur { background: #fce4ec !important; } } section.aufgabe { background: #fce4ec !important; } section.aufgabe footer { display: none; } section.erklaerung { font-size: 1.1rem; } section.erklaerung h1 { font-size: 1.5rem; color: #a02060; margin-bottom: 0.3rem; } section.erklaerung ul, section.erklaerung ol { font-size: 1.0rem; line-height: 1.4; } section.erklaerung p { font-size: 1.0rem; line-height: 1.4; } section.erklaerung table { font-size: 0.9rem; } </style>

Kapitel 1

Geschichte, Grundlagen & HTML

223015c · Grundlagen IT- und Internettechnik HdM Stuttgart · SoSe 2026

https://librete.ch/hdm/223015c/

---

„Du tippst librete.ch ein. Was alles dahinter steht."

---

Die Pioniere des Computings

---

Ada Lovelace (1815–1852)

Erster Algorithmus in der Geschichte.

Babbage entwarf 1830er die Analytical Engine — eine programmierbare Rechenmaschine. Ada Lovelace beschrieb 1843, wie man Bernoulli-Zahlen damit berechnen könnte.

→ Ihre Notes sind der erste publizierte Algorithmus, der für eine Maschine geschrieben wurde.

---

Herman Hollerith (1860–1929)

Lochkarte als Datenträger.

1890er: US-Volkszählung. Hollerith entwickelt eine Maschine, die Daten auf Lochkarten speichert und liest. 8 Jahre Auswertung → 1 Jahr.

→ Seine Firma wird 1911 zu CTR, 1924 zu IBM.

---

Alan Turing (1912–1954)

Theoretisches Fundament moderner Computer.

• 1936 — Turing-Maschine
• 1940er — Bletchley Park, Enigma-Bruch (geheim bis 1974)
• 1950 — Turing-Test

---

John von Neumann (1903–1957)

Die Architektur, die wir heute noch nutzen.

1945: das EDVAC-Papier — Daten und Programm im selben Speicher.

Vorher: ENIAC musste für jedes neue Programm physisch umgekabelt werden. 6.000 Schalter, oft Wochen.

Nachher: einfach den Speicher überschreiben.

---

Von-Neumann-Architektur · 5 Komponenten

#	Komponente	Aufgabe
1	Steuerwerk (Control Unit)	holt Befehl, entscheidet was zu tun ist
2	Rechenwerk (ALU)	führt Rechnung / Vergleich aus
3	Speicher (Memory)	hält Daten und Programm
4	Eingabe / Ausgabe (I/O)	Tastatur, Bildschirm, Netzwerk
5	Bus (Verbindung)	transportiert Daten zwischen allen

Schlüssel: Speicher hält beides — Daten + Programm. (Stored Program.)

---

Hopper, Booth, Hamilton

Grace Hopper (1906–1992): erster Compiler (1952). „Submarine of code." US Navy Admiral.

Kathleen Booth (1922–2022): erste Assembly Language (1947). Notation für Maschinen-Befehle.

Margaret Hamilton (*1936): leitete die Software für Apollo 11. Prägte den Begriff „Software Engineering".

---

Vom Militär zum Netz

---

Kalter Krieg: das Problem der Kommunikation

Atomare Bedrohung in den 1960ern.

Klassisches Telefonnetz ist zentral — ein Knoten down, ganzer Bezirk down.

Paul Baran (RAND, 1962): wenn das Netz dezentral ist und Daten in kleinen Paketen reisen, überlebt es einzelne Ausfälle.

→ Packet Switching statt Circuit Switching.

---

Internet-Timeline · 4 Milestones

Jahr	Was	Was hat es verändert
1969	ARPANET	Erstes paket-vermitteltes Netzwerk, 4 Knoten
1971	Email (Ray Tomlinson)	Erste Nutzung des @-Zeichens
1983	TCP/IP	Wurde Standard-Protokoll des ARPANET
1989	WWW (Berners-Lee, CERN)	HTML, HTTP, URL — das Web wie wir es kennen

1993: Mosaic-Browser → Internet wird populär.

---

Tim Berners-Lee + das WWW (1989)

CERN, Genf. Berners-Lee schlägt ein „Hypertext-System" für die interne Wissenschaftler-Kommunikation vor.

Sein Memo „Information Management: A Proposal" wird abgelehnt. Er baut es trotzdem.

Drei Standards:

• HTTP (Protokoll)
• HTML (Format)
• URL (Adresse)

1991: erste Website (info.cern.ch). Bis heute online.

---

1,3 Mio km Unterseekabel

Das Internet ist physisch.

400+ Unterseekabel transportieren ~99% des interkontinentalen Datenverkehrs.

DE-CIX Frankfurt: einer der größten Internet-Knoten der Welt. >12 Tbit/s im Peak.

→ Auch eure WhatsApp-Nachricht nach New York fließt durch ein Glasfaserkabel im Atlantik.

---

Vom Internet zum Browser-Render

---

Was bekommt der Browser?

Wenn ihr librete.ch eintippt, schickt der Server:

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Librete</title>
</head>
<body>
  <h1>Willkommen</h1>
  <p>Dies ist HTML.</p>
</body>
</html>

Der Browser parsed das, rendert es als Pixel, und ihr seht eine Seite.

---

HTML-Anatomie

<a href="https://librete.ch">Mein Link</a>

Bestandteil	Was
<a	Opening-Tag mit Tag-Namen
href="https://..."	Attribut (Name + Wert)
>	Ende des Opening-Tags
Mein Link	Inhalt des Elements
</a>	Closing-Tag

Alles zusammen = ein Element.

---

Wichtige Attribute

Attribut	Wo	Bedeutung
id	jedes Element	eindeutige ID auf der Seite
class	jedes Element	für CSS (mehrere möglich)
href	<a>, <link>	Ziel-URL
src	<img>, <script>	Quell-URL
alt	<img>	Alt-Text für A11y!
title	jedes Element	Tooltip beim Hover
lang	meist <html>	Sprache des Inhalts

---

Self-closing Tags

<img src="foto.jpg" alt="Sonnenuntergang">
<br>
<input type="text" name="username">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

Diese Tags haben kein Closing. Sie sind „leer" — der Browser-Render erzeugt das Pixel-Resultat allein aus dem Opening-Tag.

---

Document-Struktur: das Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Seite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hallo Welt</h1>
  <!-- alle sichtbaren Inhalte -->
</body>
</html>

---

---

Semantische HTML-Tags

Tag	Bedeutung	Beispiel
<header>	Kopfbereich (Logo, Nav)	oben auf der Seite
<nav>	Navigations-Menü	Hauptmenü
<main>	Hauptinhalt	das eigentliche Thema
<section>	Thematischer Abschnitt	Kapitel der Seite
<article>	eigenständiger Inhalt	Blog-Post, News-Beitrag
<aside>	Seiten-Inhalt	Sidebar, Werbung
<footer>	Fußbereich	Impressum, Copyright

Vorteil: Screen-Reader, Suchmaschinen + andere Entwickler verstehen die Struktur.

---

Häufige inline-Tags

Tag	Was
<a>	Hyperlink
<strong>	wichtig (fett dargestellt)
<em>	hervorgehoben (kursiv)
<span>	semantisch neutrale Inline-Container
<code>	Inline-Code
<br>	Zeilenumbruch
<img>	Bild

vs Block-Tags: <h1>–<h6>, <p>, <div>, <ul>/<ol>/<li>, <table>, alle semantischen.

---

Listen, Bilder, Links

<!-- Unsortierte Liste -->
<ul>
  <li>Erstes Item</li>
  <li>Zweites Item</li>
</ul>

<!-- Bild mit Alt-Text -->
<img src="./foto.jpg" alt="Sonnenuntergang über Stuttgart">

<!-- Link -->
<a href="https://hdm-stuttgart.de" target="_blank" rel="noopener">
  HdM Stuttgart
</a>

---

Formulare: Inputs + Labels

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Absenden</button>
</form>

Immer: <label> mit for → <input> mit gleichem id. Pflicht für A11y.

---

---

Selbstlernen — Inspector live

1. Öffnet eure Lieblings-Webseite
2. Rechtsklick → Untersuchen (oder F12)
3. Tab Elements / Inspector öffnen
4. HTML-Baum durchklicken
5. Findet: das <header>, das <main>, mindestens ein <a href="...">

Bonus: Element auswählen → in der Console: $0.style.background = 'pink'. Was passiert?

---

Zusammenfassung

Pioniere: Lovelace (erster Algorithmus), Hollerith (Lochkarte), Turing (Theorie), von Neumann (Architektur), Hopper/Booth/Hamilton (Sprache + SoftwareEng).

Internet: ARPANET 1969 → TCP/IP 1983 → WWW 1989. Heute physisch über 1,3 Mio km Unterseekabel.

HTML: Tag-Struktur (<tag attr>Inhalt</tag>). Document-Grundgerüst (DOCTYPE + head + body). Semantische Tags (header, nav, main, …) als A11y-Foundation.

→ In Kap 2: wie reisen die Bytes durchs Netz — und wie wird HTML mit CSS hübsch + barrierefrei?