Webseiten erstellen mit (X)HTML und CSS Lernheft 5 (X)HMTL: Block-Elemente Inhaltsverzeichnis 5.1 Einleitung... 2 5.2 Was ist ein Block-Element?... 3 5.3 Das <p>-tag... 4 5.4 Praktische Übungen mit Lösungen... 4 5.5 Überschriften in (X)HTML... 5 5.6 Weitere Block-Elemente... 10 5.6.1 Das <blockquote>-element... 10 5.6.2 Das <address>-element... 11 5.6.3 Das <pre>-element... 14 5.7 Zusammenfassung... 15 5.8 Hausaufgabe... 16 Copyright Laudius GmbH 25900-01
5.1 Einleitung Als Teilnehmer(in) dieses Lehrganges sind Sie auf dem besten Wege, ein(e) gute(r) Webdesigner(in) zu werden. Sie kennen die wichtigsten Sprachen des Web, die Gesetze des Webdesign, das Prinzip der Quelltext-Validierung, den Unterschied zwischen semantischer und physischer Textauszeichnung, die verschiedenen Dokumenttyp-Definitionen, den grundlegenden Aufbau einer (X)HTML-Seite, die wichtigsten logischen/semantischen Inline-Elemente von (X)HTML, zahlreiche physische Inline-Elemente, die allerdings fast alle veraltet/deprecated sind, die Funktion von CSS als Layoutsprache zur Ergänzung von (X)HTML, die Unterschiede zwischen HTML und XHTML, die Technik, (X)HTML-Elemente zu verschachteln, die Problematik der Zugänglichkeit von Webseiten, die aktuellen Browser, die Geschichte/Entwicklung der Sprachen des Web, das Grundgerüst einer Webseite, die Funktion des <title>-elementes, Meta-Tags für die Definition des Zeichensatzes im Dokumentkopf, Möglichkeiten, den Zeilenumbruch zu steuern. In dieser Lerneinheit werden Sie weitere Möglichkeiten der Seitenstrukturierung kennen lernen. Ziel ist es, dass Sie Block-Elemente, wie etwa Absätze und Überschriften, mit (X)HTML auszeichnen und von Inline-Markup, das Sie in der vergangenen Lerneinheit kennen gelernt haben, abgrenzen können. Lernziele: Sie können nach Durcharbeitung dieses Lernhefts verstehen, worin der Unterschied zw. Inline- und Block-Elementen besteht, lernen, welche Möglichkeiten bestehen, Block-Elemente ineinander zu verschachteln, erkennen, wie Sie Block-Elemente auf Ihren Webseiten sinnvoll einsetzen können, lernen, wie Sie das Erscheinungsbild bzw. die Darstellung von Block-Elementen durch Inline-Markup und andere (X)HTML-Elemente beeinflussen können. In der vergangenen Lerneinheit ging es um die Darstellung des Fließtextes auf Internetseiten. Sie haben die wichtigsten Inline-Elemente von HTML und XHTML kennen gelernt. 2
Ebenso wie bei der herkömmlichen Textverarbeitung und -gestaltung handelt es sich bei Fließtext um fortlaufend erfasste Informationen, die unter anderem durch Überschriften, Tabellen, Aufzählungszeichen bzw. -punkte, Absätze und andere sogenannte Block-Elemente gegliedert bzw. strukturiert werden können. Erklärung der Symbole Selbstlernaufgaben Hausaufgabe Zusammenfassung Hinweis bzw. Tipp Lösungen zu den Selbstlernaufgaben Notizen 5.2 Was ist ein Block-Element? Im Rahmen dieses Lehrgangs kann leider keine vollständige Abhandlung der hier dargestellten Thematik erfolgen, da XHTML und auch HTML über eine große Anzahl Elemente verfügen. Eine (nahezu) vollständige Darstellung finden Sie zum Beispiel auf der Website von Selfhtml. Das Gegenstück zum Inline-Element ist das Block-Element. Block-Elemente können Text und Inline-Elemente enthalten, einige wenige Block-Elemente können sogar andere Block-Elemente enthalten. Ein Block-Element kennen Sie schon: <p>. Dieses Element kennzeichnet einen Absatz. (X)HTML erlaubt es oft nicht, ein Block-Element innerhalb eines anderen anzuordnen, da ein Großteil aller Block-Elemente einen eigenständigen Textabschnitt bildet. Die Vorgaben der Browser sorgen dafür, dass diese Elemente als Blöcke optisch voneinander abgesetzt werden, wenn nichts anderes definiert wird. Der Text innerhalb von Block-Elementen kann mit Inline-Elementen weiter ausgezeichnet werden; denn diese unterbrechen im Gegensatz zu Block-Elementen den Textfluss nicht. Dagegen dürfen/sollten Sie Block-Elemente nicht innerhalb von Inline- Elementen unterbringen, auch wenn fehlertolerante Browser dies teilweise zulassen. Welche Möglichkeiten es gibt, Elemente ineinander zu verschachteln, erfahren Sie im Detail unter http://de.selfhtml.org/html/referenz/elemente.htm oder http://www.peterkropff.de/site/html/typen.htm. 3
5.3 Das <p>-tag HTML- und XHTML-Texte sind aus Absätzen aufgebaut. Zur Absatzformatierung dient bei (X)HTML vor allem das Element <p>. Das Element <p> (paragraph) bildet einen Textblock und damit sowohl eine inhaltliche Einheit als auch ein geschlossenes Darstellungselement. Achtung: In einem validen (X)HTML-Dokument darf ein Absatz keine weiteren Block-Elemente enthalten; es können also weder weitere Absätze noch Überschriften in einen Absatz eingebettet werden. Absätze werden vom Browser zumeist mit einem erkennbaren Abstand zum umgebenden Text dargestellt, wenn nicht via CSS ein anderes Format vorgegeben wird. Das folgende Beispiel zeigt ein transitional 1.0 XHTML-Dokument mit 2 Absätzen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title> XHTML </title> <p> Das <p>-tag gehört zu den Block-Elementen von (X)HTML. Es kennzeichnet einen Absatz, führt also zu einer Unterbre chung des Fießtextes. Absätze bilden Untereinheiten einer Internetseite. <p> Innerhalb eines Absatzes können auch <em>inline- Elemente</em> eingesetzt werden. </body> Listing: Absätze mit Inline-Element auf einer (X)HTML-Seite 5.4 Praktische Übungen mit Lösungen Übernehmen Sie den Quelltext in einen ASCII-Editor und codieren Sie die Umlaute und die Sonderzeichen wie folgt: < < > > ä ä ö ö ß ß 4
Speichern Sie das Listing unter dem Namen UEBUNG6.HTM, validieren Sie das Dokument auf der W3C-Seite und vergleichen Sie Ihr Anzeigeergebnis mit der folgenden Abbildung: Abb.: Absätze mit Inline-Element auf einer (X)HTML-Seite 5.5 Überschriften in (X)HTML Zur Strukturierung von Texten dienen in (X)HTML vor allem Absätze (markiert durch das Element <p>) und Überschriften. Zum Auszeichnen von Überschriften unterschiedlicher Stufen bietet (X)HTML die Elemente <h1>, <h2>, <h3>, <h4>, <h5> und <h6> (h ist die Abkürzung für heading, dt. Überschrift ). Dabei kennzeichnet <h1> eine Überschrift der höchsten Ebene, <h2> kennzeichnet eine Unterüberschrift von h1, Die Überschriftenformate sind Absatzformate, die mindestens eine Zeile betreffen, und haben damit in den meisten Browsern einen Abstand zum vorhergehenden und nachfolgenden Absatz, wenn nicht durch CSS etwas anderes festgelegt ist. Im Regelfall werden Überschriften höherer Ordnung größer dargestellt. Die exakte Darstellung von Überschriften, insbesondere deren Schriftart und Schriftgröße, ist vom Browser abhängig (semantische Textauszeichnung). Die Elemente zur Auszeichnung von Überschriften dienen dazu, einen Text inhaltlich zu strukturieren und sollten nicht dazu missbraucht werden, um bestimmte Darstellungseffekte (z. B. große, fette Schrift) zu erzielen. 5
Die Elemente <h1> <h6> werden für Überschriften verwendet. Sie werden u. a. auch benutzt, um Inhaltsverzeichnisse zu erzeugen. Hier ein Beispiel-Dokument für die (hierarchische) Verwendung von Überschriften auf einer Webseite im Format XHTML 1.0 strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>überschriften </title> <h1>elektrogerä te</h1> <h2>computer</h2> <h3>notebooks</h3> <h4>teurer als 1500,00 </h4> <h5>diagonale mind. 19 Zoll</h5> </body> Listing: Hierarchische Überschriften in (X)HTML Speichern Sie das Listing unter dem Namen UEBUNG7.HTM, validieren Sie es und vergleichen Sie Ihr Anzeigeergebnis mit der folgenden Abbildung: Abb.: Hierarchische Überschriften in (X)HTML 6
Da nicht jeder Browser den Zeichensatz ISO 8859-1 beherrscht und die deutschen Umlaute nicht zu den ersten 128 ASCII-Zeichen gehören, haben wir das Zeichen ä mit seiner XHTML-Entsprechung ä codiert, der Buchstabe Ü entspricht Ü Natürlich gibt es noch andere Auszeichnungsmöglichkeiten als Überschriften und Absätze. So lassen sich etwa beliebige Textpassagen eines Dokuments mit dem Element <div> als zusammengehörender Abschnitt auszeichnen. Optisch wirkt sich dieses Element allerdings nur dann aus, wenn es über Attribute mit einer CSS-Regel verbunden wird. Ohne Attribute sorgt es nur dafür, dass der in ihm enthaltene Text in einen Block gesetzt, also vom vorangehenden und folgenden Text abgesetzt wird. Näheres dazu im CSS-Teil dieses Kurses. Hinzu kommen noch einige Block-Elemente, mit denen Sie Textblöcken eine bestimmte Bedeutung zuweisen und sie z. B. als Adresse oder Zitat kenntlich machen können. Selbstlernaufgabe: Das folgende Beispiel in strict-xhtml 1.0 zeigt eine Anwendung für Überschriften erster und zweiter Ordnung: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <meta http-equiv="content-type" content="text/html; charset= ISO-8859-1" /> <title> XHTML </title> <h1>elemente in (X)HTML</h1> <h2>block-elemente</h2> <p>ein <em>block-element</em> dient in (X)HTML der Text- Strukturierung. Zu den Block-Elementen gehören unter anderem Überschriften unterschiedlicher Ordnung sowie Absätze. <h2>inline-elemente</h2> <p>man kann grundsätzlich zwei Arten unterscheiden: semantische und physische bzw. darstellungsbezogene Elemente. Letztere sind heute überholt, da sich mit CSS in allen Fällen derselbe Effekt erreichen und fast immer genauer steuern lässt. </body> Listing: Überschriften und Absätze in (X)HTML Speichern Sie das Listing unter dem Namen UEBUNG8.HTM und ersetzen Sie Umlaute und Sonderzeichen durch ihre Entsprechungen in (X)HTML (Ü entspricht Ü). Validieren Sie das Dokument und vergleichen Sie Ihr Anzeigeergebnis mit der folgenden Abbildung: 7
Abb.: Überschriften und Absätze in (X)HTML Selbstlernaufgabe: Zunächst eine Webseite, auf der Zitate platziert sind: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml11.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title> XHTML </title> <p>die Sprache XML (extensible Markup Language) heißt auf Deutsch <q>erweiterbare Auszeichnungssprache</q>; die Abkürzung SGML steht für <cite> Structured Generalized Markup Language</cite>. </body> Listing: Zitate im Fließtext, XHTML 1.1 Speichern Sie das Listing mit codierten Umlauten unter dem Namen UEBUNG9.HTM und validieren Sie es auf der Seite des W3C. Verwenden Sie semantische Textauszeichnung, um das folgende Ergebnis zu erreichen. 8
Abb.: Zitate im Fließtext Führen Sie nun eine erneute Validierung des Quelltextes durch. Ihre Lösung könnte wie folgt aussehen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml11.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title> XHTML </title> <p>die Sprache XML (e<strong>x</strong>tensible <strong>m</strong>arkup <strong>l</strong>anguage) heißt auf Deutsch <q>erweiterbare Auszeichnungssprache</q>; die Abkürzung SGML steht für <cite> <strong>s</strong>tructured <strong>g</strong>eneralized <strong>m</strong>arkup <strong>l</strong>anguage</cite>. </body> Listing: UEBUNG9.HTM Lösung 9
5.6 Weitere Block-Elemente Bisher haben Sie Überschriften und Absätze als Block-Elemente kennen gelernt. HTML und auch XHTML stellen noch viele weitere Block-Elemente zur Verfügung. Einige davon werden Sie nun kennen lernen. 5.6.1 Das <blockquote>-element Ein weiteres Block-Element, das Sie verwenden können, heißt <blockquote>. Das Block-Element <blockquote> findet häufig Anwendung. Es wird ähnlich wie das Element <p> gehandhabt, dient aber dazu, längere Zitate auszuzeichnen. Solche Zitatblöcke werden von vielen Browsern als beidseitig eingerückte Absätze dargestellt. Es ist jedoch nicht empfehlenswert, das Element <blockquote> nur zum Erzielen dieses Formatierungseffektes zu verwenden. Das Element ist zur logischen Auszeichnung von Zitaten gedacht, und die Darstellung kann abhängig von den Browsereinstellungen variieren. <blockquote> lässt sich auch zur Formatierung eingerückter Abschnitte verwenden; jedoch ist dieses Verfahren durch CSS unnötig geworden. Im folgenden Beispiel für ein abgesetztes Zitat ist die Definition des Netzwerk- Begriffes mit dem Element <blockquote> ausgezeichnet. Wie bei den semantischen Auszeichnungen ist auch hier die exakte Darstellung dem Browser überlassen. Im Regelfall wird der Text als eingerückter Absatz dargestellt. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>textgestaltung </title> <h2>was ist ein Netzwerk?</h2> <p>den Begriff <em> Netzwerk</em> gibt es nicht nur im Computerbereich. Auch im sozialen Leben spielen Netzwerke eine entscheidende Rolle. Hier eine Definition: <blockquote> <p> Unter einem Netzwerk ist eine Menge von Akteuren zu verstehen, die untereinander durch Beziehungen verbunden sind. Individuen, Haushalte, Familien, Zweckverbände, andere soziale Gruppen, lokale oder regionale Einheiten... Charakteristische Beziehungen in der Menge dieser Akteure sind u. a. Verwandtschaft, Freundschaft, Informationsaustausch, Arbeitsleistungen, Transaktion materieller Ressourcen </blockquote> </body> Listing: Verwendung des <blockquote>-elementes 10
Speichern Sie das Listing mit codierten Umlauten unter dem Namen UEBUNG10.HTM, validieren Sie die Datei und vergleichen Sie Ihr Anzeigeergebnis mit der folgenden Abbildung: Abb.: Verwendung des <blockquote>-elementes 5.6.2 Das <address>-element Weniger häufig wird das Element <address> benutzt. Es definiert einen eigenen Absatz für E-Mail und Post-Adressen. Es ist guter Stil (und oft auch gesetzlich vorgeschrieben), auf einer Webseite die Adressen der Verantwortlichen anzugeben. Das Element <address> erlaubt es, Adressen schnell zu erkennen. Wenn keine weitere Formatierungsvorschrift angegeben ist, werden Adressen im Browser vom übrigen Text abgesetzt und kursiv dargestellt. Eigene Notizen 11
Selbstlernaufgabe: Hier ein Code-Beispiel zum <address>-element: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title> address-element </title> <h3> Einsatz des <address>-tags </h3> <p> Verantwortlich für diese Seite: <address> Peter Krueger, P.Krueger@gmx.net </address> </body> </body> Listing: Verwendung des <address>-elementes Speichern Sie das Listing mit codierten Umlauten und Sonderzeichen unter dem Namen UEBUNG11.HTM, validieren Sie es und vergleichen Sie Ihr Anzeigeergebnis mit der folgenden Abbildung: Abb.: Ein <address>-element 12
Lösung: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <meta http-equiv="content-type" content= "text/html; charset=iso-8859-1" /> <title>address-element</title> <h3> Einsatz des <address>-tags </h3> <p> Verantwortlich für diese Seite: <address> Peter Krueger, P.Krueger&at;gmx.net </address> </body> Listing: Lösungsdatei UEBUNG11.HTM Eigene Notizen 13
5.6.3 Das <pre>-element Das Element <pre> werden Sie vor allem brauchen, wenn Sie in einem (X)HTML- Dokument über (X)HTML oder Software-Themen informieren. Zwischen <pre> und </pre> schließen Sie Quelltext ein, der wörtlich und vor allem zeichengenau wiedergegeben werden soll. Leerzeichen, Tabulatoren und Zeilenenden werden dann so wiedergegeben, wie sie im Text erscheinen, während sie der Browser sonst bis auf einzelne Leerzeichen zwischen den Wörtern tilgen würde. Außerdem wird zur Wiedergabe eine Nichtproportionalschrift wie Courier benutzt. Hier ein Code-Beispiel: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title> PRE-Element </title> <h2>listing einer Batch-Datei </h2> <pre> xcopy c:\temp f:\sik /s xcopy d:\daten\texte f:\sik /s xcopy d:\tabellen\heute f:\sik </pre> </body> Listing: Verwendung des <pre>-elementes Speichern Sie das Listing unter dem Namen UEBUNG12.HTM, validieren Sie es und vergleichen Sie Ihr Anzeigeergebnis mit der folgenden Abbildung: Abb.: Ein <pre>-element 14
Informationen über weitere Block-Elemente finden Sie auch unter http://htmlhelp.com/de/reference/html40/block.html. Die Block-Elemente heißen hier Block-Level-Elemente. Um die Einhaltung aktueller Standards zu gewährleisten, können Sie auf dieser Seite alle nicht in den strict- Versionen enthaltenen Elemente ausblenden. 5.7 Zusammenfassung Geschafft! Sie kennen nun die Grundstrukturen jedes (X)HTML-Textes: Inline-Elemente und Block-Elemente. In dieser Lerneinheit haben Sie einiges über Block-Elemente erfahren: 1. Anschriftenfelder und auch E-Mail-Adressen können durch das Element <address> vom übrigen Text unterschieden werden. 2. Das Element <pre> lässt sich einsetzen, um Text eingabegetreu einschließlich von Leerraum wiederzugeben. 3. Textabschnitte <p> und Überschriften <h1>...<h6> sind universelle Mittel zur Strukturierung von Text. Darüber hinaus gibt es in HTML und in XHTML auch Elemente, mit denen man auf die spezifische Bedeutung eines Textabschnitts hinweisen kann. Eine solche Auszeichnung hat in der Regel Konsequenzen für die Darstellung des Textes. Sie kann aber auch wichtig sein, wenn man den Text durchsuchen will. So lassen sich z. B. Zitate und Adressen mit Hilfe dieser Elemente aus größeren Textmengen automatisch herausfiltern. 4. Längere Zitate können Sie mit <blockquote> auszeichnen; diese werden dann meistens beidseitig eingerückt. Kurze Zitate innerhalb von Fließtext (kein Absatzwechsel) werden als Inline-Elemente mit <cite> oder <q > ausgezeichnet: Sie haben mit einem Text-Editor verschiedene Webseiten erstellt, die dem Sprachstandard von HTML 4.01 XHTML 1.0 oder XHTML 1.1 entsprechen. Das optische Aufbereiten Ihres Quelltextes und die Angabe eines treffenden Seitentitels im <title>- Element <title>... </title> ist für Sie selbstverständlich. 15
Validierung ist Ihr oberstes Gebot. Sie lassen jede (X)HTML-Datei durch den W3C- Validator überprüfen und Sie beseitigen die monierten Fehler. Sie halten sich streng an die Zielsetzung von (X)HTML, dem Client die endgültige Darstellung zu überlassen; daher vermeiden Sie wo immer möglich physische Formatierung bzw. Textauszeichnung und geben grundsätzlich semantischen Elementen den Vorzug. Sie wissen, dass es sprachabhängige Zeichen gibt, die nicht durch jeden Browser bzw. auf jedem Ausgabegerät dargestellt werden können. Diese sollten immer durch Ihre (X)HTML-Entsprechungen ersetzt/codiert werden. Einige davon sind ä ä ö ö ü ü Ä Ä Ö Ö Ü Ü ß ß Näheres zu dieser Problematik lernen Sie in der folgenden Lerneinheit. 5.8 Hausaufgabe Erstellen Sie unter Verwendung von semantischem Inline-Markup eine XHTML 1.1-Seite mit den Antworten zu folgenden Fragen. Speichern Sie die Datei unter LSG5_Ihr Nachname.HTM. 1. Wie können Sie feststellen, ob Ihre Webseite veraltete Elemente enthält? 2. Welche Dateitypen/-endungen kennzeichnen eine Webseite? 3. Begründen Sie, ob <sub> ein semantisches oder ein physisches Element ist. 4. Geben Sie jeweils 4 Block-Elemente, 4 Inline-Elemente an. 5. Welcher generelle Unterschied besteht in (X)HTML zwischen Inline-Elementen und Block-Elementen? 6. Worin bestehen Unterschiede und Gemeinsamkeiten zwischen einem Hyperlink und einem Anker? 16