Tutorials – Webdesign
Die Grundstruktur von HTML-Dokumenten | Text- & Schriftformatierung
3. Textstrukturierung
Ich habe einen kleinen Text über mich verfasst. Mit diesem Arbeite ich jetzt weiter. Ihr könnt euch ebenfalls einen Text erstellten oder mit einem Blindtext arbeiten.
Öffnet eure HTML-Datei, sie müsste nun also etwa so aussehen:
Der Browser braucht eine klare Anweisung wie er einen Text zu strukturieren hat. Dafür gibt es spezielle Tags,
die ich euch im Folgenden erklären werde.
Wichtig ist: macht ihr im Quelltext einen Zeilenumbruch (also "Enter" drücken), interessiert das den Browser herzlich wenig. Genauso verhält es sich mit Texteinzügen und mehr als einem Leerzeichen – alles muss speziell ausgezeichnet werden. Diese Umstand kann man jedoch nutzen und so seinen Quelltext übersichtlich und ordentlich gestalten. Durch Umbrüche und Einzüge bekommt er eine gute Struktur und ihr verliert auch bei sehr großen Webseiten nicht den überblick.
Um Texte zu strukturieren stehen euch Zeilenumbrüche, Absätze und überschriften zur Verfügung.
Zeilenumbrüche
Soll der Browser einen Zeilenumbruch erzeugen, muss folgendes Tag benutzt werden:
<br>
Das "br" steht für "break" (engl. Bruch, Trennung) und ist eines der wenigen einfachen Tags.
Absätze
Um Absätze zur Kennzeichen wird der Container-Tag benötigt:
<p> ... Text ... </p>
"p" bedeutet "paragraph" (engl. Absatz, Abschnitt). Der Tag erzeugt einen etwas größeren Abstand zum nächsten, als ein einfacher Zeilenumbruch.
Ein angewendeter Absatz sieht im Quelltext wie folgt aus:
und wird im Browser so ausgegeben:
überschriften
überschriften werden in 6 "Hierarchien" unterteilt, mit denen man seinen Text übersichtlich gliedern kann:
<h1> ... Text ... </h1>
<h2> ... Text ... </h2>
<h3> ... Text ... </h3>
<h4> ... Text ... </h4>
<h5> ... Text ... </h5>
<h6> ... Text ... </h6>
Standardmäßig werden überschriften fett und groß dargestellt – das kann man aber manuell ändern (wie das geht behandeln wir im nächsten Kapitel, die optimale Lösung lernt ihr erst später mit CSS kennen).
Wichtig sind diese überschriften für Suchmaschinen (wobei hier nur h1-h3 beachtet werden) und für die übersichtlichkeit im Quelltext.
Ausrichtung
Absätze und überschriften können mit dem Attribut "align" nach links, rechts, mittig oder blockartig ausgerichtet werden.
<p align="left"> ... Text ... </p>
ergibt einen linksbündigen Text – das ist die Standardeinstellung und wird auch ohne das align="left" erzeugt
<p align="right"> ... Text ... </p>
ergibt einen rechtsbündigen Text
<p align="center"> ... Text ... </p>
ergibt einen zentrierten Text
<p align="justify"> ... Text ... </p>
ergibt einen Blocktext
© since 2002 by Otaku-Welt.de