Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .
-
Upload
reinhold-rehmer -
Category
Documents
-
view
109 -
download
3
Transcript of Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .
![Page 1: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/1.jpg)
Internetzwerke
![Page 2: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/2.jpg)
Datenverkehr (in Exabytes = 10246 Bytes)
http://www.cisco.com/c/en/us/solutions/collateral/service-provider/ip-ngn-ip-next-generation-network/white_paper_c11-481360.pdf
nach
Inhalten
nach
Geräten
![Page 3: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/3.jpg)
Okt 2011
![Page 4: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/4.jpg)
![Page 5: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/5.jpg)
Internet = Netz der Netze
![Page 6: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/6.jpg)
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
![Page 7: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/7.jpg)
Netz der Netze - Teilnetze LAN:Local area network
WLAN:
Wireless LAN
MAN:
Metropolitan area network
WAN:
Wide area network GAN:Global area network
![Page 8: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/8.jpg)
Netz der Netze – Backbone (GAN/WAN)
![Page 9: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/9.jpg)
Durchschnitt von ca. 1795 Gigabit pro Sekunde (~38 DVDs), das entspricht einer Datenmengen von rund 3.3 Mio DVDs, die pro Tag am Frankfurter Knoten durchfliessen.
Traffic am DE-CIX in Frankfurt (http://www.de-cix.net/about/statistics/)
![Page 10: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/10.jpg)
Fachbegriffe Internet Client Server Router Subnetz Host Provider URL IP DNS Protokoll WWW OSI
![Page 11: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/11.jpg)
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)
![Page 12: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/12.jpg)
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.
![Page 13: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/13.jpg)
Router
Router... leiten die Informations-pakete von einem Subnetz ins nächste weiter
http://www.dnstools.ch/visual-traceroute.html
![Page 14: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/14.jpg)
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
![Page 15: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/15.jpg)
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
![Page 16: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/16.jpg)
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 Domain TLD Ordner Dateiname
(Top Level Domain)
http://www.beispiel.ch/dokumente/reglemente.html
URL (Uniform Resource Locator)
![Page 17: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/17.jpg)
Der restliche Pfad
http://www.beispiel.ch/dokumente/reglemente.html
![Page 18: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/18.jpg)
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 / HTTPS Webseiten abrufen
Verschlüsseltes HTTP FTP Dateien
übertragen POP3 Mailbox abrufen SMTP Mail versenden IMAP Mails verwalten VoIP
Voice over IP
http://www.beispiel.ch/dokumente/reglemente.html
![Page 19: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/19.jpg)
Der Reihe nach:
Ein Benutzer gibt in der Adressleiste des Browsers eine URL an – und dann ?
IPvS Bei-Spiel
![Page 20: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/20.jpg)
IPvS(imple)
Wir spielen Internet
![Page 21: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/21.jpg)
IPvS(imple) RollenClient
MAC:
IP: 1.2.3.4
DNS: 4.5.6.4
Gateway:
1.2.3.9
DNS-Server
MAC:
IP: 4.5.6.4
DNS: 4.4.4.4
Gateway:
4.5.6.9
WWW-Server
MAC:
IP: 7.8.9.4
DNS: 4.4.4.4
Gateway:
7.8.9.9
Ziel Maske Gateway Schnittstelle1.2.3.1 9.9.9.0 1.2.3.9 1.2.3.93.3.3.1 9.9.9.0 3.3.3.1 3.3.3.14.5.6.1 9.9.9.0 3.3.3.2 3.3.3.18.8.8.1 9.9.9.0 3.3.3.3 3.3.3.11.1.1.1 0.0.0.0 3.3.3.3 3.3.3.1
Ziel Maske Gateway Schnittstelle4.5.6.1 9.9.9.0 4.5.6.9 4.5.6.93.3.3.1 9.9.9.0 3.3.3.2 3.3.3.21.2.3.1 9.9.9.0 3.3.3.1 3.3.3.28.8.8.1 9.9.9.0 3.3.3.3 3.3.3.21.1.1.1 0.0.0.0 3.3.3.3 3.3.3.2
Ziel Maske Gateway Schnittstelle3.3.3.1 9.9.9.0 3.3.3.3 3.3.3.38.8.8.1 9.9.9.0 8.8.8.1 8.8.8.11.2.3.1 9.9.9.0 1.2.3.9 3.3.3.34.5.6.1 9.9.9.0 4.5.6.9 3.3.3.37.8.9.1 9.9.9.0 7.8.9.9 8.8.8.11.1.1.1 0.0.0.0 8.8.8.9 8.8.8.1
Router A
MAC:
IP: 1.2.3.93.3.3.1
Router B
MAC:
IP: 4.5.6.9 3.3.3.2
Router C
MAC:
IP: 3.3.3.3 8.8.8.1
Ziel Maske Gateway Schnittstelle8.8.8.1 9.9.9.0 8.8.8.2 8.8.8.27.8.9.1 9.9.9.0 7.8.9.9 7.8.9.93.3.3.1 9.9.9.0 8.8.8.1 8.8.8.21.1.1.1 0.0.0.0 8.8.8.1 8.8.8.2
Router D
MAC:
IP: 8.8.8.2 7.8.9.9
![Page 22: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/22.jpg)
IPvS(imple) Daten
HTTP-Request des Clients:
GET /index.html HTTP/1.1 Host: www.beispiel.chDNS-Request des Clients:
URL IP
www.beispiel.ch ?
index.html auf WWW-Server:
<!DOCTYPE ... ><html> <head> <title>Beispiel Webseite</title> <link rel="stylesheet" type="text/css" href="css/beispiel.css"> ... </head> <body> <h1>Hallo</h1> <img src="bilder/bild.jpg" alt="Bild“ /> ... </body></html>
URL IP
www.beispiel.ch 7.8.9.4
www.leo.org 9.8.7.6
... ...
Lookup-liste auf DNS-Server:
![Page 23: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/23.jpg)
ARP-Request
![Page 24: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/24.jpg)
TCP-Header
![Page 25: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/25.jpg)
IP Header
![Page 26: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/26.jpg)
Ethernet Frame
![Page 27: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/27.jpg)
IPvS(imple) Topologie
Client:1.2.3.4
1.2.3.93.3.3.1
3.3.3.24.5.6.9
3.3.3.38.8.8.1
8.8.8.27.8.9.9
DNS-Server:4.5.6.4
WWW-Server:7.8.9.4
![Page 28: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/28.jpg)
Ausprobieren: 1. http://www3.rad.com/networks/2005/clieserv/ClieServ.swf 2. WIKI: TCP_IP_Applet.zip entpacken startApplet.html öffnen
Übersicht
![Page 29: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/29.jpg)
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 ...
![Page 30: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/30.jpg)
DNS (Domain Name Service) – auch ein Dienst des Internet
Client (z.B. Browser, via Betriebssystem)
... stellt DNS-Anfrage
![Page 31: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/31.jpg)
Router
Router... leiten die Informations-pakete von einem Subnetz ins nächste weiter
http://www.dnstools.ch/visual-traceroute.html
![Page 32: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/32.jpg)
DNS (Domain Name Service) – auch ein Dienst des Internet
Client (z.B. Browser, via Betriebssystem)
... empfängt Antwort
DNS Server... löst URL in eine IP-Nummer auf (muss dafür evtl. andere DNS-Server konsultieren)
![Page 33: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/33.jpg)
Http-Request
Client (z.B. Browser via Betriebssystem)
... schickt HTTP-Anfrage los (nach IP)
![Page 34: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/34.jpg)
Router
Router... leiten die Informations-pakete von einem Subnetz ins nächste weiter
http://www.dnstools.ch/visual-traceroute.html
![Page 35: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/35.jpg)
Client und Server kommunizieren über das vereinbarte Protokoll (HTTP), ...
Client (Betriebssystem)... sammelt TCP-Packete
(Browser) stellt HTML- Seite dar
WWW Server... empfängt die Anfrage, verifiziert den Client, schickt HTML-Reply an Client
![Page 36: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/36.jpg)
http://www3.rad.com/networks/2005/clieserv/ClieServ.swf
![Page 37: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/37.jpg)
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
![Page 38: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/38.jpg)
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
![Page 39: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/39.jpg)
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 HTML-Elemente und stellt die Seite dar.
![Page 40: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/40.jpg)
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
![Page 41: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/41.jpg)
Ü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>
![Page 42: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/42.jpg)
Tags im Body mit Attributen
Bild:<img src="bild.jpg" alt="Bild“ />
Link:<a href="http://www.sbb.ch">...</a>
<a href=“kontakt.html">...</a>
...
absoluter Pfad, startet bei www
relativer Pfad, startet „hier“ (wo die Datei liegt, in der dieser Code
steht)
„bild.jpg“ = relativer Pfad
![Page 43: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/43.jpg)
HTML-Elemente
<!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
![Page 44: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/44.jpg)
HTML-Elemente
<!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 “Ich grüsse dich” unter die Überschrift, in normaler Schriftart und –grösse, “dich” in fetter Schrift
![Page 45: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/45.jpg)
HTML-Elemente
<!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
Falls das Bild gefunden wird, stellt der Browser es auf der Seite dar – andernfalls schreibt er, dass “Bild” nicht gefunden wurde
![Page 46: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/46.jpg)
HTML-Elemente
<!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
Der Browser fragt beim Server nach der Datei “meinFlashFilm.swf”, die sich im selben Ordner wie die HTML-Datei befinden soll
![Page 47: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/47.jpg)
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> <head> ... </head> <body> ... </body></html>
![Page 48: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/48.jpg)
HTML & CSS
HTML = Struktur & Inhalt
CSS = Darstellung, Layout
z.B. Text Bilder Links Überschriften CSS-Hooks
z.B. Farben Ränder Abstände Positionierung (Bilder)
![Page 49: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/49.jpg)
HTML-CSS
<!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:
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;}
![Page 50: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/50.jpg)
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>
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
...#nav { width: 60%; float: right;}...
![Page 51: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/51.jpg)
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
![Page 52: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/52.jpg)
Wenn HTML nicht ausreicht...
Client side (plugins) JavaScript Flash ....
Server side PhP (Datenbanken) Perl ...
![Page 53: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/53.jpg)
![Page 54: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/54.jpg)
Zeit
ach
se
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
![Page 55: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/55.jpg)
1. Http-Request an URL
2. Dateien schicken
3. ggf. Bilder nachladen
Statische Webseiten
Server:Stellt Dateien bereit (HTML, CSS, JavaScript, Bilder,...)
Client/Browser:Erfragt Dateien und stellt sie dar, ggf. neue Anfrage bei Klick auf Hyperlink
![Page 56: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/56.jpg)
Dynamik mit JavaScriptWenn Ereignis eintritt (z.B. Benutzer fährt mit Maus über ein Bild)...
... dann rechnet der Browser mithilfe der bereits heruntergeladenen JavaScript-Dateien aus, wie sich die dargestellte Webseite verändert
Client/Browser:interpretiert JavaScript Programme
![Page 57: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/57.jpg)
4. neuer Request an URL
(ggf. mit Übergabewerten)
5. schickt neu berechnete Seite
zurück
Dynamik mit PHP
Server:Führt PHP-Scripts aus, schickt Ergebnisse zurück
Client/Browser:Stellt neue Anfragen und übergibt vom Benutzer eingegebene Werte
![Page 58: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/58.jpg)
Persistenz mit PHP
Datenbank-Server:Beantwortet Anfragen des PHP-Scripts (erstellen, ändern und löschen von Datensätzen) und speichert die Daten dauerhaft
4. neuer Request an URL
(ggf. mit Übergabewerten)
6. schickt neu berechnete Seite
zurück
5a) erfragt Daten
5b) gibt Daten
zurück
![Page 59: Internetzwerke. Datenverkehr (in Exabytes = 1024 6 Bytes) .](https://reader036.fdocument.pub/reader036/viewer/2022062417/55204d7f49795902118d0418/html5/thumbnails/59.jpg)
Zeit
ach
se
kann mySQL Anfragen beantworten und Daten dauerhaft (= Persistenz) speichern, kümmert sich um die Verwaltung der Daten
WWW-Server
Browser
Datenbank Server
ServerClient
weiss, wie man WWW-Server findet, versteht HTML & CSS (und JavaScript), 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 HTML-Code an Browser weiter
statische Webseitendynamische Webseiten
HTML-Dateien, PHP,
(CSS, JavaScript)
mySQL
JavaScript
Auf einen Blick: