���������

��� �������� �� ��� ����������

Wenn man danach fragt, was das World Wide Web ausmacht, erhält man viele ver-schiedene Antworten. Wir wetten aber mit Ihnen, dass �bunte Bilder� und �Interakti-vität� in dieser Liste auftauchen. Die bunten Bilder werden manchmal negativ,manchmal auch positiv gesehen. Fakt ist aber, dass die Zeiten des rein textbasierten In-ternets vorbei sind. Und wenn Sie uns fragen, ist das auch gut so. Die Interaktivitätentsteht hauptsächlich durch die Verknüpfungen zwischen den unterschiedlichstenSeiten. Diese werden über Links realisiert.

In diesem Kapitel zeigen wir Ihnen, wie Sie ein Bild einfügen und welche EinstellungenSie vornehmen können. Anschließend verlinken wir die Ausgangsdatei mit einer an-deren Seite und unterscheiden verschiedene Arten von Links. Zum Schluss folgt einzweites Arbeitsbeispiel, bei dem ein Hintergrundbild in die Seite eingebunden wird.

������������ �������

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 fol-gende 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 derFestplatte (z.B. c:\werkstatt).

� Entfernen Sie den Schreibschutz von der HTML-Datei (siehe Einleitung), damitSie sie bearbeiten können.

Das eigene Web mit HTML, CSS und JavaScriptISBN 3-8272-6306-9

��

Mit Bildern und Links arbeiten

