DHTML

Client Side Technologies:
DHTML
Dr Harleen
DHTML
• DHTML = Dynamic HTML
It allows you to build rich client interfaces and to modify
them dynamically
• There is no DHTML standard

It is not a W3C, IEEE, ISO or anything else standard
• DHTML is a collection of several standards

DHTML consists of HTML/XHTML, CSS, DOM and
JavaScript (or ECMAScript)
HTML / XHTML
• HTML = HyperText Markup Language
Allows you to define and structure the contents of your
document. Latest (last?) version is 4.01.
•Contents, not design

HTML/XHTML was never intended to convey design
HTML / XHTML Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY>
<P>This is a sample paragraph</P>
</BODY>
</HTML>
Standards vs. Quirk Mode
• 2 Modes of Operation
All modern browsers support 2 modes: Standards Mode for
standard-compliant code and "Quirks" Mode for older or
non-compliant code
• !DOCTYPE Specifies the Mode

A properly formatted DOCTYPE declaration puts the
browser in Standards Mode. Otherwise, it's Quirks Mode.
<!DOCTYPE OutermostTag RespOrg PublicIdentifier SystemIdentifier>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
What is DHTML?
DHTML is the combination of several built-in
browser features in fourth generation browsers
that enable a web page to be more dynamic.
DHTML is NOT a scripting language (like
JavaScript), but a browser feature- or
enhancement- that makes the browser dynamic
It uses a host of different technologies -
JavaScript, VBScript, the Document Object Model
(DOM), layers, cascading stylesheets - to create
HTML that can change even after a page has been
loaded into a browser
CSS – Cascading Style
Sheets
CSS
• CSS = Cascading Style Sheets
Allows you to define the styles to apply to your document.
Latest version is 2.1.
• Design, not content

CSS is intended to separate design from content
• Very powerful
CSS is much more powerful than HTML design tags
CSS Example
<STYLE TYPE="text/css">
BODY {
background-color: #CCCCCC;
}
P{
border: 1px solid black;
background-color: #FFFFFF;
margin-bottom: 1em;
}
</STYLE>
What is CSS?
It is a specification controlled by the World
Wide Web Consortium (W3C).
HTML controls the organization of a Web
page document
CSS controls the presentation and layout of
the Web page document elements
What is CSS? ...
CSS1- visual presentation of elements
CSSP - positioning of elements
CSS2 -visual and audio presentation of
elements. It includes attributes from CSS1
and CSS-P
What CSS can do?
With CSS you can separate form from
structure
Control layout (alignment, spacing,
margins, colors, floating elements etc)
Maintain and update many pages faster and
easier
HTML and CSS
• <STYLE> tag
Delineates inline styles
<STYLE TYPE="text/css"> /* Styles go here... */ </STYLE>
• <LINK> tag
References external style sheets. Allows for alternates.
<LINK REL="stylesheet" HREF="default.css" TYPE="text/css">
• STYLE attribute
Defines inline styles for a specific block of HTML code
<P STYLE="color: #FF0000; font-weight: bold;"> some text </P>
CSS: Rule Structure
P { color: #000000; font: arial; }
Selector Declaration Value
Rule Declaration Block Property

CSS: Selector Types
P { color: black; } /* Element Selector */
P, H1, H2 { color: black; } /* Grouping Selector */
* { color: black; } /* Universal Selector */
P.urgent, .Error { color: black; } /* Class Selector */
#Menu { color: black; } /* ID Selector */
*[title], A[href][title] { color: black; } /* Attribute Selector */
A[title="home page"] { color: black; } /* Exact Attribute Selector */
A[title~="foo"] { color: black; } /* Partial Attribute Selector */
*[lang|="en"] { color: black; } /* Particular Attribute Selector */
UL LI UL { color: black; } /* Descendant Selector */
P > STRONG { color: black; } /* Child Selector */
H1 + P { color: black; } /* Adjacent Sibling Selector */
A:hover { color: black; } /* Pseudo-Class Selector */
P:first-letter { font-size: 200%; } /* Pseudo-Element Selector */
CSS: Common Declaration
Properties
background background-attachment background-color
background-repeat border bottom
color cursor display
float font font-family
font-size font-style font-weight
height left letter-spacing
line-height list-style-image list-style-position
list-style-type margin overflow
padding position right
text-align text-decoration text-indent
text-transform top vertical-align
visibility white-space width
word-spacing word-wrap z-index
CSS-Terminology
CSS is declared as rules:
- Eg: H1 {color: green}
- Means that all text surrounded by the
<H1></H1> tags should be displayed in green
color
A rule has two parts
- H1 {color:green}
SELECTOR { DECLARATION }
CSS – Terminology…
Declaration has two parts:
HI {color : green }
property : Value
•In general:
•Element(s) { Property1:Value1; Property2 : Value2a , Value2b
}
Eg.: H1, B {color:olive; background:yellow; font-
family: arial, courier }
CSS-Adding styles to web pages
Four ways
Embed a style sheet within HTML
document
Link to an external stylesheet from the
HTML document
Add styles inline in the HTML document
Importing style sheets
CSS-Embed a style sheet
All stylesheet information lies at the top of the
HTML code (in the head portion)
Eg:
<HTML>
<STYLE TYPE=“text/css”>
<!—
H1 {color: green; font-family: impact}
-- >
</STYLE>
<HEAD>
<BODY> . . .
Style applies to the whole document

CSS-Link to an external stylesheet
An externally defined stylesheet is used as a style
template that can be applied to a number of pages
A text file (with ext .css) contains the stylesheet
rules to be applied to a page (or set of pages)
Eg. A file named ‘mystyles.css’
H1 {color: green; font-family: impact}
B {color: red; font-family: courier}
This file is linked to the HTML document (<LINK>)
In the web Page:
<HTML>
<LINK REL=stylesheet HREF=“mystyles.css” TYPE=“text/css”>
<HEAD>
<BODY> . . .
CSS-Add styles inline
Applying stylesheets rules to particular
HTML tags
Eg:
<B STYLE=“color: purple; background: yellow”>Adding Inline styles</B>
The style applies to only that particular

<B> tag
CSS – Importing Stylesheets
Style Sheets which are external to the HTML document are
imported (included) into the <style> element within the
<head> element of the current document.
Similar to linking, but useful when you want to override
some style rules when you include it in your own
stylesheet.
<style type="text/css">
 </style>
The imported sheets must appear before any document-
specific styles
CSS- Classes
Selectively apply a style to HTML elements
you can define different classes of style to the
same element, and apply the appropriate class of
style when required
HTML
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
Stylesheet
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
Using Contextual Selection
Criteria
Through the use of contextual selection criteria we
can define tags within tags. We can define a style
to happen when certain tags are used within a
specified order
For example, to specify a green text color for all
<EM> elements inside <H1> elements
<STYLE TYPE="text/css">
H1 EM {color:green;}
</STYLE>
CSS-Positioning Elements
Layering is an approach to organize pieces of
content in a meaningful manner. They act as
containers of content
A block of content (text, images, audio files etc) is
grouped together within <DIV>, <SPAN> or
<LAYER> tags
They are referred to as CSS Layers
Layer tags carry no formatting properties of its
own
CSS-Positioning …
Layers can be positioned at exact coordinates on
the page using CSS-P The format for these can be
specified in two ways:
Specifying the styles within the <DIV> tags
Specifying an ID to the Layers and then controlling
their position and appearance using these ID’s
CSS-Positioning …
CSS-P allows you to specify four types of
positioning of layer
Horizontal and vertical position
Clipping size of the visible element within the
positioned area
Z-order
Visibility of the positioned element
CSS- Positioning …
Horizontal and Vertical Control
left and top, that are relative to the distance
from the left-most, top-most corner of the
document window
Clipping size of the element
Height and width establish the area in which
the layer in positioned
CSS- Positioning …
Establishing a Z-Order
Z-index is an integer; the higher its value, the closer it
is to the front in the Z-ordered plane
Controlling Visibility of Elements

Make any element or group of elements invisible. This
enables selective display of different parts of a
document when used in combination with the
Document Object Model exposed to Script
Thank You !

DHTML

Uploaded by

Copyright:

Available Formats

DHTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DHTML

Uploaded by

Copyright:

Available Formats

Client Side Technologies:

• There is no DHTML standard

• DHTML is a collection of several standards

•Contents, not design

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

• !DOCTYPE Specifies the Mode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

• Design, not content

P { color: #000000; font: arial; }

Selector Declaration Value

Rule Declaration Block Property

Style applies to the whole document

The style applies to only that particular

Controlling Visibility of Elements

You might also like