Auf dieser Seite geht es um die Formatierung eines Textes in einem XHTML-Dokument.
Ein wichtiges und oft benutzes Element bei der Textformatierung ist das Tag <p>…</p> für einen neuen
Abschnitt.
Bei den semantischen oder logischen Formatierungen wird es dem jeweiligen Browser überlassen, wie der Text zu formatieren ist. Dies hat den Vorteil, dass die Benutzer in ihren Browsereinstellungen die Kontrolle über die Darstellung des zu formatierenden Textes haben. In modernen Browsern kann ein Benutzerstylesheet definiert werden, welches diese globalen Einstellungen dann übernimmt.
Für die meisten XHTML-Elemente zur Textformatierung ist ein title-Attribut nicht nötig, kann jedoch trotzdem zur zusätzlichen Beschreibung des ausgezeichneten Textes benutzt werden.
In XHTML wird zwischen Überschriften erster (große Schrift) bis sechster Ordnung (kleine Schrift) unterschieden. Bevor beispielsweise eine Überschrift
zweiter Ordnung notiert werden darf, muss zuerst eine Überschrift der ersten Ordnung notiert worden sein, und so fort.
Überschriften werden mit den Tags <h1> bis <h6> eingeleitet, und
mit den entsprechenden End-Tags </h1> bis </h6> geschlossen.
Das nachfolgende Beispiel benutzt eine Überschrift der vierten Ordnung:
Der Quelltext:
<h4>Eine Überschrift der vierten Ebene</h4>wird durch die jeweiligen Browsereinstellungen beeinflusst, und kann je nach Browser unterschiedlich ausfallen:
Möchten Sie beispielweise einen Text in Ihrem XHTML-Dokument hervorheben, verwenden Sie einfach die dafür vorgesehenen XHTML-Elemente em oder strong.
Der Quelltext:
Dieser Satz <em>hat drei hervorgehobene</em> Worte.wird in den meisten Browsern angezeigt als:
Dieser Satz hat drei hervorgehobene Worte.
oder:
In diesem Satz finden Sie ein <strong>wichtiges</strong> Wort.wird in diesen Browsern angezeigt als:
In diesem Satz finden Sie ein wichtiges Wort.
Die XHTML-Elemente (Tags) <em> und <strong> stehen für leicht betonten bzw. stark betonten Text. Die Formatierung übernimmt der Browser in Abhängigkeit der Einstellungen des Benutzers. Hat der Benutzer keine besonderen Einstellungen für diese logischen Textformatierungen vorgenommen, nimmt der Browser Standardwerte. Das Element <em> wird dann in den meisten Browsern kusiv und das Element strong als Fettschrift angezeigt.
Möchten Sie bei der Erstellung Ihrer Webseiten einen Text als Abkürzung auszeichnen, dann verwenden Sie das abbr oder das acronym-Element. Abkürzungen besitzen das Attribut title im Anfangs-Tag. Ein Acronym ist eine besondere Abkürzung welches als eigenes Wort ausgesprochen werden kann.
<abbr title="zum Beispiel">z.B.</abbr>Ein Attribut des Tags abbr ist title, es bekommt den Wert "zum Beispiel" zugewiesen.
Attributwerte sollten immer in Anführungszeichen geschrieben werden. Nicht-Sehende benutzen oft einen Screen-Reader,
welcher die Webseite mit dem Wert des title-Attributs vorlesen kann. Auch beim überfahren mit der Maus wird
der ausgeschriebene Text der Abkürzung dann oft als Tooltip (beim überfahren mit der Maus) lesbar.
Leider zeigt der Internet Explorer das title-Attribut dieses Tags nicht an. Deswegen benutzen viele Webdesigner
auch für eine normale Abkürzung das acronym-Tag, um auch Internet Explorer-kompatible Dokumente zu erstellen.
<acronym title="Accessible Webdesign Saarland">AcWeDeS</acronym>Ein Attribut des Tags acronym ist title, es bekommt den Wert "Accessible Webdesign Saarland" zugewiesen. Beim überfahren mit der Maus wird der ausgeschriebene Text des Acronyms jetzt auch im Internet Explorer als Tooltip angezeigt.
Nach den vorangegangenen Beispielen sollten Sie jetzt in der Lage sein, die Elemente der folgenden Tabelle interpretieren und anzuwenden zu können.
| Bedeutung | Element |
|---|---|
| Abkürzung | <abbr title="Klartext">Abkürzung</abbr> |
| Akronym | <acronym title="Klartext">Akronym</acronym> |
| Quellcode | <code>Quellcode</code> |
| Urheber / Ursprung | <cite>Urheber</cite> |
| ungültig | <del datetime="2008-01-25">seit 25.01.08 nicht mehr gültig</del> |
| Definition | <dfn>Definition</dfn> |
| leicht betont | <em>leicht betonter Text</em> |
| Überschriften n ∈ {1…6} | <h1…6>Überschrift der Ebene n</h1…6> |
| dazugekommen | <ins datetime="2008-01-25">am 25.01.08 dazugekommen</ins> |
| Eingabe | <kbd>Eingabe</kbd> |
| Beispiel | <samp>Beispiel</samp> |
| sehr wichtig | <strong>sehr wichtiger Text</strong> |
| Variable | <var>austauschbarer Wert</var> |
Im Gegensatz zu den logischen Formatierungen können Sie mit den visuellen oder physischen Formatierungen die Darstellung im Browser des Benutzers erzwingen.
| Bedeutung | Element |
|---|---|
| Fettschrift | <b>Fettschrift</b> |
| neue Zeile | <br /> |
| Trennstrich | <hr /> |
| Kursivschrift | <i>schräger Text</i> |
| tiefgestellt | <sub>tiefgestellter Text</sub> |
| hochgestellt | <sup>hochgestellter Text</sup> |
| Schreibmaschinenschrift | <tt>Schreibmaschinenschrift</tt> |
Das <br /> Tag ist ein Beispiel für ein XHTML-Element ohne End-Tag. Es ist Anfangs- und End-Tag in Einem. Zu beachten ist hierbei das enthaltene Leerzeichen vor dem Queerstrich. Möchten Sie in Ihrem Dokument eine neue Zeile beginnen, notieren Sie einfach an der entsprechenden Stelle ein <br />. Das Gleiche gilt auch für das seltener benutzte einelementige Tag <hr /> um eine Trennlinie zu erzeugen.
| Bedeutung | Enity |
|---|---|
| Umlaut Ä | Ä |
| Umlaut ä | ä |
| Umlaut Ö | Ö |
| Umlaut ö | ö |
| Umlaut Ü | Ü |
| Umlaut ü | ü |
| scharfes ß | ß |
| Leerzeichen |   |
| Euro-Symbol € | &euro |
Oft benutzte Umlaute und Sonderzeichen die im Quellcode vorkommen können, sollten durch ihre Entities ersetzt werden.
Der Quelltext:
Dieser Satz enthält ein Umlaut.
wird dann korrekt angezeigt als:
Dieser Satz enthält ein Umlaut.
Eine umfassende Auflistung weiterer Sonderzeichen finden Sie in der Zeichenreferenz von SELFHTML.
| Bedeutung | Enity |
|---|---|
| Anführungszeichen " | " |
| Kaufmanns-Und & | & |
| kleiner als < | < |
| größer als > | > |
Die Zeichen in der Tabelle XHTML-Sondereichen gehören zum Sprachumfang von XHTML und müssen, immer wenn sie im Text Ihres XHTML-Dokumentes vorkommen sollen, durch ihre entsprechenden Enities ersetzt werden.
Kopieren Sie den Quelltext oben in einen Texteditor, speichern in ab und benennen die Datei webdesign-1.html. Öffnen Sie anschließend die Datei in einem Browser Ihrer Wahl.