vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 1

Tag 5

Wichtige HTML- Anweisungen

Vorgestern haben Sie wichtige Grundlagen zum Erstellen einer Webseite im Allgemeinen kennen gelernt. Dazu zählen der Aufbau von Steueranweisungen in HTML und das Grundgerüst einer Webseite. Gestern kamen die Verbindung von HTML mit JavaScript und Style Sheets hinzu. Heute wollen wir einige weitergehende HTML-Anweisungen einführen. Dazu verlassen wir wieder für einen Tag JavaScript.

Sie müssen - wie schon mehrfach angedeutet - als JavaScript- Programmierer nicht alle HTML-Anweisungen kennen. Deshalb und weil dies ein JavaScript-Buch ist, werden wir hier nur eine Auswahl von wichtigen HTML-Anweisungen behandeln. Einige dieser HTML- Anweisungen müssen allerdings bereitstehen, bevor wir sinnvolle JavaScript-Aktionen durchführen können. Immerhin verankert sich JavaScript in einer HTML-Seite und interagiert mit deren Elementen. Dementsprechend wollen wir Webseiten verwenden, wie sie in der Praxis sinnvoll sind und Sie sollten deren HTML-Aufbau nachvollziehen können. Die einfacheren HTML-Strukturen werden heute bereits behandelt, komplexere HTML-Strukturen wie Frames, Tabellen und Formulare sowie die Referenzierung von Java-Applets etc. besprechen wir an späteren Tagen und insbesondere in direkter Verbindung zu JavaScript-Aktionen. Eine vollständige Auflistung aller HTML-Befehle und -Attribute finden Sie im Anhang.

Die Anweisungen, die wir hier behandeln, werden allesamt im Body-Bereich einer Webseite notiert und gehören zu den allgemeinen Gestaltungmöglichkeiten unter HTML.

Zeilen- und Absatzschaltungen

Zeilen- und Absatzschaltungen dienen einmal der optischen Gliederung eines Textes. Unter HTML muss jeder explizit gewünschte Zeilenumbruch mit einem Tag definiert werden. Ansonsten kümmert sich der Browser darum, Text am rechten Browserrand automatisch umzubrechen (Fließtextverhalten). Das automatische Umbrechen am rechten Rand kann man auch mit einem eigenen Container verhindern.

Ein Absatz definiert darüber hinaus noch einen Bereich, der bezüglich Ausrichtung als Einheit behandelt werden kann (außerdem ist der Vorschub etwas größer). Die Ausrichtung erfolgt über das optionale Attribut align, welches bei allen HTML-Anweisungen verwendet werden kann, wo es Sinn macht (also Anweisungen, die absatzähnliche Bereiche definieren).

Aktion

Tag

Ende-Tag

Expliziter Zeilenumbruch

<BR>

-

Unterbindung eines automatischen Zeilenumbruchs

<NOBR>

</NOBR>

Absatzschaltung

<P>

</P>

Absatzschaltung mit Ausrichtung

<P align={left, right, center, justify}>

</P>

Tabelle 5.1: Absatz und Zeilenumbruch

Die bei der Absatzschaltung mit Ausrichtung angegebene geschweifte Klammer soll ein Auswahlmenge definieren, aus der genau ein Wert verwendet werden muss. Die Ausprägungen left, right und center entsprechen links, rechts und zentriert, justify entspricht Blocksatz, wobei diese Anweisung nicht von allen Browsern unterstützt wird (dann wird links ausgerichtet).

Die Anweisungen können direkt in den fließenden Text geschrieben werden, aber auch der Übersichtlichkeit halber in eine neue Zeile. Auf das Layout des HTML-Dokumentes hat dies keinerlei Auswirkung. Dies wird auch für alle folgenden Anweisungen gelten.

Der Ende-Tag eines Absatzes erzeugt keinen neuen Absatz. Erst das explizite Setzen eines neuen <P> erzeugt einen solchen neuen Absatz (und beendet damit automatisch den bisherigen Absatz). Der Ende-Tag beendet jedoch lokale Vereinbarungen innerhalb eines Absatzes (etwa spezielle Ausrichtung in diesem Absatz) und hinter dem Ende-Tag kommen wieder die globalen Vereinbarungen der umgebenden Struktur zum Tragen. Dennoch kann man oft darauf verzichten, wenn man ausdrücklich einen neuen Absatz setzt.

Testen Sie die Wirkungen der Tags in einem Beispiel.

Beispiel 1:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
Das ist der erste Text.
<BR>
Eine neue Zeile.
<BR>
<NOBR>
Da wird nix umbrochen -
komme ein Browserrand oder nicht.
</NOBR>
<P>
Ein erster Absatz.
</P>
<P align=right>
Der Text steht rechts.
<P align=justify>
Der neue Absatz ist als Blocksatz ausgerichtet. Die neue Absatzausrichtung gilt, obwohl die vorherige Ausrichtung nicht durch einen Ende-Tag ausgeschaltet wurde.
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen ZeilenUndAbsaetze.htm ab und schauen Sie sich die Datei im Browser an. Experimentieren Sie mit verschiedenen Fenstergrößen.

Abbildung 5.1:  Die Zeilenschaltungen und Absatzformatierungen wirken

Ausrichtungsanweisungen

