1 / 58

Kurs HTML: Erstellen von Web-Seiten

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

more
Télécharger la présentation

Kurs HTML: Erstellen von Web-Seiten

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für Technik und Architektur Biel werner.hett@hta-bi.bfh.ch Frühling 2000

  2. Uebersicht über den Kursinhalt • Grundbegriffe Internet und Web • Das Zusammenspiel von Browser und Server • Einfache Textdokumente in HTML • Verweise und Marken • Bilder und Piktogramme • Tabellen und Frames • Graphik-Formate • Aktive Bilder • Formulare

  3. Grundbegriffe Internet: Struktur und Adressen • Das Internet hat eine Struktur, wie das weltweite Telefonnetz • Jeder Rechner hat eine IP-Nummer: • Beispiel: 147.87.65.23 • Rechner haben einen Namen (Internet-Adresse) • Beispiel: dorado.hta-bi.bfh.ch oder www.bfh.ch • Der Namensraum ist hierarchisch gegliedert. • Toplevel domains: ch de fr com edu org net …. • Ein weltweiter Auskunftdienst stellt die Beziehung zwischen den Namen und IP-Nummern her. DNS = Domain Name System

  4. Grundbegriffe Internet: Protokolle

  5. Das Client/Server-Paradigma • Ein Client ist ein Programm, das ein anderes Programm (den Server), kontaktiert, um von diesem Daten zu erhalten. • Bsp: Netscape Navigator, Internet Explorer, ftp-Client, Mail-Programm • Ein Server ist ein Programm, das jederzeit bereit ist, auf Anfragen von Clients zu reagieren und entsprechende Antworten zu geben. • Bsp: Web-Server, ftp-Server, Domain Name Server, Mail-Server, File-Server • Client und Server laufen in der Regel auf verschiedenen Rechnern • Clients sind aktiv, sie starten Anfragen meist auf Veranlassung eines Benutzers. Sie müssen nicht immer verfügbar sein. • Server dagegen sind passiv (warten auf Anfragen), müssen aber immer verfügbar, d.h. permanent am Internet sein und laufen.

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

  7. Geschichte von HTML • WWW: Tim Berners-Lee und Robert Cailliau (CERN, 1991) • HTML: erste Sprachgeneration • HTML 2, 3, 4: immer besser (?) • XHTML 1.0: W3C Recommendation 26 January 2000 Referenz: http://www.w3.org/ • SGML: die Sprachenfamilie von HTML • Netscape “Enhancements” und Microsoft “Extensions” • XML: eXtensible Markup Language • CSS: Cascading Style Sheets • JavaScript, VBScript: dynaische HTML-Seiten • Java: Programmiersprache

  8. Einfache Textdokumente in HTML • HTML - HyperText Markup Language • Ein HTML-Dokument ist in der Regel aus mehreren Teilen zusammengesetzt: Bilder und andere, in den Text eingestreute Elemente kommen aus separaten Files. • HTML ist keine Layout-Sprache, sondern eine logische oder semantische Markierungssprache. Das Erscheinungsbild einer Seite hängt sehr stark von den Einstellungen des Browsers ab, die vom Benützer weitgehend frei gewählt werden können: Schriftgrösse und Schriftart (Font), Fensterdimensionen und Bildschirmauflösung, Farbpalette. • Beispiel: http://www.hta-bi.bfh.ch/~hew/webkueche/welcome.html

  9. Ein Beispiel: Die Web-Küche http://www.hta-bi.bfh.ch/~hew/ H:\ /home/hew/www http://www.hta-bi.bfh.ch/~user/ wkurs ... webkueche dessert rezepte pizza welcome.html ... welcome.html ragout ... ... bild.html rezept.html bild.jpg index.html ... bild.html rezept.html bild.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!

  11. HTML-Elemente und Syntax • HTML-Elemente und TagsBsp: <h3>Dies ist ein Titel</h3> • Leere HTML-Elemente haben kein End-tagBsp: <hr> neu in XHTML: <hr /> • Tags können Attribute (mit oder ohne Wert) habenBsp: <img src=“bild.gif” ismap> XHTML: <img src=“bild.gif” ismap=“ismap” /> • Gross- und Kleinschreibung • für Elementnamen und Attributnamen irrelevant • für Attributwerte relevant • in XHTML: alles klein

  12. HTML-Elemente und Syntax (2) • Kommentare: <!-- -->Bsp: <!-- Kommentartext --> • Wortzwischenraum (white space): space, tab und new-line werden nicht unterschieden • Fliesstext; Zeilenumbruch: • <br> neu: <br /> erzwingt neue Zeile • <nobr> … </nobr> verbietet Zeilenumbruch • <wbr /> wenn nötig Umbruch

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

  14. Hintergrund <body bgcolor=“#0000ff” text=“#00c0c0” link=“#ffff00” vlink=“#00eed0” alink=“#ff0000”> Farben: “#rrggbb” jeder Farbcode zwischen 00 und ff (hexadezimal) Es gibt auch englische Farbbezeichner: color=“red” <body background=“muster.gif” bgcolor=“#ffccff”>

  15. Ueberschriften und horiontale Trennlinien <h1>Grosser Titel</h1> <h2>Nicht ganz so grosser Titel</h2> .. .. .. <h6>Winziger Titel</h6> <h1 align=left>Titeltext</h1> <h1 align=center>Titeltext</h1> <h1 align=right>Titeltext</h1> <hr> horizontale Linie neu: <hr /> <hr noshade> neu: <hr noshade=“noshade” />

  16. Geordnete (nummerierte) Liste <ol> <li>Analyse</li> <li>Design</li> <li>Implementation</li> </ol> <ol type=A> A, B, C, .. <ol type=a> a, b, c, .. <ol type=I> I, II, III, .. <ol type=5> 5, 6, 7, ..

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

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

  19. Textauszeichnung Logische (semantische) Auszeichnungen <strong> .. .. .. </strong> wichtig <em> .. .. .. .. </em> hervorgehoben <cite> .. .. .. .. </cite> 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)

  20. Textgrösse und Schriftart <tt> .. .. ..</tt> Blocksatz <pre> .. .. Blocksatz vorformatiert </pre> <font size=“5”> .. .. ..</font> 1 bis 7 <font size=“+1”> .. .. .</font> <basefont size=“5”> .. .. </basefont> <font color=“#ff0000”> .. .. </font> <font face=“arial,helvetica”> .. .. ..</font> <font> ist ziemlich schlecht normiert: Stylesheets verwenden!

  21. Spezialzeichen &lt; < &gt; > &amp; & &quot; “ &auml; ä &ocirc; ô &eacute; é &ntilde; ñ &Uuml; Ü &ccedil; ç &#E7; numerischer ASCII-Wert &smile; Piktogramm (noch nicht normiert) … und viele andere!

  22. Textabsätze und Ausrichtung • Anfang eines neuen Absatzes:<p> neuer Absatz <p align=“left”> neuer Absatz links angeschlagen <p align=“center”> neuer Absatz zentriert <p align=“right”> neuer Absatz rechts angeschlagen • End-tag </p> fakultativ • XHTML: <p> ……… </p>End-tag obligatorisch • Mehrere Elemente zentrieren: <div align=“center”> .. .. .. </div>

  23. Verweise und Marken: Uebersicht • Marken in Dokumenten • Verweise auf andere Dokumente • URL: Uniform Resource Locator • global und lokale URL • absolute und relative lokale URL • Bilder in HTML-Dokumente einbinden • Text um Bilder herumfliessen lassen • Bilder als Verweise

  24. Marken und Links in HTML-Dokumenten • Marke setzen:<a name=“Marke”></a> • Verweis auf Marke im gleichen HTML-Dokument:<a href=“#Marke”>Verweis-Text</a> • Verweis auf Marke in einem anderen HTML-Dokument:<a href=“/Path/File.html#Marke”>Verweis-Text</a> • Allgemeine Form von Verweisen:<a href=”URL”>Verweis-Text</a>

  25. Typen von URL (1) • lokal = auf dem gleichen Server • global = auf einem anderen Server • relative lokale URL sind Filenamen ohne führenden Slash (/): bild-klein.gif ../dessert/ananas.html • absolute lokale URL beginnen mit einem führenden Slash (/): /pictures/ananas.gif /~user/wkurs/pizza/rezept.html • globale URL beginnen mit einem Protokoll (z.B. http:) http://host.inst.ch/bilder/bananen.jpg http://www.hta-bi.bfh.ch/~hew/webkueche/welcome.html

  26. Typen von URL (2) • Allgemeines URL-Schema:Protokoll://Server/Pfad/File#Marke • Protokolle: • http:// Hypertext Transfer Protocol (WWW) • ftp:// File Transfer Protocol • telnet:// Remote Login • news: Usenet News • mailto: Email • file: direkter Zugriff zum lokalen Filesystem

  27. Bilder und Piktogramme (icons) • Es gibt viele Bildformate • Im Bereich WWW haben sich vor allem das GIF-Formatund das JPEG-Format durchgesetzt • GIF für Graphiken (Striche, wenige Farben) • JPEG für Photos (viele Farben) • Details dazu später

  28. Bilder ins HTML-Dokument einsetzen • Bild einsetzen<img src=“../icons/ananas.gif” /> • Bild mit Alternativtext (Balloon)<img src=“/pict/bananen.jpg” alt=“Bananen” /><img src=“decoration” alt=““ /> • Bild mit Rahmen<img src=“http://www.site.ch/pict/kiwi.jpg” border=“5” /> • Bild mit Freiraum<img src=“/pict/kiwi.jpg” vspace=“5” /><img src=“/pict/kiwi.jpg” hspace=“10” />

  29. Bilder ausrichten • Bild relativ zur Schreiblinie platzieren:Beispiel: <img src=“litchi.jpg” align=“top” /> Textlinie align = “top” “middle” “bottom” Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/img.html

  30. Text um Bilder fliessen lassen und Bildgrösse setzen • Bild links anschlagen:Beispiel: <img src=“flags.jpg” align=“left” /> Der nachfolgende Text fliesst rechts am Bild entlang und dann unten wieder bis an den linken Rand. • Mit Text unterhalb eines Bildes weiterfahren:<br clear=“left” /> • Bildgrösse festlegen:<img src=“kiwi.gif” width=“250” height=“180” />

  31. Bilder als Verweise • Ein Beispiel:<a href=“spaghetti/rezept.html”> <img src=“bild.jpg” alt=“Spaghetti” /></a> • Ohne blauen Rahmen:<a href=“spaghetti/rezept.html”> <img src=“bild.jpg” alt=“Spaghetti” border=“0” /></a> • Achtung auf white space im Innern von <A>-Elementen, also so: <a href=“spaghetti/rezept.html”><img src=“bild.jpg” alt=“Spaghetti” border=“0” /></a>

  32. Tabellen <table> <tr> <th><br /></th> <th>eins</th> <th>zwei</th> </tr> <tr> <th>alfa</th> <td>alfa-eins</td> <td>alfa-zwei</td> </tr> </table> zwei eins alfa alfa-eins alfa-zwei Die End-tags </td>, </th> und </tr> waren zwar fakultativ, aber ... XHTML: End-tags obligatorisch Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/table.html

  33. Einige Attribute des <table> Elements • Gitternetzlinien und Freiraum<table border> Gitternetzlinien und Rand anzeigen<table border=“3”> Breite der Randlinien <table vspace=“8” hspace=“5”> Raum um die Tabelle herum • Tabellengrösse <table width=“600”> Breite in Pixel<table width=“90%”> Breite in % des Anzeigefensters<table height=“400”> Höhe in Pixel • Hintergrund, Zwischenräume und Randabstände<table bgcolor=“#ffffcc”>Hintergrundfarbe der ganzen Tabelle<table background=“bg.gif”> Hintergrundbild der Tabelle <table cellspacing=“5”> Raum zwischen den Zellen <table cellpadding=“5”> Abstand des Inhalts vom Zellenrand

  34. Weitere Attribute für Tabellen • Grösse der Tabellenelemente<th width=“20%”> Zellenbreite<td height=“50”> Zellenhöhe • Ausrichtung der Tabelleninhalte<td align=“left”> Zelleninhalt (z.B. Text) linksbündig<td valign=“bottom”> Zelleninhalt unten bündig • Hintergrundfarbe<tr bgcolor=“#a0ffb0”> Hintergrundfarbe der ganzen Reihe<td bgcolor=“#a0ffc0”> Hintergrundfarbe der Zelle • Viele nicht standardisierte Erweiterungen!

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

  36. Graphik-Formate • Es gibt (viel zu) viele Graphik-FormateBeispiel: Paint Shop Pro 4 unterstützt 35 Formate • VektorgraphikBeispiel: Daten eines CAD oder eines Vermessungsprogramms, Postscript.Paint Shop Pro kann gewisse Formate lesen, aber nicht erzeugen • Raster- oder PixelgraphikBeispiele: Fernsehbild, Computermonitor, Druckraster.Alle Graphiken für das Web sind Rastergraphiken • Formate auf dem Web: • GIF (Graphics Interchange Format), Compuserve • JPEG, JPG (Joint Photographic Experts Group) • PNG (Portable Network Graphics) kunftiger Standard (?)

  37. Farbmodelle • Das RGB System • Rot, grün, blau; jede Komponente ein Zahlenwert zwischen 0 und 255 • Hexadezimale Darstellung: #rrggbb mit 0 = #00, 255 = #ff • Beispiel hellblau: R = 51 = #33, G = 204 = #cc, B = 255 = #ff also #33ccff • Alternative: HSB • Hue (Farbton), Saturation (Sättigung), Luminance (Leuchtkraft, Helligkeit) • Transparenz • Eine vierte Komponente: alpha • Gamma-Korrektur • Anpassung an den verwendeten Farbmonitor

  38. Farbpaletten und Farbdarstellung • Reduktion der Datenmenge • RGB mit 8 Bit pro Farbe ergibt 224 = 16’777’216 Farben. • Ein RGB-Bild von 1024 mal 1024 Pixel benötigt 3 Mbyte Platz. Ueber eine Modem-Leitung mit 30 kBit/sec ergibt das eine Uebertragungszeit von 800 sec. • Colormaps (Paletten) • Reduktion der Anzahl Farben auf meist unter 256. • Verschiedene Computersysteme verwenden unterschiedliche Colormaps. • Graphik-Programme erlauben, pro Bild eine eigen Colormap zu definieren. • Web-Browser verwenden eine feste Colormap. • Ideal für das Web: http://www.hta-bi.bfh.ch/~hew/webkueche/etc/colormap.html • Dithering • Zwischenfarbtöne durch Mischen von Farben aus der Farbpalette darstellen

  39. Das GIF-Format • Color table: Pro Bild optimiert, maximal 256 Farben. • Kompression: Verlustfrei, sog. run-length encoding • Interlacing: Sukzessive Verfeinerung eines zunächst groben Bildes • GIF89a • Transparenz • mehrere Bilder in einem File: Animation • Gut geeignet für • Grossflächige Bilder mit wenigen klaren Farben, Strichzeichnungen, Logos • Schlecht geeignet für • Photographien

  40. Das JPEG-Format • Farbpalette und Kompression • Ein ausgeklügeltes Verfahren für eine fast unbegrenzte Anzahl von Farben • Speziell für die digitale Speicherung von photographischen Bildern entwickelt • Mass der Kompression und damit Bildqualität einstellbar • Das Kompressionsverfahren ist nicht verlustfrei; d.h. die originale Bildqualität kann aus einem JPEG-komprimierten Bild nicht wiederhergestellt werden. • Besondere Eignung • Für Photographien und Bilder mit vielen Farbtönen • Ein praktischer Tipp für GIF- und JPEG-Bilder • Bilder immer auch im Originalformat des Graphik-Programms abspeichern! Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/kursdemos/graphics/index.html

  41. Framesets und Frames • <frameset>kann<body>ersetzen • <frameset>unterteilt das Anzeigefenster in mehrereTeilgebiete mit separatem Scrolling • Beispiel:<frameset rows=“100,*”> <frame name=“topbar” src=“top.html” scrolling=“no”> <frameset cols=“20%, *”> <frame name=“leftcol” src=“left.html”> <frame name=“rightcol” src=“right.html”> </frameset></frameset><noframe><body> gewöhnlicher HTML Text </body></noframes>

  42. Darstellen eines Dokuments in einem Frame • Das target= Attribut des <a> ElementsBeispiel:<a href=“pasta.html” target=“rightcol”>.. ..</a>Das File “pasta.html” wird ins Frame namens “rightcol” geladen, wenn der Link aktiviert wird. • Kein Target spezifiziert • Ersatz des aktuellen Frames • Ein nicht existierends Target spezifiziert • Eröffnen eines neuen Browser-Fensters Siehe auch http://www.hta-bi.bfh.ch/~hew/webkueche/gratins/index.html

  43. Aktive Bilder (Client side clickable images) (0,0) x <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/

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

  45. Häufige Fehler und Validierung • Falsche Schachtelung<b>Das ist <i>falsch</b> geschachtelt</i> • Abschluss-tag oder Abschlusszeichen vergessensrc=“bild.gif &eacute </ul> </a> • Verweise ins Leere http://home.snafu.de/tilman/xenulink.html/ • Absolute oder relative Pfade (URLs)Relative Pfade bleiben beim “Zügeln” von ganzen Verzeichnis-strukturen erhalten. • Validierung (Test auf syntaktische Korrektheit)http://validator.w3.org/

  46. Stilfragen und Hinweise • Navigationshilfen • Layout vom Browser und dessen Einstellung abhängig • Zeit für Bildaufbau so klein wie möglich halten • Farbgebung und Hintergründe • Links auf “Baustellen” • Warnung vor grossen Dateien: thumbnail pictures • Ein Link auf eine Sammlung von vielen nützlichen Links • http://www.hta-bi.bfh.ch/~hew/webkueche/graham/contents.html

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

  48. Gateway-Programme (cgi) • Gateway-Programme werden vom Server auf Veranlassung des Clients angestossen und produzieren (evt. unter anderem) ein HTML-Dokument, das dann vom Server an den Client zurück-geschickt wird. • Gateway-Programme sind entweder Scripts (z.B. shell oder perl) oder kompilierte Programme (z.B. C oder eine andere Sprache). Die Scriptsprache perl ist besonders verbreitet. • Es gibt Gateway-Programme für die Anbindung von Datenbanken. • Gateway-Programme stellen grundsätzlich ein gewisses Sicherheitsrisiko für den Serverbetreiber dar.

  49. Input und Output von Gateway-Programmen • OutputGateway-Programme schreiben auf ihren Standard-Output.Dem HTML-Dokument geht ein http response header voran. • InputEs gibt zwei Methoden, wie Gateway-Programme zu ihren Input-Daten kommen: GET und POST. • GET-Methode: Die Input-Daten werden vom Server aus-schliesslich in Environment-Variablen abgelegt und müssen vom Gateway-Programm dort abgeholt werden. • POST-Methode: Die eigentlichen Input-Daten werden via Standard-Input dem Gateway-Programm zugeführt.

  50. Hello world! - Nur Output #!/usr/local/bin/perl require "cgi-lib.pl"; require "ctime.pl"; $datum = &ctime(time); print &PrintHeader(); # http response header print <<EOH; # schreibe bis zur Marke EOH <html> <head><title>Hello world!</title></head> <body> <h1>Hello, world! It's $datum</h1> </body> </html> EOH

More Related