Grundlagen Kommunikationssysteme HTML/CSS Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007 Grundlagen Kommunikationssysteme HTML/CSS
Agenda Kommunikationssysteme HTML CSS OSI-Referenzmodell Client-Server-Architektur Webserver Tomcat/Cocoon HTML Definition Allg. Syntax Spezielle Tags Formatierung zwischendurch Beispiele CSS Einbindung in HTML Wirtschaftsinformatik 1 2006-10-23
Kommunikationssysteme Einige (wenige) Grundlagen
ISO-OSI-Referenzmodell OSI = Open System Interconnection 7-Schichten-Referenzmodell für herstellerunabhängige Kommunikations-systeme Jede Schicht stellt darüberliegender Schicht bestimmte Dienste zur Verfügung und nutzt selbst Dienste der darunterliegenden Schicht Wirtschaftsinformatik 1 2006-10-23
ISO-OSI-Referenzmodell Protokolle: Anwendungs-orientiert HTTP FTP HTTPS TCP UDP Transport-orientiert IP Ethernet Token Ring Quelle: Abdus Salam International Centre for Theoretical Physics http://www.ictp.trieste.it/~radionet/1998_school/networking_presentation/page6.html Ablauf Kommunikation logische, horizontal Verbindung Protokoll Physische, vertikale Kommunikation zwischen Schichten Wirtschaftsinformatik 1 2006-10-23
Client-Server-Architektur DB [Quelle: Stahlknecht, Hasenkamp: Einführung in die Wirtschaftsinformatik. Springer-Verlag, Berlin et al., 11. Auflage 2005] Einstufig: Server hält Daten und Anwendungen vor Client-Zugriff bzw. eigene Anwendungen und Daten Mehrstufig: Getrennte Server für Daten und Anwendungen Client-Zugriff sowohl auf Daten- als auch auf Anwendungsserver Client und Server müssen nicht notwendigerweise zwei getrennte Maschinen sein. Es handelt sich mehr um Dienste/Prozesse. Wirtschaftsinformatik 1 2006-10-23
Webserver Statischer Webauftritt: Rückgabe gespeicherter (HTML)-Dokumente Generierter Webauftritt: Rückgabe zum Zeitpunkt der Anfrage erzeugter (HTML)-Dokumente Bsp. Spiegel Online Dynamischer Webauftritt: Rückgabe erzeugter (HTML)-Dokumente zum Zeitpunkt der Anfrage und durch Benutzereingabe Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.] : New Riders , 2003 Wirtschaftsinformatik 1 2006-10-23
Cocoon Darstellung Logik Daten Webserver + ScriptEngine (z.B. Tomcat) XML Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.] : New Riders , 2003 Wirtschaftsinformatik 1 2006-10-23
Hypertext Markup Language HTML Hypertext Markup Language
HTML - Definition „Die Hypertext Markup Language (HTML), oft auch kurz als Hypertext bezeichnet, ist eine textbasierte Auszeichnungssprache zur Darstellung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. (…)“ [Quelle: http://de.wikipedia.org/wiki/Html abgerufen am 2006-10-16] Anmerkung: Wir werden uns im Praktikum an die XHTML 1.0 – Konventionen halten. Größte Unterschiede zu HTML 4.01: alle Tags werden klein geschrieben und in der richtigen Reihenfolge geschlossen. Wirtschaftsinformatik 1 2006-10-23
HTML - Definition Zwei Sichten: Im Browser Anwendersicht Im Editor Entwicklersicht Bsp.: Uni Paderborn Wirtschaftsinformatik 1 2006-10-23
Allg. Aufbau von HTML-Seiten Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: Dokumenttyp-Deklaration (Angabe zur verwendeten (X)HTML-Version) Header (Kopfdaten. z.B. Angaben zu Titel) Body (anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Wirtschaftsinformatik 1 2006-10-23
Syntax einer (X)HTML-Seite <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Landhandel online</title> </head> <body> <h1>Kaufen Sie landwirtschaftliche Produkte ein</h1> <p>Hier können Sie in verschiedenen Kategorien nach diversen Produkten des täglichen Landlebens stöbern und in Ihren Warenkorb legen.</p> </body> </html> Body beinhaltet die eigentlichen, sichtbaren Informationen einer Webseite. Wirtschaftsinformatik 1 2006-10-23
Aufgabe (I) HTML-Seite erstellen Vorgehensweise: Start – Ausführen – Notepad HTML-Grundgerüst erstellen Titel „Winfo 1-Praktikum“ Eine Überschrift und zwei Absätze im Body. Speichern als index.html Aufruf im Browser Wirtschaftsinformatik 1 2006-10-23
Weitere HTML-Tags <p>Hier ist ein Absatz.</p> Textabsatz <h1></h1>…<h6></h6> Überschriften von groß bis klein <br/> Zeilenumbruch Wirtschaftsinformatik 1 2006-10-23
Unsortierte Liste <ul> <li>Produkte</li> <li>Unternehmen</li> <li>Angebote</li> </ul> Wirtschaftsinformatik 1 2006-10-23
Nummerierte Liste <ol> <li>Einkauf</li> <li>Lagerung</li> <li>Verkauf</li> </ol> Wirtschaftsinformatik 1 2006-10-23
Weitere HTML-Tags (II) <b>...</b> fett <i>...</i> kursiv <u>...</u> unterstrichen <i><u>…</u></i> kursiv und unterstrichen Reihenfolge beachten! Wirtschaftsinformatik 1 2006-10-23
Bereich/Block <div align=“right“> <p>Der Absatz gehört</p> <p>zu diesem Absatz</P> <ul> <li>genau</li> <li>wie diese</li> <li>Liste.</li> </ul> </div> Wirtschaftsinformatik 1 2006-10-23
Aufgabe (II) HTML-Seite erweitern index.html wieder in Notepad öffnen Bereich (<div>) mit Überschrift 3. Ordnung darunter wieder einen Textabsatz eine unsortierte Liste mit vier Einträgen Textformatierungen fett + kursiv Speichern und im Browser öffnen Wirtschaftsinformatik 1 2006-10-23
Tabellen <table border="1"> <tr> <th>Microsoft</th> <th>Mozilla</th> <th>Opera</th> </tr> <td>IE 6</td> <td>Firefox</td> <td>Opera</td> <td>unsicher</td> <td>sicher</td> </table> Wirtschaftsinformatik 1 2006-10-23
Tabellen (II) <table width="100%" border="1" cellpadding="2" cellspacing="2"> <tr> <td colspan="2" rowspan="1">Hier könnte ein Banner oder ein Logo sein</td> </tr> <td width="20%">Navigation<br> <u>Link 1</u><br> <u>Link 2</u></td> <td width="80%">Hier wäre der Inhalt denkbar.<br></td> <tr align="center"> <td width="100%" colspan="2" rowspan="1"> <u>Impressum</u> <u>Kontakt</u> </td> </table> Wirtschaftsinformatik 1 2006-10-23
Tabellen (III) Zellen verbinden spaltenweise über colspan zeilenweise über rowspan Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite Wirtschaftsinformatik 1 2006-10-23
Referenz bzw. das Linkziel Links Textverweis: <a href="http://www.upb.de/">Uni PB</a> Email-Verweis: <a href="mailto:beispiel@example.org? subject=Test">Email mit Betreff</a> Anker Start Referenz bzw. das Linkziel Linktext im Browser Anker Ende Wirtschaftsinformatik 1 2006-10-23
Bilder Referenzieren <img src="logo.gif" /> Rahmen <img src= "logo.gif" width= "50" height= "30" border="4" /> Pfade besser relativ wählen src=“logo.gif“ liegt im gleichen Verzeichnis wie HTML-Datei src=“images/logo.gif“ liegt ein Verzeichnis darunter Wirtschaftsinformatik 1 2006-10-23
Aufgabe (III) HTML-Seite erweitern index.html wieder in Notepad öffnen Tabelle mit drei Spalten und zwei Reihen einfügen Linke Spalte je ein Bild (logo.gif) Rechte Spalte zwei Textlinks und ein E-Maillink Wirtschaftsinformatik 1 2006-10-23
HTML-Formatangaben Hintergrund Text Farbe: <body bgcolor=“#f5f5f5“> Bild: …background="background.jpg“> Text <body text=“green“ link=“gold“> und das für jede Seite, jeden Link… Besser: Formatierung auslagern CSS Wirtschaftsinformatik 1 2006-10-23
Cascading Style Sheets CSS Cascading Style Sheets
CSS - Definition “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” http://www.w3.org/Style/CSS/ Vorteile Zentrale Design-Definition und somit schnell änderbar (Formatvorlage) Einheitliches Design für alle Seiten eines Projektes Mehr Gestaltungsmöglichkeiten als mit HTML Vorlagen für verschiedene Ausgabeformate (PC, Handy, PDA,…) Wirtschaftsinformatik 1 2006-10-23
CSS – Cascading Style Sheets Einbindung über Verweis im Head an externe Datei <link rel="stylesheet" type="text/css" href="formate.css"> oder im Head selbst deklarieren <style type="text/css"> <!-- /* ... Hier werden die Formate definiert ... */ --> </style> oder in einem HTML-Tag selbst <h1 style="[element-spezifische Formate]">...</h1> Wirtschaftsinformatik 1 2006-10-23
CSS (II) Empfehlungen zum Umgang mit CSS 2.0 und mögliche Formatierungen siehe http://www.w3.org/TR/REC-CSS2/ http://www.w3.org/Style/CSS/ oder mit Beispielen http://de.selfhtml.org/css/index.htm Extrem: http://www.csszengarden.com/ Wirtschaftsinformatik 1 2006-10-23
Arbeitsauftrag Ab Mi., 25.10.2006 auf Webseite verfügbar Abgabe bis 29.10.2006 23:59 h per E-Mail mit Link zur Seite an andre.wickenhoefer@notes.upb.de Wirtschaftsinformatik 1 2006-10-23
Webseite bei IMT Über IMT-Benutzerverwaltung Website freischalten Via FTP-Zugang Seite kopieren Seite aufrufen http://homepages.uni-paderborn.de/user Wirtschaftsinformatik 1 2006-10-23
Quellen/Verweise Umfassende Online-Hilfe zu (X)HTML, CSS etc. http://de.selfhtml.org Empfehlung Webeditoren: Texteditor (m. Syntaxhighlighting u.a. HTML, Java, SQL): Notepad2 http://www.flos-freeware.ch/notepad2.html WYSIWYG: NVU http://www.nvu-composer.de/ Wirtschaftsinformatik 1 2006-10-23
Weitere Links http://keksdose.netfirms.com/bookmarks.html http://www.4.am/tutorial/Tutorial/CSS_fuer_Schreibfaule:_Schlanke_Webprogrammierung_200510241317.html http://www.webdesign-referenz.de/start.shtml http://www.devlisting.com/ Wirtschaftsinformatik 1 2006-10-23