public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
64e67b7034a91a9ebbd20668ae620699f9d1a50b
uni/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
Michael Czechowski 64e67b7034 restructure 223015c slides: move a11y to termin-1, reorganize termin-2 
termin-1:
- add accessibility (a11y) section with wcag principles

termin-2:
- move dns section earlier (before osi/tcp-ip theory)
- reorganize network fundamentals flow
- remove a11y section (moved to termin-1)
- update osi merksatz to "dualen"
2026-01-09 21:04:11 +01:00

29 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 (223015c) Michael Czechowski – HdM Stuttgart – WS 2025/26 Termin 2: Netzwerke, Protokolle & CSS
<style> :root { --color-foreground: #1a1a2e; --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 */ } pre { background: #0f0f23; color: #d63384; border-radius: 8px; border-left: 3px solid #d63384; } pre code { background: transparent; color: inherit; } code { background: #1a1a2e; color: #d63384; padding: 0.15em 0.4em; border-radius: 4px; } a { color: var(--color-highlight); } section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, #fce4ec 40px, #fff 40px, #fff 80px ) !important; } section.klausur footer { display: none; } section.aufgabe { background: #fce4ec !important; } section.aufgabe footer { display: none; } </style>

bg fit opacity:0.2

Grundlagen IT- und Internettechnik

223015c · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart

Wintersemester 2025/26

https://librete.ch/hdm/223015c/

bg fit

Termin 2 – 10.01.2026

Netzwerke, Protokolle & CSS

Agenda

Teil 1:

  • Netzwerke (OSI, TCP/IP)
  • DNS: Wie funktionieren Domain-Namen?
  • HTTP(S) im Detail

Teil 2:

  • CSS-Grundlagen
  • "Barrierefreiheit" (a11y, WCAG)
  • Selektoren & Spezifität
  • Hands-On: Styling

Ressourcen zum Selbstlernen

Teil 1: Grundbegriffe

Netzwerk und Internet

Warum Rechner verbinden?

  • Daten und Informationen teilen
  • Zusammenarbeiten & Kollaboration
  • Ressourcen teilen (Drucker, Speicher, andere Geräte)
  • Kommunikation

Kommunikationsarten

Kategorie Beispiel
Synchron Telefonat, Video-Call
Asynchron E-Mail, Brief, SMS
Verbindungsorientiert Telefon (Leitung aufbauen)
Verbindungslos Brief, Postkarte

IP-Adressen

Jeder Rechner im Netzwerk braucht eine Adresse

IPv4: 4 Zahlen (0-255), Punkt-getrennt 192.168.1.1

Problem: 2⁸·2⁸·2⁸·2⁸ = 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

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)

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)

Routing: Der Weg durchs Netz

Router = Postamt

  • Entscheidet, wohin Pakete gehen
  • Findet besten Weg
  • Pakete können verschiedene Wege nehmen!

Traceroute: Zeigt den Weg

traceroute google.de     # Mac/Linux
tracert google.de        # Windows

DNS: Domain Name System

Das Telefonbuch des Internets

Das Problem

Menschen: www.hdm-stuttgart.de Computer: https://212.132.79.37:443

DNS = Domain Name System → Übersetzt Namen in IP-Adressen

DNS-Hierarchie

                  (Root)
                     . 
                   / | \
                 /   |   \
               .de .org .com
               /           \
         hdm-stuttgart   google
              |            |
            www           mail

FQDN: www.hdm-stuttgart.de. (mit Punkt am Ende!)

DNS-Auflösung

1. Browser fragt lokalen DNS-Resolver
2. Resolver fragt Root-Server → ".de ist bei..."
3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
4. Resolver fragt hdm-Server → "www = 212.132.79.37"
5. Resolver cached Antwort
6. Browser verbindet zu 212.132.79.37

Caching: Antworten werden gespeichert → Schneller bei wiederholten Anfragen

DNS-Records

Typ Bedeutung Beispiel
A IPv4-Adresse www → 212.132.79.37
AAAA IPv6-Adresse www → 2001:db8::1
CNAME Alias blog → www.example.com
MX Mail-Server @ → mail.example.com
TXT Text (Verifikation) "v=spf1..."

URLs & Domains

URL = Uniform Resource Locator

https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
└─┬──┘   └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
Protokoll    Hostname   Port     Pfad         Query     Fragment
Begriff Erklärung
Domain example.com (registrierter Name)
Subdomain www, mail, api (Prefix)
Hostname www.example.com (vollständig)
Port Standard: 80 (HTTP), 443 (HTTPS)

Netzwerke

Theorie und Praxis

Das OSI-Modell: Die Theorie

7 Schichten der Netzwerkkommunikation:

Schicht Name Beispiel
7 Anwendung HTTP/S, 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

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

https://www.ietf.org/rfc/rfc793.txt

OSI vs. TCP/IP

    OSI-Modell              TCP/IP-Modell
┌─────────────────┐     ┌─────────────────┐
│  7. Anwendung   │     │                 │
├─────────────────┤     │   Anwendung     │
│  6. Darstellung │     │  (HTTP, DNS,    │
├─────────────────┤     │   SMTP, FTP)    │
│  5. Sitzung     │     │                 │
├─────────────────┤     ├─────────────────┤
│  4. Transport   │     │    Transport    │
│                 │     │   (TCP, UDP)    │
├─────────────────┤     ├─────────────────┤
│  3. Vermittlung │     │    Internet     │
│                 │     │      (IP)       │
├─────────────────┤     ├─────────────────┤
│  2. Sicherung   │     │                 │
├─────────────────┤     │   Netzzugang    │
│  1. Bitübertrag │     │                 │
└─────────────────┘     └─────────────────┘

Schicht 1: Bitübertragung

Physikalische Übertragung von Bits

Medium Beschreibung
Kupferkabel Elektrische Signale (Ethernet)
Glasfaser Lichtimpulse (schnell, weit)
Funk Elektromagnetische Wellen (WLAN, 5G)

Einheiten:

  • Bit/s, kbit/s, Mbit/s, Gbit/s
  • Achtung: 100 Mbit/s ≠ 100 MB/s!

Schicht 2: Sicherung

MAC-Adressen: Hardware-Identifikation

00:1A:2B:3C:4D:5E
  • 48 Bit = 6 Bytes
  • Weltweit eindeutig (in Theorie)
  • In Netzwerkkarte "eingebrannt"

Ethernet-Frame:

┌────────┬────────┬────────┬────────┬─────┐
│Präambel│Ziel-MAC│Src-MAC │ Daten  │ FCS │
└────────┴────────┴────────┴────────┴─────┘

Schicht 3: Vermittlung (IP)

IP-Adressen: Logische Adressierung

IPv4: 192.168.1.100     (32 Bit)
IPv6: 2001:db8::1       (128 Bit)

Subnetzmaske: Trennt Netzwerk von Host

IP:      192.168.  1.100
Maske:   255.255.255.  0
         └─Netzwerk─┘└Host┘

Router arbeiten auf Layer 3 (IP-Routing)

Schicht 4: Transport

TCP vs. UDP

Eigenschaft TCP UDP
Verbindung Ja (3-Way-Handshake) Nein
Zuverlässig Ja (Bestätigung) Nein
Reihenfolge Garantiert Nicht garantiert
Geschwindigkeit Langsamer Schneller
Anwendung Web, E-Mail Streaming, Gaming

TCP: 3-Way-Handshake

Verbindungsorientiert

Client                          Server
   │                               │
   │──── SYN (Seq=100) ───────────>│
   │                               │
   │<─── SYN-ACK (Seq=300, Ack=101)│
   │                               │
   │──── ACK (Seq=101, Ack=301) ──>│
   │                               │
   │      Verbindung hergestellt   │

SYN = Synchronize ACK = Acknowledge

Schicht 5: Sitzung (Session)

Verwaltet Verbindungen zwischen Anwendungen:

  • Sessions → Login-Sitzungen, "eingeloggt bleiben"
  • Dialogsteuerung → Wer darf wann senden?
  • Synchronisation → Wiederaufnahme nach Abbruch

Beispiele:

  • Web-Sessions (Cookies, Tokens, OAuth)
  • RPC (Remote Procedure Call)
  • NetBIOS

Schicht 6: Darstellung (Presentation)

Übersetzt Datenformate:

Funktion Beispiel
Encoding UTF-8, ASCII, Unicode
Verschlüsselung TLS/SSL (HTTPS)
Kompression gzip, deflate
Serialisierung JSON, XML, Protobuf

TLS/SSL: Transport Layer Security → Verschlüsselt HTTP zu HTTPS

Schicht 7: Anwendung

Protokolle, die wir täglich nutzen:

Protokoll Port Funktion
HTTP 80 Webseiten (unverschlüsselt)
HTTPS 443 Webseiten (TLS-verschlüsselt)
DNS 53 Namensauflösung
SMTP 25/587 E-Mail senden
IMAP 993 E-Mail abrufen
SSH 22 Sichere Fernsteuerung

Merksatz: OSI-Modell

