4. März 2010 um 10:27
Das HTML Einsteigerseminar – Lektion 2
Autor: Marc Koschel abgelegt unter Tutorials (2 Kommentare)
In der vergangenen Lektion haben wir uns den generellen Aufbau einer HTML-Seite angeschaut. Wir haben gelernt, dass sie prinzipiell in zwei Bereiche aufgeteilt ist: Auf der einen Seite ist der Header-Bereich auf der anderen der Body-Bereich. Lektion 2 beschäftigt sich nun mit der Strukturierung des Inhalts.
Strukturierung des Inhalts
Wir wollen uns zunächst weiter mit dem Body-Bereich beschäftigen. Sie können einfach zwischen dem Anfangs-Tag <body> und dem Ende-Tag </body> beliebigen Text schreiben, dieser wird dann im Browser angezeigt.
<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Titel der Seite</title></head>
<body>
Hier steht der Text, der im Browser angezeigt wird.
</body>
</html>
Wenn man nun seine erste Webseite erstellt, denkt man sich, wunderbar, dann mache ich das genauso, wie ich es aus MS Word kenne: Wir schreiben los, machen Absätze, Zeilenumbrüche, größeren Abstand (Tabulator), etc. Schaut man sich dies dann hinterher im Browser an, ist man verwundert, denn der Browser zeigt alles fortlaufend an mit jeweils einem Leerzeichen zwischen den einzelnen Wörtern. Eine neue Zeile entsteht nur, wenn der Rand des Browserfensters erreicht wurde.
<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Strukturierung einer Webseite</title></head><body>
Ich schreibe hier Text mit Lücken
mache eine Zeilenumbruch
und einen Absatz
und rücke diese Zeile mit der Tabulatortaste ein.
</body>
</html>
HTML ohne Strukturierung
In dem folgenden Screenshot erkennt man, dass der Browser alle Absätze, Zeilenumbrüche und Einrückungen entfernt hat. Ebenso werden alle Leerzeichen auf ein Leerzeichen zwischen den einzelnen Wörtern reduziert.
L2 HTML ohne Strukturierung
Was heißt dies nun für uns?
Dies bedeutet für uns, dass wir dem Browser Anweisungen geben müssen, wenn er einen Absatz, Zeilenumbruch oder andere Formatierungen vornehmen soll. Dazu verwenden wir die in Lektion 1 angesprochenen TAGS.
Vor einigen Jahren wurden verschiedene Dinge in HTML umgesetzt. Zum einen strukturierte man sein Dokument, welches man im Browser anzeigen wollte zum anderen formatierte man es (Schriftfarbe, Hintergrund, fett, etc.). Davon ist man abgekommen. Heute versucht man dies zu trennen. HTML sollte nur noch für die Strukturierung einer Webseite verwendet werden. Alle Formatangaben, also wie man die einzelnen Elemente der strukturierten Seite im Browser ausgeben soll, erfolgt über sogenannte Cascading Stylesheets (wird an anderer Stelle erläutert). Dennoch findet man auch heute noch in vielen Webseiten Formatierungsangaben direkt im HTML-Code.
Grundelemente der Strukturierung in HTML
Überschriften
In HTML können sechs verschiedene Überschriften gewählt werden um Hierarchien in der Webseite darzustellen.
Die Tags hierzu heißen (jeweils Anfangs- und Endetag):
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
“h” kommt aus dem Englischen und steht für heading = Überschrift. Alle Tag-Bezeichnungen stammen aus dem Englischen.
Textabsatz
Um einen normalen Absatz im fortlaufendem Text zu kennzeichenen, wird das p-Tag (paragraph = Paragraf) verwendet:
<p> </p>
Zeilenumbruch
Um innerhalb eines Absatzes eine neue Zeile beginnen zu können, gibt es einen Tag für den Zeilenumbruch. Für diesesn Tag gibt es kein Ende-Tag. Wie bereits in Lektion 1 erwähnt, wird daher – um XML-konform zu bleiben – der Schrägstrich “/” des Ende-Tags im Anfangs-Tag nach der Bezeichnung gesetzt. Das Tag für den Zeilenumbruch lautet also:
<br />
“br” steht für break = Bruch/Zeilenumbruch.
Erzwungenes Leerzeichen
Nun fehlt aus unserem Beispiel oben noch der Tabulator. Diesen gibt es in HTML nicht. Man muss anstelle des Tabulator also mehrere Leerzeichen setzen. Doch auch dabei haben wir gesehen, dass der Browser mehrere Leerzeichen ja auf ein einziges gekürzt hatte. Wir müssen also dem Browser eine Anweisung geben, ein erzwungenes Leerzeichen anzuzeigen. HTML hält hierfür die sogenannten benannten Zeichen (named entity) vor. Diese gibt es in zwei Varianten, entweder mit einer Bezeichnung oder in ihrer Unicodevariante. In beiden Fällen beginnen diese Zeichen aber immer mit dem Ampersand (&) und enden mit dem Semikolon (;). Für das erzwungene Leerzeichen verwendet man dann:
Unicode in HTML
&160;
“nbsp” steht hierbei für non-breaking space = geschütztes Leerzeichen.
HTML mit Strukturierung
Nun können wir also unser Ausgangsbeispiel neu gestalten.
<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Strukturierung einer Webseite</title></head><body>
<p>Ich schreibe hier Text mit Lücken<br /> mache eine Zeilenumbruch</p> <p>und einen Absatz</p> <p> und rücke diese Zeile mit der Tabulatortaste ein.</p>
</body>
</html>
Schauen wir uns das ganze noch im folgenden Screenshot an, erkennen wir, dass es nun so im Browser aussieht, wie wir es ursprünglich auch haben wollten.
L2 HTML mit Strukturierung
Zusammenfassung und Ausblick
Sie haben in dieser Lektion die Grundelemente zur Strukturierung einer HTML-Seite kennengelernt. Diese sind natürlich noch nicht ausreichend, um Webseiten sinnvoll erstellen zu können.
Daher schauen wir uns in der folgenden Lektion 3 weitere Strukturierungselemente an. Dazu gehören logische und physische Auszeichnungen im Text, allgemeine Elemente für den Textbereich, Trennlinien und Listen sowie Zitate und Adressen.
In weiteren Kapiteln werden wir uns dann noch mit Verweisen (Links), Grafiken, Tabellen und Formularen beschäftigen.
Das HTML Einsteigerseminar – ein Tutorial | koschel.IT
Pingback vom 04. März 2010 um 10:36
[...] Das HTML Einsteigerseminar – Lektion 2 [...]
Das HTML Einsteigerseminar – Lektion 1 - koschel.IT
Pingback vom 14. Oktober 2010 um 10:18
[...] Das HTML Einsteigerseminar – Lektion 2 [...]