Webseiten erstellen mit (X)HTML und CSS Lernheft 5

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
(X)HMTL: Block-Elemente
5.1
Lernheft 5
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
(X)HMTL: Block-Elemente
Lernheft 5
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
5.2
Selbstlernaufgaben
Hausaufgabe
Zusammenfassung
Hinweis bzw. Tipp
Lösungen zu den
Selbstlernaufgaben
Notizen
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 InlineElementen 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
(X)HMTL: Block-Elemente
5.3
Lernheft 5
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title> XHTML
</title>
</head>
<body>
<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>
<p> Innerhalb eines Absatzes können auch <em>InlineElemente</em> eingesetzt werden.
</p>
</body>
</html>
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
(X)HMTL: Block-Elemente
Lernheft 5
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.:
5.5
Absätze mit Inline-Element auf einer (X)HTML-Seite
Ü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
(X)HMTL: Block-Elemente
Lernheft 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title>Überschriften
</title>
</head>
<body>
<h1>Elektrogerä te</h1>
<h2>Computer</h2>
<h3>Notebooks</h3>
<h4>teurer als 1500,00 €</h4>
<h5>Diagonale mind. 19 Zoll</h5>
</body>
</html>
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
(X)HMTL: Block-Elemente
Lernheft 5
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=
ISO-8859-1" />
<title> XHTML
</title>
</head>
<body>
<h1>Elemente in (X)HTML</h1>
<h2>Block-Elemente</h2>
<p>Ein <em>Block-Element</em> dient in (X)HTML der TextStrukturierung. Zu den Block-Elementen gehören unter anderem
Überschriften unterschiedlicher Ordnung sowie Absätze.
</p>
<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.
</p>
</body>
</html>
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
(X)HMTL: Block-Elemente
Abb.:
Lernheft 5
Ü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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title> XHTML
</title>
</head>
<body>
<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>.
</p>
</body>
</html>
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
(X)HMTL: Block-Elemente
Abb.:
Lernheft 5
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title> XHTML
</title>
</head>
<body>
<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>.
</p>
</body>
</html>
Listing: UEBUNG9.HTM – Lösung
9
(X)HMTL: Block-Elemente
5.6
Lernheft 5
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 NetzwerkBegriffes 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title>Textgestaltung
</title>
</head>
<body>
<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:
</p>
<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
</p>
</blockquote>
</body>
</html>
Listing: Verwendung des <blockquote>-Elementes
10
(X)HMTL: Block-Elemente
Lernheft 5
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.:
5.6.2
Verwendung des <blockquote>-Elementes
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
(X)HMTL: Block-Elemente
Lernheft 5
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title> address-Element
</title>
</head>
<body>
<h3>
Einsatz des <address>-Tags
</h3>
<p>
Verantwortlich für diese Seite:
</p>
<address>
Peter Krueger, [email protected]
</address>
</body>
</body>
</html>
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
(X)HMTL: Block-Elemente
Lernheft 5
Lösung:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content=
"text/html; charset=ISO-8859-1" />
<title>address-Element</title>
</head>
<body>
<h3>
Einsatz des <address>-Tags
</h3>
<p>
Verantwortlich für diese Seite:
</p>
<address>
Peter Krueger, P.Krueger&at;gmx.net
</address>
</body>
</html>
Listing: Lösungsdatei UEBUNG11.HTM
Eigene Notizen
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
13
(X)HMTL: Block-Elemente
5.6.3
Lernheft 5
Das <pre>-Element
Das Element <pre> werden Sie vor allem brauchen, wenn Sie in einem (X)HTMLDokument ü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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1" />
<title> PRE-Element
</title>
</head>
<body>
<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>
</html>
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
(X)HMTL: Block-Elemente
Lernheft 5
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 strictVersionen 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
(X)HMTL: Block-Elemente
Lernheft 5
Validierung ist Ihr oberstes Gebot. Sie lassen jede (X)HTML-Datei durch den W3CValidator ü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