World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und...

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

<TAG><TAG>......</TAG>

<tAg>........</TaG><TAG1><TAG2>.....</TAG2>......</TAG1>

Aufbau einer HTML-Seite

<HTML> <HEAD>

<TITLE> Meine Homepage

</TITLE> </HEAD> <BODY>

Inhalt der Seite

</BODY></HTML>

Stil-Tags

• Dieser Text <STRONG> soll fett erscheinen </STRONG>

• Dieser Text<EM>wird kursiv </EM> dargestellt

• und dieser <STRONG> <EM> beide </EM> <STRONG>

• Unterstreichung vermeiden

Dokument-Formatierung

• Überschriften <Hn>.....</Hn>

• Absatz <P>...</P>• <ADDRESS>...

</ADDRESS>

Attribute

• Legen die Eigenschaften der Tags fest.• Attribute brauchen meistens Werte.• Einige Tags sind nutzlos ohne Attribute.• Einige Tags nehmen mehrere Attribute.• <TAG ATTRIBUT1=“WERT 1“>

....</TAG>

Übung mit Attributen• <P ALIGN=“RIGHT“>• <DIV ALIGN=“CENTER“>• <FONT FACE=“COMIC

SANS MS“ SIZE=+1 COLOR=“WHITE“>– Vorsicht mit Schriftarten

und Farben• <BODY

BGCOLOR=“BLUE“>• <HR SIZE=“10“

WIDTH=50% NOSHADOW>

Listen & Aufzählungen

• Die ungeordnete Liste <UL>....</UL>

• Das <LI> Tag• Die geordnete Liste

<OL>...</OL>• 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 <IMG> Tag• JPEG / GIF• Das SRC Attribut

– Pfade richtig schreiben– Keine „file“ URLs– Keine Sonderzeichen

• Klein halten– Thumbnails

Das <IMG> Tag - weitere Attribute

• WIDTH Grafikbreite • HEIGHT Grafikhöhe• ALT Alternativ-Text• ALIGN Ausrichtung

– <BR CLEAR> Text unterbrechen bis Grafikende• BORDER Umrandung der Grafik• HSPACE Horizontaler Leerraum um Grafik• VSPACE Vertikaler Leerraum um Grafik

Hyperlinks einsetzen

• Das Anker Tag <A>....</A>• 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• <TABLE> Definition der Tabelle • <TR> Definition einer Zeile (Row)• <TD> Definition einer Zelle (Data)• Inhalt der Zelle kommt hier• </TD> Ende der Zelle• </TR> Ende der Zeile• </TABLE> 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 <TR>– ALIGN– VALIGN

• Zellenatribute <TD>– ALIGN– VALIGN– WIDTH– HEIGTH– ROWSPAN– COLSPAN– NOWRAP– BGCOLOR– BACKGROUND

Farben

• 2 Möglickeiten– durch Farbname

(englischer Name)– durch den RGB-Wert

• 16.777.216 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 <FRAMESET> </FRAMESET> Tag– ROWS– COLS– % px *

• Das <NOFRAMES> </NOFRAMES>Tag– Alternativ anbieten

Frames erstellen (2)

• Das <FRAME> Tag– SRC URL der Seite– NAMEum den Frame anzusprechen– MARGINWIDTH Umrandung des Frames– MARGINHEIGHT– FRAMESPACING– FRAMEBORDER– SCROLLING Ob Scrollbalken vorhanden– NORESIZE Ob Größe veränderbar

Frames steuern

• Das <BASE> Tag• Das TARGET Attribut

– im <A HREF>..</A>– im <BASE>

• TARGET=“_BLANK”“_PARENT”“_SELF”“_TOP”

Formulare

• Formulare– erlauben Interaktivität– brauchen (meistens)

cgi-script oder ASP• Felder sollen

benannt werden• Das

<FORM>..</FORM>-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)

• <TEXTAREA></TEXTAREA>– mehrzeiliges Textfeld

• SELECT (Combo-Box)<SELECT>

<OPTION VALUE>opt1</OPTION><OPTION VALUE>opt1</OPTION><OPTION VALUE>opt1</OPTION>

</SELECT>

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

JavaScriptDokument-

Objekt-Modell-

JavaScript einsetzen

• Das <SCRIPT>..</SCRIPT>-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 <A HREF>...</A> aufrufen.

MouseOver-Effekte

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

World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und...

Documents

Transcript of World Wide Web Internetdienst Besteht aus HTML-Seiten Hypertext Transfer Protocol Plattform- und...