Hauptmenü

02 - Erste Inhalte

Kopiert den folgenden Code in Euren Editor und speichert eine neue Datei unter dem Namen 02-gedicht.html ab.

<!doctype html>
<html lang="de">
  <head>
    <title>Ein Gedicht</title>
  </head>
  <body>
Erhardt, Heinz (1909 -1979)
Die polyglotte Katze

Die Katze sitzt vorm Mauseloch,
in das die Maus vor kurzem kroch,
und denkt: "Da wart nicht lang ich,
die Maus, die fang ich!"

Die Maus jedoch spricht in dem Bau:
„Ich bin zwar klein, doch bin ich schlau!
Ich rühr mich nicht von hinnen,
ich bleibe drinnen!"

Da plötzlich hört sie - statt "miau" -
ein laut vernehmliches "wau-wau"
und lacht: „Die arme Katze,
der Hund, der hatse!

Jetzt muss sie aber schleunigst flitzen,
anstatt vor meinem Loch zu sitzen!"
Doch leider - nun, man ahnt's bereits -
war das ein Irrtum ihrerseits.

Denn als die Maus vors Loch hintritt -
es war nur ein ganz kleiner Schritt -
wird sie durch Katzenpfotenkraft
hinweggerafft! - -

Danach wäscht sich die Katze die Pfote
und spricht mit der ihr eignen Note:
„Wie nützlich ist es dann und wann,
wenn man 'ne fremde Sprache kann...!"    
  </body>
</html>

Das Ergebnis, das Ihr im Browser seht, wird Euch sicher enttäuschen. HTML ist eine Markup-Sprache, die sich nicht sonderlich um Zeilenenden und Leerzeichen kümmert. Es ist unsere Aufgabe, den Text zu beschreiben, also mit Markup zu versehen. Um etwas Ordnung in das Durcheinander zu bringen, fangen wir an, die einzelnen Strophen des Gedichts als Absätze zu markieren. Dazu umschließen wir jede Strophe mit dem p-Tag (p wie Paragraph).

Das kann dann so aussehen:

<p>
Die Katze sitzt vorm Mauseloch,
in das die Maus vor kurzem kroch,
und denkt: "Da wart nicht lang ich,
die Maus, die fang ich!"
</p>
<p>
Die Maus jedoch spricht in dem Bau:
„Ich bin zwar klein, doch bin ich schlau!
Ich rühr mich nicht von hinnen,
ich bleibe drinnen!"
</p>

Den Autor und den Titel des Gedichts kennzeichnen wir als Überschriften (heading) mit einem h-Tag. Die gibt es von <h1> für die Hauptüberschrift der Seite bis <h6> fü jeweils untergeordnete Überschriften.

Aber auch dieses Ergebnis kann noch nicht befriedigen. Wir brauchen noch Zeilenümbrüche, um unserem Gedicht eine ansprechende Erscheinung zu geben.

Zeilenumbrüche signalisieren wir mit den Tag <br>, zu dem es kein schließendes Tag gibt.

Aufgabe: vervollständigt die Datei gedicht.html soweit, dass Gedicht als solches zu erkennen ist.