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:pc4.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
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
...
<style type="text/css">
.small { font-size: small; }
</style>
</head>
...
<span class="small">Text</span>
...
<span style="font-size: small;" >Text</span>
1 2 3

CSS: Positionierung
Dynamische Positionierung
Type
display: block;
display: inline;
display: none
display: run-in;
Float
float: left;
float: right;
float: none;
Bild: W3C

Bild: CC-BY-2.0 by Jon Hicks

CSS: Selektoren
* { ... }
a { ... }, a:hover { ... }
h1, h2 { ... }
.small { ... }
a.small { ... }
#navigation { ... }
td a { ... }
...

Ausprobieren
HTML/CSS ist Grundlage
„Use the Source, Luke!“
Firefox-Plugins
Web Developer Toolbar
Firebug
SelfHTML

Grundlagen des World Wide Web

by Jakob . on Oct 01, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

Grundlagen des World Wide Web — Presentation Transcript