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)

Weitere Funktionen
Zur Artikel-Übersicht
Diesen Artikel ausdrucken
Haben Sie noch Fragen? Fragen Sie auf computer-portal.net.
Bewertung
Dieser Tipp wurde für gut mit 7 von 10 Punkten [ 26 Stimme(n) ] befunden.

Bewertung in Punkten [10 = genial, 1 = sehr schlecht]:      
Kommentare
Bisherige Kommentare ansehen:
 
pnussiich blick da nicht durch.

 
angel14ich check das nich !!!!>:o>:o>:o

 
derekxSuper Artikel--aber nur für leute die sowieso schon wissen wies geht !!! Ich habe alles abgekupfert und trotzdem keinen Link zustande gekriegt !!!

 
commanderkaj>:o>:o>:o>:o>:o>:oKrieg ich nicht hin!!!!!!!!

 
hoelIch hab a problem!?!?!?!?!?!!?!?!?!?!?!?!?!

 
schoehaha ihr noobs is doch esay

 
blade26ich blick auch net durch sorry

 
keanu5>:o


Einen eigenen Kommentar verfassen:
Sie müssen sich erst registrieren um einen Kommentar verfassen zu können.

Bestellen
Abbestellen
    
    
    Weitere Informationen
  Welchen Browser nutzen Sie?
Internet Explorer
Mozilla
Mozilla Firefox
Netscape
Opera
Safari
Sonstige
    Ergebnis ansehen
    

Gif Bilder