Was ist in HTML ein Image-Tag?

Beim Erstellen einer Webseite mit HTML wird das Image-Tag verwendet, um ein Foto oder eine Grafik an einer bestimmten Stelle auf der Seite einzufügen. Es gibt viele Möglichkeiten, Bilder auf Webseiten zu verwenden, von der Steigerung des Interesses bis hin zur Verwendung als Navigationswerkzeug oder zur Bereitstellung von Informationen. Es gibt auch verschiedene Bildformate, die verwendet werden können. Unabhängig davon, wie oder welches Bild zur Webseite hinzugefügt wird, ist das Image-Tag immer erforderlich.

Um ein Bild hinzuzufügen, wird das Bild-Tag an der Stelle eingefügt, an der das Bild auf Ihrer Seite erscheinen soll. Wenn beispielsweise nach diesem Absatz ein Bild eingefügt werden soll, das Bild-Tag oder , wird dem HTML-Dokument nach diesem Absatz hinzugefügt. Das Etikett definiert alle Bilder in HTML. Es wird als leeres Tag bezeichnet, da es Attribute enthält und kein schließendes Tag hat. Attribute sind Optionen, die für ein bestimmtes HTML-Tag verfügbar sind.

Wenn nur einem HTML-Dokument hinzugefügt wurden, würde nichts angezeigt werden, da die Attribute des Tags nicht eingeschlossen wurden. Das wichtigste Attribut für ist „src“, was für Quelle steht. Das Attribut src gibt an, wo sich die Bilddatei tatsächlich befindet, oder es ist die Adresse für die Bilddatei. Da das Bild auf einer Webseite verwendet wird, wird der Speicherort des Bildes als URL angegeben. Innerhalb des HTML-Dokuments würde das Bild so aussehen: .

Insbesondere verweist die URL darauf, wo das Bild gespeichert ist. Wenn beispielsweise ein Bild eines Computers mit dem Dateinamen computer.jpg im Bilderordner auf www.wisegeek.com gespeichert wäre, würde die URL ersetzt durch: . Wenn der Browser die Webseite öffnet, zeigt er das Bild an, in dem das Image-Tag enthalten ist.

Das Image-Tag hat eine Reihe weiterer unterschiedlicher Attribute. Sie ermöglichen es einem Benutzer, anzupassen, wie das Bild auf der Seite aussieht. Die folgenden Attribute werden häufig für dieses Tag verwendet: alt, border, size und align.

Das Attribut alt steht für Alternativtext und wird angezeigt, wenn ein Browser kein Bild anzeigen kann. Außerdem wird alternativer Text für Benutzer mit Sehbehinderung gelesen, die sich dafür entscheiden, Text über Bildern anzuzeigen. Für das obige Beispiel könnte der alternative Text als alt=“Bild eines Computers“ angegeben werden.
Das Attribut border fügt dem Bild einen Rahmen hinzu, dessen Dicke von der angegebenen Pixelanzahl abhängt. Dies kann besonders nützlich sein, wenn der Bildhintergrund und der Website-Hintergrund ähnlich sind und eine klare Unterscheidung erwünscht ist. Mit border=”10″ wird beispielsweise ein 10 Pixel dicker Rand um ein Bild gelegt.
Größenattribute sind ebenfalls wichtig, da Breite und Höhe verwendet werden können, um die genaue Größe eines Bildes anzugeben. Diese Attribute müssen sehr sorgfältig verwendet werden, da eine Änderung die Proportionen oder die Qualität des angezeigten Bildes beeinflussen kann. Größenattribute ändern nicht die eigentliche Datei, sondern nur, wie der Browser sie anzeigt.
Das Attribut align gibt an, wie das Bild im Vergleich zum Text auf der Seite ausgerichtet wird. Es gibt verschiedene Auswahlmöglichkeiten für dieses Attribut, einschließlich oben, unten, Mitte, links, rechts, absmiddle, absbottom, baseline und texttop. Diese Tags helfen auch zu bestimmen, wie der Text auf der Seite mit dem Bild ausgerichtet ist.