Advanced HTML, CSS, Javascript

Informatik Anwendungen I
Christian Eichinger
[email protected]
Werner Moser
[email protected]
Salzburg Research / AAJC
http://www.aajc.at
AAJC - Academic Authorized Java Campus in Salzburg
Ziele der LVA
 Am Ende dieser Lehrveranstaltung werden sie
 dynamische  interaktive  multimediale - Web-Seiten
 erstellen und
 verwalten können
AAJC - Academic Authorized Java Campus in Salzburg
Page 2
Organisatorisches
 Termine
26.2.
26.2.
27.2.
12.3.
12.3.
13.3.
2.4.
2.4.
3.4.
16.4.
16.4.
17.4.
7.5.
7.5.
8.5.
21.5.
21.5.
22.5.
4.6.
4.6.
5.6.
11.6.
11.6.
11.6.
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
15:30
13:00
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
12:45
15:15
17:00
VO
LB A
LB B
VO
LB B
LB A
VO
LB B
LB A
VO
LB B
LB A
VO
LB A
LB B
VO
LB B
LB A
VO
LB B
LB A
VO
LB B
LB A
 Beurteilung
 VO mit Klausur
 LB
 Projektarbeit
 2er Gruppen
 jeweils letzte EH (11.6.)
AAJC - Academic Authorized Java Campus in Salzburg
Page 3
Inhaltsübersicht







"Advanced" HTML
dynamische Web-Sites
Kommunikation im Internet
XML / XSLT
Verwaltung von Web-Inhalten
Audio / Video im Web
weitere Entwicklungen
AAJC - Academic Authorized Java Campus in Salzburg
Page 4
Zielsetzung - LB
 Das Endprodukt soll ein Webauftritt zum
WellFitTV sein
 online Programm basierend auf Java & XML
 Clips mit
 Textbeschreibung
 Metainformationen zum Video
 Video
 Suchfunktion für Clips
 Diskussionsforum und/oder Chat
 Allgemeine Informationen zum Channel
AAJC - Academic Authorized Java Campus in Salzburg
Page 5
"Advanced" HTML
HTML, CSS & Javascript
AAJC - Academic Authorized Java Campus in Salzburg
Page 6
Webtechnologien









HTML
CSS (Cascading Style-Sheets)
Javascript
DHTML
Flash
Plugins
CGI / Perl
PHP, JSP, ASP, ColdFusion
mySQL, postGreSQL, Oracle, DB2
AAJC - Academic Authorized Java Campus in Salzburg
Page 7
HTML Basics
 HTML - HyperText Markup Language
 Seitenbeschreibungssprache für Texte,
Grafiken, eingebundene Elemente (Video,
Musik, Flash)
 Schema
<Befehl> Inhalt </Befehl>
 Beispiel:
<h1>Überschrift</h1>
<h1 align=center><i>HTML</i> & WWW</h1>
AAJC - Academic Authorized Java Campus in Salzburg
Page 8
HTML - Grundgerüst
 Einfachstes Grundgerüst einer HTML-Datei
<html>
<head>
<title>Titel</title>
</head>
<body>
Hauptteil
</body>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 9
HTML - Metatags
 Metainformationen einer HTML-Datei
<html>
<head>
<meta name="description" content=”Kurzbeschreibung">
<meta name="author" content=”Autor”>
<meta name="keywords" content=”Stichwörter zur Page">
<title>Titel</title>
</head>
<body>
Hauptteil
</body>
</html>
 andere nützliche Metatags
<meta http-equiv="refresh”
content="5;URL=http://www.google.com/">
AAJC - Academic Authorized Java Campus in Salzburg
Page 10
HTML - Texte & Grafik
 Textformatierungen
 nur Grundtypen (<h1>,<p>,<li>, ...) verwenden
 Schriftformatierungen mittels Cascading Style Sheets
 Bilder
 immer ALT-Tag, width & height angeben
<img src=‘bild.jpg’ width=200 height=80 alt=‘info’>
 Links
 Email
<a href=‘[email protected]’>[email protected]</a>
 WWW
<a ref=‘http://www.gmx.at’
target=‘_blank’>www.gmx.at</a>
_blank
neues Fenster
_self
um Inhalt im aktuellen Fenster zu öffnen
_parent, _top
für Frames
AAJC - Academic Authorized Java Campus in Salzburg
Page 11
HTML - Frames
 Vorteil
 Die Navigation scrollt nicht weg
 Gleichzeitige Anzeige um zB Testberichte
nebeneinander darzustellen
 Nachteil




Probleme mit einigen Browsern
Problem falls kleine Auflösung (Scrollbars)
Suchmaschinen zeigen auf Unterseiten
Gesetzliche Probleme falls andere Page in Frame
eingelinkt wird
AAJC - Academic Authorized Java Campus in Salzburg
Page 12
HTML - Frameset
 Frameset Definition
<html> <head> <title>Titel</title> </head>
<frameset cols="40%,60%">
<frame src=”navigation.html" name="Navigation">
<frameset rows="20%,80%">
<frame src=”top.html" name=”Kopf">
<frame src=”main.html" name=”Main">
</frameset>
</frameset>
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 13
HTML - Tabellen
 Werkzeug um Webdesigns sinnvoll zu
realisieren
 Tabellenbeispiel
<table border=0 cellpadding=3 width=95% align=center>
<tr>
<td valign=top align=left width=1%>
<img src=‘bild.gif’></td>
<td>Inhalt 2</td>
</tr>
</table>
 bei Bildern mit CSS: valign und align bei <td>
verwenden sonst Netscape4.7 Problem
 width=1% -> kleinstmögliche Tabledata
 cellpadding/cellspacing sowie border für
Tabellenformatierung
AAJC - Academic Authorized Java Campus in Salzburg
Page 14
HTML - Video
 Einfach: einfach ein Link auf Video setzen
<a href=‘video.mov’>Click to view Video</a>
 Komplexer: Video in Page integrieren
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80D3488ABDDC6B" WIDTH="160"HEIGHT="144"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="sample.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<EMBED SRC="sample.mov" WIDTH="160" HEIGHT="144"
AUTOPLAY="true" CONTROLLER="false" PLUGINSPAGE=“
http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>
AAJC - Academic Authorized Java Campus in Salzburg
Page 15
HTML - SWF einbinden
 SWF einbinden
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000”
codebase=”FlashDownload" width="600" height="400">
<param name="movie" VALUE="nibbles.swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#000040">
<embed src="nibbles.swf" quality="high" scale="exactfit”menu="false"
bgcolor="#000000" width="600" height="400”
swLiveConnect="false"
type="application/x-shockwave-flash"
pluginspage="http://FlashDownload">
</embed>
</object>
 <object> -> Netscape6.x, IE
 <embed> -> Netscape 4.7
AAJC - Academic Authorized Java Campus in Salzburg
Page 16
HTML - Formulare
 Reines Textformlar per Email
<form action=”mailto:[email protected]" method=”post”
enctype=text/plain>

<input type=‘submit’ value=‘Abschicken’>
</form>
 Text-Dokument Formular per PHP
<form action=”update.php" method=”post”
enctype=multipart/form-data>

<input type=‘submit’ value=‘Abschicken’>
</form>
AAJC - Academic Authorized Java Campus in Salzburg
Page 17
HTML - Formulartypen
 Die wichtigsten Formulartypen
 <input name="vorname" type="text" size="30"
value=“Name”>
 <textarea name=“information” cols=‘20’ rows=‘10’>
Hier kann Text, der im Formular erscheinen
soll</textarea>
 <input type=‘checkbox’ name=‘stimmt’ value=‘ja’>Stimmts
mit checked standartmässig aktiviert
 <select name=‘hobbies’ multiple>
<option value=‘1’ selected>
Kayak</option>
<option value=‘2’>
Snowboard</option>
</select>
 <input type='hidden' name='MAX_FILE_SIZE' value='2000'>
<input type='file' name='doc'>
AAJC - Academic Authorized Java Campus in Salzburg
Page 18
Cascading Style Sheets - CSS
 CSS ist Erweiterung für HTML
 viel mehr Möglichkeiten der
Schriftformatierung als HTML
 Möglichkeit, die Formatierungen auf der ganze
Website zu verwenden
 kein aktueller Browser hat vollständige CSS2.0
Implementierung
AAJC - Academic Authorized Java Campus in Salzburg
Page 19
CSS - Intern vs Extern
 Inline CSS
<head> <title>Titel der Datei</title>
<style type="text/css">
FORMATDEFINITIONEN
</style>
</head>
 Externe CSS
 eigenes Textfile (style.css)
 Link im HTML-Dokument auf style.css
<head> <title>Titel der Datei</title>
<link rel="stylesheet" type="text/css"
href="formate.css">
<style type="text/css">
Hier können Dateispezifische Erweiterungen stehen
</style>
</head>
AAJC - Academic Authorized Java Campus in Salzburg
Page 20
CSS - Formate definieren
 HTML-Tags definieren
h1 { color:#ff0000; font-size:36pt; }
p {font-size:10pt; line-height:11pt;}
 Typische CSS-Angaben








font-family: Helvetica, Verdana, Clean, sans-serif;
font-size:8pt
font-style:italic; (oblique, normal)
line-height:12pt;
color:#0000ff;
background-color:#FFFFCC;
margin:10px; margin-left:10px; margin-top:10px;
vertical-align:top; (middle, bottom)
AAJC - Academic Authorized Java Campus in Salzburg
Page 21
CSS - Untergruppen
 Untergruppen von HTML-Tags definieren:
 Stylesheet Definition
p {font-family:Verdana, sans-serif; font-size:12pt;}
p.kontakt {font-size:10pt;}
 Verwendung im HTML Dokument
<p>Normaler Absatz</p>
<p class=‘kontakt’>Absatz der Klasse KONTAKT</p>
AAJC - Academic Authorized Java Campus in Salzburg
Page 22
CSS - Pseudoformate
 Formate, die sich nicht durch eindeutige HTML
Tags ausdrücken lassen
(zB ‘besuchter Link’)
 häufig verwendete Pseudoformate
 a:link
 a:visited
 a:hover
noch nicht besuchter Link
besuchter Link
Mausrollover über Link
 Beispiel
a
a:hover
{font-size:12pt; color:#cccccc}
{font-size:12pt; color:#ffffff}
AAJC - Academic Authorized Java Campus in Salzburg
Page 23
CSS - Direkte Formatierung
 Bei jedem HTML-Tag kann eine zusätzliche
CSS-Formatierung durchgeführt werden
 Dabei gilt die zentrale CSS-Formatierung weiterhin.
Nur für diese Instanz wird sie um die style
Anweisungen erweitert
p {font-family:verdana, sans-serif; font-size:30pt;}
<p style="color:#ff00cc; font-size:24pt;>
Paddle the Tekno
</p>
AAJC - Academic Authorized Java Campus in Salzburg
Page 24
CSS - Farben & Fonts
 Farbdefinitionen:
 color:#FF00FF;
 color:rgb(50,0,180);
 color:rgb(60%,100%,40%)
 Immer mehrere Schriftarten angeben sowie
allgemeinen Schrifttyp angeben
 zB: Verdana, Helvetica, sans-serif
 Schriftgrößenproblem
 die Schriften erscheinen auf versch.
Betriebssystemen in versch. Größe
AAJC - Academic Authorized Java Campus in Salzburg
Page 25
CSS - Browserprobleme
 Leider unterstützt kein Browser alle CSS2.0
Definitionen
 Problemfall - Netscape 4.7
zB: Grafiken in Tabellen
 ab Netscape 6, Opera 5 und IE 5 viel weniger
Probleme
AAJC - Academic Authorized Java Campus in Salzburg
Page 26
Javascript





kein HTML Bestandteil, sondern Ergänzung
Eigene Programmiersprache
wird während der Laufzeit interpretiert
entweder Inlinecode oder in externer Datei
aber für HTML Autoren optimiert, um Websites
zu erweitern:





Rollover Effekte
Formularkontrolle
Pulldownmenus ohne GO-Button
kleine Spiele & Programme
etc
AAJC - Academic Authorized Java Campus in Salzburg
Page 27
Javascript - Hello World
 Klassiker “Hello World” in Javascript
<html>
<head><title>Test</title>
<script type="text/javascript">
<!-alert(”Hello World!");
//-->
</script>
</head>
<body>
</body>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 28
Javascript - Beispiel
<html>
<head>
<script type="text/javascript">
<!-function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value *
document.Formular.Eingabe.value;
alert("Quadrat = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat ” onClick="Quadrat()">
</form>
</body>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 29
Javascript - Rollover
 Einfach per Dreamweaver
AAJC - Academic Authorized Java Campus in Salzburg
Page 30
Javascript - Formulare
 Dreamweaver
AAJC - Academic Authorized Java Campus in Salzburg
Page 31
Javascript - Pulldown Menu
 Jumpmenu
AAJC - Academic Authorized Java Campus in Salzburg
Page 32
Referenzen
 selfHTML
www.selfhtml.net
 selfPHP
www.selfphp.info
AAJC - Academic Authorized Java Campus in Salzburg
Page 33