Web und Multimedia. HTML 4.x, Teil 1. Quelle: Hess HTML4

Transkript

1 Web und Multimedia HTML 4.x, Teil 1 1

2 Inhalte Einführung in HTML Textgestaltung -HTML - Cascading Style Sheets Screenlayout - HTML (Tabellen) - Frames - Cascading Style Sheets Hyperlinks Formulare 2

3 Was ist HTML? HTML = Hypertext Markup Language HTML ist keine Programmiersprache sondern eine Auszeichnungssprache für Texte. D.h. mit HTML wird lediglich beschrieben, wie Dokumente in einem Browser dargestellt werden sollen. 3

4 Einige HTML-Ressourcen HTML 4.0 Reference der Web Design Group W3C HTML Specification SelfHTML - Das HTML-Kompendium!!! W3C HTML Validation Service Online HTML-Einführung HTML-Tutor, interaktives Web-basiertes Lernprogramm 4

5 Wie funktioniert HTML? HTML-Dateien werden nicht wie bei den meisten Programmiersprachen üblich, zu einer ausführbaren Datei kompiliert, sondern Zeile für Zeile von einem Browser interpretiert. Der Browser reagiert dabei auf die HTML- Befehle, die sogenannten Tags. 5

6 Wie funktioniert HTML? Der Browser unterscheidet die Tags von den übrigen Zeichen im Dokument dadurch, dass sie in spitze Klammern eingefasst sind. Innerhalb der spitzen Klammern steht dann ein einzelner Buchstabe oder eine Zeichenkette. Es handelt sich dabei um eine Abkürzung für die gewünschte Funktion. Beispiel: <b> b ist die Abkürzung für bold = fett 6

7 Wie funktioniert HTML? Der Text des Dokuments muss dabei von den Tags eingerahmt sein. D.h. am Anfang steht ein öffnendes Tag und nach dem Text steht ein schliessendes Tag. Das schliessende Tag wird durch einen Schrägstrich nach der spitzen Klammer gekennzeichnet. Beispiel: <b>dieser Text wird fett dargestellt </b> 7

8 Der Ursprung von HTML Der Ursprung von HTML liegt in SGML. Das ist die Abkürzung für Standard Generalized Markup Language. Diese Sprache wurde 1978 von der Firma IBM als einheitliche Sprache zur Darstellung bzw. Beschreibung von Dokumenten entwickelt. 8

9 Grundgerüst einer HTML-Datei Der Anfang eines HTML- Dokument wird dem <html> - Tag gekennzeichnet. Das Ende eines HTML-Dokuments wird mit </html> gekennzeichnet. 9

10 Grundgerüst einer HTML-Datei Ein HTML-Dokument besteht aus drei Teilen: Document Type Definition Header Body Der Header wird mit den Tags <head>...</head> gekennzeichnet. Er enthält Angaben zur Datei selbst. Der Body wird mit den Tags <body>...</body> gekennzeichnet. Er enthält den eigentlichen HTML-Code sowie den darzustellenden Text des Dokuments. 10

11 Document Type Definitions (DTDs) - SGML-gerechte Angabe zur verwendeten HTML-Version - Hinweis auf eine bestimmte HTML-Spezifikation = DTD - Weglassen bei derzeitigen WWW-Browsern noch ohne Konsequenzen, wichtig für nahe Zukunft (NS 7.x, IE 6.x,...) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> HTMLVersion 4.0 und Style-Sheets und/oder Scriptsprache <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 FRAMESET//EN"> HTMLVersion 4.0 und Frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> HTMLVersion

12 Document Type Definitions (DTDs) Bei HTML 4.x die offizielle Internet-Adresse der DTDs angeben: HTML-4.0-Standard plus Elemente, die demnächst aus dem Standard entfernt werden (z.b <font> oder <center>) Strikte Verwendung des HTML 4.0 Standards Für HTML-Dateien, in denen die Frame-Sets definiert sind 12

13 Grundgerüst einer HTML-Datei Beispiel <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html> <head> </head> <body> </body> </html> <title> Hier wird der Titel eingetragen</title> In diesem Bereich befindet sich der Code bzw. Inhalt des Dokuments 13

