Bild einfügen mit HTML: so geht's

Robert Schanze

Um ein Bild mit HTML einzufügen, benötigt ihr das <img>-Tag. Wir zeigen, wie und mit welchen Attributen ihr Bilder mit HTML einfügen könnt und was es dabei zu beachten gibt.

Video-Tipp: Hervorragender HTML-Editor Notepad++

GIGA Software Notepad++ Video.

Bild einfügen mit HTML

Wenn ihr  per HTML-Code ein Bild einfügen wollt, geht das mit dem Image-Tag <img>. Dabei solltet ihr aber unbedingt auch die unten erklärten Attribute nutzen. So weiß der Browser schon, wie und wo er das Bild zu platzieren hat und kann den Text entsprechend anpassen, der über, unter oder um das Bild herum fließt.

Wie ihr ein Bild mit HTML einfügt, seht ihr anhand folgender Vorlage:

<html>
<body>

<img src=“Katze.jpg“>

</body>
</html>

Unser Bild liegt im HTML-Hauptverzeichnis. Wenn das Bild beispielsweise in einem Unterorder namens „Bild“ steckt, gebt ihr diesen vor dem Dateinamen mit an: <img src=“bild/Katze.jpg“>.

So fügt ihr ein Bild per IMG-Tag in HTML ein.

So fügt ihr ein Bild per IMG-Tag in HTML ein.
So fügt ihr ein Bild per IMG-Tag in HTML ein.

 

HTML: Bild einfügen – Wichtige Attribute

Folgende Attribute solltet ihr unbedingt nutzen, wenn ihr ein Bild mit HTML einfügt:

  •  <img src=“Katze.jpg“ width=600>: „Width“ gibt die dargestellte Breite des Bildes in Pixeln an.
  •  <img src=“Katze.jpg“ height=600>: „Height“ gibt die dargestellte Höhe des Bildes in Pixeln an. Ihr könnt „width“ und „heigt“ auch gleichzeitig nutzen, dabei kann es aber zur Streckung oder Stauchung des Bildes kommen, wenn ihr nicht die Proportionen beachten
  •  <img src=“Katze.jpg“ alt=“Katze auf Straße“>:Der Alt-Tag zeigt den definierten Text an, wenn die Maus über das Bild bewegt wird. Außerdem gilt: Falls der Browser kein Bild anzeigt oder laden kann, wird stattdessen der Alt-Tag angezeigt.
  •  <img src=“Katze.jpg“ border=4> Das Attribut „Border“ zeigt einen Rahmen in der vorgegebenen Pixelstärke an. Wenn ihr keinen Rahmen möchtet, könnt ihr dafür auch 0 angeben.
  •  <img src=“Katze.jpg“ align=“center“> Das Attribut „align“ lässt euch das Bild ausrichten, entweder rechts („right“), links („left“), zentriert („center“), unten („bottom“), oben („top“) oder mittig („middle“).
  •  <img src=“Katze.jpg“ hspace=20 vspace=0> Mit „hspace“ gebt ihr den horizontalen Abstand zum Bild vom Rand links und rechts des Bildes an; mit „vspace“ den Vertikalen oben und unten des Bildes.

Bild einfügen: HTML-Beispiel

Betrachten wir folgenden <img>-Tag innerhalb einer HTML-Datei, um ein Bild einzufügen:

<html>
<body>

Das ist eine Katze:<br>
<img src=“Katze.jpg“ width=600 alt=“Katze auf Straße“ border=4 align=“center“ hspace=“10″ vspace=“70″ >
<br>
Das war eine Katze.

</body>
</html>

Im Browser sieht das Ganze dann so aus:

So sieht das eingefügte Bild als HTML-Seite im Browser aus.

So sieht das eingefügte Bild als HTML-Seite im Browser aus.
So sieht das eingefügte Bild als HTML-Seite im Browser aus.

 

Lest zudem, wie ihr auch einen HTML-Link einfügen könnt.

Zu den Kommentaren

Kommentare zu diesem Artikel

Neue Artikel von GIGA SOFTWARE

  • Linux Mint

    Linux Mint

    Linux Mint richtet sich besonders an Nutzer, die von Windows auf Linux wechseln wollen. Die Optik ist an Windows angelegt mit einer Taskleiste, dem Desktop und vielen weiteren Funktionen. Das neue Theme „Mint-Y“ lässt das Betriebssystem noch moderner aussehen als bisher. Wir verraten hier alle Funktionen, Systemanforderungen und Release-Infos zu Linux Mint.
    Robert Schanze 1
  • MyKeyFinder 2019

    MyKeyFinder 2019

    Der MyKeyFinder Download durchforstet euren Rechner nach Lizenzschlüsseln installierter Software und stellt diese übersichtlich dar.
    Marvin Basse
* Werbung