Kapitel 20: Internet & WWW - Institut für Informatik · Sprache zur Beschreibung von Struktur- und...

1

Kapitel 20:

Internet & WWW

Einführung in die InformatikWintersemester 2007/08

Prof. Bernhard Jung

Prof. B. Jung Einführung in die Informatik, WS 2007/08 TU Bergakademie Freiberg

Übersicht

Aufbau und Dienste des InternetsEinführung in HTMLFortgeschrittene Themen: CSS und dynamische Web-SeitenGenerierung dynamischer Web-Seiten (mit Python)

Verarbeitung von Web-Formular-EingabenZugriff auf Datenbankinhalte

LiteraturGumm & Sommer. Einführung in die Informatik. Oldenbourg. 2004.Herold, Lurz, Wohlrab: Grundlagen der Informatik. 2006.

Online-Tutorials zu HTMLhttp://de.selfhtml.org/http://www.w3schools.com/tags/default.asp

Web-Server u. Datenbank Softwarehttp://www.apachefriends.org

2


Was ist das Internet?

Das Internet besteht auseiner Vielzahl von Computern

die direkt oder indirekt miteinander verbunden sinddie dasselbe Übertragungsprotokoll verwenden (TCP/IP)auf denen Dienste angeboten und genutzt werden

Einer Vielzahl von Benutzern, die von ihrem beruflichen oder privaten Computerarbeitsplatz aus direkten Zugriff auf dieselben Dienste habeneiner Vielzahl weiterer Netze, die über Kommunikationscomputer (gateways) erreichbar sind

Nach: G. Schneider. Eine Einführung in das Internet. Informatik Spektrum, 18. 1995.

Bild: Database Management with Web Site Development Applications, Greg RiccardiAddison Wesley Publishing Company, 2003


Statistik: Internet-Nutzer

Ingesamt über 1,4 Milliarden Nutzer (Stand November 2007)http://www.internetworldstats.com/

3


Der Aufbau des Internets

dezentrale Struktur

Kommunikation durch Übertragungsprotokoll TCP/IPAufteilung der zu übermittelnden Daten in Pakete einheitlicher GrößePakete können auf verschiedenen Wegen (und zu verschiedenen Zeiten!) ihr Ziel erreichenJedes Paket enthält Kopfdaten über Absender- und ZielcomputerSpezielle Wegplanungscomputer in den Netzknoten ("Router") wählen die Teilstrecken der einzelnen Pakete aus Im Zielcomputer werden Pakete in der richtigen Reihenfolge zusammengesetzt (verloren gegangene Pakete werden neu angefordert)

Vorteile von TCP/IP (gegenüber durchgehender Leitung zw. Sender u. Empfänger wie z.B. Telefon):

Ausfall von Übertragungsstrecken kann kompensiert werdenGemeinsame Nutzung der Leitung durch viele Computersysteme möglich

Anbindung von Computernetzen, die nicht TCP/IP verwenden über Gateways

Bild: howstuffworks.com

siehe auch: http://computer.howstuffworks.com/internet-infrastructure.htm


Die Adressierung im Internet

Jedes Computersystem im Internet besitzt eindeutige IP-AdresseIP-Adresse besteht aus 4 Bytes

Schreibweise dezimal (0…255), durch Punkte getrenntz.B. alle Rechner der TU Freiberg mit IP-Adressen der Form 139.20.x.x

Zusätzlich (besser merkbare) symbolische Domain-Namenz.B. www.informatik.tu-freiberg.de.de ist ein Beispiel für Top-Level Domain

DNS = Domain Name SystemAbbildung der symbolischen Namen auf IP-Adressen über spezielle Nameserver

4


Dienste im Internet

wichtigste DiensteE-MailNewsgroupsChat / Instant messagingDateien übertragen im Internet (ftp, sftp, ..)Fernbenutzung von Computersystemen (telnet, ssh)Internet-TelefonieWWW

Dienste benutzen i.a. eigene, auf TCP/IP aufsetzende Protokolle (z.B. http, smtp, VoIP…)


TCP/IP-Protokollstapel

Gliederung der Kommunikationsaufgaben in Netzwerken in vier funktionale Schichten: Anwendungsschicht (application layer)

Die Anwendungsschicht umfasst alle Protokolle, die mit Anwendungsprogrammen zusammenarbeiten und die Netzwerkinfrastruktur für den Austausch anwendungsspezifischer Daten nutzen.

Transportschicht (transport layer)stellt eine Ende-zu-Ende-Verbindung her

