DHTML

DHTML & CSS
Ravinder Kamboj
Assistant Professor
LCET, Katani Kalan

What is DHTML?
•DHTML is the combination of several built-in
browser features that enable a web page to be more
dynamic.
•DHTML is NOT a scripting language (like JavaScript
or VBscript), 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.

What is DHTML?
It is considered to be made up of
–HTML
–Cascading Style Sheets (CSS)
–Scripting language
All three of these components are linked via
Document Object Model (DOM)
DOM is the interface that allows scripting
languages to access the content, style, and structure
of the web documents and change them dynamically

Tools of DTHML
•HTML and XML
•Partitions and Organizes the content
•CSS
•Defines the Presentation of the content
•Scripting - JavaScript, JScript, VBScript
•Adds interactivity to the page
•DOM- Document Object Model
•Defines what and how elements are exposed for
script access

Components of DHTML
• DHTML requires four independent components to work: HTML,
Cascading Style Sheets, Scripting and the Document Object Model.
The section provides a brief description of each component.
• HTML
– HTML defines the structure of a Web page, using such basic
elements as headings, forms, tables, paragraphs and links.
– On December 18, 1997, HTML 4.0 attained "recommended"
status at the W3C. Changes and enhancements introduced in
HTML 4.0 made DHTML possible.

Cascading Style Sheets (CSS):
• Similar to a template in a word-processing
document, a style sheet controls the formatting
of HTML elements.
• Like in traditional desktop publishing, one can
use style sheet to specify page margins, point
sizes and leading.
• Cascading Style Sheets is a method to
determine precedence and to resolve conflicts
when multiple styles are used.

Scripting
• Scripting provides the mechanisms to interpret user
actions and produce client-side changes to a page.
• For example, scripts can interpret mouse actions
(such as the mouse passing over a specified area of
a page through the event model) and respond to the
action by using a set of predefined instructions (such
as highlighting the text activated by the mouse
action).
• Although DHTML can communicate with several
scripting languages, JavaScript is the de facto
standard for creating cross-browser DHTML pages.

JavaScript
• JavaScript is a simple, powerful, and popular
programming language that is built into web browsers.
• Learning JavaScript is especially useful if you are a web
designer and already know HTML and CSS, because it is
used to make web pages interactive.
• However, JavaScript is not limited to making interactive
web pages; you can also use it for server-side
programming using a framework like Node.js.
• Using HTML and JavaScript, you can change the
contents of HTML elements in response to user events,
such as a button click.

Document Object Model (DOM)
• The DOM outlines Web page content in a way
that makes it possible for HTML elements, style
sheets and scripting languages to interact with
each other.
• The W3C defines the DOM as "a platform- and
language-neutral interface that will allow
programs and scripts to dynamically access and
update the content, structure, and style of
documents.
• The document can be further processed and the
results of that processing can be incorporated
back into the presented stage."

•DHTML can make your browser dynamic and interactive
•Content and design can be separated using Style sheets &
uniformity of the site can be maintained using them
•Validation of input’s given by the user can be done at the
client side, without connection to the server
•Drop down menus can be used to put a lot of information on
the site
DHTML

CSS in detail
• CSS is an abbreviation for Cascading Style Sheets.
• CSS works with HTML and other Markup Languages (such
as XHTML and XML) to control the way the content is
presented.
• Cascading Style Sheets is a means to separate the
appearance of a webpage from the content of a webpage.
• The presentation is specified by styles, which are presented
in a style sheet.
• Instead of using <FONT> tags over and over again to control
little sections of your page, you can establish some rules to
apply globally, to a single page or all the pages on your site.
• CSS is a great time saver.

What's the "Cascade" part of CSS?
• The cascade part of CSS means that more than
one stylesheet can be attached to a document,
and all of them can influence the presentation.
• For example, a designer can have a global
stylesheet for the whole site, but a local one for
say, controlling the link color and background of a
specific page.
• Or, a user can use her own stylesheet if he/she
has problems seeing the page, or if she just
prefers a certain look.

Why Use CSS?
• Makes Pages More Accessible
– Your pages become more accessible.
– By separating the styling (CSS) from the content and structure (HTML),
you are well on your way to satisfying Accessibility requirements.
– This is an important thing to consider, if you are creating sites that
might be used by the visually impaired.
• Reduces Time
– It is much easier to update pages.
– It is much faster to update a page that uses styles over using <FONT>
tags and the like.
– With CSS, you can decide how headings should appear, and enter that
information once.
– Every heading in every page that is linked to this style sheet now has
that appearance.
– With cascading style sheets, whole organizations can share a small
number of style sheets, ensuring consistency across the site with
no need for constant updating and editing to accommodate changes.

