libretech
351e3dfc23
per user-request einen branch der main-content UND rewrite-content trägt — saubere separierung statt symlink/merge-conflict. struktur: - slides/<course>/ → main-content restored, eigene assets (kein new-demo-leak) - slides/<course>-2026/ → rewrite-content, eigene assets (komplett kopiert + new demos) Makefile: COURSES += 223015b-2026 223015c-2026 dhbw-2026 mit eigenen NAME/KAPITEL/DEPLOY/KLAUSUR-konfig. Klausur für b+c=1, dhbw=leer. Deploy-paths /hdm/223015b-2026 etc. make build durchlaufen für alle 6 decks, 0 fehler. dedup: 223015c+dhbw assets identisch in beiden ordnern (kein neu-demos auf b ergänzt). 223015b 86 → 120 files in -2026 (= +34 neue eroeffner/usb-c-drei-achsen/container-vs-codec/etc).
26 KiB
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 |
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
- Öffnet eure Lieblings-Webseite
- Rechtsklick → Untersuchen (oder F12)
- Tab Elements / Inspector öffnen
- HTML-Baum durchklicken
- 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?