HTML lernen - Bilder

In diesem Kapitel erfahren Sie, wie Sie Fotos und Bilder bzw. Grafiken in Ihre Webseite einbinden können.

Bilder (<img>)

Zum Anzeigen von Bildern auf Ihrer Webseite benötigen Sie den img-Tag. Hinweis! Dieser img-Code ist nutzlos solange er keine Attribute hat.

Achtung! Auch der img-Tag hat kein Ende, also keinen schließenden Tag!

Hinweis! Beachten Sie für dieses Kapitel auch das Kapitel "Grafiktypen"!

Attribute des img-Tags

• src
  Dieses Attribut gibt an, wo sich das Photo bzw. die Grafikdatei befindet, die angezeigt werden soll. Werte sind Dateipfade, die bereits in einem früheren Kapitel behandelt wurden.
• width
  Gibt die Breite des Bildes in Pixeln an. Werte sind normale Zahlen oder Prozentzahlen.
  Hinweis! Prozentzahlen beziehen sich immer auf das Elternobjekt, also auf den Code, in dem der img-Code steht. Ist das Element in dem der img-Code steht z.B. 500 Pixel breit und Sie geben bei Ihrem Bild eine Breite von 50% an, wird das Bild dann 250 Pixel breit angezeigt.
  Hinweis! Sollten Sie nur die Breite des Bildes ändern, die Höhe jedoch nicht, so wird die Höhe automatisch proportional an die Breite des Bildes angepasst, sodass kein Qualitätsverlust durch Verzerren entsteht. Geben Sie jedoch Höhe und Breite eines Bildes an und dies nicht proportional zum ursprünglichen Bild, so kann es zu Verzerrungen und Qualitätsverlust kommen.
  Achtung! Sollten Sie die Breite größer einstellen, als die Breite des ursprünglichen Bildes ist, so wird dieses auseinandergezogen. Dies führt eventuell dazu, dass das Bild nicht mehr fein gepixelt dargestellt wird, da die Qualität (bzw. die Auflösung) des Bildes für eine Vergrößerung nicht geeignet ist.
• height
  
  Gibt die Höhe des Bildes in Pixeln an. Werte sind normale Zahlen oder Prozentzahlen.
  Hinweis! Prozentzahlen beziehen sich immer auf das Elternobjekt, also auf den Code, in dem der img-Code steht. Ist das Element in dem der img-Code steht z.B. 500 Pixel hoch und Sie geben bei Ihrem Bild eine Höhe von 50% an, wird das Bild dann 250 Pixel hoch angezeigt.
  Hinweis! Sollten Sie nur die Höhe des Bildes ändern, die Breite jedoch nicht, so wird die Breite automatisch proportional an die Höhe des Bildes angepasst, sodass kein Qualitätsverlust durch Verzerren entsteht. Geben Sie jedoch Breite und Höhe eines Bildes an und dies nicht proportional zum ursprünglichen Bild, so kann es zu Verzerrungen und Qualitätsverlust kommen.
  Achtung! Sollten Sie die Höhe größer einstellen, als die Höhe des ursprünglichen Bildes ist, so wird dieses auseinandergezogen. Dies führt eventuell dazu, dass das Bild nicht mehr fein gepixelt dargestellt wird, da die Qualität (bzw. die Auflösung) des Bildes für eine Vergrößerung nicht geeignet ist.
• alt
  Wert dieses Attributs ist ein Text, der angezeigt werden soll, wenn die Grafik nicht geladen werden kann oder noch geladen wird.
• title
  Wie jeder Link kann auch jedes Bild einen Titel haben. Dieser erscheint dann, wenn man mit der Maus über das Bild fährt und einige Sekunden wartet, in einer kleinen gelben Box.
• border
  Dieses Attribut gibt dem Photo einen Rahmen. Werte sind ganze Zahlen. Diese entsprechen der Anzahl an Pixel, die der Rahmen breit sein soll. So ist border="1" ein z.B. ca. 1 Pixel breiter Rahmen um das Bild.
• align
  Gibt die Ausrichtung des Bildes an. Nachfolgend finden Sie mehr über die Verwendung und Werte von align.
• hspace
  Gibt den horizontalen Abstand in Pixeln zwischen einem Bild und den umliegenden (rechts und links liegenden) Objekten an.
• vspace
  Gibt den vertikalen Abstand in Pixeln zwischen einem Bild und den umliegenden (darüber und darunter liegenden) Objekten an.

Grafiken ausrichten

Zum Ausrichten von Grafiken wird das align-Attribut des img-Tags benötigt. Ausrichten einer Grafik bedeutet, dass Text der vor oder nach der Grafik im HTML-Code um die Grafik herumfließt. Dazu gibt es die vertikale und die horizontale Ausrichtung. Es können jedoch nie beide gleichzeitig verwendet werden.

Eine Ausrichtung von Grafiken ist nur dann möglich, wenn die Grafik größer ist als ein Buchstabe im Text.

Vertikale Ausrichtung
Die vertikale Ausrichtung von Grafiken wird in der Praxis kaum verwendet, da man hier nur eine Zeile beachtet, in der die Grafik platziert wird. Hier wird angegeben, wo der Text, der links und rechts neben der Grafik steht, fortlaufen soll. Werte dabei sind top für oben, middle für die Mitte der Grafik und bottom für unten.
Beispiel: Bei diesem Beispiel wird die Textzeile oben mit dem Bild abschließen und dann auf der anderen Seite des Bildes wieder oben fortlaufen.

Horizontale Ausrichtung
Die horizontale Ausrichtung wird in der Praxis dagegen ziemlich häufig verwendet, da man hier angeben kann, auf welcher Seite der Grafik der normale Text weiterverlaufen soll. Die Grafik wird dadurch also direkt in den Text eingeschoben. Folgende Werte könnten dafür verwendet werden: left für links und right für rechts
Beispiel: Bei diesem Beispiel wird "Text2" auf der rechten Seite des Bildes stehen. align="left" gibt hier an, dass das Bild links auf der Webseite platziert werden soll und rechts davon dann andere Objekte, wie z.B. Text, stehen dürfen.

Hinweis! Bei der Ausrichtung von Grafiken helfen Ihnen die Attribute hspace und vspace, wenn Sie möchten, dass zwischen der Grafik und dem Text mehr Abstand sein soll.