Vermittlungsschicht (internet layer)Aufgabe dieser Schicht ist es, zu einem empfangenen Paket das nächste Zwischenziel zu ermitteln und das Paket dorthin weiterzuleiten

Netzzugangsschicht (network access)als Platzhalter für verschiedene Techniken zur Datenübertragung von Punkt zu Punkt zu verstehenkann die Host-an-Netz-Schicht durch Protokolle wie Ethernet, FDDI, PPP (Punkt-zu-Punkt-Verbindung) oder 802.11 (WLAN) ausgefüllt werden

BeispieleTCP/IP-Schicht

Ethernet, Token Ring, FDDI

Netzzugangsschicht

IPv4, IPv6Vermittlungsschicht

TCP, UDPTransportschicht

HTTP, FTP, SMTP, POP3

Anwendungsschicht

5


WWW

World Wide Web: Hypertextbasiertes, hypermediales, verteiltes Informationssystem im Internet

"multimedialer Teil des Internets"Protokoll: HTTP (HyperText Transfer Protokoll)Komponenten: Web-Server und Web-ClientsArbeitsweise: Server verwalten Hypertext- / Hypermedia-Dokumente mit Texten, multimedialen Objekten und Verweisen auf andere Dokumente unter eindeutigen Adressen.Clients können mit Browsern Dokumente anzeigen, aktivieren und Verweise verfolgen

...FDDIToken

RingTokenBusEthernetNetz-Zugang

IP (IPv4, IPv6)Internet

TCPTransport

HTTPAnwendung

HTTP im TCP/IP-Protokollstapel


WWW

Web-BrowserFormatierung und Anzeige von Web-(HTML-) SeitenAnfrage von Web-Seiten bei Web-Server (request)z.B. Internet Explorer, Mozilla Firefox, Opera, …

Web ServerSendet Web-Seiten an Browser (response)Web Server Software z.B. Apache, Microsoft IIS

Kommunikation zwischen Web-Browser und Server mittels HTTP (hypertext transfer protocol; baut auf TCP/IP auf)

http://www.web4data.com/index.html

www.web4data.com

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

Files


/index.html

WebServer

WebBrowser

Request frombrowser forWeb page

HTMLdocument onits way to the

browser

HTMLdocument

stored in a file

FileName

Servername


6


Statistik: Web Server Software

Marktanteile Web-Server Software, August 1995 - Dezember 2007 Bild: http://news.netcraft.com/archives/web_server_survey.html


HTML - Einführung

HyperText Markup LanguageSprache zur Beschreibung von Struktur- und Layout-Aspekten digitaler Dokumente (dargestellt durch 'Browser')Mechanismen zur Verweis auf andere digitale Dokumente (HTML-Seiten, Bilder, Video, Audio) mittels Hyperlinks

Hintergrund zu HTMLentwickelt in 1980er Jahre von Tim Berners-Lee am CERN1993: erster grafischer Web-Browser (genannt "Mosaic")HTML ist ein internationaler Standard des World Wide Web Consortiums (W3C)Aktuelle Version of HTML http://www.w3.org/TR/html

derzeit aktuell: XHTML 1.0 (Reformulierung von HMTL 4 in XML)

W3C-Standards können gebührenfrei benutzt werden Designziel von HTML: lesbar für Computer und Menschen

Sir Tim Berners-LeeBild: Wikipedia

7


Beispiel: Eine einfache HTML-Seite

Text-Datei 'Seite_01.html'dargestellt in Microsoft-Editor

Dieselbe Datei dargestellt imFirefox Web-Browser


Erklärung des Beispiels

<html><head><title>Meine kleine Web-Seite</title>

</head><body><h1>Diese Web-Seite ist sehr kurz</h1><p>Aber <i>immerhin</i> gibt es einen<a href="http://www.google.de">Link zu Google</a> </p></body></html>

8


Struktur von HTML-Dokumenten

HTML-Dokumente werden aufgebaut mittels Elementen ("Tags"), Attributen und Verschachtelung

Element mit Text: <tagname attr=“value” >text</tagname><title>Meine kleine Web-Seite</title><a href="http://www.tu-freiberg.de">TU Bergakademie Freiberg</a>

Element ohne Text: <tagname attr=“value” /><img src="unilogo.gif" alt="TU Bergakademie Freiberg “/>

Verschachtelte Elemente: <tag1><tag2></tag2><tag3></tag3></tag1>Öffnende und schließende Elemente <tag1> … </tag1> Nicht weiter verschachtelbare Elemente können gleichzeitig geöffnet und geschlossen werden, z.B. <br/>, <p/>Schließende Elemente (früher) nicht immer verlangt: <tag1><tag2></tag1>

i.a. (noch) toleriert von BrowsernVerwendung schließender Elemente ist immer möglich und guter Stil

Aktuelle Spezifikation (XHTML) erfordert Schließen aller Elemente


Einfache HTML Tags

Überschriften unterschiedlicher Größe<h1>This is an h1 header</h1><h2>This is an h2 header</h2><h3>This is an h3 header</h3><h4>This is an h4 header</h4><h5>This is an h5 header</h5><h6>This is an h6 header</h6>Text-Formatierung<center>This text is centered</center><b>This is bold</b><br/><i>This is italic</i>Horizontale Trennlinie (Ruler)<hr> or <hr/>Zeilenumbrüche (Line Breaks)<br> or <br/>

basic.html

9


Weitere HTML Elemente

<img src="silly.gif" height=100 width=100 >

Image

<a href="http://www.no.org/andy"> Andy's Home page</a>

Hyperlink /Anchor tag

<ul>

<li>alpha</li><li>beta</li><li>charlie</li>

</ul>

UnorderedList

<ol><li>alpha</li><li>beta</li><li>charlie</li>

</ol>

OrderedList

more.html


Tabellen in HTML<html><body>

<table border = 1><tr><th></th><th>Essen 1</th> <th>Essen 2</th> <th>Essen 3</th> <th>Essen 4</th>

</tr>

<tr><th>Montag</th><td>Schnitzel</td><td>Lammsteak</td><td>Huhn</td><td>Pizza</td>

</tr>

<tr><th>Dienstag</th><td>Geschnetzeltes</td><td>Hacksteak</td><td>Klops</td><td>Scholle</td>

</tr></table>

</body></html>

• <table>• definiert Tabelle

• <tr>• definiert Tabellenzeile

• <th>• definiert Tabellenkopf (in fett)

• <td>• definiert Tabellenzelle

10


Hyperlinks & URLs (Uniform Resource Locators)

Verweis auf andere digitale Objekte (HTML-Dokumente, Video-, Audio-, Bilddateien, …) anchor tag <a href=url> hyperlink text </a>

Absoluter URL href=“http://www.no.org/ia/somepage.html“

Relativer URL beginnend mit /href="/someotherpage.html"verweist auf Dokument relativ zu Wurzelverzeichnis des Web-Serversvollständiger URL entsteht durch Präfixe für Protokoll (http) und Web-Server (www.no.org)

http://www.no.org/someotherpage.html

Relativer URL nicht beginnend mit /href="someotherpage.html"verweist auf Dokument relativ zum Verzeichnis der aktuellen Seitevollständiger URL entsteht durch Anfügen des relativen URLs an Basis-URL

z.B. Hyperlink erscheint in Web-Seite im Verzeichnis data des Servers www.no.org:http://www.no.org/data/someotherpage.html


Auswahl von HTML-Elementen

Bild<img>

List item<li>

Geordnete (nummerierte) Liste<ol>

Ungeordnete Liste<ul>

Tabellenzelle (table data)<td>

Tabellenzeile (table row)<tr>

Tabelle<table>

Hyperlink (anchor)<a>

Horizontale Trennlinie (horizontal rule)<hr> oder <hr/>

Zeilenumbruch (line break) <br> oder <br/>

Paragraph<p> oder <p/>

Überschriften 1. bis 6. Ordnung<h1> bis <h6>

Körper des HTML-Dokuments<body>

HTML-Dokument<html>

BeschreibungHTML-Element

Bem: XHTML definiert über 80 Elemente

11


Innovation

Time "Person of the Year 2006"

Internetnutzer

"Yes, you. You control the Information Age. Welcome to your world."

"creators and consumers of user-generated content are transforming art and politics and commerce"

"Web 2.0"Begriff eingeführt 2005

"What is Web 2.0" von Tim O’Reillyhttp://www.oreilly.de/artikel/web20.html

Bereitstellung von Medieninhalten durch "normale" Internetnutzerz.B. blogs, youtube, flickr, myspace, …siehe: http://de.wikipedia.org/wiki/Web_2.0

www.time.com


Cascading Style Sheets (CSS)

HTML enthält Elemente zur Definition des Inhalts und des Layouts von Web-SeitenCSS ist Sprache zur Definition von Formateigenschaften einzelner HTML-ElementeVerwendung von CSS unterstützt Trennung von Inhalt und Layout von Web-Seiten (Web-Site Editoren vs. Designer)Vereinfachte Umstellung des Designs von Web-Sites

<h2 align="center"><font color="red" size="+4"face="Times New Roman, serif"><em>Verwendung von CSS</em></font></h2>

HTML-Layout ohne CSS

