Dhtml chapter2

BIT05206

DHTML

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>BIT05206-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

• 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

http://www.w3schools.com/html/html_reference.asp

<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

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>

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

CSS

• Click for more details:

CSS Tutorial.

http://www.w3schools.com/css/default.asp

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

Technology

Dhtml chapter2