Was ist ein Bild-Tag in HTML?
Beim Erstellen einer Webseite mit HTML wird das Bild-Tag verwendet, um ein Foto oder eine Grafik an einer bestimmten Stelle auf der Seite einzufügen. Es gibt viele Möglichkeiten, wie Bilder auf Webseiten verwendet werden können, vom Hinzufügen von Interesse zur Verwendung als Navigationswerkzeug oder zum Bereitstellen von Informationen. Es gibt auch verschiedene Bildformate, die verwendet werden können. Unabhängig davon, wie oder welches Bild der Webseite hinzugefügt wird, ist das Bild-Tag immer erforderlich.
Um ein Bild hinzuzufügen, wird das Bild-Tag an der Stelle eingefügt, an der das Bild auf Ihrer Seite angezeigt werden soll. Wenn beispielsweise ein Bild nach diesem Absatz eingefügt werden soll, wird das Bild-Tag oder <img> nach diesem Absatz zum HTML-Dokument hinzugefügt. Das Tag <img> 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 <img> zu einem HTML-Dokument hinzugefügt würde, würde nichts angezeigt, da die Attribute des Tags nicht enthalten sind. Das wichtigste Attribut für <img> ist "src", was für source steht. Das Attribut src gibt an, wo sich die Bilddatei tatsächlich befindet, oder es ist die Adresse für die Bilddatei. Während das Bild auf einer Webseite verwendet wird, wird der Speicherort des Bildes als URL angegeben. Innerhalb des HTML-Dokuments würde das Bild folgendermaßen aussehen: <img src = "URL" />.
Insbesondere verweist die URL darauf, wo das Bild gespeichert ist. Wenn beispielsweise ein Bild eines Computers mit dem Dateinamen computer.jpg im Ordner images auf www.wisegeek.com gespeichert wird, wird die URL durch Folgendes ersetzt: <img src = "www.wisegeek.com/images/computer. jpg "/>. Wenn der Browser die Webseite öffnet, wird das Bild angezeigt, in dem das Bild-Tag enthalten ist.
Das Image-Tag weist eine Reihe anderer Attribute auf. Sie ermöglichen es einem Benutzer, das Erscheinungsbild des Bilds auf der Seite anzupassen. Die folgenden Attribute werden häufig für dieses Tag verwendet: alt, border, size und align.
Das Attribut alt steht für alternativen Text und wird angezeigt, wenn ein Browser kein Bild anzeigen kann. Alternativer Text wird auch für Benutzer gelesen, die visuell behindert sind und Text über Bildern anzeigen möchten. Für das obige Beispiel könnte der alternative Text als alt = "Bild eines Computers" angegeben werden.
Das border- Attribut fügt dem Bild einen Rand hinzu, dessen Dicke von der Anzahl der angegebenen Pixel abhängt. Dies kann besonders nützlich sein, wenn der Bildhintergrund und der Hintergrund der Website ähnlich sind und eine klare Unterscheidung gewünscht wird. Beispiel: border = "10" platziert einen 10 Pixel dicken Rand um ein Bild.
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 sich eine Änderung auf die Proportionen oder die Qualität des angezeigten Bildes auswirken kann. Größenattribute ändern nicht die tatsächliche Datei, sondern nur die Darstellung im Browser.
Das Attribut align gibt an, wie das Bild im Vergleich zum Text auf der Seite ausgerichtet wird. Für dieses Attribut stehen verschiedene Optionen zur Verfügung, darunter oben, unten, Mitte, links, rechts, absmiddle, absbottom, baseline und texttop. Diese Tags bestimmen auch, wie der Text auf der Seite am Bild ausgerichtet wird.