HTML – Formatierungen

Mit HTML können Texte strukturiert und formatiert werden. Dazu gehören Überschriften, Absätze, Hervorhebungen und weitere Elemente.

1. Überschriften

HTML bietet sechs verschiedene Überschriftenebenen von h1 bis h6. h1 ist die höchste Ebene, h6 die niedrigste.

Codebeispiel

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

Ergebnis

Erklärung

Überschriften gliedern den Inhalt einer Webseite. Die Ebenen sollten in einer logischen Reihenfolge verwendet werden.

2. Textformatierungen

Mit HTML-Tags können einzelne Wörter oder Textabschnitte hervorgehoben werden.

Codebeispiel

<b>Fetter Text</b>
<i>Kursiver Text</i>
<u>Unterstrichener Text</u>
<mark>Markierter Text</mark>
<small>Kleiner Text</small>
<del>Gelöschter Text</del>
<sub>Tiefgestellt</sub>
<sup>Hochgestellt</sup>

Ergebnis

Erklärung

Das b-Element stellt Text fett dar. Das i-Element zeigt Text kursiv an. Mit u wird Text unterstrichen. mark hebt Text hervor. sub und sup ermöglichen tiefgestellte und hochgestellte Zeichen.

3. Logische Formatierungen

Logische Formatierungen beschreiben die Bedeutung eines Textes. Sie sind wichtig für die semantische Struktur einer Webseite.

Codebeispiel

<strong>Wichtiger Hinweis</strong>

<em>Besonders betonter Text</em>

<code>echo "Hallo";</code>

<kbd>Strg + S</kbd>

<abbr title="HyperText Markup Language">
HTML
</abbr>

Ergebnis

Erklärung

strong kennzeichnet wichtige Inhalte. em betont einen Text. code wird für Programmcode verwendet. kbd kennzeichnet Tastatureingaben. abbr beschreibt eine Abkürzung.

4. Absätze und Zeilenumbrüche

Mit dem p-Element werden Absätze erstellt. Das br-Element erzeugt einen Zeilenumbruch.

Codebeispiel

<p>Das ist der erste Absatz.</p>

<p>Das ist der zweite Absatz.</p>

<p>
Erste Zeile.<br>
Zweite Zeile.
</p>

Ergebnis

Erklärung

Ein Absatz wird mit p definiert. Mit br wird eine neue Zeile begonnen, ohne einen neuen Absatz zu erstellen.

5. Horizontale Linien

Mit dem hr-Element wird ein thematischer Abschnittswechsel dargestellt. Häufig erscheint dabei eine horizontale Linie.

Codebeispiel

<p>Erster Themenbereich</p>

<hr>

<p>Zweiter Themenbereich</p>

Ergebnis

6. Internes CSS

Internes CSS wird im style-Element innerhalb des head-Bereichs definiert. Es gilt für das aktuelle HTML-Dokument.

Codebeispiel

<style>
.beispiel {
    color: darkblue;
    background-color: lightyellow;
    padding: 15px;
    border: 2px solid darkblue;
}
</style>

<p class="beispiel">
Dieser Text wird mit internem CSS gestaltet.
</p>

Ergebnis

Dieser Text wird mit internem CSS gestaltet.

Erklärung

Die CSS-Regeln verändern die Textfarbe, die Hintergrundfarbe, den Innenabstand und den Rahmen des Elements.

7. Externes CSS

Externes CSS wird in einer eigenen Datei gespeichert. Die CSS-Datei wird mit dem link-Element im head-Bereich eingebunden.

Codebeispiel: HTML

<link rel="stylesheet"
      href="/css/style.css">

Codebeispiel: CSS

body {
    font-family: Arial, sans-serif;
}

h1 {
    color: darkblue;
}

Ergebnis

Diese Webseite verwendet bereits die externe CSS-Datei style.css.

Erklärung

Externes CSS ermöglicht eine einheitliche Gestaltung mehrerer Webseiten. Änderungen an der CSS-Datei wirken sich auf alle verbundenen Seiten aus.

8. Vergleich der Formatierungen

9. Praktische Übungen

<h1>Meine Webseite</h1>

<p>Dies ist ein Absatz.</p>

<b>Fetter Text</b>

<mark>Wichtiger Text</mark>

10<sup>2</sup>

<p>
Erste Zeile.<br>
Zweite Zeile.
</p>

<hr>

<strong>Wichtiger Hinweis</strong>

<link rel="stylesheet"
href="/css/style.css">

.beispiel {
    color: blue;
}

9. Zusammenfassung

HTML bietet verschiedene Möglichkeiten, Texte zu strukturieren und ihre Bedeutung zu kennzeichnen. CSS wird verwendet, um das Aussehen der HTML-Elemente zu gestalten. Für größere Webseiten ist externes CSS besonders praktisch.