erscheint also so:
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.
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.
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> |
|
erscheint 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> |
|
|
Wenn die Schriftart ALGERIAN nicht installiert ist aber die Schriftart BernhardFashion BT installiert ist: |
Wenn beide Schriftarten nicht installiert sind, erscheint die Seite so: |
Achtung: Innerhalb von Tabellen musst du die Schriftart für jede Zelle neu festlegen!
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!
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:
bewirkt also wenn die
Schriftart ALGERIAN installiert ist: