HTML lernen (1): Einführungskurs

Von: Kerstin Dankwerth
Stand: 1. September 2007
4.875
(8)
Beitrag bewerten
Anmelden um Kommentare zu schreiben

HTML-Grundlagen: Überschriften und Absätze

HTML-Grundlagen: Überschriften

Überschriften (engl. Headings)

Damit Sie Überschriften unterschiedlicher Größe in Ihrem Dokument verwenden können, bietet HTML sechs Überschriftenebenen von <h1> ... </h1> bis <h6> ... </h6>. Mit ihrer Hilfe können Sie Ihr Dokument übersichtlich aufbauen und gliedern.

  • Öffnen Sie einen beliebigen Texteditor und erstellen Sie das Grundgerüst der Datei.

  • Geben Sie als Titel "6. Schlagerfestival in Berlin" ein.

  • Geben Sie als nächstes folgenden Text ein:
    Die Neuentdeckung auf dem 6. Schlagerfestival in Berlin waren das Gesangsduo "Ray und Dietrich". Schon nach dem ersten Lied "Ein Tag aus unserem Leben" war klar abzusehen, dass sie den Wettbewerb gewinnen werden.
    Achtung: Denken Sie daran, die Sonderzeichen zu maskieren!

  • Speichern Sie die Datei unter dem Namen schlager1.html.

Jetzt fehlt nur noch eine Überschrift für den Text. Wie erwähnt, gibt es in HTML sechs Überschriftenebenen. Eine Überschrift oberster Hierarchie lässt sich durch <h1>Überschrift</h1> im Dokument einsetzen. Probieren Sie es einfach aus. In Ihrem Texteditor sieht der HTML-Code dann wie in der Abbildung aus.

Beispiel:

<html>
<head>
<title>6. Schlagerfestival in Berlin</title>
</head>

<body bgcolor="#ffffff">
<h1>6. Schlagerfestival</h1>
<p>Die Neuentdeckung auf dem 6. Schlagerfestival in Berlin waren das Gesangsduo "Ray und Dietrich". Schon nach dem ersten Lied "Ein Tag aus unserem Leben" war klar abzusehen, dass sie den Wettbewerb eindeutig gewinnen werden.</p>
</body>
</html>

Im Browser ist die zugewiesene Überschrift deutlich zu erkennen.

Bild vergrößernÜberschrift Stufe 1

Setzen Sie eine zweite Überschrift unter der ersten ein, und zwar so:

<h2>Schlagerduo</h2>

Im Browser ist der Unterschied zwischen den beiden Überschriften

<h1>6. Schlagerfestival </h1>

und

<h2>Schlagerduo</h2>

gut zu sehen:

Bild vergrößernStufen 1 und 2

Hier noch einmal alle Überschriften zusammen:

Bild vergrößernAlle Überschriftenebenen im Überblick

Überschriften ausrichten

Ähnlich wie in einem Textverarbeitungsprogramm können Sie in HTML die Ausrichtung von Texten - also auch die Ausrichtung von Überschriften - ändern. Dazu muss das Tag für die Überschrift erweitert werden. Mit den Attributen align="left", align="center" oder align="right" wird die Ausrichtung festgelegt. Fehlt "align", wird die Überschrift linksbündig ausgerichtet.

Beispiel:

Zum Zentrieren einer Überschrift der höchsten Ebene dient dieser HTML-Code:
<h1 align="center">Die goldene Mitte</h1>

Um eine Überschrift der höchsten Ebene rechtsbündig auszurichten, benutzen Sie:
<h1 align="right">on the right side</h1>

Soll eine Überschrift der höchsten Ebene jedoch linksbündig ausgerichtet sein, ändert sich der Code in:
<h1 align="left">Standardausrichtung</h1>

Dieser Beitrag ist öffentlich.
Zugriff auf alle Inhalte haben Sie als Mitglied

Werden Sie Probemitglied - kostenlos.

Ohne finanzielles Risiko haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Die Anmeldung dauert drei Minuten. Sie können während der ersten 14 Tage ohne Angabe von Gründen stornieren. Eine E-Mail genügt.

Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.

Ich bin bereits Mitglied
Jetzt Probemitglied werden
Ich kann in den 14 Tagen Probezeit formlos z.B. per E-Mail stornieren. Wenn ich das nicht tue, entscheide ich mich für ein