So siehst du den Quelltext einer Seite

Was ist der Quelltext?

Der Quelltext ist der Text, aus dem eine Internetseite gebaut ist. Der Browser macht daraus die Seite, die du siehst.

Im Quelltext siehst du auch Dinge, die man auf der Seite nicht sieht. Zum Beispiel den Titel, die Sprache und die Alternativtexte von Bildern.

Du kannst beim Ansehen nichts kaputt machen. Du liest nur.

Du hast diese Seite in einem neuen Tab geöffnet. Wenn du fertig bist, schließe den Tab mit den Tasten Strg + W. Dann bist du wieder im Arbeitsauftrag. Deine Antworten sind noch da.

Weg 1: Den Quelltext ansehen

Öffne die Seite, die du prüfen willst.
Drücke Strg + U. Auf dem Mac drückst du in Chrome Befehl + Wahl + U und in Firefox Befehl + U.
Es geht auch mit der Maus: Klicke mit der rechten Maustaste auf die Seite. Wähle „Seitenquelltext anzeigen“.
Der Quelltext öffnet sich in einem neuen Tab.

Du siehst viel Text mit spitzen Klammern. Zum Beispiel so:

<html lang="de">
<head>
  <title>Mein Titel</title>
</head>
<body>
  <h1>Meine Überschrift</h1>
  <p>Ein Absatz.</p>
</body>
</html>

Das Wort in den spitzen Klammern heißt Tag. Zu fast jedem Tag gibt es ein Gegenstück mit Schrägstrich. Zum Beispiel <p> und </p>. Dazwischen steht der Inhalt.

Der Safari-Browser braucht zuerst eine Einstellung für Webentwickler. Nimm am besten Chrome, Edge oder Firefox.

Im Quelltext suchen

Der Quelltext ist lang. Du musst nicht alles lesen. Drücke Strg + F und gib ein Suchwort ein. Der Browser springt dann zur Stelle.

Diese Suchwörter helfen dir beim Prüfbogen
Suchwort	Was du damit prüfst
`lang`	Ist die Sprache der Seite angegeben? Gesucht ist `<html lang="de">`.
`<title`	Was steht als Titel der Seite da?
`<h1` und `<h2`	Gibt es Überschriften? Eine Überschrift braucht ein h-Tag.
`<header`, `<nav`, `<main`, `<footer`	Ist die Seite in Bereiche geteilt?
`<img`	Welche Bilder gibt es? Steht dort `alt="…"`?
`<a`	Welche Links gibt es? Der Linktext steht zwischen `<a …>` und `</a>`.
`<label`	Haben die Formularfelder eine Beschriftung?
`<button`	Ist der Absende-Knopf ein echter Knopf?
`viewport`	Passt sich die Seite an kleine Fenster an?

Findest du ein Suchwort nicht? Das kann schon ein Ergebnis sein. Schreibe es in die Bemerkung beim Prüfbogen.

Weg 2: Die Entwicklertools

Die Entwicklertools sind in den Browser eingebaut. Sie zeigen dir den Quelltext und das Aussehen (CSS) für ein einzelnes Element.

Klicke mit der rechten Maustaste auf einen Text oder ein Bild.
Wähle „Untersuchen“. In Firefox heißt es „Element untersuchen“. Du kannst auch F12 drücken.
Es öffnet sich ein Bereich am Rand des Fensters. Das markierte Element steht im Quelltext dort markiert.
Rechts oder unten siehst du die CSS-Regeln für dieses Element. Dort stehen zum Beispiel color für die Textfarbe und font-size für die Schriftgröße.

So liest du den Kontrast ab

Wähle den Text mit „Untersuchen“ aus.
Suche in den CSS-Regeln die Zeile mit color. Davor steht ein kleines Farbfeld.
Klicke auf das Farbfeld. In Chrome und Edge siehst du dann den Kontrastwert (englisch: contrast ratio). Er sollte bei normalem Text mindestens 4,5 sein.
In Firefox findest du ähnliche Angaben im Tab „Barrierefreiheit“.

So findest du Regeln, die den Fokus ausblenden

Suche in den CSS-Regeln nach dem Wort outline. Steht dort outline: none, wird der Rahmen um das aktive Element ausgeblendet.

Weg 3: Die Datei im Editor öffnen

Du kannst die Datei ausgangsseite.html auch in einem Texteditor öffnen. Klicke mit der rechten Maustaste auf die Datei. Wähle „Öffnen mit“ und dann den Editor.

Im Quelltext siehst du eine Zeile mit <link rel="stylesheet" href="…">. Dort steht, welche CSS-Datei zur Seite gehört. In dieser CSS-Datei steht das Aussehen: Farben, Schriftgrößen und der Fokus.