Informationsdarstellung im Internet

1. Informationsdarstellung im Internet Klaus Becker 2012

2. Informationsdarstellung im Internet

3. Teil 1 WWW

4. Die Maus erklärt das Internet Was muss eigentlich passieren, damit eine Webseite auf dem Bildschirm zu sehen ist? Quelle: http://www.wdrmaus.de/sachgeschichten/sachgeschichten/sachgeschichte.php5?id=84 siehe auch:http://www.youtube.com/watch?v=8PNRrOGJqUI

5. Das Internet Das Internet ist ein weltweites Netzwerk einzelner voneinander unabhängiger Computer, die über ein System von Datenverbindungen miteinander verbunden sind. Es dient der elektronischen Kommunikation und dem Austausch von Informationen. (Wikipedia) Rechner (zu Hause) Provider mit Zugangsnetzwerk Server (z.B. für WWW) Router mobile Endgeräte (z.B. Handy) Server (z.B. für E-Mail) Provider mit Zugangsnetzwerk mobile Endgeräte lokales Netzwerk

6. Dienste des Internets Im Internet werden verschiedene Dienste (von Anwendungen, die zwischen Rechnern ablaufen) angeboten: WWW, E-Mail, Chat, Online-Spiele, Videokonferenz, ... Rechner (zu Hause) Provider mit Zugangsnetzwerk Server (z.B. für WWW) Router mobile Endgeräte (z.B. Handy) Server (z.B. für E-Mail) Provider mit Zugangsnetzwerk mobile Endgeräte lokales Netzwerk

7. WWW – World Wide Web WWW bezeichnet ein Informationssystem im Internet, bei dem Information auf vernetzten Webseiten - die auf vielen Rechner verteilt gespeichert sind - bereitgestellt wird. Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt Hostname: ... ... Web-Server: Programm, das Webseiten verwaltet und ausliefert Hostname: wdrmaus.de ... Hostname: tivi.de Web-Server: Programm, das Webseiten verwaltet und ausliefert /tivi/sicherheit/rubrik/01002/index.html ... Web-Server: Programm, das Webseiten verwaltet und ausliefert

8. Web-Client / Web-Server Webseiten werden von einem Web-Client (Browser) angefordert und anschließend - in Form von HTML-Dokumenten- von einem Web-Server ausgeliefert. Web-Client (Browser): Programm, das Webseiten anfordert und anzeigt Hostname: ... http://www.tivi.de/tivi/sicherheit/rubrik/01002/index.html Web-Server: Programm, das Webseiten verwaltet und ausliefert Hostname: wdrmaus.de Hostname: tivi.de Web-Server: Programm, das Webseiten verwaltet und ausliefert /tivi/sicherheit/rubrik/01002/index.html index.html Web-Server: Programm, das Webseiten verwaltet und ausliefert

9. URL – Uniform Resource Locator Eine URL beschreibt, wo sich ein Dokument im Internet befindet. Hostname: ... http://www.tivi.de/tivi/sicherheit/rubrik/01002/index.html Web-Server: Programm, das Webseiten verwaltet und ausliefert Hostname: wdrmaus.de http Protokoll Hostname: tivi.de Web-Server: Programm, das Webseiten verwaltet und ausliefert www.tivi.deRechnername bzw. Hostname /tivi/sicherheit/rubrik/01002/index.html /tivi/sicherheit/rubrik/01002/index.htmlVerzeichnis und Datei Web-Server: Programm, das Webseiten verwaltet und ausliefert

10. Hostname / IP-Adresse Zur Identifikation von Rechnern im Internet werden sie mit einem merkbaren Namen (Hostname) und einer maschinenlesbaren Adresse (IP-Adresse) versehen. http://www.tivi.de/tivi/sicherheit/rubrik/01002/index.html Suche IP-Adresse von:tivi.de DNS-Server 91.197.28.181 Liefere: /tivi/sicherheit/rubrik/01002/index.html Hostname: tivi.de index.html /tivi/sicherheit/rubrik/01002/index.html IP-Adresse: 91.197.28.181

11. Teil 2 Strukturbeschreibung mit HTML

12. Vernetze Webseiten Ziel ist es zu verstehen, wie die Webseiten "gemacht" werden. Als Ausgangspunkt wählen wir eine sehr einfache Webseite: I:1.1.1.1

13. Fachkonzept - Hypertext Informationen sind im WWW in Dokumenten (mit Texten, Bildern, Audio-Sequenzen, Video-Clips, Animationen) dargestellt, die mit Hilfe von Verweisen miteinander verknüpft sind. Ein solches System vernetzter Dokumente nennt man Hypertext-System oder besser Hypermedia-System. http://www.kaiserslautern.de http://www.inf-schule.de/informatik/informationsdarstellunginternet/vernetztewebseiten/erkundung_bailey/bailey1.html http://www.inf-schule.de/informatik/informationsdarstellunginternet/vernetztewebseiten/erkundung_bailey/bailey2.html http://de.wikipedia.org/wiki/Agility

14. Ein Blick hinter die Kulissen Versuche die Bedeutung möglichst vieler Bestandteile des gezeigten Quelltextes herauszufinden. Markiere und kommentiere im Quelltext die Teile, die du auf der Webseite wiederfinden.

15. Fachkonzept - HTML Überschrift <h1>Hallo, ich heiße Bailey!</h1> Auszeichnung Überschrift: "Hallo, ich heiße Bailey" Absatz: - Bild Absatz: - "Hallo, ich heiße ..."- Verweis: "Kaiserslautern"- ". Ich bin ein ..." Absatz:- "Wenn ich erwachsen ..." - Verweis: "Wikipedia"- "an. Ihr werdet ..." Absatz:- "Ich kann aber ..." - Verweis: "nächste Seite"- " sehen" HTML steht für hypertext markup language. HTML ist eine formale Sprache zur Beschreibung der Struktur von Hypertexten (in Form verlinkter Webseiten) mit Hilfe von Auszeichnungen.

16. Exkurs - HTML Sie sollen eine einfache Webseite selbst erstellen. Informieren Sie sich im Abschnitt "Exkurs - HTML" (I:1.1.2.3), wie so etwas geht. Auf dieser Webseite soll ein Steckbrief von Ihnen dargestellt werden. Der Steckbrief soll mindestens folgende Informationen enthalten: - Name, Vorname - Foto, auf dem Sie (halbwegs) zu erkennen sind - Verweis auf Ihre Schule - Umfang an Informatikkenntnissen - Erfahrungen mit Informatikunterricht ... weitere Informationen wie z.B. Verweis auf den Wohnort ...

17. Struktur einer Webseite Webseiten werden genau wie normale Texte gegliedert, um Information möglichst übersichtlich darzustellen. Die Abbildung verdeutlicht die Struktur der gezeigten Webseite. Überschrift: "Steckbrief" Absatz: - Bild Absatz: - "Ich heiße "- Hervorhebung: "Bailey"- ". Ich lebe ..." Absatz:- "Ich interessiere ..." - Hervorhebung: "Agility-Sport"- ". Meine ..." Liste:- Listenpunkt: - Hervorhebung: "Sprung"; " durch einen ..."- Listenpunkt: - Hervorhebung: "Lauf"; " über eine ..."- Listenpunkt: - Hervorhebung: "Slalom..."; " zwischen ..." Absatz:- "Ich gehe ..." - Verweis: "Welpenschule"- ". "

18. HTML-Elemente HTML stellt zur Strukturbeschreibung die sog. HTML-Elemente als Bausteine zur Verfügung. html head title Steckbrief von Bailey body Überschrift: "Steckbrief" h1 Steckbrief Absatz: - Bild p img p Absatz: - "Ich heiße "- Hervorhebung: "Bailey"- ". Ich lebe ..." em Ich heiße . Ich lebe ... Bailey p em Ich int... . Meine ... Agilit... Absatz:- "Ich interessiere ..." - Hervorhebung: "Agility-Sport"- ". Meine ..." ul li em Sprung durch ... Liste:- Listenpunkt: - Hervorhebung: "Sprung"; " durch einen ..."- Listenpunkt: - Hervorhebung: "Lauf"; " über eine ..."- Listenpunkt: - Hervorhebung: "Slalom..."; " zwischen ..." li em Lauf über ... li em Slalo... zwischen ... Absatz:- "Ich gehe ..." - Verweis: "Welpenschule"- ". " p a Ich gehe ... . Welpenschule