• Multiple Style Sheets Cascade Into One
– Style Sheets allow style information to be
specified in many ways.
– Styles can be specified inside a single HTML
element, inside the <head> element of an HTML
page, or in an external CSS file.
– Even multiple external Style Sheets can be
referenced inside a single HTML document.

How Do Style Sheets Work?
• Style sheets are just text files, or text embedded in the
head of an HTML document, that help separate
content from appearance.
• The content of a page goes into an HTML file and the
appearance goes into a style sheet.
• But how does all this end up as a web page in your
browser? Think of a style sheet as a set of instructions,
suggesting to a web browser how to draw a page.
• The style sheet suggests how the browser should
display the page based on rules you define in the style
sheet.

Syntax
• A CSS comprises of style rules that are interpreted by
the browser and then applied to the corresponding
elements in your document. A style rule is made of
three parts:
– Selector: A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
– Property: A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS
properties. They could be color, border, etc.
– Value: Values are assigned to properties. For example,
color property can have the value either red or #F1F1F1
etc.

• You can put CSS Style Rule Syntax as follows:
– selector { property: value }
• Example: You can define a table border as
follows:
– table{ border :1px solid #C00; }

Types of selectors
• HTML tag
• ID
• Class
• Universal
• Descendant Selectors
• Child Selectors

HTML tag as Selector
• HTML tag can be used as selector
h1 {
color: #36CFFF;
}
• A style can be applied to multiple tags :
h1,p {
color: #36CFFF;
}

The Universal Selectors
• Rather than selecting elements of a specific
type, the universal selector quite simply
matches the name of any element type:
* {
color: #000000;
}
This rule renders the content of every element
in our document in black.

The Descendant Selectors
• Suppose you want to apply a style rule to a particular
element only when it lies inside a particular element.
• As given in the following example, the style rule will
apply to <em> element only when it lies inside the
<ul> tag.
ul em {
color: #000000;
}

The Class Selectors
• You can define style rules based on the class attribute
of the elements.
• All the elements having that class will be formatted
according to the defined rule.
.black {
color: #000000;
}
Applying style:
<p class=“black">
This para will be styled by the classes center and bold.
</p>

The ID Selectors
• You can define style rules based on the id attribute of the elements.
• All the elements having that id will be formatted according to the defined
rule.
#black {
color: #000000;
}
• The true power of id selectors is when they are used as the foundation
for descendant selectors. For example:
#black h2 {
color: #000000;
}
• In this example, all level 2 headings will be displayed in black color when
those headings will lie within tags having id attribute set to black.

The Child Selectors
• You have seen the descendant selectors.
• There is one more type of selector, which is very similar to
descendants but have different functionality.
• Consider the following example:
body > p {
color: #000000;
}
• This rule will render all the paragraphs in black if they are a
direct child of the <body> element.
• Other paragraphs put inside other elements like <div> or
<td> would not have any effect of this rule.

Multiple Style Rules
• You may need to define multiple style rules for a single element.
• You can define these rules to combine multiple properties and
corresponding values into a single block as defined in the following
example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
• Here all the property and value pairs are separated by a semicolon
(;)

Grouping Selectors
• You can apply a style to many selectors if you like.
• Just separate the selectors with a comma, as given in the
following example:
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
}
• This define style rule will be applicable to h1, h2 and h3 element
as well.

Types of style sheets
• Internal/Embedded
• Inline
• External

Internal CSS - The <style> Element
• You can put your CSS rules into an HTML document using
the <style> element.
• This tag is placed inside the <head>...</head> tags. Rules
defined using this syntax will be applied to all the elements
available in the document.
• Here is the generic syntax:
<head>
<style type="text/css” media=“”>
Style Rules
............
</style>
</head>

Attributes
• Attributes associated with <style> elements
are:

Example
<html>
<head>
<title>Internal Style Sheet</title>
<style type="text/css" media="all">
h1{
color: #36C;
}
</style>
</head>
<body>
<h1>Hello! Students</h1>
</body>
</html>

Example 2
<html>
<head>
<title>Internal Style Sheet</title>
<style type="text/css" media="all">
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1>Hello! Students</h1>
<h2>How are you?</h2>
<h3>How is your day</h3>
</body>
</html>

Example 3 width:1000px;
• height:100px;
• font:"Times New Roman", Times, serif;
• color:#FFFFFF;
• background:#990033;
• float:left;
• }
• h2
• {
• font:"Times New Roman", Times, serif;
• color:#FFFFFF;
• }
• </style>
• </head>
• <body>
• <div id="main">
• <div id="heading">
• <center>
• <h2>Internal CSS Styles</h2>
• </center>
• </div>
• <table border="" width="1000px">
• <caption>
• <font color="white">
• <marquee direction="right" loop="infinite" bgcolor="brown">
• <h2>Welcome To Chitkara</h2>
• </marquee>
• </font>
• </caption>
• <tr>
• <td width="222"><img src="1.jpg" width="222" height="155"/></td>
• <th colspan="3" bgcolor="green"><h2>Chitkara University</h2></th>
• </tr>
• <tr>
• <td bgcolor="pink">Home</td>
• <td width="302" bgcolor="pink">Departments</td>
• <td width="250" bgcolor="pink">Admission Cell</td>
• <td width="144" bgcolor="pink">Courses</td>
• </tr>
• </table>
• <div id="quality">
• <p><strong>Quality Policy:</strong> Chitkara University </div>
• <div id="vision">
• <p><strong>Vision: </strong>To create a world class educational environment </div>
• <div id="mission">
• <p><strong>Mission:</strong> To develop dynamic technical professionals to lead the 21 </div>
• </div>
• </body>
• </html>
<html>
<head>
<title>Internal StyleSheet</title>
<style>
#main
{
width:1000px;
margin:auto;
}
#heading
{
width:1000px;
height:50px;
background-color:#003399;
}
#quality
{
width:1000px;
height:100px;
font:"Times New Roman", Times, serif;
color:#FFFFFF;
float:left;
}
#vision
{
width:1000px;
height:100px;
font:"Times New Roman", Times, serif;
color:#FFFFFF;
background:#006600;
float:left;
}
#mission
{

Inline CSS
• You can use style attribute of any HTML
element to define style rules.
• These rules will be applied to that element
only.
• Here is the generic syntax:
<element style="...style rules....">
Example:
<h1 style ="color:#36C;"> This is inline CSS </h1>

Example
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<h1 style ="color:#36C;"> This is inline CSS </h1>
</body>
</html>

Example 2
<html>
<head>
<title>Inline StyleSheet</title>
</head>
<body>
<div id="main" style="width:1000px; height:auto; margin:auto;">
<div id="heading" style="width:1000px; height:50px; background-color:#CCCCCC">
<center>
<h2 style="font:'Times New Roman', Times, serif; color:#990033">Inline CSS Styles</h2>
</center>
</div>
<div id="heading" style="width:1000px; height:50px; background-color:#FCFFCC">
<center>
<h3 style="font:'Times New Roman', Times, serif; color:#CCCCFF">Hi! How r u?</h3>
</center>
</div>
</div>
</body>
</html>

External CSS
• The <link> element can be used to include an
external stylesheet file in your HTML
document.
• An external style sheet is a separate text file
with .css extension.
• You define all the Style rules within this text
file and then you can include this file in any
HTML document using <link> element.

Syntax
• Here is the generic syntax of including external
CSS file:
<head>
<link type="text/css" rel="stylesheet"
href="external.css" media="all" />
</head>

Example
• Create three files
– external.css
– page1.html
– Page2.html

external.css
#main
{
background-color:#33FFFF;
}
#one
{
float:left;
width:1000px;
height:200px;
background-color:#CCCCCC;
}
#two
{
width:1000px;
height:100px;
float:left;
background-color:#CFFFCC;
}
#three
{
width:1000px;
background-color:#33FFFF;
height:auto;
float:left;
}
#bottom
{
width:1000px;
height:auto;
float:left;
}

<html>
<head><title>External CSS Demo</title>
<link type="text/css" rel="stylesheet" href="external.css" media="all" />
</head>
<body>
<div id="one">Any inline style sheet takes the highest priority. So, it will override any
rule defined in <style>...</style> tags or the rules defined in any
external style sheet file. </div>
<div id="two">Any rule defined in <style>...</style> tags will override the rules defined
in any external style sheet file.</div>
<div id="three">Any inline style sheet takes the highest priority. So, it will override any
external style sheet file.</div>
<div id="main">Any rule defined in <style>...</style> tags will override the rules defined
<div id="bottom">Any inline style sheet takes the highest priority. So, it will override any
</body>
</body>
</html>

<html>
<head><title>External CSS Demo</title>
<link type="text/css" rel="stylesheet" href="external.css" media="all" />
</head>
<body>
<div id="two">Any inline style sheet takes the highest priority. So, it will override any
external style sheet file. </div>
<div id="one">Any rule defined in <style>...</style> tags will override the rules defined
<div id="three">Any inline style sheet takes the highest priority. So, it will override any
<div id="bottom">Any rule defined in <style>...</style> tags will override the rules defined
<div id="one">Any inline style sheet takes the highest priority. So, it will override any
</body>
</body>
</html>

DHTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (15)

Similaire à DHTML

Similaire à DHTML (20)

Plus de Ravinder Kamboj

Plus de Ravinder Kamboj (13)

Dernier

Dernier (20)

DHTML