Bilder sind Inline-Elemente und werden auf der gleichen Zeile wie der umgebende Text angeordnet.
Ist ein Bild nicht vorhanden (oder falsch benannt!!!), so wird stattdessen ein Platzhalter als "Broken Link" angezeigt.
Wenn Sie zusätzlich also die Größe des Bildes angeben, wird auch der Seitenaufbau schneller UND stabiler, da der Browser die Seite bereits korrekt aufbauen kann, während das Bild noch im Hintergrund geladen wird.
Und wenn Sie schon dabei sind, geben Sie auch noch einen alternativen Text (alt) als Beschreibung an, was auf dem Bild zu sehen ist, sowie einen Kommentar (title) für ergänzende Informationen.
Diese Angaben sind für barrierefreie Internetseiten Pflicht!
Ein beliebtes Problem sind immer wieder die korrekten Pfadangaben zu den einzubindenden oder zu referenzierenden Bildern, Seiten und sonstigen Quellen.
Achten Sie von Anfang an auf eine eigenständige Ordner- und Dateiverwaltung in Ihren jeweiligen Webseiten-Projekten und geben die korrekten RELATIVEN Pfade und Dateien an (Grundlagen PC-Technik!).
Übergeordnete Verzeichnisse erreichen Sie durch zwei Punkte und einen Slash (../). Auf keinen Fall sind Laufwerksbuchstaben zu verwenden, das geht beim Veröffentlichen dann total daneben!
Alternativ können Sie auch absolute URL-Adressen verwenden, was allerdings wieder bei der lokalen Bearbeitung an Ihrem Mac/PC zu Problemen führt.
Setzen Sie das "umflossene Bild" an verschiedenen Stellen im HTML-Quellcode ein und beobachten Sie, wie sich die Darstellung ändert.
Wir werden später auch noch die Außenabstände passend zu links- und rechtsliegenden Bildern ändern, damit der Text nicht bis haarscharf an das Bild reicht (was ja - wie hier - nicht sonderlich schön anzusehen ist...).
Lorem ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.