You are on page 1of 31

Client Side Technologies:


Dr Harleen
• 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 = 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"

<P>This is a sample paragraph</P>
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"

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
• 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">
background-color: #CCCCCC;

border: 1px solid black;
background-color: #FFFFFF;
margin-bottom: 1em;
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
Control layout (alignment, spacing,
margins, colors, floating elements etc)
Maintain and update many pages faster and
• <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
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 is declared as rules:
- Eg: H1 {color: green}
- Means that all text surrounded by the
<H1></H1> tags should be displayed in green
A rule has two parts
- H1 {color:green}

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
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)
<STYLE TYPE=“text/css”>
H1 {color: green; font-family: impact}
-- >
<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:
<LINK REL=stylesheet HREF=“mystyles.css” TYPE=“text/css”>
<BODY> . . .
CSS-Add styles inline
Applying stylesheets rules to particular
HTML tags
<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
<style type="text/css">
<!-- @import url(;
ul ul { list-style-type: circle; } --> </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
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
P.first { color: green }
P.second { color: purple }
P.third { color: gray }
Using Contextual Selection
 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;}
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
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
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 !