HTML mit The Wave und GeoWrite - Teil 2

Im ersten Teil dieses Kurses wurden bei einem kleinen Projekt einige Grundregeln von HTML erläutert. Jede HTML-Datei immer nach folgendem Grundgerüst aufgebaut:
Der gesamte Inhalt wird in die Tags <HTML> und </HTML> eingeschlossen. Es folgt der Dateikopf, der zwischen den Tags <>HEAD> und </HEAD> eingebunden wird, und der allgemeine Angaben (z.B. den Titel der Datei) enthält. An den Kopf schließt sich der Textkörper an, welcher durch <BODY> und </BODY> markiert wird. Bei allen Tags ist es im Übrigen egal, ob diese groß oder klein geschrieben werden, nur sollte man sich innerhalb eines Dokuments für eine einheitliche Schreibweise entscheiden. Im zweiten Teil soll es nun um einige weitere Gestaltungsmöglichkeiten gehen.


Formatierung von Überschriften und Absätzen

Wie schon erwähnt gibt es in HTML sechs Hierarchieebenen für Überschriften, die mit einem Tag gekennzeichnet werden, welcher sich aus einem H für Headline und der Nummer der entsprechenden Hierarchieebene zusammensetzt. Also beispielsweise <H1>Meine Homepage</H1>. Im ersten kleinen Projekt wurde die Überschrift sowie die folgende Textzeile zentriert, indem alles in die Tags <CENTER> und </CENTER> eingeschlossen wurde. Gerade für Überschriften und Absätze gibt es jedoch auch elegantere und vielfältigere Möglichkeiten zum Ausrichten. Zu diesen Tags kann man die Option ALIGN (engl. ausrichten) hinzufügen, und damit eine rechtsbündige (ALIGN="right") oder zentrierte (ALIGN="center") Ausrichtung erzwingen, mit ALIGN="justify" wird ein Text im Blocksatz dargestellt. Auch eine linksbündige Ausrichtung kann erzwungen werden (ALIGN="left"), jedoch ist dies eigentlich nie nötig, da linksbündig stets die Voreinstellung ist.
Zwei Beispiele für die Ausrichtung (Bild 1):

Bild 1

 

<H2 ALIGN="center">Diese Überschrift ist zentriert</H2>
<P ALIGN="right">Der Text in diesem Absatz wird rechtsbündig dargestellt.</P>

Schriftgröße und -stil

Eine Webseite wäre sicher recht langweilig, wenn alle Informationen in der gleichen Schrift, Schriftgröße oder dem gleichen Stil geschrieben wären. Sicher, vieles läßt sich mit Überschriften und Unterüberschriften auflockern, aber dennoch gibt es genügend Gründe, um eine Zeile oder auch nur ein Wort in irgendeiner Weise hervorzuheben. Dafür gibt es im HTML eine ganze Reihe Möglichkeiten. Im ersten Teil dieses Kurses wurde bereits der FONT-Tag benutzt, um die Textgröße um eine Stufe zu erhöhen (<FONT SIZE="+1">).
HTML unterscheidet insgesamt sieben Schriftgrößen, wobei 3 als mittlere Größe die Normaleinstellung ist. Man kann also die Schrift mit +1, +2 oder +3 vergrößern bzw. mit -1, -2 oder -3 verkleinern. Genausogut ist auch eine direkte Angabe der Schriftgrößen 1 bis 7 möglich, also beispielsweise <FONT SIZE="6">. Man kann auch eine bestimmte Schriftart einstellen, in der der Text dargestellt werden soll. Der Tag dafür lautet <FONT FACE=...> (face = Gesicht, Aussehen) und wird mit </FONT> wieder beendet. Der Tag zum Anzeigen in der Schriftart Courier würde zum Beispiel so aussehen:

<FONT FACE="Courier">

