Home
Einleitung
Grundlagen
Elemente und Attribute
HTML-Dokumente
strukturelles Markup
Headings
White Space
Absatz oder Paragraph
Style Sheets
Block und Inline Elemente
weitere Elemente
generische Strukturen
Attribute
Anwendung (1)
Anwendung (2)
Site Management
Hyperlinks
Bilder und Grafiken
ohne Fehl und Tadel
Spezialfälle
Tabellen
Formulare
Schlussbemerkungen
Überschriften und Absätze kennen wir bereits, aber es gibt noch ein paar weitere Textarten, die uns schon aufgefallen sind.
Überleg dir mal, aus welchen Gründen Text in Büchern, Artikeln und anderswo
dargestellt werden könnte.
Alle drei können zur Hervorhebung bestimmter Passagen herbeigezogen werden. Unterstrichen werden vielleicht
auch Buchtitel, die irgendwo referenziert werden, kursive Schrift könnte für Zitate oder Fremdwörter beigezogen
werden. Allerdings: Verbindliche Regeln gibt's nicht und sogar der übliche Gebrauch
ist international
verschieden.
Aber natürlich basieren solche Darstellungen nicht auf dem Zufall. Sie sind vom Autor gewählt worden, um einen bestimmten inhaltlichen Aspekt optisch auszudrücken. HTML erlaubt es uns nun, diesen Aspekt ausdrücklich festzuhalten, und nicht nur über eine vage visuelle Konvention.
So können wir zum Beispiel einen Text, der besonderen Nachdruck verdient, mit <em> (für
Emphasis
) oder gar mit <strong> (für strong emphasis
) bezeichnen, und das
wird dann im Browser für eine entsprechende Hervorhebung sorgen.
Bei Zitaten steht uns das Element <cite> zur Verfügung, dessen Inhalt der Titel des zitierten Werkes
ist, oder <q> für kurze und <blockquote> für längere zitierte Textpassagen, wobei
letzteres offensichtlich ein Block-Element ist.
Du siehst bereits, dass die Auszeichnung eines HTML-Dokumentes keine rein technische Aktivität ist: Du musst dich anhand des Inhaltes entscheiden, welche Elemente zum Zuge kommen sollen.
Kehren wir nun also zu unserer Seite index.html zurück, an der wir bis jetzt gearbeitet haben,
und zeichnen wir die Elemente, über die wir soeben gesprochen haben, aus.
Suche im Dokument index.html nach Zitaten, Hervorhebungen und so weiter, und versieh sie
mit den entsprechenden Markierungen. Du solltest
<em>alle mindestens einmal verwenden können. Die Style Sheets sind auf die Lösung dieser Übung schon
vorbereitet und enthalten Anweisungen zur Darstellung all dieser Elemente.
<strong>
<cite>
<q>
<blockquote>
Übrigens: All diese Elemente kann man einfach um den entsprechenden Text anordnen. <blockquote>
hat aber noch eine Besonderheit: Trotzdem es selber ein Block-Element ist, sollte es nicht für sich selber
stehen, sondern immer mindestens ein <p>-Element enthalten. Es dürfen auch mehrere sein.
In unserem Fall wirst du das <blockquote>-Element um zwei <p>-Elemente
herum gruppieren müssen, aber auch wenns nur ein einziges wäre, wäre die Lösung einfach: Lass das <p>-Element
stehen und leg das <blockquote>-Element einfach darum herum.
Natürlich kann es unterschiedliche Auffassungen geben, wenn's um <em> und <strong> geht,
aber letztlich solltest du ja in der Lage sein, den Inhalt zu interpretieren.
Hier ist meine Lösung:
Du kannst, wenn du unerklärliche Differenzen entdeckst, ja immer noch einen Blick in den HTML-Code werfen.
Ein Nachtrag zum <cite>-Element: Es ist ein Inline-Element. Da Inline-Elemente nicht
unbeaufsichtigt rumstehen dürfen, sondern in einem Block-Element stehen müssen, haben wir den Absatz (Paragraph)
als Behälter um das <cite>-Element stehen lassen.
Nimm dir die nötige Zeit, zu überprüfen, ob deine Lösung stimmt. Achte wie immer darauf, dass alle Elemente korrekt abgeschlossen sind und einander nicht überlappen. Manchmal ist eine solche Überprüfung lästig, aber sie ist wichtig, und wir werden später eine einfachere Möglichkeit kennen lernen, sie vorzunehmen und Syntax-Fehlern im HTML-Code auf die Spur zu kommen.