Weitere interessante HTML-Befehle und Attribute

Im ersten Kapitel habe ich gezeigt, wie man mit 16 elementaren HTML-Tags komplette Webseiten gestalten kann. Im zweiten Kapitel kamen zu diesen 16 Tags noch 14 verschiedene Attribute hinzu, mit denen man erheblichen Einfluss auf die verschiedenen Bereiche der Seite nehmen konnte.

In diesem Kapitel bringe ich noch einige weitere HTML-Tags uns Attribute ins Spiel, die man hin und wieder mal einsetzen kann. Auch damit habe ich HTML noch keineswegs komplett erschlagen, aber es geht hier schließlich nicht um ein HTML Kompendium, sondern um eine Einführung in HTML.

Physische Textauszeichnung

Wir haben bereits gelernt, wie man mit dem align Attribut Einfluss auf die Textausrichtung nehmen kann. Jedoch fehlt bislang ein Instrument, mit dem man einzelne Textbereiche hervorheben, also zum Beispiel unterstreichen, kann. Mit Hilfe spezieller HTML-Tags kann man alle von gängigen Textverarbeitungsprogrammen gewohnten Textformatierungen vornehmen. Man verwendet die hier vorgestellten Tags genau so wie die bislang gelernten 16 elementaren HTML-Tags: Der zu formatierende Text wird zwischen ein Anfang- und ein End-Tag eingeschlossen.

Wird ein Textabschnitt in die Tags <b> und </b> eingeschlossen, wird der Text fett (b=bold) dargestellt. Text zwischen den Tags <i> und </i> wird kursiv (i=italic) dargestellt. Das <u> Tag unterstreicht Text. Fügt man einen Text in die Tags <big> und </big> so wird der Textteil groß dargestellt. Entsprechend kann man durch das <small> Tag einen Textteil verkleinern. Mit Hilfe der Tags <sup> und <sub> kann man Text hoch- bzw. tiefstellen, z.B. a₁ = 5m².

<b>fetter Text</b>
<i>kursiver Text</i>
<u>unterstrichener Text</u>
<big>großer Text</big>
<small>kleiner Text</small>
<sup>hochgestellter Text</sup>
<sub>tiefgestellter Text</sub>

Logische Textauszeichnung

Während die HTML-Tags aus dem vorigen Unterkapitel direkten Einfluss auf die physische Textdarstellung haben, werden in diesem Unterkapitel weitere Textauszeichnungs-Tags vorgestellt, deren Wirkungsweise auf den ersten Blick nicht ersichtlich ist. Es handelt sich um sogenannte logische Textauszeichnungs-Tags, deren Wirkweise zwar defaultmäßig vom Browser vorgegeben ist, die man aber selbst verändern kann.

So kann man einen Text mit dem Tag <em> (emphasis) hervorheben bzw. ihn mit dem Tag <strong> streng hervorheben. Ein wichtiges Tag ist das <pre> Tag, mit welchem man vorformatierten (preformatted) Text darstellen kann. Vorformatierter Text wird zum Beispiel für Quellcode oder obige bzw. untere Tabelle mit Tags verwendet. Text, der zwischen <pre> und </pre> geschrieben wird, wird genauso dargestellt, wie er eingegeben wird. Als Schriftart wird eine diktengleiche Schrift wie Courier verwendet, bei der jedes Zeichen genau die gleiche Breite hat.

Wenn ich in meinem Text zum Beispiel das Tag <tt> erwähne, umringe ich es mit dem <tt> Tag (TeleTyper), welches den Text mit lauter gleich breiten Buchstaben darstellt, also eine ähnliche Wirkung wie das <pre> Tag hat. Für Definitionen von Begriffen gibt es ein spezielles Tag, nämlich <dfn>. Ebenso kann man Variablennamen mit dem <var> Tag besonders auszeichnen. Auch wenn ich ein Beispiel bringe, kann ich es mit einem speziellen Tag <samp> (engl. sample) auszeichnen. Für die Auszeichnung von Quellcode aus Programmen gibt es das <code> Tag. Schließlich gibt es noch ein spezielles Tag namens <cite> für Zitate.

