Übungsblatt 5: World Wide Web Sommersemester 2020

Internet Computing für Geistes- und

Sozialwissenschaften
Für dieses Übungsblatt benötigen Sie ein Nachschlagewerk, in dem Sie Informationen zu HTML-
Tags, Attributen und CSS-Eigenschaften einholen können. Eine beliebte und bewährte Online-
Quelle zu Themen rund ums Web ist SELFHTML (http://wiki.selfhtml.org/). Dort findet sich auch
alles, was zur Lösung dieser Aufgaben benötigt wird. Um Ihre HTML-Dateien zu testen, benutzen
Sie einen reinen Texteditor, kein Textverarbeitungsprogramm; die Dateiendung sollte „.html“ oder
„.htm“ sein. Öffnen Sie Ihre Dateien dann über den Menüpunkt „Datei öffnen“ Ihres Browsers oder
über die Adresszeile mit „file:///<Pfad zur HTML-Datei>“, nicht über die Adresszeile mit „http...“!
Beachten Sie auch, dass vom Erscheinungsbild einer Webseite nur bedingt auf den zugrunde-
liegenden HTML-Code geschlossen werden kann. Benutzen Sie bei Mehrdeutigkeiten jeweils das
HTML-Tag, das Ihnen am sinnvollsten erscheint.

1. Wie könnte eine HTML-Datei aussehen, die vom Browser folgendermaßen angezeigt wird?

2. Geben Sie eine HTML-Datei zu folgender Webseite an:

Die Links verweisen auf „http://www.lm-schultze.de/“ bzw. „http://fk-maier.de/“.

3. Erstellen Sie die folgende Webseite:

Hinweis: Das Hutsymbol soll sich im selben Verzeichnis befinden wie Ihre HTML-Datei.
Es ist 64 Pixel breit und 30 Pixel hoch. Die Bilddatei ist als Zusatzmaterial im herunterladbaren
ZIP-File„blatt5.zip“ unter dem Namen "hut.gif" vorhanden.

4. Im oben erwähnten Zusatzmaterial gibt es auch eine Datei „aufgabe4.html“. Schreiben Sie eine
CSS-Datei, die folgendes bewirkt:

• h1- und h2-Überschriften werden zentriert dargestellt

• Abweichend von den Standardeinstellungen sind h3- Überschriften 1.5em groß (Was ist
ein „em“?), nicht fett und dunkelblau (#00a); außerdem sind sie mit einem gelben
Hintergrund (#fd0) versehen, der sich 0.5em in alle Richtungen ausdehnt
• Die Absätze zur Verfügbarkeit werden xx-small und kursiv angezeigt
• Die Listen werden in eineinhalbfacher Zeilenhöhe und in einem dunklen Rot (#700)
dargestellt

Tipp: Die CSS-Eigenschaften "background-color", "color", "font-size", „font-style",

"font-weight", "line-height", „padding" und „text-align" werden sich als nützlich erweisen.
Die genaue Bedeutung und die möglichen Werte dieser Eigenschaften können Sie in dem von
Ihnen bevorzugten Nachschlagewerk finden.
Vergessen Sie nicht, die CSS-Datei auch in die HTML-Datei einzubinden!