Wie funktioniert das Internet? Internet = Netz der Netze Teilnetze LAN: Local area network WLAN: Wireless LAN MAN: Metropolitan area network WAN: Wide area network GAN: Global area network Rollenverteilung Clients (z.B. Browser) ... stellen Anfragen Server ... stellen Dienste oder Dokumente zur Verfügung (sind immer online) Router ... sind Teil mehrerer Netze und weisen den Informationspaketen ihren Weg Zugang zu einer Webseite <htm l> <hea d> (Web) Host, stellt Speicherplatz auf WWW-Server ... Provider, stellt Zugang zum Internet (Leitung und Adresse) (Web) Host, </he ad> stellt evtl. weitere Dienste zur Verfügung, z.B. email, PhP, Datenbanken, etc. <bod Wie komme ich ins Internet? Durch eine Verbindung (z.B. mit Modem, Router, Funk, ...) zu meinem Provider, der einen Router im WAN/GAN betreibt Browser auch WWW-Browser oder Web-Browser genannt Ein Browser ist ein Computerprogramm, mit dem man sich im World Wide Web (WWW) bewegen und WWW-Seiten darstellen kann - Ähnlich wie man zum Betrachten von Textdateien ein Textverarbeitungs-programm benötigt. Internet Explorer Mozilla Firefox Safari (Apple) Opera Google Chrome World Wide Web (WWW) auch W3 oder schlicht Web genannt Das WWW ist nur einer von vielen Diensten im Internet! Das World Wide Web ist eine riesige Sammlung von Dokumenten. Diese sind auf Computern auf der ganzen Welt gespeichert und können Querverweise auf andere Dokumente enthalten (Links oder Hyperlinks). Für die eindeutige Adressierung eines Dokuments im WWW benötigt man eine URL Zum Darstellen des Dokuments braucht man einen Browser URL (Uniform Resource Locator) Ein System, mit dem man den Pfad zu jedem Dokument im WWW angeben kann: http://www.gymkirchenfeld.ch/aktuell/aktuell_matur08.html Protokoll Server Domainname TLD Ordner Dateiname Top Level Domain Der erste Teil bezeichnet einen bestimmten Computer (äquivalent zur IP), alles nach dem ersten Backslash ist ein normaler Pfad auf diesem Computer IP: 193.246.253.248 Der restliche Pfad http://www.gymkirchenfeld.ch/aktuell/aktuell_matur08.html Protokolle http://www.gymkirchenfeld.ch/aktuell/aktuell_matur08.html Kommunikation zwischen Computern ist festgelegt durch Protokolle Beispiel: A: Hallo Bob B: Hallo Alice A: Wie spät ist es? B: 9:45 Uhr A: Danke, tschüss B: Tschüss Wichtige Protokolle der TCP/IP Familie: HTTP / HTTPS Webseiten abrufen Verschlüsseltes HTTP FTP Dateien herunterladen POP3 Mailbox abrufen SMTP Mail versenden IMAP Mails verwalten Der Reihe nach: Ein Benutzer gibt in der Adressleiste des Browsers eine URL an – und dann... DNS (Domain Name Service) – auch ein Dienst des Internet DNS Server ... löst URL in eine IPNummer auf Client (z.B. Browser) ... stellen Anfragen Router Router ... weisen den Informationspaketen an Kreuzungen ihren Weg http://www.dnstools.ch/visual-traceroute.html Client und Server begrüssen sich (HTTP), ... WWW Server ... schickt HTML-Seite an Client Client ... stellen HTMLSeite dar HTML, die Sprache des Internet “Die Hypertext Markup Language [..] ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten.” Wikipedia, Hypertext Markup Language, (23.8.2010), http://de.wikipedia.org/wiki/Hypertext_Markup_Language Die “Auszeichnung” (Markup) geschieht durch Tags, welche die ausgezeichneten Elemente einschliessen z.B.: <i>Hallo</i> Hallo Grundgerüst <!DOCTYPE ... > <html> <head> ... </head> <body> ... </body> </html> Reines Textdokument: z.B. mit dem Windows Notepad erstellt Dateiendung nicht .txt sondern .html Lässt sich mit Browser öffnen. Dieser interpretiert die HTMLElemente und stellt die Seite dar. HTML-Elemente Werden gekennzeichnet durch Tag: <tagname> Die meisten HTML-Elemente benötigen schliessende Tags: </tagname> Verschachtelung möglich: <tag1>...<tag2>...</tag2>...</tag1> <tag1>...<tag2>...</tag1>...</tag2> Aber gemäss definierten Regeln Übliche Tags im Body-Element Paragraph: <p>...</p> Zeilenumbruch: <br /> Bereich: <span>...</span> Überschriften: <h1>...</h1> <h2>...</h2> Tabellen: <table> <tr> <td>...</td> <td>...</td> </tr> <tr> <td>...</td> <td>...</td> </tr> </table> Tags im Body mit Attributen Bild: <img src="bild.jpg" alt="Bild“ /> („bild.jpg“ = relativer Pfad) Link: <a href="http://www.sbb.ch">...</a> ... Aufgabe Bild und Link Erstelle eine kleine HTML-Webseite: <html> Überschrift <head> Text ... 2-3 Bilder </head> Eine kleine Tabelle <body> Einige passende Links ... Lokal abspeichern und im Browser betrachten </body> </html> Links: http://www.w3schools.com/tags/default.asp http://de.selfhtml.org/html/index.htm Wenn HTML nicht ausreicht... Client side (plugins) JavaScript Flash .... Server side PhP (Datenbanken) Perl ... Zusammengefasst