Was sind HTML-Bilder und wie können Sie Ihre Webseite ändern?

In diesem Artikel erhalten Sie detaillierte und umfassende Kenntnisse über HTML-Bilder und darüber, wie Sie diese hinzufügen und ändern können, damit Ihre Webseite gut aussieht.

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

 Edureka Logo
HTML-Bild Einbetten von Bildern in eine Webseite edureka logo 

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  

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 Das Bild wird rechts vom Text angezeigt. Das Bild schwebt links vom Text.

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-Bild

Hintergrundbild

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.