Kapitel 2

Geschrieben von Torsten Lenneper. Veröffentlicht in FrontPage 2000

Bewertung: 3 / 5

Stern aktivStern aktivStern aktivStern inaktivStern inaktiv
 

HTML Basiswissen

Alle Seiten im Internet werden mit der Sprache HTML (Hypertext Markup Language) erstellt. In dem so erstellten Code finden Sie keine Farben oder Bilder, sondern nur die Verweise auf diese Elemente. Der Browser übersetzt dann diesen Code auf Ihrem Rechner und stellt die Seiten dann entsprechend grafisch dar.

Mit FrontPage erstellen Sie diese Seiten zwar direkt so, wie sie später am Bildschirm erscheinen, im Hintergrund wird aber auch hier alles in HTML-Code umgewandelt. Mit dieser kurzen Einführung sollen Ihnen die wichtigsten Grundlagen erläutert werden, denn Sie werden auch in FrontPage selber den Code später noch bearbeiten wollen und teilweise auch müssen.

Grundlagen

HTML-Seiten bestehen aus reinem Text ohne jegliche Formatierungen und können deshalb mit einem normalen Editor erstellt werden. Wenn Sie z.B. Word benutzen, müssen Sie die Datei mit dem Dateityp ‚Nur Text’ abspeichern. In beiden Fällen müssen aber die Dateinamenerweiterungen anschliessend noch in «htm» oder «html» geändert werden.

Tags

Die einzelnen Formatierungen werden mit verschiedenen Marken (Tags) gekennzeichnet. Möchten Sie z.B. einen Text fett formatieren, so müssen Sie folgenden Syntax verwenden:

<b> Dies ist ein fett formatierter Text </b>

Wenn Sie den Text in FrontPage eingeben und fett formatieren, werden die Tags automatisch erzeugt. Der oben gezeigte Tag ist ein Container-Tag, da er aus zwei Teilen besteht und den Text somit einschliesst. Nicht alle Tags haben ein schliessendes Tag (welches immer mit einem Schrägstrich eingeleitet wird), wenn es sich aber um ein Container-Tag handelt, muss auch das schliessende mit angegeben werden.

Es sind natürlich auch weitere Formatierungen möglich. Sie möchten einen Text in der Farbe gelb darstellen?

<font color=“yellow“> Dies ist ein gelb formatierter Text <font>

Das Tag <font> bezieht sich auf die eigentlichen Zeichen und erhält hier zusätzlich noch das Attribut für die Farbe. Soll zusätzlich auch eine andere Schriftart verwendet werden, fügen Sie einfach das entsprechende Attribut mit hinzu:

<font color=“green“ face=“Arial“ > Gr&uumlner Text in Arial<font>

Die Reihenfolge, wie Sie die beiden Attribute anordnen, spielt dabei keine Rolle. Sie werden von den Browsern identisch dargestellt. Im Beispieltext sehen Sie auch, wie Sonderzeichen behandelt werden. Das «ü» wird als «&uuml» (ein ‚u’ als Umlaut) geschrieben.

Das Grundgerüst einer Seite

Jede Webseite besteht aus einem Grundgerüst welches dann um die entsprechenden Informationen ergänzt wird.

<html>

<head>

<title> Titel, der in der Titelleiste des Browsers erscheint </title>

</head>

<body>

In diesem Bereich steht der Inhalt der Seite mit Formatierungen

<!--eventuelle Kommentare-->

</body>

</html>

Das Tag <html> sagt dem Browser, um welche Art Dokument es sich handelt. Es steht daher immer am Anfang des Codes. Im Kopfbereich <head>...</head> werden alle Einstellungen vorgenommen, die nicht sofort auf der Seite erscheinen.

Kleine und grosse Probleme

Anführungszeichen

Sehen Sie sich noch einmal den Beispielcode für den grün formatierten Text an:

<font color=“green“ face=“Arial“ > Gr&uumlner Text in Arial<font>
<font color=green face=Arial > Gr&uumlner Text in Arial<font>

Die zwei Zeilen unterscheiden sich lediglich durch das Fehlen der Anführungszeichen. Nun könnten Sie denken, dass die Anführungszeichen nie gesetzt werden müssen und Sie sich dadurch Tipparbeit sparen. Das folgende Beispiel zeigt jedoch, dass die Zeichen doch eine Bedeutung haben:

<input type=submit value=Hier Klicken

Hier bewirkt das Fehlen der Zeichen, dass der Browser das Wort ‚Hier’ als Parameter interpretiert und ‚Klicken’ liest. Wenn Sie einen Parameter mit Leerzeichen übermitteln möchten, müssen Sie ihn in Anführungszeichen setzen:

<input type=submit value=“Hier Klicken“

Genauso verhält es sich mit Parametern die das %-Zeichen enthalten. ASP-Skripte werden in die Zeichen ‚<%...%> eingebaut. Wenn Sie nun eine Linie Zeichnen sieht der Code folgendermassen aus

<hr width=100%>

und könnte wieder falsch interpretiert werden. Schreiben Sie deshalb besser

<hr width=“100%“>

um etwaigen Problemen aus dem Weg zu gehen. Als Grundsatz können Sie sich merken, dass Parameter mit enthaltenen Leerzeichen oder dem %-Zeichen in Anführungszeichen gesetzt werden. Bei allen anderen können Sie diese weglassen oder auch, wegen der Optik, setzen.

Leerzeichen

Mit Leerzeichen können Sie in Textverarbeitungen Abstände erzwingen. Dies funktioniert in HTML nicht. Der Browser ignoriert die Leerzeichen nicht allgemein, sondern nur mehrere aufeinanderfolgende. Das folgende Beispiel zeigt die Auswirkungen im Browser:

<b>Ein normaler Text</b><br>

<b>E i n T e x t m i t L e e r z e i c h e n</b><br>

<b>E i n T e x t m i t L e e r z e i c h e n</b><br>

Der Browser zeigt die Seite folgendermassen an:

 

 

 

 

 

 

 

 

Verschiedene Browser

Zum Anzeigen der Webseiten benötigen Sie einen Browser. Auch wenn der Grossteil der Surfer den Internet Explorer einsetzt, gibt es auch Anwender, die z.B. Opera, Mozilla oder Netscape bevorzugen. Leider weicht die Darstellung der Seiten innerhalb dieser Browser voneinander ab. HTML ist zwar standardisiert, doch werden von den Herstellern der Browser immer neue Erweiterungen hinzugefügt, die man in eine Webseite einbringen kann, jedoch dann nur mit diesem Browser auch dargestellt werden können. Sie sollten daher Ihre Webseiten in verschiedenen Browsern testen und gegebenenfalls auf einige Effekte verzichten, um andere Surfer nicht auszusperren.

HTML Grundwissen

Für die folgenden Beispiele geben Sie den Text nicht im grafischen Editor von FrontPage ein sondern nutzen die Quelltextansicht. So bekommen Sie ein besseres Gefühl für die Arbeitsweise von HTML und verstehen später auch den Code, den FrontPage automatisch erstellt, besser.

Fett formatieren

In einer normalen Textverarbeitung geben Sie Ihren Text ein und formatieren anschliessend die entsprechenden Textpassagen. Um in einer Webseite Text fett zu formatieren, müssen Sie die Textpassage zwischen die Tags <b>...</b> setzen wie im Beispiel unten gezeigt.

<html>

<head>

<title>Fett formatieren</title>

</head>

<body>

Der Begriff <b>HTML</b> wird hier fett dargestellt

</body>

</html>

Hier wieder die Darstellung im Browser:

 

 

 

 

 

 

Farben verwenden

Sie sollten die Farben nur zum Hervorheben wichtiger Begriffe oder Passagen nutzen, da zu viele Farben die Seite schlechter lesbar machen. Die Einstellungen für die Schriftfarbe oder den Hintergrund legen Sie mit dem entsprechenden Parameter fest. Die Farbe geben Sie im hexadezimalen RGB-Format an. Alternativ sind in HTML bereits einige Farben mit vordefinierten Namen enthalten. Die Liste ist keineswegs vollständig und wurde angelegt, als Grafikkarten standardmässig nur 16 Farben anzeigen konnten. Da die Leistung der heutigen Grafikkarten die Darstellung von mindestens 256 oder mehr Farben zulässt, können Sie die Farbvarianten mit Hilfe der hexadezimalen Werte angeben.

 

Name der Farbe

Hexadezimaler Wert

Farbe

Aqua

#00FFFF

Cyan

Black

#000000

Schwarz

Blue

#0000FF

Blau

Fuchsia

#FF00FF

Magenta

Gray

#808080

Grau

Green

#008000

Grün

Lime

#00FF00

Hellgrün

Maroon

#800000

Braun

Navy

#000080

Dunkelblau

Olive

#808080

Olivgrün

Purple

#800080

Lila

Red

#FF0000

Rot

Silver

#C0C0C0

Silber

Teal

#008080

Petrol

White

#FFFFFF

Weiss

Yellow

#FFFF00

gelb

 

Hintergrund

Den Parameter «bgcolor» fügen Sie im Tag <BODY> hinzu, damit die Browser die gewählte Farbe anzeigen. Hier wieder der Beispielcode:

<html>

<head>

<title>Farbiger Hintergrund</title>

</head>

<body bgcolor=lime>

Der Begriff <b>HTML</b> wird hier fett dargestellt

</body>

</html>

Und die Ausgabe im Browser:

 

 

 

 

 

 

 

Schriftfarbe

Um die Schriftfarbe zu ändern, wählen Sie das Container-Tag <font> mit dem Parameter «color». Hier der Quellcode für das Farbbeispiel:

<html>

<head>

<title>Farbige Schrift</title>

</head>

<body>

Text im Standardformat.<br>

<font color=red>Roter Text</font><br>

<font color=blue>Blauer Text</font><br>

<font color=#FF00FF>Magenta in hexadezimalem Format</font>

</body>

</html>

Wie Sie sehen spielt es keine Rolle, wie Sie die Farbe definieren. Selbst im Quellcode einer Seite müssen Sie sich nicht festlegen:

 

 

 

 

Zeilenumbruch

In einer normalen Textverarbeitung wird der Zeilenumbruch automatisch am Rand des Dokuments eingefügt, wenn Sie die Enter-Taste drücken oder einen manuellen Zeilenwechsel einfügen. Bei Webseiten verhält es sich anders. Geben Sie den folgenden Quellcode ein und betrachten das Ergebnis im Browser:

<html>

<head>

<title>Zeilenumbruch</title>

</head>

<body>

Dieser Text steht in der ersten Zeile

und dieser in der zweiten.

</body>

</html>

Es findet kein Zeilenumbruch statt, der Text wird in einer Zeile ausgegeben. Da nicht jedes System den ASCII-Code «CRLF» (entspricht der Enter-Taste) kennt und die Seiten aber Systemweit angezeigt werden sollen, gibt es das Tag <br> (break). Nach diesem Tag wird ein Umbruch eingefügt.

<html>

<head>

<title>Zeilenumbruch</title>

</head>

<body>

Dieser Text steht in der ersten Zeile<br>

und dieser in der zweiten.

</body>

</html>

Hier wieder das Ergebnis:

Das Tag <br> ist kein Container und benötigt deshalb auch kein schliessendes Tag.

 

 

Absätze

Um Absätze mit einer leeren Zeile zu unterteilen, könnten Sie ebenfalls das <br>-Tag nutzen. Das macht den Quellcode allerdings sehr unübersichtlich und bläht die Seite unnötig auf:

<html>

<head>

<title>Absätze</title>

</head>

<body>

Dieser Text steht in der ersten Zeile<br>

und dieser in der zweiten.<br>

<br>

Hier beginnt ein neuer Absatz<br>

mit zwei Zeilen.<br>

<br>

Hier steht der dritte Absatz.<br>

<br>

Und dies ist der letzte Absatz.

</body>

</html>

 

Das Ergebnis entspricht zwar Ihren Wünschen, doch gibt es für das Formatieren der Absätze ein spezielles Tag, und zwar <p>. Das «P» seht für «Paragraph», was Absatz bzw. Abschnitt bedeutet.

Hier kommt der entsprechend angepasste Quellcode:

<html>

<head>

<title>Absätze</title>

</head>

<body>

Dieser Text steht in der ersten Zeile<br>

und dieser in der zweiten.

<p>Hier beginnt ein neuer Absatz<br>

mit zwei Zeilen.</p>

Hier steht der dritte Absatz.<p>

Und dies ist der letzte Absatz.

</body>

</html>

Und das Ergebnis:

 

 

Der Unterschied in der Grösse zwischen dem Quellcode mit dem <br>-Tag und dem <p>-Tag beträgt bereits 20 Byte. Dies mag Ihnen im Gigabyte-Zeitalter lächerlich erscheinen, aber durch Optimierung des Quellcodes können Sie bei einer Webseite bereits mehrere Kilobyte einsparen, und dies ist gleichzusetzen mit einer kürzeren Ladezeit.

Das <p>-Tag wurde im obigen Beispiel einmal als Container verwendet und im anderen Fall nicht. Beide Varianten bringen das selbe Ergebnis. Wird dieses Tag jedoch mit weiteren Attributen gekoppelt, müssen Sie das schliessende Tag verwenden, wie das folgende Beispiel zeigt.

Ausrichtung

Um den Text links, rechts oder zentriert auszurichten, nutzen Sie das Attribut «align». Im Beispielcode werden die verschiedenen Ausrichtungen gezeigt:

<html>

<head>

<title>Ausrichtungen</title>

</head>

<body>

Text ohne Angabe der Ausrichtung.

<p align=left>Text links ausgerichtet</p>

<p align=center>Text zentriert</p>

<p align=right>Text rechts ausgerichtet</p>

</body>

</html>

Wie Sie sehen, hat die Linksausrichtung keinen Unterschied zur Standardausrichtung bewirkt. Trotzdem werden Sie auch diese Ausrichtung beim Gestalten Ihrer Webseiten benötigen. Ohne das schliessende <p>-Tag wäre in diesem Beispiel die Formatierung fortlaufend für den Rest des Textes.

 

 

Vorformatierter Text

Wie Sie bereits wissen, werden die Leerzeichen, die mehrfach aufeinanderfolgen, unterdrückt. Mit dem <pre>-Tag (preformatted) können Sie diese Leerzeichen allerdings mit ausgeben lassen. Ausserdem wird bei Verwendung dieses Tags eine nicht proportionale Schriftart (meist Courier New) für die Anzeige verwendet. Der folgende Code zeigt ein Beispiel unter Verwendung des Tags:

<html>

<head>

<title>Formatierter Text</title>

</head>

<body>

<pre>

Standardtext

Text mit 5 Leerzeichen

Text mit 10 Leerzeichen

</pre>

</body>

</html>

Das Ergebnis im Browser entspricht Ihren Erwartungen, hat aber den Nachteil, dass die Zeilen am Ende nicht mehr umgebrochen werden. Ausserdem kann jeder Nutzer die Schriftarten in seinem Browser individuell einstellen und somit ist eine systemweite Darstellung nicht mehr gewährleistet. Sie erfahren aber später noch geeignete Möglichkeiten Ihren Text nach Ihren Wünschen auf der Webseite zu platzieren.

Linien verwenden

Zu den weiteren, wenn auch immer noch wenigen, gestalterischen Möglichkeiten unter HTML, gehören die Linien. So können Sie verschiedene Textpassagen voneinander trennen. Das Tag <hr> gibt’s allerdings nur für horizontale und nicht für vertikale Linien.

<html>

<head>

<title>Text mit Linien</title>

</head>

<body>

Nach diesem Text folgt eine Linie.

<hr>

Dies ist eine 50%-Linie in rot.

<hr color=red width="50%">

Dies ist eine 30-Pixel Linie<br>

aber links ausgerichtet.

<hr align=left width=30>

</body>

</html>

Wenn Sie mit dem <hr>-Tag eine Linie einfügen, wird automatisch ein Zeilenumbruch vorgenommen und die Linie in die folgende Zeile eingefügt. Die Linie füllt immer die komplette Breite des Fensters aus, egal ob Sie dieses vergrössern oder verkleinern. Ausserdem wird die Linie zentriert, was aber in diesem Fall nicht auffällt.

