hdm/223015c
1
0
Fork 0
Code Pull Requests Activity
Files
75c28fba58ce26b631adb5e9546bf0f6d0c0ebe7
223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
T
libretech 75c28fba58 fix lecture number and update readme 
- change lecture number from 223015b to 223015c
- update README for Internettechnik lecture
- update IMAGE_LIST with correct filenames
2025-12-18 00:52:48 +01:00

24 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 2: Netzwerke, Protokolle & CSS
<style> section { font-size: 1.7rem; } h2 { color: var(--color-dimmed); } </style>

bg fit opacity:0.4

Grundlagen IT- und Internettechnik

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

Wintersemester 2025/26

Termin 2 – 10.01.2026

Netzwerke, Protokolle & CSS

Rückblick Termin 1

Was wir gelernt haben:

  • Geschichte: Hollerith → IBM → Von Neumann → ARPANET
  • Von-Neumann-Architektur (5 Komponenten)
  • Bits, Bytes, Hexadezimal
  • HTML-Grundlagen & semantische Tags

Fragen? Probleme bei der Fleißaufgabe?

Heute

Vormittag:

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

Nachmittag:

  • CSS-Grundlagen
  • Selektoren & Spezifität
  • Layouts mit Flexbox
  • Hands-On: Eure Seite stylen

Teil 1: Netzwerke

Wie Daten reisen

Wiederholung: OSI-Modell

Merksatz: "Alle deutschen Studenten trinken verschiedene Sorten Bier"

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

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

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

SYN = Synchronize ACK = Acknowledge

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

DNS: Das Telefonbuch des Internets

Das Problem

Menschen: www.hdm-stuttgart.de Computer: 212.132.79.37

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

DNS-Hierarchie

                    . (Root)
                   /|\
                  / | \
               .de .com .org
              /       \
           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..."

Hands-On: DNS erkunden (15 Min)

Terminal öffnen:

# DNS-Auflösung
nslookup hdm-stuttgart.de
nslookup google.com

# Detaillierter (Linux/Mac)
dig hdm-stuttgart.de
dig google.com MX

# Weg verfolgen
traceroute hdm-stuttgart.de   # Mac/Linux
tracert hdm-stuttgart.de      # Windows

Online-Tool: https://toolbox.googleapps.com/apps/dig/

HTTP 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 · 5xx Server-Fehler

HTTP-Methoden

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

CRUD: Create, Read, Update, Delete → POST, GET, PUT/PATCH, DELETE

Hands-On: HTTP beobachten (20 Min)

DevTools öffnen: F12 (Win/Linux) · Cmd+Option+I (Mac)

Tab "Netzwerk" (Network):

  1. Beliebige Webseite öffnen
  2. Requests beobachten
  3. Auf Request klicken → Headers & Response analysieren

Beobachtet: Anzahl Requests, Dateitypen (JS, CSS, Bilder...)

Pause

15 Minuten

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 (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 (irgendwo drin) */
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

Hands-On: Erste Styles (30 Min)

Erstellt style.css für eure HTML-Seite:

  1. CSS-Datei im <head> verlinken
  2. Grundschrift setzen (font-family, line-height, color)
  3. Überschriften, Links, Listen stylen
  4. Mit Farben und Abständen experimentieren

Ressource: https://codescripsi.es/

  • Basics: Alle machen
  • Advanced: Wer möchte

Mittagspause

60 Minuten

Teil 3: Layouts

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)

Hands-On: Layout bauen (60 Min)

Erstellt ein komplettes Layout:

  1. Header mit Logo (links) und Navigation (rechts)
  2. Main mit zwei Spalten (Sidebar + Content)
  3. Footer mit zentriertem Copyright

Anforderungen:

  • Nutzt Flexbox
  • Responsive: Auf Handy untereinander
  • Hover-Effekte für Links
  • Mindestens 2 Farben

Hilfe: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Beispiel-Struktur

<body>
    <header>
        <div class="logo">Meine Seite</div>
        <nav>
            <a href="#">Home</a>
            <a href="#">Über</a>
            <a href="#">Kontakt</a>
        </nav>
    </header>
    
    <main>
        <aside>Sidebar</aside>
        <article>Hauptinhalt</article>
    </main>
    
    <footer>© 2026</footer>
</body>

Beispiel-CSS

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #2c3e50;
    color: white;
}

main {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

aside {
    flex: 0 0 250px;
}

article {
    flex: 1;
}

@media (max-width: 768px) {
    main { flex-direction: column; }
    aside { flex: none; }
}

Pause

15 Minuten

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);
}

Hands-On: Styling finalisieren (45 Min)

Erweitert eure Seite:

  1. Transitions für alle Links und Buttons
  2. CSS-Variablen für Farben
  3. Hover-Effekte für Karten/Boxen
  4. Media Query für Mobile

Bonus:

  • Dark Mode Support
  • Animierte Navigation

Fleißaufgabe bis 24.01.

Baut eine vollständige Portfolio-Seite:

  1. Mehrere Unterseiten (HTML-Dateien)
  2. Konsistentes Layout (Header, Footer, Navigation)
  3. Responsive Design (Mobile-freundlich)
  4. Mindestens ein Kontaktformular

Ressourcen:

Fragen & Diskussion

Nächster Termin: 24.01.2026 – JavaScript

Kontakt: mail@librete.ch

Zusammenfassung Termin 2

Netzwerke:

  • OSI-Modell (7 Schichten) vs. TCP/IP (4 Schichten)
  • DNS: Namen → IP-Adressen
  • HTTP: Request/Response, Status-Codes

CSS:

  • Selektoren (Element, Klasse, ID)
  • Box-Modell (Content, Padding, Border, Margin)
  • Flexbox für Layouts
  • Responsive Design mit Media Queries
  • Transitions für Animationen

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/

View Git Blame Copy Permalink