HTML - Bilder

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 - 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.

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 - 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 - 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

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