2.6.4 Text formatieren mit <span>
en Text formatting with <span>
fr Formatage de texte avec <span>

• 1 Allgemein
  • a) Bezeichnungen
  • b) Syntax und Workshops
• 2 Anwendung von <span> im HTML-Text (ohne Stylesheet)
  • a) Syntax: <span>...</span>
  • b) Beispiel 1: Schriftfarbe
  • c) Beispiel 2: Hintergrundfarbe
• 3 Anwendung von <span> mit Stylesheet (class-Formatierung)
  • a) Beispiel 1: Hintergrundfarbe einiger Worte in einem Abschnitt formatiert mit Stylesheet
  • b) Beispiel 2: Ganzer Abschnitt Gelb hervorgehoben
  • c) Grundlagen und Workshops

HTML: Text-Formatierung

-

⇧ 1 Allgemein

• a) Bezeichnungen
• b) Syntax und Workshops

-

↑ a) Bezeichnungen

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

-

↑ b) Syntax und Workshops

• Web Design Group en The SPAN Element

• Microsoft-msdn en SPAN Element

-

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

• a) Syntax: <span>...</span>
• b) Beispiel 1: Schriftfarbe
• c) Beispiel 2: Hintergrundfarbe

-

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

-

↑ b) Beispiel 1: Schriftfarbe

2) Angabe im Quelltext des HTML-Dokumentes:

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

3) Anzeige im HTML-Dokument:

Dies ist irgendein Text und der soll formatiert werden.

-

↑ c) Beispiel 2: Hintergrundfarbe

2) Angabe im Quelltext des HTML-Dokumentes:

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

3) Anzeige im HTML-Dokument:

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

-

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

• a) Beispiel 1: Hintergrundfarbe einiger Worte in einem Abschnitt formatiert mit Stylesheet
• b) Beispiel 2: Ganzer Abschnitt Gelb hervorgehoben
• c) Grundlagen und Workshops

-

↑ a) Beispiel 1: Hintergrundfarbe einiger Worte in einem Abschnitt 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: Ganzer Abschnitt Gelb hervorgehoben

Beispiele, wie ein ganzer Abschnitt markiert werden kann.

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 class="gelb" 
style="font-weight:bold">
- Dieser Abschnitt ist in Bearbeitung -
</p> 

- Dieser Abschnitt ist in Bearbeitung -

-

↑ c) Grundlagen und Workshops

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

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

↑