Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Grundlagen des World Wide Web

2.117 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
  • Als Erste(r) kommentieren

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

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>

×