Natürlich ist die Darstellung in der angegebenen Schriftart nur möglich, wenn diese auch im Browser des Anwenders installiert ist. Standardmäßig bringt The Wave die Schriftarten Default (Standardzeichensatz), Headline (Zeichensatz für Überschriften) und Courier für den Browser (sowie vier Terminalzeichensätze) mit, die auch in der FontList eingetragen sind und somit vom Browser dargestellt werden können. Kann die mit dem FONT-Tag angegebene Schriftart nicht dargestellt werden, bleibt diese Angabe wirkungslos, d.h. der Text wird mit dem Default-Zeichensatz angezeigt. Prinzipiell ist es auch möglich, die Textfarbe zu ändern, dazu dient der Tag <FONT COLOR=...>. Da The Wave jedoch noch keine farbige Darstellung von Webseiten unterstützt, wird darauf hier nicht weiter eingegangen. Wer seine Seiten für andere Browser etwas farbiger gestalten möchte, findet entsprechende Informationen in [1].
Neben der Schriftgröße kann man auch den Stil ändern. So ist es möglich, den Text fett, kursiv und unterstrichen darzustellen. Die Tags dafür lauten:
<B> (steht für bold = fett), <I> (steht für italic = kursiv) und <U> (steht für underline = unterstrichen), statt <B> kann auch <<STRONG> (engl. stark) und statt <I> auch <EM> (für emphasizes = betont) verwendet werden. Beendet wird die hervorgehobene Darstellung wieder mit dem gleichen Tag, nur durch den einleitenden Slash ergänzt.
Beispiel:

<B>Fettschrift</B>

Solche Tags können auch ineinander verschachtelt werden, d.h. man kann z.B. auch unterstrichenen, fettgedruckten Text schreiben.
Beispiel:

<B><U>Fett und unterstrichen</U><B>

Wichtig dabei ist nur, daß man den zuletzt eingeleiteten Tag als erstes wieder beendet. Aber das kennen wir ja eigentlich schon aus dem Grundgerüst der HTML-Datei von den Tags <HTML>,<HEAD> und <BODY> her. Diese Verschachtelung ist natürlich auch mit anderen Tags möglich, so ist es beispielsweise oft üblich, im Text eingebundene Links durch Fettschrift hervorzuheben, um auf diese aufmerksam zu machen. Das könnte etwa so aussehen:

<P ALIGN="justify">
In der aktuellen Ausgabe der<B><A HREF="http://www.go64.de">Go64!</A></B> wird über die Möglichkeiten der Webseitenerstellung mit The Wave und GeoWrite berichtet.
</P>



Aufzählungen und Listen

Alles, was wir bisher betrachtet haben, diente zum Formatieren von fließendem Text. Um diesen zu unterbrechen, können wir aber noch andere Mittel als Überschriften oder Zeilenumbrüche einsetzen. So gibt es speziell für Aufzählungen und Listen eigene Befehle. Dabei wird zwischen unsortierten und sortierten Listen unterschieden. Bei einer unsortierten Liste werden die einzelnen Punkte einfach untereinander aufgeführt, bei einer sortierten Liste werden sie nummeriert.
<UL> (steht für unordered list) leitet eine unsortierte Liste ein, mit <LI> (steht für list item = Listeneintrag) beginnt ein neuer Punkt der Liste, der mit </LI> wieder beendet wird. Mit </UL> wird die unsortierte Liste abgeschlossen. Das gleiche Schema gilt auch für eine sortierte Liste, nur daß der Tag hier <OL> (für ordered list) lautet. Normalerweise wird die Aufzählung bei 1 begonnen und fortlaufend nummeriert. Man kann aber den Startwert frei wählen, indem man den Tag folgendermaßen ergänzt:

<OL START="x">

Dabei kann für x jede beliebige Zahl eingesetzt werden. Auch der Wert jedes einzelnen Elements der Liste kann beliebig gewählt werden. Der Tag dafür sieht so aus:

<LI VALUE="x">Listenelement</LI>


Verwenden von Tabellen

Viele Informationen lassen sich besonders übersichtlich in einer Tabelle darstellen, daher ist dies ein sehr wichtiges Gestaltungsmittel. Die begrenzenden Tags lauten <TABLE> und </TABLE>, wenn man die Gitternetzlinien der Tabelle sichtbar machen möchte, muß man den Befehl border in den Tag <TABLE> einfügen (Bild 2).

Bild 2

The Wave kann das aber erst ab der Betaversion B2.9, die Versionen V1.0 und B2.8 zeigen noch keine Gitternetzlinien an. Man kann man die Stärke der Gitternetzlinien auch direkt in Pixeln angeben, also z.B. <TABLE BORDER=4>. Mit <TABLE BORDER=0> erreicht man das gleiche, wie wenn man einfach nur <TABLE> schreibt; es werden keine Linien angezeigt. Zwischen die Table-Tags werden die entsprechenden Informationen wie folgt eingefügt:
Zuerst wird mit <TR> eine neue Tabellenzeile (table row) eingefügt. Im Anschluß daran werden die Spalten der betreffenden Zeile definiert, in denen die Tabellendaten (table data) erscheinen; das geschieht mit dem Tag <TD>. Das Ende einer jeden Spalte wird jeweils mit </TD> markiert, am Ende einer Zeile steht </TR>.