19. HTML-Elementebaum Die Anordnung der HTML-Elemente kann man mit einem Baumdiagramm verdeutlichen. html head title Steckbrief von Bailey body h1 Steckbrief p img p em Ich heiße . Ich lebe ... Bailey p em Ich int... . Meine ... Agilit... ul li em Sprung durch ... li em Lauf über ... li em Slalo... zwischen ... p a Ich gehe ... . Welpenschule

20. HTML-Elementebaum Die Anordnung der HTML-Elemente kann man mit einem Baumdiagramm verdeutlichen. HTML-Elementebaum HTML-Elementebaum

21. HTML-Elemente im Quelltext Darstellung von HTML-Elementen: öffnendes Tag - Inhalt - schließendes Tag html head title HTML-Element Steckbrief von Bailey body h1 <h1>-Element: <h1>Steckbrief</h1> Steckbrief p img öffnendes Tag Inhalt schließen-des Tag p em Ich heiße . Ich lebe ... Bailey p em Ich int... . Meine ... Agilit... ul li em Sprung durch ... li em Lauf über ... li em Slalo... zwischen ... p a Ich gehe ... . Welpenschule

22. HTML-Quelltext HTML-Quelltext <html> <head> <title>Steckbrief von Bailey</title> </head> <body> <h1>Steckbrief</h1> <p> <img src="bailey1.jpg" alt="Foto von Bailey" /> </p> <p> Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern. </p> <p> Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind: </p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> <p> Ich gehe jedes Wochenende zur <a href="http://www.welpenschule-kl.de"> Welpenschule </a> . </p> </body> </html> html head title Steckbrief von Bailey body h1 Steckbrief p img p em Ich heiße . Ich lebe ... Bailey p em Ich int... . Meine ... Agilit... ul li em Sprung durch ... li em Lauf über ... li em Slalo... zwischen ... p a Ich gehe ... . Welpenschule

23. Inhalte von HTML-Elementen <html> <head> <title>Steckbrief von Bailey</title> </head> <body> <h1>Steckbrief</h1> <p> <img src="bailey1.jpg" alt="Foto von Bailey" /> </p> <p> Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern. </p> <p> Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind: </p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> <p> Ich gehe jedes Wochenende zur <a href="http://www.welpenschule-kl.de"> Welpenschule </a> . </p> </body> </html> Text als Inhalt html head title Steckbrief von Bailey body h1 Steckbrief kein Inhalt p img p em Ich heiße . Ich lebe ... Bailey p em Elemente als Inhalt Ich int... . Meine ... Agilit... ul li em Sprung durch ... li em Lauf über ... li em Slalo... zwischen ... Text / Elemente als Inhalt p a Ich gehe ... . Welpenschule

24. Attribute von HTML-Elementen Elemente können mit Hilfe von Attributen näher beschrieben werden. Attribute können dabei zusätzliche Informationen über den Inhalt eines Elements liefern. Jedem Attribut muss ein bestimmter Wert zugewiesen werden, der in Anführungszeichen geschrieben wird. Attribut <a href="http://www.welpenschule-kl.de">Welpenschule</a> Attributwert (in "...")

25. Teil 3 Validierung von Webseiten

26. Fehler und ihre Auswirkungen Der folgende Text sieht auf den ersten Blick etwas merkwürdig aus. Obwohl es hier von Fehlern nur so wimmelt, kann man ihn - zumindest in Teilen - dennoch verstehen. rtkl 3(1) ll Mnschn snd vr dm Gstz glch.(2) Mnnr nd Frn snd glchbrchtgt. Dr Stt frdrt d ttschlch Drchstzng dr Glchbrchtgng vn Frn nd Mnnrn nd wrkt f d Bstgng bsthndr Nchtl hn.(3) Nmnd drf wgn sns Gschlchts, snr bstmmng, snr Rss, snr Sprch, snr Hmt nd Hrknft, sns Glbns, snr rlgsn dr pltschn nschngn bnchtlgt dr bvrzgt wrdn. Nmnd drf wgn snr Bhndrng bnchtlgt wrdn. Wie ist das bei HTML-Quelltexten? Wie wirken sich Fehler hier aus? Zur Klärung dieser Frage betrachten wir den folgenden HTML-Quelltexten.

