03 - Ein wenig Gestaltung
In der zweiten Lektion war es unsere Aufgabe, aus dem, was im Quellcode wie ein Gedicht aussieht, eines zu machen, das auch im Browser so aussieht. Eine mögliche Lösung könnte diese sein:
<!doctype html> <html lang="de"> <head> <title>Ein Gedicht</title> </head> <body> <h3>Erhardt, Heinz (1909 -1979)</h3> <h1>Die polyglotte Katze</h1> <p> Die Katze sitzt vorm Mauseloch,<br> in das die Maus vor kurzem kroch,<br> und denkt: "Da wart nicht lang ich,<br> die Maus, die fang ich!" </p><p> Die Maus jedoch spricht in dem Bau:<br> "Ich bin zwar klein, doch bin ich schlau!<br> Ich rühr mich nicht von hinnen,<br> ich bleibe drinnen!" </p><p> Da plötzlich hört sie - statt "miau" –<br> ein laut vernehmliches "wau-wau"<br> und lacht: "Die arme Katze,<br> der Hund, der hatse! </p><p> Jetzt muss sie aber schleunigst flitzen,<br> anstatt vor meinem Loch zu sitzen!"<br> Doch leider - nun, man ahnt's bereits - <br> war das ein Irrtum ihrerseits. </p><p> Denn als die Maus vors Loch hintritt - <br> es war nur ein ganz kleiner Schritt - <br> wird sie durch Katzenpfotenkraft<br> hinweggerafft! - - </p><p> Danach wäscht sich die Katze die Pfote<br> und spricht mit der ihr eignen Note:<br> "Wie nützlich ist es dann und wann,<br> wenn man 'ne fremde Sprache kann...!" </p> </body> </html>
Heute wollen wir uns der Frage widmen, wie wir das eher zurückhaltende Erscheinungsbild unseres Gedichts etwas aufregender gestalten können.
Besondere Zeichen
Unicode hat es fast überflüssig gemacht. In den Kindertagen des Internet wurden auch HTML-Seiten in ASCII codiert auf den Weg durch das World Wide Web geschickt. Alle Zeichen, die nicht Bestandteil des ASCII-Vorrats sind, mussten als sogenannte HTML-Entities in den Code eingefügt werden. Eine Google-Suche nach diesem Begriff bring eine Unzahl an Webresourcen zutage. Eine angeblich vollständige Liste von HTML-Entities findet sich hier.
Aufgabe 1:
Ersetzt in dem Gedicht die Bindestriche, die ja eigentliche Gedankenstriche sein sollen, mit geeigneten Entities.
Beachtet dabei folgendes, was gar nichts mit HTML zu tun hat, sondern mit typographischer Konvention in unterschiedlichen Sprachräumen: Der deutsche Gedankenstrich ist ein n-breiter Strich (d.h. der Strich ist so lang wie das n in der gerade gewählten Schriftart breit ist) mit einem Leerzeichen davor und ggf. dahinter. Im englischsprachigen Kulturkreis ist der Gedankenstrich ein m-breiter Strich ohne Leerzeichen davor oder dahinter.
Das Gleiche macht Ihr dann auch mit den Anführungszeichen. Ersetzt sie durch die korrekten typographischen Anführungszeichen.
Auf die guten alten Zeiten: Ihr könnt gerne auch die Umlaute und das ß gegen die entsprechenden Entitäten austauschen.
Textauszeichnung
HTML stellt für das Hervorheben von Text die folgenden Tags bereit:
<i>italic</i>
<b>bold</b>
<em>emphasis</em> (findet heraus, was diese Tag genau macht.)
Aufgabe 2
Stellt alle Tierbezeichnungen in dem Gedicht im Fettdruck dar. Alle Tiergeräusche setzt Ihr kursiv.
Jetzt kommt Farbe ins Spiel
Dazu benutzen wir CSS.
Viele Aspekte des Aussehens von Text lassen sich auch in HTML verwirklichen, z.B. die Text- oder die Hintergrundfarbe, die Schriftart oder die Schriftgröße oder die Absatzausrichtung (zentriert, links- bzw. rechtsbündig oder Blocksatz) Dazu werden die öffnenden HTML-Tags mit sogenannten Attributen erweitert, denen Werte zugeordnet werden. Das kann dann so aussehen:
<h1 align="center">Die polyglotte Katze</h1>
Hier ist align eines der für <h1> zugelassenen Attribute, welchem einer der Werte {left|rigth|center|justify} zugewiesen werden kann. Das ganze betrachten wir, wenn überhaupt, nur mit historischem Interesse. Was wir uns merken, ist, dass man HTML-Tags um Attribut-Wert-Paare in der Form <tag attribut="wert"> erweitern kann.