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

Dhtml chapter2

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(19)

Similar a Dhtml chapter2

Similar a Dhtml chapter2(20)

Mais de FLYMAN TECHNOLOGY LIMITED

Mais de FLYMAN TECHNOLOGY LIMITED(20)

Último

Último(20)

Dhtml chapter2