Öffnen Sie die HTML-Datei für die Webseite, der Sie ein Bild hinzufügen möchten, in einem Texteditor wie Notepad oder Webentwicklungssoftware.
Fügen Sie der Datei ein Tag hinzu. Platzieren Sie das Tag nach dem Element, unter dem ein Bild angezeigt werden soll, wenn die HTML-Datei in einem Browser geöffnet wird. Das Tag hat kein separates schließendes Tag. Innerhalb des Tags müssen Sie die Quelle des Bildes angeben, das Sie anzeigen möchten, indem Sie den Speicherort des Bildes im Internet mit dem eingeben src Attribut. Wenn das Bild im selben Ordner wie die HTML-Datei gespeichert ist, geben Sie den Namen und die Erweiterung des Bildes ein. Wenn das Bild woanders gespeichert ist, geben Sie die vollständige URL des Bilds ein.
Ergänzen Sie die alt Attribut zu Ihrem Tag. In HTML5 ist das alt-Attribut erforderlich. Verwenden Sie dieses Attribut, um das Bild zu beschreiben, falls es nicht geladen werden kann. Wenn ein Bild nicht geladen werden kann, zeigt der Browser den Text an, den Sie nach dem alt-Attribut eingeben. Darüber hinaus ist das alt-Attribut für Bildschirmleseprogramme wichtig, die von Menschen mit Sehbehinderungen verwendet werden. Die Software liest den Text im Alt-Attribut, sodass die Person mit Sehbehinderung, die Ihre Website betrachtet, das Bild hören kann, auch wenn sie es nicht sehen kann.
Geben Sie die Abmessungen des Bildes in Pixeln mit dem an Höhe und Breite Attribute. Wenn Sie die Abmessungen nicht angeben, weiß der Browser nicht, wie viel Platz für das Bild beim Laden der Seite bleibt. Dies führt dazu, dass die Seite abgehackt geladen wird, da der Text zuerst geladen wird, ein kleiner Platz für das Bild bleibt, dann beim Laden des Bildes auseinander springt und der Platz erweitert wird. Mit den angegebenen Abmessungen lässt der Browser genau den richtigen Abstand zwischen den anderen Elementen auf der Seite, damit das Bild nach dem Laden ausfüllen kann.
Testen Sie Ihren Code, um sicherzustellen, dass das Bild an der richtigen Stelle angezeigt wird, indem Sie Ihre HTML-Datei in einem Browser öffnen.
Verwenden Sie CSS, um ein Bild an die linke oder rechte Seite des Bildschirms zu verschieben oder um es von Text umbrechen zu lassen. Sie können beispielsweise style="float: left;" verwenden. oder style="float: right;" innerhalb des Etiketts.
Wenn Sie sowohl die Höhe als auch die Breite eines Bildes nicht kennen, ist es in Ordnung, nur das Höhen- oder das Breitenattribut allein zu verwenden. Sie können auch CSS verwenden, um die Höhe und Breite anzugeben; Verwenden Sie beispielsweise bei einem Bild mit 100 x 100 Pixeln das style-Attribut: style="height: 100px; Breite: 100px."
Machen Sie aus dem Bild einen anklickbaren Link, indem Sie das Tag in ein "a href"-Tag-Paar einfügen. Wenn Sie beispielsweise möchten, dass ein Bild mit Facebook verlinkt wird, geben Sie Folgendes ein.
Verwenden Sie nicht das Alt-Attribut, um die SEO Ihrer Seite zu verbessern. Suchmaschinen wissen seit langem, dass einige Webdesigner versuchen, das Alt-Attribut mit zusätzlichen Schlüsselwörtern zu füllen, und deshalb den Text im Alt-Attribut ignorieren.
