Bilder in HTML Einfügen
Bilder machen Webseiten ansprechender. Sie können ein Bild mit dem <img>-Tag einfügen.
index.html
Wichtige Attribute:
src: erforderlich. Pfad zur Bilddatei (absolut oder relativ);alt: erforderlich. Text, der angezeigt wird, wenn das Bild nicht geladen werden kann; wird auch von Screenreadern verwendet;width/height: Größe in Pixel. Ohne diese Angaben wird das Bild in seiner Originalgröße angezeigt.
alt-Attribut
Der alt-Text sollte das Bild klar beschreiben und nützlichen Kontext bieten.
Stellen wir uns folgendes Beispiel vor. Sie verfügen über eine Quelle zum Pferderennen. Sie möchten zeigen, wie sich die Teilnehmer auf das Rennen vorbereiten.
Schlechter alt-Text:
index.html
Besserer alt-Text:
index.html
Die verbesserte Version bietet echten Kontext und hilft sehbehinderten Nutzern, zu verstehen, was das Bild zeigt.
src-Attribut
Das src-Attribut kann sowohl absolute als auch relative Pfade verwenden, um den Speicherort der Bilddatei anzugeben.
Absoluter Pfad
Eine vollständige URL, die auf ein Online-Bild verweist.
index.html
Jeder kann über diesen vollständigen Link auf das Bild zugreifen.
Bitte untersuchen Sie das folgende reale Beispiel in der Code-Sandbox unten.
Um die Dateiverzeichnisstruktur zu überprüfen, ziehen Sie den Schieberegler auf der linken Seite der Code-Sandbox-Oberfläche. In der oberen linken Ecke finden Sie eine Burger-Schaltfläche, die durch drei Streifen dargestellt wird. Durch Klicken auf diese Schaltfläche gelangen Sie zur Dateiverzeichnisstruktur.
Relativer Pfad
Verweist auf ein Bild innerhalb Ihres Projektordners.
index.html
Das bedeutet, dass sich image.jpg im Verzeichnis images in der Nähe Ihrer HTML-Datei befindet.
Bitte untersuchen Sie das reale Beispiel im untenstehenden Code-Sandbox. Sie finden dort den Ordner images, der die Datei sun.png enthält.
Absolute Pfade: vollständige URLs, die von überall im Internet funktionieren.
Relative Pfade: lokale Projektpfade, die innerhalb Ihrer eigenen Ordnerstruktur verwendet werden.
1. Welches Tag kann verwendet werden, um ein Bild auf einer Website einzufügen?
2. Welches Attribut muss für ein <img/>-Tag zwingend angegeben werden?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain the difference between absolute and relative paths in more detail?
What are some tips for writing effective alt text for images?
Can you show more examples of using the img tag with different attributes?
Großartig!
Completion Rate verbessert auf 2.38Bilder in HTML Einfügen
Swipe um das Menü anzuzeigen
Bilder machen Webseiten ansprechender. Sie können ein Bild mit dem <img>-Tag einfügen.
index.html
Wichtige Attribute:
src: erforderlich. Pfad zur Bilddatei (absolut oder relativ);alt: erforderlich. Text, der angezeigt wird, wenn das Bild nicht geladen werden kann; wird auch von Screenreadern verwendet;width/height: Größe in Pixel. Ohne diese Angaben wird das Bild in seiner Originalgröße angezeigt.
alt-Attribut
Der alt-Text sollte das Bild klar beschreiben und nützlichen Kontext bieten.
Stellen wir uns folgendes Beispiel vor. Sie verfügen über eine Quelle zum Pferderennen. Sie möchten zeigen, wie sich die Teilnehmer auf das Rennen vorbereiten.
Schlechter alt-Text:
index.html
Besserer alt-Text:
index.html
Die verbesserte Version bietet echten Kontext und hilft sehbehinderten Nutzern, zu verstehen, was das Bild zeigt.
src-Attribut
Das src-Attribut kann sowohl absolute als auch relative Pfade verwenden, um den Speicherort der Bilddatei anzugeben.
Absoluter Pfad
Eine vollständige URL, die auf ein Online-Bild verweist.
index.html
Jeder kann über diesen vollständigen Link auf das Bild zugreifen.
Bitte untersuchen Sie das folgende reale Beispiel in der Code-Sandbox unten.
Um die Dateiverzeichnisstruktur zu überprüfen, ziehen Sie den Schieberegler auf der linken Seite der Code-Sandbox-Oberfläche. In der oberen linken Ecke finden Sie eine Burger-Schaltfläche, die durch drei Streifen dargestellt wird. Durch Klicken auf diese Schaltfläche gelangen Sie zur Dateiverzeichnisstruktur.
Relativer Pfad
Verweist auf ein Bild innerhalb Ihres Projektordners.
index.html
Das bedeutet, dass sich image.jpg im Verzeichnis images in der Nähe Ihrer HTML-Datei befindet.
Bitte untersuchen Sie das reale Beispiel im untenstehenden Code-Sandbox. Sie finden dort den Ordner images, der die Datei sun.png enthält.
Absolute Pfade: vollständige URLs, die von überall im Internet funktionieren.
Relative Pfade: lokale Projektpfade, die innerhalb Ihrer eigenen Ordnerstruktur verwendet werden.
1. Welches Tag kann verwendet werden, um ein Bild auf einer Website einzufügen?
2. Welches Attribut muss für ein <img/>-Tag zwingend angegeben werden?
Danke für Ihr Feedback!
