vorheriges KapitelInhaltsverzeichnisIndexInfoseitenΣchstes Kapitel


Zeichen-Gestaltung

Vorformatierter Text

Horizontale Linien

Attribute der <HR>-Kennung

Zeilenumbrⁿche

Adressen

Zitate

Sonderzeichen

Textausrichtung

Schriftarten und -grade

Das gefⁿrchtete <BLINK>

<NOBR> und <WBR>

Zusammenfassung

Fragen und Antworten



Tag 3


Kapitel 5 - Noch mehr Text-formatieren mit HTML

Gestern haben Sie die Grundlagen von HTML einschlie▀lich einiger grundlegender Seitenelemente und Verknⁿpfungen kennengelernt. Mit diesem Hintergrund sind Sie nun bereit, mehr darⁿber zu erfahren, wozu HTML im Hinblick auf Textformatierung und -Layout in der Lage ist. Dieses Kapitel beschreibt die meisten der noch verbleibenden HTML-Kennungen, die Sie kennen mⁿssen, um Seiten aufbauen zu k÷nnen, also sowohl die Standard-HTML-2.0- und -3.2-Kennungen als auch die HTML-Erweiterungen von verschiedenen Browsern. Heute lernen Sie


Darⁿber hinaus werden Sie die Unterschiede zwischen Standard-HTML und HTML-Erweiterungen kennenlernen und auch, welche Kennungen Sie am besten wann in Ihren Seiten einsetzen. Am Ende dieses Kapitels werden Sie eine komplette Webseite schreiben, die viele der in diesem Kapitel vorgestellten Tags enthΣlt und auch auf die vorherigen vier Kapitel zurⁿckgreift.


Dieses Kapitel ist ziemlich lang und behandelt verschiedene Tags und Optionen, und es mag ein wenig ⁿberwΣltigend wirken. Doch kⁿmmern Sie sich nicht darum, alles gleich behalten zu wollen; verschaffen Sie sich einfach einen Eindruck davon, welche Arten der Formatierung Sie mit HTML schaffen k÷nnen, die spezifischen Tags dafⁿr k÷nnen Sie sich dann spΣter zusammensuchen. Im nΣchsten Kapitel werden die Dinge wieder ein wenig ruhiger, und wir werden uns die Werkzeuge und Programme anschauen, mit deren Hilfe Sie HTML schreiben k÷nnen, so da▀ Sie nicht alles im Kopf behalten mⁿssen, wΣhrend Sie noch dabei sind, zu lernen, wie man Seiten zusammenstellt.



Zeichen-Gestaltung

Wenn Sie HTML-Kennungen fⁿr AbsΣtze, ▄berschriften und Listen verwenden, so beeinflussen diese Kennungen den Text als Ganzes, sei es durch Wechseln des Schrifttyps, VerΣnderung der AbstΣnde ⁿber und unter der Zeile oder durch Hinzufⁿgen zusΣtzlicher Zeichen (im Falle der Listen). Sogenannte Character Styles (Zeichen-Stile) sind Kennungen, die W÷rter oder Zeichen innerhalb anderer HTML-Einheiten beeinflussen und die Erscheinungsweise des Textes so verΣndern, da▀ er sich irgendwie vom restlichen Text abhebt - beispielsweise indem er fett oder unterstrichen dargestellt wird.


Um die Erscheinungsweise einer Folge von Zeichen innerhalb eines Textes zu verΣndern, k÷nnen Sie eine von zwei Kennungsarten benutzen: entweder logische Stil-Tags oder physische Stil-Tags.



Logische Stile

Logische Stil-Tags bestimmen, wie der jeweils hervorgehobene Text verwendet, nicht aber wie er dargestellt werden soll. Das ist vergleichbar mit den gew÷hnlichen Element-Tags fⁿr AbsΣtze oder ▄berschriften; auch sie geben nicht vor, wie der Text zu formatieren, sondern wie er in dem Dokument zu benutzen ist. Logische Stil-Tags bezeichnen einen Text als Definition oder Code oder ein hervorgehobenes Wort.


Logische Stil-Tags bestimmen die Art, wie der Text verwendet wird (Hervorhebung, Zitat, Definition).

Wenn Sie logische Stil-Tags verwenden, ist es die Sache des Browser, zu entscheiden, auf welche Weise der Text innerhalb der Kennung dargestellt wird, sei es in fetter Schrift, kursiv oder durch eine andere VerΣnderung der Erscheinungsweise. Sie k÷nnen nicht garantieren, da▀ mit Hilfe dieser Tags hervorgehobener Text immer fett erscheinen oder immer kursiv dargestellt wird (und Sie sollten sich daher auch nicht darauf verlassen).


HTML 4.0 wird das Modell der physikalischen und logischen Stile von HTML durch die Unterstⁿtzung von Stilvorlagen erweitern. Mit Stilvorlagen werden Autoren in der Lage sein, das Erscheinungsbild (darunter die Schriftfamilie, den Schriftstil und die Schriftgr÷▀e) von einzelnen Elementen oder auch ganzen Elementeklassen (wie z.B. allen ungeordneten Listen) in einem Dokument genauer zu definieren. Stilvorlagen werden am zweiten Bonustag behandelt, wenn wir dynamisches HTML besprechen.

Jede Zeichenstil-Kennung wird sowohl eingeleitet als auch abgeschlossen und beeinflu▀t den Text zwischen den beiden Kennungen. Standard-HTML stellt acht logische Stil-Kennungen zur Verfⁿgung:


<P>We'd all get along much better if you'd stop being so <EM>silly.</EM>


<P>You <STRONG>must</STRONG> open the can before drinking</P>


<P><CODE>#include "trans.h"</CODE></P>


<P>The URL for that page is <SAMP>http://www.cern.ch/</SAMP></P>


<P>Type the following command: <KBD>find . -name "prune" -print</KBD></P>


<P><CODE>chown </CODE><VAR>your_name the_file</VAR></P>


<P>Styles that are named on how they are used are called <DFN>character styles</DFN></P>


<P>Eggplant has been known to cause extreme nausea in many unsuspecting people<CITE> (Lemay, 1994)</CITE></P>


Alle hier aufgefⁿhrten Kennungen sind Teil der offiziellen HTML-2.0-Spezifikationen, mit Ausnahme von <DFN>. Letzteres geh÷rt zu HTML 3.2, wird aber im allgemeinen von den meisten Browsern unterstⁿtzt, so da▀ ich es hier mit eingeschlossen habe.

Sie haben sich alles gemerkt? Gut! Es gibt ein Quiz am Ende des Kapitels. Der folgende kurze Code liefert fⁿr jedes Stil-Tag ein kurzes Beispiel, und die Abbildungen 5.1 und 5.2 illustrieren, wie diese acht Tags von Netscape und Lynx dargestellt werden.


Icon

<P>We'd all get along much better if you'd stop being so <EM>silly.</EM>
<P>You <STRONG>must</STRONG> open the can before drinking</P>
<P><CODE>#include "trans.h"</CODE></P>
<P>Type the following command: <KBD>find . -name "prune" -print
</KBD></P>
<P><CODE>chown </CODE><VAR>your_name the_file</VAR></P>
<P>The URL for that page is <SAMP>http://www.cern.ch/</SAMP></P>
<P>Styles that are named on how they are used are called <DFN>character
styles</DFN></P>
<P>Eggplant has been known to cause extreme nausea in many unsuspecting
people<CITE> (Lemay, 1994)</CITE></P>

 

Icon

siehe Abbildung

Abbildung 5.1:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 5.2:
Die Darstellung in Lynx


Physische Stile

ZusΣtzlich zu den Stil-Tags aus dem vorherigen Abschnitt gibt es noch einige Tags, welche die aktuelle Darstellung des Textes verΣndern - ihn fett erscheinen lassen oder ihn kursiv oder mit fester Schriftweite (monospaced) anzeigen.

 

Physische Stil-Tags beschreiben genau, wie der Text formatiert werden soll (z.B. fett gedruckt oder unterstrichen).

Wie bei den Kennungen der Zeichenstile hat hier jedes Tag sowohl eine einleitende als auch eine abschlie▀ende Kennung. Standard-HTML 2.0 kennt drei physische Stil-Tags:


HTML 3.2 besitzt auch noch weitere Stil-Tags, unter anderem:


Wenn Sie sich dafⁿr entscheiden, die physischen Stil-Tags - speziell die neueren HTML-3.2-Tags - zu benutzen, seien Sie davor gewarnt, da▀ ein Browser, der mit einem dieser Stile nicht umgehen kann, ihn m÷glicherweise durch einen anderen ersetzt oder diesen gΣnzlich ignoriert. Obwohl die meisten der neusten Browser wie Netscape Communicator und Internet Explorer 4 mit diesen Tags glⁿcklich sind, gibt es genⁿgend Benutzer, die Σltere Versionen dieser Browser verwenden, die diese HTML-3.2-Tags in unterschiedlichem Ma▀ unterstⁿtzen. Dies gipfelt bei textorientierten Browsern wie z.B. Lynx, in denen einige dieser Tags nicht visuell umgesetzt werden k÷nnen. In diesen FΣllen wird es n÷tig, die Idee auf Umwegen zu realisieren.


Sie k÷nnen Zeichen-Tags miteinander kombinieren - beispielsweise sowohl fett als auch kursiv fⁿr einige Zeichen benutzen - wie hier:


<B><I>Text that is both bold and italic</I></B>


Gleichwohl ist das Ergebnis auf dem Bildschirm wie bei allen HTML-Tags vom Browser abhΣngig. Ihr Text wird eventuell nicht kursiv und fett dargestellt, jedoch erscheint er vielleicht zumindest in einer dieser Darstellungsweisen.


Das folgende Beispiel zeigt einige der physischen Stil-Tags und wie sie in Netscape (Abbildung 5.3) und Lynx (Abbildung 5.4) erscheinen:


Icon

<P>In Dante's <I>Inferno</I>, malaboge was the eighth circle of hell, and held the malicious and fraudulent.</P>
<P>All entries must be received by <B>September 26, 1996</B>.</P>
<P>Type <TT>lpr -Pbirch myfile.txt</TT> to print that file.</P>
<P>Sign your name in the spot marked <U>Sign Here</U>:</P>
<P>People who wear orange shirts and plaid pants <S>have no taste</S> are fashion-challenged.</P>
<P>RCP floor mats give you <BIG>BIG</BIG> savings over the competition!</P>
<P>Then, from the corner of the room, he heard a <SMALL>tiny voice</SMALL>.</P>
<P>In heavy trading today. Consolidated Orange Trucking rose <SUP>1</SUP>/<SUB>4</SUB> points on volume of 1,457,900 shares.</P>


Icon

siehe Abbildung

Abbildung 5.3:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 5.4:
Die Darstellung in Lynx


Vorformatierter Text

Die meiste Zeit wird der Text in einer HTML-Datei formatiert, ausgehend von den HTML-Kennungen, die verwendet wurden, um den Text auszuzeichnen. Wie ich schon in Kapitel 3, ╗Die Grundlagen½, bemerkt habe, werden alle zusΣtzlichen LeerrΣume (╗white space½: Leerzeichen, Tabulatoren, Zeilenumbrⁿche), die Sie in den Text schreiben, vom Browser ignoriert.


Die einzige Ausnahme von dieser Regel ist die <PRE>-Kennung fⁿr vorformatierten (preformated) Text. Jeder Leerraum (white space), den Sie im Text schreiben, der von <PRE> und </PRE> eingeschlossen ist, bleibt in der endgⁿltigen Ausgabe enthalten, so da▀ Sie den Text auf eben diese Weise formatieren k÷nnen, wie Sie ihn aussehen lassen m÷chten, und er wird auch in genau dieser Formatierung dargestellt.


Ein Kniff ist dabei, da▀ vorformatierter Text auch mit fester Schriftweite (mono-spaced), wie es auch bei Courier der Fall ist, dargestellt wird. Vorformatierter Text eignet sich ausgezeichnet fⁿr Code-Beispiele, in denen Sie die Zeilen passend einrⁿcken und formatieren wollen. Da es Ihnen auch m÷glich ist, den Text durch eingefⁿgte Leerzeichen auszurichten, k÷nnen Sie die <PRE>-Kennung auch fⁿr Tabellen verwenden, obwohl der Umstand, da▀ diese Tabellen mit einer festen Schrift (monospaced) dargestellt werden, sie nicht eben ideal erscheinen lassen (Sie werden in Kapitel 13, ╗Tabellen½, die Konstruktion richtiger Tabellen erlernen). Hier ist ein Beispiel fⁿr eine mit <PRE> erzeugte Tabelle. (Abbildung 5.5 zeigt, wie sie in Netscape aussieht.)


Icon

<PRE>
Diameter Distance Time to Time to
(miles) from Sun Orbit Rotate
(millions
of miles)
-------------------------------------------------------------------------
Mercury 3100 36 88 days 59 days
Venus 7700 67 225 days 244 days
Earth 7920 93 365 days 24 hrs
Mars 4200 141 687 days 24 hrs 24 mins
Jupiter 88640 483 11.9 years 9 hrs 50 mins
Saturn 74500 886 29.5 years 10 hrs 39 mins
Uranus 32000 1782 84 years 23 hrs
Neptune 31000 2793 165 days 15 hrs 48 mins
Pluto 1500 3670 248 years 6 days 7 hrs
</PRE>


Icon

siehe Abbildung

Abbildung 5.5:
Eine Tabelle, die mit <pre> in Netscape dargestellt wurde.

Wenn Sie Text fⁿr die <PRE>-Kennung schreiben, k÷nnen Sie Verknⁿpfungen und verschiedene Schriftarten verwenden, aber keine Element-Kennungen wie fⁿr ▄berschriften oder AbsΣtze. Umbrechen Sie Ihre Zeilen mit einem ╗Return½, und versuchen Sie, Ihre Zeilen 60 Zeichen oder kⁿrzerzuhalten. (Manche Browser stellen nur eine begrenzte Anzahl von Zeichen pro Zeile dar, und da Browser vorformatierten Text nicht neu formatieren, um ihn in diesen Raum einzupassen, sollten Sie darauf achten, innerhalb dieser Grenzen zu bleiben, damit Ihre Leser die Ansicht nicht hinausverschieben mⁿssen.)


Passen Sie auf, wenn Sie Tabulator-Zeichen innerhalb des vorformatierten Textes benutzen. Die verschiedenen Browser rⁿcken fⁿr jedes Tabulatorzeichen eine unterschiedliche Anzahl von Leerzeichen weiter. Ein Browser rⁿckt vielleicht vier Stellen fⁿr eine Tabulatormarke vor, wΣhrend ein anderer acht weiterrⁿckt. Wenn Ihr vorformatierter Text sich an einigen Stellen auf Tabulatormarken verlΣ▀t, sollten Sie diese vielleicht besser durch Leerzeichen ersetzen.


Das <PRE>-Tag eignet sich auch hervorragend dafⁿr, Dateien, die zuvor in einer reinen Textform vorlagen, wie etwa E-Mail oder ╗Usenet News½, schnell und einfach nach HTML zu konvertieren. Umgeben Sie einfach den gesamten Inhalt der Nachricht mit der <PRE>-Kennung, so erhalten Sie ╗fertigen½ HTML-Code:


<PRE>
To: lemay@lne.com
From:
jokes@lne.com
Subject:
Tales of the Move From Hell, pt. 1
Date: Fri, 26 Aug 1994 14:13:38 +0800

I spent the day on the phone today with the entire household services division of northern California, turning off services, turning on services, transferring services and other such fun things you have to do when you move.
It used to be you just called these people and got put on hold for and interminable amount of time, maybe with some nice music, an then you got a customer representative who was surly and hard of hearing, but with some work you could actually get your phone turned off.
</PRE>

Das folgende Beispiel zeigt eine einfache ASCII-Kuh und deren Darstellung in Netscape (Abbildung 5.6) und Lynx (Abbildung 5.7):

Icon

<PRE>
( )
"Moo!" (oo)
\/-------\
|| | \
|| | *
||---W-||
|| ||
</PRE>


Icon

siehe Abbildung

Abbildung 5.6:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 5.7:
Die Darstellung in Lynx


Horizontale Linien

Die <HR>-Kennung, ohne abschlie▀ende Kennung und ohne zugeh÷rigen Text, erzeugt eine horizontale Linie auf der Seite. Solche Linien eignen sich ausgezeichnet fⁿr die visuelle Abgrenzung von Abschnitten auf der Webseite - insbesondere vor ▄berschriften oder um den Haupttext von einer Liste abzugrenzen. Abbildung 5.8 illustriert den effektiven Nutzen von solchen Linien.


Icon

siehe Abbildung

Abbildung 5.8:
Eine horizontale Trennlinie

Das folgende Ein- und Ausgabebeispiel zeigt eine horizontale Trennlinie und ihre Darstellung in Netscape (Abbildung 5.9) und Lynx (Abbildung 5.10):


Icon

<HR>
<H2>To Do on Friday</H2>
<UL>
<LI>Do laundry
<LI>Send Fedex with pictures
<LI>Have lunch with Mollie
<LI>Read Email
<LI>Set up Ethernet
</UL>
<HR>


Icon

siehe Abbildung

Abbildung 5.9:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 5.10:
Die Darstellung in Lynx


Attribute der <HR>-Kennung

In HTML 2.0 wird die <HR>-Kennung genau so, wie Sie sie sehen, verwendet, also ohne abschlie▀ende Kennung oder Attribute. Netscape fⁿhrte einige Attribute fⁿr das <HR>-Tag ein, die von einigen anderen Browsern unterstⁿtzt werden. Diese geben Ihnen mehr Kontrolle ⁿber die Darstellung der Linie, die ⁿber <HR> gezogen wird. Diese Attribute haben Eingang in die Spezifikation von HTML 3.2 gefunden.


Das SIZE-(Gr÷▀en-)Attribut zeigt die Dicke der Linie in Pixel an. Die Grundeinstellung ist 2, was gleichzeitig auch die kleinste erlaubte Dicke der Linie ist. Abbildung 5.11 zeigt einige Beispiel-Trennlinien und deren Dicke.


Das WIDTH-(Breiten-)Attribut bestimmt die horizontale Breite der Trennlinie. Sie k÷nnen entweder die genaue Breite in Pixel angeben oder den Wert als Prozentsatz der Bildschirmbreite festlegen (z.B. 30 oder 50 Prozent), so da▀ sich die dargestellte absolute Breite Σndert, wenn Sie die Fensterbreite verΣndern. Abbildung 5.12 zeigt einige Beispiele von Trennlinien-Breiten.


siehe Abbildung

Abbildung 5.11:
Beispiele von unterschiedlicher Dicke der Trennlinie.

siehe Abbildung

Abbildung 5.12:
Beispiele von unterschiedlichen Tennlinien-Breiten.

Wenn Sie eine Breite festlegen, die kleiner ist als die Breite des Bildschirms ist, dann k÷nnen Sie die Ausrichtung der Trennlinie auch durch das ALIGN-Attribut festlegen, und zwar haben Sie die Wahl zwischen linksbⁿndig (ALIGN=LEFT), rechtsbⁿndig (ALIGN=RIGHT) oder zentriert (ALIGN=CENTER). Die Voreinstellung fⁿr Trennlinien ist ╗zentriert½.


Ein beliebter Trick von Web-Designern, die diese Erweiterungen benutzen, ist, mit verschiedenen kleineren Trennlinien Muster zu erzeugen, wie in Abbildung 5.13 gezeigt wird.


Dies ist ein Beispiel dafⁿr, wie schlimm ein neueres HTML-Merkmal in anderen Browsern, die es nicht unterstⁿtzen, aussehen kann. Wenn Sie sich dieses Beispiel in Browsern ansehen, die das SIZE-Attribut nicht unterstⁿtzen, zieht sich jede der kleineren Trennlinien nun ⁿber die gesamte Bildschirmbreite hin. Wenn Sie schon solche Trennlinien-Muster einsetzen wollen, sollten Sie erwΣgen, kleine Bilder an ihrer Stelle einzusetzen (diese werden nΣmlich in anderen Browsern problemlos dargestellt).


siehe Abbildung

Abbildung 5.13:
Beispiel eines Musters, das durch verschiedene kleinere Trennlinien erzeugt wird.

Schlie▀lich k÷nnen Sie das NOSHADE-(ohne Schattierung-)Attribut einsetzen, welches den Browser veranla▀t, die Trennlinie als einfache schwarze Linie ohne dreidimensionale Schattierung zu zeichnen, wie es in Abbildung 5.14 gezeigt wird.


siehe Abbildung

Abbildung 5.14:
Trennlinien ohne Schattierung


Zeilenumbrⁿche

Die <BR>-Kennung, ohne abschlie▀ende Kennung, bricht eine Zeile an der Stelle, an der sie gesetzt wird um. Wenn ein Web-Browser auf eine <BR>-Kennung st÷▀t, beginnt er mit dem folgenden Text wieder am linken Rand (was immer der linke Rand fⁿr das aktuelle Element auch sein mag). Sie k÷nnen die <BR>-Kennung innerhalb anderer Tags verwenden, wie etwa in AbsΣtzen oder ListeneintrΣgen; <BR> fⁿgt keinen zusΣtzlichen Platz ⁿber oder unter der neuen Zeile ein und Σndert auch den Schriftttyp oder -stil des gegenwΣrtigen Textabschnitts nicht. Alles, was es bewirkt, ist, mit dem Text in einer neuen Zeile weiterzumachen. Das folgende Beispiel zeigt einen einfachen Absatz, bei dem jede Zeile mit einem <BR> endet. Die Abbildungen 5.15 und 5.16 zeigen, wie das jeweils in Netscape und Lynx aussieht.


Icon

<P>Tomorrow, and tomorrow, and tomorrow<BR>
Creeps in this petty pace from day to day<BR>
To the last syllable of recorded time;<BR>
And all our yesterdays have lighted fools<BR>
The way to dusty death. Out, out, brief candle!<BR>
Life's but a walking shadow, a poor player,<BR>
That struts and frets his hour upon the stage<BR>
And then is heard no more. It is a tale <BR>
Told by an idiot, full of sound and fury, <BR>
Signifying nothing.</P>


Icon

siehe Abbildung

Abbildung 5.15:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 5.16:
Die Darstellung in Lynx

Das CLEAR-Attribut ist eine HTML-3.2-Attribut der <BR>-Kennung. Es wird bei Bildern eingesetzt, um die der Text herumflie▀t. Sie werden mehr ⁿber diese Erweiterung in Kapitel 7, ╗Bilder, Farben und Hintergrⁿnde verwenden½, erfahren.


Adressen

Die Adressen-Kennung <ADDRESS> wird auf Webseiten als eine Art Unterschrift verwendet. Adre▀-Kennungen finden sich normalerweise am Ende jeder Webseite und werden benutzt, um anzuzeigen, wer die Seite geschrieben hat, an wen man sich fⁿr weitere Informationen wenden kann, das Datum, einen Urheberrechts-Hinweis oder andere Warnungen sowie alles, was passend erscheint.


Adressen werden hΣufig durch eine horizontale Linie (<HR>) eingeleitet, und die <BR>-Kennung kann benutzt werden, um die Zeilen zu unterteilen, zum Beispiel so:


<HR>
<ADDRESS>
Laura Lemay lemay@lne.com <BR>
A service of Laura Lemay, Incorporated <BR>
last revised April 30 1997 <BR>
Copyright Laura Lemay 1994 all rights reserved <BR>
Void where prohibited. Keep hands and feet inside the vehicle at all times.
</ADDRESS>


Ohne eine Adresse oder irgendeine andere Methode, Ihre Webseite zu ╗unterzeichnen½, wird es nahezu unm÷glich, herauszufinden, wer die Seite geschrieben hat und an wen man sich fⁿr weitere Informationen wenden kann. Das Signieren jeder Ihrer Webseiten mit der <ADDRESS>-Kennung ist eine ausgezeichnete M÷glichkeit, um sicherzustellen, da▀ Leute, die mit Ihnen in Kontakt kommen wollen, dies auch tun k÷nnen.


Im folgenden einfachen Beispiel sehen Sie eine Adresse in Netscape (Abbildung 5.17) und Lynx (Abbildung 5.18).


Icon

<HR>
<ADDRESS>
lemay@lne.com Laura Lemay
</ADDRESS>


Icon

siehe Abbildung

Abbildung 5.17:
Die Darstellung in Netscape

Icon

siehe Abbildung

Abbildung 5.18:
Die Darstellung in Lynx


Zitate

Die <BLOCKQUOTE>-Kennung wird fⁿr Zitate verwendet. (Im Unterschied zur <CITE>-Kennung, die kⁿrzere Zitate hervorhebt, wird <BLOCKQUOTE> fⁿr ausfⁿhrlichere Zitate eingesetzt, die nicht innerhalb anderer AbsΣtze verschachtelt sein sollten.) Zitate werden im allgemeinen vom regulΣren Text durch Einrⁿckung oder durch eine andere Methode abgesetzt. Der Macbeth-Monolog, den ich im Beispiel zu den Zeilenumbrⁿchen verwendet habe, wⁿrde als BLOCKQUOTE besser wirken als ein einfacher Absatz. Hier ist ein weiteres Beispiel:


<BLOCKQUOTE>
"During the whole of a dull, dark, and soundless day in the autumn of the year, when the clouds hung oppressively low in the heavens, I had been passing alone, on horseback, through a singularly dreary tract of country, and at length found myself, as the shades of evening grew on, within view of the melancholy House of Usher."--Edgar Allen Poe
</BLOCKQUOTE>


So wie auch in AbsΣtzen, k÷nnen Sie Zeilen innerhalb von <BLOCKQUOTE> durch die Zeilenumbruch-Kennung <BR> trennen. Im folgenden Beispiel sehen Sie dies in Netscape (Abbildung 5.19).


Icon

<BLOCKQUOTE>
Guns aren't lawful, <BR>
nooses give.<BR>
gas smells awful.<BR>
You might as well live.<BR>
--Dorothy Parker
</BLOCKQUOTE>


Icon

siehe Abbildung

Abbildung 5.19:
Die Darstellung in Netscape


Sonderzeichen

Wie Sie bereits in dieser Woche gelernt haben, bestehen HTML-Dateien aus reinem ASCII-Text und sollten keine Formatierungs-Zeichen oder andere ausgefallene Zeichen enthalten. TatsΣchlich sind die einzigen Zeichen, die Sie in Ihren HTML-Dateien verwenden sollten, jene, die Sie direkt mit Ihrer Tastatur eingeben k÷nnen. Falls Sie irgendeine andere Taste au▀er ╗Shift½ (Gro▀buchstaben-Umschaltung) drⁿcken mⁿssen oder eine geheimnisvolle Tastenfolge einzugeben haben, um ein bestimmtes Zeichen zu erzeugen, dann k÷nnen Sie dieses Zeichen nicht in Ihrer HTML-Datei verwenden. Das gilt auch fⁿr Zeichen, die Sie vielleicht jeden Tag einsetzen, wie em-Striche oder typographische Anfⁿhrungszeichen (und wenn Ihr Textverarbeitungprogramm letztere automatisch erzeugt, sollten Sie sie ausschalten, wenn Sie HTML-Seiten schreiben).


Moment mal, h÷re ich Sie da sagen. Wenn ich ein Zeichen wie beispielsweise einen dicken Punkt oder einen Akzent auf dem ╗a½ mit einer bestimmten Tastenfolge auf meiner Tastatur eingeben kann und es in eine HTML-Datei einfⁿge und mein Browser es dann auch noch richtig anzeigt, wo ist da das Problem?


Das Problem besteht darin, da▀ die interne Zeichen-Kodierung Ihres Computers, um das Zeichen zu produzieren (und die es erlaubt, es in Ihrer HTML-Datei und auf Ihrem Bildschirm korrekt anzuzeigen), ziemlich sicher auf anderen Computersystemen nicht funktionieren wird. Irgend jemand anders im Netz, der Ihre HTML-Datei mit den ausgefallenen Zeichen dann liest, k÷nnte sehr gut irgendein anderes Zeichen oder gar ein Durcheinander sehen. Oder das Zeichen k÷nnte, je nachdem, wie Ihre Datei ⁿber das Netz transportiert wird, auch einfach verlorengehen, bevor es den Rechner erreicht, auf dem es dargestellt werden soll.


Im technischen Jargon bedeutet das, da▀ die Zeichen in HTML-Dateien aus dem (7-Bit-)Standard-ASCII-Zeichensatz stammen mⁿssen und keine Zeichen aus dem ╗erweiterten½ (8-Bit-)ASCII enthalten dⁿrfen, da jede Plattform ihre eigene Definition davon hat, welche Zeichen im oberen ASCII-Bereich enthalten sind. HTML-Browser interpretieren Codes aus dem oberen ASCII-Bereich nach dem ISO-Latin-1-Zeichensatz (ISO 8859-1), einer Obermenge von ASCII.

Was k÷nnen Sie also tun? HTML bietet eine vernⁿnftige L÷sung: Sie definiert spezielle Codes, sogenannte ╗Character Entities½ (Zeichen-EntitΣten), die Sie innerhalb Ihrer HTML-Dateien einsetzen k÷nnen, um Zeichen darzustellen, die Sie einsetzen wollen. Von einem Browser interpretiert, werden diese ╗Character Entities½ dann als korrekte Sonderzeichen auf der jeweiligen Plattform und mit der dort verwendeten Schrift dargestellt.



Zeichen-EntitΣten fⁿr Sonderzeichen

╗Character Entities½ k÷nnen eine dieser zwei Formen annehmen: benannte EntitΣten und numerische EntitΣten.


Benannte EntitΣten beginnen mit dem kaufmΣnnischen Und (Ampersand, &) und enden mit einem Semikolon (;). Dazwischen steht der Name des betreffenden Zeichens (oder meistens eher eine Kurzversion des Namens wie agrave fⁿr ein ╗a½ mit einem Akzent darⁿber oder reg fⁿr das registered-Symbol). Anders als bei den anderen HTML-Kennungen, mⁿssen bei diesen Namen die Gro▀- und Kleinbuchstaben richtig angegeben werden (vgl. Anhang B). Benannte EntitΣten sehen beispielsweise so aus:


&quot;
&Auml;
&szlig;


Die numerischen EntitΣten beginnen ebenfalls mit dem kaufmΣnnischen Und (&) und enden mit einem Semikolon (;), doch anstelle des Namens enthalten sie das Nummernzeichen (#) und eine Zahl. Die Zahlen korrespondieren mit der Zeichenposition im ISO-Latin-1-Zeichensatz (ISO 8859-1). Jedes Zeichen, das Sie schreiben oder fⁿr das Sie eine benannte EntitΣt benutzen k÷nnen, existiert ebenso als numerische EntitΣt. Numerische EntitΣten sehen so aus:


&#196;
&#223;


Sie k÷nnen sowohl numerische als auch benannte EntitΣten in Ihren HTML-Dateien benutzen, indem Sie sie an der Stelle einfⁿgen, an der das Zeichen, das dargestellt werden soll, steht. Um also das Wort ╗ResumΘ½ in Ihrer HTML-Datei zu schreiben, k÷nnen Sie entweder


Resum&eacute;


schreiben oder


Resum&#233;


Ich habe in Anhang B eine Tabelle beigefⁿgt, welche die Zeichen-EntitΣten auffⁿhrt, die gegenwΣrtig von HTML-Level 1 und 2 unterstⁿtzt werden. Schauen Sie in der Sonderzeichen-Tabelle nach. ZusΣtzlich dazu hat Netscape zwei neue benannte Zeichen-EntitΣten fⁿr das Copyright- (⌐) und das Warenzeichen-Symbol (⌐) eingefⁿhrt: &copy; sowie &reg;. Die HTML-2-Spezifikation besitzt keine benannten EntitΣten fⁿr diese Zeichen, obwohl Sie jeder Zeit die numerischen Escape-Sequenzen &#169; und &#174; im ISO-Latin-1-Zeichensatz verwenden k÷nnen, um das gleiche Ergebnis zu erhalten. Diese benannten EntitΣten sind nun Teil von HTML 3.2.


HTMLs Anwendung des ISO-Latin-1-Zeichensatzes erlaubt es, Akzente auf den meisten Plattformen darzustellen, hat jedoch BeschrΣnkungen. So sind z.B. einige gebrΣuchliche Zeichen wie Blickfangpunkte (bullets), em-Striche und typographische Anfⁿhrungszeichen nicht im ISO-Latin-1-Zeichensatz enthalten. Das bedeutet, da▀ Sie diese Zeichen in Ihren HTML-Dateien ⁿberhaupt nicht verwenden k÷nnen. Au▀erdem stehen einige der ISO-Latin-1-Zeichen auf einigen Browsern vielleicht ⁿberhaupt nicht zur Verfⁿgung, was davon abhΣngt, ob diese Zeichen ⁿberhaupt auf dieser Plattform und in der jeweiligen Schriftart existieren. HTML 4.0 bringt das ganze Thema einen gutes Stⁿck voran, indem es vorschlΣgt, da▀ Unicode als Zeichensatz fⁿr HTML-Dokumente verfⁿgbar ist. Unicode ist ein Quasi-Standard-Zeichen-Kodierungssystem, das die M÷glichkeit bietet, nahezu alle Schriftzeichen dieser Erde - darunter auch chinesische oder japanische - aufzunehmen und gleichzeitig abwΣrtskompatibel mit dem gewohnten ASCII-Code ist. Das hei▀t, Dokumente k÷nnen leicht in einer beliebigen Sprache erstellt werden und dennoch ohne Schwierigkeiten mehrere Sprachen enthalten. Browser beginnen bereits Unicode zu unterstⁿtzen. Der Netscape Communicator z.B. unterstⁿtzt Unicode und kann, solange ihm die n÷tigen Schriften zur Verfⁿgung stehen, Dokumente in vielen der Schriftarten darstellen, die von Unicode angeboten werden. Dies stellt einen wichtigen Schritt dar, da Unicode als der neue De-facto-Standard die Kodierung von Schriftzeichen entwickelt. Java z.B. verwendet Unicode als Standard fⁿr die Zeichenkodierung und Windows NT unterstⁿtzt die Zeichenkodierung nach Unicode ebenfalls.


Zeichen-EntitΣten fⁿr reservierte Zeichen

Zum gr÷▀ten Teil gibt es die Zeichen-EntitΣten, damit Sie Zeichen verwenden k÷nnen, die im normalen ASCII-Zeichensatzes nicht enthalten sind. Es gibt jedoch einige Ausnahmen fⁿr einige Zeichen, die in HTML selbst eine besondere Bedeutung haben. Auch fⁿr diese Zeichen mⁿssen Sie Zeichen-EntitΣten verwenden.


Lassen Sie uns zum Beispiel annehmen, Sie wollten eine Zeile Code in eine HTML-Datei schreiben, die etwa so aussieht:


<P> <CODE> if x < 0 do print i </CODE> </P>


Das sieht nicht ungew÷hnlich aus, oder? Unglⁿcklicherweise kann HTML die Zeile nicht so anzeigen, wie sie geschrieben ist. Weshalb? Das Problem besteht in dem < (kleiner)-Zeichen. Fⁿr einen HTML-Browser bedeutet das kleiner-Zeichen ╗hier ist der Anfang einer Kennung½. Da indes in diesem Zusammenhang das kleiner-Zeichen eben kein Kennungs-Beginn ist, wird der Browser durcheinanderkommen. Sie bekommen das gleiche Problem mit dem gr÷▀er-Zeichen (>), weil dies in HTML das Ende einer Kennung bezeichnet, und mit dem kaufmΣnnischen Und (&), das Ersatzzeichen (die Zeichen-EntitΣten) einleitet. Korrekt in HTML geschrieben, wⁿrde jene Codezeile also so aussehen:


<P> <CODE> if x &lt; 0 do print i </CODE> </P>


HTML bietet benannte Ersatzzeichen (Escape-Codes) fⁿr jedes dieser Sonderzeichen sowie fⁿr die GΣnsefⁿ▀chen an, wie aus Tabelle 5.1. ersichtlich.


Tabelle 5.1: Ersatzzeichen fⁿr in Kennungen verwendete Zeichen

Ersatzzeichen

Ergebnis

&lt;

<

&gt;

>

&amp;

&

&quot;

Das GΣnsefⁿ▀chen-Ersatzzeichen ist etwas mysteri÷s. Rein technisch betrachtet, sollten Sie die Ersatzzeichen benutzen, anstatt die GΣnsefⁿ▀chen direkt einzugeben, wenn Sie korrekten HTML-Code mit GΣnsefⁿ▀chen darin erzeugen wollen. Gleichwohl habe ich bei keinem Browser irgendwelche Probleme mit der Darstellung von GΣnsefⁿ▀chen feststellen k÷nnen, auch wenn sie direkt in den HTML-Code geschrieben waren, noch habe ich viele HTML-Dateien gesehen, die sie benutzen. Gr÷▀tenteils dⁿrfte es sicher genug sein, die guten alten GΣnsefⁿ▀chen in Ihren HTML-Dateien zu verwenden, anstatt die Ersatzzeichen zu nehmen.



Textausrichtung

Textausrichtung ist die M÷glichkeit, einen Textblock wie eine ▄berschrift oder einen Absatz so auszurichten, da▀ er an den linken Rand st÷▀t (Linksbⁿndigkeit, die Voreinstellung) oder auch gegen den rechten (Rechtsbⁿndigkeit) oder da▀ er zentriert ist. In Standard-HTML-2.0 gibt es keine Mechanismen fⁿr die Textausrichtung; dafⁿr ist der Browser zustΣndig (was bedeutet, da▀ der Text meistens linksbⁿndig ist).


HTML 3.2 liefert Erweiterungen fⁿr die Ausrichtung von Text und anderen Elementen; und diese Erweiterungen sind von verschiedenen Browsern zu unterschiedlichen Graden akzeptiert worden. In Σlteren HTML-2.0-Browsern, die wenige oder keine der in diesem Abschnitt beschriebenen Kennungen unterstⁿtzen, werden Sie die Ausrichtung verlieren, und der Text wird entsprechend den jeweiligen Browser-Voreinstellungen ausgerichtet werden. Und wenn man die unterschiedliche Unterstⁿtzung fⁿr die in dieser Sektion beschriebenen Kennungen bedenkt, so wird Ihnen das irgendwann auch widerfahren. Behalten Sie das im Hinterkopf, wenn Sie die Ausrichtung in Ihren Seiten festlegen.



Die Ausrichtung individueller Elemente

Um eine individuelle ▄berschrift oder einen Absatz auszurichten, wenden Sie das ALIGN-Attribut an diesem HTML-Element an. Bei ALIGN handelt es sich um ein HTML-3.2-Attribut; es kann einen dieser drei Werte annehmen: LEFT, RIGHT oder CENTER. Sehen Sie sich die folgenden Beispiele an:


<H1 ALIGN=CENTER>Northridge Paints, Inc.</H2>
<P ALIGN=CENTER >We don't just paint the town red.</P>

<H1 ALIGN=LEFT>Serendipity Products</H1>
<H2 ALIGN=RIGHT><A HREF="who.html">Who We Are</A></H2>
<H2 ALIGN=RIGHT><A HREF="products.html">What We Do</A></H2>
<H2 ALIGN=RIGHT><A HREF="contacts.html">How To Reach Us</A></H2>


Das folgende Eingabe-/Ausgabe-Beispiel zeigt einfache Ausrichtungen einiger ▄berschriften. Die Abbildung 5.20 zeigt das Ergebnis in Netscape.


Icon

<H1 ALIGN=LEFT>Serendipity Products</H1>
<H2 ALIGN=RIGHT><A HREF="who.html">Who We Are</A></H2>
<H2 ALIGN=RIGHT><A HREF="products.html">What We Do</A></H2>
<H2 ALIGN=RIGHT><A HREF="contacts.html">How To Reach Us</A></H2>


Icon

siehe Abbildung

Abbildung 5.20:
Die Ausgabe in Netscape


Die Ausrichtung ganzer Elemente-Bl÷cke

Eine etwas flexiblere Methode der Ausrichtung von Textelementen ist die Verwendung von <DIV>-Kennungen, einem HTML-3.2-Tag. <DIV> steht fⁿr Division (Unterteilung) und verwendet das ALIGN-Attribut genau so, wie es auch ▄berschriften und AbsΣtze tun. Im Unterschied zur Ausrichtung von individuellen Elementen kann <DIV> jedoch dazu verwendet werden, einen ganzen Block von Kennnungen einzuschlie▀en, und beeinflu▀t auf diese Weise den ganzen Text und alle Kennungen innerhalb der Er÷ffungs- und Abschlu▀-Kennungen. DIV hat zwei Vorteile gegenⁿber den ALIGN-Attributen:


Um einen Block von HTML-Code auszurichten, umgeben Sie den Code mit den er÷ffnenden und abschlie▀enden <DIV>-Kennungen und fⁿgen das ALIGN-Attribut in die er÷ffnende Kennung ein. So wie auch bei anderen Kennungen kann ALIGN die Werte LEFT, RIGHT oder CENTER haben.


<H1 ALIGN=LEFT>Serendipity Products</H1>
<DIV ALIGN=RIGHT>
<H2><A HREF="who.html">Who We Are</A></H2>
<H2><A HREF="products.html">What We Do</A></H2>
<H2><A HREF="contacts.html">How To Reach Us</A></H2>
</DIV>


Der gesamte HTML-Code zwischen den <DIV>-Kennungen wird entsprechend den Werten des ALIGN-Attributs ausgerichtet werden. Wenn individuelle ALIGN-Attribute innerhalb von ▄berschriften oder AbsΣtzen im Rahmen von DIV auftreten, werden diese Werte die globalen DIV-Einstellungen au▀er Kraft setzen.


Beachten Sie, da▀ <DIV> selbst kein Absatztyp ist. Sie mⁿssen innerhalb der er÷ffnenden und abschlie▀enden <DIV>-Kennungen immer noch regulΣre Element-Kennungen (<P>, <H1>, <UL>, <BLOCKQUOTE> usw.) einsetzen.


ZusΣtzlich zu <DIV> gibt es auch noch <CENTER>, eine Netscape-Erweiterung, die kein Bestandteil von HTML 2.0 oder 3.2 ist (und wahrscheinlich auch nicht von zukⁿnftigen HTML-Versionen sein wird). Die <CENTER>-Kennung verhΣlt sich genauso wie DIV ALIGN=CENTER>, indem sie den gesamten HTML-Inhalt innerhalb der er÷ffnenden und abschlie▀enden Kennungen zentriert. Sie setzen die <CENTER>-Kennung vor den Text, den Sie zentrieren wollen, und dann die </CENTER>-Kennung als Abschlu▀, so wie hier:


<CENTER>
<H1>Northridge Paints, Inc.</H2>
<P>We don't just paint the town red.</P>
</CENTER>


Um Willen der Konsistenz, sind Sie wahrscheinlich besser beraten, wenn Sie <DIV> und ALIGN verwenden, um eine zentrierte Ausrichtung zu erreichen.



Schriftarten und -grade

Die <FONT>-Kennung, die ein Teil von HTML 3.2 ist, wird eingesetzt, um die Eigenheiten bestimmter Zeichen festzulegen, die von den Schriftfestlegungen nicht betroffen wurden. Ursprⁿnglich wurde <FONT> eingesetzt, um den Schriftgrad der Zeichen festzulegen, die es umgibt, ist aber seither darauf hin erweitert worden, die Schriftart selbst und deren Farbe festzulegen.


In diesem Abschnitt werden wir Schriftarten und Schriftgrade besprechen. An Tag 4, ╗Bilder und Hintergrⁿnde½, werden Sie, wenn wir ⁿber Farbe im allgemeinen reden, etwas ⁿber die VerΣnderung der Schriftfarbe lernen.



Wechsel des Schriftgrads

Die am weitesten verbreitete Anwendung der <FONT>-Kennung ist der Wechsel der Schriftgr÷▀e bei einem Zeichen, Wort, Ausdruck oder Textabschnitt. Die <FONT>...</FONT>-Kennungen umschlie▀en den Text, wΣhrend das SIZE-Attribut den Grad angibt, in dem die Schrift verΣndert werden soll. Die Werte fⁿr SIZE sind 1 bis 7, wobei 3 die Voreinstellung ist. Betrachten Sie das folgende Beispiel:


<P>Langweilen Sie sich mit Ihrer alten Schrift?
<FONT SIZE=5>Aendern Sie sie.</FONT></P>


Abbildung 5.21 zeigt die typischen Schriftgrade fⁿr jeden Wert von SIZE.


siehe Abbildung

Abbildung 5.21:
Schriftgrade in Netscape

Sie k÷nnen die Schriftgr÷▀e innerhalb der <FONT>-Kennung auch als relativen Wert angeben, indem Sie die +- oder --Zeichen als Wert fⁿr SIZE einsetzen. Da der Voreinstellungswert (Default Value) 3 ist, k÷nnen Sie die relativen Schriftgrade von -3 bis +4 Σndern, so wie hier:


<P>Aendern wir den <FONT SIZE=+2>Schriftgrad</FONT> wieder.</P>


Hier wird das Wort ╗Font½ (innerhalb der <FONT>-Kennungen) um zwei Stufen gr÷▀er als die ursprⁿngliche Schrift erscheinen, wenn Sie das Beispiel mit einem Browser betrachten, der dieses Feature unterstⁿtzt.


Relative Schriftgrade basieren auf einem Wert, den Sie mit der <BASEFONT>-Kennung definieren k÷nnen, welche eine Netscape-Erweiterung ist, die nun zu der Spezifikation von HTML 3.2 geh÷rt. Die <BASEFONT>-Kennung hat au▀erdem das notwendige Attribut SIZE. SIZE kann Werte von 1 bis 7 annehmen. Alle relativen SchriftgradΣnderungen, die im Dokument nach der <BASEFONT>-Kennung auftreten, werden sich auf deren Wert beziehen.


Versuchen Sie es zu vermeiden, die <FONT>-Kennung einzusetzen, um den Effekt eines gr÷▀eren Schriftgrads zu simulieren, den inhaltsbasierte HTML-Kennungen wie ▄berschriften (<H1>, <H2> usw.) erzeugen, und setzen Sie sie auch nicht dazu ein, ein bestimmtes Wort oder einen Satz hervorzuheben. Wenn Ihr Dokument in einem Browser angesehen wird, der dieses Merkmal nicht unterstⁿtzt, verlieren Sie die Schriftgrade, und Ihr Text wird so wie alle anderen AbsΣtze dargestellt werden. Wenn Sie sich jedoch an die inhaltsbasierten Kennungen halten, so wird Ihre ▄berschrift immer eine ▄berschrift bleiben. Begrenzen Sie deshalb Ihren Einsatz der FONT-Kennung auf einige wenige Spezialeffekte.



─nderung der Schriftart

Netscape fⁿhrte die <FONT>-Kennung mit der Version 1.0 des Browser in HTML ein. Der Internet Explorer von Microsoft spielte das gleiche Spiel, als er die <FONT>-Kennung dahingehend erweiterte, das FACE-Attribut einzuschlie▀en. Das Tag ist inzwischen Teil von HTML 3.2.


FACE nimmt als Wert den Namen der Schriftarten an, die von Anfⁿhrungszeichen umgeben und durch Kommata voneinander getrennt werden. Wenn ein Browser, der FACE unterstⁿtzt, eine Seite mit FACE darin interpretiert, wird er das System nach der jeweiligen Schriftart durchsuchen. Wenn er die erste nicht finden kann, wird er die zweite suchen, dann die dritte usw., bis er eine Schrifart findet, die tatsΣchlich auf dem System installiert ist. Wenn er keine der aufgefⁿhrten Schriftarten finden kann, wird er statt dessen die Voreinstellungs-Schriftart benutzen. So wⁿrde beispielsweise der folgende Text in Futura dargestellt werden. Wenn Futura nicht zur Verfⁿgung stⁿnde, wⁿrde der Browser Helvetica versuchen und schlie▀lich auf die Voreinstellung zurⁿckfallen, wenn Helvetica nicht verfⁿgbar wΣre.


<P><FONTFACE="Futura,Helvetica">Serifenlose Schriftarten kommen ohne die kleinen Extra-Schn÷rkel aus. </FONT></P>


Bedenken Sie, wenn Sie das FACE-Attribut einsetzen, da▀ nur sehr wenige Browser momentan unterstⁿtzen, so da▀ es fⁿr den gr÷▀ten Teil Ihres Publikums nicht zur Verfⁿgung steht. Au▀erdem haben viele Schriftarten auf unterschiedlichen Systemen unterschiedliche Namen; so hei▀t die gute alte Times auf einigen Systemen Times, auf anderen Times-Roman und woanders Times New Roman. Wegen der unterschiedlichen Benennungen der Schriftarten und dem Mangel an weitgehender Unterstⁿtzung fⁿr das FACE-Attribut sollte eine Festlegung der Schriftart nur fⁿr spezielle PrΣsentationen und nicht auf Ihren alltΣglichen Seiten eingesetzt werden.



Das gefⁿrchtete <BLINK>

Sie werden die <BLINK>-Kennung nicht in Netscape's offizieller Dokumentation seiner Kennungen finden. Die M÷glichkeit, Text zum Blinken zu bringen, wurde in Netscape als versteckte, undokumentierte FΣhigkeit, also als Osterei, eingefⁿhrt. Dennoch scheint ein ziemlicher Prozentsatz von Webseiten diese M÷glichkeit zu nutzen. Die <BLINK>...</BLINK>-Kennungen bringen den Text zwischen ihnen dazu, sich ein- und auszuschalten. AbhΣngig von der Netscape-Version, die Sie verwenden, kann dies bedeuten, da▀ der Text selbst entweder in regelmΣ▀igen Intervallen verschwindet und wieder erscheint oder da▀ ein hΣ▀licher grauer oder wei▀er Block hinter dem Text auftaucht und verschwindet. Blink wird gemeinhin dafⁿr eingesetzt, die Aufmerksamkeit auf einen Teil der Seite zu lenken.


Das Problem mit BLINK ist, da▀ es zu viel Nachdruck verleiht. Da es sich wiederholt, fΣhrt das Blinken dabei fort, Aufmerksamkeit auf eine Stelle zu richten, und kann in einigen FΣllen dazu fⁿhren, da▀ es fast unm÷glich wird, sich auf den Inhalt der restlichen Seite zu konzentrieren. Von der Verwendung von <BLINK> raten die meisten Web-Designer (einschlie▀lich meiner Wenigkeit) vehement ab, da viele Leute es als sehr lΣstig, hΣ▀lich und Σrgerlich empfinden. BLINK ist mit dem Kratzen von FingernΣgeln auf einer Schiefertafel gleichzusetzen.


Wenn Sie BLINK schon einsetzen mⁿssen, dann wenden Sie es sehr sparsam an (nicht mehr als einige wenige W÷rter pro Seite). Seien Sie sich auch darⁿber im klaren, da▀ das Blinken in einigen Versionen von Netscape ein- und ausgeschaltet werden kann. Wenn Sie einem Wort oder einem Satz Nachdruck verleihen wollen, sollten Sie einen konventionelleren Weg zusΣtzlich zu oder anstelle von BLINK einschlagen, da Sie nicht garantieren k÷nnen, da▀ es erscheinen wird, auch wenn Ihr Leser Netscape benutzt.



<NOBR> und <WBR>

Die <NOBR>...</NOBR>-Kennungen (no break = kein Umbruch) sind das Gegenteil der <BR>-Kennung. Der Text innerhalb der NOBR-Kennungen bleibt immer auf einer Zeile, auch wenn er sich ohne die Kennung ⁿber zwei oder mehr Zeilen erstreckt hΣtte.


Die <WBR>-Kennung (word break) gibt den angemessenen Zeilenumbruch innerhalb einer Zeile an (typischerweise innerhalb einer <NOBR>...</NOBR>-Sequenz). Im Unterschied zu <BR>, welches einen Umbruch erzwingt, wird <WBR> nur angewendet, wenn es erforderlich ist. Wenn die Zeile problemlos auf den Bildschirm pa▀t, wird <WBR> ignoriert.


Weder <NOBR> noch <WBR> sind Teil von HTML 3.2 bzw. HTML 4.0. Sie sind Erweiterungen, die von Netscape eingefⁿhrt wurden und sowohl vom Netscape Communicator als auch vom Internet Explorer 4 unterstⁿtzt werden.



▄bung 5.2: Erstellen Sie eine richtige HTML-Seite

Dies ist Ihre Chance, das anzuwenden, was Sie gelernt haben, und eine Webseite aus dem wirklichen Leben zu erzeugen. Keine zerstⁿckelten oder ⁿbermΣ▀ig albernen Beispiele mehr. Die Webseite, die Sie in diesem Abschnitt erzeugen, ist echt, geeignet fⁿr den Gebrauch in der wirklichen Welt (oder zumindest der wirklichen Welt des Web).


Ihre Aufgabe in diesem Beispiel: Gestalten und erzeugen Sie die Homepage fⁿr einen Bⁿcherladen namens The Bookworm (Der Bⁿcherwurm), der sich auf alte und seltene Bⁿcher spezialisiert hat.



Planen der Seite

In Kapitel 2, ╗Vorbereitungen½, habe ich darauf hingewiesen, da▀ eine Planung Ihrer Webseite vor dem Schreiben es zumeist leichter macht, die Sache aufzubauen und zu pflegen. Also ⁿberlegen Sie sich zuerst den Inhalt, den Sie auf die Seite setzen wollen. Hier sind ein paar Ideen fⁿr die Themen auf der Seite:


So, nun ⁿberlegen Sie sich ein paar Ideen fⁿr die Inhalte, mit denen Sie diese Seite verknⁿpfen wollen. Jeder Titel aus der Liste der aktuellen Titel dⁿrfte ein logischer Kandidat dafⁿr sein; Sie k÷nnen zudem weitere Informationen ⁿber das Buch selbst und seinen Autor und Verleger anbieten, seinen Preis, gegebenenfalls seine Verfⁿgbarkeit.


Die Veranstaltungsankⁿndigungen k÷nnten gleichfalls eine Reihe von Verknⁿpfungen ergeben, je nachdem, wie ausfⁿhrlich Sie jede Veranstaltung vorstellen wollen. Wenn Sie nur ein oder zwei SΣtze zu jeder verlieren wollen, dⁿrfte es sinnvoller sein, sie direkt auf der Seite vorzustellen, anstatt jede Veranstaltung mit einer eigenen Seite zu verknⁿpfen. Warum sollten Ihre Leser warten, bis die neue Seite geladen wird, blo▀ um eine Handvoll Zeilen Text zu lesen?


Andere interessante Verbindungen k÷nnten im Text selbst auftauchen, doch fⁿrs erste ist unsere grundlegende Planung genug, um damit anzufangen.



Beginnen Sie mit dem Gerⁿst

ZunΣchst erzeugen Sie das Gerⁿst, das alle HTML-Dateien haben mⁿssen: Angaben zur Strukturierung des Dokuments, einen Titel und eine erste ▄berschrift. Achten Sie darauf, da▀ der Titel aussagekrΣftig, aber kurz ist; Sie k÷nnen sich einen lΣngeren Titel fⁿr das <H1>-Element auf der Seite aufheben.


<HTML>
<HEAD>
<TITLE>The Bookworm Bookshop</TITLE>
</HEAD>
<BODY>
<H1>The Bookworm: A Better Book Store</H1>
</BODY></HTML>



Fⁿgen Sie Inhalt hinzu

Nun beginnen Sie damit, die Seite mit Inhalt zu fⁿllen. Da es um ein literarisches Bestreben geht, wⁿrde sich ein kleines Zitat ⁿber alte Bⁿcher am Anfang der Seite gut machen. Da es ein Zitat ist, k÷nnen Sie die <BLOCKQUOTE>-Kennung benutzen, um es als solches erscheinen zu lassen. Die Herkunft der Verse ist eine Quellenangabe, so da▀ Sie auch die <CITE>-Kennung verwenden k÷nnen.


<BLOCKQUOTE>
"Old books are best--how tale and rhyme<BR>
Float with us down the stream of time!"<BR>
- Clarence Urmy, <CITE>Old Songs are Best</CITE>
</BLOCKQUOTE>


Die Anschrift des Buchladens ist ein einfacher Absatz mit durch Zeilenumbrⁿche getrennten Zeilen.


<P>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</P>


Auf die Anschrift folgt eine Beschreibung des Buchladens selbst. Ich habe die Beschreibung so aufgebaut, da▀ sie eine Liste von Merkmalen enthΣlt, so da▀ die einzelnen Merkmale sich besser vom Text absetzen:


<P>Since 1933, The Bookworm Bookshop has offered rare and hard-to-find titles for the discerning reader. Unlike the bigger bookstore chains, the Bookworm offers:</P>
<UL>
<LI>Friendly, knowledgeable, and courteous help
<LI>Free coffee and juice for our customers
<LI>A well-lit reading room so you can "try before you buy"
<LI>Four friendly cats: Esmerelda, Catherine, Dulcinea and Beatrice
</UL>


ErgΣnzen Sie einen Hinweis auf die ╓ffnungszeiten des Ladens, und heben Sie die Stunden hervor:


<P>Our hours are <STRONG>10am to 9pm</STRONG> weekdays,
<STRONG>noon to 7</STRONG> on weekends.</P>



Fⁿgen Sie noch mehr hinzu

Nach der Beschreibung kommen die anderen Hauptthemen dieser Homepage: die Abschnitte mit aktuellen Buchtiteln und den Veranstaltungshinweisen. Da dies Themenⁿberschriften sind, zeichnen wir sie mit der 2. ▄berschriften-Kennung aus:


<H2>Recent Titles (as of 30-Apr-97)</H2>
<H2>Upcoming Events</H2>


Der Abschnitt ⁿber die neuen Buchtitel ist ein klassisches Verknⁿpfungs-Menⁿ. Hier fⁿhren wir die Titel in einer ungeordneten Liste auf, mit den Buchtiteln selbst als Quellenangaben (die <CITE>-Kennung).


<H2>Recent Titles (30-Apr-97)</H2>
<UL>
<LI>Sandra Bellweather, <CITE>Belladonna</CITE>
<LI>Jonathan Tin, <CITE>20-Minute Meals for One</CITE>
<LI>Maxwell Burgess, <CITE>Legion of Thunder</CITE>
<LI>Alison Caine, <CITE>Banquo's Ghost</CITE>
</UL>


Nun ergΣnzen wir die Anker-Kennungen, um die Verknⁿpfungen zu erzeugen. Was sollte der Verknⁿpfungs-Text beinhalten? Soll er die gesamte Zeile enthalten (Autor und Titel) oder lediglich den Titel des Buchs? Das ist letzten Endes eine Geschmacksfrage, aber ich ziehe es vor, nur so viel Text wie eben n÷tig fⁿr die Verknⁿpfung zu verwenden, um sicherzustellen, da▀ die Verbindung vom Text abgesetzt ist, anstatt ihn zu ⁿberfrachten. Hier habe ich nur die Buchtitel verknⁿpft.


<UL>
<LI>Sandra Bellweather, <A HREF="belladonna.html">
<CITE>Belladonna</CITE></A>
<LI>Johnathan Tin, <A HREF="20minmeals.html">
<CITE>20-Minute Meals for One</CITE></A>
<LI>Maxwell Burgess, <A HREF="legion.html">
<CITE>Legion of Thunder</CITE></A>
<LI>Alison Caine, <A HREF="banquo.html">
<CITE>Banquo's Ghost</CITE></A>
</UL>


Beachten Sie, da▀ ich die <CITE>-Kennung innerhalb der Verknⁿpfungs-Kennung <A> stehen habe. Ich k÷nnte sie ebensogut nach au▀erhalb der Anker-Kennung verschieben; Tags fⁿr Zeichenstile k÷nnen so ziemlich ⁿberall stehen. Doch wie ich frⁿher schon einmal bemerkt habe, seien Sie vorsichtig, damit sich die Kennungen nicht ⁿberschneiden, weil Ihr Browser wom÷glich nicht in der Lage ist, zu verstehen, was da vor sich geht. Mit anderen Worten, machen Sie nicht so etwas:


<A HREF="banquo.html"> <CITE> Banquo's Gohst </A> </CITE>

Als nΣchstes lassen Sie uns zu dem Abschnitt mit den Veranstaltungshinweisen gehen. Im Planungsabschnitt waren wir uns noch nicht sicher, ob dies ein weiteres Verknⁿpfungs-Menⁿ sein sollte oder ob der Inhalt sich besser auf dieser Seite machen wⁿrde. Nochmals: Das ist eine Geschmacksfrage. In unserem Fall, da es sich nur um wenige zusΣtzliche Informationen handelt, ist es nicht sehr sinnvoll, die Leute wegen einiger weniger SΣtze irgendwohin zu verbinden. Also nehmen wir fⁿr diesen Abschnitt eine Menⁿ-Liste (mit der <UL>-Kennung), was dann einige kurze AbsΣtze erzeugt (die in einigen Browsern mit Hinweispunkten versehen sind). Ich habe einige Ausdrⁿcke zu Beginn der AbsΣtze fett geschrieben. Diese W÷rter heben eine Zusammenfassung der jeweiligen Veranstaltung selbst hervor, so da▀ jeder Absatz schnell ⁿberflogen und ignoriert werden kann, wenn die Leser nicht daran interessiert sind.

<H1>Upcoming Events</H1>
<UL>
<LI><B>The Wednesday Evening Book Review</B> meets, appropriately, on Wednesday evenings at 7:00 PM for coffee and a round-table discussion. Call the Bookworm for information on joining the group and this week's reading assignment.
<LI><B>The Children's Hour</B> happens every Saturday at 1pm and includes reading, games, and other activities. Cookies and milk are served.
<LI><B>Carole Fenney</B> will be at the Bookworm on Friday, September 16, to read from her book of poems <CITE>Spiders in the Web.</CITE>
<LI><B>The Bookworm will be closed</B> October 1 to remove a family of bats that has nested in the tower. We like the company, but not the mess they leave behind!
</UL>

 

Unterschreiben Sie die Seite

Sie sind fertig; unterschreiben Sie also, was Sie erstellt haben, damit Ihre Leser wissen, wer die Arbeit erledigt hat. Ich habe die Signatur hier mit einer Trennlinie vom Text abgesetzt, das letzte Aktualisierungsdatum eingefⁿgt, meinen Namen als ╗WebMaster½ (das ist Web-Jargon und bedeutet: die Person, die fⁿr ein Web-System verantwortlich ist) mit einer E-Mail-Anschrift eingesetzt und eine Copyright-Notiz (mit einem Copyright-Symbol, gekennzeichnet durch den numerischen Escape-Code &#169;):

<HR>
<ADDRESS>
Last Updated: 30-Apr-97<BR>
WebMaster: Laura Lemay lemay@bookworm.com<BR>
&#169; copyright 1995 the Bookworm<BR>
</ADDRESS>


Schauen wir einmal, was wir haben

Hier ist der bisherige HTML-Code (mit den numerischen Zeichenkodierungen der deutschen Umlaute) fⁿr die Seite:

<HTML>
<HEAD>
<TITLE>The Bookworm Bookshop</TITLE>
</HEAD>
<BODY>
<H1>The Bookworm: A Better Book Store</H1>
<BLOCKQUOTE>
"Old books are best--how tale and rhyme<BR>
Float with us down the stream of time!"<BR>
- Clarence Urmy, <CITE>Old Songs are Best</CITE>
</BLOCKQUOTE>
<P>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</P>
<P>Since 1933, The Bookworm Bookshop has offered rare and hard-to-find titles for the discerning reader. Unlike the bigger bookstore chains, the Bookworm offers:
<UL>
<LI>Friendly, knowledgeable, and courteous help
<LI>Free coffee and juice for our customers
<LI>A well-lit reading room so you can "try before you buy"
<LI>Four friendly cats: Esmerelda, Catherine, Dulcinea and Beatrice
</UL>
<P>Our hours are <STRONG>10am to 9pm</STRONG> weekdays,
<STRONG>noon to 7</STRONG> on weekends.</P>
<H2>Recent Titles (as of 25-Sept-95)</H2>
<UL>
<LI>Sandra Bellweather, <A HREF="belladonna.html">
<CITE>Belladonna</CITE></A>
<LI>Johnathan Tin, <A HREF="20minmeals.html">
<CITE>20-Minute Meals for One</CITE></A>
<LI>Maxwell Burgess, <A HREF="legion.html">
<CITE>Legion of Thunder</CITE></A>
<LI>Alison Caine, <A HREF="banquo.html">
<CITE>Banquo's Ghost</CITE></A>
</UL>
<H2>Upcoming Events</H2>
<UL>
<LI><B>The Wednesday Evening Book Review</B> meets, appropriately, on Wednesday evenings at 7:00 PM for coffee and a round-table discussion. Call the Bookworm for information on joining the group and this week's reading assignment.
<LI><B>The Children's Hour</B> happens every Saturday at 1pm and includes reading, games, and other activities. Cookies and milk are served.
<LI><B>Carole Fenney</B> will be at the Bookworm on Friday, September 16, to read from her book of poems <CITE>Spiders in the Web.</CITE>
<LI><B>The Bookworm will be closed</B> October 1 to remove a family of bats that has nested in the tower. We like the company, but not the mess they leave behind!
</UL>
<HR>
<ADDRESS>
Last Updated: 30-Apr-97<BR>
WebMaster: Laura Lemay lemay@bookworm.com<BR>
&#169; copyright 1995 the Bookworm<BR>
</ADDRESS>
</BODY></HTML>


Damit haben wir nun also ein paar ▄berschriften, etwas Text, einige Themen und einige Verknⁿpfungen. Das ist die Grundlage fⁿr eine gute Webseite. An dieser Stelle, wo der meiste Inhalt schon da ist, ⁿberlegen Sie sich, ob Sie noch weitere Verbindungen herstellen wollen oder welche anderen Merkmale Sie der Seite noch hinzufⁿgen m÷chten.


Beispielsweise wurde im Einleitungsabschnitt auf die vier Katzen hingewiesen, die zum Buchladen geh÷ren. Obwohl Sie's ursprⁿnglich nicht geplant haben, k÷nnten Sie jetzt leicht Webseiten erzeugen, die die Katzen beschreiben (und ein Bild zeigen), und sie dann zurⁿckverbinden mit dieser Seite, eine Verknⁿpfung (und eine Seite) pro Katze.


Ist es wichtig, die Katzen zu beschreiben? Als Gestalter der Seite liegt es ganz bei Ihnen, das zu entscheiden. Sie k÷nnten diese Seite mit allen m÷glichen Sachen verbinden, wenn Sie einen interessanten Anla▀ fⁿr eine solche Verknⁿpfung hΣtten (und etwas, womit Sie verknⁿpfen k÷nnen). Verbinden Sie die Anschrift des Buchladens mit der ÷rtlichen Handelskammer. Verbinden Sie das Zitat mit einer Online-EnzyklopΣdie von Zitaten. Verbinden Sie den Hinweis auf den kostenlosen Kaffee mit der Kaffee-Homepage.


Am Tag 6, ╗Effektive Webseiten gestalten½, erzΣhle ich noch mehr interessante Sachen ⁿber Verbindungen (und darⁿber, wie man sich beim Verknⁿpfen nicht ablenken lΣ▀t); an diesem Tag erfahren Sie auch noch mehr darⁿber, was Sie bei guten Webseiten tun oder unterlassen sollten. Der Grund, aus dem ich diesen Punkt hier anspreche, ist: Wenn Sie erst einmal den Inhalt auf Ihrer Seite haben, dann tauchen mannigfaltige Gelegenheiten auf, die Seite zu erweitern und mit anderen zu verbinden, M÷glichkeiten, an die Sie gar nicht gedacht haben, als Sie Ihre Grundⁿberlegungen anstellten. Sobald Sie also mit der Seite einigerma▀en fertig sind, ist es gut innezuhalten und sich anzuschauen, was Sie haben, sowohl auf Ihrem Plan als auch das, was Sie bereits geschafft haben.


Fⁿr den Zweck unseres Beispiels h÷ren wir hier auf und begnⁿgen uns mit den Verknⁿpfungen, die wir bereits erstellt haben. Wir sind nahe daran, alles erledigt zu haben, so da▀ ich dieses Kapitel nicht noch lΣnger machen will, als es ohnehin schon ist!



Testen Sie das Ergebnis

Jetzt, wo der gesamte Code an seinem Platz steht, k÷nnen Sie sich das Ergebnis mit Ihrem Browser ansehen. Die Abbildungen 5.22a und 5.22b zeigen, wie's in Netscape aussieht. So, das ist es, nachdem Sie all Ihre Tippfehler korrigiert haben und die vergessenen abschlie▀enden Kennungen und dergleichen seltsame Fehler, die sich scheinbar immer einschleichen, wenn man zum ersten Mal eine HTML-Datei erzeugt. Und das scheint stets zu passieren, egal wie sorgfΣltig Sie arbeiten. Wenn Sie einen HTML-Editor oder ein anderes Hilfsprogramm benutzen, wird's ein bi▀chen leichter, aber Fehler scheint es immer zu geben. Daher brauchen wir eine Vorschau, damit Sie Fehlern auf die Spur kommen, bevor Sie das Dokument tatsΣchlich fⁿr andere Leute verfⁿgbar machen.


siehe Abbildungsiehe Abbildung

Abbildung 5.22a:
Die beinahe fertige Bⁿcherwurm-Homepage (obere HΣlfte)


















Abbildung 5.22b:
Die beinahe fertige Bⁿcherwurm-Homepage (untere HΣlfte)

siehe Abbildung

Abbildung 5.23:
Ein Problembereich

siehe Abbildungsiehe Abbildung

Abbildung 5.24a:
Die fertige Bⁿcherwurm-Homepage (oberer Teil)


















Abbildung 5.24b:
Die fertige Bⁿcherwurm-Homepage (unterer Teil)

Das sieht so weit ja ganz gut aus. Aber in den Browsern, mit denen ich's getestet habe, neigen die Beschreibung des Ladens und der Abschnitt ⁿber neue Titel dazu aneinanderzukleben; man kann sie schlecht unterscheiden (vgl. Abbildung 5.23).


Sie haben zwei M÷glichkeiten, sie besser unterscheidbar zu machen:


Bei Gestaltungsfragen wie dieser wird es wieder zu einer Geschmacksfrage, wie es in den meisten der Browser, die Sie in die Finger kriegen k÷nnen, am besten aussieht. Jede der beiden M÷glichkeiten ist gleicherma▀en richtig, und beide sehen interessant aus, und Sie mⁿssen auch keine seltsamen Sachen mit HTML anstellen, um zu erreichen, was Sie wollen.


siehe Abbildung

Abbildung 5.25:
Die endgⁿltige Bⁿcherwurm-Homepage mit Erweiterungen

Ich habe mich fⁿr eine einzelne Trennlinie zwischen der Beschreibung des Ladens und dem Abschnitt ⁿber neue Titel entschieden. Die Abbildungen 5.24a und 5.24b zeigen, wie das aussieht.



Verfeinerungen

Bis jetzt war alles auf der Seite einfaches HTML 2.0, so da▀ es in allen Browsern lesbar ist und auch ziemlich gleich aussieht. Wenn ich jedoch an diesen Punkt gekommen bin, kann ich HTML-3.2-Attribute hinzufⁿgen, die die Seite fⁿr viele Leser nicht Σndern werden, sie jedoch in Browsern ein wenig schicker aussehen lassen, sofern diese Erweiterungen unterstⁿtzt werden.


Welche Erweiterungen wollen wir also verwenden? Ich habe zwei ausgewΣhlt:


Um den obersten Teil der Seite zu zentrieren, werden wir die ▄berschrift, das Zitat und die Adresse des Buchladens mit der <DIV>-Kennung folgenderma▀en umschlie▀en:


<DIV ALIGN=CENTER>
<H1>The Bookworm: A Better Book Store</H1>
<BLOCKQUOTE>
"Old books are best--how tale and rhyme<BR>
Float with us down the stream of time!"<BR>
- Clarence Urmy, <CITE>Old Songs are Best</CITE>
</BLOCKQUOTE>
<P>The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</P>
</DIV>


Um den Schriftgrad der Adresse zu verΣndern, umschlie▀en Sie die Zeilen, die die Adresse enthalten, mit der <FONT>-Kennung:


<P><FONT SIZE="+0">The Bookworm Bookshop<BR>
1345 Applewood Dr<BR>
Springfield, CA 94325<BR>
(415) 555-0034
</FONT></P>


Abbildung 5.25 zeigt das Endergebnis mit Erweiterungen in Netscape. Beachten Sie, da▀ keine dieser ─nderungen die Lesbarkeit der Seite in den Browsern beeintrΣchtigt, die die <DIV>- oder <FONT>-Kennung nicht unterstⁿtzen; die Seite sieht auch dort noch gut aus, nur ein wenig anders.


Wann sollten Sie HTML 3.2 (oder sogar HTML 4.0) einsetzen? Die Faustregel, der ich am liebsten folge, ist, Erweiterungen nur dann einzusetzen, wenn ihre Verwendung nicht mit anderen Browsern in Konflikt gerΣt. Aber genauso wie bei der Art des von Ihnen dargestellten Inhalts liegt es auch bei den Erweiterungen an Ihnen, zu entscheiden, ob und welche Sie einsetzen wollen. Sie werden mehr darⁿber in Kapitel 11, ╗Schreiben und Gestalten von Webseiten: Tips½, erfahren.



Zusammenfassung

Kennungen, Kennungen und noch mehr Kennungen! Nach diesem Kapitel kennen Sie die meisten ⁿbriggebliebenen Tags der HTML-Sprache fⁿr die PrΣsentation des Textes, eine gute Anzahl der neuen HTML-3.2-Tags fⁿr zusΣtzliche Textformatierung und -prΣsentation, und Sie haben eine echte Webseite zusammengestellt. Sie k÷nnten hier jetzt aufh÷ren und recht ansehnliche Webseiten erzeugen. Aber es kommen noch mehr tolle Sachen, also legen Sie das Buch jetzt nicht weg.


Tabelle 5.2 zeigt eine kurze Zusammenfassung aller Kennungen, die Sie in diesem Kapitel kennengelernt haben.


Tabelle 5.2: HTML-Tags aus Kapitel 5

Kennung

Attribut

Verwendungszweck

<EM>...</EM>

 

Hervorgehobener Text

<STRONG>...</STRONG>

 

StΣrker hervorgehobener Text

<CODE>...</CODE>

 

Ein Code-Beispiel

<KBD>...</KBD>

 

Text, der vom Anwender einzugeben ist

<VAR>...</VAR>

 

Ein Variablen-Name

<SAMP>...</SAMP>

 

Beispieltext

<DFN>...</DFN>

 

Eine Definition oder ein zu definierender Ausdruck

<CITE>...</CITE>

 

Eine Quellenangabe

<B>...</B>

 

Fetter Text

<I>...</I>

 

Kursiver Text

<TT>...</TT>

 

Text in Schreibmaschinenschrift (eine Schrift mit fester Weite wie beispielsweise Courier)

<S>...</S>

 

(HTML-3.2) durchgestrichener Text

<BIG>...</BIG>

 

(HTML-3.2) Text mit gr÷▀erer Schriftgr÷▀e

<SMALL>...</SMALL>

 

(HTML-3.2) Text mit kleinerer Schriftgr÷▀e

<SUB>...</SUB>

 

(HTML-3.2) tiefgestellter Text

<SUP>...</SUP>

 

(HTML-3.2) hochgestellter Text

<PRE>...</PRE>

 

Vorformatierter Text; alle Leerstellen, Tabulatorzeichen und Zeilenumbrⁿche werden beibehalten. Der Text wird au▀erdem in fester (monospaced) Schrift dargestellt

<HR>

 

Eine horizontale Trennlinie an der gegebenen Stelle im Text

<HR>

SIZE

(HTML-3.2) die Dicke der Trennlinie, in Pixel

<HR>

WIDTH

(HTML-3.2) die Breite der Trennlinie, entweder in genauer Pixel-Anzahl oder als Prozentsatz der Seitenbreite (z.B. 50 Prozent)

<HR>

ALIGN

(HTML-3.2) die Ausrichtung der Trennlinie auf der Seite. M÷gliche Werte sind LEFT, RIGHT und CENTER

<HR>

NOSHADE

(HTML-3.2) Darstellung der Trennlinie ohne die dreidimensionale Schattierung

<BR>

 

Ein Zeilenumbruch; beginnt das nΣchste Zeichen auf der folgenden Zeile (ohne jedoch einen neuen Absatz oder Listenpunkt anzufangen)

<BLOCKQUOTE>

 

Ein Zitat, lΣnger als nur ein paar W÷rter

...</BLOCKQUOTE>

   

<ADDRESS>...</ADDRess>

 

Eine ╗Unterschrift½ fⁿr jede Webseite; erscheint typischerweise am Ende eines jeden Dokuments und enthΣlt Kontakt- oder Urheberrechts-Informationen

<P>, <H1 - 6>

ALIGN=LEFT

(HTML-3.2-Erweiterung) richtet den Text innerhalb des Absatzes oder der ▄berschrift linksbⁿndig aus

<P>, <H1 - 6>

ALIGN=RIGHT

(HTML-3.2-Erweiterung) richtet den Text innerhalb des Absatzes oder der ▄berschrift rechtsbⁿndig aus

<P>, <H1 - 6>

ALIGN=CENTER

(HTML-3.2-Erweiterung) zentriert den Text innerhalb des Absatzes oder der ▄berschrift

<DIV>...</DIV>

ALIGN=LEFT

(HTML-3.2-Erweiterung) richtet den Inhalt zwischen den er÷ffnenden und abschlie▀enden Kennungen linksbⁿndig aus

<DIV>...</DIV>

ALIGN=RIGHT

(HTML-3.2-Erweiterung) richtet den Inhalt zwischen den er÷ffnenden und abschlie▀enden Kennungen linksbⁿndig aus

<DIV>...</DIV>

ALIGN=CENTER

(HTML-3.2-Erweiterung) zentriert den Inhalt zwischen den er÷ffnenden und abschlie▀enden Kennungen

<CENTER>...</CENTER>

 

(HTML-3.2-Erweiterung) zentriert den Inhalt zwischen den er÷ffnenden und abschlie▀enden Kennungen

<FONT>...</FONT>

SIZE

(HTML-3.2-Erweiterung) gibt die Gr÷▀e der Schrift an, zu der gewechselt werden soll, entweder von 1 bis 7 (Voreinstellung ist 3) oder als relativen Wert +N oder -N. Relative Schriftgr÷▀en basieren auf dem Wert von <BASEFONT>

 

FACE

(Internet-Explorer-Erweiterung) der Name der Schriftart, zu der gewechselt werden soll, als Liste von Schriftarten, aus denen ausgewΣhlt werden kann

<BASEFONT>

SIZE

(Netscape-Erweiterung) die Voreinstellungsgr÷▀e der Schrift, von der aus relative Gr÷▀enverΣnderungen vorgenommen werden

<BLINK>...</BLINK>

 

(Netscape-Erweiterung) verursacht einen blinkenden Effekt im eingeschlossenen Text

<NOBR>...</NOBR>

 

(Erweiterung) kein Zeilenumbruch fⁿr Text innerhalb dieser Kennung

<WBR>

 

(Erweiterung) Zeilenumbruch an dieser Stelle, wenn Bildschirmeinteilung dies erfordert


Fragen und Antworten

Frage:

Wenn es also in HTML Zeilenumbrⁿche gibt (<BR>), was ist denn mit Seitenumbrⁿchen?

Antwort:

Es gibt in HTML kein Tag fⁿr Seitenumbrⁿche. Denken Sie daran, was der Ausdruck ╗Seite½ in einem Web-Dokument bedeutet. Wenn jedes Dokument im Web eine einzelne ╗Seite½ ist, dann ist der einzige Weg, einen Seitenumbruch zu erzeugen, ein HTML-Dokument in verschiedene Dateien aufzuteilen und sie miteinander zu verbinden.

Frage:

Was ist denn nun mit dem angedrohten Quiz?

Antwort:

OK. Ohne in Tabelle 5.2 zu gucken, nennen Sie jetzt alle acht logischen Stil-Kennungen und wofⁿr sie benutzt werden. ErlΣutern Sie, weshalb man die logischen Tags anstelle der physischen benutzen soll. Und dann erzeugen Sie eine HTML-Seite, die jede einzelne Kennung in einem Satz benutzt, und testen sie mit verschiedenen Browsern, um ein Gespⁿr dafⁿr zu bekommen, wie sie jeweils aussehen.

Frage:

Warum wird unterstrichener Text (die <UL>-Kennung) nicht in Netscape 2.0 dargestellt? Netscape unterstⁿtzt doch wohl HTML 3.2, oder etwa nicht?

Antwort:

Netscape unterstⁿtzt einiges von HTML 3.2. Unterstrichener Text wurde jedoch in der Version, die Sie verwenden, ausgelassen, wahrscheinlich weil unterstrichener Text zu sehr wie eine Verknⁿpfung aussieht. Andere Browser wie beispielsweise der Internet Explorer unterstⁿtzen Unterstreichungen. Beginnend mit Netscape 3.0 und jetzt im Netscape Communicator funktioniert das <U>-Tag sehr gut, wie es auch im Internet Explorer 4 - der neusten Version von Microsoft - der Fall ist.

Frage:

Wie kann ich em-Striche oder typographische Anfⁿhrungszeichen in meine HTML-Dateien aufnehmen?

Antwort:

Das k÷nnen Sie nicht. Weder em-Striche noch typographische Anfⁿhrungszeichen sind als Teil des ISO-Latin-1-Zeichensatzes definiert, weshalb diese Zeichen fⁿr HTML im Moment nicht verfⁿgbar sind. HTML 4.0 verspricht dieses Problem ⁿber die Unterstⁿtzung von Unicode, das Zugriff auf einen wesentlich umfangreicheren Zeichensatz bietet, zu beheben.

Frage:

Blink ist das HTML-Equivalent von FingernΣgeln auf einer Schiefertafel?½ Ist das nicht ein wenig ⁿbertrieben?

Antwort:

Ich konnte der Versuchung nicht widerstehen. :)


Copyright ⌐1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenΣchstes Kapitel