14 Meta-Tags im Header Optimieren die Webseite für gezielte Abfragen von Suchmaschinen. Unterstützen die systematische Erfassung von Informationen über den Inhalt der Seite. Dies erhöht die Übersichtlichkeit insbesondere auch für die Autoren und erleichtert die langfristige Programmpflege. 14

15 Meta-Tags im Header Mögliche Werte für das meta-attribut name author description date keywords audience Name des Autors der Seite aussagekräftige Inhaltsangabe Erstellungsdatum der Seite Schlüsselwörter für Suchbegriffe von Suchmaschinen Zielgruppe für den dargestellten Seiteninhalt 15

16 Meta-Tags im Header Ein Meta-Tag hat die folgende Struktur: <meta name="author" content="dr. Knox"> name bezeichnet die Art der Information content enthält die Information META Medic: 16

17 Meta-Tags im Header <head> BEISPIEL <meta name="author" content="dr. Knox"> <meta name= "description" content= "Architektur der Villa Knox "> <meta name="keywords" content= "Architektur, Villa, Knox"> <meta name="date" content= " "> <meta name="audience" content= "Architekten,Erfinder, Fix und Foxi"> </head> 17

18 Kommentare Tag für Kommentar:  Beispiel:  18

19 Arbeiten mit Text Textumbrüche Standardmässig wird der Text im Browser nur in Abhängigkeit von der Grösse des geöffneten Browserfensters umgebrochen. Um Texte zu gliedern, muss an bestimmten Stellen ein Zeilenumbruch erzwungen werden. Dazu wird das Tag <br> verwendet. Wenn ein Zeilenumbruch bei kleinen Browserfenstern verhindert werden soll, wird der gewünschte Text zwischen das Tag <nobr> </nobr> eingefügt. 19

20 Arbeiten mit Text Textumbrüche Absätze werden mit dem Tag <p> eingefügt. Absätze können auch in einen öffnenden und einen schliessenden Absatztag gekennzeichnet werden. <p>absatz </p> Dies ist dann vorteilhaft, wenn bestimmte Formatierungen für den Bereich des Absatzes festgelegt werden sollen. 20

21 Arbeiten mit Text Textumbrüche: Beispiel für <p> und <br> <html> <head> <title>zeilenumbruch</title> </head> <body> Dieser Satz wird in der nächsten <br> Zeile fortgesetzt. <br> Nach diesem Satz folgt ein Absatz. <p> Stimmt. </body> </html> 21

22 Arbeiten mit Text Textumbrüche: <&nbsp> Mit <&nbsp> kann ein automatischer Zeilenumbruch zwischen Wörtern verhindert werden, die immer zusammen stehen sollen. z.b. COREL DRAW 8 COREL <&nbsp> DRAW <&nbsp> 8 22

23 Arbeiten mit Text Absätze ausrichten mit align Mit <p> und </p> eingefasste Absätze können mit align links, zentriert oder rechts ausgerichtet werden. D.h. der Text wird immer am Rand des aktuellen Fensters ausgerichtet und nicht an dem zuletzt ausgerichtetem Element einer Webseite. 23

24 Arbeiten mit Text Absätze ausrichten mit align, Beispiel: <html> <head> <title>text ausrichten</title> </head> <body> <p align=left>dieser Satz steht links</p> <p align=center>dieser Satz steht zentriert</p> <p align=right>dieser Satz steht rechts</p> </body> </html> 24

25 Arbeiten mit Text Absätze ausrichten mit align, Beispiel:

26 Arbeiten mit Text Schriftfarbe und Schriftgrösse Möglichkeiten der Formatierung: 1. Tags <font> und <basefont> 2. Seit HTML4: Cascading Style Sheets 26

27 Arbeiten mit Text Schriftfarbe, Schriftart und Schriftgrösse Formatierung mit <font> Ermöglicht die einfache Veränderung von Schriftattributen relativ zur Standardschrift. Beispiel: <font size=7> Die Schriftattribute sind: size für die Schriftgrösse (Werte 1-7) color fürt die Schriftfarbe (Farbbezeichnungen oder Zahlenwerte) face für die Schriftart (Name der Schriftart) 27

28 Arbeiten mit Text Schriftfarbe, Schriftart und Schriftgrösse <html> <head><title>farbe und Größe</title></head> <body> <font size=7>das ist recht groß</font> <br> <font size=1>das ist klein</font> <p> <font color="#ff0000">text ist rot</font> <p> <font face="arial">diese Schrift heißt Arial</font> <p> <font face="times NEW ROMAN">Diese Schrift heißt Times New Roman</font> </body></html> 28

