Download - Grundlagen des World Wide Web
![Page 1: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/1.jpg)
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
![Page 2: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/2.jpg)
: 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
![Page 3: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/3.jpg)
: 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
![Page 4: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/4.jpg)
: 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
![Page 5: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/5.jpg)
: 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
![Page 6: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/6.jpg)
: 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
![Page 7: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/7.jpg)
: 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
![Page 8: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/8.jpg)
: 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
![Page 9: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/9.jpg)
: 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
![Page 10: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/10.jpg)
: 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
![Page 11: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/11.jpg)
: 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
![Page 12: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/12.jpg)
: 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
![Page 13: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/13.jpg)
: 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 &
![Page 14: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/14.jpg)
: 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
![Page 15: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/15.jpg)
: 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
● ...
![Page 16: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/16.jpg)
: 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
![Page 17: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/17.jpg)
: 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
– . . .
![Page 18: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/18.jpg)
: 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
![Page 19: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/19.jpg)
: 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
![Page 20: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/20.jpg)
: 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
![Page 21: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/21.jpg)
: 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; =   =  )
![Page 22: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/22.jpg)
: 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?!
![Page 23: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/23.jpg)
: 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
![Page 24: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/24.jpg)
: 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
![Page 25: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/25.jpg)
: 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
![Page 26: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/26.jpg)
: 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
![Page 27: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/27.jpg)
: 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>
![Page 28: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/28.jpg)
: 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
![Page 29: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/29.jpg)
: 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
![Page 30: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/30.jpg)
: 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
![Page 31: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/31.jpg)
: 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
● . . .
![Page 32: Grundlagen des World Wide Web](https://reader034.vdocuments.pub/reader034/viewer/2022052622/559469001a28ab02118b45fe/html5/thumbnails/32.jpg)
: 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