Grundlegende Gestaltungselemente in HTML
HTML für Einsteiger - Kapitel 4-2
von Thomas Salvador.
In Kapitel 4 beschäftigen uns mit den ersten "grundlegenden" Gestaltungselementen von HTML.
 |
Teil 1 |
In diesem Teil mit:
Absätze, Erzwungene Zeilenumbrüche
Wie bereits bei Fließtext beschrieben, hätten wir obiges Beispiel auch schreiben können als:
<h3>Stufe 3 (default)</h3> <h4 align="left">Stufe 4 (links)</h4> <h5 align="right">Stufe 5 (rechts)</h5> <h6 align="center">Stufe 6 (zentriert)</h6>
Der Zeilenumbruch in der HTML-Datei fällt also nicht notwendig (bzw. i.a. sogar: nicht) mit dem Zeilenende der Ausgabe im Browser zusammen.
Beispiel:
Dies
ist
ein Test
liefert
|
Wir sehen hier noch, dass mehrfache Leerzeichen und Leerzeichen am Beginn einer Zeile keine Wirkung haben. (Der Zeilenumbruch in der HTML-Datei wird dabei wie ein Leerzeichen betrachtet.)
Erzwungener Zeilenumbruch
Daher gibt es das br-Tag (break), mit dem Sie einen Zeilenumbruch erzwingen können.
Beispiel:
Dies<br /> ist<br /> ein Test<br />
liefert
|
In den Beispielen sehen Sie auch, dass die Leerzeile zwischen "ist" und "ein" keine Wirkung hat. Man könnte genauso gut 100 Leerzeilen einstreuen, sie hätten ebenso keine Wirkung. Wir brauchen also die Möglichkeit einen Absatz zu definieren.
Absatz
Dies geschieht mit Hilfe des p-Tags (par, paragraph),
der den Absatz kapselt:
Beispiel:
<p>Dies<br> ist </p><p>ein Test</p>
liefert
|
Erweiterungen
Durch das Attribut align mit den Werten left,
center und right können Sie die
Ausrichtung des Absatzes vorschlagen. (In modernen Browsern wird mit justify
auch Blocksatz unterstützt, von dessen Verwendung ich jedoch abrate.)
Beispiele:
<p>Test-Absatz (default)</p> <p align="left">Test-Absatz (links)</p> <p align="right">Test-Absatz (rechts)</p> <p align="center">Test-Absatz (zentriert)</p>
Dieses Beispiel ist gleichbedeutend mit:
<p>Test-Absatz (default)</p> <p align="left">Test-Absatz (links)</p> <p align="right">Test-Absatz (rechts)</p> <p align="center">Test-Absatz (zentriert)</p> <p align="left">
und liefert
|
Wenn der Text nicht wie angegeben ausgerichtet sind, unterstützt Ihr Browser dies nicht. (Üblicherweise werden die Browser, die Überschriften ausrichten können, auch Absätze ausrichten können, da - wie erwähnt - Überschriften Absätze in einem speziellen, vom Browser und den Wünschen seiner Benutzer abhängenden Textstil sind.)
Sie können nochmal sehen, wie Container/Nicht-Container funktionieren. Container schließen Text ein. Bei Ihrem Ende verlieren Sie ihre Wirkung und es gelten die Zustände wie vor Ihrer Initiierung. Nicht-Container gelten solange, bis Ihre Wirkung aufgehoben wird. Daher musste die Ausrichtung noch auf left zurückgestellt werden.
Weiter erkennen die meisten Browser den center-Tag, mit dem
auch mehrere (beliebige) HTML-Elemente, insbesondere als Absätze, aber
auch Grafiken usw. zentriert werden können. Dabei wird die
zu zentrierenden Elemente durch center gekapselt.
Beispiel:
<center>Dies ist<br> ein klitzekleiner<br> Test</center>
liefert
|
Kennt der Browser diesen Tag, so stellen die zentrierten Elemente einen Absatz dar.
center ist dabei ein spezieller Fall. Allgemeiner richtet
man mit div aus, dessen Attribut align die
Werte left, center und right annehmen
kann. Obiges Beispiel zur Absatzausrichtung könnte man damit (standard-gerecht)
auch wie folgt schreiben:
<div align=left>Test-Absatz (links)</div> <div align=right>Test-Absatz (rechts)</div> <div align="center">Test-Absatz (zentriert)</div>
Wie bei center kann div mehrere Elemente
umfassen.
Der Autor empfiehlt div, anstelle von center zu verwenden.
|
|
Teil 1 | Teil 3 |  |
Verwandte Artikel und Seiten
- oben genannte Teile und
- Hübsche Überschriften-1
konsistente Überschriften mit HTML oder alternativ mit CSS. - Hintergründe - Abgründe
Es ist leicht, unleserliche Seiten zu erzeugen. Umschiffen Sie bitte diese Falle.
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.
Copyright © 1999-2010 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei 1 und 1.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.
Hat Ihnen diese Seite gefallen oder geholfen? Geben Sie mir einen Kaffee aus (Kaffeekasse)! Danke.
Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/21.html .