Im zweiten Fall wurde das Attribut «color» verwendet, um der Linie eine Farbe zuzuweisen. Die Breitenangabe in Prozent bewirkt in diesem Fall, das, egal wie gross das Fenster ist, die Linie immer 50% der Fensterbreite lang ist.

Im dritten Fall wurde der Linie eine feste Breite von 30 Pixeln zugewiesen. Ausserdem ist sie links ausgerichtet.

Weitere Schriftformate

Ausser den farblichen gibt es auch noch andere Möglichkeiten, die Schrift auf Ihrer Webseite zu formatieren und aufzugliedern. Den <font>-Tag haben Sie ja bereits kennen gelernt. Ausser dem Attribut «color» kennt er auch noch die Attribute «size» (Grösse) und «face» (Schriftart). Selbstverständlich lassen sich auch hier die Attribute wieder gemeinsam verwenden.

Schriftgrösse

Die Standardschriftart kann in sieben Werten vergrössert oder auch verkleinert werden.

<html>

<head>

<title>Schriftgr&ouml;sse</title>

</head>

<body>

Text in Standardschriftgr&ouml;sse<p>

<font size=”2”>Text in festgelegter Gr&ouml;sse</font><p>

<font size=”+2”>Text etwas gr&ouml;sser als Standard</font><p>

<font size=”+7”>Text in gross</font><p>

<font size=”-4”>Dieser Text ist kleiner als Standard</font>

</body>

</html>

Zuerst wurde der Text in der voreingestellten Standardschriftgrösse ausgegeben. Danach wurde eine bestimmte Schriftgrösse festgelegt und in den nächsten beiden Zeilen der Standard jeweils erhöht. Die letzte Zeile zeigt den Text noch einmal verkleinert von der Standardgrösse ausgehend.

Wie Sie sehen, ist das Formatieren und Anpassen gar nicht so einfach.

Sie wissen in den meisten Fällen nicht, welche Schriftgrösse der Surfer gerade eingestellt hat und so kann eine Vergrösserung im Quellcode die Schrift zu gross erscheinen lassen. Aus diesem Grund lässt sich die Schriftgrösse auch direkt für die ganze Webseite festlegen und anschliessend mit «size» variieren. Hier nutzen Sie das <basefont>-Tag.

<html>

<head>

<title>Schriftgr&ouml;sse mit 'basefont'</title>

</head>

<body>

<basefont size="4"></basefont>

Text mit der Schriftgr&ouml;sse 5<p>

<font size="+3">Text um 3 gr&ouml;sser</font><p>

<font size="-3">Text um 3 kleiner</font>

</body>

</html>

So wissen Sie, von welcher Grösse Sie ausgehen können und das Layout lässt sich besser anpassen.

 

 

Schriftarten

Das Attribut «face» lässt Sie die Schriftart für Ihre Webseiten wählen. So interessant dieses Attribut auch ist, die Nachteile liegen auf der Hand. Sicherlich haben Sie schon einmal ein aufwendig gestaltetes Dokument mit verschiedenen Schriften von einem Bekannten bekommen und als Sie es dann mit Ihrer Textverarbeitung geöffnet haben, schienen alle Schriften verschwunden. Dies hat einen einfachen Grund, die Schriften sind auf Ihrem Computer nicht installiert. Genauso verhält es sich natürlich auch bei den Webseiten. Die von Ihnen verwendeten Schriftarten müssen natürlich auch auf dem Computer des Surfers verfügbar sein. Ausserdem unterstützen nur Browser der neueren Generation dieses Attribut.

<html>

<head>

<title>Schriftarten mit 'face'</title>

</head>

<body>

Die Standardschriftart.<p>

<font face="Arial">Das ist Arial.</font><p>

<font face="Frutiger">Das ist Frutiger</font><p>

<font face="Frutiger, Arial">Frutiger oder Arial.</font><p>

<font face="Verdana,Arial,Helvetica">Das ist Verdana, Arial oder Helvetica.</font>

</body>

</html>

In diesem Beispiel sehen Sie zuerst den Text in der Standardschriftart. Danach wird Arial als Schriftart festgelegt. Frutiger ist eine typische Schriftart auf dem

Apple Macintosh. Da die Schriftart nicht verfügbar ist, wird automatisch die Standardschriftart gewählt. Wenn Sie zwei Schriftarten angeben und die erst genannte nicht installiert ist, wird die zweite (wenn verfügbar) genommen. Auf diese Weise können Sie auch mehrere Fonts aufnehmen.

Relative Schriftgrössen

Mit dem Attribut «size» im <font>-Tag haben Sie die Schriftgrösse fest angegeben. Mit dem <big>-Tag vergrössern Sie wenn möglich die Schrift und mit dem
<small>-Tag wird die Schrift verkleinert (beachten Sie, dass dies Container-Tags sind). Verschachteln Sie die Tags mehrfach hintereinander, wird die Schrift immer kleiner bzw. grösser ausgegeben. Sie sollten aber die Schriftgrösse Anfangs mit dem Attribut «size» festlegen.

<html>

<head>

<title>Relative Schriftgr&ouml;sse</title>

</head>

<body>

Text in Standardgr&ouml;sse.<p>

<big>Text in gross</big><p>

<small>Text in klein</small>

</body>

</html>

Überschriften

Das eigentliche Ziel von HTML war die Strukturierung von Text. Dies lässt sich durch eine Gliederung mit verschiedenen Überschriften leicht umsetzen. Für Überschriften nutzen Sie das Container-Tag <h?>. Ein Zeilenumbruch wird nach diesem tag automatisch durchgeführt.

<html>

<head>

<title>&Uuml;berschriften</title>

</head>

<body>

<h1>Eine grosse &Uuml;berschrift.</h1>

<h2>Noch eine &Uuml;berschrift.</h2>

<h3>Jetzt wird es schon kleiner.</h3>

<h4>Noch eine Stufe kleiner.</h4>

<h5>Noch kleiner.</h5>

<h6>Die kleinste &Uuml;berschrift.</h6>

</body>

</html>


Hier das Ergebnis der sechs Überschriften:

 

Die Ziffer hinter dem <h?> ist Teil des Tags und wird auch im schliessenden Tag wiederholt. Je kleiner die Zahl, desto grösser die Schrift, auswählen können Sie zwischen <h1> bis <h6>. Eine Garantie, dass der Text genauso dargestellt wird, wie Sie es getestet haben, gibt es allerdings auch hier wieder nicht.

 

 

Kursiv und Unterstrichen

Um bestimmte Begriffe im Text oder aber auch ganze Textpassagen hervorzuheben, haben Sie bereits das Tag <b> zum fett formatieren kennen gelernt. Mit <i> (italic) setzen Sie den Text kursiv und mit <u> (underline) können Sie Text unterstreichen. Durchgestrichenen Text erzeugen Sie bei älteren Browsern mit <strike> oder, heute üblich, mit <s>.

<html>

<head>

<title>Kursiv, Unter- und durchgestrichen</title>

</head>

<body>

Hier wieder der normale Text.<br>

Das ist <b>kein</b> <u>Hyperlink</u><br>

<i>Ein schr&auml;ger Text.</i><br>

Vorher <s>24,95</s> Jetzt 19,95<br>

Oder so <strike>24,95</strike><br>

<i><u><s>Und hier alles</i></u></s>

</body>

</html>

Und das Ergebnis:

 

Da Hyperlinks auf Webseiten standardmässig ebenfalls unterstrichen sind, kann die Unterstreichung von Text verwirren. Sie sollten diese Art der Formatierung also besser nicht einsetzen.

Hoch- und tiefstellen

Mathematische Formeln oder chemische Bezeichnungen benötigen häufig die hoch- oder tiefgestellten Zahlenangaben. Auch hierfür stehen Ihnen die passenden Tags zur Verfügung.

<html>

<head>

<title>Hoch- und tiefgestellt</title>

</head>

<body>

Kohlendioxyd entspricht CO<sub>2.</sub><br>

Wasser kann man auch so schreiben H<sub>2</sub>O.<br>

Zwei hoch zehn, oder 2<sup>10.</sup><br>

