HEAD - Competence Site

Seminar
Enterprise Application Integration
Web Fundamentals
Timir Kanti Ganguly
Betreuer: Professor Mitschang
Übersicht
•
•
•
•
•
Das Web als verteiltes Hypertextsystem
Protokolle des Internets (TCP/IP)
Universal Resource Identifier (URI)
Hypertext Transfer Protocol 1.1 (HTTP/1.1)
HTML Grundlagen
Semainar Web fundamentals
2
Geschichte des WWW
• Beginn 1990 in Genf im European Laboratory for
Particle Physics (CERN)
• Mitbegründer britischer Informatiker Tim
Berners-Lee
• Zweck: Informationsaustausch zwischen
Wissenschaftlern
• Projekt beruht auf 2 Säulen:
– neues Dateiformat : HTML
– neues Internet-Protokoll : HTTP
Semainar Web fundamentals
3
Das Web als verteiltes Hypertextsystem
• Multimedia
– verschiedene Medientypen
• Hypermedia
– Kombination von Multimedia und Hypertext
• Verteilung
– drei Stufen:
• innerhalb einer Datei
• innerhalb eines Dateisystems
• innerhalb eines Netzwerks
Semainar Web fundamentals
4
Netzschichten
Anwendungsschicht
Internet-Schicht
Netzwerkschicht
Internet-Anwendungen
Internet (TCP/IP)
Netzwerk
Semainar Web fundamentals
5
Protokolle des Internets (1)
• Internet Protocol (IP):
– verbindungsunabhängiges optimiertes Protokoll zur Paketübermittlung
– Routen, Zerlegen und das Zusammensetzen der Pakete
–
–
–
–
–
–
32Bit (4 Byte) Struktur für Adressen
4 Milliarden Hosts auf 16,7 Millionen Netzwerken adressierbar
Beispiel für IP-Adresse 129.69.18.18
erster Teil der IP-Adresse ist die Netzwerknummer
zweiter Teil die Hostnummer
Grenze wird durch Klassifizierungsschema für Netzwerktypen bestimmt
Semainar Web fundamentals
6
Protokolle des Internets (2)
• Klasse -A-, -B- und -C- Netze:
- Klasse-A-Adressen: 1.xxx.xxx.xxx bis 126.xxx.xxx.xxx
- Klasse-B-Adressen: 128.xxx.xxx.xxx bis 191.xxx.xxx.xxx
- Klasse-C-Adressen: 192.xxx.xxx.xxx bis 223.xxx.xxx.xxx
121331222222222222
• Private Netzwerke :
- 10.0.0.0 bis 10.255.255.255
- 172.16.0.0 bis 172.16.255.255
- 192.168.0.0 bis 192.168.255.255
Semainar Web fundamentals
7
Protokolle des Internets (3)
• Transmission Control Protocol (TCP)
• TCP setzt auf IP auf
• sorgt für verläßliche, verbindungsorientierte
Kommunikation
• TCP fügt jeder IP-Adresse eine PortNummer hinzu
Semainar Web fundamentals
8
Universal Resource Identifier (URI)
• offizieller Name für Identifier innerhalb des
Webs
• URI entweder URL (Uniform Resource
Locator) oder URN (Uniform Resource
Name)
• URN zur Zeit noch in Entwicklung
Semainar Web fundamentals
9
Uniform Resource Locator (URL)
• besteht aus Schema und schemaspezifischem Teil:
– "//"[Benutzer[":"Kennwort]"@"]host[":"port]"/"urlpath
• Schemata:
–
–
–
–
–
ftp: File Transfer Protocol
http: Hypertext Transfer Protocol
https: HTTP over SSL
maito: verwendet SMTP um E-Mails zu verschicken
telnet: zum Zugriff auf einen Host
• Bsp: ftp://benutzername:[email protected]:21/pfad/
Semainar Web fundamentals
10
Hypertext Tranfer Protocol 1.1
• einfaches auf verläßlichen verbindungsorientiertem Transportdienst aufbauendes
Request/Response-Protokoll
• verwendet dazu die Rollen Client und
Server
1. Request an den Server
Client
Server
2. Response an den Client
Semainar Web fundamentals
11
HTTP-Nachrichten
• verfügen über äußerst einfaches Interaktionsschema
zwischen Client und Server
• Format der beiden Nachrichtentypen (Request und
Response) ebenfalls sehr einfach
• erste Nachricht einer HTTP-Interaktion nach
erfolgreichem Verbindungsaufbau ist immer eine
Request Message vom Client an den Server
• die zweite Nachricht ist immer eine Response vom
Server an den Client
Semainar Web fundamentals
12
Nachrichtenformat (1)
generic-message =
start-line
*message-header
CRLF
[message-body]
start-line =
request-line | status-line
Semainar Web fundamentals
13
Nachrichtenformat (2)
• start-line entweder request-line oder
status-line
• danach null oder mehrere Header-Felder aus den
folgenden vier Gruppen:
– General Header
– Entity Header
– Request Header
– Response Header
Semainar Web fundamentals
14
Statuscodedefinitionen
• jede in einer HTTP-Response Message enthaltene
Statuscode besteht aus einer dreistelligen Zahl:
–
–
–
–
–
Informational (1xx)
Successful (2xx)
Redirection (3xx)
Client Error (4xx)
Server Error (5xx)
Semainar Web fundamentals
15
Sicherheit bei HTTP (1)
• Unterscheidung zwischen zwei Aspekten:
– Authentifizierung des Clienten:
• zwei Möglichkeiten: Basic Authentication und
DigestAccess Authetication
– sichere Übertragung der Daten zwischen Client
und Server
• zwei Möglichkeiten: Secure HTTP (S-HTTP) und
HTTP über SSL (HTTPS)
Semainar Web fundamentals
16
HTTP über SSL
• Ansatz: sichere Transportinfrastruktur durch zusätzliche
Schicht zwischen TCP/IP-Schicht und HTTP als
Anwenderprotokoll
HTTP
Telnet
FTP
andere
Anwendungsschicht
Transportschicht
SSL
TCP/IP
Semainar Web fundamentals
17
Cookies
• HTTP ist zustandsloses Protokoll, d.h. vorangegangene
Interaktionen zwischen Client und Server haben keinen
Einfluss aus nachfolgende Interaktionen
• Cookie: zwischen Client und Server ausgetauschte
Informationen zum Aufrechterhalten eines Zustands
=> Herstellung einer logischen Sitzung
Semainar Web fundamentals
18
HTML Grundlagen
• HTML wurde 1990 erfunden
• aktuelle Version ist 4.0
• HTML (Hypertext Markup Language) ist eine
sogenannte Auszeichnungssprache
• HTML hat die Aufgabe, die logischen Elemente (z.B.
Überschriften, Textabsätze, Listen, Tabellen,
Grafikreferenzen) eines Dokuments zu beschreiben
• HTML basiert auf SGML (Standard Generalized
Markup Language)
Semainar Web fundamentals
19
Grundlegender Aufbau eines
HTML-Dokuments
<HTML>-Dokument
<HEAD>-Abschnitt des Dokuments
<BODY>-Abschnitt des Dokuments
Semainar Web fundamentals
20
Document Head (1)
• enthält Informationen über das Dokument
• Titel einer HTML Datei:
<head>
<title>Titel</title>
...andere Angaben im Dateikopf...
</head>
• Adreßbasis (base URI):
<head><base href="http://www.ganguly.de">....</head>
Semainar Web fundamentals
21
Document Head (2)
• Metadaten eines Dokuments
<head>
<meta name="description" content="Dieser Beschreibungstext soll einem
Anwender im Suchdienst bei Auffinden dieser Datei erscheinen">
<meta name="author" content="Name des Autors">
<meta name="keywords" content="HTML, Meta-Informationen,
Suchprogramme, HTTP-Protokoll">
<meta name="date" content="2000-07-17T09:59:58+00:00">
... andere Angaben im Dateikopf ...
</head>
Semainar Web fundamentals
22
Document Body
• enthält den eigentlichen Teil des Document
Contents
• <body>-Tag kann verschiedenene Attribute
enthalten, darunter auch „onload“ und „onunload“
• Farbe für Hintergrund, Texte und Links:
<body bgcolor=#663333 text=#FFCC99 link=#FF9966
vlink=#FF9966 alink=#FFFFFF>
• Hintergrundbild:
<body background="kacheln.gif">
Semainar Web fundamentals
23
HTML Grundlagen für Textdarstellung
(1)
• Überschriften:
HTML unterscheidet 6 Überschriftenebenen
<h1>Überschrift 1. Ordnung</h1>
<h3>Überschrift 3. Ordnung</h3>
<h1 align=center>Überschrift 1. Ordnung</h1>
<h3 align=right>Überschrift 3. Ordnung</h3>
<h4 align=justify>Überschrift 4. Ordnung</h4>
Semainar Web fundamentals
24
HTML Grundlagen für Textdarstellung
(2)
• Textformate:
<tt> stellt Text als Fernschreiber- oder als Konstantenschrift dar
<i> stellt Text kursiv dar
<b> stellt Text fett dar
<big> stellt Text in einer "großen" Schriftart dar
<small> stellt Text in einer "kleinen" Schriftart dar
<strike> und <s> stellen Text durchgestrichen dar
<u> stellt Text unterstrichen dar
<pre> erzeugt vorformatierten Text, d.h. der Browser zeigt den Text so
an wie er im Quelltext steht, es werden mehrere Leerzeichen und
Zeilenumbrüche beachtet
Semainar Web fundamentals
25
HTML Grundlagen für Textdarstellung
(3)
• Schriften:
<basefont face="Verdana">Ab hier alles in Verdana, nur <font face=
"Avalon">hier nicht</font>Hier wieder alles in Verdana
<font size=1>Ziemlich winziger Text</font>
<font size=+1>Text etwas größer als normal</font>
<font color=#FFFFFF>Weißer Text</font>
<font color="white">Weißer Text</font>
<font face="Avalon,Wide Latin">Das ist Text in Schriftart Avalon, oder,
falls Avalon nicht darstellbar, in Wide Latin </font>
Semainar Web fundamentals
26
HTML Grundlagen für Textdarstellung
(4)
• Deutsche Umlaute und scharfes S:
ä für ä und ß für ß
Beispiel:
In München steht ein Hofbräuhaus. Dort gibt es Bier aus
Maßkrügen.
• Horizontale Linien: <hr>
• Zeilenumbrüche: <br>
• Textabsätze: <p> und </p>
Semainar Web fundamentals
27
Listen
• drei Listentypen
– Unordered Lists: <ul> und </ul>
• Listenelemente mit <li> und </li>
– Ordered Lists: <ol> und </ol>
• Listenelemente mit <li> und </li>
– Definition Lists: <dl> und </dl>
• zu definierender Ausdruck: <dt> und </dt>
• Definition: <dd> und </dd>
Semainar Web fundamentals
28
Tabellen
<table border=3 align=center>
<tr><td align=center height=50>links oben</td>
<th colspan=2 width=500><th colspan=2></th></tr>
<tr><th rowspan=2><th rowspan=2></th>
<td>Inhalt 1</td><td>Inhalt 2</td></tr>
<tr><td bgcolor=#efefef>Inhalt 3</td align=right><td>Inhalt4</td></tr>
</table>
Semainar Web fundamentals
29
Bilder/Grafiken
• geeignete Dateiformate sind GIF und JPEG
• Beispiel:
<img src="bild.gif" width=33 height=14 border=0 alt="Beschreibung">
Semainar Web fundamentals
30
Links (Verweise) (1)
• stellen zu verschiedenen Zwecken nutzbare
Verbindungen zwischen Informationen dar
• am häufigsten zum Verweis auf ein anderes
Dokument
• es sind auch Verweise innerhalb eines
Dokuments möglich
• als Verweisquelle neben Text auch Grafik
möglich
Semainar Web fundamentals
31
Links (Verweise) (2)
• Beispiele:
<a href="ziel.html">Verweistext</a>
<a href="ziel.html" target=“Zielfenster">Verweistext</a>
<a href="#Anker">Verweistext</a>
<a href="ziel.html#Anker1"><img src=“bild.gif" alt="bild"></a>
<a name="Anker"><h1>Überschrift 1</h1></a>
<a name="Anker1"><img src="datei.gif"></a>
<a href="mailto:[email protected]?subject=Feedback zum Seminar">
Mail an Timir, [email protected]</a>
Semainar Web fundamentals
32
Frames (1)
• Erfindung von Netscape
• offiziell erst seit HTML 4.0
• Frames sind eigentlich eine Sammlung von
Web-Seiten
• wird häufig verwendet, um Seiten so zu
gestalten, damit sie Benutzerschnittstellen von
Computerprogrammen ähneln
• Aufteilung in Inhalt und Inhaltsverzeichnis
Semainar Web fundamentals
33
Frames (2)
Semainar Web fundamentals
34
Formulare (1)
• mit HTML können Formulare erstellt
werden
• Formulardaten können entweder per E-Mail
zugeschickt werden oder von CGIProgramm auf dem Server bearbeitet
werden
Semainar Web fundamentals
35
Formulare (2)
• Beispiel 1:
<form action="mailto:[email protected]" method=post
enctype="text/plain">
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons
usw. ...
</form>
• Beispiel 2:
<form action="/cgi-bin/auswert.pl" method=get>
... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons
usw. ...
</form>
Semainar Web fundamentals
36
Semainar Web fundamentals
37
Formulare (3)
<form>
Name:<input type=text size=50 maxlenght=50 name="Name">
Passwort: <input type=password name="Passwort" maxlength=10
size=10>
<textarea name="Kommentar " rows=3 cols=20></textarea>
<input type=radio name="Zahlmethode" value="Mastercard"> Mastercard
<br> <input type=radio name="Zahlmethode" value="Visa"> Visa
<input type=submit value="Absenden">
<input type=reset value="Abbrechen">
</form>
Semainar Web fundamentals
38
Formulare (4)
• Beispiel:
Semainar Web fundamentals
39
Literatur
[1] Erik Wilde, "World Wide Web", Springer
1999
[2] http://www.netzwelt.de/selfhtml
[3] Naba Barkakati, RedHat 6.0 Linux,
Franzis
Semainar Web fundamentals
40