Webseiten mit Grafik

Mitfließende Mini-Bilder

◀   In den Rahmen links ist eine einfache Mini-Webseite mit 2 kleinen Bildern eingebettet.

Im einfachsten Fall werden die Bilder vom Browser in die übrigen Daten eingebettet, d.h. sie fließen mit dem Text, so ähnlich wie ein zusätzlich eingefügter Buchstabe.

Diese Version eignet sich für Icons und andere sehr kleine Bilder.
Mit Klick auf diesen → Link wird das Mini-Beispiel in einem eigenen Browser-Tab angezeigt.
Verwandtes Thema: → Umfließen von Bildern

HTML-Quelltext

• Jedes Bild wird mit einem HTML <img>-Element eingesetzt.
Dieses enthält jedoch nicht das Bild selbst, sondern im src-Attribut einen Verweis zu jener Adresse, von man die Grafik-Datei (*.gif, *.jpeg, *.png) laden kann.

Grafik-Dokumente werden vom Browser erst nach dem HTML-Quelltext und getrennt von diesem angefordert und nach dem Eintreffen in die Ansicht der Webseite eingesetzt.

Die Grafik-Dateien müssen nicht vom gleichen Webserver stammen wie die HTML-Webseite: Man kann jede im eigenen Netzwerk oder im Internet erreichbare Grafik-Datei einsetzen.

ยง Beachten sie bei öffentlich zugänglichen Webseiten das UrheberRecht: Lizenzfreie CreativeCommons-Medien kann man immer verwenden, andere nur mit Zustimmung.

Ein HTML-<img>-Element kann weder Daten noch andere Elemente enthalten und wird daher im Quelltext nicht mit <img>...</img> sondern alleinstehend mit <img /> formuliert.

Anwendung

• Kontrollieren sie nach dem Einsetzen der Grafik den HTML-QuellText ihrer Webseite:
Das src-Attribut sollte im einfachsten Fall nur den Datei-Namen enthalten z.B. src="bild.jpg".
Das src-Attribut darf niemals einen Pfad ihres Arbeits-PC angeben, z.B. src="C:\Ordner\nixgut.bmp"

• Wenn sie die HTML-Datei ihrer Webseite auf den Server ihres Web-Providers hochladen, dann müssen sie auch alle anderen darin eingebetteten Objekte hochladen, z.B. alle Grafik-Dateien.
Der 'relative Pfad' von der Webseite *.html zur Grafik-Datei muss dabei genau gleich bleiben: Wenn sich beide Dateien auf ihrem Arbeits-PC im gleichen Verzeichnis (Ordner) befinden, dann muss das auch am Server ihres Providers zutreffen.

• Nach dem Hochlanden wird die neue Webseite am Browser geladen und das Ergebnis überprüft. je nach Browser müssen sie evtl. vorher seinen Cache-Speicher löschen, in dem sich noch eine alte Version ihrer Webseite befinden kann. In hartnäckigen Fällen hilft es, das Browser-Programm zu beenden und neu zu starten.