HTML und XHTML

strukturelles Markup

Absatz oder Paragraph

Der zweite, wesentliche Baustein für strukturierte HTML-Dokumente ist der Absatz oder Paragraph, der durch das Element <p> repräsentiert wird. Viele Web-Publisher haben sich angewöhnt, <p> als eine Art Abstand zwischen zwei Textblöcken anzusehen. Das fällt um so leichter, als HTML es ja toleriert, dass das </p> weggelassen werden kann.

Wir müssen uns hier wieder auf das zurück besinnen, was wirklich gemeint ist, und das ist nämlich, dass <p> eine Text-Portion repräsentiert und nicht den Abstand davor oder danach. Genauer gesagt ist ein Absatz oder Paragraph auch wieder ein Behälter, und zwar für Text, Bilder und manches andere mehr. Wie man's schon in der Schule gelernt hat: Ein Absatz ist eine logisch zusammengehörende Portion von Informationen.

So, und nun wird's Zeit, unsere Web-Seite mit etwas Inhalt zu füllen.

Übung 5a

In dieser Übung übernehmen wir etwas Text in unsere Seite und versehen ihn mit der nötigen Struktur, die ihn in Titel und Absätze gliedert.

Öffne als erstes die Datei erster_text_der_startseite.txt, die du im Ordner zeug findest. Kopiere den Text dieser Datei zwischen <body> und </body> in deiner Datei index.html, mit der wir schon zu arbeiten begonnen haben.

Bevor du weiterfährst, lass dir deine Seite index.html nochmals im Browser anzeigen und sieh dir an, was du da angerichtet hast.

Ganz offensichtlich ist das noch nicht, was wir erwartet haben. Aber warum denn?

Der ganze Text, den du da in dein Dokument kopiert hast, wird einfach schön der Reihe nach wiedergegeben - weil du nämlich dem Browser noch keine Hinweise darauf gegeben hast, wie er's denn sonst machen sollte.

Eben erst haben wir über "White Space" gesprochen: darüber, dass Abstände und Zeilenschaltungen den Browser völlig kalt lassen. Die Auswirkungen davon siehst du nun.

Übung 5b

Füge nun selbständig die nötigen Tags ein, mit denen du den Text in Titel- und Absatz-Elemente gliedern kannst.

Achte wie immer darauf, die Elemente jeweils zu schliessen.

Und so haben wir uns das Resultat vorgestellt:

<html>
<head>
<title>die Pfefferschote</title>
</head>
<body>
<p>Entdecken und Kaufen | Würze in Kürze | Rezepte | Bücher | Kontakt | Menages</p>

<h1>Willkommen bei der Pfefferschote</h1>

<p>Die Pfefferschote beliefert seit über 50 Jahren die besten Feinschmeckerlokale in Berlin mit
Kräutern und Gewürzen.</p>

<p>Und nun, seit wir online erreichbar sind, steht dieses Qualitäts-Angebot zu fantastischen Preisen auch Ihnen offen.</p>

<p>Aber die "Pfefferschote" ist nicht nur einfach ein weiterer Online Shop. Auf unserer Site finden Sie ausführliche und interessante Informationen über alle Gewürze unseres Sortiments und natürlich auch Rezepte aus aller Welt, die ihren Geschmack auch voll zur Geltung bringen.</p>

<p>Über unsere Partnerschaft mit Amazon.de können Sie Rezeptbücher direkt übers Internet bestellen.</p>

<p>Aber erlauben Sie, dass wir uns kurz vorstellen.</p>

<h2>Die Pfefferschote</h2>

<h3>Geschichte</h3>

<p>1951 kehrte ein junger Mann namens Dieter Schwengele aus den Wirren des zweiten Weltkriegs in seine zerbombte Heimat zurück, entschlossen, beim Wiederaufbau seine Erfahrungen aus der weiten Welt einfliessen zu lassen.
Denn so hart der Krieg auch gewesen und so stark sein Verlangen war, ihn und die unmittelbare Vergangenheit zu den Akten zu legen und ein neues Leben anzufangen, so wusste er doch seit seinem Aufenthalt in Frankreich die Raffinements der dortigen Küche zu schätzen und brannte darauf, seinen Landsleuten den Weg über Presssack und Sauerkraut hinaus zu zeigen.
Wer eine solche Küche hervorbringt, war seine Überzeugung, verdient unsere Anerkennung und Aufmerksamkeit, und im tiefsten Innern hoffte er, damit auch zur Völkerverständigung beizutragen.</p>


<p>Nun, Sie können sich vielleicht vorstellen, dass das im damaligen Berlin gar nicht so einfach war. Zunächst stiess er überall auf Ablehnung, und Konrad Adenauer, dem er ein Rezeptbuch und eine Auswahl von Gewürzen übersandte, meinte lediglich: "Der junge Mann macht wohl Witze?"</p>

<p>Aber Dieter Schwengele gab nicht so schnell auf. Er perfektionierte seine Kochkunst, erweiterte seinen Horizont auf weitere Länder und ihre Spezialitäten, und immer behielt er den Spruch seines alten Meisters aus der Provence im Sinn.</p>

<p>Aus lausigen Zutaten gibt's nie einen guten Frass.</p>
<p>Die besten - und nicht notwendigerweise die teuersten - Zutaten sind letztlich die günstigsten, weil sie die besten Resultate bringen. Schliesslich, wer will schon den eigenen Magen verstimmen? Das ist eine Frage der Lebensqualität.</p>

<p>Harvey Day, das komplette Buch über Curry</p>

<p>Dieter Schwengele wusste immer, dass sich seine Überzeugung am Ende durchsetzen würde, und tatsächlich: Im Verlaufe der Jahre änderte sich der Lebensstil, die Leute wurden offener für Neues, Immigranten wurden häufiger, und die Pfefferschote in der deutschen Kochlandschaft, als die sein Geschäft angefangen hatte, wurde zu einer anerkannten Gewürz-Oase.</p>

<h3>Heute</h3>

<p>Heute kontrolliert Klaus-Jürgen, Dieters Enkel, eine Reihe von Gourmet-Geschäften in Berlin (3), Frankfurt, München und Wanne-Eickel. Zudem unterhält die Pfefferschote ein gut funktionierendes Verteilernetz in ganz Deutschland, mit dem sie auch Coop, Spar und Aldi beliefert.</p>

<h3>Unsere Produkte</h3>

<p>Die Pfefferschote steht für Echtheit, wie schon ihr Name symbolisiert, und sie setzt alles daran, nur die besten und authentischen Zutaten in hervorragender Qualität anzubieten. Wir stellen dies sicher, indem wir direkt beim Hersteller kaufen. Unsere Agenten bereisen die ganze Welt von der Beringstrasse bis zu den kanarischen Inseln und von Senegal bis Sisimiut auf der Suche nach den besten Produkten.</p>

<h3>Die Zukunft</h3>

<p>Natürliche, unverfälschte Lebensmittel werden sich auf lange Sicht durchsetzen, und die Pfefferschote fährt hier nicht nur auf dem Trittbrett mit, sondern steuert den ganzen Zug. Wir kaufen nicht nur aus ökologischer Produktion, sondern wir unterstützen auch jene Bauern und Betriebe, die sich unserer Bewqegung anschliessen und auf umweltschonende Produktion umstellen wollen.</p>

<h3>Unsere Läden</h3>

<p>Bleiben Sie nicht nur vor Ihrem Computer sitzen! Wenn Sie in der Nähe sind, schauen Sie doch bei uns rein! Überall, wo gekocht und gegessen wird, gibt's Menages!</p>
</body>
</html>

Diesmal müsste dein Browser etwas einleuchtenderes anzeigen.

Wenn du mehr als einen Browser auf deinem Computer installiert hast, dann ergreif die Gelegenheit und sieh dir das Resultat mal in verschiedenen Browsern an. Es ist tatsächlich so, dass es in unterschiedlichen Browsern unterschiedlich dargestellt werden kann, da das vom Browser, seiner Version, dem zugrundeliegenden Betriebssystem und nicht zuletzt auch von den Einstellungen abhängt, die du als Eigentümer des Computers gemacht hast.

Wir werden uns wie versprochen an die Standards halten, und diese, viel mehr noch die Style Sheets, sorgen bereits für eine recht einheitliche Darstellung quer durch die ganze Browser-Palette. Für unsern Kurs reicht das völlig aus. Wenn du in der Praxis Webseiten erstellst, wirst du dir hingegen deine Gedanken darüber machen müssen, wieviel Aufwand du betreiben willst, um deine schönen, Standard-konformen Seiten mit irgendwelchen Tricks soweit zu quälen, dass sie auch auf einem veralteten Browser noch immer das von dir gewünschte Resultat bringen.

Zur Zeit ist unser Dokument aber noch sehr einfach und sollte in seiner Struktur klar und einleuchtend präsentiert werden, auch wenn du einen veralteten Browser einsetzt. Sollte das nicht der Fall sein, sollten die Absätze nicht deutlich erkennbar von einander abgesetzt sein, oder die Titel in Grösse und Level nicht zueinander passen, dann liegt der Verdacht nahe, dass dein HTML-Code noch Fehler enthält. Prüfe nach,

ob alle Elementnamen korrekt geschrieben sind
ob alle Elemente mit einem Close-Tag geschlossen sind
ob die Close-Tags richtig abgefasst sind (z.B. in der Form </h2>)
ob keine Überlappungen vorkommen (wie z.B. in <h1><p>Inhalt</h1></p>)

Ohne dass wir was gesagt hätten, stellt dein Browser die unterschiedlichen Titelstufen in unterschiedlicher Grösse dar, und auch um die Zeilenabstände hat er sich selbständig gekümmert. Früher (vor HTML 4) waren diese Parameter in HTML selbst festgelegt. Heute werden sie von Style Sheets gesteuert.

Diese Style Sheets habe ich nun schon ein paar Mal erwähnt. Wir werden sie nicht ausführlich behandeln können, aber einen ersten Blick drauf werfen wollen wir nun trotzdem, denn ihre Stellung ist mittlerweile von zentraler Bedeutung, und wir werden Style Sheets für den Rest dieses Kurses verwenden, also wird's Zeit, dass wir in der Praxis sehen, wie sie sich auswirken.

Homepapa
März 2004

Vorheriger Abschnitt:
White Space

Nächster Abschnitt:
Style Sheets