Img-Tag ist eines der wichtigsten und am häufigsten verwendeten Tags in HTML. Es ermöglicht Ihnen, Bilder auf Webseiten einzufügen und sie attraktiver und informativer zu machen. Wenn Sie gerade erst anfangen, HTML zu lernen, kann das Erstellen und Verwenden eines img-Tags eine gewisse Komplexität darstellen. In diesem Handbuch werden wir die grundlegenden Schritte zum Erstellen eines img-Tags untersuchen und Beispiele für seine Verwendung angeben.
Das Hauptattribut des img-Tags - src - gibt den Pfad zur Bilddatei an. Es kann absolut (vollständig) oder relativ sein. Der absolute Pfad gibt den vollständigen Speicherort der Datei an, beginnend am Stammverzeichnis. Der relative Pfad gibt den Speicherort der Datei relativ zum aktuellen Verzeichnis an.
Verwenden Sie die folgende Syntax, um ein img-Tag in den HTML-Code einzufügen:
Attribut alt gibt den alternativen Text für das Bild an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder wenn der Benutzer einen Bildschirmleser verwendet. Requisit width und height legt die Breite und Höhe des Bildes entsprechend in Pixeln fest.
Grundlagen des img-Tags
Verwenden Sie die folgende Syntax, um ein img-Tag zu erstellen:
- Öffnendes img-Tag:
- Das src-Attribut, das den Pfad zum Bild angibt: src="https://mksegment.ru/c/%D0%BF%D1%83%D1%82%D1%8C_%D0%BA_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E"
- Optionale Attribute: width ist die Breite des Bildes, height ist die Höhe des Bildes, alt ist der alternative Text, der angezeigt wird, wenn das Bild nicht verfügbar ist
- Schließendes img-Tag: (obwohl dies optional ist, da das img-Tag keinen Inhalt hat)
Beispiel für die Verwendung des img-Tags:
Wenn Sie ein img-Tag verwenden, ist es wichtig, den richtigen Pfad zum Bild anzugeben, damit der Browser es korrekt auf der Webseite anzeigen kann. Wenn kein Bild gefunden wird, wird das Alt-Attribut anstelle des Bildes angezeigt.
Syntax und Attribute
Verwenden Sie die folgende Syntax, um ein Tag in HTML zu erstellen:
- - Der Bildpfad wird im src-Attribut angegeben, und der alternative Text, der angezeigt wird, wenn das Bild nicht geladen werden kann, wird im alt-Attribut angegeben.
- - sie können auch die Breite und Höhe des Bildes in den Attributen width und height angeben. Es wird jedoch empfohlen, nur eines dieser Attribute anzugeben und das verbleibende Attribut ohne Wert zu belassen, damit das Bild proportional angezeigt wird.
Sie können auch die folgenden zusätzlichen Attribute in einem Tag verwenden:
- title="Text" - Gibt den Text der Quickinfo an, der angezeigt wird, wenn Sie den Mauszeiger über das Bild bewegen.
- class="Klassenname" - fügt eine Klasse zur späteren Verwendung in CSS-Stilen hinzu.
- id="id" - Gibt eine eindeutige ID für ein Element an, das in JavaScript verwendet werden kann.
- style="Stile" - Ermöglicht das Hinzufügen von Inline-Stilen ohne Verwendung externer CSS-Tabellen.
Anwendungsbeispiele
Kennung sehr nützlich für die Anzeige von Bildern auf Webseiten. Hier sind einige Anwendungsbeispiele:
1. Anzeigen eines Bildes mit einem absoluten Pfad:
2. Anzeigen eines Bildes mit einem relativen Pfad:
3. Zeigt ein Bild mit Breite und Höhe an:
4. Anzeigen eines Bildes mit einem Link:
5. Anzeigen eines Bildes mithilfe des srcset-Attributs zur Unterstützung verschiedener Geräte:
Kennung bietet mehr Flexibilität für die Arbeit mit Bildern auf Webseiten. Verwenden Sie seine verschiedenen Attribute, um das gewünschte Ergebnis zu erzielen.
Bildpfad festlegen
Wenn Sie ein img-Tag in HTML erstellen, müssen Sie den Pfad zum Bild angeben, damit der Browser es finden und auf der Seite anzeigen kann. Es gibt mehrere Möglichkeiten, den Bildpfad anzugeben:
Relativer Pfad: Wenn sich das Bild im selben Ordner wie Ihre HTML-Datei befindet, können Sie nur den Namen des Bildes im src-Attribut des img-Tags angeben. Zum Beispiel, src="https://mksegment.ru/c/image.jpg". Wenn sich das Bild in einem Unterordner befindet, können Sie einen Pfad relativ zum aktuellen Ordner angeben, z. B., src="https://mksegment.ru/c/images/image.jpg".
Absoluter Weg: Sie können den vollständigen Pfad zum Bild angeben, beginnend im Stammverzeichnis Ihres Servers oder über eine URL. Zum Beispiel, src="https://mksegment.ru/images/image.jpg" oder src="https://www.example.com/images/image.jpg".
Relativer URL-Pfad: Wenn Ihre Seite auf einer anderen Website gehostet wird, können Sie einen relativen Pfad zu dieser Website angeben. Zum Beispiel, src="https://mksegment.ru/images/image.jpg".
Indem Sie den richtigen Pfad zum Bild angeben, stellen Sie sicher, dass es erfolgreich heruntergeladen und auf Ihrer Webseite angezeigt wird.
Absoluter Weg
Absoluter Weg in HTML wird es verwendet, um den vollständigen Pfad zum Bild anzugeben. Es enthält alle notwendigen Informationselemente vom Stammordner bis zum Bild selbst.
Der absolute Pfad besteht aus den folgenden Teilen:
- Protokoll: Am Anfang des Pfads wird ein Protokoll wie "http://" oder "https://" angegeben. Das Protokoll definiert die Art der Datenübertragung und wird für die Kommunikation mit dem Server verwendet.
- Domain-Name: nach dem Protokoll folgt ein Domänenname, der auf den Server verweist, auf dem das Bild gespeichert ist. Zum Beispiel: "www.example.com ".
- Ordnerpfad: Nach dem Domainnamen wird der Pfad zu dem Ordner angegeben, in dem sich das Bild befindet. Zum Beispiel "/images/".
- Dateiname: Am Ende des Pfads wird der Name der Bilddatei und ihre Erweiterung angegeben, z. B. "image.jpg".
Zum Beispiel der absolute Pfad zum Bild "image.jpg" befindet sich auf dem Server "www.example.com" im Ordner "images" wird wie folgt aussehen:
Die Verwendung eines absoluten Pfads ist nützlich, wenn Sie auf Bilder verweisen müssen, die sich auf anderen Servern oder in anderen Ordnern befinden. Wenn sich das Bild jedoch im selben Ordner wie die HTML-Datei befindet, können Sie einen relativen Pfad verwenden, der kürzer und einfacher zu schreiben ist.
