Nachdem wir in Teil 3 Verweise (auf der Seite, im Projekt, weltweit und als eMail-Verweis) kennengelernt haben, soll heute noch ergänzend gezeigt werden, wie der Linktext die Farbe ändern kann, je nachdem, welchen Status er hat. Dies geschieht, da es ja die ganze Seite betrifft, direkt im <body>-Tag - und zwar wie folgt: <body bgcolor="red" link="white" vlink="gold" alink="silver"> Was bedeutet nun was? Die Seite hat einen roten Hintergrund, Links sind weiß, besuchte Links sind goldfarben (vlink = visited link) und aktive Links sind silberfarben (alink = active link). Auch hier sind wieder englische Farbangaben oder RGB-Werte mit # möglich. Die RGB-Werte sind in jedem guten Bildbearbeitungsprogramm in der Farbskala zu ermitteln. Bereits mehrfach habe ich erwähnt, daß Fotos/Bilder oder Grafiken an bestimmten Stellen eingefügt werden können. Dies natürlich in erster Linie aus gestalterischen und auflockernden Aspekten, die Fotos/Bilder können aber auch im Laufband oder als anklickbarer Verweis (Link) erscheinen. Wie wird nun ein Bild als Befehl eingegeben? Der Bildbefehl ist der <img>-Tag (image), der ebenfalls nicht beendet wird, denn ein Bild ist ein in sich geschlossenes Gebilde. Ein konkretes Bild sieht z. B. so aus: <img src="bild.jpg" width="300" height="200" border="0" alt="kurze Bildbeschreibung"> Es bedeuten: 'src' bedeutet die Quelle, also den Dateinamen. Wie schon erwähnt, am sinnvollsten .jpg oder .gif-Dateien (alles klein schreiben), als gängigste Bildformate im Internet. 'width' ist die Bildbreite, 'height' die Höhe des Bildes. 'alt' zeigt den alternativen Text und ist hilfreich, solange das Bild noch nicht geladen ist oder für denjenigen, der sich Bilder nicht anzeigen lässt. 'border' bedeutet, daß ein Bildrand - in diesem Fall mit 0 keiner - definiert ist. Aber Achtung: Bei den Angaben zur Breite und Höhe eines Bildes werden häufig Fehler gemacht, die zu langen Ladezeiten führen. Warum? Nun: Nehmen wir ein großes Bild in 800 x 600 Pixel, welches aber nicht so groß dargestellt werden soll. Gibt man jetzt proportional verkleinert als width="240" und als height="180" ein, dann wird das Bild auch nur in dieser beabsichtigten Größe gezeigt. Aber: Das Datenvolumen ist immer noch das des großen Bildes (800 x 600), folglich würde das Bild relativ lange laden, was bei vielen Bildern auf der Seite nicht nur nervig ist sondern unter Umständen auch zum Verlassen der Seite veranlasst. Das Bild sollte zuvor also in einem Bildbearbeitungsprogramm auf die wirkliche Größe verkleinert werden (hier 240 x 180), damit das schnelle Laden gewährleistet ist. Die Daten sind dann sicherlich nur noch 20 - 30% des ursprünglichen Bildes. Man sollte jedoch einen neuen Dateinamen für das kleine Bild vergeben, damit man - zur Sicherheit und für mögliche weitere Bearbeitungen - das Originalbild auch weiterhin zur Verfügung hat. Denn aus dem kleinen Bild lässt sich kein großes mehr erstellen! Beispiel: Originalbild = foto1.jpg (in 800 x 600) verkleinertes Bild speichern als = foto2.jpg (in 240 x 180) Es existieren also sowohl das Original als auch das benötigte verkleinerte Bild. Will man jetzt ein weiteres - drittes - Bild in 400 x 300 erstellen, dann nimmt man wieder das Original und bringt es von 800 x 600 auf 400 x 300 Pixel. Dies speichert man unter = foto3.jpg (in 400 x 300) ab und hat keine Qualitätsprobleme. Diese Vorgehensweise ist sehr wichtig und sollte Grundlage jedes Webprojektes sein. Also Bilder nicht künstlich über 'width' und 'height' verkleinern, sondern wirklich kleinere Bilder (im Bildbearbeitungsprogramm) erstellen! Der <img>-Tag kann noch mit der Ausrichtung 'align' erweitert werden, wodurch ein Bild links, rechts oder zentriert plaziert werden kann: <img src="foto.jpg" align="left"><img src="foto.jpg" align="right"><img src="foto.jpg" align="center"> Bild als Verweis (Link): <a href="datei.htm"><img src="foto.jpg" border="0"></a> Man klickt auf das Foto und springt auf die angegebene Zielseite 'datei.htm'. Wobei natürlich in den Tags alle erwähnten Attribute auftauchen können und auch sollen. Bild im Laufband: <marquee><img src="foto.jpg"></marquee> Das Foto läuft über den Bildschirm - auch hier wieder alle notwendigen Attribute in den Tags integrieren. Dann möchte ich nochmal den wesentlichen Aufbau einer Tabelle darstellen, mit der sich eine Seite recht komfortabel gestalten lässt. Tabelle mit 3 Zeilen <tr> und 3 Spalten <td>: Feld-Nummern - zum besseren Verständnis: <br />1 2 3<br />4 5 6<br />7 8 9<br /><br /><table><br /><br /><tr><br /><td><br />Inhalt Feld 1<br /></td><br /><td><br />Inhalt Feld 2<br /></td><br /><td><br />Inhalt Feld 3<br /></td><br /></tr><br /><br /><tr><br /><td><br />Inhalt Feld 4<br /></td><br /><td><br />Inhalt Feld 5<br /></td><br /><td><br />Inhalt Feld 6<br /></td><br /></tr><br /><br /><tr><br /><td><br />Inhalt Feld 7<br /></td><br /><td><br />Inhalt Feld 8<br /></td><br /><td><br />Inhalt Feld 9<br /></td><br /></tr><br /><br /></table><br /><br />Die Tabelle mit 3 Zeilen (tr = table row) und 3 Spalten (td = table data) hat somit 9 Felder, die individuell mit Text oder Bildern gefüllt werden können. Der <table>-Tag selbst kann mit 'align' (Ausrichtung), 'width' (Breite und 'height' (Höhe) definiert werden, wobei sich die Tabelle vergrößert, wenn die Datenmengen größer sind, als es die Vorgaben vorgesehen haben. Dies ist aber dann Erfahrungssache und würde den Rahmen dieser komprimierten Einführung bei weitem sprengen, wenn alle Feinheiten beschrieben werden sollten. <table align="center" width="600" height="500" border="0">Rest wie oben ... Die zentrierte Tabelle ist dann insgesamt 600 Pixel breit und 500 Pixel hoch und hat (border="0") keinen sichtbaren Rahmen. Soll der Rahmen erscheinen, dann einfach - je nach gewünschter Stärke - den border-Wert ganzzahlig erhöhen. Auch die einzelnen <td>-Tags können individuell gestaltet werden. Tabelle mit 1 Zeile und 3 Spalten: Felder<br />1 2 3<br /><br /><table align="center" width="600" height="500" border="0"><br /><br /><tr><br /><td width="300"><br />Inhalt 1<br /></td><br /><td width="200"><br />Inhalt 2<br /></td><br /><td width="100"><br />Inhalt 3<br /></td><br /></tr><br /><br /></table><br /><br /> Tabellen sind recht komplexe, aber nützliche Gebilde, mit deren Gestaltung man einfach etwas probieren muss. Es werden dann schnell Erfahrungen gesammelt und das Ganze kann als gutes Gestaltungselement verwandt werden. Auch hier gilt: learning by doing! Nur bitte immer dran denken: Jede Tabelle muss geschlossen werden </table>, auch jede Zeile muss beendet sein </tr> und jedes Datenfeld auch </td>. Denn sonst wird es im Chaos enden. Hier ist viel Disziplin beim Schreiben angesagt. So, das waren wieder viele, viele Details zur Seitengestaltung. Und viele Hinweise auf deren richtige Handhabung. Jetzt gilt es: Testbasteln ohne Ende, um zu verstehen, was so passiert. Viel Spaß dabei! Das wesentliche Rüstzeug ist nun schon mal vorhanden (Teil 1 bis Teil 4 der Einführung). Es wird dann nochmal kurz auf frames und framesets einzugehen sein - für den, der auch diese Elemente einarbeiten möchte.
