Page 1
81
DHTML & CSS
Chapter 5
DHTML & CSS
Learning Objectives
By the end of this chapter, learner will be able to:
• Diff er en tia t e be tw een HTML & DHTML
• St a t e the purpose of using CSS.
• Lis t diff er en t adv an t ag es and disadv an t ag es of using CSS.
• Under s t and the w orking of all the men tioned pr operties of CSS.
• Cr ea t e an in t er activ e w ebpag e using CSS.
IntroduCtIon
When we open any web page and sends it to the computer requesting it cannot get any
more data from the server unless a new request is made. So to overcome this drawback
we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Client’s browser to bring special effects to otherwise static pages.
1. dHtMl
DHTML is the combination of HTML and JavaScript. DHTML is the combination of
several built-in browser features in fourth generation browsers that enable a web page to
be more dynamic.
dht Ml is a combination of technologies used to create dynamic and interactive Web
sites.
? ht Ml - 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.
? Javas cript - The programming language that allows you to accesses and dynamically
control the individual properties of both HTML and Style Sheets
Dynamic” is defined as the ability of the browser to alter a web page’s look and style after
the document has loaded.
DHTML is not a scripting language (like JavaScript), but merely a browser feature- or
enhancement- that gives your browser the ability to be dynamic.
Page 2
81
DHTML & CSS
Chapter 5
DHTML & CSS
Learning Objectives
By the end of this chapter, learner will be able to:
• Diff er en tia t e be tw een HTML & DHTML
• St a t e the purpose of using CSS.
• Lis t diff er en t adv an t ag es and disadv an t ag es of using CSS.
• Under s t and the w orking of all the men tioned pr operties of CSS.
• Cr ea t e an in t er activ e w ebpag e using CSS.
IntroduCtIon
When we open any web page and sends it to the computer requesting it cannot get any
more data from the server unless a new request is made. So to overcome this drawback
we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Client’s browser to bring special effects to otherwise static pages.
1. dHtMl
DHTML is the combination of HTML and JavaScript. DHTML is the combination of
several built-in browser features in fourth generation browsers that enable a web page to
be more dynamic.
dht Ml is a combination of technologies used to create dynamic and interactive Web
sites.
? ht Ml - 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.
? Javas cript - The programming language that allows you to accesses and dynamically
control the individual properties of both HTML and Style Sheets
Dynamic” is defined as the ability of the browser to alter a web page’s look and style after
the document has loaded.
DHTML is not a scripting language (like JavaScript), but merely a browser feature- or
enhancement- that gives your browser the ability to be dynamic.
82
Information and Computer Technology
DHTML is a collection of features that together, enable your web page to be dynamic. It
is the ability of the browser to alter a web page’s look and style after the document has
loaded.
With dht Ml 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
Features of dht Ml:
? DHTML makes documents dynamic. It allows the designer to control how the HTML
displays Web pages’ content.
? Web page reacts and change with the actions of the visitor.
? DHTML helps to exactly position any element in the window, and change that position
after the document has loaded.
? It can hide and show content as needed.
? DHTML allows any HTML element (any object on the screen that can be controlled
independently using JavaScript) in Internet Explorer to be manipulated at any time,
turning plain HTML into dynamic HTML.
? With DHTML, changes occur entirely on the client-side (on the user’s browser).
Components of dht Ml: Dynamic HTML includes the following components:
? Conventional HTML
? Scripts – Small programs designed to manipulate Web pages.
? Document Object Model (DOM) – The road map through which you can locate any
element in an HTML document and use a scripting DHTML 3 language, such as
JavaScript, to change the element’s properties.
? Absolute Positioning – The elements on the page are placed in a fixed location, as
opposed to relative positioning, in which an element’s location is relative to particular
elements on the page.
? Multimedia filters – Multimedia features that create visual effects for text, images,
and other objects, without imposing long download times on the user.
Page 3
81
DHTML & CSS
Chapter 5
DHTML & CSS
Learning Objectives
By the end of this chapter, learner will be able to:
• Diff er en tia t e be tw een HTML & DHTML
• St a t e the purpose of using CSS.
• Lis t diff er en t adv an t ag es and disadv an t ag es of using CSS.
• Under s t and the w orking of all the men tioned pr operties of CSS.
• Cr ea t e an in t er activ e w ebpag e using CSS.
IntroduCtIon
When we open any web page and sends it to the computer requesting it cannot get any
more data from the server unless a new request is made. So to overcome this drawback
we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Client’s browser to bring special effects to otherwise static pages.
1. dHtMl
DHTML is the combination of HTML and JavaScript. DHTML is the combination of
several built-in browser features in fourth generation browsers that enable a web page to
be more dynamic.
dht Ml is a combination of technologies used to create dynamic and interactive Web
sites.
? ht Ml - 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.
? Javas cript - The programming language that allows you to accesses and dynamically
control the individual properties of both HTML and Style Sheets
Dynamic” is defined as the ability of the browser to alter a web page’s look and style after
the document has loaded.
DHTML is not a scripting language (like JavaScript), but merely a browser feature- or
enhancement- that gives your browser the ability to be dynamic.
82
Information and Computer Technology
DHTML is a collection of features that together, enable your web page to be dynamic. It
is the ability of the browser to alter a web page’s look and style after the document has
loaded.
With dht Ml 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
Features of dht Ml:
? DHTML makes documents dynamic. It allows the designer to control how the HTML
displays Web pages’ content.
? Web page reacts and change with the actions of the visitor.
? DHTML helps to exactly position any element in the window, and change that position
after the document has loaded.
? It can hide and show content as needed.
? DHTML allows any HTML element (any object on the screen that can be controlled
independently using JavaScript) in Internet Explorer to be manipulated at any time,
turning plain HTML into dynamic HTML.
? With DHTML, changes occur entirely on the client-side (on the user’s browser).
Components of dht Ml: Dynamic HTML includes the following components:
? Conventional HTML
? Scripts – Small programs designed to manipulate Web pages.
? Document Object Model (DOM) – The road map through which you can locate any
element in an HTML document and use a scripting DHTML 3 language, such as
JavaScript, to change the element’s properties.
? Absolute Positioning – The elements on the page are placed in a fixed location, as
opposed to relative positioning, in which an element’s location is relative to particular
elements on the page.
? Multimedia filters – Multimedia features that create visual effects for text, images,
and other objects, without imposing long download times on the user.
83
DHTML & CSS
2. CaSCadInG Style SHeetS (CSS)
In this chapter, we will discuss CSS in detail.
Cascading s tyle s heets (Css ) is a style sheet language used for describing the look and
formatting of a document written in a markup language. It is a way to provide style to
HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation
of that document.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
The advantages of using Css are:
? It controls layout of many documents from one single style sheet.
? It has more precise control of layout.
? It applies different layouts to different media-types.
? It has numerous advanced and sophisticated techniques to be applied on web pages.
The l imitations of Css are: CSS is very limited in browser compatibility. When you
design a web page and you want it to display exactly as you like it. The problem with CSS
is that it displays webpages very differently in the different browsers.
Y our webpage looks perfect in Mozilla may look different in Internet Explorer. This is a
big problem for your site’s success.
2.1 Methods of applying CSS to an HtMl document
There are three ways you can apply CSS to an HTML document. The First method is “In-Line” ,
Second method is “Internal” and the Third method i.e. external which is most important.
Method 1: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style.
Example 1: To apply the red background color in a webpage, it can be applied in the
following manner.
<html>
<head>
<title>Example</title>
</head>
<body style=”background-color: #FF0000;”>
<p>The background is red.</p>
</body>
</html>
Page 4
81
DHTML & CSS
Chapter 5
DHTML & CSS
Learning Objectives
By the end of this chapter, learner will be able to:
• Diff er en tia t e be tw een HTML & DHTML
• St a t e the purpose of using CSS.
• Lis t diff er en t adv an t ag es and disadv an t ag es of using CSS.
• Under s t and the w orking of all the men tioned pr operties of CSS.
• Cr ea t e an in t er activ e w ebpag e using CSS.
IntroduCtIon
When we open any web page and sends it to the computer requesting it cannot get any
more data from the server unless a new request is made. So to overcome this drawback
we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Client’s browser to bring special effects to otherwise static pages.
1. dHtMl
DHTML is the combination of HTML and JavaScript. DHTML is the combination of
several built-in browser features in fourth generation browsers that enable a web page to
be more dynamic.
dht Ml is a combination of technologies used to create dynamic and interactive Web
sites.
? ht Ml - 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.
? Javas cript - The programming language that allows you to accesses and dynamically
control the individual properties of both HTML and Style Sheets
Dynamic” is defined as the ability of the browser to alter a web page’s look and style after
the document has loaded.
DHTML is not a scripting language (like JavaScript), but merely a browser feature- or
enhancement- that gives your browser the ability to be dynamic.
82
Information and Computer Technology
DHTML is a collection of features that together, enable your web page to be dynamic. It
is the ability of the browser to alter a web page’s look and style after the document has
loaded.
With dht Ml 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
Features of dht Ml:
? DHTML makes documents dynamic. It allows the designer to control how the HTML
displays Web pages’ content.
? Web page reacts and change with the actions of the visitor.
? DHTML helps to exactly position any element in the window, and change that position
after the document has loaded.
? It can hide and show content as needed.
? DHTML allows any HTML element (any object on the screen that can be controlled
independently using JavaScript) in Internet Explorer to be manipulated at any time,
turning plain HTML into dynamic HTML.
? With DHTML, changes occur entirely on the client-side (on the user’s browser).
Components of dht Ml: Dynamic HTML includes the following components:
? Conventional HTML
? Scripts – Small programs designed to manipulate Web pages.
? Document Object Model (DOM) – The road map through which you can locate any
element in an HTML document and use a scripting DHTML 3 language, such as
JavaScript, to change the element’s properties.
? Absolute Positioning – The elements on the page are placed in a fixed location, as
opposed to relative positioning, in which an element’s location is relative to particular
elements on the page.
? Multimedia filters – Multimedia features that create visual effects for text, images,
and other objects, without imposing long download times on the user.
83
DHTML & CSS
2. CaSCadInG Style SHeetS (CSS)
In this chapter, we will discuss CSS in detail.
Cascading s tyle s heets (Css ) is a style sheet language used for describing the look and
formatting of a document written in a markup language. It is a way to provide style to
HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation
of that document.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
The advantages of using Css are:
? It controls layout of many documents from one single style sheet.
? It has more precise control of layout.
? It applies different layouts to different media-types.
? It has numerous advanced and sophisticated techniques to be applied on web pages.
The l imitations of Css are: CSS is very limited in browser compatibility. When you
design a web page and you want it to display exactly as you like it. The problem with CSS
is that it displays webpages very differently in the different browsers.
Y our webpage looks perfect in Mozilla may look different in Internet Explorer. This is a
big problem for your site’s success.
2.1 Methods of applying CSS to an HtMl document
There are three ways you can apply CSS to an HTML document. The First method is “In-Line” ,
Second method is “Internal” and the Third method i.e. external which is most important.
Method 1: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style.
Example 1: To apply the red background color in a webpage, it can be applied in the
following manner.
<html>
<head>
<title>Example</title>
</head>
<body style=”background-color: #FF0000;”>
<p>The background is red.</p>
</body>
</html>
84
Information and Computer Technology
The above code will produce the following output:
?le:///C:Users/sony/Desktop/check .html
The background is red.
Y ahoo
Method 2: Internal (the tag style)
Another way is to include the CSS codes using the HTML tag <style>. For example like
this:
<html>
<head>
<title>Example</title>
<style type=”text/css”>
body {background-color: #0000FF ;}
</style>
</head>
<body>
<p> The background is Blue.</p>
</body>
</html>
The above code will produce the following output:
?le:///C:Users/sony/Desktop/check .html
The background is blue.
Y ahoo
Page 5
81
DHTML & CSS
Chapter 5
DHTML & CSS
Learning Objectives
By the end of this chapter, learner will be able to:
• Diff er en tia t e be tw een HTML & DHTML
• St a t e the purpose of using CSS.
• Lis t diff er en t adv an t ag es and disadv an t ag es of using CSS.
• Under s t and the w orking of all the men tioned pr operties of CSS.
• Cr ea t e an in t er activ e w ebpag e using CSS.
IntroduCtIon
When we open any web page and sends it to the computer requesting it cannot get any
more data from the server unless a new request is made. So to overcome this drawback
we use Dynamic HTML (DHTML) which is combining HTML and a scripting language
that runs on the Client’s browser to bring special effects to otherwise static pages.
1. dHtMl
DHTML is the combination of HTML and JavaScript. DHTML is the combination of
several built-in browser features in fourth generation browsers that enable a web page to
be more dynamic.
dht Ml is a combination of technologies used to create dynamic and interactive Web
sites.
? ht Ml - 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.
? Javas cript - The programming language that allows you to accesses and dynamically
control the individual properties of both HTML and Style Sheets
Dynamic” is defined as the ability of the browser to alter a web page’s look and style after
the document has loaded.
DHTML is not a scripting language (like JavaScript), but merely a browser feature- or
enhancement- that gives your browser the ability to be dynamic.
82
Information and Computer Technology
DHTML is a collection of features that together, enable your web page to be dynamic. It
is the ability of the browser to alter a web page’s look and style after the document has
loaded.
With dht Ml 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
Features of dht Ml:
? DHTML makes documents dynamic. It allows the designer to control how the HTML
displays Web pages’ content.
? Web page reacts and change with the actions of the visitor.
? DHTML helps to exactly position any element in the window, and change that position
after the document has loaded.
? It can hide and show content as needed.
? DHTML allows any HTML element (any object on the screen that can be controlled
independently using JavaScript) in Internet Explorer to be manipulated at any time,
turning plain HTML into dynamic HTML.
? With DHTML, changes occur entirely on the client-side (on the user’s browser).
Components of dht Ml: Dynamic HTML includes the following components:
? Conventional HTML
? Scripts – Small programs designed to manipulate Web pages.
? Document Object Model (DOM) – The road map through which you can locate any
element in an HTML document and use a scripting DHTML 3 language, such as
JavaScript, to change the element’s properties.
? Absolute Positioning – The elements on the page are placed in a fixed location, as
opposed to relative positioning, in which an element’s location is relative to particular
elements on the page.
? Multimedia filters – Multimedia features that create visual effects for text, images,
and other objects, without imposing long download times on the user.
83
DHTML & CSS
2. CaSCadInG Style SHeetS (CSS)
In this chapter, we will discuss CSS in detail.
Cascading s tyle s heets (Css ) is a style sheet language used for describing the look and
formatting of a document written in a markup language. It is a way to provide style to
HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation
of that document.
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
The advantages of using Css are:
? It controls layout of many documents from one single style sheet.
? It has more precise control of layout.
? It applies different layouts to different media-types.
? It has numerous advanced and sophisticated techniques to be applied on web pages.
The l imitations of Css are: CSS is very limited in browser compatibility. When you
design a web page and you want it to display exactly as you like it. The problem with CSS
is that it displays webpages very differently in the different browsers.
Y our webpage looks perfect in Mozilla may look different in Internet Explorer. This is a
big problem for your site’s success.
2.1 Methods of applying CSS to an HtMl document
There are three ways you can apply CSS to an HTML document. The First method is “In-Line” ,
Second method is “Internal” and the Third method i.e. external which is most important.
Method 1: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute style.
Example 1: To apply the red background color in a webpage, it can be applied in the
following manner.
<html>
<head>
<title>Example</title>
</head>
<body style=”background-color: #FF0000;”>
<p>The background is red.</p>
</body>
</html>
84
Information and Computer Technology
The above code will produce the following output:
?le:///C:Users/sony/Desktop/check .html
The background is red.
Y ahoo
Method 2: Internal (the tag style)
Another way is to include the CSS codes using the HTML tag <style>. For example like
this:
<html>
<head>
<title>Example</title>
<style type=”text/css”>
body {background-color: #0000FF ;}
</style>
</head>
<body>
<p> The background is Blue.</p>
</body>
</html>
The above code will produce the following output:
?le:///C:Users/sony/Desktop/check .html
The background is blue.
Y ahoo
85
DHTML & CSS
Method 3: external (link to a style sheet)
The method to link html with style sheet is called external style sheet.
An external style sheet is a text file with the extension .css. Like other files, we can place
the style sheet on your web server or hard disk.
For example, save the style sheet with the name style.css and place it in a folder named
style.
www .html.net
default.htm
style
style.css
To create a link from the HTML document (default.htm) to the style sheet (style.css). The
following code will be inserted in the header section of the HTML code i.e. between the
<head> and </head> tags. HTML file.
<link rel=”stylesheet” type=”text/css” href=”style/style.css” />
The code will be as follows:
Default.htm
<html>
<head>
<title>My document</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<h1>My stylesheet Page</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
This link will display the layout from the CSS file in the browser when displaying the HTML file.
Read More