HTML 4.x, Teil 2

Web und Multimedia
HTML 4.x, Teil 2
Quelle: Hess – HTML4
1
Inhalte
„
Einführung in HTML
„
Textgestaltung
- HTML - Cascading Style Sheets „
Screenlayout
- HTML (Tabellen)
- Frames
- Cascading Style Sheets
„
Hyperlinks
„
Formulare
2
Tabellen
Anwendungen von Tabellen in HTML
1. Tabellarische Darstellung von Daten
2. Anordnung der Bildschirminhalte (Layoutfunktion)
Bevor es Style-Sheets gab, waren Tabellen das
Haupthilfsmittel für das Screen-Design (vor allem für
die Positionierung).
... und sind es heute noch bei vielen Web Sites
(Browser-Problematik :-(
3
Tabellen
Als Hilfsmittel für das Layout
Browser haben die Eigenschaft grössere Leerflächen
nicht anzuzeigen. Z.B. haben n Absatztags hintereinander
die gleiche Wirkung, wie ein Einziges.
4
Tabellen
Screenlayout mit (blinden) Tabellen
Vor Cascading Style Sheets waren Tabellen das Mittel der
Wahl, um exaktes Seitenlayout in HTML-Seiten herstellen zu
können.
Quelle: Siegel – Web-Site-Design
5
Tabellen
Screenlayout mit blinden Tabellen
Die Tabellenstruktur
hinter der Web-Site.
Angezeigt mit Netscape
Composer
Quelle: Siegel – Web-Site-Design
Tabellen
Screenlayout mit (blinden) Tabellen
Es handelt sich um sogenannte „blinde
(unsichtbare) Tabellen“ d.h. der
Rahmen der Tabelle wird nicht mit
angezeigt.
Blinde Tabellen werden erzeugt, indem
dem Border-Attribut der Wert 0
zugewiesen wird oder das Attribut ganz
weggelassen wird.
Quelle: Siegel – Web-Site-Design
Tabellen
Datentabellen
Beispiel:
<table >
<tr>
<td>Erste Reihe </td>
</tr>
<tr>
<td>Zweite Reihe </td>
</tr>
</table>
8
Tabellen
Datentabellen
Wenn das Border-Tag nicht weggelassen wird, sieht die die
Tabelle so aus:
<table border>
<tr>
<td>Reihe 1 Spalte1</td> <td>Reihe1 Spalte2</td>
</tr>
<tr>
<td>Reihe 2 Spalte1</td> <td>Reihe2 Spalte2</td>
</tr></table>
Tabellen
Tabellengrösse
Die Breite und die Höhe einer
Tabelle kann mit den Attributen
width und height festgelegt
werden.
<table border width=80%
height=50>
Die Grössenangaben erfolgen
dabei i.d.R. absolut in Pixeln
oder relativ zum Browserfenster
in Prozent.
<tr>
<th>Überschrift</th>
</tr>
<tr>
<td>Daten</td>
</tr>
</table>
10
Tabellen
Zellengrösse
Auch die Breite und die Höhe
der einzelnen Zellen einer
Tabelle kann mit den Attributen
width und height festgelegt
werden.
<table border>
<th width=80% height=200>
Überschrift</th>
<tr>
<td height=100>
Daten </td></tr>
</table>
Tabellen
Ausrichtung der Inhalte zum Zellenrand
Die Daten in einer Zelle können horizontal und vertikal
zu den Zellenrändern ausgerichtet werden.
„
Die horizontale Ausrichtung wird mit dem Attribut align
vorgenommen.
„
Vertikal können die Zelleninhalte mit valign ausgerichtet
werden.
12
Tabellen
Ausrichtung der Inhalte zum Zellenrand
<table border width=500 height=100>
<tr>
<td align="left">links ausgerichtet</td>
<td align="center">in der Mitte</td>
<td align="right">rechts ausgerichtet</td>
</tr>
<tr>
<td>standard</td>
<td valign="top">nach oben ausgerichtet</td>
<td valign="bottom">nach unten ausgerichtet</td>
</tr>
</table>
13
Tabellen
Ausrichtung der Inhalte zum Zellenrand
14
Tabellen
Abstand zum Zellenrand
Der Abstand zum Zellenrand wird mit
dem Attribut cellpadding festgelegt.
<table border cellpadding=40>
<td>
cellpadding =
</td>
<tr>
<td>
40</td>
</tr></table>
Quelle: Hess – HTML4
15
Tabellen
Weitere Attribute für das Screenlayout
Der Abstand der Zellen untereinander in einer Tabelle
lässt sich mit dem Attribut "cellspacing" einstellen.
<table cellspacing=100>
<tr><td colspan=2>A1</td>
<td>A2</td></tr>
<tr> <td rowspan=2>B1</td>
<td>B2</td>
</tr>
<tr> <td>C1</td>
<td>C2</td>
</tr></table>
Tabellen
Zusammenfassung
Attribute im einleitenden «table» Tag
Quelle: SelfHTML V. 8.x
17
Tabellen
Verbinden von Zellen
Zellen können mit den Attributen colspan und rowspan
miteinander verbunden werden.
Mit colspan werden eine bestimmte Anzahl von Zellen, die
nebeneinander in einer Zeile der Tabelle liegen, miteinander
verbunden.
Es werden dabei mehre Spalten (Engl.: columns)
verbunden.
18
Tabellen
Verbinden von Zellen
Mit rowspan werden beliebig viele Zellen, die untereinander
in einer Spalte der Tabelle liegen, verbunden.
Es werden dabei mehre Reihen (Engl.: rows) verbunden.
19
Tabellen
Verbinden von Zellen
Rowspan und colspan werden als Parameter die Anzahl
der Zellen, die verbunden werden sollen, übergeben.
<table border>
<tr><td colspan=2>A1</td>
<td>A2</td>
</tr>
<tr><td rowspan=2>B1</td>
<td>B2</td>
</tr>
<tr><td>C1</td>
<td>C2</td>
</tr>
</table>
20
Tabellen
Als Hilfsmittel für das Layout
Tabellen sind eigentlich gar nicht für das Layout gedacht.
Sie sind eine Krücke, die solange genutzt wird, bis es
etwas besseres gibt.
Das Anlegen von Tabellen ist unkomfortabel. Man muss
bei komplezierten Gebilden häufig Testen (CrossBrowser, Cross-Platform) und die Tabellendefinitionen
anpassen, bis das gewünschte Ergebnis erreicht wird.
Der HTML-Code mit Tabellen wird schnell unübersichtlich.
21
Tabellen
Als Hilfsmittel für das Layout
Ein grosses Problem beim Layout ist, dass leere
Tabellenfelder nicht mit angezeigt werden.
Dies bringt häufig das gesamte Layout durcheinander.
Screendesigner helfen häufig, indem sie transparente 1Pixelgraphiken in leere Tabellenfelder einfügen.
Diese Methode ist aber nicht nur unelegant; sie erzeugt
auch Probleme, wenn die Anwender die Darstellung von
Bildern in ihrem Browser abgestellt haben. Alternativ dazu
wir ein Punkt in der Hintergrundfarbe in die lere Zelle
gesetzt.
Tabellen als Hilfsmittel für das Screenlayout haben
allerdings den Vorteil, das sie auch auf älteren Browsern
angezeigt werden.
22
Diese Folien basieren auf der Multimedia-Vorlesung 2002/03 des Studiengangs
Wirtschaftsinformatik an der Fachhochschule Solothurn Nordwestschweiz.
Die Modulverantwortung lag bei Prof. Maike Franzen (FHSO). Die Folien wurden zuletzt
vom externen Lehrbeauftragten Dr. Thomas Piendl überarbeitet und 2002/03 gezeigt:
Prof. Maike Franzen
Fachhochschule Solothurn Nordwestschweiz
Riggenbachstr. 16
CH-4600 Olten
Dr. Thomas Piendl
NET - Network for Educational Technology
ETH Zentrum SOW G 15
Sonneggstrasse 63
CH-8092 Zuerich
23