Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007 Grundlagen Kommunikationssysteme HTML/CSS.

Ähnliche Präsentationen


Präsentation zum Thema: "Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007 Grundlagen Kommunikationssysteme HTML/CSS."—  Präsentation transkript:

1 Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W – WS 2006/2007 Grundlagen Kommunikationssysteme HTML/CSS

2 Wirtschaftsinformatik 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

3 Kommunikationssysteme Einige (wenige) Grundlagen

4 Wirtschaftsinformatik 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

5 Wirtschaftsinformatik 1 5 ISO-OSI-Referenzmodell Ablauf Kommunikation  logische, horizontal Verbindung  Protokoll  Physische, vertikale Kommunikation zwischen Schichten Quelle: Abdus Salam International Centre for Theoretical Physics Anwendu ngs- orientiert Transport -orientiert HTTP FTP HTTPS TCP UDP IP Ethernet Token Ring Protokolle:

6 Wirtschaftsinformatik 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.

7 Wirtschaftsinformatik 1 7 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

8 Wirtschaftsinformatik 1 8 Cocoon Webserver + ScriptEngine (z.B. Tomcat) Darstellung Logik Daten XML Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.] : New Riders, 2003

9 HTML Hypertext Markup Language

10 Wirtschaftsinformatik 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: abgerufen am ]

11 Wirtschaftsinformatik 1 11 HTML - Definition Zwei Sichten:  Im Browser  Anwendersicht  Im Editor  Entwicklersicht Bsp.: Uni Paderborn

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

13 Wirtschaftsinformatik 1 13 Syntax einer (X)HTML-Seite Landhandel online Kaufen Sie landwirtschaftliche Produkte ein Hier können Sie in verschiedenen Kategorien nach diversen Produkten des täglichen Landlebens stöbern und in Ihren Warenkorb legen. Body beinhaltet die eigentlichen, sichtbaren Informationen einer Webseite.

14 Wirtschaftsinformatik 1 14 Aufgabe (I) HTML-Seite erstellen Vorgehensweise: 1.Start – Ausführen – Notepad 2.HTML-Grundgerüst erstellen 3.Titel „Winfo 1-Praktikum“ 4.Eine Überschrift und zwei Absätze im Body. 5.Speichern als index.html 6.Aufruf im Browser

15 Wirtschaftsinformatik 1 15 Weitere HTML-Tags Hier ist ein Absatz. Textabsatz … Überschriften von groß bis klein Zeilenumbruch

16 Wirtschaftsinformatik 1 16 Unsortierte Liste Produkte Unternehmen Angebote

17 Wirtschaftsinformatik 1 17 Nummerierte Liste Einkauf Lagerung Verkauf

18 Wirtschaftsinformatik 1 18 Weitere HTML-Tags (II) ... fett ... kursiv ... unterstrichen  … kursiv und unterstrichen Reihenfolge beachten!

19 Wirtschaftsinformatik 1 19 Bereich/Block Der Absatz gehört zu diesem Absatz genau wie diese Liste.

20 Wirtschaftsinformatik 1 20 Aufgabe (II) HTML-Seite erweitern 1.index.html wieder in Notepad öffnen 2.Bereich ( ) mit 1.Überschrift 3. Ordnung 2.darunter wieder einen Textabsatz 3.eine unsortierte Liste mit vier Einträgen 4.Textformatierungen fett + kursiv 3.Speichern und im Browser öffnen

21 Wirtschaftsinformatik 1 21 Tabellen Microsoft Mozilla Opera IE 6 Firefox Opera unsicher sicher

22 Wirtschaftsinformatik 1 22 Tabellen (II) Hier könnte ein Banner oder ein Logo sein Navigation Link 1 Link 2 Hier wäre der Inhalt denkbar. Impressum Kontakt

23 Wirtschaftsinformatik 1 23 Tabellen (III)  Zellen verbinden  spaltenweise über colspan  zeilenweise über rowspan  Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite

24 Wirtschaftsinformatik 1 24 Links Textverweis: Uni PB -Verweis: mit Betreff Anker Start Anker Ende Referenz bzw. das Linkziel Linktext im Browser

25 Wirtschaftsinformatik 1 25 Bilder Referenzieren Rahmen Pfade besser relativ wählen src=“logo.gif“ liegt im gleichen Verzeichnis wie HTML-Datei src=“images/logo.gif“ liegt ein Verzeichnis darunter

26 Wirtschaftsinformatik 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 link

27 Wirtschaftsinformatik 1 27 HTML-Formatangaben  Hintergrund Farbe: Bild: …background="background.jpg“>  Text und das für jede Seite, jeden Link… Besser: Formatierung auslagern  CSS

28 CSS Cascading Style Sheets

29 Wirtschaftsinformatik 1 29 CSS - Definition “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” 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,…)

30 Wirtschaftsinformatik 1 30 CSS – Cascading Style Sheets  Einbindung über Verweis im Head an externe Datei  oder im Head selbst deklarieren  oder in einem HTML-Tag selbst...

31 Wirtschaftsinformatik 1 31 CSS (II)  Empfehlungen zum Umgang mit CSS 2.0 und mögliche Formatierungen siehe  oder mit Beispielen  Extrem:

32 Wirtschaftsinformatik 1 32 Arbeitsauftrag  Ab Mi., auf Webseite verfügbar  Abgabe bis :59 h per mit Link zur Seite an

33 Wirtschaftsinformatik 1 33 Webseite bei IMT  Über IMT-Benutzerverwaltung Website freischalten  Via FTP-Zugang  Seite kopieren  Seite aufrufen

34 Wirtschaftsinformatik 1 34 Quellen/Verweise Umfassende Online-Hilfe zu (X)HTML, CSS etc. Empfehlung Webeditoren: Texteditor (m. Syntaxhighlighting u.a. HTML, Java, SQL): Notepad2 WYSIWYG: NVU

35 Wirtschaftsinformatik 1 35 Weitere Links eibfaule:_Schlanke_Webprogrammierung_ html


Herunterladen ppt "Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007 Grundlagen Kommunikationssysteme HTML/CSS."

Ähnliche Präsentationen


Google-Anzeigen