Embed Size (px)
Citation preview
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.
– 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
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
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
<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>
HTML (cont.)
gives technical information about the document, and specifies its title. Nothing that appears in the header section will be displayed by the browser.
HTML
HTML
• Most of html tags have the stander attributes– Not valid in base, head, html, meta, param, script, style,
and title elements.
Attribute Value Description
Class Class_rule or style_rule The class of the element
Id Id_name Unique Id
Style Style_definition An inline style
Title Tool tip Tooltip text
•Some tags have attribute such as:–Attributes always come in name/value pairs like this: name="value".
<body bgcolor = “green">
HTML
• Special treatment for some characters  , ".
• Click here to see most of HTML Tags and their attributes
<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>
HTML
HTML
Try it<body><p>Student Marks<br> </p><table width="100%" border="2"> <tr bgcolor="green“ align =center > <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>
HTML
CSS• CSS stands for Cascading Style
Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
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…
CSS• Syntax
– selector {property: value} • The selector is normally the HTML element/tag • the property is the attribute you wish to change,
– each property can take a value.
• Three Method to specify1. Tag Modfier
– body {color: black} – p { text-align: center; color: black;
font-family: arial }
CSS• Three Method to specify
2. Class selector• With the class selector you can define different
styles for the same type of HTML element– p.right {text-align: right} – p.center {text-align: center}
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
CSS
3. 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>
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
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
CSS Example
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
CSS example
JavaScript Introduction
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is – a scripting language (a programming language)
• JavaScript embedded in a web browser connects through interfaces called Document Object Model (DOM) to applications, especially to the server side (web servers) and the client side (web browsers) of web applications. – This allows interactivity and dynamicity.
JavaScript Introduction
• A JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language– scripts execute without preliminary compilation
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>
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>
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– …….
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>
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>
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>
More About DOM
http://www.w3schools.com/htmldom/default.asp
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'
}
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>
Next: go through all the examples and try them
