Initial commit: IHK Ausbildung materials

2026-03-13 11:46:08 +01:00
commit eb4a13ef7c
67 changed files with 11361 additions and 0 deletions
--- a/1-Ausbildungsjahr/LF6-Webanwendungen/LF6-01-Web-Grundlagen.md
+++ b/1-Ausbildungsjahr/LF6-Webanwendungen/LF6-01-Web-Grundlagen.md
@@ -0,0 +1,225 @@
+# 6.1 Web-Grundlagen
+
+## Internet und WWW
+
+### Grundbegriffe
+
+```
+Internet - Netzwerk der Netzwerke
+WWW (World Wide Web) - Dienst im Internet
+```
+
+### Funktionsweise
+
+```
+Client-Server-Modell
+┌─────────┐         ┌─────────┐
+│ Browser │ ───────►│ Server  │
+│ (Client)│ ◄───────│         │
+└─────────┘         └─────────┘
+```
+
+---
+
+## HTTP - Hypertext Transfer Protocol
+
+### HTTP-Ablauf
+
+```
+HTTP - Kommunikation
+1. Client sendet Request
+2. Server verarbeitet
+3. Server sendet Response
+```
+
+### HTTP-Methoden
+
+| Methode | Beschreibung | idempotent |
+|---------|-------------|------------|
+| **GET** | Daten abrufen | Ja |
+| **POST** | Daten senden | Nein |
+| **PUT** | Daten ersetzen | Ja |
+| **PATCH** | Daten teilweise ändern | Nein |
+| **DELETE** | Daten löschen | Ja |
+
+### HTTP-Statuscodes
+
+| Code | Bedeutung | Beispiel |
+|------|-----------|----------|
+| **200** | OK | Erfolgreich |
+| **201** | Created | Erstellt |
+| **301** | Moved Permanently | Umleitung |
+| **400** | Bad Request | Fehlerhafte Anfrage |
+| **401** | Unauthorized | Nicht angemeldet |
+| **403** | Forbidden | Keine Berechtigung |
+| **404** | Not Found | Nicht gefunden |
+| **500** | Internal Server Error | Serverfehler |
+
+### HTTPS
+
+```
+HTTPS = HTTP + TLS-Verschlüsselung
+
+Vorteile:
+├── Vertraulichkeit
+├── Integrität
+└── Authentifizierung
+```
+
+---
+
+## HTML - HyperText Markup Language
+
+### Grundstruktur
+
+```html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>Titel</title>
+</head>
+<body>
+    <!-- Inhalt -->
+</body>
+</html>
+```
+
+### HTML-Elemente
+
+| Element | Bedeutung |
+|---------|----------|
+| `<h1>` bis `<h6>` | Überschriften |
+| `<p>` | Absatz |
+| `<a>` | Link |
+| `<img>` | Bild |
+| `<ul>`, `<ol>` | Liste |
+| `<table>` | Tabelle |
+| `<form>` | Formular |
+| `<div>`, `<span>` | Container |
+
+### Semantisches HTML
+
+```html
+<header>Kopfbereich</header>
+<nav>Navigation</nav>
+<main>
+    <article>
+        <section>Inhalt</section>
+    </article>
+    <aside>Seitenleiste</aside>
+</main>
+<footer>Fußbereich</footer>
+```
+
+---
+
+## CSS - Cascading Style Sheets
+
+### Einbindung
+
+```html
+<!-- Extern -->
+<link rel="stylesheet" href="style.css">
+
+<!-- Intern -->
+<style>
+    body { background: white; }
+</style>
+
+<!-- Inline -->
+<p style="color: red;">Text</p>
+```
+
+### CSS-Selektoren
+
+```css
+/* Element */
+p { color: blue; }
+
+/* Klasse */
+.klasse { font-size: 16px; }
+
+/* ID */
+#id { background: gray; }
+
+/* Attribut */
+[type="text"] { border: 1px solid; }
+
+/* Pseudoklasse */
+:hover { cursor: pointer; }
+
+/* Nachfahre */
+div p { margin: 10px; }
+```
+
+### Flexbox
+
+```css
+.container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+```
+
+### Grid
+
+```css
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+```
+
+---
+
+## Responsive Design
+
+### Viewport
+
+```html
+<meta name="viewport"
+      content="width=device-width, initial-scale=1.0">
+```
+
+### Media Queries
+
+```css
+/* Mobile zuerst */
+.container {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .container {
+        width: 750px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .container {
+        width: 970px;
+    }
+}
+```
+
+### Breakpoints
+
+| Gerät | Breite |
+|-------|--------|
+| Mobile | < 768px |
+| Tablet | 768px - 1023px |
+| Desktop | >= 1024px |
+
+---
+
+## Querverweise
+
+- [[LF6-02-Frontend|Nächstes Thema: Frontend-Entwicklung]]
+- [[LF4-02-Schutzmassnahmen|IT-Sicherheit: HTTPS]]
+
+---
+
+*Stand: 2024*