3.5 KiB
3.5 KiB
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
<!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
<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
<!-- Extern -->
<link rel="stylesheet" href="style.css">
<!-- Intern -->
<style>
body { background: white; }
</style>
<!-- Inline -->
<p style="color: red;">Text</p>
CSS-Selektoren
/* 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
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
Responsive Design
Viewport
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Media Queries
/* 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
Stand: 2024