29 Arbeiten mit Text Schriftfarbe, Schriftart und Schriftgrösse

30 Arbeiten mit Text Schriftfarbe, Schriftart und Schriftgrösse Formatierung mit <basefont> Legt eine Standardschriftart fest. Der Tag wird im Gegensatz zum <font>-tag nicht geschlossen. Beispiel: <basefont size=7> Die Schriftattribute sind äquivalent zum font-tag: size für die Schriftgrösse (Werte 1-7) color für die Schriftfarbe (Farbbezeichnungen oder Zahlenwerte) face für die Schriftart (Name der Schriftart) 30

31 Arbeiten mit Text Überschriften Die Schriftgrösse einer Überschrift wird mit den Tags <h1> bis <h6> festgelegt. Beispiel: <h1>überschrift </h1> <h1> erzeugt die grösste Überschrift <h6> erzeugt die kleinste Überschrift Mit align=left/center/right kann eine Überschrift ausgerichtet werden. 31

32 Arbeiten mit Text Weitere Tags für Texthervorhebungen <em></em> <code></code> <samp></samp> <cite></cite> <big></big> <small></small> <sub></sub> <sup></sup> <b></b> <tt></tt> <i></i> <s></s> Kursiv Formatierung von Listings Formatierung von Beispieltexten Formatierung von Zitaten Größerer Text Kleinerer Text Tiefergestellter Text Hochgestellter Text Fett Teletype kursiv Durchgestrichen 32

33 Arbeiten mit Text Weitere Tags für Texthervorhebungen

34 Arbeiten mit Text - CSS Cascading Style Sheets - CSS Viele der bisherigen Unzulänglichkeiten von HTML können Style Sheets beseitigt werden. Mit CSS kann ohne Beschränkungen formatiert und Seiteninhalte können auf den Millimeter genau ausgerichtet werden. Style Sheets sind eine direkte Erweiterung zu HTML. Die CSS-Befehle können nahtlos in HTML integriert werden. 34

35 Arbeiten mit Text - CSS-Ressourcen CSS Reference der Web Design Group W3C CSS Specification SelfHTML - Ein CSS-Kompendium W3C CSS Validation Service House of Style: CSS Tutorials etc. 35

36 Arbeiten mit Text - CSS Style Sheets definieren Die Definition von Style Sheets erfolgt im Kopf einer HTML-Datei, also innerhalb des Bereichs <head>... </head>. Jede Definition beginnt mit dem eröffnenden Tag <style> und muss mit dem abschliessenden Tag </style> wieder beendet werden. 36

37 Arbeiten mit Text - CSS Style Sheets definieren Zusammen mit dem Tag style ist die Angabe des Attributs type notwendig. Hiermit erfährt der Browser um welchen Dialekt von CSS es sich handelt. <html> <head> <title>titel</title> <style type='text/css'>... </style> </head> <body></body> </html> 37

38 Arbeiten mit Text - CSS Mit Style Sheets Tags zentral formatieren Mit Cascading Style Sheets können die Anwender bisher aus HTML bekannten Tags neue Formatierungen zuweisen. h1 { font-size: xx-large; text-align: right;} Die Tags werden so zentral mit bestimmten Formaten versehen. Beim Aufrufen des Tags werden diese dann im angegebenen Format ausgeführt, welches innerhalb der gesamten Datei gültig ist. 38

39 Arbeiten mit Text - CSS Mit Style Sheets Tags zentral formatieren Beispiel: <html><head> <title>zentrale Formate</title> <style type="text/css"> h3 {color: blue; font-size:36pt} </style> </head> <body> <h3>die formatierte Überschrift</h3> </body></html> 39

40 Arbeiten mit Text - CSS Mit Style Sheets Tags zentral formatieren Auch dem body-tag kann mit CSS zentral ein Format zugewiesen werden. Für das body-tag festgelegte Schrift- und Textformate gelten für den gesamten Dokument-Body als Standarteinstellung. <style type="text/css" body {font-size:12p, text-indent:3em;} </style> 40

