This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS
Achten Sie vor allem auf die beigelegte CD-ROM.
Die wichtigsten Fakten,
und Informationen werden ausführlich behandelt
© Hauser/Wenz, München, Winter 2001/2002
text_formatieren.htmund
begrenzt wird.steht für paragraph (engl. für – *Trommelwirbel* - Absatz). Text, der sich im Körper einer HTML-Seite, also zwischen den
-Tags befindet, sollte laut Standard immer in einem Absatz stehen, es sei denn er wird in eine Tabelle oder neben ein Bild geschrieben, aber dazu später mehr. Ein Absatz bewirkt folgendes: Am Ende des Absatzes wird ein Zeilenumbruch eingefügt und der darin enthaltene Text erhält einen Abstand zu vorigem und nachfolgendem Text. Neben dieser einfachen Formatierung kann ein Absatz noch wesentlich mehr. Er ist im Prinzip ein eigenständiger Textcontainer. Jeder Absatz kann beispielsweise mit Style Sheet-Befehlen angesprochen und formatiert werden.-Tag auch einzeln ausgerichtet werden. In unserer Ausgangsdatei haben wir den zweiten Absatz mit align="right" rechtsbündig ausgerichtet. In der folgenden Tabelle finden Sie die vier möglichen Werte für align. Anschließend wollen wir mit diesem Wissen die Ausgangsdatei ein wenig verändern. Wert
Beschreibung
center
Zentriert den Absatz. Die Umbrüche im Browser sehen hier oft nicht besonders schön aus.
justify
Blocksatz. Ältere Browser, beispielsweise Netscape 3, unterstützen diesen Wert noch nicht.
left
Richtet den Absatz linksbündig aus. Dies ist die Standardeinstellung, die auch ohne Angabe von align verwendet wird.
right
Richtet den Absatz rechtsbündig aus.
Werte für das Attribut align
40
Absätze
In der Ausgangsdatei wurde nur der zweite Absatz ausgerichtet. Wir wollen nun zusätzlich den ersten Absatz zentrieren. Bisher sah der Code für den ersten Absatz folgendermaßen aus:
In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS.
-Tag das Attribut align ein. Vergeben Sie für das Attribut den Wert center.
In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS.
-Tag für Absätze. Zeilenumbrüche im HTML-Quellcode mit (¢) werden vom Browser schlichtweg ignoriert. Einen normalen Zeilenumbruch erzeugt man stattdessen mit dem
-Tag. Dieses Tag gehört zu den wenigen, die kein Tagpaar bilden. Stattdessen wird das Tag sofort wieder mit dem Schrägstrich geschlossen. Sie könnten zwar theoretisch auch folgendes schreiben:
In der Praxis macht dies aber keinen Sinn, da Sie nichts dazwischen einfügen können und der Tippaufwand höher ist. Zu guter Letzt: Praktisch alle Browser akzeptieren auch einfach nur
, ohne End-Tag.
42
PROFITIPP
Absätze
HTML-Editoren wie Frontpage, Dreamweaver oder HotMetal verwenden meist wieder die aus der Textverarbeitung bekannten Tastenkürzel (¢) für einen Absatzwechsel und (ª)+(¢) für einen Zeilenumbruch und setzen diese dann in die entsprechenden Tags um.
Die Höhe des Zeilenumbruchs hängt immer von der verwendeten Schriftart ab. Das heißt, sollte der Text, in dem das
-Tag steht, besonders groß sein, so wird auch der Zeilenumbruch entsprechend.
Text einrücken Mit dem Tag
können Sie einen ganzen Absatz von links und rechts einrücken. Als Versuchskaninchen muss der erste, jetzt zentrierte, Absatz herhalten. Folgende Schritte sind notwendig:
1 2
Fügen Sie das Tagvor dem Absatz ein. Ergänzen Sie nach dem Ende des Absatzes (nach ) das Tag.
Der Code sieht nun folgendermaßen aus:In diesem Buch finden sich viele Beispiele zur Arbeit mit HTML, JavaScript und CSS.
VORSICHT!
Im Browser sehen Sie die starke Einrückung um den Absatz. In der Praxis verwendet man diesen Effekt beispielsweise, wenn man Absätze hierarchisch anordnen möchte, ohne eine Liste zu verwenden. Ein weiteres Einsatzgebiet sind Zitate, die vom übrigen Text abgehoben werden sollen. Eigentlich ist das Tagals logische Textauszeichnung für Zitate und Textblöcke konzipiert worden. Das heißt, ein Browser muss laut Spezifikation mit diesem Tag ausgezeichnete Bereiche nicht unbedingt einrücken. In der Praxis tun das allerdings alle gängigen Browser, weswegen wir Ihnen dieses Tag auch zum Einrücken von Text vorgestellt haben.
43
Text verschönern
PROFITIPP
Der erste Absatz wurde eingerückt.
Wenn manzur Hervorhebung von Zitaten verwendet, kann es auch alleine ohne-Tags stehen. Man wird dann in Stylesheets unter Umständen auch eine eigene Formatierung für dieses Tag bereithalten. Für Zitate gibt es außerdem das Tag
. Es fügt automatisch Anführungszeichen zu einem Zitat hinzu, nimmt aber keine Einrückung vor und stellt auch keinen eigenen Absatz dar.
1.4 Horizontale Linie In unserer Ausgangsdatei haben wir zwischen den drei Absätzen mit der Standardschriftart und dem anders formatierten Absatz mit Copyright-Hinweisen mit dem Tag
eine Trennlinie eingefügt. Dieses Tag wird wie das
-Tag für den Zeilenumbruch sofort geschlossen. Noch sieht die Linie aus unserem Ausgangsbeispiel relativ langweilig aus. Im folgenden wollen wir sie ein wenig verändern:
44
1
Mit dem Attribut size im
-Tag ändern Sie die Dicke der horizontalen Linie. Die Angabe erfolgt in Pixeln.
2
Vergeben Sie für size einen Wert von 5.
Horizontale Linie
3
Fügen Sie nun das Attribut width hinzu. Es ändert die Breite der horizontalen Linie und kann in Pixeln oder Prozent der Fenstergröße angegeben werden.
4
Vergeben Sie einen Wert von 50% für width, um die Linie genau halb so breit zu machen, wie das Fenster.
5
Wenn die Größe der Linie reduziert ist, lässt sich natürlich auch die Ausrichtung ändern. Fügen Sie dazu das Attribut align hinzu und vergeben Sie den Wert right.
Mit dem Attribut noshade schalten Sie den Schatten der Linie aus, der vom Browser automatisch hinzugefügt wird. Dieses Attribut ändert allerdings nichts daran, das die Linie in verschiedenen Browsern unterschiedlich aussieht.
PROFITIPP
6
Wenn Sie XHTML-konform programmieren möchten, müssen Sie für noshade den Wert noshade vergeben, da kein Attribut in XHTML ohne Wert stehen darf.
7
Um die Farbe der Linie zu variieren, sollten Sie normalerweise einen Style SheetBefehl verwenden. Für den Internet Explorer gibt es allerdings das Attribut color. Es funktioniert allerdings weder mit Netscape noch mit Opera.
8
Vergeben Sie für das Attribut color den Wert blue.
PROFITIPP
In HTML können Sie 16 Standardfarben und eine ganze Anzahl weiterer Farben direkt mit dem Farbnamen angeben. Eine Tabelle mit den Standardfarben finden Sie im folgenden Abschnitt „Farben in HTML“. Eine komplette Liste findet sich im Anhang.
Rufen Sie die Datei nun im Browser auf. Wenn Sie die neue Linie betrachten, sehen Sie die Änderungen, die wir mit wenigen Attributen erreicht haben.
45
Text verschönern
PROFITIPP
Die Linie wurde umformatiert.
Das Tag
ist in der HTML-Spezifikation keine Empfehlung mehr, sondern wird als veraltet eingestuft. Stattdessen wird vorgeschlagen, Trennlinien mit CSS-Style-Sheet-Befehlen zu realisieren. Die gängigen Browser unterstützen
allerdings und werden das vermutlich noch für einige Generationen beibehalten.
1.5 Farben in HTML Im letzten Abschnitt haben wir eine Linie mit Farbe versehen. In den folgendne Abschnitten werden wir noch öfter mit Farben arbeiten. Deshalb folgt an dieser Stelle ein kurzer Exkurs zu Farben in HTML. Es gibt einige Farben, die sich über die Farbnamen aufrufen lassen. Die 16 Standardfarben finden Sie in der folgenden Tabelle. Eine Liste mit den übrigen Farben hat im Anhang Platz gefunden.
46
Name
Deutsche Bezeichnung
Farbcode
Aqua Black Blue Fuchsia Gray Green
Aquamarin Schwarz Blau Fuchsie Grau Grün
#00FFFF #000000 #0000FF #FF00FF #808080 #008000
Farben in HTML
Name
Deutsche Bezeichnung
Farbcode
Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
Limonengrün Dunkles Rot Dunkles Blau Olivgrün Lila Rot Silbergrau Dunkle Grün/Blau-Mischung Weiß Gelb
#00FF00 #800000 #000080 #808000 #800080 #FF0000 #C0C0C0 #008080 #FFFFFF #FFFF00
Die Standardfarben von HTML
Die zweite Art, eine Farbe anzugeben, ist der Farbcode. Er ist in hexadezimaler Schreibweise geschrieben und gibt den RGB-Farbwert einer Farbe an. Um dies näher zu erklären, müssen wir ein wenig ausholen: Computerbildschirme verwenden das RGB-Farbschema, das all seien Farben aus den drei Grundfarben Rot, Grün und Blau zusammensetzt. Deshalb nennt man dieses Farbschema auch additiv. Jede Farbe besteht also aus Anteilen von Rot, Grün und Blau. Diese Anteile variieren von 0 (nicht vorhanden) bis 255 (vollständig vorhanden). Reines Rot besteht also aus 255 Anteilen Rot, 0 Anteilen Grün und 0 Anteilen Blau. Nun könnte man diese Farbwerte direkt angeben. Das funktioniert auch, allerdings nur in Style Sheets (siehe Kapitel 2). In HTML müssen die RGB-Farben in das hexadezimale System übertragen werden. Ein hexadezimaler Farbcode beginnt mit einem Doppelkreuz #. Dann folgen zwei Stellen für den Farbanteil von Rot, anschließend zwei für Grün und abschließend zwei für Blau. Wenn Sie eine beliebige RGB-Farbe mit den Anteilen 0 Rot, 153 Grün und 51 Blau haben, müssen Sie die einzelnen Farbwerte in hexadezimale Schreibweise umwandeln. Bevor wir dazu kommen, zeigen wir Ihnen allerdings zuerst den umgekehrten Weg, da er das Hexadezimalsystem gut erklärt. Das Hexadezimalsystem enthält 16 Ziffern, wobei A bis F die Ziffern 10 bis 15 ersetzen. Um nun beispielsweise A2 in das Dezimalsystem umzuwandeln, müssen Sie die erste Ziffer A (=10) mit 16 multiplizieren und die zweite Ziffer addieren. Die gesamte Rechnung: 10 * 16 + 2 ergibt einen Farbwert von 162. Nun können wir auch in die andere Richtung umrechnen. Ziel war es, die RGB-Farbe 0, 153, 51 umzurechnen. Ein Rotanteil von 0 ist im Hexadezimalsystem 00. Der Grünwert von 153 errechnet sich folgendermaßen: 153 : 16 ergibt als ganze Zahl 9, das heißt die erste Zahl im hexadezimalen System ist die 9. Die zweite Zahl ist der Rest, der bei der Divi-
47
Text verschönern
sion herauskam, natürlich multipliziert mit 16. In unserem Beispiel ist das Ergebnis der Division 9,5625, der Rest also 0,5625. Dieser multipliziert mit 16 ergibt 9, die zweite Zahl ist also ebenfalls 9. Der richtige hexadezimale Wert für den Grünwert 153 ist also 99.
PROFITIPP
Das selbe Spielchen müssen Sie nun noch für den Blauwert durchführen: 51:16=3,1875; die erste Zahl ist also 3. Nun zur zweiten Zahl: 0,1875*16 ergibt 3. Die gesamte Farbe hat also den Wert #009933. Farben, die bei allen Farbanteilen nur aus den RGB-Farbwerten 0, 51, 102, 153, 204, 255 bestehen (hexadezimal: 00, 33, 66, 99, CC, FF), nennt man web-sichere Farben. Das sind Standardfarben, die – in der Theorie – auf allen Betriebssystemen und Oberflächen dargestellt werden können. Die Verwendung der web-sicheren Farben ist in der Praxis allerdings nur für die Standardfarben von Text und Links, weniger aber für Bilder von Interesse, da der Browser Bilder selbst auf die vom System darstellbaren Farben bringen kann, und auf der anderen Seite die Beschränkung auf websichere Farben eine erhebliche Design-Einschränkung bedeutet, die bei der Güte heutiger Monitore und Grafikkarten nicht mehr erforderlich ist.
1.6 Hervorhebungen In unserer Ausgangsdatei haben wir an zwei Stellen Hervorhebungen (synonym: Textauszeichnungen) verwendet. Einmal haben wir „CD-ROM“ fett dargestellt, zum anderen „Fakten“ und „Informationen“ kursiv. Beide Hervorhebungen sind sogenannte physikalische Textauszeichnungen, das heißt, dem Browser wird exakt gesagt, was er mit der entsprechenden Textstelle zu tun hat. Das Gegenstück zu den physikalischen sind die logischen Textauszeichnungen. Sie schreiben dem Browser nicht vor, wie er auszeichnen soll, sondern besagen nur, was das auszuzeichnende ist. Ein Beispiel ist das Tag <strong>. Es sagt nicht, wie ein Text hervorgehoben werden soll, sondern nur dass er das muss. Ob die Hervorhebung dann eine größere Schrift, fett oder kursiv ist, bleibt dem Browser überlassen. Welche Auszeichnung sollte man also wann verwenden? Befragen wir die offizielle HTML-Spezifikation des W3C dazu, so ergibt sich kein eindeutiges Urteil. Die gebräuchlichsten physikalischen Textauszeichnungen wie und sind nicht auf der „schwarzen Liste“ (Status: deprecated), aber es wird betont, dass man besser Style Sheets dafür verwenden sollte. Die wichtigsten logischen Textauszeichnungen <em>, und <strong> können im Prinzip verwendet werden. Hier ist allerdings dem Browser überlassen, wie er hervorhebt. Eine klare Empfehlung geht, wenn überhaupt, in Richtung Verwendung von Style Sheets.
48
Hervorhebungen
Was lehrt die Praxis? Die physikalischen Textauszeichnungen haben den großen Vorteil, dass sie auch auf den ältesten Browsern dargestellt werden und immer gleich aussehen. Auf der anderen Seite ergeben logische Textauszeichnungen in Verbindung mit Style Sheets ein mächtiges Werkzeug, da sich das Aussehen beispielsweise einer Hervorhebungen global für eine ganze Webseite oder sogar für mehrere Seiten ändern lässt.
Physikalische Textauszeichnungen In der folgenden Tabelle haben wir Ihnen die wichtigsten physikalischen Textauszeichnungen auf einen Blick zusammengefasst. Tag
Beschreibung
<small> <sub>
Fetter Text Große Schrift Kursiver Text Kleine Schrift Tiefgestellter Text. Wird beispielsweise für die Indexierung verwendet. Hochgestellter Text. Ist beispielsweise für Fußnoten oder Potenzen geeignet. Diktengleiche Schrift (Schrift, bei der alle Buchstaben und Abstände gleich sind; meist Courier)
<sup>
Physikalische Textauszeichnungen
Logische Textauszeichnungen Die folgende Tabelle enthält eine Übersicht über die wichtigsten logischen Textauszeichnungen: Tag
Beschreibung
Abkürzung. Wird von den gängigen Browsern wie gewöhnlicher Text formatiert. Akronym. Wird ebenfalls wie normaler Text formatiert. Zitat. Wird kursiv formatiert.Quellcode. Wird in diktengleicher Schrift (Schrift, bei der Buchstabenbreiten und Abstände gleich sind; meist Courier) angezeigt. Definition. Wird von den gängigen Browsern kursiv dargestellt. <em> Hervorhebung. Meist kursiv. Tastatureingabe. Meist in Courier. <samp> Beispiel. Ebenfalls meist in Courier.
49
Text verschönern
Tag
Beschreibung
<strong>
Starke Hervorhebung. Meist fett. Variable. Meist kursiv.
Logische Textauszeichnungen
1.7 Schrift ändern In unserer Ausgangsdatei haben wir dem letzten Absatz unter der horizontalen Trennlinie eine andere Schriftart, -größe und -farbe zugewiesen. Dazu dient der Tag . Im folgenden wollen wir die verschiedenen Formatierungen für den Text der Reihe nach ändern. Betrachten Sie zuerst die Codezeile mit der Formatierung im Editor. Das -Tag wird innerhalb eines Absatzes eingesetzt. Alle Formatierungen erfolgen innerhalb des Tags mit verschiedenen Attributen.
Die Formatierung wird mit Attributen in erledigt.
Im nächsten Schritt ändern wir die Schriftart. Für sie ist das Attribut face zuständig. Die Schriftart tragen Sie einfach als Wert für dieses Attribut ein. Wir ändern die Schriftart hier in Courier.
Die Schriftart wurde in Courier geändert
50
VORSICHT!
Schrift ändern
HTML greift auf die Schriftarten zu, die bei dem Betrachter der Seiten installiert sind. Das heißt, Exoten, die Sie auf ihrem Rechner haben, funktionieren unter Umständen an anderen Rechnern nicht. Statt dessen wird dort eine Ersatzschriftart verwendet. Alternativ können Sie auch verschiedene Schriftarten durch Kommata getrennt angeben und danach noch die Schriftfamilie festlegen. Folgender Code verwendet zuerst eine Arial, ist diese nicht installiert (bspw. am Macintosh), so wird die (fast) identische Helvetica verwendet. Ansonsten wird auf irgendeine Schrift aus der Familie der serifenlosen zurückgegriffen. Serifenlos heißt, die Schrift hat keine Füße und Erweiterungen.
Betrachten Sie im nächsten Schritt die Änderung im Browser. Hier erkennen Sie, dass die Schriftart angepasst wurde.
PROFITIPP
Die Schriftart in der Copyright-Zeile wurde geändert
Im Allgemeinen lassen sich serifenlose Schriften wie Arial am Bildschirm besser lesen und sind deswegen für Texte zu bevorzugen. Serifenschriften wie Times oder Courier sollten in einer ausreichenden hohen Schriftgröße vorliegen, um gut erkennbar zu sein.
Im nächsten Schritt ändern wir die Schriftgröße. Dazu muss das Attribut size verändert werden. Normalerweise wird die Schriftgröße in Punkt angegeben. Eine Schrift in einem Buch hat normalerweise 10 bis 11 Punkt, am Bildschirm sollten es mindestens 12 Punkt sein. So erfolgt auch die Angabe in Style Sheets. HTML hingegen verwendet
51
Text verschönern
verschiedene Schriftgrößen von 1 (kleinste) bis 7 (größte), wobei 4 die Standardschrift ist, deren Größe der Nutzer im Browser anpassen kann. Wenn wir nun die Schriftgröße anheben wollen, verwenden wir statt 1 die Größe 4.
Die Schriftgröße auf 4 erhöhen.
PROFITIPP
Die höhere Schriftgröße macht sich gleich im Browser bemerkbar.
Die Schriftgröße lässt sich auch mit + und - von der Standardgröße ändern. +1 bedeutet beispielsweise eine Erhöhung um 1, -1 eine Minderung. Im folgenden Code ist die Schriftgröße relativ zur Standardgröße um zwei Stufen gemindert, hat also bei einer Standardgröße von 4 auch den Wert 2.
Im letzten Schritt wollen wir noch die Textfarbe von rot zu blau ändern. Dies geschieht mit dem Attribut color im -Tag. Ändern Sie hier einfach von red zu blue.
52
Sonderzeichen
Die Farbe des Texts wurde geändert
1.8 Sonderzeichen Das Copyright-Zeichen aus dem letzten Absatz wurde mit einem Sonderzeichen realisiert. Ein Sonderzeichen beginnt mit einem kaufmännischen Und & und endet mit einem Strichpunkt ;. Dazwischen wird die Zeichenkette eingefügt, die die Art des Sonderzeichens bestimmt.
Auf der CD-ROM ... Auf der CD haben wir eine Datei mit allen wichtigen Sonderzeichen hinterlegt. Wenn Sie ein Sonderzeichen daraus brauchen, kopieren Sie es sich einfach in Ihren Code. Zuvor legen Sie die Datei in Ihr Arbeitsverzeichnis:
1 2
Kopieren Sie die Datei sonderzeichen.html in Ihr Beispielverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt).
3
Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie die Datei ändern können.
4
Wenn Sie sich nun die Datei im Browser ansehen, finden Sie alle Sonderzeichen, die Sie benötigen.
Wählen Sie auf der CD-ROM das Verzeichnis code\kap01 an.
Alle Sonderzeichen im Browser
53
Text verschönern
Wir erläutern Ihnen nun schrittweise, wie sie ein Sonderzeichen in eine andere HTML-Datei kopieren.
1
Öffnen Sie die Datei sonderzeichen.html in einem Texteditor. Öffnen Sie anschließend die Datei, in die Sie das Sonderzeichen einfügen möchten ebenfalls in dem Texteditor.
Die Datei sonderzeichen.html im Editor.
2
Markieren Sie im Editor das Sonderzeichen, das Sie benötigen. Sie sehen sein Aussehen und seine Position am besten im Browser. In unserem Beispiel wählen wir das Währungssymbol für das englische Pfund. Es heißt £ und befindet sich an der vierten Position von links.
Das Pfund-Symbol im Quelltext markiert
3 4 54
Kopieren Sie das Symbol mit Bearbeiten/Kopieren. Wechseln Sie nun in die Datei, wo Sie das Sonderzeichen einfügen wollen und klicken Sie an die Stelle, wo das Zeichen hin soll. Betätigen Sie dann Bearbeiten/Einfügen.
Sonderzeichen
Umlaute In HTML sind auch Umlaute Sonderzeichen, da sie beispielsweise bei amerikanischen Browsern nicht im Standard-Zeichenumfang enthalten sind. Die Umlaute folgen einem einfachen Schema. Sie beginnen mit dem kaufmännischen Und, dann folgt der Buchstabe für den Umlaut. Hier wird zwischen Groß- und Kleinschreibung unterschieden. Das heißt, ein kleines u produziert ein kleines ü, U dagegen ein großes. Nach dem Buchstaben folgt uml für Umlaut. ü ergibt also ein kleines ü, Ä ein großes A. In unserer Ausgangsdatei hatten wir noch einen kleinen Fehler. Das ü in „ausführlich“ im dritten Absatz ist kein Sonderzeichen. In einem deutschen Browser ist das kein Problem, sie sollten aber auf jeden Fall Sonderzeichen verwenden, um allen Nutzern gerecht zu werden.
Das ü ist noch kein Sonderzeichen.
Wir zeigen Ihnen im folgenden noch die erforderlichen Schritte, um das ü zu ändern.
1 2
Markieren Sie das ü und entfernen es. Setzen Sie an Stelle des ü das Sonderzeichen ü ein.
Das ü wird durch das korrekte Sonderzeichen ersetzt
55
Text verschönern
1.9 Fazit Die Änderungen, die wir in diesem Kapitel an der Ausgangsdatei vorgenommen haben, waren hauptsächlich kosmetischer Natur. Sollten Sie nicht alle Änderungen mit nachvollzogen haben, so finden Sie das fertige Ergebnis auf CD im Ordner code/kap01 unter dem Namen text_formatieren_geaendert.html.
Unser Ausgangsbeispiel wurde geändert
In diesem Kapitel haben Sie gesehen, wie Sie einen Text mit relativ wenig Aufwand formatieren können. Dies sollte aber nicht darüber hinwegtäuschen, dass Text bei einer Webseite im realen Leben sehr sorgfältig formatiert werden muss. Zu große oder zu kleine Schrift, die falsche Schriftart oder ungewöhnliche Farben führen oft zu verärgerten Nutzern. Im nächsten Kapitel zeigen wir Ihnen, wie Sie die selben Aufgaben mit Style Sheets lösen können.
56
2.0 Text verschönern mit Stylesheets Die Sprache für Stylesheets in und für HTML-Seiten ist CSS (Cascading Style Sheets). Sie liegt mittlerweile in der Version 2.0 vor. Stylesheets dienen als Ergänzung zu HTML und formatieren HTML-Objekte. Sie haben dabei eine Vielzahl an Wahlmöglichkeiten und Einstellungen. Stylesheets sind nicht nur ein flexibles Werkzeug, sondern erlauben auch Formatierungen, die mit HTML nicht möglich wären. Beispielsweise können Sie die Schriftgröße Punktgenau angeben, Absätze einrücken und die RGB-Werte von Farben verwenden, ohne auf die hexadezimale Schreibweise zurückgreifen zu müssen. Die Browserunterstützung von CSS 1.0 ist sehr gut. Der Internet Explorer hatte schon in Version 3 einige Befehle implementiert, in Version 4 wurde 1.0 dann komplett unterstützt. Außerdem kamen Teile von CSS 2.0 sowie eigene Microsoft-Kreationen dazu. Der Netscape Navigator 4.x unterstützt ebenfalls CSS 1.0 und teilweise 2.0, leistet sich aber relativ viele Schwachstellen und Bugs. Die neuesten Versionen sowie Opera 5.x bieten auch zu CSS 2.0 eine fast komplette Unterstützung. In der Praxis spricht normalerweise nichts gegen den Einsatz von Stylesheets. In diesem Kapitel werden wir außerdem hauptsächlich Befehle verwenden, die auch von Netscape 4.x unterstützt werden. Sollte das einmal nicht der Fall sein, finden Sie einen entsprechenden Hinweis. Dieses Kapitel beschäftigt sich mit den vielen Möglichkeiten von Stylesheets zur Formatierung von Text. Wir haben das Kapitel deshalb in zwei Arbeitsbeispiele getrennt. Das erste zeigt, wo in einer Datei Stylesheets vorkommen können, das zweite erlaubt Ihnen, Stil-Befehle zur Textformatierung zu ändern. Beide Beispiele werden mit dem schon bekannten Abschnitt „Auf der CD-ROM ...“ eingeleitet.
Text verschönern mit Stylesheets
2.1 Auf der CD-ROM ... Als erstes benötigen wir die Datei mit den Stylesheet-Formatierungen für Text. Sie finden sie wie gewohnt auf der CD-ROM.
1 2
Kopieren Sie die Datei text_stylesheet.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).
3
Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie die Datei ändern können.
4 5
Öffnen Sie die Datei text_stylesheet.html in Ihrem bevorzugten Editor.
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap2.
Anschließend öffnen Sie sie mit einem Browser.
Im Browser kommt Ihnen die Datei sicherlich bekannt vor. Es ist eine leichte Abwandlung des Arbeitsbeispiels aus dem ersten Kapitel.
Das Arbeitsbeispiel, formatiert mit Stylesheets
Im Editor erscheint die Datei auf den ersten Blick ein wenig verwirrend. Wir gehen kurz die neuen Elemente durch, erklären dann das Grundprinzip, um anschließend Modifikationen vorzunehmen:
58
Grundlagen von Stylesheets
■ Im Kopf der HTML-Datei ist ein Abschnitt zwischen den Tags <style> und hinzugekommen. Dieser Teil enthält mehrere Stylesheet-Definitionen mit den entsprechenden Befehlen in geschweifter Klammer. <style type="text/css"> p {font-family: Times} .kursiv {font-style: italic} p.copy {font-family: Arial; font-size: 8pt}
■ In den Tags der HTML-Seite sind allerdings ebenfalls Stylesheet-Befehle zu sehen, die mit dem Attribut style eingeleitet werden. style="font-size: 16pt"
■ In den Tags der HTML-Seite erfolgt außerdem mit dem Attribut class der Aufruf von Stylesheet-Klassen. Diese Klassen sind, wie man schon am Namen erkennt in dem Stylesheet im Kopf der HTML-Seite definiert. Sie finden beispielsweise die Klasse kursiv, die in der Überschrift verwendet wird, im Kopf der HTML-Seite wieder.
■ Außerdem werden zwei neue Tagsund <span> verwendet, in denen mittels des style-Attributs Formatierungen für Bereiche vorgenommen werden. Um ein wenig Ordnung in diese verschiedenen Arten von Stylesheets zu bringen, erklären wir Ihnen im Folgenden kurz, wo und in welcher Form Stylesheet-Befehle überall eingesetzt werden können. Anschließend zeigen wir Ihnen anhand eines weiteren Arbeitsbeispiels, wie Sie Textformatierungen erzeugen und modifizieren.
2.2 Grundlagen von Stylesheets Man unterscheidet grob Stylesheets im Kopf einer HTML-Seite, Stylesheets in Tags (mit dem style-Attribut) und externe Stylesheets. Die externen Stylesheets sind eine hervorragende Methode, die Formatierungen für mehrere Webseiten oder ein ganzes Webprojekt vorzunehmen. Wir stellen sie Ihnen in Kapitel 16, „Organisation einer Website“, näher vor.
Stylesheets im Kopf der HTML-Seite Ein Stylesheet im Kopf der HTML-Seite wird entweder für ein bestimmtes Tag oder als Klasse definiert. Der Unterschied ist, dass ein Stylesheet für ein Tag auf alle Tags dieser Art in der HTML-Datei angewendet wird, ohne dass ein Aufruf erforderlich ist. Wird dagegen nur eine Klasse definiert, so muss diese innerhalb des Tags mit dem Attribut class aufgerufen werden. In unserem Arbeitsbeispiel haben wir diese beiden
59
Text verschönern mit Stylesheets
Alternativen verwendet. Außerdem haben wir beide gekoppelt und eine Klasse definiert, die nur für das-Tag gilt. <style type="text/css"> p {font-family: Times} .kursiv {font-style: italic} p.copy {font-family: Arial; font-size: 8pt}
Im Folgenden zeigen wir Ihnen, wie die verschiedenen Arten zusammengesetzt sind, denn nur mit diesem Wissen können Sie die vorgefertigten Befehle auf Ihre Bedürfnisse anpassen: ■ Wenn Sie einen Stil-Befehl für ein Tag definieren wollen, schreiben Sie das Tag in das Stylesheet, dann folgt in geschweiften Klammern der Befehl. Ein Befehl erhält seinen Wert immer nach einem Doppelpunkt zugewiesen. Mehrere Befehle werden durch Strichpunkte voneinander getrennt.
VORSICHT!
Wollen Sie einen Stil-Befehl für mehrere Tags definieren, fügen Sie die Tags einfach durch Kommata getrennt hintereinander. Beispielsweise sorgt folgender Code dafür, dass der gesamte Text der HTML-Seite, auch der in Tabellen befindliche, eine einheitliche Schriftart erhält: body,td {font-family: Arial}
Wenn Sie die Tags nicht mit Kommata, sondern mit Leerzeichen voneinander trennen, dann formatieren Sie nur verschachtelte Tags. Ein Beispiel: p b {font-size: 12pt}
Dieser Code vergibt für Text, der innerhalb des -Tags steht, nur dann die Schriftgröße 12, wenn das -Tag innerhalb eines-Tags auftritt. Diese Verschachtelungen kann man auf beliebig vielen Ebenen vornehmen und so beispielsweise nur die zweite Ebene von Listen formatieren.
PROFITIPP
■ Eine Klasse definieren Sie, indem Sie mit einem Punkt beginnen. Dann folgt der Klassenname, anschließend die Stil-Befehle in geschweiften Klammern.
60
Eine Alternative zur Klasse ist die ID. Sie wird statt mit einem Punkt mit einem Doppelkreuz (#) eingeleitet. Der Aufruf im Tag erfolgt mit dem Attribut id. Im Folgenden sehen Sie die wichtigsten Teile des Quellcodes.
PROFITIPP
Grundlagen von Stylesheets
<style tyle="text/css"> #namederid {font-weight: bold}Text
Die offizielle Spezifikation besagt allerdings, dass eine ID in einem Dokument nur einmal vorkommen soll. Deshalb sollten Sie Klassen zur Zuweisung von Stylesheets vorziehen.
VORSICHT!
■ Für eine Klasse, die nur für ein bestimmtes Tag gelten soll, geben Sie zuerst das Tag an, dann den Punkt für die Klasse, anschließend den Klassennamen.
Eine Klasse, die für ein bestimmtes Tag definiert wurde, bewirkt in anderen Tags überhaupt nichts.
Stylesheets im Tag Ein Stylesheet im Tag wird immer mit dem Attribut style definiert. Die Befehle werden mit Kommata voneinander getrennt. Für Stylesheets werden auch oft die zwei ansonsten funktionslosen Tagsund <span> eingesetzt.definiert Stile für Blockelemente. Das sind beispielsweise Absätze. In unserem Beispiel haben wir ein-Element um zwei Absätze gelegt und die Schriftart geändert. Der Code ist im Folgenden abgedruckt. Unwichtige Teile wurden weggelassen....
...
Das <span>-Tag wird innerhalb von Blockelementen eingesetzt und dient zur Textauszeichnung. Entsprechend haben wir in unserem Beispiel die Hervorhebungen, die zuvor das - und das -Tag übernommen haben, mit dem <span>-Tag vorgenommen.
61
Text verschönern mit Stylesheets
Hierarchie Wir haben in unserem Ausgangsbeispiel mehrere unterschiedliche Zuweisungsmöglichkeiten von Stylesheets gemischt, damit Sie sich die für Ihre Arbeit beste, auswählen und herauskopieren können. Dennoch ist die Frage, was passiert, wenn mehrere Zuordnungsmethoden mit Stil-Befehlen, die sich widersprechen, gemischt werden. Welcher erhält dann den Vorzug? Prinzipiell gilt hier eine streng hierarchische Ordnung. Die Formatierung – egal ob CSS oder HTML –, die zuletzt angegeben wurde, wird dargestellt. Wenn also im Kopf der HTML-Seite für alle Absätze die Schriftart Times definiert wird, in einem Absatz im Körper der HTML-Seite aber Arial angegeben wird, so wird dieser Absatz auf jeden Fall in Arial dargestellt.
2.3 Auf der CD-ROM ... Kommen wir nun zu unserem zweiten Arbeitsbeispiel. Das Ausgangsbeispiel ist eine Datei mit einem Stylesheet im Kopf der HTML-Seite. Die Datei ebthält noch die Rohform eines Textes ohne Klassenaufrufe und Stil-Befehle. Wir zeigen Ihnen im Folgenden, wie Sie diese Klassen erstellen und Stil-Zuweisungen vornehmen. Bevor Sie beginnen, sind wieder die üblichen Schritte notwendig.
1 2 3 4
62
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap2. Kopieren Sie die Datei text_unformatiert.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt). Entfernen Sie den Schreibschutz (siehe Einleitung). Öffnen Sie die Datei text_unformatiert.html mit einem Browser.
Auf der CD-ROM ...
Bis jetzt wurde der Text noch nicht formatiert.
5
Anschließend öffnen Sie die Datei in Ihrem bevorzugten Editor.
In der Stil-Definition wurde noch nichts eingefügt.
63
Text verschönern mit Stylesheets
Im Editor sehen Sie sofort, was noch fehlt: ■ Das Stylesheet im Kopf der HTML-Seite enthält noch keine Inhalte. Die StilBefehle fehlen. ■ In den Tags des Seitenkörpers sind noch keine Aufrufe von Klassen enthalten. ■ Einzig die horizontale Linie erhält mit einer Stil-Zuweisung eine andere Farbe. Dies funktioniert allerdings nur im Internet Explorer, der Navigator, auch in Version 6, stellt diese Farbe nicht dar. Im Folgenden wollen wir Ihnen nun zeigen, wie Sie den bestehenden Text übersichtlich formatieren.
2.4 Schrift verändern Wir empfehlen Ihnen im Allgemeinen, zuerst den kompletten Absätzen ihre Formate zuzuweisen, bevor Sie Hervorhebungen vornehmen. Unser Ziel ist es, der Überschrift eine andere Schriftart als dem Text zuzuweisen. Die drei Textabsätze sollen alle gleich aussehen, der Absatz unter der Trennlinie wird deutlich kleiner und kursiv. Wir gehen dazu schrittweise vor und ändern zuerst die Überschrift.
1
Da die Überschrift nur einmal im Dokument vorkommt, könnte man sie auch im Tag selbst mit dem style-Attribut formatieren. Wir wählen hier dennoch die Formatierung für das Tag, da so jederzeit eine Überschrift hinzugefügt werden kann, die dann dasselbe Format erhält. Fügen Sie also das Überschriften-Tag h1 in das Stylesheet ein und beginnen Sie die Stil-Zuweisung mit einer geschweiften Klammer.
Das Tag für die Überschrift wird formatiert.
2 64
Im nächsten Schritt ändern wir die Schriftart der Überschrift. Dazu dient der Stylesheet-Befehl font-family. Vergeben Sie hier nach einem Doppelpunkt den
Schrift verändern
Wert Times, damit immer Times oder Times New Roman als Schriftart verwendet wird. Der Befehl wird mit einem Strichpunkt abgeschlossen, da danach noch weitere folgen.
Die Schriftart wurde geändert.
3
Nun ändern wir noch die Schriftgröße mit dem Stil-Befehl font-size. Vergeben Sie für die Überschrift den Wert 16 pt. Damit wird die Schrift 16 Punkt groß. Schließen Sie den Befehl mit einer geschweiften Klammer. Nach dem letzten Befehl muss kein Strichpunkt angegeben werden.
Die Schriftgröße der Überschrift wird auf 16 Punkt geändert.
4
Der Befehl font-size kann neben der Schriftgröße in Punkt die Schriftgröße auch noch in Pixel (px) oder Prozent der Standardgröße (%) enthalten. Eine weitere Möglichkeit ist die Angabe der Schriftgröße mit relativen Bezeichnungen. Bei relativen Schriftgrößen entscheidet der Nutzer über die Größe der Standardschriftart. Im Folgenden haben wir die Werte für relative Schriftgrößen zusammengefasst: Attribut
Schriftgröße
smaller
relativ gesehen kleiner als normal
xx-small
kleinste verfügbare Größe
65
Text verschönern mit Stylesheets
Attribut
Schriftgröße
x-small
sehr klein
small
klein
medium
mittel
large
groß
x-large
sehr groß
xx-large
größtmögliche Größe
larger
größer als normal
PROFITIPP
Wenn Sie das Ergebnis im Browser betrachten, sehen Sie, dass die Schriftgröße gegenüber der normalen Überschrift etwas kleiner wirkt. Da Times die Standardschriftart ist, hat sich hier nichts geändert.
Warum sollte man die Schriftart dennoch angeben? Der Nutzer kann die Standardschriftart im Browser verändern. Wenn Sie aber mit der Wahl der Schriftart eine bestimmte „optische“ Absicht verfolgen, wird ihr Design dadurch verändert. Dies verhindern Sie, indem Sie auch die Standardschriftart explizit angeben.
Nach der Überschrift sind nun die Absätze dran. Auch hierfür verwenden wir die Definition des Stils für das gesamte Tag, in diesem Fall also. Die speziellen Anpassungen für den Copyright-Absatz nehmen wir dann später mit Klassen vor. Im Folgenden werden die Anpassungen schrittweise erklärt: Zuerst folgt im Stylesheet im Kopf der HTML-Seite wie gewohnt die Bezeichnung des Tags, das formatiert werden soll. In unserem Beispiel ist das p für das
-Tag. Anschließend wird die geöffnete geschweifte Klammer angefügt, in die in den nächsten Schritten die Stilanweisungen eingetragen werden.
Das-Tag wird formatiert.
66
Schrift verändern
Im nächsten Schritt ändern Sie die Schriftart mit font-family auf Arial sowie mit fontsize die Schriftgröße auf 11 Punkt. Zum Schluss schließen Sie die geschweiften Klammern.
Die Schriftart und -größe für die Absätze wurden geändert.
Wenn Sie die Datei gespeichert haben und im Browser näher betrachten, sehen Sie die geänderte Schriftart und Schriftgröße des Fließtextes.
Fertig ist der neu formatierte Text!
Nach diesem Zwischenergebnis wollen wir nun noch den Copyright-Text am Ende in einer kleineren Schriftgröße, kursiv und mit einer anderen Farbe darstellen. Dazu benötigen wir zuerst eine Klasse. Diese Klasse kann an das-Tag gebunden sein, muss aber nicht. Wir haben uns hier für eine allgemeine Klasse entschieden.
67
Text verschönern mit Stylesheets
1
Zuerst legen wir die allgemeine Klasse im Kopf der HTML-Seite an. Sie erhält den Namen copy.
Eine allgemeine Klasse anlegen.
2
Nun folgen die Stil-Befehle. Zuerst verringern wir die Schriftgröße mit font-size auf 8 Punkt.
Die Schrift wird verkleinert.
3
68
Nun wollen wir die Schrift kursiv stellen. Dazu dient der Stylesheet-Befehl fontstyle. Er erhält den Wert italic (für kursiv). Ein alternativer Wert wäre oblique. Er stellt die Schrift schräg. Der Unterschied zwischen italic und oblique ist, dass bei italic immer zuerst ein eigener Schriftschnitt verwendet wird, der bei der Schrift mitgeliefert wird. oblique nimmt die Schrägstellung dagegen eigenständig vor und erzeugt deshalb teilweise nicht so schöne Ergebnisse.
Schrift verändern
Die Schrift wird kursiv.
4
Als Nächstes ändern wir noch die Farbe der Schrift. Dazu dient das Attribut color. Hier haben Stylesheets gegenüber HTML eine Besonderheit: Sie können Farben auch mit ihrem dezimalen RGB-Wert definieren. Dazu geben Sie einfach rgb und in runden Klammern die Farbanteile als Dezimalwerte, getrennt durch Kommata, an. rgb(0, 51, 153) gibt also ein dunkles Blau an. Dieses Blau verwenden wir auch gleich für unser Beispiel. Da dies der letzte Stil-Befehl für diese Klasse ist, können Sie auch gleich mit einer geschweiften Klammer abschließen.
PROFITIPP
Die Farbe der Schrift wurde in ein dunkles Blau geändert.
Das Attribut color kann neben dem RGB-Farbwert auch die Farbnamen oder die hexadezimalen Werte als Farben enthalten.
Wenn Sie nun die Seite im Browser aufrufen, was passiert dann? Gar nichts. Die Klasse wurde zwar definiert, aber von keinem Tag aufgerufen. Das heißt, wir müssen im letzten Schritt noch den Klassenaufruf in das-Tag des letzten Absatzes einfügen.
1
Wechseln Sie in das-Tag des letzten Absatzes.
69
Text verschönern mit Stylesheets
2
Fügen Sie das Attribut class ein.
Das Attribut class ruft die Klasse auf.
3
Als Nächstes folgt der Klassenname copy. Vergessen Sie nicht, mit einem Anführungszeichen abzuschließen.
Die Klasse wird nun mit Namen aufgerufen.
Wenn Sie das Ergebnis im Browser betrachten, sehen Sie eine ansprechend formatierte Seite. Im nächsten Abschnitt fügen wir noch einige Hervorhebungen ein, die das Bild abrunden.
Die Seite wurde ansprechend formatiert.
70
PROFITIPP
Hervorhebungen
Der Stil-Befehl font enthält mehrere Befehle zur Schriftformatierung in einer vorgegebenen Reihenfolge: font-style, font-weight, font-size, font-family
In einem Beispiel sieht das so aus: .copy {font: italic normal 8pt Arial}
2.5 Hervorhebungen Nun wollen wir in unserer Datei einige Begriffe optisch hervorheben. Ein Stylesheet verwendet zur Hervorhebung bestimmter Bereiche natürlich wieder HTML-Tags. Diese Tags haben Sie schon kennen gelernt:und <span>. Beide haben in HTML keine sichtbare Formatierungsfunktion und sind deshalb hervorragend geeignet.wendet Stylesheet-Befehle auf Blockelemente wie beispielsweise Absätze an, während <span> innerhalb von Blockelementen zum Einsatz kommt. Damit ist <span> hervorragend als Tag für Hervorhebungen geeignet. Im Folgenden wollen wir in unserer Ausgangsdatei im zweiten Absatz die Begriffe „CSS 1.0“ und „CSS 2.0“ fett hervorheben. Das Verfahren ist für beide Begriffe gleich, deshalb erklären wir es nachfolgend schrittweise am Beispiel von „CSS 1.0“:
1
Zuerst müssen Sie „CSS 1.0“ in die Tags <span> und einschließen. Dies hat im Browser noch keine optischen Auswirkungen.
Der Begriff wird in das <span>-Tag-Paar eingeschlossen.
2
Nun fügen Sie in das <span>-Tag das Attribut style ein, um dort eine Stildefinition vornehmen zu können. Alternativ könnten Sie natürlich auch mit dem Attribut class auf eine Klasse zugreifen.
71
Text verschönern mit Stylesheets
Das Attribut style enthält die Stylesheet-Befehle.
3
Im nächsten Schritt soll der Text fett formatiert werden. Dazu fügen Sie den Stylesheet-Befehl font-weight ein und vergeben den Wert bold.
PROFITIPP
Fertig ist die Hervorhebung!
Der Stylesheet-Befehl font-weight kann neben bold noch andere Werte annehmen: ■ bolder stellt die Schrift fetter dar als bold. ■ lighter erzeugt eine dünnere Schrift. ■ Die Schriftstärke lässt sich auch in einer Skala von 100 (sehr dünn) bis 1000 (sehr fett) in Hunderterschritten festlegen. Die Standardschrift hat eine Dicke von 400, fett entspricht einer Dicke von 700.
Ein erster Test im Browser zeigt Ihnen, dass der Text ordnungsgemäß hervorgehoben wird. Führen Sie nun dieselben Schritte noch einmal für den zweiten Begriff „CSS 2.0“ aus oder kopieren Sie das <span>-Tag vom ersten.
72
Weitere Textformatierungen
Beide Begriffe wurden fett hervorgehoben.
2.6 Weitere Textformatierungen In diesem Abschnitt widmen wir und in der Praxis weniger gebräuchlichen Textformatierungen .
Auf der CD-ROM ... Die in diesem Abschnitt vorgestellten Textformatierungen sind in der Praxis nicht wichtig genug, als dass wir sie in unser Standardbeispiel einbauen wollten. Dennoch sollten Sie schnellen Zugriff darauf haben. Deshalb haben wir die Formatierungen in einer Datei zusammengefasst. Die Datei erhalten Sie auf dem bereits bekannten Weg:
1 2
Kopieren Sie die Datei weitere_schriftformate.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).
3
Entfernen Sie den Schreibschutz von der Datei (siehe Einleitung), damit Sie die Datei ändern können.
4
Öffnen Sie die Datei mit einem Browser.
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap2.
Sie sehen, dass wir für alle Formatierungen ein kleines Beispiel in die Datei eingefügt haben.
73
Text verschönern mit Stylesheets
Die verschiedenen Textauszeichnungen
Wollen Sie eine dieser Formatierungen einsetzen, müssen Sie nur die Klasse mit der Formatierung aus der Datei herauskopieren und in ihre Datei einfügen. Wir zeigen Ihnen das schrittweise.
1
Öffnen Sie die Datei weitere_schriftformate.html aus Ihrem Arbeitsverzeichnis in Ihrem Lieblingseditor. Dort sehen Sie, dass alle Formatierungen als Klassen in einem Stylesheet im Kopf der HTML-Seite angelegt wurden. Öffnen Sie anschließend die Datei, in die Sie die Formatierung übernehmen möchten.
Für jedes Format gibt es eine eigene Klasse.
74
Weitere Textformatierungen
2
Wählen Sie nun einfach das gewünschte Format aus. Als Beispiel verwenden wir Kapitälchen.
Die Klasse mit dem Format „Kapitälchen“ wurde gewählt.
3
Kopieren Sie die Codezeile mit dem Befehl Bearbeiten/Kopieren. Fügen Sie sie anschließend mit Bearbeiten/Einfügen in das Stylesheet im Kopf der HTML-Datei ein, in die Sie die Formatierung übernehmen möchten. Sollten Sie nur die Formatierung ohne Klasse benötigen, markieren Sie nur den Stylesheet-Befehl selbst und kopieren ihn beispielsweise in ein style-Attribut.
Es wurde nur der Stylesheet-Befehl markiert.
In den folgenden drei Abschnitten stellen wir Ihnen kurz die Textauszeichnungen vor, die sich in der Datei weitere_schriftformate.html verbergen. Die wichtigste Information ist dabei natürlich, welche Befehle in welchen Browsern funktionieren.
75
Text verschönern mit Stylesheets
Kapitälchen
PROFITIPP
Die Kapitälchen werden mit dem Stylesheet-Befehl font-variant und dem Wert variant erzeugt. Dieser Befehl funktioniert nicht im Netscape Navigator 4.x. Der Internet Explorer unterstützt die Funktion seit Version 4.
Ein Vorbild bei der Unterstützung von Stylesheets ist Opera 5.x. Er unterstützt alle hier vorgestellten Textauszeichnungen ohne Probleme.
Groß-/Kleinbuchstaben Der Style Sheet-Befehl text-transform sorgt für eine Umwandlung von Groß- in Kleinbuchstaben und umgekehrt. Er wird vom Internet Explorer erst ab Version 5 unterstützt. Netscape hat ihn schon in Version 4.x integriert. text-transform kann folgende Werte annehmen: ■ uppercase – wandelt alle Buchstaben in Großbuchstaben um. ■ lowercase – wandelt alle Buchstaben in Kleinbuchstaben um. ■ capitalize – stellt die ersten Buchstaben von jedem Wort in Großbuchstaben dar.
Unter-, über- und durchgestrichen Der Stylesheet-Befehl text-decoration hält verschiedene Arten von Textauszeichnungen bereit, die meist in irgendeiner Form einen Strich im Text erzeugen. Im Einzelnen gibt es folgende Möglichkeiten:
PROFITIPP
■ underline – unterstrichen. Die Standardeinstellung für Links.
76
Text, der keinen Link darstellt, sollten Sie nicht unterstreichen, da dies den Nutzer unnötig verwirrt.
Fazit
VORSICHT!
■ none – keine Textauszeichnung. Bei Links führt dies dazu, dass sie nicht mehr unterstrichen sind.
Viele Nutzer sind irritiert, wenn Links auf einmal nicht mehr unterstrichen erscheinen. Daher sollten Sie sich gut überlegen, ob sie die Unterstreichung von Links entfernen.
■ line-trough – durchgestrichen. Funktioniert mit den gängigen Browsern. ■ blink – blinkend. Funktioniert im Internet Explorer nicht. Da der Effekt außerdem recht aufdringlich ist, sollten Sie ihn vermeiden. ■ overline – überstrichen. Funktioniert nicht mit dem Netscape Navigator Version 4.x und darunter.
2.7 Fazit In diesem Kapitel haben Sie gesehen, was man unter Stylesheets versteht und (hoffentlich) auch, wieso das W3C von der Verwendung des -Tags mittlerweile abrät und den Einsatz von den weitaus leistungsstärkeren Stylesheets empfiehlt. Mit ein wenig Übung formatieren Sie nun Texte schneller als je zuvor.
77
3.0 Mit Bildern und Links arbeiten Wenn man danach fragt, was das World Wide Web ausmacht, erhält man viele verschiedene Antworten. Wir wetten aber mit Ihnen, dass „bunte Bilder“ und „Interaktivität“ in dieser Liste auftauchen. Die bunten Bilder werden manchmal negativ, manchmal auch positiv gesehen. Fakt ist aber, dass die Zeiten des rein textbasierten Internets vorbei sind. Und wenn Sie uns fragen, ist das auch gut so. Die Interaktivität entsteht hauptsächlich durch die Verknüpfungen zwischen den unterschiedlichsten Seiten. Diese werden über Links realisiert. In diesem Kapitel zeigen wir Ihnen, wie Sie ein Bild einfügen und welche Einstellungen Sie vornehmen können. Anschließend verlinken wir die Ausgangsdatei mit einer anderen Seite und unterscheiden verschiedene Arten von Links. Zum Schluss folgt ein zweites Arbeitsbeispiel, bei dem ein Hintergrundbild in die Seite eingebunden wird.
3.1 Auf der CD-ROM ... In diesem Kapitel beginnen wir mit einer ganz einfachen HTML-Datei. Wie immer, muss sie zuerst von der CD in Ihr Arbeitsverzeichnis kopiert werden. Dazu sind folgende Schritte notwendig:
1 2
Kopieren Sie die Datei bild.html und das Bild erde.jpg in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).
3
Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können.
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap3.
Mit Bildern und Links arbeiten
4 5
Öffnen Sie die Datei bild.html in Ihrem bevorzugten Editor.
Anschließend öffnen Sie sie mit einem Browser.
Das Bild mit Beschriftung im Browser
Wenn Sie sich die Datei im Editor ansehen, fällt Folgendes auf: ■ Das Bild wird mit dem-Tag eingebunden. Dieses Tag hat kein End-Tag. ■ Die Adresse des Bildes steht in dem Attribut src. Wenn das Bild, wie in diesem Fall, im selben Ordner liegt wie die HTML-Datei, reicht der Name des Bildes. Ansonsten funktioniert der Bildverweis als relative oder absolute Verknüpfung. Mehr dazu im Abschnitt „Grundlagen zu Links“. ■ Die Beschriftung neben dem Bild wird rechts unten am Bildrand angezeigt. Im Folgenden wollen wir verschiedene Eigenschaften des Bildes modifizieren. Bevor wir damit beginnen, noch einige Grundlagen zu Dateiformaten. Die beiden gängigsten Dateiformate für das Web sind JPEG und GIF. JPEG unterstützt 16,7 Millionen Farben, also das komplette RGB-Spektrum, und ist deshalb besonders gut für Fotos geeignet. Allerdings komprimiert es verlustbehaftet, das heißt, der Algorithmus, der das Bild verkleinert, entfernt auch Bilddetails. GIF unterstützt nur eine Farbpalette von 256 Farben, komprimiert dafür verlustfrei, unterstützt Transparenz und man kann damit sogar Animationen realisieren. GIF wird hauptsächlich für flächige Grafiken, Schaltflächen und Ähnliches verwendet. Um eine GIF-Datei einzubinden, müssen Sie hinter an Dateinamen nur .gif anfügen. Ein drittes Format ist PNG. Es komprimiert verlustfrei und hat eine Variante mit 256 Farben oder weniger (PNG-2 mit 2 Farben,
80
Bildgröße
PNG-4 mit 16, PNG-6 mit 128, PNG-8 mit 256) und eine mit 16,7 Millionen Farben (PNG-24). Das Format wurde entwickelt, da der Komprimieralgorithmus des GIFFormats ein Patent der Firma Unisys ist. PNG-Dateien binden Sie in HTML einfach mit der Dateiendung .png ein.
3.2 Bildgröße In diesem Abschnitt ändern wir zuerst die Größe des Bildes. Um es gleich vorauszuschicken: Eine solche Größenänderung sollten Sie normalerweise im Grafikprogramm vornehmen, da es Bilder besser neu berechnet als der Browser dies kann. Warum muss das Bild bei einer Größenänderung überhaupt neu berechnet werden? Eine Bilddatei besteht aus einzelnen Bildpunkten. Auf dem Bildschirm entspricht ein Bildpunkt einem Pixel. Erhöht man nun die Größe, muss man auch die Zahl der Bildpunkte anheben. Diese Bildpunkte kommen natürlich nicht einfach aus dem Nichts, sondern müssen neu berechnet werden. Das Ausgangsbild in unserem Beispiel ist 210 Pixel hoch und 200 Pixel breit. Im Folgenden zeigen wir Ihnen schrittweise, wie Sie die Bildgröße ändern.
1
Wechseln Sie im Editor in das-Tag nach dem src-Attribut.
Wo der Cursor steht, muss ein neues Attribut eingefügt werden.
2
Fügen Sie das Attribut height ein. Es enthält die Höhe des Bildes.
81
Mit Bildern und Links arbeiten
Das Attribut height gibt die Höhe des Bildes an.
3
Es gibt mehrere Möglichkeiten, die Bildhöhe anzugeben. Sie können entweder einen Wert in Pixel (ohne Maßeinheit) oder einen Prozentwert (%)angeben. Der Prozentwert wird immer abhängig von der Fenstergröße berechnet. In unserem Beispiel verdoppeln wir die Höhe des Bildes, geben also 420 Pixel ein.
Die Bildgröße wurde erhöht.
Wenn Sie das Bild nun im Browser betrachten, würden Sie eigentlich erwarten, dass die Breite noch in Originalgröße dargestellt wird, das Bild also verzerrt ist. Dem ist aber nicht so. Alle Browser skalieren die Breite proportional mit der Höhe. Theoretisch würde also eine Angabe ausreichen. Dies ist jedoch sehr unsauber, deshalb fügen wir in den nächsten Schritten auch die Breite hinzu.
82
Bildgröße
Die Breite wird automatisch mit skaliert.
Für die Breite muss das Attribut width in das-Tag eingefügt werden.
Die Breite wird mit width angegeben.
Geben Sie für die Breite einen Wert von 400 Pixel an.
83
Mit Bildern und Links arbeiten
Der Wert für die Breite wurde eingetragen.
Wenn Sie das Bild nun näher betrachten, sehen Sie auch, dass das Ergebnis unschön aussieht. Noch schlimmer wird es, wenn Sie das Bild verzerren. Wir haben im folgenden Beispiel die Breite auf die Originalgröße 200 Pixel reduziert und die Höhe auf 420 Pixel belassen.
Ein verzerrtes Bild
84
Bildnamen und Alternativtext
3.3 Bildnamen und Alternativtext Einen Namen benötigt das Bild, um beispielsweise per JavaScript aufrufbar zu sein. Der Alternativtext wird angezeigt, wenn der Nutzer mit der Maus über die Grafik fährt oder die Grafik nicht im Browser angezeigt wird. Im Folgenden zeigen wir Ihnen schrittweise, wie Sie einen Namen und einen Alternativtext vergeben: Wechseln Sie in das-Tag und fügen Sie das Attribut name ein. Als Wert vergeben Sie den Namen „Erde“.
Der Name wurde eingefügt,
Im nächsten Schritt folgt der Alternativtext. Das Attribut hierfür ist alt. Als Wert geben Sie einen möglichst sinnvollen Text ein. Wir haben „Die Erde“ als sprechenden Text gewählt.
Der Alternativtext wurde eingefügt.
85
PROFITIPP
Mit Bildern und Links arbeiten
Sie sollten immer einen Alternativtext anbieten, da manche Nutzer surfen, ohne sich Grafiken anzeigen zu lassen. Außerdem erscheint der Text schon, bevor das Bild geladen ist.
Der Alternativtext wird angezeigt.
3.4 Text am Bild ausrichten Der Beschreibungstext rechts neben dem Bild kann am Bild ausgerichtet werden. Hier gibt es allerdings eine Einschränkung. Der Text kann nur eine Zeile hoch sein, höherer Text wird automatisch unter dem Bild angezeigt. Wollen Sie mehr Text neben dem Bild ausrichten, so sollten Sie eine Tabelle zum Anordnen verwenden. Nachfolgend zeigen wir Ihnen, wie Sie mit dem Attribut align den Text am Bild ausrichten können.
86
Text am Bild ausrichten
Fügen Sie in das-Tag das Attribut align ein. Es richtet nicht das Bild selbst, sondern den angrenzenden Text aus.
Das Attribut align richtet den Text am Bild aus.
Für das Attribut align gibt es mehrere Möglichkeiten. Für unser Beispiel verwenden wir den Wert middle, um den Text am Bild zu zentrieren.
Den Text mittig ausrichten
In folgender Tabelle finden Sie alle Optionen für das Attribut align kurz zusammengefasst. Werte für align
Beschreibung
absbottom (nur NN ab 3.0)
Richtet den Text an der Unterkante aus. Bei Text mit verschiedenen Schriftgrößen gilt die kleinste als Referenz.
absmiddle (nur NN ab 3.0)
Richtet den Text an der Mitte des Bildes aus. Referenz ist die kleinste Schriftart im Text.
baseline (nur NN ab 3.0)
Funktioniert wie bottom.
87
Mit Bildern und Links arbeiten
Werte für align
Beschreibung
bottom
Richtet Text an der Unterkante des Bildes aus. Dies ist die Standardeinstellung.
middle
Richtet Text an der Bildmitte aus.
texttop (nur NN ab 3.0)
Richtet den Text an der Oberkante des Bildes aus. Als Referenz dient die kleinste Schriftart.
top
Richtet den Text an der Oberkante des Bildes aus.
Möglichkeiten zur Ausrichtung von Text an einem Bild
Im Browser ist kein Abstand zwischen Bild und Text zu sehen.
Wenn Sie sich die mittige Ausrichtung des Textes am Bild im Browser ansehen, werden Sie bemerken, dass zwischen Bild und Text kein Abstand ist. Dies sieht nicht sehr gut aus. Mit dem Attribut hspace können Sie Abstand neben dem Bild einfügen. Zuerst fügen Sie das Attribut hspace in das-Tag ein. Vergeben Sie als Wert eine Angabe in Pixeln. Für unser Beispiel verwenden wir 10 Pixel.
88
Text am Bild ausrichten
Einen horizontalen Abstand von 10 Pixel verwenden.
Wenn Sie das Ergebnis im Browser betrachten, sehen Sie den kleinen Haken des Attributs hspace. Es fügt nicht nur nach rechts, wo der Text steht, einen Abstand ein, sondern auch nach links. In der Praxis verwendet man deshalb meistens eine Tabelle, um Text am Bild auszurichten.
Der Abstand wird nach links und nach rechts eingefügt.
89
PROFITIPP
Mit Bildern und Links arbeiten
Das Gegenstück zum Attribut hspace ist vspace. Es sorgt für den vertikalen Abstand, also den Abstand nach oben und unten.
3.5 Auf der CD-ROM ... Als Nächstes wollen wir den Text und anschließend die Grafik unserer Beispieldatei mit einem Link versehen. Damit ein Link, also ein Verweis, auf eine andere Datei überhaupt Sinn macht, benötigen Sie natürlich diese Datei. Mit folgenden Schritten holen Sie sie auf Ihren Rechner:
1 2
Kopieren Sie die Datei ziel.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).
3
Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können.
4
Öffnen Sie ziel.html in Ihrem bevorzugten Editor.
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap3.
Die eben geöffnete Datei benötigen wir nicht sofort. Zuerst erklären wir Ihnen anhand der Datei bild.html, wie Sie einen Link setzen und welche Arten von Links es gibt.
3.6 Grundlagen zu Links Man unterscheidet drei Arten von Links: ■ Relative Links verweisen auf eine Datei relativ zur Position im Ordnersystem der Datei, von der aus verwiesen wird. Ist eine Datei beispielsweise im selben Ordner, reicht es, ihren Namen in den Link zu schreiben, liegt sie einen Ordner höher, muss vor den Namen ../ geschrieben werden. Dies ist das Symbol für die nächsthöhere Ordnerebene. In Abbildung 3.17 haben wir Ihnen dies anhand eines Beispiels illustriert. Nehmen wir an, die Datei, aus der Sie verlinken, befindet sich im Ordner link. Die Datei, auf die Sie linken wollen, liegt im Ordner ziel. Da der Zielordner auf der gleichen Ebene wie der Quellordner liegt, müssen Sie zuerst eine Ebene höher, also im Link, ../ eintragen. Anschließend wechseln Sie wieder eine
90
Grundlagen zu Links
Ebene tiefer in den Ordner ziel. Dafür müssen Sie den Ordner im Link eintragen. Der komplette Link sieht dann so aus: ../ziel
Der Explorer für das Beispiel
PROFITIPP
■ Absolute Links sind komplette Internetadressen wie http://www.mut.de.
Absolute Links dürfen auch abgekürzt verwendet werden, also beispielsweise nur das Verzeichnis ab einer bestimmten Stelle, z.B. /werkstatt/ziel. Für Protokoll (http) und Domainangaben (www.mut.de) werden die Daten der Seite verwendet, von der aus verlinkt wird.
■ Anker sind Links auf Stellen im Dokument. Sie müssen dort definiert worden sein. Absolute und relative Links lassen sich auf dieselbe Art zuweisen. Lediglich beim Anker gibt es kleine Unterschiede. Im Folgenden beschreiben wir, wie Sie einen Link zuweisen. Anschließend erläutern wir, wie ein Anker gesetzt wird.
Link zuweisen In der Datei bild.html kennen Sie ja bereits den Beschreibungstext neben dem Bild. Wir wollen nun das Wort „Erde“ auf die Datei ziel.html verlinken:
1
Jede Art von Link verwendet das -Tag. Deshalb müssen Sie das Wort „Erde“ in und einschließen.
Die -Tags wurden eingefügt.
2
Nun muss das Ziel des Links angegeben werden. Dazu dient das href-Attribut im -Tag.
91
Mit Bildern und Links arbeiten
Das Attribut href fügt die Zieladresse ein.
3
Als Wert folgt der Link. Er kann relativ oder absolut sein. In unserem Beispiel ist es ein relativer Link auf die Datei im Verzeichnis. Deshalb reicht der Dateiname ziel.html.
Der relative Link auf die Datei ziel.html.
Ein Klick auf den Link öffnet in der Seite die Datei ziel.html.
92
Grundlagen zu Links
Anker definieren Als Nächstes wenden wir uns der Datei ziel.html zu. Hier wollen wir den zweiten Absatz mit einem Anker versehen. Auf diesen Anker können wir dann anschließend aus der Datei bild.html verweisen.
1
Zuerst benötigen wir wieder die beiden Tags und , denn auch ein Anker wird mit diesen Tags definiert. Der Anker soll um den Text im zweiten Absatz gelegt werden.
Die -Tags rund um den Bereich, der als Anker dienen soll
2
Als Nächstes muss mit dem Attribut name der Name des Ankers definiert werden. Wir verwenden als Name „anker“.
Der Name des Ankers wurde definiert.
3
Nun muss in der Datei bild.html der Link auf den Anker eingefügt werden. Ein Anker wird immer mit einem Doppelkreuz # begonnen. Für unser Beispiel fügen wir hinter den Link auf die Datei ziel.html den Verweis auf den Anker ein. Dazu geben Sie #anker ein.
93
Mit Bildern und Links arbeiten
Der Verweis auf den Anker
Wenn Sie den Link nun im Browser testen, wird die Seite geöffnet und gleich zum Anker gesprungen.
Der Verweis mit dem Anker
94
PROFITIPP
Link in einem neuen Fenster öffnen
Sie sehen den Effekt des Ankers nur, wenn das Browserfenster klein genug ist. Ansonsten müssen Sie einfach mehr Zeilenumbrüche einfügen, um die HTML-Seite von ziel.html zu verlängern.
3.7 Link in einem neuen Fenster öffnen Sie können eine Seite, auf die Sie verlinken, in einem neuen Browserfenster öffnen. Im Folgenden zeigen wir Ihnen schrittweise, wie das funktioniert:
1
Mit dem Attribut target legen Sie fest, in welchem Fenster der Link geöffnet wird.
Das Attribut target legt fest, in welchem Fenster der Link geöffnet wird.
2
Das Attribut target kann verschiedene Werte annehmen, wovon sich zwei allerdings auf das komplette Frameset beziehen (mehr zu Frames in Kapitel 7 „Frames“): ■ _blank – Der Link wird in einem neuen Fenster geöffnet. ■ _parent – Der Link wird im übergeordneten Frameset geöffnet. ■ _self – Der Link öffnet sich im aktuellen Frame oder in der gleichen Seite. Dies ist die Standardeinstellung. ■ _top – Der Link wird im aktuellen Fenster geöffnet. Alle Framesets werden verlassen. ■ name – vergibt einen beliebigen Namen für das neue Fenster, das sich öffnet. Ist bereits ein Fenster mit diesem Namen geöffnet, so wird die Seite darin geöffnet. Die letzte Option erscheint uns für unser Beispiel am sinnvollsten. Wir vergeben einfach den Namen fenster.
95
Mit Bildern und Links arbeiten
Der Fenstername wurde festgelegt.
Wenn Sie das Ergebnis im Browser testen, wird die aufgerufene Seite in einem neuen Fenster geöffnet.
3.8 Verschiedene Farben für verschiedene Zustände Links sind im Allgemeinen blau. Das muss natürlich nicht so sein, vielmehr können Sie die Linkfarbe beliebig ändern. Zum einen können Sie Links wie jeden anderen Text auch formatieren, zum anderen lassen sich auch für jeden Zustand des Links eigene Farben vergeben. Ein Link kann folgende Zustände annehmen: ■ Normal. ■ Aktiviert (activated). Dies ist der Zustand, wenn der Link angeklickt ist. ■ Besucht (visited). Die Seite, auf die gelinkt wird, wurde bereits einmal geöffnet und ist im Cache des Browsers. Im folgenden Beispiel ändern wir die Farben für die Zustände der Links.
1
Alle drei Zustände ändern Sie für die gesamte HTML-Seite im -Tag. Die Farbe des normalen Links ändern Sie mit dem Attribut link. Für dieses Beispiel weisen wir den Wert green zu.
Der normale Link wird grün.
2 96
Mit dem Attribut alink ändern wir die Farbe des aktivierten Links auf blue (blau).
Grafik als Link
Der aktive Link ist blau
3
Im letzten Schritt werden bereits besuchte Links mit dem Attribut vlink und dem Wert red rot eingefärbt.
Bereits besuchte Links sind rot
PROFITIPP
Wir verzichten hier auf eine Abbildung des Ergebnisses, da die Farben im Druck nicht zu erkennen sind. Sie können die Linkfarben auch mittels Stylesheets ändern. Dazu gibt es drei Pseudoklassen für die drei Zustände: ● a:link – definiert Stile für einen normalen Link. ● a:active – legt Stile für einen aktiven Link fest. ● a:visited – bestimmt Stile für besuchte Links.
3.9 Grafik als Link Eine Grafik als Link ist im Prinzip sehr einfach realisierbar. Sie müssen einfach den Link um die Grafik legen. In unserem Beispiel sähe das in der Theorie folgendermaßen aus:
Hier ergibt aber das Problem, dass um das Bild herum automatisch ein Rahmen angezeigt wird.
97
Mit Bildern und Links arbeiten
Ein Rahmen um das Bild
Dieses Problem lässt sich sehr einfach lösen: Wechseln Sie in das-Tag und setzen Sie dort das Attribut border auf 0. border bestimmt die Rahmendicke. Standardmäßig ist ein Rahmen nicht sichtbar, sobald ein Bild aber ein Link ist, wird er eingeblendet. Mit border="0" lässt er sich wieder entfernen.
AUF DER
CD-ROM
Der Rahmen wird entfernt.
98
Sie finden das komplette Beispiel auf der CD-ROM zum Buch unter dem Namen bild_link.html.
E-Mail-Adressen und Dateien verlinken
3.10 E-Mail-Adressen und Dateien verlinken
AUF DER
CD-ROM
Normale Links haben wir in den letzten Abschnitten in aller Ausführlichkeit besprochen. Hier sollen nun die Sonderformen zu ihrem Recht kommen. Sie erfahren, wie Links auf E-Mail-Adressen, Dateien oder FTP-Server gesetzt werden.
Auf der CD-ROM finden Sie im Ordner code/kap03 die Datei andere_links.html. Sie enthält jeweils ein Beispiel für alle Arten von Links. Öffnen Sie die Datei in Ihrem Lieblingseditor, um sie näher zu betrachten.
Vier verschiedene Links in einer Datei
Im Folgenden stellen wir die verschiedenen Optionen der Reihe nach vor: ■ Ein E-Mail-Link wird immer mit mailto: begonnen. Danach folgt die MailAdresse, an die die Mail geschickt wird. Die gängigen Browser öffnen je nach Installation und Einstellungen den dem Browser beigefügten Mail-Client. Sie können diesem Mail-Client noch weitere Daten mitgeben. Diese werden nach dem Fragezeichen eingefügt und durch das kaufmännische Und (&) getrennt: [email protected] – gibt eine E-Mail-Adresse für eine Carbon Copy der
Mail an. [email protected] – gibt eine E-Mail-Adresse für eine Blind Carbon Copy an. subject=Betreff – belegt die Betreffzeile des Mail-Clients mit einer Vorgabe. body=Mailtext – belegt den Mail-Text im Körper der E-Mail vor.
99
PROFITIPP
Mit Bildern und Links arbeiten
Die zusätzlichen Angaben hinter der Mail-Adresse nach dem Fragezeichen sind nicht Teil der W3C-Spezifikation, werden aber von den gängigen Browsern unterstützt. Einige Mail-Clients haben allerdings Schwierigkeiten mit diesen Optionen.
■ Ein Newsgroup-Link wird mit news: eingeleitet. Danach folgt die Adresse der Newsgroup. ■ Der Link auf eine beliebige Datei erfolgt wie der Link auf eine HTML-Datei. Nur die Dateiendung signalisiert dem Browser, dass es sich um eine andere Datei handelt. ■ Der Zugriff auf eine FTP-Seite erfolgt unter Angabe des Protokolls ftp://. Bei einem FTP-Server mit Passwortschutz kann nach dem Protokoll der Username und das Passwort, getrennt durch einen Doppelpunkt eingefügt werden. Eine solche Übertragung von Passwörtern in Klartext ist allerdings sehr unsicher. Wollen Sie eine dieser Linkarten in einer Ihrer Dateien einsetzen, kopieren Sie einfach den vorgefertigten Rumpf aus der Datei andere_links.html in Ihre Datei und fügen Ihre eigenen Daten ein. Dies funktioniert folgendermaßen:
1
Markieren Sie die Linkart, die Sie benötigen. In unserem Beispiel verwenden wir den Link auf eine Datei.
Den vorgefertigten Link markieren
2 3
100
Wählen Sie den Menübefehl Bearbeiten/Kopieren, um den Link zu kopieren. Öffnen Sie die Datei, in die Sie den Link einfügen möchten, und rufen Sie den Befehl Bearbeiten/Einfügen auf.
Auf der CD-ROM ...
3.11 Auf der CD-ROM ... Das dritte Arbeitsbeispiel beschäftigt sich mit der Hintergrundfarbe und Hintergrundbildern für eine HTML-Seite.
1 2
Gehen Sie in das Verzeichnis code\kap3 auf der CD-ROM.
3
Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), um sie bearbeiten zu können.
4 5
Öffnen Sie die Datei hintergrund.html in Ihrem bevorzugten Editor.
Kopieren Sie die Datei hintergrund.html in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).
Anschließend öffnen Sie sie mit einem Browser.
Dieses Beispiel zeigt die Erde als Hintergrundbild. Zusätzlich wurde die Hintergrundfarbe auf Schwarz geändert.
Die Erde als Hintergrundbild
101
Mit Bildern und Links arbeiten
Alle diese Einstellungen werden im -Tag vorgenommen. ■ bgcolor vergibt eine Hintergrundfarbe. Sie können die Farbwerte mit Farbnamen, hexadezimalem Wert oder RGB-Wert angeben. ■ background legt die Adresse des Hintergrundbildes fest. Es wird dann automatisch im Hintergrund wiederholt.
3.12 Hintergrundbild anordnen Wir wollen nun die Erde nur noch einmal in der Mitte des Fensters erscheinen lassen. Dies lässt sich nicht mit den eben kennen gelernten HTML-Attributen realisieren. Stattdessen benötigen wir Stylesheet-Befehle. Diese können sowohl im -Tag als auch in einer externen Stylesheet-Datei definiert werden. Wir zeigen Ihnen hier, wie Sie dies im -Tag realisieren.
1
Zuerst benötigen Sie das style-Attribut.
Die Stil-Zuweisung erfolgt im style-Attribut.
2
Als ersten Wert vergeben Sie die Hintergrundfarbe mit dem Stylesheet-Befehl background-color. Wir verwenden hier black (schwarz).
Die Hintergrundfarbe wird schwarz.
3 102
Das Hintergrundbild selbst wird mit dem Befehl background-image aufgerufen. Die Adresse wird in der Form url(bildname) eingegeben. In unserem Beispiel ist das url(erde_bg.jpg).
Hintergrundbild anordnen
Die Adresse des Hintergrundbildes
4
Der Befehl background-repeat bestimmt, wie oft ein Bild im Hintergrund wiederholt wird. In unserem Fall ist der Wert no-repeat die richtige Wahl, da das Bild damit nur einmal dargestellt wird. Die Alternativen wären repeat (Standardeinstellung, Bild wird horizontal und vertikal wiederholt), repeat-x (Bild wird horizontal wiederholt) und repeat-y (Bild wird vertikal wiederholt).
Das Bild wird im Hintergrund nicht wiederholt.
5
Im letzten Schritt geben wir die Position des Hintergrundbildes an. Dazu dient der Befehl background-position. Die Position kann in den verschiedenen Maßeinheiten wie Pixel (px), Millimeter (mm) oder Inch (in) sowie in Prozent (%) von der Fenstergröße angegeben werden. Für unser Beispiel wählen wir jeweils 50% für eine mittige Ausrichtung im Fenster.
Die Position im Hintergrund wird festgelegt.
103
AUF DER
CD-ROM
Mit Bildern und Links arbeiten
Die komplette Datei finden Sie unter dem Namen hintergrundbild_ style.html im Verzeichnis code/kap03 auf der CD-ROM zum Buch.
3.13 Auf der CD-ROM ... Wenn Sie eine Grafik mit mehreren Links versehen möchten, haben Sie zwei Möglichkeiten: Zum einen können Sie die Grafik auseinander schneiden und jeden Teil einzeln verlinken, zum anderen können Sie eine Imagemap verwenden. Diese Möglichkeit behandeln wir in diesem Abschnitt. Eine Imagemap ist, wie der Name sagt, eine Karte eines Bildes, die Bereiche festlegt. Diese Bereiche können dann mit einem Link versehen werden. Wir beginnen diesen Abschnitt mit der fertigen Imagemap einer Weltkarte und zeigen Ihnen im Folgenden, wie die Imagemap aufgebaut ist und wie sie verändert werden kann.
1 2
Kopieren Sie die Datei imagemap.html und das Bild world.gif in Ihr Verzeichnis auf der Festplatte (z.B. c:\werkstatt).
3
Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie diese bearbeiten können.
4 5
Öffnen Sie die Datei imagemap.html in Ihrem bevorzugten Editor.
Wechseln Sie auf der CD-ROM in den Ordner code\kap3.
Öffnen Sie sie anschließend mit einem Browser.
Wenn Sie die Datei im Browser geöffnet haben, sehen Sie außer dem Bild zunächst nichts. Die Imagemap selbst ist nicht zu erkennen. Wenn Sie dann aber einen Bereich, zum Beispiel Nordamerika anklicken und die Maustaste gedrückt halten (der Link ist damit aktiviert), sehen Sie den Rahmen der Imagemap mit einer feinen Linie.
104
Auf der CD-ROM ...
Die Imagemap ist zu erkennen; in der Statusleiste sehen Sie außerdem das Ziel des Links.
Nun aber zur Datei selbst. Betrachten Sie den Quellcode im Editor, fallen mehrere Bereiche auf: ■ Das Bild selbst steht im Körper der HTML-Seite. Einziger Verweis auf die Imagemap ist das Attribut usemap. Es enthält als Wert den Namen der Imagemap mit einem Doppelkreuz davor, in unserem Beispiel also #laender. ■ Unter dem Bild befindet sich die Imagemap selbst. Ihre Position ist eigentlich beliebig wählbar. Die Imagemap wird in <map>-Tags eingeschlossen und erhält ihren Namen mit dem name-Attribut. ■ Innerhalb der <map>-Tags sind die einzelnen Bereiche definiert. Jeder Bereich besteht aus einem <area>-Tag. Unsere Beispiel-Imagemap hat also drei Bereiche. ■ Jeder der drei Bereiche hat eine andere Form (shape). Hier sind alle drei möglichen Grundformen einer Imagemap abgebildet: circle – ein Kreis. polygon – ein beliebiges Vieleck, das aus einzelnen Punkten besteht. rect – ein Rechteck.
■ Neben der Form enthält jedes <area>-Tag die entsprechenden Koordinaten. Bei einem Kreis sind das die x- und y-Koordinaten des Mittelpunkts und der Radius, bei einem Rechteck die Koordinaten des linken oberen und des rechten unteren Punkts und bei einem Polygon die x- und y-Koordinaten aller Punkte. ■ Die letzte Angabe im <area>-Tag betrifft das Ziel des Links. Es wird im href-Attribut angegeben.
105
PROFITIPP
Mit Bildern und Links arbeiten
Neben den hier erläuterten Standardangaben kann jedes <area>-Tag auch noch das target-Attribut mit dem Zielfenster und Ereignisattribute wie onmouseover oder onclick enthalten.
PROFITIPP
Im Folgenden werden wir zeigen, wie Sie die Adressen und Formen in einer Imagemap anpassen können.
An dieser Stelle verzichten wir auf eine Einführung in die Erstellung von Imagemaps, da es in der Praxis eher ungewöhnlich ist, Imagemaps von Hand zu programmieren. Vielmehr verwendet man dazu entweder einen (beliebigen) HTML-Editor oder ein Grafikprogramm wie Paint Shop Pro oder Photoshop.
Im ersten Schritt wollen wir die Adresse der Kreisform von http://www.mut.de in http:/ /www.mut.de/shop/sh-info.asp?ID=3827261104 ändern. Dies ist der Link auf ein spezielles Buch. Sie fragen sich vielleicht, warum es denn ein so komplizierter Link sein muss. Die Antwort ist einfach: Auch wir wollen ein wenig Schleichwerbung für eines unserer anderen Werke machen, das noch dazu eine hervorragende Erweiterung und Ergänzung zu diesem Werk darstellt ☺.
Nun befindet sich der Link mit der Schleichwerbung sogar in Ihrem Quellcode.
Als Nächstes wollen wir den Radius des Kreises noch ein wenig erhöhen, damit auch Bali auf der Landkarte zu sehen ist. Der Radius ist unter coords die dritte Angabe. Eine Erhöhung auf 34 Pixel sollte ausreichen.
106
Fazit
AUF DER
CD-ROM
Der Radius wurde auf 34 Pixel erhöht.
Wenn Sie nun noch Änderungen in einer der anderen Bereiche vornehmen möchten, funktioniert dies analog. Die geänderte Version finden Sie auf der CD-ROM zum Buch im Verzeichnis code/kap03 unter dem Namen imagemap_variiert.html.
Der kreisförmige Bereich wurde ausgeweitet und mit einem neuen Link versehen.
3.14 Fazit Das World Wide Web hat wohl nur deswegen einen so großen Erfolg, weil es so bunt ist. In diesem Kapitel haben wir Ihnen gezeigt, wie Sie selbst Grafiken in Ihre HTMLSeiten einbinden können. Außerdem haben Sie gesehen, wie Sie einzelnen Seiten miteinander verlinken können – das Grundprinzip von HTML.
107
4.0 Text strukturieren HTML bietet mehrere Möglichkeiten, Text in eine beliebige Struktur zu bringen. In diesem Kapitel wollen wir zwei davon vorstellen. Zunächst einmal zeigen wir Ihnen, wie Sie Text in Absätze packen und diese Absätze formatieren können. Danach weihen wir Sie in die Geheimnisse von Listen ein.
4.1 Absätze Absätze haben Sie bereits kennen gelernt. Bisher wurde die Formatierung allerdings nur in Bezug auf die Schrift behandelt. Nun zeigen wir Ihnen, wie Sie den Absatz selbst formatieren.
Auf der CD-ROM ... Zuerst benötigen Sie die Ausgangsdatei:
1 2
Zuerst wechseln Sie auf der CD-ROM in das Verzeichnis code\kap04.
3 4 5
Entfernen Sie den Schreibschutz der Datei (siehe Einleitung).
Kopieren Sie die Datei absatz.html in das Arbeitsverzeichnis auf Ihrer Festplatte (z.B. c:\werkstatt).
Öffnen Sie die Datei absatz.html in Ihrem bevorzugten Editor. Rufen Sie sie danach in einem Browser auf.
Text strukturieren
Ein formatierter Absatz
Wenn Sie die Datei im Browser betrachten, sehen Sie einen Absatz, der schon mit allen wichtigen Formatierungen ausgestattet ist. Im Editor wurden alle diese Formatierungen im style-Attribut des-Tags vorgenommen. Im Editor können Sie gut erkennen, was bisher gemacht wurde: ■ Der Absatz hat mit width eine feste Breite in Pixeln (px). ■ Die Hintergrundfarbe (background-color) ist beige. ■ Die Textausrichtung ist Blocksatz (justify), der Einzug der ersten Zeile wurde in Pixel angegeben (text-indent). ■ Die nächsten drei Angaben betreffen den Rahmen. Der Rahmenstil bestimmt das Aussehen des Rahmens, außerdem können noch Rahmenfarbe und Rahmenbreite in Pixel angegeben werden.
Die Angaben zum Rahmen
■ Der Befehl padding gibt den Abstand zwischen dem Text und dem Rahmen an. ■ margin gibt den Abstand des Absatzes zu anderen, umliegenden Objekten an. In den folgenden Schritten werden wir Ihnen zeigen, wie Sie an dem Absatz Änderungen vornehmen.
Rahmen und Abstände In diesem Abschnitt wollen wir das Aussehen des Rahmens und den Abstand zwischen Rahmen und Text verändern.
110
Absätze
1
Der Befehl border-style steuert das Aussehen des Rahmens. Er kann unterschiedliche Werte annehmen, wobei die Unterstützung durch die aktuellen Browser noch sehr unvollständig ist. Die wichtigsten Werte sind: ■ solid – eine normale Linie. Das ist die Standardeinstellung. ■ double – eine doppelte Linie. ■ dotted – eine gepunktete Linie. ■ dashed – eine gestrichelte Linie. Für unser Beispiel wählen wir dashed.
PROFITIPP
Eine gestrichelte Linie
2
Wie bei den meisten Stylesheet-Befehlen für den Rahmen gibt es auch bei border-style Unterformen, die es Ihnen erlauben, den Stil für jede Seite gesondert zu steuern. Dies sind border-style-top (oben), borderstyle-bottom (unten), border-style-left (links) und border-styleright (rechts).
Im nächsten Schritt wollen wir den Abstand zwischen Text und Rahmen mit dem Stylesheet-Befehl padding erhöhen. Ein Wert von 10 Pixel scheint uns angemessen.
Der Abstand zwischen Rahmen und Text
111
PROFITIPP
Text strukturieren
Auch den Abstand mit padding können Sie für jede Seite einzeln angeben. Dazu dienen padding-top, padding-bottom, padding-left und padding-right.
Wenn Sie sich den Zwischenstand im Browser ansehen, können Sie die Änderungen aus diesem Abschnitt auf einen Blick erkennen: Der Text wurde weiter vom Rahmen weggerückt und der Rahmen hat eine gestrichelte Linie.
Rahmen und Abstand wurden verändert.
Feste Größe In diesem Abschnitt geben wir dem Absatz noch eine feste Höhe und geben vor, was mit dem abgeschnittenen Text geschieht.
1
Fügen Sie in das style-Attribut des-Tags noch den Style Sheet-Befehl height für die Höhe des Absatzes ein und vergeben Sie einen Wert von 100 Pixel.
-Tag bekannte Stylesheet-Befehl background-image. Dieser Befehl erhält als Wert die Adresse des Bildes: background-image: url(erde.jpg)
Die Höhe wurde auf 70 Pixel festgelegt.
2
112
Die angegebene Höhe reicht nicht mehr aus, um den gesamten Text anzuzeigen. Er wird aber dennoch angezeigt. Um mit diesen Überlauf eleganter umzugehen, gibt es den Stylesheet-Befehl overflow. Er kann zwei Werte annehmen: hidden
Absätze
versteckt den überlaufenden Inhalt, scroll blendet Scrollbalken ein. Diese Option verwenden wir für unser Beispiel.
Überlaufender Inhalt wird mit Scrollbalken angezeigt.
Auch hier sollten Sie einen kurzen Blick in den Browser werfen.
Ein Absatz mit Scrollbalken
Hintergrund hinzufügen
AUF DER
CD-ROM
Im letzten Abschnitt für die Formatierung von Absätzen fügen wir noch ein Hintergrundbild hinzu.
1
Als Hintergrundbild verwenden wir hier von der CD-ROM zum, Buch aus dem Verzeichnis code/kap04 die Bilddatei erde.jpg, die wir auch im vorangegangenen Kapitel bereits eingesetzt hatten.
Im ersten Schritt muss das Hintergrundbild definiert werden. Dafür dient der bereits aus dem
113
Text strukturieren
Die Erde wurde eingefügt.
2
Nun stört noch, dass schwarze Schrift vor einem dunklen Hintergrund steht. Deshalb ändern wir mit dem Stylesheet-Befehl color die Textfarbe in Weiß (white).
Der Text ist weiß.
Sehen Sie sich abschließend das Ergebnis unserer vielen Änderungen im Browser an. Wir hoffen, Sie konnten an diesem kleinen Beispiel sehen, wie viele Möglichkeiten es bei der Formatierung von Absätzen gibt.
Der Absatz, fertig formatiert
114
Listen
Fazit
AUF DER
CD-ROM
Absätze lassen sich auf viele verschiedene Artenm formatieren. Die Formatierungen sind außerdem sehr einfach änderbar, da sie meist nur mit einem einzigen StylesheetBefehl gesteuert werden.
Die Änderungen finden Sie auf der CD-ROM im Ordner code/kap04 unter dem Namen absatz_variiert.html.
4.2 Listen Eine weitere Möglichkeit, Text zu strukturieren, besteht in der Verwendung von Listen. HTML bietet eine Reihe von Möglichkeiten an, Daten in einer Liste anzuordnen. Das geht sogar so weit, dass HTML (respektive der Webbrowser) die automatische, fortlaufende Nummerierung der einzelnen Listenelemente übernimmt. In der folgenden Abbildung sehen Sie eine solche Liste. Wie Sie gleich sehen werden, steht die Nummerierung nicht in dem HTML-Dokument selbst, sondern wird vom Browser erzeugt.
Eine nummerierte Liste
Auf der CD-ROM ... Mit den folgenden Schritten übertragen Sie die benötigte Datei von der Buch-CDROM auf Ihre Festplatte:
115
Text strukturieren
1 2 3 4
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap04. Kopieren Sie die Datei liste.html in Ihr lokales Arbeitsverzeichnis (z.B. c:\werkstatt) Entfernen Sie den Schreibschutz von der Datei. Öffnen Sie die Datei in Ihrem Editor und im Webbrowser.
Nummerierte Listen Werfen Sie zunächst einen allgemeinen Blick auf die HTML-Datei. Die Liste beginnt mit dem Tag(ordered list, zu Deutsch geordnete oder nummerierte Liste). Wie Sie im Browser sehen können, werden dann die einzelnen Listenelemente automatisch nummeriert; die Nummerierung beginnt bei 1. Listenelemente werden durch das
- -Tag dargestellt (li steht für list item, Listenelement). Zwischen
- und
steht dann das Listenelement. Folgendes Codefragment würde eine ganz einfache Liste erstellen:
- FC Bayern München
Die Ausgabe im Browser wäre dann die folgende: 1. FC Bayern München
Die vorangestellte 1 wird hierbei vom Webbrowser eingefügt. Wir wollen nun diese Liste schrittweise verändern.
1
Den Platz hinter Herta BSC hat seinerzeit der SC Freiburg belegt. Fügen Sie also einen dementsprechenden Listeneintrag hinter Herta BSC ein.
SC Freiburg wurde in die Liste eingefügt.
116
Listen
2
Wie ja hinlänglich bekannt ist, wurde der FC Schalke 04 in der betreffenden Saison nur Zweiter. Verändern Sie also die Liste so, dass die Zählung erst bei 2 beginnt. Setzen Sie dazu im-Tag das Attribut start="2".
Die Zählung beginnt jetzt bei 2.
3
Der TSV 1860 München hat in der Schlusstabelle den elften Platz belegt. Vor dem Namen des Vereins sollte also der Browser die Zahl 11 anzeigen, nicht die 7. Dies ändern Sie durch value="11" im- -Tag.
1860 München ist nun auf dem 11. Platz.
4
Und noch ein Fehler: Unterhaching hat den 16. Platz belegt. Ändern Sie hier die Nummerierung analog (durch value="16").
117
Text strukturieren
Jetzt stimmen alle Positionen in der Tabelle.
Fassen wir zusammen: ■ Durchwird der Startwert der Liste festgelegt.
PROFITIPP
AUF DER
CD-ROM
■ Durch- wird ab dem angegebenen Listenelement die Zählung geändert.
Den aktuellen Zwischenstand der Bundesligatabelle finden Sie auch auf der CD-ROM zum Buch unter dem Dateinamen liste-besser.html.
Sie können anstelle von arabischen Ziffern auch römische Ziffern und Buchstaben zur Zählung verwenden. Verwenden Sie dazu das typeAttribut des-Tags. Sie haben die folgenden vier Möglichkeiten: ● type="a" für eine Nummerierung a., b., c., ... ● type="A" für eine Nummerierung A., B., C., ... ● type="i" für eine Nummerierung i., ii., iii., ... ● type="I" für eine Nummerierung I., II., III., ...
118
Listen
Nicht nummerierte Listen Neben nummerierten Listen, die mit einer Ziffer oder einem Buchstaben eingeleitet werden, unterstützt HTML auch nicht nummerierte Listen. Dort wird jeder Listeneintrag mit einem grafischen Aufzählungszeichen eingeleitet. Da die Darstellung dieser Aufzählungszeichen von Browser zu Browser variiert und auch einige Browser mehr unterschiedliche Aufzählungszeichen darstellen können als andere, werden wir diesen Punkt nur kurz behandeln. Kurz zum theoretischen Hintergrund: Auch bei nicht nummerierten Listen werden einzelnen Listenelemente durch- und
dargestellt. Der Unterschied zu nummerierten Listen besteht darin, dass Sie in diesem Fall das Tagzur Listendefinition verwenden müssen – das ul steht für unordered list, unsortierte Liste. Wir wollen nun einem der Vereine eine Spielerliste hinzufügen.
1
Dazu definieren Sie zunächst innerhalb des Listeneintrags für den Verein eine-Liste.
abzuschließen.
2 3
Fügen Sie nun dieser Liste mehrere- ...
-Elemente zu. Vergessen Sie nicht, die innere Liste mit
In Ihrem HTML-Code sollten Sie damit etwa Folgendes gemacht haben (Ausschnitt):- FC Schalke 04
- Asamoah
- Böhme
- Sand
Im Browser erscheint dann die nicht nummerierte Liste inmitten der nummerierten Liste.
119
Text strukturieren
Der Listeneintrag für Schalke hat drei Untereinträge.
Somit haben Sie gleich zwei Schritte auf einmal kennen gelernt: ■ Wie Sie eine nicht nummerierte Liste erstellen: mitund
- .
AUF DER
CD-ROM
■ Wie Sie Listen verschachteln können: Erstellen Sie einfach innerhalb eines Listenelements (- ) eine neue Liste (
oder
).
Auf der CD-ROM befindet sich der zugehörige HTML-Code für dieses Beispiel in der Datei liste-verschachtelt.html.
Fazit Sie haben hier in wenigen Schritten gesehen, wie Sie mit einem geringen Aufwand HTML-Listen sowohl nummerierte als auch nicht nummerierte Listen erstellen können. Ebenso unaufwändig ist es, Listen zu verschachteln. Aufgrund der recht beschränkten Gestaltungsmöglichkeiten von Listen werden diese jedoch in der Praxis relativ selten eingesetzt. Stattdessen behilft man sich bei nicht nummerierten Listen oft mit grafischen Aufzählungszeichen, die, wie im vorhergehenden Kapitel gezeigt, eingebunden werden.
120
5.0 Tabellen Wenn Sie bei HTML-Tabellen primär an den Mathematikunterricht in der Schule zurückdenken, liegen Sie falsch. Auf den meisten Webseiten werden keine großen Zahlenkolonnen, mathematische Formeln oder empirische Messwerte dargeboten. Dennoch werfen wir die These auf, dass sich auf fast jeder Webseite Tabellen befinden, ganz besonders bei professionellen Seiten. Den Grund dafür erfahren Sie im nächsten Kapitel. Dieses Kapitel dient primär dazu, Ihnen die notwendigen HTML-Grundlagen nahe zu bringen. Aber keine Sorge, wie in allen anderen Kapitel wird sich das nicht in Unmengen an HTML-Code niederschlagen, wir gehen immer schrittweise vor und stellen Ihnen auf der Buch-CD-ROM eine Reihe von zusätzlichen Informationen zur Verfügung. In folgender Abbildung sehen Sie die Daten einer fiktiven niederbayerischen MessStation. Ausgehend von diesen Daten werden wir in diesem Kapitel die Tabelle erweitern und verändern.
Die Ausgangstabelle
Tabellen
5.1 Auf der CD-ROM ... Der Ausgangsstand, also die zuvor abgebildete Tabelle, befindet sich natürlich auch auf der CD-ROM. So kommen Sie an die Daten:
1 2 3
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap05. Kopieren Sie die Datei tabelle.html in Ihr lokales Arbeitsverzeichnis (z.B. c:\werkstatt) und entfernen Sie den Schreibschutz, wie im Einführungskapitel gezeigt. Öffnen Sie die Datei in Ihrem Editor.
So weit, so gut. Nun steigen wir in die HTML-Programmierung der Tabellen ein.
5.2 Prinzipieller Aufbau Wenn Sie einen Blick auf den Quellcode in der Datei tabelle.html werfen, werden Sie recht schnell den allgemeinen Aufbau einer Tabelle erkennen: ■ Die Tabelle wird durch das Tageingeleitet. ■ Jede Tabellenzeile startet mit dem Tag
). Fügen Sie eine neue Zeile (. tr steht für table row, zu Deutsch Tabellenzeile. ■ Der Inhalt jeder Tabellenzelle steht zwischen und . td steht für table data, zu Deutsch Tabellendaten. Jede Tabellenzeile muss gleich viele Zellen enthalten. HTML ist eine Seitenbeschreibungssprache, deswegen geben Webbrowser keine Fehlermeldung oder Ähnliches aus, wenn Sie sich beim Tabellenaufbau vertun. Bei Fehlern in der Tabelle versuchen die Browser verschieden gut oder schlecht, die Tabelle ungefähr so darzustellen, wie der Webdesigner sich das vorgestellt hat. Um aber bei allen Browsern ein annähernd ähnliches Ergebnis zu erzielen, sollten Sie darauf achten, die Tabelle sauber aufzubauen. Erweitern wir die Tabelle gleich um eine weitere Zeile – die neuesten Messdaten sind hinzugekommen:
1 2 3
122
Gehen Sie an das Ende der Tabelle (vor) ein. Fügen Sie innerhalb der Tabelle fünf Zellen (jeweils ) und beliebige Inhalte in den Zellen (zwischen und ) ein.
Tabellenrahmen
4
Tragen Sie nun in die Zellen entsprechende Werte ein.
AUF DER
CD-ROM
Nach dem Speichern sehen Sie in Ihrem Browser, ob es funktioniert hat.
Falls es nicht funktioniert hat: Auf der CD-ROM zum Buch finden Sie in der Datei tabelle-neue-zeile.html eine HTML-Tabelle mit einer neuen Zeile.
Eine Zeile wurde in die Tabelle eingefügt.
5.3 Tabellenrahmen In der Datei tabelle.html (bzw. tabelle-neue-zeile.html oder Ihrer aktuellen, angepassten Arbeitsdatei) finden Sie beim genauen Hinsehen im-Tag die Anweisung border="1". Damit können Sie den Rahmen der Zelle angeben. Als Maßeinheit dienen hier Pixel. Im Folgenden wollen wir untersuchen, welche Auswirkungen eine Änderung des Parameters hat.
1
Setzen Sie zunächst das Attribut auf den Wert "2" (also border="2"), um zu sehen, wie der Wert umgesetzt wurde.
123
Tabellen
Ein doppelt so breiter Rahmen
2
Ändern wir nun den Tabellenrahmen auf einen deutlich höheren Wert, etwa mit border="5". Betrachten Sie auch diese Änderung im Browser; der Rahmen wird deutlich breiter.
Rahmenbreite 5
3 124
Bringen wir nun ein wenig Farbe ins Spiel. Im Attribut bordercolor desTags können Sie die Rahmenfarbe angeben. Dabei stehen Ihnen dieselben Farben
Tabellenrahmen
zur Verfügung wie auch bei der Textformatierung. Nehmen Sie zur Übung Blau als Rahmenfarbe, also bordercolor="blue".
In der Graustufenabbildung schwer zu erkennen: Der Rahmen ist blau.
4
Kehren wir nun das Ganze ins Gegenteil um, und entfernen den Rahmen komplett durch die Anweisung border="0". Sie sehen, dass nun die einzelnen Texte wie durch Zauberhand aneinander ausgerichtet werden, die Tabelle können Sie nur noch erahnen. Wie Sie im nächsten Kapitel sehen werden, ist dieser „Trick“ ein sehr beliebtes Gestaltungsmittel.
Der Rahmen ist verschwunden.
125
Tabellen
5
Ohne Rahmen stehen die Inhalte der einzelnen Zellen recht eng aneinander. Das Attribut cellspacing im-Tag gibt an, wie viele Pixel Abstand sich zwischen zwei Zellen befinden sollen. Geben Sie als Wert "5" an, um 5 Pixel Abstand einzustellen.
Der Abstand zwischen den Zellen ist nun größer.
Bevor wir nun fortfahren, sollten Sie den Rahmen wieder auf "1" zurücksetzen. Auch Profi-Designer lassen sich häufig den Rahmen ihrer Tabelle anzeigen, damit sie Fehler frühzeitig erkennen können.
5.4 Tabellengröße Natürlich können Sie auch die Ausmaße einer Tabelle in gewisser Weise beeinflussen. „In gewisser Weise“ ist eine etwas schwammige Aussage, aber es ist tatsächlich so. Die Entscheidung, welche Maße eine Tabelle letztendlich hat, liegt beim Webbrowser. Sie haben das ja bereits im Beispiel gesehen: Bis dato enthält die Tabelle keine Größenangaben, und der Browser macht die Tabelle so breit, wie er sie braucht. Dabei versucht der Browser zunächst, Umbrüche im Text zu vermeiden. Falls es nicht mehr anders geht, bricht der Browser den Text eigenmächtig um. Die schiere Willkür, mit der das mitunter zu geschehen scheint, ist auch der Grund, dass das Erstellen einer Tabelle teilweise einer Qual ähnlich kommt. Auch, wenn Sie jeweils detailliert angeben, welche Ausmaße eine Tabelle haben soll, kann es Ihnen unter Umständen trotzdem passieren, dass der Webbrowser seine eigenen Ansichten durchsetzt und dadurch Ihr Layout durcheinander bringt. In der Regel hilft da nur eines: testen, testen und nochmals testen.
126
Tabellengröße
Nun aber zurück zur eigentlichen Aufgabe: den Angaben zur Tabellengröße. Dazu gibt es zwei mögliche Attribute, und zwar für jede Tabelle, Zeile und Zelle: ■ width für die Breite.
PROFITIPP
■ height für die Höhe.
Normalerweise kennt das-Tag keine Höhenangabe, die Browser akzeptieren diese trotzdem.
Als Werte für width und height können Sie jeweils entweder Pixelwerte (Bildpunkte) oder Prozentwerte angeben. Sie müssen nicht für jede Zelle gesonderte Breitenangaben machen. Es reicht eigentlich aufs das Ganze einmal in einer Zeile anzugeben, der Browser übernimmt dann diese Angaben für alle anderen Zellen. Es gibt jedoch eine Ausnahme: Wenn Sie unterschiedliche Angaben machen (beispielsweise der ersten Zelle in der ersten Zeile eine Breite von 100 Pixel zuweisen, der ersten Zelle in der zweiten Zeile eine Breite von 200 Pixel), sucht sich der Browser einen Wert heraus. Eine zweite Möglichkeit, einen Fehler zu machen, sehen Sie in folgendem Codeausschnitt:
Erste Zelle Zweite Zelle
Die gesamte Tabelle hat eine Breite von 150 Pixel, die einzelnen Zellen jedoch in der Summe eine Breite von 200 Pixel; das kann nicht funktionieren. Der Browser nimmt in so einem Fall immer den größeren Wert, hier also 200 Pixel. Dieselbe Argumentation gilt auch für einzelne Tabellenzeilen: Wenn Sie in einer Zelle einer Zeile eine Höhe geben, wird diese – sofern möglich – natürlich auch für alle anderen Zellen in der Zeile übernommen. Wir wollen nun die gesamte Tabelle mit einer fixen Größe versehen:
1
Geben Sie zunächst der Tabelle eine Breite von 600 Pixel:...
127
Tabellen
2
Weisen Sie als Nächstes in der ersten Zelle der ersten Zeile eine Breite von 100 Pixel zu, allen andern Zellen in dieser Zeile eine Breite von 125 Pixel:width="125">... width="125">... width="125">... width="125">...
3
width="100">...
Betrachten Sie das Ergebnis im Browser.
Die Zellen haben jetzt eine feste Breite.
AUF DER
CD-ROM
Sie sehen, dass nun die Zeilen alle eine feste Breite haben.
128
Den momentanen Zwischenstand finden Sie auf der CD-ROM zum Buch im Verzeichnis für dieses Kapitel unter dem Dateinamen tabellegroesse.html.
Zellen ausrichten
5.5 Zellen ausrichten Wie Sie in Ihrem Browser sehen, werden die einzelnen Tabelleninhalte jeweils mittig ausgerichtet, sowohl horizontal als auch vertikal. Die Tabelle selbst ist innerhalb des aktuellen Absatzes links ausgerichtet. Für unsere Anwendung erscheint das noch in Ordnung, aber es gibt viele Fälle, bei denen das nicht so sein soll. Der Projektmanager des Wetterdienstes ist jedenfalls der Meinung, dass die einzelnen Daten jeweils aneinander linksbündig ausgerichtet werden sollten. Außerdem sollten die Beschriftungen nicht zentriert stehen, sondern jeweils an der oberen Kante der Zelle. Bevor wir in die Details einsteigen, sollten zunächst einige Begrifflichkeiten geklärt werden. Für die horizontale (links, recht, zentriert) und die vertikale (oben, mittig, unten) Ausrichtung gibt es mehrere mögliche Anweisungen. In den folgenden beiden Tabelle finden Sie diese aufgelistet. Wert
Beschreibung
left
Linksbündig (Standardwert)
right
Rechtsbündig
center
Zentriert
Werte für die horizontale Ausrichtung
Wert
Beschreibung
top
Oben
middle
Mittig (Standardwert)
bottom
Unten
baseline
An einer gemeinsamen Grundlinie (der untere Strich des „ p“ beispielsweise ist dann unter dieser Grundlinie)
Werte für die vertikale Ausrichtung
Das Attribut für die horizontale Ausrichtung heißt align, englisch für ausrichten. Bei der vertikalen Ausrichtung wird ein „v“ für „vertikal“ vorangestellt, also valign. Im Folgenden probieren wir das einmal aus:
1
Richten Sie zunächst die Tabelle rechts aus. Schreiben Sie dazu align="right" in das-Tag.
129
Tabellen
Die Tabelle ist am rechten Rand ausgerichtet.
2
Richten Sie nun die einzelnen Wetterdaten zentriert aus. Schreiben Sie dazu in die Zellen mit den Wetterdaten align="center" (nicht aber die Beschriftungen in der linken Spalte).
Alle Wetterdaten sind nun in ihren Zellen zentriert.
130
Zellen ausrichten
3
Richten Sie abschießend die Beschriftungen in der ersten Spalte (also jeweils die erste Zelle pro Zeile) jeweils oben an den Zellen aus. Das geht mit valign="top".
Die Beschriftungen sind oben ausgerichtet – siehe Zeile „Dienstag“.
Werfen Sie einen Blick auf Ihren momentanen Zwischenstand. Sieht doch recht ordentlich aus, oder? Mit den Ausrichtungsoptionen können Sie auch dafür sorgen, dass die gesamte Tabelle zentriert innerhalb des Browserbildschirms angezeigt wird. Dazu müssen Sie einen kleinen aber feinen Trick anwenden. Umgeben Sie dazu die Tabelle mit einer weiteren Tabelle, die Sie dann zentriert ausrichten:
1
Starten Sie außerhalb der Wettertabelle eine neue Tabelle, die zentriert ausgerichtet ist:
2
Erstellen Sie in dieser Tabelle eine einzige Zelle, die horizontal und vertikal zentriert ist. In diese Zelle setzen Sie die Wettertabelle:
3
Entfernen Sie die Ausrichtung der inneren Tabelle (align="right") und dieÜberschrift.
131
Tabellen
4
Betrachten Sie das Ergebnis im Browser (insbesondere im Vollbildmodus).
Die Tabelle ist innerhalb der Seite zentriert.
AUF DER
CD-ROM
Dieser Trick ist relativ unbekannt, aber einfach und effizient.
Auf der CD-ROM zum Buch finden Sie diese Version der Tabelle in der Datei tabelle-ausrichten.html.
5.6 Zellen zusammenfassen Wie Sie sehen, hat es am Mittwoch ab Mittag geregnet. Der Projektmanager beschwert sich nun, dass das Wort „Regen“ zweimal vorkommt, muss er doch dem Texter die doppelte Summe überweisen. Viel besser wäre es doch, die beiden Zellen zu einer zusammenzufassen, die danach doppelt so breit ist, sich von Mittag bis Abend erstreckt und nur einmal mit „Regen“ beschriftet ist. Dazu dient das Attribut colspan. Es gibt an, über wie viele Spalten sich die aktuelle Zelle erstreckt. Der Standardwert ist natürlich "1". Das Ziel besteht nun darin, die Zelle zu verbreitern:
132
Zellen zusammenfassen
1
Suchen Sie zunächst die erste Zelle mit „Regen am Mittwoch“ und verbreitern Sie sie, indem Sie colspan="2" hinzufügen.
2
Diese Zelle erstreckt sich nun über zwei Spalten. Um eine gleichmäßige Anzahl an Zellen pro Zeile sicherzustellen, müssen Sie nun die zweite Zelle mit „Regen am Mittwoch“ löschen.
3
Richten Sie – falls noch nicht geschehen – nun die Zelle mit colspan="2" mittig aus, damit die Beschriftung auch einigermaßen zentriert erscheint. Setzen Sie dazu align="center" in das-Tag.
Im Browser sieht dann Ihr Dokument ungefähr so wie in folgender Abbildung aus.
AUF DER
CD-ROM
Der Regen umfasst nun zwei Spalten
Auf der CD-ROM zum Buch finden Sie unter dem Dateinamen tabellezusammenfassen-colspan.html eine entsprechende Version.
Des Weiteren sehen Sie in der Abbildung, dass es drei Nächte hintereinander dunkel war. Und wieder eine Möglichkeit, Text einzusparen. Diesmal müssen die drei Zellen vertikal zusammengefasst werden. Dies ist mit colspan nicht möglich, denn damit werden Zellen horizontal zusammengefasst.
133
Tabellen
Die Lösung besteht hier im Attribut rowspan, das angibt, über wie viele Tabellenzeilen sich eine Zelle erstreckt. Die folgenden Schritte setzen dies um:
1
Suchen Sie zunächst die erste Zelle in der letzten Spalte, die mit „dunkel“ beschriftet ist. Fügen Sie rowspan="3" hinzu.
2
Da sich diese Zelle nun auch noch über die nächsten beiden Zeilen erstreckt, müssen Sie in diesen Zeilen jeweils eine Zelle entfernen, damit das Zahlenverhältnis wieder stimmt. Natürlich sind damit die beiden Zellen mit „dunkel“ gemeint.
3
Speichern Sie und betrachten Sie das Ergebnis im Browser.
AUF DER
CD-ROM
Die „Dunkelheit“ erstreckt sich nun über drei Zeilen.
Wenn das Ganze nicht so aussieht wie in der Abbildung, finden Sie auf der CD-ROM zum Buch in der Datei tabelle-zusammenfassen-rowspan.html eine Art Musterlösung.
5.7 Hintergrundfarbe Tabellenzellen können auch eine Hintergrundfarbe haben. Sie können diese für die gesamte Tabelle, für gesamte Zeilen und auch für einzelne Zellen angeben. Dabei ist die
134
Hintergrundfarbe
Gewichtigkeitsreihenfolge folgende: Am schwächsten ist die Angabe für die gesamte Tabelle. Danach folgt die Anweisung für die Zeilen, und dann die Anweisungen für die einzelnen Zellen. Wenn Sie also der Tabelle die Hintergrundfarbe schwarz geben, jeder Zeile die Hintergrundfarbe Rot und jeder einzelnen Zelle die Farbe Weiß, hat jede Zelle einen weißen Hintergrund. Das zugehörige HTML-Attribut ist für,
fehltund jeweils bgcolor. Als Wert geben Sie entweder einen Farbcode oder einen Farbnamen an, wie Sie das ja bereits bei der Textformatierung gemacht haben:
1
Versehen Sie die Tabelle mit der Hintergrundfarbe #dddddd () – einem hellen Grau.
-Tag und laden Sie die HTML-Seite in den Browser. Das Ergebnis sehen Sie auf Ihrem Bildschirm oder in folgender Abbildung.
Die Tabelle hat eine Hintergrundfarbe erhalten.
2
Geben Sie der ersten Zeile der Tabelle eine weiße Hintergrundfarbe. Dies geht mit. Ebenfalls muss die erste Spalte weiß werden. Dazu müssen Sie die einzelnen Zellen in der Spalte mit weiß setzen.
135
Tabellen
Die Felder mit den Beschriftungen sind jetzt alle weiß.
3
Versehen Sie alle „regnerischen“ Zellen mit einer hellblauen Hintergrundfarbe ().
Die Regen-Felder sind hellblau hinterlegt.
4
136
Alle sonnigen Zellen werden knallgelb ().
Zellen formatieren
Sonnige Tagesabschnitte sind jetzt gelb markiert.
AUF DER
CD-ROM
Zur Übung können Sie auch noch andere Zellen einfärben, das prinzipielle Vorgehen sollte zumindest nun klar sein.
Auf der CD-ROM zum Buch finden Sie den momentanen Zwischenstand unserer Tabelle unter dem Dateinamen tabelle-hintergrund.html.
5.8 Zellen formatieren Kommen wir nun zum letzten Punkt, der Formatierung einer Tabelle. Zunächst der nahe liegendste Ansatz: Setzen Sie eine -Anweisung vor die Wettertabelle und schließen Sie diese direkt hinter der Wettertabelle ab: ......
...
Betrachten Sie das Ergebnis im Netscape-Webbrowser.
137
Tabellen
Netscape bleibt bei der Standardschrift Times New Roman.
Sie sehen – nichts. Die Anweisung scheint keinen Effekt zu haben – zumindest in diesem Browser, der Internet Explorer beispielsweise akzeptiert die Anweisung. Sie müssen also jede Zelle einzeln formatieren, also in jede Zelle eine -Anweisung setzen. Das ist natürlich relativ umständlich. Mit Stylesheets können Sie sich hier ein wenig Arbeit ersparen. Entweder verwenden Sie Klassen oder IDs und setzen in jede Zelle beispielsweise einen Absatz, dem Sie dann eine Klasse zuweisen. Am einfachsten – wenn auch am unflexibelsten – ist es, wenn Sie über den Tagnamen die Tabelle formatieren. Fügen Sie dazu im -Abschnitt die folgende Stil-Anweisung ein: <style type="text/css">
Nun werden alle Tabellenzellen mit dieser Anweisung formatiert.
Netscape verwendet nun Verdana.
138
Fehlersuche
Im letzten Schritt sollten Sie noch dafür sorgen, dass die Beschriftungen noch in Fettdruck gesetzt werden. Auch dies geht entweder mit Klassen, oder durch Verwendung von -Tags, wobei Sie der Stylesheet-Lösung den Vorzug geben sollten.
AUF DER
CD-ROM
Die Beschriftungen sind jetzt fett gedruckt.
Diese – endgültige – Version der Tabelle finden Sie auf der CD-ROM zum Buch unter dem Dateinamen tabelle-formatiert.html.
5.9 Fehlersuche Kommen wir nun zum schlimmsten Fall: Die Tabelle will nicht so, wie Sie wollen. Hier ein paar Tipps, was Sie dann noch versuchen können:
1
Zählen Sie, ob sich in jeder Zeile und Spalte jeweils die gleiche Anzahl von Zellen befinden. Rechnen Sie dadurch die Angaben bei colspan und rowspan mit ein.
2
Suchen Sie nach widersprüchlichen Größenangaben. Geht alles auf? Falls nicht, entfernen Sie schrittweise Größenangaben, um mögliche Widersprüche zu beheben.
139
Tabellen
3
Wenn es – unter Umständen bei der Verwendung von Grafiken – pixelgenau zugehen soll, eine Zelle eine exakt definierte Breite und Höhe haben soll, entfernen Sie Leerzeichen und Zeilensprünge. Folgendes stellt also unter Umständen eine Problemquelle dar:Zelleninhalt
Besser (aber auch unübersichtlicher) ist Folgendes:Zelleninhalt
Und zum Abschluss noch der Hinweis, die Tabelle in möglichst vielen Browsern zu testen. Insbesondere bei der Verwendung des Netscape Navigator 4.x kommt es bei Tabellen oft zu Problemen. Entfernen Sie aus der aktuellen Datei den Abschluss der äußeren Tabelle, also das letzte
Die Tabelle im Netscape, wenn
Netscape zeigt nichts an. Der Grund: Nicht abgeschlossene Tabellen werden vollständig ignoriert. Wenn Sie selbst häufig mit dem Netscape 4.x surfen und immer wieder auf komplett leere Seiten stoßen, wissen Sie jetzt woran das liegen könnte. Überprüfen Sie daher stets, ob Sie jedes Tag auch abgeschlossen haben. Nicht jeder Browser ist so fehlertolerant wie beispielsweise der Internet Explorer.
140
AUF DER
CD-ROM
Fazit
Wenn Sie diesen Effekt schnell nachstellen möchten, können Sie auch die Version auf der Buch-CD-ROM verwenden: Der Dateiname ist tabelle-netscape.html.
5.10 Fazit Werfen Sie noch einen Blick auf die Tabelle. Mittlerweile sollten Sie auf einen Blick sehen (oder auf den zweiten), wie das Ganze aufgebaut ist. Bei Tabellen gibt es ein paar wichtige Kniffe, die wir Ihnen in diesem Kapitel gezeigt haben. Das eigentliche Erstellen einer Tabelle sollte Ihnen nun keine größeren Probleme mehr bereiten. Sie können nun Daten auf Ihrer Website schön strukturiert darstellen. Aber ganz allgemein sind Tabellen ein beliebtes Gestaltungselement, dessen Anwendungsgebiet weit über die Präsentation von Messdaten hinausgeht. Wie genau Sie dies einsetzen können, erfahren Sie im nächsten Kapitel.
141
6.0 Seitenlayout
PROFITIPP
Eine Webseite besteht normalerweise nicht nur aus einigen Absätzen oder Bildern, sondern aus einzelnen Elementen, die in einem Kontext stehen. Beispielsweise besteht eine Seite oben aus einem Firmenlogo und Navigationselementen. Auf der linken Seite soll ebenfalls eine Navigationsleiste eingefügt werden und in der Mitte wird der Inhalt platziert. Wie realisiert man dies? Prinzipiell gibt es zwei Techniken. Herkömmlich erledigen unsichtbare Tabellen die Platzierung, etwas neuer ist die Möglichkeit, mittels Stylesheets zu platzieren. Es gibt keine allgemeine Empfehlung, wann man Tabellen und wann man Stylesheets einsetzen sollte. Meist ist es sinnvoll, den grundlegenden Aufbau mit Tabellen vorzunehmen und die Platzierung einzelner Elemente den Stylesheets zu überlassen. Eine dritte Art der Platzierung sind Layer. Sie wurden im Netscape Navigator 4.x eingeführt, haben sich aber nicht durchgesetzt und werden deshalb hier nicht behandelt.
In diesem Kapitel finden Sie zuerst ein Arbeitsbeispiel für die Platzierung mit Tabellen. Anschließend zeigen wir Ihnen Stylesheets zum Positionieren von Elementen.
6.1 Auf der CD-ROM ... Das erste Arbeitsbeispiel besteht aus einem Grundgerüst von ineinander verschachtelten Tabellen, die ein Seitenlayout enthalten. Zuerst müssen Sie aber die Datei von der CD-ROM kopieren.
Seitenlayout
1 2
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap06.
3
Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können.
4 5
Öffnen Sie die Datei positionieren_tabelle.html in Ihrem bevorzugten Editor.
Kopieren Sie die Datei positionieren_tabelle.html in das Arbeitsverzeichnis auf die Festplatte (z.B. c:\werkstatt).
Anschließend öffnen Sie sie mit einem Browser.
Wenn Sie einen Blick in den Browser werfen, sehen Sie, dass das Seitenlayout noch nicht komplett fertig ist. Wir haben bisher noch die Rahmen der Tabellen eingeblendet gelassen, da dies zur Übersicht beiträgt. Zum Positionieren sollten die Tabellen allerdings unsichtbar sein.
Das Seitenlayout ist noch nicht perfekt.
Damit Sie sich im Quellcode der Seite zurechtfinden, zeigen wir Ihnen kurz die wichtigsten Elemente der Seite im Editor:
144
Rahmen und Abstände von Tabellen entfernen
■ Das Hauptelement der Seite ist eine große Tabelle, die aus zwei Zeilen mit jeweils einer Zelle besteht. Unten sehen Sie die Elemente dieser Tabelle abgedruckt.
... ...
■ Anstelle der drei Punkte in den Zellen werden jeweils andere Tabellen eingefügt. Eine für die Kopfzeile, eine für Navigation und Inhalt. Beide Tabellen bestehen aus einer Zeile und darin zwei Zellen.
Die Tabelle für die Kopfzeile
Sie sehen schon, es ist sehr einfach, ein Seitenlayout nur mit drei Tabellen aufzubauen. Im Folgenden zeigen wir Ihnen, wie Sie die Tabellen umformatieren können.
6.2 Rahmen und Abstände von Tabellen entfernen Der Rahmen um die Tabellen stört noch. Deshalb zeigen wir Ihnen im folgenden, wie Sie die Tabellen unsichtbar machen. Zuerst müssen Sie den Rahmen ausschalten. Dazu muss das border-Attribut den Wert 0 erhalten, und zwar für alle drei Tabellen.
145
Seitenlayout
Für alle drei Tabellen wurde der Rahmen ausgeschaltet.
Im Browser ist noch ein Abstand zwischen den einzelnen Bereichen der Seite.
Im Browser sieht das Ergebnis noch nicht überzeugend aus. Zwischen den einzelnen Zellen ist noch ein Abstand. Im Folgenden zeigen wir Ihnen, wie Sie den Abstand entfernen.
1 146
Wenn Sie die Attribute cellpadding und cellspacing für eine Tabelle nicht angeben, wird standardmäßig ein Abstand eingefügt. Deshalb müssen beide Attribute für die Haupttabelle den Wert 0 erhalten.
Rahmen und Abstände von Tabellen entfernen
cellpadding und cellspacing wurden für die äußere Tabelle entfernt.
2
Im nächsten Schritt müssen cellpadding und cellspacing auch für die zwei anderen Tabellen auf 0 gesetzt werden.
cellpadding und cellspacing werden auf 0 gesetzt
Öffnen Sie nun die Datei in Ihrem Browser und Sie sehen, dass die Elemente der Seite perfekt aneinander passen.
Die Elemente der Tabelle wurden exakt aneinander gelegt.
147
Seitenlayout
6.3 Abstand zum Rand Das Einzige, was in unserem Beispiel noch stört, ist der Abstand nach links und oben zum Fensterrand. Diesen Abstand steuern Sie für den Internet Explorer und den Netscape Navigator unterschiedlich. Im folgenden zeigen wir Ihnen die Vorgehensweise schrittweise:
1
Die Angaben zum Abstand erfolgen im -Tag. Der Abstand nach oben wird im Internet Explorer mit dem Attribut topmargin gesteuert. Dieses Attribut setzen wir auf 0, um den Abstand auszuschalten.
Der Abstand nach oben wurde auf 0 gesetzt.
2
Der Abstand nach links wird mit dem Attribut leftmargin festgelegt. Auch dieses Attribut erhält den Wert 0.
Der Abstand nach links wird ebenfalls auf 0 gesetzt.
148
Abstand zum Rand
Im Netscape Navigator wurde der Abstand noch nicht entfernt.
Ein kurzer Blick in den Netscape Navigator zeigt, dass die eben vorgenommenen Änderungen dort nicht wirksam sind. Deshalb zeigen wir Ihnen im Folgenden, wie Sie den Abstand auch für den Netscape Navigator verringern.
1
Den Abstand nach oben steuern Sie für den Navigator mit dem Attribut marginheight im -Tag. Für unser Beispiel muss das Attribut den Wert 0 erhalten.
Der Abstand nach oben wird für den Navigator entfernt.
2
Zum Schluss muss noch der Abstand nach links aufgehoben werden. Dazu erhält das Attribut marginwidth den Wert 0.
149
Seitenlayout
Der Abstand zu den Fensterseiten wird entfernt.
AUF DER
CD-ROM
Das Seitenlayout ist fertig und funktioniert auf den gängigen Browsern.
150
Auf der CD-ROM zum Buch finden Sie das Ergebnis unserer Änderungen im Verzeichnis code/kap06 in der Datei positionieren_tabelle_ fertig.html.
PROFITIPP
Tricks zur Positionierung mit Tabellen
Die Attribute marginwidth und marginheight sorgen manchmal in HTML-Editoren für Probleme, da sie nicht zu den offiziellen Attributen für das -Tag gehören.
6.4 Tricks zur Positionierung mit Tabellen Browser reagieren unter Umständen unterschiedlich auf Größenangaben in Tabellen. Vor allem, wenn die Größe des Browserfenster geändert wird, muss das Layout unter Umständen daran glauben.
AUF DER
CD-ROM
Um dies zu vermeiden, verwendet man transparente 1*1 Pixel große GIF-Grafiken, die im-Tag mit den Attributen width und height auf die passende Größe skaliert werden.
Auf der CD-ROM finden Sie unter 1punktgif.html ein Beispiel. Eine 1*1 Pixel große GIF-Grafik finden Sie unter dem Namen punkt.gif.
Ein zweiter Trick oder eher eine Empfehlung ist, komplizierte Tabellen auf Papier vorzuzeichnen, bevor Sie sie in HTML umsetzen. Hier eignet sich auch ein HTML-Editor gut zum Konzeptionieren. Nichts ist schwieriger, als eine komplexe, bestehende Tabelle zu korrigieren.
6.5 Auf der CD-ROM ... Die wichtigsten Arten der Positionierung sind die relative und die absolute Positionierung. Die relative Positionierung wird auch von HTML verwendet und besagt, dass Objekte relativ zu den davor positionierten Objekten angeordnet werden. Interessanter ist die absolute Positionierung. Hier werden Objekte mit den Koordinaten ausgerichtet, ausgehend vom Nullpunkt links oben in der Ecke des Browserfensters. In diesem Abschnitt zeigen wir Ihnen anhand eines Arbeitsbeispiels, wie Sie Objekte absolut positionieren und die Positionierung ändern. Wie immer benötigen Sie zuerst die Ausgangsdatei:
151
Seitenlayout
1 2
Wechseln Sie auf die CD-ROM in das Verzeichnis code\kap06.
3
Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie diese bearbeiten können.
4 5
Öffnen Sie die Datei positionieren_style.html in Ihrem bevorzugten Editor.
Kopieren Sie die Datei positionieren_style.html in das Arbeitsverzeichnis auf die Festplatte (z.B. c:\werkstatt).
Anschließend öffnen Sie diese mit einem Browser.
Im Browser sehen Sie die zwei Absätze.
Die zwei Absätze wurden positioniert.
Wenn Sie sich den Quellcode näher ansehen, fällt Folgendes besonders auf: ■ Zwei Absätze, die jeweils eine Hintergrundfarbe und einen Rand haben. ■ Um die Absätze zu positionieren, wird das-Tag verwendet. Der StylesheetBefehl dazu ist position. Er enthält die Art der Positionierung, also absolute, die Koordinaten und den z-index. Dieser besagt, was geschieht, wenn Objekte sich überlappen.
PROFITIPP
Im Folgenden zeigen wir Ihnen, wie Sie die Arbeitsdatei variieren können.
152
Natürlich können innerhalb der-Tags nicht nur Absätze, sondern auch Bilder und beliebige andere Elemente enthalten sein.
Positionierung ändern
6.6 Positionierung ändern Ziel dieses Abschnitts ist, die zwei Absätze überlappen zu lassen. Dazu wollen wir die Position des zweiten Absatzes ändern:
1
Der Abstand von oben des zweiten Absatzes wird auf 25 Pixel verringert. Dazu wechseln Sie in das style-Attribut des zweiten Absatzes und tragen dort unter top den Wert 25px ein.
Der Abstand von oben wurde verringert.
2
Nun muss unter left der Abstand von links erhöht werden. Hier geben wir einen Wert von 45px an.
Der Absatz wurde weiter nach rechts eingerückt
Wenn Sie das Ergebnis im Browser betrachten, sehen Sie, dass der erste Absatz von dem zweiten überlappt wird.
Der zweite Absatz überlappt den ersten.
153
Seitenlayout
6.7 Elemente überlappen Die Überlappung von Elementen lässt sich mit dem z-index steuern. Je höher der zindex, desto höher wird ein Element positioniert. In unserem Beispiel hat der zweite Absatz einen z-index von 1, der erste nur einen von 0, deshalb wird der zweite immer den ersten überlappen. Im Folgenden zeigen wir Ihnen, wie Sie das im Quellcode ändern. Zuerst müssen Sie den z-index des ersten Absatzes ändern. Er erhält nun statt 0 den Wert 1.
PROFITIPP
Den Index ändern
Wenn Sie sich jetzt die Seite im Browser ansehen, hat sich an der Positionierung noch nichts geändert. Dies erklärt sich aus einer einfachen Regel: Haben zwei Elemente den gleichen z-index, so steht das Element oben, das im HTML-Code später angegeben wurde. Ist kein z-index vergeben worden, hat das Element automatisch den Index 0.
Nun ändern wir noch den z-index für den zweiten Absatz auf 0.
Der zweite Absatz erhält einen niedrigeren z-index.
154
Fazit
Wenn Sie das Ergebnis im Browser betrachten, sehen Sie, dass nun der erste den zweiten Absatz überlagert. Je mehr Objekte Ihre Seite hat, desto aufmerksamer müssen Sie natürlich bei der Positionierung sein. Am besten zeichnen Sie sich eine kleine Übersicht aller Objekte, die Sie positionieren wollen und schreiben sich Koordinaten und z-index daneben.
Verwenden Sie relative und absolute Positionierung in einem Dokument, entscheidet nach wie vor der z-index über die Überlappung, denn auch relativ positionierten Elementen kann ein z-index zugewiesen werden.
AUF DER
CD-ROM
Auf der CD-ROM zum Buch finden Sie die fertige Datei im Verzeichnis code/kap06 unter dem Namen positionieren_style_fertig.html.
PROFITIPP
Der erste Absatz liegt nun über dem zweiten.
6.8 Fazit Das Layout einer Website wird heutzutage immer wichtiger. Mit Tabellen und Stylesheets stehen Ihnen dafür leistungsstarke Werkzeuge zur Verfügung.
155
7.0 Frames Über den Sinn und Unsinn von Frames scheiden sich seit jeher die Geister. Die einen sehen in Frames eine gelungene Möglichkeit, eine Website in mehrere, voneinander unabhängige Bereiche zu unterteilen und so eine bequeme Navigation zu ermöglichen. Andere wiederum sehen Frames als unflexibel an und bemängeln Schwierigkeiten, einzelne Frame-Seiten oder Frames ganz allgemein als Lesezeichen/Bookmark abzuspeichern. Wir möchten uns an dieser Stelle nicht allzu sehr in diese Diskussion einmischen, sondern zeigen Ihnen einfach, was Sie mit Frames alles machen können. Ob und wie Sie sie dann einsetzen, liegt bei Ihnen. Ziel ist es, eine Seite mit drei Frames zu erstellen. Ein Frame enthält ein Navigationselement, ein weiterer Frame enthält ein Werbebanner, und der größte der drei Frames enthält den eigentlichen Inhalt der Seite.
Frames
So soll es am Ende (ungefähr) aussehen.
7.1 Auf der CD-ROM ... Beginnen werden wir zunächst mit einer etwas einfacheren Frame-Seite, die Sie auf der CD-ROM wie folgt auffinden:
1 2
Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap07.
3
Öffnen Sie die Datei frameset.html sowohl in Ihrem Editor als auch im Webbrowser.
Kopieren Sie alle HTML-Dateien, die Sie dort finden, in Ihren lokalen Arbeitsordner (c:\werkstatt beispielsweise).
Sie sehen dass zwei Frames definiert worden sind – einer links, einer rechts.
158
Frames erstellen
Zwei Frames, gleich breit
7.2 Frames erstellen Werfen Sie einen Blick auf den Quellcode der Datei frameset.html. Ihnen wird als Erstes auffallen, dass es keinen -Bereich gibt. Die Datei frameset.html dient einzig und allein dazu, die Frame-Anordnung auf der aktuellen Seite zu definieren. Eigentliche Inhalte werden hier nicht dargestellt. Werfen Sie als nächstes einen Blick auf das erste neue Tag, dass Sie entdecken:
