Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder

Transkript

1 Web-basierte Anwendungssysteme XHTML-Tabellen und Bilder Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Fachbereich 2 Informatik und Ingenieurwissenschaften Wissen durch Praxis stärkt Seite 1 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

2 Tabellen Tabellen sind ein Mittel, zur tabellarischen Positionierung von Text und Grafik auf einer HTML-Seite. Eine Tabelle besteht aus: Caption: <caption>... </caption> Rows: <tr>... </tr> Headerzellen: <th> Kopftext </th> Datenzellen: <td> Datentext </td> Seite 2 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

3 Tabellen Übung Erstellen Sie die Datei tab01.htm Speichern Sie Ihre Datei Starten Sie einen Browser und öffnen Sie tab01.htm Ergebnis Validieren Sie Ihre Seite <table width="100%" border="1px"> <caption>das ist eine Tabelle</caption> <tr> <th>name </th> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table> <th>vorname</th> <td>müller </td> <td>marcus </td> <td>muster..</td> <td>hans </td> <td>schulz </td> <td>julia </td> Seite 3 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

4 Tabellen: thead, tfood, tbody, colspan Elemente zur Einteilung in Kopf-, Körper- und Fußbereich: Jeder Bereich kann aus mehreren Rows bestehen. Die Notationsfolge (thead, tfoot,tbody) ist einzuhalten. Bei langen Tabellen erzeugen Browser automatisch Kopf- und Fußbereich pro Seite. Seite 4 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

5 thead, tfood, tbody, colspan Übung Erstellen Sie tab02.htm Ergebnis Speichern Sie Ihre Datei Validieren Sie Ihre Seite Starten Sie einen Browser und öffnen Sie tab02.htm <table width="100%" border="1px"> <caption>das ist eine Tabelle</caption> <thead> <tr> <th>name </th> <th>vorname</th> </tr> </thead> <tfoot> <tr> <td colspan="2">studenten Liste</td> </tr> </tfoot> <tbody> <tr> <td>müller </td> <td>marcus </td> </tr> <tr> <td>muster...</td> <td>hans </td> </tr> <tr> <td>schulz </td> <td>julia </td> </tr> </tbody> </table> Seite 5 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

6 Tabellen: colspan, rowspan Oft benötigt man Tabellen, die in Zeilen und Spalten nicht ebenmäßig sind. Man kann Zellen und Spalten verbinden: colspan="2" - "überspannt" diese Zelle und die nächste, also insgesamt 2. rowspan="3" - "überspannt" diese Zelle plus die Zellen der nächsten zwei Reihen, also 3. Seite 6 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

7 colspan, rowspan Übung Erstellen Sie tab03.htm Ergebnis Speichern Sie Ihre Datei Validieren Sie Ihre Seite Starten Sie einen Browser und öffnen Sie tab03.htm <table width="100%" border="1px"> <tr> <th colspan="2">liste </th> </tr> <tr> <td rowspan="3">namen...</td> <td>marcus </td> </tr> <tr> <td>hans </td> </tr> <tr> <td>julia </td> </tr> </table> Seite 7 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

8 Aufgabe: Erstellen Sie folgende Web-Seite Erstellen Sie eine Web-Seite mit folgender Tabelle Spalte01 Spalte02 Spalte03 Spalte04 Spalte Seite 8 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

9 Tag img Um Grafiken in eine Webseite aufzunehmem wird der Tag img verwendet: <img src="uri" alt="text"/> Pflicht-Attribute: src - absoluter oder relativer Verweis, alt - alternativer Text Beispiele: <img src="/img/demo.gif" alt="demo 1" /> <img src=" alt="demo 2" /> Seite 9 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

10 Grafiken Es gibt zwei Grafiktypen: Rastergrafik - sie setzten sich aus Bildpunkten (Pixel) zusammen. GIF, PNG, JPEG Vektorgrafik - alle Elemente werden durch mathematische Ausdrücke beschrieben Das Bild wird in dieser Form gespeichert und beim Darstellen immer "neu gezeichnet". SVG (Scalable Vector Graphics) Seite 10 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

11 Raster-Grafikformate: Eigenschaften Im Web werden derzeit hauptsächlich folgende Grafikformate genutzt: GIF PNG JPEG Graphic Interchange Format Portable Network Graphics Format Joint Photographic Experts Group Format Browserunterstützung Farben/Pixel Interlacing, Transparenz Komprimierungsar t Darstellung von Icons Darstellung von Fotos GIF Sehr gut 256 Ja Verlustlos Sehr gut Angemessen PNG Sehr gut Millionen Ja Verlustlos Sehr gut Gut JPEG Sehr gut Millionen Nein Verlust Schlecht Sehr gut Seite 11 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

12 Aufgabe: Erstellen Sie folgende Web-Seite Seite 12 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

13 Vektorgrafikformat: SVG SVG - Scalable Vector Graphics, W3C-Empfehlung SVG-Dateien sind XML-Dokumente, können mit Texteditor bearbeitet werden. Webbrowserunterstützung - Firefox, Opera, Chrome Andere benötigen noch Plugins wie den kostenlosen Adobe SVG Viewer. Seite 13 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

14 Vektorgrafikformat: SVG Erstellen Sie vec01.htm Ergebnis Speichern Sie Ihre Datei Validieren Sie Ihre Seite Starten Sie einen Browser und öffnen Sie vec01.htm <body> <p>vektorgrafik im SVG-Format</p> <p> <svg xmlns=" version="1.0" width="200" height="200" > <circle cx="100" cy="100" r="80" stroke="#de280b" stroke-width="4" fill="#ff0000"/> </svg> </p> </body> Seite 14 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17

15 Vektorgrafikformat: SVG - Beispiele <body> <p>ein Viereck</p> <p> <svg xmlns=" version="1.0" width="310" height="100" > <rect width="300.7" height="80" x="0" y="10" style="fill:#ee0000" /> </svg> </p> </body> <body> <p>ein Text</p> <p> <svg xmlns=" version="1.0" width="640" height="50" > <text x="0" y="40" style="font-size:40px;font-family:verdana"> Das ist ein Text </text> </svg> </p> </body> Seite 15 Prof. Dr. Sergej Alekseev Prof. Dr. Armin Lehmann Web-basierte Anwendungssysteme WS 2016/17