41 Arbeiten mit Text - CSS Mit Style Sheets Tags lokal formatieren Formatierungen mit CSS können aber nicht nur im Kopf, sondern auch direkt im Text vorgenommen werden. Dies ist dann sinnvoll, wenn ein zentral angelegtes Format für ein Tag an einer bestimmten Stelle ausnahmsweise nicht verwendet werden soll. In diesem Fall wird dann lokal eine neue Formatierung vorgenommen. Die lokal definierte Formatierung hat immer Vorrang. 41

42 Arbeiten mit Text - CSS Mit Style Sheets Tags lokal formatieren <body> <h3 style="color:#ff00ff; font-style:italic; "> Die formatierte Überschrift </h3> </body> Die Angabe des Arguments style erfolgt direkt vor dem zu formatierenden Text. Die Formatangaben werden in Anführungszeichen gesetzt. Nach Angabe des Formats folgt ein Doppelpunkt mit dem Formatwert und einem abschliessenden Semikolon. 42

43 Arbeiten mit Text - CSS Mit Style Sheets Tags lokal formatieren Die lokale Formatierung verliert mit dem Abschluss des Tags sofort wieder ihre Gültigkeit, und ein zentral vergebenes Format ist wieder bestimmend. 43

44 Arbeiten mit Text - CSS CSS-Definitionen in externen Dateien Wenn alle HTML-Seiten einer Web-Anwendung gleichartig formatiert werden sollen, könnten in alle HTML-Seiten die gleichen Style-Sheet-Definitionen in den Header kopiert werden. Eine andere Möglichkeit ist, die Style-Sheet- Definitionen in einer externen Datei abzulegen, auf die dann alle HTML-Files zugreifen, wenn sie geöffnet werden. 44

45 Arbeiten mit Text - CSS CSS-Definitionen in externen Dateien Nachträgliche Format-Änderungen müssen nicht in jeder einzelnen HTML-Seite vorgenommen werden, sondern können zentral in dem externen Dokument eingetragen werden. Vorgehen: Mit einem Standardtext- oder CSS-Editor wird eine ASCII-Textdatei mit der Endung.css angelegt. Im Kopf der HTML-Datei wird ein Link zu dieser Datei angelegt. 45

46 Arbeiten mit Text - CSS CSS-Definitionen in externen Dateien Beispiel: <head> <title> Titel </title> <link rel= "stylesheet" type="text/css" href="myformat.css"> <style type="text/css">...</style> </head> Text in einer CSS-Datei: H1 {font-size: 20pt; font-family: Arial; font-weight: bold; text-align: center} H3 {font-size: 14pt; font-family: Arial; font-weight: bold;color: "8000ff"} H5 {font-size: 12pt; font-family: Arial; font-weight: bold; color: "8000ff"} A {color: blue; active:red; visited:green} 46

47 Arbeiten mit Text - CSS Style-Sheet Klassen verwenden Mit Klassen ist es möglich für einzelne Tags mehrere Formatierungen festzulegen. Z.B. können mehre Formatierungen für das Tag h4 festgelegt werden. Dabei ist jeder Formatierungsart durch einen Klassennamen eindeutig gekennzeichnet. Dieser Klassenname muss dann bei der Formatzuweisung mit angegeben werden. 47

48 Arbeiten mit Text - CSS Beispiel: Style-Sheet Klassen verwenden <html><head> <style type="text/css"> i.klein {font-size:15pt; color:red;} i.gross {font-size:20pt; color:red;} </style> </head> <body> <i class="klein">kleine rote Kursivschrift</i><p> <i class="gross">große rote Kursivschrift</i><p> </body></html> 48

49 Arbeiten mit Text - CSS Style-Sheet Klassen für alle Tags Es gibt die Möglichkeit Style-Sheet Klassen zu entwerfen, die auf alle Tags angewendet werden können. Dies ist möglich, wenn vor den Klassennamen das Wort 'all' einsetzt wird. 49

50 Arbeiten mit Text - CSS Beispiel: Style-Sheet Klassen für alle Tags <html><head> <title>klassen verwenden</title> <style type="text/css"> all.mittel {font-size:20pt; color:black;} </style> </head> <body> <u class="mittel">das gilt für alle Tags</u><p> <i class="mittel">das gilt für alle Tags</i><p> </body> </html> 50

