SEG3120 DHTML Lab Tutorial

SEG3120DHTML Lab Tutorial TA: Ronald Pringadi ronaldpringadi@hotmail.com Prof: Abdulmotaleb El Saddik University of Ottawa Winter 2005

About the TA & Lectures • Office hours: by appointment, Vanier 255Aor Thursday after lab SEG3120 lab3, 8:30pm. • You can reach me at MSN Messenger • ronaldpringadi@hotmail.com • Get the slides from • http://www.site.uottawa.ca/~pringadi/ • Or Prof. El Saddik Website Ronald Pringadi - University of Ottawa

About the TA & Lectures • Week 5 (31JAN, 01FEB, 03FEB)is for DHTML tutorial • Week 7 (14FEB, 15FEB,17FEB)is for FLASH tutorial • Week 9 (28FEB, 1MAR, 3MAR)Prototype Workshop 1 • Week 10 (28FEB, 1MAR, 3MAR)Prototype Workshop 2 • Week 11 (14MAR, 15MAR, 17MAR)Final Demos 1 – presenters from W9 • Week 12 (21MAR, 22MAR, 24MAR)Final Demos 2 – presenters from W10 Ronald Pringadi - University of Ottawa

Attention • There will be questions on the final exams about the tutorial labs! • Do not fall asleep, or using any chatting programs! • Relax but please be serious about the lab! • For final project: present me with your creativity! And something beautiful, feasible, and useful for the final demo! Ronald Pringadi - University of Ottawa

DHTML Introduction • DHTML (Dynamic HTML) – What’s that? • Combination of HTML, CSS, and JavaScript to create dynamic and interactive Web pages DHTML = HTML CSS JavaScript + + Ronald Pringadi - University of Ottawa

DHTML Introduction • Good reading references • http://www.w3schools.com/dhtml/ • selfhtml? But it’s in German. • Good editor software references • DHTML - Macromedia Dreamweaver • Flash - Macromedia Flash • www.macromedia.com Ronald Pringadi - University of Ottawa

Chapter 1HTML Ronald Pringadi - University of Ottawa

HTML – Brief Description • HTML stands for Hyper Text Markup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file is a text based file and must have an htm or html file extension • An HTML file can be created using a simple text editor Ronald Pringadi - University of Ottawa

HTML – Simple Example <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> • Most tags have opening and closing tags:<html> </html>, <head> </head> • Only some don’t have it: <br>, <hr>, <img> Ronald Pringadi - University of Ottawa

HTML – Attribute & Sp. Char. • Some tags have attribute such as:<body bgcolor = “green"> • There are special characters that you can’t just write it as usual: Ronald Pringadi - University of Ottawa

HTML – Hyperlink & Mailto: <html> <head> <title>SEG3120 - TUTORIAL</title> </head> <body> <p><strong>Example for the students of SEG3120</strong></p> <hr> <p>[1] Hyperlink<br> Ronald Website <a href="http://www.geocities.com/ronaldpringadi"> http://www.geocities.com/ronaldpringadi</a> </p> <p>[2] Email<br> Give Ronald <a href="mailto:ronaldpringadi@hotmail.com"> <img src="img/mail.jpg" border="0"> e-mail</a> </p> </body> </html> Ronald Pringadi - University of Ottawa

HTML – Hyperlink & Mailto: The Result Ronald Pringadi - University of Ottawa

<body> • <p><strong>Example for the students of SEG3120<br> • Student Marks</strong></p> • <table width="100%" border="1"> • <tr bgcolor="#99CCFF"> • <td>Student_#</td> • <td>Student Name </td> • <td>Project Description </td> • <td>Mark</td> • <td>Grade</td> • </tr> • <tr> • <td>001</td> • <td>Jack</td> • <td>Online teaching E-learning </td> • <td>86</td> • <td>A</td> • </tr> • <tr> • <td>002</td> • <td>Jill</td> • <td>Cybernatic Intelegence</td> • <td>65</td> • <td>C++</td> • </tr> • </table> • </body> HTMLTables Ronald Pringadi - University of Ottawa

HTMLTables The Result Ronald Pringadi - University of Ottawa

HTMLBullet Index • <body> • <p><strong>Example for the students of SEG3120<br> • Eggnog Recipe</strong></p> • <ul type="square"> • <li>eggs</li> • <li>1 cup + 1 tablespoon sugar</li> • <li>1/2 teaspoon vanilla extract</li> • <li>1/4 teaspoon ground nutmeg</li> • <li>3/4 cup brandy</li> • <li>1/3 cup dark rum (Captain Morgan for best flavor)</li> • <li>2 cups whipping cream</li> • <li>2 cups milk</li> • </ul> • </body> Ronald Pringadi - University of Ottawa

HTMLBullet Index The Result Ronald Pringadi - University of Ottawa

Chapter 2CSS Ronald Pringadi - University of Ottawa

CSS – Brief Description • Cascading Style Sheets • Defining the style and layout model for HTML documents. • To make changes on the style and the layout become more simple. • There are 2 type of implementation • Internal <style> tag: only for that html file. • External .css file, changes made will update the whole page! Ronald Pringadi - University of Ottawa

CSS – Variations • Can be deployed inside the HTML or outside HTML file. If deployed outside the HTML file, the filename extension is .css • Both can be a tag modifier or a class modifier.Tag modifier will be applied to all targeted tag, while class modifier only to the tag that has intended to be. Ronald Pringadi - University of Ottawa

CSS – if inside the html code <head> <title>SEG3120 - CSS TUTORIAL</title> <style type="text/css">  </style> </head> Tag modifier This way, all <h1> tagwill be updated Class modifier This way, all tags with attributeclass=“cool_p” will be updated Ronald Pringadi - University of Ottawa

CSS – if inside the html code Implementing them inside the body <body> <H1>the ugly duckling</H1> <p class="cool_P">It was a golden afternoon in late summer.…</p> <p>"These eggs are taking a long time to hatch!" she sighed….</p> <p>"Oh, the world's much bigger than this," quacked the….</p> </body> Ronald Pringadi - University of Ottawa

CSS – if outside the html code This code is in file: ”SEG3120.css” .cool_P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333399; } h1 { font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; color: #FFFFFF; background-color: #666666; font-size: 16px; } .hot_P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #990000; } Ronald Pringadi - University of Ottawa

CSS – if outside the html code Implementing the external CSS inside the html <head> <title>SEG3120 - CSS TUTORIAL</title> <link href="SEG3120.css" rel="stylesheet" type="text/css"> </head> <body> <H1>the ugly duckling</H1> <p class="cool_P">It was a golden afternoon in late summer.…</p> <p class=“hot_P">"These eggs are taking a long time to hatch!" she sighed….</p> <p class="cool_P"> "Oh, the world's much bigger than this," quacked the….</p> </body> Ronald Pringadi - University of Ottawa

CSS – Result Ronald Pringadi - University of Ottawa

CSS – Outside the HTML file is more Preferable index.htm story1.htm MyStyle.css story2.htm catalog.htm • Any changes to the external CSS file, will apply to all referring html files • Makes global, consistent changes. Ronald Pringadi - University of Ottawa

Chapter 3JavaScript Ronald Pringadi - University of Ottawa

JavaScript – Brief Description • Scripting language that allows you to write codes that control all HTML elements • Providing good interactivity • Great feedback to the user • It doesn’t need for a JVM (java virtual machine) new internet browsers (IE, Netscape), able to parse it (client side processing. Ronald Pringadi - University of Ottawa

JavaScript – Brief Description • Writing style almost same with Java programming language • Be careful it is case sensitive • JavaScript commands can be put inside the HTML code or in an external file with .js extension • Any mistake made will cause the next line not executed, and there will be a notification icon in lower left of I.E. Ronald Pringadi - University of Ottawa

JavaScript – Variables • Variables doesn’t need to be declared • It doesn’t have a data type (such as int, str, etc) Ronald Pringadi - University of Ottawa

JavaScript – Event • Events are part of HTML 4.0, and it is not case sensitive • There are events for mouse, form, button, page, keyboard: onabort, onload, onmousedown, onsubmit, etc Ronald Pringadi - University of Ottawa

JavaScript – Inside HTML <head> <title>SEG3120 - JavaScript TUTORIAL</title> <script language="JavaScript"> function Welcome() { var TotalStudent =33; var Greet="Hallo SEG3120"; window.alert(Greet); document.writeln("Welcome SEG3120! <br>" ); document.writeln("We have: "+ TotalStudent + " participants today <br>" ); } </script> </head> <body> <script language="JavaScript"> Welcome(); </script> : : </body> Ronald Pringadi - University of Ottawa

JavaScript – Outside HTML <head> <title>SEG3120 - JavaScript TUTORIAL</title> <script language="JavaScript“ src=“MyJS.js”> </script> </head> <body> <script language="JavaScript"> Welcome(); </script> : : : </body> Ronald Pringadi - University of Ottawa

JavaScript Ronald Pringadi - University of Ottawa

Conclusions • You do not need to memorize all tags, attributes, special characters for HTML, just find a good editor; also the same for CSS & JavaScript • Macromedia Dreamweaver, Microsoft FrontPage, Netscape Composer, are good examples. • Make sure you understand the concept of how DHTML works, and how to write DHTML codes in general • Some CSS effects need server side processing: such as filter() Ronald Pringadi - University of Ottawa

Done • Any questions? • Please visit http://www.w3schools.comto study further about HTML, CSS, JavaScript, XML/XSL/DTD. • Study again at home and do a little bit more research • Good luck for the project. • Now, let’s do some practice! Ronald Pringadi - University of Ottawa

SEG3120 DHTML Lab Tutorial