Wie kommt die Seite in den Browser?

IT 11.7 – Webdesign · Einheit 1 · Café-Projekt Schritt 1

Lernziele

Du kannst das Client-Server-Prinzip beschreiben und erklären, was ein Webserver tut.
Du kannst den Ablauf eines Seitenaufrufs von der Eingabe der Adresse bis zur fertigen Seite beschreiben.
Du kannst erklären, worin sich das Öffnen einer Datei und der Abruf über einen Webserver unterscheiden.
Du kannst das Grundgerüst einer HTML-Datei erstellen und seine Bestandteile erklären.

Was steckt hinter einer Webseite?

Die Schülervertretung möchte, dass das Schülercafé „Pause“ eine eigene Webseite bekommt: mit Öffnungszeiten, Speisekarte und einem Bestellformular. Du sollst sie bauen.

Bevor du anfängst, lohnt sich ein Blick hinter die Kulissen. Was bekommt dein Browser eigentlich, wenn er eine Seite anzeigt? Ein fertiges Bild? Einen Text? Und woher?

Erkunden: Hinter die Kulissen schauen

Bevor du weiterliest: Bearbeite die beiden Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Der Quelltext einer Seite leicht

Öffne im Browser eine beliebige Seite, zum Beispiel diese hier. Drücke Strg + U (oder Rechtsklick → „Seitenquelltext anzeigen“).

a) Beschreibe, was du siehst. Ist das ein Bild, ein Programm oder ein Text?

b) Suche im Quelltext einen Satz, den du auch auf der Seite lesen kannst. Beschreibe, was um diesen Satz herum steht.

c) Stelle eine Vermutung auf: Wer macht aus diesem Text die fertige, gestaltete Seite?

Lösung (mögliche Beobachtungen)

Erkundung 2: Ein erster Versuch mittel

Im Spielplatz steht eine kleine Seite. Ändere den Code und beobachte die Vorschau.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Ändere den Text zwischen <h1> und </h1>. Beschreibe, was passiert.

b) Ändere den Text zwischen <title> und </title>. Siehst du die Änderung in der Vorschau? Stelle eine Vermutung auf, wo dieser Text erscheint.

c) Lösche das </p> am Ende des Absatzes. Beschreibe, was passiert. Was schließt du daraus über den Browser?

Tipp 1

Zu b): Schau dir die Reiter oben in deinem Browser an. Was steht dort bei dieser Seite?

Lösung

Client und Server

Vergleiche deine Beobachtungen mit den folgenden Erklärungen.

Im Netz gibt es zwei Rollen:

Der Client (englisch für Kunde) möchte etwas haben und fragt an. Beim Surfen ist das dein Browser.
Der Server (englisch für Diener) wartet auf Anfragen und antwortet. Für Webseiten ist das ein Webserver: ein Programm auf einem Rechner im Internet, das Dateien wie index.html oder Bilder bereithält und auf Anfrage verschickt.

Das nennt man das Client-Server-Prinzip. Ein Webserver bedient dabei viele Clients gleichzeitig.

Die Adresse, die du eintippst, heißt URL. Sie sagt, wie und wo etwas zu finden ist:

Teil	Beispiel in `https://cafe.example/speisekarte.html`
Protokoll: wie abgerufen wird	`https` (verschlüsselt) oder `http`
Name des Servers	`cafe.example`
Pfad: welche Datei	`/speisekarte.html`

Fehlt der Pfad, liefert der Webserver meist die Datei index.html. Deshalb heißt die Startseite fast immer so.

So läuft ein Seitenaufruf ab

Verfolge Schritt für Schritt, was passiert, wenn du http://cafe.example/ aufrufst:

Alle bisherigen Schritte

Mehr zu den Anfragen und Antworten (HTTP) und zur Namensauflösung (DNS) lernst du im Modul IT 12.4 Netzwerke.

Datei öffnen oder vom Webserver holen?

Eine HTML-Datei kannst du auch einfach doppelt anklicken. Dann öffnet der Browser sie direkt von deiner Festplatte. In der Adressleiste steht dann etwas wie file:///C:/Users/…/index.html.

	Datei öffnen	über einen Webserver
Adresse	`file:///C:/…/index.html`	`https://cafe.example/`
Wer kann die Seite sehen?	nur du, auf deinem Rechner	alle, die den Webserver erreichen
Wozu?	zum Entwickeln und Testen	zum Veröffentlichen