27. Fehler im HTML-Quelltext <html> <head> <title>Grundrechte<title> </head> <body> <h1>Artikel 3</h1> <ol> <lo> Alle Menschen sind vor dem Gesetz gleich. </lo> <lo> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </lo> <lo> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </lo> </ul> </html> Aufgabe: (a) Der HTML-Quelltext enthält eine ganze Reihe von Fehlern. Markiere und beschreibe sie alle. (b) Kann der Browser den HTML-Quelltext dennoch sinnvoll anzeigen? Versuche es - evtl. auch mit verschiedenen Browsern. (c) Soll man HTML-Quelltexte so salopp schreiben wie im Beispiel - auch wenn dein Browser ihn anzeigen kann? Was spricht dagegen?

28. Fehlersuche mit einem Validierer <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Grundrechte<title> </head> <body> <h1>Artikel 3</h1> <ol> <lo> Alle Menschen sind vor dem Gesetz gleich. </lo> <lo> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </lo> <lo> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </lo> </ul> </html> Vorspann ergänzen

29. Fehlersuche mit einem Validierer <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Grundrechte<title> </head> <body> <h1>Artikel 3</h1> <ol> <lo> Alle Menschen sind vor dem Gesetz gleich. </lo> <lo> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </lo> <lo> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </lo> </ul> </html> http://validator.w3.org

30. Fehlersuche mit einem Validierer <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Grundrechte<title> </head> <body> <h1>Artikel 3</h1> <ol> <lo> Alle Menschen sind vor dem Gesetz gleich. </lo> <lo> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </lo> <lo> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </lo> </ul> </html> Fehlermeldungen

31. Fehlersuche mit einem Validierer <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Grundrechte</title> </head> <body> <h1>Artikel 3</h1> <ol> <li> Alle Menschen sind vor dem Gesetz gleich. </li> <li> Männer und Frauen sind gleichberechtigt. Der Staat fördert die tatsächliche Durchsetzung der Gleichberechtigung von Frauen und Männern und wirkt auf die Beseitigung bestehender Nachteile hin. </li> <li> Niemand darf wegen seines Geschlechtes, seiner Abstammung, seiner Rasse, seiner Sprache, seiner Heimat und Herkunft, seines Glaubens, seiner religiösen oder politischen Anschauungen benachteiligt oder bevorzugt werden. Niemand darf wegen seiner Behinderung benachteiligt werden. </li> </ol> </body> </html> Erfolgsmeldungen

32. Übungen Aufgabe 1: Führe beim oben gezeigten HTML-Quelltext die Validierung wie beschrieben durch. Korrigiere die Fehler solange, bis der HTML-Quelltext fehlerfrei ist. Aufgabe 2 Teste, ob das von dir erstellte HTML-Dokument (zum Steckbrief) vom Validierer akzeptiert wird. Wenn nicht, dann ermittle mit Hilfe der Fehlerbeschreibungen des Validierers die Fehler und korrigiere sie.

33. Fachkonzept - Validierung <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> ... </head> <body> ... </body> </html> Dokumenttypdefinition Dokumenttypdefinition: legt die Regeln fest, die bei der Erstellung von HTML-Dokumenten beachtet werden müssen Ein HTML-Dokument nennt man valide bzw. gültig bzgl. einer Dokumenttypdefinition, wenn es alle Grammatikregeln befolgt, die in der Dokumenttypdefinition festgelegt sind. Validierung eines Dokumentes bedeutet zu überprüfen, ob das Dokument valide bzgl. der angegebenen Dokumenttypdefinition ist.

34. Übungen Aufgabe 3 Wenn das Dokument valide ist, dann man das mit einem Piktogramm anzeigen. Wie das geht, wird auf der Seite I:1.1.3.4 beschrieben. Aufgabe 4 Erweitere Firefox auch um einen Validator (siehe Seite I:1.1.3.4).

35. Teil 4 Formatierung mit CSS

36. Layout gestalten Bisher haben wir uns überhaupt nicht um die Formatierung der erstellten Webseiten gekümmert, sondern alles dem Browser überlassen. Oft möchte man auch das Layout einer Webseite selbst gestalten, z. B. die Hintergrundfarbe selbst festlegen.