Ein allgemeiner Container zum Ausrichten und Zusammenfassen von Objekten ist der <DIV>-Container. Er erzeugt in den meisten Browsern einen Vorschub, gruppiert Elemente und definiert damit einen begrenzten Bereich als eigenständige Unterstruktur innerhalb einer Webseite, die gemeinsam ausgerichtet werden kann. Dazu dient wieder die Parameterangabe align, welche die gleichen Werte annehmen kann wie bei Absätzen. Er ist auch sehr wichtig für die Interaktion zwischen JavaScript, Style Sheets und Elementen einer HTML-Seite. Für diesen Zweck kann er um einige Attribute erweitert werden, die wir aber erst in diesem Zusammenhang besprechen.

Neben der Möglichkeit, in absatzorientierten HTML-Anweisungen über das align-Attribut Ausrichtungen vorzunehmen, gibt es noch einen oft verwendeten und ziemlich alten Befehl, um im Container eingeschlossene Elemente zu zentrieren - <CENTER>.

Diese Anweisung ist ein Paradebeispiel für einen als deprecated (veraltet) gekennzeichneten Befehl (siehe dazu den Abschnitt »Fragen & Antworten« am Tag 3), der immer noch weiter verwendet wird. Nicht nur das: Es zählt zu Standardoptimierungsmaßnahmen einer Webseite, im Fall von Zentrierungen alle align-Attribute aus Anweisungen soweit wie möglich durch diese Anweisung zu ersetzen. (Dies gehört zu einer der Maßnahmen, welche etwa der Optimierungsassistent von dem HTML-Tool 1st Page 2000 durchführt.)

Testen wir die Tags mit einem weiteren Beispiel.

Abbildung 5.2:  Die Ausrichtungen wirken

Beispiel 2:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<CENTER>
Das ist der erste Text.
<BR>
Eine neue Zeile.
<BR>
Nach der Zeile ist die Zentrierung zu Ende.
</CENTER>
<DIV align=right>
Das ist ein in einem DIV-Container eingeschlossener Text.
</DIV>
Das steht außerhalb von dem DIV-Container.
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Ausrichtung.htm ab und schauen Sie sich die Datei im Browser an. Experimentieren Sie mit verschiedenen Fenstergrößen.

Allgemeine Gruppierungsanweisung

In ähnlichem Zusammenhang wie der <DIV>-Container ist der <SPAN>- Container zu sehen. Er unterscheidet sich davon, dass er keinen Vorschub erzeugt. Seine Hauptbedeutung erhält er im Zusammenspiel von JavaScript, Style Sheets und HTML. Dieser Container kann, da er wie gesagt keinen Absatz oder Vorschub erzeugt, im fließenden Text ohne optische Auswirkung in der Webseite verwendet werden. Gestern haben wir ihn bereits bei den Beispielen zu Style Sheets eingesetzt, wir kommen darauf aber zusätzlich nochmals bei der Behandlung von Style Sheets und JavaScript zurück (siehe Abb. Seite 163).

Trennlinien

Trennlinien sind ein einfaches Hilfsmittel zur optischen Abgrenzung von Textbereichen. Sie beginnen immer in einer neuen Zeile und erzeugen neben einer sichtbaren Linie einen weiteren Zeilenvorschub. Trennlinien werden mit dem <HR>-Tag in ein Dokument eingefügt und erstrecken sich ohne weitere Angabe über die gesamte Breite des Anzeigefensters eines Browsers. Der Trennlinien-Tag lässt sich um diverse Parameter zur Spezifizierung erweitern, die in beliebiger Reihenfolge kombiniert werden können (so lange sinnvoll - einige Attribute machen nur in Kombination mit anderen Attributen Sinn).

Attribut

Wirkung

width=[Breite]

Definiert die Breite der Trennlinie. Sofern der Wert in Prozent angegeben wird, beträgt die Trennlinie diesen Prozentsatz von der Breite des Anzeigefensters. Ansonsten wird die Breite der Trennlinie in Pixeln festgelegt.

align=[Ausrichtung]

Die Defaultausrichtung einer Trennlinie ist zentriert, aber mit diesem Attribut und den Werten left, right und center lässt sich die Ausrichtung explizit festlegen. Blocksatz macht hier natürlich keinen Sinn und das Ausrichten von Trennlinien ist nur in Verbindung mit der Angabe width zur Einschränkung der Linienlänge sinnvoll, da die Trennlinie ansonsten stets über die gesamte Breite des Anzeigefensters geht.

size=[Liniendicke]

Definiert die Dicke der Trennlinie. Diese Angabe ist nummerisch und immer als relativ zur Standarddicke einer Trennlinie zu sehen. Die Voreinstellung beträgt 2. Mit dem Wert 1 erzwingen Sie eine dünnere Trennlinie, mit Werten größer 2 dickere Trennlinien.

noshade

Die meisten Browser zeigen Trennlinien schattiert an. Sie können den Schatteneffekt mit diesem Attribut unterbinden.

Tabelle 5.2: Trennlinienspezifizierungen

Experimentieren wir auch mit der Definition von Trennlinien.

Beispiel 3:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<CENTER>
Das ist der erste Text. Danach folgt eine Trennlinie mit Prozentangabe der Größe.
<HR width=45%>
Eine neue Zeile. Danach folgt eine Trennlinie mit Pixelangabe der Größe.
<HR width=300>
Verschiedene Trennlinien mit der Kombination der Ausrichtung
<HR width=50% align=left>
<HR width=25% align=right>
Trennlinien in verschiedenen Größen.
<HR size=1>
<HR size=5>
<HR size=10>
Trennlinie mit dem noshade-Effekt.
<HR width=95% align=left noshade>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Trennlinien.htm ab und schauen Sie sich die Datei im Browser an. Experimentieren Sie mit verschiedenen Fenstergrößen.

Abbildung 5.3:  Verschiedene Trennlinien

Überschriften

Überschriften werden über einen Container festgelegt, der verschiedene Schriftgrößen für den eingeschlossenen Text spezifiziert und eine Absatzschaltung auslöst. HTML kennt sechs Überschriften, die sich normalerweise nur in der Schriftgröße unterscheiden:

Tag

Beschreibung

<H1>

Überschrift 1. Ordnung (größter Text)

<H2>

Überschrift 2. Ordnung

<H3>

Überschrift 3. Ordnung

<H4>

Überschrift 4. Ordnung

<H5>

Überschrift 5. Ordnung

<H6>

Überschrift 6. Ordnung (kleinster Text)

Tabelle 5.3: Überschriften

Die Größenangaben der Überschriften sind immer als relative Angaben zu verstehen, die von der Größe der Standardschrift des Browsers abhängen.

Da Überschriften absatzorientiert sind, können sie über das bekannte Attribut align und den Werten left, right, justify und center ausgerichtet werden (die Wirkung ist auf den Überschriften-Container beschränkt). Standardausrichtung ist linksbündig.

Beispiel 4:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<H1>
H1 ohne Ausrichtung
</H1>
<H2 align=justify>
H2 mit Ausrichtung Blocksatz. Da muss dann viel Text stehen, dass der Effekt sichtbar wird.
</H2>
<H3 align=center>
H3 mit Ausrichtung zentriert
</H3>
<H4 align=right>
H4 mit Ausrichtung rechts
</H4>
<H5 align=left>
H5 mit Ausrichtung Links - entspricht Standardausrichtung.
</H5>
<H6>
H6 ohne Ausrichtung
</H6>
</BODY>
</HTML>

Abbildung 5.4:  Verschiedene Überschriften

Speichern Sie den Text bitte unter dem Dateinamen Ueberschriften.htm ab und schauen Sie sich die Datei im Browser an. Experimentieren Sie mit verschiedenen Schriftgrößen. Das erreichen Sie im Netscape Navigator, indem Sie im Menü Bearbeiten den Menüpunkt Einstellungen auswählen und dann die Schriftarten verändern. Ebenso können Sie unter Ansicht die Schriftgrößen verändern. Im Internet Explorer finden Sie die entsprechenden Möglichkeiten unter Extras Internetoptionen..., Registerblatt Allgemein bzw. im Menü Ansicht und dort Schriftgrad. Die relative Wirkung der Überschriften-Tags wird noch deutlicher, wenn dazwischen Nichttext-Elemente wie Grafiken eingebaut sind. Wir werden das im nächsten Beispiel zeigen.

Grafiken

Mit der Einbindung von Grafiken in eine Webseite referenzieren wir die erste Nichttext-Technik in einer Webseite. Schon im ersten HTML- Standard war diese Möglichkeit vorgesehen und sie zählt zu den elementaren Gestaltungsmitteln einer Webseite. Am dritten Tag hatten wir schon den Parameter background des <BODY>-Tags verwendet, über den eine Grafik als gekacheltes Hintergrundbild in eine Webseite eingebunden werden konnte.

Es ist aber auch selbstverständlich möglich, gezielt an verschiedenen Stellen in einer Seite Grafiken einzubinden. Dabei wird wie beim <BODY>-Tag verfahren, nur nutzen wir an der Stelle, wo die Grafik auftauchen soll, einen individuellen Tag. Ansonsten gilt an dieser Stelle das, was beim Einbinden von Grafiken im <BODY>-Tag ausgeführt wurde: Es lassen sich ohne Risiko im WWW nur zwei Bildformate voraussetzen - das GIF und das JPEG- Format. Sie können auch beliebig animierte GIFs verwenden.

Die konkrete Einbindung von Bildern erfolgt über den Tag <IMG> an der Stelle, wo das Bild sichtbar sein soll. Dieser Tag legt über das ergänzende, nichtoptionale Attribut src das referenzierte Bild fest. Die gesamte Steueranweisung hätte dann folgende Struktur:

<IMG src="[URL]">

Ein weiteres Attribut - alt - ist eine sehr sinnvolle Erweiterung, die eigentlich bei keiner Grafikreferenz fehlen sollte. Damit kann in Anführungszeichen eingeschlossen ein Alternativtext angeboten werden, der immer dann erscheint, wenn die Grafik nicht angezeigt werden kann. Aber auch wenn die Grafik angezeigt wird, hat das Attribut eine zusätzliche Wirkung. Es erscheint eine Quickinfo, wenn der Mauszeiger über die Grafik bewegt wird.

Nichtgrafikfähige Browser sind mittlerweile die absolute Ausnahme. Dennoch kann man sich auf die Anzeige von Grafiken nicht verlassen. Man sollte bei der Verwendung von Grafiken (und erst recht weitergehenden Multimedia-Elementen) beachten, dass viele Surfer (vor allem Experten und kostenbewusste Anwender) die automatische Anzeige von Grafiken im Browser deaktiviert haben1. Dies erfolgt zum einen sicher wegen der oft katastrophal niedrigen Übertragungsraten im Internet, aber noch mehr wegen der zunehmenden Werbebanner und sonstiger nichtssagender Grafiken, welche viele Webseiten überfluten und Geld und Zeit des Besuchers kosten, ohne einen Gegenwert zu bieten.

Sie können das automatische Laden von Grafiken im Navigator beispielsweise unter dem Menüpunkt BEARBEITEN - EINSTELLUNGEN... und dort ERWEITERT deaktivieren.

Eine weitere Angabe, die bei Grafiken normalerweise notwendig ist, ist eine Größenangabe. Über zwei Attribute (height für die Höhe und width für die Breite) kann die Größe einer Grafik skaliert werden. Fehlen diese Angaben, werden Grafiken in ihrer »natürlichen« Größe angezeigt. Die Angaben zur Größenbestimmung können einzeln oder zusammen in beliebiger Reihenfolge verwendet werden. Die Angabe von beiden Werten zusammen ist eigentlich nur bei Verzerrungen notwendig. Wenn solche Verzerrungen nicht gewünscht werden, muss man bei Verwendung beider Werte aufpassen - es kann auch zu ungewollten Verzerrungen kommen. Wird nur eine der beiden Angaben gemacht, wird vom Browser der korrespondierende Werte errechnet.

Selbst wenn die Grafik ohne Größenangabe in der richtigen Größe angezeigt wird, sollten Sie dennoch eine der beiden Angaben setzen. Die Anzeige der Grafik wird damit beschleunigt.

Eine Grafik kann bewusst mit einem Rahmen versehen werden bzw. wird automatisch damit gekennzeichnet (etwa bei Grafiken als Hyperlinks). Ein weiterer Parameter innerhalb der Grafikreferenz dient zur Festlegung eines Rahmens in Pixeln - der Parameter border. Diese Angabe kann man ebenfalls dafür nutzen, explizit einen Rahmen zu unterdrücken (border=0).

Beispiel 5:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
Eine Grafik ohne Attribute
<IMG src="smile.pcx">
<BR>
Eine Grafik mit Border
<IMG src="tk.pcx" border=5>
<BR>
Eine Grafik mit Breitenangabe
<IMG src="kürbis.pcx" width=80>
<BR>
Eine Grafik mit Breiten- und Höhenangabe zur Verzerrung
<IMG src="smile2.pcx" width=75 height=15>
<BR>
Eine Grafik mit Alternativtext
<IMG src="inside.pcx" alt="Was so alles inside ist">
<BR>
Eine animierte Grafik
<IMG src="alien.pcx">
<BR>
</BODY>
</HTML>

Abbildung 5.5:  Verschiedene Grafikreferenzen

Speichern Sie den Text bitte unter dem Dateinamen Bilder.htm ab und schauen Sie sich die Datei im Browser an. Experimentieren Sie wie im Beispiel 4 mit verschiedenen Schriftgrößen und beobachten Sie das Verhalten von dem Text in Relation zu den Grafiken. Bewegen Sie den Mauszeiger auf die Grafik, welche mit dem alt-Attribut versehen ist (siehe Abbildung 5.5).

Deaktivieren Sie das automatische Laden von Grafiken und laden Sie die Datei neu (im Navigator unter Bearbeiten, Einstellungen..., Erweitert zu finden.). Um die Wirkung zu sehen, müssen Sie den Browser schließen und neu starten (siehe Abbildung 5.6).

Abbildung 5.6:  So sieht es ohne Grafiken aus.

Textformatierungen

Zu den wichtigsten Gestaltungsmitteln einer Webseite zählt die Formatierung der Textdarstellung. Allerdings muss man darauf hinweisen, dass Textformatierung unter HTML nur wenig mit Textformatierung unter einer Textverarbeitung auf einem PC gemeinsam hat. Textformatierung unter HTML ist als eine Anregung an den Browser zu verstehen, eine in einen Container eingeschlossene Zeichenkette entsprechend sehr weiten Spielräumen zu gestalten. Der Ersteller einer Webseite hat nur begrenzten Einfluss auf die tatsächliche Erscheinung der Seite beim Anwender. Dies ist - um auch das nochmals deutlich zu machen - keine Schwäche von HTML (das sehen nur Leute so, die Webseitendesign einfach nicht verstehen wollen), sondern eine gewaltige Stärke.

Textformatierungen können in HTLM sowohl die Schriftgröße, die Schriftart und den Schriftstil beeinflussen. Prinzipiell unterscheidet man in HTML zwischen so genannten logischen und physischen Befehlen zur Hervorhebung von Text.

Logische Anweisungen

Anweisung

Beschreibung

<cite>

Zitat (meist kursive Darstellung)

<code>

Darstellung von Quellcode (meist nichtproportionale Darstellung)

<dfn>

Definitionen

<em>

Betonung (meist kursive Darstellung)

<kbd>

Darstellung von Benutzereingaben (meist nichtproportionale Darstellung)

<samp>

Darstellung von Beispielen (meist nichtproportionale Darstellung)

<strong>

Allgemeine kräftige Hervorhebung (meist fette Darstellung)

<tt>

Darstellung von TeleType-Schrift (meist nichtproportionale Darstellung)

<var>

Darstellung von Variablennamen (meist kursive Darstellung)

Tabelle 5.4: Logische Anweisungen

Beide Formen der Textformatierung kann man mischen und diverse Formatierungsanweisungen haben ähnliche Effekte.

Beispiel 6:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<cite>Zitat
</cite>
<code>Quellcode
</code>
<dfn>Definition
</dfn>
<em>Betonung
</em>
<kbd>Anwendereingaben
</kbd>
<samp>Beispiel
</samp>
<strong>Fett
</strong>
<tt>TeleType
</tt>
<var>Variablen
</var>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen TextFormatLogisch.htm ab und schauen Sie sich die Datei im Browser an.

Abbildung 5.7:  Verschiedene logische Formatierungen

Physische Anweisungen

Anweisung

Beschreibung

<b>

Fett

<big>

Relativ zur Standardeinstellung größere Schrift

<blockquote>

Zitat, das über mehrere Zeilen gehen kann. Nach einem im Container erhaltenen Zeilenumbruch erfolgt eine Einrückung (Tabulator). Sofern Sie dort mit Absätzen arbeiten, werden die Ebenen der Ausrichtung des Absatzes angepasst. Wenn <blockquote>-Anweisungen ineinander geschachtelt werden, werden die Ebenen weiter eingerückt

<i>

Kursiv

<italic>

Alternative zu dem <i>-Tag

<small>

Relativ zur Standardeinstellung kleinere Schriftgröße

<strike>

Durchgestrichen

<sub>

Tiefgestellt

<sup>

Hochgestellt

<u>

Unterstreichen

Tabelle 5.5: Physische Anweisungen

Beispiel 7:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<b> Fett,
</b>
<big> groß,
</big>
<small> klein,
</small>
<i> kursiv,
</i>
<sub> tiefgestellt,
</sub>
<strike> durchgestrichen,
</strike>
<u> unterstrichen
</u>
und
<sup> hochgestellt
</sup>.
<br>

<BLOCKQUOTE>
Blockwas?
<br>
Blockquote
<br>
Ach so.
</BLOCKQUOTE>

<P>
<BLOCKQUOTE>
Blockwas?
<BLOCKQUOTE>
Blockquote
<BLOCKQUOTE>
Ach so.
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen TextFormatPhysisch.htm ab und schauen Sie sich die Datei im Browser an (siehe Abbildung 5.8).

Abbildung 5.8:  Verschiedene physische Formatierungen

Sonderzeichen

HTML kann normalerweise nicht mit Sonderzeichen direkt umgehen. D.h. sie in einer Webseite direkt anzeigen. Dies sind beispielsweise alle deutschen Umlaute wie ö, ü, ä oder das ß. Ebenso Zeichen, die eine besondere Bedeutung haben wie die Zeichen < und >. Dies liegt daran, dass durch den heterogenen Standard der Rechner und Betriebssysteme im Internet bereits in einer sehr frühen Phase des Internets ein international genormter Zeichensatz zum Austausch von Zeichen vereinbart wurde. Dieser basierte natürlich auf dem amerikanischen Zeichensatz, denn in der Anfangsphase handelte es sich beim Internet um ein rein amerikanisches Netzwerk. Der bis zu der Version HTML 3.2 gültige Zeichensatz wird ISO- 8859-1-Norm genannt. Diese Norm besteht aus 256 Zeichen, wovon die ersten 128 identisch mit dem klassischen ASCII-Zeichensatz sind. Die zweite Hälfte der Zeichen weicht dagegen davon ab und besteht aus etlichen Sonderzeichen und Buchstaben für verschiedene - insbesondere europäische - Sprachen. In HTML 4.0 wurde im Rahmen der so genannten Internationalisierung auf den 16-Bit-großen Unicode umgestellt, der im unteren Byte mit dem bisherigen Code identisch ist. Für den Anwender hat das keine Konsequenzen, wenn nur Zeichen der ersten Hälfte (unter anderem die normalen Buchstaben des Alphabets und die Ziffern von 0 bis 9) wie gewohnt über die Tastatur eingegeben werden. Auch kann man wie bisher mit einem normalen ASCII-Editor arbeiten und wird nicht gezwungen, einen Unicode-Editor zu verwenden. Wenn Sie allerdings in HTML-Dateien Zeichen aus der zweiten Hälfte der bisherigen ISO 8859-1-Tabelle verwenden wollen (dazu gehören die deutschen Umlaute, das Zeichen ß und Zeichen, die Sie auf der Tastatur nicht finden wie das Copyrightzeichen © oder Sonderzeichen wie < >) oder vor allem die weiteren Zeichen der erweiterten ISO/IEC:10646-Norm, müssen Sie diese verschlüsselt eingeben.

Das Verschlüsseln von Sonderzeichen unter HTML nennt man auch Maskieren.

Die Maskierung von Sonderzeichen und landesspezifischen Zeichen erfolgt entweder über eine Folge von Zahlen oder Zeichen, die einem Steuerzeichenpaar - dem &# -folgen und von einem Semikolon abgeschlossen werden oder einem &, gefolgt von einer Abkürzung, die das maskierte Zeichen beschreibt und beendet mit einem Semikolon.

Bei der nummerischen Maskierung teilt das beginnende &# dem Browser mit, dass der nachfolgende Zahlencode in ein konkretes Zeichen umgesetzt werden muss. Das Semikolon beendet die Anweisung. Der eingeschlossene Buchstabencode entspricht der Position des Zeichens in der ISO 8859-1- Tabelle. Er kann dezimal, aber auch hexadezimal angegeben werden. Dabei müssen Groß- und Kleinbuchstaben unterschiedlich maskiert werden.

Die etwas komfortablere Form der Maskierung über Abkürzungen ist recht sprechend. Für deutsche Umlaute werden Sie den Grundbuchstaben finden, gefolgt von den Zeichen uml. Etwa Uuml für Ü oder auml für ä. Andere Abkürzungen sind sprechend genau das, was sie kodieren sollen. Etwa sz gefolgt von lig, was für ß steht. Bei anderen Zeichen sind es die ersten Buchstaben der ausgeschriebenen englischen Form, etwa lt, was für less then (kleiner als) steht und das Zeichen < erzeugt. Im Anhang finden Sie eine Tabelle mit den wichtigsten Maskierungen.

Wenn Sie also Text unter HTML international genormt ausdrücken wollen, müssen Sie sämtliche vorkommenden Sonderzeichen maskieren. Wir werden im Rahmen der Beispiele in dem Buch aber darauf verzichten, damit der Quelltext lesbarer bleibt.

Auch wenn man immer wieder Seiten findet, die solche Sonderzeichen nicht maskieren und diese Sonderzeichen dennoch korrekt angezeigt werden, hängt es nur daran, dass zufällig alle Konfigurationen Ihrer Plattform so eingestellt sind, dass es funktioniert. Auf vielen anderen Plattformen im Internet kann es aber schiefgehen. Auch die von einigen Tools (z.B. Frontpage) statt einer Maskierung verwendete Metainformation <meta http-equiv= "Content-Type" content="text/html; charset=windows-1252"> reicht definitiv nicht aus. Deshalb maskieren bessere HTML-Tools diese Zeichen auf jeden Fall, oft automatisch oder per expliziten Befehl.

Schrift-Anweisung

Neben den Textformatierungsanweisungen gibt es in HTML die <FONT>- Anweisung, mit der Schrift noch weitergehend beeinflusst werden kann. Dies betrifft die Schriftgröße, die Schriftart und die Schriftfarbe. Der Tag macht nur mit einem oder mehreren der nachfolgenden Attribute Sinn.

Attribut

Beschreibung

size=[Größe]

Festlegen der relativen Schriftgröße mit einem Wert zwischen 1 und 7. Die Werte sind als relative Angabe zu der Default-Schriftgröße zu verstehen. Die normale Schriftgröße entspricht 3. Die Werte größer als 3 (4 bis 7) stehen für größere Schriftgrade, die Werte 1 und 2 für kleinere Schriften. Daneben geht eine Veränderung der Textgröße um einen gewissen Wert über +(Zahl) beziehungsweise -(Zahl).

color=[Farbe]

Angabe der Schriftfarbe. Dabei kann für Farbe eine der üblichen Farbangaben gesetzt werden, die wir beim <BODY>-Tag am dritten Tag behandelt haben.

face=[Schriftart]

Explizite Angabe der verwendeten Schriftart. Dabei wird der jeweilige Name der Schriftart verwendet. Die Verwendung dieses Attributs ist ziemlich gefährlich, denn einmal sind die Namen der Schriftarten nicht immer identisch zu den unter Windows verwendeten. Zum anderen kann man nie voraussetzen, dass eine geforderte Schriftart auf allen Besucherplattformen vorhanden ist.

Tabelle 5.6: Schriftspezifizierungen

Gerade bei der <FONT>-Anweisung zeigen die WYSIWYG-Editoren eine ihrer größten Schwächen. Kinderleicht mit einem Menü die Schriftgröße auswählen simuliert eine absolute Kontrolle im Erstellungsmodus, die einfach nicht zu erreichen ist. Unerfahrene Anwender werden dies nicht erkennen und schlechte Webseiten erstellen.

Beispiel 8:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<P>Text in Standardschrift
</P>
<P>
<FONT size="6">Text größer
</FONT>
</P>
<P>
<FONT size="1">Text kleiner
</FONT>
</P>
<P>
<FONT face="Courier">Text in anderer Schrift
</FONT>
</P>
<P>
<FONT face="Arial">Text in einer noch anderen Schrift
</FONT>
</P>
<P>
<FONT color="#FF0000" face="Lucida Console">Text in einer noch anderen Schrift und rot
</FONT>
</P>
<P>
<FONT color="#0000FF" face="Bookman Old Style">Text in einer noch anderen Schrift, blau und groß
</FONT>
</P>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Font.htm ab und schauen Sie sich die Datei im Browser an.

Abbildung 5.9:  Verschiedene FONT-Varianten

Hyperlinks

Hyperlinks (auch Verweise oder einfach nur Links genannt) sind das zentrale Element des WWW. Nur darüber eröffnen Sie Besuchern einer Seite die Möglichkeit, mit einem einfachen Mausklick zu einem dahinter liegenden URL zu verzweigen. Ein Verweis kann aber auch dazu genutzt werden, das Laden eines Programms auf den lokalen Rechner auszulösen (das haben wir gestern beim Inline-Aufruf von JavaScripten gesehen), einen FTP-Download oder den Aufruf eines Email-Programms auszulösen, in dessen Adressfeld dann eine Adresse vorbelegt ist. Auch Verweise innerhalb einer - meist größeren - Seite sind ein sinnvoller Einsatzzweck.

Optisch wird ein Verweis auf einer Webseite meist als unterstrichener und/ oder farbig von normalem Text abgegrenzter Text dargestellt. Ein Link kann auch so gestaltet werden, dass die optische Unterscheidung gegenüber normalem Text unterdrückt wird (eine in letzter Zeit oft zu findende Unart, denn damit wird aus fraglichen ästhetischen Aspekten die Navigation in einer Seite unnötig verkompliziert). Aber auch Grafiken und andere Elemente können als Links fungieren. Allen Links ist jedoch gemein, dass der Anwender einen Link an der Veränderung des Mauszeigers erkennt. Wenn der Mauszeiger auf einen Verweis bewegt wird, verändert er sich zu einer Hand mit ausgestrecktem Zeigefinger. Falls die Statusanzeige des Browsers aktiviert ist und dort keine anderen Informationen angezeigt werden (etwa über ein JavaScript), wird dort in der Regel das Ziel eines Links angezeigt.

Jeder Link basiert auf dem Tag <A>, der einen Container einleitet. Es ist aber offensichtlich, dass der Tag um die Angabe, wohin der Link führen soll, erweitert werden muss.

Allgemeine Verweise

Die Grundstruktur eines Verweises sieht so aus:

<A href="[URL]">[Anzeige in Webseite]</A>

Das, was im Container eingeschlossen ist, wird der Besucher der Webseite sehen. Also einen beschreibenden Text, eine Grafik usw.

Der URL kann im Prinzip jedes passende Protokoll angeben. Damit kann über einen Hyperlink im Rahmen des WWW Kontakt zu einem beliebigen Internet-Dienst aufgebaut werden. Die wichtigsten Fälle sind jedoch folgende:

Wir wollen nun die verschiedenen Typen von Links in einem Beispiel durchspielen. Beachten Sie, dass sie für einige Links online sein sollten.

Beispiel 9:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
Zugriff auf lokalen Rechner:
<A href="file://C:">
Zum Festplattenlaufwerk C:
</A>
<BR>
HTTP-Link mit Grafik:
<A href="http://www.rjs.de/mainframe.htm">
  <IMG src="inside.pcx" width=120>
</A>
<BR>
FTP-Link:
<A href="ftp://ftp.microsoft.com/ls-lr.zip">
Keine Ahnung, ob es den Link noch gibt
</A>
<BR>
Download mit HTTP:
<A href="http://members.aol.com/RjSteyer/history.mp3">
Down, down, down
</A>
<BR>
Mail-Link:
<A href="mailto:hansdampf@aol.com">
Mehl mich
</A>
<BR>
Relativer HTTP-Link mit Grafik und unterdrücktem Border:
<A href="Trennlinien.htm">
<IMG src="kürbis.pcx" width=80 border=0>
</A>
<BR>
Relativer HTTP-Link auf eine Datei im Parallelverzeichnis Tag3:
<A href="../Tag3/background.html">
Zurück zum Tag 3
</A>
<BR>
</BODY>
</HTML>

Abbildung 5.10:  So sieht der Navigator beim Zugriff über file auf C: aus

Abbildung 5.11:  Das ist in der Tat noch der Internet Explorer - beim Zugriff über file auf C:

Abbildung 5.12:  Der Mail-Client wird mit vorbelegter Adresse gestartet

Abbildung 5.13:  Der HTTP-Download läuft

Abbildung 5.14:  Auch mit HTTP funktioniert ein Download

Abbildung 5.15:  Der FTP-Download wird gestartet

Abbildung 5.16:  Die Seite im  Internet Explorer

Speichern Sie den Text bitte unter dem Dateinamen Links1.htm ab und schauen Sie sich die Datei im Browser an. Testen Sie die Links. Für die Online-Links benötigen Sie Internet-Kontakt, die relativen und lokalen Links funktionieren offline. Die referenzierten Dateien müssen aber selbstverständlich vorhanden sein. (siehe Abbildungen 5.10-5.16).

Verweise innerhalb einer Seite

Wenn verschiedene Verweise innerhalb einer (meist recht großen) Seite gesetzt werden, erlaubt dies einem Besucher ein schnelles Orientieren und Aufsuchen von für ihn interessanten Themen ohne langwieriges Scrollen. Für solche Verweise innerhalb einer Seite müssen zwei Dinge zur Verfügung stehen:

Die Anweisung für den Anker baut wie der Link selbst auf dem Tag <A>- auf. Der Tag wird aber mit dem Attribut name="[Name]" erweitert, das den Ankernamen angibt.

Gesetzt wird der Anker an der Stelle, wohin der Sprung erfolgen soll. Ankernamen sollten nicht zu lang sein und dürfen keine Leerzeichen enthalten. Deutsche Umlaute und Sonderzeichen (bis auf den Unterstrich _) sind verboten. Der Name des Ankers wird in Anführungszeichen gesetzt. Ein Anker-Container kann jeden beliebigen Inhalt umschließen oder auch leer sein. Das ist nicht entscheidend, da ein Anker keinerlei optische Auswirkung in der Webseite hat. Insbesondere wird ein Anker normalerweise nicht durch zusätzlichen Text gekennzeichnet, sondern markiert nur bereits vorhandenen Inhalt. Umschließt ein Anker-Container ausdrücklich einen Inhalt, wird bei einem Sprung zum Anker der Anfang des Inhaltes links oben im Browserfenster dargestellt, ansonsten der direkt dem Ende-Tag folgende Inhalt.

Der Link zu dem Anker ist nahezu identisch zu den bisherigen Varianten. Es muss nur noch der Ankername - über ein # abgetrennt - dem normalen URL nachgestellt werden. Für den Fall einer Ankerreferenz innerhalb einer Seite besteht die gesamte Referenz sogar nur aus dem Zeichen # und dem Ankernamen. Im Gegensatz zu Ankernamen, die eindeutig sein müssen und nur einmal in einer Seite vorkommen dürfen, können Links zu einem Anker beliebig oft innerhalb einer Seite auftauchen. Beispielsweise der Sprung zum Ende der Webseite von verschiedenen Stellen aus.

Wenn Sie einen Anker auf einem fremden Rechner oder auch nur in einer anderen Datei in Ihrem Projekt referenzieren wollen, haben Sie natürlich das Problem, dass Sie die Struktur der dortigen Webseite kennen müssen. Insbesondere sind Sie damit abhängig davon, dass in der anderen Seite Anker nicht gelöscht oder umstrukturiert werden. Deshalb findet man selten Ankerverweise auf fremde Seiten. Für den Fall, dass ein Ankername bei einem Link nicht vorhanden ist, wird an den Anfang einer Seite verzweigt.

Beispiel 10:

Erstellen Sie zuerst eine Datei, in der ein Anker gesetzt ist und den wir dann aus einer anderen Datei direkt referenzieren wollen. Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
Vor der ersten Grafik:
<P>
<IMG src="bild3.jpg" width=600>
<P>
<A name="danach">Nach der Grafik.</A>
<BR>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen nureinanker.htm ab.

Erstellen Sie nun die Datei, in der sowohl einige Anker gesetzt werden, aber auch die Links zu den Ankern und auch zu dem Anker in der Datei nureinanker.htm. Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<BODY>
<A name="eins"></A>
Vor der ersten Grafik:
<BR>
<A href="#drei">Spring 3</A>
<BR>
<A href="#zwei">Spring 2</A>
<P>
<IMG src="nodos.pcx" width=200>
<P>
<A name="zwei"></A>
Nach der ersten Grafik, aber vor der zweiten Grafik.
<BR>
<A href="#eins">Spring 1</A>
<BR>
<A href="#drei">Spring 3</A>
<BR>
<IMG src="bild1.jpg" width=400>
<BR>
Nach der zweiten Grafik, aber vor der dritten Grafik.
<BR>
<A name="drei"><IMG src="bild2.jpg" width=400></A>
<BR>
<A href="#eins">Spring 1</A>
<BR>
<A href="#zwei">Spring 2</A>
<BR>
<A href="nureinanker.htm#danach">
Ein Ankerverweis auf in eine externe Datei</A>
<BR>
<A href="nureinanker.htm">
Der Verweis auf die gleiche Datei ohne Anker</A>
</BODY>
</HTML>

Abbildung 5.17:  Die Einsprungposition in der externen Datei

Abbildung 5.18:  Ankerposition 3

Abbildung 5.19:  Ankerposition 2

Abbildung 5.20:  Der Anker am Anfang der Datei

Speichern Sie die Datei unter Links2.htm und schauen Sie sich die Datei im Browser an. Testen Sie die Links. Das Browserfenster sollte ausreichend verkleinert werden, damit die Sprünge auch sichtbar werden. Beachten Sie am Ende die Referenzen auf die Datei nureinanker.htm.

Zusammenfassung

Sie haben am heutigen Tag grundlegende Layoutanweisungen von HTML kennen gelernt. Insbesondere wurde erneut darauf verwiesen, dass unter HTML der Ersteller einer Webseite das Layout beim späteren Betrachter nicht bis in das letzte Detail kontrollieren kann und auch nicht muss. Wichtige Anweisungen zur Gestaltung, die Sie heute kennen gelernt haben, waren

Neben diesen integrierten HTML-Gestaltungsmöglichkeiten wurden externe Referenzen in Form von Grafikeinbindung über den <IMG>-Tag und das absolut grundlegende Thema der Hyperlinks besprochen.

Fragen und Antworten

Frage:
Was ist mit der Verwendung von Java-Applets, allgemeinen Multimedia-Objekten, Formularen, Frames, Tabellen und anderen komplexeren Elementen unter HTML?

Antwort:
Darauf kommen wir später zurück. Insbesondere in direkter Verbindung mit JavaScript.

Frage:
Es wird im Buch immer wieder darauf hingewiesen, dass man unter HTML bei vielen Vorgängen keine absolute Kontrolle hat. Wie kommt es, dass es dennoch viele Seiten gibt, die auf fast allen Plattformen gleich aussehen?

Antwort:
Entweder sind diese Seiten nur mit einfachen HTML-Befehlen aufgebaut, die wenig oder gar keinen Interpretationsspielraum lassen und zudem so ideal gestaltet, dass weder zu viele Farben noch eine besondere Auflösung vorausgesetzt werden. Oder es wird auf ergänzende Techniken wie JavaScript und Style Sheets zurückgegriffen. Dann aber muss meist ein erheblicher Aufwand getrieben werden, um jede Plattform individuell zu bedienen. Grundsätzlich ist es aber fraglich, das Designempfinden von Medien wie Papier oder einer wenig heterogenen Bildschirmausgabe unter Windows auf das Internet zwingen zu wollen. Gute Designer spielen mit den optischen Unwägbarkeiten des Webs und freuen sich, dass man nicht alles im Web festlegen muss.

Frage:
Wieso suggerieren viele HTML-Editoren, ein Ersteller einer Webseite könne Schrift absolut festlegen?

Antwort:
Die Erstellung von Webseiten soll so einfach wie möglich werden. Viele Tools und auch Webspeicherplatzanbieter locken mit dem Versprechen, ein Anwender brauche kein HTML zu können und könne dennoch eine Homepage erstellen. Sowohl hinsichtlich der Bedienung des Programms als auch des Verständnisses des Webs soll vom Anwender nicht viel gefordert werden. Das macht Mühe und reduziert die Kundenanzahl.

Workshop

Wir haben an dem heutigen Tag viel Praxis in Form von Beispielen gehabt. Der Workshop baut auf diesen Beispielen auf. Vergegenwärtigen Sie sich nochmals die entsprechenden Beispiele und experimentieren Sie damit. Zusätzlich sollten Sie ins Internet gehen und sich dort verschiedene Webseiten ansehen. Analysieren Sie deren Quelltext nach Elementen, die Sie jetzt bereits kennen. Wie Sie den Quelltext ansehen können, haben wir im Workshop an Tag 4 besprochen.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Was bedeutet der Tag <H3>?
  2. Wie erzeugt man eine Trennlinie?
  3. Mit welchem Tag wird eine Grafik referenziert?
  4. Wie verhindert man einen Rahmen bei einer als Hyperlink verwendeten Grafik?
  5. Was bedeutet der Tag <I>?
  6. Was bedeutet der Tag <B>?
  7. Wie erzeugt man eine Absatzschaltung?
  8. Was ist ein Anker?
  9. Wie kann man einen Absatz rechts ausrichten?


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


1

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH