Grete Kugler Webdesign - Teil 2 Tabellen und Listen Bilder.

Präsentation zum Thema: "Grete Kugler Webdesign - Teil 2 Tabellen und Listen Bilder."—  Präsentation transkript:

1 Grete Kugler Webdesign - Teil 2 Tabellen und Listen Bilder

2 Grete KuglerWebdesign - Teil22 Aufbau einer Tabelle ev. eine Überschrift eine oder mehrere Gruppen von Zeile, ev. mit eigener Überschrift eine oder mehrere Spalten jede Zeile enthält eine oder mehrere Zellen... align: left/right/center width, height, cols

3 Grete KuglerWebdesign - Teil23 Tabellenelemente Tabellenüberschriften... Attribut align: top, bottom Spalten gruppieren... Attribute: span, width Zellen tablehead tabledata

4 Grete KuglerWebdesign - Teil24 Beispiel 1 Hinweis Tabelle 1 Spalte 1 Spalte 2 Spalte 3 Zelle 1 Zelle 2 Zelle 3 Zelle 4 Zelle 5 Zelle 6

5 Grete KuglerWebdesign - Teil25 Bsp. 1 im Browser

6 Grete KuglerWebdesign - Teil26 weitere Formatierungen cellpadding: Abstand zwischen Zelleninhalt und Rand cellspacing: Abstand zwischen den Zellen colspan: Anzahl der Zellen einer Zeile, die verbunden werden rowspan: Anzahl der Zellen einer Spalte die verbunden werden. bgcolor: Hintergrundfarbe

7 Grete KuglerWebdesign - Teil27 Beispiel 2 <table align="left" width="70%" cols="3" border="1" bgcolor="SILVER" cellspacing="10" cellpadding="20"> Hinweis Tabelle 2 Zelle 1 Zelle 2 und 5 Zelle 3 Zelle 4 Zelle 6

8 Grete KuglerWebdesign - Teil28 Bsp. 2 im Browser

9 Grete KuglerWebdesign - Teil29 Listen Ungeordnete Liste Gordnete Liste Glossare

10 Grete KuglerWebdesign - Teil210 Ungeordnete Liste... jeder Eintrag (Listitem) :.. Blickfangpunkte (Bullet) mit dem Attribut type setzen: square / circle / disk

11 Grete KuglerWebdesign - Teil211 Beispiel Erster Eintrag Zweiter Eintrag 1. verschachtelter Eintrag 2. verschachtelter Eintrag Dritter Eintrag

12 Grete KuglerWebdesign - Teil212 Geordnete Liste... (ordered list) jeder Eintrag:... Zahlen oder Buchstaben werden je nach Verschachtelungsebene vorangestellt: –1: arabisch –a: Kleinbuchstaben –A: Großbuchstaben –i: kleine röm. Zahlen: xii –I: große röm. Zahlen: XII

13 Grete KuglerWebdesign - Teil213 Beispiel Erster Eintrag Zweiter Eintrag Erster verschachtelter Eintrag Zweiter verschachtelter Eintrag dritter Eintrag

14 Grete KuglerWebdesign - Teil214 Glossar Mehrere Begriffe, die jeweils definiert werden.... (Definitionsliste) Begriff:... Erklärung:... Zu einem Begriff sind mehrere "dd"-Einträge möglich.

15 Grete KuglerWebdesign - Teil215 Beispiel Tag So werden die Formatierungsanweisungen innerhalb eines HTML-Dokuments bezeichnet. URL Abkürzung für Uniform Ressource Locator. Die Adresse im Internet, unter der ein Angebot abrufbar ist.

16 Grete KuglerWebdesign - Teil216 im Browser

17 Grete KuglerWebdesign - Teil217 Graphiken Attribute –src: Grafik-Datei –border: Rahmenbreite –align: Position (browserabhängig) –alt: Alternativtext –width, height: Größe

18 Grete KuglerWebdesign - Teil218 weitere Möglichkeiten lowsrc: geringere Auflösung Hyperlink Hintergrundgraphik

19 Grete KuglerWebdesign - Teil219 Graphikformate GIF: Graphic Interchange Format JPEG: Joint Photographic Expert Group GIF: günstig bei größeren einfärbigen Flächen, kein Informationsverlust JPEG: Informationsverlust bei Kompression, ideal für Porträs und Landschaftsaufnahmen