public/uni

Files

Michael Czechowski e561d669dc add 223015c course: internettechnologien

3 termine covering internet history, html, css, javascript, networking

2025-12-30 11:31:07 +01:00

27 KiB

Raw Blame History

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

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Grundlagen IT- und Internettechnik	Michael Czechowski – HdM Stuttgart – WS 2025/26	Termin 1: Geschichte, Grundlagen & HTML

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

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

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

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!)

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.

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

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

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

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)

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

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

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

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

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

Das Bit

Kleinste Informationseinheit

0 oder 1
AN oder AUS
Strom fließt oder nicht

BIT = Binary DigIT (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

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)

HyperText Markup Language

Keine Programmiersprache
Am ehesten eine Formattierungssprache

Beschreibt Struktur und Aufbau einer Webseite

<p>Das ist ein Absatz.</p>

<input type="date"/>

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: <element attribute="value"> ... </element>
- Ö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
  - <b> ... </b> fett-gedruckter Text (inline)
  - <a> ... </a> Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
  - <body> ... </body> Sichtbarer Teil eines HTML-Dokuments
  - <details> ... </details> Collapsable / Akkordion / Aufklapp-Text
- Selbst-schließend
  - <img /> Bild, Vektorgrafik etc.
  - <input /> Eingabefeld
  - <meta /> Metadaten

Darstellungsebene und Metadaten

<html>
  <head>
    METADATEN
  </head>
  
  <body>
    DARSTELLUNGSEBENE
  </body>
</html>

Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
- <head> ... </head> Metadaten für den Browser, zum Teilen, für Suchmaschinen
- <body> ... </body> Darzustellender Inhalt, Text, Formulare

HTML Metadaten

<html>
  <head>
    <title>Im Browsertab als Überschrift sichtbar</title>
    
    <meta name="description" content="" />
    
    <meta name="og:image" content="https://...." />
  </head>
   
  ...
   
</html>

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

<body>
  <p class="wichtig">Das ist ein Absatz.</p>
</body>

Teil	Bezeichnung
`<p>`	Opening Tag (öffnendes Tag)
`class="wichtig"`	Attribut
`Das ist ein Absatz.`	Inhalt
`</p>`	Closing Tag (schließendes Tag)

HTML-Tags und Attribute (selbst-schließend)

<input type="" />

Teil	Bezeichnung
`<input ...`	Eingabefeld
`type="date"`	Attribut type mit dem Wert date
`... />`	Schließendes `/` im (öffnenden) Tag enthalten

Vollständiges Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Portfolio von ...</title>
  <meta name="description" content="Hier gibt es die besten ..." />
  <meta name="og:image" content="https://...." />
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist mein erster Absatz.</p>
</body>
</html>

Die wichtigsten Tags

Tag	Bedeutung
`<h1>` bis `<h6>`	Überschriften (h1 = größte)
`<p>`	Absatz (Paragraph)
`<a href="..."> ... </a>`	Hyper-Link
`<img src="..."/>`	Bild
`<ul>`, `<ol>`, `<li>`	Listen
`<div>`	Container/Box
`<span>`	Inline-Container
`<input type="...">`	Eingabefeld/Input

Hands-On: Werkzeuge einrichten

Option 1: Texteditor + Browser

Notepad, TextEdit oder DreamWeaver
Speichern als index.html → Im Browser öffnen

Option 2: VS Code (empfohlen)

https://code.visualstudio.com
Extension: "Live Server"

Option 3: Online-Editoren

https://codepen.io/pen/

Natives HTML

Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. "Code smell".

Funktion	HTML-Element
Aufklapp-Text	`<details>` + `<summary>`
Popup/Modal	`<dialog>`
Fortschrittsbalken	`<progress>`
Datum-Auswahl	`<input type="date">`
Validierung	Attribute beliebig verknüpfbar `required`, `min`, `max`

Beispiel: Details/Summary

<details>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details

Beispiel: Details/Summary (geöffnet)

<details open>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box

Beispiel: Button

<button>Add to favorites</button>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button

Beispiel: Input/Eingabefeld

<input
  type="text"
  maxlength="8"
  size="10" />

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input

Beispiel: Dialog

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog

Fragen & Diskussion

Nächster Termin: 10.01.2026 – CSS & Netzwerke

Kontakt: mail@librete.ch

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/

27 KiB Raw Blame History Unescape Escape