Praktikum zu wirtschaftsinformatik 1 internet datenbankapplikationen w1321 02 ws 2006 2007
This presentation is the property of its rightful owner.
Sponsored Links
1 / 35

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007 PowerPoint PPT Presentation


  • 39 Views
  • Uploaded on
  • Presentation posted in: General

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007. Grundlagen Kommunikationssysteme HTML/CSS. Agenda. Kommunikationssysteme OSI-Referenzmodell Client-Server-Architektur Webserver Tomcat/Cocoon HTML Definition Allg. Syntax Spezielle Tags

Download Presentation

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Praktikum zu wirtschaftsinformatik 1 internet datenbankapplikationen w1321 02 ws 2006 2007

Praktikum zu Wirtschaftsinformatik 1: Internet- / DatenbankapplikationenW1321-02 – WS 2006/2007

Grundlagen Kommunikationssysteme

HTML/CSS


Agenda

Agenda

  • Kommunikationssysteme

    • OSI-Referenzmodell

    • Client-Server-Architektur

    • Webserver

    • Tomcat/Cocoon

  • HTML

    • Definition

    • Allg. Syntax

    • Spezielle Tags

    • Formatierung

    • zwischendurch Beispiele

  • CSS

    • Definition

    • Einbindung in HTML

Wirtschaftsinformatik 1


Kommunikationssysteme

Kommunikationssysteme

Einige (wenige) Grundlagen


Iso osi referenzmodell

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


Iso osi referenzmodell1

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


Client server architektur

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


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

Webserver

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

Wirtschaftsinformatik 1


Cocoon

Cocoon

Darstellung

Webserver +

ScriptEngine

(z.B. Tomcat)

Logik

Daten

XML

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

Wirtschaftsinformatik 1


Praktikum zu wirtschaftsinformatik 1 internet datenbankapplikationen w1321 02 ws 2006 2007

HTML

Hypertext Markup Language


Html definition

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


Html definition1

HTML - Definition

Zwei Sichten:

  • Im Browser  Anwendersicht

  • Im Editor  Entwicklersicht

    Bsp.: Uni Paderborn

Wirtschaftsinformatik 1


Allg aufbau von html seiten

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


Syntax einer x html seite

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


Aufgabe i

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


Weitere html tags

Weitere HTML-Tags

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

Textabsatz

<h1></h1>…<h6></h6>

Überschriften von groß bis klein

<br/>

Zeilenumbruch

Wirtschaftsinformatik 1


Unsortierte liste

Unsortierte Liste

<ul>

<li>Produkte</li>

<li>Unternehmen</li>

<li>Angebote</li>

</ul>

Wirtschaftsinformatik 1


Nummerierte liste

Nummerierte Liste

<ol>

<li>Einkauf</li>

<li>Lagerung</li>

<li>Verkauf</li>

</ol>

Wirtschaftsinformatik 1


Weitere html tags ii

Weitere HTML-Tags (II)

  • <b>...</b>fett

  • <i>...</i>kursiv

  • <u>...</u>unterstrichen

  • <i><u>…</u></i> kursiv und unterstrichen

    Reihenfolge beachten!

Wirtschaftsinformatik 1


Bereich block

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


Aufgabe ii

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


Tabellen

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>

Wirtschaftsinformatik 1


Tabellen ii

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>

Wirtschaftsinformatik 1


Tabellen iii

Tabellen (III)

  • Zellen verbinden

    • spaltenweise über colspan

    • zeilenweise über rowspan

  • Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite

Wirtschaftsinformatik 1


Links

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

Referenz bzw. das Linkziel

Linktext im Browser

Anker Ende

Wirtschaftsinformatik 1


Bilder

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


Aufgabe iii

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


Html formatangaben

HTML-Formatangaben

  • Hintergrund

    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


Praktikum zu wirtschaftsinformatik 1 internet datenbankapplikationen w1321 02 ws 2006 2007

CSS

Cascading Style Sheets


Css definition

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


Css cascading style sheets

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


Css ii

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


Arbeitsauftrag

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]

Wirtschaftsinformatik 1


Webseite bei imt

Webseite bei IMT

  • Über IMT-Benutzerverwaltung Website freischalten

  • Via FTP-Zugang

  • Seite kopieren

  • Seite aufrufen

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

Wirtschaftsinformatik 1


Quellen verweise

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


Weitere links

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


  • Login