1. Tabellen
1 Grundgerüst
<table border=1 cellspacing=2 cellpadding=1>
<tbody>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></tbody></table>
<table border=1 cellspacing=2 cellpadding=1>
<tbody>
<tr>
<td>Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></tbody></table>
Tabellen sind eigentlich ziemlich einfach aufgebaut. Sie sind mit Zwiebeln vergleichbar, wo eine Schale eine andere umschließt. Die alles umschließende und das folgende als Tabelle anzeigende Element ist <table>. Das Ende bezeichnet der </table>-Ausdruck. Alles, was zu der Tabelle gehört, wird von diesen beiden Ausdrücken umschlossen.
Die nächste Schale ist der <tbody></tbody>-Ausdruck. Da es jedoch nichts ausmacht, wenn man diesen weglässt und ich tippfaul bin, werde ich diesen Ausdruck (genannt "Tag") im Folgenden weglassen.
Als nächstest kommt <tr></tr> - der Tag für die Tabellenzeilen. In den tr-Tag kommen <td></td>-Tags, die jeweils für eine Zelle stehen. Durch mehrere Zellen in einer Zeile entstehen Spalten.
2 Abstand der Zellrahmen zueinander
<table border=1 cellspacing=20 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=0 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Der Abstand zwischen den Zellen wird mit cellspacing im table-Tag bezeichnet. Je größer der Wert ist, den man für cellspacing eingibt, desto größer wird der Abstand zwischen den einzelnen Zellen und auch zwischen den Zellen und dem Tabellenrand.
3 Abstand der Zelleninhalte zum Rahmen
<table border=1 cellspacing=2 cellpadding=5>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=10>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Durch cellpadding kann man den Abstand des Zelleninhaltes (also Text oder Bilder) vom Rand der Zelle definieren. Durch die Veränderung des cellpaddingwertes kann - wie auch bei cellspacing - die Tabelle größer - will heißen breiter und höher - werden.
4 Rahmendicke
<table border=3 cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=10 cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Der Ausdruck border bezeichnet die Dicke des Zellen- oder Tabellenrahmens. Je höher die Zahl, desto breiter der Rahmen
5 Rahmenfarbe: einfarbig
<table border=1 bordercolor=yellow cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 bordercolor=#A00020 cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Die Farbe des Tabellen- und Zellenrahmens wird durch bordercolor definiert. Die Farbe, die man benutzen möchte, kann man mit dem englischen Namen oder dem entsprechenden Hexcode angeben.
6 Rahmenfarbe: schattiert
<table border=1 bordercolorlight=yellow bordercolordark=red cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 bordercolorlight=#00FFFF bordercolordark=#800000 cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Man kann den Rahmen auch in Licht- und Schattenseite aufteilen. Dazu benutzt man die Ausdrücke bordercolorlight und bordercolordark. Das Lichtquelle befindet immer von oben links. Die Farben werden wieder durch den englischen Namen oder den Hexcode angegeben.
7 Breite und Höhe
<table border=1 cellspacing=2 cellpadding=1 width=100px height=50px>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1 width=150px height=100px>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Durch die Ausdrücke width und height kann man die Breite und die Größe eines Elements festlegen. Der Wert wird meistens in Pixel (px) angegeben oder auch in Prozent (%).
8 Zellen vertikal verbinden
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td rowspan=2>Zelle1</td>
<td>Zelle2</td></tr>
<tr>
<td>Zelle3</td></tr></table>
Mit rowspan kann man eine Zelle über zwei oder mehrere Zeilen "spannen". Je nachdem wieviele Zeilen die Zelle überspannen soll, muss die Zahl, die für rowspan eingetragen wurde, angepasst werden. Soll die Zelle also vier Zeilen überspannen, muss man hinter rowspan vier eintragen. Jedoch muss man darauf achten, dass in den darunterliegenden Zeilen eine Zelle weniger aufgeführt ist.
9 Zellen horizontal verbinden
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr>
<tr>
<td colspan=2>Zelle3</td></tr></table>
Colspan funktioniert eigentlich genauso wie rowspan, nur dass colspan die Zellen waagerecht verbindet. Natürlich muss man wieder daran denken, nicht zu viele oder zu wenig Zellen anzugeben.
10 Tabellenhintergrund: Farbe
<table border=1 cellspacing=2 cellpadding=1 bgcolor=yellow>
<tr>
<td>Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1 bgcolor=#FF00FF>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Um eine Hintergrundfarbe für Tabellen festzusetzen, benutzt man bgcolor. Bg steht dabei für background - also Hintergrund. Die Farbe für den Hintergrund lässt sich wieder durch den englischen Namen oder den Hexcode angeben.
11 Tabellenhintergrund: Bild
<table border=1 cellspacing=2 cellpadding=1 background="Bildadresse">
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Wenn man ein Bild als Tabellenhintergrund haben möchte, benutzt man den Ausdruck background auf den die Adresse des Bildes folgt. Man muss darauf achten, dass das Bild auch im Internet zu finden ist. Das heißt, man muss das ausgewählte Bild bei einem Webspaceanbieter hochladen und dann die Adresse, unter der das Bild zu finden ist, hinter background einfügen.
12 Schriftart in Zellen
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><font face="Tempus Sans ITC">Zelle1</font></td>
<td>Zelle2</td></tr></table>
Um in einzelnen Zellen eine bestimmte Schriftart zu benutzen nimmt man den font-Tag mit face. Nach dem Ausdruck face wird die gewünschte Schriftart eingefügt. Dabei sollte man allerdings beachten, dass eventuell nicht auf jedem PC die gewünschte Schriftart installiert ist. Somit sollte man eine gängige Schriftart wie Arial oder Times New Roman benutzen. Den genannten Ausdruck kann man auch in einem fortlaufenden Text verwenden.
13 Schriftfarbe in Zellen
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><font color=yellow>Zelle1</font></td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><font color=#FF0000>Zelle1</font></td>
<td>Zelle2</td></tr></table>
Um die Schriftfarbe zu ändern, benutzt man wieder den font-Tag, den man immer zum formatieren von Schriften benutzt. Für die Farbe benutzt man color. Die Farbe wird wieder durch den englischen Namen oder den Hexcode festgelegt.
14 Schriftgröße in Zellen
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><font size=1>Zelle1</font></td>
<td>Zelle2</td></tr></table>
Die Schriftgröße wird wieder in dem font-Tag definiert. Man benutzt dazu size, wobei zwei die "Normalgröße" ist.
15 Fettschrift
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><b>Zelle1</b></td>
<td>Zelle2</td></tr></table>
Der Befehl für einen fetten Text ist bold. Mann kann statt dem b für bold auch strong schreiben. Jedoch scheint das b die aktuellere und lieber gesehene Variante zu sein...
16 Kursivschrift
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><i>Zelle1</i></td>
<td>Zelle2</td></tr></table>
I steht für italic, was kursiv bedeutet. Es wird wie der b-tag benutzt.
17 Unterstrichene Schrift
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td><u>Zelle1</u></td>
<td>Zelle2</td></tr></table>
Um den Text zu unterstreichen, benutzt man die Abkürzung für underline - u, das in einem Tag den Text umschließt.
18 Ausrichtung des Zelleninhaltes
<table border=1 cellspacing=2 cellpadding=1 height=50px width=150px>
<tr>
<td style="vertical-align: middle; text-align: center;">Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1 height=50px width=150px>
<tr>
<td style="vertical-align: bottom; text-align: left;">Zelle1</td>
<td>Zelle2</td></tr></table>
Um den Tabelleninhalt in die gewünschte Ecke zu rücken, braucht man hier etwas CSS, dass hinter style eingefügt wird. Die Teile, aus denen sich der Platz des Zelleninhalts zusammensetzt sind vertical-align, was die vertikale Ausrichtung angibt, und text-align, womit die horizontale Ausrichtung angegeben wird.
Dass die Breite und Höhe in den Beispielen wieder definiert ist, liegt nur daran, dass ich die Ausrichtung verdeutlichen wollte.
19 Zeilenrahmen
<table border=1 cellspacing=2 cellpadding=1>
<tr bordercolor=lightblue>
<td>Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr bordercolor=#FF0000>
<td>Zelle1</td>
<td>Zelle2</td></tr>
<tr>
<td>Zelle3</td>
<td>Zelle4</td></tr></table>
Beim Zeilenrahmen funktioniert es wie beim Tabellenrahmen, nur dass die Rahmendicke im table-Tag definiert wird und die Rahmenfarbe im tr-Tag, der ja für die Zeile verantwortlich ist. Man benutzt wieder bordercolor und gibt die Farbe im Hexcode oder im englischen Namen an.
20 Zellenrahmen
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td bordercolor=yellow>Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td bordercolor=#FF00FF>Zelle1</td>
<td>Zelle2</td></tr></table>
Der Zellenrahmen hat das gleiche Muster wie der Zeilenrahmen. Die Dicke wird wieder im table-Tag definiert und die Farbe mit bordercolor und dem Hexcode oder englischen Namen im td-Tag festgelegt.
21 Zeilenhintergrund
<table border=1 cellspacing=2 cellpadding=1>
<tr bgcolor=darkblue>
<td>Zelle1</td>
<td>Zelle2</td></tr>
<tr>
<td>Zelle3</td>
<td>Zelle4</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr bgcolor=#FF007F>
<td>Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></table>
Um die Tabellenzeile mit einem Hintergrund zu versehen, benutzt man wieder bgcolor und fügt dies in den tr-Tag ein. Ein Hintergrundbild ist nicht möglich. Die Farbe definiert man wieder mit dem englischen Namen oder dem Hexcode.
22 Zellenhintergrund
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td bgcolor=limegreen>Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td bgcolor=#FFFF00>Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td background="Bildadresse">Zelle1</td></tr>
<tr>
<td>Zelle2</td></tr></table>
Der Hintergrund einer Zelle kann man in eine Farbe oder ein Bild verwenden. Man benutz dafür bgcolor oder background und fügt zutreffenes in den td-Tag ein.
T
E
S
T Was kommt in die leeren Stellen?
<___ border=3 cellspacing=0 ___=2 width=150px height=200___ bordercolorlight=#005050 border___=lightblue ___=white>
<tr>
<td ___=2 bgcolor=red><font ___=orange>Zelle1</font></td>
<td><font ___=Aladdin>Zelle2</___></td>
<td><u>___</u></td></tr>
<___>
<td style="text-align: center;"><___ color=#AF00FF ___=1 face=Simsun>Zelle4</font></td>
<td rowspan=3 ___="BILDADRESSE">Zelle5</td></tr>
<tr>
<td colspan=___><font size=5>Zelle6</font></td></tr>
<tr>
<___ ___="vertical-align: ___;"><b>Zelle7</b></td>
<td bgcolor=#FFFF00>Zelle8</td></tr>
<tr>
<td colspan=3 style="____:right; vertical-align: top;">Zelle9</td></tr></table>
Antwort
Um die Antwort zu sehen, scroll hier weiter runter!
Glückwunsch, wenn du alles richtig hast!
So schwer sind Tabellen nun doch nicht, oder? Man braucht nur etwas Übung und muss es verstanden haben. ^___^
Gut, also die Antwort findest du am Fensterende!!!
<table border=3 cellspacing=0 cellpadding=2 width=150px height=200px bordercolorlight=#005050 bordercolordark=lightblue bgcolor=white>
<tr>
<td rowspan=2 bgcolor=red><font color=orange>Zelle1</font></td>
<td><font face=Aladdin>Zelle2</font></td>
<td><u>Zelle3</u></td></tr>
<tr>
<td style="text-align: center;"><font color=#AF00FF size=1 face=Simsun>Zelle4</font></td>
<td rowspan=3 background="BILDADRESSE">Zelle5</td></tr>
<tr>
<td colspan=2><font size=5>Zelle6</font></td></tr>
<tr>
<td style="vertical-align: bottom;"><b>Zelle7</b></td>
<td bgcolor=#FFFF00>Zelle8</td></tr>
<tr>
<td colspan=3 style="text-align:right; vertical-align: top;">Zelle9</td></tr></table>
2. CSS
1 Vorwort
Wer sich schon durch den Tabellenkurs gekämpft hat, kann sogar schon ein wenig CSS, denn bei Nummer 18 "Ausrichtung des Zelleninhaltes" wurde CSS benutzt. CSS wird stets mit style="INHALT" angezeigt. Man kann statt fast jeden (bestimmt auch statt jedem, aber ich kenne ein paar Ausdrücke nicht) HTMLausdurck einen CSSausdruck verwenden.
Man kann mit CSS bestimmte Teile der Seite formatieren, oder auch gleich die ganze Seite. Bei dem bisher Angesprochenen wurden nur bestimmte Teile barbeitet. Wenn man die ganze Seite formatieren will, benutzt man einen <style></style>-Ausdruck.
Das hört sich eventuell kompliziert an, ist aber, wenn man es verstanden hat, ganz einfach.
2 Tabellenrahmen: grundlegendes
<table style="border-width:1px; border-color:black; border-style:solid;" cellspacing=2 cellpadding=1>
<tr>
<td style="border-width:1px; border-color:black; border-style:solid;">Zelle1</td>
<td style="border-width:1px; border-color:black; border-style:solid;">Zelle2</td></tr></table>
<table style="border-width:2px; border-color:black; border-style:solid;" cellspacing=2 cellpadding=1>
<tr>
<td style="border-width:2px; border-color:#00FF9F; border-style:dotted;">Zelle1</td>
<td style="border-width:2px; border-color:#000000; border-style:dashed;">Zelle2</td></tr></table>
Wie auch schon zuvor wird der Rahmen mit border definiert. Jedoch ist nun, zum sichtbar machen des Rahmens etwas mehr nötig: die Rahmenbreite (border-width), die Rahmenfarbe (border-color) und die Rahmenart (border-style). Die Rahmenbreite wird wieder in Pixeln (px) angegeben. Die Rahmenfarbe kann wieder mit dem englischen Namen oder dem Hexcode angegeben werden. Bei der Rahmenart gibt es drei Möglichkeiten: solid (durchgehend), dashed (gestrichelt) und dotted (gepunktet). Dashed und dotted sind allerdings nur bei einer Rahmendicke von mindestens zwei Pixeln zu unterscheiden.
3 Tabellenrahmen: schattiert
<table style="border-top-width:2px; border-top-color:red; border-top-style:solid;
border-left-width:2px; border-left-color:#FFDF00; border-left-style:dashed;
border-right-width:2px; border-right-color:yellow; border-right-style:dotted;
border-bottom-width:1px; border-bottom-color:#00FFFF; border-bottom-style:solid;" cellspacing=2 cellpadding=1>
<tr>
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
<table style="border-width:1px; border-color:blue; border-style:solid;" cellspacing=2 cellpadding=1>
<tr>
<td style="border-top-width:2px; border-top-color:red; border-top-style:solid;
border-left-width:2px; border-left-color:#FFDF00; border-left-style:dashed;
border-right-width:2px; border-right-color:yellow; border-right-style:dotted;
border-bottom-width:1px; border-bottom-color:#00FFFF; border-bottom-style:solid;">Zelle1</td>
<td>Zelle2</td></tr></table>
Man kann auch nur bestimmte Teile des Rahmens definieren. So ist es zum Beispiel Möglich den oberen Teil des Rahmens rot und durchgehend und den rechten Teil des Rahmens gelb und gepunktet darzustellen. Das geht, indem man nicht mehr nur border-style oder ähnliches schreibt, sondern man top (oben), left (links),right (rechts) oder bottom (unten) einsetzt, so dass man nun beispielsweise border-bottom-style schreibt.
Man kann beides sowohl in den table-Tag als auch in den td-Tag schreiben.
4 Ausrichtung des Zelleninhalts
<table border=1 cellspacing=2 cellpadding=1 height=50px width=150px>
<tr>
<td>Zelle1</td>
<td style="vertical-align: bottom; text-align: center;">Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1 height=50px width=150px>
<tr style="vertical-align: middle; text-align: right;">
<td>Zelle1</td>
<td>Zelle2</td></tr></table>
Für den der Teil in den Tabellenerklärungen nicht gelesen hat, stehts hier nochmal:
Um den Tabelleninhalt in die gewünschte Ecke zu rücken, braucht man hier etwas CSS, dass hinter style eingefügt wird. Die Teile, aus denen sich der Platz des Zelleninhalts zusammensetzt sind vertical-align, was die vertikale Ausrichtung angibt, und text-align, womit die horizontale Ausrichtung angegeben wird.
Dass die Breite und Höhe in den Beispielen wieder definiert ist, liegt nur daran, dass ich die Ausrichtung verdeutlichen wollte.
5 Textformatierung in Tabellen
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td style="font-family:Serpentine; font-style:normal; font-size:12px; color:yellow; font-weight:normal;">Zelle1</td>
<td>Zelle2</td></tr></table>
<table border=1 cellspacing=2 cellpadding=1>
<tr>
<td style="font-family:Mistral; font-style:normal; font-size:18px; color:green; font-weight:bold;">Zelle1</td>
<td>Zelle2</td></tr></table>
Will man die Schrift per CSS formatieren, muss man font-family (Schriftart), font-style (Schriftstil), font-size (Schriftgröße), font-weight (Schriftdicke) und color bestimmen.
Bei der Schriftart kann man alle möglichen Schriftartten eingeben, die zum einen richtig geschrieben und zum anderen auf dem Computer des Users installiert sein müssen. Um eine Alternative anzubieten schreibt man die Ersatzschriftart nach einem Komma hinter die gewünschte (zum Beispiel font-family: Mistral, Arial;). Beim Schriftstil gibt es zwei Möglichkeiten: normal (normal) oder italic (kursiv). Das gleiche gilt für die Schriftdicke, die man mit normal (normal) oder bold (fett) festlegen kann. Die Schriftgröße wird in Pixeln festgelegt - zwischen 10px und 14px liegt die normale, angenehme Schriftgröße. Die Farbe wird wie gewohnt mit dem englischen Namen oder dem Hexcode angegeben.
6 Scrollbalkenformatierung (über ganze Seite)
scrollbar-3dlight-color
scrollbar-highlight-color
scrollbar-face-color
scrollbar-arrow-color scrollbar-shadow-color
scrollbar-darkshadow-color
scrollbar-track-color
scrollbar-base-color
<style type="text/css">body {
scrollbar-base-color:#800000;
scrollbar-3dlight-color:white;
scrollbar-arrow-color:yellow;
scrollbar-darkshadow-color:black;
scrollbar-face-color:orange;
scrollbar-highlight-color:#808080;
scrollbar-shadow-color:#454545;
scrollbar-track-color:red;}</style>
Auf der linken Seite seht ihr einen Scrollbalken an dem oben die einzelnen Farbteile einem Titel zugewiesen wurden. Dadrunter sieht man den Code, der zu dieser Farbeinteilung gehört. Wenn man etwas Englisch kann dürfte es nicht schwerfallen, den einzelnen Titeln eine Position zuzuweisen. Die Farben können mit dem Hexcode oder dem englischen Namen angegeben werden.
7 Textformatierung (über ganze Seite)
<style type="text/css">
td, p, font, body {font-family:Arial; font-style:normal; font-size:12px; color:#CBA200; font-weight:bold;}</style>
Dieser style-Tag kommt ans Ende oder den Anfang einer Seite. Durch td, p, font und body wurde die ganze Seite abgedeckt und die darauf folgenden Angaben werden für den gesamten Text der Seite angewand. In dem Beispiel wird der Text in Arial und mit 12px Größe geschrieben sein. Die Schrift ist nicht kursiv, aber fett und hat die Farbe #CBA200 haben.
8 Linkformatierung (über ganze Seite)
<style type="text/css">
a{font-family:Arial; font-size:12px; font-style:normal; font-weight:normal; color:#CDCDCD;}
A:LINK{font-family:Redensek; font-size:10x; font-style:normal; font-weight:normal; color:#FF9F00;}
A:VISITED{font-family:Beech; font-size:8px; font-style:italic; font-weight:normal; color:blue;}
A:HOVER{font-family:Verdana; font-size:18px; font-style:normal; font-weight:bold; color:#008030;}</style>
Die Links auf der Seite einheitlich zu definieren ist eigentlich genau das gleiche wie den Text zu formatieren. Das a ist das Zeichen für einen Link. Die Zusätze link (Link), visited (besucht) und hover (Drüberfahren) lassen zu, dass man den Link in verschiedenen "Stadien" verschieden definiert. Die restlichen Teile sind einfache Textdefinitioen.
9 Tabellenformatierung (über ganze Seite)
<style type="text/css">
table{border-width:1px; border-style:solid; border-color:#CDCDCD; width:80%; font-family:Arial; font-style:normal; font-size:12px; font-weight:normal; color:#CDCDCD;}
td{border-width:1px; border-style: solid; border-color:#CDCDCD; vertical-align:top; text-align: center;}</style>
Das ganze kommt natürlich wieder in einen style-Tag. Dadrin wird nun als erstes die Tabelle mit dem nach table{ folgenden definiert. Anschließend werden die Zellen mit den Ausdrücken nach td{ definiert.
Man kann zuerst den Rahmen mit den border-Ausdrücken, dann die Breite mit width und dann den Text definieren. Im Prinzip ist die Reihenfolge aber egal. In dem Zellenausdruck kann man das selbe machen und auch noch die Ausrichtung des Zelleninhalts hinzufügen. Um einen Zellenrahmen zu bekommen, braucht man jedoch die volle Rahmendefinition, auch wenn ein Rahmen im table-Tag schon vorhanden ist. Will man dass die Zellen andere definitonen haben, als die gesamte Tabelle, muss man neu definieren.
10 Tabellen oder Zellen verschieden formatieren (über ganze Seite)
<style type="text/css">
table.user{border-width:1px; border-style:solid; border-color:#CDCDCD; width:80%; font-family:Arial; font-style:normal; font-size:12px; font-weight:normal; color:#FFFF00; vertical-align:top; text-align:left;}
table.neueruser{border-width:2px; border-style:dotted; border-color:#CDCDCD; width:80%; font-family:MT Extra; font-style:italic; font-size:12px; font-weight:normal; color:#CDCDCD; vertical-align:top; text-align:left;}
td.neopet{border-width:2px; border-style:solid; border-color:#FFDF00;vertical-align:top;text-align: center;}
td.petpet{border-color:#CDCDCD;vertical-align:top;text-align: center;}</style>
In einem style-Tag ist es möglich, Tabellen und Zellen unterschiedlich zu definieren. Dies tut man, indem man eine Tabelle nicht mehr nur mit table{ definiert, sondern table.tabellenname{ schreibt. Will man nun eine Tabelle dieser Definition zuordnen, schreibt man in den table-tag class=tabellenname (also "<table class=tabellenname>"). Man kann beliebig viele Tabellenarten definieren, nur der Name darf nicht der selbe sein. Das selbe gilt für Zellen, nur dass man statt td{ td.zellenname{ schreibt und dann in den td-tag class=zellenname (also "<td class=zellenname>") schreibt.
Setzt man keine Definition für eine Zelle fest, wird die Schriftdefinition der Tabelle übernommen.
3. Grafiken
1 Bild einfügen
<img sc="Bildadresse" width="100" height="50" border="0" alt="">
<img sc="Bildadresse" width=100px height=50px>
<img sc="Bildadresse" alt="Tagchen">
Was an erster Stelle zu sehen ist, ist ein kompletter Bild-tag, wo Quelle, Breite, Höhe, Rahmen und Hovertext definiert sind. Eigentlich sind Rahmen und Hovertext überflüssig, so dass man sie weglassen kann. Breite und Höhe lassen sich gut in Pixeln (px) definieren wo man auch die Anführungszeichen auslassen kann. Eine andere Möglichkeit Breite und Höhe zu definieren ist zum Beispiel Prozent (%). Beides kann aber auch weggelassen werden, wenn das Bild nicht gestreckt oder gestaucht werden soll. Fügt man den img-tag nur mit der Bildquelle ein, erscheint das Bild in der Größe, in der es auch gespeichert wurde. Möchte man, dass beim Drüberfahren des Bildes ein Text erscheint, nutzt man "alt" um dort einen Text einzugeben.
2 Hintergrund benutzen
<body bgcolor=orange>
Um mit HTML eine Hintergrundfarbe zu bestimmen, setzt man in den body-Tag (auf den ich nicht weiter eingehe - nur so viel: er beginnt ganz am Anfang der Seite vor dem Seiteninhalt und umschließt diesen) bgcolor ein. Danach wird die Farbe in Hexcode oder englischer Sprache angegeben.
3 Hintergrundbild benutzen
<body background="Bildadresse">
Will man ein Bild als Hintergrund haben, schreibt man background in den body-Tag und gibt danach die Adresse des hochgeladenen Bildes in Anführungszeichen an.
4 Hintergrund benutzen (CSS)
<style type="text/css">body{
background-color: orange;}</style>
Um eine Hintergrundfarbe mit CSS zu erreichen, benutzt man background-color. Danach kommt die Farbe in Englisch oder als Hexcode.
5 Hintergrundbild benutzen (CSS)
<style type="text/css">
body {background-image: url(Bildadresse);}</style>
<style type="text/css">
body {background: url(Bildadresse);}</style>
Um mit CSS ein Hintergrundbild einzufügen benutzt man background-image oder nur background. Dazu kommt nach einem Doppelpunkt url und in den darauffolgenden Klammern die Adresse des Bildes.
6 Hintergrund bearbeiten (CSS)
<style type="text/css">
body {background: url(Bildadresse) fixed;}</style>
<style type="text/css">
body {background: url(Bildadresse) no-repeat;}</style>
<style type="text/css">
body {background: url(Bildadresse) right middle;}</style>
Wenn man ein Hintergrundbild hat, ist es oft schön, wenn man es ausrichten und/oder fixieren kann. Um ein Hintergrundbild zu fixieren, so dass es sich beim Scrollen nicht bewegt, schreibt man als Zusatz zum normalen CSShinter-grundausdruck fixed. Möchte man ein Hintergrundbild nur einmal auf der Seite haben, schaltet man die Wiederholung mit no-repeat aus. Wenn man ein Bild als Eckhintergrund benutzen will oder es irgendwie anders ausrichten möchte (die normale Ausrichtung platziert die obere linke Ecke des Bildes in der oberen linken Ecke des Fensters), schreibt man erst die horizontale und dann die vertikale Ausrichtung hin (also left, center, right und top, bottom). Möchte man das Bild immer genau in der Mitte des Fensters haben, reicht ein Ausdruck und zwar center. Schreibt man nur eine Definition, so wird es so wie angegeben ausgerichtet und in der Mitte (wenn man zum Beispiel "top" definiert, wird das Bild oben in der Mitte erscheinen; schreibt man "left" erscheint das Bild auf der linken Seite in der Mitte).
7 Bild ausrichten (CSS)
<img sc="Bildadresse"
style="vertical-align:top;">Text
<img sc="Bildadresse"
style="vertical-align:middle;">Text
<img sc="Bildadresse">Text
Wenn man neben ein Bild einen Text schreiben möchte, kann man ihn ausrichten. Das geht, indem man vertical-align auf top oder middle schreibt. Schreibt man garnichts, befindet sich der Text am unteren Ende des Bildes.
4. Links
1 Textlink
<a href="Zieladresse">Linktext</a>
<a href="Zieladresse" target=_blank>
Linktext</a>
Bei einem Link werdet ihr immer a href finden. Hinter href wird man immer die Adresse des Zieles finden, so auch hier. Um den Link nun in einem Text zu kleiden, muss man einen Linktext in den a-tag einfügen, der angezeigt wird.
Um den Link in nicht in dem Fenster zu öffnen, in dem sich der Link befindet, sondern in einem neuen Fenster, gibt man ein Zielfenster (target) an. Jedes Fenster hat in der Regel einen Namen. Wenn man den Link aber in einem neuen Fenster öffnen will, gibt man einfach irgendeinen Namen bei target an, den kein Fenster hat. Beispiele dafür wären "zunge", "angriff" oder "tuttifrutti". Fensternamen, die man lieber nicht angibt sind zum Beispiel "menu" oder "main". Wenn man noch ein Fenster offen hat, in dem sich zum Beispiel ein Fenster mit dem Namen "menu" befindet, wird sich das Linkziel dort drin öffnen. Benutzt man target=_blank kann man sicher sein, dass sich das Ziel in einem neuen Fenster öffnet - denn wer nennt ein Fenster schon "_blank"?
2 Bildlink
<a href="Zieladresse">
<img sc="Bildadresse"></a>
<a href="Zieladresse">
<img sc="Bildadresse" border=0></a>
Ich benutze in dem Codebeispiel einen Link, der sich in dem selben Fenster öffnet, in dem er steht (siehe Punkt 1 unter "Links").
Um ein Bild zu verlinken setzt man einfach statt einem Linktext den Code für ein Bild ein. Jedoch erscheint um das verlinkte Bild dann ein blauer Rahmen. Um den zu entfernen schreibt man "border=0", was den Rahmen auf Null setzt. Dann ist der lästige Rahmen um das Bild verschwunden.
3 Hovereffekte
Ausgangslink:
<style type="text/css">
A:HOVER{font-family:Arial; font-style:italic; font-size:16px; font-weight:bold; color:#FFFF00;}</style>
<style type="text/css">
A:HOVER{text-decoration:none;}</style>
<style type="text/css">
A:HOVER{text-decoration:overline;}</style>
<style type="text/css">
A:HOVER{text-decoration:underline;}</style>
<style type="text/css">
A:HOVER{text-decoration:overline underline;}</style>
<style type="text/css">
A:HOVER{height:0; filter:fliph;}</style>
<style type="text/css">
A:HOVER{height:0; filter:flipv;}</style>
<style type="text/css">
A:HOVER{height:0; filter:fliph flipv;}</style>
<style type="text/css">
A:HOVER{height: 10; filter:blur;}</style>
Es gibt viele verschiedene Hovereffekte (Effekt eines Links, beim Drüberfahren des Cursors), die für Text- und Bildlinks funktionieren. Aus Demonstrationszwecken sind hier nur Textlinks zu sehen.
Im ersten Beispiel wurden "style", "size" und "weight" sowie die Farbe verändert. Beim zweiten wurde die Textdekoration eines Links (der Unterstrich) entfernt. Der Schlüsses für die meisten Effekte ist text-decoration. Man kann durch sie die Links auch nur mit einem Ober- oder Unterstrich (drittes und viertes Beispiel) versehen oder auch mit beidem (fünftes Beispiel).
Eine weitere Spielerei ist das umdrehen des verlinkten Elements. Mit filter:fliph und filter:flipv kann man das Element horizontal oder vertikal drehen. Beides ist mit filter:fliph flipv möglich.Warum das "height" noch dazu muss, kann ich leider nicht erklären. Im letzten Beispiel wird das verlinkte Element verwischt. Wenn dort "height" verändert wird, verändert sich auch die Verwischung.
4 Link zu einer bestimmten Stelle einer Seite (Anker)
<a href="#anke1">Link zum Anker1</a>
... Seiteninhalte ...
<a name=anker1>Platz des Anker1</a>
<a href="http://www.andereseite.de/neopets/hilfe.html#anke1">
Link zum Anker1</a>
... Seiteninhalte ...
<a name=anke1>Platz des Anker1</a>
Einen Anker zu setzen ist relativ simpel. Es ist sehr nützlich, wenn man eine lange Seite mit vielen Inhalten hat. Hat man zum Beispiel ein Inhaltsverzeichnis, benutzt man dort "<a href="#anke1">". Beim Klicken auf den darauffolgenden Linktext (oder ähnlichem) gelangt man zu dem Anker mit dem Namen "anke1", der irgendwo auf der Seite mit "<a name=anke1>" angelegt werden muss.
Man kann beliebig viele Anker auf einer Seite benutzen. Die einzige Einschränkung ist, dass die Anker verschiedene Namen haben müssen. Werden zwei Anker mit dem selben Namen angelegt, gelangt man zu dem Anker, der näher am Seitenanfang ist. Ein Ankerpaar muss außerdem immer den selben Namen haben. Das # bei "a href" ist nötig, damit nach einem Anker mit dem folgenden Namen auf der Seite gesucht wird. Man kann auch Links zu Ankern auf anderen Seiten legen. Dies macht mal indem man zuerst den Link der Seite angibt (zum Beispiel "http://www.neopets.com/index.htm") und anschließend das Fenster des Users zu dem Anker leitet (z.B. beim Anker "Anker" auf der Seite http://www.neopets.com/index.htm: "http://www.neopets.com/index.htm#Anker").
5. Ebenen
1 Grundsachen (CSS)
<div style="width:40px; height:25px; background-color:green; text-align:center; border-width:1px; border-color:red; border-style:solid;">Text</div>
Ebenen werden mit <div></div>-Ausdrücken gemacht. Dort kann/sollte man (hier mit CSS) einige Sachen definieren: Breite, Höhe, Hintergrundfarbe, Ausrichtung des Inhalts, Rahmenbreite, -farbe und -art. Lässt man Hintergrund und Rahmen weg, ist die Ebene transparent und rahmenlos. Wie man das macht, ist weiter oben beschrieben.
2 Absolute Position (CSS)
<div style="position:absolute; left:10px; top:300px;">
Text</div>
<div style="position:absolute; right:100px; bottom:0px;">
Text</div>
Eine Ebene kann man - wie auch ein Bild oder Tabelle - an einem festen Platz in dem Fenster platzieren. Dafür position:absolute; in einem CSSausdruck benutzt. Danach schreibt man left oder right und dann eine Zahl, die den Abstand zum linken oder rechten Fenterrand in Pixel angibt. Das selbe mach man danach mit top oder bottom. Im ersten Beispiel ist die Ebene zum Beispiel 100 Pixel vom rechten und 300 Pixel vom oberen Fensterrand entfernt.
3 Scrollbalken (CSS)
<div style="OVERFLOW:auto; height:20px; width:55px;">
Text<br>Text2</div>
<div style="OVERFLOW:auto; height:20px; width:55px; scrollbar-base-color:#800000; scrollbar-3dlight-color:white; scrollbar-arrow-color:yellow; scrollbar-darkshadow-color:black; scrollbar-face-color:orange; scrollbar-highlight-color:#808080; scrollbar-shadow-color:#454545; scrollbar-track-color:red;">Text<br>Text2</div>
Möchte man viel Inhalt in eine Ebene bringen, diese aber nicht so groß machen, schreibt man OVERFLOW:auto in einen CSSausdruck und gibt auch noch die Höhe und Breite an. Passt der Ebeneninhalt nicht in die Ebene, werden Scrollbalken angezeigt (in der Regel nur ein vertikaler Scrollbalken, aber wenn die Ebene zu schmal ist, auch ein horizontaler Scrollbalken). Um den Scrollbalken nun besonders zu formatieren, setzt man den Scrollbalkencode ein. Allerdings wird auch der Ebenenscrollbalken formatiert, wenn man auf der ganzen Seite einen Scrollbalken angibt.