Html für Einsteiger
 

 

Textformatierung

Die Textformatierung kann - wie auch in einer normalen Textverarbeitung - innerhalb von Absätzen oder im Fließtext erfolgen.

Die gebräuchlichsten Schriftstile sind fett oder kursiv. Besonders bei großen und auch noch fett formatierten Texten kann eine kursive Schrift in HTML sehr häßlich aussehen, weil dann der sogenannte Treppeneffekt zum Tragen kommt. Daher sollte man dann - gerade bei fett gesetzten oder mit großer Schriftgröße versehenem Text - entweder auf kursiven Text verzichten oder ihn als Grafik einbinden. Wenn man den Text als Grafik einbinden will, darf man im Grafikprogramm nicht vergessen, Anti-aliasing einzuschalten! Was das ist, wird später im Kapitel "Grafiken einbinden" erläutert werden.

  
 

Beispiel für Schriftstile:

<b>Dieser Text ist fettgedruckt</b>

<i>Dieser Text wird kursiv dargestellt</i>

 

 


Einige Elemente der Textformatierung haben keinen Schlußtag, z. B. der Zeilenumbruch <br>, auch der Absatz kann mit einem einfachen <p> erzeugt ohne </p> werden. Wenn man jedoch einen Absatz mit einem </p> beendet hat, müssen im nächsten Absatz neue Absatzeigenschaften definiert werden.

  
! Normalerweise gilt aber, dass ein Tag mit dem entsprechenden Schluß-Tag beendet werden muss!
  

 
 

Beispiel für Zeilenumbrüche:

Dies ist ein Blindtext. Es kommt jetzt ein Zeilenumbruch: <br>
Dies ist ein Blindtext <br>

Beispiel für Absatzbeginn und -ende:

<p>Hier beginnt ein neuer Absatz und endet auch gleich wieder</p>

<p>In diesem neuen Absatz sollten die Angaben zur Schriftgröße, -art und -farbe neu angegeben werden</p>
 
  Beispiel anschauen  
 


Jeder Absatz kann eigene Eigenschaften (Attribute) haben. Mögliche Eigenschaften sind z. B. Angaben zum Schrift und zum Schriftstil sowie zur Ausrichtung des Textes.

Das Ausssehen der Schrift wird mit dem <font> -Tag festgelegt. Mögliche Attribute sind:

face

Schriftart

size

Schriftgröße

color

Schriftfarbe

 
 

Beispiel:

<font color="#536874" font face="Verdana, Arial, Helvetica, sans-serif" font size="5" >
Webfeatures
</font>

  
 


Wichtig ist auch die Textausrichtung. Das Attribut align ist für die horizontale (=waagerechte) Ausrichtung verantwortlich. Die vertikale (=senkrechte) Ausrichtung geschieht durch valign, allerdings kann man dies nicht am Text allein vornehmen, hier sind Positionierungshilfen wie z. B. Tabellen erforderlich. Innerhalb von Tabellenzellen kann man dann also auch eine vertikale Ausrichtung einstellen. In dem Kapitel "Positionierung mit Tabellen" wird dies genau erklärt werden.

Das Attribut align kann man im <p> - Tag einsetzen, aber auch in Tabellen und einigen anderen Tags. Möglich ist dies auch innerhalb eines sogenannten <div>-Containers, der z. B. um ein <p> - Tag herumgelegt werden kann. Der <div>-Container ist als Positionierungselement multifunktional und daher sehr vielseitig einsetzbar (auch als sogenannte Ebene bzw. Layer verwendbar). Man kann ihn um beinahe jedes Tag setzen und so die Ausrichtung des Inhalts bestimmen. Er eignet sich auch hervorragend für die Positionierung mit CSS. Die <div>-Container werden wegen ihrer Vielseitigkeit an einer anderen Stelle erläutert werden.

Hier soll zunächst das align-Attribut Thema sein. Es kann die Werte "left" für links, "center" für mittig und "right" für rechts annehmen. Im Quelltext sieht das dann so aus, diesmal wieder komplett mit allen Tags:

  
 

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Homepage von Mona Becker</title>
</head>

<body>

<p align="left">
Hier stehen die Inhalte ganz links.<br>
Hier stehen nach einem Zeilenumbruch noch mehr Informationen.
</p>

<p align="center">
Hier beginnt ein neuer Absatz, der mittig ausgerichtet ist. <br>
Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext. Jetzt kommt das Absatzende
</p>

<p align="right">
Hier beginnt ein neuer Absatz, der rechtsbündig formatiert ist.
Das ist ein Blindtext. Das ist ein Blindtext. Das ist ein Blindtext.
</p>

</body>

</html>

 

  
  Beispiel anschauen  


Bei der Erstellung von Text in HTML muß beachtet werden, dass die deutschen Umlaute ä ü ö und ß nur von den modernen Browsern korrekt dargestellt werden. Es ist auf jeden Fall anzuraten wegen der vielen unterschiedlichen Betriebssysteme und Software, die von den Surfern verwendet werden, die Umlaute zu kodieren. Folgende Tabelle zeigt die Kodierung für die wichtigsten Sonderzeichen in der deutschen Sprache:

Sonderzeichen
Kodierung

ä
&auml;
ö
&ouml;
ü
&uuml;
ß
&szlig;
Ä
&Auml;
Ö
&Ouml;
Ü
&Uuml;

Es sei aber nochmals darauf hingewiesen, daß es noch viele weitere Sonderzeichen gibt, deren Kodierung man in geeigneten Büchern nachschlagen kann.

  
  Einbinden von Grafiken
 
 

© 2001 by http://www.webfeatures.de, Christiane Gerlach, Hannover