<h2>Verwendung von CSS</h2>

HTML-Layout mit CSS

h2 {text-align: center;color: red;font: italic large "Times New Roman", serif;}

CSS Layout Definition (eingebettet oder extern)

12


Mächtigkeit von CSS

http://www.csszengarden.com/alle Seiten verwenden identischen HTML-Code (Inhalt)aber unterschiedliche CSS-Definitionen

Gleiches HTML

CSS Stylesheet 2

CSS Stylesheet 1


Dynamische Web-Seiten

Wozu?Verarbeitung von BenutzereingabenAnbindung von Datenbanken statische HTML-Seiten nicht genug; benötigt wird Programmausführung

Programmausführung auf dem Server (server side scripting)oft benutzte Programmiersprachen z.B. PHP, Java, PythonEinbettung der Programm-Skripte in HTML-Seiten oder Ausführung von CGI (Common Gateway Interface) Skripten, die HTML-Seiten erzeugen

Programmausführung beim Client (client side scripting)Laden von Programmen vom Server und Ausführung beim Clientz.Tl. als Sicherheitsrisiko betrachtetz.B. Javascriptz.B. Java Applets

13


Architektur statischer Web-Seiten

HTML-Seiten im Datei-System des Web-Servers gespeichert

http://www.web4data.com/index.html

www.web4data.com


Files


/index.html

WebServer

WebBrowser

Request frombrowser forWeb page

HTMLdocument onits way to the

browser

HTMLdocument

stored in a file

FileName

Servername



Dynamische Web-Seiten

Eingabe-Formulare

Inhalte z.Tl. ausDatenbankgeneriert

14


Architektur dynamischer Web-Seiten

Formulareingaben in Web-Browser triggern Ausführung von Anwendungsprogrammen (z.B. geschrieben in Python) auf Server:

Verarbeitung von Benutzer-EingabenZugriff auf Datenbank-Inhalte

Ausgabe der Anwendungsprogramme ist HTML-Code


Web browser

Files

Browser computer Web server computer

Httpserver

2. Browsercollects data andsends request toWeb server

4. Applicationprocessor fetchesprogram from file

1: Userenters dataand clicks abutton

7. Browser formatsHTML document anddisplays it.

WebApplicationprocessor

6. Application programprocesses data andgenerates new HTMLdocument

3. Web serversends request toWeb applicationprocessor

Applicationprogram

5. Application programbegins execution andreads user data


Generierung dynamischer Web-Seiten

Wozu?Verarbeitung von BenutzereingabenAnbindung von Datenbanken

Programmausführung auf dem Server (server side scripting)oft benutzte Programmiersprachen z.B. PHP, Perl, Java, (Python)Einbettung der Programm-Skripte in HTML-Seiten, oderrAusführung von CGI (Common Gateway Interface)-Skripten, die HTML-Seiten erzeugen

Im folgenden:Server Side Scripting mit Python "Python Server Pages (PSP)"

Einbettung von Python-Code in HTML-Seitenähnlich zu Java Server Pages (JSP), Microsoft Active Server Pages (ASP), PHP

CGI-SkriptBenutzte Umgebung: Xampp von www.apachefriends.org

Apache Web Server, MySQL Datenbank, PSPalles Open Source

15


Generierung dynamischer Web-Seiten (1)HTML-Seite mit Login-Formular

<html><head><link href="design.css"

rel="stylesheet" type="text/css"><body>

<h1>Login-Formular</h1><hr>

<form action="process.psp" method="POST" >Eingabe Name: <input type="text" name="username" /> Eingabe Passwort: <input type="password" name="passwd" /> <input type="submit" value="login" />

</form><p/>Hinweis: Passwort ist "TU-BAF"

</body></html>

Formular mit benanntenEingabefeldern, Name 'process.php' der Datei, die Eingabedaten verarbeiten soll


Generierung dynamischer Web-Seiten (2)Python-Server Page zur Verarbeitung der Login-Eingaben

<html><head><link href="design.css" rel="stylesheet" type="text/css">

<body><h1>Login-Verarbeitung</h1><hr><p/><%if form['passwd'] == 'TU-BAF':

print >> req, 'Willkommen, ', form['username']print >> req, ', dein Passwort war richtig'

else:print >> req, 'Login fehlgeschlagen', '<p/>'print >> req, 'Hinweis: Passwort ist "TU-BAF"'

%><hr/></body></html>

Eingebettetes Python Skript

Einbettung in HTML-Code mittels <% …%>

Zugriff auf Formulardaten über Namen der Eingabefelder

