Grundlagen des World Wide Web

Digitale Bibliothek Verfügbar unter CC-BY-SA 3.0 Jakob Voß (sofern nicht anders angegeben) Jakob Voß Grundlagen des World Wide Web Digitale Bibliothek WS 2007/2008 Fachhochschule Hannover Informationsmanagement (BA) 1. Oktober 2007

World Wide Web (WWW)

Das Internet

Das HTTP-Protokoll

HTML

CSS

Internet

ab 1969: ARPANET

1973-1983: TCP/IP

ab 1983: DNS

Telnet (1969), Email & FTP (1971), Usenet (1979), IRC (1988), WWW (1990)

ARPANET

1962: Idee eines globalen Computernetzwerks (Joseph Carl Robnett Licklider)

1967: Defense Advanced Research Projects Agency (DARPA) fördert das Projekt

1968: Realisierung des ARPANET

ARPANET

29. Oktober 1969: Erste Verbindung

Bild: Comuter History Museum

ARPANET

Bisher: Einzelne Direktverbindungen (Telefon)

Neu: Interface Message Processor (Router) und Paketbasierte Verbindungen

Bild: Comuter History Museum

ARPANET Bild: Comuter History Museum Das Netz Ende 1969

TCP/IP

Skaliert besser als sein Vorgänger NCP

Unabhängig vom Betriebssystem

Adressierung mittels IP-Adressen

Parallele Verbindungen auf mehreren Ports

IP-Adressen

IPv4: 32 Bit pro Adresse (4.294.967.296) z.B. 141.71.9.61 = 8D:47:09:3D

IPv6: 128 Bit pro Adresse (~ 3,4 · 10 38 ) HHHH:HHHH:HHHH:HHHH:HHHH:HHHH:HHHH:HHHH

Vergabe in Blöcken

z.B. 192.168.0.1/24 = 192.168.0. 1 bis 192.168.0. 254

Relevant bei IP-basierter Authentifizierung

Domain Name System

Bis 1983: HOSTS.TXT

DNS: Name => IP-Adresse

Top-Level-Domain (TLD): .org, .de, .museum...

Subdomain: wikimedia.org, fh-hannover.de...

Beispiel: www.fakultaet3.fh-hannover.de

Vergabe Hierarchisch

The Internet as we know it...

Tim-Berners-Lee (1989): Information Management: a proposal

Das World Wide Web

1990: Erster Webseite (http://info.cern.ch/)

1991: Weitere Webserver

1993: Mosaic-Browser

...

Standards als Grundlagen

HTTP, URL, HTML ...

explizit patent- und lizenzfrei!

URL

Protokoll (http, https...) http://

username:password@

Host

Portnummer :80

Pfad /archive/index.html

Query ?id=3&display=all

Fragment #msg13

URL-Kodierung beachten! (z.B. & = %26)

HTTP

Request

Response

Cache-Control: private

Content-Type: text/html; charset=UTF-8

Content-Encoding: gzip

Server: gws

Content-Length: 1845

Date: Mon, 01 Oct 2007 09:05:53 GMT

200 OK

GET /search?q=internet HTTP/1.1

Host: www.google.de

User-Agent: Mozilla/5.0 (...)

...

Referer: http://www.wikipedia.de/wiki/Internet

Relevant auch für Webserver-Logfiles

HTTP-Status codes

200 OK

201 Created

...

300 Multiple Choices

301 Moved Permanently

...

403 Forbidden

404 Not Found

...

HTTP Request-Methoden

GET, POST (Anfrage, ggf. Formulardaten)

PUT, DELETE (Daten ändern)

HEAD (Status für Caching)

Von Anfang als Read/Write konzipiert!

Revival nach über 10 Jahren mit REST

Webservices

Web 2.0

MIME-Types

M ultipurpose I nternet M ail E xtensions

Content-Types auch in HTTP

Registry bei der IANA

Beispiele

Content-Type: text/html; charset=utf-8

Content-Type: text/css

Content-Type: application/javascript

Content-Type: image/gif

...

Browser

Ursprünglich als allgemeines WWW-Werkzeug

Browser-Kriege und Standards

Inzwischen wieder allgemeines Werkzeug

Firefox-Plugins und Webanwendungen

Internet Explorer: Der Nutzer ist dumm

Firefox: Der Nutzer ist mündig

3 Ebenen einer Webseite

Inhalt HTML

Darstellung CSS

Verhalten JavaScript und Server-Skripte

HTML

H yper t ext M arkup L anguage

Begonnen 1989 Tim-Berners-Lee

Turbulente Entwicklung in den 1990ern

Inzwischen W3C-Standard (XHTML 1.1)

HTML

Auszeichnung mittels Tags

<h1> Einleitung </h1>

<hr /> = <hr></hr>

<a href= "home.htm" class= "mylink" > ...

Character Entities

& &

< < > >

" " ' '

Weitere in X HTML ( &nsp; =   =   )

DOM-Baum html head body title h1 p Mein kleines Dokument Mein kleines Dokument Ist es nicht schön?!

HTML-Quelltext

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Mein kleines Dokument</title>

</head>

<body>

<h1>Mein kleines Dokument</h1>

<p>Ist es nicht schön?</p>

</body>

</html>

HTML-Elemente

title, script, link, meta...

p, div, h1, h2...

a, span, em...

img, caption...

table, tr, td, td

ul, ol, li

Attribute

Jedem Element seine Attribute

Jedes Attribut nur einmal

Anführungszeichen nicht vergessen

Universal-Attribute

id, class

style

title, lang, dir

onclick, ondblclick, onmouseover, onmouseout...

Aufwachen, Übung!

In folgendem XHTML-Fragment haben sich „einige“ Fehler eingeschlichen:

<p> <A href="htt:\opc4.tib.uni-hannover.de::8080/DB=4/CMD&ACT=SRCHA&IKT=1004&SRT=YOP&TRM="goethe"">Suche nach Goethe</a class="link"> (nicht Göthe!) im Katalog <P>

Mögliche Lösung

<p>< a href="htt p : // opc4.tib.uni-hannover.de : 8080/DB=4/CMD ? ACT=SRCHA & IKT=1004 & SRT=YOP & TRM= %34 goethe %34 " class="link" >Suche nach Goethe</a> (nicht G& #xF6; the!) im Katalog </p>

CSS: Einbindung