2.5.2 Überschrift
en Heading
fr Titre

• 1 Allgemein
  • a) Bezeichnungen
  • b) Ordnung der Überschriften
  • c) Darstellung der Überschriften in dieser Website
• 2 Formatierung mit HTML
  • a) Beispiel: Formatierung mit HTML im Quelltext
  • b) Workshops
• 3 Formatierung mit Stylesheet
  • a) Beispiel: Formatierung mit CSS im Stylesheet
  • b) Workshops
• 4 Automatische Numerierung

HTML: Text-Formatierung

-

⇧ 1 Allgemein

• a) Bezeichnungen
• b) Ordnung der Überschriften
• c) Darstellung der Überschriften dieser Website

-

↑ a) Bezeichnungen

• heading = Überschrift
  (nicht zu verwechseln mit "head" = Kopf oder Kopfdaten)

-

↑ b) Ordnung der Überschriften

Es sind Überschriften bis 1. bis 6. Ordnung möglich

-

↑ c) Darstellung der Überschriften dieser Website

1) Angabe des Textes der Überschriften im Quelltext:

Die Formatierung der Überschriften dieser Website erfolgt mit CSS und muss deshalb im Quelltext nicht mehr angegeben werden.

<h1>Überschrift 1. Ordnung</h1>
<h2>Überschrift 2. Ordnung</h2>
<h3>Überschrift 3. Ordnung</h3>
<h4>Überschrift 4. Ordnung</h4>
<h5>Überschrift 5. Ordnung</h5>
<h6>Überschrift 6. Ordnung</h6>

2) Angabe der Formatierung im Stylesheet, Beipiel: h3

a) Die Farben werden mit dem hier angegebenen Befehl aus einer separaten Farben-Datei eingelesen.

h3 {
margin-top:1.5em;
padding:8px 5px;
border-style:solid; border-width:4px;
border-left-color:<?php echo "$rlo_h3";?>;
border-top-color:<?php echo "$rlo_h3";?>;
border-right-color:<?php echo "$rru_h3";?>;
border-bottom-color:<?php echo "$rru_h3";?>;
background:<?php echo "$h_h3";?>;
color:<?php echo "$s_h3";?>;
font-size:1.32em; font-weight:bold; letter-spacing:0.02em;
}

b) Im Stykesgeet wird der PHP-Befehl der Farbe wie folgt automatisch aufgezeichnet.

h3 {
margin-top:1.5em;
padding:8px 5px;
border-style:solid; border-width:4px;
border-left-color:#D7E1EA;
border-top-color:#D7E1EA;
border-right-color:#44627E;
border-bottom-color:#44627E;
background:#A5BCCF;
color:#283A4B;
font-size:1.32em; font-weight:bold; letter-spacing:0.02em;
}

3) Darstellung im HTML-Dokument:

-

⇧ 2 Formatierung mit HTML

• a) Beispiel: Formatierung mit HTML im Quelltext
• b) Workshops

-

↑ a) Beispiel: Formatierung mit HTML im Quelltext

1) Vorbemerkung:

Die Formatierung der Überschriften dieser Website erfolgt mit CSS.

2) Angabe im Quelltext des HTML-Dokumentes:

Wenn die Formatierung der Überschriften mit CSS in einem Stylesheet oder im Kopf des HTML-Dokumentes formatiert sind, muss im Quelltext nur die von der CSS-Formatierung abweichende Formatierung eingegeben werden.

<h1 style="font-size:0.8em; background:lime; color:black">Alternative Überschrift 1. Ordnung</h1>

3) Darstellung im HTML-Dokumente:

Alternative Überschrift 1. Ordnung

-

↑ b) Workshops

• SELFHTML de Überschriften
  SELFHTML de Beispiel

-

⇧ 3 Formatierung mit Stylesheet

• a) Beispiel: Formatierung mit CSS im Stylesheet
• b) Workshops

-

↑ a) Beispiel: Formatierung mit CSS im Stylesheet

1) Angabe im Stylesheet:

h6  {
background:transparent;
color: fuchsia;
font-size:1em; font-weight:bold; letter-spacing:0.02em;
}

2) Angabe im Quelltext des HTML-Dokumentes:

<h6> Beispiel eines Titels der 6. Ordnung</h6>

3) Anzeige im HTML-Dokument:

Beispiel eines Titels der 6. Ordnung

-

↑ b) Workshops

• SELFHTML de Überschriften
  SELFHTML de Überschriften formatieren mit CSS

-

⇧ 4 Automatische Nummerierung

Bemerkung: Dieser Abschnitt soll erst in Betracht gezogen werden, wenn CSS, Pseudoelemente und Pseudoklassen behandelt wurden.

• Eine erweiterte Syntax der Pseudoelemente :before, :after erlaubt auch die automatische Nummerierung von Elementen, z.B. für Kapitelüberschriften.
• Die automatische Nummerierung wird bislang weder von Netscape, Mozilla Firefox, Internet Explorer, noch von Safari unterstützt, wohl aber von Opera und Konqueror.
• Die automatische Nummerierung wurde in dieser Anleitung nicht angewendet.

• SELFHTML de Automatische Nummerierung
  SELFHTML de Beispiel: 1 Überschrift erster Ordnung

↑