Bilder sind ein sehr wichtiger Bestandteil einer Webseite, da sie das Erscheinungsbild einer Webseite verbessern und die Kundeninteraktion verbessern. Der USP mehrerer Websites besteht darin, wie sie verschiedene Bilder auf ihren Webseiten organisieren und ihnen Geschmacksrichtungen hinzufügen. In diesem In diesem Artikel erfahren Sie, wie Sie Bilder mithilfe von HTML in der folgenden Reihenfolge in eine Webseite einbetten:
So fügen Sie ein Bild in HTML hinzu
Um ein Bild in eine Webseite einzubetten, erhalten Sie HTML Etikett. Ein weiterer wichtiger Punkt, an den Sie sich erinnern sollten, ist:
hat kein schließendes Tag. scr Das Attribut wird verwendet, um den Pfad des Images anzugeben. Dies kann eine URL oder ein Image-Pfad vom System / Server sein. Beginnen wir zunächst mit der grundlegenden Syntax zum Einbetten von Bildern in eine Webseite mithilfe von HTML.
Syntax
img src = 'img / Front-End-Web-Entwicklung / 50 / what-are-html-images.png'>Beispielcode
HTML-Bild Einbetten von Bildern in eine Webseite
Ähnlich wie bei anderen Tags sind verschiedene Attribute zugeordnet Etikett. Schauen wir uns jeden einzeln an, verstehen ihre Bedürfnisse und wie man sie benutzt.
HTML-Bilder-Tags
- alt Attribut
Das alt-Attribut ist der alternative Text für ein Bild. Der Grund, warum das alt-Attribut eingeführt wurde, ist, dass, wenn das Bild aus irgendeinem Grund nicht geladen werden konnte, ein alternativer Text angezeigt werden sollte, der eine Vorstellung vom Bild gibt. Die Gründe dafür, dass das Bild nicht geladen wird, können eine langsame Internetverbindung sein oder das Bild befindet sich nicht in der bereitgestellten Quelle usw.
Befindet sich das Bild in demselben Ordner, in dem sich die HTML-Datei befindet, können Sie den Namen der Datei direkt angeben. Andernfalls müssen Sie den absoluten Pfad der Bilddatei angeben.
Der Wert des alt-Attributs sollte das Bild beschreiben.
Beispiel
HTML-Bild Einbetten von Bildern in eine Webseite
wie man die Länge eines Arrays in Javascript erhält
- Breite und Höhe eines Bildes
Das Stilattribut wird verwendet, um die Höhe und Breite eines Bildes festzulegen. Im Stilattribut geben Sie das CSS-Styling an.
HTML-Bild Einbetten von Bildern in eine Webseite
Einige wichtige Punkte beim Einbetten eines Bildes in eine Webseite mithilfe von HTML sind:
- Die Attribute width und height werden in Pixel definiert.
- Sie können die Breite und Höhe eines Bildes auch in Prozent definieren. Es wird der Prozentsatz entsprechend der gesamten Webseite berücksichtigt.
- Wenn Sie nur einen von ihnen angeben, wird der andere entsprechend angepasst.
- Einbetten von Bildern mithilfe einer URL
HTML bietet Ihnen auch die Flexibilität, das Bild von einem anderen Server auszuwählen, indem Sie einfach die URL angeben. Sie können die Bilder auf einem separaten Server hosten und dann über die URL einbetten.
HTML-Bild Einbetten von Bildern in eine Webseite
- Bild als Link
Sie können das Bild auch als Link verwenden, über den der Benutzer auf das Bild klicken und auf einer neuen Webseite landen kann. Um dies zu tun, müssen Sie nur die setzen tag in Etikett.
HTML-Bild Einbetten von Bildern in eine Webseite
- Bild schwebend
Sie können die Ausrichtung des Bildes auch mithilfe der CSS-Eigenschaft float anpassen. Alle CSS-Eigenschaften müssen im style-Attribut angegeben werden.
HTML-Bild
- Bildkarten
Dies ist eine der wichtigen Funktionen von HTML. Tag hilft beim Definieren einer Imagemap. Sie müssen sich fragen, was eine Imagemap ist. Eine Imagemap ist ein Bild mit anklickbaren Bereichen
konvertiere von double nach int java
HTML-Bild
- Hintergrundbild
Sie können einer Webseite auch ein Hintergrundbild hinzufügen. Sie müssen nur die CSS-Eigenschaft, d. H. Das Hintergrundbild, im Style-Tag verwenden und dem HTML-Element hinzufügen.
HTML-BildHintergrundbild
KÖRPER-Element
Damit sind wir am Ende dieses HTML Images Blogs angelangt.Nachdem Sie die obigen Snippets ausgeführt haben, haben Sie verstanden, wie Sie Bilder in HTML einfügen. Ich hoffe, dieser Blog ist informativ und bietet Ihnen einen Mehrwert.
Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs „HTML Images“ und wir werden uns bei Ihnen melden.