Workshop Mit Bildern und Links arbeiten. 3.1 Auf der CD-ROM... Das eigene Web mit HTML, CSS und JavaScript ISBN

Transkript

1 Workshop 3 Das eigene Web mit HTML, CSS und JavaScript ISBN 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: Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap3. Kopieren Sie die Datei bild.html und das Bild erde.jpg in Ihr Verzeichnis auf der Festplatte (z.b. c:\werkstatt). Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können.

2 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 <img>-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

3 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 GIF- Formats 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 <img>-tag nach dem src-attribut. 2 Wo der Cursor steht, muss ein neues Attribut eingefügt werden. Fügen Sie das Attribut height ein. Es enthält die Höhe des Bildes. 81

4 Mit Bildern und Links arbeiten 3 Das Attribut height gibt die Höhe des Bildes an. 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

5 Bildgröße Die Breite wird automatisch mit skaliert. Für die Breite muss das Attribut width in das <img>-tag eingefügt werden. Die Breite wird mit width angegeben. Geben Sie für die Breite einen Wert von 400 Pixel an. 83

6 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

7 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 <img>-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

8 Mit Bildern und Links arbeiten PRO ITIPP 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

9 Text am Bild ausrichten Fügen Sie in das <img>-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 absbottom (nur NN ab 3.0) absmiddle (nur NN ab 3.0) baseline (nur NN ab 3.0) Beschreibung Richtet den Text an der Unterkante aus. Bei Text mit verschiedenen Schriftgrößen gilt die kleinste als Referenz. Richtet den Text an der Mitte des Bildes aus. Referenz ist die kleinste Schriftart im Text. Funktioniert wie bottom. 87

10 Mit Bildern und Links arbeiten Werte für align bottom middle texttop (nur NN ab 3.0) top Beschreibung Richtet Text an der Unterkante des Bildes aus. Dies ist die Standardeinstellung. Richtet Text an der Bildmitte aus. Richtet den Text an der Oberkante des Bildes aus. Als Referenz dient die kleinste Schriftart. 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 <img>-tag ein. Vergeben Sie als Wert eine Angabe in Pixeln. Für unser Beispiel verwenden wir 10 Pixel. 88

11 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

12 Mit Bildern und Links arbeiten PRO ITIPP 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: Wechseln Sie auf der CD-ROM in das Verzeichnis code\kap3. Kopieren Sie die Datei ziel.html in Ihr Verzeichnis auf der Festplatte (z.b. c:\werkstatt). Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damit Sie sie bearbeiten können. Öffnen Sie ziel.html in Ihrem bevorzugten Editor. 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

13 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 Absolute Links sind komplette Internetadressen wie PRO ITIPP 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 ( 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 <a>-tag. Deshalb müssen Sie das Wort Erde in <a> und </a> einschließen. 2 Die <a>-tags wurden eingefügt. Nun muss das Ziel des Links angegeben werden. Dazu dient das href-attribut im <a>-tag. 91

14 Mit Bildern und Links arbeiten 3 Das Attribut href fügt die Zieladresse ein. 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

15 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 <a> und </a>, denn auch ein Anker wird mit diesen Tags definiert. Der Anker soll um den Text im zweiten Absatz gelegt werden. 2 Die <a>-tags rund um den Bereich, der als Anker dienen soll Als Nächstes muss mit dem Attribut name der Name des Ankers definiert werden. Wir verwenden als Name anker. 3 Der Name des Ankers wurde definiert. 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

16 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

17 Link in einem neuen Fenster öffnen PRO ITIPP 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 enster ö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. 2 Das Attribut target legt fest, in welchem Fenster der Link geöffnet wird. 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

18 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 arben 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 <body>-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 Mit dem Attribut alink ändern wir die Farbe des aktivierten Links auf blue (blau). 96

19 Grafik als Link Der aktive Link ist blau 3 Im letzten Schritt werden bereits besuchte Links mit dem Attributvlink und dem Wert red rot eingefärbt. Bereits besuchte Links sind rot Wir verzichten hier auf eine Abbildung des Ergebnisses, da die Farben im Druck nicht zu erkennen sind. PRO ITIPP 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: <a href="ziel.html#anker" target="fenster"><img src="erde.jpg" height="420" width="400" name="erde" alt="die Erde" align="middle" hspace="10" /></a> Hier ergibt aber das Problem, dass um das Bild herum automatisch ein Rahmen angezeigt wird. 97

20 Mit Bildern und Links arbeiten Ein Rahmen um das Bild Dieses Problem lässt sich sehr einfach lösen: Wechseln Sie in das <img>-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. Der Rahmen wird entfernt. AUF DER CD-ROM Sie finden das komplette Beispiel auf der CD-ROM zum Buch unter dem Namen bild_link.html. 98

21 -Adressen und Dateien verlinken Adressen und Dateien verlinken 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 -Adressen, Dateien oder FTP-Server gesetzt werden. AUF DER CD-ROM 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 -Link wird immer mit mailto: begonnen. Danach folgt die Mail- Adresse, 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: gibt eine -Adresse für eine Carbon Copy der Mail an. gibt eine -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 vor. 99