Was sind HTML-Bild-Tags?
Der folgende Artikel enthält eine Übersicht über HTML-Bild-Tags. Ich kenne das Klischee, aber lassen Sie mich zunächst sagen, ein Bild sagt mehr als tausend Worte. Dies gilt insbesondere für Webseiten. Ein Bild kann den Besucher mit Ihrer Idee vermarkten, jemanden zum Kauf Ihres Produkts beeindrucken und dazu beitragen, dass eine Webseite so viel besser aussieht. In diesem Handbuch werden wir uns ansehen, wie wir IMG zu den Webseiten hinzufügen und sie richtig ausrichten können, indem wir ihnen Links hinzufügen.
Hinzufügen von Bildern zu Webseiten
Sie können einer HTML-Seite mithilfe der IMG hinzufügen Tag im HTML-Dokument, hier ist die Syntax:
Hier teilt der IMG dem Browser mit, dass dem Tag ein IMG zum Dokument hinzugefügt werden soll, und mit "src =" wird angegeben, von wo das Bild heruntergeladen werden soll.
Beispiel einer Seite mit einem Bild
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Hier ist die Ausgabe des Codes:
Eine interessante Tatsache bei diesen HTML-Seiten ist, dass wenn Sie das IMG-Tag verwenden, das Bild nicht in die Webseite eingefügt wird, sondern einen Speicherplatz erstellt, in dem das Bild nach dem Herunterladen abgelegt wird.
Browserunterstützung und Kompatibilität mit Attributen
Wie zu erwarten ist, unterstützen alle modernen Browser Bilder und die Verwendung von IMG-Tags. In manchen Fällen passen mobile Browser die Größe des Bilds an den Bildschirm an, wenn das Bild nicht als reaktionsfähig festgelegt ist.
Wenn es um die Kompatibilität von Attributen mit HTML 4.01 und neuerem HTML5 geht, funktionieren die meisten Tags mit Ausnahme von Aligning, Border, Hspace und Vspace, die in letzterem einfach nicht unterstützt werden.
Bilder als Link:
Es wird Zeiten geben, in denen Sie möchten, dass ein Bild als Link zu einer anderen Seite fungiert. Sie können dies tun, indem Sie das IMG-Tag in das Tag einfügen.
Festlegen eines Bildes als Hintergrund für eine Webseite
Sie können ein Bild als Hintergrundbild einer Webseite zuweisen, indem Sie die Hintergrundbild-CSS-Eigenschaft im Body-Element der Seite verwenden.
Hintergrundbild
Festlegen, dass ein Bild im Browser schwebt
Mit der CSS-Eigenschaft "float" können Sie festlegen, dass ein Bild an einer beliebigen Stelle im Browserfenster schwebt. Schauen wir uns ein Beispiel an, das Ihnen beim Verständnis hilft.
Hier schwebt das Bild des Autos auf der rechten Seite des Textes.
Hier wird das Bild des Autos auf der linken Seite des Textes schweben.
Attribute des Image-Tags
Im Folgenden sind die Attribute eines Image-Tags aufgeführt.
1) Ausrichten
Mögliche Werte: Oben, Unten, Mitte, Links oder Rechts.
Das Attribut alight gibt die Ausrichtung eines Bildes auf der Webseite an.
2) Alt
Werttyp: Text
Alt wird verwendet, um den alternativen Text eines Bilds einer Webseite anzugeben. In Fällen, in denen die Anzeige eines IMG nicht möglich ist, zeigt der Browser dem Benutzer diesen Text an. Suchmaschinen wie Google und Bing verwenden diesen Alternativtext, um Ergebnisse in der Bildersuche anzuzeigen.
3) Grenze
Werttyp: Pixel
Es wird verwendet, um einen benutzerdefinierten Rand um das Bild zu erstellen. In HTML5 funktioniert es nicht.
4) Kreuzherkunft
Wertetyp: Anonyme Verwendungsnachweise
Dieses Attribut wird verwendet, um festzulegen, wie mit Fotos mit unterschiedlichen Ursprüngen umgegangen werden soll. Dies wird hauptsächlich in Fällen verwendet, in denen Canvas-Elemente von JavaScript-Webanwendungen verwendet werden.
5) Höhe
Werttyp: Prozentsätze oder Pixel
Offensichtlich wird diese verwendet, um die Höhe des Bildes in der HTML-Webseite anzugeben.
6) Raum
Werttyp: Pixel
In HTML5 nicht unterstützt, wird das Attribut hspace verwendet, um in Pixel anzugeben, wie viel Leerraum links und rechts vom eingefügten Bild hinzugefügt werden soll.
7) ismap
Wertetyp: URL einer Seite
Mit ismap haben wir dieses Image als serverseitige Image-Map definiert. Wenn der Benutzer auf das Bild klickt (oder darauf tippt), senden die Browser die Koordinaten des Klicks (oder des Tippens) als URL an den Webserver.
8) Longdesc
Werttyp: URL
Longdesc wird verwendet, um mithilfe einer URL eine detaillierte Beschreibung eines Bildes zu geben. Die im Attribut verwendete URL wird als Beschreibung des Bildes verwendet.
9) src
Werttyp: URL
src steht für source und wird verwendet, um die Adresse anzugeben, von der der Browser das Bild abruft. Diese URL kann auf ein Bild in einem Verzeichnis auf demselben Server angewendet werden und es kann auch ein Bild auf einem Drittanbieter-Server mit gespeichert werden einen anderen Domainnamen.
10) usemap
Werttyp : #mapname
Das usemap-Attribut wird verwendet, um das Bild für eine clientseitige Imagemap zu definieren. Eine Usemap wird immer mit Map- und Area-HTML-Tags verwendet.
11) vspace
Werttyp: Pixel
In HTML5 nicht unterstützt, wird das Vspace-Attribut verwendet, um die Anzahl der Pixel festzulegen, die als Leerzeichen am oberen und unteren Rand des Bilds auf der Webseite verwendet werden sollen.
12) Breite
Werttyp: Pixel
Wie der Name schon sagt, wird das width-Attribut verwendet, um die Breite eines Bildes innerhalb der HTML-Webseite anzugeben.
Fazit - HTML Image Tags
Nachdem wir uns nun angesehen haben, wie Bilder in HTML-Seiten hinzugefügt werden und wie deren Attribute festgelegt werden, können wir in einem Webprojekt attraktiv aussehende Webseiten erstellen.
Neben dem visuellen Flair einer Webseite sind Bilder wertvoll, da sie auch bei der Suchmaschinenoptimierung helfen. Durch Hinzufügen geeigneter ALT-Tags und Beschreibungen zu Bildern können Suchmaschinen den Inhalt einer Webseite besser verstehen und in vielen Fällen das Ranking einer Webseite verbessern.
Empfohlene Artikel
Dies ist eine Anleitung zu HTML-Bild-Tags. Hier werden die Attribute des Image-Tags sowie die Browserunterstützung und die Kompatibilität mit Attributen erläutert. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- Eine einfache Anleitung zu HTML-Befehlen
- Einführung in was ist XHTML?
- Tutorials zu HTML-Attributen
- Anwendungen und Hauptanwendungen von HTML
- Verschiedene Listenstile in HTML
- HTML-Frames
- HTML-Blöcke