HTML - Datenbanken

Transcription

HTML - Datenbanken

8. HTML and XHTML — Hypertext Markup Language, Part I
8-1
Chapter 8: HTML/XHTML I
8-2
Lernziele
References:
•
Erik Wilde: World Wide Web — Technische Grundlagen.
Springer, 1999, ISBN 3-540-64700-7, 641 Seiten.
•
Eric Ladd, Jim O’Donnell, et al.: Using HTML 4, XML, and Java 1.2, Platinum Edition.
QUE, 1999, ISBN 0-7897-1759-X, 1282 pages.
•
Rainer Klute: Das World Wide Web. Addison-Wesley, 1996, ISBN: 389319763X.
•
Dave Raggett, W3C: HTML 3.2 Reference Specification.
[http://www.w3.org/TR/REC-html32.html]
•
Dave Raggett, Arnaud Le Hors, Ian Jacobs (Eds.): HTML 4.01 Specification.
W3C, Dec 24, 1999. [http://www.w3.org/TR/html4/]
•
User’s Guide to ISO/IEC 15445:2000 HyperText Markup Language (HTML)
[http://www.cs.tcd.ie/15445/UG.html]
•
XHTML [tm] 1.0: The Extensible HyperText Markup Language.
W3C, Jan 26, 2000. [http://www.w3.org/TR/xhtml1]
•
Stefan Münz: HTML-Dateien selbst erstellen — SELFHTML.
[http://www.netzwelt.com/selfhtml/]
[http://www.teamone.de/selfaktuell/]
•
Ian Graham: Introduction to HTML.
[http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html]
•
NCSA Beginner’s Guide to HTML (no longer maintained).
[http://www.ncsa.uiuc.edu/General/Internet/WWW/]
Stefan Brass: Grundlagen des World Wide Web
• Genaue Kenntnis der Syntax der wichtigsten Konstrukte von HTML.
• Übersicht über andere Konstrukte von HTML 4.
• Eine gewisse Orientierung in der HTML Spezifikation
(zum Nachschlagen in Zweifelsfällen).
• Eine Übersicht über Unterschiede in HTML Versionen.
Universität Halle, 2008
8-3
Inhalt
'
8-4
Was ist HTML (1)
$
1. Einführung, HTML Rahmen, HTML Kopf
&
%
2. Text, Schriftarten (Inline-Elemente)
WWW-Browser (Netscape, Internet Explorer, etc.)
3. Textstruktur (Block-Elemente)
zeigen Dateien an, die in der HTML-Syntax ver-
4. Hyperlinks, Bilder
faßt sind.
Diese Dateien können dann eventuell Program-
5. Tabellen
me in Javascript oder anderen Programmierspra-
6. Frames
• HTML steht für Hypertext Markup Language“
”
• HTML ist die Sprache des Web:
chen enthalten.
8-5
8-6
Was ist HTML? (3)
• HTML ist eine spezielle Syntax für Textdateien.
Was ist HTML (2)
Nicht jede Zeichenkette ist gültiges HTML. Browser geben aber keine
Fehlermeldungen aus und zeigen immer etwas an.
• noch HTML ist die Sprache des Web:
Außerdem verweisen die Dateien eventuell auf
• Browser interpretieren HTML und erzeugen eine
Dateien in anderen Formaten, z.B. Bilder im GIF-
Bildschirm- oder Drucker-Ausgabe (ggf. auch Sprach-
Format.
ausgabe).
Auch: Audio, Video, PDF, und Programme zum Download.
• Zur Erhöhung der Portabilität sollte man die Kor-
Immer ist die HTML-Datei aber der Rahmen und
rektheit der HTML-Syntax mit einem
enthält normalerweise auch den größten Teil des
Service“ testen.
Textes.
Validation
”
Z.B. http://validator.w3.org/. Baut man den Link http://validator.w3.org/ch
in eine Seite ein, so kann sie durch Anklinken dieses Links geprüft werden.
8-7
Was ist HTML (4)
8-8
Was ist HTML? (5)
• Man kann HTML mit normalen ASCII Texteditoren
erstellen, mit denen man z.B. auch C-Programme
erstellen würde.
• HTML ist eine Anwendung der Standard Generalized Markup Language (SGML).
• Es gelten also die allgemeinen Syntax-Regeln von
• Es gibt aber auch spezielle WYSIWYG Editoren für
HTML, die das Dokument so anzeigen, wie es in
einem Browser formatiert würde.
SGML, zusammen mit den Element-, Attribut- und
Entity-Definitionen der HTML DTD.
• HTML 4.01 definiert 91 Element-Typen, davon sind
Siehe auch http://www.iwns.de/edit.html
aber 10 nur noch aus Kompatibilitätsgründen mit
• Es gibt auch Umwandlungsprogramme, die HTML
aus einem anderen Format erzeugen, z.B. Latex2html.
früheren Versionen enthalten und sollen nicht mehr
verwendet werden.
8-9
SGML, DTD
XML, HTML
• 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 zugehörigen
Attribute, sowie Regeln, welche Elemente innerhalb
welcher anderen Elemente vorkommen können usw.
8-10
8-11
• 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-12
HTML, XHTML
• Damit kein Versionenwirrwarr entsteht, entschloss
XML, HTML
man sich dazu, dieses neue, XML-basierte HTML
• Im Zuge von XML und seiner wachsenden Bedeu-
mit einem neuen Namen und eigener Versionen-
tung fr immer mehr Dateiformate, die auch im Web
kontrolle auszustatten. Heraus kam dabei XHTML
ihren Einsatz finden, entstand der Wunsch, auch
(Extensible HyperText Markup Language = erweiter-
HTML mit Hilfe von XML zu definieren anstatt wie
bare Hypertext-Auszeichnungssprache).
bisher mit SGML.
• XHTML ist also XML-gerechtes HTML.
Zusammenfassend: XHTML ist strenger definiert.
8-13
Doctypes(1)
8-14
Doctypes(2)
• Mit der Dokumenttyp-Deklaration (”Doctype”)beginnt
jedes HTML-Dokument und auch jedes XHTML-
• Maßgeblich dafür, was ein syntaktischer Fehler ist,
ist die DTD, auf die man mit der Dokumenttyp-
Dokument.
• Doctype nimmt Bezug auf die DTD (DokumenttypDefinition) 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
Deklaration Bezug nimmt.
HTML-Variante:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML-Variante:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
Fehler enthält.
8-15
8-16
Doctypes(3)
Doctypes(4)
Der einfachste gültige Doctype:
<!DOCTYPE HTML PUBLIC ’’-//W3C//DTD HTML 4.01
• Optional kann noch ein Verweis zum verwendeten
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
Doctype angegeben werden:
”http://www.w3.org/TR/html4/loose.dtd”>
nun kann der Browser immer auf die entsprechende
DTD zurückgreifen.
• TRANSITIONAL bezeichnet eine Spezifikation vom
HTML 4.01. außer TRANSITIONAL kann noch
STRICT oder FRAMESET verwendet werden.
zu tun
8-17
8-18
XHTML Beispiel
HTML Beispiel
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>My first HTML document</title>
</head>
<body>
<h1>Greeting</h1>
<p>Hello, world!
</body>
</html>
8-19
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://ww.w3.org/1999/xhtml">
<head>
<title>My first XHTML document</title>
</head>
<body>
<h1>Greeting</h1>
<p>Hello, world!</p>
</body>
</html>
8-20
Internationalisierung
• lang identifiziert die Sprache des Textes in dem Element, z.B.
en“ für Englisch, de“ für Deutsch, fr“ für Französisch.
”
”
”
• Die Sprachangabe wird durch einen Ländercode spezializiert werden, z.B. en-GB, en-US, fr-FR, fr-BE,
fr-CA.
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.
• Ist in einem Element kein lang Attribut angegeben, so gilt das des nächsten Vorfahren im Baum,
• HTML hat nur die Attribute zur Internationalisierung:
<!ATTLIST HTML %i18n;>
bzw. der HTTP-Header
Content-Language“, falls das lang-Attribut ganz fehlt.
”
8-21
HEAD (1)
8-22
HEAD (2)
• Außerdem sind im HEAD-Element die Element-Typen
• Das HEAD-Element enthält Informationen über das
Dokument, wie Titel, Meta-Daten für Suchmaschinen, typisierte Links auf andere Dokumente, Style
Sheets, Programmcode.
• Da sie als Ausnahme (Inklusion) eingeführt sind,
können sie in beliebige Reihenfolge vor/nach/zwischen
TITLE und BASE angegeben werden, und beliebig häufig
• 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 können
in beliebiger Reihenfolge vorkommen, aber jedes
nur einmal.
SCRIPT, STYLE, META, LINK, OBJECT erlaubt.
8-23
auftreten.
Innerhalb von TITLE und BASE kö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 be”
zieht (s.u.):
TITLE
8-24
META (1)
• Das HEAD-Element muß genau ein TITLE-Element
• Das Element META enthält Meta-Daten über das
enthalten.
• Innerhalb des TITLE-Elementes ist nur reiner Text
erlaubt.
• Der Text sollte nicht zu lang sein, damit er noch
in die Fensterüberschrift paßt (z.B. nicht mehr als
64 Zeichen).
• Suchmaschinen zeigen normalerweise den DokumentTitel im Suchergebnis an.
Einige Suchmaschinen geben Worten im Titel mehr Gewicht.
Dokument, insbesondere Informationen für Suchmaschinen.
Meta-Daten sind Daten über Daten“. Z.B. sind bei einer Relatio”
nalen 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 Schlüsselworte für die Eintragung
in Suchmaschinen so definieren:
<META name="keywords"
content="html, halle, vorlesung">
8-25
META (3)
META (2)
• 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
häufig nicht sehr aufschlußreich sind.
8-26
8-27
• 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 können auch dazu dienen, nicht jugendfreie Seiten zu markieren. Browser kö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.
META (4)
8-28
BODY (1)
• Das Attribut content ist im Meta-Element notwendig, außerdem muß eines der beiden Attribute name
oder http-equiv verwendet werden.
• Das BODY-Element enthält den eigentlichen Text des
Dokumentes.
• HTML unterscheidet zwei Arten Inhalt:
• Mit dem Attribut scheme kann die Interpretation der
Inline Elemente können im normalen Text vor-
content-Zeichenkette angegeben werden (z.B. Da-
kommen, ohne daß eine neue Zeile begonnen
tumsformat).
werden muß.
• Meta-Daten für fortschrittliche Suchwerkzeuge sind
Blockweise Elemente beschreiben größere Struk-
eine wichtige Entwicklung, Das W3C arbeitet dazu
turen. Für sie muß normalerweise eine neue Zeile
am Resource Description Framework“ RDF.
”
begonnen werden.
8-29
8-30
BODY (3)
BODY (2)
• In strict HTML 4.01“ hat BODY nur noch die allge”
meinen Attribute und zwei Attribute zur Unterstützung
• Inhalt von BODY sind alle blockweisen Elemente, z.B. Paragraphen (P) und Überschriften (H1, H2, . . . ).
von JavaScript und ähnlichen Programmiersprachen.
• In HTML 3.2 konnte man in Attributen des BODY-
• Innerhalb der Paragraphen, Überschriften, u.s.w. findet sich dann der eigentliche Text (also inline“ In”
halt).
• In HTML 3.2 konnte man auch direkt Text innerhalb des BODY-Elementes schreiben, jetzt soll der
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 de-
Text in Paragraphen etc. eingeschlossen werden.
finieren.
8-31
8-32
Text, Entity-Referenzen (1)
Inhalt
'
$
&
%
• Normaler Text kann direkt eingeben werden.
• Falls der Editor keine Umlaute mit ISO Latin 1 Codes (ISO 8859-1) beherrscht, können sie als Zeichenreferenzen oder mit Entity-Referenzen eingegeben werden:
ä für ä“ (a-Umlaut), Ä für Ä“,
”
”
ö für ö“ (o-Umlaut), Ö für Ö“,
”
”
ü für ü“ (u-Umlaut), Ü für Ü“,
”
”
ß für ß“ (s-z-Ligatur).
”
5. Tabellen
6. Frames
8-33
• Ist der WWW-Servers entsprechend konfiguriert, so
können auch andere Zeichensätze statt ISO Latin
verwendet werden.
Dann wären eventuell Zeichenreferenzen überflüssig.
• Weil die Zeichen <, >, und & eine spezielle Bedeutung haben, können sie im Text nicht direkt eingeben werden.
8-34
8-35
• Für sie sind auch Entities definiert:
< für <“ und > für >“
”
”
& für &“ (Auch in URLs muß man &
”
schreiben.)
• Einige andere spezielle Zeichen sind:
c“
© liefert das Copyright-Zeichen ”
® liefert das Registered Trademark“ Zei”
chen
8-36
Text, Zeilenumbrüche (1)
• Der Browser wählt normalerweise die Zeilenumbrüche
selbst, da der HTML Autor nicht weiß,
wie breit das Fenster des Browsers ist,
welchen Zeichensatz der Benutzer gewählt hat.
Über Stylesheets können Vorgaben gemacht werden, aber
z.B. ist möglich, daß der Zeichensatz nicht verfügbar ist.
• Ein Browser schreibt normalerweise so lange Worte
in die aktuelle Zeile, bis das nächste Wort nicht
mehr hineinpaßt. Dann beginnt er eine neue Zeile.
• Daher ist kein horizontaler Scrollbar erforderlich.
• Zeilenumbrüche im HTML-Text sind dazu irrelevant. Eine beliebige Folge von Leerzeichen, TABZeichen, Form Feeds, Zeilenumbrüchen wird wie ein
einzelnes Leerzeichen behandelt.
Für TEX-Benutzer: Auch Leerzeilen haben keine besondere Bedeutung. Ein neuer Paragraph wird mit <P> begonnen.
• Zeilenumbrüche finden nomalerweise nur an Wortgrenzen statt (dies hängt aber vom Browser ab).
Solange keine Tabellen, Frames, PRE, etc. verwendet werden.
8-37
8-38
• Positionen in einem Wort, an denen getrennt werden kann, müssen mit  ( soft hyphen“) mar”
kiert 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 Zeile-
• Beispiel:
Z.B. ist nach einem Abkürzungspunkt
ein Zeilenumbruch schlecht. Auch bei:
7 kg, Aufgabe 3, S. Brass.
• Versteht der Editor ISO Latin 1, so sind keine EntityReferenzen nötig (außer für Portabilität).
numbruch statt.
8-39
8-40
PRE — Vorformatierter Text
BR — Zeilenumbruch
• Man kann Zeilenumbrüche mit dem Element BR erzwingen ( forced line break“):
”
Erste Zeile.<BR>
Zweite Zeile.
• Mit PRE ( Preformatted Text“) kann man Text ein”
schließen, der mit den vorgegeben Zeilenumbrüchen
angezeigt wird.
• BR zählt zu den Inline-Elementen, kann also überall
dort stehen, wo normaler Text erlaubt ist.
• In HTML 3.2 hatte BR ein Attribut clear für Zeile-
Sonst müß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.
numbrüche
unter Bilder am Rand (s.u.). Dazu dienen jetzt Stylesheets.
Fü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).
8-41
8-42
Auszeichnung von Worten(1)
Zeilenumbrüche und Tags
• SGML verlangt, daß Zeilenumbrüche direkt nach
• Innerhalb eines Textes können Worte oder Phra-
Start-Tags oder direkt vor End-Tags ignoiert wer-
sen markiert werden, z.B. als Programmcode, als
den:
definierendes Vorkommen eines Wortes, als hervor-
<PRE>
Erste Zeile.
Zweite
Zeile.
</PRE>
ist also äquivalent zu:
<PRE>Erste Zeile.
Zweite
Zeile.</PRE>
gehoben/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 logi-
• PRE beginnt aber in jedem Fall eine neue Zeile.
sche Zeichensatz-Angaben betrachten.
8-43
Auszeichnung von Worten (2)
8-44
Zeichensatz-Angaben (1)
• Man kann auch explizit Zeichensätze verlangen
• EM: Betonung (z.B. kursiv).
(physische Zeichensatzangaben).
• 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).
• Dies ist aber Darstellungs-orientiertes Markup. Falls
möglich, sollte man die obigen logischen ZeichensatzAngaben vorziehen.
Sie geben dem markierten Text eine Bedeutung, die sich nicht nur
auf die Ausgabe auf dem Bildschirm oder auf Papier bezieht.
• Für Zeichensatz-Angaben, die nur der Verschönerung dienen, und keine inhaltliche Bedeutung haben, werden Stylesheets empfohlen.
8-45
8-46
• Folgende Zeichensatz-Angaben sind in HTML 4 legal:
TT: Teletype (Zeichen haben feste Breite).
• In HTML 3.2 gibt es ein Element FONT mit den
I: kursiv.
Attributen
B: fett.
size: Größe zwischen 1 und 7, auch relativ, z.B. +1.
BIG: grosse Schrift.
SMALL:
color: Farbe, z.B. #FF0000 oder red für rot.
kleine Schrift.
• In HTML 3.2 (und in HTML 4 transitional) gibt es
zusätzlich:
face: Liste von Zeichensatz-Namen in Reihenfolge der Präferenz, durch
offiziell in HTML 3.2).
U: Unterstrichener Text.
,“ getrennt (nicht
”
S, STRIKE: Durchgestrichener Text.
8-47
SUP, SUB: Exponenten und Indices
• Mit dem Element SUB ( subscript“) markiert man
”
Indices, entsprechend gibt SUP ( superscript“) Ex”
ponenten:
x<SUB>2</SUB> liefert ”x2”.
x<SUP>2</SUP> liefert ”x2”.
8-48
SPAN
• 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.
8-49
8-50
P — Paragraphen
Inhalt
'
des Dokumentes.
Es gibt aber auch andere Container für Text, zum Beispiel das Element LI (List Item, Punkt in einer Liste).
$
&
• Paragraphen (Absätze) enthalten den normalen Text
• Das Start-Tag ist also, aber nicht das End-Tag.
%
• Innerhalb des P-Tags kann eine (möglicherweise lee-
5. Tabellen
re) Folge von Textstücken und Inline-Elementen
stehen (z.B. TT, A, . . . ).
6. Frames
• P selbst ist ein blockweises Element.
8-51
8-52
H1, . . . , H6: Überschriften (1)
• Überschriften verschiedener Stufen werden mit den
Elementen H1 bis H6 markiert.
• Z.B. sind H1 Kapitel-Überschriften,
H2 Überschriften von Abschnitten innerhalb von Kapiteln,
H3 Überschriften von Unterabschnitten, etc.
• Überschriften sind Block-Elemente, sie dü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>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>...
8-53
8-54
• Es ist denkbar, daß Browser aus der Überschrifts-
• Die Struktur der Überschriften sollte logisch sein:
Die erste Überschrift soll vom Typ H1 sein.
information automatisch ein Inhaltsverzeichnis er-
Nach einer Überschrift vom Typ H<i> soll als
zeugen.
nächste Überschrift nur eine vom Typ H<j> mit
< j ≤ i + 1 > folgen.
• Es wurde kritisiert, daß Elemente für ganze Kapitel etc. anstatt nur für die Überschriften nützlicher
• Im Moment erzeugen Browser keine automatische
gewesen wären.
Numerierung der Kapitel, Abschnitte, u.s.w. Mit
• Überschriften sind Block-Elemente, können aber nur
zukünftigen CSS-Versionen soll dies aber möglich
Inline-Elemente enthalten. Start- und End-Tag sind
werden.
notwendig.
8-55
8-56
ADDRESS: (2)
ADDRESS(1)
• Man kann eine Kontaktaddresse für das Dokument,
• Häufig enthält das ADDRESS-Element auch das Da-
z.B. die Email-Adresse des Autors, in das Element
tum der letzten Änderung (dafür ist es aber eigent-
ADDRESS klammern:
<ADDRESS>Stefan Brass
(<A href="mailto:[email protected]"
>[email protected]</A>)</ADDRESS>
lich nicht gedacht).
• ADDRESS ist für fortschrittliche Suchmaschinen interessant. Browser könnten den so markierten Text in
einem Informationsfenster anzeigen.
Schrift in einem eigenen Paragraphen angezeigt.
• In HTML 3.2 durften Überschriften und ADDRESS nur
direkt innerhalb von BODY vorkommen.
In HTML 4.01 sind sie Block-Elemente wie andere
Leider gibt es keine Vorschriften über die Syntax des Inhalts.
• Normalerweise wird der Inhalt von ADDRESS in Kursiv-
auch.
8-57
• HR ( horizontal rule“) kann man verwenden, um ho”
rizontale Trennlinien zwischen Textteilen zu ziehen.
In HTML gibt es (Beispiel ungeordnete Liste):
• Ungeordnete Listen (UL)
• Geordnete Listen (OL)
In HTML gibt es (Beispiel geordnete Liste):
Überschrift
1. Ungeordnete Listen (UL)
2. Geordnete Listen (OL)
8-59
UL, OL: Listen (2)
8-60
BLOCKQUOTE Zitate (1)
• UL und OL sind Block-Elemente. Start- und End-Tag
sind notwendig.
• Mit BLOCKQUOTE kann man längere Zitate einschließen, die aus ein oder mehreren Absätzen bestehen.
• Bei LI ist nur das Start-Tag notwendig, das EndTag kann entfallen.
• Weil auch Block-Elemente innerhalb von LI erlaubt
sind, können Listen geschachtelt werden.
• Normalerweise werden die Listen-Elemente etwas
eingerückt dargestellt.
8-58
UL, OL: Listen (1)
HR: Trennlinien
• Beispiel:
<P>
<HR>
<H2>Überschrift</H2>
<HR>
• Beispiel:
<BLOCKQUOTE cite="http://www.selfhtml.org/">
<P>selfhtml.org ist die offizielle Heimatadresse
des Web-Projekts SELFHTML.
Adressen der früheren Heimat-Domain teamone.de
leiten automatisch auf die aktuellen
selfhtml.org-Adressen weiter.
</BLOCKQUOTE>
8-61
8-62
DIV - Container (1)
BLOCKQUOTE Zitate (2)
• BLOCKQUOTE gehö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 Einrückung
der eingeschlossenen Paragraphen dargestellt.
Deswegen wird es relativ oft verwendet, um eine Einrückung zu erreichen, obwohl der Text gar kein Zitat ist. Das ist natü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-63
8-64
Zusammenf. Block-Elemente
DIV - Container (2)
Es gibt folgende Block-Elemente
• Paragraphen: P.
• Beispiel:
<DIV class="telefon">
<SPAN class="name">Herrmann</SPAN>:
<SPAN class="nr">5524737</SPAN>
</DIV>
<DIV class="telefon">
<SPAN class="name">Goldberg</SPAN>:
<SPAN class="nr">5524776</SPAN>
</DIV>
• Ü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.

HTML - Datenbanken

Transcription

Documents pareils

Katholische Universität Eichstätt

Print Product Sheet - Akron Brass Deutsche

Boutons de meuble

Hypertext / Hypermedia - Hypermedia

MOLD MAX® 60 Kondensationsvernetzendes, hoch

Concerts - Nationale Jugend Brass Band

(Senior) Web Developer / Front-End Architect (m/w)

Agenda Paessler PRTG Network Monitor