PHP 5 - Ein praktischer Einstieg
2. Auflage

PHP 5 - Ein praktischer Einstieg, 2. Auflage

Von Ulrich Günther
2. Auflage, August 2004
O'Reilly Verlag, ISBN: 3-89721-278-1
www.oreilly.de/catalog/einphp2ger/



TOC PREV NEXT INDEX

Kapitel 3

Kapitel 3

Basiswissen HTML

Wenn Sie sich ernsthaft mit der Programmierung von Webseiten beschäftigen wollen, dann werden Sie nicht an HTML vorbeikommen. Vielleicht kennen Sie HTML auch schon. In diesem Fall können Sie dieses Kapitel vorläufig überspringen. Wenn Sie jedoch noch nicht wissen, was ein <tr>-Tag ist und was sich hinter href verbirgt, erfahren Sie in diesem Kapitel alles, was Sie zu HTML wissen müssen.

Eine praktische Einführung in HTML

HTML, die HyperText Markup Language, ist die Lingua Franca der Webbrowser - fast jede Website, die Sie in Ihrem Browser angezeigt bekommen, ist in HTML geschrieben. Das ist auch dann der Fall, wenn Sie sie mit Netscape Composer, Microsoft Word, FrontPage, Adobe PageMill oder einem anderen WYSIWYG-Werkzeug (WYSIWIG - What You See Is What You Get) erstellt haben. Sobald Sie mehr als nur statische Seiten erstellen wollen, ist es fast unumgänglich, unter die Motorhaube zu gucken und selbst HTML zu schreiben. HTML ist das Grundgerüst für die weitaus meisten Skriptanwendungen und damit unter anderem auch für PHP.

Die gute Nachricht: HTML ist gar nicht so schwer! Die Grundkonzepte von HTML werden Sie in diesem Kapitel lernen. Dazu gehören eine ganze Anzahl einfacher Tags, die es Ihnen ermöglichen werden, Webseiten mit Überschriften in verschiedenen Größen, mit Paragraphen, Sonderzeichen, in Fett- und Kursivschrift sowie Seiten mit Tabellen, Listen, Bildern und Links zu anderen Seiten zu erstellen. Einige weitere Konzepte, insbesondere was die Benutzung von Formularen betrifft, werden Ihnen in späteren Kapiteln begegnen. Damit bekommen Sie schon ein gutes Grundgerüst für Ihre Arbeit. Zur weiteren Lektüre und als detailliertes Nachschlagewerk bei Problemen in allen HTML-Lebenslagen gibt es HTML & XHTML - Das umfassende Referenzwerk von Chuck Musciano und Bill Kennedy (O'Reilly Verlag).

Sie können HTML-Dateien mit jedem beliebigen Texteditor (z.B. Notepad, Editpad vi, nedit, emacs etc.) öffnen und bearbeiten. Von dieser Möglichkeit sollten Sie großzügig Gebrauch machen - Probieren geht über Studieren!

HTML-Grundbegriffe

Text versus Tags

Im Prinzip besteht Ihre normale Feld-Wald-und-Wiesen-Webseite aus ganz normalem, geschriebenem Text, so wie Sie z.B. einen Text in Notepad schreiben können. Dieser Text enthält aber noch keine Formatierungen. Klar, Sie können Ihre eigenen Zeilenumbrüche, Absätze und Leerzeilen einfügen. Wenn Sie die Seite dann aber in Ihren Browser laden, werden Sie feststellen, dass der Browser diese Zeilenumbrüche, Absätze und Leerzeilen komplett ignoriert. Der Text wird als ein einziger monolithischer Block dargestellt.

Warum? Nun, in HTML ist eine Folge von Leerzeichen oder Zeilenumbruchzeichen genauso viel wert wie ein einzelnes Leerzeichen und wird auch so dargestellt. Damit ist es egal, ob Sie zehntausend Leerzeilen zwischen zwei Paragrafen einfügen - der Browser schrumpft sie gnadenlos auf ein einziges Leerzeichen zusammen. Um Ihren Text so vor der Verhunzung zu retten, müssen Sie ihn mit Markup-Auszeichnungen versehen.

Markup in HTML besteht im Prinzip aus zwei Typen: Tags und Entities. In der Regel werden Sie in einem HTML-Dokument mehr Tags als Entities finden. Entities werden hauptsächlich zur Darstellung von Sonderzeichen verwendet - siehe dazu auch den Abschnitt »HTML Character Entities« weiter unten.

Einfache Tags bestehen aus einem »kleiner als«-Zeichen (<), dem Tag-Bezeichner und einem abschließenden »größer als«-Zeichen (>), beispielsweise <p>. Dabei handelt es sich um das »Paragrafentag« - wenn Sie also <p> in Ihren Text einfügen, wird an dieser Stelle vom Browser ein Absatz eingefügt:

<p>Dieser Text steht im ersten Absatz.<p>Dieser Satz steht im zweiten Absatz.
 

wird als

Dieser Text steht im ersten Absatz.


 
Dieser Satz steht im zweiten Absatz.
 

dargestellt. Ein Absatz besteht aus einem Zeilenumbruch und einer Leerzeile. Einen Zeilenumbruch ohne Leerzeile können Sie mit dem <br>-Tag einfügen:

Dieser Text steht vor dem Umbruch.<br>Dieser Satz steht in der neuen Zeile.
 

Das sieht im Browser so aus:

Dieser Text steht vor dem Umbruch.

Dieser Satz steht in der neuen Zeile.
 

So einfach geht es allerdings nicht immer. Wenn Sie beispielsweise einen Textabschnitt als fett (bold) markieren wollen, reicht ein einfaches Tag nicht aus. Wir müssen dem Browser mitteilen, ab welcher Stelle der Fettdruck anfangen und von wo an wieder normale Schrift dargestellt werden soll. Dazu verwenden Sie »öffnende« und »abschließende« Tags. Die öffnenden Tags benutzen Sie wie einfache Tags: Fettdruck wird beispielsweise mit dem Tag <b> eingeleitet. Abschließende Tags sehen im Prinzip wie öffnende Tags aus, wobei dem Tag-Bezeichner des abschließenden Tags allerdings ein Schrägstrich vorangestellt wird: </b>. Im Code sieht das so aus:

Die <b>Takahe</b> galt lange als ausgestorben.
 
Bei Tags, für deren Verwendung sowohl ein öffnendes als auch ein abschließendes Tag notwendig ist, wird oft nur von »dem Tag« gesprochen, auch wenn beide Tags gemeint sind. Es versteht sich in dem Fall von selbst, dass beide Teile des Tags notwendig sind. Bei einigen Tags, wie z.B. bei <p>, ist das abschließende Tag </p> (noch) optional.

Die Bezeichner in Tags können Sie zur Interpretation in konventionellen Browsern sowohl groß- als auch kleinschreiben: <p> ist äquivalent zu <P>. Bei Technologien wie XML und XSLT, die eng mit HTML verwandt sind, wird allerdings Kleinschreibung verlangt. Deswegen ist es empfehlenswert, dass Sie Tag-Bezeichner generell klein schreiben. Das gilt auch für Attribute, die wir im übernächsten Abschnitt kennen lernen.

Verschachtelung von Tags

In vielen Fällen werden Sie Tags ineinander verschachteln müssen, wobei das jeweils äußere Tag als eine Art Container für das innere Tag dient. Wenn Sie zum Beispiel einen Textabschnitt fett und kursiv darstellen wollen, geht das so:

Dieser erste Satz enthält einen <b><i>fetten und kursiven Abschnitt</i></b> in der Mitte. So geht es 
auch: Der zweite Satz enthält ebenfalls einen <i><b>fetten und kursiven Abschnitt</b></i>. Man sollte 
aber keine <b><i>&uuml;berlappenden Tags</b></i> verwenden. Das ist extrem unsauber!
 

Obwohl viele Browser überlappende Tags erlauben, kann das zu unklarem Code führen und macht die Fehlersuche schwierig.

Attribute in Tags

Manchmal müssen wir einem Tag auch explizite Informationen darüber mitgeben, wie es im Browser zu interpretieren ist. Das ist beispielsweise der Fall, wenn Sie einen Link auf eine andere Webseite einfügen wollen. Dann müssen Sie den Textteil markieren, durch den beim Klicken mit der Maus der Link aufgerufen werden soll. Dazu brauchen Sie ein öffnendes <a>-Tag und ein abschließendes </a>-Tag, zwischen denen der Text steht, über den der Link aufgerufen werden soll.

Damit weiß der Browser aber noch nicht, was er machen soll, wenn der Benutzer auf den Link klickt. Das können Sie dem Browser mit einem href-Attribut beibringen:

Der Link in diesem Satz verweist auf die <a href="http://www.oreilly.de">Website des O'Reilly 
Verlags</a>.
 

Ein Attribut besteht immer mindestens aus einem Namen, in diesem Fall href. Attribute haben aber auch einen Wert, der ihnen im Tag über ein Gleichheitszeichen zugewiesen wird. Bei einer solchen Zuweisung steht das Attribut auf der linken Seite des Gleichheitszeichens und der Wert auf der rechten.

Der Wert von Attributen sollte eine Zeichenkette sein, d.h. eine Folge von Buchstaben, Zahlen, Sonderzeichen usw. Es ist empfehlenswert, diese Zeichenkette mit doppelten bzw. einfachen Anführungszeichen zu umgeben, insbesondere wenn sie Sonderzeichen oder Leerzeichen enthält. In unserem Beispiel ist der Wert die Zeichenkette "http://www.oreilly.de", die dem Attribut über das Gleichheitszeichen zugewiesen wird.

Wenn Sie gelegentlich einem Attribut ohne Gleichheitszeichen und Wert begegnen, ist das auch normal. Im HTML-Nachfolgestandard XHTML ist das allerdings nicht mehr erlaubt: Dort bekommt jedes Attribut einen Wert zugewiesen. Bei bisher »wertlosen« Attributen wird dann der Name des Attributs zugewiesen. Das heißt, aus:
<option value="schokolade" selected>
wird
<option value="schokolade" selected="selected">

Praktisch alle HTML-Tags verfügen über Attribute und viele über mehr als ein Dutzend. Einige Attribute, wie z.B. name und id, gibt es für praktisch alle Tags, andere sind mehr oder minder weit verbreitet, andere wiederum sind nur für alte Browser-Versionen gültig. Sie alle hier aufzulisten und zu erklären würde den Umfang dieses Buchs vermutlich verdoppeln. Die wichtigsten Tags und die Verwendung ihrer Attribute werden Sie jedoch kennen lernen. Das Buch HTML & XHTML - Das umfassende Referenzwerk, das ebenfalls im O'Reilly Verlag erschienen ist, behandelt alle Tags ausführlich. Zum schnellen Nachschlagen gibt es HTML - kurz & gut von O'Reilly.

Browser-Verhalten bei unbekannten Tags und Attributen

Ein interessanter Aspekt, der für die Weiterentwicklung von HTML sehr bedeutsam ist, besteht in der folgenden Konvention: Wenn ein Browser auf ein unbekanntes Tag oder ein unbekanntes Attribut trifft, wird dieses vom Browser ignoriert. Dadurch lassen sich beispielsweise HTML-Seiten konstruieren, die zwar Features modernerer Browser nutzen, aber dennoch beim Betrachten auf einem älteren Browser keinen HTML-Quellcode auf dem Bildschirm ausgeben.

HTML Character Entities

Ein HTML-Dokument kennt - streng genommen - nur die Zeichen des US-ASCII-Standardalphabets. Damit sind Sie bei der Darstellung von Sonderzeichen (z.B. von Umlauten, Zeichen mit Akzent, ß, Euro-Zeichen usw.) komplett auf die Gnade des Browsers angewiesen, den der Betrachter Ihrer Webseite verwendet. Beim Durchlesen der bisherigen Abschnitte könnte Ihnen außerdem die Frage gekommen sein: »Wie stelle ich eigentlich die Zeichen < (»größer als«) und > (»kleiner als«) in einer Webseite dar?«. Da diese Zeichen den Anfang bzw. das Ende von Tags markieren und der Browser ihm unbekannte Tags ignorieren soll, ist das nicht ganz so trivial.

Außerdem: Was machen Sie, wenn Sie in einer Attributwert-Zeichenkette ein Anführungszeichen verwenden wollen oder müssen? Wenn Sie das, wie z.B. hier für den Alternativtext eines <img>-Tags, so versuchen:

<img src="boris.jpg" alt="Boris "Bumm-Bumm" Becker">
 

hört Ihr Alternativtext nach »Boris « auf.

In HTML werden alle diese Probleme mit so genannten Character Entities gelöst. Ein Character Entity ist ein Ausdruck, der mit einem Ampersand-Zeichen (»Kaufmanns-Und«) anfängt und durch ein Semikolon abgeschlossen wird. Was dazwischen steht, bestimmt das Zeichen, durch das dieses Character Entity im Browser ersetzt wird. Ein Beispiel:

K&uuml;hles K&ouml;lsch k&ouml;nnen Sie in K&auml;sten oder auch im Fa&szlig; kaufen, aber 
inzwischen kostet der Liter um die 2 &euro;!
 

Dieses Beispiel stellt Ihnen ein Browser so dar: Kühles Kölsch können Sie in Kästen oder auch im Faß kaufen, aber inzwischen kostet der Liter um die 2  .

Das Problem mit dem Alternativtext lösen Sie so:

<img src="boris.jpg" alt="Boris &quot;Bumm-Bumm&quot; Becker">
 

In Tabelle 3-1 sind ein paar häufig eingesetzte Entities zusammengestellt:

Tabelle 3-1
Häufig benötigte Character Entities
Zeichen Character Entity Zeichen Character Entity
Ä &Auml; ä &auml;
Ö &Ouml; ö &ouml;
Ü &Uuml; ü &uuml;
ß &szlig; &euro;1
> &gt; < &lt;
& &amp; " &quot;
1Dieses Entity wurde in vielen älteren Browsern, insbesondere Netscape 4.x, noch nicht unterstützt.

Weitere Entity-Referenzen finden Sie unter: http://www.oreilly.com/catalog/docbook/chapter/book/refchar.html.

So, damit sind Sie jetzt gerüstet, um sich den Quellcode einer richtigen HTML-Seite anzusehen: die Startseite der Website, die wir im Laufe dieses Buchs entwickeln und ausbauen werden. Im nächsten Abschnitt geht's los!

Die Startseite unserer Website für bedrohte neuseeländische Vögel

In diesem Buch werden wir Schritt für Schritt eine ziemlich komplexe Website erstellen. Im Laufe der Konstruktion werden Sie so alle wichtigen Techniken kennen lernen, die Sie zum Bau Ihrer eigenen Website mit PHP und MySQL benötigen. Unsere (fiktive) Site, die sich wie ein roter Faden durch das ganze Buch zieht, dient einem (fiktiven) Vogelschutzverein, der über seine Website Spenden sammelt und verwaltet.

Die Startseite der Website besteht ausschließlich aus HTML-Code. Sie befindet sich in der Datei index.html. Sie finden index.html in der ZIP-Datei mit den Beispielen in diesem Buch unter der URL http://www.oreilly.de/catalog/einphpger/ auf dem O'Reilly-Webserver. Wie index.html in Ihrem Browser aussehen könnte, sehen Sie in Abbildung 3-1.
Abbildung 3-1 Die Startseite unserer Beispielanwendung

Um Ihnen das Verständnis des HTML-Codes zu erleichtern, ist er hier formatiert dargestellt: In den meisten Fällen ist der Inhalt der Tags eingerückt, insbesondere dann, wenn er sich über mehrere Zeilen erstreckt.

Indexdateien

Sie werden sich vielleicht fragen, warum index.html oder index.htm so populäre Namen für Webdokumente sind. Das hat mit der Vorgehensweise des Webservers zu tun: Wenn der Webserver einen HTTP-Request für eine URL bekommt, die keinen expliziten Dateinamen enthält (z.B. http://www.oreilly.de), geht der Server zunächst einmal in das Verzeichnis, das durch Server-Konfiguration und Pfad in der URL vorgegeben ist. In unserem Beispiel (keine Pfadangabe) wäre das die Document Root, das Dokumenten-Stammverzeichnis des Servers, das in der Server-Konfiguration eingestellt ist. Was dann passiert, hängt von der Konfiguration und dem Inhalt des Verzeichnisses ab:
Wenn sich eine Datei mit dem Namen index.html oder index.htm oder einem anderen konfigurierten Index-Suffix (z.B. index.php, index.shtml usw.) in dem Verzeichnis befindet, wird diese Datei ausgegeben.
Wenn keine solche Datei vorliegt und die Webserver-Konfiguration die Auflistung des Verzeichnisses zulässt, wird eine Auflistung des Verzeichnisses zurückgegeben.
Wenn keine Indexdatei vorhanden ist und die Webserver-Konfiguration keine Verzeichnisauflistung zulässt, wird eine Fehlermeldung an den Browser ausgegeben.

Die Grundstruktur des Dokuments:
<html>-, <head>- und <body>-Tags

Wenn Sie sich den Code von index.html ansehen, werden Sie feststellen, dass das äußerste Tag des Dokuments ein <html>-Tag ist. Der gesamte Code des Dokuments befindet sich zwischen dem öffnenden und dem schließenden <html>-Tag.

Innerhalb des <html>-Tags finden sich hier zwei Tags nacheinander auf derselben Hierarchieebene: ein <head>- und ein <body>-Tag. Jedes dieser Tags sollte nur einmal pro Dokument vorkommen, und zwar in dieser Reihenfolge.

Das <head>-Tag

Das <head>-Tag ist optional, es enthält in der Regel hauptsächlich Titelinformationen, kann unter anderem aber auch Meta-Informationen (Informationen über den Dokumentinhalt und die Dokumentversion oder -geschichte, die von Suchmaschinen oder Editoren verwendet werden), Stylesheets oder JavaScript-Code enthalten. In unserem Fall beschränken wir uns auf den Titel, der üblicherweise in der Titelleiste des Browser-Fensters dargestellt wird:

Beispiel 3-1
Das <title>-Tag unserer Beispiel-Indexseite index.html
<title>Virtueller Freundeskreis bedrohter neuseel&auml;ndischer V&ouml;gel</title>
 

Der Titel wird innerhalb des <title>-Tags angegeben. Wie Sie vermutlich schon bemerkt haben, greifen wir hier auch auf Character Entities zurück, um die Umlaute darzustellen.

Das <body>-Tag

Das <body>-Tag ist in praktisch allen konventionellen statischen HTML-Dokumenten enthalten - lediglich HTML-Dokumente mit Framesets (Rahmen) kommen ohne dieses Tag aus. Attribute sind im <body>-Tag optional. Hier verwenden wir ein Attribut, das Sie genau so auch in vielen anderen Tags verwenden können: das style-Attribut.

Das style-Attribut

Der Wert des style-Attributs besteht aus Anweisungen, die die Schriftart und Schriftgröße für das Dokument festlegen. Als Experiment können Sie das style-Attribut auch einmal entfernen und sehen, welchen Unterschied das für das Aussehen des Dokuments macht. Über das style-Attribut lassen sich eine Vielzahl von Darstellungsparametern steuern. Die genauen Parameter hängen von dem betroffenen Tag und zum Teil auch von dem Browser ab, auf dem die Seite dargestellt werden soll. Wir werden uns hier auf einige nützliche und häufig verwendete Beispiele solcher so genannter Inline-Styles beschränken. Details zu diesem Thema finden Sie in dem O'Reilly-Buch CSS - kurz & gut von Eric A. Meyer.

Der Inhalt des <body>-Tags

Im <body>-Tag finden Sie den »eigentlichen« Inhalt der Seite. Dieser fängt zunächst einmal mit einer Überschrift (Heading) erster Ordnung an, die wir mit einem <h1>-Tag markieren:

Beispiel 3-2
Die Seitenüberschrift in index.html
<h1>Virtueller Freundeskreis bedrohter neuseel&auml;ndischer V&ouml;gel</h1>
 

Das <h1>-Tag sorgt dafür, dass sein Inhalt in herausragender Schriftgröße vom übrigen Text abgesetzt dargestellt wird. Sofern wir es nicht mit einem style-Attribut festlegen, bleibt die Wahl der genauen Schriftgröße und des Abstands von anderem Text dem Browser überlassen. Für untergeordnete Überschriften gibt es außer <h1> noch die Tags <h2> bis <h6>. Diese werden normalerweise automatisch mit fortlaufender Nummer jeweils etwas kleiner dargestellt.

Anschließend finden wir zwei konventionelle Absätze, die jeweils in ein <p>-Tag (paragraph) eingebettet sind:

Beispiel 3-3
Zwei typische Absätze in index.html
<p>Willkommen auf der Homepage unseres virtuellen
 
Freundeskreises!</p>
 
<p>Hier finden Sie Informationen zu unseren Projekten und
 
zu den Vogelarten, f&uuml;r deren Schutz wir uns
 
besonders einsetzen:</p>
 

Bilder und Grafiken

Bilder und Grafiken fügen Sie mit Hilfe des <img>-Tags ein. In diesem Fall ist das ein Foto einer Takahe, das sich in einer JPEG-Datei mit dem Namen takahe.jpg befindet, die im selben Verzeichnis wie index.html liegt:

Beispiel 3-4
Ein Bild in index.html einbetten
<img src="takahe.jpg" align="right">
 

Das src-Attribut gibt hier die Quelle (Source) des darzustellenden Bilds an. Das ist die URL, unter der sich die Bilddatei befinden soll. Wenn Sie sich unter einer URL bisher etwas vorgestellt haben, das mit http:// anfängt und mit einem Servernamen weitergeht, brauchen Sie Ihr Konzept aber nicht gleich zu verwerfen. Eine solche URL wäre hier auch völlig akzeptabel. In unserem Fall liegt das Bilddokument aber auf derselben Site wie die Datei, in der das Tag steht. Damit können wir eine relative URL verwenden, die hier nur aus dem Dateinamen besteht, weil auch der Verzeichnispfad zu den Dateien derselbe ist (die Bilddatei ist ja im selben Verzeichnis wie index.html abgelegt). Der Browser kann sich den Rest dann selbst dazudenken.

Relative URLs haben den Vorteil, dass Sie Ihr HTML-Dokument nicht neu bearbeiten müssen, sollten Sie Ihre Site einmal auf eine andere URL verschieben (das kommt in der Praxis häufiger vor, als Sie denken). Außerdem sind relative URLs kürzer. Das spart ein bisschen Bandbreite, was aber nur selten ins Gewicht fallen dürfte.

Das align-Attribut schiebt in diesem Fall das Foto an den rechten Rand des Browserfensters und versucht, den restlichen Inhalt des Dokuments, so gut es geht, links um das Bild herumfließen zu lassen.

Bildformate

Einer der am meisten verbreiteten Anfängerfehler im Webdesign besteht darin, dass Fotos und Grafiken im falschen Format oder in der falschen Bildschirmauflösung ins Web gestellt werden. Wenn Sie schon einmal über ein Telefonmodem im Web gesurft haben, wissen Sie sicher um die Ewigkeiten, die man wartet, bis eine Abbildung komplett heruntergeladen ist. Diese Erfahrung können Sie Ihren Benutzern ersparen.
Zunächst einmal sollten Sie den richtigen Dateityp für Ihre Abbildung wählen. Fotos werden am besten im JPEG-Format abgespeichert (.jpg oder .jpeg). Palettenbasierte Formate wie GIF können nur eine begrenzte Anzahl von Farben in ihrer Palette speichern und haben dadurch oft keine ausreichende Farbauflösung für das Motiv, ein Effekt, der sich durch unnatürliche Farbstufen im Bild bemerkbar macht.
Grafiken, Zeichnungen und Comics - also alles, was mit einer festen Farbpalette mit nur wenigen (bis zu 256) unterschiedlichen Farben auskommt, sollten Sie dagegen auf jeden Fall als GIF- oder PNG-Grafik abspeichern. Diese Formate sind für diesen Zweck optimiert. Wenn Sie z.B. eine technische Zeichnung als JPEG-Datei speichern wollen, müssen Sie eine sehr hohe »JPEG-Qualität« wählen, um JPEG-Artefakte (»Schmierflecken«) zu vermeiden. Das führt zu einer unverhältnismäßig großen Datei - warum in einem speicherintensiven JPEG sagen, was Sie in einem deutlich kleineren GIF viel sauberer ausdrücken können? GIF hat den Nachteil, dass aus lizenzrechtlichen Gründen praktisch keine Open Source-Software erhältlich ist, die dieses Format erzeugen kann. PNG hat den Nachteil, dass es von älteren Browsern nicht unterstützt wird.
Windows-Bitmap-Formate sind für alle Arten von Abbildungen geeignet, sind jedoch komprimierten Formaten wie JPEG oder GIF wegen des größeren Dateiumfangs unterlegen.
Der zweite Knackpunkt ist in vielen Fällen die Auflösung der betreffenden Dateien. Die Auflösung der meisten aktuellen Scanner (1.200 Pixel pro Inch) und Digitalkameras (1.024 mal 768 Pixel und mehr pro Bild) übersteigt in der Regel die Anzahl der Pixel, die Ihnen in einem typischen Webbrowser-Fenster zur Darstellung der Bilder zur Verfügung stehen (72 Pixel pro Inch).
Das Bild unserer Takahe beispielsweise kommt mit 227 mal 252 Bildpunkten und einem Dateiumfang von weniger als 35 KByte aus. Eine höhere Auflösung bei gleicher Bildgröße wäre Verschwendung: Die zusätzlichen Pixel sind auf dem Bildschirm ohnehin nicht sichtbar - die Datei würde aber möglicherweise um ein Vielfaches größer!
Bevor Sie Fotos von einem Scanner oder einer Digitalkamera direkt ins Web stellen, sollten Sie sie also in der Regel mit einem Grafikprogramm wie IrfanView, Paint Shop Pro, Photoshop o.Ä. bearbeiten, um die Auflösung herunterzusetzen.

Tabellen

Als nächstes Element treffen wir in unserer Indexdatei ein <table>-Tag an. Wie der englische Name des Tags schon andeutet, markiert es eine Tabelle. Tabellen sind ein sehr beliebtes Gestaltungsmittel, auch wenn sie nicht immer als solche zu erkennen sind. In diesem Fall verwenden wir eine Tabelle, um einen Teil der Seite mit einer anderen Hintergrundfarbe versehen zu können. Das öffnende <table>-Tag sieht so aus:

Beispiel 3-5
Eine Tabelle mit bgcolor-Attribut in index.html
<table bgcolor="#ffff66">
 

Das bgcolor-Attribut gibt hier auf einfache Weise die Hintergrundfarbe an (Sie hätten das auch über ein style-Attribut machen können). Die Raute im Wert des bgcolor-Attributs gibt dabei an, dass der nachfolgende Wert als ein Hexadezimal-RGB-Wert zu interpretieren ist. Keine Panik - das ist ganz einfach.

Wie Sie vielleicht wissen, setzt Ihr Bildschirm alle Farben aus drei Grundfarben zusammen: Rot, Grün und Blau (RGB). Für jede dieser Grundfarben verfügt Ihr Browser auf einem Windows-PC in der Regel mindestens über die folgenden Intensitätsstufen: 00, 33, 66, 99, cc und ff, wobei 00 die niedrigste Intensität (dunkel) und ff die höchste Intensität darstellt. Die Farbe #ffff66 besteht also aus vollem Rot, vollem Grün und etwas Blau zur Aufhellung - ein kräftiges Gelb also. Ein hilfreiches Werkzeug zur Auswahl von Farben sind hier so genannte Color Picker, die es in vielen Varianten als Shareware und Freeware gibt (z.B. Pixie von http://www.nattyware.com) oder auch online (z.B. bei Selfhtml: http://selfhtml.teamone.de/helferlein/farben.htm). Mit Color Picker bekommen Sie eine Palette, klicken auf die gewünschte Farbe und erhalten den entsprechenden Code angezeigt.

Dass das <table>-Tag allein noch keine Tabelle macht, können Sie sich sicher denken. Ein <table>-Tag umfasst ein oder mehrere Tabellenzeilen, die jeweils durch ein <tr>-Tag (table row) markiert werden.

Ein <tr>-Tag kann wiederum eine oder mehrere Tabellendatenzellen enthalten. Diese Tabellendatenzellen (also Spalten innerhalb einer Tabellenzeile) werden jeweils mit dem <td>-Tag erzeugt. Eine Zelle kann HTML-Code mit beliebigem Text, Grafiken, oder z.B. auch anderen Tabellen enthalten. In unserem Fall haben wir nur eine Zelle pro Zeile, d.h. eine Spalte in der Tabelle. Die erste Zeile besteht damit aus dem folgenden Code:

Beispiel 3-6
Tabellenzeilen, -zellen und eine nicht-nummerierte Liste mit Links in index.html (Forts.)
<tr>
 
    <td>
 
        <h2>Gef&auml;hrdete Gefiederte:</h2>
 
        <ul>
 
            <li>Unser &quot;Wappentier&quot;: die seltene 
 
                <a href="voegel/takahe.html" 
 
                style="text-decoration: none;">
 
                <b><i>Takahe</i></b></a> 
 
             <li>Der 
 
                <a href="http://www.kiwirecovery.org.nz" 
 
                style="text-decoration: none;">
 
                <b><i>Kiwi</i></b></a> - Wappentier
 
                Neuseelands
 
             <li>Der <a  
 
                href="http://www.kakaporecovery.org.nz" 
 
                style="text-decoration: none;">
 
                <b><i>Kakapo</i></b></a> - einer der 
 
                seltensten V&ouml;gel der Welt
 
        </ul>
 
    </td>
 
</tr>
 

Nicht-nummerierte Listen

Innerhalb des <td>-Tags finden wir drei weitere Tags: ein <h2>-Tag, ein <ul>-Tag und ein <p>-Tag. Dass das <h2>-Tag eine Überschrift zweiter Ordnung darstellt, haben Sie wahrscheinlich erraten, oder? Kein Problem also. Das Absatz-Tag <p> kennen Sie auch schon. Wofür steht aber das <ul>-Tag? Wenn Sie sich Abbildung 3-1 mit dem Screenshot ansehen, werden Sie eine gewisse Ähnlichkeit zwischen dem Inhalt des Tags und der nicht-nummerierten Liste im gelben Teil der Tabelle feststellen. Das <ul>-Tag beinhaltet also eine nicht-nummerierte Liste. Die Listenpunkte in einer Liste werden jeweils durch ein <li>-Tag gekennzeichnet.

Links mit dem <a>-Tag

Darüber hinaus finden wir ein <a>-Tag in jedem der Listenpunkte. Das <a>-Tag ist vermutlich das wichtigste Tag im World Wide Web - es sorgt dafür, dass Dokumente durch Links miteinander verbunden werden können. Um mit dem <a>-Tag einen Link zu einem anderen Dokument herzustellen, setzen wir den Wert des href-Attributs auf die URL des Zieldokuments. In unserem ersten Listenpunkt ist das eine relative URL, die auf die Datei takahe.html in dem Unterverzeichnis voegel des Verzeichnisses verweist, in dem sich index.html befindet. In den weiteren Listenpunkten verweisen die Links jeweils auf externe Webseiten, die mit vollen »konventionellen« URLs beschrieben sind.

Zwischen den öffnenden <a>-Tags und den abschließenden </a>-Tags finden Sie jeweils den Text, unter dem im Browser der Link aufgerufen werden kann, kursiv und fett gedruckt. Mit dem Wert des style-Attributs im <a>-Tag, "text-decoration: none;", weisen wir den Browser an, den Link-Text nicht gesondert zu dekorieren, d.h., dass der Browser den Link nicht unterstreichen soll.

Ansonsten passiert in dieser Tabellenzeile nichts Aufregendes mehr, so dass wir uns die nächste Zeile ansehen können:

Beispiel 3-7
Eine Zelle mit zentriertem Inhalt und einer Aufzählungsliste in index.html 
<tr>
 
    <td bgcolor="#ccccff">
 
        <div align="center">
 
            <h3>Projekt des Jahres</h3>
 
            <a href="Spendenformular.php">Spenden Sie 
 
            f&uuml;r unser Vogelschutzgebiet!</a>
 
            <h3>Projekte anderer Organisationen</h3>
 
            <ol>
 
                <li>
 
            <a href="http://www.kiwirecovery.org.nz/">Das 
 
                     Kiwi Recovery-Programm</a>
 
                <li><a 
 
            href="http://www.kakaporecovery.org.nz/">Das 
 
                     Kakapo Recovery-Programm</a>
 
            </ol>
 
        </div>
 
    </td>
 
</tr>
 

Der erste Unterschied, der uns zur vorherigen Zeile auffällt, ist das bgcolor-Attribut im einzigen vorhandenen <td>-Tag. Es sorgt dafür, dass die Zelle mit einem blauen Hintergrund dargestellt wird. Als nächstes Tag begegnet uns ein <div>-Tag in der Zelle. <div>-Tags werden in HTML zum Markieren eines Abschnitts verwendet, was aus verschiedenen Gründen nützlich sein kann. In diesem Fall genügt ein Blick auf den Screenshot in Abbildung 3-1, und Sie wissen, was läuft: Das Tag zentriert den HTML-Text, der sich zwischen dem öffnenden und dem abschließenden Tag befindet. Als Nächstes finden wir ein <ol>-Tag vor, das eine geordnete Liste (ordered list) umschließt. Wie Sie auf dem Screenshot sehen können, werden die Listenpunkte jeweils mit einer laufenden Nummer versehen.

Die Links in den Listenpunkten werden übrigens unterstrichen dargestellt, da hier kein style-Attribut eingreift.

Tabellen formatieren

Die Größe von Tabellen und Tabelleninhalten richtet sich zunächst einmal nach dem Inhalt der Zellen und danach, wie der Browser formatiert. Zu einem gewissen Grad können Sie darauf Einfluss nehmen. Das sehen wir in der folgenden Tabelle, die am unteren Ende unserer Seite platziert ist:

Beispiel 3-8
Tabellenformatierung in index.html 
<table width="100%" cellpadding="2" cellspacing="2">
 
    <tr>
 
        <td width="20%" valign="top" 
 
            style="background-color: rgb(51, 51, 204); color: white;"
 
    onclick="top.location.replace('Spendenformular.php')">
 
            Spenden Sie!
 
        </td>
 
        <td width="20%" valign="top" 
 
            style="background-color: #3333CC; color: white;"
 
            onclick="top.location.replace('ueberuns.html')">
 
            &Uuml;ber uns
 
        </td>
 
        <td width="20%" valign="top" 
 
            style="background-color: #33c; color: white;"
 
            onclick="top.location.replace('projekte.html')">
 
            Andere Projekte
 
        </td>
 
        <td width="20%" valign="top" 
 
            style="background-color: rgb(51, 51, 204); color: white;"
 
            onclick="top.location.replace('organisationen.php')">
 
            Andere Organisationen
 
        </td>
 
        <td width="20%" valign="top" 
 
            style="background-color: rgb(51, 51, 204); color: white;"
 
            onclick="top.location.replace('anderswo.html')">
 
            V&ouml;gel in anderen L&auml;ndern
 
        </td>
 
    </tr>
 
</table>
 

Wenn Sie sich das <table>-Tag ansehen, begegnen Ihnen dort drei Attribute, die wir noch nicht besprochen haben: width, cellpadding und cellspacing.

Das width-Attribut legt die Breite der Tabelle fest. Dazu gibt es zwei Möglichkeiten: Sie können die Breite in Bildschirmpixeln festlegen (z.B. width="200"), oder Sie können, wie in unserem Beispiel, die Breite als Prozentsatz der Fensterbreite des Browsers wählen.

Eine absolute Breite in Bildschirmpixeln kann beispielsweise sinnvoll sein, wenn Sie die Tabelle unter einer Grafik (oder um eine Grafik herum) einbauen wollen und die Breite der Grafik kennen.

Der Vorteil einer prozentualen Breite besteht darin, dass Sie eine Tabelle bekommen, die sich mit dem Browser-Fenster skaliert. Sie können das mit index.html ausprobieren, indem Sie die Breite Ihres Browser-Fensters verändern: Während sich die obere Tabelle in der Breite nicht verändert, passt sich die untere Tabelle so an, dass sie immer über die ganze Breite des Browser-Fensters reicht.

Das cellpadding-Attribut legt fest, wie viel Mindestabstand zwischen der Schrift in einer Tabellenzelle und dem Rand dieser Zelle zu verbleiben hat. In diesem Fall sind das zwei Pixel. Probieren Sie einmal, wie es aussieht, wenn Sie das auf, sagen wir, 10 ändern.

Das cellspacing-Attribut legt fest, wie viel Pixel Abstand zwischen Tabellenzellen einzuhalten ist. Auch hier können Sie etwas mit dem Wert experimentieren. Ein weiteres Attribut, das Sie häufig in <table>-Tags finden, ist das border-Attribut. Sie können es dazu verwenden, die Dicke der Umrandungsstriche der Zellen festzulegen. Die Voreinstellung für den Wert dieses Attributs ist 0, so dass wir es in unserem Fall nicht angeben müssen.

Kleiner Praxistipp: Bei border-Attributen, deren Wert nicht gleich 0 ist, wird bei leeren Tabellenzellen kein Umrandungsstrich gezeichnet. Das sieht optisch nicht unbedingt gut aus. Sie können das Problem umgehen, indem Sie einen »non-breaking space« in die leere Zelle einfügen. Das Character Entity dafür ist &nbsp;. Der Browser stellt &nbsp; als ein Leerzeichen dar, wird es aber (im Gegensatz zu gewöhnlichen Leerzeichen) nie zu einem Zeilenumbruch im Browser-Fenster nutzen. Hier hat es den angenehmen Effekt, dass der Browser eine Tabellenzelle mit einem &nbsp; nicht mehr als leer ansieht.

An den <td>-Tags für die Tabellenzellen können Sie sehen, dass es auch hier Attribute gibt. Das width-Attribut gibt an, wie viel Pixel bzw. Prozent der Tabellenbreite die betreffende Zelle einnehmen darf. Vorsicht: Ihr Browser wird Ihre Wünsche nur dann vollständig erfüllen können, wenn die über die Spalten zusammengezählten Breiten Ihrer Zellen 100 % bzw. die Tabellenbreite in Pixeln nicht überschreitet.

In einer Tabelle können Sie die Breite in Pixeln und in Prozent auch gemischt verwenden: Die erste Zelle in einer Reihe könnte z.B. auf 180 Pixel Breite festgelegt werden, um eine Grafik unterzubringen. Die folgenden könnten dann mit der Breite in Prozent oder auch ganz ohne width-Attribut angegeben werden. Wenn Sie von einer typischen Browser-Fensterbreite von 600 Pixeln ausgehen (sehr grobe Faustregel!), können Sie in etwa abschätzen, wie viel Platz Sie jeweils zur Verfügung haben.

Weitere nützliche Attribute für mehrzeilige und mehrspaltige Tabellen sind in diesem Kontext das colspan- und das rowspan-Attribut. Mit ihnen können Sie eine einzelne Zelle in einer Tabelle über mehrere Spalten bzw. Zeilen ausdehnen.

Nach dem width-Attribut finden wir hier in jeder Zelle das valign-Attribut. Die gültigen Werte für dieses Attribut sind "top", "middle" und "bottom", sie legen die vertikale Ausrichtung fest. Bei "top" stehen die Zelleninhalte am oberen Zellenrand. Bei "middle", dem Default, stehen sie in der Mitte und bei "bottom" am unteren Zellenrand.

valign hat übrigens ein Schwesterattribut namens align. Mit ihm können Sie festlegen, wie Text horizontal in der Zelle auszurichten ist: linksbündig ("left"), zentriert ("center") oder rechtsbündig ("right").

Wenn Sie jetzt nach dem »Größer«-Zeichen Ausschau halten, das das Ende des öffnenden <td>-Tags markiert, werden Sie mit der Nase auf die Tatsache gestoßen, dass man Tags auch über mehrere Zeilen hinweg erstrecken kann.

In der nächsten Zeile des <td>-Tags taucht ein alter Bekannter auf: das style-Attribut. Auch im Wert des Attributs finden Sie alte Freunde: den Stilparameter background-color und zwei Farbwerte. Lediglich der Stilparameter color ist neu, er gibt die Schriftfarbe an, die in diesem Tag zu benutzen ist. In diesem Fall wählen wir eine vordefinierte Farbe: white.

Jetzt werden Sie sich vielleicht fragen, ob nicht zumindest die Hintergrundfarbe auch über ein bgcolor-Attribut gesetzt werden könnte. Gute Frage - die Antwort ist ja! Warum also der ganze Aufwand? Antwort: style-Attribute sind eine etwas neuere Erfindung. Sie sind flexibler und ermöglichen eine weiter gehende Parametrisierung, als das mit Attributen möglich wäre. Näheres zu Stilparametern finden Sie, wie bereits erwähnt, in CSS - kurz & gut von O'Reilly.

Zum Schluss bliebe noch zu erwähnen, dass das <table>-Tag geschlossen werden muss, da die Tabelle sonst gegebenenfalls nicht richtig angezeigt wird.

Event-Handler und JavaScript - eine Alternative zu Links mit dem <a>-Tag

Wenn Sie index.html in Ihren Browser laden, werden Sie feststellen, dass sich die Tabelle unten auf der Seite wie eine Reihe von Buttons verhält. Sie können jede Tabellenzelle anklicken und gelangen jeweils zu anderen Dokumenten. Wenn Sie eine gesamte Tabellenzelle klickempfindlich machen wollen, könnten Sie jetzt vielleicht auf die Idee kommen, das entsprechende <td>-Tag in ein <a>-Tag einzubetten. Versuchen Sie das einmal - Sie werden feststellen, dass es so nicht funktioniert.

Auch andersherum haben wir Probleme: Ein Einbetten des <a>-Tags in das <td>-Tag wirkt nur auf den Text, den das <a>-Tag umschließt, aber nicht auf den Leerraum in der Zelle. Also müssen wir uns mit einem Trick behelfen, der allerdings bei älteren Browsern nicht immer funktioniert.

Dafür ist das nächste Attribut in unserem ellenlangen <td>-Tag zuständig. Es ist ein so genannter Event-Handler. Ein Event ist ein im Browser auftretendes Ereignis. Das kann beispielsweise ein Mausklick auf das Element im Browser-Fenster sein, das durch unser Tag beschrieben wird: in diesem Fall also eine Tabellenzelle. Andere Events, die sich erfassen lassen, sind z.B. Doppelklicks, Änderungen von Eingabefeldern in Formularen, Änderungen des Maustastenstatus oder auch einfach nur Mausbewegungen über dem Element oder aus dem Element heraus.

Wie fast jedes Tag hat auch das <td>-Tag Attribute, die uns festlegen lassen, was der Browser beim Auftreten solcher Events machen soll. In unserem Fall ist das Event ein Mausklick, und das entsprechende Attribut heißt onclick.

Der Wert des onclick-Event-Handlers ist ein Mini-Programm, das in der Programmiersprache JavaScript geschrieben ist. In diesem Fall weisen wir den Browser an, die URL (Location) des gegenwärtig angezeigten Dokuments (das sich im so genannten top-Fenster des Browsers befindet) gegen die in den runden Klammern angegebene URL auszutauschen.

Damit verhält sich unsere Tabellenzelle fast genau so wie ein Link: Sie können sie anklicken, und ein neues Dokument wird geladen.

Mehr HTML gefällig?

Wenn Sie dieses Kapitel gelesen und verstanden haben, sind Sie kein HTML-Anfänger mehr. Sie können jetzt Überschriften und normalen Text formatieren, Tabellen anlegen und formatieren, Grafiken einfügen und justieren sowie Links auf andere Dokumente definieren. Die folgenden Tags und ihre Verwendung sollten Ihnen jetzt geläufig sein:

Tabelle 3-2
Die wichtigsten HTML-Tags im Überblick 
Tag(s) Bedeutung
<html>
Umschließt das HTML-Dokument.
<head>
Enthält den Kopfteil des HTML-Dokuments.
<body>
Enthält die darzustellenden Inhalte und ihre Formatierung.
<h1> bis <h6> Überschriften erster bis sechster Ordnung.
<p>
Markiert einen Absatz.
<center>
Zentriert seinen Inhalt.
<table>, <tr> und <td> Tabellen, Zeilen und Datenzellen.
<ul>, <ol> und <li> Nicht-nummerierte und geordnete Listen und Listenelemente.
<a>
Fügt mit dem href-Attribut Links auf andere Webseiten ein.
<img>
Fügt eine durch das src-Attribut bezeichnete Abbildung in die Seite ein.

Probieren geht bekanntlich über Studieren, deswegen würde ich Ihnen nahelegen, unsere Indexdatei als Ausgangsmaterial für Ihre eigenen Experimente zu verwenden. Tipps dazu finden Sie weiter unten im Abschnitt »Probieren Sie's selbst!«. Sie werden sehen, es macht Spaß!

Weitere HTML-Tipps und Tricks werden Sie »so nebenbei« in den nächsten Kapiteln erhalten. Fürs tägliche Geschäft mit HTML, Style-Attributen und JavaScript werden Sie aber vermutlich noch andere Quellen, Ratgeber und Nachschlagewerke heranziehen wollen. Diese finden Sie natürlich in den Büchern des O'Reilly Verlags, aber auch im Internet. Im Anhang haben wir einige nützliche URLs für Sie zusammengestellt.

Probieren Sie's selbst!

Hier haben wir eine Nuss für Sie zu knacken: In den meisten Browsern wird das Bild der Takahe weniger hoch ausfallen als die Tabelle links daneben. Dadurch bleibt der Platz unter dem Bild ungenutzt - obwohl gerade dort eine Bildunterschrift hervorragend hinpassen würde.

Erste Lösung: Fügen Sie der ersten Zeile der oberen Tabelle eine weitere Datenzelle hinzu, die Sie mit dem rowspan-Attribut über zwei Zeilen ausdehnen. Setzen Sie das Foto und die Bildunterschrift in diese Zelle. Tipp: Strecken Sie die Tabelle auf die ganze Breite des Browser-Fensters und zentrieren Sie die Inhalte der rechten Zelle. Die Justierung des Fotos sollten Sie hier entfernen, damit das Bild vor dem Text erscheint und der Text nicht »um das Bild herumfließt«. In diesem Fall hat das den Vorteil, dass die Bildunterschrift nicht neben das Foto gequetscht wird.

Zweite Lösung: Bauen Sie eine Tabelle mit einer Zeile und zwei Spalten. Verschieben Sie die bestehende erste Tabelle in die linke Zelle. Das Foto und die Bildunterschrift kommen in die rechte Zelle. Orientieren Sie sich an den Formatierungsvorschlägen der ersten Lösung - sie führen auch hier zu einer besseren Darstellung.

Die Lösungen finden Sie als index1.html und index2.html in den Online-Beispielen zu diesem Kapitel.


TOC PREV NEXT INDEX

Copyright © 2004 by O'Reilly Verlag GmbH & Co.KG