Zeichenformatierung

Alle bisher erzeugten Seiten wurden in der Standardschriftart des Browsers, das ist meistens Times New Roman, dargestellt. Alle Buchstaben hatten Standardgröße (meistens Größe 3 = 12 pt) und hatten Standardfarbe (fast immer schwarz). Das muss aber nicht so sein. Zu einem ansprechenden Design gehört eine ansprechende Zeichenformatierung. Fangen wir mit der Schriftart an.

Die Schriftart

Im Prinzip kannst du jede beliebige Schriftart verwenden. Natürlich kann sie beim Betrachter nur dargestellt werden, wenn er diese Schriftart auch installiert hat. Mittlerweile gibt es Programme, mit denen man sich sogar eigene Schriftenfonts anlegen kann. Z.B. einen Font mit der eigenen Handschrift. Diese Schriftart hat dann ganz sicher keiner außer dir. Wenn du sie für ein HTML- Dokument verwendest, wird die Seite nur bei dir richtig dargestellt.

Woher sollst du aber wissen, welche Schriften der Betrachter deiner Seite installiert hast? Einfache Frage - einfache Antwort: Du kannst es nicht wissen. Es gibt aber einige Schriften, die fast jeder hat, weil sie bei weit verbreiteten Programmen wie dem Internet Explorer standardmäßig installiert werden. Das sind: Times New Roman, Georgia, Arial, Courier New, Courier und Verdana. Ich verwende hauptsächlich Arial, aber das ist Geschmacksache. Auf jeden Fall sind in längeren Texten Schriftarten ohne Serifen besser lesbar als Serifenschriften. Serifen sind die Striche an den Enden der Linien bei manchen Schriftarten, z.B. bei Times New Roman.

Es gibt mehrere Möglichkeiten die Schriftart zu bestimmen. Hier wird nur auf eine davon eingegangen, die anderen werden später noch beschrieben.

Das <font> Tag - font face=

Die Schriftart wird im <font> Tag festgelegt. (font: engl. - Schriftart). Hier wird auch die Schriftgröße und die Schriftfarbe festgelegt, aber das wird später beschrieben. Der <font> Tag bekommt die Zusatzangabe face="Schriftart" (face: engl. - Gesicht). Hier wird die Schriftart angegeben. <font face="Arial"> bewirkt also, dass der folgende Text in der Schriftart Arial erscheint. Die Seite mit dem Quelltext

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Dies ist eine Beispielseite für Schriftarten. <font face="Arial">Dies ist eine Beispielseite für Schriftarten.</font> Dies ist eine Beispielseite für Schriftarten.
</body>
</html>
Browseransichterscheint also so: 

Du kannst an dieser Stelle mehrere Schriftarten angeben. Das Tag <font face="ALGERIAN,BernhardFashion BT"> bewirkt, dass der Text bis </font> in der Schriftart ALGERIAN erscheint. Wenn die Schriftart nicht installiert ist, erscheint er in BernhardFashion BT. Wenn beides nicht installiert ist, erscheint er in der Schriftart, die im Browser als Standardschriftart eingestellt ist. Der Quellcode

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<font face="ALGERIAN,BernhardFashion BT">Dies ist eine Beispielseite für Schriftarten.</font>
</body>
</html>

Browseransichtbewirkt also wenn die Schriftart ALGERIAN installiert ist:

Browseransicht

Wenn die Schriftart ALGERIAN nicht installiert ist aber die Schriftart BernhardFashion BT installiert ist:

Browseransicht

Wenn beide Schriftarten nicht installiert sind, erscheint die Seite so:

Achtung: Innerhalb von Tabellen musst du die Schriftart für jede Zelle neu festlegen!

Das <font> Tag - font size=

Eine weitere mögliche Zusatzangabe im <font>- Tag ist size="Schriftgröße". Sie legt die Schriftgröße fest. In HTML gibt es normalerweise 7 Schriftgrößen. Größe 1 ist sehr klein, Größe 7 ist sehr groß. Allerdings ist die Größe der Schrift auch von der Schriftart abhängig weil manche Schriftarten einfach größer ausfallen als andere. Der Quellcode

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<font face="Arial" size="1">Dies ist ein Beispiel in der Schriftgröße 1.</font>
<font face="Arial" size="2">Dies ist ein Beispiel in der Schriftgröße 2.</font>
<font face="Arial" size="3">Dies ist ein Beispiel in der Schriftgröße 3.</font>
<font face="Arial" size="4">Dies ist ein Beispiel in der Schriftgröße 4.</font>
<font face="Arial" size="5">Dies ist ein Beispiel in der Schriftgröße 5.</font>
<font face="Arial" size="6">Dies ist ein Beispiel in der Schriftgröße 6.</font>
<font face="Arial" size="7">Dies ist ein Beispiel in der Schriftgröße 7.</font>
</body>
</html>

erzeugt

