Texte formatieren
Bestimmt hast du schon festgestellt, dass der Text zwischen <body> und </body> brav erscheint, aber sich so einfach in keinster Weise formatieren lässt. Er läuft von links nach rechts und bricht erst zur nächsten Zeile, wenn der Bildschirmrand erreicht ist, gleichgültig, wie viele Leerzeilen man im Quelltext dazwischen schiebt.

Hier findest du Anleitungen zu den Themen
Leerzeile und Zeilenumbruch
Umlaute, ß und Sonderzeichen
Zusätzliche Leerzeilen und -zeichen
Hervorhebungen: Fett, Kursiv, Unterstrichen
Schrifthöhe und -art

 

Leerzeile und Zeilenumbruch

Um eine Leerzeile zu erreichen, füge <p> an die Stelle, an der du sie gerne haben willst, für einen einfachen Zeilenumbruch <br>. Diese beiden Tags muss man nicht wieder schließen. Und so sieht es dann aus:

<p> Hiervor ist deutlich die Leerzeile zu sehen, und hier
<br> gibt es nur einen Zeilenumbruch.


Umlaute, ß und Sonderzeichen

Gewöhne dir am besten gleich an, die Umlaute, ß und eventuelle Sonderzeichen im Quelltext zu codieren und nicht einfach über die Tastatur als ä, ö, ü und so weiter einzutippen. Manche Browser (besonders auch jenseits des deutschsprachigen Raumes, aber eben auch innerhalb desselben) können sie sonst nicht darstellen, dann hat man den unschönen Effekt, dass der Text von Quadraten, Pfeilchen oder noch seltsameren Zeichen durchsetzt ist. Im Zweifelsfall schreib den Text ganz normal und gehe ihn anschließend mit der Suchen & Ersetzen-Funktion irgendeines Textprogrammes durch. Hier die gängigsten Zeichen:

ä → &auml;
ö → &ouml;
ü → &uuml;
Ä → &Aml;
Ö → &Ouml;
Ü → &Uuml;
ß → &szlig;
& → &amp;
© → &copy;


Zusätzliche Leerzeichen und -zeilen

Vielleicht hast du schon gemerkt, dass der Browser nicht nur leerzeilen- sondern auch leerzeichenresistent ist. Eines bildet er problemlos ab, aber jedes weitere wird gnadenlos ignoriert. Dafür gibt es natürlich auch einen Code:
&nbsp; erstellt ein zusätzliches Leerzeichen.

Bei drei zusätzlichen Leerzeichen sieht das dann so aus: &nbsp;&nbsp;&nbsp;

Den &nbsp;-Trick muss man übrigens auch anwenden, wenn man mehrere Leerzeilen haben möchte. Mehrere <p> hintereinander akzeptiert der Browser nämlich auch nicht. Das sieht dann bei zwei Leerzeilen so aus:

<p>&nbsp;
<p>&nbsp;


Hervorhebung: Kursiv, Fett, Unterstrichen

Natürlich kann man Text auch kursiv (engl. italic) und fett (engl. bold) schreiben:

<i>kursiv</i> wird zu kursiv.
<b>fett</b> wird zu fett.

Ebenso ist es möglich, Text zu unterstreichen. Unterstrichenes wird jedoch fast immer mit Links gleichgesetzt, deswegen ist es schlecht als Hervorhebung zu verwenden. Wenn möglich verzichte darauf.

<u>unterstrichen</u> wird zu unterstrichen.

Wichtig: Hierbei wieder nicht den schließenden Tag vergessen, sonst ist nicht nur ein Wort hervorgehoben, sondern der gesamte folgende Text.


Schrifthöhe und -art

Auch die Schrifthöhe und -art kannst du nach Belieben ändern. Dabei ist aber zu beachten, dass nicht jeder die gleichen Schriften auf dem PC hat wie du. Wenn du eine ausgefallene Schrift wählst und die sehr hübsch zu deiner Seite aussieht, hat ein Besucher sie vielleicht nicht; dann nimmt der Browser die Standartschrift, zumeist Times New Roman oder Arial.

Für solche Fälle verwende lieber eingefügte Bilder anstatt wirklichen Texts. Die Navigation meiner Homepage ist ein solches Beispiel. Dort steht zwar Bibliothek, aber es ist eine Grafik. Die Überschrift über der Anleitung hier ist jedoch via HTML definiert. Hast du die Schrift Tempus Sans ITC auf deinem PC, sieht sie vom Schriftbild so aus wie die Schrift des Menüs. Kennt dein PC Tempus Sans ITC nicht, hat er eine andere gewählt

Die Tags, die ich dir hier nun zeige, sind eher für einzelne Textänderungen gedacht, zum Beispiel das aufsehenerregende Magenta auf meiner Willkommensseite, mit dem ich Werbung für Drachenfluch mache; für die Definition der gesamten Schrift auf einer kompletten Website eignen sich Style Sheets besser. Doch dazu kommen wir später.

Der Grundbefehl zum Schriftändern lautet <font> und muss auch wieder geschlossen werden: </font>. font ist mal wieder englisch, kommt aus dem Druckerbereich und bedeutet Schriftart.

<font size=1> weist der Schrift die Größe 1 zu. Man kann auch mit - und + spielen und natürlich auch mit den Zahlen. +1 und 1 ist dabei nicht das gleiche; + und - sind relativ zum restlichen Text, wohingegen die Zahl an sich eine feste Größe darstellt.

<font size=-2>klein</font> wird wirklich klein,
<font size=+2>groß</font> gewinnt an Höhe und wird groß.

<font face=times> weist der Schrift die Schriftart zu - face wie Gesicht. In diesem Fall ist es Times New Roman und sieht dann so aus: Schriftart Times New Roman

Farbänderungen erkläre ich im Kapitel Farben, sonst muss ich mich wiederholen, was nur langweilig werden kann. ^_~