Bilder in die Web-Seite einbinden

Bild-Formate

Geeignete Bild-Formate auf Web-Seiten sind .gif und .jpg.
Bei .jpg-Bildern besteht die Möglichkeit, beim Speichern entweder eine hohe oder niedrige Bild-Qualität zu wählen. Meist genügt für das Internet eine geringe bis mittlere Bild-Qualität. Der Vorteil: Die Datei-Grösse der Bilder kann klein gehalten werden, was sich natürlich beim Betrachten Ihrer Web-Seite positiv auswirkt. Es gilt zu bedenken, dass die Bilder über das Netz zum Betrachter übertragen werden. Was auf dem lokalen Computer sehr schnell auf dem Bildschirm erscheint, dauert im Internet eben etwas länger.

Schreibweise

Ohne Angabe von Grösse und Ausrichtung wird ein Bild in seiner vollen Grösse angezeigt.

Das Einbinden des Pinguin-Logos erfordert folgenden Code:

<img src="pic/pinguin1.gif">

Pinguin-Zeichnung

Attribute

Obwohl hier das Pinguin-Bild verkleinert dargestellt wird, braucht es den gleichen Speicherplatz, wie das grosse. Hier spielt das keine Rolle, das Bild wurde ja bereits einmal übertragen. Achten Sie aber sonst darauf, dass Sie die Bilder möglichst in der Originalgrösse darstellen können.

Vermutlich haben Sie es bereits selber herausgefunden, denn auf jeder Seite dieses Projektes ist ja das Logo vorhanden. Hier die Schreibweise des Codes:

<img src="pic/pinguin1.gif" alt="Pinguin-Logo" height=177 width=142 
align="left" hspace="5" vspace="5" border="1">

Die Attribute

Um nur das Bild anzuzeigen, würde der minimale Code
<img src="pic/pinguin1.gif"> genügen.

Das img src bedeutet image source. Das Bild befindet sich im Ordner pic und hat den Namen pinguin1.gif. Die Attribute sind freiwillig. Das Attribut alt gibt an, was der Betrachter sieht, wenn das Bild einmal nicht angezeigt werden kann, oder wenn der Betrachter mit der Maus auf dem Bild verweilt. Mit height und width wird die Anzeige-Grösse festgelegt. Die drei Attribute align, hspace und vspace sind für diese Anzeige veranwortlich: Das Bild ist links, der Text fliesst rechts in einem Abstand von 10 Pixeln am Bild vorbei und unten im Abstand von 10 Pixeln weiter. Zum Schluss ist mit border ein Rahmen um das Bild gesetzt, damit Sie die Fläche des Bildes erkennen.

Fremde Bilder

Sie können auch Bilder, die sich auf einem anderen Server befinden, auf Ihrer Homepage einbinden. Die Schreibweise ist gleich wie bei den externen Links.

Dieses Bild befindet sich bei meinem anderen Provider, irgendwo anders auf der Welt:

<img src="http://potweb.thenet.ch/private015/frage_02.jpg"> 
alt="Ein Bild von meiner privaten Homepage"

Ein Bild von meiner
privaten Homepage

Bild als Link

Beliebt sind auch die Bilder, die mit einem Link verbunden sind.

Klicken Sie auf einen Pinguin, dann gelangen Sie zur Index-Seite. Die Schreibweise des Codes sehen Sie hier:

<a href="index.html"><img src="pic/pinguin1.gif" alt="Link zur Index-Seite" width=76 height=94 border="1"></A>

Zurück zur Startseite

Was liegt näher, als auf allen Seiten in diesem Projekt die Pinguin-Logos mit dem "Zurück zur Startseite" Links zu versehen. Bei einer solchen Arbeit kommt ein guter Web-Editor wirklich zum Einsatz. Im Web-Editor "Web-Edit" lassen sich so viele Dateien öffnen, wie Sie editieren wollen. Mit der Funktion "suchen und ersetzen" können die Logos praktisch in einem Arbeitsgang geändert werden.

Zurück zur Startseite