Class 10 Exam  >  Class 10 Notes  >  Information & Computer Technology (Class 10) - Notes & Video  >  NCERT Textbook - DHTML & CS, Information & Computer Technology Class 10

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

Download, print and study this document offline
Please wait while the PDF view is loading
 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
6 videos|20 docs|6 tests

Top Courses for Class 10

FAQs on NCERT Textbook - DHTML & CS, Information & Computer Technology Class 10 - Information & Computer Technology (Class 10) - Notes & Video

1. What is DHTML and CS?
Ans. DHTML stands for Dynamic HTML, which is a combination of HTML, CSS, and JavaScript used to create interactive and dynamic web pages. CS stands for Computer Science, which is the study of computers and computing technologies.
2. How can DHTML be used to enhance web pages?
Ans. DHTML can be used to enhance web pages by adding interactivity, animations, and dynamic content. It allows developers to create interactive menus, slide shows, form validations, and other engaging elements on web pages.
3. What is the role of CSS in DHTML?
Ans. CSS (Cascading Style Sheets) is used in DHTML to control the layout and presentation of web pages. It allows developers to define the appearance of HTML elements, such as fonts, colors, margins, and positioning. CSS helps in separating the design and content of web pages, making it easier to maintain and update.
4. How does DHTML differ from static HTML?
Ans. DHTML differs from static HTML in terms of interactivity and dynamic behavior. While static HTML creates fixed and unchanging web pages, DHTML allows elements on the page to change, move, or respond to user actions. DHTML enables the creation of interactive menus, animations, and real-time updates on web pages.
5. What are the benefits of learning DHTML and CS in Class 10?
Ans. Learning DHTML and CS in Class 10 provides several benefits. It helps in developing problem-solving skills, logical thinking, and creativity. It equips students with the knowledge and skills to create interactive web pages and understand the underlying technologies of the internet. Additionally, it lays a strong foundation for further studies and careers in the field of computer science and web development.
6 videos|20 docs|6 tests
Download as PDF
Explore Courses for Class 10 exam

Top Courses for Class 10

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

practice quizzes

,

Summary

,

Viva Questions

,

mock tests for examination

,

Sample Paper

,

Information & Computer Technology Class 10 | Information & Computer Technology (Class 10) - Notes & Video

,

Extra Questions

,

study material

,

Free

,

NCERT Textbook - DHTML & CS

,

Semester Notes

,

shortcuts and tricks

,

NCERT Textbook - DHTML & CS

,

Important questions

,

NCERT Textbook - DHTML & CS

,

past year papers

,

ppt

,

Exam

,

pdf

,

video lectures

,

Previous Year Questions with Solutions

,

Information & Computer Technology Class 10 | Information & Computer Technology (Class 10) - Notes & Video

,

Objective type Questions

,

Information & Computer Technology Class 10 | Information & Computer Technology (Class 10) - Notes & Video

,

MCQs

;