Dies ist ein Beispiel in der Schriftgröße 1. Dies ist ein Beispiel in der Schriftgröße 2. Dies ist ein Beispiel in der Schriftgröße 3. Dies ist ein Beispiel in der Schriftgröße 4. Dies ist ein Beispiel in der Schriftgröße 5. Dies ist ein Beispiel in der Schriftgröße 6. Dies ist ein Beispiel in der Schriftgröße 7.

Du kannst die Schriftgröße aber auch relativ zur normalen Größe angeben. Wenn du <font size="+2"> verwendest, wird der Text bis </font> zwei Größen größer als der Standard dargestellt. Umgekehrt wird bei <font size="-1"> der folgende Text 1 Größe kleiner als der Sandart dargestellt.

Achtung: Innerhalb von Tabellen musst du auch die Schriftgröße für jede Zelle neu festlegen!

Das <font> Tag - font color=

Es gibt viele Möglichkeiten die Schriftfarbe fest zu legen. Das <font> Tag ist nur eine davon. Auch im <font> Tag gibt es noch 2 Möglichkeiten. Beide funktionieren nach dem Schema <font color="Farbe">. Bei der ersten Möglichkeit gibst du statt Farbe einen Farbnamen an. Natürlich musst du dich dabei genau an die festgelegten Namen halten. Die kannst du in der Tabelle unten sehen.

Die meisten dieser Namen sind im Html-Standard nicht enthalten. Sie entsprechen also eigentlich nicht den Regeln. Sie funktionieren aber trotzdem in fast allen Browsern. Nach dem Standard sind nur die 16 Farbnamen black, navy, blue, green, teal, lime, aqua, maroon, purple, olive, gray, silver, fuchsia, yellow, red und white erlaubt.

In der Tabelle unten siehst du auch eine Spalte namens Hexadezimal. Diese Spalte bezieht sich auf die zweite Möglichkeit, die Schriftfarbe im <font> Tag zu definieren. Du kannst statt dem Namen auch den Hexadezimalwert der Farbe angeben. In dem Fall musst du dem Hexadezimalwert ein # voranstellen. Mehr über den Hexadezimalcode kannst du in meinen Anleitungen unter Hintergrund - Farbcode nachlesen.

Der Quellcode

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<font face="Arial" size="4" color="blue">Dies ist ein Beispiel.</font>
</body>
</html>

erzeugt also genau wie dieser Quellcode

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<font face="Arial" size="4" color="#0000FF">Dies ist ein Beispiel.</font>
</body>
</html>

folgendes Aussehen:

Dies ist ein Beispiel.

Weiter geht's mit der Seite Zeichenformatierung 2.

