World Wide Web (www) Der globale Informationsverbund

Transkript

1 World Wide Web (www) CERN 1991: Tim Berners-Lee entwickelt Prototyp. Erlaubt einfachen Zugriff auf Texte, Grafiken und multimediale Elemente. Rasante und dynamische Entwicklung. Protokolle: HTTP (HyperText Transfer Protocol) HTTPS (HTTP Secure) Beschreibungssprachen HTML (HyperText Markup Language) XML (extended Markup Language) Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-33 Der globale Informationsverbund bla bla S 1 bla bla R 1 Browser R 0 Internet R i = Router S i = Server alb alb R 2 alb alb Client Server S 2 Modell Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-34

2 W3C World-Wide-Web Konsortium ( Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-35 Identifikation von Information Zugriff über URI (Uniform Resource Identifier) URL (Uniform Resource Locator) URN (Uniform Resource Name) Allgemeines Format für URL: <Protokoll>://<Server>/<Pfad> course/lekt_8/index.htm ftp://ftp.ifi.unibas.ch telnet://maser.unibas.ch Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-36

3 HTTP-Protokoll Definiert Zusammenspiel von Web-Client und -Server. Zustandsloses Protokoll: Klient macht Verbindung und stellt Anfrage. Server gibt Antwort und schliesst Verbindung. HTTP_method identifier HTTP_Version GET: HEAD: POST: Information holen, bzw. übergeben. Kopfinformation holen Information senden Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-37 Markup-Sprachen to markup = "Wie macht man Seiten?" Markup-Sprachen: Sprachen, die mittels eingestreuter Direktiven die Struktur und das Aussehen eines Dokuments bestimmen. T E X: Textverarbeitung für technisch-wiss. Dokumente (D.Knuth). Benutzeraspekte L A T E X. SGML: Standardized General Markup Language. HTML HyperText Markup Language. XML extended Markup Language. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-38

4 Aufbau eines HTML-Dokuments Ein HTML- Dokument ist eine strukturierte ASCII-Textdatei. Steuerbefehle (tags) stehen in Spitzklammern: <... >. Viele Steuerbefehle als Paar: Anfang: <...> Ende: </...>. Kopf besteht aus Titel und Meta-Information. Körper ist der eigentliche Inhalt. <html> <head>... </head> <body>... </body> </html> HTML- Dokument Kopf Körper Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-39 Erstes HTML-Beispiel <html> <head><title>erstes Beispiel</title></head> <body> <h1>herzlich willkommen</h1> Haben Sie schon Ihre <strong>eigene</strong> Homepage? <p> Falls nein, fleissig HTML lernen und üben. </body> </html> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-40

5 Allgemeine Regeln für Steuerbefehle Steuerbefehle stehen in Spitzklammern: <body>, <strong>. < und > sind Terminalsymbole! <head>, Keine Unterscheidung betreffend Klein- und Grossschreibung bei Direktiven: <h1> oder <H1>. Steuerbefehle können verschachtelt sein: <head><title>...</title></head>. Steuerbefehle können Attribute haben: <h1 align=center> Kommentare durch  bezeichnet. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-41 Verwendeter Zeichensatz Als Zeichensatz wird ISO Latin (8 Bit Code) verwendet. Zeichen, die auf der Tastatur fehlen, können mittels numerischem Wert eingegeben werden. &# ; d 1 d 2 d Copyright ¼ Bruch 1/4 Einige Zeichen sind auch mittels Namen verwendbar: ¼ Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-42

6 Umlaute und Sonderzeichen Umlaute der deutschen Sprache sind ebenfalls mittels Namen verwendbar: & uml; Bsp.: Ä entspricht Ä a A o O u U Zeichen, die in HTML terminal verwendet werden, müssen ebenfalls umschrieben werden: <: < >: > &: & ": " Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-43 Angabe der HTML- Version HTML hat eine junge Geschichte: 1.0, 2.0,3.0 und 4.0. Die 1. Zeile der HTML-Datei (vor dem <html>-tag) kann benützt werden, um dem Browser die vorliegende Version mitzuteilen. <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> Öffentliches HTML document type definition Style-sheets und Skripts; Tagsprache Englisch Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-44

7 Kopf- Informationen Der Titel sollte treffend gewählt werden: Anzeige im Fenster, Verwendung als Buchzeichen, Suchmaschinen. Setzen einer Adressbasis, so dass andere Referenzen relativ sein können: <base href= "... ". Meta-Informationen dienen der Charakterisierung des Dokuments und werden für eine Indexierung verwendet: <meta name=" " content="..."> description author keywords date... Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-45 Web Server Ein Webserver ist ein am Internet angeschlossener Rechner, der via HTTP- Protokoll u.a. HTML-Inhalte liefert. Web Server HTTP Internet HTTP Installation auf localhost: möglich. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-46

8 Apache Webserver Der Apache HTTP Webserver ist ein Opensource- Projekt mit Unterstützung für Unix und Windows Web Server htdocs cgi-bin Es werden u.a. HTML, SSI und Perl-Skripts unterstützt. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-47 Common Gateway Interface Common Gateway Interface (CGI) ist eine Technik um auf externe Programme zuzugreifen und Webseiten dynamisch zu erzeugen. Web Server CGI Datenbank Anwendung Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-48

9 Perl und CGI Mit Hilfe des Moduls CGI.pm ist eine unkomplizierte Verwendung möglich. #!c:/perl/bin/perl.exe # /usr/bin/perl use CGI qw( :standard ); print( header()); print(start_html("test Script")); print(h1( "Dies ist ein dynamisch erzeugtes Perl Dokument!" )); print(end_html() ); Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-49 Beispiel: Umgebungsvariable anzeigen foreach $variable ( sort( keys( %ENV ) ) ) { print( Tr( td( { style => "background-color: #11bbff" }, $variable ), td( { style => "font-size: 12pt" }, $ENV{ $variable } ) ) ); Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-50

10 Webanwendung: Formulare Formulare sind meist die Benutzerschnittstelle mit Hilfe derer Eingaben an einen Server gemacht werden. Buchungen aller Art (Hotel, Reise, Karten). Elektronischer Handel Konferenzgutachten Einschreibung an Universität Gebrauchtwagenverkauf Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-51 Formulare Formulare sind eine benutzerfreundliche Methode für eine Dateneingabe, die auf einem Server ausgewertet werden soll. Formulareingabe Formularauswertung Antwort Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-52

11 Formularbeispiel Texteingabe Wechselknopf Auswahlmenü Abschickknopf Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-53 Formulardefinition <form>...</form> ergibt die Formulardefinition. action: definiert URL des Empfängers. method: definiert Sendeformat. enctype: optionales Kodierungsformat. Dialogsteuerung erfolgt mittels <input>, <select>, <option> und <textarea> Angaben. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-54

12 Formularbeispiel in HTML <form method=post action=" Name: <input type=text name=name size=32 maxlength=80><p> Geschlecht: <input type=radio name=geschlecht value=m>männlich <input type=radio name=geschlecht value=w>weiblich<p> Einkommen: <select name=einkommen size=1> <option>unter 10'000 Sfr. <option>unter 30'000 Sfr. <option>30'000 Sfr. und mehr </select> <p> <input type=submit> </form> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-55 Dialogelemente (1) In der <input>-sektion werden die Elemente der Dialogsteuerung definiert: type =... legt Dialogelement fest. name = bezeichner definiert Bezeichner. value definiert Anfangswert. size definiert Grösse des Elements. maxlength definiert maximale Länge. checked definiert Vorabaktivierung. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-56

13 Dialogelemente (2) Die folgenden Dialogmöglichkeiten kommen häufig vor: text: Einzeiliges Textfeld. radio: Optionsfeld. checkbox: Kontrollkästchen. submit: Schaltfläche für Formular schicken. reset: Schaltfläche für Formular initialisieren. button: Schaltfläche mit Schriftzug. Weitere Elemente: password,file,hidden,image. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-57 Auswahldialog (select) Mittels <select...> </select> kann ein Auswahldialog definiert werden. Mittels <option> werden die verschiedenen Elemente aufgelistet. Ihr Urlaubsziel: <select name=orte size=1> <option>beinwil <option>hinwil <option>oberwil <option>williwil </select> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-58

14 Client-Server Zusammenspiel Mit method wird definiert wie die Übertragung erfolgt: Get: Einstufig indem die Formulardaten direkt übermittelt werden. Post: Zweistufig, indem erst geprüft wird, ob Server bereit ist. enctype legt Codierung fest: Defaultcodierung verwenden. multipart/form-data falls type=file verwendet wird. Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-59 Formulare im Modul CGI Formular kann per HTML oder Perl-Skript generiert werden. Auf die Formularfelder kann mittels param zugegrifen werden my $name=param("name"); my $geschlecht=param("geschlecht"); my $gehalt=param("einkommen"); Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-60

15 Server Side Includes Server Side Includes (SSI) sind eine Möglichkeit dynamische HTML-Seiten mittels Aufruf von Umgebungsvariablen bzw. Aufruf von Programmen zu erzeugen. <html><head><title>using SSI</title></head> <body> The Greenwich Mean Time is <span style = "color: blue"> . </span><br /> Besucher Nummer: <br /> Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-61 Webzugriffszähler open( COUNTREAD, "counter.dat" ); $data = <COUNTREAD>; $data++; close( COUNTREAD ); open( COUNTWRITE, ">counter.dat" ); print( COUNTWRITE $data ); close( COUNTWRITE ); print( header()); print( "You are visitor number: $data"); Helmar Burkhart Werkzeuge der Informatik Lektion 8: Internet und Anwendungen 8-62