Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
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" " <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=" 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
Ähnliche Präsentationen
