seg3120 dhtml lab tutorial ta: ronald pringadi [email protected] prof: abdulmotaleb el...

SEG3120SEG3120DHTML Lab TutorialDHTML Lab Tutorial

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


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


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!


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= + +


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


Chapter 1Chapter 1HTMLHTML


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


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>


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 “

&& &&


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:[email protected]"><img src="img/mail.jpg" border="0"> e-mail</a></p>

</body></html>


The ResultHTML – Hyperlink & Mailto:HTML – Hyperlink & Mailto:


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>


HTMLHTMLTableTable

ssThe Result


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>


HTMLHTMLBullet IndexBullet Index The Result


Chapter 2Chapter 2CSSCSS


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!


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.

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"></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


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


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”


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


CSS – ResultCSS – Result


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.


Chapter 3Chapter 3JavaScriptJavaScript


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.


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.


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)


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


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>


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>


JavaScriptJavaScript


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()


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!

seg3120 dhtml lab tutorial ta: ronald pringadi [email protected] prof: abdulmotaleb el...

Documents

html slide

ronald pringadi university

html file extension

ronald email slide

text file

dhtml tutorial week

ottawa10 html attribute

ottawa14 html tables