Für Zitate gibt es alternativ das <blockquote> Tag. Zitate, die mit dem <blockquote> Tag ausgezeichnet werden, haben Abstand zum normalen Text und werden eingerückt.

Auch für die Darstellung einer Adresse gibt es ein selbsterklärendes Tag namens <address>. Adressen werden mit Abstand zum vorigen Absatz in einem neuen Textblock dargestellt.

Wenn mich jetzt einer fragt, ob man all diese Tags wirklich braucht, sage ich ganz klar nein. Auf die Frage, ob der Einsatz solcher Tags überhaupt Sinn macht, antworte ich jedoch mit einem ganz klaren Ja. Der Einsatz dieser Tags macht jedoch erst Sinn, wenn man Style Sheets verwendet. Mit Style Sheets kann man nämlich all diesen Tags seinen individuellen Stil verpassen. Und es schreibt einem ja niemand vor, dass zwischen den <address> Tags auch wirklich eine Adresse stehen muss.

<em>hervorgehobener Text</em>
<strong>stark betonter Text</strong>
<pre>vorformatierter Text</pre>
<tt>Teletyper Text</tt>
<dfn>Definition</dfn>
<var>Variablen</var>
<samp>Beispiel</samp>
<code>Code</code>
<cite>Zitat</cite>
<blockquote>Zitat</blockquote>
<address>Adresse</address>

Kontrolle über Zeilenumbrüche

Im vorigen Kapitel haben wir gelernt, wie man mit Hilfe des Tags align die Ausrichtung des Textes in einem Absatz festlegen kann. Der Browser übernimmt damit automatisch die Kontrolle über Zeilenumbrüche. Oftmals ist es jedoch wünschenswert, selbst Einfluss auf die Zeilenumbrüche in einem Textabschnitt zu nehmen. Dazu gibt es zwei HTML-Tags.

Mit dem Tag <br> (engl. break) kann man wie hier
einen Zeilenumbruch erzwingen (nach dem Wort hier). Mit dem Tag <nobr> (engl. no break) kann man gezielt einen Zeilenumbruch verhindern. Beispiel: Innerhalb dieses Satzes soll es keinen Zeilenumbruch geben. Man erkennt, wie der vorige Satz zusammen bleibt, auch wenn noch einige Worte in der Zeile davor Platz gehabt hätten.

Ein sehr wichtiges Zeichen ist das non breaking space (nicht umbrechendes Leerzeichen), abgekürzt mit nbsp. In einem Text ist es zum Beispiel sehr ärgerlich, wenn bei einem Betrag von 30
€ zwischen der Zahl und dem Währungszeichen ein Zeilenumbruch gemacht wird. Solche Umbrüche verhindert man, indem man zwischen Zahl und Währung kein normales Leerzeichen, sondern ein nicht umbrechendes Leerzeichen einsetzt. Ein solches Leerzeichen setzt man mit dem Code &nbsp;, also zum Beispiel 30&nbsp;€

<br>
<nobr> </nobr>
&nbsp;

Nummerierte Listen

In unserem Beispiel haben wir eine nicht numerierte Liste verwendet, d.h. die 6 Listenpunkte wurden einfach untereinander geschrieben und jeweils mit einem Quadrat markiert. Oftmals möchte man jedoch eine Liste haben, in der als Aufzählungszeichen nicht einfach ein Quadrat oder ein Kreis verwendet wird, sondern wo die einzelnen Listeneinträge durchnummeriert werden. Dafür gibt es da HTML-Tag <ol> (engl. ordered list, also geordnete Liste).

Eine geordnete Liste sieht zum Beispiel so aus:

