Betriebssysteme. Komponenten und Dienste des Internet

Transkript

1 Internet Das Internet dient dem freien weltweiten Informationsverkehr seiner Nutzer durch vielfältigen Datenaustausch zwischen Rechnern aller Größenklassen, Betriebssysteme und Leistungsklassen. Das Internet war bis vor kurzem eine moderne Anarchie mit technischen aber ohne soziale oder politische Begrenzungen (aber: Netiquette). Erst in letzter Zeit erfolgen gesetzliche Regelungen. Die Wurzeln des Internets sind militärischer Natur! Seine technische Basis wurde im Auftrag des US-Verteidigungsministeriums entwickelt. Konzept: Entstand in den 60iger Jahren im Auftrag des DoD (Department of Defence, USA). Ziel: Militärisches Kommunikationssystem, das auch bei teilweiser Zerstörung noch funktioniert. ==> Keine zentrale Leitung und Organisation wie bei einem Telefonnetz Statt dessen Netz aus Knoten (Rechnern) mit Selbstverwaltung u. redundanten Verbindungen. Nachricht = Pakete, die (auch) auf verschiedenen Wegen in beliebiger Reihenfolge zum Empfänger gelangen können. Die zusammengefügten Pakete ergeben die empfangene Nachricht. Historie: Ab 1969: 1. Realisierung als ARPA-Net (4 Unis) 1973: Vernetzung von 40 Großrechnern. Präsentation in der Öffentlichkeit. Gründung der INWG (InterNetwork Working Group): Erweiterung, internationale Integration, Satellitenkommunikation. 1982: Entstehung der frei verfügbaren Spezifikationen: TCP Transmission Control Protocol IP Internet Protocol 1986: NFSNET als neuer Backbone. Löst 1990 das ARPA-Net ab : Am CERN (Europ. Zentrum f. Teilchenphysik, Genf) wurde die erste WWW-Architektur entwickelt: HTTP Hypertext Transfer Protocol HTML Hypertext Markup Language Browser Client zur Darstellung der Information (Seiten) und zum Navigieren im Netz Server Verwaltet und versendet angeforderte Seiten. Ziel: Rechner- und ortsunabhängiger Zugriff auf Forschungsberichte. Das Konzept basiert auf dem TCP/IP-Protokoll des Internets. Etablierung des Systems am CERN in Die Standards und die am CERN entwickelte Software waren von Anfang an frei verfügbar. Dez. 1991: Veröffentlichung der WWW-Architektur und Erfahrungsbericht in den CERN-Newsletters. Ju1i 992: Erstes freiverfügbares WWW-Paket im Internet bestehend aus Server-SW, einem zeilenorientierten und einem X11/Motif-basiertem Browser (Viola). Anfang 1993: Mosaic-Browser vom NCSA (Nat. Center for Super Computing, USA). Vorbild für viele heutige Browser. Bis 1995 der am meisten verbreitete Browser. 1994: Der Siegeszug des WWW zeichnet sich im Verlauf des Jahres ab: Die Anzahl der Server stieg weltweit von ca. 800 (davon 100 allein in der BRD) am Anfang des Jahres auf über am Jahresende. ca. 1994: Microsoft gibt seinen Widerstand gegen das Internet auf und verzichtet darauf, ein eigenes Netz zu etablieren. Microsoft bringt einen eigenen Internet-Browser heraus, der bis heute in wesentlichen Punkten vom Standard abweicht. Dazu gehört insbesondere die Komponente Active-X, die nur unzureichend gegen Virenimport und unkontrollierten Zugriff auf den Rechner gesichert ist. 1990: Geburtsstunde des WWW. 1994: Etablierung des WWW als weltweiter Informationsstandard. Komponenten und Dienste des Internet Übersicht: Elektronische Post (auch genannt) Net-News Konferenz-System, elektronische Zeitung FTP Systemunabhängiger Filetransfer (erfordert Account oder anonymous FTP) Telnet /SSH Arbeiten auf einem (beliebig) entfernten Rechner im Netz (erfordert Account) HTTP Hypertext und Multimedia Gopher Suchsystem über verschiedene Server Archie Stichwortsuche nach Dateinamen (Datenbank aller anonymous FTP-Server) Elektronische Post. Direkt adressiert durch: <user>@<domain-address> Das MIME Protokoll (multipurpose internet mail extension) erlaubt die Übertragung von Binärdateien als Anhänge, z.b. Bilder, Programme usw. Dr. W. Jakob Script- Internet

2 Vorsicht: Unverschlüsselte s sind für alle beteiligten Zwischen-Server lesbar! Also keine sensiblen Daten wie z.b. die Kreditkarten-Nummer via unverschlüsselte verschicken. Es gibt entsprechende Filter-Programme! s werden auf dem Zielserver gespeichert und durch ein Mail-Programm (pine, Netscape, Outlook) abgerufen. Dies kann passwort-geschützt auch durch entfernte Rechner geschehen (sog. POP3-Zugang). Der Benutzer kann dabei bestimmen, ob die Mails auf dem Server verbleiben oder nach dem Laden gelöscht werden sollen. Alternativ dazu erlaubt ein IMAP-Zugang die Verwaltung von Mails und Ordnern auf dem Server und das gestaffelte Herunterladen (Kopf, Mail, Anhang) der Mails. IMAP ist durch seine zentralisierte Datenhaltung gut dazu geeignet, ein Mailkonto von verschiedenen Rechnern aus zu verwalten. Weitere Alternative: Web-Interface zur Mailverwaltung eines Internetserviceproviders (ISP), wie z.b. GMX, Web.de,... Net-News Eigenschaften: offene Kommunikation elektronische Zeitung, in der jeder veröffentlichen kann. Beiträge in Englisch thematisch geordnet (Hierarchie): comp(uting) news über Net-News selbst misc(ellaneous) rec(reation) sci(ence) soc(ielogy) talk alt(ernative) Hobby, Spiele, Unterhaltung soziale und kulturelle Themen Politik u.ä. alle möglichen Themen Begriffe: Usenet Gesamtheit aller Rechner mit Net-News (nicht identisch mit dem Internet). Artikel werden unter Angabe der eigenen -Adresse veröffentlicht (posten). reply Antwort an den Autor per , (private Diskussion) follow-up Antwort als Artikel in der Regel in der gleichen Gruppe, (öffentliche Diskussion) News-Gruppen kann man abonnieren, d.h. dass das eigene News-Tool (z.b. Netscape) die Artikel der ausgewählten News-Gruppen sammelt und anzeigt. Man kann nur die News-Gruppen abonnieren, die der benutzte News-Server auch anbietet, also seinerseits abonniert hat. News sind unter anderem dann besonders interessant, wenn man ein Problem lösen will, das wahrscheinlich auch andere beschäftigt. Z.B. Probleme mit neuer Software. Telnet Einloggen auf einem (entfernten) Rechner im Netz (Host) und Arbeiten als sei man vor Ort. Der eigene Rechner wird dabei zum Terminal (in der Regel nur ASCII). Die Verbindung kann durch geeignete Software auch auf Vollgrafikfähigkeiten erweitert werden. Z.B. durch einen X-Server und X-Client. Telnet: Das verwendete Protokoll ist sehr ineffektiv, da der Datenaustausch zeichenweise erfolgt. Pro an den Host gesandtes Zeichen werden 108 Zeichen hin und 68 Zeichen zurück übertragen. Wegen fehlender Verschlüsselungsmöglichkeiten überträgt Telnet Passworte im Klartext und wird daher kaum noch eingesetzt. SSH: Secure shell (SSH) ist ein Netzwerkprotokoll, das eine sichere authentifizierte und verschlüsselte Verbindung zwischen zwei Rechnern über ein unsicheres Netzwerk erlaubt. Es gibt verschiedene SSH- Programme, z.b. PuTTY für MS Windows, OpenSSH oder SSH der gleichnamigen Firma. FTP FTP steht für file transfer protocol. Systemunabhängiger Filetransfer. Erfordert entweder Account und Einloggen oder der Host gestattet anonymous FTP unter dem User anonymous und der eigenen -Adresse als Passwort. Es gibt zwei Modi: ASCII-Mode: nur ASCII-Files (Default-Modus) Binary-Mode: beliebige Dateien, z.b.: ausführbare Programme, Bild- oder Sound-Dateien, Word-Dokumente Neben dem reinen Filetransfer können Dateien auch gelöscht oder umbenannt werden. Es ist auch möglich, Verzeichnisse anzulegen oder den Inhalt eines Verzeichnisses auszugeben. Es gibt einfache zeilenorientierte FTP-Programme (ftp) für fast alle Betriebssysteme und FTP-Tools mit grafischer Oberfläche, z.b. WS-FTP (Ipswitch Inc., MS Windows) oder gftp (GNU, Linux). Domain-Adressierung Die Adressierung im WWW erfolgt mit Hilfe des Uniform Resource Locators (URL). Dieser besteht aus drei Komponenten: <Zugriffsmethode>://<Domainadresse>/[<Dateiadresse>] Die Zugriffsmethode gibt das verwendete Protokoll zur Datenübertragung an. Die Domainadresse ist der Name des Servers, der die gesuchte Information anbietet. Groß- und Kleinschreibung ist unerheblich. Erlaubt sind Buchstaben, Ziffern und der Bindestrich. Die optionale Dateiadresse gibt Pfad und Name des Dokuments an. Da das verwendete Betriebssystem zwischen Groß- und Kleinschreibung unterscheiden kann (z.b. Unix), sollte man diese sicherheitshalber als relevant ansehen. Pfade werden durch / getrennt. Dr. W. Jakob Script- Internet

3 Statt URL wird auch der Begriff Location verwendet. Eine Domain-Adresse besteht in der Regel aus 3 bis 5 Komponenten. Die am weitesten rechts stehende Komponente ist meist ein Alias-Name, z.b. www, der für einen konkreten Rechner steht. Ersetzt man diesen Rechner durch einen neuen, braucht man nur lokal den Alias-Namen zu ändern und die weltweit bekannte Domain-Adresse kann unverändert bleiben. Wenn die Dateiangabe fehlt, wird auf ein Standardfile, z.b. Welcome.html oder index.htm zugegriffen. Statt der Dateiangabe kann auch ein dem Rechner bekannter Username eingeleitet durch eine Tilde (~) angegeben werden. z.b: für einen Studenten namens Hans Wurst. Die Domain-Adressierung gilt allgemein im Internet. Z.B. auch für die - Adressierung (@ = at): <user>@<domain-address> also für unseren Hans Wurst: wuha0011@hs-karlsruhe.de Adressauflösung: Der lokale Internet-Server kennt die Adresse Teil der eigenen Domain kennt die Adresse wegen kürzlichem Zugriff kennt die Adresse nicht und befragt den nächst übergeordneten Rechner in der Domain- Hierarchie Hinter den symbolischen Domain-Adressen stehen numerische IP-Adressen. Die alte IPv4 verwendet 4 Bytes: nnn.nnn.nnn.nnn mit nnn < 256 Da die damit vorgegebene Adressierkapazität nicht mehr ausreicht, erweitert IPv6 (Internet Protocol Version 6) die Adresse von 32 auf 128 Bit (von rund 4 Milliarden IPv4- auf 3, IPv6-Adressen). IPv6-Adressen werden nicht in dezimaler, sondern in hexadezimaler Notation mit Doppelpunkten geschrieben, die die Adresse in acht Blöcke mit einer Länge von jeweils 16 Bit unterteilen. Beispiel einer IPv6-Adresse: 2001:0db8:85a3:08d3:1319:8a2e:0370:7344 Neben der Vergrößerung des Adressraums bringt das neue Protokoll unter anderem: 1. Autokonfiguration (ähnlich DHCP), Mobile IP und automatische Umnummerierung ("Renumbering") 2. Wichtige Sicherheitsfunktionen (IPSec) 3. Technische Vereinfachungen und Verbesserungen (wichtig unter anderem für das Routing) Homepage an der FH Jeder Benutzer mit einem Unix-Account kann an der FH eine eigene (private) Homepage unterhalten. Gemäß den aktuellen Einstellungen am Web-Server der FH ist dazu folgendes notwendig: 1. Ein Unterverzeichnis.public_html unterhalb des Login-Verzeichnisses des Benutzers. 2. Eine Datei Welcome.html in diesem Verzeichnis. Diese Datei enthält den HTML-Text der Homepage. Der Zugriff auf diese Homepage erfolgt mit Hilfe der URL: Eine Datei home2.html im gleichen Verzeichnis hätte dann die URL: ~<user> steht also für den Pfad zum.public_html-verzeichnis des Benutzers. ACHTUNG: Die Schreibweise des Verzeichnisses und der Default-Datei sind zwingend vorgeschrieben! Sie können aber bei anderen Web-Servern anders aussehen. HyperText Markup Language (HTML) HTML ist eine Dokumentbeschreibungssprache. Sie hat die Aufgabe, die logischen Strukturen eines Dokuments zu beschreiben. HTML Dokumente bestehen aus reinem ASCII-Text. Dadurch sind sie plattformunabhängig und können mit jedem Editor bearbeitet werden. HTML Dokumente enthalten Tags. Tags werden in spitzen Klammern geschrieben und beschreiben HTML-Befehle. Ein HTML-Dokument kann außer Text auch Grafiken, Sounds, Videos etc. enthalten. Solche Multimedia-Dateien werden von der HTML-Datei aus referenziert. Außerdem kann es Links (Referenzen) auf andere HTML-Dateien enthalten. Regeln für den Aufbau einer Website: Konzept für den Inhalt und die Struktur. Nur Informationen veröffentlichen, die erlaubt sind. Aufteilung der Informationen in einzelne Web-Seiten. Wahl eines einheitlichen Layouts. Links auf themenähnliche Seiten. Am Ende einer HTML-Seite sollten die Autorangaben und das Datum der letzten Aktualisierung stehen. Zusammengehörige HTML-Files sollten immer im gleichen Verzeichnis stehen. Nicht die neuesten HTML-Befehle verwenden. Dr. W. Jakob Script- Internet

4 Vorgehensweise beim Erstellen einer Website: 1. Das HTML-File in einem lokalen Verzeichnis erstellen. 2. Das File mit einem HTML-Browser (z.b. Netscape) testen. 3. Fehler im HTML-File korrigieren und den Zyklus wiederholen. Wenn das File in Ordnung ist: 4. Das HTML-File in den öffentlichen Plattenbereich des WWW-Servers kopieren. 5. Das öffentliche File mit seiner Verzeigerung testen und validieren. Scripte testet man in einem nichtöffentlichen Bereich des Servers. ACHTUNG: Falsche oder nicht mehr aktuelle Informationen sind schlechter als gar keine Informationen. Aufbau einer HTML-Datei: Eine HTML-Datei besteht grundsätzlich aus zwei Teilen: Header enthält Angaben zu Titel u. ä. (Kopf) Body enthält den eigentlichen Text mit Überschriften, Verweise, Grafikreferenzen u. ä. (Körper) <HTML> <HEAD> <TITLE>Text der Titelleiste</TITLE> </HEAD> <BODY> Überschriften, Text, Verweise, Grafiken usw. </BODY> </HTML> Aufbau eines HTML Befehls: HTML-Befehle, sogenannte Tags werden in spitze Klammern, < und >, eingeschlossen. Zeichen innerhalb dieser Begrenzer (Delimiter) werden vom Browser als Kommando interpretiert; dieser erzeugt daraus eine Darstellung des Dokuments. Es gibt verschiedene syntaktische Ausprägungen von Tags: <tag_name> <tag_name> text </tag_name> <tag_name attribut_name=argument> text </tag_name> (container tag) Die Funktion eines Tags kann durch Attribute näher spezifiziert werden. Groß/Kleinschreibung spielt bei Tags keine Rolle. Tags zur Zeichenformatierung (physikalisch): <B>...</B> bold (fett) <I>...</I> italic (schräg) <U>...</U> underline (unterstrichen) <SUP>...</SUP> superscript (hochgestellter Text) <BLINK>...</BLINK> blinkender Text (nur Netscape) Tags zur Zeichenformatierung (semantisch): <CITE>...</CITE> Zitate, typisch in italic. <CODE>...</CODE> Auszüge von Programm-Code, typisch in monospaced font. <EM>...</EM> Heraushebungen, typisch in italic. <STRONG>...</STRONG> besondere Heraushebungen, typisch in fett. Zeilenumbruch, Absatz und Zentrierung: <BR> Zeilenumbruch (line break). Kein End-Tag! <P>...</P> Absatz (paragraph). Kann als Container-Tag auftreten und muss es bei Attributierung: <P ALIGN=wert>...</P> wert kann die Werte left, center, right annehmen. <center>...</center> Zentrierung des eingeschlossenen Texts oder der eingeschlossenen Bilder, Tabellen usw. Überschriften: Es gibt Überschriften in 6 verschiedenen Größen: <Hn>...</Hn> n kann liegt zwischen 1 und 6, wobei 1 die größte Überschrift ist. Die tatsächlich angezeigte Größe hängt von den Font-Einstellungen des Browsers ab. Die Überschrift wird fett und abgesetzt dargestellt. Verweise, Hyperlinks: Dr. W. Jakob Script- Internet

