1 / 36

SEG3210

SEG3210. DHTML Tutorial. DHTML. DHTML is a combination of technologies used to create dynamic and interactive Web sites. HTML - For creating text and image links and other page elements.

kenneth-garza
Download Presentation

SEG3210

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. SEG3210 DHTML Tutorial

  2. DHTML • DHTML is a combination of technologies used to create dynamic and interactive Web sites. • HTML - For creating text and image links and other page elements. • CSS - Style Sheets for further formatting of text and html plus other added features such as positioning and layering content. • JavaScript - The programming language that allows you to accesses and dynamically control the individual properties of both HTML and Style Sheets

  3. Why DHTML • With DHTML you can create: • Animation • Pop-up menus • Inclusion of Web page content from external data sources • Elements that can be dragged and dropped within the Web page

  4. HTML

  5. HTML (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 must have an htm or html file extension • An HTML file can be created using a simple text editor

  6. HTML (cont.) <html> <head> <title>SEG3210-Lab1</title> </head> <body> This is Our First Test. <I>This text is Italic</I> </body> </html> • Most tags have opening and closing tags:<html> </html>, <head> </head> • Only some don’t have it: <br>, <hr>, <img> gives technical information about the document, and specifies its title. Nothing that appears in the header section will be displayed by the browser.

  7. HTML

  8. HTML • Some tags have attribute such as:<body bgcolor = “green"> • Attributes always come in name/value pairs like this: name="value". • Click here to see most of HTML Tags and their attributes • Special treatment for some characters &nbsp, &quot

  9. HTML <html> <head> <title>SEG3120 Lab1</title> </head> <body bgcolor =Red> <p align =center> <B> User Interface Design </B></p> <hr> <p>[1] Course Notes<br> <a href="http://www.site.uottawa.ca/%7Eelsaddik/abedweb/teaching/seg3120.html"> SEG3210</a> </p> </body> </html>

  10. HTML

  11. Try it <body> <p>Student Marks<br> </p> <table width="100%" border="2"> <tr bgcolor="green"> <td>Student Number</td> <td>Student First Name </td> <td>Mark</td> </tr> <tr> <td>10</td> <td>Adem</td> <td>A+</td> </tr> <tr> <td>20</td> <td>Jack</td> <td>C+</td> </tr> </table> </body>

  12. HTML

  13. CSS

  14. CSS • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets

  15. CSS • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one • Why? Modularity  simplicity, usability, reusability, etc

  16. CSS • Syntax • selector {property: value} • The selector is normally the HTML element/tag • the property is the attribute you wish to change, • and each property can take a value. • Three Method to specify • Tag Modfier • body {color: black} • p { text-align: center; color: black; font-family: arial }

  17. CSS • Three Method to specify • Class Modifier • With the class selector you can define different styles for the same type of HTML element .center {text-align: center} <h1 class="center"> This heading will be center-aligned </h1> • The id Selector • With the id selector you can define the same style for different HTML elements • #green {color: green} <h1 id="green">Hello </h1> <p id="green">Some text</p>

  18. CSS (cont.) • How to Insert a Style Sheet • Internal style • An internal style sheet should be used when a single document has a unique style. • You define internal styles in the head section by using the <style> • Inline Styles: Many of the Advantages are lost

  19. CSS Example <Html> <head> <style type="text/css"> hr {color: green} p {margin-left: 20px} body {background-color:yellow} </style> </head> <body> <h1 style ="color =blue; text-align=center"> SEG3210 </h1> <hr> <p>DHTML tutorial</p> </body> </Html> Tag Modifier Inline

  20. CSS Example

  21. CSS (cont.) • How to Insert a Style Sheet • External Style Sheet ideal when the style is applied to many pages <head> <link rel="stylesheet" type="text/css“ href="mystyle.css" /> </head> .css text file

  22. CSS example

  23. CSS • Click for more details: CSS Tutorial.

  24. Java Script

  25. JavaScript Introduction • JavaScript was designed to add interactivity to HTML pages • JavaScript is a scripting language (a scripting language is a lightweight programming language) • JavaScript embedded in a web browser connects through interfaces called Document Object Models (DOMs) to applications server-side and client-side. This allows interactivity and dynamicity.

  26. JavaScript Introduction • A JavaScript is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

  27. How to Put a JavaScript Into an HTML Page • Scripts in the body section: • Scripts to be executed when the page loads go in the body section.. <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

  28. Java Script • Scripts in the head section: • Scripts to be executed when they are called, or when an event is triggered, go in the head section. <html> <head> <script type="text/javascript"> …….. </script> </head> </html>

  29. Java Script • External JavaScript • Save the external JavaScript file with a .js file extension <script src="xxx.js"> </script> • Deals with web elements using Java command, • If statement • Variables • Loops • …….

  30. JavaScript Examples <Html> <body> <script type="text/javascript"> var d=new Date() var timeh=d.getHours() var timem=d.getMinutes() document.bgColor=“red” document.write("the time is: ") document.write(timeh) document.write(":") document.write(timem) if (timeh>=12) document.write(" PM") else document.write(" AM") </script> </body>

  31. JavaScript – function <html> <head> <script type="text/javascript"> function message() { alert("Welcome guest!") } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

  32. Java Script and DOM <html> <body> <h1 id="header">My header</h1> <script type="text/javascript"> document.getElementById('header').style.color="red" </script> <p><b>Note:</b> It is the script that changes the style of the element!</p> </body> </html>

  33. More About DOM http://www.w3schools.com/htmldom/default.asp

  34. Example Try it <html> <head> <script type="text/javascript"> function hide() { document.getElementById('txt1').style.visibility ='hidden' } function show() { document.getElementById('txt1').style.visibility = 'visible' } function format() { document.getElementById('txt1').style.color = 'red' document.getElementById('txt1').style.fontSize = '20' document.getElementById('txt1').style.textAlign ="center" document.bgColor='green' }

  35. Example (Cont) function reset() { document.getElementById('txt1').style.color = 'black' document.getElementById('txt1').style.fontSize = '14' document.getElementById('txt1').style.visibility = 'visible' document.bgColor='white' document.getElementById('txt1').style.textAlign ="left" } </script </head> <body> <input type="text" id= "txt1"> <input type="button" value="Hide" onclick="hide()"> <input type="button" value="show" onclick="show()"> <input type="button" value="format" onclick="format()"> <input type="button" value="Reset" onclick="reset()"> </body> </html>

  36. Questions Next: go through all the examples and try them

More Related