Webdesign 3 - Textstrukturierung

3. Textstrukturierung

Ich habe meine Hausaufgaben gemacht und einen kleinen Text über mich verfasst. Mit diesem Arbeite ich jetzt weiter.
Ihr könnt mit dem von euch erstellten Text (oder ggf. mit dem Blindtext) aus der oben genannten Aufgabe 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 auf 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:

Code:

 <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

Code:

 <p> ... Text ... </p>

benötigt.
„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:

Code:

<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 Teil, 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.

Code:

 <p align=“left“> ... Text ... </p>

ergibt einen linksbündigen Text – das ist die Standardeinstellung und wird auch ohne das „align=“left““ erzeugt

Code:

 <p align=“right“> ... Text ... </p>

ergibt einen rechtsbündigen Text

Code:

 <p align=“center“> ... Text ... </p>

ergibt einen zentrierten Text

Code:

 <p align=“justify"> ... Text ... </p>

ergibt einen Blocktext



~~~
So, auch Part 3 ist nun beendet.
Über Feedback freue ich mich sehr, bei Fragen einfach fragen!
Nächste Woche geht es weiter mit Teil 4. Text- & Schriftformatierung.

Um eure erworbenen Kenntnisse zu "testen" und zu festigen, könnt ihr die folgende Aufgabe lösen. Die fertige Datei könnt ihr mir dann per eMail (webmaster@otaku-welt.de) zuschicken - ich werfe einen Blick darauf und gebe euch ein Feedback.


Aufgabe zu diesem Kurs:

Strukturiere deine HTML-Seite mit den Absätzen, Zeilenumbrüchen und Überschriften, sodass sie im Browser etwa so aussieht wie in meinem Beispiel:

Kopiere dir den Text, füge ihn unter den bestehenden ein und richte ihn rechtsbündig aus.