Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Grundlagen Kommunikationssysteme HTML/CSS

Ähnliche Präsentationen


Präsentation zum Thema: "Grundlagen Kommunikationssysteme HTML/CSS"—  Präsentation transkript:

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

2 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

3 Kommunikationssysteme
Einige (wenige) Grundlagen

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

5 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 Ablauf Kommunikation logische, horizontal Verbindung  Protokoll Physische, vertikale Kommunikation zwischen Schichten Wirtschaftsinformatik 1

6 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

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

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

9 Hypertext Markup Language
HTML Hypertext Markup Language

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

11 HTML - Definition Zwei Sichten: Im Browser  Anwendersicht
Im Editor  Entwicklersicht Bsp.: Uni Paderborn 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.) Wirtschaftsinformatik 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. Wirtschaftsinformatik 1

14 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

15 Weitere HTML-Tags <p>Hier ist ein Absatz.</p> Textabsatz
<h1></h1>…<h6></h6> Überschriften von groß bis klein <br/> Zeilenumbruch Wirtschaftsinformatik 1

16 Unsortierte Liste <ul> <li>Produkte</li>
<li>Unternehmen</li> <li>Angebote</li> </ul> Wirtschaftsinformatik 1

17 Nummerierte Liste <ol> <li>Einkauf</li>
<li>Lagerung</li> <li>Verkauf</li> </ol> Wirtschaftsinformatik 1

18 Weitere HTML-Tags (II)
<b>...</b> fett <i>...</i> kursiv <u>...</u> unterstrichen <i><u>…</u></i> kursiv und unterstrichen Reihenfolge beachten! Wirtschaftsinformatik 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> Wirtschaftsinformatik 1

20 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

21 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

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

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

24 Referenz bzw. das Linkziel
Links Textverweis: <a href="http://www.upb.de/">Uni PB</a> -Verweis: <a subject=Test"> mit Betreff</a> Anker Start Referenz bzw. das Linkziel Linktext im Browser Anker Ende Wirtschaftsinformatik 1

25 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

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

27 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

28 Cascading Style Sheets
CSS Cascading Style Sheets

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

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

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

33 Webseite bei IMT Über IMT-Benutzerverwaltung Website freischalten
Via FTP-Zugang Seite kopieren Seite aufrufen 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 Wirtschaftsinformatik 1

35 Weitere Links http://keksdose.netfirms.com/bookmarks.html
Wirtschaftsinformatik 1


Herunterladen ppt "Grundlagen Kommunikationssysteme HTML/CSS"

Ähnliche Präsentationen


Google-Anzeigen