🔎 Browser untersuchen

HTML, CSS und geladene Dienste sichtbar machen

Einstieg: Worum geht es in diesem Kapitel?

Wenn du eine Webseite im Browser öffnest, siehst du zuerst die fertige Darstellung: Überschriften, Texte, Bilder, Farben, Abstände, Menüs oder Buttons. Diese sichtbare Oberfläche entsteht aber aus mehreren Bestandteilen. Besonders wichtig sind dabei HTML und CSS.

HTML beschreibt die Struktur der Inhalte. CSS gestaltet diese Inhalte. Der Browser liest diese Dateien, verarbeitet sie und stellt daraus eine sichtbare Webseite dar.

In diesem Kapitel geht es darum, Webseiten nicht nur zu betrachten, sondern zu untersuchen. Du lernst, wie du im Browser sichtbar machen kannst, welche HTML-Elemente und CSS-Regeln hinter einer Webseite stehen. Außerdem untersuchst du, welche Dateien, Dienste und externen Verbindungen beim Laden einer Webseite beteiligt sind.

Merksatz

Eine Webseite ist nicht nur das, was du siehst. Dahinter stehen HTML-Struktur, CSS-Gestaltung, geladene Dateien und oft auch externe Dienste.

Warum Browser-Werkzeuge wichtig sind

Webseiten verstehen statt nur anschauen

Wenn du eine Webseite normal öffnest, siehst du das Ergebnis. Als Webentwickler:in oder Informatiker:in interessiert dich aber auch, wie dieses Ergebnis entsteht.

Du kannst im Browser untersuchen:

• welche HTML-Elemente auf einer Seite verwendet werden
• welche CSS-Regeln ein Element gestalten
• welche Bilder, Schriften oder Dateien geladen werden
• welche Dienste im Hintergrund beteiligt sind
• wohin beim Laden der Webseite Verbindungen aufgebaut werden
• wie sich eine Änderung direkt im Browser auswirken würde
• warum ein Element vielleicht nicht so aussieht, wie erwartet

Diese Untersuchung verändert zunächst nicht die echte Webseite auf dem Server. Du veränderst nur die Darstellung in deinem Browser.

Wichtig

Wenn du im Browser eine fremde Webseite untersuchst oder veränderst, änderst du nur deine lokale Ansicht. Die echte Webseite im Internet wird dadurch nicht verändert.

Entwicklertools

Moderne Browser haben eingebaute Werkzeuge für die Untersuchung von Webseiten. Sie heißen oft Entwicklertools oder Developer Tools.

In Firefox, Chrome und Edge kannst du sie meist so öffnen:

Rechtsklick auf eine Stelle der Webseite → Untersuchen

oder mit der Tastatur:

F12

Manchmal funktioniert auch:

Strg + Shift + I

Im Unterricht verwenden wir diese Werkzeuge nicht, um fremde Webseiten „kaputtzumachen“, sondern um zu verstehen, wie Webseiten aufgebaut sind.

Achtung

Auch wenn Änderungen im Browser harmlos sind, bleibt der Umgang mit fremden Webseiten eine Frage der Verantwortung. Ziel ist Analyse, nicht Täuschung.

HTML im Browser untersuchen

Das Element-Werkzeug

Das wichtigste Werkzeug ist meistens der Bereich Inspektor oder Elements. Dort siehst du die HTML-Struktur der aktuell geöffneten Webseite.

Wenn du mit der Maus über einzelne HTML-Elemente fährst, markiert der Browser den passenden Bereich auf der Webseite. So erkennst du, welches HTML-Element zu welchem sichtbaren Inhalt gehört.

Typische Elemente, die du finden kannst:

<h1>
<p>
<a>
<img>
<ul>
<li>
<div>
<header>
<main>
<footer>

Merksatz

Der Inspektor verbindet den sichtbaren Bereich der Webseite mit dem passenden HTML-Code.

Elemente auswählen

