CSS Kurs – Bilder in die Webseite einbinden

Dieser Beitrag ist Teil des CSS Kurses.
Im Unterschied zu Papierseiten sind Webseiten und Grafiken getrennt zu betrachten. Im eigentlichen Quelltext steht nur der Verweis auf die Grafik. Erst im Browser werden die beiden Elemente zusammengeführt.
Unser Logo
In diesem Beitrag zeige ich Ihnen, wie Sie Bilder in Ihre Webseite einbinden können. Dazu verwenden wir das Element img (engl. image = Bild). Beim Element img wird kein Endtag wie </img> verwendet. Das Element wird einfach mit einem Schrägstrich beendet. Mit dem Attribut src (engl. source = Quelle) sagen wir dem Browser wo unser Bild zu finden ist. Wenn Sie nur den Dateinamen angeben, sucht der Browser im selben Order in dem sich die jeweilige Webseite befindet.


<img src="logo.jpg" />

Befindet sich das Bild in einem anderen Ordner, müssen Sie den Weg dorthin angeben. Diese Angabe ist relativ zu dem allerersten Ordner der Webseite (in unserem Fall www.denisreis.com). Wenn das Bild unter www.denisreis.com/logo.jpg zu finden ist können Sie den Pfad wie folgt angeben:


<img src="/logo.jpg" />

Sie können natürlich auch die ganze URL reinschreiben, also https://www.denisreis.com/logo.jpg

Nun haben Sie dem Browser gesagt, wo Ihre Grafik zu finden ist. Wenn der Browser Ihren Code liest, läuft er los und holt sich die Grafik, macht aber parallel mit dem Text weiter. Je nach der Internetverbindung und der Größe der Grafik sieht Ihr Besucher erst einmal nichts.
Daher macht es Sinn das img Element um zusätzliche Attribute zu erweitern. Bis die Grafik geladen ist, wollen wir, dass ein alternativer Text angezeigt wird. Dazu verwenden wir das Attribut alt (engl. alternative). Wenn die Grafik noch nicht angezeigt wird, sieht der Benutzer stattdessen den Text. Daher sollte der Text möglichst aussagekräftig sein. In unserem Fall also nicht „Logo“ sondern lieber „CSS Kurs“. Anschließend sagen wir noch wie hoch und wie breit unsere Grafik ist. Um das Bild später in CSS eindeutig identifizieren zu können vergeben wir noch eine ID.


<img src="logo.jpg" id="logo" alt="CSS Kurs" width="222" height="32" />

Die Reihenfolge der Attribute spielt dabei keine Rolle.

Probieren Sie es selbst aus!

Quellen und weiterführende Literatur:
Peter Müller (2013): Flexible Boxes

Falls Ihnen dieser Beitrag weitergeholfen hat, wäre es eine sehr nette Anerkennung meiner Arbeit wenn Sie z.B. Ihre Bücher über Amazon bestellen würden. Wenn Sie ein Produkt kaufen, erhalte ich dafür eine Provision. Für Sie ändert sich am Preis des Produktes gar nichts. Ich möchte mich an dieser Stelle jetzt schon für Ihre Unterstützung bedanken.

0 Kommentare

Hinterlasse einen Kommentar

An der Diskussion beteiligen?
Hinterlasse uns deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.