diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index 2a2b5b3..fdd2b58 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -14,31 +14,18 @@ title: "Kapitel 1: Geschichte, Grundlagen & HTML" --color-highlight: #d63384; --color-dimmed: #4a4a6a; } -section.invert { - --color-foreground: #fff; -} -section { - font-size: 1.7rem; -} -h1 { - color: #a02060; /* darker raspberry */ -} -section.invert h1 { - color: #fff; -} -h2 { - color: #1f2937; /* dark gray, almost black */ -} +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; -} +pre code { background: transparent; color: inherit; } code { background: #0f0f23; padding: 0.15em 0.4em; @@ -47,9 +34,7 @@ code { } section code:not(.hljs) { color: #d63384 !important; } section code.hljs { color: #f8f8f8 !important; } -a { - color: var(--color-highlight); -} +a { color: var(--color-highlight); } section.klausur { background: repeating-linear-gradient( 135deg, @@ -60,36 +45,15 @@ section.klausur { ) !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; + 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; } @@ -99,622 +63,206 @@ section.erklaerung table { ![bg fit opacity:0.2](./assets/background-termin-2.png) -# Grundlagen IT- und Internettechnik +# Kapitel 1 +## Geschichte, Grundlagen & HTML -**223015c** · Modul "Technik 1" · 1. Semester -Digital- und Medienwirtschaft -Hochschule der Medien Stuttgart - -**Sommersemester 2026** +223015c · Grundlagen IT- und Internettechnik +HdM Stuttgart · SoSe 2026 [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/) --- - - - -![bg fit](./assets/qr/slides-223015c.png) - ---- - -# 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/ - - - ---- - - - - -![bg cover](./assets/diday.png) - ---- - - -# Kapitel 1 -## Geschichte, Grundlagen & HTML +# „Du tippst `librete.ch` ein. Was alles dahinter steht." + + --- -# Die Geschichte des Computers -## Vom ersten Algorithmus bis zum globalen Netzwerk - ---- - - - - -![bg fit](./assets/Ada_Lovelace.jpg) +# Die Pioniere des Computings --- -![bg right:30% contain](./assets/Ada_Lovelace.jpg) +![bg right:35%](./assets/ada-lovelace.jpg) # Ada Lovelace (1815–1852) -**Die erste Programmiererin der Welt** +**Erster Algorithmus in der Geschichte.** -- 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 +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.** --- - - - -![bg fit](./assets/Hollerith.jpg) - - - ---- - -![bg right:30% contain](./assets/Hollerith.jpg) +![bg right:35%](./assets/herman-hollerith.jpg) # Herman Hollerith (1860–1929) -**Erfinder der Lochkarten-Datenverarbeitung** +**Lochkarte als Datenträger.** -- **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 +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**. --- - - - -![bg fit](./assets/hollerith-machine.jpg) - - - ---- - - - - -![bg fit](./assets/hollerith-machine-2.jpg) - - - ---- - - - - -![bg fit](./assets/hollerith-machine-3.jpg) - - - ---- - -# 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 - - - ---- - - - - -![bg fit](./assets/dehomag-hollerith.webp) - - - ---- - -![bg right:30% contain](./assets/IBM_Front_Cover_2021_from_Amazon.jpg) - -# 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 - ---- - - - - -![bg fit](./assets/alan-turing.jpg) - - - ---- +![bg right:35%](./assets/alan-turing.jpg) # Alan Turing (1912–1954) -**Begründer der theoretischen Informatik** +**Theoretisches Fundament moderner Computer.** -- 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" +1936: **Turing-Maschine** — ein gedankliches Modell, das jeden Algorithmus berechnen kann. + +1940er: bricht im **Bletchley Park** die deutsche **Enigma**-Verschlüsselung. Geheim bis 1974. + +1950: **Turing-Test** für maschinelle Intelligenz. --- - - - -![bg contain](./assets/turing-test.png) - - - ---- - -# 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) - - - ---- - -![bg right:40%](./assets/john-von-neumann.png) +![bg right:35%](./assets/von-neumann.jpg) # John von Neumann (1903–1957) -- Geboren in Budapest, Österreich-Ungarn -- Mit 8: Konnte Telefonbücher auswendig -- Mit 22: Doktor in Mathematik +**Die Architektur, die wir heute noch nutzen.** -**Beiträge:** -- Quantenmechanik -- Spieltheorie -- **Computerarchitektur** +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. +John von Neumann war einer der bedeutendsten Universalwissenschaftler des 20. Jahrhunderts — Mathematik, Physik, Wirtschaft, Spieltheorie, Computing. ---- +Sein „First Draft of a Report on the EDVAC" (1945) wurde unautorisiert von Herman Goldstine verteilt. Da der Bericht nur von Neumann's Namen trug, wurde die darin beschriebene Architektur als „Von-Neumann-Architektur" bekannt — obwohl maßgebliche Vorarbeit von Eckert und Mauchly stammte. Bis heute kontrovers. - - +Die zentrale Innovation: „stored-program" — Daten und Code im gleichen Speicher, addressierbar wie Daten. Damit können Programme als Daten manipuliert werden (Compiler, Debugger, JIT) — heute selbstverständlich, damals revolutionär. -![bg](./assets/eniac.avif) - - - ---- - -# 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 +# Von-Neumann-Architektur · 5 Komponenten -**Ohne Von-Neumann-Architektur:** -- Kein Betriebssystem -- Keine Apps -- Kein Multitasking -- Keine Updates bzw. Veränderungen am Computer System +| # | 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 | -**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) +**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. -![bg fit](./assets/First_Computer_Bug,_1947.jpg) +**Kathleen Booth** (1922–2022): erste **Assembly Language** (1947). Notation für Maschinen-Befehle. - ---- - - - - - -![bg fit](./assets/Grace_Hopper.jpg) +**Margaret Hamilton** (*1936): leitete die Software für **Apollo 11**. Prägte den Begriff „Software Engineering". +Drei Personen, die wichtige Schichten oberhalb der Hardware geschaffen haben: ---- +Grace Hopper: +- Arbeitete an Mark I (Harvard) +- Erfand den ersten Compiler (A-0, 1952) — Mensch-lesbare Sprache → Maschinen-Code +- Hat den Begriff „Bug" populär gemacht (echter Motte im Mark II 1947 gefunden, ins Logbuch geklebt) +- Wurde später US Navy Rear Admiral -![bg right:30% contain](./assets/Grace_Hopper.jpg) +Kathleen Booth: +- Erste praktische Assembly Language für die ARC (All-purpose Electronic Computer) am Birkbeck College London +- Vor ihr musste man Befehle in Binär eintippen +- Ihre Notation (z.B. ADD R1, R2) ist im Prinzip noch heute in jeder Assembly-Sprache -# Grace Hopper (1906–1992) +Margaret Hamilton: +- Leitete die On-board Software für Apollo 11 (1969, Mondlandung) +- Berühmt: 5 Minuten vor Mondlandung gibt es Alarm 1202 + 1201 — ihre Software hat Prioritäten richtig gesetzt und die wichtige Aufgabe fortgesetzt +- Sie und ihr Team prägten den Begriff „Software Engineering" 1968 — vorher gab es das als Disziplin nicht -**"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 - - - ---- - -![bg contain right:30%](./assets/Motorola_6800_Assembly_Language.png) - -# 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 - - - ---- - - - - -![bg fit](./assets/hammilton.jpg) - - - ---- - -![bg right:30% contain](./assets/hammilton-portrait.jpg) - -# 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 - - --- @@ -722,1219 +270,529 @@ Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickelnden? # 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 +# Kalter Krieg: das Problem der Kommunikation -| 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 | +**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.** --- - - - -![bg](./assets/arpanet-1969.png) - - - ---- - - - - -![bg](./assets/arpanet.jpg) - ---- - -# 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 - - - ---- - - - - -![bg fit](./assets/mosaic.jpg) - - ---- - - - - -![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg) - - - ---- - -# 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 - ---- - - - - -![bg](./assets/lightbulb-onoff.png) - - - ---- - -# 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 - -### Die kleinste *adressierbare* Informationseinheit - -### 8 bit = 1 Byte - -``` -0 0 1 0 1 0 1 0 = 42 -``` - - - ---- - -# Das Byte - -### 8 bit = 1 Byte - -``` -0 0 0 0 0 0 0 0 = 0 -0 0 0 0 0 0 0 1 = 1 -0 0 0 0 0 0 1 0 = 2 -0 0 0 0 0 0 1 1 = 3 -0 0 0 0 0 1 0 0 = 4 - -0 1 0 0 0 0 0 0 = 64 -0 1 1 1 1 1 1 1 = 127 -1 1 1 1 1 1 1 1 = ? -``` - -2 × 2 × 2 × 2 × 2 × 2 × 2 × 2 = 2⁸ = **256 mögliche Zustände** - - - ---- - -# 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** - - - ---- - - - - -![bg fit](./assets/demos/byte-nibble-hex.png) - - - ---- - - - - -![bg fit](./assets/demos/why-8-bit.png) - - - - - - ---- - -# 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` - - - ---- - - - - -![bg fit](./assets/demos/hex-dec-table.png) - ---- - - - - -![bg fit](./assets/demos/byte-flow.png) - - - ---- - - - - -![bg fit](./assets/demos/three-views.png) - - - ---- - -# 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) +# Internet-Timeline · 4 Milestones -* 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 ---- +| 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 | -# 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 - -![bg right:40% fit](./assets/hdm-link-preview.png) - -```html - - - HdM Webseite - Hochschule der Medien - - - ... - - ... - -``` - -*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.* +1993: Mosaic-Browser → Internet wird *populär*. --- - - - +![bg right:45% contain](./assets/tim-berners-lee.jpg) -# HTML Metadaten – Vertiefung +# Tim Berners-Lee + das WWW (1989) -Der ``-Bereich enthält Informationen *über* das Dokument, nicht den sichtbaren Inhalt. Diese Metadaten steuern Browser-Verhalten, Suchmaschinen-Indexierung und Social-Media-Vorschauen. +**CERN, Genf.** Berners-Lee schlägt ein „Hypertext-System" für die interne Wissenschaftler-Kommunikation vor. -**Kritische Meta-Tags:** +Sein Memo „Information Management: A Proposal" wird abgelehnt. Er baut es trotzdem. -| 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 | +**Drei Standards:** +- **HTTP** (Protokoll) +- **HTML** (Format) +- **URL** (Adresse) -**Open Graph Protocol (Ehemals Facebook, 2010):** -```html - - -``` -Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ... +1991: erste Website (`info.cern.ch`). Bis heute online. -**SEO-Relevanz:** Google nutzt `` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit. +<!-- +Berners-Lee arbeitete am CERN als Informatiker, hatte aber Frustration mit der Fragmentierung der internen Dokumentation. Sein System sollte alle Dokumente verbindbar machen. + +Sein erstes Memo wurde mit „vague but exciting" beantwortet. Er bekam keine offizielle Finanzierung, baute den ersten Webserver + Webbrowser dennoch. + +Diese drei Standards sind bis heute das Web: +- HTTP: wie geht eine Anfrage über das Netz +- HTML: wie sieht ein Dokument aus +- URL: wo finde ich ein Dokument + +Berners-Lee gab das alles **patentfrei** frei. Hätte er die Standards verkauft, wäre das Web vermutlich nie groß geworden — andere Standards (Microsoft Blackbird, AOL-Pages, Apple eWorld) sind alle gescheitert. + +2004 wurde er von Queen Elizabeth zum Sir geadelt. 2016 ACM Turing Award. +--> --- -# HTML-Tags und Attribute +# 1,3 Mio km Unterseekabel -![bg right:35%](./assets/demos/tag-attribut.png) +![bg right:45% contain](./assets/unterseekabel-karte.jpg) -```html -<body> - <p class="wichtig">Das ist ein wichtiger Absatz.</p> - <p>Das ist ein gewöhnlicher Absatz.</p> -</body> -``` +Das Internet ist **physisch.** -| Teil | Bezeichnung | -|------|-------------| -| `<p>` | Opening Tag (öffnendes Tag) | -| `class="wichtig"` | Attribut | -| `Das ist ein wichtiger Absatz.` | Inhalt | -| `</p>` | Closing Tag (schließendes Tag) | +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. + +<!-- +Internet ist nicht „die Cloud" — die Cloud ist Hardware in Rechenzentren, die mit Glasfaser-Kabeln verbunden sind. + +Unterseekabel: +- ~400 aktive Kabel weltweit, ~1,3 Mio km Länge gesamt +- Werden von Spezialschiffen verlegt +- Lebensdauer ~25 Jahre +- Glasfaser-Stränge mit Verstärkern alle ~50–100 km +- Ein einziges Kabel kann 100+ Tbit/s übertragen + +Großbritannien-USA: TAT-1 (1956), erst Telefon. Heute: MAREA (2018), Marea, Dunant — alle mehrere Tbit/s. + +DE-CIX Frankfurt: +- Internet Exchange Point (IXP) — Punkt, wo viele ISPs sich treffen und Daten austauschen +- Größter IXP der Welt nach Datenverkehr +- ~1.000 Mitglieder (ISPs, Content-Provider) +- ~12 Tbit/s im Peak + +Frankfurt hat sich aus historischen Gründen entwickelt (Banken brauchten gute Netzwerk-Anbindung). Heute strategisch wichtig — wer Frankfurt kontrolliert, kontrolliert einen Großteil des europäischen Traffic. +--> --- -# HTML-Tags und Attribute (selbst-schließend) +<!-- _class: lead --> -![bg right:35%](./assets/demos/input-date.png) +# Vom Internet zum Browser-Render -```html -Geburtsdatum <input type="date" /> -``` +<!-- +Pivot. Wir haben gesehen, wie Daten durch das Netzwerk reisen. -| Teil | Bezeichnung | -|------|-------------| -| `<input ...` | Eingabefeld | -| `type="date"` | Attribut *type* mit dem Wert *date* | -| `... />` | Schließendes `/` im *(öffnenden) Tag* enthalten | +Jetzt: was bekommt der Browser eigentlich vom Server? Antwort: HTML. + +Dann: wie ist HTML aufgebaut, was sind die wichtigsten Tags, wie schreibe ich eine gültige Webseite? +--> --- -# Vollständiges Grundgerüst +# Was bekommt der Browser? -![bg right:35%](./assets/demos/grundgeruest.png) +Wenn ihr `librete.ch` eintippt, schickt der Server: ```html <!DOCTYPE html> <html lang="de"> <head> - <title>Portfolio von ... - - + Librete -

Hallo Welt!

-

Das ist mein erster Absatz.

+

Willkommen

+

Dies ist HTML.

``` ---- - -# Die wichtigsten Tags - -| Tag | Bedeutung | -|-----|-----------| -| `

` bis `

` | Überschriften (h1 = größte) | -| `

` | Absatz (Paragraph) | -| ` ... ` | Hyper-Link | -| `` | Bild | -| `