View
215
Download
0
Category
Tags:
Preview:
Citation preview
SEG3120SEG3120DHTML Lab TutorialDHTML Lab Tutorial
TA: Ronald PringadiTA: Ronald Pringadironaldpringadi@hotmail.comronaldpringadi@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 ronaldpringadi@hotmail.comronaldpringadi@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
► Week 9Week 9 (28FEB, 1MAR, 3MAR) (28FEB, 1MAR, 3MAR)Prototype Workshop 1Prototype Workshop 1
► Week 10Week 10 (28FEB, 1MAR, 3MAR) (28FEB, 1MAR, 3MAR)Prototype Workshop 2Prototype Workshop 2
► Week 11Week 11 (14MAR, 15MAR, 17MAR) (14MAR, 15MAR, 17MAR)Final Demos 1Final Demos 1 – presenters from W9 – presenters from W9
► Week 12Week 12 (21MAR, 22MAR, 24MAR) (21MAR, 22MAR, 24MAR)Final Demos 2Final Demos 2 – presenters from W10 – presenters from W10
Ronald Pringadi - University of Ottawa 4
AttentionAttention
►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.
►Good editor Good editor software referencessoftware references DHTML - Macromedia DreamweaverDHTML - Macromedia Dreamweaver Flash - Macromedia FlashFlash - Macromedia Flash www.macromedia.comwww.macromedia.com
Ronald Pringadi - University of Ottawa 7
Chapter 1Chapter 1HTMLHTML
Ronald Pringadi - University of Ottawa 8
HTML – Brief DescriptionHTML – Brief Description
► 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>
Ronald Pringadi - University of Ottawa 10
HTML – Attribute & Sp. Char.HTML – Attribute & Sp. Char.
► Some tags have Some tags have attributeattribute such as: such as:<body <body bgcolor bgcolor = “green">= “green">
► There are There are special charactersspecial characters that you that you can’tcan’t just write it as usual: just write it as usual:
space if you need it more than space if you need it more than oneone
"" double quote “double quote “
&& &&
Ronald Pringadi - University of Ottawa 11
HTML – Hyperlink & Mailto: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 12
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 {
font-family: Arial, Helvetica, sans-serif;font-size: 16px;color: #3366FF;background-color: #CCCCCC;text-transform: capitalize;
}}.cool_P {.cool_P {
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #0099CC;font-style: oblique;
}}--></style></style></head>
Tag modifierThis way, all <h1> tagwill be updated
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
.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;
}
This code is in file: ”SEG3120.css””SEG3120.css”
Ronald Pringadi - University of Ottawa 23
CSS – if CSS – if outsideoutside the html the html codecode
<head><title>SEG3120 - CSS TUTORIAL</title><link href<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>
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.
Ronald Pringadi - University of Ottawa 26
Chapter 3Chapter 3JavaScriptJavaScript
Ronald Pringadi - University of Ottawa 27
JavaScript – Brief DescriptionJavaScript – Brief Description
►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.
Ronald Pringadi - University of Ottawa 28
JavaScript – Brief DescriptionJavaScript – Brief Description
► 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
Ronald Pringadi - University of Ottawa 31
JavaScript – Inside HTMLJavaScript – Inside HTML<head><title>SEG3120 - JavaScript TUTORIAL</title>
<script language="JavaScript">function Welcome()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();Welcome();
</script>::
</body>
Ronald Pringadi - University of Ottawa 32
JavaScript – Outside HTMLJavaScript – Outside HTML<head><title>SEG3120 - JavaScript TUTORIAL</title>
<script language="JavaScript“ src=“MyJS.js”src=“MyJS.js”></script>
</head><body>
<script language="JavaScript">Welcome();Welcome();
</script>:::
</body>
Ronald Pringadi - University of Ottawa 33
JavaScriptJavaScript
Ronald Pringadi - University of Ottawa 34
ConclusionsConclusions
► 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()
Ronald Pringadi - University of Ottawa 35
DoneDone
►Any questions?Any questions?►Please visit Please visit http://www.w3schools.comhttp://www.w3schools.com
to study further about HTML, CSS, to study further about HTML, CSS, JavaScript, XML/XSL/DTD.JavaScript, XML/XSL/DTD.
►Study again at home and do a little bit Study again at home and do a little bit more researchmore research
►Good luck for the project.Good luck for the project.►Now, let’s do some practice!Now, let’s do some practice!
Recommended