Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für Technik und Architektur Biel

Ähnliche Präsentationen


Präsentation zum Thema: "1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für Technik und Architektur Biel"—  Präsentation transkript:

1 1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für Technik und Architektur Biel 2000

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

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

4 4 Grundbegriffe Internet: Protokolle

5 5 Das Client/Server-Paradigma u 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 u 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 u Client und Server laufen in der Regel auf verschiedenen Rechnern u Clients sind aktiv, sie starten Anfragen meist auf Veranlassung eines Benutzers. Sie müssen nicht immer verfügbar sein. u Server dagegen sind passiv (warten auf Anfragen), müssen aber immer verfügbar, d.h. permanent am Internet sein und laufen.

6 6 Client Server Gateway-Programme File-System: HTML Files CGI Datenbank Helper Applications http response http request Das Zusammenspiel von Web-Client und -Server File Manager Editor Browser

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

8 8 Einfache Textdokumente in HTML u HTML - HyperText Markup Language u Ein HTML-Dokument ist in der Regel aus mehreren Teilen zusammengesetzt: Bilder und andere, in den Text eingestreute Elemente kommen aus separaten Files. u 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. u Beispiel:

9 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... welcome.html

10 10 HTML-Werkzeuge und Hilfsmittel u Browser: View -> Page Source und View -> Page Info u 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 u Converter von und nach HTML –http://www.w3.org/Tools/Filters.html u Es fehlen aber immer noch sehr gute Werkzeuge und Hilfsmittel u Nicht kaufen, was man anderswo besser und umsonst erhält!

11 11 HTML-Elemente und Syntax u HTML-Elemente und Tags Bsp: Dies ist ein Titel u Leere HTML-Elemente haben kein End-tag Bsp: neu in XHTML: u Tags können Attribute (mit oder ohne Wert) haben Bsp: XHTML: u Gross- und Kleinschreibung –für Elementnamen und Attributnamen irrelevant –für Attributwerte relevant –in XHTML: alles klein

12 12 HTML-Elemente und Syntax (2) Kommentare: Bsp: u Wortzwischenraum (white space): space, tab und new-line werden nicht unterschieden u Fliesstext; Zeilenumbruch: – neu: erzwingt neue Zeile – … verbietet Zeilenumbruch – wenn nötig Umbruch

13 13 Grundstruktur eines HTML-Dokuments Fenstertitel Inhalt des Dokuments

14 14 Hintergrund Farben: #rrggbb jeder Farbcode zwischen 00 und ff (hexadezimal) Es gibt auch englische Farbbezeichner: color=red

15 15 Ueberschriften und horiontale Trennlinien Grosser Titel Nicht ganz so grosser Titel Winziger Titel Titeltext horizontale Linieneu: neu:

16 16 Geordnete (nummerierte) Liste Analyse Design Implementation A, B, C,.. a, b, c,.. I, II, III,.. 5, 6, 7,..

17 17 Ungeordnete Listen Aepfel Birnen Nüsse

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

19 19 Textauszeichnung Logische (semantische) Auszeichnungen wichtig hervorgehoben Zitat und viele andere … Physische Auszeichnungen fett kursiv unterstrichen gross klein und noch ein paar andere (einige davon nicht normiert)

20 20 Textgrösse und Schriftart Blocksatz.... Blocksatz vorformatiert bis ist ziemlich schlecht normiert: Stylesheets verwenden!

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

22 22 Textabsätze und Ausrichtung Anfang eines neuen Absatzes: neuer Absatz neuer Absatz links angeschlagen neuer Absatz zentriert neuer Absatz rechts angeschlagen End-tag fakultativ XHTML: ……… End-tag obligatorisch Mehrere Elemente zentrieren:......

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

24 24 Marken und Links in HTML-Dokumenten Marke setzen: Verweis auf Marke im gleichen HTML-Dokument: Verweis-Text Verweis auf Marke in einem anderen HTML-Dokument: Verweis-Text Allgemeine Form von Verweisen: Verweis-Text

25 25 Typen von URL (1) u lokal = auf dem gleichen Server u 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.

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

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

28 28 Bilder ins HTML-Dokument einsetzen Bild einsetzen Bild mit Alternativtext (Balloon) Bild mit Rahmen Bild mit Freiraum

29 29 Bilder ausrichten Bild relativ zur Schreiblinie platzieren: Beispiel: align = top middle bottom Textlinie Siehe auch

30 30 Text um Bilder fliessen lassen und Bildgrösse setzen Bild links anschlagen: Beispiel: Der nachfolgende Text fliesst rechts am Bild entlang und dann unten wieder bis an den linken Rand. Mit Text unterhalb eines Bildes weiterfahren: Bildgrösse festlegen:

31 31 Bilder als Verweise Ein Beispiel: Ohne blauen Rahmen: u Achtung auf white space im Innern von -Elementen, also so:

32 32 Tabellen eins zwei alfa alfa-eins alfa-zwei eins zwei alfaalfa-einsalfa-zwei Die End-tags, und waren zwar fakultativ, aber... XHTML: End-tags obligatorisch Siehe auch

