Text

Ein Textabschnitt

Einfacher Text wird wie in einem Buchtext in Absätzen geschrieben. Die Absätze heißen im Englischen „Paragraph“ und daher in HTML einfach kurz „p“. Text muss nicht in Absätzen strukturiert werden, es vereinfacht aber die korrekte Darstellung. Es ist möglich mehrere p-Tag in einem HTML Dokument zu haben, es macht allerdings wenig Sinn diese zu schachteln.

Schreibe den folgenden Code zwischen die body-Tags des Grundgerüsts:

<p>Beispieltext</p>
<p>Noch ein Absatz</p>

Anzeigebeispiel

Beispieltext

Noch ein Absatz

Zeilenumbruch

Der Text zwischen den p-Tags wird auf der Homepage als Absatz ausgegeben und hinter dem schließenden p-Tag wird ein neuer Absatz begonnen. Möchte man innerhalb eines Absatz einen Zeilenumbruch erzwingen, so kann man das br-Tag verwenden („br“ für „break“ - Zeilenumbruch)

<p>Beispieltext<br />
Zweite Zeile</p>

Anzeigebeispiel:

Beispieltext
Zweite Zeile

Überschriften

h1 steht für Headline 1 (Überschrift 1). Es gibt die Headlines 1-6 wobei h1 standardmäßig die größte Schrift ist und h6 die kleinste. Wie die Überschriften dargestellt werden ist erstmal dem Browser überlassen, wir werden aber später noch Einfluss darauf nehmen. Wie Texte unterstrichen oder fett dargestellt werden können, wird im Kapitel Textformatierung erklärt. Am schließenden Headline-Tag ist ein Zeilenvorschub, so dass nachfolgender Text nicht in der Zeile der Überschrift beginnt.

Überschriften gehören nicht zu Abschnitten. Auch wenn HTML die Sache in der Regel sehr locker sieht, sollten Überschriften über den betreffenden Textabschnitten stehen.

<h1>Hauptüberschrift</h1>
<p>Text</p>
<h2>Kapitel</h2>
<p>Text</p>
<h3>Unterkapitel</h3>
<p>Text</p>

Anzeigebeispiel:

Hauptüberschrift

Text

Kapitel

Text

Unterkapitel

Text

Listen

Listen beginnen mit einem die komplette Liste umfassenden ul-Tag, in dem sich li-Tags befinden. Jeder neue li-Tag bedeutet ein neues Element. Vergiss nicht jedes li wieder zu schließen und die Liste durch ein </ul>-Tag zu beenden.

Code

Schauen wir uns eine Liste an:

<ul>
  <li>Erster Punk</li>
  <li>Zweiter Punkt</li>
  <li>Dritter Punkt</li>
</ul>

Anzeigebeispiel:

  • Erster Punkt
  • Zweiter Punkt
  • Dritter Punkt

Links

Der a-Tag steht für „Anchor“ und verkettet Dokumente in dem auf andere Stellen eines (zum Beispiel sehr großen) Textes verwiesen wird oder eben auf andere Seiten, unabhängig ob auf der eigenen Webseite oder fremde Seiten. Der a-Tag sieht in der Regel folgendermaßen aus:

<a href="URL">LINKTEXT</a>

href ist ein Attribut des a-Tags. Der zugewiesene Wert ist die Adresse der Seite, auf die verlinkt wird. Als Beispiel will ich hier mal auf www.proggen.org verlinken:

Code

<a href="http://www.proggen.org">proggen.org</a>

Anzeigebeispiel:

Wie bei der Überschrift und beim p-Tag gilt: Das, was zwischen den Tags steht wird als Text ausgegeben. Im nächsten Kapitel werden Links im Detail beschrieben.