2.5.5 Trennlinie
en Horizontal ruler
fr Ligne horizontale

• 1 Allgemein
  • a) Bezeichnungen
  • b) Workshops
• 2 Standard-Trennlinie
  • a) Beispiel
• 3 Trennlinien mit bestimmter Stärke (size)
  • a) Beispiel
• 4 Trennlinien mit bestimmter Länge (width)
  • a) Beispiel 1: Feste Trennlinien-Länge
  • b) Beispiel 2: Relative Trennlinien-Länge
• 5 Ausrichten von Text und Trennlinien
  • a) Beispiel 1: Links
  • b) Beispiel 2: Zentriert
  • b) Beispiel 3: Rechts
• 6 Trennlinien mit CSS formatiert
  • a) Mit class formatiert
  • b) Nur für das Menü formatiert
  • b) Für den ganzen Inhalt formatiert

-

⇧ 1 Allgemein

• a) Bezeichnungen
• b) Workshops

-

↑ a) Bezeichnungen

• hr = horizontal ruler = horizontale Trennlinie

-

↑ b) Workshops

SELFHTML

• SELFHTML de Trennlinien
  SELFHTML de Trennlinien definieren
  SELFHTML de Beispiel
  SELFHTML de Trennlinien mit HTML gestalten
  SELFHTML de Beispiel
  SELFHTML de Trennlinien mit CSS gestalten
  SELFHTML de Beispiel

-

⇧ 2 Standard-Trennlinie

• a) Beispiel

-

↑ a) Beispiel

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text oberhalb der Trennlinie</p>
<hr>
<p>Text unterhalb der Trennlinie</p>

2) Anzeige im HTML-Dokument:

Text oberhalb oberhalb der Trennlinie

---

Text unterhalb unterhalb der Trennlinie

-

⇧ 3 Trennlinien mit bestimmter Stärke (size)

• a) Ohne Farbe
• b) Farbe schwarz
• c) Farbe blau

-

↑ a) Beispiel ohne Farbe

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text oberhalb</p>
<hr size="10">
<p>Text unterhalb</p>

2) Anzeige im HTML-Dokument:

Text oberhalb

---

Text unterhalb

-

↑ b) Beispiel Farbe schwarz

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text oberhalb</p>
<hr size="10" color="black">
<p>Text unterhalb</p>

2) Anzeige im HTML-Dokument:

Text oberhalb

---

Text unterhalb

-

↑ c) Beispiel Farbe blau

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text oberhalb</p>
<hr size="10" color="blue">
<p>Text unterhalb</p>

2) Anzeige im HTML-Dokument:

Text oberhalb

---

Text unterhalb

-

⇧ 4 Trennlinien mit bestimmter Länge (width)

• a) Beispiel 1: Feste Trennlinien-Länge
• b) Beispiel 2: Relative Trennlinien-Länge

-

↑ a) Beispiel 1: Feste Trennlinien-Länge

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text oberhalb</p>
<hr width="150">
<p>Text unterhalb</p>

2) Anzeige im HTML-Dokument:

Text oberhalb

---

Text unterhalb

-

↑ b) Beispiel 2: Relative Trennlinien-Länge

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text oberhalb</p>
<hr width="60%">
<p>Text unterhalb</p>

2) Anzeige im HTML-Dokument:

Text oberhalb (Linienlänge 60%)

---

Text unterhalb

-

⇧ 5 Ausrichten von Text und Trennlinien

• a) Beispiel 1: Links
• b) Beispiel 2: Zentriert
• b) Beispiel 3: Rechts

⇒ Siehe auch "Elemente ausrichten"

-

↑ a) Beispiel 1: Links

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text und Linie sind links</p>
<hr width="100" align="left">

2) Anzeige im HTML-Dokument:

Text und Linie sind links

---

-

↑ b) Beispiel 2: Zentriert

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text und Linie sind zentriert>/p>
<hr width="200" align="center">

2) Anzeige im HTML-Dokument:

Text und Linie sind zentriert

---

-

↑ c) Beispiel 3: Rechts

1) Angabe im Quelltext des HTML-Dokumentes:

<p>Text und Linie sind rechts ausgerichtet>/p>
<hr width="350" align="right">

2) Anzeige im HTML-Dokument:

Text und Linie sind rechts ausgerichtet

---

-

⇧ 6 Trennlinien mit CSS formatiert

• a) Mit class formatiert
• b) Nur für das Menü formatiert
• b) Für den ganzen Inhalt formatiert

-

↑ a) Mit class formatiert

• Diese Formatierung wird angewendet, wenn nicht alle Trennlinien mit dieser speziellen Formatierung formatiert werden sollen.

• Dies ist in der vorliegenden Website der Fall.

1) Eintrag im Stylesheet

hr.duenn {
background:#999; /* setzt die Farbe */
height:1px; /* ersetzt size=1  */
border:none; /* ersetzt noshade */
}

2) Angabe im Quelltext

<hr class="duenn">

3) Anzeige im Dokument

---

-

↑ b) Nur für das Menü formatiert

• Diese Formatierung wird angewendet, wenn zum Beispiel nur im Menü diese Formatierung angewendet werden soll.

• Dies bedingt aber, dass das Menü mit id="menue" eingelesen wird.

1) Eintrag im Stylesheet

#menue hr {
background:#999; /* setzt die Farbe */
height:1px; /* ersetzt size=1  */
border:none; /* ersetzt noshade */
}

2) Angabe im Quelltext des Menüs

<ul id="menue">
<hr>
</ul>

3) Anzeige im Dokument: siehe "Menü"

-

↑ c) Für den ganzen Inhalt formatiert

• Diese Formatierung wird angewendet, wenn alle Trennstriche im Inhalt so formatiert werden sollen.

• Diese Formatierung wurde in der vorliegenden Website nicht gemacht, da sonst die anderen Formatierungs-Beispiele nicht möglich sind.

• Diese Formatierung ist nur möglich, wenn der ganze Inhalt in einem div mit id="inhalt" steht.

1) Eintrag im Stylesheet

#inhalt hr {
background:#999; /* setzt die Farbe */
height:1px; /* ersetzt size=1  */
border:none; /* ersetzt noshade */
}

2) Angabe im Quelltext

<div id="inhalt">
<hr>
</div>

3) Diese Formatierung wurde in der vorliegenden Website nicht gemacht.

↑