100 Kubikmeter, oder 100 m<sup>3.</sup>

</body>

</html>

Der Browser zeigt dann folgendes:

 

 

 

 

Sonderzeichen

Da alle Zeichen die übermittelt werden, nur aus der Standard-ASCII-Tabelle genommen werden dürfen, müssen Zeichen, die dort nicht enthalten sind, speziell codiert werden. Sie haben bereits die Codierung für den Umlaut «ü» (&uuml;) kennen gelernt. Alle Sonderzeichen werden durch «&» eingeleitet und mit «;» abgeschlossen. In der Tabelle sehen Sie einige Zeichen mit Ihren Erklärungen.

Zeichen

Codierung

Bezeichnung

Dezimal

Ä

&Auml;

 

ALT+0196

ä

&auml;

 

ALT+0228

Ö

&Ouml;

 

ALT+0214

ö

&ouml;

 

ALT+0246

Ü

&Uuml ;

 

ALT+0220

ü

&uuml;

 

ALT+0252

&

&amp

Ampersand

ALT+38

<

&lt;

Less then

ALT+60

>

&gt;

Greater then

ALT+62

©

&copy;

Copyright

ALT+0169

®

&reg;

Registered Trademark

ALT+0174

&para;

Paragraph Sign

ALT+0182

Leerzeichen

&nbsp;

Nonbreaking space

 

Ø

&Oslash;

Capital O, slash

ALT+0216

Dies ist natürlich nur eine kleine Übersicht, beinhaltet aber die wichtigsten Zeichen. Besonders hervorzuheben sind die spitzen Klammern. Wenn Sie im Text diese Klammern verwenden wird der Browser den Inhalt zwischen den Klammern als Tag interpretieren. Nutzen Sie deshalb die codierten Zeichen. Auch der Code für das Leerzeichen verhält sich anders als das normal getippte Leerzeichen. Hier werden die Leerzeichen nicht zu einem zusammengefasst.

<html>

<head>

<title>Sonderzeichen</title>

</head>

<body>

Zwei Leerzeichen<br>

Zwei&nbsp;&nbsp;Leerzeichen<br>

Copyright &copy &COPY<br>

Trademark &reg &REG<br>

</body>

</html>

Achten Sie auf Gross- und Kleinschreibung, wenn Sie die Sonderzeichen benutzen. Nicht alle Browser reagieren gleich und stellen die Zeichen korrekt dar. Unvorhersehbare Resultate wären dann das Ergebnis, in der Regel gibt der Browser dann den kompletten Quellcode aus (was ja auch nicht Sinn der Sache ist).

Bilder und Hyperlinks

Das gesamte Web besteht aus einer Unmenge von Hyperlinks. Diese Links sind sozusagen Wegweiser zu bestimmten Punkten innerhalb einer Webseite, einer Web-Site oder zu anderen Web-Sites. Je nachdem, wohin die Sprungmarke zeigen soll, muss der Link zur Marke entsprechend angegeben werden. Wenn Sie sich z.B. im Verzeichnis «FrontPage/Webseiten» befinden und von dort eine Datei im selben Verzeichnis aufrufen möchten, müssen Sie nur den Namen der Datei angeben, weist der Link auf ein anderes Verzeichnis, geben Sie den kompletten Pfad mit an.

Hyperlink einbinden

Um einen Link in der Seite einzubinden, verwenden Sie das Container-Tag <a> (anchor = Anker). Fügen Sie die Ziel-URL zwischen diesen Tags ein.

<html>

<head>

<title>Ein Hyperlink</title>

</head>

<body>

Dies ist ein <a href="http://www.pcwelt.de">Hyperlink</a>
zur Homepage der PC-Welt.

</body>

</html>

Der Text zwischen den Tags wird sensitiv, das bedeutet, der Mauszeiger verwandelt sich über dem Link in eine Hand. Daran können Sie auch einen Link von einem unterstrichenem Text unterscheiden. Wenn Sie nun auf diesen Link klicken (ein einfacher Klick reicht), werden Sie automatisch auf die Homepage der «PC-Welt» weitergeleitet.

Sprung innerhalb der Site

Jede der von Ihnen erstellten Webseiten ist eine eigene Datei in einem bestimmten Verzeichnis. Sie können die Seiten so miteinander verlinken, dass Sie von einer zur anderen springen.

Schreiben Sie den Quellcode für die beiden Seiten ab und speichern diese in zwei Dateien:

Datei 1

<html>

<head>

<title>Link in einer Site Datei 1</title>

</head>

<body>

<h3>Das ist die erste Seite</h3>

Ein Klick auf diesen Link <a href="/datei2.html">Datei 2</a>

öffnet die zweite Seite.

</body>

</html>

Datei 2

<html>

<head>

<title>Link in einer Site Datei 2</title>

</head>

<body>

<h3>Das ist die zweite Seite</h3>

Ein Klick auf diesen Link <a href="/datei1.html">Datei 1</a>

öffnet die erste Seite.

</body>

</html>

 

 

 

 


Da Sie im obigen Beispiel nur die Dateinamen angegeben haben, müssen sich beide Dateien im selben Verzeichnis befinden.

Befinden sich die Dateien nicht im selben Verzeichnis, dann geben Sie den Pfad folgendermassen an, um eine Seite aufzurufen:

Ein Klick auf diesen <a href="/../Formatierung/Ausrichtungen.html">Link</a>

öffnet eine neue Seite.

Jetzt gehen Sie in der Verzeichnisstruktur eine Stufe höher und wechseln dort in das angegebene Verzeichnis und rufen die entsprechende Datei auf.

Sprung innerhalb der Seite

Auf längeren Seiten ist es hilfreich, die Seite mit Überschriften zu strukturieren. Diese Überschriften platzieren Sie als Link am Anfang der Seite. So kann der Surfer schnell zu einem Punkt innerhalb der Seite springen, ohne den gesamten Inhalt durchzuscrollen. Benutzen Sie diese Art der Navigation aber nur auf wirklich umfangreichen Seiten -- so dass man den Sprung auch bemerkt.

<html>

<head>

<title>Sprung in einer Seite</title>

</head>

<body>

<font size="+2"><a href="#marke1">Sprung zum Thema 1</a></font><br>

<font size="+2"><a href="#marke2">Sprung zum Thema 2</a></font><br>

<p>

<a name="marke1"><b>Thema 1</b></a><br>

Hier steht dann der<br>

Text zum<br>

Thema 1<br>

<p>

<a name="marke2"><b>Thema 2</b></a><br>

Hier steht dann der<br>

Text zum<br>

Thema 2

</body>

</html>

Es lässt sich auch ein Sprung von einer Seite auf eine bestimmte Stelle einer anderen Seite realisieren. Dazu müssen Sie auf der Zielseite natürlich die Marke einfügen und die Datei um den Namen der Marke erweitern. Die Namen können Sie frei wählen, achten Sie nur darauf, dass sie an die richtige Stelle verweisen.

Ein Klick auf diesen <a href="/../Formatierung/Ausrichtungen.html#marke1">
Link</a>öffnet eine neue Seite.

Farbige Hyperlinks

Sie haben sicherlich bemerkt, dass die eingefügten Links ausser der Unterstreichung auch blau dargestellt werden und besuchte, also angeklickte, sich farblich in magenta geändert haben. Dies wäre wieder einmal der Standard, kann aber im Browser auch wieder angepasst worden sein und anders dargestellt werden.

Möchten Sie trotzdem die Farben der Hyperlinks beeinflussen, nutzen Sie die drei Attribute «link» (Hyperlink), «vlink» (visited = besuchte) und «alink» (active) im <body>-Tag für die Farbzuweisungen.

<html>

<head>

<title>Sprung in einer Seite</title>

</head>

<body link=#FF0000 vlink=#808080 alink=#008080>

<font size="+2"><a href="#marke1">Sprung zum Thema 1</a></font><br>

<font size="+2"><a href="#marke2">Sprung zum Thema 2</a></font><br>

<p>

<a name="marke1"><b>Thema 1</b></a><br>

Hier steht dann der<br>

Text zum<br>

Thema 1<br>

<p>

<a name="marke2"><b>Thema 2</b></a><br>