1. absolut kostenfreies Girokonto
2. einmal monatlich kostenfreier Kontoauszug per Post
3. EC-Karte kostenlos inbegriffen

Verwendet man für das Tag <ol> das Attribut type, so kann man fest legen, wie die Listen durchnummeriert werden sollen. Eine Liste kann zum Beispiel mit Großbuchstaben <ol type=A> nummeriert werden:

1. absolut kostenfreies Girokonto
2. einmal monatlich kostenfreier Kontoauszug per Post
3. EC-Karte kostenlos inbegriffen

Verwendet man das Attribut <ol type=I>, so wird die Liste mit römischen Buchstaben durchnummeriert:

1. absolut kostenfreies Girokonto
2. einmal monatlich kostenfreier Kontoauszug per Post
3. EC-Karte kostenlos inbegriffen

Wichtige Attribute für Tabellen

Im vorigen Kapitel haben wir zahlreiche Attribute kennengelernt, mit denen man Tabellen schöner darstellen kann. Als Ergänzung sind noch zwei Attribute wichtig, mit denen man mehrere Tabellenzellen horizontal oder vertikal zusammenfassen kann. Es handelt sich um die Attribute colspan und rowspan. Mit colspan=2 kann man zwei Zellen nebeneinander zusammenfassen; mit rowspan=2 kann man zwei Zellen untereinander zusammenfassen. Natürlich kann man diese Attribute auch kombinieren.

In der obigen Tabelle wurden Zellen horizontal, vertikal und kombiniert wild zusammengefasst. Man sieht, dass man mit diesen Attributen die kompliziertesten Tabellen zusammenbasteln kann.

Horizontale Linien

Ein HTML-Tag, das sicher jeder mal in irgendeiner Form auf seine Webseite einsetzt, ist das <hr> Tag (engl horizontal rule), das eine horizontale Linie zeichnet.

Auch dieses Tag kann Attribute enthalten. Mit den Attributen width=300 size=10 legt man die Breite und Höhe der Linie fest: <hr width=300 size=10> zeichnet folgende Linie:

Ergänzt man noch das Attribute noshade, so unterbindet man den Schatten, d.h. die Linie wird ausgefüllt. Beispiel: <hr width=300 size=10 noshade>

Schließlich kann man auch bestimmen, ob die Linie links, rechts oder zentriert werden soll. Beispiel für eine zentrierte Linie: <hr width=300 size=10 noshade align="center">

Abschließend machen wir unsere Linie mit dem color Attribut noch blau. Unser HTML-Tag lautet mit Attributen: <hr width=300 size=10 noshade align="center" color=blue>

Bereiche definieren

Im vorigen Kapitel haben wir für unsere Beispiel-Seite einige zusammenhängende Textabsätze in Blocksatz dargestellt. Um dies zu erreichen, mussten wir für jeden einzelnen Absatz beim einleitenden <p> Tag das Attribut <p align=justify> hinzufügen. Geht das nicht einfacher? Ja, wenn man das Attribut align=justify für einen ganzen Bereich festlegt. Beispiel für einen Bereich:

<div align=justify>
<p>Einer meiner Grundleitsätze im Leben ist, dass es...</p>
<p>Das waren Zeiten, als ich für mein ganz normales Girokonto...</p>
<p>Gott sei Dank sind diese Zeiten vorbei, zumindest für mich...</p>
</div>
<ul type=square>
  <li>absolut kostenfreies Girokonto</li>
</ul>

Mit dem HTML-Tag <div> (engl. division) leitet man einen Breich ein, der mit dem konträren Tag </div> endet. Setzt man für diesen Bereich wie im obigen Beispiel das Attribut <div align=justify>, so werden sämtliche Textblöcke innerhalb des Bereiches in Blocksatz dargestellt.

Eine richtig große Rolle spielt das <div> Tag erst bei der Verwendung von Style Sheets oder Dynamischem HTML.

Schriftformatierung in HTML

Vielleicht hast Du Dich durch die vorangegangenen zahlreichen Unterkapitel gekämpft und bist jetzt am Fluchen, weil Du immer noch nicht weißt, wie man einen ganz normalen Text gelb macht oder die Schriftgröße für einen ganz normalen Text verändert. Im Folgenden zeige ich zwar eine Möglichkeit, wie man solche Formatierungen in HTML durchführt, jedoch sind sind die folgenden Tags und Attribute nicht im Geringsten im Sinne von HTML.

Wir erinnern uns: HTML ist eine Seitenbeschreibungssprache, die Elemente auf einer Seite auszeichnet, also sagt, was ein Element ist, z.B. ein Textabsatz oder eine Überschrift. HTML sagt nicht, wie das Element dargestellt werden soll. Das im Folgenden beschriebene <font> Tag bewirkt zwar genau das Layout für einen gewissen Text, jedoch sollte man dieses Tag besser nicht gebrauchen, denn früher oder später wird dieses Tag aus dem HTML-Standard entfernt. Für das Layout sind nämlich Style Sheets verantwortlich und keine HTML-Tags.

Also, das im Folgenden beschriebene <font> Tag mit seinen Attributen kann nur als Notlösung dienen, bis die notwendigen Kenntnisse über Style Sheets vorhanden sind. Mit dem Attribut face kann man eine Schriftart auswählen. Beispiel: <font face=Arial>

Diese Zeile sollte in der Schriftart Arial dargestellt sein.

Mit dem Attribut color kann die Farbe der Schrift eingestellt werden. Beispiel: <font color=blue>

Diese Zeile sollte in blauer Schrift sein.

Mit dem Attribut size kann man die Schriftgröße relativ zur Normalgröße festlegen. Beispiel: <font size=-2>

Dieser Text sollte zwei Nummern kleiner sein als der bisherige.

Natürlich kann man obige Attribute auch kombinieren. Aber ich möchte nochmals betonen, dass das <font> Tag auf der HTML-Abschussliste steht und man Schriftformatierungen besser mit Style Sheets machen sollte.

Zusammenfassung

In diesem Kapitel haben wir eine Reihe zusätzlicher HTML-Tags und Attribute kennengelernt. Während man die Tags zur physischen Textauszeichnung wie das Hervorheben von Text durch Unterstreichen oder Fettschrift relativ oft einsetzt, kommen die Tags zur logischen Textauszeichnung nur bei speziellen Seiten, die auf Style Sheets basieren, zum Einsatz.

Auch nummerierte Listen kommen im Internet höchst selten vor; zu beliebt sind unnummerierte Listen mit schönen Aufzählungszeichen. Das Zusammenfassen von Zellen in Tabellen kommt jedoch recht häufig vor, wenn man kompliziertere Tabellen erstellt oder Tabellen zum Erzeugen eines Seitenlayouts missbraucht.

Große Verwendung finden auch horizontale Linien oder die manuelle Steuerung der Zeilenumbrüche. Die Definition von Bereichen mit dem <div> Tag kommt auf fast allen Webseiten zum Einsatz, die JavaScript verwenden. Die Schriftformatierung mit dem <font> Tag sollte man besser gleich wieder vergessen und sich stattdessen mit Style Sheets befassen.

Auch wenn die hier beschriebenen Tags und Attribute zum Teil schon exotischen Charakter haben, sind wir noch lange nicht am Ende der HTML-Features angelangt. Aber alles, was HTML jetzt noch bietet, zum Beispiel Formulare, kommt nur noch bei ganz speziellen Seiten zum Einsatz.

Wer all die bislang beschriebenen HTML-Features verstanden hat und beherrscht, der macht besser mit Style Sheets und JavaScript weiter als noch tiefer in die HTML-Materie einzudringen.

Zurück zum Inhaltsverzeichnis HTML-Einführung

Copyright: Patrick Wagner, www.patrickwagner.de