Etappe 1 – Grundlagen · Lektion 2 von 11 · Lernziel: Browser, Server, Domain und Dateien unterscheiden.
Voraussetzung: Grundlagen aus Lektion 1; arbeite im selben Projekt modellbau-webseite.
Was passiert beim Aufruf einer Internetadresse?
Du gibst eine Adresse wie https://example.com in den Browser ein. Vereinfacht läuft Folgendes ab:
- Der Browser ermittelt über das Domain Name System (DNS), unter welcher Netzwerkadresse der Server erreichbar ist.
- Über HTTPS fordert er eine Seite an.
- Der Server liefert HTML und bei Bedarf weitere Dateien.
- Der Browser verarbeitet HTML, lädt CSS und Bilder und zeigt die Seite an.
- Falls JavaScript vorhanden ist, kann es auf Eingaben reagieren.
Domain heißt der leicht lesbare Name; Hosting bezeichnet den Ort, an dem die Dateien bereitstehen. HTTPS sichert die Übertragung ab, ersetzt aber nicht die sorgfältige Absicherung der Website.
Die Rollen von HTML, CSS und JavaScript
Das folgende Beispiel kannst du als test.html speichern und mit einem Browser öffnen:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mein Test</title>
<style>
h1 { color: steelblue; }
</style>
</head>
<body>
<h1>Hallo Modellbau!</h1>
<button id="knopf">Klick mich</button>
<script>
document.querySelector('#knopf').addEventListener('click', () => {
alert('Der Button funktioniert!');
});
</script>
</body>
</html>Die Überschrift und Schaltfläche entstehen durch HTML. CSS färbt die Überschrift. Das kleine JavaScript reagiert auf den Klick. Eine Astro-Seite kann dieselben Bestandteile enthalten.
Lokale Vorschau und öffentliche Webseite
localhost bezeichnet deinen eigenen Rechner. Eine Adresse wie http://localhost:4321 ist normalerweise nur dort erreichbar, wo der Entwicklungsserver läuft. Erst eine Veröffentlichung macht deine Seite öffentlich zugänglich.
Übung
Ändere den Text der Überschrift, die Farbe und die Meldung im JavaScript. Speichere die Datei und aktualisiere den Browser.
Lösungshinweis: Überschrift zwischen <h1> und </h1>, Farbe hinter color:, Popup-Text in alert(...).
Fehlersuche
Falls Umlaute falsch angezeigt werden, prüfe die Zeichenkodierung der Datei (UTF-8) und den charset-Eintrag. Falls keine Formatierung erscheint, achte auf korrekte Klammern im <style>-Block.
Weitere Informationen: Offizielle Astro-Dokumentation.