World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und Systemübergreifend Für CERN-Konferenz entwickelt (Übertragung.

Präsentation zum Thema: "World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und Systemübergreifend Für CERN-Konferenz entwickelt (Übertragung."—  Präsentation transkript:

1 World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und Systemübergreifend Für CERN-Konferenz entwickelt (Übertragung von wissenschaftlichen Daten)

2 Hypertext Markup Language Hypertext: Text mit verborgenen Verweisen Markup Language: Sprache, die aus Kennungen (Tags) besteht, die Formatierungsanweisungen beinhalten Vom Browser interpretiert Dialekt der SGML Offizielle Kontrollorganisation

3 Erstellen von HTML-Seiten Tags Tags mit und ohne Abschlußteil Klein/Großbuchstaben Verschachteln erlaubt – Reihenfolge beachten.........................

4 Aufbau einer HTML-Seite Meine Homepage Inhalt der Seite

5 Stil-Tags Dieser Text soll fett erscheinen Dieser Text wird kursiv dargestellt und dieser beide Unterstreichung vermeiden

6 Dokument-Formatierung Überschriften..... Absatz......

7 Attribute Legen die Eigenschaften der Tags fest. Attribute brauchen meistens Werte. Einige Tags sind nutzlos ohne Attribute. Einige Tags nehmen mehrere Attribute.....

8 Übung mit Attributen –Vorsicht mit Schriftarten und Farben

9 Listen & Aufzählungen Die ungeordnete Liste.... Das Tag Die geordnete Liste... Verschachtelte Listen Attribute von Listen –TYPE, START, VALUE

10 Sonderzeichen ASCII-Zeichen direkt unterstützt Nichtsystem-Zeichen und reservierte Zeichen sind Sonderzeichen ä Ä ß <...> & A-Z a-z 1-9 Ä ä Ö ö Ü ü ß & mäszlig;ig mäßig

11 Grafiken einbetten Das Tag JPEG / GIF Das SRC Attribut –Pfade richtig schreiben –Keine „file“ URLs –Keine Sonderzeichen Klein halten –Thumbnails

12 Das Tag - weitere Attribute WIDTH Grafikbreite HEIGHTGrafikhöhe ALTAlternativ-Text ALIGNAusrichtung – Text unterbrechen bis Grafikende BORDERUmrandung der Grafik HSPACEHorizontaler Leerraum um Grafik VSPACEVertikaler Leerraum um Grafik

13 Hyperlinks einsetzen Das Anker Tag.... Link-Objekte Das HREF Attribut Pfade richtig schreiben –keine file (absolute) URLs –“../../ordner/datei.htm“ Interne Links- Das NAME Attribut

14 Tabellen - wichtige Formatierungshilfe Tabellen erlauben –Positionierung –Abstand- Bestimmung (bspw. Rand) –Ausrichtung –mehrere Hintergrundfarben benutzen –Rahmen

15 Tabellen erstellen1 (Tags) Die Tags Definition der Tabelle Definition einer Zeile (Row) Definition einer Zelle (Data) Inhalt der Zelle kommt hier Ende der Zelle Ende der Zeile Ende der Tabelle

16 Globale Eigenschaften der Tabelle bestimmen –ALIGN(Ausrichtung der Tabelle) –VALIGN(Vertikale Ausrichtung) –BORDER(Umrandung der Tabelle) –CELLSPACING(Abstand zw. Zellen) –CELLPADDING(Abstand vom Zellenrand) –WIDTH(Breite der Tabelle) –HEIGHT(Höhe der Tabelle) –BGCOLOR(Hintergrundfarbe) –BACKGROUND(Hintergrundbild)

17 Zeilen- und Zellenattribute Zeilenattribute –ALIGN –VALIGN Zellenatribute –ALIGN –VALIGN –WIDTH –HEIGTH –ROWSPAN –COLSPAN –NOWRAP –BGCOLOR –BACKGROUND

18 Farben 2 Möglickeiten –durch Farbname (englischer Name) –durch den RGB-Wert 16.777.216 Kombinationen COLOR=“#00ff00”

19 Frames Mehrere HTML- Seiten gleichzeitig Vorteile für (fast) alle –Für den Autor –Für den Benutzer –Für den Auftraggeber

20 Frames erstellen (1) Das Tag –ROWS –COLS –% px * Das Tag –Alternativ anbieten

21 Frames erstellen (2) Das Tag –SRCURL der Seite –NAMEum den Frame anzusprechen –MARGINWIDTHUmrandung des Frames –MARGINHEIGHT –FRAMESPACING –FRAMEBORDER –SCROLLINGOb Scrollbalken vorhanden –NORESIZEOb Größe veränderbar

22 Frames steuern Das Tag Das TARGET Attribut –im.. –im TARGET= “_BLANK” “_PARENT” “_SELF” “_TOP”

23 Formulare –erlauben Interaktivität –brauchen (meistens) cgi-script oder ASP Felder sollen benannt werden Das.. -Tag

24 Formular-Felder <INPUT TYPE= –TEXT> (1 zeiliges Textfeld) –PASSWORD> (wie „TEXT“ mit Sternchen) –RADIO> (Radiobuttons einfache Auswahl möglich) –CHECKBOX> (mehrfache Auswahl möglich ) –SUBMIT>(Formular abschicken) –RESET>(Formular zurücksetzen) –BUTTON>(Ohne vorgeschriebene Funktion)

25 Formular-Felder (2) –mehrzeiliges Textfeld SELECT (Combo-Box) opt1

26 DHTML, CSS & LAYERS HTML 4 - Dynamisches HTML Neue Tags Alle Objekte ansprechbar und manipulierbar Genaue Positionierung in drei Dimensionen CASCADING STYLE SHEETS -- Microsoft Technology für HTML 4 LAYERS- Die Netscape Version Nicht kompatibel Skriptsprache wichtig

27 Skripte Clientside Arten –JavaScript –VBScript Einsatz –Formulare überprüfen –Mouseover-Effekte –Frames Ansteuern –u.v.m. Serverside Arten –PERL –LISP –VBSCRIPT –JavaScript Einsatz –Formulare abfangen –Dynamischer Seitenaufbau

28 JavaScript Dokument- Objekt- Modell-

29 JavaScript einsetzen Das.. -Tag –LANGUAGE (JavaScript oder VBScript) –SRC Adressierung –objekt.eigenschaft oder objekt.methode() Funktionen –function() {............} –Immer wieder ausführbarer Codeblock

30 Mehrfacher Framewechsel Location- Eigenschaft des document-Objekts Ansprechen anderer Frames über “parent“ JavaScript mit... aufrufen.

31 MouseOver-Effekte onMouseOver onMouseOut –Event-Handlers des Anker-Objekts image(s) –Eigenschaften des document-Objekts src & name –Eigenschaften des image-Objekts

32 MouseOver-Quellcode Funktion im Script- Tag im Seitenkopf Eventhandlers mit Parameter im Hyperlink-Tag Benennung des Images