Textformatierung

Was gibt's? Überschriften
Beispiele dazu
Gliederung von Texten
Text ausrichten
Beispiele zur vertikalen Ausrichtung
Textarten
Wahl der Schriftart
Einstellung der Schrifteigenschaften
Benannte Zeichen

Überschriften

Sie werden durch <hx>-Tags gekennzeichnet und erlauben die hierarchische Gliederung von Texten. Nach Überschriften wird ein Zeilenumbruch eingefügt. Es gibt einige zulässige und auch sinnvolle Attribute:

Die Ausrichtung der Überschriften wird mit align="left/center/right/justify" direkt innerhalb der öffnenden Hx-Klammer angegeben. Dabei erklären sich die drei ersten Angaben von selbst. "Justify" steht für Blocksatz. Notwendige Anmerkung: Überschriften sollen von Suchmaschinen auswertbar sein, es empfiehlt sich, sie so kurz und treffend wie möglich zu formulieren. Die Ausrichtung betrifft entweder die Seite (den zugänglichen Fensterbereich) oder, wie im folgenden Beispiel, die Tabellenzelle.

Zusätzliche Informationen lassen sich mit dem <title>-Tag zuordnen. Je nach Browser wird der angegebene Text als Tool-Tip-Text, in der Fußleiste oder auch gar nicht angezeigt. Probieren sie in der Tabelle die Überschrift 6!

Die Schriftfarbe kann mit dem eingefügten <font>-Tag verändert werden.

Auch alle sonstigen Schriftattribute können mit den dafür zuständigen Codewörtern verändert werden.

Beispiele

Überschrift 1	`<h1><font color="red"> Überschrift 1 </font></h1>`
Überschrift 2	`<h2 > Überschrift 2 </h2>`
Überschrift 3	`<h3 align="center"> Überschrift 3 </h3>`
Überschrift 4	`<h4 align="right"> Überschrift 4 </h4>`
Überschrift 5	`<h5> Überschrift 5 </h5>`
Überschrift 6	`<h6 title="Ich bin auch noch da!"> Überschrift 6 </h6>`

Gliederung

Es gibt einige wichtige Tags für die Gliederung von Texten, die in der folgenden Tabelle aufgelistet sind.

Gliederungselement	Tag	Erläuterung
Dokumentenabschnitt	<span>...</span>	Definition eines Dokumentenbereiches, der einheitliche Formatierungsmerkmale erhält und mehrere Absätze, Grafiken, Tabellen, Listen etc. enthalten kann. Dazu können in Style-Vorlagen die erforderlichen Formatieranweisungen zentral festgelegt werden.
Absatz	<p> ...</p>	Der Text innerhalb des <p>-Containers wird bei der Anzeige passend zum Anzeigebereich (Fenster, Tabellenzelle) jeweils neu umgebrochen. Nach diesem Text folgt automatisch eine Leerzeile.
Dokumentenabschnitt	<div>...</div>	Definition eines Dokumentenbereiches, der einheitliche Formatierungsmerkmale erhält und mehrere Absätze, Garfiken, Tabellen, Listen etc. enthalten kann.
erzwungener Zeilenwechsel	<br>
verhinderter Umbruch	<nobr>...</nobr>	Der Text wird in voller Breite dargestellt, das Fenster wird notfalls ausgedehnt und mit einer Scroll-Leiste ausgestattet.
Umbruch anbieten	<wbr>	Vorschlag für eine Stelle, an der umgebrochen werden kann

Text ausrichten

Die Ausrichtung von Texten aber auch Grafiken, Tabellen, Listen und Formularelementen ist etwas kompliziert.

   Die horizontale Ausrichtung erreicht man, wenn von links nach rechts laufende Schrift eingestellt ist, wie folgt:
   links: Keine Maßnahme, die Schrift oder das eingefügte Element wird automatisch auf linken Anschlag gesetzt
   mittig: Entweder funktioniert das Attribut "align=center" oder man nutzt das <center>...</center> Tag
   rechts: Entweder funktioniert das Attribut "align=right" oder man nutzt das <div align=right>...</div> Tag.

Eine vertikale Ausrichtung gibt es eigentlich nicht. Alle Browser arbeiten zeilenorientiert, stellen also von oben nach unten dar (es sei denn, die altkrabylonische Schrift verlange es anders). Wer nun bei dem Attribut "align" so etwas wie "top" oder "bottom" entdeckt, denkt falsch. Vertikale Ausrichtung gibt es für Text neben Bildern, die ja meist den Platz mehrerer Zeilen beanspruchen. Zumindest der Netscape Navigator kennt hier einige Möglichkeiten:

Beispiele zur vertikalen Ausrichtung

oben: align=texttop	mittig: align=abscenter
unten: ohne align	aufsitzend: align=absbottom

Textarten

HTML sieht eine ganze Reihe von Textarten vor, denen unterschiedliche Schriftmerkmale zugeordnet werden. Die ursprüngliche Absicht bei der Einführung dieser Textarten war es wohl, die maschinelle Textanalyse zu ermöglichen. Sie stehen aus gestalterischer Sicht in Konkurrenz zu den Möglichkeiten der direkten Textformatierung. Die folgende Tabelle sollte eine Sammlung von Textart-Tags mit Beispielen enthalten. Der Netscape-Composer ersetzt einige dieser Tags selbständig durch die zugehörigen Textformat-Tags. Deshalb mußten diese Tags ohne Beispiel bleiben.

Textart	Tag	Beispiel
Abkürzung (veraltet)	<acronym>...</acronym>	USA
Adresse	<address>...</address>	TFH Wildau
längeres Zitat	<blockquote>...</blockquote>	normaler Text Festgemauert in der Erde .... weiterer Text
Zitat	<cite> ..</cite>	leck mich ...
Programmcode	<code> ... </code>	`For n = 1 to 200 do`
Definition	<dfn>...</dfn>	Wert="Sondertext"
Tastatureingabe	<kbd> ... </kbd>
Programmcode (veraltet)	<listing>...</listing>	Repeat ... Until 1 = 2
Text in nichtproportionaler Schriftart (veraltet)	<plaintext>...</plaintext>	hier kein Beipiel denn plaintext macht Probleme!
vorformatierter Text	<pre>...</pre>	Wer hat Dich..
Beispieltext	<samp> ... </samp>	`Textbeispiel`
Variable	<var>...</var>	Geldwert=..
Beispiel (veraltet)	<xmp>...</xmp>	noch ein Beispiel

Wahl der Schriftart Im Prinzip kann heute jede verfügbare Schriftart auch bei der Seitengestaltung genutzt werden. Das geht im Entwurfsstadium reibungslos, indem dem betreffenden Text mit dem <font> Tag ein Schriftsatz zugeordnet wird. Der Befehl für meine Seitenüberschrift könnte lauten: <center> <h1> <font face="Franklin Cond. Gothic" > Textformatierung </font > </h1> </center> Es gibt auch kein Problem, wennn das Produkt auf den Server geladen ist und der Entwerfer sein Werk testet, so lange er den gleichen Rechner wie beim Entwurf nutzt. Nur der Rest der Welt, der zufällig diesen Schriftsatz nicht auf seinem Rechner installiert hat "iss Neese". Lösbar ist das Problem, indem man, wenn es denn sein muß, auch den Schriftsatz mit verschickt.

Einstellung von Attributen der Schrift

Schriftart
Schreibmaschine (Courier)	<tt> ... </tt>	`dies ist ein Beispiel`
Proportionalschrift	voreingestellt	normaler Text

Schriftgröße
Basis-Schriftgröße	<basefont.size = n>
Fontgröße (n = 1.. 7 oder n = -2...+4, m = 8..72)	<font size = n> ... </font> <font point-size="m">...</font>	n=3, Größe=3 n=-1, Größe=-1 m=12, Größe=12pt
kleinere Schriftart	<small> ... </small>	normal kleiner
größere Schriftart	<big> ... </big>	normal größer

Schriftfarbe
	<font color = "farbname">	dies ist rot geschrieben (red)
	<font color="#808080">	dies ist grau geschrieben (gray)

Schriftattribute
fett (bold)	<b> ... </b>	fettes Beispiel
kursiv (italic)	<i> ... </i>	kursiver Text
unterstrichen (underline)	<u> ... </u>	unterstrichen
durchgestrichen	<strike> ... </strike> <s> .. </s>	~~ungültig~~
hervorgehoben	<em> ... </em>	ich bin wichtig
stark hervorgehoben	<strong> ... </strong>	ich bin besonders wichtig
blinkend	<blink> ... </blink>	Achtung, noch wichtiger
hochgestellt	<sup> ... </sup>	normal ^{und höher}
Laufschrift	<marquee>... </marquee>	wo denn hin?
tiefgestellt	<sub> ... </sub>	normal _{und tiefer}
gelöscht	<del> ... </del>	~~ich bin gestrichen~~

Benannte Zeichen

Da das Internet vielsprachig ist, gibt es bei der Kodierung von nationalen Sonderzeichen Probleme. Auch die Darstellung der Steuerzeichen des Browsers wie z.B. die Tag-Klammern "<" und ">" , erfordern es, Zeichen umschreiben ("benennen") zu können. Für die Darstellung aller nationalen Sonderzeichen steht in HTML 4 die vollständige Uni-Code-Liste zur Verfügung, die etwa 40000 unterschiedliche Zeichen umfassen soll.
Praktisch gibt man zu seiner Seite einen Zeichensatz an, was im head-Teil mit Hilfe des <meta>-Tags erfolgt: <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> und nutzt entweder die "Benennung" oder den HTML-Uni-Code.
Die für deutsche Seiten wichtigsten benannten Zeichen stehen in der Tabelle.

Zeichen	Benennung	Uni-Code
"	"
&	&	&
<	<	<
>	>	>
festes Leerzeichen
\|	¦	¦
©	©	©
Ä	Ä	Ä
Ö	Ö	Ö
Ü	Ü	Ü
ß	ß	ß
ä	ä	ä
ö	ö	ö
ü	ü	ü

Textformatierung

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5

Überschrift 6