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

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

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

Aufbau einer HTML-Seite Meine Homepage Inhalt der Seite

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

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

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

Übung mit Attributen –Vorsicht mit Schriftarten und Farben

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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)

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

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

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

JavaScript Dokument- Objekt- Modell-

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

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

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

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