Eine Webseite untersuchen
Jede Webseite, die du siehst, liegt vollständig auf deinem Gerät – sonst könntest du sie nicht sehen. Du kannst sie also auch aufmachen und nachsehen, woraus sie besteht.
Die Entwicklerwerkzeuge
Jeder Browser bringt Werkzeuge zum Untersuchen mit. Du öffnest sie mit F12 oder über Rechtsklick → Untersuchen.
| Reiter | Was du dort siehst |
|---|---|
| Elemente (oder Inspektor) | den Aufbau der Seite als Baum, dazu die wirkenden CSS-Regeln |
| Netzwerk | jede einzelne Datei, die geladen wurde: Name, Typ, Größe, Statuscode |
| Konsole | Fehlermeldungen |
Mit Rechtsklick → Seitenquelltext anzeigen bekommst du außerdem die HTML-Datei so zu sehen, wie der Server sie geschickt hat.
Was du in den Entwicklerwerkzeugen änderst, ändert nur deine Ansicht – nichts davon geht an den Server zurück. Du kannst also nichts kaputt machen. Beim nächsten Neuladen ist alles wieder wie vorher.
Genau deshalb sind Bildschirmfotos von so veränderten Seiten auch kein Beweis für gar nichts.
Aufgabe: eine echte Seite auseinandernehmen
Öffne diese Seite hier – die, die du gerade liest – und drücke F12.
a) Wechsle in den Reiter Netzwerk und lade die Seite neu. Wie viele Dateien werden geladen? Notiere die drei größten mit Name, Typ und Größe.
b) Sortiere nach Typ. Welche Arten von Dateien kommen vor?
c) Wechsle in den Reiter Elemente und suche die Überschrift dieser Seite im Baum. Welches HTML-Element ist es?
d) Klicke in den Elementen auf ein beliebiges Element und sieh rechts unter Styles nach. Woher kommen die Regeln, die auf dieses Element wirken?
Tipp: Der Netzwerk-Reiter bleibt leer?
Er zeichnet nur auf, was nach dem Öffnen geladen wird. Lade die Seite bei geöffnetem Reiter noch einmal neu – unter Windows mit F5, unter macOS mit Cmd+R.
Was da eigentlich übertragen wird
Alle diese Dateien bestehen aus Bytes – Zahlen zwischen 0 und 255. Wie aus Bytes Buchstaben werden, legt die Zeichencodierung fest.
Eine Zeichencodierung ordnet jedem Zeichen eine Zahl zu. Der Standard im Web heißt UTF-8. Er kann alle Zeichen aller Schriften darstellen – lateinische Buchstaben, Umlaute, kyrillische und chinesische Schrift, Emojis.
Ein Zeichen belegt in UTF-8 unterschiedlich viele Bytes:
| Zeichen | Bytes |
|---|---|
A, z, 7, Leerzeichen |
1 |
ä, ö, ü, ß, é |
2 |
€, → |
3 |
| 🙂 | 4 |
a) Wie viele Bytes braucht der Text Grüße! in UTF-8? Rechne nach.
b) Wie viele Bytes bräuchte derselbe Text, wenn jedes Zeichen genau ein Byte belegte?
c) Eine Textdatei mit 1000 Zeichen ist 1240 Bytes groß. Was lässt sich daraus über ihren Inhalt sagen?
Wenn die Codierung nicht stimmt
Vielleicht hast du so etwas schon gesehen:
Grüße aus München
Das ist kein Tippfehler. Der Text wurde in UTF-8 gespeichert, aber vom Browser als eine andere Codierung gelesen – eine, in der jedes Byte einem Zeichen entspricht. Die zwei Bytes des ü werden dabei zu zwei einzelnen Zeichen: Ã und ¼.
Der Text ist dabei nicht kaputt. Nur die Vorschrift zum Lesen war die falsche. Mit der richtigen Codierung erscheint er wieder korrekt.
Damit das nicht passiert, sagt jede HTML-Datei gleich am Anfang, wie sie gelesen werden will:
<meta charset="UTF-8">Diese Zeile gehört in jede HTML-Datei, die du schreibst – und zwar möglichst weit oben, denn der Browser muss sie lesen, bevor er auf das erste Sonderzeichen trifft.
Nicht nur Text wird codiert. Auch ein Bild ist am Ende eine Folge von Zahlen – und wie diese Zahlen zu deuten sind, legt das Dateiformat fest.
| Format | Gut geeignet für | Besonderheit |
|---|---|---|
| JPEG | Fotos | verlustbehaftet: spart viel Platz, verliert dabei Details |
| PNG | Grafiken, Screenshots, Logos | verlustfrei, kann durchsichtig sein |
| SVG | Symbole, Diagramme, Logos | keine Bildpunkte, sondern eine Beschreibung aus Linien und Flächen – beliebig vergrößerbar |
| WebP, AVIF | beides | neuere Formate, deutlich kleiner bei gleicher Qualität |
Überlege: Warum ist ein Foto als PNG oft zehnmal so groß wie als JPEG – und warum sollte man ein Logo trotzdem nie als JPEG speichern?