slides - BFH

Kurs HTML: Erstellen von Web-Seiten
Ein Kurs für die Praxis …
… an der Hochschule für Technik und Architektur Biel
[email protected]
Frühling 2000
1
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
2
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
3
Grundbegriffe Internet: Protokolle
4
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.
5
Das Zusammenspiel von Web-Client und -Server
File Manager
Editor
File-System:
HTML Files
Helper
Applications
http request
Client
Server
http response
CGI
Browser
Datenbank
Gateway-Programme
6
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
7
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
8
Ein Beispiel: Die Web-Küche
http://www.hta-bi.bfh.ch/~hew/
H:\
/home/hew/www
http://www.hta-bi.bfh.ch/~user/
wkurs
webkueche
rezepte
dessert
...
...
pizza
welcome.html
welcome.html
ragout
...
...
rezept.html
index.html
bild.html
bild.jpg
...
rezept.html
bild.html
bild.jpg
9
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!
10
HTML-Elemente und Syntax




HTML-Elemente und Tags
Bsp: <h3>Dies ist ein Titel</h3>
Leere HTML-Elemente haben kein End-tag
Bsp: <hr> neu in XHTML: <hr />
Tags können Attribute (mit oder ohne Wert) haben
Bsp: <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
11
HTML-Elemente und Syntax (2)



Kommentare: <!--->
Bsp: <!-- Kommentartext
-->
Wortzwischenraum (white space): space, tab und
new-line werden nicht unterschieden
Fliesstext; Zeilenumbruch:
– <br> neu: <br />
– <nobr> … </nobr>
– <wbr />
erzwingt neue Zeile
verbietet Zeilenumbruch
wenn nötig Umbruch
12
Grundstruktur eines HTML-Dokuments
<!DOCTYPE HTML .. .. .. .. .. ..>
<html>
<head>
<title> .. .. .. </title>
Fenstertitel
.. ..
</head>
<body>
.. ..
Inhalt des Dokuments
</body>
</html>
13
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”>
14
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
<hr noshade>
neu: <hr />
neu: <hr noshade=“noshade” />
15
Geordnete (nummerierte) Liste
<ol>
<li>Analyse</li>
<li>Design</li>
<li>Implementation</li>
</ol>
<ol
<ol
<ol
<ol
type=A>
type=a>
type=I>
type=5>
A, B, C, ..
a, b, c, ..
I, II, III, ..
5, 6, 7, ..
16
Ungeordnete Listen
<ul>
<li>Aepfel</li>
<li>Birnen</li>
<li>Nüsse</li>
</ul>
<ul type=“square”>
<ul type=“circle”>
17
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 CabernetSauvignon und anderen die weltbekannten
Rotweine liefert.</dd>
</dl>
18
Textauszeichnung
Logische (semantische) Auszeichnungen
<strong> .. .. .. </strong>
<em> .. .. .. .. </em>
<cite> .. .. .. .. </cite>
und viele andere …
wichtig
hervorgehoben
Zitat
Physische Auszeichnungen
<b> .. .. .. ..</b>
fett
<i> .. .. .. ..</i>
kursiv
<u> .. .. .. ..</u>
unterstrichen
<big> .. .. .. </big>
gross
<small> .. .. .. </small>
klein
und noch ein paar andere (einige davon nicht normiert)
19
Textgrösse und Schriftart
<tt> .. .. ..</tt>
Blocksatz
<pre>
.. ..
</pre>
Blocksatz vorformatiert
<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!
20
Spezialzeichen
< <
& &
>
"
>
“
ä
é
Ü
ä
é
Ü
ô
ñ
ç
&#E7;
numerischer ASCII-Wert
⌣
Piktogramm (noch nicht normiert)
ô
ñ
ç
… und viele andere!
21
Textabsätze und Ausrichtung

Anfang eines neuen Absatzes:
<p>
<p align=“left”>
<p align=“center”>
<p align=“right”>

End-tag </p> fakultativ
XHTML: <p> ……… </p>

Mehrere Elemente zentrieren:

neuer Absatz
neuer Absatz links angeschlagen
neuer Absatz zentriert
neuer Absatz rechts angeschlagen
End-tag obligatorisch
<div align=“center”> .. .. .. </div>
22
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
23
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>
24
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.jpg
http://www.hta-bi.bfh.ch/~hew/webkueche/welcome.html
25
Typen von URL (2)

Allgemeines URL-Schema:
Protokoll://Server/Pfad/File#Marke

Protokolle:
–
–
–
–
–
–
http://
ftp://
telnet://
news:
mailto:
file:
Hypertext Transfer Protocol (WWW)
File Transfer Protocol
Remote Login
Usenet News
Email
direkter Zugriff zum lokalen Filesystem
26
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
27
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” />
28
Bilder ausrichten

Bild relativ zur Schreiblinie platzieren:
Beispiel: <img src=“litchi.jpg” align=“top” />
Textlinie
align =
“top”
“middle”
“bottom”
Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/img.html
29
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” />
30
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>
31
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
alfa
alfa-eins
zwei
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
32
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”>
<table width=“90%”>
<table height=“400”>

Breite in Pixel
Breite in % des Anzeigefensters
Höhe in Pixel
Hintergrund, Zwischenräume und Randabstände
<table
<table
<table
<table
bgcolor=“#ffffcc”>
background=“bg.gif”>
cellspacing=“5”>
cellpadding=“5”>
Hintergrundfarbe der ganzen Tabelle
Hintergrundbild der Tabelle
Raum zwischen den Zellen
Abstand des Inhalts vom Zellenrand
33
Weitere Attribute für Tabellen

Grösse der Tabellenelemente
<th width=“20%”>
<td height=“50”>

Ausrichtung der Tabelleninhalte
<td align=“left”>
<td valign=“bottom”>

Zelleninhalt (z.B. Text) linksbündig
Zelleninhalt unten bündig
Hintergrundfarbe
<tr bgcolor=“#a0ffb0”>
<td bgcolor=“#a0ffc0”>

Zellenbreite
Zellenhöhe
Hintergrundfarbe der ganzen Reihe
Hintergrundfarbe der Zelle
Viele nicht standardisierte Erweiterungen!
34
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
zwei
drei
vier
35
Graphik-Formate

Es gibt (viel zu) viele Graphik-Formate
Beispiel: Paint Shop Pro 4 unterstützt 35 Formate

Vektorgraphik
Beispiel: Daten eines CAD oder eines Vermessungsprogramms, Postscript.
Paint Shop Pro kann gewisse Formate lesen, aber nicht erzeugen

Raster- oder Pixelgraphik
Beispiele: 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 (?)
36
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
37
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
38
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
39
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
40
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>
41
Darstellen eines Dokuments in einem Frame

Das target= Attribut des <a> Elements
Beispiel:
<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
42
Aktive Bilder (Client side clickable images)
(0,0) x
<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>
y
bild.gif
(360,300)
<img src=“bild.gif” usemap=“#mymap” />
Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/exoten/

Es gibt Programme, die beim Erstellen der Map helfen
Beispiel: http://www.boutell.com/mapedit/
43
Aktive Bilder (Server side clickable images)
(0,0) x
HTML-Dokument:
<a href=“/WWW/cgi/htimage/imap”><img
src=“bild.gif” border=“0”
ismap=“ismap” /></a>
y
bild.gif
(360,300)
Image map imap:
circle(240,260) 55 /pfad/kreis.html
rectangle(65,40) (210,220) /pfad/rechteck.html
default http://www.inst.ch/pfad/fehler.html
Eine Alternative zu htimage ist das Programm imagemap
44
Häufige Fehler und Validierung

Falsche Schachtelung
<b>Das ist <i>falsch</b> geschachtelt</i>

Abschluss-tag oder Abschlusszeichen vergessen
src=“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 Verzeichnisstrukturen erhalten.

Validierung (Test auf syntaktische Korrektheit)
http://validator.w3.org/
45
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
46
Formulare und Gateway-Programme
…/data/...
HTML
files
http request
client
server
http response
CGI
…/cgi/...
gateway
CGI = Common Gateway Interface
47
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ückgeschickt 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.
48
Input und Output von Gateway-Programmen


Output
Gateway-Programme schreiben auf ihren Standard-Output.
Dem HTML-Dokument geht ein http response header voran.
Input
Es gibt zwei Methoden, wie Gateway-Programme zu ihren InputDaten 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.
49
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
50
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 header
print <<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
51
GET- und POST-Methode



GET
Die Input-Daten werden in URL-encoded form in der EnvironmentVaraiblen QUERY_STRING abgelegt.
POST
Die Input-Daten werden in URL-encoded form vom Standard-Input
gelesen.
Einige weitere HTTP-Methoden:
HEAD, PUT, DELETE, LINK, UNLINK, TEXTSEARCH
52
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
53
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>
54
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/
55
Das <input> Formularelement
<input type=
text
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= ...>
default
56
<select> und <textarea>
<select name=...
size=... multiple>
<option selected value=...> ... </option>
...
</select>
<textarea name=... rows=... cols=...>
Text, der zu Beginn im Fenster erscheint
</textarea>
57
feedback


Ein Gateway-Programm, das Formulare mit beliebigen
Feldern auswertet und das Resultat per Email
an eine gegebene Adresse sendet.
Email-Adresse Beispiel:
<input type=“hidden” name=“Email” value=“[email protected]”>

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
58