Grundlagen des World Wide Web
32
Digitale Bibliothek Jakob Voß Grundlagen des World Wide Web D igitale B ibliothek 2007/2008 WS Fachhochschule H annover ( ) Inform ationsm anagem ent BA 1. 2007 O ktober - - 3.0 ( ) VerfügbarunterCC BY SA Jakob Voß sofern nichtanders angegeben
-
Upload
jakob- -
Category
Technology
-
view
1.691 -
download
1
description
Vorlesung zu Grundlagen des WWW im Rahmen der Lehrveranstaltung "Digitale Bibliothek" im WS 2007/08 BA-Studiengang Informationsmanagement, FH Hannover
Transcript of Grundlagen des World Wide Web
Digitale Bibliothek
Jakob V oß
Grundlagen des World Wide Web
D igitale B ibliothek 2007/2008W S
Fachhochschule H annover ( )Inform ationsm anagem ent B A
1. 2007O ktober
- - 3.0 ( )V erfügbarunterC C B Y S A Jakob V oß sofern nichtanders angegeben
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
World Wide Web (WWW)
● D as Internet
● -D as H TTP P rotokoll
● H TM L
● C S S
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Internet
● 1969:ab A R P A N E T
● 1973-1983: /TC P IP
● 1983:ab D N S
● (1969), (1971),Telnet E m ail& FTP (1979), (1988), (1990)U senet IR C W W W
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
ARPANET
● 1962: Idee eines globalen C om puternetzw erks( )Joseph C arlR obnettLicklider
● 1967: D efense A dvanced R esearch P rojects ( ) A gency D A R P A fördertdas P rojekt
● 1968: R ealisierung des A R P A N E T
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
ARPANET
29. 1969: O ktober E rste V erbindung
:
Bild
ComuterHistory
Museum
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
ARPANET
● :B isher ( )E inzelne D irektverbindungen Telefon
● :N eu ( )Interface M essage P rocessor R outer und P aketbasierte V erbindungen
Bild: Comuter History Museum
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
ARPANET
Bild
: C
om
ute
r H
isto
ry M
use
um
1969D as N etz E nde
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
TCP/IP
● S kaliertbesserals sein V orgängerN C P
● U nabhängig vom B etriebssystem
● -A dressierung m ittels IP A dressen
● P arallele V erbindungen aufm ehreren P orts
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
IP-Adressen
● 4: 32 (4.294.967.296)IP v B itpro A dresse . . 141.71.9.61 = 8 :47:09:3z B D D
● 6: 128 (~ 3,4 10IP v B itpro A dresse · 38) : : : : : : :H H H H H H H H H H H H H H H H H H H H H H H H H H H H H H H H
● V ergabe in B löcken
– . . z B 192.168.0.1/24 = 192.168.0.1 192.168.0.bis 254
● - R elevantbeiIP basierterA uthentifizierung
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Domain Name System
● 1983: .B is H O S TS TX T
● : => -D N S N am e IP A dresse
● - - ( ): . , . , . ...Top LevelD om ain TLD org de m useum
● : . , - . ...S ubdom ain w ikim edia org fh hannoverde
● : . 3. - . B eispiel w w w fakultaet fh hannoverde
● V ergabe H ierarchisch
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
The Internet as we know it...
- - (1989):Tim B erners LeeIn fo rm a tio n M a n a ge m e n t: a p ro p o sa l
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Das World Wide Web
● 1990: ( :// . . /)E rsterW ebseite http info cern ch
● 1991: W eitere W ebserver
● 1993: -M osaic B row ser
...● S tandards als G rundlagen
– , , ...H TTP U R L H TM L
– - !explizitpatent und lizenzfrei
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
URL● Protokoll ( , ...)http https ://http
● :usernam e passw ord@
● Host● P ortnum m er :80● P fad / / .archive index htm l
● Q uery ? =3 =id & display all
● Fragm ent # 13m sg
● - ! ( . . = %26)U R L K odierung beachten z B &
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTTP
R equest
R esponse
- : Cache Control private- : / ; = - 8Content Type text html charset UTF- : Content Encoding gzip
: Server gws- : 1845Content Length
: , 01 2007 09: 05: 53 Date Mon Oct GMT
200 OK
/ ? = / 1. 1GET search q internet HTTP: . .Host www google de- : / 5. 0 ( . . . )User Agent Mozilla
. . .: : / / . . / /Referer http www wikipedia de wiki Internet
-R elevantauch fürW ebserver Logfiles
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTTP-Status codes
● 200 O K
● 201 C reated
● ...● 300 M ultiple C hoices
● 301 M oved P erm anently
● ...● 403 Forbidden
● 404 N otFound
● ...
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTTP Request-Methoden
● , G E T P O S T ( , . )A nfrage ggf Form ulardaten
● , P U T D E LE TE ( )D aten ändern
● H E A D ( )S tatus fürC aching
● / !V on A nfang als R ead W rite konzipiert
● 10 R evivalnach über Jahren m itR E S T
– W ebservices
– 2.0W eb
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
MIME-Types
● M ultipurpose I nternetM ailExtensions● - C ontentTypes auch in H TTP
● R egistry beiderIA N A
● B eispiele– - : / ; = - 8Content Type text html charset utf
– - : /Content Type text css
– - : /Content Type application javascript
– - : /Content Type image gif
– . . .
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Browser
● -U rsprünglich als allgem eines W W W W erkzeug
● - B row ser K riege und S tandards
● Inzw ischen w iederallgem eines W erkzeug
● - Firefox P lugins und W ebanw endungen
● :InternetE xplorer D erN utzeristdum m
● :Firefox D erN utzeristm ündig
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
3 Ebenen einer Webseite
● Inhalt H TM L
● D arstellung C S S
● V erhalten -JavaS criptund S erver S kripte
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTML
● Hypert extM arkup Language● 1989 - -B egonnen Tim B erners Lee
● 1990Turbulente E ntw icklung in den ern
● 3 - ( 1.1)Inzw ischen W C S tandard X H TM L
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTML● A uszeichnung m ittels Tags
– <h1>E inleitung</h1>– <hr /> = <hr></hr>– <a href=" . "hom e htm class=" "m ylink > . . .
● C haracterE ntities
– & ;&am p
– < ;< > ;>
– " ;" ' ;&apos
– W eitere in X (H TM L &nsp; =   =  )
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
DOM-Baum
html
head body
titleh1 p
Mein kleinesDokument
Mein kleinesDokument
Ist es nicht schön?!
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTML-Quelltext<! " - / / 3 / / 1. 0 / / "DOCTYPE html PUBLIC W C DTD XHTML Transitional EN" : / / . 3. / / 1/ / 1- . " >http www w org TR xhtml DTD xhtml transitional dtd< >html < >head < > </ >title Mein kleines Dokument title </ >head < >body < 1> </ 1>h Mein kleines Dokument h < > # 6; ?</ >p Ist es nicht sch& xF n p </ >body</ >html
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
HTML-Elemente
● , , , ...title script link m eta
● , , 1, 2...p div h h
● , , ...a span em
● , ...im g caption
● , , , table tr td td
● , , ul ol li
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Attribute
● Jedem E lem entseine A ttribute
● Jedes A ttributnureinm al
● A nführungszeichen nichtvergessen
● -U niversalA ttribute
– , id class
– style
– , , title lang dir
– , , , ...onclick ondblclick onm ouseover onm ouseout
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Aufwachen, Übung!
- In folgendem X H TM L Fragm enthaben sich :„einige“Fehlereingeschlichen
< >p< =" : \ \ 4. . -A href htt opc tib uni
. : : 8080/ =4/ = =1004hannover de DB CMD&ACT SRCHA&IKT &SR= =" " " > </ T YOP&TRM goethe Suche nach Goethe a
=" " > ( ; ! ) class link nicht Gö the im Katalog< >P
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Mögliche Lösung
< ><p a ="href http: / / 4. . -opc tib uni.hannover de : 8080/ =4/DB CMD? =ACT SRCHA& =1004IKT
& =SRT YOP& =TRM %34goethe%34" cl ass=" l i nk"> </ > ( Suche nach Goethe a nichtGö ! ) the im Katalog</ p>
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
CSS: Einbindung< >head <l i nk r el ="st yl esheet " t ype="t ext / css" hr ef ="st yl e. css" / > . . . <st yl e t ype="t ext / css"> . smal l { f ont - si ze: smal l ; } </ st yl e></ >head. . .< =" " > </ >span class small Text span. . .< span st yl e="f ont - si ze: smal l ; "> </ >Text span
1
2
3
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
CSS: Positionierung● D ynam ische P ositionierung
● Type
– : ;display block
– : ;display inline
– : display none
– : - ;display run in
● Float
– : ;float left
– : ;float right
– : ;float noneBild: W3C
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Bild
: C
C-B
Y-2
.0 b
y Jon H
icks
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
CSS: Selektoren
● * { . . . }● { . . . } , : { . . . }a a hover
● 1, 2 { . . . }h h
● . { . . . }small
● . { . . . }a small
● # { . . . }navigation
● { . . . }td a
● . . .
: Jakob V oss Lehrveranstaltung Digitale Bibliothek ( 2007/2008)W S , , FH H H annover Fachbereich Inform ationsm anagem ent S tudiengang Inform ationsm anagem ent
Ausprobieren
● / H TM L C S S istG rundlage
● „ , !U se the S ource Luke “
● -Firefox P lugins
– W eb D eveloperToolbar
– Firebug
● S elfH TM L
