Wenn Sie ein Bild einfügen, wird auch empfohlen, alternativen Text mit dem Alt-Attribut anzugeben. Dieser Text wird angezeigt, wenn das Bild aus irgendeinem Grund nicht vom Webbrowser heruntergeladen oder gelesen werden kann.
Highlights der Verwendung des Tags "img"
Das Hauptattribut des Tags "img" ist "src", das den Pfad zum Bild angibt. Dieser Pfad kann absolut (vollständige URL) oder relativ (relativ zum aktuellen Seitenverzeichnis) sein.
Ein weiteres wichtiges Attribut ist "alt", das einen alternativen Text für das Bild angibt. Dieser Text wird angezeigt, wenn das Bild nicht heruntergeladen werden kann oder wenn der Besucher ein Gerät mit eingeschränktem Zugriff auf die Bilder verwendet.
Das Tag "img" hat auch die Attribute "width" und "height", die die Breite und Höhe des Bildes entsprechend angeben. Diese Attribute können in Pixeln oder als Prozentsatz relativ zur Größe des übergeordneten Elements angegeben werden.
Zusätzlich kann das "img" -Tag verwendet werden, um einen Link zu einem Bild zu erstellen. Fügen Sie dazu das Attribut "href" hinzu, das die URL der Seite angibt, zu der der Benutzer weitergeleitet wird, wenn er auf das Bild klickt.
Das Tag "img" unterstützt auch das Attribut "title", mit dem Sie einem Bild einen Tooltip hinzufügen können, wenn Sie den Mauszeiger bewegen.
Abschließend ist das "img" -Tag ein wichtiges Element, um Bilder auf einer Webseite anzuzeigen. Wenn Sie die grundlegenden Attribute und Funktionen dieses Tags kennen, können Sie die Anzeige der Bilder auf Ihrer Seite an Ihre Bedürfnisse anpassen.
So geben Sie den Pfad zum Bild an
Um ein Bild in eine Webseite einzufügen, müssen Sie den Pfad zur Bilddatei angeben. Es gibt drei grundlegende Möglichkeiten, um den Bildpfad anzugeben:
- Absoluter Pfad: Dies ist der vollständige Pfad zur Bilddatei auf dem Server. Es beginnt im Stammverzeichnis der Website und enthält alle Ordner und Unterordner bis zur Bilddatei. Zum Beispiel /images/picture.jpg .
- Relativer Pfad: Dies ist der Pfad zur Bilddatei relativ zur aktuellen Seite oder CSS-Datei. Es beginnt nicht mit einem Schrägstrich und gibt den vollständigen Pfad zur Bilddatei an. Zum Beispiel images/picture.jpg oder ../images/picture.jpg .
- URL-Pfad: Dies ist der Pfad zu einer Bilddatei im Internet. Es beginnt mit dem Präfix http:// oder https:// und enthält den Domänennamen oder die IP-Adresse sowie den Pfad zur Bilddatei. Zum Beispiel, https://example.com/images/picture.jpg .
Es ist wichtig zu beachten, dass der Pfad zur Bilddatei korrekt sein muss und auf eine vorhandene Datei auf dem Server verweist. Wenn der Pfad falsch angegeben ist oder die Datei nicht gefunden wird, wird das Bild nicht auf der Webseite angezeigt.
Anpassen der Bildgröße und -position
Sie können die Bildgrößen mit den Attributen "width" und "height" im img-Tag festlegen. Zum Beispiel:
In diesem Beispiel hat das Bild eine Breite von 500 Pixeln und eine Höhe von 300 Pixeln.
Es ist auch möglich, die Größe des Bildes mit CSS zu ändern. Sie müssen einen externen Stil hinzufügen und die Eigenschaft "width" oder "height" verwenden. Zum Beispiel:
Und wenden Sie diesen Stil dann mit dem Attribut "class" auf das "img" -Tag an:
Sie können die Eigenschaft "float" in CSS verwenden, um die Position des Bildes zu ändern. Zum Beispiel:
In diesem Beispiel wird das Bild links ausgerichtet und die anderen Elemente werden um das Bild herum ausgerichtet.
Das Anpassen der Bildgröße und -position hilft Ihnen, die gewünschte visuelle Komposition auf Ihrer Webseite zu erzielen.
Alternativer Text für ein Bild
Der alternative Text sollte kurz sein und den Inhalt des Bildes beschreiben. Es sollte grundlegende Informationen über das Bild mit Hilfe von Wörtern und Phrasen vermitteln, die seine Bedeutung am genauesten beschreiben.
Wenn Sie ein Bild haben, können Sie ein Attribut hinzufügen alt in das Tag einfügen und ihm einen Wert zuweisen, der als alternativer Text verwendet werden soll. Zum Beispiel:
Wenn das Bild nicht angezeigt wird, wird der alternative Text "Blick auf die Berge" auf der Webseite angezeigt.
Es ist wichtig zu wissen, dass alternativer Text auch für SEO (Suchmaschinen-Optimierung) verwendet werden kann. Es wird daher empfohlen, Schlüsselwörter im alternativen Text zu verwenden, die den Inhalt des Bildes widerspiegeln und dem Kontext der Seite entsprechen.
Zusätzliche Attribute des Tags "img"
Neben den erforderlichen Attributen wie src und alt unterstützt das "img" -Tag auch eine Reihe zusätzlicher Attribute, mit denen Sie die Anzeige von Bildern auf einer Webseite weiter anpassen und optimieren können.
1. Attribut "width":
Mit dem Attribut "width" können Sie die Breite des Bildes in Pixeln oder als Prozentsatz der Breite des übergeordneten Elements angeben. Beispielsweise gibt der Wert "300" die Breite des Bildes auf 300 Pixel an, und der Wert "50%" legt die Breite auf die Hälfte der Breite des übergeordneten Elements fest.
2. Attribut "height":
Das Attribut "height" entspricht dem Attribut "width" und ermöglicht es Ihnen, die Höhe des Bildes in Pixeln oder als Prozentsatz der Höhe des übergeordneten Elements anzugeben.
3. Attribut "title":
Mit dem Attribut "title" können Sie einen Tooltip hinzufügen, der angezeigt wird, wenn Sie den Mauszeiger über das Bild bewegen. Die Quickinfo kann Text enthalten, der den Inhalt des Bildes beschreibt oder zusätzliche Informationen bereitstellt.
4. Attribut "style":
Mit dem Style-Attribut können Sie Stile für die Anzeige des Bildes festlegen. Sie können beispielsweise eine Hintergrundfarbe, einen Rahmen oder einen Schatten mithilfe der CSS-Eigenschaft angeben.
5. Attribut "usemap":
Das Attribut "usemap" wird verwendet, um ein Bild mit einer HTML-Bildkarte zu verknüpfen, die verschiedene Bereiche im Bild mit anklickbaren Links definiert. Der Attributwert muss der Name der Bildzuordnung (ID) sein.
6. Attribut "ismap":
Das Attribut "ismap" gibt an, dass es sich bei dem Bild um eine serverseitige Bildkarte handelt, mit der die Koordinaten des Punktes bestimmt werden, an dem geklickt wurde. Wird normalerweise zusammen mit "usemap" verwendet, um interaktive oder anklickbare Bilder zu erstellen.
7. Attribut "longdesc":
Mit dem Attribut "longdesc" können Sie die URL einer externen Datei angeben, die eine detaillierte Beschreibung des Bildes, seine Bedeutung und alle anderen verfügbaren Informationen enthält. Dieses Attribut kann für Benutzer mit Behinderungen nützlich sein und bietet somit Zugriff auf eine alternative Bildbeschreibung.
8. Attribut "loading":
Das Attribut "loading" wird verwendet, um das Verhalten des Browsers beim Laden eines Bildes anzugeben. Der Wert "lazy" gibt an, dass das Bild nur geladen werden soll, wenn es sich dem Gültigkeitsbereich nähert. Der Wert "eager" gibt an, dass das Bild sofort geladen werden soll.
9. Attribut "referrerpolicy":
Das Attribut "referrerpolicy" wird verwendet, um zu steuern, wie der Browser den HTTP-Header "Referer" sendet, wenn ein Bild angefordert wird. Der Wert "no-referrer" gibt an, dass der Header "Referer" nicht gesendet wird. Der Wert "origin" gibt an, dass der Header "Referer" nur gesendet wird, wenn er von einer Quelle zur anderen wechselt. Der Wert "same-origin" entspricht dem Wert "origin", sendet aber auch den Titel "Referer", wenn er von einer Seite derselben Quelle zur anderen wechselt. Der Wert "unsafe-url" gibt an, dass der Header "Referer" in allen Fällen gesendet wird.
Daher kann die Verwendung dieser zusätzlichen Attribute dazu beitragen, die Anzeige von Bildern auf einer Webseite für eine bessere Benutzererfahrung weiter anzupassen und zu optimieren.
