====== LU03b - Anwendung von Inline-Elementen ======
<WRAP center round info 60%>
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.
</WRAP>


===== Beispiele von Inline-Elementen =====

==== span-Element ====
{{ :modul:m293:learningunits:lu03:span.png?400|}}
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.

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_span|Live Preview]]


==== a-Element ====
{{ :modul:m293:learningunits:lu03:a.png?200|}}
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.

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_test|Live Preview]]



==== img-Element ====
{{ :modul:m293:learningunits:lu03:img.png?200|}}
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 an
  * ''alt'' - 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

[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test|Live Preview]]
[[https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_link|Live Preview2]]


<WRAP center round tip 60%>
Die Liste der Block- und Inline Elemente ist noch sehr viel länger. Eine komplette Liste finden Sie bei der [[https://www.w3schools.com/html/html_blocks.asp|w3school]]
</WRAP>


---- 

{{tag>m293-LU03 m293-E1G m293-E1F}}

Frei nach den Beispielen von [[https://www.w3schools.com|w3school]]