"Alle dualen Studierenden trinken verschiedene Sorten Bier/Brause"

Schicht Name Merksatz
7 Anwendung Alle
6 Darstellung dualen
5 Sitzung Studierenden
4 Transport trinken
3 Vermittlung verschiedene
2 Sicherung Sorten
1 Bitübertragung Bier/Brause

HTTP/S im Detail

HTTP-Request

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: text/html,application/xhtml+xml
Accept-Language: de-DE,de;q=0.9,en;q=0.8
Connection: keep-alive
Teil Bedeutung
GET Methode (was will ich?)
/index.html Pfad (welche Ressource?)
HTTP/1.1 Protokoll-Version
Host: Ziel-Server

HTTP-Response

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>
<html>...</html>

Status-Codes:

  • 2xx Erfolg
  • 3xx Umleitung
  • 4xx Client-Fehler (Browser, App, WhatsApp)
  • 5xx Server-Fehler (Instagram, Google, HdM)

HTTP-Methoden

Methode CRUD Zweck Beispiel
GET Read Daten abrufen Seite laden
POST Create Daten senden Formular absenden
PUT Update Daten ersetzen Profil aktualisieren
PATCH Update Daten teilweise ändern Einzelnes Feld
DELETE Delete Daten löschen Account löschen

Teil 2: CSS

Webseiten gestalten

Was ist CSS?

Cascading Style Sheets

  • Trennt Inhalt (HTML) von Darstellung (CSS)
  • "Cascading" = Regeln können überschrieben werden
  • Eine CSS-Datei für viele HTML-Seiten
p {
    color: blue;
    font-size: 16px;
}

CSS einbinden

Option 1: Externe Datei (empfohlen!)

<link rel="stylesheet" href="style.css">

Option 2: Style-Tag

<style>p { color: blue; }</style>

Option 3: Inline als HTML-Attribute (vermeiden!)

<p style="color: blue;">...</p>

CSS-Anatomie

selector {
    property: value;
    property: value;
}

Beispiel:

h1 {
    color: #333333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

Selektoren: Element

/* Alle <p>-Elemente */
p {
    color: gray;
}

/* Alle <h1>-Elemente */
h1 {
    font-size: 2rem;
}

/* Mehrere Elemente */
h1, h2, h3 {
    font-family: sans-serif;
}

Selektoren: Klasse

<p class="wichtig">Dieser Text ist wichtig.</p>
<p>Dieser nicht.</p>

/* Alle Elemente mit class="wichtig" */
.wichtig {
    color: red;
    font-weight: bold;
}

Punkt vor dem Namen = Klasse

Selektoren: ID

<nav id="hauptnavigation">...</nav>

/* Element mit id="hauptnavigation" */
#hauptnavigation {
    background: #333;
    padding: 1rem;
}

Raute vor dem Namen = ID

⚠️ IDs sollten einmalig pro Seite sein!

Selektoren: Kombinationen

/* Nachfahre (egal wie tief verschachtelt) */
article p {
    line-height: 1.6;
}

/* Direktes Kind */
nav > a {
    text-decoration: none;
}

/* Nächstes Geschwister */
h2 + p {
    font-size: 1.2rem;
}

/* Element mit Klasse */
p.wichtig {
    color: red;
}

Spezifität: Wer gewinnt?

Wenn mehrere Regeln auf ein Element zutreffen:

Selektor Spezifität
Element (p) 0,0,0,1
Klasse (.wichtig) 0,0,1,0
ID (#header) 0,1,0,0
Inline (style="...") 1,0,0,0

Höhere Spezifität gewinnt!

p { color: blue; }           /* 0,0,0,1 */
.text { color: green; }      /* 0,0,1,0 → gewinnt! */

Box-Modell

┌─────────────────────────────────────┐
│              margin                 │
│   ┌─────────────────────────────┐   │
│   │          border             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │       padding       │   │   │
│   │   │   ┌─────────────┐   │   │   │
│   │   │   │   content   │   │   │   │
│   │   │   └─────────────┘   │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

Box-Modell: CSS

.box {
    /* Inhalt */
    width: 200px;
    height: 100px;
    
    /* Innenabstand */
    padding: 20px;
    
    /* Rahmen */
    border: 2px solid black;
    
    /* Außenabstand */
    margin: 10px;
    
    /* Berechnung vereinfachen */
    box-sizing: border-box;
}

Farben in CSS

/* Keyword */
color: red;
color: rebeccapurple;

/* Hex (RGB) */
color: #FF0000;
color: #F00;        /* Kurzform */

/* RGB/RGBA */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);  /* 50% transparent */

