Chapter 8: HTML/XHTML I

Transkript

1 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-2 Chapter 8: HTML/XHTML I References: Erik Wilde: World Wide Web Technische Grundlagen. Springer, 1999, ISBN , 641 Seiten. Eric Ladd, Jim O Donnell, et al.: Using HTML 4, XML, and Java 1.2, Platinum Edition. QUE, 1999, ISBN X, 1282 pages. Rainer Klute: Das World Wide Web. Addison-Wesley, 1996, ISBN: X. Dave Raggett, W3C: HTML 3.2 Reference Specification. [ Dave Raggett, Arnaud Le Hors, Ian Jacobs (Eds.): HTML 4.01 Specification. W3C, Dec 24, [ User s Guide to ISO/IEC 15445:2000 HyperText Markup Language (HTML) [ XHTML [tm] 1.0: The Extensible HyperText Markup Language. W3C, Jan 26, [ Stefan Münz: HTML-Dateien selbst erstellen SELFHTML. [ [ Ian Graham: Introduction to HTML. [ NCSA Beginner s Guide to HTML (no longer maintained). [ Lernziele Genaue Kenntnis der Syntax der wichtigsten Konstrukte von HTML. Übersicht über andere Konstrukte von HTML 4. Eine gewisse Orientierung in der HTML Spezifikation (zum Nachschlagen in Zweifelsfällen). Eine Übersicht über Unterschiede in HTML Versionen. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-4 Inhalt Was ist HTML (1) 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames HTML steht für Hypertext Markup Language HTML ist die Sprache des Web: WWW-Browser (Netscape, Internet Explorer, etc.) zeigen Dateien an, die in der HTML-Syntax verfaßt sind. Diese Dateien können dann eventuell Programme in Javascript oder anderen Programmiersprachen enthalten.

2 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-6 Was ist HTML? (3) Was ist HTML (2) noch HTML ist die Sprache des Web: Außerdem verweisen die Dateien eventuell auf Dateien in anderen Formaten, z.b. Bilder im GIF- Format. Auch: Audio, Video, PDF, und Programme zum Download. Immer ist die HTML-Datei aber der Rahmen und enthält normalerweise auch den größten Teil des Textes. HTML ist eine spezielle Syntax für Textdateien. Nicht jede Zeichenkette ist gültiges HTML. Browser geben aber keine Fehlermeldungen aus und zeigen immer etwas an. Browser interpretieren HTML und erzeugen eine Bildschirm- oder Drucker-Ausgabe (ggf. auch Sprachausgabe). Zur Erhöhung der Portabilität sollte man die Korrektheit der HTML-Syntax mit einem Validation Service testen. Z.B. Baut man den Link in eine Seite ein, so kann sie durch Anklinken dieses Links geprüft werden. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-8 Was ist HTML (4) Was ist HTML? (5) Man kann HTML mit normalen ASCII Texteditoren erstellen, mit denen man z.b. auch C-Programme erstellen würde. Es gibt aber auch spezielle WYSIWYG Editoren für HTML, die das Dokument so anzeigen, wie es in einem Browser formatiert würde. Siehe auch Es gibt auch Umwandlungsprogramme, die HTML aus einem anderen Format erzeugen, z.b. Latex2html. HTML ist eine Anwendung der Standard Generalized Markup Language (SGML). Es gelten also die allgemeinen Syntax-Regeln von SGML, zusammen mit den Element-, Attribut- und Entity-Definitionen der HTML DTD. HTML 4.01 definiert 91 Element-Typen, davon sind aber 10 nur noch aus Kompatibilitätsgründen mit früheren Versionen enthalten und sollen nicht mehr verwendet werden.

3 8. HTML and XHTML Hypertext Markup Language, Part I 8-9 SGML, DTD Bereits seit 1986 gibt es die als ISO 8879 standardisierte Meta-Sprache SGML (Standard Generalized Markup Language = standardisierte verallgemeinerte Auszeichnungssprache). Diese Meta-Sprache erlaubt das Definieren von Auszeichnungssprachen mit Hilfe so genannter DTDs (Document Type Definitions = Dokumenttyp-Definitione In den DTDs wird festgelegt, welche Elemente eine Auszeichnungssprache hat, welche zugehörigen Attribute, sowie Regeln, welche Elemente innerhalb welcher anderen Elemente vorkommen können usw. 8. HTML and XHTML Hypertext Markup Language, Part I 8-10 XML, HTML Man entschloss sich dazu, eine reduziertere Variante von SGML zu etablieren, und zwar unter dem Namen XML (Extensible Markup Language = erweiterbare Auszeichnungssprache). XML erlaubt ebenso wie SGML das Definieren von Auszeichnungssprachen mit Hilfe von DTDs. HTML, das Anfang der 90er-Jahre entstand, wurde mit Hilfe von SGML definiert. Bis einschlielich HTML 4.x ist das auch heute noch der Fall. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-12 HTML, XHTML XML, HTML Im Zuge von XML und seiner wachsenden Bedeutung fr immer mehr Dateiformate, die auch im Web ihren Einsatz finden, entstand der Wunsch, auch HTML mit Hilfe von XML zu definieren anstatt wie bisher mit SGML. Damit kein Versionenwirrwarr entsteht, entschloss man sich dazu, dieses neue, XML-basierte HTML mit einem neuen Namen und eigener Versionenkontrolle auszustatten. Heraus kam dabei XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache). XHTML ist also XML-gerechtes HTML. Zusammenfassend: XHTML ist strenger definiert.

4 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-14 Doctypes(1) Mit der Dokumenttyp-Deklaration (Doctype)beginnt jedes HTML-Dokument und auch jedes XHTML- Dokument. Doctype nimmt Bezug auf die DTD (Dokumenttyp- Definition) und Sprachversion, die in der Datei verwendet wird und an die man sich halten muss. Ein strenger Parser kann die Anzeige der Datei z.b. im Browser verhindern, wenn die Datei syntaktische Fehler enthält. Doctypes(2) Maßgeblich dafür, was ein syntaktischer Fehler ist, ist die DTD, auf die man mit der Dokumenttyp- Deklaration Bezug nimmt. HTML-Variante: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN XHTML-Variante: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-16 Doctypes(3) Der einfachste gültige Doctype: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN > <!DOCTYPE HTML PUBLIC nennt den Typ -//W3C nennt den Herausgeber mit dem Hinweis, dass dieser ISO-zertifiziert ist +// oder nicht -// //DTD HTML 4.01 Transitional bezeichnet die Sprache (HTML oder XHTML) //EN > ist die Sprache der DTD, momentan immer englisch, hat nichts mit der Sprache der Web-Seite zu tun Doctypes(4) Optional kann noch ein Verweis zum verwendeten Doctype angegeben werden: nun kann der Browser immer auf die entsprechende DTD zurückgreifen. TRANSITIONAL bezeichnet eine Spezifikation vom HTML außer TRANSITIONAL kann noch STRICT oder FRAMESET verwendet werden.

5 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-18 HTML Beispiel XHTML Beispiel <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>my first HTML document</title> </head> <body> <h1>greeting</h1> <p>hello, world! </body> </html> <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>my first XHTML document</title> </head> <body> <h1>greeting</h1> <p>hello, world!</p> </body> </html> 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-20 Internationalisierung lang identifiziert die Sprache des Textes in dem Element, z.b. en für Englisch, de für Deutsch, fr für Französisch. Die Sprachangabe wird durch einen Ländercode spezializiert werden, z.b. en-gb, en-us, fr-fr, fr-be, fr-ca. Ist in einem Element kein lang Attribut angegeben, so gilt das des nächsten Vorfahren im Baum, bzw. der HTTP-Header Content-Language, falls das lang-attribut ganz fehlt. Das HTML-Element Jedes HTML-Dokument hat ein Element vom Typ HTML als Wurzelelement. D.h. HTML-Dokumente sind immer durch <HTML>... </HTML> geklammert, allerdings sind beide Tags optional. HTML hat nur die Attribute zur Internationalisierung: <!ATTLIST HTML %i18n;>

6 8. HTML and XHTML Hypertext Markup Language, Part I 8-21 HEAD (1) Das HEAD-Element enthält Informationen über das Dokument, wie Titel, Meta-Daten für Suchmaschinen, typisierte Links auf andere Dokumente, Style Sheets, Programmcode. Die Daten im HEAD-Element erscheinen nicht im eigentlichen Dokumentfenster. im HEAD-Element ist ein TITLE-Element notwenig, und ein BASE-Element erlaubt. Die Elemente können in beliebiger Reihenfolge vorkommen, aber jedes nur einmal. 8. HTML and XHTML Hypertext Markup Language, Part I 8-22 HEAD (2) Außerdem sind im HEAD-Element die Element-Typen SCRIPT, STYLE, META, LINK, OBJECT erlaubt. Da sie als Ausnahme (Inklusion) eingeführt sind, können sie in beliebige Reihenfolge vor/nach/zwischen TITLE und BASE angegeben werden, und beliebig häufig auftreten. Innerhalb von TITLE und BASE können sie nicht auftreten (BASE ist leer, in TITLE werden sie ausgeschlossen). HEAD hat die Internationalisierungs-Attribute und ein Attribut profile, das sich auf Meta-Daten bezieht (s.u.): 8. HTML and XHTML Hypertext Markup Language, Part I 8-23 TITLE Das HEAD-Element muß genau ein TITLE-Element enthalten. Innerhalb des TITLE-Elementes ist nur reiner Text erlaubt. Der Text sollte nicht zu lang sein, damit er noch in die Fensterüberschrift paßt (z.b. nicht mehr als 64 Zeichen). Suchmaschinen zeigen normalerweise den Dokument- Titel im Suchergebnis an. Einige Suchmaschinen geben Worten im Titel mehr Gewicht. 8. HTML and XHTML Hypertext Markup Language, Part I 8-24 META (1) Das Element META enthält Meta-Daten über das Dokument, insbesondere Informationen für Suchmaschinen. Meta-Daten sind Daten über Daten. Z.B. sind bei einer Relationalen Datenbank die eigentlichen Daten in Tabellen abgespeichert. Im Systemkatalog gibt es aber Tabellen, die die Namen aller Tabellen enthalten (und z.b. das Datum der Erzeugung). Das sind Meta-Daten. Z.B. sollte man Schlüsselworte für die Eintragung in Suchmaschinen so definieren: <META name="keywords" content="html, halle, vorlesung">

7 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-26 META (2) META (3) Man sollte auch eine kurze Beschreibung/Zusammenfassung des Dokumentes definieren, die Suchmaschinen in ihrer Ergebnisliste anzeigen: <META name="description" content="html-kapitel der WWW-Vorlesung im Wintersemester 2008/2009 an der Uni Halle"> Tut man das nicht, so zeigen viele Suchmaschinen nur die ersten paar Zeilen des Dokumentes an, die häufig nicht sehr aufschlußreich sind. Man kann Suchmaschinen auch mitteilen, daß diese Seite nicht in den Index eingetragen werden soll. <META name="robots" content="noindex, NOFOLLOW"> Allerdings verstehen viele Web-Roboter nur robots.txt. Meta-Tags können auch dazu dienen, nicht jugendfreie Seiten zu markieren. Browser können so konfiguriert werden, daß sie diese Seiten nicht anzeigen. PICS (Platform for Internet Content) wurde zu diesem Zweck entworfen, kann aber auch andere Information enthalten. IE verwendet Ratings des RSACi. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-28 META (4) BODY (1) Das Attribut content ist im Meta-Element notwendig, außerdem muß eines der beiden Attribute name oder http-equiv verwendet werden. Mit dem Attribut scheme kann die Interpretation der content-zeichenkette angegeben werden (z.b. Datumsformat). Meta-Daten für fortschrittliche Suchwerkzeuge sind eine wichtige Entwicklung, Das W3C arbeitet dazu am Resource Description Framework RDF. Das BODY-Element enthält den eigentlichen Text des Dokumentes. HTML unterscheidet zwei Arten Inhalt: Inline Elemente können im normalen Text vorkommen, ohne daß eine neue Zeile begonnen werden muß. Blockweise Elemente beschreiben größere Strukturen. Für sie muß normalerweise eine neue Zeile begonnen werden.

8 8. HTML and XHTML Hypertext Markup Language, Part I 8-29 BODY (2) Inhalt von BODY sind alle blockweisen Elemente, z.b. Paragraphen (P) und Überschriften (H1, H2,...). Innerhalb der Paragraphen, Überschriften, u.s.w. findet sich dann der eigentliche Text (also inline Inhalt). In HTML 3.2 konnte man auch direkt Text innerhalb des BODY-Elementes schreiben, jetzt soll der Text in Paragraphen etc. eingeschlossen werden. 8. HTML and XHTML Hypertext Markup Language, Part I 8-30 BODY (3) In strict HTML 4.01 hat BODY nur noch die allgemeinen Attribute und zwei Attribute zur Unterstützung von JavaScript und ähnlichen Programmiersprachen. In HTML 3.2 konnte man in Attributen des BODY- Elementes verschiedene Farben setzen: bgcolor, text, link, vlink, alink. Außerdem konnte man in background die URL eines Hintergrundbildes/musters angeben. Man konnte entweder Farbnamen verwenden (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow) oder die RGB-Werte hexadezimal angeben: #RRGGBB. Jetzt soll man Dinge wie Farben in Stylesheets definieren. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-32 Inhalt Text, Entity-Referenzen (1) 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames Normaler Text kann direkt eingeben werden. Falls der Editor keine Umlaute mit ISO Latin 1 Codes (ISO ) beherrscht, können sie als Zeichenreferenzen oder mit Entity-Referenzen eingegeben werden: ä für ä (a-umlaut), Ä für Ä, ö für ö (o-umlaut), Ö für Ö, ü für ü (u-umlaut), Ü für Ü, ß für ß (s-z-ligatur).

9 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-34 Text, Entity-Referenzen (2) Ist der WWW-Servers entsprechend konfiguriert, so können auch andere Zeichensätze statt ISO Latin verwendet werden. Dann wären eventuell Zeichenreferenzen überflüssig. Weil die Zeichen <, >, und & eine spezielle Bedeutung haben, können sie im Text nicht direkt eingeben werden. Text, Entity-Referenzen (3) Für sie sind auch Entities definiert: < für < und > für > & für & (Auch in URLs muß man & schreiben.) Einige andere spezielle Zeichen sind: liefert das Copyright-Zeichen c liefert das Registered Trademark Zeichen 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-36 Text, Zeilenumbrüche (1) Der Browser wählt normalerweise die Zeilenumbrüche selbst, da der HTML Autor nicht weiß, wie breit das Fenster des Browsers ist, welchen Zeichensatz der Benutzer gewählt hat. Über Stylesheets können Vorgaben gemacht werden, aber z.b. ist möglich, daß der Zeichensatz nicht verfügbar ist. Ein Browser schreibt normalerweise so lange Worte in die aktuelle Zeile, bis das nächste Wort nicht mehr hineinpaßt. Dann beginnt er eine neue Zeile. Daher ist kein horizontaler Scrollbar erforderlich. Text, Zeilenumbrüche (2) Zeilenumbrüche im HTML-Text sind dazu irrelevant. Eine beliebige Folge von Leerzeichen, TAB- Zeichen, Form Feeds, Zeilenumbrüchen wird wie ein einzelnes Leerzeichen behandelt. Für T E X-Benutzer: Auch Leerzeilen haben keine besondere Bedeutung. Ein neuer Paragraph wird mit <P> begonnen. Zeilenumbrüche finden nomalerweise nur an Wortgrenzen statt (dies hängt aber vom Browser ab). Solange keine Tabellen, Frames, PRE, etc. verwendet werden.

10 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-38 Text, Zeilenumbrüche (3) Positionen in einem Wort, an denen getrennt werden kann, müssen mit ( soft hyphen ) markiert werden. Dies ist Zeichen 173 im ISO Latin 1 Code. Wenn an diesem Zeichen eine neue Zeile begonnen wird, erscheint es als - am Ende der alten Zeile. Sonst wird es nicht angezeigt. Man kann das Leerzeichen zwischen zwei Worten durch ( no-break space ) ersetzen. Dann findet zwischen diesen beiden Worten kein Zeilenumbruch statt. Text, Zeilenumbrüche (4) Beispiel: Z.B. ist nach einem Abkürzungspunkt ein Zeilen umbruch schlecht. Auch bei: 7 kg, Aufgabe 3, S. Brass. Versteht der Editor ISO Latin 1, so sind keine Entity- Referenzen nötig (außer für Portabilität). 8. HTML and XHTML Hypertext Markup Language, Part I 8-39 BR Zeilenumbruch 8. HTML and XHTML Hypertext Markup Language, Part I 8-40 PRE Vorformatierter Text Man kann Zeilenumbrüche mit dem Element BR erzwingen ( forced line break ): Erste Zeile.<BR> Zweite Zeile. BR zählt zu den Inline-Elementen, kann also überall dort stehen, wo normaler Text erlaubt ist. In HTML 3.2 hatte BR ein Attribut clear für Zeilenumbrüche unter Bilder am Rand (s.u.). Dazu dienen jetzt Stylesheets. Mit PRE ( Preformatted Text ) kann man Text einschließen, der mit den vorgegeben Zeilenumbrüchen angezeigt wird. Sonst müßte man alle Leerzeichen in umwandeln und <BR> an jedem Zeilenende verwenden. Außerdem werden auch mehrere Leerzeichen hintereinander beachtet, die normalerweise zu einem Leerzeichen verschmolzen werden. Für TAB-Zeichen (ASCII 9) steht ein Tabulator in jeder achten Spalte (nach der HTML 3.2 Spezifikation, allerdings wurde von der Verwendung von Tabulatoren abgeraten).

11 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-42 Zeilenumbrüche und Tags Auszeichnung von Worten(1) SGML verlangt, daß Zeilenumbrüche direkt nach Start-Tags oder direkt vor End-Tags ignoiert werden: <PRE> Erste Zeile. Zweite Zeile. </PRE> ist also äquivalent zu: <PRE>Erste Zeile. Zweite Zeile.</PRE> PRE beginnt aber in jedem Fall eine neue Zeile. Innerhalb eines Textes können Worte oder Phrasen markiert werden, z.b. als Programmcode, als definierendes Vorkommen eines Wortes, als hervorgehoben/betont etc. Normalerweise stellen Browser so markierte Worte/Phrasen in einem anderen Zeichensatz dar (z.b. fett oder kursiv). Deswegen kann man diese Element-Typen als logische Zeichensatz-Angaben betrachten. 8. HTML and XHTML Hypertext Markup Language, Part I 8-43 Auszeichnung von Worten (2) 8. HTML and XHTML Hypertext Markup Language, Part I 8-44 Zeichensatz-Angaben (1) EM: Betonung (z.b. kursiv). STRONG: Starke Betonung (z.b. fett). CITE: Zitierung auf andere Quellen (z.b. kursiv). DFN: Definierendes Vorkommen (z.b. kursiv). CODE: Programmcode (z.b. Teletype). SAMP: Beispiel-Ausgaben von Programmen (z.b. Teletype) KBD: Beispiel-Eingaben von Programmen (z.b. Teletype). VAR: Variable oder Programm-Argument (z.b. Teletype). Man kann auch explizit Zeichensätze verlangen (physische Zeichensatzangaben). Dies ist aber Darstellungs-orientiertes Markup. Falls möglich, sollte man die obigen logischen Zeichensatz- Angaben vorziehen. Sie geben dem markierten Text eine Bedeutung, die sich nicht nur auf die Ausgabe auf dem Bildschirm oder auf Papier bezieht. Für Zeichensatz-Angaben, die nur der Verschönerung dienen, und keine inhaltliche Bedeutung haben, werden Stylesheets empfohlen.

12 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-46 Zeichensatz-Angaben (2) Folgende Zeichensatz-Angaben sind in HTML 4 legal: TT: Teletype (Zeichen haben feste Breite). I: kursiv. B: fett. BIG: grosse Schrift. SMALL: kleine Schrift. In HTML 3.2 (und in HTML 4 transitional) gibt es zusätzlich: U: Unterstrichener Text. S, STRIKE: Durchgestrichener Text. Zeichensatz-Angaben (3) In HTML 3.2 gibt es ein Element FONT mit den Attributen size: Größe zwischen 1 und 7, auch relativ, z.b. +1. color: Farbe, z.b. #FF0000 oder red für rot. face: Liste von Zeichensatz-Namen in Reihenfolge der Präferenz, durch, getrennt (nicht offiziell in HTML 3.2). 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-48 SUP, SUB: Exponenten und Indices SPAN Mit dem Element SUB ( subscript ) markiert man Indices, entsprechend gibt SUP ( superscript ) Exponenten: x₂ liefert x 2. x² liefert x 2. Mit dem Element SPAN kann man Text einschließen, auf den man sich z.b. in Stylesheets beziehen will. Wenn man den Text z.b. in einem anderen Font oder einer anderen Farbe darstellen will, aber keiner der logischen Auszeichnungen wie z.b. EM inhaltlich paßt. Eine andere Anwendung ist ein Tool-Tip, den man einem bestimmten Text hinterlegen will (title). Ohne Stylesheet wird der Text normal dargestellt.

13 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-50 Inhalt P Paragraphen 1. Einführung, HTML Rahmen, HTML Kopf 2. Text, Schriftarten (Inline-Elemente) 3. Textstruktur (Block-Elemente) 4. Hyperlinks, Bilder 5. Tabellen 6. Frames Paragraphen (Absätze) enthalten den normalen Text des Dokumentes. Es gibt aber auch andere Container für Text, zum Beispiel das Element LI (List Item, Punkt in einer Liste). Das Start-Tag ist also, aber nicht das End-Tag. Innerhalb des P-Tags kann eine (möglicherweise leere) Folge von Textstücken und Inline-Elementen stehen (z.b. TT, A,...). P selbst ist ein blockweises Element. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-52 H1,..., H6: Überschriften (1) Überschriften verschiedener Stufen werden mit den Elementen H1 bis H6 markiert. Z.B. sind H1 Kapitel-Überschriften, H2 Überschriften von Abschnitten innerhalb von Kapiteln, H3 Überschriften von Unterabschnitten, etc. Überschriften sind Block-Elemente, sie dürfen also z.b. nicht innerhalb von Paragraphen stehen. Das ist kein Problem, da das End-Tag von Paragraphen optional ist. Wenn der HTML-Parser ein z.b. H1 sieht, schließt er den vorangegangenen Paragraphen automatisch. H1,..., H6: Überschriften (2) <H1>Erstes Kapitel</H1> <P>Einleitung des ersten Kapitels <H2>Erster Abschnitt des ersten Kapitels</H2> <P>... <P>... <H2>Zweiter Abschnitt des ersten Kapitels</H2> <P>... <H1>Zweites Kapitel</H1> <H2>Erster Abschnitt des zweiten Kapitels</H2> <P>...

14 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-54 H1,..., H6: Überschriften (3) H1,..., H6: Überschriften (4) Die Struktur der Überschriften sollte logisch sein: Die erste Überschrift soll vom Typ H1 sein. Nach einer Überschrift vom Typ H<i> soll als nächste Überschrift nur eine vom Typ H<j> mit <j i +1> folgen. Im Moment erzeugen Browser keine automatische Numerierung der Kapitel, Abschnitte, u.s.w. Mit zukünftigen CSS-Versionen soll dies aber möglich werden. Es ist denkbar, daß Browser aus der Überschriftsinformation automatisch ein Inhaltsverzeichnis erzeugen. Es wurde kritisiert, daß Elemente für ganze Kapitel etc. anstatt nur für die Überschriften nützlicher gewesen wären. Überschriften sind Block-Elemente, können aber nur Inline-Elemente enthalten. Start- und End-Tag sind notwendig. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-56 ADDRESS(1) Man kann eine Kontaktaddresse für das Dokument, z.b. die -Adresse des Autors, in das Element ADDRESS klammern: <ADDRESS>Stefan Brass (<A href="mailto:brass@acm.org" >brass@acm.org</a>)</address> ADDRESS ist für fortschrittliche Suchmaschinen interessant. Browser könnten den so markierten Text in einem Informationsfenster anzeigen. Leider gibt es keine Vorschriften über die Syntax des Inhalts. ADDRESS: (2) Häufig enthält das ADDRESS-Element auch das Datum der letzten Änderung (dafür ist es aber eigentlich nicht gedacht). Normalerweise wird der Inhalt von ADDRESS in Kursiv- Schrift in einem eigenen Paragraphen angezeigt. In HTML 3.2 durften Überschriften und ADDRESS nur direkt innerhalb von BODY vorkommen. In HTML 4.01 sind sie Block-Elemente wie andere auch.

15 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-58 HR: Trennlinien HR ( horizontal rule ) kann man verwenden, um horizontale Trennlinien zwischen Textteilen zu ziehen. Beispiel: <P> <HR> <H2>Überschrift</H2> <HR> Überschrift UL, OL: Listen (1) In HTML gibt es (Beispiel ungeordnete Liste): Ungeordnete Listen (UL) Geordnete Listen (OL) In HTML gibt es (Beispiel geordnete Liste): 1. Ungeordnete Listen (UL) 2. Geordnete Listen (OL) 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-60 UL, OL: Listen (2) BLOCKQUOTE Zitate (1) UL und OL sind Block-Elemente. Start- und End-Tag sind notwendig. Bei LI ist nur das Start-Tag notwendig, das End- Tag kann entfallen. Weil auch Block-Elemente innerhalb von LI erlaubt sind, können Listen geschachtelt werden. Normalerweise werden die Listen-Elemente etwas eingerückt dargestellt. Mit BLOCKQUOTE kann man längere Zitate einschließen, die aus ein oder mehreren Absätzen bestehen. Beispiel: <BLOCKQUOTE cite=" <P>selfhtml.org ist die offizielle Heimatadresse des Web-Projekts SELFHTML. Adressen der früheren Heimat-Domain teamone.de leiten automatisch auf die aktuellen selfhtml.org-adressen weiter. </BLOCKQUOTE>

16 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-62 BLOCKQUOTE Zitate (2) DIV - Container (1) BLOCKQUOTE gehört zu den Block-Elementen, muß aber als Inhalt selbst Block-Elemente enthalten (z.b. P). Text direkt innerhalb von BLOCKQUOTE ist nicht erlaubt. BLOCKQUOTE wird normalerweise durch Einrückung der eingeschlossenen Paragraphen dargestellt. Deswegen wird es relativ oft verwendet, um eine Einrückung zu erreichen, obwohl der Text gar kein Zitat ist. Das ist natürlich falsch. Man sollte Stylesheets verwenden. DIV ( Division ) ist wie SPAN ein Container-Element ohne eigene Semantik. Beide werden vor allem in Stylesheets verwendet. Vor und nach einem DIV-Element gibt es einen Zeilenumbruch, bei SPAN (ohne Stylesheet) dagegen nicht. Man kann mit DIV/SPAN einen Teil des Textes markieren, z.b. um ihn in Stylesheets zu referenzieren. 8. HTML and XHTML Hypertext Markup Language, Part I HTML and XHTML Hypertext Markup Language, Part I 8-64 Zusammenf. Block-Elemente DIV - Container (2) Beispiel: <DIV class="telefon"> <SPAN class="name">herrmann</span>: <SPAN class="nr"> </span> </DIV> <DIV class="telefon"> <SPAN class="name">goldberg</span>: <SPAN class="nr"> </span> </DIV> Es gibt folgende Block-Elemente Paragraphen: P. Überschriften: H1, H2, H3, H4, H5, H6. Listen: UL, OL, DL. Vorformatierten Text: PRE. Kontakt-Information: ADDRESS. Zitate: BLOCKQUOTE. Trennlinien: HR. Sonstige: DIV, NOSCRIPT, FORM, TABLE, FIELDSET.