226 lines
3.5 KiB
Markdown
226 lines
3.5 KiB
Markdown
# 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*
|