---
marp: true
theme: gaia
paginate: true
backgroundColor: #fff
header: "Grundlagen IT- und Internettechnik (223015c)"
footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
title: 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>

<!-- _class: invert -->
<!-- _header: '' -->
<!-- _backgroundColor: #000 -->

![bg cover opacity:0.2](./assets/background-termin-1.png)

# Grundlagen IT- und Internettechnik

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

**Sommersemester 2026**

[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/qr/slides-223015c.png)

---

<!-- _class: lead -->

# Herzlich willkommen!
## Einführung

---

# Über mich

**Michael Werner Czechowski**

- Systems and Platform Engineer
- Schwerpunkte:
  - Web-Technologien, Barriere-Armut, Open Source
- Hintergrund:
  - Philosophie (Uni Stuttgart)
  - Wirtschaftsinformatik (Leibniz-FH Hannover)
- Kontakt: lb-czechowski@hdm-stuttgart.de

---

# Warum dieses Modul?

**Das Internet ist überall** – aber was steckt dahinter?

* Warum sehen Webseiten auf dem Handy anders aus?
* Wie funktioniert eigentlich das Internet?
* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
* Was hat ein Unterseekabel mit meiner E-Mail zu tun?
* **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**

---

# Das Ziel

**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.

Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fragen konfrontiert:
* Wie baue ich eine barrierearme Webseite?
* Welches Protokoll für welchen Zweck?
* Wie funktioniert das Web hinter den Kulissen?
* **→ Mitreden können – und selbst Webseiten bauen!**

---

# Was Sie hier lernen werden

**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**

* Geschichte des Computers und Internets
* HTML-Grundlagen und semantisches Markup
* CSS für Layout und Gestaltung
* Netzwerke und Protokolle (TCP/IP, DNS, HTTP(S))
* "Barrierefreiheit" im Web
* Grundlagen von JavaScript und Interaktivität

---

# Kurze Umfrage

**Bitte Hand heben:**
* Wer hat schon mal eine Webseite gebaut?
* Wer weiß, was HTML ist?
* Wer hat schon mal CSS geschrieben? 
* Wer kennt den Unterschied zwischen Internet und WWW? 
* Wer hat schon mal mit JavaScript gearbeitet?

---

# Kursübersicht

**Kapitel:**

1. Geschichte, Grundlagen & **HTML**
2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
3. Interaktivität, Animationen & **JavaScript**

**Ziel:** "Gelernte Hilflosigkeit" ablegen

---

<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->

# Prüfungsleistung

**Nach aktuellem Kenntnisstand:**

* 90 min insg. (Technik 1)
* Schriftliche Klausur (digital)
* Teils offene Fragen
* So gut wie kein Coding/Programmieren
* **Prüfungsrelevant:** Folien sind markiert mit anderem Hintergrund

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/klausur-01.png)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/klausur-02.png)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/klausur-03.png)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/splan.png)

---

<!-- _header: '' -->
<!-- _footer: '' -->

![bg fit](./assets/asta.png)