Hier steht dann der<br>

Text zum<br>

Thema 2

</body>

</html>

Bilder einfügen

Bilder können Sie nicht direkt in eine Webseite einfügen sondern nur mit dieser verlinken. Die Bilder müssen in den Formaten «gif» oder «jepg» vorliegen, damit sie von jedem Browser angezeigt werden können. Wie bei dem normalen Link auf eine andere Seite (Datei) behandeln Sie auch die Bilder. Fügen Sie einfach den entsprechenden Tag <img src=““> mit dem Namen der Bilddatei in den Quellcode ein:

<html>

<head>

<title>Ein Bild</title>

</head>

<body>

Sie sehen zwei Bilder<br>

einmal in der Originalgr&ouml;sse<br>

und einmal in einer vorgegebenen Gr&ouml;sse<br>

mit einem Rand und alternativem Text.<br>

<img src="/../bilder/smiley_true.gif" alt="" border="0"><p>

<img src="/../bilder/smiley_true.gif" width="30" height="30"

border="2" alt="smiley_true.gif">

</body>

</html>

Den Pfad zur Bilddatei müssen Sie wieder relativ oder absolut angeben, je nachdem wo sich die Datei befindet. Achten Sie besonders auf die Schreibweise, da viele Systeme zwischen Gross- und Kleinschreibung unterscheiden und so eventuell Ihre Dateien nicht finden. Die Angaben «width» für die Breite und «height» für die Höhe sind nicht zwingend, sollten aber immer verwendet werden, da der Browser den Platz für das Bild dann schon vor dem eigentlichen Ladevorgang für die Datei bereitstellen kann. Das Layout ist somit schneller erkennbar. Ob Sie dem Bild mit dem Attribut «border» einen Rahmen zuweisen, bleibt Ihnen überlassen. Setzen Sie den Wert auf null oder verzichten ganz auf dieses Attribut. Mit dem Attribut «alt» weisen Sie der Grafik einen alternativen Text zu. Wie Sie wissen, können Sie die Anzeige von Bildern im Browser unterdrücken um den Ladevorgang zu beschleunigen. Der Text sollte dem Surfer dann aber mitteilen, was sich hinter diesem Bild verbirgt.

Grafik als Link

Eine weitere Möglichkeit, mit Bildern zu arbeiten, ist, diese als Schaltfläche für Hyperlinks zu nutzen. Die Grundvoraussetzungen kenn Sie bereits, Sie müssen lediglich den Text durch das <img>-Tag ersetzen.

<html>

<head>

<title>Link mit Bild zu Datei 2</title>

</head>

<body>

<h3>Das ist Datei 1</h3>

Ein Klick auf <a href="/datei2.html"><img src="/../bilder/smiley_true.gif"

width="15" height="15" border="0" alt="Zu Datei 2"></a>

öffnet Datei 2.

</body>

</html>


Bilder als Hintergrund

Eine weitere Einsatzmöglichkeit sind Hintergründe. Da Sie nicht wissen, in welcher Fenstergrösse der Surfer seinen Browser geöffnet hat, hilft Ihnen diesmal bei allen Browsern der Effekt, Hintergrundbilder zu kacheln. Das bedeutet, das ein kleines Bild so oft in der Breite und Höhe nebeneinander gesetzt wird, bis der Hintergrund komplett ausgefüllt wurde. So müssen keine umfangreichen Bilder übertragen werden und die Ladezeit der Seite wird verkürzt. Das Attribut «background» fügen Sie im <body>-Tag ein.

<html>

<head>

<title>Hintergrund</title>

</head>

<body background="../bilder/smiley_true.gif">

<h1><font color="red" face="Arial Black">

Ein gekachelter Hintergrund!</font></h1>

</body>

</html>

Gleichzeitig wurde auch noch die Schriftart und –grösse verändert, die Lesbarkeit leidet aber trotzdem. Verwenden Sie daher nach Möglichkeit eher blasse Bilder die dann wie ein Wasserzeichen auf Ihren Seiten wirken.

 

Wenn Sie ein Bild in der Grösse von 1000 Pixel Breite und 1 Pixel Höhe erstellen und mit einem Farbverlauf füllen, erhalten Sie schnell den nebenstehenden Effekt. Dies wirkt schon professionell und ist in wenigen Minuten mit einem Grafikprogramm erledigt. Sie müssen allerdings ein Programm verwenden, welches die Datei im «gif-Format» abspeichern kann. In den Quellcode fügen Sie es ebenfalls über das Attribut «background» ein.

Formulare

Bisher haben Sie sich nur mit der Gestaltung und Darstellung der Webseiten beschäftigt. Die Interaktivität wurde bisher noch nicht berücksichtigt. HTML stellt Ihnen Formulare bereit, damit der Surfer auch reagieren kann. Es kommen zwei weitere Tags hinzu, das <form>-Tag für die Erstellung von Formularen und das <input>-Tag für die Eingabe in die Formulare.

<html>

<head>

<title>Das erste Formular</title>

</head>

<body>

<form>

<input><!--Hier stehen die Eingabefelder-->

</form>

</body>

</html>

Mail an Autor

Auch wenn Sie nun ein Eingabefeld erzeugt haben, in das der Nutzer etwas eingeben kann, ohne serverseitige Unterstützung können Sie diese Eingaben, mal abgesehen von verwendeten Skripten, nicht nutzen. Sinnvoll und von den heutigen Browsern unterstützte Funktion wäre das Absenden eine E-Mail an den Verfasser der Webseite. Dafür muss dann eine Aktion ausgeführt werden, den Schalter hierzu erzeugen Sie im <form>-Tag.

<html>

<head>

<title>Mailto</title>

</head>

<body>

<form action="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">

<input type=text name=Anforderung size=30>

<input type=text name=Mailadresse size=30>

<input type=submit name="Abschicken" value="Mail senden!">

</form>

</body>

</html>

Ein Klick auf die Schaltfläche
«Mail senden» öffnet Ihr Mailprogramm mit dem Fenster für eine neue Nachricht. Der Empfänger wurde schon automatisch eingetragen. Dem hier verwendeten Attribut «type» weisen Sie einen der folgenden Parameter zu.

 

Parameter

Beschreibung

Button

Schaltfläche

Checkbox

Kontrollkästchen, übermittelt nur den Wert «ja» oder «nein»

Image

Bild dient als Schaltfläche

Password

Textfeld, welches den eingegebenen Wert erfasst und sendet, aber nur Sternchen anzeigt

Radiobutton

Option zur Auswahl aus mehreren Alternativen

Reset

Setzt alle Formularelemente auf die Standardwerte zurück

Submit

Schaltfläche, die die «action» im <form>-Tag auslöst

Text

Feld zur Eingabe von Text und Zahlen

Informationen abfragen

Mit dem vorherigen Beispiel soll der Surfer veranlasst werden, Ihnen eine E-Mail mit Informationen zu senden. Meist ist es besser, eine Art Fragebogen anzubieten. Dort klickt der Surfer bestimmte Punkte an und verschickt das Formular anschliessend mit einem Klick.

Geben Sie den unten stehenden Quellcode einmal ein und sehen sich das Ergebnis dann in Ihrem Browser an:

<html>

<head>

<title>Formular senden</title>

</head>

<body>

<form action="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">

Vorname: <input type="Text" name="vorname" value="" size="30"><br>

Name: <input type="Text" name="name" value="Eintrag erforderlich" size="30"><br>

E-Mail <input type="Text" name="mail" value="Eintrag erforderlich" size="30"><br>

<p>

<p><h3>Wie beurteilen Sie diese HTML-Anleitung:</h3></p>

<input type="Radio" name="urteil" value="n1">Note 1

<input type="Radio" name="urteil" value="n2">Note 2

<input type="Radio" name="urteil" value="n3">Note 3<br>

<input type="Radio" name="urteil" value="n4">Note 4

<input type="Radio" name="urteil" value="n5">Note 5

<input type="Radio" name="urteil" value="n6">Note 6<br>

<p><h3>Wo suchen Sie noch weitere Informationen?</h3></p>

<input type="Checkbox" name="suche" value="schule">Abendschulen<br>

