In diesem Artikel zeige ich Ihnen, wie Sie das img-Tag in HTML verwenden, um Bilder zu erstellen und die Website lebendiger zu machen.

Es gibt ein Sprichwort " Eine schöne Website muss Bilder, ein klares Layout und viele auffällige Effekte haben ". Allein diese Aussage genügt uns, um die Technologien aufzuzählen, die zu ihrer Erstellung eingesetzt werden müssen.

• Erstellen Sie schöne Formen => Verwenden Sie zum Erstellen HTML-Tags, normalerweise img-Tags.
• Layout löschen => Verwenden Sie CSS, um das Layout aufzuteilen.
• Auffällige Effekte => Verwenden Sie HTML5 und CSS3 oder Javascript-Bibliotheken wie jQuery.

Zu viel Wissen, oder? Aber keine Sorge, wir müssen langsam vorgehen, nicht in Eile, also werden wir in diesem Artikel zuerst lernen, wie man img Tags verwendet, um Bilder zu erstellen.

Was ist das img-Tag in HTML?

Img steht für Bild, es ist ein HTML-Tag, das verwendet wird, um Bilder auf Webseiten zu erstellen. 100 % der Websites verwenden dieses Tag.

Um Bilder im Web anzuzeigen, verwenden Sie das img mit der folgenden Syntax:

 <img src="link"/>

Wobei der Hauptlink der Link ist, der auf das Bild zeigt. Es muss sich um einen im Internet existierenden Link handeln, nicht um einen Link auf dem Computer des Kunden. Sie müssen das Bild also auf das Hosting hochladen, damit jeder Computer, der auf die Website zugreift, es sehen kann.

Beispiel : Erstellen Sie ein Bild mit dem Link des Bildes, das bereits auf das Hosting von web888 hochgeladen wurde.

 <img src="https://web888.net/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Attribute des img-Tags in HTML

Um reibungslos mit dem a-Tag zu arbeiten, müssen Sie die Bedeutung aller seiner Attribute verstehen, die typischsten sind die folgenden Attribute:

src .attribut

Dies ist ein Attribut, das den Pfad enthält, der auf die Bilddatei zeigt. Es gibt viele verschiedene Arten von Bildern wie PNG, JPG, GIF , … und alle können auf der Website angezeigt werden. Insbesondere muss der Wert der URL in einer von zwei Formen vorliegen, nämlich die URL mit der Domain oder die URL im aktuellen Verzeichnis ( alle auf das Hosting hochgeladen ).

Alt-Attribut

Dies ist die Eigenschaft, die angezeigt wird, falls Sie die falsche Bild-URL übergeben. Diesmal wird dieser Text anstelle des Bildes angezeigt.

 <img src="url_khong_ton_tai" alt="hình ảnh"/>

Für SEO-Leute hilft dieses Attribut der Bot-Engine von Google, die Bedeutung des Bildes zu erkennen.

Breiten- und Höheneigenschaften

Dies ist die Eigenschaft, die die Breite ( width ) und Höhe ( height ) für das Bild festlegt. Sie können es auch mit CSS einrichten.

 <img width="500px" height="200px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/> <img width="200px" height="100px" src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/122/xay-dung-chuc-nang-scrollto-voi-jquery.gif"/>

Normalerweise verwenden wir CSS, um die Breite und Höhe festzulegen, anstatt die beiden obigen Eigenschaften zu verwenden. Da wir jedoch noch kein CSS gelernt haben, können Sie stattdessen diese beiden Eigenschaften verwenden.

Einige Möglichkeiten, img-Tags in HTML zu verwenden

Wir können das img in Kombination mit anderen Tags verwenden, um eine Website-Oberfläche zu erstellen.

Kombinieren Sie ein Tag, um Bildlinks zu erstellen

Wenn Sie möchten, dass der Browser auf eine andere Seite umleitet, wenn der Benutzer auf das Bild klickt, können Sie ein a-Tag um das Bild herum verwenden.

 <a href="https://hocvietcode.com"> <img src="http://code.web888.vn/upload/config/images/hoc-lap-trinh-online.png" title="Học lập trình"/> </a>

Kombinieren Sie das Karten-Tag, um den Link einer kleinen Position im Bild zuzuweisen

Nehmen wir an, Sie haben ein Satellitenbild und im Bild gibt es einen kleinen Winkel, der ein Foto der Sonne ist. Wenn Sie in diesem Bild auf die kleine Ecke der Sonne klicken, wird es zu einem vollständigen Bild der Sonne wechseln, wie im folgenden Beispiel.

 <img src="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="https://hocvietcode.com/upload/tut_post/images/2014/08/14/123/sun.gif"> </map>

Erklärung :

• Im img gibt es ein Attribut usemap="#planetmap" , das die Karte angeben soll, die auf diese Form angewendet werden soll, da ihr Wert #planemap ist, sodass das map -Tag mit name="planemap" .
• Im map -Tag wird ein area mit Attributen definiert
  • shape="rect" dh Rechteck
  • coords="0,0,82,126" d. h. die Liste der Koordinaten, aus denen der area besteht, wobei das obige Bild als Standard für die Messung genommen und in Pixeln gemessen wird.
  • alt="sun" ist, wenn Sie mit der Maus über den Ort mit den obigen Koordinaten fahren, wird dieser Titel angezeigt
  • https://freetuts.net/upload/tut_post/images/2014/08/14/123/sun.gif ist der Link, wenn Sie auf diesen Bereich klicken, um zu gehen.

In dem Artikel habe ich vorgestellt, wie man das img verwendet, um einfache Bilder in HTML zu erstellen, und ich habe einige Möglichkeiten vorgestellt, wie man das img in Kombination mit anderen Tags wie a Tag oder einem map -Tag verwendet, um verschiedene Funktionen auszuführen. Wenn Sie es tun, müssen Sie es tatsächlich mit CSS kombinieren, die neue Benutzeroberfläche ist schön und die Effekte sind auffällig.