Formatierungen

Es ist besser Formatierungen wie beispielsweise die Farbe eines Texts über CSS zu machen und nicht über HTML. In HTML5 wurde z.B. aus diesem Grund der <font> Tag entfernt. Dies bedeutet auch, dass z.B. die Angabe style="CSS-Styles" nicht mehr im HTML Code verwendet werden sollte. Um nun aber trotzdem Stellen auf einer Seite formatieren zu können, gibt es spezielle CSS-Klassen (auf unserer Homepage), welche die Formatierung übernehmen.

Text

Möchte man die Ausrichtung eines Textes ändern, hat man drei Klassen zur Auswahl:

left	Linke Ausrichtung
right	Rechte Ausrichtung
center	Zentrierte Ausrichtung

Ein Absatz, der beispielsweise zentriert werden soll, würde dann folgendermaßen in HTML aussehen:

<p class="center">Dies ist ein zentrierter Absatz</p>

Bilder (bzw. Objekte)

Manchmal schaut es besser aus, wenn ein Bild nicht alleine in einer Zeile steht, sondern der Text um das Bild fließt. Um dies erreichen zu können, gibt es zwei Klassen zur Auswahl:

float_left	Der Text umfließt das Bild (bzw. Objekt) auf der rechten(!) Seite. Das Bild (bzw. Objekt) ist hierbei links(!) ausgerichtet.
float_right	Der Text umfließt das Bild (bzw. Objekt) auf der linken(!) Seite. Das Bild (bzw. Objekt) ist hierbei rechts(!) ausgerichtet.

Ein Bild, welches beispielsweise auf der linken Seite vom Text umflossen werden soll, würde in HTML so aussehen:

<img src="..." width="300" height="300" alt="..." class="float_right" />
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...</p>

Das Ergebnis:

WICHTIG: Das Bild (bzw. Objekt), welches vom Text umflossen werden soll, muss vor(!) dem eigentlichen Text stehen und die jeweils richtige CSS-Klasse zugewiesen bekommen!

Tabellen

Bei Tabellen kann es manchmal passieren, dass der Text in den einzelnen Zellen vertikal komisch ausgerichtet wird. Aus diesem Grund gibt es drei Klassen, um die Ausrichtung des Textes in einer Zelle anzugeben:

top	Der Text wird am oberen Rand (top) der Zelle ausgerichtet
middle	Der Text wird in der Zelle vertikal mittig ausgerichtet. Will man, dass der Text horizontal mittig ausgerichtet wird, benötigt man die Klasse center (siehe Text)
bottom	Der Text wird am unteren Rand (bottom) der Zelle ausgerichtet

Zur besseren Veranschaulichung betrachten wir folgenden HTML Code:

<table>
  <tr>
    <td>Ich bin ein Text</td>
    <td class="top">Text</td>
  </tr>
  <tr>
    <td>Ich bin ein Text</td>
    <td class="middle">Text</td>
  </tr>
  <tr>
    <td>Ich bin ein Text</td>
    <td class="bottom">Text</td>
  </tr>
</table>

Im Browser würde es dann folgendermaßen aussehen:

Zurück zur Übersicht