English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Die vielfältigen und farbenfrohen Webseiten, die wir heute sehen, sind dank der Bilder. In der Vergangenheit bestanden alle Webseiten im Internet aus reinem Text und waren sehr langweilig. Daher erkennt man die Bedeutung von Bildern im Webdesign. Bilder können in html-Seiten eingefügt werden, und die gängigen Bildformate der Webseite sind jpg, png, gif und so weiter
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Grundtutorials(oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>Testen Sie es heraus ‹/›
Bild einfügen
Dieser Beispiel zeigt, wie man Bilder auf Webseiten anzeigt.
Bilder aus verschiedenen Positionen einfügen
Dieser Beispiel zeigt, wie man Bilder aus anderen Ordnern oder Servern auf Webseiten anzeigt.
(Mehr Beispiele finden Sie am Ende dieser Seite.)
In HTML werden Bilder durch das <img>-Tag definiert.
<img> ist ein leeres Tag, was bedeutet, dass es nur Attribute enthält und kein schließendes Tag hat.
Um ein Bild auf der Seite anzuzeigen, müssen Sie das Quellattribut (src) verwenden. src bedeutet "Quelle". Der Wert des Quellattributs ist die URL-Adresse des Bildes.
Die Syntax zur Definition eines Bildes ist:
<img src="url" alt="some_text">
Die URL verweist auf den Speicherort des Bildes. Wenn sich das Bild "default.jpg" im www.w3im Verzeichnis images von codebox.com, dann lautet seine URL https://de.oldtoolbag.com/run/html/default.jpg.
Der Browser zeigt das Bild an der Stelle im Dokument an, wo das Bildetikett auftaucht. Wenn Sie das Bildetikett zwischen zwei Absätzen platzieren, zeigt der Browser zunächst den ersten Absatz an, dann das Bild und schließlich den zweiten Absatz.
Die alt-Attribut wird verwendet, um eine Reihe von vorbereiteten alternativen Texten für das Bild zu definieren.
Der Wert des 替换文本Attributs ist vom Benutzer definiert.
<img src="boat.gif" alt="Großes Boot">
Wenn der Browser das Bild nicht laden kann, gibt die替换文本Attribut an, welche Informationen der Leser verloren hat. In diesem Fall zeigt der Browser diesen alternativen Text an, anstatt des Bildes. Es ist eine gute Gewohnheit, jedem Bild auf der Seite ein替换文本Attribut hinzuzufügen, da dies dazu beiträgt, die Informationen besser darzustellen und ist für Benutzer, die reinen Textbrowser verwenden, sehr nützlich.
height (Höhe) und width (Breite) - Attribute werden verwendet, um die Höhe und Breite eines Bildes zu setzen.
Standardwerteinheit der Attributwerte ist Pixel:
<img src="pulpit.jpg" alt="Pulpit rock" Breite="304" Höhe="228">
Tipp: Die Angabe der Höhe und Breite eines Bildes ist eine gute Gewohnheit. Wenn die Höhe und Breite eines Bildes angegeben sind, wird die angegebene Größe beim Laden der Seite beibehalten. Wenn die Größe des Bildes nicht angegeben ist, kann das Laden der Seite das Gesamtablage des HTML-Dokuments stören.
Achtung: Wenn eine HTML-Datei zehn Bilder enthält, müssen, um die Seite korrekt anzuzeigen, geladen werden 11 Datei. Das Laden von Bildern dauert Zeit, daher empfehlen wir: Verwenden Sie Bilder vorsichtig.
Achtung: Beim Laden der Seite muss auf den Pfad der in die Seite eingefügten Bilder geachtet werden. Wenn die Position der Bilder nicht korrekt eingestellt ist, kann der Browser das Bild nicht laden, und das Bildetikett zeigt ein zerschlagenes Bild an.
Bildanordnung
Dieses Beispiel zeigt, wie man ein Bild im Text anordnet.
Bewegliches Bild
Dieses Beispiel zeigt, wie man ein Bild links oder rechts vom Absatz positioniert.
Bildverknüpfung einrichten
Dieses Beispiel demonstriert, wie man ein Bild als Link verwendet.
Erstellen eines Bildmaps
Dieses Beispiel zeigt, wie man ein Bild mit einem klickbaren Bereich erstellt. Jeder Bereich ist ein Hyperlink.
| Tag | Beschreibung |
| <img> | Definiert das Bild |
| <map> | Definiert die Bildkarte |
| <area> | Definiert den klickbaren Bereich in der Bildkarte |