5. Einführung in HTML Was ist HTML? Versionen von HTML. SGML ...

139
5. Einführung in HTML
(nach Folien von Prof. Dr. Sommer)
� Was ist HTML? Versionen von HTML.
� SGML, XML und XHTML
� HTML: Struktur
� Darstellung von Text, Sonderzeichen, Überschriften
� HTML: Syntax
� Wichtige Tags
� Bilder, Verweise
� Listen, Tabellen, Formulare, Frames
� Stilvorlagen

140
Was ist HTML?
� HTML: HyperText Markup Language
� HTML ist eine Markup Language, in der normaler Text
gemischt wird mit „Markierungen“:
� Markup,
� Tags,
� ....
Was ist HTML ?
HTML ist eine „Sprache“ zur Erstellung
von Web-Dokumenten.
� HTML ist eine Hypertextsprache, in der Text mit
Querverweisen durchmischt wird.
� Mittels der Querverweise hat man Direktzugriff auf andere
Textpassagen.
� HTML-Dokumente sind nicht linear

141
Was ist HTML ?
� HTML ist eine „Sprache“ zur Erstellung von Web-
Dokumenten.
Browser
Browser
HTML
HTML
Internet
HTML
HTML
Browser
Browser
� Eine Datei mit HTML-Text ist (bzw. war) eine einfache Textdatei
� Erstellung mit einem üblichen Texteditor (z.B. mit Notepad, UltraEdit)
� Ursprünglich hatte HTML nur einige wenige einfache
Textmarkierungen (Tags).

142
Entwicklung von HTML
• Entwurfsziel: möglichst einfache Sprache
• Historische Entwicklung
• 1995: So genannter Browserkrieg zwischen Netscape, Microsoft, SUN
etc.
• In schneller Folge wurden neue Versionen von HTML definiert:
• HTML+, HTML 2.0, HTML 3.0, HTML 3.1
• Diese Entwicklung endete mit der Definition stabiler Versionen durch
die Organisation WWW-Consortium (W3C):
• HTML 3.2 (1996), HTML 4.0 (1997)
• Die Version 4 ist die endgültige Version von HTML.
• Aktuell gültig ist: HTML 4.01 (1999)
• XHTML ist ein neuer Standard, der als Ersatz von html konzipiert ist.

143
SGML
• Um kompatibel zu sein, orientierte man sich bei der Entwicklung von
HTML an SGML.
• SGML wurde in den 70er Jahren unabhängig vom Web entwickelt.
• Ziel: Dokumentenbeschreibung
• SGML soll der Standard sein mit dem jede mögliche Markup
Language beschreibbar ist.
• Jede konkrete Markup Language soll als eine DTD im Rahmen von SGML
definierbar sein.
• In diesem Sinne ist
SGML: Standard Generalized Markup Language
DTD: Document Type Definition
HTML eine SGML DTD

144
XML
• An die Stelle von SGML soll XML treten.
XML: eXtensible Markup Language
• XML wurde ebenfalls vom W3C entwickelt
• einfacher als SGML
• Verallgemeinerung von HTML.
• Auf der Basis von XML wurde XHTML entwickelt.
• XHTML ist ein bereinigtes HTML.
• Dabei nimmt XML die Rolle von SGML ein.
• Allerdings: HTML ist auf Grund seiner weiten Verbreitung nicht mehr weg
zu denken.
SGML
• Informationen findet man beim
WWW- Consortium (W3C).
www.w3c.org
HTML
XHTML
XML

145
Vergleich LaTex und HTML
� LaTex und HTML sind von ihrer Struktur sehr ähnlich.
� Beide Sprachen sind angelehnt an SGML.
� Unterschiede
� Präsentationsmedium
� LaTex: Drucker, seitenorientierte Präsentation
� HTML: Bildschirm, kontinuierliches Dokument
� Übersetzung vs. Interpretation
� LaTex-Dokumente werden übersetzt
� HTML-Dokumente werden interpretiert
� Interaktion
� HTML bietet Möglichkeiten für die Benutzerinteraktion

146
HTML : Struktur
• HTML Dokumente bestehen aus Text und aus Tags.
• Beispieldatei: ....\EinfInf\progs\K02\bsp.html
Dokument
HTML-Version
Header
Body
Titel
Author
Kapitel 8 Das Internet
Kapitel 8 Das Internet
.....
Sommer@Informatik.Uni-Marburg.DE

147
HTML - Tags
• HTML-Tags können an beliebiger Stelle im Text eingestreut werden.
• Sie werden in < > Klammern eingeschlossen.
• Das Tag muss direkt ohne Leerzeichen nach < stehen.
• Groß- und Kleinschreibung wird bei HTML nicht unterschieden
(bei XHTML aber schon).
• Tag-Teile sind durch Leerzeichen getrennt.
• Es gibt gepaarte Tags:
...
...
...
und auch alleinstehende Tags:
• Die Verwendung alleinstehender Tags sollte vermieden werden!
... statt
• Tags, die immer allein stehen kann man auch so schreiben:
und

148
HTML - Text
• Ein HTML-Text besteht aus Text-Abschnitten: Absätzen (engl.: paragraph).
Diese sind eingeschlossen in ...
Nachdem in den vorigen Abschnitten vor allem technische
Aspekte von Rechnernetzen behandelt wurden, wollen wir uns
jetzt dem wichtigsten globalen Netz widmen, dem
Internet.....
Historisch liegen die Anfänge des Internet....
Seit etwa 1990 ....
• Zeilenumbrüche innerhalb eines Absatzes können mit definiert werden
(break).
• Eine horizontale Linie (horizontal ruler) kann mit eingefügt werden.
• Dieses Tag bewirkt implizit ebenfalls einen Zeilenumbruch.
• ist ein Attribut und verlangt „zentrierte Ausrichtung“.
• Vornehme Schreibweise:

149
Hervorgehobener Text
• Eine ganze Reihe von Tags beschäftigen sich mit dem Aussehen von Text:
Dieser Text soll fett dargestellt werden.
Dieser Text soll kursiv dargestellt werden.
Dieser Text soll hervorgehoben dargestellt werden.
Dieser Text soll unterstrichen dargestellt werden.
Dieser Text soll durchgestrichen dargestellt werden.

150
Hervorgehobener Text
• Es gibt noch viele weitere derartige Tags, die die Darstellung von
Text beeinflussen. Z.B.:
....
....
....
....
....
....
....
....
....
....
Darstellung von Zitaten.
Darstellung von Definitionen.
Darstellung von Programmtexten etc.
Darstellung von Tastatureingaben.
Starke Hervorhebung.
Größere Schrift.
Kleinere Schrift.
Tiefer gelegte Schrift.
Höher gestellte Schrift.
Nicht proportionale Schrift (TeleType).

151
HTML - Syntax : Elemente
• Die HTML Syntax unterscheidet Elemente und Attribute.
• Elemente bestehen aus Text und Elementen und sind umgeben von Tags.
• Für Elemente können öffnende und/oder schließende Tags vorgeschrieben
sein. Der Name eines Elementes ist das erste Wort eines zugehörigen Tags.
• Der folgende Abschnitt ist als ganzes ein Element und enthält weitere
Elemente:
Nachdem in den vorigen Abschnitten vor allem technische
Aspekte von Rechnernetzen behandelt wurden, wollen wir uns
jetzt dem wichtigsten globalen Netz widmen, dem Internet.
Dieses Netz verbindet weltweit über 100 000 000
Rechner und eine um ein Vielfaches größere Anzahl von Menschen
und ist zu einer nie dagewesenen und alle
Grenzen überwindenden Kommunikations-, Wissenschafts- und
Wirtschaftsplattform geworden.

152
HTML - Syntax : Attribute
• Attribute ergänzen die Information eines Elementes. Sie bestehen aus einem
Namen und einem Inhalt in Apostrophen (die Apostrophe können aus
historischen Gründen auch weggelassen werden):
• Das vorstehende DIV-Element hat vier Attribute: id, class, lang und align mit
dem angegebenen Inhalt.
• Häufig wird das Sprachattribut lang verwendet. Dabei wird ein
Sprachcode verwendet. Beispiele:
"en": Englisch
"en-US": die U.S. Version der englischen Sprache.
"en-cockney": die Cockney Version der englischen Sprache.
"i-navajo": die Navajo Sprache einiger „Native Americans“.
"x-klingon": The primary tag "x" indicates an experimental
language tag
"fr": Französisch
"de": deutsch

153
Ausrichtung
• Verschiedene Elemente (z.B. und ) können durch ein
Ausrichtungsattribut beeinflusst werden.
Ein linksbündiger Absatz ...
Ein zentrierter Absatz ...
Ein rechtsbündiger Absatz ...
Ein Absatz im Blocksatz...
• Ohne Angabe einer Ausrichtung, wird linksbündiger Flattersatz angewandt.
(Flattersatz ist das Gegenstück zu Blocksatz).

154
Überschriften
• Es gibt 6 Arten von Überschriften (header): h1 ist die größte Version und h6
die kleinste.
Überschrift erster Ordnung ...
Überschrift sechster Ordnung ...
• Überschriften können ebenfalls ausgerichtet werden. Z. B. zentriert:
Zentrierte Überschrift dritter Ordnung
...

155
HTML - Sonderzeichen
• HTML-Text ist fast beliebiger ASCII-Text.
• Die Zeichen und & werden allerdings nicht als Text interpretiert.
• Auch Sonderzeichen sollten vermieden werden, es sei denn es wird ein
universeller Zeichencode verwendet.
• Verwendet werden zwei alternative Codierungsmethoden:
quotation mark &#034; oder &quot; --> "
ampersand &#38; oder &amp; --> &
less-than sign &#060; oder &lt; --> <
greater-than sign &#062; oder &gt; --> >
• Die erste Methode sollte nur in Ausnahmen verwendet werden!
• Auch Unicode kann auf diese Weise verwendet werden:
&#1048; (dezimal) der kyrillische große Buchstabe "I„: И
&#x6C34; (hexadezimal) das chinesische Zeichen für Wasser.

156
HTML – Umlaute etc.
• Einige spezielle Codes aus der ASCII-Erweiterung Latin-1
(Norm ISO8859-1)
non-breaking space &#160; oder &nbsp; -->
inverted exclamation &#161; oder &iexcl; --> ¡
...
capital A, grave accent &#192; oder &Agrave; --> À
capital A, acute accent &#193; oder &Aacute; --> Á
capital A, circumflex accent &#194; oder &Acirc; --> Â
capital A, tilde &#195; oder &Atilde; --> Ã
capital A, umlaut mark &#196; oder &Auml; --> Ä
capital A, ring &#197; oder &Aring; --> Å
...

157
Version
Kommentar
Header
Titel
Meta
Wichtige Header - Elemente
Gibt Auskunft über die verwendete HTML-Version.
Ein Kommentar wird vom Browser nicht dargestellt. Ein
Kommentar darf auch im body-Element stehen.
< head > ..... < / head >
In diesem Element sind zusätzliche Informationen über das
Dokument enthalten, z.B. Titel und Meta-Informationen.
< title > ..... < / title >
Definiert den Titel eines Dokumentes. Dieser erscheint nicht
im Dokument sondern z.B. als Name des Browser - Fensters.
Steht innerhalb des Headers.
< meta .... >
Meta-Informationen.

158
Mehr zur Version
• Das erste Tag eines HTML- Dokumentes sollte die Version deklarieren.
• Sie gibt Auskunft über die HTML Version, das definierende DTD-Dokument,
den Ort wo man es finden kann und die Sprache „EN“ in der es formuliert
ist.
Alternativ:
Zeichensätze:
Latin1: "http://www.w3.org/TR/REC-html40/HTMLlat1.ent"
Symbol: "http://www.w3.org/TR/REC-html40/HTMLsymbol.ent"
Special: "http://www.w3.org/TR/REC-html40/HTMLspecial.ent"

159
Meta-Informationen
• Meta-Informationen
• Informationen über das HTML-Dokument
• Der Dokumententyp ist hierfür ein Beispiel.
• Weitere Meta-Informationen können am Anfang des Dokumentes
innerhalb des Headers folgen.
• < head > ..... < /head >
• Sie geben Auskunft z.B. über:
• den Autor,
• den benutzten HTML-Editor,
• Schlagwörter,
• den Zeichensatz, …
• In jedem Meta-Tag ist der Name der Metainformation und der Inhalt zu
finden. Meta-Tags sind alleinstehend.
< meta name = “xxx“ content = “yyy“ />

160
Meta Beispiel
Philipps-Uni Marburg - Fachbereich 12
...
Empfehlenswert ist z. B. auch der Zeichensatz der Datei mit anzugeben:

161
Weiterleitung mit Meta-Tag
� Automatisches Weiterleiten eines Seitenbesuchers von einer
alten Adresse zu einer neuen Adresse
� Beispiel:

162
Text
Div
Span
Wichtige Body - Elemente
< body > ..... < / body >
In diesem Element ist der Inhalt des Dokumentes enthalten.
< div > ..... < /div >
definiert einen (grösseren)Textabschnitt.
< span > ..... < /span >
definiert einen (kleinen) Textabschnitt.
• und unterteilen ein Textdokument in Abschnitte gleicher
Formatierung. (Im Unterschied zu das den Text in logische Absätze
einteilt.
Jeder Rechner der am Internet angeschlossen ist, benötigt eine
Adresse. Diese Adresse setzt sich ...
Die Paketvermittlung im Internet
erfolgt ausschließlich über die Netzadressen.
Die Paketvermittlung im Internet erfolgt ...

163
Adressen
Pre
Blockquote
Weitere Body - Elemente
< address > ..... < / address >
Ein Element zur Angabe von Adressen.
< pre > ..... < /pre >
definiert einen unformatierten (präformatierten) Textabschnitt.
Meist wird die Spaltenzahl vorgegeben.
< blockquote > ..... < / blockquote > < q > ..... < / q >
definiert eingerückte und betonte längere bzw. kürzere Zitate
public class Test {
public static void main(String args[]) {
int x = 10;
}
}

164
Hintergrundfarbe
Hintergrund
• Der Hintergrund des Textes kann durch entsprechende Attribute des
-Elementes beeinflusst werden.
Hintergrundbild
Die Hintergrundfarbe soll gelb sein.
Hintergrundbild ist das Bild red-tongue-thumb.gif
das im Unterverzeichnis Bilder des aktuellen
Verzeichnisses gesucht wird.
• Bilder finden sich in HTML-Seiten in diversen Formaten:
• Gif-Bilder: historisches Bildformat
• Png-Bilder: soll dieses Format ablösen
• Jpg-Bilder: stark komprimierte Bilder – wird meist für Fotos verwendet.

165
Sonstige Farben
• Auch andere Farben lassen sich durch Attribute des -Elementes
beeinflussen.
• Die hier benutzten Farben sind in hexadezimaler RGB-Darstellung.
#FAF0E6
R G B
250 240 230
R G B
#400040 64 0 64
#408080 064 128 128

166
Linien
HTML Linien
Fügt eine horizontale Linie ein.
Die Linie ist 24 Pixel dick.
Die Linie ist 18 Pixel dick und zentriert . Ihre Länge ist 25% der
Breite des Textbereiches. Ihre Farbe ist die angegebene.

167
Bilder
HTML Bilder
• Bilder können an beliebiger Stelle eingefügt werden:
Fügt ein Bild ein.
Bild-Name steht für einen Dateinamen.
• Der Dateiname ist
Analog - aber mit Alternativtext für einen
Browser ohne Grafikfähigkeiten.
• ein Dateiname im aktuellen Verzeichnis: src= "devil.gif"
• oder in einem Unterverzeichnis:
• oder in einem beliebigen Verzeichnis:
src= "Bilder/devil.gif"
src= "E:/Ed/Vorlesungen/EinfInf/htmls/K02/Bilder/BaganAnanda.jpg"
• oder eine Web-Datei „URL“:
src= "http://www.mathematik.uni-marburg.de/icons/philippt.gif"

168
Ausrichtung von Bildern
• In dem -Tag kann zwar ein Alignment angegeben werden, dies
bezieht sich aber auf die Ausrichtung im Textfluss.
• Dies führt dazu das das Bild linksbündig eingefügt wird, der Text fließt –
falls noch Platz ist – rechts am Bild vorbei.
• Dies führt nicht zu der vermutlich erwarteten Bildausrichtung in der Mitte.
• Zu diesem Zweck hätte man folgendes Beispiel beachten müssen:
Bilder

169
Hyperlink
HTML Verweise
• Ein wesentliches Element von HTML sind Verweise (Links oder Hyperlinks)
auf andere Dokumente.
• Kern dieser Verweise sind Web-Adressen (URLs). Diese wurden bereits
vorgestellt. Beispiel:
http://www.mathematik.uni-marburg.de/~gumm/einfinf.html
Referenz-Name
Definiert einen Hyperlink (a wie Anker). Dieser ist im
Dokument unter dem Namen Referenz-Name anklickbar.
Er kann auf ein anderes Dokument verweisen.
Das Dokument auf das D-NAME verweist, kann praktisch überall sein.
Adressierungsarten sind:
- vollständige URL
- relativ zu der aktuellen URL-Adresse
- Bezeichner innerhalb eines Dokumentes

• Beispiel:
170
HTML Verweise: Vollständige URL
Das Buch von Gumm und Sommer
• Führt dazu das der Text Das Buch von Gumm und Sommer im Dokument
dargestellt wird. Er wird als Link, d.h. anders als der normale Text
dargestellt.
• Wenn dieser Text angeklickt wird, wird das bisher dargestellte Dokument
durch das angegebene – also durch
http://www.mathematik.uni-marburg.de/~gumm/einfinf.html
ersetzt.

Relative Adressierung:
171
HTML Verweise: relativ und lokal
• Dateien im aktuellen Verzeichnis kann man direkt adressieren:
Weiter ....
• Ebenso in Unterverzeichnissen:
Inhaltsverzeichnis
Adressierung durch lokale Bezeichner
• In dem Dokument kann man direkt dorthin verzweigen:
Überspringen der Einführung
• Man kann auch direkt zu einem Bezeichner in einem anderen Dokument
verzweigen:
Beispiel (Überspringen der Einführung)

172
HTML Verweise: Definition
Definition von Bezeichnern in einem Dokument, auf die verwiesen werden darf
• Die historische Methode:
Kein Inhalt erforderlich
• Die neuere Methode:
• Jedes Element kann ein id-Attribut haben. Der dort verwendete
Bezeichner muss im Dokument eindeutig sein und kann zur
Kennzeichnung eines Teils des Dokumentes verwendet werden.
Kein Inhalt erforderlich
• Die neuere Methode macht die Verwendung des -tags zur Definition
von Bezeichnern überflüssig.
• Sinnvollerweise hängt man den Bezeichner an ein beliebiges Tag an, das
am Anfang der gewünschten Stelle steht:
...

• Email:
173
Weitere Verweistypen
Bernhard Seeger
• Bilder
• Wenn im Inneren eines -Tags ein Bild vorkommt, wird das gesamte
Bild zu einem Hyperlink.

174
Verweise auf Karten
� Definition einer Karte durch map
� Jeder area-Eintrag definiert eine sensitive Fläche auf der Graphik
� Shape = “rect“ definiert ein Rechteck
� Über usemap erfolgt die Zuordnung des Bildes zu der Karte.

175
Beispiel
• Ein weiteres HTML Beispiel - zum Thema Referenzen und Bilder:
Einführung in die Informatik
Probleme? Kommentare? Vorschläge?
Schicken Sie mir ein EMail !
Sommer@Informatik.Uni-Marburg.DE
.

176
Ungeordnete
Listen
Geordnete Listen
HTML Listen
Windows
Mac-OS
Unix
Windows
Mac-OS
Unix
Attribute bei Listen
oder circle oder square
oder a oder i oder I oder 1
etc.
gilt ab diesem Element

177
Menü
Listen
Verzeichnis - Listen
Definitions
Listen
HTML Listen: weitere Varianten
Windows
Mac-OS
Unix
Windows
Mac-OS
Unix
Zu definierener Begriff
Definition
...

178
Beispiel: Listen
Windows
Mac-OS
Unix
80386
80486
Pentium
Pentium Pro
Pentium II
Pentium III
Pentium 4
� Windows
� Mac-OS
� UNIX
III. 80386
IV. 80486
V. Pentium
VI. Pentium Pro
VII. Pentium II
VIII. Pentium III
IX. Pentium 4

179
Beispiel: Definitionslisten
Adapted from Dawkins, The Extended Phenotype
allometry
A disproportionate relationship between size of a body part and
size of the whole body.
anaphase
Phase of the cell division during which the paired chromosomes
move apart.
antigens
Foreign bodies, usually protein molecules, which provoke the
formation of antibodies.
autosome
A chromosome that is not one of the sex chromosomes.
codon
A triplet of units (nucleotides) in the genetic code, specifying
the synthesis of a single unit (amino acid) in a protein chain.
genome
The entire collection of genes possessed by one organism.

180
HTML Tabellen
Definiert eine Tabelle.
Eine Tabelle besteht aus Reihen (Table-Row):
, , .....
Diese wiederum bestehen aus Zellen (Table-Data)
, , .....
Varianten:
mit Rand; Breite in Pixeln
Abstand zwischen den Zellen
Abstand zwischen Zellenrand und Inhalt
und diverse Alignment und Farb Attribute

181
Tabellen Beispiel
ZeitpunktHosts
ZeitpunktHostsZeitpunktHosts
10/69 4 8/81 213 10/92 1136000
10/70 11 8/83 562 10/94 3864000
4/71 23 10/8519617/96 9472000
1/73 35 11/8650897/9836739000
6/74 62 12/87 28174 7/2000 93047785
3/77 111 10/88 56000 1/2001 109574429
12/79 188 10/90 313000 7/2001 ?

182
HTML Frames (1)
• In einem Dokument kann man statt eines -Elements einen
FRAMESET definieren. Dadurch wird das aktuelle Dokument degradiert
zu einem Steuer-Dokument, das nur Informationen enthält, wie das
Dokument in Unterdokumente aufgeteilt wird: in FRAMES
• Diese verwalten eigene Dokumente.
• Dies kann zu Verwirrung bei Vorwärts- und Rückwärts Sprüngen
führen.
• Die FRAMES können Namen haben.
• Man kann dann aus einem Dokument ein anderes FRAME neu laden.

183
Varianten:
HTML Frames: Definition
Definiert eine Menge von FRAMES.
Definiert einen FRAME
Definiert einen Ersatzbody, der dargestellt wird,
wenn der Browser keine FRAMES beherrscht.
• teilt den ursprünglichen Frame in zwei
horizontale Bereiche, die jeweils 37% bzw. 63% der ursprünglichen Fläche
erhalten.
•
teilt den ursprünglichen Frame in drei vertikale Bereiche, die jeweils 20%
bzw. 35% bzw. 45% der ursprünglichen Fläche erhalten.
• FRAMESETs können auch Ränder haben. Man kann deren Dicke und Farbe
definieren.

184
HTML Frames: Varianten
Weitere Varianten:
Definiert einen blätterfähigkeiten FRAME.
Definiert einen Namen des FRAMES. Dieser kann auch von
einem anderen FRAME angesprochen werden.
Ref-Name
Definiert einen Hyperlink mit einem Ziel, das in einem FRAME-TAG
benannt worden sein muss.

185
Beispiel zu Frames
Meine Frames
Dieses Dokument kann man nur mit einem Browser
sehen, der Frames beherrscht !!!

186
Schriftarten
• Zum klassischen Stil von HTML gehörte es das Aussehen des Textes direkt
zu beeinflussen.
• Das gilt heute als schlechter Stil
• Beispiel:
Dies ist ein Beispiel.
Ab etwa 1972 wurde es auch eingesetzt, um Universitäten
und Forschungseinrichtungen zu verbinden, die mit dem
Verteidigungsministerium zusammen arbeiteten. Aus
Sicherheitsgründen wurde das ARPANET später in einen
öffentlichen und einen nichtöffentlichen Teil getrennt.
Der öffentliche Teil wurde zum Internet.

187
Stilvorlagen
• Als guter Stil gilt die Verwendung von Stilvorlagen: Style-Sheets.
• Diese können nach wie vor vor Ort angegeben werden.
• Der Vorteil des style-Attributes ist, das es in alle relevanten Tags
eingesetzt werden kann:
Historisch liegen die Anfänge des Internet in dem ARPA-Net.
Ab etwa 1972 wurde es auch eingesetzt, um Universitäten und
Forschungseinrichtungen zu verbinden.
Der öffentliche Teil wurde zum Internet.
Seit etwa 1990 hat sich das Internet durch die Einführung
...

188
Aufbau zentraler Formate (1)
• Als noch besserer Stil gilt die Verwendung von Stilvorlagen, die gesammelt
im Header des Dokumentes sind.
• Definition unter Verwendung des style-Tag
• Beispiel
p { color:blue; }
h1,h2 { color: yellow; }
Dadurch wird der Text unter einem p-Tag blau ausgegeben. Der Text im
h1- und h2-Tag ist gelb.
• Es können Vorlagen für alle Elemente mit einem Namen gebildet werden, es
können aber auch Klassen gebildet werden.

189
Aufbau zentraler Formate (2)
� Aufbau einer Definition im style-Element
� Jede Zeile besteht aus einem oder mehreren
� Selektoren: Namen vor den geschweiften Klammen
� Z. B. ein Name eines Tags
und einer
� Definition in den geschweiften Klammern.
� Jede Definition besteht aus einer Liste von Paaren, die aus
jeweils einem Attribut und einem Wert bestehen.
� Beispiel:
{ color:blue; text-align:left; }

190
Selektorenlisten
body { background-color:#FFFFCC; margin-left:100px;}
h1 { font-size:300%; color:#FF0000; fontstyle:italic;}
p,li { font-size:110%; line-height:140%; color:blue;
letter-spacing:0.1em; word-spacing:0.3em;}
h2 i { color:blue; font-style:normal; }
� Bei Angabe mehrerer Selektoren
� Liste durch Komma getrennt
� Definition gilt für alle Tags
� Liste durch Leerzeichen getrennt
� Definition gilt nur für das letzte Tag, wenn es innerhalb der davor
stehenden Tags auftritt.

191
Attributierte Selektoren
� Definition von style-Optionen, die nur dann gültig sind, wenn
gewisse Attribute im Tag benutzt oder mit bestimmten Werten
belegt sind.
� Beispiel
p { font-weight:bold; font-family:Tahoma,sans-serif;}
p[align] { color:red; }
p[align=center] { color:blue; backgroundcolor:#00FFFF;}
� Anwendung
Das ist ein Absatz.
Das ist ein Absatz in roter Schrift.
Das ist ein Absatz, zentriert und in
blauer Schrift.

192
Style-Klassen
• Es können Vorlagen für alle Elemente mit einem Namen gebildet
werden, es können aber auch „Unterklassen“ gebildet werden....
• Unterklassen haben ein direktes Bezugselement
...
p{font-family:Tahoma;color:green;size=2}
p.a{font-family:Garamond;color:blue;size=1}
p.b{font-family:Tahoma;color:pink;size=4}
Stilvorlage p
Stilvorlage p.a
Stilvorlage p.b
Stilvorlage p

193
Allgemeine Klassen
� Einen Style für eine Unterklasse kann ohne Verwendung
einer Oberklasse definiert werden.
� Dieser Style kann unter Angabe des class-Attributs bei allen Tags
verwendet werden.
.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
H1 ganz normal nur etwas formatiert
H2 ganz normal,
aber auch hinterlegt

194
Stilvorlagen in externen Dateien
• Als bester Stil gilt die Verwendung von Stilvorlagen, die in externen
Dateien zusammengefasst sind.
...
Stilvorlage p
Stilvorlage p.a
Stilvorlage p.b
Stilvorlage p
• Die Syntax von Stilvorlagen nennt sich „css2“ (cascading style sheets). In
der Textdatei StyleBsp4.css könnte folgender Inhalt sein:
p{font-family:Tahoma;color:red;size=2}
p.a{font-family:Garamond;color:blue;size=1}
p.b{font-family:Tahoma;color:pink;size=4}

Motivation
195
HTML Formulare
• Wunsch nach mehr Funktionalität führte dazu, dass auch Möglichkeiten der
Interaktion unterstützen werden sollten.
• Dazu werden in HTML Formulare angeboten
• Formulare bieten mehr als eine reine Textformatierung
• Eingabefelder verschiedener Art
• Aktive Komponenten, die Eingaben verarbeiten bzw. weiterleiten.
• Typischerweise an einen WWW-Server
• Web-Interaktion
• Interaktion im Internet zwischen einem Web-Server und einem Web-
Client
• Im Folgenden diskutieren wir zunächst die verschiedenen Eingabefelder.

196
Architektur
� Statische und dynamische Web-Seiten
� Inhalt ist nicht bei jedem Aufruf gleich
� Abhängig von
� Benutzereingaben
� Aufruf (Zeitpunkt)

197
Einzeilige Eingabefeld
� Einfaches Eingabefeld
Vorname:
� Man kann auch noch als Option einen Text vorgeben
Webseite:

198
Einzeilige Eingabefeld(2)
� Manchmal soll die Eingabe nicht sichtbar sein:
� Auswahl eines Dateinamens durch Zugriff auf das
Dateisystem
� Nur lesbares Auswahlfeld

199
Mehrzeilige Eingabefelder
� Durch Verwendung von Textarea kann beliebig viel Text
eingegeben werden.
� Beispiel:
� Kommentar:

200
Mehrzeilige Eingabefelder
� Die Option wrap in der Anweisung textarea:
wrap="virtual"
Text wird umgebrochen, aber Umbruch nicht übertragen
wrap="physical" (empfohlen)
Text wird umgebrochen und Umbruch mit übertragen
wrap="off" (Voreinstellung)
Kein Umbruch in Eingabezeile
� Unveränderbarer Text
Text nur lesbar

201
Eingabefelder mit Auswahl
� Checkbox
�
� Beispiel
Kreuzen Sie die gewünschten Zutaten an:
Salami
Pilze
Sardellen

202
Eingabefelder mit Auswahl
� Radiobutton
� Die Auswahl genau einer aus mehreren Optionen kann über dieses
Menü erfolgen:
Note 1
� Hat man mehrere Optionen haben die Knöpfe den gleichen Namen
� Normale Knöpfe

203
Beispiel: Selektionsmenue
....
W&auml;hlen Sie bitte hier eine Note:
1 Hervorragend
2 Gut
3 Geht so
4 Furchtbar
oder schreiben Sie uns.
....

204
Ausblick
� Bisher konnte man in Formulare zwar Daten auswählen bzw.
eingeben, aber ohne dass man die Daten nutzen kann.
� Fehlender Baustein
� Übergabe der Daten aus den Formularen in ein Programm, das dann
diese Daten auch tatsächlich verarbeitet.
� Anwendungsbeispiele
� Online-Kontoführung
� Online Shops
� …
� Diese Programme werden erstellt unter Verwendung einer
Programmiersprache wie z. B. PHP, JavaScript, …