23
Erstellen Sie Ihren ersten Link
Optionen zur Ausrichtung und Positionierung von Grafiken
Neben Links tragen auch Grafiken dazu bei, eine WWW-Seite interessanter und informativer zu gestalten. Mit HTML können die verschiedensten Grafiken und Bilder in eine Web-Seite eingebunden werden. Dieses Kapitel vermittelt Ihnen die Grundlagen der Dateiformate, die für Grafiken im WWW genutzt werden. Wir werden auch die speziellen Markierungen kennenlernen, um Größe und Position mit dem Netscape Communicator zu bestimmen.
Wenn Sie den URL eines Dokuments kennen, dann können Sie auch einen Hyperlink zu diesem Dokument erstellen. Durch die weltweite Verknüpfung von Dateien und Dokumenten webt man mit den Links ein »Netz«, das dem World Wide Web letztendlich auch seinen Namen gab.
Verknüpfungen
zu HTML-Seiten oder Ressourcen im WWW werden auch als Link oder Hyperlink
oder Verknüpfung bezeichnet. Wir verwenden in diesem Kapitel diese
Bezeichnung abwechselnd.Abbildung 23.1: In der Regel werden Links durch ein unterstrichenes Textelement dargestellt.
| siehe Abbildung |
Nicht immer werden
Hypertext-Links blau dargestellt, denn durch den Einsatz verschiedener
HTML-Charakteristiken oder Netscape-spezifischer Einstellungen können
Links in verschiedenen Varianten auftreten. Grundsätzlich werden Hyperlink-Texte
jedoch immer farblich vom restlichen Dokument abgehoben.Grundsätzlich gibt es keine technischen Einschränkungen, die die Anzahl der in einem Dokument hinterlegten Links begrenzen würden. Man sollte jedoch darauf achten, daß man nicht zu viele Hypertext-Links in einer einzigen Seite hinterlegt mehr heißt nicht unbedingt besser.
Die wichtigsten Links, die Sie für die Besucher Ihrer Seite integrieren sollten, sind Verknüpfungen zu anderen Seiten, auf denen ähnliche Informationen wie bei Ihnen zu finden sind. Vergessen Sie dabei nicht, daß externe Links (außerhalb Ihres Bereichs) die Benutzer in einen anderen Bereich führen und zur Folge haben, daß Ihr Bereich verlassen wird. Dadurch kann der Benutzer nur mehr durch die Zurück-Schaltfläche im Browser in Ihren Bereich zurückgelangen. Für den Anwender wird es sehr zeitaufwendig, sich alle von Ihnen angebotenen Verknüpfungen anzusehen. Verweisen Sie deshalb nur auf solche Adressen, die Sie selbst besucht haben und für gut befinden.
Protokoll://Rechnername/Pfad/und/Dateiname
Um in einem HTML-Dokument einen Link zu integrieren, führen Sie bitte die folgenden Schritte aus:
<A HREF=" http://www.altavista.com "></A>
<A HREF=" http://www.altavista.com ">Link zur Suchmaschine Alta Vista </A>
Falls Sie auf Dokumente verweisen möchten, die im gleichen Internet-Bereich liegen, stellt Ihnen HTML verschiedene Adressierungsmöglichkeiten zur Verfügung. Die Art des Links, mit dem in diesem Fall gearbeitet wird, bezeichnet man als relative Adresse. Bei diesem Adressentyp wird nicht der gesamte URL, sondern nur der Teil der Adresse angegeben, die vom Originaldokument zur neuen WWW-Seite führt. Wenn z. B. die HTML-Datei MORE-INFO.HTML im gleichen Verzeichnis wie das Originaldokument liegt, setzen Sie nur den Dateinamen als URL ein:
<A HREF="moreinfo.html">Link zu weiteren Informationen</A>Wenn Sie alle HTML-Dateien Ihres Bereichs innerhalb eines Verzeichnisses halten, könnte dies mit zunehmender Zahl an Dateien immer unübersichtlicher werden und zu Verwirrung führen. Aus diesem Grund verwaltet man Dateien, logisch eingeteilt, in Unterverzeichnissen. Natürlich können Sie mit diesem Verfahren auch auf Dateien verweisen, die nicht im selben Unterverzeichnis liegen. Bevor diese Möglichkeit beschrieben wird, noch ein paar Worte zum Thema Verzeichnisse.
Unix-Rechner (meistens die Server im WWW) verwenden den Schrägstrich (/) um ein Verzeichnis zu kennzeichnen. Um sich tiefer in eine Verzeichnisstruktur zu begeben, muß der Schrägstrich / zwischen den Namen der Unterverzeichnisse verwendet werden, wie auch zwischen Unterverzeichnis und Dateinamen.
Um z. B. ein Link auf die Datei EVENMORE.HTML zu setzen, die im Unterverzeichnis INFORMATION liegt, geben Sie bitte folgendes an:
<A HREF="INFORMATION/evenmore.html">Link zu noch mehr Informationen</A>Nach diesem Prinzip können Sie für alle HTML-Dokumente, die auf demselben Rechner liegen, einen Link definieren. Wenn Sie die Zeichenfolge ../ verwenden, können Sie damit ein Verzeichnis ansprechen, daß in der Verzeichnisstruktur eine Ebene höher liegt.
<A HREF="../themost.html">Link zu noch viel mehr Informationen</A>Dieses Beispiel verbindet zu einer Datei mit dem Namen themost.html, die sich ein Verzeichnis höher als die aktuelle Ebene befindet.
Grundsätzlich sollten Sie immer relative Links verwenden, wenn diese auf Dateien innerhalb Ihres Bereichs verweisen. Denn relative Links haben die folgenden Vorteile:
Die meisten Dokumente
befinden sich auf Servern, die zwischen Groß- und Kleinschreibung
unterscheiden. Geben Sie deshalb den URL stets so ein, wie er Ihnen ursprünglich
mitgeteilt wurde bzw. so, wie Sie ihn in Netscapes Adreßfenster sehen.Die URLs
http://www.mcp.com/bookshelf/und
http://www.mcp.com/Bookshelf/sind nicht identisch. Die erste Adresse bringt Sie zu der Liste der Online-Bücher, die zweite Adresse (mit dem großen B) wird nicht gefunden.
Ein FTP-URL ist mit einem Standard-URL identisch, nur nutzt erstere das FTP-Protokoll. Um beispielsweise einen URL auf die Datei test.zip auf dem FTP-Server ftp.uni.edu zu definieren, ist folgender Anker erforderlich:
<A HREF="ftp://ftp.uni.edu/test.zip">Ein tolles Shareware-Programm für jeden Einsatz </A>Wenn Sie auf den Text Ein tolles Shareware-Programm für jeden Einsatz klicken, verbindet sich Ihr Browser automatisch mit dem angegebenen FTP-Server und lädt die Datei herunter. Wenn es sich bei der Datei um eine Textdatei handelt, wird diese sofort in einem Netscape-Fenster angezeigt; binäre Dateien werden auf der lokalen Festplatte des Benutzers gespeichert.
Ein FTP-Link
muß nicht zwingend auf eine Datei verweisen, sondern kann den Anwender
auch mit einem Verzeichnis verbinden. Bei dieser Variante wird dem Benutzer
eine Liste der in diesem Verzeichnis verfügbaren Dateien angezeigt.
Die Übertragung einer Datei wird in diesem Fall mit einem Klick auf
eine dieser Dateien aktiviert. Diese Vorgehensweise ist in manchen Fällen
sinnvoller, denn Internet- und Programmdateien tendieren häufig dazu,
Ihre Namen zu ändern. Mit dieser Vorgehensweise ersparen Sie sich
das kontinuierliche Aktualisieren Ihrer HTML-Dokumente, wenn sich Dateinamen
geändert haben. Um zu einem FTP-Verzeichnis zu verbinden, wird wie
folgt nur der Dateiname im URL weggelassen:<A HREF="ftp://ftp.uni.edu/ ">Ein Menge toller Shareware-Programme</A>
Glücklicherweise können Sie zu jedem beliebigen Gopher-Server eine Verbindung herstellen. Gopher-Server arbeiten manchmal mit einer speziellen Port-Nummer und verwenden erweiterte Datei- und Verzeichnisnamen. Nachfolgend ein Beispiel eines Gopher-URLs:
Dieser URL teilt Netscape mit, daß über die Port-Adresse 70 eine Verbindung zum Server gopher.stolaf.edu aufgebaut und Reiseinformationen für Australien abgeholt werden sollen. Um auf die beschriebene Datei zugreifen zu können, müssen Sie in Ihrem HTML-Dokument folgende Angaben hinterlegen:
<A HREF="gopher://gopher.stolaf.edu:70/11 ">Witz der Woche </A>Ein Klick auf den Hypertext-Link Witz der Woche teilt Netscape mit, eine Verbindung zu dem Server gopher.stolaf.edu aufzubauen und dort den Witz der Woche abzuholen.
Die Usenet-URLs funktionieren ein bißchen anders, da es keinen zentralen News-Server gibt. Der URL weist Netscape an, die Verbindung zu einem vordefinierten News-Server aufzubauen und dort die Inhalte der angegebenen Newsgroup zu lesen.
Nachfolgend ein vollständiger HTML-Link auf eine Newsgroup:
<A HREF="news:www.urlaub.bilder">Newsgroups für Ballerman 6-Fans</A>Abbildung 23.2: Newsgroups sind ein weiterer Dienst, der mit dem Communicator genutzt werden kann.
| siehe Abbildung |
Für die Definition eines Mail-URLs benötigen Sie lediglich das Schlüsselwort mailto und die Adresse, die sämtliche Meldungen empfangen soll. Um z. B. einen Link zu 100331.3675@Compuserve.com aufzubauen, geben Sie folgende Definition ein:
<A HREF="mailto:100331.3675@Compuserve.com ">Sample E-mail</A>Wenn der Anwender auf diesen Link klickt, wird das Netscape-Mail-Fenster geöffnet, in das der Benutzer die Nachricht eingeben und sofort verschicken kann (siehe Abbildung 23.3).
Der Text des
Hyperlinks sollte immer die E-Mail-Adresse des Empfängers sein die
gleiche Adresse, die im URL verwendet wird. Dies macht es für jedermann
offensichtlich, daß es sich um einen E-Mail-Link handelt, nicht um
eine Verknüpfung zu einer anderen Seite.Abbildung 23.3: Mit E-Mail-Links können Sie mit dem Netscape Communicator aus einer Web-Seite heraus eine Nachricht verschicken.
| siehe Abbildung |
Neben der Möglichkeit,
die E-Mail-Adresse vorzudefinieren, kann auch das Thema (Betreff) einer
Nachricht festgelegt werden. Sehen Sie sich dazu das folgende Beispiel
an:<A HREF="mailto: 100331.3675@CompuServe.com?subject=Anfrage an den Übersetzer">100331.3675@CompuServe.com</A>Wenn dieser Link angeklickt wird, öffnet Netscape das E-Mail-Fenster, in dem die Adresse des Empfängers und der Betreff bereits eingetragen sind.
Diese Art von Link wird vorwiegend für größere Dateien verwendet. Um eine interne Referenz zu definieren, sind zwei Schritte notwendig: Als erstes legen Sie innerhalb des HTML-Dokuments das benannte Ziel an und dann definieren Sie die zugehörigen Links.
Mammals
<A NAME="Mammals"></A>
<A NAME="Mammals"> <H3>Warmblüter</H3 </A>Nachdem Sie Ihrer Textmarke einen Namen gegeben haben, können Sie mit dem nächsten Schritt fortfahren und einen Index der Links für diese Ziele erstellen.
Im folgenden Beispiel wird auf das im vorstehend verwendeten Beispiel definierte Ziel verwiesen:
<A HREF="#Mammals">Mammals Eine dominante Spezies</A>Diese Links werden im Netscape-Fenster genauso wie Standard-Links zu anderen WWW-Seiten dargestellt in blauer Schrift und unterstrichen.
Prinzipiell können Sie auf jedes benannte Ziel in einem HTML-Dokument im World Wide Web verweisen. Um einen solchen Verweis zu erstellen, verwenden Sie eine Verknüpfung mit einem relativen URL, gefolgt von # und dem Namen des Ankers. Um beispielsweise zu einem Anker mit der Bezeichnung Insekten in einem Dokument im gleichen Verzeichnis zu verweisen, verwenden Sie den folgenden Code:
<A HREF="Lebensformen.html#Insekten"> Mehr Informationen über Insekten</A>Um ein solches Ziel zu finden, müssen Sie sich den Quellcode der betreffenden Seite ansehen. Diese benannten Ziele haben allerdings den Nachteil, daß sie sich ändern können und damit ungültig werden, ohne daß Sie davon informiert werden.
Vergessen Sie
auf keinen Fall das »#«-Zeichen, denn ohne diese Angabe versucht
Netscape, eine Verbindung zu einer anderen Datei dieses Namens aufzubauen.Neben den ästhetischen Gesichtspunkten kann eine Grafik auch eine Funktionalität besitzen. Bilder können als Hypertext-Links zu anderen WWW-Seiten, zur Formatierung der Texte oder als Ersatz einer textbasierten Information dienen.
In den folgenden Abschnitten erfahren Sie, wie Sie Grafiken und Bilder mit HTML in eine Web-Seite einbetten. HTML bietet eine Reihe von Schlüsselworten an, die Ihnen helfen, Ihr WWW-Dokument ästhetisch und funktionell aufzuwerten.
Das GIF-Format eignet sich besonders gut für die folgenden Arten von Grafiken:
Das JPG-Format eignet sich besonders gut für die folgenden Arten von Grafiken:
| siehe Abbildung |
Nach Möglichkeit
sollten Sie auf die Einbindung von .TIF-, .PCX- oder .BMP-Dateien verzichten,
da der Anwender für diese Bilder ein eigenständiges Anzeigeprogramm
benötigt.Ohne die Verwendung spezieller Formatierungsattribute ist es kein Problem, eine Grafik in einer Seite einzubinden. Für das Bild in Abbildung 23.5 wurde folgende Definition verwendet:
<IMG SRC="HASE.GIF">Diese Markierung teilt Netscape mit, daß ein Bild mit dem Namen HASE.GIF (das derzeit im selben Verzeichnis wie die HTML-Datei liegt) an der Position in dem Dokument angezeigt werden soll, an der sich die HTML-Markierung befindet.
Wenn Sie eine Inline-Grafik in ihr integrieren, wird nicht direkt die Grafik in das HTML-Dokument eingebunden. Die Markierung <IMG> wird verwendet, um dem Browser mitzuteilen, wo sich die gewünschte Grafik befindet und wie sie auf der Seite positioniert werden soll. Wenn Sie schon einmal mit einem Layout-Programm gearbeitet haben, in dem Positionierungen für Grafiken verwendet werden, dann können Sie sich sehr leicht vorstellen, wie man bei HTML vorgeht, denn da ist das Prinzip ähnlich.
Wichtig ist an dieser Stelle jedoch vor allem, daß Sie wissen, daß Bilder sich nicht im HTML-Dokument befinden. Natürlich besteht auch die Möglichkeit, auf Grafiken eines anderen Web-Bereichs zu verweisen. Wenn das Bild z. B. auf dem Bereich von web-online.de liegt, sieht die Markierung wie folgt aus:
<IMG SRC="http://www.web-online.de/hase.gif">Findet Netscape diese Markierung, baut der Browser eine Verbindung zu web-online.de auf, lädt das gewünschte Bild und zeigt es danach in Ihrer Seite an.
Der Verweis auf
Bilder, die auf einem anderen Web-Bereich liegen, kann für den Besucher
zu Durchsatzproblemen führen, da der Anwender auf die Übertragung
vom anderen Bereich warten muß. Deshalb sollten Grafiken, wann immer
möglich, auf demselben Internet-Server wie die HTML-Dateien liegen,
in denen die Grafiken genutzt werden.Eine beliebte Variante zur Einbindung von Grafiken in eine HTML-Seite ist die Verwendung sogenannter Thumbnails. Dies sind Grafiken, die die verkleinerte Version des Originalbilds zeigen; da sie viel kleiner sind, nehmen Sie sehr viel weniger Platz ein. Sie sind über einen Link mit dem eigentlichen Bild verbunden. Damit hat der Besucher die Wahl, ggf. die große Version abzuholen oder sich mit der kleinen Abbildung zufriedenzugeben. In Abbildung 23.5 sehen Sie dazu ein Beispiel.
Abbildung 23.5: Daumennagelgroße Miniaturen von Originalbilder sind sehr effizient bei der Nutzung von Bildschirmplatz und Bandbreite.
| siehe Abbildung |
Grafiken können
wie HTML-Dokumente in separaten Verzeichnissen abgelegt werden. Wenn Sie
dazu relative Links verwenden, die wir einige Abschnitte vorher besprachen,
können Sie Netscape veranlassen, die Grafiken aus der Verzeichnishierarchie
über- oder unterhalb des aktuellen Verzeichnisses zu laden. Die Verwendung
relativer Pfadnamen bietet außerdem den Vorteil, daß Sie Ihre
Web-Seiten auf dem eigenen lokalen Rechner testen können.Wenn Sie Grafiken mit der <IMG>-Markierung in Ihre Dokumente einbinden, können Sie auch definieren, wie das Bild auf der Seite dargestellt und formatiert werden soll. Der folgende Abschnitt erklärt die wichtigsten Attribute dieser Markierung, mit denen Sie u.a. Größe und Position der Grafik festlegen können.
Darüber hinaus kann jeder Netscape-Benutzer festlegen, ob die Grafiken in einer Web-Seite dargestellt werden, da manchmal die Übertragungszeit für alle Bilder einfach zu lange ist.
Um auch die Benutzer von nichtgrafischen Browsern zufriedenzustellen, ist es üblich, daß in der <IMG>-Markierung ein alternativer Text hinterlegt wird. Dieser Text wird angezeigt, wenn die angegebene Grafik nicht geladen ist.
Mit ALT="Text" definieren Sie den alternativen Text, der anstelle der Grafik angezeigt werden soll.
In Tabelle 23.1 finden Sie die fünf ALIGN-Attribute, mit denen die Bilder und Texte positioniert werden.
Tabelle 23.1: Ausrichtungsoptionen in HTML
Es erfordert ein wenig Übung, um Bilder innerhalb einer Web-Seite so zu positionieren, wie man es möchte. Abbildung 23.7 hilft Ihnen, sich vorzustellen, wie Abbildungen mit Hilfe der <IMG>-Attribute positioniert werden. Dafür wurde der folgende Code verwendet:
<IMG SRC="hase.gif" ALIGN=LEFT> Ausrichtung links <P><DIV ALIGN=right>Ausrichtung rechts<IMG SRC="hase.gif" HEIGHT=95 WIDTH=120></DIV> <P><IMG SRC="hase.gif" ALIGN=TOP> Ausrichtung oben <P><IMG SRC="hase.gif" ALIGN=CENTER> Ausrichtung mitte <P><IMG SRC="hase.gif" ALIGN=BASELINE> Ausrichtung untenAbbildung 23.6: Durch die besprochenen Ausrichtungsattribute haben HTML-Designer umfangreiche Kontrolle über das Erscheinungsbild einer Grafik.
| siehe Abbildung |
Netscape kann die Angaben über Höhe und Breite innerhalb der <IMG>-Markierung nutzen, wofür die Attribute HIGHT und WIDTH verwendet werden. Um z. B. ein Bild exakt 300 Pixel breit und 150 Pixel hoch darzustellen, übergeben Sie die folgende HTML-Informationen:
<IMG SRC="HASE.GIF" HEIGHT=150 WIDTH=300>Es ist nicht von Belang, in welcher Reihenfolge Sie HEIGHT und WIDTH angeben. Wichtig ist nur, daß beide innerhalb der <IMG>-Markierung verwendet werden.
Durch die Verwendung der Größenangaben wird eine Grafik zwar nicht schneller geladen, doch diese Attribute ermöglichen es Netscape, in der Seite den Platz für die Grafik zu reservieren. Dies vermittelt die Illusion einer schnelleren Übertragung.
Auch diese beiden Schlüsselworte benötigen numerische Werte als Parameter, mit denen die Anzahl der Pixel definiert wird. Normalerweise läßt man zwischen einem Bild und dem angrenzenden Text einen Abstand von mindestens 10 Pixel. Das nachfolgende HTML-Beispiel zeigt deshalb, wie mit HSPACE und VSPACE ein 10 Pixel breiter Rand gesetzt wird:
<IMG SRC="HASE.GIF" VSPACE=10 HSPACE=10>
Durch
die Attribute VSPACE und HSPACE wird
an jeder Seite der Grafik der gewünschte Leerraum hinzugefügt,
nicht nur an den Seiten, an denen Text angeordnet ist.Bei diesem Attribut können Sie die Breite des Randes über einen numerischen Wert zwischen 0 und 10 festlegen. Im folgenden Beispiel wird die Breite des Randes mit 5 angegeben:
<IMG SRC="HASE.GIF" BORDER=5>In Abbildung 23.7 sehen Sie fünf verschiedene Rahmen, deren Breite zwischen 1 und 9 variiert. Die Farbe des Rahmens wird durch die Textfarbe des Dokuments bestimmt.
Abbildung 23.7: Mit dem Attribut BORDER wird ein Rahmen um eine Grafik gezeichnet.
| siehe Abbildung |
Um ein Bild als Link zu definieren, sind zwei Schritte notwendig. Als erstes positionieren Sie die Grafik in der Web-Seite:
<IMG SRC="arrows.gif" ALIGN=LEFT>Anschließend müssen Sie die Parameter für den Hypertext-Link festlegen. Dafür verwenden Sie die </A>-Markierung, die weiter oben bereits ausführlich erklärt wurde.
<A HREF="dir.html"><IMG SRC="arrows.gif" ALIGN=LEFT> </A>Sie können zusätzlich auch einen Text eingeben, so daß sowohl das Bild als auch das Textelement gleichzeitig als Link definiert wird:
<A HREF="dir.html"><IMG SRC="arrows.gif" ALIGN=LEFT> <H2>Wegbeschreibung zu meinem Haus<H2></A>Abbildung 23.8 zeigt, wie man Grafiken als Link zu anderen Web-Seiten einsetzt. Solche Grafiken werden von einem blauen Rand eingefaßt. Mit einem Klick auf ein solches Bild wird der Anwender mit der neuen Seite verbunden.
Abbildung 23.8: Die Flexibilität von HTML ermöglicht, daß Grafiken auch als Links zu anderen WWW-Seiten eingesetzt werden können.
| siehe Abbildung |
Ich verwende
in meinem HTML-Dokument einige Grafiken als Link zu anderen Dokumenten
im WWW, die alle von blauen Rahmen umgeben sind. Ich habe jedoch auch schon
Hyperlink-Grafiken gesehen, die keinen Rahmen haben. Wie funktioniert das?Ganz einfach, setzen Sie das Attribut BORDER Ihrer Grafik einfach auf den Wert 0. Um beispielsweise den Rahmen in dem vorstehenden Beispiel zu deaktivieren, verwendet man den folgenden Code:
<A HREF="dir.html"><IMG SRC="arrows.gif" ALIGN=LEFT BORDER=0> <H2>Wegbeschreibung zu meinem Haus<H2></A>© 1997 Que