<input type="Checkbox" name="suche" value="buch">Fachb&uuml;cher<br>

<input type="Checkbox" name="suche" value="web">Internet<br>

<input type="Checkbox" name="suche" value="online">Hilfe im Programm<br>

<p>

<input type="Submit" name="form senden" value="Los!">

<input type="reset" value="Neue Eingaben">

</form>

</body>

</html>


Die Eingabefelder können leer sein, Sie können wichtigen Feldern allerdings auch einen Wert zuweisen. Wenn Sie mit der Tab-Taste durch die Felder springen, wird der vorgegebene Text automatisch markiert und Ihre Eingabe ersetzt ihn dann.

Die Beurteilung wurde mit «RadioButtons» realisiert. Dies sind Optionen und deshalb lässt sich auch nur immer eine Option auswählen. Eine neue Auswahl ersetzt die alte. Über die «Checkbox» können Sie mehrere Auswahlen treffen und durch einen erneuten Klick auch wieder entfernen.

Die Schaltflächen am Ende des Formulars verschicken das Formular bzw. setzen alle von Ihnen gemachten Einstellungen wieder zurück und Sie können das Formular erneut ausfüllen.

Die gleichmässige Ausrichtung der Eingabefelder lässt sich so nicht realisieren. Dazu müssen Sie, wie Sie später noch erfahren, eine Tabelle einsetzen.

Listen

In Formularen finden Sie immer wieder Listen, aus denen Sie etwas auswählen können. Hier hilft Ihnen das Tag «select».

<html>

<head>

<title>Einfache Liste</title>

</head>

<body>

<form action="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">

<select name="alter">

<option value="weniger">Unter 30 Jahre<br>

<option value="mehr">&Uuml;ber 30 Jahre

</select>

<input type="Submit" name="form senden" value="Los!">

</form>

</body>

</html>

Es wurde eine einfache Liste erstellt, aus der Sie dann, wie in diesem Beispiel, Ihr Alter auswählen können.


Im ersten Beispiel klappt die Liste nach einem Klick auf den Listenpfeil auf und Sie können nur einen Eintrag auswählen. In dem hier gezeigten Code wurde mit «size» die Zahl der angezeigten Zeilen angegeben und «multiple» bedeutet, das auch mehrere Einträge ausgewählt werden können.

<html>

<head>

<title>Einfache Liste</title>

</head>

<body>

<form action="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">

<select name="alter" size="4" multiple>

<option value="bis20">Unter 20 Jahre<br>

<option value="bis25">Unter 25 Jahre<br>

<option value="bis30">Unter 30 Jahre<br>

<option value="bis35">Unter 35 Jahre

<option value="bis40">Unter 40 Jahre

<option value="bis45">Unter 45 Jahre

<option value="bis50">Unter 50 Jahre

</select>

<input type="Submit" name="form senden" value="Los!">

</form>

</body>

</html>

Textfelder

Wenn Sie dem Surfer die Möglichkeit bieten wollen, zusätzlich zu den im Formular abgefragten Informationen noch einen weiteren zu verfassen, fügen Sie dem Formular ein Textfeld hinzu.

Das Tag «input» kann Text nur einzeilig erfassen, nutzen Sie deshalb besser «textarea».

<html>

<head>

<title>Mehrzeiliges Textfeld</title>

</head>

<body>

<form action="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">

<h3>Ihre Meinung ist uns wichtig!</h3><br>

<textarea name="meinung" cols="30" rows="10"></textarea>

<input type="Submit" name="formsenden" value="Los!">

</form>

</body>

</html>

Die Grösse des Textfeldes wird mit den Attributen «cols» für die Breite in Spalten und «rows» für die Anzahl der Zeilen definiert. Wird mehr Text eingegeben, wird automatisch auch die Bildlaufleiste aktiv. Wenn Sie zwischen das Container-Tag «textarea» noch einen Text einfügen, wird dieser als Standard in der Textbox ausgegeben. Sie können diesen Text allerdings nicht formatieren, wie das folgende Beispiel zeigt.

<html>

<head>

<title>Mehrzeiliges Textfeld</title>

</head>

<body>

<form action="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!">

<h3>Ihre Meinung ist uns wichtig!</h3><br>

<textarea name="meinung" cols="30" rows="10">

Sagen Sie uns Ihre <b>Meinung</b>

 </textarea>

<input type="Submit" name="formsenden" value="Los!">

</form>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

Nummerierungen und Aufzählungen

Diese Listen haben nichts mit den Listen aus den vorherigen Beispielen gemein. Hier zählt wieder das Layout um die Informationen gegliedert zu präsentieren. Unterschieden wird zwischen ungeordneten und geordneten (Aufzählung) Listen.

Einfache Aufzählung

Zum Erstellen einfacher Listen benötigen Sie das Container-Tag «ul» und das
«li»-Tag.

<html>

<head>

<title>Einfache Liste</title>

</head>

<body>

<ul type="square">

<li>Hier steht Punkt 1

<li>Hier steht Punkt 2

 <li>Hier steht Punkt 3

<li>Hier steht Punkt 4

<li>Hier steht Punkt 5

</ul>

</body>

</html>

Der «ul»-Tag umschliesst die komplette Liste und die einzelnen Listenpunkte werden durch das «li»-Tag angegeben. Das Aufzählungszeichen können Sie, wie im Beispiel gezeigt, auswählen. Es stehen Ihnen hier «square», «circle» und «disk» zur Verfügung. Wie so oft werden die Zeichen aber in älteren Browsern nicht korrekt dargestellt bzw. die Angabe ignoriert.

Verschachtelte Aufzählung

Möchten Sie die Aufzählung noch etwas strukturieren und den einzelnen Punkten noch Unterpunkte hinzufügen? Kein Problem, sehen Sie sich das nächste Beispiel an.

<html>

<head>

<title>Verschachtelte Liste</title>

</head>

<body>

<ul>

<li>Hier steht Punkt 1

<ul>

<li>Hier steht Unterpunkt 1a

<li>Hier steht Unterpunkt 1b

<ul>

<li>Hier steht UnterUnterpunkt 1aa

</ul>

</ul>

<li>Hier steht Punkt 2

<li>Hier steht Punkt 3

<li>Hier steht Punkt 4

<li>Hier steht Punkt 5

</ul>

</body>

</html>

Nummerierungen

Sie möchten ihre Liste nicht einfach nur mit Aufzählungszeichen versehen, sondern durchnummerieren. Verwenden Sie das Tag «ol» und Sie erstellen eine Nummerierungsliste. Wenn Sie im oben gezeigten Quellcode den Tag «ul» durch «ol» ersetzen, erhalten Sie das folgende Ergebnis. Hier wäre es angebracht, für die Unterpunkte eine andere Nummerierungsart zu wählen. Der folgende Code zeigt, wie es geht.

<html>

<head>

<title>Nummerierung mit Werten</title>

</head>

<body>

<ol>

<li>Hier steht Punkt 1

<ol type="I">

<li>Hier steht Unterpunkt 1a

<li>Hier steht Unterpunkt 1b

<ol type="A">

<li>Hier steht UnterUnterpunkt 1aa

</ol>

</ol>

<li>Hier steht Punkt 2

<li value="5">Hier steht Punkt 3

<li>Hier steht Punkt 4

<li>Hier steht Punkt 5

</ol>

</body>

</html>

Mit dem Attribut «type» innerhalb des «ol»-Tags geben Sie an, ob arabisch «1», römisch klein «i» oder gross «I» oder alphabetisch klein «a» oder gross «A» nummeriert werden soll. Mit dem Attribut «start» können Sie auch noch einen Startwert festlegen. Soll innerhalb der Liste der Wert manipuliert werden, verwenden Sie das Attribut «value» um die Nummerierung ab diesem Eintrag zu verändern.

Definitionen

Da das Web zur Informationsbeschaffung dient, finden Sie sehr häufig Fachbegriffe auf den einzelnen Seiten. Oft werden diese dann auf extra Seiten aufgelistet und erklärt. Für diese Definitionen stellt Ihnen HTML das ContainerTag «dl» (Definition List) und die Tags «dt» (Definition List Term) bzw. «dd» (Definition List Definition) bereit.