Farbname Hexadezimal Beispiel mit weißem Hintergrund Beispiel mit schwarzem Hintergrund
aliceblue #F0F8FF Beispiel Beispiel
antiquewhite #FAEBD7 Beispiel Beispiel
aqua #00FFFF Beispiel Beispiel
aquamarine #7FFFD4 Beispiel Beispiel
azure #F0FFFF Beispiel Beispiel
beige #F5F5DC Beispiel Beispiel
black #000000 Beispiel Beispiel
blueviolet #8A2BE2 Beispiel Beispiel
blue #0000FF Beispiel Beispiel
brown #A52A2A Beispiel Beispiel
burlywood #DEB887 Beispiel Beispiel
cadetblue #5F9EA0 Beispiel Beispiel
chartreuse #7FFF00 Beispiel Beispiel
chocolate #D2691E Beispiel Beispiel
coral #FF7F50 Beispiel Beispiel
cornflowerblue #6495ED Beispiel Beispiel
cornsilk #FFF8DC Beispiel Beispiel
crimson #DC143C Beispiel Beispiel
darkblue #00008B Beispiel Beispiel
darkcyan #008B8B Beispiel Beispiel
darkgoldenrod #B8860B Beispiel Beispiel
darkgray #A9A9A9 Beispiel Beispiel
darkgreen #006400 Beispiel Beispiel
darkkhaki #BDB76B Beispiel Beispiel
darkmagenta #8B008B Beispiel Beispiel
darkolivegreen #556B2F Beispiel Beispiel
darkorange #FF8C00 Beispiel Beispiel
darkorchid #9932CC Beispiel Beispiel
darkred #8B0000 Beispiel Beispiel
darksalmon #E9967A Beispiel Beispiel
darkseagreen #8FBC8F Beispiel Beispiel
darkslateblue #483D8B Beispiel Beispiel
darkslategray #2F4F4F Beispiel Beispiel
darkturquoise #00CED1 Beispiel Beispiel
darkviolet #9400D3 Beispiel Beispiel
deeppink #FF1493 Beispiel Beispiel
deepskyblue #00BFFF Beispiel Beispiel
dimgray #696969 Beispiel Beispiel
dodgerblue #1E90FF Beispiel Beispiel
firebrick #B22222 Beispiel Beispiel
floralwhite #FFFAF0 Beispiel Beispiel
forestgreen #228B22 Beispiel Beispiel
fuchsia #FF00FF Beispiel Beispiel
gainsboro #DCDCDC Beispiel Beispiel
ghostwhite #F8F8FF Beispiel Beispiel
gold #FFD700 Beispiel Beispiel
goldenrod #DAA520 Beispiel Beispiel
gray #808080 Beispiel Beispiel
green #008000 Beispiel Beispiel
greenyellow #ADFF2F Beispiel Beispiel
honeydew #F0FFF0 Beispiel Beispiel
hotpink #FF69B4 Beispiel Beispiel
indianred #CD5C5C Beispiel Beispiel
indigo #4B0082 Beispiel Beispiel
ivory #FFFFF0 Beispiel Beispiel
khaki #F0E68C Beispiel Beispiel
lavender #E6E6FA Beispiel Beispiel
lavenderblush #FFF0F5 Beispiel Beispiel
lawngreen #7CFC00 Beispiel Beispiel
lemonchiffon #FFFACD Beispiel Beispiel
lightblue #ADD8E6 Beispiel Beispiel
lightcoral #F08080 Beispiel Beispiel
lightcyan #E0FFFF Beispiel Beispiel
lightgoldenrodyellow #FAFAD2 Beispiel Beispiel
lightgreen #90EE90 Beispiel Beispiel
lightgrey #D3D3D3 Beispiel Beispiel
lightpink #FFB6C1 Beispiel Beispiel
lightsalmon #FFA07A Beispiel Beispiel
lightseagreen #20B2AA Beispiel Beispiel
lightskyblue #87CEFA Beispiel Beispiel
lightslategray #778899 Beispiel Beispiel
lightsteelblue #B0C4DE Beispiel Beispiel
lightyellow #FFFFE0 Beispiel Beispiel
lime #00FF00 Beispiel Beispiel
limegreen #32CD32 Beispiel Beispiel
linen #FAF0E6 Beispiel Beispiel
maroon #800000 Beispiel Beispiel
mediumaquamarine #66CDAA Beispiel Beispiel
mediumblue #0000CD Beispiel Beispiel
mediumorchid #BA55D3 Beispiel Beispiel
mediumpurple #9370DB Beispiel Beispiel
mediumseagreen #3CB371 Beispiel Beispiel
mediumslateblue #7B68EE Beispiel Beispiel
mediumspringgreen #00FA9A Beispiel Beispiel
mediumturquoise #48D1CC Beispiel Beispiel
mediumvioletred #C71585 Beispiel Beispiel
midnightblue #191970 Beispiel Beispiel
mintcream #F5FFFA Beispiel Beispiel
mistyrose #FFE4E1 Beispiel Beispiel
moccasin #FFE4B5 Beispiel Beispiel
navajowhite #FFDEAD Beispiel Beispiel
navy #000080 Beispiel Beispiel
olive #808000 Beispiel Beispiel
oldlace #FDF5E6 Beispiel Beispiel
olivedrab #6B8E23 Beispiel Beispiel
orange #FFA500 Beispiel Beispiel
orangered #FF4500 Beispiel Beispiel
orchid #DA70D6 Beispiel Beispiel
palegoldenrod #EEE8AA Beispiel Beispiel
palegreen #98FB98 Beispiel Beispiel
paleturquoise #AFEEEE Beispiel Beispiel
palevioletred #DB7093 Beispiel Beispiel
papayawhip #FFEFD5 Beispiel Beispiel
peachpuff #FFDAB9 Beispiel Beispiel
peru #CD853F Beispiel Beispiel
pink #FFC0CB Beispiel Beispiel
plum #DDA0DD Beispiel Beispiel
powderblue #B0E0E6 Beispiel Beispiel
purple #800080 Beispiel Beispiel
red #FF0000 Beispiel Beispiel
rosybrown #BC8F8F Beispiel Beispiel
royalblue #4169E1 Beispiel Beispiel
saddlebrown #8B4513 Beispiel Beispiel
salmon #FA8072 Beispiel Beispiel
sandybrown #F4A460 Beispiel Beispiel
seagreen #2E8B57 Beispiel Beispiel
seashell #FFF5EE Beispiel Beispiel
sienna #A0522D Beispiel Beispiel
silver #C0C0C0 Beispiel Beispiel
skyblue #87CEEB Beispiel Beispiel
slateblue #6A5ACD Beispiel Beispiel
slategray #708090 Beispiel Beispiel
snow #FFFAFA Beispiel Beispiel
springgreen #00FF7F Beispiel Beispiel
steelblue #4682B4 Beispiel Beispiel
tan #D2B48C Beispiel Beispiel
teal #008080 Beispiel Beispiel
thistle #D8BFD8 Beispiel Beispiel
tomato #FF6347 Beispiel Beispiel
turquoise #40E0D0 Beispiel Beispiel
violet #EE82EE Beispiel Beispiel
wheat #F5DEB3 Beispiel Beispiel
white #ffffff Beispiel Beispiel
whitesmoke #F5F5F5 Beispiel Beispiel
yellow #FFFF00 Beispiel Beispiel
yellowgreen #9ACD32 Beispiel Beispiel

Weiter geht's mit der Seite Zeichenformatierung 2.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: