Webtechnologien Teil 4: Hypertext Markup Language I

Webtechnologien
Teil 4: Hypertext Markup Language I
Webtechnologien – WS 2013/14 - Teil 4/HTML I 18.10.13 1

Literatur
[4-1] Münz, Stefan: SelfHTML 8.1.2
http://aktuell.de.selfhtml.org/extras/download.shtml
[4-2] Hess, Uwe; Günther, Karl: html 4. bhv-Taschenbuch, 2. Auflage,
2002
[4-3] Tolksdorf, Robert: Die Sprachen des Web: html & XHTML. dpunkt,
4. Auflage, 2000
[4-4] Kloss, Birgit: CSS und DHTML. Markt + Technik, 2002
[4-5] Lubkowitz, Mark: Webseiten programmieren und gestalten.
Galileo Computing, 2003, Teil 2
[4-6] Münz, Stefan: . Addison-Wesley, 2005
Webtechnologien – WS 2013/14 - Teil 4/HTML I
2

Übersicht
• Geschichte von HTML
• Ziele von HTML
• Grundlagen
– Kopfteil
– Body
– Tabellen
– Frames
Webtechnologien – WS 2013/14 - Teil 4/HTML I
3

Geschichte
• HTML 1, 1990
• HTML 2, 1995, RFC 1866
Vieles nie implementiert, anderes zusätzlich realisiert
• HTML 3.2, 1997
Tabellen, Auszeichnungen
• HTML 4.01, 1998
Style Sheets (CSS), Einbindung von Scripts, Unicode
Vieles nie implementiert, anderes zusätzlich realisiert
• XHTML = XML + HTML, ab 1995
• HTML 5, ab 2010
Unausgereift und nicht standardisiert
Webtechnologien – WS 2013/14 - Teil 4/HTML I
4

Kompatibilitäten I
• Es bestimmen die Browser, was HTML ist und welche Bedeutung ein
bestimmtes Konstrukt hat.
• Da jeder implementieren kann, was er will, und das auch so tut, gibt
es leider viele Inkompatibilitäten.
• Hier wird fast nur HTML 4.01 betrachtet.
Wer Web-Sites für Desktop-Rechner baut, muss leider seine Seiten
mit folgenden Browsern testen:
Windows Macintosh Unix/Linux
Ab Explorer 5
Wie Windows
Ab Firefox 3.* Ab Firefox 3.*
Ab Opera 7.* Ab Opera 7.*
Ab Chrome 10.* Ab Safari 5.* Ab Chrome 10.*
Lynx 2-4 Lynx 2-4
Webtechnologien – WS 2013/14 - Teil 4/HTML I
5

Kompatibilitäten II
• Wenn sich eine Site von "allein" im Layout an die Größe des
Ausgabegeräts anpassen kann, dann wird vom Responsive
Design gesprochen.
• Das Testen wird dann noch schlimmer, da mit den Browsern
auf den mobilen Endgeräten getestet werden muss; denn dann
kommen noch Android, iOS und Windows Phone hinzu.
Test auf html 4-Kompatibilität:
http://validator.w3.org
http://jigsaw.w3.org/css-validator/
http://aktuell.de.selfhtml.org/artikel/server/validator/
Webtechnologien – WS 2013/14 - Teil 4/HTML I
6

Grammatik in den Foliensätzen
• Syntaktische Abschnitte werden hier in einer Pseudo-BNF
dargestellt:
– Worte in Normalschrift sind terminale Symbole
(terminal bedeutet direkt zur Sprache gehörig)
– Worte in Kursiv sind nonterminale Symbole
(nonterminal bedeutet Name einer Regel)
– Worte geklammert in eckigen Klammern sind optional
– Drei Punkte ... bedeuten beliebiger Text, der keine eigene Bedeutung in
HTML bzw. im betroffenen Kontext hat.
• Um alles etwas einfacher zu machen, werden nicht immer alle
optionalen Teile eines Elementes aufgeführt.
• Die folgenden Abschnitte beschreiben HTML daher nicht vollständig.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
7

Erläuterungen zur Grammatik
• Grammatik = Regelsystem, das den syntaktischen Aufbau einer
Sprache (im Sinne der Informatik) bestimmt
• Terminale Symbole = Zeichenketten, die zur Sprache selbst
gehören und daher so wie ausgedrückt benutzt werden müssen
• Nonterminale Symbole = Namen von Regeln, also
Zeichenketten, die nur zur Grammatik, aber nicht zur Sprache
gehören
Diese müssen durch andere Texte, die Terminale Symbole sind,
ersetzt werden
• BNF = Backus-Naur-Form = Bestimmte Form einer
Grammatikdefinition
(benannt zu Ehren der beiden "Erfinder" Backus und Naur)
Siehe: http://de.wikipedia.org/wiki/Backus-Naur-Form
Webtechnologien – WS 2013/14 - Teil 4/HTML I
8

Ziele von HTML I
• HTML ist (eigentlich) eine Auszeichnungssprache.
Diese definiert ein abstraktes Layout ohne Festlegung der
Umsetzung in eine Präsentation; es wird nur die Funktion oder die
Rolle eines Textstücks beschrieben.
• Layout = (hier:) Regeln zur Kombination und für Werte von
graphischen Attributen von Elementen:
– Zeichengröße, Schriften
– Farben, Farbverläufe
– Größe
– Umrahmungen
Diese Regeln befassen sich mit der Präsentation, also der extern
wahrnehmbaren Darstellung.
• Software zur Präsentation macht aus Daten bzw. Anweisungen und
den Layoutregeln eine konkrete Seite.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
9

Ziele von HTML II
• Im Laufe der Geschichte von HTML kamen immer mehr Elemente
hinzu, die ein konkretes Layout festlegen.
• Damit bestimmt immer stärker der/die Designer/in das konkrete
Layout. Gleichzeitig verliert HTML den Charakter der
Auszeichnungssprache.
• Um wieder eine Trennung zwischen Layout und Auszeichnung
machen zu können, wurden Cascading Style Sheets (CSS)
eingeführt.
• HTML wird dann wieder eine reine Auszeichnungssprache, wenn
das Layout vollständig per CSS (Cascading Style Sheet) definiert
wird (und einige HTML-Konstrukte zur Layout-Gestaltung nicht
verwendet werden).
Webtechnologien – WS 2013/14 - Teil 4/HTML I
10

Ziele von HTML III
• Ein wichtiges Ziel des W3C ist die Mehrsprachlichkeit.
Dies betrifft:
– Wahl landes-/sprachspezifischer Kodierungen, z. B. Russisch
– Wahl der Anordnung der Zeichen auf einer Seite (Leserichtung)
– Wahl der Anordnung der Seiten (von Vorne nach Hinten oder
umgekehrt)
• Ein weiteres Ziel ist der erleichterte Zugang von Menschen mit
Behinderungen.
Gutes Beispiel: www.deutschland.de
Siehe auch: http://www.biene-award.de/ausschreibung/
Webtechnologien – WS 2013/14 - Teil 4/HTML I
11

Grundlagen der Syntax I
• Tag = Marke = Etikett = Zeichenkette innerhalb von
• Viele Tags haben ein Ende-Tag:
Start: Ende: mit xx als Tag-Name
– Die Wirkung des Tags bezieht sich auf den umschlossenen Bereich.
– Diese Tags können geschachtelt werden, wobei die Wirkung von außen
nach innen vererbt wird.
– Innere Bereiche überdecken Äußere Bereiche (wie bei der Vererbung).
• Wenn kein Ende-Tag vorgesehen ist, wird der Wirkungsbereich
durch andere Tags implizit begrenzt, z.B. .
• Beispiele:
...
...
Webtechnologien – WS 2013/14 - Teil 4/HTML I
12

Grundlagen der Syntax II
• Die Tag-Namen sollten klein geschrieben werden, sie können
auch groß geschrieben werden.
• Unbekannte Tags werden normalerweise von den Browsern
ignoriert, sofern sie der generellen Syntax von HTML
entsprechen.
• Attribute = Zusatzbestimmungen innerhalb eines Tags
– Aufbau: key=value, wobei value ein String umschlossen von " ist
bzw. sein sollte.
– Ein Attribut kann auch ein Schlüsselwort allein sein: key
– Attribute werden in Listen mit Blanks als Trennzeichen
zusammengefügt.
Beispiele:
Webtechnologien – WS 2013/14 - Teil 4/HTML I
13

Bemerkungen
• Viele Browser akzeptieren unter bestimmten Umständen Werte
für Attribute, die nicht in " eingeschlossen sind.
• Um möglichst aufwärtskompatibel zu XHTML und XML zu sein,
sollten immer die Werte von Attributen in " eingeschlossen
werden.
• XHTML ist eine HTML-Variante, die kompatibel zu den viel
strengeren Regeln von XML ist.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
14

Werte und Einheiten
Typ
Werte in Pixel
Werte relativ zum Umfeld
Fließkommazahl mit Einheit
Beispiel
width="36"
width="30%"
width="1.7in"
Einheiten (Auszug)
pt Punkt
in Inch, Zoll
cm
em Höhe des Fonts (Zeichen M)
72 pt = 1 in = 2,54 cm
Besteht der Wert aus den Zeichen
a-z, A-Z, 0-9, - und ., so könnten
die " weggelassen werden, sollten
aber nicht!
Webtechnologien – WS 2013/14 - Teil 4/HTML I
15

Kommentare
• Damit wird ein ganzer Bereich als Kommentar definiert.
Schachtelungen sind nicht möglich.
• Alles, was eine Seite auf dem Web-Server enthält, wird dem Client per
Kopie gegeben - auch Internes in Kommentaren..
• Darüber hinaus befinden sich die Server Side Includes (SSI) in
Kommentaren. Das sind spezielle in Kommentare eingebaute
Kommandos an den Browser; so etwas gibt es auch für den Internet-
Explorer.
Dies alles ist nicht per W3C definiert.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
16

Syntaktischer Aufbau einer Seite
... Kopfteil
... Seiteninhalt
Leerzeichen, Tabulatoren, Umbrüche
sind normalerweise irrelevant. Es gibt
aber Tags, die dies beachten.
Framesets bilden von diesem Aufbau
her eine Ausnahme.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
17

Typ des Dokuments (Auszug)
Version TYP in ""
html 2.0 "-//IETF//DTD html//2.0//EN" veraltet
html 3.2 "-//IETF//DTD html//3.2//EN" veraltet
html 4.0 "-//W3C//DTD HTML 4.01 Transitional//EN" Empfehlung
html 4.01 genau "-//W3C//DTD HTML 4.01//EN"
Der Typ des Dokuments ist eine URN!
Webtechnologien – WS 2013/14 - Teil 4/HTML I
18

Kopfteil (Auszug) I
Art Syntax Beschreibung
Titel ... Max. 64 Zeichen (Richtwert),
notwendige Angabe
für Bookmarks, Suchmaschinen
Bezüge
Meta-
Information
Verweis vorwärts auf externes
Objekt
Verweis zurück auf externes Objekt
Beschreibungen der Seite
Stil Einbettung von CSS
Script Einbettung von Skripten
Webtechnologien – WS 2013/14 - Teil 4/HTML I
19

Bemerkungen zu rel=... und rev=...
In Datei FileA.html:
In Datei FileB.html:
Mit rel/rev können alternative Seiten referenziert werden.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
20

Kopfteil (Auszug) II - Werte für relation
relation
contents
next/previous
help
index/glossary
start
stylesheet
Beschreibung
Verweis auf Seite mit dem Inhaltsverzeichnis
Verweis auf nächste/vorherige Seite
Verweis auf Hilfe-Seite
Verweis auf Index-/Glossar-Seite
Verweis auf Startseite der Web-Site
Verweis auf eine Style Sheet-Datei
Beispiel:
Webtechnologien – WS 2013/14 - Teil 4/HTML I
21

Kopfteil (Auszug) III - Kleine Icons/favicon
Webtechnologien – WS 2013/14 - Teil 4/HTML I
22

Kopfteil (Auszug) III - Meta-Information
Key
author
copyright
keywords
page-topic
page-type
audience
language
expires
revisit-after
robots
reply to
Beschreibung
name des Autors
Inhaber des Urheberrechts
Stichworte zur Einordnung der Seite
Themen der Seite
Art der Seite
Typischer Leserkreis
Sprache
Verfallsdatum der Seite
Zeitraum für erneuten Suchmaschinenbesuch
Anweisungen an Suchmaschinen
Mailadresse für Anfragen
Webtechnologien – WS 2013/14 - Teil 4/HTML I
Sorgt sicher für SPAM
23

Beispiel
• Bitte fragen Sie den Dozenten nicht, was international arbeitende
Suchmaschinen mit "Erwachsene, Experten, Fortgeschrittene" o.ä.
machen.
• Da diese Meta-Tags in der Vergangenheit für eine Erhöhung des Rankings
von Suchmaschinen missbraucht wurden, werden diese kaum noch
beachtet.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
24

Erläuterungen zu HTTP-EQUIV I
Schlüsselwort http-equiv erzwingt Angaben durch den Server im Kopfteil der
HTTP-Antwort im Format name:Value, wenn
ist.
http-equiv
expires
refresh
content-type
cache-control
Beschreibung
Datum des spätesten Löschens aus dem Cache des Browsers
Automatisches Neuladen bzw. Nachladen
MIME-Typ mit Zeichensatz (charset)
No-cache: kein Speichern im Cache des Browsers
Webtechnologien – WS 2013/14 - Teil 4/HTML I
25

Erläuterungen zu HTTP-EQUIV II
(1)
(2)
(3)
• In der Version (1) wird das Dokument nach 20 Sekunden neu vom
Server geladen.
• In der zweiten Form wird das Dokument an der URL nach 20
Sekunden nachgeladen.
• In der dritten Form wird sofort umgeleitet. Dies ist nach einem
Relaunch einer neuen Version für die veralteten Bookmarks wichtig.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
26

Erläuterungen zu Robots
Hier werden Anweisungen an Suchmaschinen eingefügt.
Werte
INDEX, FOLLOW
INDEX, NOFOLLOW
NOINDEX, FOLLOW
NOINDEX, NOFOLLOW
Bedeutung
Indizieren der Seite sowie Weitergehen der URLs
Indizieren der Seite
Nur URLs heraus zum Indizieren benutzen
Nichts tun
Webtechnologien – WS 2013/14 - Teil 4/HTML I
27

ody I
...
• Sprache nach ISO 639, z. B. "de", "mk" (Maori) oder "zu" (Zulu)
• Das Attribut background gibt eine Graphik für den Hintergrund an, die
- falls sie kleiner als die darzustellende Fläche ist - schachbrettartig
dupliziert wird.
Siehe dazu: http://de.wikipedia.org/wiki/ISO_639
Webtechnologien – WS 2013/14 - Teil 4/HTML I
28

ody II
...
...
• bgcolor gibt die Farbe des Hintergrunds, text die der Zeichen an.
• link definiert die Farbe nicht besuchter Links, vlink schon besuchter Links
und alink die Linkfarbe während des Ladeprozesses des referenzierten
Objekts.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
29

Farben I
• Farben werden nach dem Rot-Grün-Blau
(RGB)-Modell als hexadezimale Zahlen
angegeben oder als vordefinierte Namen.
• Schema:
#RRGGBB mit 00 bis FF (256 Stufen)
z. B. Weiß: #FFFFFF, Schwarz: #000000,
Blau: #0000FF
• Nur Farben, die "websafe" sind, werden
überall gleich dargestellt.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
[??]
30

Farben II (Vordefinierte Bezeichnungen)
Name Beschreibung
aqua Hellblau
black Schwarz
blue Blau
fuchia Helles Lila
navy Dunkelblau
olive Olivgrün
teal Grünblau
white Weiß
gray Grau
green Grün
lime Hellgrün
maroon Braun
purple Lila
silver Silber
Webtechnologien – WS 2013/14 - Teil 4/HTML I
[??]
31

Farben III - Beispiel
...
Eine Farbtafel lässt sich von
http://www.farb-tabelle.de/de/farbtabelle-html4.htm
herunter laden.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
32

Zeichendarstellung I
Für Zeichen außerhalb des Bereichs a-z, A-Z, 0-9 gibt es eine
Ersatzdarstellung:
– &Symbol;
– &#Code;
Groß-/Kleinschreibung ist relevant.
Zeichen Ersatz Zeichen Ersatz
< &lt; ' &#039;
> &gt; Blank &nbsp;
ä &auml; Ä &Auml;
ö &ouml; Ö &Ouml;
ü &uuml; Ü &Uuml;
ß &szlig; Bullet &#149;
" &quot; Tilde &#152;
Webtechnologien – WS 2013/14 - Teil 4/HTML I
33

Zeichendarstellung II
• Vorne im Header wird auch der Code der Seite festgelegt:
– ISO-8859-1: ("ASCII"-8-Bit, Europäisch, auch Deutsch)
– ISO-8859-15: Dasselbe mit dem EUR-Zeichen
(siehe http://de.wikipedia.org/wiki/ISO_8859-15)
• Die unteren 256 Zeichen des ISO-10646 (Unicode) sind gleich
den ISO-8859-1-Zeichen.
• Die ASCII-Zeichen (128) sind wieder gleich den unteren 128
ISO-8859-1-Zeichen.
• Wenn im Kopf ISO-8859-15 eingestellt ist, können die
deutschen Umlaute benutzt werden; davon wird dringend
abgeraten: immer die Ersatzdarstellungen benutzen.
Dann kann einfach ohne Eingriff in die Texte der Zeichensatz
später geändert werden.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
34

Zeichendarstellung III
Zum Studium über Zeichensätze etc.:
Besuchen Sie einmal die Web-Site der Deutschen Botschaft in
Moskau und sehen Sie sich den HTML-Code an!
http://www.moskau.diplo.de/Vertretung/moskau/ru/Startseite.html

Tags für Texte innerhalb von Absätzen
html
...
...
...
...
...
...
...
...
Bedeutung
Fett
Kursiv
Unterstrichen
Durchgestrichen
Größere Schrift
Kleinere Schrift
Index-Schreibweise
Exponenten-Schreibweise
Dies ist eine Mischung aus Auszeichnung und Layout-Angaben.
Beachten Sie die Vererbung bei Schachtelung.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
36

Font I
...
...
...
...
...
• Schriften ist eine durch Kommata getrennte Liste von Namen der
Schriftarten, die verwendet werden sollen. Die Schriften werden nach
Priorität von links nach rechts probiert zu benutzen; nur installierte
Schriften werden benutzt.
• Es gibt 7 Schriftgrößen: 1 bis 7, wobei 3 die Standardgröße ist. +NR
erhöht, -NR erniedrigt relativ zur gültigen Größe die aktuelle Größe um
NR.
• Alle drei Attribute (face, size und color) können kombiniert in einem
Tag verwendet werden.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
37

Font II
Aufgrund der unterschiedlichen Bildschirmauflösungen, z.B. bei
Windows 96dpi, Macintosh und Linux 72dpi, sind die Schriftgrößen
auf dem Bildschirm unterschiedlich.
Lösung: Fontgröße mit Pixelangaben
Nachteil: Probleme mit der Barrierefreiheit
Webtechnologien – WS 2013/14 - Teil 4/HTML I
38

Auszeichnungen
html
...
...
...
...
...
...
...
...
Bedeutung
Hervorheben
Betonen
Zitat
Tastatureingabe
Kurzes Zitat
Hinzugefügter Text
Gelöschter Text
Akronym (Kürzel)
Das sind "echte" Auszeichnungen.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
39

Einbinden von Graphiken
• Text ist ein alternativer Text, der ausgegeben wird, wenn die Graphik
nicht geladen wird, oder wenn die Seite vorgelesen wird.
• Vertikale Ausrichtung innerhalb der Zelle mit den Werten:
top (Oberkante der Zelle), bottom (Unterkante),
middle (Zentrierung)
• Breite und Höhe der Graphik sollten immer angegeben werden, da
dann der Browser den Text herum unmittelbar setzen kann.
• Die Dicke bestimmt die Dicke des Rahmens der Graphik, falls sie als
Link (Knopf zum Klicken) benutzt wird.
• Beispiel:
Webtechnologien – WS 2013/14 - Teil 4/HTML I
40

Links - Referenzen
(1) ...
(2) ...
• (1) definiert eine Stelle, die (von außen) referenzierbar ist (Anker).
• (2) definiert einen Verweis auf ein Objekt (URL) oder auf eine Stelle
innerhalb eines HTML-Dokuments, die mit (1) definiert ist.
• Alle Ankernamen müssen innerhalb der Seite eindeutig sein.
• Ankername kann sein:
– Lokaler Anker: #name
– URL
– URL mit angehängtem lokalen Anker: http://....#name
• kann dieselben Attribute wie haben: rel, rev und title.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
41

Graphik als Link
• Ein Klick auf die Graphik geladen von URL2 lässt ein Objekt mit der URL1
laden.
• Die Graphik liegt an der Adresse URL2 und hat einen alternativen Text, der
- falls die Graphik nicht geladen wird - als Linktext gekennzeichnet wird.
• Beispiel:
Webtechnologien – WS 2013/14 - Teil 4/HTML I
42

Absätze
• fügt einen Zeilenumbruch ein, ohne einen Absatz zu
erzeugen (hat den normalen Zeilenabstand).
• generiert einen Absatz mit größerem Zeilenabstand.
• Als Ausrichtung sind: left, center, right und justify (Blocksatz)
möglich.
Beispiel:
Das ist der 1. Absatz.
und das der zweite gefolgt vom Dritten.
Das n&auml;chste Zeilenende ist einfach:
Jetzt geht es direkt in der n&auml;chste Zeile weiter.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
43

Überschriften
html
...
...
...
...
Bedeutung
Oberste Gliederungsstufe
2. Gliederungsstufe
3. Gliederungsstufe
4. Gliederungsstufe
...
• Als Attributwerte für align sind möglich: left, center, right, justify
Webtechnologien – WS 2013/14 - Teil 4/HTML I
44

Listen I
html
...
...
...
Bedeutung
Ungeordnete Liste
Einleitung eines Eintrags
Nummerierte Liste
Ein Beispiel für eine Liste von Links:
Allgemeines
Computer Supported Coop. Work
Facility Management
Kommunen
Medizin
Workflow Management
Webtechnologien – WS 2013/14 - Teil 4/HTML I
45

Listen II - Beispiele
Koffer
Tasche
Mantel
Mehl abwiegen
Eier schlagen
Zusammenmischen
Webtechnologien – WS 2013/14 - Teil 4/HTML I
46

Tabellen I
Kopf 1. Zeile, 1. Spalte
Kopf 1. Zeile, 2. Spalte
Kopf 1. Zeile, 3. Spalte
Daten 2. Zeile, 1. Spalte
Daten 2. Zeile, 2. Spalte
Daten 2. Zeile, 3. Spalte
Daten 3. Zeile, 1. Spalte
Daten 3. Zeile, 2. Spalte
Daten 3. Zeile, 3. Spalte
Webtechnologien – WS 2013/14 - Teil 4/HTML I
47

Tabellen II
Kopf 1. Zeile, 1. Spalte
Kopf 1. Zeile, 2. Spalte
Kopf 1. Zeile, 3. Spalte
Daten 2. Zeile, 1. Spalte
Daten 2. Zeile, 2. Spalte
Daten 2. Zeile, 3. Spalte
..... Wie oben
Webtechnologien – WS 2013/14 - Teil 4/HTML I
48

Tabellen III
html
...
...
Bedeutung
Gesamtdefinition der Tabelle
Tabellenzeile ("row")
Einleitung der Daten ("data")
Einleitung der Überschrift ("header")
• , und können align haben: left, right, center
• hat folgende Attribute:
– cellspacing: Raum zwischen den Zellen
– cellpadding: Abstand Inhalt zu Rand
– width: Gesamte Breite
– cols: Anzahl der Spalten
– align
Webtechnologien – WS 2013/14 - Teil 4/HTML I
49

Tabellen III - Werte für align
align-Attribut von :
Wert
left
center
right
bleedleft
bleedright
justify
Bedeutung
Tabelle am linken Rand wird rechts vom Text umflossen
Tabelle zentriert, kein umfließender Text
Tabelle am rechten Rand wird links vom Text umflossen
Ausrichtung am linken Fensterrand
Ausrichtung am rechten Fensterrand
Volle Textbreite für Tabelle
Webtechnologien – WS 2013/14 - Teil 4/HTML I
50

Attribute/Tags für ganze Tabellen
Attribute/Tags
valign=...
bgcolor=...
border=...
...
Bedeutung
Vertikale Ausrichtung: top, bottom
Hintergrundfarbe
Dicke der Ränder
Tabellenbeschriftung
align: left, right, center
valign: top, bottom
Webtechnologien – WS 2013/14 - Teil 4/HTML I
51

Tabellenzeilen
... (Horizontale Ausrichtung)
Wert
left
center
right
justify
Bedeutung
Linksbündige Ausrichtung der Zelleninhalte
Zentrierung Ausrichtung der Zelleninhalte
Rechtsbündige Ausrichtung der Zelleninhalte
Randausgleich
... (Vertikale Ausrichtung)
Wert
top
middle
bottom
Bedeutung
Oberkante der Zellen
Mittlere Ausrichtung
Oberkante der Zellen
Webtechnologien – WS 2013/14 - Teil 4/HTML I
52

Tabellenzellen
und können als Attribute haben:
• align, Valign und nowrap
(Abstellen des automatischen Zeilenumbruchs)
• colspan: Anzahl der Spalten, über die eine Zelle reicht
• rowspan: Anzahl der Zeilen, über die eine Zelle reicht
Webtechnologien – WS 2013/14 - Teil 4/HTML I
53

Verwendung von Tabellen
• Tabellen mit sichtbaren Rändern werden als normale Tabellen
benutzt.
• Tabellen ohne sichtbare Ränder als Mittel zur
– Layoutgestaltung von Formularen
– Gestaltung von Seiten, z.B. 2-spaltige Ausgabe
– Begrenzung bzw. Festlegung der benutzten Fläche des Browsers
(Seitenlayout)
Die Benutzung von Tabellen zur Layout-Gestaltung ist
nicht zu empfehlen.
Besser ist es mit zu arbeiten.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
54

Beispiel (Golive CS2) I
Aufspannen des Rahmens mit einem Raster
Webtechnologien – WS 2013/14 - Teil 4/HTML I
55

Beispiel (Golive CS2) II
Der generierte Code zur Darstellung des aufgespannten Bereichs.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
56

Beispiel (Golive CS2) III
Nun wird ein Rechteck angelegt und dort ein kleiner Text
hinein geschrieben.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
57

Beispiel (Golive CS2) IV
Der generierte Code zur Darstellung des aufgespannten Bereichs
mit Rechteck und Text.
Webtechnologien – WS 2013/14 - Teil 4/HTML I
58

Nach dieser Anstrengung etwas Entspannung...
Webtechnologien – WS 2013/14 - Teil 4/HTML I
59