2.5.5 Hervorheben mit <span>

1 Allgemein

a) Bezeichnungen

• span = specifies an inline text container = "In-Linie Text Behälter"

b) Syntax und Workshops

• Web Design Group: The SPAN Element

• Microsoft-msdn: SPAN Element

2 Anwendung von <span> im HTML-Text (ohne Stylesheet)

a) Syntax: ...<span>...</span>...

b) Beispiel 1: Schriftfarbe

<p>
Dies ist <span style="color:#ff0000;font-weight:bold;">
irgendein Text</span>und der soll formatiert werden.
</p>

Dies ist irgendein Text und der soll formatiert werden.

c) Beispiel 2: Hintergrundfarbe

<p>Dies ist ein Text bei dem 
<span style="background-color:yellow">
"Hervorgehobener Text"</span>hervorgehoben wird.
</p>

Dies ist ein Text bei dem "Hervorgehobener Text" hervorgehoben wird.

3 Anwendung von <span> mit Stylesheet (class-Formatierung)

a) Beispiel 1: Hintergrundfarbe im Text formatiert mit Stylesheet

1) Angabe im Stylesheet mit class-Formatierung

/* Mit <span class="gelb"> kann Text gelb hervorgehoben werden */
.gelb {
background:#FFF577; color:#000000;
padding:1px;
{

2) Angabe im Quelltext

<p>Dies ist ein Text bei dem<span class="gelb">
"Hervorgehobener Text"</span>hervorgehoben wird.</p>

3) Dann erscheint im HTML-Dokument

Dies ist ein Text bei dem "Hervorgehobener Text" hervorgehoben wird.

b) Beispiel 2: Gelb hervorgehobener Text für Mitteilung

Beispiele, wie ein Abscnitt markiert werden kann, wenn daran gearbeitet wird.

<p class="gelb" 
style="font-weight:bold">
- Dieser Abschnitt ist in Bearbeitung -
</p> 

- Dieser Abschnitt ist in Bearbeitung -

   
<p class="gelb" align="center" 
style="font-weight:bold">
- Dieser Abschnitt ist in Bearbeitung -
</p>    

- Dieser Abschnitt ist in Bearbeitung -

c) Grundlagen und Workshops

• SELFHTML: Klassen in Verbindung mit den Elementen div und span
  SELFHTML: Beispiel: Eine Kapitelüberschrift

• W3Schools: Beispiel: Set the background-color of the text

↑