HTML -Bilder

Bilder können Ihre Websites sehr faszinierend machen und sich für die Verbesserung der Benutzererfahrung als sehr vorteilhaft erweisen. Sie sind die häufigste und bequemste Art, die Aufmerksamkeit der Benutzer zu erregen, da die menschliche Natur Bilder gegenüber Text bevorzugt. Dieser Beitrag soll seine Leser über HTML -Bilder in der Tiefe aufklären. Dieser Beitrag behandelt die folgenden Themen:

1. Fügen Sie Ihrer Website Bilder hinzu
2. Ändern Sie die Höhe und Breite von Bildern
3. Hinzufügen von Bildern aus einem Unterordner
4. Hinzufügen von Bildern von einer anderen Website
5. Bilder als Link verwenden

Lass uns anfangen.

1. Fügen Sie Ihrer Website Bilder hinzu

Bilder können mit dem Tag in einer Website enthalten sein. Das Tag ist leer und besteht nur aus Attributen und hat kein Schluss -Tag.

Syntax
Das Tag hat die unten erwähnte Syntax.

Die Attribute des Tags werden unten erläutert.

SRC -Attribut
Dieses Attribut beschreibt den Pfad des Bildes.

ALT -Attribut
Es bietet einen alternativen Namen des Bildes. Diese Alternative erscheint, wenn das Bild aus irgendeinem Grund nicht geladen wird. Der alternative Name sollte das Bild beschreiben.

Beispiel
Im folgenden Beispiel fügen wir mit dem Tag ein Bild von Nordlichtern auf einer Webseite hinzu. Wir haben einfach den Pfad des Bildes an das SRC -Attribut und einen alternativen Namen zum Bild gegeben, falls das Bild nicht geladen wird.

HTML -Bilder lernen

Ausgang

Das Bild von Nordlichtern wurde in die Webseite eingebettet.

Im Falle des Bildes wird nun aufgrund eines Fehlers nicht geladen.

2. Ändern Sie die Höhe und Breite von Bildern

Die Höhe und Breite Attribute werden verwendet, um die Höhe und Breite der Bilder zu verändern.

Beispiel
Angenommen, Sie möchten die Höhe und Breite eines HTML -Bildes ändern.

HTML -Bilder lernen

Wir haben die Bildbreite auf 300 und Höhe auf 400 gesetzt.

Ausgang

Die Bildbreite und Höhe wurden eingestellt.

Eine andere Möglichkeit, die Breite und Höhe von HTML -Bildern anzupassen, besteht darin, das Style -Attribut zu verwenden.

Beispiel
Im folgenden Beispiel wird das Style -Attribut verwendet, um die Breite und Höhe des Bildes festzulegen.

HTML -Bilder lernen

Wir haben die Bildbreite auf 300px und Höhe auf 150px gesetzt.

Ausgang

Die Bildbreite und Größe wurden verändert.

3. Hinzufügen von Bildern aus einem Unterordner

Wenn Ihre Bilder in einem anderen Ordner gespeichert werden, müssen Sie den Pfad dieses Ordners im SRC -Attribut des Tags hinzufügen.

Beispiel
In diesem Beispiel das Bild „Vogel.JPG ”wird in einem Unterordner„ Bilder “platziert, sodass wir den Pfad dieses Ordners im SRC-Attribut des Tags geben.

HTML -Bilder lernen

Das Bild ist in einem Unterordner vorhanden, wie unten gezeigt.

Ausgang

Das Bild wurde auf der Webseite eingebettet, die in einem Unterordner vorhanden war.

4. Hinzufügen von einer anderen Website

Um Bilder von einer anderen Website einzubetten, haben Sie einfach die URL des Bildes im SRC -Attribut des Tags bereitgestellt.

Beispiel
Im folgenden Beispiel wird ein Bild von Google eingebettet.COM -Website mit der URL.

HTML -Bilder lernen

Ausgang

Bild von Google.Die com -Website wurde eingebettet.

5. Bilder als Link verwenden

HTML -Bilder können als Links verwendet und zu diesem Zweck das Tag in das Tag enthalten.

Beispiel
Im folgenden Beispiel wird das Bild als Link zu einer anderen Website verwendet.

HTML -Bilder lernen

Ausgang

Klicken Sie auf das Bild und die Website wird geöffnet, deren Link im HREF -Attribut von Tag bereitgestellt wurde.

Die Website wurde geöffnet, nachdem Sie auf das Bild geklickt haben.

Abschluss

Bilder können mithilfe von HTML -Tag in Websites eingebettet werden. Es ist ein leeres Tag mit nur zwei Attributen; Src und Alt. Das SRC -Attribut nimmt den Pfad des Bildes auf. Bilder können von anderen Websites eingebettet und als Links verwendet werden. In diesem Beitrag werden die HTML -Bilder mit Hilfe von Beispielen ausführlich erörtert.