Download presentation
Presentation is loading. Please wait.
1
SEG3120 DHTML Lab Tutorial TA: Ronald Pringadi ronaldpringadi@hotmail.com Prof: Abdulmotaleb El Saddik University of Ottawa Winter 2005
2
Ronald Pringadi - University of Ottawa2 About the TA & Lectures Office hours: by appointment, Vanier 255A or Thursday after lab SEG3120 lab3, 8:30pm. Office hours: by appointment, Vanier 255A or Thursday after lab SEG3120 lab3, 8:30pm. You can reach me at MSN Messenger You can reach me at MSN Messenger ronaldpringadi@hotmail.com ronaldpringadi@hotmail.com ronaldpringadi@hotmail.com Get the slides from Get the slides from http://www.site.uottawa.ca/~pringadi/ http://www.site.uottawa.ca/~pringadi/ http://www.site.uottawa.ca/~pringadi/ Or Prof. El Saddik Website Or Prof. El Saddik WebsiteProf. El Saddik WebsiteProf. El Saddik Website
3
Ronald Pringadi - University of Ottawa3 About the TA & Lectures Week 5 (31JAN, 01FEB, 03FEB) is for DHTML tutorial Week 5 (31JAN, 01FEB, 03FEB) is for DHTML tutorial Week 7 (14FEB, 15FEB,17FEB) is for FLASH tutorial Week 7 (14FEB, 15FEB,17FEB) is for FLASH tutorial Week 9 (28FEB, 1MAR, 3MAR) Prototype Workshop 1 Week 9 (28FEB, 1MAR, 3MAR) Prototype Workshop 1 Week 10 (28FEB, 1MAR, 3MAR) Prototype Workshop 2 Week 10 (28FEB, 1MAR, 3MAR) Prototype Workshop 2 Week 11 (14MAR, 15MAR, 17MAR) Final Demos 1 – presenters from W9 Week 11 (14MAR, 15MAR, 17MAR) Final Demos 1 – presenters from W9 Week 12 (21MAR, 22MAR, 24MAR) Final Demos 2 – presenters from W10 Week 12 (21MAR, 22MAR, 24MAR) Final Demos 2 – presenters from W10
4
Ronald Pringadi - University of Ottawa4 Attention There will be questions on the final exams about the tutorial labs! There will be questions on the final exams about the tutorial labs! Do not fall asleep, or using any chatting programs! Do not fall asleep, or using any chatting programs! Relax but please be serious about the lab! 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! For final project: present me with your creativity! And something beautiful, feasible, and useful for the final demo!
5
Ronald Pringadi - University of Ottawa5 DHTML Introduction DHTML (Dynamic HTML) – Whats that? DHTML (Dynamic HTML) – Whats that? Combination of HTML, CSS, and JavaScript to create dynamic and interactive Web pages Combination of HTML, CSS, and JavaScript to create dynamic and interactive Web pages DHTMLHTMLCSSJavaScript = ++
6
Ronald Pringadi - University of Ottawa6 DHTML Introduction Good reading references Good reading references http://www.w3schools.com/dhtml/ http://www.w3schools.com/dhtml/ http://www.w3schools.com/dhtml/ selfhtml? But its in German. selfhtml? But its in German. Good editor software references Good editor software references DHTML - Macromedia Dreamweaver DHTML - Macromedia Dreamweaver Flash - Macromedia Flash Flash - Macromedia Flash www.macromedia.com www.macromedia.com
7
Ronald Pringadi - University of Ottawa7 Chapter 1 HTML
8
Ronald Pringadi - University of Ottawa8 HTML – Brief Description HTML stands for Hyper Text Markup Language HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page 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 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 An HTML file can be created using a simple text editor
9
Ronald Pringadi - University of Ottawa9 HTML – Simple Example <html><head> Title of page Title of page </head><body> This is my first homepage. This text is bold This text is bold </body></html> Most tags have opening and closing tags:, Most tags have opening and closing tags:, Only some dont have it:,, Only some dont have it:,,
10
Ronald Pringadi - University of Ottawa10 HTML – Attribute & Sp. Char. Some tags have attribute such as: Some tags have attribute such as: There are special characters that you cant just write it as usual: There are special characters that you cant just write it as usual: space if you need it more than one " double quote double quote &&
11
Ronald Pringadi - University of Ottawa11 HTML – Hyperlink & Mailto: SEG3120 - TUTORIAL Example for the students of SEG3120 [1] Hyperlink Ronald Website http://www.geocities.com/ronaldpringadi [2] Email Give Ronald e-mail
![Ronald Pringadi - University of Ottawa11 HTML – Hyperlink & Mailto: SEG TUTORIAL Example for the students of SEG3120 [1] Hyperlink Ronald Website [2] Give Ronald](http://images.slideplayer.com/2/717195/slides/slide_11.jpg "Ronald Pringadi - University of Ottawa11 HTML – Hyperlink & Mailto: SEG TUTORIAL Example for the students of SEG3120 [1] Hyperlink Ronald Website [2] Give Ronald")
12
Ronald Pringadi - University of Ottawa12 The Result HTML – Hyperlink & Mailto:
13
Ronald Pringadi - University of Ottawa13 HTML Tables Example for the students of SEG3120 Student Marks Student_# Student Name Project Description Mark Grade 001 Jack Online teaching E-learning 86 A 002 Jill Cybernatic Intelegence 65 C++
14
Ronald Pringadi - University of Ottawa14 HTML Tables The Result
15
Ronald Pringadi - University of Ottawa15 HTML Bullet Index Example for the students of SEG3120 Eggnog Recipe eggs 1 cup + 1 tablespoon sugar 1/2 teaspoon vanilla extract 1/4 teaspoon ground nutmeg 3/4 cup brandy 1/3 cup dark rum (Captain Morgan for best flavor) 2 cups whipping cream 2 cups milk
16
Ronald Pringadi - University of Ottawa16 HTML Bullet Index The Result
17
Ronald Pringadi - University of Ottawa17 Chapter 2 CSS
18
Ronald Pringadi - University of Ottawa18 CSS – Brief Description Cascading Style Sheets Cascading Style Sheets Defining the style and layout model for HTML documents. Defining the style and layout model for HTML documents. To make changes on the style and the layout become more simple. To make changes on the style and the layout become more simple. There are 2 type of implementation There are 2 type of implementation 1.Internal tag: only for that html file. 2.External.css file, changes made will update the whole page!
19
Ronald Pringadi - University of Ottawa19 CSS – Variations Can be deployed inside the HTML or outside HTML file. If deployed outside the HTML file, the filename extension is.css 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. 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.
20
Ronald Pringadi - University of Ottawa20 CSS – if inside the html code SEG3120 - CSS TUTORIAL <!-- h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #3366FF; background-color: #CCCCCC; text-transform: capitalize;}.cool_P { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0099CC; font-style: oblique;} --></style> Tag modifier This way, all tag will be updated Class modifier class=cool_p This way, all tags with attribute class=cool_p will be updated
21
Ronald Pringadi - University of Ottawa21 CSS – if inside the html code the ugly duckling It was a golden afternoon in late summer.… "These eggs are taking a long time to hatch!" she sighed…. "Oh, the world's much bigger than this," quacked the…. Implementing them inside the body
22
Ronald Pringadi - University of Ottawa22 CSS – if outside the html code.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; } SEG3120.css This code is in file: SEG3120.css
23
Ronald Pringadi - University of Ottawa23 CSS – if outside the html code SEG3120 - CSS TUTORIAL the ugly duckling It was a golden afternoon in late summer.… "These eggs are taking a long time to hatch!" she sighed…. "Oh, the world's much bigger than this," quacked the…. Implementing the external CSS inside the html
24
Ronald Pringadi - University of Ottawa24 CSS – Result
25
Ronald Pringadi - University of Ottawa25 CSS – Outside the HTML file is more Preferable index.htm story1.htm story2.htm catalog.htm MyStyle.css Any changes to the external CSS file, will apply to all referring html files Any changes to the external CSS file, will apply to all referring html files Makes global, consistent changes. Makes global, consistent changes.
26
Ronald Pringadi - University of Ottawa26 Chapter 3 JavaScript
27
Ronald Pringadi - University of Ottawa27 JavaScript – Brief Description Scripting language that allows you to write codes that control all HTML elements Scripting language that allows you to write codes that control all HTML elements Providing good interactivity Providing good interactivity Great feedback to the user Great feedback to the user It doesnt need for a JVM (java virtual machine) new internet browsers (IE, Netscape), able to parse it (client side processing. It doesnt need for a JVM (java virtual machine) new internet browsers (IE, Netscape), able to parse it (client side processing.
28
Ronald Pringadi - University of Ottawa28 JavaScript – Brief Description Writing style almost same with Java programming language Writing style almost same with Java programming language Be careful it is case sensitive Be careful it is case sensitive JavaScript commands can be put inside the HTML code or in an external file with.js extension 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. Any mistake made will cause the next line not executed, and there will be a notification icon in lower left of I.E.
29
Ronald Pringadi - University of Ottawa29 JavaScript – Variables Variables doesnt need to be declared Variables doesnt need to be declared It doesnt have a data type (such as int, str, etc) It doesnt have a data type (such as int, str, etc)
30
Ronald Pringadi - University of Ottawa30 JavaScript – Event Events are part of HTML 4.0, and it is not case sensitive 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 There are events for mouse, form, button, page, keyboard: onabort, onload, onmousedown, onsubmit, etc
31
Ronald Pringadi - University of Ottawa31 JavaScript – Inside HTML SEG3120 - JavaScript TUTORIAL function Welcome() function Welcome() { var TotalStudent =33; var Greet="Hallo SEG3120"; window.alert(Greet); document.writeln("Welcome SEG3120! " ); document.writeln("We have: "+ TotalStudent + " participants today " ); } Welcome(); :
32
Ronald Pringadi - University of Ottawa32 JavaScript – Outside HTML SEG3120 - JavaScript TUTORIAL src=MyJS.js Welcome(); :
33
Ronald Pringadi - University of Ottawa33 JavaScript
34
Ronald Pringadi - University of Ottawa34 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 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. 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 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() Some CSS effects need server side processing: such as filter()
35
Ronald Pringadi - University of Ottawa35 Done Any questions? Any questions? Please visit http://www.w3schools.com to study further about HTML, CSS, JavaScript, XML/XSL/DTD. Please visit http://www.w3schools.com to study further about HTML, CSS, JavaScript, XML/XSL/DTD.http://www.w3schools.com Study again at home and do a little bit more research Study again at home and do a little bit more research Good luck for the project. Good luck for the project. Now, lets do some practice! Now, lets do some practice!
Similar presentations
