HTML verstehen Teil 4: Absätze und Formate

HTML verstehen: Der Absatz

Im Teil 3 haben Sie die Struktur einer Seite kennen gelernt. Heute geht es um die Formatierungen von Text auf der Seite.

Eine Absatzmöglichkeit haben Sie ja schon kennengelernt: <br /> also den Zeilenvorschub. Das genügt Ihnen aber sicher nicht. Sie wollen mehr!

Kommen wir also zum wahrscheinlich meist benutzen Tag überhaupt, dem Absatz-Tag. Dieser ist sehr kurz und stellt sich als Beginn- und End-Tag dar:

<p> Hier ist der Text des Absatzes</p>

Tja das ist schon fast alles!

Wenn ein Absatz mit <p> beginnt, werden jeweils alle Leerzeichen bis auf eines nicht berücksichtigt. Der Text wird mit einem Zeilenvorschub begonnen und dann fließend auf der Seite dargestellt bis das End-Tag </p> kommt. Damit ist es möglich, auch bei kleineren Bildschirmauflösungen einen Textabsatz korrekt darzustellen, ohne Text zu verschlucken.

Jetzt denken Sie natürlich gleich an Word, wo man einen Textabsatz nach links, rechts oder zentriert als Blocksatz ausrichten kann. Nun, die Erfinder von HTML hatten dies auch gedacht und realisiert! Es gibt für den <p>-Tag natürlich noch sog. Attribute, die den Absatz steuern.

Attribute des <p>-Tags

Die Ausrichtung eines Textes nennt man im Englischen Allignement und genau dieses Wort abgekürzt verwenden Sie, wenn Sie Ausrichtungen im Absatz durchführen wollen.

  • <p align=“left“>
    Mit dem Attribut align richten Sie den Text – hier – am linken Rand aus. Diese Attribute werden im HTML immer wie folgt angegeben attribut=“wert“ ! Folgen mehrere Attribute in einem Tag, so werden sie nicht mit Komma sondern mit Leerzeichen (blank) voneinander getrennt.
  • <p align=“right“>

    Mit dem Attribut align=“right“ richten Sie die Sätze – wie hier – am rechten Rand aus

  • <p align=“center“>

    Mit dem Attribut align=“center“ richten Sie die Sätze – wie hier – in der Mitte der Seite aus

  • <p align=“justify“>

    Das Attribut align=“justify“ definiert einen Blocksatz. Das heißt, der ganze Absatz wird geschrieben und dann durch einfügen von zusätzlichen Blanks der Satz so ausgerichtet, dass er links wie rechts in der gleichen Spalte endet. Sieht fast aus wie beim Buchdruck, hat aber den Nachteil, dass bei langen Worten wegen fehlender Silbentrennung unschöne Leerzeichenfolgen im Text erscheinen können.

Bemerkung zum Attribut align
Das Attribut align wird zwar noch häufig benutzt, doch nach state of the art, und der XHTML-Norm soll man es nicht benutzen, man soll dazu die Möglichkeiten eines CSS- Stylesheets benutzen. Doch seinen Sie getrost, so schnell wird das align-Attribut nicht aus dem HTML geworfen werden, zu viele Seiten müssten geändert werden.

Natürlich können Sie das <p>-Tag auch mit dem <br />-Tag verbinden, um in einem Absatz einen Zeilenvorschub zu erzwingen.

Sie haben einen Fall, wo Sie verhindern wollen, dass bei einem Leerzeichen ein Zeilenumbruch gemacht wird! Nun, das können Sie tun wenn Sie statt des Blanks als Zeichen das HTML-Ersatzzeichen   schreiben. Hier wird kein Zeilenumbruch vollzogen.

Auch wenn Sie eine ganze Zeile immer als ganze Zeile sehen wollen, nicht durch Zeilenvorschub getrennt, können Sie das mit dem Tag-Paar

<nobr> Dieser Text wird in einer Zeile dargestellt</nobr>

Schriftart, Schriftfarbe, Schriftgröße

Es gibt noch eine ganze Reihe Tags, die Sie bei einem <p>-Tag einfügen können. Diese sind zum Teil veraltet, weil man sie heute mit CSS angibt! Aber da wir hier ja zunächst HTML und nicht CSS machen wollen, sollen sie hier definiert werden.

  • <font size=“2″>
    Mit dem <font size=“x“>-Tag bestimmen Sie die Schriftgröße. Es gibt hier vordefinierte Größen, die Sie als x einsetzen können. Erlaubt sind Größen von 1 bis 7. Diese können Sie auch relativ vergeben. z.B. Sie haben mit size=“2″ die Schriftgröße 2 eingestellt und können jetzt mit size=“+2″ oder size=“-1″ die Schriftgröße verstellen.
  • <font face=“Arial, Verdana“>

    Mit dem Attribut face bestimmen Sie die Schriftart also z.B. Arial oder Verdana.
    Beachten Sie generell bei der Schriftart, dass auf der Welt nicht alle Computer die Schriftart Arial installiert haben. Denken Sie an unseren Chinesen, der deutsch lernen will! Die Schriftarten die sie im face-Attribut angeben, werden von Mr. Browser der Reihe nach ausprobiert und wenn Mr. Browser eine der angegebenen Schriftarten kennt, dann nimmt er sie auch!
  • <font color=“#000000″>

    Auch die Schriftfarbe können Sie anpassen. Sieht komisch aus, nicht war die Farbe #000000, oder? Nun das ist die Farbe schwarz!
    Die Farben werden in HTML als Mischungen von Grundfarben angegeben. Die Grundfarben sind Rot, Grün und Blau Damit lassen sich alle Farben als Mischungen darstellen.
    Beispiel:
    #FF0000 #00FF00 #0000FF
    Es ist ein wenig schwer diese Farben zu wissen und zu erkennen, deshalb biete ich Ihnen 2 Links an, die Sie sich in Ihre Favoriten stellen können und die Farben einfach von dort übernehmen können:
    http://www.html-php-mysql.de/generatoren/colors.php
    http://de.selfhtml.org/helferlein/farben.htm
  • Sorry, ich habe wieder ein wenig geschlampert! Die schönen Hintergrundfarben oben können Sie nicht mit dem <font>-Tag darstellen. Dazu habe ich CSS benutzt, wie Sie, wenn Sie sich den Quelltext dieser Seite anschauen, bemerken werden. Die Hintergrundfarbe können Sie nur mit dem <body bgcolor=“#000000″>-Tag für die ganze Seite einstellen, oder mit dem Table-Tag, das wir noch durchnehmen werden.

    Da ich Ihnen aber die Möglichkeit geben will, auch Zeilen mit Hintergrundfarbe auszustatten, hier die Lösung mit dem <p>-Tag:
    Sie wenden CSS an. Das greift zwar etwas dem Stoff voraus, doch passt es hier recht schön dazu: Sie schreiben einen Absatz in rot mit folgender Anweisung:

    <p style=“background-color:#FF0000″>roter Absatz</p>

<span>-Tag

Ganze Absätze rot zu unterlegen, ist vielleicht ein wenig ungünstig. Meist wollen Sie nur, wie mit einem Marker bestimme Worte unterlegen. Dazu gibt es das <span>-Tag! Auch das <span>-Tag hat ein Beginn- und End-Tag. Es wirkt sich auf den Text aus, ohne vorher irgendwelche Zeilenvorschübe zu machen. Sie können das <span>-Tag für die Hintergrundfarbe auch nur mit CSS benutzen. Also

<span style=“background-color:#FFFF00″>Text</span>

So jetzt können Sie aber unserem Chinesen schon viel schön aufbereiteten Text auf Ihrer Seite anbieten! Was nun noch fehlt, ist das große Gebiet der Tabellen und der Sonderzeichen wie € ⇒ etc. Das wird dann im nächsten Teil kommen.

Gruß
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar