From e561d669dcf8085c529c8580b3e38386016ab7f7 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 11:31:07 +0100 Subject: [PATCH] add 223015c course: internettechnologien 3 termine covering internet history, html, css, javascript, networking --- ...-20-termin-1-geschichte-grundlagen-html.md | 1242 +++++++++++++ ...01-10-termin-2-netzwerke-protokolle-css.md | 1560 +++++++++++++++++ ...-24-termin-3-interaktivitaet-javascript.md | 1064 +++++++++++ .../slides/assets/8bit-P-character.png | Bin 0 -> 2046482 bytes .../223015c/slides/assets/Ada_Lovelace.jpg | Bin 0 -> 947945 bytes ...type_by_Antoine_Claudet_1843_-_cropped.png | Bin 0 -> 1489642 bytes .../slides/assets/Bletchley_Park_Mansion.jpg | Bin 0 -> 498020 bytes .../assets/First_Computer_Bug,_1947.jpg | Bin 0 -> 367374 bytes ...emini_Generated_Image_9an75b9an75b9an7.png | Bin 0 -> 3625308 bytes .../223015c/slides/assets/Grace_Hopper.jpg | Bin 0 -> 79609 bytes courses/223015c/slides/assets/Hollerith.jpg | Bin 0 -> 210739 bytes .../IBM_Front_Cover_2021_from_Amazon.jpg | Bin 0 -> 481716 bytes courses/223015c/slides/assets/alan-turing.jpg | Bin 0 -> 108938 bytes .../223015c/slides/assets/arpanet-1969.png | Bin 0 -> 3285304 bytes courses/223015c/slides/assets/arpanet.jpg | Bin 0 -> 73663 bytes .../slides/assets/background-termin-1.png | Bin 0 -> 3625308 bytes .../slides/assets/background-termin-2.png | Bin 0 -> 3365767 bytes .../slides/assets/background-termin-3.png | Bin 0 -> 2618175 bytes .../slides/assets/dehomag-hollerith.webp | Bin 0 -> 133664 bytes courses/223015c/slides/assets/eniac.avif | Bin 0 -> 114064 bytes .../slides/assets/hammilton-portrait.jpg | Bin 0 -> 131498 bytes courses/223015c/slides/assets/hammilton.jpg | Bin 0 -> 347256 bytes .../slides/assets/hex-dec-lookup-table.png | Bin 0 -> 2122330 bytes .../slides/assets/hollerith-machine-2.jpg | Bin 0 -> 114786 bytes .../slides/assets/hollerith-machine-3.jpg | Bin 0 -> 153242 bytes .../slides/assets/hollerith-machine.jpg | Bin 0 -> 46506 bytes .../slides/assets/hollerith-machine.tif | Bin 0 -> 1702562 bytes .../slides/assets/john-von-neumann.png | Bin 0 -> 593653 bytes .../223015c/slides/assets/lightbulb-onoff.png | Bin 0 -> 2124998 bytes courses/223015c/slides/assets/oppenheimer.png | Bin 0 -> 538593 bytes 30 files changed, 3866 insertions(+) create mode 100644 courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md create mode 100644 courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md create mode 100644 courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md create mode 100644 courses/223015c/slides/assets/8bit-P-character.png create mode 100644 courses/223015c/slides/assets/Ada_Lovelace.jpg create mode 100644 courses/223015c/slides/assets/Ada_Lovelace_daguerreotype_by_Antoine_Claudet_1843_-_cropped.png create mode 100644 courses/223015c/slides/assets/Bletchley_Park_Mansion.jpg create mode 100644 courses/223015c/slides/assets/First_Computer_Bug,_1947.jpg create mode 100644 courses/223015c/slides/assets/Gemini_Generated_Image_9an75b9an75b9an7.png create mode 100644 courses/223015c/slides/assets/Grace_Hopper.jpg create mode 100644 courses/223015c/slides/assets/Hollerith.jpg create mode 100644 courses/223015c/slides/assets/IBM_Front_Cover_2021_from_Amazon.jpg create mode 100644 courses/223015c/slides/assets/alan-turing.jpg create mode 100644 courses/223015c/slides/assets/arpanet-1969.png create mode 100644 courses/223015c/slides/assets/arpanet.jpg create mode 100644 courses/223015c/slides/assets/background-termin-1.png create mode 100644 courses/223015c/slides/assets/background-termin-2.png create mode 100644 courses/223015c/slides/assets/background-termin-3.png create mode 100644 courses/223015c/slides/assets/dehomag-hollerith.webp create mode 100644 courses/223015c/slides/assets/eniac.avif create mode 100644 courses/223015c/slides/assets/hammilton-portrait.jpg create mode 100644 courses/223015c/slides/assets/hammilton.jpg create mode 100644 courses/223015c/slides/assets/hex-dec-lookup-table.png create mode 100644 courses/223015c/slides/assets/hollerith-machine-2.jpg create mode 100644 courses/223015c/slides/assets/hollerith-machine-3.jpg create mode 100644 courses/223015c/slides/assets/hollerith-machine.jpg create mode 100644 courses/223015c/slides/assets/hollerith-machine.tif create mode 100644 courses/223015c/slides/assets/john-von-neumann.png create mode 100644 courses/223015c/slides/assets/lightbulb-onoff.png create mode 100644 courses/223015c/slides/assets/oppenheimer.png diff --git a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md new file mode 100644 index 0000000..40e4cb0 --- /dev/null +++ b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md @@ -0,0 +1,1242 @@ +--- +marp: true +theme: gaia +paginate: true +backgroundColor: #fff +header: "Grundlagen IT- und Internettechnik" +footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26" +title: "Termin 1: Geschichte, Grundlagen & HTML" +--- + + + + + + + + +![bg fit opacity:0.2](./assets/background-termin-2.png) + +# Grundlagen IT- und Internettechnik + +**223015c** · Modul "Technik 1" · 1. Semester +Digital- und Medienwirtschaft +Hochschule der Medien Stuttgart + +**Wintersemester 2025/26** + +[https://git.librete.ch/hdm/223015c](https://git.librete.ch/hdm/223015c) + +--- + + + +# Termin 1 – 20.12.2025 +## Geschichte, Grundlagen & HTML + +--- + +# Kursübersicht + +**3 Termine (10:00 – 16:30 Uhr):** + +| # | Datum | Thema | +|---|-------|-------| +| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** | +| 2 | 10.01.2026 | Netzwerke, Protokolle, **semantisches HTML** & **CSS** | +| 3 | 24.01.2026 | Interaktivität, Animationen & **JavaScript** | + +**Format:** Theorie + viele Hands-On-Übungen + +**Ziel:** "Gelernte Hilflosigkeit" ablegen + +--- + + + +# Teil 1: Die Geschichte +## Von der Geburtsstunde des erten Computer-Algorithmus bis zur Vernetzung des gesamten Globus + +--- + + + + +![bg fit](./assets/Ada_Lovelace.jpg) + + + +--- + +![bg right:30% contain](./assets/Ada_Lovelace.jpg) + +# Ada Lovelace (1815–1852) + +**Die erste Programmiererin der Welt** + +- Arbeitete mit **Charles Babbage** an der "Analytical Engine" +- Ihre »Notes« zu Babbages Maschine: **umfangreicher als sein Text** +- 1843 publiziert – unter Initialen »A.A.L.« Ada Augusta Lovelace +- Erst **1953** wiederentdeckt und gewürdigt +- Schrieb **1843** den ersten Algorithmus für eine Maschine, die nie fertiggestellt wurde + + + +--- + + + + +![bg fit](./assets/Hollerith.jpg) + + + +--- + +![bg right:30% contain](./assets/Hollerith.jpg) + +# Herman Hollerith (1860–1929) + +**Das Problem:** US-Volkszählung 1880 dauerte **7 Jahre** zur Auswertung + +**Die Lösung:** Lochkarten + elektromechanische Tabelliermaschine + +**1890 Census:** 62 Millionen Menschen in **2,5 Jahren** gezählt + +**Ersparnis:** 5 Millionen Dollar (damals!) + + + +--- + + + + +![bg fit](./assets/hollerith-machine.jpg) + + + +--- + + + + +![bg fit](./assets/hollerith-machine-3.jpg) + + + +--- + +# Die Geburt von IBM + +**1896:** Hollerith gründet "Tabulating Machine Company" + +**1911:** Fusion → "Computing-Tabulating-Recording Company" (CTR) + +**1924:** Umbenennung in **International Business Machines (IBM)** + +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 + +**Dehomag** = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter) + +**Einsatz:** +- 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 +* Steigerung der Rechenleistung ist immer dann nötig, wenn die angehäuften Datenmengen nicht mehr von Menschenhand berechnet werden können + + + + +--- + + + +# Vom Ende des Zweiten Weltkriegs +## Geburt des modernen Computers + +--- + + + + +![bg fit](./assets/alan-turing.jpg) + + + +--- + +# Alan Turing (1912–1954) + +**Vater der theoretischen Informatik** + +- 1936: **Turing-Maschine** – theoretisches Modell eines Computers +- 1939–1945: **Bletchley Park** – Enigma-Entschlüsselung +- 1950: "Computing Machinery and Intelligence" → **Turing-Test** +- **2013:** Posthume königliche Begnadigung + + + +--- + + + + +![bg cover](./assets/Bletchley_Park_Mansion.jpg) + + + +--- + +# Enigma & Bletchley Park + +**Das Problem:** Deutsche Enigma-Maschine erzeugte 158 Trillionen mögliche Einstellungen + +**Turings Lösung:** "Bombe" Elektro-mechanischer Entschlüssler + +**Ergebnis:** +- Alliierten konnten deutschen Funkverkehr mitlesen + +**Geheim bis 1970er!** Turing starb ohne Anerkennung. + + + +--- + +# Die Turing-Maschine (1936) + +**Theoretisches Modell eines Computers:** + +``` +┌─────────────────────────────────────────┐ +│ ... │ 0 │ 1 │ 1 │ 0 │ 1 │ 0 │ ... │ ← Unendliches Band +└─────────────────────────────────────────┘ + ↑ + ┌─────────────┐ + │ Lese-/ │ + │ Schreibkopf │ + └─────────────┘ + ↓ + ┌─────────────┐ + │ Zustand │ ← Endliche Zustände + └─────────────┘ +``` + +**Beweis:** Alles Berechenbare kann so berechnet werden! +→ Grundlage für **alle** modernen Computer + + + +--- + + + + +![bg fit opacity:0.4](./assets/oppenheimer.png) + +--- + +# 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) + + + +--- + +![bg right:40%](./assets/john-von-neumann.png) + +# 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 + + + +--- + + + + +![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 + + + +--- + + + + + +![bg fit](./assets/First_Computer_Bug,_1947.jpg) + + +--- + + + + + +![bg fit](./assets/Grace_Hopper.jpg) + + + +--- + +![bg right:30% contain](./assets/Grace_Hopper.jpg) + +# 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 + + + +--- + + + + +![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 + + + +--- + +# Von Neumanns Idee (1945) + +**"First Draft of a Report on the EDVAC"** + +**Kernidee:** Programm und Daten im **selben Speicher** + +**Vorher:** Hardware = Programm (Umstecken) +**Nachher:** Software = austauschbar (laden) + +→ **Gespeichertes Programm** = Revolution + + + +--- + +# Von-Neumann-Architektur + +``` +┌─────────────────────────────────────────┐ +│ CPU │ +│ ┌─────────────┐ ┌─────────────────┐ │ +│ │ Rechenwerk │ │ Steuerwerk │ │ +│ │ (ALU) │ │ (Control Unit) │ │ +│ └─────────────┘ └─────────────────┘ │ +└─────────────────────────────────────────┘ + ↕ Bus-System ↕ +┌─────────────────┐ ┌──────────────────┐ +│ Speicherwerk │ │ Ein-/Ausgabewerk │ +│ (Memory) │ │ (I/O) │ +└─────────────────┘ └──────────────────┘ +``` + + + +--- + + + +# 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 | + + + +--- + + + + +![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 + + + +--- + +# 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 + +--- + + + + +![bg](./assets/lightbulb-onoff.png) + + + +--- + +# 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 + + + +--- + + + + +![bg fit](./assets/hex-dec-lookup-table.png) + +--- + + + + +![bg fit](./assets/8bit-P-character.png) + +--- + +# 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-Tags und Attribute + +```html + +

Das ist ein Absatz.

+ +``` + +| Teil | Bezeichnung | +|------|-------------| +| `

` | Opening Tag (öffnendes Tag) | +| `class="wichtig"` | Attribut | +| `Das ist ein Absatz.` | Inhalt | +| `

` | Closing Tag (schließendes Tag) | + +--- + +# HTML-Tags und Attribute (selbst-schließend) + +```html + +``` + +| Teil | Bezeichnung | +|------|-------------| +| `` | Schließendes `/` im *(öffnenden) Tag* enthalten | + +--- + +# Vollständiges Grundgerüst + +```html + + + + Portfolio von ... + + + + +

Hallo Welt!

+

Das ist mein erster Absatz.

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

` bis `

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

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