Post on 06-Apr-2016
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