brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Grundlegende Gestaltungselemente in HTML

HTML für Einsteiger - Kapitel 4-2

von Thomas Salvador.

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

In Kapitel 4 beschäftigen uns mit den ersten "grundlegenden" Gestaltungselementen von HTML.

zurueck 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

Ausgabe auf Ihrem Browser
Dies ist ein Test

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

Ausgabe auf Ihrem Browser
Dies
ist
ein Test

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

Ausgabe auf Ihrem Browser

Dies
ist

ein Test

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

Ausgabe auf Ihrem Browser

Test-Absatz (default)

Test-Absatz (links)

Test-Absatz (rechts)

Test-Absatz (zentriert)

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

Ausgabe auf Ihrem Browser

Dies ist
ein klitzekleiner
Test

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.

zurueck Teil 1
Teil 3 weiter
springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 4. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/21.html .