Schriftformatierung 2
In diesem Kapitel lernt Ihr
Wie erzeugt man Überschriften?
In HTML gibt es sechs Standardüberschriften, deren Größen automatisch festgelegt werden. Die Tags dafür sind:
<h6></h6> sehr klein
<h5></h5>
<h4></h4>
<h3></h3>
<h2></h2>
<h1></h1> sehr groß
Jede Überschrift ist automatisch ein eigener Absatz.
Beispiel:
<h1>Eine Überschrift der Größe 1
</h1>
Auch hier kann man die Ausrichtung durch Attribute(center, left, right) einstellen. Wählt Ihr kein Attribut, dann ist der Text automatisch nach links ausgerichtet.
Beispiel:
<h3 align="right">Eine Überschrift der Größe 3 rechtsbündig
</h3>
<h6 align="center">Überschrift h6 zentriert
</h6>
Ihr könnt auch die Schriftart, -größe und -farbe der Überschrift ändern, indem Ihr einfach zwischen die Überschriften-Tags ein font-Tag einbaut.
Beispiel:
<h3><font face="Arial">Eine Überschrift der Größe 3 mit Arial-Schriftart
</font></h3>
Falls Ihr so verschachtelte Tags wie oben benutzt müsst Ihr immer darauf achten, diese in umgekehrter Reihenfolge wieder zu schließen. Bei obigem Beispiel müsst Ihr also erst das font-Tag, dann das Überschriften-Tag schließen.
Zeichensatz und Sonderzeichen
Es gibt im Deutschen bestimmte zeichen, die es in keiner anderen Sprache gibt, z.B. ä, ö, ü. Damit diese Zeichen richtig dargestellt werden können muss man im Head-Bereich den richtigen Zeichensatz angeben.
Beispiel:
<html>
<head>
<meta HTTP-EQUIV="content-type" Content="text/html;charset=iso-8859-1">
<title>Seitentitel</title>
</head>
<body>
</body>
</html>
Durch die Angabe des Zeichensatzes werden alle deutschen Umlaute und das ß richtig dargestellt. Am Besten ist es, wenn Ihr diese Angabe auf jeder Eurer Seiten macht.
es gibt allerdings auch Zeichen, die im Quelltext eine bestimmte Bezeichnung haben. Die sogenannten Sonderzeichen. Es müssen zum Beispiel alle HTML-Zeichen wie < oder > als Sonderzeichen angegeben werden.
Um < anzuzeigen gebt Ihr < ein und für > gebt Ihr > ein.
Beispiel:
>>>>>>Hier klicken<<<<<<
sieht auf der fertigen Seite so aus:
>>>>>>Hier klicken <<<<<<
Ein & sieht in HTML so aus: &
Ein " sieht in HTML so aus: "
Wollt Ihr diese Zeichen einfügen so vergesst nicht, dass sie mit einem & beginnen und mit einem ; aufhören.
Hier noch ein paar nützliche Sonderzeichen:
| Zeichen |
Beschreibung |
HTML |
| § |
Paragraph-Zeichen |
§ |
| © |
Copyright-Zeichen |
© |
| ® |
Registriermarke-Zeichen |
® |
| ° |
Grad-Zeichen |
° |
| ± |
Plusminus-Zeichen |
± |
| ² |
Quadrat-Zeichen |
² |
| µ |
Mikro-Zeichen |
µ |
| » |
Anführungszeichen
rechts |
» |
| ½ |
ein Halb |
½ |
| × |
Mal-Zeichen |
× |
| ÷ |
Divisions-Zeichen |
÷ |
Waagrechte Linien
Waagrechte Linien sind dazu da, um Bereiche optisch voneinander abzutrennen. Das Tag dafür ist <hr>. Auch dieses Tag ist eines der wenigen, die keine Endtag besitzen. Benutzt Ihr das Tag, wird automatisch ein neuer Absatz erzeugt, in dem das Tag dargestellt wird. Auch für diesen Code gibt es Attribute, die man verwenden kann, um die Breite, Farbe oder Dicke einzustellen.
Beispiel:
<hr width="50%">
Die Standardbreite ist 100%, im oberen Beispiel beträgt sie 50%.
<hr width="50%" align="center">
<hr size="5" align="center" width="50%">
Hiermit wird eine 5 Pixel dicke Linie erzeugt.
<hr size="5" noshade align="center" width="50%">
Hiermit erzeugt man eine 5 Pixel dicke Linie ohne Schatten.
<hr color="#FF0000" size="5" noshade align="center" width="50%">
Hiermit erhält man eine 5 Pixel dicke, nichtschattierte, rote Linie.
Wie erhält man Zitate?
Zitate erhält man mit dem Tag <blockquote> </blockquote>. Wie der Text dargestellt wird entscheidet der Browser. Auf jeden Fall hebt er sich vom restlichen Text ab.
Beispiel:
<blockquote>
Bumerang<br>
War einmal ein Bumerang;<br>
War ein Weniges zu lang.<br>
Bumerang flog ein Stück,<br>
Aber kam nicht mehr zurück.<br>
Publikum - noch stundenlang -<br>
Wartete auf Bumerang<br>
<br>
Ringelnatz
</blockquote><br>
Sieht im Browser so aus:
Bumerang
War einmal ein Bumerang;
War ein Weniges zu lang.
Bumerang flog ein Stück,
Aber kam nicht mehr zurück.
Publikum - noch stundenlang -
Wartete auf Bumerang
Ringelnatz
Eine weitere Möglichkeit Text abzuheben bietet das Tag <pre> </pre>. Damit wird der Text dicktengleich angezeigt, d.h. jeder Buchstabe ist so breit wie der andere.
Beispiel:
<pre>
Dieser Text sieht so aus, als wäre er mit Schreibmaschine geschrieben
</pre>
Das sieht in HTML so aus:
Dieser Text sieht so aus, als wäre er mit Schreibmaschine geschrieben
Wie bekommt man blinkenden/laufenden Text?
Achtung: Die folgenden Tags funktionieren nicht mit jedem Browser. Vor allem die älteren werden damit Probleme haben.
Das Tag <blink> </blink> erzeugt blinkenden Text.
Das Tag <marquee> </marquee> erzeugt laufenden Text.
Beispiel:
<marquee>
Dieser Text läuft nur in bestimmten Browsern
</marquee>
<blink>
Dieser Text blinkt nur in bestimmten Browsern
</blink>
Grundeinstellungen für Text
Mit dem Tag <basefont> könnt Ihr den ganzen Text auf eine bestimmte Formatierung einstellen. Dieses Tag besitzt kein Endtag. Wollt Ihr bestimmte Textstellen anders gestalten so könnt Ihr dies weiterhin mit den font-Tags tun.
Achtung: Bei meinen Tests habe ich herausgefunden, dass diese Art der Textformatierung nicht mit allen Browsern funktioniert!
Beispiel:
<basefont face="Courier">
Ab hier ist die Schriftart Courier
<font face="Arial">
mit Ausnahme
</font>
der zwei Worte.
Ab hier ist die Schriftart Courier
mit Ausnahme
der zwei Worte.
© by Benjamin Hofmann