Damit kennen wir schon die Grundstruktur einer Tabelle. Ein einfaches Beispiel könnte so aussehen (Bild 3): Bild 3

<TABLE BORDER>
<TR>
<TD> 1. Zeile, 1. Spalte</TD>
<TD> 1. Zeile, 2. Spalte</TD>
<TD> 1. Zeile, 3. Spalte</TD>
</TR>
<TR>
<TD> 2. Zeile, 1. Spalte</TD>
<TD> 2. Zeile, 2. Spalte</TD>
<TD> 2. Zeile, 3. Spalte</TD>
</TR>
...
</TABLE>



Dabei ist zu beachten, daß in jeder Zeile die gleiche Anzahl von Spalten stehen sollte. Wenn eine Spalte leer bleiben soll, so kann man einfach TD></TD> schreiben, eleganter ist es jedoch, ein &nbsp; einzufügen.
Die Breite einer Spalte wird normalerweise durch ihren Inhalt bestimmt. Man kann sie jedoch auch genau definieren, dafür gibt es den Befehl width (Breite), der in den Spalten-Tag eingefügt wird. Die Breite einer Spalte kann in Pixeln angegeben werden oder in Prozent von der Gesamtbreite der Tabelle. Das sieht dann folgendermaßen aus:

TD WIDTH=200> bzw. TD WIDTH=20%>

In den Spalten kann der Text mit Stilanweisungen wie <B>, <U> oder <I> gestaltet werden, wie oben beschrieben. Man kann aber auch eine ganze Spalte mit den oben genannten Formatieranweisungen ausrichten, so daß der Inhalt nicht nur linksbündig (Defaulteinstellung) sondern auch zentriert oder rechtsbündig dargestellt werden kann. Dazu müssen diese Attribute in den Spalten-Tag eingefügt werden:

<TD ALIGN=center><B> zentriert und fett </B></TD>

Natürlich gibt es noch weitere Möglichkeiten, das Aussehen einer Tabelle zu beeinflussen (Dicke der Gitternetzlinien, Abstand vom Zelleninhalt zum Zellenrand etc.), aber das würde den Rahmen einer kurzen Einführung sprengen. Wer sich näher damit befassen will, findet unter [1] entsprechende Informationen.


Webseite als Tabelle

Zum Abschluß dieses Teils soll noch die Möglichkeit betrachtet werden, eine ganze HTML-Seite als Tabelle aufzubauen. Wenn man die Seite in mehrere Spalten aufteilt, können die Informationen übersichtlich dargestellt werden. Beispielsweise können in einer schmalen Spalte links z.B. einzelne Stichworte stehen, zu denen dann entsprechende Informationen in der breiten rechten Spalte stehen.
Der Quelltext müßte dann etwa so aussehen:

<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=100%>
<TR>
<TD width=20%>
...
Stichworte
...
</TD>
<TD width=5%> </TD>
<TD width=75%>
...
Beschreibung
...
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Wer die Seite ganz komfortabel gestalten will, kann die Stichworte in der linken Spalte auch als Links definieren, so daß beim Anklicken gleich zur entsprechenden Information gesprungen wird. Dazu gleich noch ein Hinweis:
Wie ein Link zu einer anderen Webseite aussieht, ist aus der ersten Folge des Kurses bekannt. Links zu entsprechenden Stellen in derselben Seite sehen prinzipiell genauso aus. Nur muß man an der Stelle, wohin der Link verweisen soll, eine entsprechende Textmarke einfügen. Das geschieht mit dem Befehl name im anchor-Tag und sieht etwa so aus:

<A NAME="News">

Diese Marke wird z.B. vor den News-Meldungen im Text (breite rechte Spalte) eingefügt, der Link dahin (in der schmalen linken Spalte) sähe dann so aus:

<A HREF="#News">Aktuelle Neuigkeiten</A>

Bild4

 

Solche Links zu Themen im Text können auch am oberen Rand einer Webseite platziert werden, was das Finden der entsprechenden Informationen und damit die Navigation in der Seite wesentlich vereinfacht. Ein Beispiel dafür ist unter [2] zu finden, einer sehr Wave-freundlich gestalteten Webseite (Bild 4).




[Teil 1] [Teil 3]

<FONT SIZE="2"><a href="f_c64.htm"><strong>[zur&uuml;ck]</strong></a><BR>