InternetWebdesign

HTML: Bilder einfügen

Sind Sie gerade dabei sich eine Webseite zu erstellen, dann fragen Sie sich bestimmt, wie Sie über HTML Bilder einfügen können. Im Internet basieren naezu sämtliche Webseiten-Layouts auf einem HTML-Gerüst. So werden also auch Fotos oder Bilder mit HTML eingebunden. Wir zeigen Ihnen nun, wie Sie ein HTML-Bild korrekt formatiert und sichtbar für Suchmaschinen einfügen.

HTML-Grundlagen: Bild einfügen

In der HTML-Sprache werden alle Elemente mit einem entsprechenden Tag eingeleitet. Um Ein Bild einzufügen wird das <img>-Tag genutzt. Dieser teilt dem Browser mit, dass nun ein Bild erwartet wird. In dem img-Tag wird dann die Quelle des Bildes aufgerufen. In der Regel liegt das Bild auf Ihrem Server.

So sieht das fertige HTML-Tag für das Einbinden eines Bildes aus:

<img src="PfadLinkZumBild.Dateiendung"/>

Achten Sie bei dem Bildpfad darauf, dass Sie die richtige Dateiendung dazu schreiben. In der Regel ist dies .jpg, .gif oder .png.

Bilder mit HTML formatieren

Damit das Bild optimal dargestellt wird und ebenfalls korrekt von den Suchmaschinen erkannt werden können, empfiehlt sich das hinzufügen von weiteren Attributen und Formatierungen.

CSS-Angaben für Bilder

Mit den sog. CSS (Cascading-Stylesheet) Angaben wird die Optik einer Webseite angepasst. Das height oder width Attribut passt hier bei für die Breite und Höhe des Bildes an.

<img src="Bild" width="Zahl in Pixel" height="Zahl in Pixel"/>

Attribute für Bilder

Die weiteren Attribute werden leider des öfteren von Webseitenbetreibern vernachlässigt. Doch diese sorgen erst dafür, dass die Suchmaschinen das Bild korrekt lesen können. Doch nicht nur die Suchmaschinen sollen das Bild lesen können. Auch blinde Menschen haben dank des ALT-Attribut die Möglichkeit die Webseite und deren Inhalt so besser zu verstehen.

<img src="Bild" alt="Bild-Beschreibung" width="Zahl in Pixel" height="Zahl in Pixel"/>

Sollte das Bild mal nicht geladen werden können, wir auch dann das ALT-Attribute dargestellt. So einfach können Sie ein Bild mittels HTML auf Ihrer Webseite einfügen.

Das könnte Ihnen auch gefallen