Textformatierung

Einfacher Text auf einer Homepage kann sehr ermüdend sein, vor allem, wenn jeder die gleiche Farbe, die gleiche Schriftart und die gleiche Größer verwenden würde. Um das zu verhindern kann man seinen Text auf verschiedene Weise formatieren.

Seitenweit: CSS

Wie im CSS Tutorial gezeigt, kann man mit CSS HTML-Elemente seitenweit formatieren. Für den Text bedeutet das im Einzelnen, man kann die Textfarbe, die Schriftgröße und die Schriftart verändern. Hier einmal ein Beispiel:

<style type="text/css">
p {
    font-color:#ff0000;
    font-size:12px
}
 
body {
    font-family:Sans,Verdana,Mono
}
 
td {
    font-color:#00ff00;
    font-size:14px
}
</style>

Der Code im Beispiel definiert seitenweit, dass der normale Text (<p>) rot ist, und eine Größe von 12 Pixeln hat. Jeder Text ist eine der folgenden Fonts oder die Ausweichfont (im Browser einstellbar), wenn keine der dreien auf dem PC installiert ist: Sans, Verdana oder Mono. Würde man zum Beispiel font-family:Ubuntu verwenden, so würden nur Computer die die Schriftart „Ubuntu“ installiert haben den Text wirklich mit der Schriftart sehen. Als letztes ist hier noch festgelegt, dass der Text zwischen <td> und </td> grün ist und eine Größe von 14 Pixeln hat.

Mit HTML

Text kann aber auch noch anders formatiert werden.

<center><b><u><h1>Eine Überschrift</h1></u></b></center>

Anzeigebeispiel:

Eine Überschrift

Der Code setzt die Überschrift (<h1>) in die Mitte (<center>) des Elternelementes, unterstreicht sie (<u>) und macht sie fett (<b>). Es gibt verschiedene Tags, die den Text unterschiedlich formatieren. Hier eine kleine Tabelle:

HTML-Tag(s) Wirkung auf den Text
<b> oder <strong> fetter Text
<i> kursiver Text
<u> unterstrichener Text
<big> großer Text
<small> kleiner Text
<sup> hochgestellter Text
<sub> tiefgestellter Text
<left> linksbündiger Text
<center> zentrierter Text
<right> rechtsbündiger Text

Mit CSS im HTML-Tag

Will man einen Text lediglich an einer Stelle verändern und nicht seitenweit, kann man das mithilfe des 'style=„…“' Attributs im Tag machen:

<p style="color:#ff0000;font-Size:21px;text-decoration:underline">Großer, Roter, Unterstrichener Text</p>

Anzeigebeispiel:

Großer, Roter, Unterstrichener Text

Der Code stellt einen großen (21 Pixel), roten und unterstrichenen Text dar. Einige CSS-Attribute für die Textformatierung:

Attribut Wirkung auf den Text
text-color: [FARBE] Der Text ist in der Farbe [FARBE] (sowohl RGB als auch Farbnamen möglich)
text-size: [SIZE]px Der Text ist [SIZE] Pixel groß
text-decoration: [WERT] Je nach Wert, mögliche Werte: underline (unerstrichen), strong (fett), none (nichts), …