1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für...
-
Upload
ursel-arenz -
Category
Documents
-
view
107 -
download
3
Transcript of 1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für...
![Page 1: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/1.jpg)
1
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
![Page 2: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/2.jpg)
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
![Page 3: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/3.jpg)
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
![Page 4: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/4.jpg)
4
Grundbegriffe Internet: Protokolle
![Page 5: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/5.jpg)
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.
![Page 6: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/6.jpg)
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
![Page 7: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/7.jpg)
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
![Page 8: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/8.jpg)
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
![Page 9: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/9.jpg)
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
![Page 10: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/10.jpg)
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!
![Page 11: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/11.jpg)
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
![Page 12: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/12.jpg)
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
![Page 13: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/13.jpg)
13
Grundstruktur eines HTML-Dokuments
<!DOCTYPE HTML .. .. .. .. .. ..><html><head><title> .. .. .. </title> Fenstertitel .. .. </head><body> .. .. Inhalt des Dokuments</body></html>
![Page 14: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/14.jpg)
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”>
![Page 15: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/15.jpg)
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” />
![Page 16: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/16.jpg)
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, ..
![Page 17: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/17.jpg)
17
Ungeordnete Listen
<ul> <li>Aepfel</li> <li>Birnen</li> <li>Nüsse</li> </ul>
<ul type=“square”><ul type=“circle”>
![Page 18: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/18.jpg)
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>
![Page 19: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/19.jpg)
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)
![Page 20: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/20.jpg)
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!
![Page 21: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/21.jpg)
21
Spezialzeichen
< < > >& & " “
ä ä ô ôé é ñ ñÜ Ü ç ç
&#E7; numerischer ASCII-Wert
⌣ Piktogramm (noch nicht normiert)
… und viele andere!
![Page 22: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/22.jpg)
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>
![Page 23: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/23.jpg)
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
![Page 24: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/24.jpg)
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>
![Page 25: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/25.jpg)
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
![Page 26: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/26.jpg)
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
![Page 27: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/27.jpg)
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
![Page 28: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/28.jpg)
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” />
![Page 29: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/29.jpg)
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
![Page 30: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/30.jpg)
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” />
![Page 31: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/31.jpg)
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>
![Page 32: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/32.jpg)
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
![Page 33: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/33.jpg)
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
![Page 34: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/34.jpg)
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!
![Page 35: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/35.jpg)
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
![Page 36: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/36.jpg)
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 (?)
![Page 37: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/37.jpg)
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
![Page 38: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/38.jpg)
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
![Page 39: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/39.jpg)
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
![Page 40: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/40.jpg)
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
![Page 41: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/41.jpg)
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>
![Page 42: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/42.jpg)
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
![Page 43: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/43.jpg)
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/
![Page 44: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/44.jpg)
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
![Page 45: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/45.jpg)
45
Häufige Fehler und Validierung
Falsche Schachtelung<b>Das ist <i>falsch</b> geschachtelt</i>
Abschluss-tag oder Abschlusszeichen vergessensrc=“bild.gif é </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/
![Page 46: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/46.jpg)
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
![Page 47: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/47.jpg)
47
Formulare und Gateway-Programme
client server
…/data/...
gateway
HTMLfiles
CGIhttp response
http request
…/cgi/...
CGI = Common Gateway Interface
![Page 48: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/48.jpg)
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.
![Page 49: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/49.jpg)
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.
![Page 50: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/50.jpg)
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
![Page 51: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/51.jpg)
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
![Page 52: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/52.jpg)
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
![Page 53: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/53.jpg)
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
![Page 54: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/54.jpg)
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>
![Page 55: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/55.jpg)
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/
![Page 56: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/56.jpg)
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= ...>
![Page 57: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/57.jpg)
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>
![Page 58: 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.chFrühling.](https://reader035.fdokument.com/reader035/viewer/2022062512/55204d7249795902118c5984/html5/thumbnails/58.jpg)
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=“[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