Du kannst ein Element direkt auf der Webseite auswählen. Dafür gibt es meist ein Symbol mit einem Mauszeiger oder Auswahlrahmen.

Der Ablauf ist meistens:

1. Entwicklertools öffnen.
2. Auswahlwerkzeug aktivieren.
3. Auf ein sichtbares Element der Webseite klicken.
4. Im HTML-Bereich ansehen, welches Element ausgewählt wurde.

So kannst du zum Beispiel untersuchen, welches HTML-Element hinter einem sichtbaren Bereich steht und ob Struktur und Darstellung zusammenpassen.

Hinweis

HTML beschreibt Bedeutung, CSS beschreibt Darstellung. Diese Unterscheidung ist beim Untersuchen einer Webseite besonders wichtig.

CSS im Browser untersuchen

CSS-Regeln sichtbar machen

Wenn du ein HTML-Element auswählst, zeigt der Browser meistens daneben oder darunter die passenden CSS-Regeln an.

Dort kannst du sehen:

• welche Farbe ein Text hat
• welche Schriftgröße verwendet wird
• welche Schriftart verwendet wird
• welche Abstände gesetzt sind
• ob ein Rahmen vorhanden ist
• welche CSS-Regel gerade wirkt
• ob eine Regel überschrieben wurde

Beispiel für CSS-Regeln:

h1 {
  color: darkblue;
  font-size: 36px;
}

oder:

.box {
  background-color: lightyellow;
  padding: 16px;
  border: 1px solid orange;
}

CSS testweise verändern

In den Entwicklertools kannst du CSS-Werte testweise verändern. Du kannst zum Beispiel eine Farbe ändern, eine Schriftgröße anpassen oder einen Abstand entfernen.

Das ist besonders praktisch, wenn du ausprobieren möchtest, welche Gestaltung besser wirkt.

Wichtig

Änderungen in den Entwicklertools sind nur vorübergehend. Wenn du die Seite neu lädst, sind sie wieder weg.

Überschriebene Regeln

Manchmal steht eine CSS-Regel im Browser durchgestrichen. Das bedeutet: Diese Regel ist vorhanden, wird aber von einer anderen Regel überschrieben.

Das kann passieren, wenn mehrere CSS-Regeln dasselbe Element betreffen.

Beispiel:

p {
  color: black;
}

.hinweis {
  color: red;
}

Wenn ein Absatz die Klasse hinweis hat, kann die speziellere Regel gewinnen.

Merksatz

CSS kann mehrere Regeln auf dasselbe Element anwenden. Manche Regeln überschreiben andere.

Netzwerkbereich: Dateien und Dienste sichtbar machen

Was beim Laden einer Webseite passiert

Eine Webseite besteht oft nicht nur aus einer einzigen HTML-Datei. Beim Laden können viele weitere Ressourcen nachgeladen werden.

Dazu gehören zum Beispiel:

• CSS-Dateien
• JavaScript-Dateien
• Bilder
• Schriftarten
• Videos
• Karten
• eingebettete Inhalte
• Analyse-Dienste
• Werbedienste
• externe Bibliotheken

Viele dieser Ressourcen kommen nicht unbedingt vom selben Server wie die eigentliche Webseite. Eine Seite kann also beim Laden Verbindungen zu mehreren Domains herstellen.

Merksatz

Der sichtbare Inhalt einer Webseite kann aus vielen einzelnen geladenen Ressourcen entstehen.

Der Bereich „Network“ / „Netzwerk“

In den Entwicklertools gibt es einen Bereich namens Network oder Netzwerk. Dort wird sichtbar, welche Dateien und Verbindungen beim Laden einer Webseite auftreten.

Der Ablauf ist meistens:

1. Entwicklertools öffnen.
2. Bereich Network oder Netzwerk auswählen.
3. Webseite neu laden.
4. Beobachten, welche Einträge erscheinen.

Im Netzwerkbereich kannst du oft erkennen:

• Name der geladenen Datei
• Domain oder Server
• Art der Ressource
• Statuscode
• Größe
• Ladezeit