� Ö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 diesemFall, 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. Bevorwir damit beginnen, noch einige Grundlagen zuDateiformaten. Die beiden gängigstenDateiformate für das Web sind JPEG und GIF. JPEG unterstützt 16,7 Millionen Far-ben, also das komplette RGB-Spektrum, und ist deshalb besonders gut für Fotos ge-eignet. Allerdings komprimiert es verlustbehaftet, das heißt, der Algorithmus, der dasBild verkleinert, entfernt auch Bilddetails. GIF unterstützt nur eine Farbpalette von256 Farben, komprimiert dafür verlustfrei, unterstützt Transparenz und man kanndamit sogar Animationen realisieren. GIF wird hauptsächlich für flächige Grafiken,Schaltflächen und Ähnliches verwendet. Um eine GIF-Datei einzubinden, müssen Siehinter an Dateinamen nur .gif anfügen. Ein drittes Format ist PNG. Es komprimiertverlustfrei und hat eine Variante mit 256 Farben oder weniger (PNG-2 mit 2 Farben,

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 einfachmit der Dateiendung .png ein.

�����������

In diesem Abschnitt ändern wir zuerst die Größe des Bildes. Um es gleich vorauszu-schicken: Eine solche Größenänderung sollten Sie normalerweise im Grafikprogrammvornehmen, da es Bilder besser neu berechnet als der Browser dies kann.Warummussdas Bild bei einer Größenänderung überhaupt neu berechnet werden? Eine Bilddateibesteht aus einzelnen Bildpunkten. Auf dem Bildschirm entspricht ein Bildpunkt ei-nem Pixel. Erhöht man nun die Größe, muss man auch die Zahl der Bildpunkte anhe-ben. Diese Bildpunkte kommen natürlich nicht einfach aus dem Nichts, sondernmüssen neu berechnet werden.

Das Ausgangsbild in unserem Beispiel ist 210 Pixel hoch und 200 Pixel breit. Im Fol-genden zeigen wir Ihnen schrittweise, wie Sie die Bildgröße ändern.

� Wechseln Sie im Editor in das <img>-Tag nach dem src-Attribut.

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.

��

Mit Bildern und Links arbeiten

Das Attribut height gibt die Höhe des Bildes an.

� Es gibt mehrereMöglichkeiten, die Bildhöhe anzugeben. Sie können entwedereinen Wert in Pixel (ohne Maßeinheit) oder einen Prozentwert (%)angeben. DerProzentwert wird immer abhängig von der Fenstergröße berechnet. In unseremBeispiel 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, dassdie Breite noch in Originalgröße dargestellt wird, das Bild also verzerrt ist. Dem istaber nicht so. Alle Browser skalieren die Breite proportional mit der Höhe. Theore-tisch würde also eine Angabe ausreichen. Dies ist jedoch sehr unsauber, deshalb fügenwir in den nächsten Schritten auch die Breite hinzu.

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.

��

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önaussieht. Noch schlimmer wird es, wenn Sie das Bild verzerren. Wir haben im folgen-den Beispiel die Breite auf die Originalgröße 200 Pixel reduziert und die Höhe auf 420Pixel belassen.

Ein verzerrtes Bild

Bildnamen und Alternativtext

��

����������������������������

Einen Namen benötigt das Bild, um beispielsweise per JavaScript aufrufbar zu sein.Der Alternativtext wird angezeigt, wenn der Nutzer mit derMaus über die Grafik fährtoder die Grafik nicht im Browser angezeigt wird.

Im Folgenden zeigen wir Ihnen schrittweise, wie Sie einen Namen und einen Alterna-tivtext vergeben:

Wechseln Sie in das <img>-Tag und fügen Sie das Attribut name ein. Als Wert vergebenSie den Namen �Erde�.

Der Name wurde eingefügt,

Im nächsten Schritt folgt der Alternativtext. Das Attribut hierfür ist alt. Als Wert ge-ben Sie einen möglichst sinnvollen Text ein. Wir haben �Die Erde� als sprechendenText gewählt.

Der Alternativtext wurde eingefügt.

��

Mit Bildern und Links arbeiten

Der Alternativtext wird angezeigt.

���� �������������!�"#��

Der Beschreibungstext rechts neben dem Bild kann am Bild ausgerichtet werden. Hiergibt es allerdings eine Einschränkung. Der Text kann nur eine Zeile hoch sein, höhererText wird automatisch unter dem Bild angezeigt. Wollen Sie mehr Text neben demBild ausrichten, so sollten Sie eine Tabelle zum Anordnen verwenden.

Nachfolgend zeigen wir Ihnen, wie Sie mit dem Attribut align den Text am Bild aus-richten können.

���������

Sie sollten immer einen Alternativtext anbieten, da manche Nutzersurfen, ohne sich Grafiken anzeigen zu lassen. Außerdem erscheint derText schon, bevor das Bild geladen ist.

Text am Bild ausrichten

�

Fügen Sie in das <img>-Tag das Attribut align ein. Es richtet nicht das Bild selbst, son-dern 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 verwendenwir 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 zusammen-gefasst.

Werte für align Beschreibung

absbottom (nur NN ab 3.0) Richtet den Text an der Unterkante aus. BeiText mit verschiedenen Schriftgrößen gilt diekleinste 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.

��

Mit Bildern und Links arbeiten

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, wer-den Sie bemerken, dass zwischen Bild und Text kein Abstand ist. Dies sieht nicht sehrgut 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 eineAngabe in Pixeln. Für unser Beispiel verwenden wir 10 Pixel.

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 Bildesaus. Als Referenz dient die kleinste Schriftart.

top Richtet den Text an der Oberkante des Bildesaus.

Werte für align Beschreibung

Text am Bild ausrichten

�

Einen horizontalen Abstand von 10 Pixel verwenden.

Wenn Sie das Ergebnis im Browser betrachten, sehen Sie den kleinen Haken des Attri-buts hspace. Es fügt nicht nur nach rechts, wo der Text steht, einen Abstand ein, son-dern auch nach links. In der Praxis verwendet man deshalb meistens eine Tabelle, umText am Bild auszurichten.

Der Abstand wird nach links und nach rechts eingefügt .

�

Mit Bildern und Links arbeiten

������������ �������

Als Nächstes wollen wir den Text und anschließend die Grafik unserer Beispieldateimit einem Link versehen. Damit ein Link, also ein Verweis, auf eine andere Datei über-haupt Sinn macht, benötigen Sie natürlich diese Datei. Mit folgenden Schritten holenSie 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), damitSie 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 anhandder Datei bild.html, wie Sie einen Link setzen und welche Arten von Links es gibt.

��$�%��������&��'��(!

Man unterscheidet drei Arten von Links:

■ Relative Links verweisen auf eine Datei relativ zur Position im Ordnersystem derDatei, 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ächst-höhere Ordnerebene. In Abbildung 3.17 haben wir Ihnen dies anhand eines Bei-spiels illustriert. Nehmen wir an, die Datei, aus der Sie verlinken, befindet sich imOrdner link. Die Datei, auf die Sie linken wollen, liegt im Ordner ziel. Da der Ziel-ordner auf der gleichen Ebene wie der Quellordner liegt, müssen Sie zuerst eineEbene höher, also im Link, ../ eintragen. Anschließend wechseln Sie wieder eine

���������

Das Gegenstück zum Attribut hspace ist vspace. Es sorgt für den verti-kalen Abstand, also den Abstand nach oben und unten.

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 http://www.mut.de.

■ 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 An-ker gibt es kleine Unterschiede. Im Folgenden beschreiben wir, wie Sie einen Link zu-weisen. Anschließend erläutern wir, wie ein Anker gesetzt wird.

'��(�&�)�!�

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:

� Jede Art von Link verwendet das <a>-Tag. Deshalb müssen Sie das Wort �Erde�in <a> und </a> einschließen.

Die <a>-Tags wurden eingefügt.

� Nun muss das Ziel des Links angegeben werden. Dazu dient das href-Attribut im<a>-Tag.

���������

Absolute Links dürfen auch abgekürzt verwendet werden, also bei-spielsweise nur das Verzeichnis ab einer bestimmten Stelle, z.B. /werk-statt/ziel. Für Protokoll (http) und Domainangaben (www.mut.de)werden die Daten der Seite verwendet, von der aus verlinkt wird.

�

Mit Bildern und Links arbeiten

Das Attribut href fügt die Zieladresse ein.

� Als Wert folgt der Link. Er kann relativ oder absolut sein. In unserem Beispiel istes ein relativer Link auf die Datei im Verzeichnis. Deshalb reicht der Dateinameziel.html.

Der relative Link auf die Datei ziel.html.

Ein Klick auf den Link öffnet in der Seite die Datei ziel.html.

Grundlagen zu Links

�

��(�������

Als Nächstes wenden wir uns der Datei ziel.html zu. Hier wollen wir den zweiten Ab-satz mit einem Anker versehen. Auf diesen Anker können wir dann anschließend ausder Datei bild.html verweisen.

� Zuerst benötigen wir wieder die beiden Tags <a> und </a>, denn auch ein Ankerwird mit diesen Tags definiert. Der Anker soll um den Text im zweiten Absatzgelegt werden.

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�.

Der Name des Ankers wurde definiert .

� Nun muss in der Datei bild.html der Link auf den Anker eingefügt werden. EinAnker wird immer mit einem Doppelkreuz # begonnen. Für unser Beispiel fügenwir hinter den Link auf die Datei ziel.html den Verweis auf den Anker ein. Dazugeben Sie #anker ein.

�

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 zumAnker gesprungen.

Der Verweis mit dem Anker

Link in einem neuen Fenster öffnen

�

��*�'��(������������+�!�������

Sie können eine Seite, auf die Sie verlinken, in einem neuen Browserfenster öffnen. ImFolgenden zeigen wir Ihnen schrittweise, wie das funktioniert:

� Mit dem Attribut target legen Sie fest, in welchem Fenster der Link geöffnetwird.

Das Attribut target legt fest, in welchem Fenster der Link geöffnet wird .

� Das Attribut target kann verschiedene Werte annehmen, wovon sich zweiallerdings 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 werdenverlassen.

■ 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 daringeöffnet.

Die letzte Option erscheint uns für unser Beispiel am sinnvollsten. Wir vergebeneinfach den Namen fenster.

���������

Sie sehen den Effekt des Ankers nur, wenn das Browserfenster kleingenug ist. Ansonsten müssen Sie einfach mehr Zeilenumbrüche einfü-gen, um die HTML-Seite von ziel.html zu verlängern.

�

Mit Bildern und Links arbeiten

Der Fenstername wurde festgelegt.

Wenn Sie das Ergebnis im Browser testen, wird die aufgerufene Seite in einem neuenFenster geöffnet.

��,�-!"#����+�.���/��!"#����0�!�1��

Links sind im Allgemeinen blau. Das muss natürlich nicht so sein, vielmehr könnenSie die Linkfarbe beliebig ändern. Zum einen können Sie Links wie jeden anderen Textauch formatieren, zum anderen lassen sich auch für jeden Zustand des Links eigeneFarben 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öffnetund ist im Cache des Browsers.

Im folgenden Beispiel ändern wir die Farben für die Zustände der Links.

� Alle drei Zustände ändern Sie für die gesamte HTML-Seite im <body>-Tag. DieFarbe des normalen Links ändern Sie mit dem Attribut link. Für dieses Beispielweisen wir den Wert green zu.

Der normale Link wird grün.

� Mit dem Attribut alink ändern wir die Farbe des aktivierten Links auf blue(blau).

Grafik als Link

Der aktive Link ist blau

� Im letzten Schritt werden bereits besuchte Links mit dem Attribut vlink und demWert red rot eingefärbt.

Bereits besuchte Links sind rot

Wir verzichten hier auf eine Abbildung des Ergebnisses, da die Farben im Druck nichtzu erkennen sind.

��2�%���(���!�'��(

Eine Grafik als Link ist im Prinzip sehr einfach realisierbar. Sie müssen einfach denLink um die Grafik legen. In unserem Beispiel sähe das in der Theorie folgendermaßenaus:

<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 ange-zeigt wird.

���������

Sie können die Linkfarben auch mittels Stylesheets ändern. Dazu gibtes 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.

�

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 be-stimmt die Rahmendicke. Standardmäßig ist ein Rahmen nicht sichtbar, sobald ein Bildaber ein Link ist, wird er eingeblendet. Mit border="0" lässt er sich wieder entfernen.

Der Rahmen wird entfernt.

����

AUFDER Sie finden das komplette Beispiel auf der CD-ROM zum Buch unterdem Namen bild_link.html.

E-Mail-Adressen und Dateien verlinken

���3�4 ���� ��!!����������������(�

Normale Links haben wir in den letzten Abschnitten in aller Ausführlichkeit bespro-chen. Hier sollen nun die Sonderformen zu ihrem Recht kommen. Sie erfahren, wieLinks auf E-Mail-Adressen, Dateien oder FTP-Server gesetzt werden.

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 Mail-Adresse, an die die Mail geschickt wird. Die gängigen Browser öffnen je nachInstallation und Einstellungen den dem Browser beigefügten Mail-Client. Siekönnen diesem Mail-Client noch weitere Daten mitgeben. Diese werden nachdem Fragezeichen eingefügt und durch das kaufmännische Und (&) getrennt:

cc=name2@hoster.de � gibt eine E-Mail-Adresse für eine Carbon Copy derMail an.

bcc=name3@hoster.de � 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.

����

AUFDER

Auf der CD-ROM finden Sie im Ordner code/kap03 die Dateiandere_links.html. Sie enthält jeweils ein Beispiel für alle Arten vonLinks. Öffnen Sie die Datei in Ihrem Lieblingseditor, um sie näher zubetrachten.