LU03b - Anwendung von Inline-Elementen
Im Gegensatz zu Block-Elementen startet ein Inline-Element nicht automatisch auf einer neuen Zeile. Die Breite des Inline-Elements wird automatisch anhand des Inhalts angepasst.
Beispiele von Inline-Elementen
span-Element
Der <span>-Tag ist ein Inline-Container, der zur Kennzeichnung eines Textteils oder eines Teils eines Dokuments verwendet wird.
Er lässt sich leicht mit CSS gestalten oder mit JavaScript unter Verwendung des class- oder id-Attributs manipulieren.
Der <span>-Tag ist dem <div>-Element sehr ähnlich, aber <div> ist ein Block-Level-Element und <span> ein Inline-Element.
a-Element
Der <a>-Tag definiert einen Hyperlink, der verwendet wird, um von einer Seite auf eine andere zu verlinken.
Das wichtigste Attribut des <a>-Elements ist das href-Attribut, das das Ziel des Links angibt.
Standardmässig werden Links in allen Browsern wie folgt dargestellt:
- Ein nicht besuchter Link ist unterstrichen und blau
- Ein besuchter Link ist unterstrichen und lila
- Ein aktiver Link ist unterstrichen und rot.
img-Element
Der <img>-Tag wird verwendet, um ein Bild in eine HTML-Seite einzubetten.
Bilder werden technisch gesehen nicht in eine Webseite eingefügt; Bilder werden mit Webseiten verknüpft.
Der <img>-Tag schafft einen Bereich für das referenzierte Bild.
Der <img>-Tag hat zwei erforderliche Attribute:
src- Gibt den Pfad zu dem Bild analt- Gibt einen alternativen Text für das Bild an, falls das Bild aus irgendeinem Grund nicht angezeigt werden kann.
Hinweis: Geben Sie auch immer die Breite (width) und Höhe (height) eines Bildes an. Wenn Breite und Höhe nicht angegeben werden, kann die Seite beim Laden des Bildes flackern.
Tipp: Um ein Bild mit einem anderen Dokument zu verknüpfen, verschachteln Sie einfach den <img>-Tag in einen <a>-Tag, siehe Live Preview 2
Die Liste der Block- und Inline Elemente ist noch sehr viel länger. Eine komplette Liste finden Sie bei der w3school
Frei nach den Beispielen von w3school