HTML - Bilder

  »   HTML  »   HTML Anleitungen - Bilder und Fotos in HTML Einfügen

Die Bilder sind sehr wichtig in einer Web-Seite. Es ist daher wichtig, sie in der richtigen Weise zu verwenden. Fügen Sie Bilder mit dem Tag <img/> ein.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

html image example

HTML - img src

"src" ist ein Abkürzung für "source" (Ursprung) . Dieses Attribut wird verwendet, um die Bildposition anzugeben.Wie in den tutorial about links erläuterten, können Sie eine beliebige URL verwenden, um auf die Datei zu zeigen.

Local sourceDescription
src="image.jpg"the picture is located on the same level as .html file
src="../image.jpg"the picture is located in previous level as .html file.
src="../img/image.jpg"the picture is located in the "img" folder in a previous level as .html file

You may also address the full URL. For example:

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

Das URL-Muster wird nicht empfohlen, weil Sie bei Änderung der Domain auch die Adressen aller Bilddateien ändern müssen. Oder wenn das Bild auf einer anderen Domäne gespeichert ist, verwenden Sie einfach nur scr="http://www.domain.com/image.jpg".

Die Tatsache, dass das Speichern des Bildes auf einem alternativen Server, stellt einen großen Vorteil dar, wenn der Platz, der für Ihre Domäne bereitgestellt wird, begrenzt ist.

HTML - "Alternatives" Attribut für Bilder

Attribut "alt" wird verwendet, um Text anstelle von Bild anzuzeigen, falls Ihr Browser aus irgendeinem Grund das Bild nicht anzeigen kann oder wenn ein Benutzer die Option "ShowImage" nicht ausgewählt hat.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg" />

Demo

html image example

HTML - Die Höhe und Breite eines Bildes

Zur Bestimmung der Höhe und Breite eines Bildes wird "Höhe" Attribute "Breite" verwendet. Logisch, nein!

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

html image example

HTML - Horizontale und vertikale Ausrichtung eines Bildes

Dazu verwenden wir die Attribute ausrichten and angleichen. Die Optionen, die von diesen Attributen angeboten werden, sind:

1. Ausrichten (horizontal)

  • Rechts
  • Links
  • Mitte

2. Angleichen (vertikal)

  • Oben
  • Unten
  • Mitte
html<img alt="" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - Bilder als Links verwenden

Das ist nur eine Einleitung, wir werden in der nächsten Anleitung mehr darüber sprechen. Die Bilder sind sehr nützlich als Verbindungen und können wie folgt gebildet werden

html<a href="http://www.tutorialehtml.com/" title="HTML link image example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

html image example

Das Bild oben sendet auf die Homepage. Sie können es auf Ihrer Startseite ändern und hier haben Sie ein Bild mit einem Link zu Ihrer Startseite

HTML - Thumbnails

Thumbnails sind Miniatur-Version (weniger Kilobyte) von Bildern, die eine viel höhere Qualität haben. Um ein Thumbnail zu erstellen, speichern Sie das Bild in einer niedrigeren Qualität als das Original.Dann verknüpfen Sie dieses kleine Bild mit dem Originalbild hoher Qualität.

html<a href="/assets_tutorials/img/image.jpg"  title="HTML link image thumbnail example">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo

html image example