Listen

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

• ltTAGgt
• ltTAGgt......lt/TAGgt
• lttAggt........lt/TaGgt
• ltTAG1gtltTAG2gt.....
• lt/TAG2gt......lt/TAG1gt

4
Aufbau einer HTML-Seite

• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• Meine Homepage
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Inhalt der Seite
• lt/BODYgt
• lt/HTMLgt

5
Stil-Tags

• Dieser Text ltSTRONGgt soll fett erscheinen
  lt/STRONGgt
• Dieser TextltEMgtwird kursiv lt/EMgt dargestellt
• und dieser ltSTRONGgt ltEMgt beide lt/EMgt ltSTRONGgt
• Unterstreichung vermeiden

6
Dokument-Formatierung

• Überschriften ltHngt.....lt/Hngt
• Absatz ltPgt...lt/Pgt
• ltADDRESSgt... lt/ADDRESSgt

7
Attribute

• Legen die Eigenschaften der Tags fest.
• Attribute brauchen meistens Werte.
• Einige Tags sind nutzlos ohne Attribute.
• Einige Tags nehmen mehrere Attribute.
• ltTAG ATTRIBUT1WERT 1gt ....lt/TAGgt

8
Übung mit Attributen

• ltP ALIGNRIGHTgt
• ltDIV ALIGNCENTERgt
• ltFONT FACECOMIC SANS MS SIZE1 COLORWHITEgt
• Vorsicht mit Schriftarten und Farben
• ltBODY BGCOLORBLUEgt
• ltHR SIZE10 WIDTH50 NOSHADOWgt

9
Listen Aufzählungen

• Die ungeordnete Liste ltULgt....lt/ULgt
• Das ltLIgt Tag
• Die geordnete Liste ltOLgt...lt/OLgt
• Verschachtelte Listen
• Attribute von Listen
• TYPE, START, VALUE

10
Sonderzeichen

• ASCII-Zeichen direkt unterstützt
• Nichtsystem-Zeichen und reservierte Zeichen sind
  Sonderzeichen
• auml Auml
• szlig
• lt...gt amp

• A-Z a-z
• 1-9
• Ä ä Ö ö Ü ü ß lt gt
• maumlszligig mäßig

11
Grafiken einbetten

• Das ltIMGgt Tag
• JPEG / GIF
• Das SRC Attribut
• Pfade richtig schreiben
• Keine file URLs
• Keine Sonderzeichen
• Klein halten
• Thumbnails

12
Das ltIMGgt Tag - weitere Attribute

• WIDTH Grafikbreite
• HEIGHT Grafikhöhe
• ALT Alternativ-Text
• ALIGN Ausrichtung
• ltBR CLEARgt Text unterbrechen bis Grafikende
• BORDER Umrandung der Grafik
• HSPACE Horizontaler Leerraum um Grafik
• VSPACE Vertikaler Leerraum um Grafik

13
Hyperlinks einsetzen

• Das Anker Tag ltAgt....lt/Agt
• 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
• ltTABLEgt Definition der Tabelle
• ltTRgt Definition einer Zeile (Row)
• ltTDgt Definition einer Zelle (Data)
• Inhalt der Zelle kommt hier
• lt/TDgt Ende der Zelle
• lt/TRgt Ende der Zeile
• lt/TABLEgt 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 ltTRgt
• ALIGN
• VALIGN

• Zellenatribute ltTDgt
• 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
• COLOR00ff00

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 ltFRAMESETgt lt/FRAMESETgt Tag
• ROWS
• COLS
• px
• Das ltNOFRAMESgt lt/NOFRAMESgtTag
• Alternativ anbieten

21
Frames erstellen (2)

• Das ltFRAMEgt Tag
• SRC URL der Seite
• NAME um den Frame anzusprechen
• MARGINWIDTH Umrandung des Frames
• MARGINHEIGHT
• FRAMESPACING
• FRAMEBORDER
• SCROLLING Ob Scrollbalken vorhanden
• NORESIZE Ob Größe veränderbar

22
Frames steuern

• Das ltBASEgt Tag
• Das TARGET Attribut
• im ltA HREFgt..lt/Agt
• im ltBASEgt
• TARGET
• _BLANK
• _PARENT
• _SELF
• _TOP

23
Formulare

• Formulare
• erlauben Interaktivität
• brauchen (meistens) cgi-script oder ASP
• Felder sollen benannt werden
• Das ltFORMgt..lt/FORMgt-Tag

24
Formular-Felder

• ltINPUT TYPE
• TEXTgt (1 zeiliges Textfeld)
• PASSWORDgt (wie TEXT mit Sternchen)
• RADIOgt (Radiobuttons einfache Auswahl möglich)
• CHECKBOXgt (mehrfache Auswahl möglich )
• SUBMITgt (Formular abschicken)
• RESETgt (Formular zurücksetzen)
• BUTTONgt (Ohne vorgeschriebene Funktion)

25
Formular-Felder (2)

• ltTEXTAREAgtlt/TEXTAREAgt
• mehrzeiliges Textfeld
• SELECT (Combo-Box)
• ltSELECTgt
• ltOPTION VALUEgtopt1lt/OPTIONgt
• ltOPTION VALUEgtopt1lt/OPTIONgt
• ltOPTION VALUEgtopt1lt/OPTIONgt
• lt/SELECTgt

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
JavaScriptDokument- Objekt-Modell-
29
JavaScript einsetzen

• Das ltSCRIPTgt..lt/SCRIPTgt-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 ltA HREFgt...lt/Agt aufrufen.

31
MouseOver-Effekte

• onMouseOveronMouseOut
• 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