Zum Bauen der Café-Seite reicht das Öffnen als Datei völlig aus. Damit andere sie sehen können, muss sie später auf einen Webserver hochgeladen werden.

Das Grundgerüst einer HTML-Datei

HTML (Hypertext Markup Language) ist eine Auszeichnungssprache: Man „zeichnet“ Text aus, sagt also, was er ist. HTML ist keine Programmiersprache, es rechnet und entscheidet nichts.

Jede HTML-Datei hat dasselbe Grundgerüst:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Schülercafé Pause</title>
</head>
<body>
  <h1>Willkommen im Schülercafé</h1>
  <p>Wir haben in der großen Pause geöffnet.</p>
</body>
</html>

Teil	Bedeutung
`<!doctype html>`	sagt dem Browser: Das ist eine HTML-Seite nach heutigem Standard
`<html lang="de">`	umschließt alles; `lang="de"` sagt, dass die Seite deutsch ist (wichtig für Vorlesehilfen und Silbentrennung)
`<head>`	Kopf: Angaben über die Seite, nicht sichtbar auf der Seite
`<meta charset="utf-8">`	Zeichensatz, damit Umlaute wie ä, ö, ü richtig erscheinen
`<meta name="viewport" …>`	sorgt dafür, dass die Seite auf dem Handy nicht winzig dargestellt wird (Einheit 7)
`<title>`	Titel im Reiter des Browsers
`<body>`	Körper: alles, was auf der Seite sichtbar ist

Fachbegriffe:

Ein Tag ist eine Markierung in spitzen Klammern. Ein Starttag wie <p> und ein Endtag wie </p> umschließen den Inhalt.
Starttag, Inhalt und Endtag zusammen bilden ein Element.
Attribute stehen im Starttag und geben Zusatzangaben, zum Beispiel lang="de".
Manche Elemente haben kein Endtag, zum Beispiel <meta …>.
Elemente werden verschachtelt: <body> steckt in <html>, <h1> in <body>. Was zuletzt geöffnet wurde, wird zuerst geschlossen.

Kommentare schreibt man so: . Der Browser zeigt sie nicht an.

Die Entwicklerwerkzeuge des Browsers

Mit F12 öffnest du in jedem gängigen Browser die Entwicklerwerkzeuge. Unter „Elemente“ (oder „Inspektor“) siehst du den Aufbau der Seite. Fährst du mit der Maus über ein Element, wird es auf der Seite markiert. Du kannst dort sogar Texte zum Ausprobieren ändern. Beim Neuladen ist alles wieder wie vorher. Die Entwicklerwerkzeuge helfen dir später sehr bei der Fehlersuche.

Café-Projekt: Schritt 1

Café-Projekt, Schritt 1: Der Projektordner leicht

Ab jetzt baust du die Seite des Schülercafés in einem Editor, zum Beispiel VSCodium.

Lege einen Ordner schuelercafe an und öffne ihn im Editor („Datei → Ordner öffnen“).
Lege darin die Datei index.html an.
Schreibe das Grundgerüst. Tipp: In VSCodium erzeugt die Eingabe von ! und Tab ein fertiges Grundgerüst (das nennt man Emmet). Prüfe dann, ob lang="de" und charset="utf-8" stimmen.
Titel: Schülercafé Pause. Im body: eine Überschrift Willkommen im Schülercafé „Pause“ und ein Absatz, der in einem Satz sagt, was das Café anbietet.
Speichere und öffne die Datei im Browser. Nach jeder Änderung: speichern, dann im Browser neu laden (F5).

Stand nach Schritt 1

Aufgaben

Aufgabe 1: Wer fragt, wer antwortet? leicht

Ordne zu: Wer ist bei den folgenden Vorgängen der Client, wer der Server?

Jemand ruft auf dem Handy den Fahrplan eines Verkehrsverbunds auf.
Ein Smart-TV lädt die Startseite einer Mediathek.
Ein Webserver einer Schule liefert den Vertretungsplan an 300 Laptops.

Lösung

Aufgabe 2: Code lesen mittel

Gegeben ist diese Datei:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Fahrradwerkstatt</title>
</head>
<body>
  <h1>Reparatur in 24 Stunden</h1>
  <!-- Preise folgen später -->
  <p>Abgabe montags bis freitags von 8 bis 16 Uhr.</p>
</body>
</html>

a) Gib an, welche Texte im Browser auf der Seite erscheinen und welcher Text im Reiter steht.

b) Erläutere, warum der Text „Preise folgen später“ nicht zu sehen ist.

Lösung

