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 &lt; < &amp; & &gt; &quot; > “ &auml; &eacute; &Uuml; ä é Ü &ocirc; &ntilde; &ccedil; &#E7; numerischer ASCII-Wert &smile; 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