Download - Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007
Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen
W1321-02 – WS 2006/2007
Grundlagen Kommunikationssysteme
HTML/CSS
2006-10-23Wirtschaftsinformatik 1 2
Agenda
Kommunikationssysteme OSI-Referenzmodell Client-Server-Architektur Webserver Tomcat/Cocoon
HTML Definition Allg. Syntax Spezielle Tags Formatierung zwischendurch Beispiele
CSS Definition Einbindung in HTML
2006-10-23Wirtschaftsinformatik 1 4
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
2006-10-23Wirtschaftsinformatik 1 5
ISO-OSI-Referenzmodell
Ablauf Kommunikation
logische, horizontal Verbindung Protokoll
Physische, vertikale Kommunikation zwischen Schichten
Quelle: Abdus Salam International Centre for Theoretical Physics
http://www.ictp.trieste.it/~radionet/1998_school/networking_presentation/page6.html
Anwendungs-
orientiert
Transport-orientiert
HTTPFTP
HTTPS
TCPUDP
IP
EthernetToken Ring
Protokolle:
2006-10-23Wirtschaftsinformatik 1 6
Client-Server-Architektur
[Quelle: Stahlknecht, Hasenkamp: Einführung in die Wirtschaftsinformatik. Springer-Verlag, Berlin et al., 11. Auflage 2005]
DB
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.
2006-10-23Wirtschaftsinformatik 1 7
Webserver
Statischer Webauftritt: Rückgabe gespeicherter (HTML)-Dokumente
Generierter Webauftritt: Rückgabe zum Zeitpunkt der Anfrage erzeugter (HTML)-DokumenteBsp. 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
2006-10-23Wirtschaftsinformatik 1 8
Cocoon
Webserver + ScriptEngine
(z.B. Tomcat)
Darstellung
Logik
Daten
XML
Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.] : New Riders , 2003
2006-10-23Wirtschaftsinformatik 1 10
HTML - Definition
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.
„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]
2006-10-23Wirtschaftsinformatik 1 11
HTML - Definition
Zwei Sichten: Im Browser Anwendersicht Im Editor Entwicklersicht
Bsp.: Uni Paderborn
2006-10-23Wirtschaftsinformatik 1 12
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.)
2006-10-23Wirtschaftsinformatik 1 13
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.
2006-10-23Wirtschaftsinformatik 1 14
Aufgabe (I)
HTML-Seite erstellen
Vorgehensweise:1. Start – Ausführen – Notepad2. HTML-Grundgerüst erstellen3. Titel „Winfo 1-Praktikum“4. Eine Überschrift und zwei
Absätze im Body.5. Speichern als index.html6. Aufruf im Browser
2006-10-23Wirtschaftsinformatik 1 15
Weitere HTML-Tags
<p>Hier ist ein Absatz.</p>Textabsatz
<h1></h1>…<h6></h6>Überschriften von groß bis klein
<br/>Zeilenumbruch
2006-10-23Wirtschaftsinformatik 1 16
Unsortierte Liste
<ul><li>Produkte</li><li>Unternehmen</li><li>Angebote</li>
</ul>
2006-10-23Wirtschaftsinformatik 1 17
Nummerierte Liste
<ol><li>Einkauf</li><li>Lagerung</li><li>Verkauf</li>
</ol>
2006-10-23Wirtschaftsinformatik 1 18
Weitere HTML-Tags (II)
<b>...</b> fett <i>...</i> kursiv <u>...</u> unterstrichen <i><u>…</u></i> kursiv und
unterstrichenReihenfolge beachten!
2006-10-23Wirtschaftsinformatik 1 19
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>
2006-10-23Wirtschaftsinformatik 1 20
Aufgabe (II)
HTML-Seite erweitern
1. index.html wieder in Notepad öffnen
2. Bereich (<div>) mit1. Überschrift 3. Ordnung 2. darunter wieder einen Textabsatz3. eine unsortierte Liste mit vier
Einträgen4. Textformatierungen fett + kursiv
3. Speichern und im Browser öffnen
2006-10-23Wirtschaftsinformatik 1 21
Tabellen
<table border="1"> <tr>
<th>Microsoft</th>
<th>Mozilla</th><th>Opera</th>
</tr> <tr>
<td>IE 6</td> <td>Firefox</td><td>Opera</td>
</tr><tr>
<td>unsicher</td><td>sicher</td><td>sicher</td>
</tr></table>
2006-10-23Wirtschaftsinformatik 1 22
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> <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> <tr align="center"> <td width="100%" colspan="2" rowspan="1">
<u>Impressum</u> <u>Kontakt</u>
</td> </tr></table>
2006-10-23Wirtschaftsinformatik 1 23
Tabellen (III)
Zellen verbinden spaltenweise über colspan zeilenweise über rowspan
Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite
2006-10-23Wirtschaftsinformatik 1 24
Links
Textverweis:<a href="http://www.upb.de/">Uni PB</a>
Email-Verweis:<a href="mailto:[email protected]?subject=Test">Email mit Betreff</a>
Anker Start
Anker Ende
Referenz bzw. das Linkziel
Linktext im Browser
2006-10-23Wirtschaftsinformatik 1 25
Bilder
Referenzieren<img src="logo.gif" />
Rahmen<img src= "logo.gif" width= "50" height= "30" border="4" />
Pfade besser relativ wählensrc=“logo.gif“ liegt im gleichen Verzeichnis
wie HTML-Dateisrc=“images/logo.gif“ liegt ein Verzeichnis
darunter
2006-10-23Wirtschaftsinformatik 1 26
Aufgabe (III)
HTML-Seite erweitern
1. index.html wieder in Notepad öffnen
2. Tabelle mit drei Spalten und zwei Reihen einfügen
1. Linke Spalte je ein Bild (logo.gif)2. Rechte Spalte zwei Textlinks und ein
E-Maillink
2006-10-23Wirtschaftsinformatik 1 27
HTML-Formatangaben
HintergrundFarbe: <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
2006-10-23Wirtschaftsinformatik 1 29
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,…)
2006-10-23Wirtschaftsinformatik 1 30
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>
2006-10-23Wirtschaftsinformatik 1 31
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 Beispielenhttp://de.selfhtml.org/css/index.htm
Extrem:http://www.csszengarden.com/
2006-10-23Wirtschaftsinformatik 1 32
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 [email protected]
2006-10-23Wirtschaftsinformatik 1 33
Webseite bei IMT
Über IMT-Benutzerverwaltung Website freischalten
Via FTP-Zugang Seite kopieren Seite aufrufen
http://homepages.uni-paderborn.de/user
2006-10-23Wirtschaftsinformatik 1 34
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/