Internetzwerke. Internet = Netz der Netze Netz der Netze - Teilnetze LAN: Local area network WLAN : Wireless LAN MAN : Metropolitan area network WAN

Internetzwerke

Internet = Netz der Netze

Netz der Netze - Teilnetze LAN:Local area

network

WLAN:

Wireless LAN

MAN:

Metropolitan area network

WAN:

Wide area network

GAN:Global area

network

Netz der Netze – Backbone (GAN/WAN)

Traffic am DE-CIX in Frankfurt (http://www.de-cix.net/about/statistics/)

Durchschnitt von ca. 1311 Gigabit pro Sekunde (~28 DVDs), das entspricht einer Datenmengen von rund 2.4 Mio DVD’s, die pro Tag am Frankfurter Knoten durchfliessen.

Fachbegriffe Internet Client Server Router Subnetz Host Provider URL IP DNS Protokoll WWW OSI

Rollenverteilung Clients (z.B.

Browser)... stellen Anfragen Server... stellen Dienste

oder Dokumente zur Verfügung (sind immer online)

Router... weisen den

Informationspaketen ihren Weg (haben mindestens zwei Netzwerkkarten)

Dienstleistungen im Internet

Provider, stellt Zugang

zum Internet (Leitung

und Adresse/Ro

uter)

(Web) Host,stellt Speicherplatz auf WWW-Server

<html> <head> ... </head> <body> ... </body></html>


HTML-Dokument

wird per FTP auf

den Server

übertragen

(Web) Host,stellt evtl. weitere

Dienste zur Verfügung, z.B. email, PhP,

Datenbanken, etc.

kann mySQL Anfragen beantworten und Daten dauerhaft speichern, kümmert sich um die Verwaltung der Daten

WWW genauer

WWW-Server

Browser

Datenbank Server

ServerClient

weiss, wie man WWW-Server findet, versteht HTML (+ Formulare) & CSS, kümmert sich um die Darstellung, kann Parameter übergeben (POST/GET)

Browser

Browser

WWW-Server

WWW-Server

ServerClient

weiss, wie man mit Datenbank Server spricht, kann Parameter auswerten und PHP verarbeiten, gibt Code an Browser weiter

statische Webseitendynamische Webseiten

Dateien, PHP mySQL

World Wide Web (WWW) auch W3 oder schlicht Web genanntDas 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

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

Ein System, mit dem man den Pfad zu jedem Dokument im WWW angeben kann:

Der erste Teil bezeichnet einen bestimmten Computer (äquivalent zur IP), alles nach dem ersten Backslash ist ein normaler Pfad auf diesem Computer

IP: 80.190.158.9 = www.leo.org

Protokoll Server Domainname TLD Ordner Dateiname

(Top Level Domain)

http://www.gymburgdorf.ch/dokumente/reglemente.html

URL (Uniform Resource Locator)

Der restliche Pfad


Protokolle

Kommunikation zwischen Computern ist festgelegt durch Protokolle

Beispiel DNS: A: Hallo Bob B: Hallo Alice A: Wie ist die IP von

www.leo.org? B: 80.190.158.9 A: Danke, tschüss B: Tschüss

Protokolle der TCP/IP Familie:

HTTP / HTTPSWebseiten abrufenVerschlüsseltes

HTTP FTP

Dateien übertragen POP3

Mailbox abrufen SMTP Mail

versenden IMAP

Mails verwalten VoIP

Voice over IP


Router Router... leiten die

Informations-pakete von einem Subnetz ins nächste weiter

http://www.dnstools.ch/visual-traceroute.html

Adressen im Internet: IPv4 vs. IPv6 Wer verwaltet IPs? Wie viele

unterschiedliche IPs gibt es?

Wann werden sie uns ausgehen?

Was tun wir dann?

http://www.icann.org/http://www.icann.org/en/factsheets/factsheet-ipv6-03feb11-en.pdf

http://www3.rad.com/networks/2005/clieserv/ClieServ.swf

Der Reihe nach:

Ein Benutzer gibt in der Adressleiste des Browsers eine URL an – und dann ...

... stellt der Browser einen http-Request und gibt ihn an das Betriebssystem weiter, dann ...

DNS (Domain Name Service) – auch ein Dienst des Internet

Client (z.B. Browser, via Betriebssystem)

... stellt Anfrage




DNS (Domain Name Service) – auch ein Dienst des Internet

Client (z.B. Browser, via Betriebssystem)

... stellt Anfrage

DNS Server... löst URL in eine IP-

Nummer auf (muss dafür evtl. andere DNS-Server konsultieren)

Http-Request

Client (z.B. Browser via Betriebssystem)

... schickt Anfrage los (nach IP)




Client und Server kommunizieren über das vereinbarte Protokoll (HTTP), ...

Client ... stellen HTML-

Seite dar

WWW Server... empfängt die Anfrage,

verifiziert den Client, schickt HTML-Reply an Clienten

http://www3.rad.com/networks/2005/clieserv/ClieServ.swf

Eine Webseite ist also ein HTML-Dokument Wir haben jetzt gesehen, wie diese HTML-Datei vom

Server (=Host) zum Client (=mein Computer) kommt

Erst jetzt fängt die eigentliche Arbeit des Browsers an: er muss die HTML-Datei lesen und auf dem Bildschirm

darstellen das ist gar nicht so einfach, denn die HTML-Datei enthält

meist nur das Grundgerüst der Seite (und den Text) bevor die Seite angezeigt wird, müssen meist noch weitere

Dateien (z.B. Bilder) vom Server geholt werden und weil der Browser manche Inhalte nicht selbst versteht,

muss er ggf. andere Programme (plug-ins) um Hilfe bitten

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 einschliessenz.B.:

<i>Hallo</i> Hallo

Grundgerüst

<!DOCTYPE ... ><html> <head> ... </head> <body> ... </body></html>

<!DOCTYPE ... ><html> <head> ... </head> <body> ... </body></html>

Reines Textdokument: z.B. mit dem Windows Notepad erstelltReines Textdokument: z.B. mit dem Windows Notepad erstellt

Dateiendung nicht .txt sondern .htmlDateiendung nicht .txt sondern .html

Lässt sich mit Browser öffnen. Dieser interpretiert die HTML-Elemente und stellt die Seite dar.

Lässt sich mit Browser öffnen. Dieser interpretiert die HTML-Elemente und stellt die Seite dar.

HTML-Elemente

Ü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>

...

HTML-Elemente

<!DOCTYPE ... ><html> <head> <title> Tolle Seite </title> ... </head> <body> ... </body></html>

<!DOCTYPE ... ><html> <head> <title> Tolle Seite </title> ... </head> <body> ... </body></html>

Der Browser schreibt “Tolle Seite” in die Titelleiste des Fensters, in dem die Seite angezeigt wird

Der Browser schreibt “Tolle Seite” in die Titelleiste des Fensters, in dem die Seite angezeigt wird

HTML-Elemente

<!DOCTYPE ... ><html> <head> ... </head> <body> <h1>Hallo</h1> Ich grüsse <b>dich</b>

... </body></html>

<!DOCTYPE ... ><html> <head> ... </head> <body> <h1>Hallo</h1> Ich grüsse <b>dich</b>

... </body></html>

Der Browser schreibt “Hallo” in das Fensters und formatiert dieses Wort als grosse Überschrift.

Der Browser schreibt “Hallo” in das Fensters und formatiert dieses Wort als grosse Überschrift.

Der Browser schreibt “Ich grüsse dich” unter die Überschrift, in normaler Schriftart und –grösse, “dich” in fetter Schrift

Der Browser schreibt “Ich grüsse dich” unter die Überschrift, in normaler Schriftart und –grösse, “dich” in fetter Schrift

HTML-Elemente

<!DOCTYPE ... ><html> <head> ... </head> <body> <img src="bild.jpg" alt="Bild“ /> ... </body></html>

<!DOCTYPE ... ><html> <head> ... </head> <body> <img src="bild.jpg" alt="Bild“ /> ... </body></html>

Der Browser fragt beim Server nach der Datei “bild.jpg”, die sich im selben Ordner wie die HTML-Datei befinden soll

Der Browser fragt beim Server nach der Datei “bild.jpg”, die sich im selben Ordner wie die HTML-Datei befinden soll

Falls das Bild gefunden wird, stellt der Browser es auf der Seite dar – andernfalls schreibt er, dass “Bild” nicht gefunden wurde

Falls das Bild gefunden wird, stellt der Browser es auf der Seite dar – andernfalls schreibt er, dass “Bild” nicht gefunden wurde

HTML-Elemente

<!DOCTYPE ... ><html> <head> ... </head> <body> <embed src="meinFlashFilm.swf” type="application/x-shockwave-flash"> </embed> ... </body></html>

<!DOCTYPE ... ><html> <head> ... </head> <body> <embed src="meinFlashFilm.swf” type="application/x-shockwave-flash"> </embed> ... </body></html>

Da Der Browser mit .swf-Dateien nichts anfangen kann, sucht er nach einem Flash-plugin, und überlässt diesem die Darstellung des Videos

Da Der Browser mit .swf-Dateien nichts anfangen kann, sucht er nach einem Flash-plugin, und überlässt diesem die Darstellung des Videos

Der Browser fragt beim Server nach der Datei “meinFlashFilm.swf”, die sich im selben Ordner wie die HTML-Datei befinden soll

Der Browser fragt beim Server nach der Datei “meinFlashFilm.swf”, die sich im selben Ordner wie die HTML-Datei befinden soll

Aufgabe Bild und Link Erstelle eine kleine HTML-Webseite:

Überschrift Text 2-3 Bilder Eine kleine Tabelle Einige passende Links

Lokal abspeichern und im Browser betrachten

Links: http://www.w3schools.com/tags/default.asp http://de.selfhtml.org/html/index.htm



HTML & CSS

HTML = Struktur & Inhalt CSS = Darstellung, Layout

z.B. Text Bilder Links Überschriften CSS-Hooks

z.B. Farben Ränder Abstände Positionierung

HTML-CSS

<!DOCTYPE ... ><html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <h1>Hallo</h1> ... </body></html>

<!DOCTYPE ... ><html> <head> <link rel="stylesheet" href="meinCSS.css" type="text/css" /> </head> <body> <h1>Hallo</h1> ... </body></html>

Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese:

Der Browser fragt beim Server nach der Datei “meinCSS.css”, und bekommt diese:

Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1-Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt

Bevor er die grosse Überschrift darstellt, schaut der Browser in “meinCSS.css” nach, ob hier ein bestimmtes Aussehen für h1-Elemente definiert ist – es ist, also wird “Hallo” orange und fett dargestellt

h1 { color: orange; font-weight: bold;}

h1 { color: orange; font-weight: bold;}

HTML-CSS<!DOCTYPE ... ><html> <head>

<link rel="stylesheet" href="meinCSS.css" type="text/css" />

</head> <body>

<div id="nav"> <ul>

<li><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul> </div>

</body></html>

<!DOCTYPE ... ><html> <head>

<link rel="stylesheet" href="meinCSS.css" type="text/css" />

</head> <body>

<div id="nav"> <ul>

<li><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="contact.html">Contact</a></li>

</ul> </div>

</body></html>

Noch immer wird “meinCSS.css” benutzt: Noch immer wird “meinCSS.css” benutzt:

Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll

Wenn der Browser sieht, dass dieser ganze Abschnitt (div) die id “nav” hat, schaut er in “meinCSS.css” nach, was das für die Darstellung bedeutet – in diesem Fall, dass der Abschnitt mit den drei Links die rechten 60% der Seite einnehmen soll

...#nav { width: 60%; float: right;}...

...#nav { width: 60%; float: right;}...

HTML & CSS Prinzip:

Inhalt & Darstellung voneinander trennen Vorteile:

man muss das Aussehen von Elementen (z.B. h1-Überschriften) nur 1 Mal angeben

man kann übliche Layouts (z.B. Navigationsleiste) besser umsetzen als direkt in HTML – hier geht es nur mit Tabellen

man kann dieselben Styles (=CSS-Datei) für alle Unterseiten verwenden

man kann das gesamte Layout einfach verändern

Wenn HTML nicht ausreicht...

Client side (plugins) JavaScript Flash ....

Server side PhP (Datenbanken) Perl ...

Documents

Internetzwerke. Internet = Netz der Netze Netz der Netze - Teilnetze LAN: Local area network WLAN : Wireless LAN MAN : Metropolitan area network WAN