Digitale Bibliothek Verfügbar unter CC-BY-SA 3.0 Jakob Voß (sofern nicht anders angegeben) Jakob Voß Grundlagen des  World...
World Wide Web (WWW) <ul><li>Das Internet </li></ul><ul><li>Das HTTP-Protokoll </li></ul><ul><li>HTML </li></ul><ul><li>CS...
Internet <ul><li>ab 1969: ARPANET  </li></ul><ul><li>1973-1983: TCP/IP </li></ul><ul><li>ab 1983: DNS </li></ul><ul><li>Te...
ARPANET <ul><li>1962: Idee eines globalen Computernetzwerks (Joseph Carl Robnett Licklider) </li></ul><ul><li>1967: Defens...
ARPANET <ul><ul><li>29. Oktober 1969: Erste Verbindung </li></ul></ul>Bild: Comuter History Museum
ARPANET <ul><li>Bisher: Einzelne Direktverbindungen (Telefon) </li></ul><ul><li>Neu: Interface Message Processor (Router) ...
ARPANET Bild: Comuter History Museum Das Netz Ende 1969
TCP/IP <ul><li>Skaliert besser als sein Vorgänger NCP </li></ul><ul><li>Unabhängig vom Betriebssystem </li></ul><ul><li>Ad...
IP-Adressen <ul><li>IPv4: 32 Bit pro Adresse (4.294.967.296)   z.B. 141.71.9.61 = 8D:47:09:3D </li></ul><ul><li>IPv6: 128 ...
Domain Name System <ul><li>Bis 1983: HOSTS.TXT </li></ul><ul><li>DNS: Name => IP-Adresse </li></ul><ul><li>Top-Level-Domai...
The Internet as we know it... <ul><li>Tim-Berners-Lee (1989): Information Management: a proposal </li></ul>
Das World Wide Web <ul><li>1990: Erster Webseite (http://info.cern.ch/) </li></ul><ul><li>1991: Weitere Webserver </li></u...
URL <ul><li>Protokoll  (http, https...) http:// </li></ul><ul><li>username:password@ </li></ul><ul><li>Host </li></ul><ul>...
HTTP <ul><li>Request </li></ul><ul><li>Response </li></ul><ul><ul><li>Cache-Control: private </li></ul></ul><ul><ul><li>Co...
HTTP-Status codes <ul><li>200 OK </li></ul><ul><li>201 Created </li></ul><ul><li>... </li></ul><ul><li>300 Multiple Choice...
HTTP Request-Methoden <ul><li>GET, POST (Anfrage, ggf. Formulardaten) </li></ul><ul><li>PUT, DELETE (Daten ändern) </li></...
MIME-Types <ul><li>M ultipurpose  I nternet  M ail  E xtensions </li></ul><ul><li>Content-Types auch in HTTP </li></ul><ul...
Browser <ul><li>Ursprünglich als allgemeines WWW-Werkzeug </li></ul><ul><li>Browser-Kriege und Standards </li></ul><ul><li...
3 Ebenen einer Webseite <ul><li>Inhalt HTML </li></ul><ul><li>Darstellung CSS </li></ul><ul><li>Verhalten JavaScript und S...
HTML <ul><li>H yper t ext  M arkup  L anguage </li></ul><ul><li>Begonnen 1989 Tim-Berners-Lee </li></ul><ul><li>Turbulente...
HTML <ul><li>Auszeichnung mittels Tags </li></ul><ul><ul><li><h1> Einleitung </h1> </li></ul></ul><ul><ul><li><hr />  =  <...
DOM-Baum html head body title h1 p Mein kleines Dokument Mein kleines Dokument Ist es nicht schön?!
HTML-Quelltext <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR...
HTML-Elemente <ul><li>title, script, link, meta... </li></ul><ul><li>p, div, h1, h2... </li></ul><ul><li>a, span, em... </...
Attribute <ul><li>Jedem Element seine Attribute </li></ul><ul><li>Jedes Attribut nur einmal </li></ul><ul><li>Anführungsze...
Aufwachen, Übung! <ul><li>In folgendem XHTML-Fragment haben sich „einige“ Fehler eingeschlichen: </li></ul><ul><li><p> <A ...
Mögliche Lösung <ul><li><p>< a  href=&quot;htt p : // opc4.tib.uni-hannover.de : 8080/DB=4/CMD ? ACT=SRCHA &amp; IKT=1004 ...
CSS: Einbindung <ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet&quot;   type=&quot;text/css&quot; href=&quot;s...
CSS: Positionierung <ul><li>Dynamische Positionierung </li></ul><ul><li>Type </li></ul><ul><ul><li>display: block; </li></...
Bild: CC-BY-2.0 by Jon Hicks
CSS: Selektoren <ul><li>* { ... } </li></ul><ul><li>a { ... }, a:hover { ... } </li></ul><ul><li>h1, h2 { ... } </li></ul>...
Ausprobieren <ul><li>HTML/CSS ist Grundlage </li></ul><ul><li>„Use the Source, Luke!“ </li></ul><ul><li>Firefox-Plugins </...
Nächste SlideShare
Wird geladen in …5
×

Grundlagen des World Wide Web

2.023 Aufrufe

Veröffentlicht am

Vorlesung zu Grundlagen des WWW im Rahmen der Lehrveranstaltung "Digitale Bibliothek" im WS 2007/08 BA-Studiengang Informationsmanagement, FH Hannover

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.023
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
30
Aktionen
Geteilt
0
Downloads
40
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Grundlagen des World Wide Web

  1. 1. 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
  2. 2. World Wide Web (WWW) <ul><li>Das Internet </li></ul><ul><li>Das HTTP-Protokoll </li></ul><ul><li>HTML </li></ul><ul><li>CSS </li></ul>
  3. 3. Internet <ul><li>ab 1969: ARPANET </li></ul><ul><li>1973-1983: TCP/IP </li></ul><ul><li>ab 1983: DNS </li></ul><ul><li>Telnet (1969), Email & FTP (1971), Usenet (1979), IRC (1988), WWW (1990) </li></ul>
  4. 4. ARPANET <ul><li>1962: Idee eines globalen Computernetzwerks (Joseph Carl Robnett Licklider) </li></ul><ul><li>1967: Defense Advanced Research Projects Agency (DARPA) fördert das Projekt </li></ul><ul><li>1968: Realisierung des ARPANET </li></ul>
  5. 5. ARPANET <ul><ul><li>29. Oktober 1969: Erste Verbindung </li></ul></ul>Bild: Comuter History Museum
  6. 6. ARPANET <ul><li>Bisher: Einzelne Direktverbindungen (Telefon) </li></ul><ul><li>Neu: Interface Message Processor (Router) und Paketbasierte Verbindungen </li></ul>Bild: Comuter History Museum
  7. 7. ARPANET Bild: Comuter History Museum Das Netz Ende 1969
  8. 8. TCP/IP <ul><li>Skaliert besser als sein Vorgänger NCP </li></ul><ul><li>Unabhängig vom Betriebssystem </li></ul><ul><li>Adressierung mittels IP-Adressen </li></ul><ul><li>Parallele Verbindungen auf mehreren Ports </li></ul>
  9. 9. IP-Adressen <ul><li>IPv4: 32 Bit pro Adresse (4.294.967.296) z.B. 141.71.9.61 = 8D:47:09:3D </li></ul><ul><li>IPv6: 128 Bit pro Adresse (~ 3,4 · 10 38 ) HHHH:HHHH:HHHH:HHHH:HHHH:HHHH:HHHH:HHHH </li></ul><ul><li>Vergabe in Blöcken </li></ul><ul><ul><li>z.B. 192.168.0.1/24 = 192.168.0. 1 bis 192.168.0. 254 </li></ul></ul><ul><li>Relevant bei IP-basierter Authentifizierung </li></ul>
  10. 10. Domain Name System <ul><li>Bis 1983: HOSTS.TXT </li></ul><ul><li>DNS: Name => IP-Adresse </li></ul><ul><li>Top-Level-Domain (TLD): .org, .de, .museum... </li></ul><ul><li>Subdomain: wikimedia.org, fh-hannover.de... </li></ul><ul><li>Beispiel: www.fakultaet3.fh-hannover.de </li></ul><ul><li>Vergabe Hierarchisch </li></ul>
  11. 11. The Internet as we know it... <ul><li>Tim-Berners-Lee (1989): Information Management: a proposal </li></ul>
  12. 12. Das World Wide Web <ul><li>1990: Erster Webseite (http://info.cern.ch/) </li></ul><ul><li>1991: Weitere Webserver </li></ul><ul><li>1993: Mosaic-Browser </li></ul><ul><li>... </li></ul><ul><li>Standards als Grundlagen </li></ul><ul><ul><li>HTTP, URL, HTML ... </li></ul></ul><ul><ul><li>explizit patent- und lizenzfrei! </li></ul></ul>
  13. 13. URL <ul><li>Protokoll (http, https...) http:// </li></ul><ul><li>username:password@ </li></ul><ul><li>Host </li></ul><ul><li>Portnummer :80 </li></ul><ul><li>Pfad /archive/index.html </li></ul><ul><li>Query ?id=3&display=all </li></ul><ul><li>Fragment #msg13 </li></ul><ul><li>URL-Kodierung beachten! (z.B. & = %26) </li></ul>
  14. 14. HTTP <ul><li>Request </li></ul><ul><li>Response </li></ul><ul><ul><li>Cache-Control: private </li></ul></ul><ul><ul><li>Content-Type: text/html; charset=UTF-8 </li></ul></ul><ul><ul><li>Content-Encoding: gzip </li></ul></ul><ul><ul><li>Server: gws </li></ul></ul><ul><ul><li>Content-Length: 1845 </li></ul></ul><ul><ul><li>Date: Mon, 01 Oct 2007 09:05:53 GMT </li></ul></ul><ul><ul><li>200 OK </li></ul></ul><ul><ul><li>GET /search?q=internet HTTP/1.1 </li></ul></ul><ul><ul><li>Host: www.google.de </li></ul></ul><ul><ul><li>User-Agent: Mozilla/5.0 (...) </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li>Referer: http://www.wikipedia.de/wiki/Internet </li></ul></ul>Relevant auch für Webserver-Logfiles
  15. 15. HTTP-Status codes <ul><li>200 OK </li></ul><ul><li>201 Created </li></ul><ul><li>... </li></ul><ul><li>300 Multiple Choices </li></ul><ul><li>301 Moved Permanently </li></ul><ul><li>... </li></ul><ul><li>403 Forbidden </li></ul><ul><li>404 Not Found </li></ul><ul><li>... </li></ul>
  16. 16. HTTP Request-Methoden <ul><li>GET, POST (Anfrage, ggf. Formulardaten) </li></ul><ul><li>PUT, DELETE (Daten ändern) </li></ul><ul><li>HEAD (Status für Caching) </li></ul><ul><li>Von Anfang als Read/Write konzipiert! </li></ul><ul><li>Revival nach über 10 Jahren mit REST </li></ul><ul><ul><li>Webservices </li></ul></ul><ul><ul><li>Web 2.0 </li></ul></ul>
  17. 17. MIME-Types <ul><li>M ultipurpose I nternet M ail E xtensions </li></ul><ul><li>Content-Types auch in HTTP </li></ul><ul><li>Registry bei der IANA </li></ul><ul><li>Beispiele </li></ul><ul><ul><li>Content-Type: text/html; charset=utf-8 </li></ul></ul><ul><ul><li>Content-Type: text/css </li></ul></ul><ul><ul><li>Content-Type: application/javascript </li></ul></ul><ul><ul><li>Content-Type: image/gif </li></ul></ul><ul><ul><li>... </li></ul></ul>
  18. 18. Browser <ul><li>Ursprünglich als allgemeines WWW-Werkzeug </li></ul><ul><li>Browser-Kriege und Standards </li></ul><ul><li>Inzwischen wieder allgemeines Werkzeug </li></ul><ul><li>Firefox-Plugins und Webanwendungen </li></ul><ul><li>Internet Explorer: Der Nutzer ist dumm </li></ul><ul><li>Firefox: Der Nutzer ist mündig </li></ul>
  19. 19. 3 Ebenen einer Webseite <ul><li>Inhalt HTML </li></ul><ul><li>Darstellung CSS </li></ul><ul><li>Verhalten JavaScript und Server-Skripte </li></ul>
  20. 20. HTML <ul><li>H yper t ext M arkup L anguage </li></ul><ul><li>Begonnen 1989 Tim-Berners-Lee </li></ul><ul><li>Turbulente Entwicklung in den 1990ern </li></ul><ul><li>Inzwischen W3C-Standard (XHTML 1.1) </li></ul>
  21. 21. HTML <ul><li>Auszeichnung mittels Tags </li></ul><ul><ul><li><h1> Einleitung </h1> </li></ul></ul><ul><ul><li><hr /> = <hr></hr> </li></ul></ul><ul><ul><li><a href= &quot;home.htm&quot; class= &quot;mylink&quot; > ... </li></ul></ul><ul><li>Character Entities </li></ul><ul><ul><li>& &amp; </li></ul></ul><ul><ul><li>< &lt; > &gt; </li></ul></ul><ul><ul><li>&quot; &quot; ' &apos; </li></ul></ul><ul><ul><li>Weitere in X HTML ( &nsp; =   =   ) </li></ul></ul>
  22. 22. DOM-Baum html head body title h1 p Mein kleines Dokument Mein kleines Dokument Ist es nicht schön?!
  23. 23. HTML-Quelltext <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Mein kleines Dokument</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Mein kleines Dokument</h1> </li></ul><ul><li><p>Ist es nicht schön?</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  24. 24. HTML-Elemente <ul><li>title, script, link, meta... </li></ul><ul><li>p, div, h1, h2... </li></ul><ul><li>a, span, em... </li></ul><ul><li>img, caption... </li></ul><ul><li>table, tr, td, td </li></ul><ul><li>ul, ol, li </li></ul>
  25. 25. Attribute <ul><li>Jedem Element seine Attribute </li></ul><ul><li>Jedes Attribut nur einmal </li></ul><ul><li>Anführungszeichen nicht vergessen </li></ul><ul><li>Universal-Attribute </li></ul><ul><ul><li>id, class </li></ul></ul><ul><ul><li>style </li></ul></ul><ul><ul><li>title, lang, dir </li></ul></ul><ul><ul><li>onclick, ondblclick, onmouseover, onmouseout... </li></ul></ul>
  26. 26. Aufwachen, Übung! <ul><li>In folgendem XHTML-Fragment haben sich „einige“ Fehler eingeschlichen: </li></ul><ul><li><p> <A href=&quot;htt:pc4.tib.uni-hannover.de::8080/DB=4/CMD&ACT=SRCHA&IKT=1004&SRT=YOP&TRM=&quot;goethe&quot;&quot;>Suche nach Goethe</a class=&quot;link&quot;> (nicht G&ouml;the!) im Katalog <P> </li></ul>
  27. 27. Mögliche Lösung <ul><li><p>< a href=&quot;htt p : // opc4.tib.uni-hannover.de : 8080/DB=4/CMD ? ACT=SRCHA &amp; IKT=1004 &amp; SRT=YOP &amp; TRM= %34 goethe %34 &quot; class=&quot;link&quot; >Suche nach Goethe</a> (nicht G& #xF6; the!) im Katalog </p> </li></ul>
  28. 28. CSS: Einbindung <ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /> </li></ul><ul><li>... </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>.small { font-size: small; } </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li>... </li></ul><ul><li><span class=&quot;small&quot;>Text</span> </li></ul><ul><li>... </li></ul><ul><li><span style=&quot;font-size: small;&quot; >Text</span> </li></ul>1 2 3
  29. 29. CSS: Positionierung <ul><li>Dynamische Positionierung </li></ul><ul><li>Type </li></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>display: inline; </li></ul></ul><ul><ul><li>display: none </li></ul></ul><ul><ul><li>display: run-in; </li></ul></ul><ul><li>Float </li></ul><ul><ul><li>float: left; </li></ul></ul><ul><ul><li>float: right; </li></ul></ul><ul><ul><li>float: none; </li></ul></ul>Bild: W3C
  30. 30. Bild: CC-BY-2.0 by Jon Hicks
  31. 31. CSS: Selektoren <ul><li>* { ... } </li></ul><ul><li>a { ... }, a:hover { ... } </li></ul><ul><li>h1, h2 { ... } </li></ul><ul><li>.small { ... } </li></ul><ul><li>a.small { ... } </li></ul><ul><li>#navigation { ... } </li></ul><ul><li>td a { ... } </li></ul><ul><li>... </li></ul>
  32. 32. Ausprobieren <ul><li>HTML/CSS ist Grundlage </li></ul><ul><li>„Use the Source, Luke!“ </li></ul><ul><li>Firefox-Plugins </li></ul><ul><ul><li>Web Developer Toolbar </li></ul></ul><ul><ul><li>Firebug </li></ul></ul><ul><li>SelfHTML </li></ul>

×