51 Arbeiten mit Text - CSS CSS Formatieren ohne Grenzen? Style Sheets bieten nicht nur Vorteile bei der Vereinheitlichung der Formatierung von Dokumenten. Im Vergleich zu HTML sind die Möglichkeiten zur Textgestaltung viel ausgefeilter. Es gibt einen grossen Katalog von Attributen zur Schriftgestaltung, der wenig Wünsche offen lässt. Allerdings: CSS 1 vs. CSS 2 und deren Implementierung in den Browsern 51

52 Arbeiten mit Text - CSS CSS Formatieren ohne Grenzen - Schriftgrösse Mit Style Sheets ist die Bindung an eine kleine Auswahl von Standartschriftgrössen obsolet. Es gibt eine grosse Auswahl von Masseinheiten, die bei Bedarf ausgewählt werden können. Diese Masseinheiten sind entweder relativ oder absolut. 52

53 Arbeiten mit Text - CSS CSS Relative Schriftgrösse Relative Masseinheiten: Attribut font-size:"... " % In Prozent zur Elementgröße em Bezogen auf die Höhe der Schriftart (1 em ist die Höhe des Fonts) ex Bezogen auf die halbe Höhe der Schriftart px In Pixel der Bildschirmgröße 53

54 Arbeiten mit Text - CSS CSS Absolute Schriftgrösse Absolute Masseinheiten: Attribut font-size:"... " cm in mm pt Zentimeter Inch Millimeter Punkt 54

55 Arbeiten mit Text - CSS CSS Relative Schriftformatierung Relative Ausdrücke für die Schriftstärke: Attribut font-weight:"... " lighter smaller bolder larger Dünner als die typische Elementgröße Kleiner als die typische Elementgröße Dicker als die typische Elementgröße Grösser als die typische Elementgröße 55

56 Arbeiten mit Text - CSS CSS Relative Schriftgrösse Weitere Relative Ausdrücke: Attribut font-size:"... " xx-small x-small small thin normal Extrem klein Sehr klein Klein Dünn Normal thick large x-large xx-large Dick Groß Sehr gross Extrem gross 56

57 Arbeiten mit Text - CSS CSS Schriftarten Die Definition der Schriftart erfolgt mit dem Attribut font-family. font-family wird die gewünschte Schriftart zugewiesen. h3 {font-family:arial;} 57

58 Arbeiten mit Text - CSS CSS Eingabe von alternativen Schriftarten Beispiel: h3 {font-family: arial, helvetica, garamond;} Die alternativen Schriftarten werden einfach nach dem Komma angefügt. 58

59 Arbeiten mit Text - CSS CSS im Header Das Schema font-size Tag h1 p body.. Attribut font-size font-family text-align textdecoration.. Wert (font-size) relativ xx-small x-small small thin Medium thick large x-large xx-large Wert (font-size) Relative Masseinheiten % Em Ex px Wert (font-size) Absolute Masseinheiten cm in mm pt 59

60 Arbeiten mit Text - CSS CSS im Header Das Schema font-family Tag h1 p body.. Attribut font-size font-family text-align textdecoration.. Wert (font-family) Abadi MT Agency FB Algerian Allegro BT Arial Arial Black Arial Rounded Arial Unicode... 60

61 Arbeiten mit Text - CSS CSS im Header Das Schema text-align Tag h1 p body.. Attribut font-size font-family text-align textdecoration.. Wert (textalign) left center right justify 61

62 Arbeiten mit Text - CSS CSS im Header Das Schema text-decoration Tag h1 p body.. Attribut font-size font-family text-align textdecoration.. Wert (text-decoration) underline overline line-through 62

63 Diese Folien basieren auf der Multimedia-Vorlesung 2002/03 des Studiengangs Wirtschaftsinformatik an der Fachhochschule Solothurn Nordwestschweiz. Die Modulverantwortung lag bei Prof. Maike Franzen (FHSO). Die Folien wurden zuletzt vom externen Lehrbeauftragten Dr. Thomas Piendl überarbeitet und 2002/03 gezeigt: Prof. Maike Franzen Fachhochschule Solothurn Nordwestschweiz Riggenbachstr. 16 CH-4600 Olten Dr. Thomas Piendl NET - Network for Educational Technology ETH Zentrum SOW G 15 Sonneggstrasse 63 CH-8092 Zuerich 63