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

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

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

Grundbegriffe Internet: Protokolle

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.

Das Zusammenspiel von Web-Client und -Server Helper Applications File-System: HTML Files File Manager Editor http request Client Server http response CGI Rolle von Client und Server: Netscape Browser und httpd-Server HTTP-Verbindung Filesystem auf dem Server: ServerRoot Programme auf dem Server-Rechner: Editoren: asWedit, ... Graphik-Programme: Adobe Photoshop, ... Script-Sprachen für Gateway-Programme: perl, sh, … Hilfsprogramme auf dem Client-Rechner: Viewer (z.B. mpeg) Sound-Programme (z.B. wav-Files) Client und Server können auf dem gleichen Rechner sein Browser Datenbank Gateway-Programme

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

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

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 bild.html bild.jpg index.html ... rezept.html bild.html bild.jpg

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!

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

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

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

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”>

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” />

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, ..

Ungeordnete Listen <ul> <li>Aepfel</li> <li>Birnen</li> <li>Nüsse</li> </ul> <ul type=“square”> <ul type=“circle”>

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>

Textauszeichnung Logische (semantische) Auszeichnungen <strong> .. .. .. </strong> wichtig <em> .. .. .. .. </em> hervorgehoben <cite> .. .. .. .. </cite> Zitat und viele andere … 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)

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!

Spezialzeichen < < > > & & " “ ä ä ô ô < < > > & & " “ ä ä ô ô é é ñ ñ Ü Ü ç ç &#E7; numerischer ASCII-Wert &smile; Piktogramm (noch nicht normiert) … und viele andere!

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>

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

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>

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

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

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

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” />

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

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” />

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>

Tabellen <table> <tr> <th><br /></th> <th>eins</th> <th>zwei</th> </tr> <th>alfa</th> <td>alfa-eins</td> <td>alfa-zwei</td> </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

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

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!

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

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 (?)

Farbmodelle Das RGB System Alternative: HSB Transparenz 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

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

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

Das JPEG-Format Farbpalette und Kompression Besondere Eignung 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

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>

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

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> <img src=“bild.gif” usemap=“#mymap” /> y (360,300) bild.gif 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/

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

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 Verzeichnis- strukturen erhalten. Validierung (Test auf syntaktische Korrektheit) http://validator.w3.org/

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

Formulare und Gateway-Programme …/data/... HTML files http request client server …/cgi/... http response CGI gateway CGI = Common Gateway Interface

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.

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 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.

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

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

GET- und POST-Methode GET Die Input-Daten werden in URL-encoded form in der Environment-Varaiblen 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

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

Ein einfaches Formular

Formulare <form> <form action="..." method=...> <input ... /> <select ...> <option ...> </select> <textarea ...> .. .. </textarea> </form> method=“post” oder method=“get” (default) action=.../cgi/cgi-script/additional/path/

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= ...>

<select> und <textarea> <select name=... size=... multiple> <option selected value=...> ... </option> ... </select> <textarea name=... rows=... cols=...> Text, der zu Beginn im Fenster erscheint </textarea>

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=“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