SEG3120 SEG3120 DHTML Lab Tutorial DHTML Lab Tutorial TA: Ronald Pringadi TA: Ronald Pringadi [email protected][email protected]Prof: Abdulmotaleb El Saddik Prof: Abdulmotaleb El Saddik University of Ottawa University of Ottawa Winter 2005 Winter 2005
35
Embed
SEG3120 DHTML Lab Tutorial TA: Ronald Pringadi [email protected] Prof: Abdulmotaleb El Saddik University of Ottawa Winter 2005.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
TA: Ronald PringadiTA: Ronald [email protected]@hotmail.comProf: Abdulmotaleb El Saddik Prof: Abdulmotaleb El Saddik
University of OttawaUniversity of OttawaWinter 2005Winter 2005
Ronald Pringadi - University of Ottawa 2
About the TA & LecturesAbout the TA & Lectures
►Office hours: by appointment, Vanier Office hours: by appointment, Vanier 255A255Aor Thursday after lab SEG3120 lab3, or Thursday after lab SEG3120 lab3, 8:30pm.8:30pm.
►You can reach me at MSN MessengerYou can reach me at MSN Messenger [email protected]@hotmail.com
►Get the slides fromGet the slides from http://http://www.site.uottawa.ca/~pringadiwww.site.uottawa.ca/~pringadi// Or Or Prof. El Saddik WebsiteProf. El Saddik Website
Ronald Pringadi - University of Ottawa 3
About the TA & LecturesAbout the TA & Lectures
► Week 5Week 5 (31JAN, 01FEB, 03FEB) (31JAN, 01FEB, 03FEB)is for DHTML tutorialis for DHTML tutorial
► Week 7Week 7 (14FEB, 15FEB,17FEB) (14FEB, 15FEB,17FEB)is for FLASH tutorialis for FLASH tutorial
►There will be There will be questions on the final questions on the final examsexams about the tutorial labs! about the tutorial labs!
►Do not fall asleep, or using any chatting Do not fall asleep, or using any chatting programs!programs!
►RelaxRelax but please be but please be seriousserious about the about the lab!lab!
►For final project: present me with your For final project: present me with your creativitycreativity! And something ! And something beautiful, beautiful, feasible, and usefulfeasible, and useful for the final demo! for the final demo!
Ronald Pringadi - University of Ottawa 5
DHTML IntroductionDHTML Introduction
►DHTML (Dynamic HTML) – What’s that?DHTML (Dynamic HTML) – What’s that? Combination of Combination of HTMLHTML, , CSSCSS, and , and JavaScriptJavaScript to to
create dynamic and interactive Web pages create dynamic and interactive Web pages
DHTML HTML CSS JavaScript= + +
Ronald Pringadi - University of Ottawa 6
DHTML IntroductionDHTML Introduction
►Good Good reading referencesreading references http://www.w3schools.com/dhtml/http://www.w3schools.com/dhtml/ selfhtml? But it’s in German.selfhtml? But it’s in German.
► HTML stands for HTML stands for Hyper Text Markup Hyper Text Markup LanguageLanguage
► An HTML file is a text file containing small An HTML file is a text file containing small markup tagsmarkup tags
► The markup tags tell the Web browser The markup tags tell the Web browser how to how to displaydisplay the page the page
► An HTML file is a An HTML file is a text based filetext based file and must and must have an have an htmhtm or or htmlhtml file extension file extension
► An HTML file can be created using a simple An HTML file can be created using a simple text editortext editor
Ronald Pringadi - University of Ottawa 9
HTML – Simple ExampleHTML – Simple Example
<html><html><head><head>
<title>Title of page</title><title>Title of page</title></head></head><body><body>
This is my first homepage.This is my first homepage.<b>This text is bold</b><b>This text is bold</b>
</body></body></html></html>
► Most tags have Most tags have opening opening andand closing closing tags: tags:<html> </html>, <head> </head><html> </html>, <head> </head>
► Only Only some don’t have itsome don’t have it: <br>, <hr>, <img>: <br>, <hr>, <img>
The ResultHTML – Hyperlink & Mailto:HTML – Hyperlink & Mailto:
Ronald Pringadi - University of Ottawa 13
HTMLHTMLTableTable
ss
<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>
Ronald Pringadi - University of Ottawa 14
HTMLHTMLTableTable
ssThe Result
Ronald Pringadi - University of Ottawa 15
HTMLHTMLBullet IndexBullet 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 16
HTMLHTMLBullet IndexBullet Index The Result
Ronald Pringadi - University of Ottawa 17
Chapter 2Chapter 2CSSCSS
Ronald Pringadi - University of Ottawa 18
CSS – Brief DescriptionCSS – Brief Description
► CCascading ascading SStyle tyle SSheetsheets► Defining the Defining the stylestyle and and layoutlayout model model
for HTML documents.for HTML documents.► To make To make changeschanges on the style and the on the style and the
layout layout become more simplebecome more simple..► There are There are 2 type of implementation2 type of implementation
1.1. Internal Internal <style><style> tag: only for that html tag: only for that html file.file.
2.2. ExternalExternal .css file .css file, changes made will , changes made will update the whole page!update the whole page!
Ronald Pringadi - University of Ottawa 19
CSS – VariationsCSS – Variations
►Can be deployed Can be deployed insideinside the HTML or the HTML or outsideoutside HTML file. HTML file. If deployed outsideIf deployed outside the HTML file, the filename extension the HTML file, the filename extension is is .css.css
►Both can be a Both can be a tag modifiertag modifier or a or a class class modifiermodifier..Tag modifier will be applied to all Tag modifier will be applied to all targeted tag, while class modifier only targeted tag, while class modifier only to the tag that has intended to be.to the tag that has intended to be.
Ronald Pringadi - University of Ottawa 20
CSS – if CSS – if insideinside the html code the html code<head><title>SEG3120 - CSS TUTORIAL</title><style type="text/css"><style type="text/css"><!--h1 {h1 {
Class modifierThis way, all tags with attributeclass=“cool_p” class=“cool_p” will be updated
Ronald Pringadi - University of Ottawa 21
CSS – if CSS – if insideinside the html code the html code
<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>
Implementing them inside the body
Ronald Pringadi - University of Ottawa 22
CSS – if CSS – if outsideoutside the html the html codecode
<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>
Implementing the external CSS inside the html
Ronald Pringadi - University of Ottawa 24
CSS – ResultCSS – Result
Ronald Pringadi - University of Ottawa 25
CSS – Outside the HTML file is CSS – Outside the HTML file is more Preferablemore Preferable
index.htm
story1.htm
story2.htm
catalog.htm
MyStyle.css
• Any changes to the external CSS file, will apply to all referring html filesAny changes to the external CSS file, will apply to all referring html files• Makes global, consistent changes.Makes global, consistent changes.
►Scripting languageScripting language that allows you to that allows you to write codes write codes that control all HTML that control all HTML elementselements
►Providing Providing good interactivitygood interactivity►Great Great feedbackfeedback to the user to the user► It It doesn’t need for a JVMdoesn’t need for a JVM (java virtual (java virtual
machine) new internet browsers (IE, machine) new internet browsers (IE, Netscape), able to parse it (client side Netscape), able to parse it (client side processing. processing.
► Writing style almost same with Java Writing style almost same with Java programming languageprogramming language
► Be careful it is Be careful it is case sensitivecase sensitive► JavaScript commands can be put JavaScript commands can be put insideinside the the
HTML code or in an HTML code or in an externalexternal file with file with .js.js extensionextension
► Any Any mistakemistake made will cause the next line made will cause the next line not executed, and there will be a notification not executed, and there will be a notification icon in lower left of I.E.icon in lower left of I.E.
Ronald Pringadi - University of Ottawa 29
JavaScript – VariablesJavaScript – Variables
►Variables doesn’t need to be declaredVariables doesn’t need to be declared► It doesn’t have a data type (such as It doesn’t have a data type (such as
int, str, etc)int, str, etc)
Ronald Pringadi - University of Ottawa 30
JavaScript – EventJavaScript – Event
►Events are part of HTML 4.0, and it is Events are part of HTML 4.0, and it is not case sensitivenot case sensitive
►There are events for mouse, form, There are events for mouse, form, button, page, keyboard: button, page, keyboard: onabort, onabort, onload, onmousedown, onsubmit, etconload, onmousedown, onsubmit, etc
► You You do not need to memorize alldo not need to memorize all tags, tags, attributes, special characters for HTML, just find attributes, special characters for HTML, just find a good editor; also the same fora good editor; also the same for CSS CSS && JavaScriptJavaScript
► Macromedia Macromedia DreamweaverDreamweaver, Microsoft , Microsoft FrontPageFrontPage, Netscape , Netscape ComposerComposer, are good , are good examples.examples.
► Make sure you understand the concept of Make sure you understand the concept of how how DHTML worksDHTML works, and , and how to write DHTML codes how to write DHTML codes in in generalgeneral
► Some CSS effects Some CSS effects need server side processingneed server side processing: : such as filter()such as filter()