HTML: Bild einfügen – So gehts!

Wenn du in HTML ein Bild einfügen möchtest, dann geht das ganz einfach über das <img> Tag. Das bedeutet „Image“ wie Bild.

Für ein Bild brauchst du zunächst nur die Quelle des als Pfad und mehr nicht. Die restlichen Parameter die du hinzufügen kannst findest du weiter unten.

Bild in HTML einfügen

<img src="https://www.blogseite.com/test.png" />

Dieses Bild wird in der Originalgröße angezeigt

Dieses Bild wird in einer Höhe von 300px und einer Breite von 300 px angezeigt.

<img src="https://www.blogseite.com/test.png" width="300" height="300" />

Dieses Bild wird in einer Höhe von 300px und einer Breite von 300 px angezeigt und hat einen Titel „Bild1“

<img title="Bild1" src="https://www.blogseite.com/test.png" width="300" height="300" />

Erklärung der wichtigsten Parameter für HTML Biler

src: Dies ist der Pfad zu deinem Bild.Von dort wird das Bild geladen. Auch als Quelle bekannt. Du kannst auch Bilder von anderen Webseiten als Pfad angeben

src="https://www.blogseite.com/test.png"

Alternativtext: Das ist ein Alternativtext, falls das Bild nicht geladen werden kann. Somit wissen Suchmaschinen was in dem Bild zu sehen ist.

alt="Dies ist ein Baum"

Breite :Du Breite des Bildes in px oder % du kannst beides angeben

width="300"

Höhe :Die Höhe des Bildes in px oder %

height="300"

title: Title ist eher was für die Suchmaschine hier kannst du deine Keywörter einfügen. So hilfst du der Suchmaschine besser zu verstehen um was das Bild geht. Zudem wird der Titel angezeigt wenn man mit der Maus drüberfährt.

Fazit

Ohne HTML Bilder ist eine Webseite einfach langweilig. Oben hab ich dir die wichtigsten Attribute erklärt. Jetzt bist in der Lage HTML Bilder ohne Probleme in deine Webseite oder deinen Blog einzufügen.

Solltest du noch Probleme Haben kannst du in meinem HTML Forum nachfragen.

Jetzt HTML lernen

Weitere Beiträge zu HTML

HTML: Text in Zwischenablage kopieren – So gehts
HTML: Grundgerüst – Webseite erstellen
HTML: Textarea erstellen – So gehts
PHP in HTML einfügen – So gehts!
HTML: Rahmen um Text – So gehts

HTML Datei öffnen – Kostenloser Editor 2021
HTML: Anker erstellen – So wirds gemacht!
HTML: 302 Redirect – So einfach gehts!
HTML: URL Parameter Erklärung
HTML: Bild einfügen – So gehts!

Jquery in HTML einbinden : So wirds gemacht!
HTML: Zurück Button & Link erstellen: So gehts!
HTML: Versteckter und Unsichtbarer Text : So gehs
HTML: Großbuchstaben schreiben: So gehts!
HTML: Icons einfügen: So gehts!

HTML: iFrame in Webseite einbinden – So gehts!
HTML: Liste erstellen – So gehts!
HTML: Erzwungenes Leerzeichen einfügen – So gehts!
CSS in HTML einbinden – So gehts!
HTML: Leerzeichen erstellen – So einfach gehts!

HTML: Auskommentieren – So gehts!
HTML: Bild zentrieren und mittig ausrichten
HTML: Fett schreiben – So einfach gehts!
HTML Text ausrichten: rechtsbündig & linksbündig
HTML: Zeilenabstand einstellen – So gehts!

HTML: Trennlinie einfügen – So gehts!
HTML: Absatz einfügen – So gehts!
HTML: Horizontale Linie – So gehts
HTML: Tabellen erstellen – So gehts!
HTML: Datum & Uhrzeit anzeigen – So gehts!

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien