1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für...

Post on 05-Apr-2015

107 views 3 download

transcript

1

Kurs HTML: Erstellen von Web-Seiten

Ein Kurs für die Praxis …

… an der Hochschule für Technik und Architektur Biel

werner.hett@hta-bi.bfh.ch Frühling 2000

2

Uebersicht über den Kursinhalt

Grundbegriffe Internet und Web Das Zusammenspiel von Browser und Server Einfache Textdokumente in HTML Verweise und Marken Bilder und Piktogramme Tabellen und Frames Graphik-Formate Aktive Bilder Formulare

3

Grundbegriffe Internet: Struktur und Adressen

Das Internet hat eine Struktur, wie das weltweite Telefonnetz Jeder Rechner hat eine IP-Nummer:

– Beispiel: 147.87.65.23

Rechner haben einen Namen (Internet-Adresse)– Beispiel: dorado.hta-bi.bfh.ch oder www.bfh.ch

Der Namensraum ist hierarchisch gegliedert.– Toplevel domains: ch de fr com edu org net ….

Ein weltweiter Auskunftdienst stellt die Beziehung zwischen den Namen und IP-Nummern her. DNS = Domain Name System

4

Grundbegriffe Internet: Protokolle

5

Das Client/Server-Paradigma

Ein Client ist ein Programm, das ein anderes Programm (den Server), kontaktiert, um von diesem Daten zu erhalten.– Bsp: Netscape Navigator, Internet Explorer, ftp-Client, Mail-Programm

Ein Server ist ein Programm, das jederzeit bereit ist, auf Anfragen von Clients zu reagieren und entsprechende Antworten zu geben.– Bsp: Web-Server, ftp-Server, Domain Name Server, Mail-Server, File-Server

Client und Server laufen in der Regel auf verschiedenen Rechnern Clients sind aktiv, sie starten Anfragen meist auf Veranlassung

eines Benutzers. Sie müssen nicht immer verfügbar sein. Server dagegen sind passiv (warten auf Anfragen), müssen aber

immer verfügbar, d.h. permanent am Internet sein und laufen.

6

Client Server

Gateway-Programme

File-System:HTML Files

CGI

Datenbank

HelperApplications

http response

http request

Das Zusammenspiel von Web-Client und -Server

File ManagerEditor

Browser

7

Geschichte von HTML

WWW: Tim Berners-Lee und Robert Cailliau (CERN, 1991) HTML: erste Sprachgeneration HTML 2, 3, 4: immer besser (?) XHTML 1.0: W3C Recommendation 26 January 2000

Referenz: http://www.w3.org/

SGML: die Sprachenfamilie von HTML Netscape “Enhancements” und Microsoft “Extensions” XML: eXtensible Markup Language CSS: Cascading Style Sheets JavaScript, VBScript: dynaische HTML-Seiten Java: Programmiersprache

8

Einfache Textdokumente in HTML

HTML - HyperText Markup Language Ein HTML-Dokument ist in der Regel aus mehreren Teilen

zusammengesetzt: Bilder und andere, in den Text eingestreute Elemente kommen aus separaten Files.

HTML ist keine Layout-Sprache, sondern eine logische oder semantische Markierungssprache. Das Erscheinungsbild einer Seite hängt sehr stark von den Einstellungen des Browsers ab, die vom Benützer weitgehend frei gewählt werden können: Schriftgrösse und Schriftart (Font), Fensterdimensionen und Bildschirmauflösung, Farbpalette.

Beispiel: http://www.hta-bi.bfh.ch/~hew/webkueche/welcome.html

9

Ein Beispiel: Die Web-Küche

/home/hew/www

...

...

rezepte

webkueche

welcome.html

index.html

rezept.html bild.html

...

bild.jpg

...

dessert

ragout

H:\

rezept.html bild.html bild.jpg

pizza

wkurs

...

http://www.hta-bi.bfh.ch/~hew/

http://www.hta-bi.bfh.ch/~user/

welcome.html

10

HTML-Werkzeuge und Hilfsmittel

Browser: View -> Page Source und View -> Page Info HTML-Editoren

– WYSIWYG vs. non-WYSIWYG

– FrontPage, Netscape Composer, Emacs, HotMetal, HotDog, Page Mill, GoLive, UltraEdit, Arachnophilia, HTML Kit, u.v.a.

– http://desktoppublishing.com/webparadise.html

Converter von und nach HTML– http://www.w3.org/Tools/Filters.html

Es fehlen aber immer noch sehr gute Werkzeuge und Hilfsmittel Nicht kaufen, was man anderswo besser und umsonst erhält!

11

HTML-Elemente und Syntax

HTML-Elemente und TagsBsp: <h3>Dies ist ein Titel</h3>

Leere HTML-Elemente haben kein End-tagBsp: <hr> neu in XHTML: <hr />

Tags können Attribute (mit oder ohne Wert) habenBsp: <img src=“bild.gif” ismap>XHTML: <img src=“bild.gif” ismap=“ismap” />

Gross- und Kleinschreibung– für Elementnamen und Attributnamen irrelevant

– für Attributwerte relevant

– in XHTML: alles klein

12

HTML-Elemente und Syntax (2)

Kommentare: <!-- -->Bsp: <!-- Kommentartext -->

Wortzwischenraum (white space): space, tab und new-line werden nicht unterschieden

Fliesstext; Zeilenumbruch:– <br> neu: <br /> erzwingt neue Zeile– <nobr> … </nobr> verbietet Zeilenumbruch

– <wbr /> wenn nötig Umbruch

13

Grundstruktur eines HTML-Dokuments

<!DOCTYPE HTML .. .. .. .. .. ..><html><head><title> .. .. .. </title> Fenstertitel .. .. </head><body> .. .. Inhalt des Dokuments</body></html>

14

Hintergrund

<body bgcolor=“#0000ff” text=“#00c0c0” link=“#ffff00” vlink=“#00eed0” alink=“#ff0000”>

Farben: “#rrggbb” jeder Farbcode zwischen 00 und ff (hexadezimal)

Es gibt auch englische Farbbezeichner: color=“red”

<body background=“muster.gif” bgcolor=“#ffccff”>

15

Ueberschriften und horiontale Trennlinien

<h1>Grosser Titel</h1><h2>Nicht ganz so grosser Titel</h2>.. .. ..<h6>Winziger Titel</h6>

<h1 align=left>Titeltext</h1><h1 align=center>Titeltext</h1><h1 align=right>Titeltext</h1>

<hr> horizontale Linie neu: <hr /> <hr noshade> neu: <hr noshade=“noshade” />

16

Geordnete (nummerierte) Liste

<ol> <li>Analyse</li> <li>Design</li> <li>Implementation</li> </ol>

<ol type=A> A, B, C, ..<ol type=a> a, b, c, ..<ol type=I> I, II, III, ..<ol type=5> 5, 6, 7, ..

17

Ungeordnete Listen

<ul> <li>Aepfel</li> <li>Birnen</li> <li>Nüsse</li> </ul>

<ul type=“square”><ul type=“circle”>

18

Definitionslisten (Glossare)

<dl> <dt>Blauer Burgunder</dt> <dd>Eine sehr alte Rotweinsorte, die von der von Plinius beschriebenen Rebe aus dem Gebiet südlich von Lyon stammen könnte.</dd> <dt>Merlot</dt> <dd>Die Sorte stammt aus der Region von Bordeaux, wo sie, zusammen mit Cabernet- Sauvignon und anderen die weltbekannten Rotweine liefert.</dd></dl>

19

Textauszeichnung

Logische (semantische) Auszeichnungen<strong> .. .. .. </strong> wichtig<em> .. .. .. .. </em> hervorgehoben<cite> .. .. .. .. </cite> Zitatund viele andere …

Physische Auszeichnungen<b> .. .. .. ..</b> fett<i> .. .. .. ..</i> kursiv<u> .. .. .. ..</u> unterstrichen<big> .. .. .. </big> gross<small> .. .. .. </small> kleinund noch ein paar andere (einige davon nicht normiert)

20

Textgrösse und Schriftart

<tt> .. .. ..</tt> Blocksatz

<pre> .. .. Blocksatz vorformatiert</pre>

<font size=“5”> .. .. ..</font> 1 bis 7<font size=“+1”> .. .. .</font><basefont size=“5”> .. .. </basefont><font color=“#ff0000”> .. .. </font><font face=“arial,helvetica”> .. .. ..</font>

<font> ist ziemlich schlecht normiert: Stylesheets verwenden!

21

Spezialzeichen

&lt; < &gt; >&amp; & &quot; “

&auml; ä &ocirc; ô&eacute; é &ntilde; ñ&Uuml; Ü &ccedil; ç

&#E7; numerischer ASCII-Wert

&smile; Piktogramm (noch nicht normiert)

… und viele andere!

22

Textabsätze und Ausrichtung

Anfang eines neuen Absatzes:<p> neuer Absatz<p align=“left”> neuer Absatz links angeschlagen<p align=“center”> neuer Absatz zentriert

<p align=“right”> neuer Absatz rechts angeschlagen

End-tag </p> fakultativ XHTML: <p> ……… </p> End-tag obligatorisch

Mehrere Elemente zentrieren:<div align=“center”> .. .. .. </div>

23

Verweise und Marken: Uebersicht

Marken in Dokumenten Verweise auf andere Dokumente URL: Uniform Resource Locator

– global und lokale URL

– absolute und relative lokale URL

Bilder in HTML-Dokumente einbinden Text um Bilder herumfliessen lassen Bilder als Verweise

24

Marken und Links in HTML-Dokumenten

Marke setzen:<a name=“Marke”></a>

Verweis auf Marke im gleichen HTML-Dokument:<a href=“#Marke”>Verweis-Text</a>

Verweis auf Marke in einem anderen HTML-Dokument:<a href=“/Path/File.html#Marke”>Verweis-Text</a>

Allgemeine Form von Verweisen:

<a href=”URL”>Verweis-Text</a>

25

Typen von URL (1)

lokal = auf dem gleichen Server global = auf einem anderen Server

relative lokale URL sind Filenamen ohne führenden Slash (/): bild-klein.gif

../dessert/ananas.html

absolute lokale URL beginnen mit einem führenden Slash (/):/pictures/ananas.gif/~user/wkurs/pizza/rezept.html

globale URL beginnen mit einem Protokoll (z.B. http:)http://host.inst.ch/bilder/bananen.jpghttp://www.hta-bi.bfh.ch/~hew/webkueche/

welcome.html

26

Typen von URL (2)

Allgemeines URL-Schema:Protokoll://Server/Pfad/File#Marke

Protokolle:– http:// Hypertext Transfer Protocol (WWW)

– ftp:// File Transfer Protocol

– telnet:// Remote Login

– news: Usenet News

– mailto: Email

– file: direkter Zugriff zum lokalen Filesystem

27

Bilder und Piktogramme (icons)

Es gibt viele Bildformate Im Bereich WWW haben sich vor allem das GIF-Format

und das JPEG-Format durchgesetzt GIF für Graphiken (Striche, wenige Farben) JPEG für Photos (viele Farben) Details dazu später

28

Bilder ins HTML-Dokument einsetzen

Bild einsetzen<img src=“../icons/ananas.gif” />

Bild mit Alternativtext (Balloon)<img src=“/pict/bananen.jpg” alt=“Bananen” /><img src=“decoration” alt=““ />

Bild mit Rahmen <img src=“http://www.site.ch/pict/kiwi.jpg”

border=“5” />

Bild mit Freiraum <img src=“/pict/kiwi.jpg” vspace=“5” /> <img src=“/pict/kiwi.jpg” hspace=“10” />

29

Bilder ausrichten

Bild relativ zur Schreiblinie platzieren:Beispiel: <img src=“litchi.jpg” align=“top” />

align = “top” “middle” “bottom”

Textlinie

Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/img.html

30

Text um Bilder fliessen lassen und Bildgrösse setzen

Bild links anschlagen:Beispiel: <img src=“flags.jpg” align=“left” />

Der nachfolgende Text fliesst rechts am Bild entlang und dann unten wieder bis an den linken Rand.

Mit Text unterhalb eines Bildes weiterfahren:<br clear=“left” />

Bildgrösse festlegen:<img src=“kiwi.gif” width=“250” height=“180” />

31

Bilder als Verweise

Ein Beispiel:<a href=“spaghetti/rezept.html”> <img src=“bild.jpg” alt=“Spaghetti” /></a>

Ohne blauen Rahmen:<a href=“spaghetti/rezept.html”> <img src=“bild.jpg” alt=“Spaghetti” border=“0” /></a>

Achtung auf white space im Innern von <A>-Elementen, also so:<a href=“spaghetti/rezept.html”><img src=“bild.jpg” alt=“Spaghetti” border=“0” /></a>

32

Tabellen

<table> <tr> <th><br /></th> <th>eins</th> <th>zwei</th> </tr> <tr> <th>alfa</th> <td>alfa-eins</td> <td>alfa-zwei</td> </tr></table>

eins zwei

alfa alfa-eins alfa-zwei

Die End-tags </td>, </th> und </tr>waren zwar fakultativ, aber ...

XHTML: End-tags obligatorisch

Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/table.html

33

Einige Attribute des <table> Elements

Gitternetzlinien und Freiraum<table border> Gitternetzlinien und Rand anzeigen<table border=“3”> Breite der Randlinien <table vspace=“8” hspace=“5”> Raum um die Tabelle herum

Tabellengrösse <table width=“600”> Breite in Pixel<table width=“90%”> Breite in % des Anzeigefensters<table height=“400”> Höhe in Pixel

Hintergrund, Zwischenräume und Randabstände<table bgcolor=“#ffffcc”> Hintergrundfarbe der ganzen Tabelle<table background=“bg.gif”> Hintergrundbild der Tabelle <table cellspacing=“5”> Raum zwischen den Zellen <table cellpadding=“5”> Abstand des Inhalts vom Zellenrand

34

Weitere Attribute für Tabellen

Grösse der Tabellenelemente <th width=“20%”> Zellenbreite <td height=“50”> Zellenhöhe

Ausrichtung der Tabelleninhalte <td align=“left”> Zelleninhalt (z.B. Text) linksbündig <td valign=“bottom”> Zelleninhalt unten bündig

Hintergrundfarbe <tr bgcolor=“#a0ffb0”> Hintergrundfarbe der ganzen Reihe <td bgcolor=“#a0ffc0”> Hintergrundfarbe der Zelle

Viele nicht standardisierte Erweiterungen!

35

Tabellenelemente zusammenfassen

<table> <tr> <td colspan=2>eins</td> <td rowspan=2>zwei</td> </tr> <tr> <td>drei</td> <td>vier</td> </tr></table>

eins

drei vierzwei

36

Graphik-Formate

Es gibt (viel zu) viele Graphik-FormateBeispiel: Paint Shop Pro 4 unterstützt 35 Formate

VektorgraphikBeispiel: Daten eines CAD oder eines Vermessungsprogramms, Postscript.Paint Shop Pro kann gewisse Formate lesen, aber nicht erzeugen

Raster- oder PixelgraphikBeispiele: Fernsehbild, Computermonitor, Druckraster.Alle Graphiken für das Web sind Rastergraphiken

Formate auf dem Web:– GIF (Graphics Interchange Format), Compuserve

– JPEG, JPG (Joint Photographic Experts Group)

– PNG (Portable Network Graphics) kunftiger Standard (?)

37

Farbmodelle

Das RGB System– Rot, grün, blau; jede Komponente ein Zahlenwert zwischen 0 und 255

– Hexadezimale Darstellung: #rrggbb mit 0 = #00, 255 = #ff

– Beispiel hellblau: R = 51 = #33, G = 204 = #cc, B = 255 = #ff also #33ccff

Alternative: HSB– Hue (Farbton), Saturation (Sättigung), Luminance (Leuchtkraft, Helligkeit)

Transparenz– Eine vierte Komponente: alpha

Gamma-Korrektur– Anpassung an den verwendeten Farbmonitor

38

Farbpaletten und Farbdarstellung

Reduktion der Datenmenge– RGB mit 8 Bit pro Farbe ergibt 224 = 16’777’216 Farben.

– Ein RGB-Bild von 1024 mal 1024 Pixel benötigt 3 Mbyte Platz. Ueber eine Modem-Leitung mit 30 kBit/sec ergibt das eine Uebertragungszeit von 800 sec.

Colormaps (Paletten)– Reduktion der Anzahl Farben auf meist unter 256.

– Verschiedene Computersysteme verwenden unterschiedliche Colormaps.

– Graphik-Programme erlauben, pro Bild eine eigen Colormap zu definieren.

– Web-Browser verwenden eine feste Colormap.

– Ideal für das Web: http://www.hta-bi.bfh.ch/~hew/webkueche/etc/colormap.html

Dithering– Zwischenfarbtöne durch Mischen von Farben aus der Farbpalette darstellen

39

Das GIF-Format

Color table: Pro Bild optimiert, maximal 256 Farben.

Kompression: Verlustfrei, sog. run-length encoding

Interlacing: Sukzessive Verfeinerung eines zunächst groben Bildes

GIF89a– Transparenz

– mehrere Bilder in einem File: Animation

Gut geeignet für– Grossflächige Bilder mit wenigen klaren Farben, Strichzeichnungen, Logos

Schlecht geeignet für– Photographien

40

Das JPEG-Format

Farbpalette und Kompression– Ein ausgeklügeltes Verfahren für eine fast unbegrenzte Anzahl von Farben

– Speziell für die digitale Speicherung von photographischen Bildern entwickelt

– Mass der Kompression und damit Bildqualität einstellbar

– Das Kompressionsverfahren ist nicht verlustfrei; d.h. die originale Bildqualität kann aus einem JPEG-komprimierten Bild nicht wiederhergestellt werden.

Besondere Eignung– Für Photographien und Bilder mit vielen Farbtönen

Ein praktischer Tipp für GIF- und JPEG-Bilder– Bilder immer auch im Originalformat des Graphik-Programms abspeichern!

Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/graphics/index.html

41

Framesets und Frames

<frameset> kann <body> ersetzen <frameset> unterteilt das Anzeigefenster in mehrere

Teilgebiete mit separatem Scrolling Beispiel:

<frameset rows=“100,*”> <frame name=“topbar” src=“top.html” scrolling=“no”> <frameset cols=“20%, *”> <frame name=“leftcol” src=“left.html”> <frame name=“rightcol” src=“right.html”> </frameset></frameset><noframe><body> gewöhnlicher HTML Text </body></noframes>

42

Darstellen eines Dokuments in einem Frame

Das target= Attribut des <a> ElementsBeispiel:<a href=“pasta.html” target=“rightcol”>.. ..</a> Das File “pasta.html” wird ins Frame namens “rightcol” geladen, wenn der Link aktiviert wird.

Kein Target spezifiziert– Ersatz des aktuellen Frames

Ein nicht existierends Target spezifiziert– Eröffnen eines neuen Browser-Fensters

Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/gratins/index.html

43

Aktive Bilder (Client side clickable images)

(0,0) x

(360,300)

bild.gif

y <map name=“mymap”><area shape=circle coords=“240,260,55” href=“/pfad/kreis.html” alt=“Kreis” /><area shape=rect coords=“65,40,210,220” href=“/pfad/rechteck.html” /></map>

<img src=“bild.gif” usemap=“#mymap” />

Es gibt Programme, die beim Erstellen der Map helfenBeispiel: http://www.boutell.com/mapedit/

Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/exoten/

44

Aktive Bilder (Server side clickable images)

HTML-Dokument:<a href=“/WWW/cgi/htimage/imap”><img src=“bild.gif” border=“0” ismap=“ismap” /></a>

(0,0) x

(360,300)

Image map imap:circle(240,260) 55 /pfad/kreis.htmlrectangle(65,40) (210,220) /pfad/rechteck.htmldefault http://www.inst.ch/pfad/fehler.html

bild.gif

y

Eine Alternative zu htimage ist das Programm imagemap

45

Häufige Fehler und Validierung

Falsche Schachtelung<b>Das ist <i>falsch</b> geschachtelt</i>

Abschluss-tag oder Abschlusszeichen vergessensrc=“bild.gif &eacute </ul> </a>

Verweise ins Leere http://home.snafu.de/tilman/xenulink.html/

Absolute oder relative Pfade (URLs)Relative Pfade bleiben beim “Zügeln” von ganzen Verzeichnis-strukturen erhalten.

Validierung (Test auf syntaktische Korrektheit) http://validator.w3.org/

46

Stilfragen und Hinweise

Navigationshilfen Layout vom Browser und dessen Einstellung abhängig Zeit für Bildaufbau so klein wie möglich halten Farbgebung und Hintergründe Links auf “Baustellen” Warnung vor grossen Dateien: thumbnail pictures

Ein Link auf eine Sammlung von vielen nützlichen Links– http://www.hta-bi.bfh.ch/~hew/webkueche/graham/contents.html

47

Formulare und Gateway-Programme

client server

…/data/...

gateway

HTMLfiles

CGIhttp response

http request

…/cgi/...

CGI = Common Gateway Interface

48

Gateway-Programme (cgi)

Gateway-Programme werden vom Server auf Veranlassung des Clients angestossen und produzieren (evt. unter anderem) ein HTML-Dokument, das dann vom Server an den Client zurück-geschickt wird.

Gateway-Programme sind entweder Scripts (z.B. shell oder perl) oder kompilierte Programme (z.B. C oder eine andere Sprache). Die Scriptsprache perl ist besonders verbreitet.

Es gibt Gateway-Programme für die Anbindung von Datenbanken. Gateway-Programme stellen grundsätzlich ein gewisses

Sicherheitsrisiko für den Serverbetreiber dar.

49

Input und Output von Gateway-Programmen

OutputGateway-Programme schreiben auf ihren Standard-Output.Dem HTML-Dokument geht ein http response header voran.

InputEs gibt zwei Methoden, wie Gateway-Programme zu ihren Input-Daten kommen: GET und POST.– GET-Methode: Die Input-Daten werden vom Server aus-schliesslich in

Environment-Variablen abgelegt und müssen vom Gateway-Programm dort abgeholt werden.

– POST-Methode: Die eigentlichen Input-Daten werden via Standard-Input dem Gateway-Programm zugeführt.

50

Hello world! - Nur Output

#!/usr/local/bin/perl

require "cgi-lib.pl";require "ctime.pl";$datum = &ctime(time);

print &PrintHeader(); # http response header

print <<EOH; # schreibe bis zur Marke EOH<html> <head><title>Hello world!</title></head><body> <h1>Hello, world! It's $datum</h1></body> </html> EOH

51

Hello you! Input und Output

#!/usr/local/bin/perl

require "cgi-lib.pl";

&ReadParse(*input); # Lies Daten und lege sie im # assoziativen Array ‘input’ ab

print &PrintHeader(); # schreibe http response headerprint <<EOH;<html> <head><title>Hello you!</title></head><body> <h1>Hello, $input{'Name'}!</h1> </body></html>EOH

Aufruf z.B.: http://www.hta-bi.bfh.ch/I/cgi/hello-you?Name=Hans+Muster

52

GET- und POST-Methode

GETDie Input-Daten werden in URL-encoded form in der Environment-Varaiblen QUERY_STRING abgelegt.

POSTDie Input-Daten werden in URL-encoded form vom Standard-Input gelesen.

Einige weitere HTTP-Methoden:HEAD, PUT, DELETE, LINK, UNLINK, TEXTSEARCH

53

Einige Environment-Variablen

SERVER_NAME SERVER_PORT REQUEST_METHOD PATH_INFO PATH_TRANSLATED SCRIPT_NAME QUERY_STRING CONTENT_TYPE CONTENT_LENGTH

Test-Programm:

/I/cgi/restricted/cgi-test

54

Ein einfaches Formular

<html><head><title>Hello-form</title></head><body><form action="/I/cgi/hello-you" method=“get”> Bitte tippe deinen Namen ein: <br /> <input name="Name" size=“20” maxlength=“50” /> <br /> <input type=“submit” value="KLICK” /></form></body></html>

55

Formulare <form>

<form action="..." method=...> <input ... /> <select ...> <option ...> <option ...> </select> <textarea ...> .. .. </textarea> </form>

method=“post” oder method=“get” (default)

action=.../cgi/cgi-script/additional/path/

56

Das <input> Formularelement

<input type=

text default name=... value= ...

size=... maxlength=...

password Attribute wie type=text

checkbox ja/nein name=... value=... checked

radio eine Wahl name=... value=... checked

submit absenden value= Text auf Knopf

reset rücksetzen value= Text auf Knopf

hidden unsichtbar name=... value= ...>

57

<select> und <textarea>

<select name=... size=... multiple> <option selected value=...> ... </option> ...</select>

<textarea name=... rows=... cols=...> Text, der zu Beginn im Fenster erscheint</textarea>

58

feedback

Ein Gateway-Programm, das Formulare mit beliebigenFeldern auswertet und das Resultat per Emailan eine gegebene Adresse sendet.

Email-Adresse Beispiel:<input type=“hidden” name=“Email” value=“user@hta-bi.bfh.ch”>

Antwortmuster HTML Beispiel:<input type=“hidden” name=“Response-Pattern” value=“response.html”>

Antwortmuster Email Beispiel:<input type=“hidden” name=“Email-Pattern” value=“email.txt”>

Anleitung: http://www.hta-bi.bfh.ch/~hew/webkueche/dessert/feedback-use.html