Diesen Tipp in Originalversion zeigen.

4. Bilder und Links

Mit Tabellen können Sie bereits gut umgehen. Aber wie sieht es mit Bildern aus?
Bilder sind mittlerweile ein wichtiger Bestandteil des Internets geworden, so wird es durch Bilder beispielsweise möglich Informationen zu vermitteln (z. B. das Aussehen einer Person), die mit reinem Text nicht möglich wären.
Fangen wir zunächst wieder mit der HTML-Grundstruktur an. Mit dem <img> - Tag ("img" ist die Abkürzung für engl. "image", dt. Bild) lassen sich Bilder anzeigen.
Dabei gibt das Attribut "src" ("src" ist die Abkürzung für engl. "source", dt. Quelle) im <img>-Tag die Adresse bzw. Pfadangabe des Bildes an (z. B. "test.jpg", falls sich das Bild in demselben Pfad befindet wie die HTML-Datei).
Der <img> - Tag ist der erste Tag, den Sie kennen, welcher NICHT geschlossen werden muss.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<img src="http://www.computer-tipps.net/test.jpg">
</body>
</html>
  > Listing 4.1: Eingebundenes Bild (Online-Beispiel / Download)

Das war es vorerst eigentlich auch schon mit den Bildern.
Aber nun gibt es auch noch Links (Verweise zu anderen Seiten), mit denen die verschiedenen Internetseiten miteinander verknüpft sind.
Somit können Sie auf Ihrer Seite z. B. auf andere Seiten, die Ihnen gut gefallen, linken.
Links werden mit dem <a> - Tag definiert, dabei gibt das Attribut "href" die Zieladresse, wohin der Link führen soll, an.
Der Linktext, der angezeigt werden soll, kommt zwischen <a> und </a>.
Falls Sie das Ziel in einem neuen Fenster öffnen wollen, so müssen Sie noch das Attribut "target" mit dem Inhalt "_blank" hinzufügen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<a href="http://www.computer-tipps.net/" target="_blank">Testlink</a>
</body>
</html>
  > Listing 4.2: Link (Online-Beispiel / Download)

Möchten Sie nun beispielsweise ein Bild verlinken, so ist dies auch kein Problem. Sie fügen einfach den Code des Bildes zwischen <a>...</a> ein. Damit ist das Bild sozusagen der "Linktext".
Der Internet Explorer (und manch andere Browser), der von den meisten Surfern genutzt wird, fügt dann jedoch einen Rahmen um das Bild ein.
Um dies zu verhindern müssen Sie dem Attribut "border" mit dem Wert "0" den Rahmen explizit deaktivieren.
Der Code würde dann folgendermaßen aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
<a href="http://www.computer-tipps.net/" target="_blank">
<img src="http://www.computer-tipps.net/test.jpg" border="0">
</a>
</body>
</html>
  > Listing 4.3: Verlinktes Bild (Online-Beispiel / Download)

ZusammengefasstBilder werden mit dem <img> - Tag eingeleitet, welcher NICHT geschlossen wird.
Die Pfadangabe bzw. URL des Bildes wird mit dem Attribut "src" (Abk. für "source") angegeben.
Links werden mit dem <a> - Tag definiert, der Linktext kommt zwischen <a> und </a>.
Die Zielurl kommt in das Attribut "href", falls sich das Ziel im neuen Fenster öffnen soll, muss dem Attribut "target" den Wert "_blank" zugewiesen werden.
Falls ein Bild verlinkt werden soll, kommt dies ganz normal zwischen <a> und </a>, der Rahmen muss im <img> - Tag jedoch explizit deaktiviert werden, indem dem Attribut "border" der Wert "0" gegeben wird.

Weiter zu Teil 5 (Übungen [1]) > (as)


Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign165.html