ETH Logo

HTML Teil 2

[ Teil 1 | Index ]


Imagemaps

Bilder als grafische Benutzeroberfläche

Ziel: verschiedene Stellen einer Grafik unterscheiden.

Technik: drei verschiedene Implementationen werden angeboten.

Imagemap-Definition Bilddatei
Client-seitig Tag: <IMG SRC=_ USEMAP="name"> Tag: <MAP NAME="name">
Server-seitig Tag: <IMG SRC=_ ISMAP> Beim Server
Client-seitig mit Server Support Tag: <IMG SRC=_ USEMAP="name" ISMAP> Tag: <MAP NAME="name"> und beim Server

Attribute SHAPE und COORD:

Beispiele von Imagemap-Varianten die gegenwärtig im Web unterstützt werden. Die Imagemaps, Map-Dateien und Host Elementen wurden mit Web Hotspots 2.0 erstellt.

  
Client-seitig. Die Imagemap ist im Dokument eingebettet. Mausklicks werden durch den Browser verarbeitet ohne Interaktion mit dem Server. Reduziert die Serverbelastung und bietet dem Leser einen bessere Feedback. Nicht von allen Browsern unterstützt.

Server-seitig. Die standard Imagemap. Mausklicks werden durch Interaktionen mit dem Server verarbeitet.

Client-seitig mit Server-seitigem Support. Diese Kombination unterstützt beide Browser-Arten.

On-line Beispiel.


Client-Server Kommunikation

Einfaches CGI-Programm in Perl

Kommunikationsablauf zwischen Client und Server

Request-Mitteilung Response-Mitteilung CGI Umgebungsvariablen: Werte vor dem Start eines Skripts.
CGI Tips
Script Archiv


Formulare

Beispiel:

Zimmerreservation
Ihr Name: Ihre Adresse: PIN

Zimmerausstattung: WC Dusche Minibar

Hotelklasse: ** *** ****



Mit Formular bestellen - Zwei Beispiele

  1. Einfacher Grafik-Betrachter

  2. Beispiel eines generalisierten Formular-Parsers für Formulare mit beliebig viel Feldern. Eine Anzahl Felder sind reserviert. Dieser Parser kann Eingabe-Daten von unterschiedlichen Formularen verarbeiten. Der Benutzer erhält eine Bestätigung und eine e-Mail Meldung wird an einer zentralen Adresse (testmail@inf.ethz.ch) geschickt.

An Instantaneous Introduction to HTML Forms

The common Gateway Interface


Verwendung von Tabellen


Framesets

Attribute:
Frameset-Beispiel

Netscape-Hilfe


Dokument Meta-Daten

innerhalb der HEAD-Tags.

Automatisches Neuladen von Dokument - Refresh

Client-Pull Beispiel


Aktive Objekte


Zusammenfassung

HTML Element Art der Nutzung URL Dynamischer Prozess
Textauszeichnung Passiv
BildIMG SRC=
Link Anfordern A HREF=
Bild als LinkA HREF=
Sensitives
Bild

Imagemap

USEMAP AREA HREF= in MAP Browser
ISMAPA HREF=CGI + Map-Datei
USEMAP + ISMAP Browser abhängig
Tabelle
Client-Server Kommunikation
Formular Benutzer- Spezifikation FORM ACTION=
METHOD=
CGI
FramesetFRAME SRC=
Dokument Meta-Daten


Werkzeuge

Browser Information
Netscape
MS Internet Explorer http://www.microsoft.de/ie
Mosaic
Lynx
Arena

HTML-Editor Information Kommentar
MS Notepad
MS Internet Assistant http://www.microsoft.com/switzerland Freeware - D
MS Frontpage
WebEdit Pro http://207.86.158.118 D
HotMetal Pro http://www.softquad.de/softquad//
GNNpress http://www.tools.gnn.com/beta/press/1.2/index.html Freeware

Grafik-Editor Paint Shop Pro Web Hotspots GIF Construction SET 32

CGI-Sprache CShell Perl tcl


Ende