Sie sind hier: Startseite -> HTML-Beispielseite -> Phase II: Inhalt -> Bild einbauen

HTML-Inhalt: Bild einbauen

HTML-Inhalt: ein Bild kommt dazu

Nach dem kurzen Ausflug in die Welt der Listen kehren wir beim Aufbau der Demoseite zur Textformatierung zurück. Doch der Text ist nur am Rande wichtig, denn nun wollen wir ein erstes Bild integrieren. Aufgabe ist es dabei, ein Bild zum Text hinzuzufügen und den Umlauf richtig zu gestalten.

CSS-Änderungen

Das Ergebnis sieht so aus: Beispielseite

Im Grunde hat sich nicht viel geändert, sieht man davon ab, dass nun ein Bild in die Seite eingebaut wurde. Das Bild erreicht man dadurch, dass man den IMG-Tag einsetzt, der eine verpflichtende Information braucht, nämlich src was für Source oder zu deutsch "Quelle" steht - also kurzum für die Adresse, wo denn das Bild zu finden ist, damit der Browser dieses auch anzeigen kann. Im aktuellen Fall wurde das Bild im gleichen Verzeichnis abgespeichert, weshalb keine weitere URL nötig ist. Folgende Möglichkeiten gibt es bei der Adresse:

dateiname.erweiterung (z.B. jpg, gif, png)

../dateiname.jpg -> Bild liegt im darüberliegenden Verzeichnis

../bilder/dateiname.jpg -> Bild liegt im Verzeichnis Bilder

URL/dateiname.jpg -> Bild liegt auf fremder Webseite

Bei fremden Bildern ist das Urheberrecht zu beachten. Nur auf Erlaubnis darf das Bild in die eigene Seite integriert werden!

Der zweite Parameter, den ich gewählt habe, ist der ALT-Text, der für Leute, die das Bild nicht sehen können oder einen Browser verwenden, der Bilder nicht anzeigen kann, eine Information liefert, was auf dem Bild zu sehen ist. Hier treffen wir wieder auf die Suchmaschinenoptimierung (SEO), denn der Alt-Text kann auch durch ein Keyword mithelfen, dass man besser gefunden wird.

Noch ein Tipp am Rande: wenn man kein automatisches System hat (z.b. einen Webshop), dann kann man die Bilder benennen, wie man mag und da ist es sinnvoll, gute Namen zu wählen. Zum Beispiel habe ich das Bild Donaukanal genannt und wer nach Donaukanal sucht, wird vielleicht sogar in der Bildersuche auf dieses Bild stoßen, womit zusätzliche Besucher/innen an Land geholt werden können.

Soweit, sogut. Das Bild ist nun im Text enthalten, aber normalerweise klebt das Bild am Text oder umgekehrt. Damit es den Abstand geben kann, den wir wollen, setzen wir wieder CSS ein. img ist der Befehl hiefür und mit float:left teilen wir CSS und dem Browser mit, dass der Text links am Bild vorbeilaufen soll. border:0 ist enorm wichtig, wenngleich nicht in unserem Beispiel. Wenn das Bild nämlich verlinkt wird und man wählt diese Einstellung nicht, dann gibt es im Internet Explorer einen hässlichen blauen Rahmen.

Zuletzt müssen wir den Abstand einstellen. Mit margin:0px 15px 5px 0px; erreichen wir, dass rechts vom Bild 15 Pixel Platz bleiben, sodass der Text mit schönem Abstand dargestellt wird. Nach unten haben wir 5 Pixel Abstand angeordnet, sodass auch hier ein Abstand gegeben ist.

Ebenfalls interessant:

Überschrift + Text

Informationen über das HTML-Konzept von Überschrift und Text, SEO-Tipps und CSS-Formatierung.

Textformatierung

Informationen über die Textformatierung mit HTML und Möglichkeiten, CSS einzusetzen.

Aufzählungslisten

Informationen über die HTML-Aufzählungslisten in der HTML-Beispielseite und die Formatierung durch CSS.

[aktuelle Seite]

Bild einbauen

Informationen über das Einbauen eines Bildes in die HTML-Beispielseite und die Formatierung mit CSS.

Startseite

Informationen über die Startseite mit echtem Text für das HTML-Beispielprojekt, die Ausgangspunkt für weitere Seiten ist.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Phase II: Inhalt

Startseite HTML-Beispielseite