Dhtml chapter2

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

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

<html>
<head>
<title>BIT05206 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.ucc.ac.tz"> BIT05206</a>
</p>
</body>
</html>
HTML

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>Lily</td>
<td>A+</td>
</tr>
<tr>
<td>20</td>
<td>Den</td>
<td>C+</td>
</tr>
</table>
</body>

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,
• 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 }

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>

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"> BIT05206 </h1>
<hr>
<p>DHTML tutorial</p>
</body>
</Html>
Tag Modifier
Inline

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

CSS
• Click for more details:
CSS Tutorial.

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.

JavaScript Introduction
• A JavaScript is usually embedded directly into
HTML pages
• JavaScript is an interpreted language (means
that 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>
</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>
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>
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>
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>
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

Dhtml chapter2

More Related Content

What's hot (19)

Similar to Dhtml chapter2 (20)

More from FLYMAN TECHNOLOGY LIMITED (20)

Recently uploaded (20)

Dhtml chapter2