Advanced HTML, CSS, Javascript
Werbung
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> <!-- hier folgen die Formularelemente --> <input type=‘submit’ value=‘Abschicken’> </form> Text-Dokument Formular per PHP <form action=”update.php" method=”post” enctype=multipart/form-data> <!-- hier folgen die Formularelemente --> <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