<html>

<head>

<title>Definitionen</title>

</head>

<body>

<dl>

<dt><b>URL</b>

<dd>Uniform Resource Locator<br>

&gt;Einheitlicher Fundstellenanzeiger&lt;

<dt><b>ASCII</b>

<dd>American Standard Code for Information Interchange

&gt;Amerikanische Standardverschlüsselung für den Datenaustausch&lt;

</dl>

</body>

</html>

Im Container befindet sich der zu erklärende Begriff und direkt darunter die passende Erklärung. Formatierungen und der Einsatz von Sonderzeichen sind zur besseren Übersicht auch hier wieder möglich.

Diese Tags lassen sich auch gut verwenden, wenn Sie eine einfache Aufzählung ohne die entsprechenden Aufzählungszeichen erstellen möchten.

Tabellen

Auf Webseiten begegnen Sie immer wieder den Tabellen. Mal offensichtlich, gefüllt mit Informationen und entsprechend formatiert, oft aber auch unsichtbar. Zu diesem Zweck müssen Sie ja nur die Rahmenlinien um die Tabelle und Zellen ausblenden. Dann dienen diese Tabellen dem Layout (erinnern Sie sich noch an die nicht auszurichtenden Textfelder?) und der Anordnung verschiedener Elemente auf der Webseite.

Einfache Tabelle

Tabellen erstellen Sie mit drei Containern. Das «table»-Tag umschliesst die gesamte Tabelle, mit «tr» (Table row) fügen Sie eine Zeile und mit «td» (Table cell definition) fügen Sie die Daten ein, was dann mit der Erstellung einer Zelle gleichzusetzen ist.

<html>

<head>

<title>Einfache Tabelle</title>

</head>

<body>

<table border="1">

<tr>

<td>Eine Zelle mit Rand.</td>

</tr>

</table>

</body>

</html>

Dies ist der Quellcode für eine Tabelle, die aus nur einer Zelle besteht. Mit dem Attribut «border» legen Sie die Stärke der Linie fest. Setzen Sie als Wert «0» ein, wird die Tabelle ohne Rahmen dargestellt und als solche vom Surfer auch nicht so schnell erkannt.

Mehrspaltige Tabelle

Wenn Sie mehr Spalten und Reihen benötigen, ergänzen Sie den Code entsprechend um die Anzahl der Tags «tr» und «td», eine Begrenzung gibt es hier nicht.

<html>

<head>

<title>Mehrspaltige Tabelle</title>

</head>

<body>

<table border="1">

<tr>

<td> Salzwedel</td>

<td> 03901</td>

<td> 29410</td>

</tr>

<tr>

<td> Lüchow</td>

<td> 05841</td>

<td> 29439</td>

</tr>

<tr>

<td> Gardelegen</td>

<td> 03907</td>

<td> 39638</td>

</tr>

<tr>

<td> Stendal</td>

<td> 03931</td>

<td> 39576</td>

</tr>

</table>

</body>

</html>

Um die Masse der einzelnen Zellen und damit auch der Tabelle müssen Sie sich keine Gedanken machen. Das Minimum wird so gesetzt, dass der Inhalt dargestellt werden kann und das Maximum richtet sich nach der Grösse des Browserfensters aus. Somit wird auch eine vernünftige Darstellung auf allen Systemen gewährleistet.

Im obigen Beispiel ist aber der Sinn und Zweck der Tabelle nicht sofort ersichtlich. Besser wäre es, wenn die Tabelle für sich eine Bezeichnung erhalten und die einzelnen Spalten noch beschriftet würden. Die Überschrift für die Tabelle erstellen Sie mit dem Container-Tag «caption» (Titelzeile) und die Spaltenüberschriften mit «th» (Table header).

</head>

<body>

<table border="1">

<caption>Vorwahl + PLZ</caption>

<tr>

<th>Stadt</th>

<th>Vorwahl</th>

<th>PLZ</th>

</tr>

<tr>

<td> Salzwedel</td>

<td> 03901</td>

<td> 29410</td>

</tr>

</table>

</body>

</html>

Sie verwenden den «th»-Tag genauso wie «td». Er verhält sich auch genauso, bis auf den Unterschied, das er den Text zentriert und fett darstellt.

Komplexe Tabellen

Wenn Ihnen das starre Gerüst der Tabelle noch nicht entspricht, können Sie auch einzelne Zellen miteinander verbinden. So liessen sich dann die Vorwahl und PLZ in unserem obigen Beispiel untereinander neben der Zelle mit dem Inhalt der Stadt ausgeben. Die Attribute «rowspan» und «colspan» kommen zum Einsatz.

<html>

<head>

<title>Verbundene Zellen</title>

</head>

<body>

<table border="1">

<caption>Vorwahl + PLZ</caption>

<tr>

<th>Stadt</th>

<th>Vorwahl<br>PLZ</th>

</tr>

<tr>

<td rowspan="2"> Salzwedel</td>

<td> 03901</td>

</tr>

<tr>

<td> 29410</td>

</tr>

<tr>

<td rowspan="2"> Lüchow</td>

<td> 05841</td>

</table>

</body>

</html>

Beachten Sie, dass bei der Spaltenüberschrift die Zellen nicht verbunden wurden, sondern dass dies mit einem Zeilenumbruch erreicht wurde.

Tabelle formatieren

Bisher machen die Tabellen noch nicht sehr viel her. Doch ein paar Möglichkeiten, die Tabelle ansprechender zu gestalten, bietet Ihnen HTML.

</head>

<body>

<table border="1">

<tr>

<td>Das ist</td>

<td>Standard</td>

</tr>

</table>

<hr>

<table border="15" bordercolor="red" cellpadding="1" cellspacing="10" align="center">

<tr>

<td>Das ist</td>

<td>kein Standard</td>

</tr>

</table>

<hr>

<table border="15" cellpadding="10" cellspacing="1" align="right">

<tr>

<td>Das ist</td>

<td>kein Standard</td>

</tr>

</table>

</body>

</html>

Mit dem Attribut «cellpadding» bestimmen Sie den Freiraum in Pixeln zwischen den einzelnen Zellen. Mit «cellspacing» bestimmen Sie den Freiraum zwischen dem Text und dem Rand der Zelle. Das Attribut «align»zum Ausrichten kennen Sie bereits und mit «bordercolor» legen Sie die Farbe für den Rand fest. Es gibt hier wie auch bei anderen bereits behandelten Themen oft noch mehr Attribute, doch soll dies hier kein HTML-Kurs sein, sondern nur das Verständnis fördern, wenn Sie später den erzeugten Quellcode in FrontPage betrachten.

Tabelle zum Gestalten nutzen

Auf Ihrer Webseite möchten Sie verschiedene Elemente an ganz bestimmten Stellen ausrichten. Dies ist mit HTML nicht so ohne weiteres möglich. Zerlegen Sie deshalb die Seite in Rechtecke (rastern) um die Inhalte dort zu platzieren, wo Sie sie dargestellt haben möchten. Die Zellen einer Tabelle symbolisieren dann die einzelnen Rechtecke. Da sich die Zellen an den Inhalt anpassen und so die Tabelle nicht stabil ist, füllen Sie die Zellen mit einem Bild. Dies sollte transparent sein und eine feste Breite und Höhe haben.

<html>

<head>

<title>Gestalten mit Tabellen</title>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0">

<tr>

<td></td>

<td><img src="/../Bilder/leer.gif" hspace="50"></td>

<td><img src="/../Bilder/leer.gif" hspace="50"></td>

<td><img src="/../Bilder/leer.gif" hspace="50"></td>

<td><img src="/../Bilder/leer.gif" hspace="50"></td>

</tr>

<tr>

<td><img src="/../Bilder/leer.gif" vspace="25"></td>

<td colspan="4">A B C und D</td>

</tr>

<tr>

<td><img src="/../Bilder/leer.gif" vspace="25"></td>

<td rowspan="2">E und I</td>

<td>F</td>

<td>G</td>

<td>H</td>

</tr>

<tr>

<td><img src="/../Bilder/leer.gif" vspace="25"></td>

<td>J</td>

<td>K</td>

<td colspan="2">L und P</td>

</tr>

<tr>