5 Hyperlinks können zu anderen HTML-Seiten oder zu Objekten mit anderen Zugriffsmethoden (ftp, mail,...) verweisen. Der allgemeine Aufbau ist: <A HREF="verweisziel">Verweistext</A> Das A steht für anchor und HREF ist von hyper reference abgeleitet. Der Text bis zum End-Tag wird klickbar und von den Browsern meist andersfarbig und unterstrichen dargestellt. Beim verweisziel immer auf Groß/Kleinschreibung achten! Das Verweisziel verweisziel kann unter anderem sein: eine Stelle innerhalb der gleichen Datei andere HTML-Datei der gleichen Site (der gleichen URL) allgemeine WWW-Adresse -, FTP- oder Newsgroup-Adresse Datei zum Download Hyperlink innerhalb der gleichen Datei: <A HREF="#ziel">lokaler Verweis innerhalb der Datei</A> Dieser Verweis zielt auf eine Stelle ziel innerhalb der gleichen Datei. Diese wird mit <A NAME="ziel">Einsprungstelle</A> definiert, wobei der eingeschlossene Text Einsprungstelle nicht besonders dargestellt wird. Der Inhalt des Container-Tags darf nicht leer sein! Hyperlink zu einer Datei im gleichen Verzeichnis (und Site): <A HREF="datei.htm">Verweis im gleichen Verzeichnis</A> Die Datei datei.htm wird im gleichen Verzeichnis erwartet, in dem auch die Datei steht, die den Tag enthält. Hyperlink zu einer Datei im anderen Verzeichnis (relativ): Die Zieldatei kann im Verzeichnispfad tiefer, höher oder woanders liegen. Es wird immer relativ zur Position der aktuellen Date adressiert: <A HREF="sub/datei.htm">Verweis nach unten</a> Zieldatei im Unterverzeichnis. <A HREF="sub/sub2/datei.htm">Verweis</A> Zieldatei im Unter-Unterverzeichnis. <A HREF="../datei.htm">Verweis nach oben</a> Zieldatei im übergeordneten Verzeichnis. <A HREF="../../datei.htm">Verweis nach oben</a> Zieldatei im über-übergeordneten Verzeichnis <A HREF="../woanders/datei.htm">Verweis</A> Zieldatei im Unterverzeichnis woanders des übergeordneten Verzeichnisses. Hyperlink innerhalb einer anderen Datei der gleichen Site: Man kann auch auf Anker innerhalb einer anderen Datei verweisen, die selbst auch relativ adressiert werden kann. Der Browser wird versuchen, die Seite ab dieser Position darzustellen. <A HREF="datei.htm#ziel">Verweis</A> <A HREF="sub/datei.htm#ziel">Verweis</A> <A HREF="../datei.htm#ziel">Verweis</A> Die lokale Anker-Adresse ziel wird immer an die Dateiadresse mit einem # angehängt. Verweise zu allgemeinen WWW-Adressen: Man kann auch auf HTML-Files anderer Sites verweisen. Dabei sind auch Verweise auf Anker innerhalb fremder Dateien möglich. <A HREF=" BMW</A> Eine URL ohne Dateiangabe sollte aus Performancegründen immer mit einem / abgeschlossen werden. Verwiesen wird auf die Defaultdatei. <A HREF=" neu.htm">zu Hans Wurst</A> Hier wird auf die Datei neu.htm des Users wuha0011 an der FH-Karlsruhe verwiesen. Verweise zu einem FTP-Server: Unter der Voraussetzung, dass der verwendete Browser FTP unterstützt, kann auf einen ganzen frei zugänglichen Bereich zugegriffen werden: <a href="ftp://ftp.uni-augsburg.de/">ftp-server der Uni Augsburg</a> oder gezielt auf herunterladbare Dateien: <a href="ftp://ftp.uni-koeln.de/pc/mirrors/ winsock-l/ping/ws_ping.zip">ws-ping</a> In diesem Fall bestimmen die Browser-Einstellungen, was mit der Datei geschieht (anzeigen, runterladen, ausführen). Aus Sicherheitsgründen (Viren!) fragen neuere Browserversionen vor einem Laden oder einer Ausführung beim Anwender nach. -Verweis: Dr. W. Jakob Script- Internet

6 Unter der Voraussetzung, dass der verwendete Browser s unterstützt (z.b. Netcsape) oder ein Mail-Programm starten kann (z.b. MS Explorer) kann folgender Verweis ausgeführt werden: <a Man kann die auch an mehrere Adressaten verschicken: <a Wenn statt dem cc ein bcc angegeben wird, wird eine für andere nicht sichtbare Kopie versandt (blind carbon copy). Man kann auch das Betreff vorgeben: <a Download-Verweise: Es gibt keinen eigenen HTML-Befehl zum Dateidownload. Statt dessen reagieren die (meisten) Browser auf Dateitypen, für die es kein Plugin gibt und mit denen der Browser nichts anfangen kann, mit einem Dialog, der dem Benutzer unter anderem den Download anbietet. Dazu gehören z.b. die ZIP-Archiv-Dateien. Man kann die Verarbeitung durch den Browser beeinflussen, indem man den Mime-Type der Datei angibt, z.b.: <a href="billanz.xls" type="application/msexcel">die Billanz als Excel-Datei</a> Eine Liste gültiger Mime-Types kann der Literatur entnommen werden. Einbindung von Grafiken: Innerhalb von HTML-Dokumenten können Bilder (Grafiken) angezeigt werden. Die meisten Browser können GIF und JPG-Dateien anzeigen, für andere Formate sind meist externe Viewer (plug-in) notwendig. Kann eine Referenz auf ein Bild nicht aufgelöst werden, so erscheint häufig ein vordefiniertes Ersatzbild, z.b.: Der allgemeine Befehlsaufbau lautet: <IMG SRC="verweisziel" attribute> Das verweisziel kann eine lokale Bilddatei oder die WWW-Adresse einer Bilddatei sein, wobei für die Dateireferenzierung die gleichen Regeln gelten wie für Hyperlinks. Die optionalen attribute spezifizieren die Grafikeinbindung genauer: Festlegung der Bildgröße: Mit WIDTH=wert bzw. HEIGHT=wert wird die angezeigte Breite bzw. Höhe einer Grafik in Pixel vorgegeben. Der Browser kann damit den Platz für die Grafik reservieren, bevor die Grafikdaten komplett übertragen worden sind. Dies beschleunigt den Seitenaufbau unter Umständen erheblich! <IMG SRC="bild.gif" WIDTH=100 HEIGHT=60> Einbindung eines Bildes im Format 100 x 60 Pixel. Alternativer Text: Mit ALT="text" kann Text vorgegeben werden, der als Bildbeschriftung angezeigt wird. Dies ist vor allem dann wichtig, wenn der Browser aus Performancegründen Grafiken nicht automatisch lädt. Beschriftung einer Grafik: Der Text, der hinter einem IMG-Tag in der gleichen Zeile steht, wird als Bildbeschriftung interpretiert. Mit Hilfe des ALIGN Attributs kann der Text rechts neben der Grafik oben (TOP), mittig (MIDDLE) oder unten (BOTTOM) positioniert werden. Anordnung einer Grafik: Grafiken können rechts (ALIGN=RIGHT) oder links (ALIGN=LEFT) ausgerichtet werden. Der Text fließt dabei um die Grafik. Wenn man dies verhindern will, hilft ein Zeilenumbruch- oder Absatz-Tag. Abstand zwischen Grafik und Umgebung: Bei Fließtext will man meist etwas Abstand zur Grafik einhalten. Dies erlauben die Attribute HSPACE=wert für horizontalen und VSPACE=wert für vertikalen Abstand (Wertangaben in Pixel). Beispiel für die Verwendung von Attributen: <IMG SRC="devil.gif" WIDTH=64 HEIGHT=64 alt="teufel" HSPACE=10 VSPACE=10 ALIGN=RIGHT> Anordnung des Bildes devil.gif, das sich im gleichen Verzeichnis wie die HTML-Datei befindet, am rechten Fensterrand im Format 64x64 mit 10 Pixel Abstand zur Umgebung. Grafik als Hyperlink: Wenn man eine Grafik in eine Hyperlinkanweisung einbindet wird die Grafik klickbar: <A HREF="teufel.html"><IMG SRC="devil.gif"></A> Die Grafik erhält einen blauen Rahmen zum Zeichen, dass sie einen Hyperlink verkörpert. Verweis-Rahmen unterdrücken: Der Verweis-Rahmen einer Grafik ist oft störend und kann mit dem Attribut border=0 unterdrückt werden. Dann ist allerdings die Grafik für den Anwender nur dann als Link erkenntlich, wenn er mit der Maus darüber geht oder wenn die Dr. W. Jakob Script- Internet

7 Grafik von ihrem Inhalt her als Link erkenntlich ist. Mit Werten größer als 0 kann die Rahmendicke bestimmt werden (Default: 2). JPG-Format: Bildtiefe: 8 Bit Graustufen und 24 Bit Echtfarbe (True color). Anwendungsbereich: universelles Austauschformat zwischen fast allen Rechnerplattformen und Anwendungen, geeignet für große Bilddateien. Zur Darstellung von fotorealistischen Bildern im Internet am besten geeignet. Komprimierung: einstellbar, kann je nach Komprimierungsgrad (bis auf ca. 2 % der ursprünglichen Größe) zu erheblichen Qualitätsverlusten führen. Bild nach Komprimierung kontrollieren! Vorteile: hohe Kompressionsraten, wird von fast allen Rechnerplattformen und Programmen unterstützt, kann in fast jeder Bildbearbeitung nachbearbeitet werden. Nachteile: Komprimierungsbedingte Schärfe- u. Farbverluste. GIF-Format: Bildtiefe: 1-8 Bit (2-256 Farben). Anwendungsbereich: universelles Austauschformat zwischen fast allen Rechnerplattformen und Anwendungen, Standardbildformat im Internet. Bestens zur Darstellung von Logos und Zeichnungen mit weniger als 256 Farben im Internet geeignet. Komprimierung: LZW-Komprimierung, je nach Bildtyp und -beschaffenheit, Kompressionsraten zwischen 20 und 95 % ohne Qualitätsverlust. Vorteile: Wird von fast allen Rechnerplattformen und Programmen unterstützt, kein Informationsverlust beim Komprimieren, kann in fast jede Bildbearbeitung eingelesen werden. Nachteile: nur bis zu 256 Farben darstellbar. Verweissensitive Grafiken (Imagemaps): Imagemaps sind Grafiken, die klickbare Bereiche enthalten. Es gibt sie in 2 Ausprägungen: client-sided und server-sided maps. Server-gestützte Imagemaps benötigen ein cgi-script zur Auswertung auf Seiten des Servers. Da sie zunehmend eine geringere Rolle spielen, werden hier nur die client-sided Imagemaps behandelt. Eine Imagemap wird durch 2 Tags festgelegt: Das MAP-Tag ist ein Container-Tag. Es definiert die sensitiven Bereiche im Image und stellt die Hyperlinkverbindungen her. Das zweite Tag ist das bereits bekannte IMG-Tag, aber mit einem neuen Attribut. <MAP NAME="mapname"> <AREA SHAPE=figur COORDS="werte" HREF="verweisziel">... <AREA SHAPE=figur COORDS="werte" HREF="verweisziel"> </MAP> Der mapname ist ein interner Name zur Bezeichnung der MAP-Definition. Die innerhalb des MAP-Tags eingeschlossenen AREA-Tags legen die Geometrie der sensitiven Bereiche und den Hyperlink (HREF) fest, für den die gleichen Regeln gelten wie für das Anchor-Tag. Folgende Geometrien sind möglich, wobei der Koordinatenursprung in der Ecke links oben des Bildes liegt und alles in Pixel angegeben wird: Rechteck: SHAPE=RECT COORDS="x1,y1, x2,y2" x1,y1 sind die Koordinaten der linken oberen Ecke und x2,y2 die der rechten unteren. Polygon: SHAPE=POLYGON COORDS="x1,y1, xn,yn" Die xi,yi definieren einen offenen Polygonzug, der durch Verbinden des 1. und des letzten Punktes geschlossen wird. Kreis: SHAPE=CIRCLE COORDS="x,y,r" Der Kreis wird durch den Mittelpunk (x,y) und den Radius r festgelegt. Das AREA-Tag kann noch das Attribut TITLE="text" enthalten, das aber nur von den neueren Browsern verstanden wird. Es bewirkt die Anzeige des Textes in einem kleinen Fenster, wenn man mit der Maus über den Hotspot fährt. Das IMG-Tag wird um das USEMAP-Attribut erweitert, um aus einer Grafik eine Imagemap zu machen: USEMAP="#mapname" Die Map-Definition kann auch in einer anderen Datei erfolgen, als in derjenigen, in der die Grafik benutzt wird. Damit wird die zentrale Verwaltung von Imagemap-Definitionen unterstützt. Der Usemap-Verweis, der einem Hyperlink auf eine Stelle innerhalb einer Datei entspricht, sieht dann folgendermaßen aus: Dr. W. Jakob Script- Internet

8 USEMAP="meine_maps.html#mapname" Beispiel: <MAP NAME="Testbild"> <AREA SHAPE=RECT COORDS="191,170, 234,218" HREF="deutschland.html"> <AREA SHAPE=POLYGON COORDS="101,219, 153,196, 195,213, 190,225, 187,263, 153,263, 150,272, 116,266, 123,235" HREF="frankreich.html"> <AREA SHAPE=CIRCLE COORDS="36,61, 30" HREF="island.html"> </MAP> <IMG SRC="euro_map.gif" USEMAP="#Testbild" BORDER=0> Farben für den Hintergrund, Text und Verweise: Der BODY-Tag erlaubt durch Attribute die Festlegung des Hintergrunds und der Textfarben. Hintergrundfarbe und bild: Es gibt einige vordefinierte Farben wie black, green, red usw., die meist mit dark und light kombiniert werden können, z.b. darkgreen. Oder man gibt die Farbe im RGB-Format mit jeweils 2-stelligen Hexadezimalzahlen an: <BODY BGCOLOR=#rrggbb> Man kann auch ein Hintergrundbild (nur GIF oder JPG) angeben, das dann über das ganze Fester hinweg wiederholt wird (Tapeteneffekt): <BODY BACKGROUND="verweisziel"> Farben für Text und Verweise: Mann kann dateiweite Farben definieren: für Text (TEXT), gültig für alle Elemente wie Überschriften, normalen Fließtext, Listen, usw. für Verweise zu noch nicht besuchten Stellen (LINK) für Verweise zu bereits besuchten Stellen (VLINK) für Verweise, während sie angeklickt werden (ALINK) <BODY BGCOLOR=# TEXT=#FFCC99 LINK=#FF9966 VLINK=#FF9966 ALINK=#FFFFFF> Da die meisten Sites für die Links die Standardfarben der Browser benutzen, erzeugt eine Änderung dieser Farben beim Benutzer eher Verwirrung als Freude. Dies gilt besonders dann, wenn auch noch irgendwelche nicht-klickbaren Texte unterstrichen werden! Die FONT-Anweisung: Mit Hilfe des (umstrittenen) FONT-Container-Tags können Größe, Schriftart u. Farbe des eingeschlossenen Texts bestimmt werden. Das WWW-Konsortium empfiehlt statt dessen die Benutzung von Style-Sheets. Bis auf die Farbe hängt die Wirkung von den aktuellen Browsereinstellungen (Größe) bzw. der Installation (Schriftarten, Fonts) ab. Der Ersteller einer Seite kann also nicht sicher sein, was seine Fontangaben genau bewirken werden. Die allgemeine Form lautet: <FONT attribute>... </FONT> Die Schriftgröße beeinflusst man mit SIZE=wert zur Vorgabe absoluter Größen basierend auf den Grundeinstellungen des Browsers (1=klein, 7=groß) SIZE=+wert oder SIZE=-wert zur relativen Veränderung ausgehend von der Normalschrift. Die Schriftfarbe beeinflusst man mit color=wert wobei wert eine vordefinierte Farbe oder ein RGB-Wert sein kann. Die Schriftart kann man mit FACE="font1, font2,..., font_n" vorgeben, wobei auf die weiteren Schriftarten zurückgegriffen wird, wenn die jeweils vordere nicht verfügbar ist. Trennlinien: Mit Hilfe von Trennlinien lässt sich eine Seite besser strukturieren. Sie erzeugen einen eigenen Absatz und passen sich der aktuellen Fensterbreite an. Dr. W. Jakob Script- Internet

9 <HR NOSHADE WIDTH=wert SIZE=wert ALIGN=LEFT> NOSHADE schaltet den Schatteneffekt aus. WIDTH beschränkt die Breite auf einen absoluten Wert in Pixel oder auf einen Prozentwert der aktuellen Fenstergröße ("80%"). SIZE gibt die Dicke in Pixel an. Mit Hilfe von ALIGN kann die übliche zentrale Ausrichtung verändert werden. Listen: Es gibt Aufzählungs- und numerierte Listen. Zunächst die allgemeine Form einer numerierten Liste: <OL attribut> <LI>Erster Listeneintrag</LI> <LI>Zweiter Listeneintrag</LI> <LI>Dritter Listeneintrag</LI> </OL> Der Container-Tag OL (ordered list) schließt die Liste ein. Mit Hilfe der Attribute kann die Art der Numerierung und ein Startwert bestimmt werden. Standard ist eine Dezimalaufzählung beginnend mit 1. Geschachtelte Aufzählungen sind in HTML (noch) nicht möglich. Vorgabe der Numerierungsart: TYPE=A Alphabetische Aufzählung (A., B.,...) TYPE=a Alphabetische Aufzählung (a., b.,...) TYPE=I Römische Aufzählung (I., II.,...) TYPE=i Römische Aufzählung (i., ii.,...) Mit Hilfe von START=n kann der Startwert in der OL Anweisung für die gesamte Liste vorgegeben werden, während VALUE=n in einem LI Tag die Numerierung ab diesem Tag ändert. Aufzählungslisten: Aufzählungslisten unterscheiden sich von ihren numerierten Verwandten durch die Ersetzung OL Tags durch ein UL (unordered list). Durch das TYPE Attribut des UL Tags kann das Aufzählungszeichen bestimmt werden. Möglich sind CIRCLE, SQUARE und DISC. Horizontale und vertikale Abstände: <SPACER TYPE=art SIZE=wert> definiert einen horizontalen (TYPE=horizontal), einen vertikalen (TYPE=vertical) oder einen blockförmigen (TYPE=block) Freiraum der Größe wert in Pixel. Tabellen: Tabellen erfüllen in HTML 2 Funktionen: Erstens die Darstellung von Daten in Tabellen und zweitens als Hilfsmittel zur Layoutgestaltung (blinde Tabellen). Blinde Tabellen haben keinen Rand (kein BORDER-Attribut oder BORDER=0). Tabellen können erst angezeigt werden, wenn sie komplett, also inklusive etwaiger Bilder geladen wurden. Allgemeiner Aufbau: Tabellen werden vom TABLE Container-Tag eingeschlossen. Darin enthalten sind Tags für einen Tabellentitel und für Tabellenzeilen und zellen. <TABLE BORDER=5> <CAPTION>Beispieltabelle</CAPTION> <TR> <TH>Kopfzelle: 1. Zeile, 1. Spalte</TH> <TH>Kopfzelle: 1. Zeile, 2. Spalte</TH> <TH>Kopfzelle: 1. Zeile, 3. Spalte</TH> </TR> <TR> <TD>Datenzelle: 2. Zeile, 1. Spalte</TD> <TD>Datenzelle: 2. Zeile, 2. Spalte</TD> <TD>Datenzelle: 2. Zeile, 3. Spalte</TD> </TR> <TR> <TD>Datenzelle: 3. Zeile, 1. Spalte</TD> <TD>Datenzelle: 3. Zeile, 2. Spalte</TD> Dr. W. Jakob Script- Internet

10 <TD>Datenzelle: 3. Zeile, 3. Spalte</TD> </TR> </TABLE> Das <CAPTION>-Tag definiert eine Tabellenüberoder Unterschrift (ALIGN =BOTTOM). Mit dem TR Tag werden die Tabellenzeilen eingeschlossen. Für die Tabellenzellen oder -daten gibt es das TH Tag für Kopfzellen und das TD Tag für Datenzellen. Die Gestaltung einer Tabelle kann durch verschiedene Attribute beeinflusst werden: Attribute des TABLE-Tags: BORDER=wert Dicke des Außenrahmens in Pixel. CELLSPACING=wert Dicke der Gitternetzlinien innerhalb einer Tabelle. CELLPADDING=wert Abstand zwischen Zelleninhalt und Rändern. WIDTH=wert HEIGHT=wert wert kann in Prozent der Fensterbreite bzw. -höhe oder als Absolutwert in Pixel angegeben werden. Die Angaben sind nur wirksam, wenn die Tabelle sonst kleiner dargestellt würde. BGCOLOR=farbe Hintergrundfarbe für die Tabelle. farbe kann wie beim BODY-Tag ein vordefinierter Farbwert oder eine RGB-Angabe sein. BORDERCOLOR=farbe Gibt die Farbe des Tabellenrahmens (Netscape) und der Gitterlinien (MS Explorer) an. BACKGROUND="verweisziel" Festlegung eines Tabellenhintergrunds vergleichbar mit dem BODY-Tag. Kein HTML-Standard! Details werden bei den verschiedenen Browsern (und auch Browser-Versionen!) unterschiedlich interpretiert. Attribute für die Tabellenzelle (TD- und TH Tag): WIDTH=wert Legt die Breite einer Spalte fest und braucht daher nur in der ersten Zeile notiert zu werden. Die Angabe ist nur wirksam, wenn alle Zellen der Spalte kleiner als der vorgegebene Wert sind. wert kann in Pixel oder als Prozentwert der Fensterbreite angegeben werden. Im Konfliktfall hat die Angabe einer Gesamtbreite der Tabelle Vorrang vor den Einzelangaben der Zellen. HEIGHT=wert bestimmt die Zeilenhöhe. Für den wert gelten die gleichen Regeln wie bei WIDTH. NOWRAP Dieses Attribut verhindert den Zeilenumbruch innerhalb einer Zelle. ALIGN=wert Bewirkt eine vertikale (TOP, BOTTOM oder MIDDLE) oder horizontale (RIGHT, LEFT oder CENTER) Ausrichtung gemäß wert. Der Default für Kopfzellen ist CENTER, für Datenzellen LEFT. Um eine ganze Zeile gleich auszurichten kann das Attribut auch im TR-Tag angegeben werden. Zellen verbinden: Man möchte häufig Zellen verbinden, um z.b. eine gemeinsame Überschrift für mehrere Spalten angeben zu können. colspan=wert verbindet entsprechend dem wert mehrere Zellen einer Zeile miteinander. rowspan=wert verbindet entsprechend dem wert mehrere Zellen einer Spalte miteinander. Die Angaben sind jeweils nur wirksam, wenn die Tabelle auch über entsprechend viel Zeilen bzw. Spalten verfügt. Gibt man beide Attribute bei einer Zelle an, wird gleichzeitig zeilen- und spaltenweise verbunden. Beispiel: <table border=5 bordercolor=red bgcolor=yellow cellpadding=4> <tr> <th>zeit</th> <th>montag</th> Dr. W. Jakob Script- Internet

11 <th>dienstag</th> <th>mittwoch</th> </tr> <tr> <td><b>vormittags</b></td> <td rowspan=2>nichts geplant</td> <td colspan=2>einkaufen</td> </tr> <tr> <td><b>nachmittags</b></td> <td>kunden besuchen</td> <td>büroarbeit</td> </tr> </table> In der 2. Tabelle wurde cellspacing auf 2 gesetzt, die Spaltenbreiten mit 100 Pixel für die erste und 135 für die restlichen vorgegeben und die Einkaufen-Zelle zentriert. Frames: Mit Hilfe von Frames kann der Bildschirm in verschiedene frei definierbare Segmente, den Frames, aufgeteilt werden. Einzelne Frames können statisch sein und z.b. ein globales Menü enthalten, während der Inhalt anderer wechseln kann. Beispiel: Die Verwendung von Frames wird durch eine Seite eingeleitet, die den Frameset definiert. Sie unterscheidet sich von normalen Seiten dadurch, dass zwischen HEAD- und BODY-Sektion nun die nachfolgend beschriebene Frameset-Definition folgt. <FRAMESET ROWS="werte" COLS="werte"> </FRAMESET> Die Werteliste enthält die Höhe der Zeilen bzw. die Breite der Spalten in Pixel oder in Prozent des Anzeigenfensters. Als dritte Maßangabe gibt es den *, der soviel wie restlicher Platz bedeutet. Framesets können geschachtelt werden. Die Frameset-Definition für obiges Beispiel lautet: <FRAMESET ROWS="80%,20%"> <FRAMESET COLS="150,*"> <FRAME...> <FRAME...> </FRAMESET> <FRAME...> </FRAMESET> Frame mit den Verweisen Frame mit der WWW-Seite Frame mit dem Seiten-Fuß Die frame-anweisung gibt dem Frame einen Namen und verweist auf die initial zu ladende Seite (normaler HTML- Code): <FRAME SRC="verweisziel" NAME="frame-name"> Der frame-name wird zum Referenzieren eines Frames in der erweiterten Hyperlinkanweisung benötigt: <A HREF="verweisziel" TARGET="frame-name"> Das TARGET-Attribut gibt an, in welchem Frame die zu ladende HTML-Datei verweisziel angezeigt werden soll. Links zum Verlassen eines Framesets (z.b. bei Verweisen auf eine andere Site) können mit vordefinierten Target "_top" erreichen, dass die Framedefinitionen unwirksam werden und wieder das gesamte Fenster zur Verfügung steht. Die Seite mit der Frameset-Definition bestimmt den Titel des gesamten Framesets. Der Body-Teil dieser Seite wird normalerweise nicht angezeigt. Er kommt nur bei Browsern zur Anzeige, die keine Frames verarbeiten können und sollte daher entsprechende Hinweise enthalten. Benutzer von Browsern ohne Frame-Anzeigefähigkeit sehen sonst nämlich schlicht gar nichts! Durch den Einsatz von Frames wachsen die Gestaltungsmöglichkeiten außerordentlich. Frames stellen an das Design von HTML-Seiten aber auch besonders hohe Ansprüche. Nachteile von Frames: ein externer Verweis auf eine Seite innerhalb einer framebasierten Site ist kaum möglich (deep links). ungeeignet für kleinere Bildschirme, z.b. bei Notebooks oder Handhelds. Alternativen: Aufteilung des Bildschirm mit Hilfe von Tabellen. Dr. W. Jakob Script- Internet