/* HSL */
color: hsl(0, 100%, 50%);     /* Hue, Saturation, Lightness */

Einheiten

Einheit Bedeutung Beispiel
px Pixel (absolut) font-size: 16px
% Prozent vom Parent width: 50%
em Relativ zur Schriftgröße padding: 1em
rem Relativ zur Root-Schriftgröße font-size: 1.5rem
vw/vh Viewport-Breite/-Höhe height: 100vh

Empfehlung: rem für Schrift, % oder vw/vh für Layout

Teil 3: Layouts (optional)

Flexbox & mehr

Das Layout-Problem

Früher:

  • float: left (Hack!)
  • Tabellen für Layout (Horror!)
  • Absolute Positionierung

Heute:

  • Flexbox – Eindimensional (Zeile ODER Spalte)
  • Grid – Zweidimensional (Zeilen UND Spalten)

Flexbox: Grundlagen

.container {
    display: flex;
}

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Ergebnis: Items nebeneinander (Zeile)

Flexbox: Richtung

.container {
    display: flex;
    flex-direction: row;        /* Standard: Zeile */
    flex-direction: column;     /* Spalte */
    flex-direction: row-reverse;
    flex-direction: column-reverse;
}

Flexbox: Ausrichtung

.container {
    display: flex;
    
    /* Hauptachse (horizontal bei row) */
    justify-content: flex-start;  /* Links */
    justify-content: center;      /* Mitte */
    justify-content: flex-end;    /* Rechts */
    justify-content: space-between; /* Verteilt */
    justify-content: space-around;
    
    /* Querachse (vertikal bei row) */
    align-items: flex-start;  /* Oben */
    align-items: center;      /* Mitte */
    align-items: flex-end;    /* Unten */
    align-items: stretch;     /* Strecken */
}

Flexbox: Zentrieren

Das berühmte "Vertikal zentrieren":

.container {
    display: flex;
    justify-content: center;  /* Horizontal */
    align-items: center;      /* Vertikal */
    height: 100vh;            /* Volle Höhe */
}

Früher: Dutzende Hacks nötig Heute: 3 Zeilen CSS

Flexbox: Items

.item {
    /* Wachsen */
    flex-grow: 1;    /* Nimmt verfügbaren Platz */
    
    /* Schrumpfen */
    flex-shrink: 1;  /* Schrumpft bei Platzmangel */
    
    /* Basisgröße */
    flex-basis: 200px;
    
    /* Kurzform */
    flex: 1;         /* grow: 1, shrink: 1, basis: 0 */
    flex: 0 0 200px; /* grow: 0, shrink: 0, basis: 200px */
}

Flexbox: Beispiel Navigation

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #333;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

nav a:hover {
    background: #555;
}

Pseudo-Klassen

/* Zustände */
a:hover { color: red; }
a:visited { color: purple; }
input:focus { border-color: blue; }

/* Struktur */
li:first-child { font-weight: bold; }
li:nth-child(odd) { background: #eee; }

Pseudo-Elemente

.required::before {
    content: "* ";
    color: red;
}

p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }

Unterschied: : = Pseudo-Klasse · :: = Pseudo-Element

Responsive Design

Media Queries: CSS je nach Bildschirmgröße

/* Mobile First: Standard */
.container { padding: 1rem; }

/* Ab 768px (Tablet) */
@media (min-width: 768px) {
    .container { padding: 2rem; max-width: 720px; }
}

Breakpoints: 768px (Tablet) · 1024px (Desktop) · 1280px (Large)

Teil 4: CSS vertiefen

Transitions & moderne Features

Transitions: Sanfte Übergänge

.button {
    background: #3498db;
    color: white;
    padding: 1rem 2rem;
    border: none;
    cursor: pointer;
    
    /* Transition */
    transition: background 0.3s ease;
}

.button:hover {
    background: #2980b9;
}

Kein JavaScript nötig!

Transitions: Mehrere Properties

.card {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transform: translateY(0);
    
    transition: 
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transform: translateY(-4px);
}

CSS Custom Properties (Variablen)

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --text-color: #333;
    --spacing: 1rem;
}

.button {
    background: var(--primary-color);
    padding: var(--spacing);
    color: white;
}

.button.secondary {
    background: var(--secondary-color);
}

Dark Mode

:root {
    --bg-color: white;
    --text-color: #333;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #eee;
    }
}

body {
    background: var(--bg-color);
    color: var(--text-color);
}

Fragen & Diskussion

Nächster Termin: 24.01.2026 – JavaScript

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/