37. Aufgabe Versuchen Sie herauszufinden, was die Stilangaben (siehe nächste Seite) bewirken. Verändern Sie hierzu gezielt Angaben und beobachten sie, wie sich das Aussehen der Webseite ändert. <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Steckbrief von Bailey</title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> <body> <h1>Steckbrief</h1> <p><img src="bailey1.jpg" alt="Foto von Bailey" /></p> <p>Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern.</p> <p>Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind:</p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> <p>Ich gehe jedes Wochenende zur <a href="www.welpenschule-kl.de">Welpenschule</a>.</p> <p> <img src="valid-xhtml11.gif" alt="Valid XHTML 1.1" /> </p> </body> </html> ohne Stilangaben

38. Aufgabe body { background-color: orange; color: black; font-size: small; font-family: Georgia, "Trebuchet MS", Verdana, sans-serif; } h1, em { font-weight: bold; font-style: normal; } h1 { font-size: 200%; } em { color: blue; } ul em { color: red; } mit Stilangaben

39. CSS CSS steht für Cascading Style Sheets. CSS ist eine Sprache zur Festlegung der Formatierung einzelner HTML-Elemente (wie Schrift, Farbe, etc.). Die Formatierung einzelner HTML-Elemente wird in CSS mit Hilfe von Regeln festgelegt. Eine CSS-Regel ist wie folgt aufgebaut: Selektor em { font-weight: bold; font-style: normal; } Attribut Attributwert

40. Aufgabe Schauen sie sich die Ausführungen auf www.inf-schule.de - 1.4.2 an und formatieren Sie ihren Steckbrief nach ihren Vorstellungen.

41. Trennung Strukturierung - Formatierung Struktur Formatierung html ... head title Steckbrief von Bailey body h1 Steckbrief p img p em • ... • ... • ... ... • ... ... • ... ... ... Ich heiße . Ich lebe ... Bailey p em Ich int... . Meine ... Agilit... ul li em Sprung durch ... li em Lauf über ... li em Slalo... zwischen ... p a Ich gehe ... . Welpenschule

42. Trennung Strukturierung - Formatierung Die Trennung zwischen Strukturierung und Formatierung ist ein Grundprinzip bei der Erstellung von Produkten wie Webseiten, das zur einfacheren Wartung der Produkte beiträgt. <?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC ... <head> <title>Steckbrief von Bailey</title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head> <body> <h1>Steckbrief</h1> <p> <img src="bailey1.jpg" alt="Foto von Bailey" /> </p> <p>Ich heiße <em>Bailey</em>. Ich lebe in der Nähe von Kaiserslautern.</p> <p>Ich interessiere mich für <em>Agility-Sport</em>. Meine Lieblingsdisziplinen sind:</p> <ul> <li><em>Sprung</em> durch einen Reifen</li> <li><em>Lauf</em> über eine Wippe</li> <li><em>Slalomlauf</em> zwischen Stangen</li> </ul> ... </body> </html> body { background-color: orange; color: black; font-size: small; font-family: Georgia, "Trebuchet MS", Verdana, sans-serif; } h1, em { font-weight: bold; font-style: normal; } h1 { font-size: 200%; } ... Formatierung Strukturierung

43. Teil 5 Exkurs – Web-Server

44. Web-Server Bisher haben wir Webseiten lokal gespeichert und im Browser als Dateien geöffnet. Ziel ist es jetzt, Webseiten auf einen Web-Server „hochzuladen“ und Webseiten von einem Web-Server „abzurufen“. file:///.../steckbriefe/index.html http://C18/steckbriefe/index.html http://10.10.1.20/steckbriefe/index.html

45. http IP-Adresse: 10.10.1.20 C: xampp htdocs steckbriefe Web-Client: Browser Web-Server: Apache index.html http://C18/steckbriefe/index.html http://10.10.1.20/steckbriefe/index.html

46. ftp IP-Adresse: 10.10.1.20 C: xampp htdocs steckbriefe FTP-Client: FileZilla FTP-Server: FileZilla Server index.html 10.10.1.20 wilheml steckbrief.html MKD wilhelm CWD /wilhelm STOR steckbrief.html

47. Konfiguration - FileZilla

48. Konfiguration - FileZilla

49. Teil 6 Barrierefreiheit

50. Webseiten anders wahrnehmen Wie können Blinde Webseiten erfassen? Was nimmt ein Farbenblinder eventuell nicht wahr? Welche Beschränkungen erfahren Menschen, die nur die Maus, nicht aber die Tastatur bedienen können? Wie kann man Webseiten so gestalten, dass keine unüberwindlichen Barrieren bei der Nutzung entstehen?