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

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


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:


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.


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


Cocoon

Webserver + ScriptEngine

(z.B. Tomcat)

Darstellung

Logik

Daten

XML

Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.] : New Riders , 2003

HTML

Hypertext Markup Language


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]


HTML - Definition

Zwei Sichten: Im Browser Anwendersicht Im Editor Entwicklersicht

Bsp.: Uni Paderborn


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.)


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.


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


Weitere HTML-Tags

<p>Hier ist ein Absatz.</p>Textabsatz

<h1></h1>…<h6></h6>Überschriften von groß bis klein

<br/>Zeilenumbruch


Unsortierte Liste

<ul><li>Produkte</li><li>Unternehmen</li><li>Angebote</li>

</ul>


Nummerierte Liste

<ol><li>Einkauf</li><li>Lagerung</li><li>Verkauf</li>

</ol>


Weitere HTML-Tags (II)

<b>...</b> fett <i>...</i> kursiv <u>...</u> unterstrichen <i><u>…</u></i> kursiv und

unterstrichenReihenfolge beachten!


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>


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


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>


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>


Tabellen (III)

Zellen verbinden spaltenweise über colspan zeilenweise über rowspan

Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite


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


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


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


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

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,…)

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">

</style>

oder in einem HTML-Tag selbst

<h1 style="[element-spezifische Formate]">...</h1>


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/


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]


Webseite bei IMT

Über IMT-Benutzerverwaltung Website freischalten

Via FTP-Zugang Seite kopieren Seite aufrufen

http://homepages.uni-paderborn.de/user


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/


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/

praktikum zu wirtschaftsinformatik 1: internet- / datenbankapplikationen w1321-02 – ws 2006/2007

Documents