So fügen Sie ein Bild mit HTML ein

So fügen Sie ein Bild mit HTML ein - Bild 1

Peppen Sie Ihre Websites auf, indem Sie ihnen Bilder hinzufügen. Sie können Bilder mithilfe des So fügen Sie ein Bild mit HTML ein - Bild 2Tags in HTML-Dateien einfügen, mit dem Sie den Speicherort des Bilds im Internet, die Höhe und Breite des Bilds und alternativen Text angeben, der angezeigt wird, wenn das Bild nicht geladen wird oder wenn jemand einen verwendet Screenreader, um die Seite anzuzeigen. Drei gängige Bilddateitypen, die im Web verwendet werden, sind GIF, PNG und JPEG.

Index

    Schritt 1

    So fügen Sie ein Bild mit HTML ein - Bild 3

    Öffnen Sie die HTML-Datei für die Webseite, der Sie ein Bild hinzufügen möchten, in einem Texteditor wie Notepad oder einer Webentwicklungssoftware.

    Schritt 2

    So fügen Sie ein Bild mit HTML ein - Bild 4

    Fügen Sie So fügen Sie ein Bild mit HTML ein - Bild 5der Datei ein Tag hinzu. Platzieren So fügen Sie ein Bild mit HTML ein - Bild 6Sie das Tag nach dem Element, unter dem ein Bild erscheinen soll, wenn die HTML-Datei in einem Browser geöffnet wird. Das So fügen Sie ein Bild mit HTML ein - Bild 7Tag hat kein separates schließendes Tag. Innerhalb des So fügen Sie ein Bild mit HTML ein - Bild 8Tags müssen Sie die Quelle des Bildes angeben, das Sie anzeigen möchten, indem Sie den Speicherort des Bildes im Internet mit dem Attribut src eingeben . Wenn das Bild im selben Ordner wie die HTML-Datei gespeichert ist, geben Sie den Namen und die Erweiterung des Bilds ein. Wenn das Bild woanders gespeichert ist, geben Sie die vollständige URL des Bildes ein.

    Schritt 3

    So fügen Sie ein Bild mit HTML ein - Bild 9

    Fügen Sie Ihrem Tag das Alt -Attribut hinzu. So fügen Sie ein Bild mit HTML ein - Bild 10In 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 wichtig für Screenreader-Software, die von Menschen mit Sehbehinderungen verwendet wird. Die Software liest den Text im Alt-Attribut, sodass die Person mit einer Sehbehinderung, die Ihre Website betrachtet, hören kann, was auf dem Bild zu sehen ist, obwohl sie es nicht sehen kann.

    Schritt 4

    So fügen Sie ein Bild mit HTML ein - Bild 11

    Geben Sie die Abmessungen des Bildes in Pixeln mit den Attributen height und width an. Wenn Sie die Abmessungen nicht angeben, weiß der Browser nicht, wie viel Platz für das Bild gelassen werden soll, wenn die Seite geladen wird. Dies führt dazu, dass eine Seite abgehackt geladen wird, da der Text zuerst geladen wird und einen kleinen Platz für das Bild lässt, dann beim Laden des Bildes auseinander springt und den Platz vergrößert. Mit den angegebenen Abmessungen lässt der Browser genau den richtigen Platz zwischen den anderen Elementen auf der Seite, damit das Bild nach dem Laden ausgefüllt werden kann.

    Schritt 5

    So fügen Sie ein Bild mit HTML ein - Bild 12

    Testen Sie Ihren Code, um sicherzustellen, dass das Bild an der richtigen Stelle angezeigt wird, indem Sie Ihre HTML-Datei in einem Browser öffnen.

    Tip

    Use CSS to move an image to the left or right side of the screen or have text wrap around it. For example, you can use style="float:left;" or style="float:right;" within the So fügen Sie ein Bild mit HTML ein - Bild 13 tag.

    If you don't know both the height and width of an image, it is fine to just use either the height or width attribute alone. You can also use CSS to specify the height and width; for example, with a 100 by 100 pixel image, use the style attribute: style="height:100px;width:100px."

    Make the image into a clickable link by placing the So fügen Sie ein Bild mit HTML ein - Bild 14 tag within an "a href" tag pair. For example, if you want an image to link to Facebook, type the following.

    So fügen Sie ein Bild mit HTML ein - Bild 15

    Warning

    Don't use the alt attribute to try to boost your page's SEO. Search engines have long been aware that some Web designers try to stuff the alt attribute with extra keywords, and therefore they ignore the text in the alt attribute.

    Das könnte Sie auch interessieren

    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht.

    Go up