Ausgaben mittels print >> reqin zurückgeliefertes HTML (req ist in PSP vordefinierte Variable, 'Request-Handler')

process.psp

16


Generierung dynamischer Web-Seiten (3)Zugriff auf Datenbanken mit Python

SchritteVerbindung zu Datenbank aufbauenSQL-Anfrage an Datenbank-Server schickenVerarbeitung der zurück gelieferten Ergebnistabelle

Dazu: Import und Verwendung von Funktionen des Moduls MySQLdb

Web server computer

Application Program

Database Server Computer

Database Server

ConnectionObject Database

SQL Query

Result ofQuery

SQL Statements

Results


Generierung dynamischer Web-Seiten (4)Python-Server Page mit Zugriff auf Datenbank

<h1> Unsere Universität</h1>(demonstriert Datenbank-Zugriff mit Python Server Pages)<p/><hr><h3>Unsere Studenten</h3><%import MySQLdb

db = MySQLdb.connect(host="localhost", user="user1", passwd="", db="universitaet")

cursor = db.cursor()cursor.execute("SELECT name FROM studentORDER BY name")result = cursor.fetchall()

for record in result:print >> req, record[0]print >> req, '<br/>'

%>db.psp

17


Generierung dynamischer Web-Seiten: CGI-Skripte

CGI-SkriptProgramm auf Web-Server, das u.a. HTML-Dokumente generieren kannlänger bestehende Variante, Webseiten dynamisch bzw. interaktiv zu machen, die erstmals 1993 angedacht wurde.Skript oft in Perl, aber beliebige Programmiersprachen möglichCGI = Common Gateway Interface

Aufruf wie "normales" HTML-Dokument über URLz.B. http//www.example.net/cgi-bin/test.pyKonvention: CGI-Skripte im Verzeichnis "cgi-bin" auf Web-Servererste Ausgabezeile sollte Type des Dokuments angeben (HTTP-Header), z.B.: Content-type: text/html

Diskussion+ einfache Technologie, viele Programmiersprachen möglich- wenig effizient, da für jeden Aufruf ein neuer Prozess gestartet werden mussheute weniger gebräuchlich


Generierung dynamischer Web-Seiten: CGI-Skripte

#!C:\python25\python.exeprint "Content-type: text/html\n"

from time import localtimez = localtime()

print "<html><head></head><body>"print "<h1>Die aktuelle Zeit</h1>" print "Es ist", z[3], "Uhr und", z[4], "Minuten"

print "</body></html>"

Ausführung in IDLE Aufruf über Web-Server

time.py

18


Javascript

objektbasierte Skriptspracheüberwiegend eingesetzt in Web-Browsern

JavaScript-Code wird vom Web-Server an Browser geschickt …… und im Browser ausgeführt"client side scripting"mittlerweile auch verwendet in interaktive PDF-Dokumenten

Typische Anwendungen von JavaScriptPlausibilitätsprüfung von Formulareingaben vor dem Absenden Rollover-Grafiken, die beim Überfahren mit der Maus wechseln Banner oder Laufschriften dynamische Manipulation von Webseiten Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (z.B. automatisches Nachladen von Kartenausschnitten in Google Maps)

weitere Informationen http://de.selfhtml.org/javascript/ , http://de.wikipedia.org/wiki/Javascript


Überprüfung von Formulareingaben mit JavaScript<html><head><link href="design.css" rel="stylesheet" type="text/css"><script type="text/javascript">function chkFormular () {if (document.userdata.username.value == "") {

alert("Bitte Ihren Namen eingeben!");document.userdata.username.focus();return false;

}if (document.userdata.age.value == "") {

alert("Bitte Ihr Alter eingeben!");document.userdata.age.focus();return false;

}for (i = 0; i < document.userdata.age.value.length; ++i)if (document.userdata.age.value.charAt(i) < "0" ||

document.userdata.age.value.charAt(i) > "9") {alert("Altersangabe keine Zahl!");document.userdata.age.focus();return false;

}}</script></head>

<body><h1>Bitte Daten eingeben</h1><hr><form name="userdata" action="process2.psp"

method="GET" onsubmit="return chkFormular()"><pre>Eingabe Name: <input type="text" name="username" /> Eingabe Alter: <input type="text" name="age" />

<input type="submit" value="abschicken" /></pre></form></body></html>

Feld darf nicht leer sein

Altersangabe muss aus Ziffern bestehen

Kapitel 20: Internet & WWW - Institut für Informatik · Sprache zur Beschreibung von Struktur- und...

Documents

Transcript of Kapitel 20: Internet & WWW - Institut für Informatik · Sprache zur Beschreibung von Struktur- und...