Text formatieren

Nun wollen wir einmal ein wenig Text auf unsere Seite bringen. Dabei muss man aber einiges beachten: Der Text sieht im Quelltext anders aus als im Browserfenster (Textauszeichnungssprache) und für uns Europäer heißt es ein wenig tricksen:

Sonderzeichen

In den Grundlagen stand es schon: Webseiten bestehen ganz und gar aus ASCII-Text, also normalen Buchstaben. Dummerweise entstand HTML im englischsprachigen Amerika, wo es keine ös und äs gibt. Daher muss man im Quelltext ein bisschen ausführlicher sagen, was man will, damit der Browser diese Buchstaben richtig darstellt:

Alle HTML-Editoren haben eine Einfüge-Funktion für Sonderzeichen, insofern ist das kein größeres Problem.

Absätze <p> und Zeilenumbrüche <br/> erzwingen

Nun wollen wir ein wenig Seiteninhalt in den body einfügen. Wie im Textverarbeitungsprogramm gibt es auch hier Absätze.
Sie werden folgendermaßen definiert:

<p>TEXT</p>

Wenn ich innerhalb eines Absatzes einen Zeilenumbruch erzwingen will, benutze ich folgenden Befehl (hat keinen Schlusstag!!):

<br/>

Schreibe in den Body deiner Datei deinen Namen in einen Absatz, füge einen Zeilenumbruch ein und schreibe darunter dein Geburtsdatum oder etwas anderes!

Absätze ausrichten <p align="">

Ich kann den Browser dazu zwingen, Textabsätze auszurichten (align). Wie beim Textverarbeitungsprogramm gibt es hier linksbündigen (Standard - muss nicht definiert werden), rechtsbündigen, zentrierten Text und Blocksatz.

<p>Standardmäßig linksbündiger Text</p>

Standardmäßig linksbündiger Text

<p align="right">rechtsbündiger Text</p>

rechtsbündiger Text

<p align="center">zentrierter Text</p>

zentrierter Text

<p align="justify">Dieser Text erscheint im Blocksatz: Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.</p>

Dieser Text erscheint im Blocksatz: Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.

Richte den Absatz, den du schon geschrieben hast, nun mittig aus (Zentrieren)! Tippe danach einen weiteren Absatz im Blocksatz, in dem du ein oder zwei Sätze über dich schreibst.

Überschriften <h> definieren

Jedes Textdokument braucht eine anständige Gliederung.
HTML bietet die Möglichkeit bis zu sechs Überschriftenebenen einzufügen. Im Normalfall wird man mit zwei bis drei auskommen. Die Browser weisen dem Tag eine bestimmte, vordefinierte Gestalt zu. Wir machen das gleich mal. Keine Sorge, wenn es am Anfang auch noch etwas komisch aussieht: Wir werden den Text nachher noch schöner machen!

<h1>1. Überschrift 1. Ordnung </h1>
<h2>1.1. Überschrift 2. Ordnung </h2>
<h3>1.1.1. Überschrift 3. Ordnung </h3>
<p>TEXT TEXT TEXT</p>

Füge eine Überschrift erster Ordnung und zwei Überschriften zweiter Ordnung in deine Seite ein und benenne Sie. Stelle sie dem eben geschriebenen Absatz voran!

Farbigen Text <font color=""> definieren

Möchtest du den Text oder ein Wort in einer anderen Farbe darstellen? Kein Problem, denn dafür gibt es den font-tag, in dem man Text eine Farbe zuweisen kann!

Dies ist ein farbiges Beispiel.

<p>Dies ist ein <font color="red">farbiges</font> Beispiel</p>

Suche dir einen Textabschnitt aus deinem Absatz aus, den du "red" haben möchtest und formatiere ihn!
Ein anderes Wort soll blau erscheinen (das dürfte bei deinen Englischkenntnissen wirklich kein Problem für dich sein)!

Hinweis: Das mit den Farben ist in HTML etwas kompliziert: Sieh dir bitte das Kapitel Farben dieser Einführung an.

Text fett <b> machen

Du kannst Text auch durch Fettdruck (bold) hervorheben.
Kursiven (italic) und unterstrichenen (underline) Text solltest du vermeiden, da man ihn entweder nur schwer am Bildschirm lesen oder ihn mit Links verwechseln kann.

<p>Dies ist ein <font color="red">farbiges</font> und <b>fettes</b> Beispiel</p>

Dies ist ein farbiges und fettes Beispiel

Auflistungen <ul>

Du kennst das: Du möchtest Stichpunkte übersichtlicher anführen.
In HTML macht man das mit den Listen-Befehlen. Zunächst umgrenzt man den Bereich für die Liste mit dem Befehl <ul>. Die einzelnen Aufzählungspunkte werden dann mit <li> definiert:

<ul>
<li>Aufzählungspunkt 1</li>
<li>Aufzählungspunkt 2</li>
<li>etc.</li>
</ul>

Füge unter einer der Überschriften zweiter Ordnung eine Aufzählung ein (z.B. Hobbies)!

Weiter zu den Links