Hinweis

Wenn im Netzwerkbereich zuerst nichts erscheint, lade die Webseite neu, während die Entwicklertools geöffnet sind.

Externe Domains und Datenschutz

Besonders interessant sind Domains, die nicht zur eigentlichen Webseite gehören. Sie können darauf hinweisen, dass externe Dienste eingebunden sind.

Das kann notwendig sein, zum Beispiel bei Schriftarten, Karten oder eingebetteten Videos. Es kann aber auch datenschutzrelevant sein, etwa bei Analyse-, Tracking- oder Werbediensten.

Datenschutz-Hinweis

Wenn eine Webseite Inhalte von anderen Servern lädt, können dabei technische Daten übertragen werden, zum Beispiel IP-Adresse, Browserinformationen oder Zeitpunkt des Zugriffs. Ob und wofür diese Daten verarbeitet werden, hängt vom jeweiligen Dienst und der Website ab.

Unterschied zwischen Quelltext und untersuchter Seite

Seitenquelltext anzeigen

Viele Browser bieten die Möglichkeit, den Seitenquelltext anzuzeigen. Das ist der HTML-Code, den der Browser ursprünglich erhalten hat.

Das funktioniert oft mit:

Rechtsklick → Seitenquelltext anzeigen

oder:

Strg + U

Der Seitenquelltext zeigt aber nicht immer genau das, was du im Inspektor siehst.

Warum der Inspektor manchmal mehr zeigt

Moderne Webseiten können sich nach dem Laden verändern. JavaScript kann Inhalte hinzufügen, verändern oder entfernen. Deshalb kann der untersuchte DOM-Baum im Browser anders aussehen als der ursprüngliche Quelltext.

Der Begriff DOM steht für Document Object Model. Vereinfacht gesagt ist das die Struktur der Webseite, mit der der Browser nach dem Laden arbeitet.

Wichtig

Der Quelltext zeigt, was ursprünglich geladen wurde. Der Inspektor zeigt, wie die Webseite im Browser aktuell aufgebaut ist. Der Netzwerkbereich zeigt, welche Ressourcen und Verbindungen beim Laden beteiligt sind.

Webseiten lokal verändern

Was passiert beim Bearbeiten im Browser?

Wenn du im Inspektor Text veränderst oder CSS-Regeln anpasst, wirkt es so, als würdest du die Webseite verändern. Tatsächlich änderst du aber nur die lokale Darstellung in deinem Browser.

Wenn du die Seite neu lädst, ist die Änderung wieder verschwunden.

Das ist ein gutes Experiment, um zu verstehen:

• welche Teile einer Seite aus HTML bestehen
• welche Gestaltung aus CSS kommt
• wie leicht Oberflächen im Browser verändert werden können
• warum Screenshots nicht immer als Beweis ausreichen

Achtung

Eine im Browser veränderte Webseite ist keine echte Änderung an der Website. Sie zeigt nur, wie leicht eine Darstellung lokal manipuliert werden kann.

Beispiel: Nachrichtenseite untersuchen

Wenn du eine Nachrichtenseite untersuchst, kannst du im Inspektor möglicherweise Überschriften, Absätze oder Bilder erkennen. Du kannst testweise einen Text verändern und sehen, dass die sichtbare Webseite sofort anders aussieht.

Das bedeutet aber nicht, dass die Nachrichtenseite wirklich verändert wurde.

Merksatz

Der Browser ist ein Darstellungsprogramm. Was du lokal veränderst, ist nicht automatisch eine Änderung im Internet.

Was man daraus lernen kann

Webentwicklung

Für Webentwicklung sind Entwicklertools sehr nützlich. Du kannst damit herausfinden:

• warum ein Bild nicht angezeigt wird
• warum CSS nicht angewendet wird
• welcher Abstand zu groß ist
• welche Klasse ein Element hat
• ob eine CSS-Datei geladen wurde
• wie eine Seite auf verschiedenen Bildschirmgrößen wirkt

Datenschutz und Medienkompetenz

Browser-Werkzeuge sind aber nicht nur für Webentwicklung wichtig. Sie zeigen auch, dass digitale Oberflächen leicht veränderbar wirken können und dass Webseiten oft Verbindungen zu mehreren Diensten aufbauen.

Ein Screenshot kann täuschend echt aussehen, obwohl jemand nur lokal den Text im Browser verändert hat. Gleichzeitig können Webseiten im Hintergrund Ressourcen von externen Servern laden, die Nutzer:innen beim normalen Betrachten nicht sofort bemerken.

Reflexion

Technisches Verständnis hilft auch bei Medienkritik und Datenschutz. Wer weiß, wie Webseiten aufgebaut sind, bewertet Screenshots, sichtbare Inhalte und Datenflüsse vorsichtiger.

Untersuchungsaufträge

🔎 Auftrag 1: Webseite als Struktur untersuchen

Öffne eine Webseite deiner Wahl oder eine von der Lehrperson vorgegebene Seite. Öffne anschließend die Entwicklertools.

Mögliche Wege:

Rechtsklick → Untersuchen

F12

Strg + Shift + I

Aufgabe

Untersuche die Webseite im Bereich Inspektor / Elemente.

Finde und beschreibe mindestens:

• eine Überschrift
• einen Absatz
• einen Link
• ein Bild
• einen größeren Bereich oder Container

Notiere deine Ergebnisse in Stichworten:

<!--
Auftrag 1: HTML-Struktur

Sichtbares Element 1:
HTML-Element:
Vermutliche Aufgabe:

Sichtbares Element 2:
HTML-Element:
Vermutliche Aufgabe:

Sichtbares Element 3:
HTML-Element:
Vermutliche Aufgabe:

Auffälligkeit:
-->

🔎 Auftrag 2: CSS sichtbar machen und testen

Wähle auf einer Webseite ein sichtbares Element aus, zum Beispiel eine Überschrift, einen Button, einen Link, ein Bild oder einen Textbereich.

Aufgabe

Untersuche im Browser, welche CSS-Regeln auf dieses Element wirken.

Finde mindestens fünf CSS-Eigenschaften, zum Beispiel:

color
font-size
background-color
margin
padding
border
width
max-width
font-family

Teste anschließend mindestens drei Änderungen direkt in den Entwicklertools.

Mögliche Änderungen:

• Textfarbe ändern
• Hintergrundfarbe ändern
• Schriftgröße verändern
• Abstand vergrößern oder verkleinern
• Rahmen hinzufügen oder entfernen
• Breite verändern

Dokumentation

Notiere deine Beobachtungen:

<!--
Auftrag 2: CSS untersuchen

Untersuchtes Element:

Gefundene CSS-Eigenschaften:

Getestete Änderung 1:
Sichtbare Wirkung:

Getestete Änderung 2:
Sichtbare Wirkung:

Getestete Änderung 3:
Sichtbare Wirkung:

Was passiert nach dem Neuladen der Seite?

Was lerne ich daraus über Änderungen in den Entwicklertools?
-->

🔎 Auftrag 3: Geladene Dateien und Dienste untersuchen

Webseiten bestehen oft nicht nur aus einer HTML-Datei. Beim Laden einer Webseite können viele weitere Dateien und Dienste eingebunden werden: Bilder, CSS-Dateien, JavaScript-Dateien, Schriftarten, Videos, Analyse-Dienste, Werbenetzwerke oder Inhalte von anderen Servern.

Öffne in den Entwicklertools den Bereich Netzwerk / Network.

Lade die Webseite anschließend neu.

Aufgabe

Untersuche, welche Dateien und Verbindungen beim Laden der Webseite sichtbar werden.

Achte besonders auf:

• HTML-Dateien
• CSS-Dateien
• JavaScript-Dateien
• Bilder
• Schriftarten
• eingebettete Inhalte
• Verbindungen zu anderen Domains
• mögliche Analyse-, Tracking- oder Werbedienste

Notiere mindestens fünf geladene Einträge.

Zu jedem Eintrag:

• Wie heißt die Datei oder Ressource?
• Von welcher Domain wird sie geladen?
• Um welche Art von Ressource handelt es sich?
• Gehört sie vermutlich direkt zur Webseite oder zu einem externen Dienst?
• Warum könnte diese Ressource geladen werden?

Dokumentation

<!--
Auftrag 3: Network / Netzwerkbereich

Untersuchte Webseite:

Ressource 1:
Domain:
Art der Ressource:
Direkt zur Webseite oder externer Dienst?
Vermutlicher Zweck:

Ressource 2:
Domain:
Art der Ressource:
Direkt zur Webseite oder externer Dienst?
Vermutlicher Zweck:

Ressource 3:
Domain:
Art der Ressource:
Direkt zur Webseite oder externer Dienst?
Vermutlicher Zweck:

Ressource 4:
Domain:
Art der Ressource:
Direkt zur Webseite oder externer Dienst?
Vermutlicher Zweck:

Ressource 5:
Domain:
Art der Ressource:
Direkt zur Webseite oder externer Dienst?
Vermutlicher Zweck:
-->

Datenschutz-Hinweis

Wenn eine Webseite Inhalte von anderen Servern lädt, können dabei technische Daten übertragen werden. Gehe bei deiner Analyse vorsichtig vor und formuliere Einschätzungen nicht als sichere Behauptungen, wenn du sie nicht belegen kannst.

🔎 Auftrag 4: Datenübertragung kritisch einordnen

Wähle aus Auftrag 3 zwei externe Domains oder Dienste aus, die beim Laden der Webseite sichtbar wurden.

Aufgabe

Ordne diese externen Verbindungen kritisch ein.

Beantworte:

• Welche externe Domain wurde geladen?
• Was könnte der Zweck dieser Verbindung sein?
• Ist der Zweck für die Nutzung der Webseite notwendig?
• Könnte diese Verbindung datenschutzrelevant sein?
• Wird für dich als Nutzer:in klar sichtbar, dass dieser Dienst eingebunden ist?
• Welche Fragen würdest du der Betreiberin oder dem Betreiber der Webseite dazu stellen?

Dokumentation

<!--
Auftrag 4: Externe Dienste einordnen

Externe Domain / Dienst 1:
Möglicher Zweck:
Für die Nutzung notwendig?
Mögliche Datenschutzfrage:
Offene Frage an die Betreiber:innen:

Externe Domain / Dienst 2:
Möglicher Zweck:
Für die Nutzung notwendig?
Mögliche Datenschutzfrage:
Offene Frage an die Betreiber:innen:
-->

Hinweis

Du musst nicht sicher beweisen, was ein externer Dienst genau macht. Wichtig ist eine begründete technische Beobachtung und eine vorsichtige Einschätzung.

🔎 Auftrag 5: Quelltext, Inspektor und Network vergleichen

Untersuche dieselbe Webseite mit drei verschiedenen Blickwinkeln:

• normal sichtbare Webseite
• Seitenquelltext
• Entwicklertools mit Inspektor und Netzwerkbereich

Mögliche Wege:

Strg + U

F12

Aufgabe

Vergleiche die drei Ansichten.

Beantworte:

• Was erkennst du auf der normalen Webseite?
• Was erkennst du im Seitenquelltext?
• Was erkennst du im Inspektor?
• Was erkennst du im Netzwerkbereich, das auf der Webseite selbst nicht direkt sichtbar ist?
• Warum reicht es nicht, eine Webseite nur oberflächlich anzuschauen?

Dokumentation

<!--
Auftrag 5: Drei Blickwinkel

Normale Webseite:

Seitenquelltext:

Inspektor:

Network / Netzwerkbereich:

Wichtigste Erkenntnis:
-->

🔎 Auftrag 6: Eigene Webseite untersuchen

Öffne deine eigene index.html aus den vorherigen Kapiteln im Browser und untersuche sie mit den Entwicklertools.

Aufgabe

Prüfe:

• Werden deine Überschriften als passende HTML-Elemente erkannt?
• Sind Absätze, Listen, Links, Bilder und Tabellen sauber aufgebaut?
• Wird dein Bild korrekt geladen?
• Sind CSS-Regeln sichtbar?
• Wird deine style.css geladen, falls du bereits eine externe CSS-Datei verwendest?
• Gibt es im Netzwerkbereich Fehlermeldungen oder nicht gefundene Dateien?

Dokumentation

<!--
Auftrag 6: Eigene Webseite untersuchen

Gefundene Stärke meiner Seite:

Gefundener Fehler oder Verbesserungsmöglichkeit:

Was war im normalen Browserfenster nicht sofort sichtbar?

Was ändere ich an meiner Seite?
-->

🔎 Auftrag 7: Kurze Abschlussreflexion

In diesem Kapitel muss kein neues Webprodukt entstehen. Wichtig ist, dass du Webseiten bewusster untersuchen kannst.

Aufgabe

Schreibe eine kurze Reflexion.

Leitfragen:

• Was hast du über den technischen Aufbau von Webseiten herausgefunden?
• Warum sind HTML und CSS im Browser untersuchbar?
• Warum sind lokale Änderungen im Browser keine echten Änderungen an der Webseite?
• Welche externen Dienste oder Ressourcen hast du entdeckt?
• Warum kann dieses Wissen für Datenschutz und Medienkritik wichtig sein?
• Wie können Entwicklertools beim Erstellen eigener Webseiten helfen?

Dokumentation

<!--
Auftrag 7: Abschlussreflexion

Das habe ich über Webseiten gelernt:

Das hat mich überrascht:

Das ist für Datenschutz oder Medienkritik wichtig:

Das hilft mir beim Erstellen eigener Webseiten:
-->

Wissensspeicher

Wichtige Begriffe

Browser Programm, das Webseiten lädt, interpretiert und darstellt.

Entwicklertools Werkzeuge im Browser, mit denen HTML, CSS, geladene Dateien und weitere technische Informationen untersucht werden können.

Inspektor / Elements Bereich der Entwicklertools, in dem HTML-Struktur und ausgewählte Elemente sichtbar werden.

HTML-Element Baustein einer Webseite, zum Beispiel eine Überschrift, ein Absatz, ein Link oder ein Bild.

CSS-Regel Gestaltungsvorschrift für ein oder mehrere HTML-Elemente.

Selektor Teil einer CSS-Regel, der auswählt, welche Elemente gestaltet werden.

Eigenschaft CSS-Angabe, die festlegt, was verändert wird, zum Beispiel color.

Wert CSS-Angabe, die festlegt, wie etwas verändert wird, zum Beispiel blue.

Seitenquelltext Der ursprünglich geladene HTML-Code einer Webseite.

DOM Struktur der Webseite, mit der der Browser nach dem Laden arbeitet.

Network / Netzwerkbereich Bereich der Entwicklertools, in dem geladene Dateien, Ressourcen und Verbindungen sichtbar werden.

Ressource Geladene Datei oder Inhalt, zum Beispiel HTML, CSS, JavaScript, Bild oder Schriftart.

externe Domain Domain, die nicht zur eigentlich geöffneten Webseite gehört, aber beim Laden eingebunden wird.

lokale Änderung Änderung, die nur im eigenen Browser sichtbar ist und nach dem Neuladen verschwindet.

Abschlussgedanke

Browser-Werkzeuge machen sichtbar, dass Webseiten nicht einfach aus einer fertigen Oberfläche bestehen. Hinter dem sichtbaren Ergebnis stehen HTML-Struktur, CSS-Gestaltung, geladene Ressourcen und manchmal externe Dienste. Wer Webseiten untersuchen kann, versteht nicht nur Webentwicklung besser, sondern kann auch digitale Darstellungen und mögliche Datenflüsse kritischer einschätzen.