33 33 Einige Attribute des Elements Gitternetzlinien und Freiraum Gitternetzlinien und Rand anzeigen Breite der Randlinien Raum um die Tabelle herum Tabellengrösse Breite in Pixel Breite in % des Anzeigefensters Höhe in Pixel Hintergrund, Zwischenräume und Randabstände Hintergrundfarbe der ganzen Tabelle Hintergrundbild der Tabelle Raum zwischen den Zellen Abstand des Inhalts vom Zellenrand

34 34 Weitere Attribute für Tabellen Grösse der Tabellenelemente Zellenbreite Zellenhöhe Ausrichtung der Tabelleninhalte Zelleninhalt (z.B. Text) linksbündig Zelleninhalt unten bündig Hintergrundfarbe Hintergrundfarbe der ganzen Reihe Hintergrundfarbe der Zelle u Viele nicht standardisierte Erweiterungen!

35 35 Tabellenelemente zusammenfassen eins zwei drei vier eins drei vier zwei

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

37 37 Farbmodelle u 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 u Alternative: HSB –Hue (Farbton), Saturation (Sättigung), Luminance (Leuchtkraft, Helligkeit) u Transparenz –Eine vierte Komponente: alpha u Gamma-Korrektur –Anpassung an den verwendeten Farbmonitor

38 38 Farbpaletten und Farbdarstellung u Reduktion der Datenmenge –RGB mit 8 Bit pro Farbe ergibt 2 24 = 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. u 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: u Dithering –Zwischenfarbtöne durch Mischen von Farben aus der Farbpalette darstellen

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

40 40 Das JPEG-Format u 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. u Besondere Eignung –Für Photographien und Bilder mit vielen Farbtönen u Ein praktischer Tipp für GIF- und JPEG-Bilder –Bilder immer auch im Originalformat des Graphik-Programms abspeichern! Siehe auch

41 41 Framesets und Frames kann ersetzen unterteilt das Anzeigefenster in mehrere Teilgebiete mit separatem Scrolling Beispiel: gewöhnlicher HTML Text

42 42 Darstellen eines Dokuments in einem Frame Das target= Attribut des Elements Beispiel:.... Das File pasta.html wird ins Frame namens rightcol geladen, wenn der Link aktiviert wird. u Kein Target spezifiziert –Ersatz des aktuellen Frames u Ein nicht existierends Target spezifiziert –Eröffnen eines neuen Browser-Fensters Siehe auch

43 43 Aktive Bilder (Client side clickable images) (0,0) x (360,300) bild.gif y Kreis u Es gibt Programme, die beim Erstellen der Map helfen Beispiel: Siehe auch

44 44 Aktive Bilder (Server side clickable images) HTML-Dokument: (0,0) x (360,300) Image map imap : circle(240,260) 55 /pfad/kreis.html rectangle(65,40) (210,220) /pfad/rechteck.html default bild.gif y Eine Alternative zu htimage ist das Programm imagemap

45 45 Häufige Fehler und Validierung Falsche Schachtelung Das ist falsch geschachtelt Abschluss-tag oder Abschlusszeichen vergessen src=bild.gif é u Verweise ins Leere u Absolute oder relative Pfade (URLs) Relative Pfade bleiben beim Zügeln von ganzen Verzeichnis- strukturen erhalten. u Validierung (Test auf syntaktische Korrektheit)

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

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

48 48 Gateway-Programme (cgi) u 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. u 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. u Es gibt Gateway-Programme für die Anbindung von Datenbanken. u Gateway-Programme stellen grundsätzlich ein gewisses Sicherheitsrisiko für den Serverbetreiber dar.

49 49 Input und Output von Gateway-Programmen u Output Gateway-Programme schreiben auf ihren Standard-Output. Dem HTML-Dokument geht ein http response header voran. u 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.

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

51 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 header print <

52 52 GET- und POST-Methode u GET Die Input-Daten werden in URL-encoded form in der Environment- Varaiblen QUERY_STRING abgelegt. u POST Die Input-Daten werden in URL-encoded form vom Standard-Input gelesen. u Einige weitere HTTP-Methoden: HEAD, PUT, DELETE, LINK, UNLINK, TEXTSEARCH

53 53 Einige Environment-Variablen u SERVER_NAME u SERVER_PORT u REQUEST_METHOD u PATH_INFO u PATH_TRANSLATED u SCRIPT_NAME u QUERY_STRING u CONTENT_TYPE u CONTENT_LENGTH u Test-Programm: /I/cgi/restricted/cgi-test

54 54 Ein einfaches Formular

55 55 Formulare.... method=post oder method=get (default) action=.../cgi/cgi-script/additional/path/

56 56 Das Formularelement

57 57 und... Text, der zu Beginn im Fenster erscheint

58 58 feedback u Ein Gateway-Programm, das Formulare mit beliebigen Feldern auswertet und das Resultat per an eine gegebene Adresse sendet. -Adresse Beispiel: Antwortmuster HTML Beispiel: Antwortmuster Beispiel: u Anleitung:


Herunterladen ppt "1 Kurs HTML: Erstellen von Web-Seiten Ein Kurs für die Praxis … … an der Hochschule für Technik und Architektur Biel"

Ähnliche Präsentationen


Google-Anzeigen