Impressum
< Internet-Seiten erstellen Inhalt Text fett etc. >

Text strukturieren in HTML

Wenn man Text in den <body>-Bereich einer HTML-Datei einfügt, so wird dieser so im Browser genau so angezeigt. Es werden aber alle Zeilenumbrüche ignoriert.
Somit kann man den HTML-Quelltext mit Zeilenumbrüchen übersichtlicher halten.
Um den Text im Browser übersichtlicher zu machen, brauchen wir HTML-Tags.

Beispiel:

<!DOCTYPE html>
<html>
<head>
<title>Ein Beispiel</title>
</head>
<body>
Ein Text
Der Browser ignoriert alle Zeilenumbrüche.

Wirklich alle....


Ganz echt.
</body>
</html>
Ein Text Der Browser ignoriert alle Zeilenumbrüche. Wirklich alle.... Ganz echt.

Überschiften

Im Englischen heißen Überschiften Headings, daher ist der Tag-Name für Überschriften h.
Es gibt 6 Überschiften-Tags <h1> bis <h6>. <h1> ist die größte Überschrift, <h2> eins kleiner, <h3> noch eins kleiner u.s.w.
Nach jeder Überschrift bricht der Browser in eine neue Zeile um.

Beispiel:

<h1>Überschrift 1</h1> Einführung ...
<h2>Überschrift 2</h2>
Text des Kapitels
<h3>Überschrift 3</h3>
Text des Abschnitts
<h4>Überschrift 4</h4>
eine Randnotiz
<h5>Überschrift 5</h5>
Irgendwas anderes
<h6>Überschrift 6</h6>
und wenn man das noch braucht ist man ganz schön in die Tiefe gegangen.

Überschrift 1

Einführung ...

Überschrift 2

Text des Kapitels

Überschrift 3

Text des Abschnitts

Überschrift 4

eine Randnotiz
Überschrift 5
Irgendwas anderes
Überschrift 6
und wenn man das noch braucht ist man ganz schön in die Tiefe gegangen.

Zeilenumbruch und Absätze

Um im Browser einen Zeilenumbruch zu erzeugen braucht man das <br>-Tag. Es bricht den Text an dieser Stelle in eine neue Zeile um. Das <br>-Tag hat kein schließendes Tag.
Für die Struktur ist es aber besser man umschliesst einen Textabsatz mit <p> und </p>. Das P kommt von Paragraph (eng. für Absatz).
Vor und nach dem Absatz fügt der Browser automatisch eine Leerzeile ein.
Eine weitere Möglichkeit Absätze zu trennen ist das <hr>-Tag. Es erzeugt einen Zeilenumbruch mit einer horizontalen Linie.

Beispiel:

<h1>Überschrift 1</h1>
<p>
Ein erster Absatz. Dieser hat einen <br> Zeilenumbruch.
</p>
<p>Noch ein Textabsatz</p>
<hr>
<p>UND ein 3. Absatz Ein weiterer Textteil </p>

Überschrift 1

Ein erster Absatz. Dieser hat einen
Zeilenumbruch.

Noch ein Textabsatz

UND ein 3. Absatz Ein weiterer Textteil

Aufgaben

Nehmen Sie einen Texteditor ihrer Wahl und kopieren Sie das HTML-Gründgerüst hinein.
Speichern Sie die Seite unter index.html.
  1. Ersetzen Sie den Titel im Head mit „Die erste“.
    Speichern Sie die Datei und öffnen sie ihre Seite im Browser
  2. Fügen sie nun in den Body die Überschrift „Meine erste HTML-Seite“ ein.
    Nach der Überschrift soll ein Text-Absatz folgen in dem „Ich kann das.“ steht.
    Speichern Sie ihre Datei und aktualisieren sie danach ihre Browser-Ansicht.
  3. Fügen Sie einen zweiten Text-Absatz in ihre HTML-Datei ein. In diesem soll „Wirklich toll“ stehen.
    Zwischen den Wörtern soll in eine neue Zeile gewechselt werden.