uni/slides/223015c/klausurfolien.md

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 – SoSe 2026	Grundlagen IT- und Internettechnik

<style> :root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.7rem; } h1 { color: #a02060; } section.invert h1 { color: #fff; } h2 { color: #1f2937; } 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; } @media print { section.klausur { background: #fce4ec !important; } } section.aufgabe { background: #fce4ec !important; } section.aufgabe footer { display: none; } </style>

Grundlagen IT- und Internettechnik

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

Sommersemester 2026

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

---

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)

---

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> Aufklapp-Text (Akkordion)
  • Selbst-schließend
    • <img /> Bild, Vektorgrafik etc.
    • <input /> Eingabefeld
    • <meta /> Metadaten

---

Barrieren im Netz vermeiden (a11y)

Tastatur-Test:

• Alle Funktionen sind nur mit Tab + Enter nutzbar
• Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
• Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt

Screenreader-Test:

• VoiceOver (Mac): Cmd + F5
• NVDA (Windows): Gratis-Download

Tools/Browser-Extensions:

• WAVE, axe DevTools, Web Disability Simulator

---

HTTP-Methoden

HTTP-Methoden beschreiben, was der Client mit einer Ressource tun will.

Methode	Bedeutung	Beispiel
GET	Daten abrufen	Seite laden GET /index.html HTTP/2.0
POST	Daten senden	Formular absenden POST /login HTTP/2.0
PUT	Daten ersetzen	Profil aktualisieren PUT /users/42 HTTP/2.0
DELETE	Daten löschen	Account löschen DELETE /users/42 HTTP/2.0

CRUD = Create, Read, Update, Delete

---

HTTP Status-Codes

Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.

HTTP/2.0 200 OK
HTTP/2.0 404 Not Found
HTTP/2.0 500 Internal Server Error

Code-Bereich	Bedeutung
2xx	Erfolg (200 OK, 201 Created)
3xx	Umleitung (301 Moved, 304 Not Modified)
4xx	Client-Fehler (400 Bad Request, 404 Not Found)
5xx	Server-Fehler (500 Internal Error, 503 Unavailable)

---

Selektoren: ID

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

#hauptnavigation {
    background: #333;
    padding: 1rem;
}

Raute vor dem Namen = ID

Achtung: IDs sollten einmalig pro Seite sein.

---

Farben

CSS kennt fünf Farb-Notationen: Keyword, Hex, RGB, RGBA und HSL.

/* Keyword */
color: red;
color: rebeccapurple;
/* Hex */
color: #FF0000;
color: #F00;
/* RGB = Red Green Blue, RGBA mit Alpha */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* HSL = Hue, Saturation, Lightness */
color: hsl(0, 100%, 50%);

MDN-Referenz: CSS <color>