12 Eingebettete Frames (iframes) Entities: Wie gibt man in HTML das < oder > -Zeichen an? Da einfach Hinschreiben nicht geht, müssen sie beschrieben werden. Dazu dienen die Entities. Ein Entity wird immer mit einem Ampersand (&) eingeleitet und einem Semikolon (;) abgeschlossen. Dazwischen folgt entweder ein durch ein Nummernzeichen (#) eingeleiteter Uni-Code oder eine Buchstabenfolge. Hier einige Entities: Beschreibung Uni-Code Buchst.code Symbol Ampersand & & & kleiner als < < < größer als > > > Leerzeichen Anführungszeichen " " " kleines ä ä ä ä großes Ä Ä Ä Ä kleines ö ö ö ö großes Ö Ö Ö Ö kleines ü ü ü ü großes Ü Ü Ü Ü scharfes s ß ß ß Besonders die ersten 4 Codes sind von Bedeutung, da die Zeichen <, > und & sonst nicht darstellbar wären. Viele Editoren setzen Umlaute bereits direkt in Unicode um. steht für non blocking space und ergibt ein Leerzeichen, das einen Zeilenwechsel verhindert. Es kann auch dazu benutzt werden, um Abstand in einer Zeile zu schaffen, da Mehrfach-Leerzeichen von den Browsern zu einem zusammengezogen werden. Es gibt noch viele andere Entities für alle möglichen Zeichen, z.b. das für (Copyright-Zeichen), für ein, für x (mal-zeichen), für (Grad), «und» für spitze Anführungszeichen () oder für. Formulare: Ursprünglich sah HTML keine Interaktion mit dem Benutzer vor. Mit Hilfe von Formularen (forms) kann man z.b.: bestimmte, gleichartig strukturierte Auskünfte von Anwendern einholen, Anwendern das Suchen in Datenbanken ermöglichen, Anwendern die Möglichkeit geben, selbst Daten für eine Datenbank beizusteuern, dem Anwender die Möglichkeit individueller Interaktion bieten, etwa um aus einer Produktpalette etwas Bestimmtes zu bestellen. Ein Formular wird durch den FORM Tag eingeschlossen: <FORM ACTION="verweisziel" METHOD="[get post]"> Formular-Tags und beliebige andere HTML-Tags... </FORM> Die Formular-Tags spezifizieren die unterschiedlichen Eingabefelder des durch die restlichen HTML-Tags gestalteten Formulars. Das ACTION-Attribut gibt zusammen mit dem METHOD-Attribut an, wie die eingegebenen Daten auszuwerten sind. Das verweisziel kann entweder ein -Verweis sein oder die Adresse eines cgi-scripts, das die Formulardaten auswertet. Die zu verwendende Methode hängt vom auswertenden Script ab. Bei einem -Verweis ist die Methode immer post. Außerdem sollte man noch das Attribut enctype="text/ plain" angeben, damit die erzeugte halbwegs leserlich formatiert wird. Damit ergibt sich z.b.: <FORM ACTION="mailto:wuha0011@hs-karlsruhe.de" METHOD="post" enctype="text/plain"> Die Übergabe an ein cgi-script (hier ein Perl-Script) könnte folgendermaßen aussehen: <FORM ACTION="/cgi-bin/auswert.pl" METHOD="get"> Außerdem kann die Eingabe mit Hilfe eines Java-Scripts gesteuert und geprüft werden. Es gibt folgende Eingabefelder: Einzeilige Textfelder Checkboxes Eingabefeld für Passwörter Clickbuttons Mehrzeilige Textfelder Absende- und Abbruch-Button Auswahllisten Dateibuttons (Upload) Radiobuttons Versteckte Felder Einzeilige Textfelder: Einzeilige Eingabefelder dienen zur Aufnahme von einem oder wenigen Wörtern oder einer Zahl: <INPUT NAME="name" SIZE=swert MAXLENGTH=mwert> Der INPUT-Tag definiert ein einzeiliges Eingabefeld der durch SIZE vorgegebenen Länge mit einem durch MAXLENGTH vorgegebenen internen Puffer. Das NAME-Attribut ist zwingend. Der Name dient der Identifikation des Eingabefeldes durch die auswertende Software und darf keine Umlaute, Leerzeichen und kaum Sonderzeichen enthalten. Der Vollständigkeit halber kann man noch das Attribut TYPE=TEXT hinzufügen. Der Dr. W. Jakob Script- Internet

13 eingelesene String kann maximal mwert Zeichen enthalten. Wenn die angezeigte Länge swert kleiner als mwert ist, wird automatisch gescrollt. Mit dem VALUE-Attribut kann eine Textvorbelegung angegeben werden. Beispiel: Name: <INPUT TYPE="TEXT" NAME="name" SIZE=25 MAXLENGTH=25> Eingabefeld für Passwörter: Wenn der Wert des TYPE-Attributs statt TEXT PASSWORD lautet, wird der eingegebene Text nicht angezeigt, sondern durch Platzhalter (meist Sternchen) ersetzt. Die so abgefragten Daten werden aber trotzdem im Klartext im Internet übertragen. Geschützt wird also nur vor dem Mitlesen während der Eingabe. Weitergehende Schutzmechanismen, wie Verschlüsselung oder paßwortgeschützte WWW-Seiten, sind zwar möglich, werden aber hier nicht behandelt. Mehrzeilige Textfelder: Mehrzeilige Textfelder werden mit einem Container-Tag definiert: <TEXTAREA NAME="name" COLS=cwert ROWS=rwert>default_text</TEXTAREA> Mit cwert wird die Zeilenlänge und mit rwert die Anzahl der Zeilen festgelegt. Der optionale default_text dient der Vorbelegung des Textfelds. Wenn mehr oder längere Zeilen als vorgegeben eingegeben werden, erscheinen automatisch Scrollbars. Normalerweise erfolgt kein automatischer Zeilenumbruch, was auf viele Anwender irritierend wirkt. Man kann ihn aber mit dem WRAP- Attribut erzwingen. Es kann den Wert VIRTUAL für einen nur angezeigten, aber nicht übertragenen oder PHYSICAL für einen angezeigten und übertragenen Zeilenumbruch annehmen. Auswahllisten: Mit Auswahllisten können dem Benutzer feste Werte zur Auswahl angeboten werden, wobei der Text des selektierten Eintrags übertragen wird: <SELECT NAME="name" SIZE=wert> <OPTION> Text 1... <OPTION> Text n </SELECT> Mit SIZE wird die Anzahl der angezeigten Einträge festgelegt. Mit dem Wert 1 definiert man eine Drop-Down-Liste. Die Listenbreite ergibt sich aus dem längsten anzuzeigenden Text. Das OPTION-Tag kann die Attribute SELECTED für eine Vorauswahl und VALUE="wert" enthalten. Mit letzterem ist das Auswahlergebnis der Attributwert anstelle des angezeigten Texts. Außerdem kann durch das MULTIPLE-Attribut im SELECT-Tag eine Mehrfachauswahl erlaubt werden. Da dies nicht ohne weiteres erkennbar ist, muss man den Anwender darauf hinweisen. Die Mehrfachselektion erfolgt durch gleichzeitiges Drücken der Strg-Taste und Anklicken. Beispiel: Als Beispiel soll eine Pizza-Bestellung per Drop-Down-Liste und mit Pizzanummern statt namen angeboten werden. Durch Klicken auf die kleine Schaltfläche rechts neben dem Auswahlfeld klappt die Liste herunter und man kann mit der Maus einen Eintrag selektieren. Radiobuttons: Radiobuttons bestehen aus einer Gruppe von Buttons, aus der der Anwender genau einen markieren kann. Der Wert des markierten Buttons wird beim Absenden des Formulars übertragen. Radiobuttons sind INPUT-Tags vom Typ RADIO: <INPUT TYPE=RADIO NAME="name" VALUE="wert"> Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe. Der wert wird bei Auswahl als Ergebnis übertragen Checkboxes: Checkboxes sind bis auf den Typ genauso wie Radiobuttons aufgebaut und unterscheiden sich dadurch, dass der Benutzer auch mehrere auswählen kann: <INPUT TYPE=CHECKBOX NAME="name" VALUE="wert"> Dr. W. Jakob Script- Internet

14 Mit Hilfe des CHECKED-Attributs kann man bei Radiobuttons und Checkboxes einen Wert vorselektieren. Als Beispiel soll ein Formular dienen, dessen Ergebnis per versandt wird: Ergebnis-Mail: Clickbuttons: Mit dem INPUT-Tag kann man auch anklickbare Buttons definieren, die keine spezielle Bedeutung haben. Sinnvoll sind solche frei definierbaren Buttons nur in Verbindung mit Scriptsprachen wie JavaScript. Zum Beispiel: <INPUT TYPE=BUTTON VALUE="Zurück" onclick="history.back()"> Es wird ein mit Zurück beschrifteter Button ausgegeben, der mit dem JavaScript-Eventhandler onclick verbunden ist und den angegebenen JavaScript-Befehl ausführt. Die Wirkung entspricht dem Back-Button des Browsers. Diese Variante, Buttons zu definieren, wird auch von älteren Browsern verstanden. In HTML 4.0 gibt es einen neuen BUTTON-Tag, der auch die Beschriftung mit einem Bild erlaubt. Allerdings wird er derzeit nur vom MS Explorer ab Version 4.x interpretiert. Absende- und Abbruch-Button: Es gibt zwei Standard-Buttons, einen zum Absenden und einen zum Rücksetzen von Formularen: <INPUT TYPE=SUBMIT VALUE="Absenden"> } Mit dem VALUE-Tag wird die <INPUT TYPE=RESET VALUE="Abbrechen"> } Button-Beschriftung angegeben. Dateibuttons (Upload): Dateibuttons erlauben es dem Anwender, eine Datei von seinem lokalen Rechner zusammen mit dem Formular zu übertragen. Mit Hilfe eines entsprechenden cgi-scripts kann dem Anwender damit das Uploaden (Hochladen) von Dateien auf den Server-Rechner ermöglicht werden. Beispiel: <FORM ACTION="/cgi-bin/upload.pl" METHOD=POST ENCTYPE="multipart/form-data"> Eine Text- oder HTML-Datei:<BR> <INPUT TYPE=FILE SIZE=30 MAXLENGTH= NAME="Datei" ACCEPT="text/*"> <BR><BR> <INPUT TYPE=SUBMIT VALUE="Absenden"> </FORM> Das ENCTYPE-Attribut ist zwingend notwendig. Die SIZE gibt die Größe des Eingabefeldes an. Mit MAXLENGTH wird die maximale Dateigröße in Bytes vorgegeben; fehlt dieses Attribut, kann die Datei beliebig groß sein. Das ACCEPT-Attribut legt mit dem Mime-Type den Dateityp fest (hier *.txt, *.htm und *.html). Dr. W. Jakob Script- Internet

15 Der vom Input-Tag vom Type File automatisch erzeugte Browse...-Button öffnet ein Fenster zur Datei-Auswahl. Versteckte Felder: Mit versteckten Feldern können Daten übertragen werden, die dem Benutzer nicht angezeigt werden, aber für die weitere Verarbeitung von Nutzen sind, wie beispielsweise zusätzliche Zeilen in einem -Formular. Da ein JavaScript Formularfelder problemlos auslesen und deren Werte auch ändern kann, ist es auf diese Weise bequem möglich, interne Daten zu speichern. Oder man erfasst unbemerkt zusätzliche Daten, wie z.b. die IP-Adresse oder den Typ des verwendeten Browser des Benutzers: <FORM METHOD=POST ENCTYPE="text/plain">... <INPUT TYPE=hidden NAME="Browser" VALUE=""> <INPUT TYPE=SUBMIT VALUE="Absenden"> </FORM> <SCRIPT LANGUAGE="JavaScript"> document.feedback.browser.value = navigator.useragent; </SCRIPT> Mit TYPE=hidden wird ein verstecktes Feld definiert. Das versteckte Feld Browser erhält seinen Wert erst durch das nach dem Formular definierte Java- Script: Ausblick: Die meisten Tags wurden nur mit ihren wichtigeren Funktionen vorgestellt, insbesondere die Frames wurden nur knapp behandelt. Folgende Themen wurden weggelassen: Multimedia-Objekte wie Sounds, Videos, usw. Style-Sheets JavaScript Dynamisches HTML cgi/perl Unterschiede zwischen MS-Explorer und Netscape. Im wesentlichen wird die hier vorgestellte Funktionalität von den wichtigsten Browsern, nämlich MS-Explorer ab Version 3 und Netscape ab Version 4 verstanden. cgi/perl-script cgi (Common Gateway Interface) erlaubt es einem WWW-Browser, über einen WWW-Server Programme auszuführen. Solche Programme (oder Scripts) können beispielsweise Formulareingaben aus HTML-Dateien verarbeiten, auf dem Server-Rechner Daten speichern und dort gespeicherte Daten auslesen. Dadurch werden WWW-Seiten zu Oberflächen für "Anwendungen", beispielsweise für Online-Warenbestellung oder zum Abfragen von Datenbanken. Die Scripte können in unterschiedlichen Sprachen geschrieben sein, z.b. Unix-Shell-Scripte, Perl oder in konventionellen Programmiersprachen wie z.b. C oder Pascal. Der Vorteil der Scriptsprachen ist ihre Plattform-Unabhängigkeit. cgi- Scripte müssen in einem besonderen Verzeichnis, z.b. cgi-bin (FH) oder cgi-local liegen. Sie können als URL angegeben und damit aufgerufen werden. Als Beispiel dient ein Perl-Script, das eine HTML-Seite dynamisch erzeugt: #!/opt/perl5/bin/perl w use CGI qw/:standard/; my $end_nr = 5; my $tst_str = ""; print "Content-type: text/html\n\n"; print "<html>\n"; print " <head>\n"; print " <title>test-script</title>\n"; print " </head>\n"; print " <body>\n"; print " <center><h1>test-script</h1></center>\n"; # Schleife for ($ctr_nr = 1; $ctr_nr <= $end_nr; $ctr_nr++) { $tst_str=sprintf(" Dies ist die %2d.Zeile.<br>", $ctr_nr); print "$tst_str\n"; } print " <br><b>fertig!</b>\n"; print " </body>\n"; print "</html>\n"; Dr. W. Jakob Script- Internet

16 Es wird aufgerufen mit Man kann einem Script auch Parameter mitgeben. Wenn man im Beispiel die Vorbelegung von end_nr durch my $end_nr = $query->param("anz"); ersetzt, kann man die Variable als Parameter beim Aufruf mitgeben, indem man an den Scriptnamen den Parameter getrennt durch ein? anhängt: Grafische Informationssysteme (GIS) Aus der Vielzahl von Internetanwendungen mit kartografischem Bezug werden hier einige Stadtpläne und Routenplaner aufgeführt. Außerdem ein Online-Atlas von Taiwan, erstellt von einem Diplomanden der FH. Stadtpläne: US-Karten: Routenplaner: Taiwan-Atlas: Protokolle im Internet Protokolle sind Konventionen, die den Datenaustausch zwischen Rechnern regeln. Es gibt viele Protokolle, um den unterschiedlichen Anforderungen eines heterogenen Netzwerkes gerecht werden zu können. Wichtige Anforderungen an Internet-Protokolle: Unabhängigkeit von der Netzwerk-Hardware: Unterschiedliche Übertragungsmedien (Kupferkabel, Lichtleiter,...) u. Netzwerktypen (Ethernet, Token Ring,...) Erreichbarkeit aller Rechner weltweit Fehlererkennung und -korrektur Logische Adressierung: Logische Rechneradressen (Domain-Adressen) statt hardwareorientierte Adressierung (Rechneraustausch!) Versendung von Datenstücken (Pakete) Auf- und Abbau von Verbindungen Skalierbarkeit: Das Protokoll muß wachsender Leistungsfähigkeit der Hardware gerecht werden können und ein gesteigertes Datenvolumen verkraften können. Effizienz: Der Kommunikations-Overhead muss möglichst gering sein. Konsequenz: Mehrere Protokolle mit genau abgegrenzten Zuständigkeiten entsprechend einem Schichtenmodell. Schichtenmodell Der Sinn der Schichtung ist die Abstraktion und die Trennung von Funktionalitäten. So kann es beispielsweise der Host-to- Host-Schicht egal sein, wie das lokale Netzwerk realisiert ist. Tatsächlich kommt im TCP-Protokoll darüber auch nichts vor. Der Vorteil liegt in der Austauschbarkeit der verwendeten Standards und damit der benutzten Technik innerhalb einer Schicht. Allgemein gilt: Je tiefer die Schicht, desto hardware-näher. Die Netzwerke übertragen kleine Datenpakete, sog. Frames. Diese bestehen aus einem Kopf mit Adressangaben und einem Datenteil. Letzterer wird von den darüberliegenden Protokollen genutzt um wiederum Kopf und Datenteile unterzubringen. Man spricht von mehrfach gekapselter Datenübertragung. Die Internet-Schicht (IP-Paket) ist für das Routing, das gezielte Weiterleiten von Paketen entsprechend dem aktuellen Netzzustand verantwortlich. Die drei wichtigsten Protokolle dazu sind: Internet-Protocol (IP): Datentransfer und Routing. Address Resolution Protocol (APR): Broadcasting zur Adressauflösung und zum Test der Erreichbarkeit. Internet Control Message Protocol (ICMP): Fehlerbehandlung Dr. W. Jakob Script- Internet

17 Auf der Host-to-Host-Ebene spielen 2 Protokolle eine Rolle: User Datagram Protocol (UDP) Ungesichertes Protokoll, das die Internet-Schicht um das Port-Konzept erweitert. Ports sind logische Unteradressen in einem Rechner zur Nutzung unterschiedlicher Dienste in einem Rechner. UDP kann als ungesicheres Protokoll nur in lokalen Netzen benutzt werden. Transmission Control Protocol (TCP) Gesichertes Protokoll mit Port-Adressierung (vgl. UDP) und dem Konzept der Verbindung. Eine Verbindung ist festgelegt durch die IP-Adresse und den Port von Absender und Empfänger. Eine Verbindung wird auf und nach erfolgter Datenübertragung wieder abgebaut. Das TCP sorgt dafür, dass die Daten entweder gegebenenfalls unter Mehrfachversendung korrekt beim Empfänger ankommen oder dass der Empfänger durch eine Fehlermeldung benachrichtigt wird. Mehrere Clients auf einem oder mehreren Rechnern können unterschiedliche Dienste und damit verschiedene Ports von unterschiedlichen Servern ansprechen. Die angebotenen Dienste gehören zur Anwendungs-Schicht. Die zugehörigen Server laufen permanent und warten auf Anfragen der Clients. Sie werden auch als Demon bezeichnet. HyperText Transfer Protocol (HTTP) HTTP erlaubt einen typ- und formatunabhängigen Datentransfer, wobei die Daten Verweise auf andere Daten enthalten können. Damit ist HTTP ein generisches und objektorientiertes Protokoll. Denkbare Datentypen: Texte, Musik, Bilder, Bildsequenzen,... in Formaten wie jpg, gif, wav,... HTTP baut auf TCP/IP auf. Nach dem Verbindungsaufbau schickt der Client eine Anfrage (Request) an den Server, die dieser entweder mit den gewünschten Daten oder mit einer Fehlermeldung beantwortet. Danach wird die Verbindung wieder abgebaut. Beide Seiten müssen in der Lage sein, während einer Verbindung auftretende Fehler zu behandeln. Reagiert z.b. eine Seite nicht mehr, wird die Verbindung nach einer voreingestellten Zeit terminiert (time out). Da die Verbindung stets geschlossen wird, nachdem auf einen Request geantwortet wurde, bezeichnet man HTTP als ein zustandsloses Protokoll. Das Gegenteil, ein zustandsorientiertes Protokoll, wie z.b. TCP/IP oder FTP, unterhält weiterhin eine Verbindung bis z.b. der Client diese ausdrücklich beendet. Aufbau einer Request: Request-Line General-Header Request-Header Entity-Header CRLF Entity-Body Der Request-Line enthält im wesentlichen die Zugriffsmethode und die URL. Die verschiedenen Header Einträge sind optional und spezifizieren den Request näher. Wichtig ist die obligatorische Leerzeile (CRLF), die den Kopf vom Rumpf (Entity-Body) trennt und bei fehlendem Rumpf das Ende des Kopfes anzeigt. Die Antwort (Response) auf einen Request hat einen ähnlichen Aufbau: Status-Line General-Header Response-Header Entity-Header CRLF Entity-Body Die Status-Line teilt dem Client das Ergebnis des Requests mit. Wichtige Request-Methoden: GET: Anforderung eines Dokuments. Der Datenteil kann z.b. die Parameter eines Programmaufrufs beinhalten, wenn die Anforderung den Start eines Programms verlangt. HEAD: Wie GET, es wird jedoch nur der Kopf unter Weglassung der Daten als Response zurückgeschickt. Dient u.a. der Überprüfung der Gültigkeit von Links. POST: Übergabe der Daten an die URL, z.b. Daten in eine Newsgroup. PUT: Abspeicherung der Daten unter der angegebenen URL, was entsprechende Rechte des Client voraussetzt. DELETE: Löschung der Daten der angegebenen URL, was ebenfalls entsprechende Rechte des Client voraussetzt. In den Headern können u.a. Informationen zum Zeichensatz, zur Sprache, zur Dekodierung komprimierter Daten, zur Aktualität der Daten, zur Autorisierung usw. enthalten sein. Browser-Funktionen Es gibt eine Vielzahl von Browsern, mit denen man Informationen im Netz suchen und abrufen kann. Gemäß einer aktuellen Statistik liegt der MS Explorer bei über 60 % und Netscape/Mozilla bei einem Drittel, diese beiden Programme decken also ca. 95% der Browser ab. Der Browser ruft als Client die Informationen eines Servers ab. Dr. W. Jakob Script- Internet

18 Grundfunktionen: Navigation im WWW Unterstützung durch History (Liste zuletzt besuchter Websites) und der Aufzeichnung der aktuell besuchten Seiten (Vor- und Rückwärtsfunktion) Bookmarks/Hotlist Strukturierbares Verzeichnis von Websites, das der Benutzer anlegt und pflegt. Liste der (editierbaren) Titel der gespeicherten URLs. Speichern und Drucken Der Quelltext der Seite und darin enthaltene Bilder können (separat) gespeichert werden. Das Druckbild einer Seite kann von der Bildschirmanzeige abweichen. Cache-Speicher Speicherung der zuletzt empfangenen Daten im RAM oder auf Platte, um erneutes Laden zu vermeiden. Das erleichtert die Navigation, kann aber auch dazu führen, dass Updates beim Server nicht (gleich) dargestellt werden. Lösung: Reload- / Aktualisieren-Funktion (Shift/Reload bei Netscape/Mozilla: Komplettes Neuladen inkl. Bilder). Externe Viewer / Plug-Ins Damit der Browser nicht alle Dateiformate für Bilder, Sounds, Videos usw beherrschen muß kann die Darstellung durch sog. Plug-Ins (externe Hilfsprogramme) erfolgen. Deren Download wird auf manchen Websites angeboten (Vorsicht vor Viren!). Weitere Funktionen: Suchfunktion Textsuche innerhalb der aktuell angezeigten Seite. Unterstützung weiterer Dienste Viele Browser (z.b. Netscape) unterstützen andere Dienste wie z.b. FTP, , Netnews, Telnet, Gopher,... Veränderung der Darstellung Fonttyp und größe können eingestellt werden. Änderungen können die Darstellung einer Seite unter Umständen erheblich verändern. Generell hängt die Darstellung von der gewählten Fenstergröße, den Fonteinstellungen und der Programmierung der Seite ab. Seitenerstellung Manche Browser (z.b. Netscape) unterstützen die Erstellung von Internet-Seiten durch spezielle HTML-Editoren. Browser (Mozilla, Firefox, MS-Internet-Explorer) und -Tools (Mozilla, Thunderbird, MS-Outlook) sind konfigurierbar. Einige Einstellmöglichkeiten, die für die Sicherheit, gegen Spam und gegen Pop-Ups wichtig sind, werden am Beispiel vom Mozilla vorgestellt (Menü Edit > Preferences): Scripte in Mails sind höchst verdächtig (Würmer, Trojaner)!Siehe A. JavaScript sollte man nur bei vertrauenswürdigen Websites einschalten und nur, wenn es benötigt wird, siehe B. Ähnliches gilt für Java. Spam: Einer der Tricks, um eine -Adresse zu validieren besteht darin, einen Link auf ein möglicherweise unsichtbares Bild mitzuschicken. Durch das Laden des Bildes wird die -Adresse automatisch validiert. Siehe C. Gegen lästige Pop-Ups hilft ein Pop- Up-Blocker. Für manche Websites (z.b. Banken, Online-Shops) muss man sie aber zulassen können. Weitere wichtige Themen: Cookies, Master Password für gespeicherte Password-Zugänge, Verschlüsselung (SSL),... Dr. W. Jakob Script- Internet