NCERT Textbook - DHTML & CS, Information & Computer Technology Class 10 | Information & Computer Technology (Class 10) - Notes & Video PDF Download

 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.