Vertiefung: Browser und Texteditor
Zielsetzung
Bisher haben wir ein Tool zur Erstellung und Betrachtung von Webseiten genutzt. Doch natürlich kann man Webseiten auch ohne das Tool von inf-schule erstellen und betrachten. Auf dieser Seite lösen wir uns davon.
HTML mit einem Text-Editor
Bisher hast du das HTML-Tool von inf-schule genutzt, um Webseiten zu erstellen und zu betrachten. Für größere Projekte mit mehreren Unterseiten, die miteinander verlinkt sind, ist das ungeeignet. Deshalb wirst du nun zu einer anderen Vorgehensweise wechseln.
Aufgabe 1: Der Browser zeigt HTML an
Dein Browser zeigt HTML-Dokumente an. Davon kann man sich auch selbst überzeugen. In vielen Browsern kannst du mit der Tastenkombination „Strg.“ und „U“ (gleichzeitig drücken) von der Vorder- zur Rückseite wechseln. Achtung: Es folgt ein – ggf. riesiger – Quelltext. Versuche nicht, alles zu verstehen, sondern schau, ob du das ein oder andere Tag, das wir oben kennengelernt haben, wiederfindest.
Aufgabe 2: Webseiten im Editor erstellen
In der vorherigen Aufgabe hast du gesehen, dass die Rückseite einer Webseite tatsächlich aus ganz normalem Text besteht – dem HTML-Quelltext. Entsprechend kannst du diesen Quelltext auch ohne das HTML-Tool von inf-schule erstellen und mit einem Browser anzeigen.
(a) Lade dir das folgende zip-Archiv herunter und entpacke es an einen beliebigen Ordner auf deinem Computer. Verschaffe dir einen kurzen Überblick, welche Dateien enthalten sind. Wo befinden sich die ganzen Bilder?
(b) Öffne nun die Datei sport.html in einem Editor (z.B. Notepad++). Verschaffe dir einen Überblick über den HTML-Quelltext (die Rückseite).
(c) Öffne nun dieselbe Datei mit einem Browser. Nun siehst du die Vorderseite. Es ist ein Hyperlink eingebaut. Finde ihn und teste seine Funktionsweise.
(d) Baue in die HTML-Datei Hyperlinks zu den anderen Abteilungen ein. Abteilung 4 fehlt aktuell auch noch. Wenn du die drei zustzlichen Links erstellt hast, dann betrachte die Dateien noch einmal im Browser und teste die Website aus.
Aufgabe 3: CSS einbinden
Das Layout (Farben, Schriftart, ...) einer Website wird durch einen CSS-Quelltext beschrieben.
(a) Lade dir das folgende zip-Archiv herunter und entpacke es an einen beliebigen Ordner auf deinem Computer. Verschaffe dir einen kurzen Überblick, welche Dateien enthalten sind. Wo befinden sich die CSS-Dateien?
(b) Öffne eine beliebige der enthaltenen HTML-Dateien in einem Editor und verschaffe dir einen Überblick über den Quelltext. Was hat sich im Vergleich zu den vorherigen Aufgaben geändert? An welcher Stelle des HTML-Quelltextes wird festgelegt, welche CSS-Datei verwendet werden soll?
(c) Es ist eine zweite CSS-Datei enthalten. Ändere den HTML-Quelltext einer Datei so ab, dass nun diese andere CSS-Datei genutzt wird. Überprüfe die Auswirkungen davon, indem du die HTML-Datei von einem Browser anzeigen lässt.
(d) Ändere bei allen enthaltenen Webseiten die Hintergrundfarbe zu grün.
Aufgabe 4: Trennung von Inhalt/Struktur und Design
(a) 💬 Begründe mithilfe von Aufgabe 3, dass es sinnvoll ist, die Layout/Design-Informationen für eine Website in einer separaten Datei zu speichern, statt in jeder einzelnen HTML-Datei das Layout festzulegen. Man spricht dabei von der Trennung von Inhalt/Struktur und Design.
(b) ✏️️ Notiere dir die eben kennengelernte Trennung von Inhalt/Struktur (mit HTML) und Design (mit CSS in einer eigenen Datei) als ein wesentliches Prinzip bei der Erstellung von Webseiten. Halte eine Begründung fest, warum das sinnvoll ist.
Zum Vergleichen
Eine ganz andere Art, Dokumente zu erstellen, findest du im Abschnitt Office-Anwendungen. Textverarbeitungsprogramme kommen ohne „Vorder- und Rückseite“ aus; dennoch gibt es auch hier eine Trennung von Inhalt/Struktur und Design.