Aufgabe 3: Fehler finden mittel

In diesem Grundgerüst stecken vier Fehler. Finde sie und gib jeweils die Verbesserung an.

<!doctype html>
<html>
<head>
  <title>Schülercafé</title>
<body>
  <h1>Öffnungszeiten</h2>
  <p>Wir haben <b>jeden Tag</p></b> geöffnet.
</body>
</html>

Tipp 1

Achte auf: Sprache der Seite, Zeichensatz, Kopf schließen, passende Endtags, Verschachtelung.

Tipp 2

Einer der Fehler hat mit den Umlauten in „Öffnungszeiten“ zu tun.

Lösung

Aufgabe 4: Warum sieht sie es nicht? schwer

Mia hat die Café-Seite fertig. Sie schickt ihrem Mitschüler die Adresse aus ihrer Adressleiste:

file:///C:/Users/Mia/Dokumente/schuelercafe/index.html

Er öffnet sie auf seinem Laptop zu Hause, bekommt aber nur eine Fehlermeldung.

a) Erkläre, warum die Seite bei ihm nicht erscheint.

b) Beschreibe, was nötig ist, damit alle Schülerinnen und Schüler die Seite über das Internet aufrufen können.

Tipp 1

Wo liegt die Datei, auf die file:///C:/… zeigt? Wer fragt hier wen?

Lösung

Zusatzaufgabe: Sonderzeichen in HTML schwer Zusatz

Du möchtest auf einer Seite den Satz anzeigen: Ein Absatz beginnt mit <p>.

a) Probiere im Spielplatz von Erkundung 2 aus, was passiert, wenn du den Satz einfach so ins body schreibst.

b) Recherchiere, was benannte Zeichen (zum Beispiel <) sind, und verwende sie, damit der Satz richtig erscheint.

c) Finde heraus, wie man ein geschütztes Leerzeichen schreibt, und nenne ein Beispiel, wo man es braucht.

Lösung

Zusammenfassung

Der Browser ist der Client: Er fragt an. Der Webserver hält die Dateien bereit und antwortet. Das ist das Client-Server-Prinzip.
Bei einem Seitenaufruf fragt der Browser zuerst nach der Adresse des Servers (DNS), dann holt er index.html und danach alles, was die Seite noch braucht (CSS, Bilder). Erst dann baut er die Seite zusammen.
file:/// öffnet eine Datei auf dem eigenen Rechner. Damit andere die Seite sehen, muss sie auf einen Webserver.
HTML beschreibt den Aufbau einer Seite mit Elementen aus Start- und Endtag. Attribute geben Zusatzangaben.
Grundgerüst: <!doctype html>, <html lang="de">, <head> mit charset, viewport und title, <body> mit dem sichtbaren Inhalt.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du das Client-Server-Prinzip beschreiben und sagen, was ein Webserver tut? → Client und Server, Aufgabe 1
Kannst du den Ablauf eines Seitenaufrufs beschreiben? → Erkundung 1, So läuft ein Seitenaufruf ab
Kannst du Datei öffnen und Abruf über einen Webserver unterscheiden? → Datei öffnen oder vom Webserver holen?, Aufgabe 4
Kannst du das Grundgerüst erstellen und erklären? → Erkundung 2, Das Grundgerüst, Café-Projekt, Aufgabe 2, Aufgabe 3

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Client	Programm, das etwas anfragt, zum Beispiel der Browser
Server	Programm, das auf Anfragen wartet und antwortet
Webserver	Server, der Webseiten und Dateien bereitstellt
URL	vollständige Adresse einer Seite: Protokoll, Name des Servers, Pfad
HTML	Auszeichnungssprache, die den Aufbau einer Seite beschreibt
Tag	Markierung in spitzen Klammern, zum Beispiel `<p>` oder `</p>`
Element	Starttag, Inhalt und Endtag zusammen
Attribut	Zusatzangabe im Starttag, zum Beispiel `lang="de"`
head / body	Kopf mit Angaben über die Seite / Körper mit dem sichtbaren Inhalt
Kommentar	Notiz im Code, die der Browser nicht anzeigt
Entwicklerwerkzeuge	Werkzeuge im Browser (F12), um den Aufbau einer Seite zu untersuchen

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign (Stand November 2022).
HTML nach dem HTML Living Standard (WHATWG). Beispielnamen nach RFC 2606, Beispieladressen nach RFC 5737.
Texte, Beispiele, Aufgaben, Ablauf und Code-Beispiele sind selbst erstellt.