Websiteentwicklung: XHTML: Titel und Absätze
Aus Wikibooks
Inhaltsverzeichnis |
[Bearbeiten] Dokumenttitel
Der Dokumenttitel ist der Text, der beim Browser oben in der meist blauen Titelleiste angezeigt wird. Außerdem erhalten Bookmarks automatisch diesen Text. Sie sollten den Titel also sorgfältig auswählen und darauf achten, dass er den Inhalt der Seite möglichst exakt "vorhersagt".
Der Dokumenttitel ist ein Element, das zum Kopfbereich des Dokuments gehört. Sie fügen den Titel mit dem Element <title> ein und müssen dieses Element auch wieder abschliessen.
Der Kopfbereich des Dokuments sieht nun wie folgt aus:
<head> <title>Titel des Dokuments</title> </head>
Hinweis: Die Einrückungen im XHTML-Quelltext haben keine Auswirkungen auf die Darstellung der Seite im Browser, sie dienen nur der besseren Lesbarkeit für den Webdesigner.
[Bearbeiten] Absätze und Zeilenumbrüche
Wenn Sie ein wenig mit XHTML experimentieren, werden Sie feststellen, dass der Browser Zeilenumbrüche ignoriert. Wenn Sie einen neuen Absatz oder eine neue Zeile beginnen wollen, müssen Sie diese explizit angeben.
Grundsätzlich sollten Sie sämtlichen Text in Absätze oder in andere Textbereiche einfassen, da dies vom XHTML Standard so vorgeschrieben ist. Den Bereich für einen Absatz markieren Sie mit dem Element <p> (engl. paragraph; dt. Absatz). Wie Sie im vorherigen Kapitel gelernt haben, muss dieses Element selbstverständlich auch abgeschlossen werden. Zwischen verschiedenen Absätzen erzeugen die Browser automatisch einen kleinen Abstand, so sind diese auch optisch voneinander getrennt.
Das Element für einen Zeilenumbruch ist ein sogenanntes leeres Element. Es markiert keinen Bereich sondern eben nur einen Zeilenumbruch. Darum wird dieses Element speziell geschrieben: <br /> (engl. break; dt. Umbruch). Dieses Element muss nicht nochmals abgeschlossen werden, diese Funktion übernimmt schon der Querstrich vor der schließenden Klammer.
[Bearbeiten] Beispiel
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eine Seite mit Absätzen</title>
</head>
<body>
<p>
Ein Absatz, das p kommt von "paragraph".
</p>
<p>
Ein weiterer Absatz.
</p>
<p>
Ein Absatz mit <br />
mehreren <br />
Zeilenumbrüchen.
</p>
</body>
</html>
Achtung: In der Regel sollten Sie es dem Browser überlassen, die Zeilenumbrüche selbst festzulegen, da Sie nie wissen können, wie breit eine Zeile ist. Ihre Webseite kann in einem Fenster mit einer Auflösung von 1024 x 768 angezeigt werden, oder auch nur in einem sehr kleinen Ausschnitt des Bildschirms. Letztlich wissen Sie nicht, wo die Zeile aufhört. Wenn Sie zwanghaft ein bestimmtes Layout zu erzeugen versuchen, kann es sein, dass ein Besucher Ihrer Webseite mit einem anderen Browser und / oder anderer Bildschirmauflösung die Seite nicht mehr so sieht, wie Sie dies eigentlich wollten.
Hinweis für Experten: Wenn Sie alten HTML-Code erstellen wollen, sollten Sie <br> statt <br /> benutzen. In altem SGML-basierten HTML gibt es noch keine EmptyElemTags.
[Bearbeiten] Überschriften
Es ist sehr wichtig, dass Sie ihre Seite mit Überschriften strukturieren. Dies hilft dem Leser enorm, verschiedene Teile der Seite zu unterscheiden und hilft Ihnen, Ihren Text strukturiert und gut verständlich zu schreiben.
In XHTML haben Sie sechs Titel zur Auswahl. Von ganz groß bis ganz klein. Dazu gibt es die Elemente <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Der Buchstabe h steht für header, auf deutsch, Überschrift. Die Zahl definiert die Reihenfolge der Überschriften des Titels. 1 ist am höchsten und 6 am niedrigsten. Hierbei wird auch die Größe geändert; das wurde aber nur aus Gründen der Lesbarkeit gemacht. 1 ist hierbei am größten und 6 am kleinsten.
[Bearbeiten] Beispiel
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eine Seite mit Überschriften strukturieren</title>
</head>
<body>
<h1>Über mich</h1>
<h2>Adresse</h2>
<p>Thomas Dell<br />
Computerstrasse 32<br />
12321 Interhausen
</p>
<h2>Hobbies</h2>
<p>In meiner Freizeit treibe ich viel Sport, treffe mich gerne mit Kollegen.
Ich befasse mich intensiv mit dem Computer
und erstelle verschiedenste Homepages.</p>
</body>
</html>
Sie sehen, dass hier den verschiedenen Absätzen ein Titel hinzugefügt wurde. Dieser Titel sagt klar aus, was nun folgt und gibt der Seite eine klare Struktur.
Hinweis: Wenn Sie die Seiten von Wikibooks und Wikipedia einmal auf ihre Struktur untersuchen, sehen Sie gut, dass überall Überschriften zur Strukturierung der Seiten benutzt werden.
