Deine erste Homepage
Kapitel 3
Struktur muss sein

Puh! Das mit dem FTP-Programm war nicht ganz einfach. Aber wir haben es schließlich geschafft. Doch jetzt, wo unsere Seite im Internet steht, ist es höchste Zeit, der Seite ein ordentlicheres Aussehen zu verpassen.

Struktur muss sein

Bisher war die Seite ja vollkommen unstrukturiert. Wir haben einfach unsere Inhalte zwischen <body> und </body> geschrieben. Und im Browser wird das alles vollkommen unformatiert angezeigt. Nun bringen wir die Inhalte unserer Seite in eine logische Struktur: Überschriften, Textabsätze und Listen. HTML bietet hierfür verschiedene Tags:

<h1> = Beginn Überschrift 1. Ordnung
</h1> = Ende der Überschrift 1. Ordnung
<h2> = Beginn Überschrift 2. Ordnung
</h2> = Ende der Überschrift 2. Ordnung
<p> = Beginn Textabsatz - hier fügt HTML einen Zeilenumbruch ein.
</p> = Ende Textabsatz
<br /> = Zeilenumbruch innerhalb eines Textabsatzes
<ul> = Beginn Liste.
<li> = Beginn einzelner Listenpunkt
</li> = Ende einzelner Listenpunkt
</ul> = Ende Liste

Anmerkung:
Eine saubere Gliederung durch den Einsatz sinnvoller Überschriften ist das wichtigste Gestaltungsmittel einer HTML Seite. Durch den richtigen Einsatz von Überschriften erleichterst du allen Besuchern, sich auf deiner Seite rasch zurecht zu finden.

Anmerkung 2:
Mit <br />haben wir erstmals ein self closing tag kennen gelernt, ein Tag, das nicht mit einem entsprechenden schließenden Tag geschlossen werden muss, sondern sich quasi selbst schließt.

Mit diesen Tags bewaffnet machen wir uns nun an die Gliederung unserer Seite.

Der Quelltext könnte dann so aussehen:


<html>
<head>
<title>Hier steht der Titel der Homepage</title>
</head>
<body>

<h1>Meine erste Homepage</h1>
<p>Das möchte ich der ganzen Welt mitteilen.</p>

<h2>Mein Leben</h2>
<p>In diesem Absatz steht ganz viel über mein Leben.</p>

<h2>Meine Freunde</h2>
<p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse.
Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch.
Zuerst genießt man. Dieser Genuß umfaßt alle Sinne.
Man wühlt in den Gummibärchen, man fühlt sie.
Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.
Die Tastempfindung geht auch ins Sexuelle.
Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre,
denn prinzipiell sind diese geschlechtsneutral.</p>

<h2>Hobbies</h2>
<ul>
<li>Dies ist mein erstes Hobby in einer langen Liste</li>
<li>Dies ist mein zweites Hobby in einer langen Liste</li>
<li>...</li>
<li>...</li>
<li>Dies ist mein letztes Hobby in einer langen Liste</li>
</ul>

</body>
</html>

Dieses Beispiel anschauen

Wenn wir uns nun unsere strukturierte Seite im Browser anschauen, dann macht das doch schon gleich einen ganz anderen, ordentlichen Eindruck. Und das, obwohl wir bisher noch gar nicht Hand ans Design gelegt haben. Der Browser macht das für uns. Und noch mehr: Solchermaßen sauber strukturierte Seiten sind barrierefrei, können also auch mit Screen Readern ordentlich gelesen werden. Und sogar Suchmaschinen wie Google freuen sich über saubere Struktur, und listen solche Seiten besser.

Weiterführende Informationen zur Textstrukturierung bei Selfhtml

Was haben wir in dieser Lektion gelernt?

Wir haben gelernt, dass Text korrekt strukturiert werden muss, damit Browser ihn ordentlich darstellen.
Wir haben die wichtigsten Tags zur Strukturierung von Text gelernt.

Zurück zum vorigen Kapitel | Weiter zum nächsten Kapitel

Impressum • Datenschutzerklärung

Deine erste HomepageKapitel 3Struktur muss sein

Struktur muss sein

Was haben wir in dieser Lektion gelernt?

Deine erste Homepage
Kapitel 3
Struktur muss sein