1291 lines
25 KiB
Markdown
1291 lines
25 KiB
Markdown
---
|
||
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"
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #4ecca3;
|
||
--color-dimmed: #4a4a6a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h2 {
|
||
color: var(--color-highlight);
|
||
}
|
||
pre {
|
||
background: #0f0f23;
|
||
color: #4ecca3;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #4ecca3;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a1a2e;
|
||
color: #4ecca3;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: black -->
|
||
|
||
|
||
|
||
# Grundlagen IT- und Internettechnik
|
||
|
||
**223015c** · Modul "Technik 1" · 1. Semester
|
||
Digital- und Medienwirtschaft
|
||
Hochschule der Medien Stuttgart
|
||
|
||
**Wintersemester 2025/26**
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Termin 1 – 20.12.2025
|
||
## Geschichte, Grundlagen & HTML
|
||
|
||
---
|
||
|
||
# Über mich
|
||
|
||
**Michael Czechowski**
|
||
|
||
- Softwareentwickler & IT-Berater
|
||
- Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
|
||
- Hintergrund: Philosophie & Informatik
|
||
- Kontakt: mail@librete.ch
|
||
|
||
<!--
|
||
Kurze Vorstellung
|
||
Praxisbezug betonen
|
||
Fragen jederzeit willkommen
|
||
-->
|
||
|
||
---
|
||
|
||
# Kurze Umfrage
|
||
|
||
**Bitte Hand heben:**
|
||
|
||
1. Wer hat einen Windows-Laptop dabei?
|
||
2. Wer hat einen Mac dabei?
|
||
3. Wer nutzt Linux?
|
||
4. **Wer hat schon mal HTML oder CSS geschrieben?**
|
||
5. Wer kann programmieren (egal welche Sprache)?
|
||
|
||
<!--
|
||
Niveau der Gruppe einschätzen
|
||
Keine falschen Antworten
|
||
OS-Verteilung wichtig für Tools später
|
||
-->
|
||
|
||
---
|
||
|
||
# Kursübersicht
|
||
|
||
**3 Ganztage (10:00 – 16:30 Uhr):**
|
||
|
||
| # | Datum | Thema |
|
||
|---|-------|-------|
|
||
| 1 | 20.12.2025 | Geschichte, Grundlagen & **HTML** |
|
||
| 2 | 10.01.2026 | Netzwerke, Protokolle & **CSS** |
|
||
| 3 | 24.01.2026 | Interaktivität & **JavaScript** |
|
||
|
||
**Format:** Theorie + viele Hands-On-Übungen
|
||
|
||
**Ziel:** Ihr könnt am Ende eine eigene interaktive Webseite bauen!
|
||
|
||
<!--
|
||
Nicht nur theoretische Inhalte
|
||
Praktische Übungen eingebaut
|
||
MedienStudentInnen, nicht InformatikerInnen
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 1: Die Geschichte
|
||
## Von der Lochkarte zum Internet
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1910
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
# 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!)
|
||
|
||
<!--
|
||
Hollerith: Deutsch-amerikanischer Ingenieur
|
||
Inspiration: Jacquard-Webstuhl (Lochkarten für Muster)
|
||
Lochkarte = erstes standardisiertes Datenformat
|
||
Eine Karte = ein Datensatz (eine Person)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1908
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Lochkartenmaschine, ca. 1940
|
||
US Census Bureau
|
||
-->
|
||
|
||
---
|
||
|
||
# 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.
|
||
|
||
<!--
|
||
Thomas J. Watson Sr. → "THINK"-Motto
|
||
IBM = "Big Blue"
|
||
Lochkarten = Standard bis in die 1970er
|
||
Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Hollerith-Maschinen im Dritten Reich
|
||
Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
|
||
-->
|
||
|
||
---
|
||
|
||
# IBM und Nazi-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)
|
||
|
||
<!--
|
||
Kontroverse Geschichte
|
||
IBM profitierte, lieferte Maschinen, wartete sie
|
||
"Technologie ist neutral" – wirklich?
|
||
Wichtige Lektion für MedienethikerInnen
|
||
-->
|
||
|
||
---
|
||
|
||
# Lektionen für heute
|
||
|
||
**Hollerith-Maschinen zeigen:**
|
||
|
||
1. **Daten sind Macht** – Wer Daten kontrolliert, kontrolliert Menschen
|
||
2. **Technologie verstärkt** – Gut UND Böse
|
||
3. **"Neutrale" Tools** sind nie neutral
|
||
|
||
**2025:** Big Data, AI, Social Media → dieselben Fragen
|
||
|
||
<!--
|
||
Facebook, Cambridge Analytica
|
||
Gesichtserkennung, Überwachung
|
||
Verantwortung von TechnikerInnen und MedienarbeiterInnen
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Der Zweite Weltkrieg
|
||
## Geburt des modernen Computers
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Oppenheimer-Filmplakat (2023)
|
||
Christopher Nolan
|
||
-->
|
||
|
||
---
|
||
|
||
# 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)
|
||
|
||
<!--
|
||
Los Alamos, New Mexico
|
||
Geheimes Labor, beste WissenschaftlerInnen der Welt
|
||
Von Neumann kam 1943 als Berater
|
||
-->
|
||
|
||
---
|
||
|
||
|
||
|
||
# John von Neumann (1903–1957)
|
||
|
||
**"Das letzte Universalgenie"**
|
||
|
||
- Geboren in Budapest, Österreich-Ungarn
|
||
- Mit 8: Konnte Telefonbücher auswendig
|
||
- Mit 22: Doktor in Mathematik
|
||
|
||
**Beiträge:**
|
||
- Quantenmechanik
|
||
- Spieltheorie
|
||
- **Computerarchitektur**
|
||
|
||
<!--
|
||
Neumann János Lajos → John von Neumann
|
||
Sprach 7 Sprachen fließend
|
||
Legendäre Anekdoten über sein Gedächtnis
|
||
Arbeitete am Manhattan-Projekt mit
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Problem der Berechnung
|
||
|
||
**Manhattan-Projekt brauchte:**
|
||
- Ballistik-Berechnungen
|
||
- Implosions-Simulationen
|
||
- Nuklearphysik-Gleichungen
|
||
|
||
**Lösung 1943:** Menschliche "Computer" (meist Frauen!)
|
||
→ Mit Taschenrechnern, Tabellen, IBM-Lochkarten
|
||
|
||
**Zu langsam!** → Bedarf an automatischer Berechnung
|
||
|
||
<!--
|
||
"Computer" war ein Job-Titel!
|
||
Meist Mathematikerinnen
|
||
Feynman leitete eine Abteilung davon
|
||
ENIAC-Projekt in Philadelphia sollte helfen
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ENIAC (1945)
|
||
Electronic Numerical Integrator and Computer
|
||
University of Pennsylvania
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
Kam zu spät für Manhattan-Projekt (Krieg war vorbei)
|
||
Aber bewies: Elektronische Berechnung möglich
|
||
Programmiert durch 6 Frauen (ENIAC Girls)
|
||
→ Erste ProgrammiererInnen der Geschichte
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
EDVAC = Electronic Discrete Variable Automatic Computer
|
||
Nachfolger von ENIAC
|
||
Von Neumann schrieb den Bericht
|
||
Daher: "Von-Neumann-Architektur"
|
||
-->
|
||
|
||
---
|
||
|
||
# Von-Neumann-Architektur
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ CPU │
|
||
│ ┌─────────────┐ ┌─────────────────┐ │
|
||
│ │ Rechenwerk │ │ Steuerwerk │ │
|
||
│ │ (ALU) │ │ (Control Unit) │ │
|
||
│ └─────────────┘ └─────────────────┘ │
|
||
└─────────────────────────────────────────┘
|
||
↕ Bus-System ↕
|
||
┌─────────────────┐ ┌──────────────────┐
|
||
│ Speicherwerk │ │ Ein-/Ausgabewerk │
|
||
│ (Memory) │ │ (I/O) │
|
||
└─────────────────┘ └──────────────────┘
|
||
```
|
||
|
||
<!--
|
||
5 Grundkomponenten
|
||
JEDER Computer folgt diesem Prinzip
|
||
Euer Laptop, euer Handy, der Server dieser Präsentation
|
||
-->
|
||
|
||
---
|
||
|
||
# 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!
|
||
|
||
<!--
|
||
ALU = Arithmetic Logic Unit
|
||
Bus = Datenautobahn zwischen Komponenten
|
||
Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
|
||
-->
|
||
|
||
---
|
||
|
||
# Warum ist das wichtig?
|
||
|
||
**Ohne Von-Neumann-Architektur:**
|
||
- Kein Betriebssystem
|
||
- Keine Apps
|
||
- Kein Multitasking
|
||
- Keine Updates
|
||
|
||
**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)
|
||
|
||
<!--
|
||
Harvard-Architektur: AVR, PIC, viele ARM-Prozessoren
|
||
Modified Harvard in modernen CPUs (separate Caches)
|
||
Für Medienwirtschaft: Von-Neumann-Konzept reicht
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# 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
|
||
|
||
<!--
|
||
ARPA (später DARPA) = Pentagon-Forschung
|
||
Sputnik-Schock 1957 → USA investiert in Forschung
|
||
Paul Baran (RAND Corp): Packet Switching
|
||
-->
|
||
|
||
---
|
||
|
||
# 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 |
|
||
|
||
<!--
|
||
ARPANET: 4 Knoten anfangs
|
||
Erste Nachricht: "LO" (Login, Absturz nach 2 Buchstaben!)
|
||
WWW ≠ Internet (WWW ist eine Anwendung AUF dem Internet)
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
ARPANET-Karte 1969
|
||
4 Knoten: UCLA, Stanford, UCSB, Utah
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
CERN = Europäische Organisation für Kernforschung
|
||
Berners-Lee wollte Forschungspapiere verlinken
|
||
WWW war NICHT kommerziell geplant!
|
||
Kostenlos freigegeben → darum existiert es
|
||
-->
|
||
|
||
---
|
||
|
||
# 1,3 Millionen Kilometer Unterseekabel
|
||
|
||
**Heute:**
|
||
|
||
- **5,5 Milliarden** Menschen online
|
||
- **>400** Unterseekabel weltweit
|
||
- **1,3 Mio. km** Kabel unter Wasser
|
||
- Daten reisen mit **Lichtgeschwindigkeit** (Glasfaser)
|
||
|
||
**Das Internet ist physisch!** Keine "Cloud" ohne Kabel.
|
||
|
||
<!--
|
||
Google, Meta, Microsoft besitzen eigene Kabel
|
||
Sabotage-Risiko (Russland, Anker)
|
||
Latenz: Frankfurt → New York = ~80ms
|
||
"Cloud" ist nur jemand anderes Computer
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Pause
|
||
## 15 Minuten
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 2: Bits & Bytes
|
||
## Die Sprache der Computer
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
<!--
|
||
Bit = Binary Digit
|
||
Demonstration: Glühbirne AN/AUS = 1 Bit
|
||
-->
|
||
|
||
---
|
||
|
||
# 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
|
||
|
||
<!--
|
||
Alles Digitale basiert darauf
|
||
Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
|
||
Shannon: Begründer der Informationstheorie
|
||
-->
|
||
|
||
---
|
||
|
||
# Das Byte
|
||
|
||
**8 Bits = 1 Byte**
|
||
|
||
```
|
||
0 1 0 0 1 0 0 1
|
||
```
|
||
|
||
**Wie viele Kombinationen?**
|
||
2⁸ = **256 Möglichkeiten** (0-255)
|
||
|
||
<!--
|
||
BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
|
||
Warum 8 Bits? IBM System/360 (1964) setzte Standard
|
||
2×2×2×2×2×2×2×2 = 256
|
||
-->
|
||
|
||
---
|
||
|
||
# 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**
|
||
|
||
<!--
|
||
1 Byte ist limitiert
|
||
Farbbild: Rot + Grün + Blau
|
||
256³ = 16.777.216 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!
|
||
|
||
<!--
|
||
Hex = Shortcut für Menschen
|
||
1 Byte = 2 Hex-Ziffern (00-FF)
|
||
CSS-Farben nutzen Hex
|
||
-->
|
||
|
||
---
|
||
|
||
# Speicheradressen
|
||
|
||
**64-Bit-System:**
|
||
- Speicheradresse = 64 Bit lang
|
||
- 64 Bit = 16 Hex-Ziffern
|
||
|
||
**Beispiel (vereinfacht, 12 Bit):**
|
||
|
||
| Dezimal | Binär | Hexadezimal |
|
||
|---------|-------|-------------|
|
||
| 258 | 0001 0000 0010 | 102 |
|
||
|
||
**4 Bits = 1 Hex-Ziffer**
|
||
|
||
<!--
|
||
Speicheradressen werden hexadezimal angegeben
|
||
Einfacher zu lesen als binär
|
||
Programmierer:innen arbeiten damit täglich
|
||
-->
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 3: Eure erste Webseite
|
||
## HTML-Grundlagen
|
||
|
||
---
|
||
|
||
# Was ist HTML?
|
||
|
||
**H**yper**T**ext **M**arkup **L**anguage
|
||
|
||
- **Keine** Programmiersprache!
|
||
- Beschreibt **Struktur** einer Webseite
|
||
- Tags markieren Inhalt
|
||
|
||
```html
|
||
<p>Das ist ein Absatz.</p>
|
||
```
|
||
|
||
<!--
|
||
HTML = Auszeichnungssprache (wie Markdown)
|
||
Erfunden 1989 von Tim Berners-Lee
|
||
Aktuelle Version: HTML5 (seit 2014)
|
||
-->
|
||
|
||
---
|
||
|
||
# HTML-Anatomie
|
||
|
||
```html
|
||
<p class="wichtig">Das ist ein Absatz.</p>
|
||
```
|
||
|
||
| Teil | Bezeichnung |
|
||
|------|-------------|
|
||
| `<p>` | Opening Tag (öffnendes Tag) |
|
||
| `class="wichtig"` | Attribut |
|
||
| `Das ist ein Absatz.` | Inhalt |
|
||
| `</p>` | Closing Tag (schließendes Tag) |
|
||
|
||
<!--
|
||
Tags = Etiketten
|
||
Attribute = Zusatzinfos
|
||
Manche Tags sind selbstschließend: <img />
|
||
-->
|
||
|
||
---
|
||
|
||
# Grundgerüst
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Meine erste Seite</title>
|
||
</head>
|
||
<body>
|
||
<h1>Hallo Welt!</h1>
|
||
<p>Das ist mein erster Absatz.</p>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
<!--
|
||
DOCTYPE: Sagt Browser "das ist HTML5"
|
||
html: Wurzelelement
|
||
head: Metadaten (nicht sichtbar)
|
||
body: Sichtbarer Inhalt
|
||
-->
|
||
|
||
---
|
||
|
||
# Die wichtigsten Tags
|
||
|
||
| Tag | Bedeutung |
|
||
|-----|-----------|
|
||
| `<h1>` bis `<h6>` | Überschriften (h1 = größte) |
|
||
| `<p>` | Absatz (Paragraph) |
|
||
| `<a href="...">` | Link |
|
||
| `<img src="...">` | Bild |
|
||
| `<ul>`, `<ol>`, `<li>` | Listen |
|
||
| `<div>` | Container/Box |
|
||
| `<span>` | Inline-Container |
|
||
|
||
<!--
|
||
Semantische Tags wichtig für Accessibility
|
||
h1 sollte nur einmal pro Seite vorkommen
|
||
a = anchor (Anker)
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Werkzeuge einrichten
|
||
|
||
**Option 1: Texteditor + Browser**
|
||
- Notepad, TextEdit oder gedit
|
||
- Speichern als `index.html` → Im Browser öffnen
|
||
|
||
**Option 2: VS Code** (empfohlen)
|
||
- code.visualstudio.com
|
||
- Extension: "Live Server"
|
||
|
||
**Option 3: Online-Editoren**
|
||
- stackblitz.com
|
||
- codepen.io
|
||
|
||
<!--
|
||
Erstmal ohne IDE starten!
|
||
Verstehen: HTML ist nur Text
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Erste HTML-Seite (45 Min)
|
||
|
||
**Aufgabe:**
|
||
|
||
1. Erstelle Datei `index.html`
|
||
2. Schreibe das Grundgerüst (abtippen, nicht kopieren!)
|
||
3. Füge hinzu:
|
||
- Eine Überschrift über dich
|
||
- Einen Absatz mit kurzem Steckbrief
|
||
- Eine Liste deiner Hobbies
|
||
- Ein Bild (aus dem Internet)
|
||
- Einen Link zu einer Webseite
|
||
|
||
**Hilfe:** https://nextlevelshit.github.io/html-over-js/
|
||
|
||
<!--
|
||
Abtippen = besser lernen als Copy-Paste
|
||
Fehler sind erlaubt und wichtig!
|
||
Untereinander helfen
|
||
-->
|
||
|
||
---
|
||
|
||
# Beispiel-Lösung
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Über mich</title>
|
||
</head>
|
||
<body>
|
||
<h1>Max Mustermann</h1>
|
||
<p>Ich studiere Medienwirtschaft an der HdM.</p>
|
||
<h2>Meine Hobbies</h2>
|
||
<ul>
|
||
<li>Musik hören</li>
|
||
<li>Kochen</li>
|
||
<li>Gaming</li>
|
||
</ul>
|
||
<img src="https://placekitten.com/200/200" alt="Katze">
|
||
<a href="https://hdm-stuttgart.de">HdM Website</a>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
---
|
||
|
||
# Native HTML: Mehr als ihr denkt!
|
||
|
||
**Viele Dinge brauchen KEIN JavaScript:**
|
||
|
||
| Funktion | HTML-Element |
|
||
|----------|--------------|
|
||
| Aufklapp-Text | `<details>` + `<summary>` |
|
||
| Popup/Modal | `<dialog>` |
|
||
| Fortschrittsbalken | `<progress>` |
|
||
| Datum-Auswahl | `<input type="date">` |
|
||
| Validierung | `required`, `min`, `max` |
|
||
|
||
**→ HTML first, JavaScript later!**
|
||
|
||
<!--
|
||
Progressive Enhancement
|
||
HTML kann mehr als die meisten denken
|
||
JavaScript nur wenn wirklich nötig
|
||
Accessibility ist eingebaut
|
||
-->
|
||
|
||
---
|
||
|
||
# Beispiel: Details/Summary
|
||
|
||
```html
|
||
<details>
|
||
<summary>Klick mich!</summary>
|
||
<p>Dieser Text war versteckt.</p>
|
||
</details>
|
||
```
|
||
|
||
**Probiert es aus!** Kein JavaScript nötig.
|
||
|
||
---
|
||
|
||
# Beispiel: Dialog
|
||
|
||
```html
|
||
<dialog id="meinDialog">
|
||
<h2>Ein Popup!</h2>
|
||
<p>Das ist ein nativer Dialog.</p>
|
||
<button onclick="this.closest('dialog').close()">
|
||
Schließen
|
||
</button>
|
||
</dialog>
|
||
|
||
<button onclick="document.getElementById('meinDialog').showModal()">
|
||
Dialog öffnen
|
||
</button>
|
||
```
|
||
|
||
<!--
|
||
Minimales JavaScript für öffnen/schließen
|
||
Aber: Accessibility eingebaut (ESC schließt, Fokus-Management)
|
||
Besser als selbstgebaute Modals
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Native HTML Features (30 Min)
|
||
|
||
**Erweitert eure Seite:**
|
||
|
||
1. Fügt ein `<details>`-Element mit verstecktem Text hinzu
|
||
2. Erstellt ein Kontaktformular mit:
|
||
- `<input type="email">` (automatische Validierung!)
|
||
- `<input type="date">`
|
||
- `<textarea>`
|
||
- `<button type="submit">`
|
||
|
||
**Tipp:** Browser validiert automatisch!
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Mittagspause
|
||
## 60 Minuten
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 4: Rechner verbinden
|
||
## Netzwerk-Grundlagen
|
||
|
||
---
|
||
|
||
# Warum Rechner verbinden?
|
||
|
||
**Ein Rechner allein macht nicht glücklich!**
|
||
|
||
- Daten teilen
|
||
- Zusammenarbeiten
|
||
- Kommunizieren
|
||
- Ressourcen teilen (Drucker, Speicher)
|
||
|
||
**Was für Kommunikationsmöglichkeiten kennt ihr?**
|
||
(ohne Internet)
|
||
|
||
<!--
|
||
Interaktive Frage an Studierende
|
||
Antworten sammeln: Brief, Telefon, Fax, Funk...
|
||
-->
|
||
|
||
---
|
||
|
||
# Kommunikationsarten
|
||
|
||
| Kategorie | Beispiel |
|
||
|-----------|----------|
|
||
| **Synchron** | Telefonat, Video-Call |
|
||
| **Asynchron** | E-Mail, Brief, SMS |
|
||
| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
|
||
| **Verbindungslos** | Brief, Postkarte |
|
||
|
||
<!--
|
||
Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
|
||
-->
|
||
|
||
---
|
||
|
||
# Das OSI-Modell
|
||
|
||
**7 Schichten der Netzwerkkommunikation:**
|
||
|
||
| Schicht | Name | Beispiel |
|
||
|---------|------|----------|
|
||
| 7 | Anwendung | HTTP, FTP, SMTP |
|
||
| 6 | Darstellung | Verschlüsselung, Kompression |
|
||
| 5 | Sitzung | Sessions |
|
||
| 4 | Transport | TCP, UDP |
|
||
| 3 | Vermittlung | IP, Routing |
|
||
| 2 | Sicherung | Ethernet, MAC |
|
||
| 1 | Bitübertragung | Kabel, WLAN |
|
||
|
||
<!--
|
||
OSI = Open Systems Interconnection
|
||
ISO-Standard
|
||
Theoretisches Modell
|
||
TCP/IP ist die praktische Implementierung
|
||
-->
|
||
|
||
---
|
||
|
||
# TCP/IP: Die Praxis
|
||
|
||
**Das Internet nutzt TCP/IP (4 Schichten):**
|
||
|
||
| TCP/IP | Entspricht OSI | Protokolle |
|
||
|--------|----------------|------------|
|
||
| Anwendung | 5-7 | HTTP, DNS, SMTP |
|
||
| Transport | 4 | TCP, UDP |
|
||
| Internet | 3 | IP |
|
||
| Netzzugang | 1-2 | Ethernet, WLAN |
|
||
|
||
**TCP/IP = Transmission Control Protocol / Internet Protocol**
|
||
|
||
<!--
|
||
TCP/IP einfacher als OSI
|
||
Praktisch gewachsen, nicht theoretisch geplant
|
||
-->
|
||
|
||
---
|
||
|
||
# IP-Adressen
|
||
|
||
**Jeder Rechner im Netzwerk braucht eine Adresse**
|
||
|
||
**IPv4:** 4 Zahlen (0-255), Punkt-getrennt
|
||
`192.168.1.1`
|
||
|
||
**Problem:** 2³² = nur 4,3 Milliarden Adressen
|
||
→ Reicht nicht für alle Geräte!
|
||
|
||
**IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen
|
||
`2001:0db8:85a3:0000:0000:8a2e:0370:7334`
|
||
|
||
<!--
|
||
Eure IP: ipconfig (Win) / ifconfig (Mac/Linux)
|
||
Private IPs: 192.168.x.x, 10.x.x.x
|
||
Öffentliche IP: Router hat eine
|
||
NAT = Network Address Translation
|
||
-->
|
||
|
||
---
|
||
|
||
# Spezielle IP-Adressen
|
||
|
||
| Adresse | Bedeutung |
|
||
|---------|-----------|
|
||
| `127.0.0.1` | **Localhost** – Ihr eigener Rechner |
|
||
| `192.168.x.x` | Private Adressen (Heimnetz) |
|
||
| `10.x.x.x` | Private Adressen (Firmen) |
|
||
|
||
**Localhost = "Ich selbst"**
|
||
→ Perfekt für Web-Entwicklung!
|
||
|
||
<!--
|
||
Localhost für lokale Entwicklung
|
||
Private IPs werden nicht im Internet geroutet
|
||
Router macht NAT (Network Address Translation)
|
||
-->
|
||
|
||
---
|
||
|
||
# Ports: Die Türnummern
|
||
|
||
**IP-Adresse = Hausnummer**
|
||
**Port = Wohnungstür**
|
||
|
||
| Port | Dienst |
|
||
|------|--------|
|
||
| 80 | HTTP (Web) |
|
||
| 443 | HTTPS (Web, verschlüsselt) |
|
||
| 22 | SSH (Terminal) |
|
||
| 25 | SMTP (E-Mail senden) |
|
||
|
||
**Beispiel:** `192.168.1.1:8080`
|
||
(IP-Adresse : Port)
|
||
|
||
<!--
|
||
Ein Server kann viele Dienste anbieten
|
||
Ports 0-1023 = "well-known" (reserviert)
|
||
Ports 1024-65535 = frei nutzbar
|
||
-->
|
||
|
||
---
|
||
|
||
# Routing: Der Weg durchs Netz
|
||
|
||
**Router = Postamt**
|
||
- Entscheidet, wohin Pakete gehen
|
||
- Findet besten Weg
|
||
- Pakete können verschiedene Wege nehmen!
|
||
|
||
**Traceroute:** Zeigt den Weg
|
||
```bash
|
||
traceroute google.de # Mac/Linux
|
||
tracert google.de # Windows
|
||
```
|
||
|
||
<!--
|
||
Live-Demo: traceroute zu google.de
|
||
Zeigt alle Router auf dem Weg
|
||
Pakete können verschiedene Wege nehmen
|
||
Adaptives Routing bei Auslastung
|
||
-->
|
||
|
||
---
|
||
|
||
# HTTP: Das Web-Protokoll
|
||
|
||
**H**yper**T**ext **T**ransfer **P**rotocol
|
||
|
||
```
|
||
Browser Server
|
||
| |
|
||
|---- GET /index.html --------->|
|
||
| |
|
||
|<------ 200 OK + HTML ---------|
|
||
| |
|
||
```
|
||
|
||
**Methoden:**
|
||
- `GET` – Daten abrufen
|
||
- `POST` – Daten senden
|
||
- `PUT` – Daten aktualisieren
|
||
- `DELETE` – Daten löschen
|
||
|
||
<!--
|
||
Stateless: Jede Anfrage ist unabhängig
|
||
Request → Response
|
||
HTTPS = HTTP + TLS-Verschlüsselung
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Netzwerk erkunden (20 Min)
|
||
|
||
**Terminal öffnen:** PowerShell (Win) / Terminal (Mac/Linux)
|
||
|
||
```bash
|
||
ipconfig # IP-Adresse (Win)
|
||
ifconfig # IP-Adresse (Mac/Linux)
|
||
ping google.de # Erreichbarkeit testen
|
||
tracert google.de # Weg zum Server (Win)
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Teil 5: HTML vertiefen
|
||
## Semantik & Formulare
|
||
|
||
---
|
||
|
||
# Semantisches HTML
|
||
|
||
**Nicht alles ist ein `<div>`!**
|
||
|
||
| Statt | Besser |
|
||
|-------|--------|
|
||
| `<div class="header">` | `<header>` |
|
||
| `<div class="nav">` | `<nav>` |
|
||
| `<div class="main">` | `<main>` |
|
||
| `<div class="footer">` | `<footer>` |
|
||
| `<div class="article">` | `<article>` |
|
||
|
||
**Warum?** Accessibility, SEO, Wartbarkeit
|
||
|
||
<!--
|
||
ScreenReader nutzen semantische Tags
|
||
Google nutzt sie für SEO
|
||
Code wird lesbarer
|
||
-->
|
||
|
||
---
|
||
|
||
# Semantisches Grundgerüst
|
||
|
||
```html
|
||
<body>
|
||
<header>
|
||
<nav>
|
||
<a href="/">Home</a>
|
||
<a href="/about">Über uns</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<article>
|
||
<h1>Hauptinhalt</h1>
|
||
<p>...</p>
|
||
</article>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2025 Meine Webseite</p>
|
||
</footer>
|
||
</body>
|
||
```
|
||
|
||
---
|
||
|
||
# Formulare: Input-Typen
|
||
|
||
```html
|
||
<form>
|
||
<input type="text" placeholder="Name">
|
||
<input type="email" placeholder="E-Mail">
|
||
<input type="password" placeholder="Passwort">
|
||
<input type="number" min="0" max="100">
|
||
<input type="date">
|
||
<input type="color">
|
||
<input type="range" min="0" max="100">
|
||
<button type="submit">Absenden</button>
|
||
</form>
|
||
```
|
||
|
||
**Browser validiert automatisch!** (type="email" prüft @)
|
||
|
||
<!--
|
||
Viele Typen, die Arbeit abnehmen
|
||
Keyboard passt sich an (Handy)
|
||
Validierung kostenlos
|
||
-->
|
||
|
||
---
|
||
|
||
# Hands-On: Komplette Seite (60 Min)
|
||
|
||
**Baut eine "Über mich"-Seite mit:**
|
||
|
||
1. Semantisches Grundgerüst (header, nav, main, footer)
|
||
2. Navigation mit Links zu Abschnitten
|
||
3. Über-mich-Abschnitt mit Bild
|
||
4. Hobbies-Liste
|
||
5. Kontaktformular (Name, E-Mail, Nachricht, Button)
|
||
|
||
**Ziel:** Vollständige, valide HTML-Seite
|
||
|
||
---
|
||
|
||
# Fleißaufgabe bis 10.01.
|
||
|
||
**Erweitert eure Seite:**
|
||
|
||
1. Fügt mindestens 3 weitere Abschnitte hinzu
|
||
2. Nutzt `<details>` für FAQ-Bereich
|
||
3. Erstellt zweite HTML-Datei und verlinkt sie
|
||
4. Bonus: Fügt Tabelle mit Stundenplan ein
|
||
|
||
**Ressourcen:**
|
||
- MDN Web Docs: https://developer.mozilla.org/de/
|
||
- HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
|
||
|
||
---
|
||
|
||
<!-- _class: lead -->
|
||
|
||
# Fragen & Diskussion
|
||
|
||
**Nächster Termin:** 10.01.2026 – CSS & Netzwerke
|
||
|
||
**Kontakt:** mail@librete.ch
|
||
|
||
---
|
||
|
||
# Zusammenfassung Termin 1
|
||
|
||
**Geschichte:**
|
||
- Hollerith → IBM → Nazi-Deutschland → Verantwortung
|
||
- Manhattan-Projekt → Von Neumann → Computer-Architektur
|
||
- ARPANET → Internet → WWW
|
||
|
||
**Technik:**
|
||
- Bits & Bytes, Hexadezimal
|
||
- Von-Neumann-Architektur
|
||
- IP-Adressen, Ports, HTTP
|
||
|
||
---
|
||
|
||
# Zusammenfassung Termin 1 (Praxis)
|
||
|
||
**Was wir gemacht haben:**
|
||
- HTML-Grundstruktur erstellt
|
||
- Semantische Tags angewendet
|
||
- Native HTML-Features genutzt
|
||
|
||
---
|
||
|
||
# Lizenz
|
||
|
||
Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
|
||
|
||
Basiert auf Material von:
|
||
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
|
||
- Michael Czechowski
|
||
|
||
Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
|