<td><img src="/../Bilder/leer.gif" vspace="25"></td>

<td>M</td>

<td>N</td>

<td>O</td>

</tr>

</table>

</body>

</html>


In der ersten Zeile fügen Sie fünf Zellen ein, wobei die erste leer und die anderen mit der transparenten Grafik gefüllt sind. Um die Breite der Zellen festzulegen, weisen Sie der Grafik eine feste Breite mit «hspace» zu. In den nächsten Zeilen fügen Sie die Grafik immer in die erste Zelle ein, um dort die Höhe der Zellen mit «vspace» zu definieren. Wenn Sie möchten, können Sie natürlich auch noch Zellen in Zeilen oder auch Spalten verbinden, wenn Sie den Platz benötigen. Die Tabelle sieht am Ende folgendermassen aus:

Wenn Sie jetzt noch den Wert für den Zellenrand mit dem Attribut «border» auf «0» setzen, kann man nicht mehr von vorneherein erkennen, das es sich um eine Tabelle handelt. Der Zweck der Übung wurde allerdings erfüllt, Sie haben Ihren Text wie gewünscht auf der Seite ausgerichtet.

 

 

 

 

 

Image Maps

Diese Art der Navigation finden Sie häufig im Web. Sie haben ja bereits eine Grafik in die Seite eingefügt und mit einem Link versehen, der dann auf eine andere Webseite verweist. Mit Image Maps können Sie eine Grafik in kleine Bereiche aufteilen und dann diese Bereiche jeweils mit einer Seite verknüpfen. Ist z.B. der Inhalt in mehreren Sprachen verfügbar, so bietet sich eine Weltkarte als Grafik an. Wenn Sie dann auf das entsprechende Land klicken, wird die Seite in dieser Sprache geöffnet. Oder aber Sie verweisen, wie im Beispiel gezeigt, mit Hilfe einer Grafik auf Ihre Angebotspalette.

Voraussetzung ist die Grafik mit den Links und natürlich auch die Seiten, auf die die Links verweisen. Erstellen Sie also die entsprechenden Seiten und verlinken diese dann. Um den Bereich in der Grafik festzulegen, wo der Link zur Anwendung kommt, haben Sie verschieden Möglichkeiten. Sie können ein Rechteck, einen Kreis, einen Punkt oder ein Polygon definieren. Für ein Rechteck geben Sie zuerst den x- und y-Wert für die obere linke und dann die Werte für die untere rechte Ecke an.

In der Tabelle sehen Sie die Möglichen Varianten mit deren Namen und Beispielen:

 

Name

Bereich

Parameter

Beispiel

Rechteck

Rect

x- und y-Koordinaten Startpunkt,
x- und y-Koordinaten Endpunkt

95, 180 ,175, 300

Kreis

Circle

x- und y-Koordinaten für den Mittelpunkt, Radius

286, 375, 15

Punkt

Point

x- und y-Koordinaten

100, 200

Polygon

Poly

x- und y-Koordinaten,
x1- und y1-Koordinaten,
x2- und y2-Koordinaten...bis 160 Polygone

5, 10, 20, 35, 45 ,50, ...

 

Hier aber jetzt das Beispiel für die Navigation mit Image Maps:

<html>

<head>

<title>Navigation mit Image Maps</title>

</head>

<body>

<map name="navigation">

<area shape="RECT" coords="95, 180, 175, 300" href="/Multimedia.html" alt="Multimedia">

<area shape="RECT" coords="507, 279, 618, 404" href="/Multimedia.html" alt="Multimedia">

<area shape="RECT" coords="236, 257, 475, 350" href="/Hardware.html" alt="Hardware">

<area shape="RECT" coords="244, 20, 505, 222" href="/Monitor.html" alt="Monitor">

<area shape="CIRCLE" coords="286, 375,15" href="/Software.html" alt="Software">

<area shape="RECT" coords="17, 370, 200, 442" href="/Zubeh&ouml;r.html" alt="Zubeh&ouml;r">

<area shape="RECT" coords="330, 408, 395, 441" href="/Zubeh&ouml;r.html" alt="Zubeh&ouml;r">

</map>

<img src="/computer.gif" width="630" height="472" border="0" alt="" usemap="#navigation">

</map>

</body>

</html>

Wenn Sie den Quellcode übernehmen möchten, denken Sie daran, auch die Seiten zu erstellen, auf die Links verweisen. Dort reicht zum testen ja eine einfache Überschrift.


Das Ergebnis sieht dann so aus:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Frames

Mit Frames teilen Sie das Browserfenster in mehrere Bereiche auf, wobei dann jeder Bereich eine andere Seite anzeigen kann. Früher wurden Frames oft zur Einblendung von Werbung genutzt und sind deshalb nicht unbedingt bei allen Benutzern beliebt. Ein weiterer Nachteil ist wieder die mangelnde Unterstützung der Browser. Die alten Versionen können die Frames zum Teil nicht anzeigen und auch wenn die heutigen Browser Frames unterstützen, gibt es immer wieder Darstellungsprobleme bei den Browsern der verschiedenen Herstellern. Frames sind eingerahmt, beanspruchen daher auch mehr Platz in Ihrem Fenster, allerdings haben sie eigene Scrollbalken, so dass sich nur ein Teil des Fensters scrollen lässt, ein Vorteil gegenüber den Tabellen. Ausser dem Mehrbedarf an Platz auf dem Bildschirm benötigt eine Seite mit Frames auch bei der Übertragung mehr Zeit, da Sie zum einen die Steuerdatei (wie ist die Seite unterteilt) und natürlich die Seiten zum Füllen der Frames mit übertragen müssen. Statt einer Seite müssen bei einer dreigeteilten Frameseite insgesamt vier Seiten gleichzeitig geladen werden. Trotzdem können Sie, wenn es dass Layout erfordert, Frames benutzen.

<html>

<head>

<title>Ein erster Frame</title>

</head>

<frameset cols="30,70">

<frame src="/links.html">

<frame src="/rechts.html">

</frameset>

</html>

Beachten Sie, dass im Quellcode das Container-Tag «body» durch «frameset» ersetzt wird. In diesem Beispiel wurde die Seite in zwei Bereiche mit den Grössen von 30 bzw. 70% der Fensterbreite geteilt und mit Inhalten verlinkt.

Wenn Sie anstatt «cols» das Attribut «rows» gewählt hätten, wäre die Seite horizontal, also in Zeilen geteilt worden. Sie können die Attribute auch gemeinsam verwenden, und in einem «frameset» noch ein weiteres erstellen.

<html>

<head>

<title>Ein erster Frame</title>

</head>

<frameset rows="30%,70%">

<frame src="/oben.html">

<frameset cols="20%,80%">

<frame src="/links.html">

<frame src="/rechts.html">

</frameset>

</framset>

</html>

In diesem Beispiel wurde die Seite in zwei Zeilen und die untere Zeile dann nochmals in zwei Spalten unterteilt.

Die Parameter für die Attribute «cols» und «rows» können Sie in Pixel oder in Prozent angeben. Bei der Prozentangabe ändert sich die einzelnen Frames dann mit der Grösse des Browserfensters. Weiterhin können Sie auch den Parameter «*» verwenden. Das Beispiel rows=“*,30,*“ teilt das Fenster in drei Zeilen, wobei die mittlere 30% des Fensters einnimmt und die anderen Zeilen sich den verfügbaren Rest teilen. Wenn der Inhalt im Frame nicht angezeigt werden kann, werden die Bildlaufleisten benötigt. Mit scrolling=“auto“ werden die Leisten automatisch angezeigt, wenn der Platz nicht reicht. Die Parameter «no» bzw. «yes» blenden die Leisten immer aus bzw. ein. Sollen die Ränder der einzelnen Frames nicht angezeigt werden, so verwenden Sie frameborder=“0“ oder einen entsprechenden Wert um die Linien breiter anzeigen zu lassen.

Um ältere Browser nicht auszusperren, sollten Sie, wenn Sie Frames einsetzen, folgenden Code mit unterbringen:

</framset>

<noframes>

Ihr Browser beherrscht leider keine Frames.

</noframes>

</html>

Cascading Style Sheets (CSS)