Informatik :: HTML :: Überschriften, Absätze, Trennlinien und Container und deren Ausrichtung

Überschriften, Absätze, Trennlinien und Container und deren Ausrichtung

Überschriften | Absätze | Trennlinien | Container | Ausrichtung | Aufgabe

Überschriften

  Tags Erklärung
Überschrift 1. Ordnung <h1> Überschrift </h1> größte Überschrift (24 pt)
Überschrift 2. Ordnung <h2> Überschrift </h2> 18 pt groß
Überschrift 3. Ordnung <h3> Überschrift </h3> 14 pt groß
Überschrift 4. Ordnung <h4> Überschrift </h4> 12 pt groß
Überschrift 5. Ordnung <h5> Überschrift </h5> 10 pt groß
Überschrift 6. Ordnung <h6> Überschrift </h6> kleinste Überschrift (8 pt)

Nach einer Überschrift erfolgt automatisch ein Zeilenumbruch. Der nachfolgende Text erscheint mit einem Abstand.


Seitenanfang

Absätze

Absätze dienen der optischen Gliederung eines Textes.
Normalerweise genügt es dazu in der Textverarbeitung die Eingabetaste zu drücken. Browser ignorieren leider solche Umbrüche und unterteilen nur dann ein Web-Dokument, wenn sie auf den HTML-Tag <p> (von paragraph) stoßen.

Dabei wird eine Zeile beendet und etwas leerer Raum zwischen den Zeilen eingefügt.
Normalerweise ist <p> ein Standalone-Tag.
Sie können jedoch auch zu Beginn eines Absatzes ein einleitendes Tag <p> und am Absatzende ein abschließendes </p> notieren.


Seitenanfang

Trennlinien

1. Einfache Trennlinien

Mit Trennlinien können Sie den Bildschirm in logische oder visuelle Abschnitte unterteilen.
Die Markierung dazu lautet <hr> (von horizontal rule) und benötigt keinen Abschluß-Tag.

2. Nicht-schattierte Trennlinien

Der Netscape-Navigator und der Internet-Explorer stellen Trennlinien normalerweise in 3D-Form dar. Dadurch entsteht ein Schatteneffekt, welcher bei grauem Fensterhintergrund auch recht gut aussieht.
Bei verschiedenen Hintergrundfarben (z.B. weiß) sehen solche Linien jedoch ziemlich dürftig aus. Verwende in diesem Fall das Attribut noshade (ohne Schatten), um die Trennlinie massiv durchgezogen darzustellen.

3. Länge und Dicke von Trennlinien

Browser stellen Trennlinien standardgemäß über die gesamte Breite des Anzeigefensters in einer Dicke von 2 Punkten dar. Beide Einstellungen lassen sich jedoch beeinflussen.

Durch das Attribut width="Zahl" bestimmt man die absolute Länge der horizontalen Linie in Pixel und mit width="Zahl%" erreicht man, dass der Browser die Länge der Trennlinie als Prozentsatz der Breite des Broserfensters darstellt.
Durch die Angabe size="Zahl" ist es möglich, die Dicke der Trennlinien zu verändern.


Seitenanfang

Container

In einem Container können mehrere auch verschiedenartige Elemente (z.B. Absätze, Trennlinien, Überschriften, Bilder, ...) zusammengefasst werden.

Dazu notiert man <div> Containerinhalt aus mehreren Elementen </div>


Seitenanfang

Ausrichtung

Die Standardausrichtung aller Elemente eines Dokumentes (Überschriften, Trennlinien, Absätze, Tabellen, Bilder, Container ...) ist linksbündig.
Alle Elemente lassen sich aber auch zentriert oder rechtsbündig und Absätze auch im Blocksatz ausrichten. Das Attribut dazu heißt align.
Mögliche Werte sind: left | center | right und justify für Blocksatz.

Mit der Anweisung <center> Elemente </center> lassen sich alle eingeschlossenen Elemente zentrieren.

Beispiele:

<h3 align="center"> zentrierte Überschrift 3. Ordnung
<p align="justify"> alle Zeilen des Absatzes werden im Blocksatz ausgerichtet
<div align="right"> alle Elemente des Containers werden rechtsbündig ausgerichtet

Seitenanfang

Aufgabe:

Speichere die Datei 03_Ausrichtung.html in deinen HTML-Ordner!

Ergänze die Datei entsprechend der in den Kommentaren angegebenen Hinweise!

Seitenanfang