Introduction to DHTML:

 DHTML stands for Dynamic Hypertext Markup language, i.e. Dynamic HTML
 DHTML is not a markup or programming language but it is a term that combines the
features of various web development technique for creating the web pages dynamic and
interactive
 The DHTML application was introduced Microsoft with the release of the 4 th version of
IE(Internet Explorer) in 1997.

Components of DHTML:
DHTML consists of the following four components or languages.
1. HTML 4.0
2. CSS
3. Javascript
4. DOM

1. HTML 4.0:
HTML is a client side Markup language which is a core component of DHTML, it
defines the structure of web page with various defined basic elements or tags.
2. CSS:
CSS stands for cascading style sheet which allows the web users or developers for
controlling the style and layout of HTML elements on the web pages.
3. JavaScript:
JavaScript is a scripting language which is done on a client side. The browser supports
JavaScript technology.
DHTML uses the JavaScript technology for accessing, controlling, manipulating the
HTML document.
The statements in JavaScript are the commands which tell the browser to performing an
action.
4. DOM:
DOM is Document object model. It is a w3c standard, which is a standard interface of
programming of HTML. It is mainly used for defining the objects and properties of all elements
in html

Features of DHTML:

Following are the various characteristics of features of DHTML

 It's simplest and main future is that we can create the web page dynamically.
 dynamic style is a future that allows the user to alter the font size, colour and content of a
web page.
 It provides the facility for using events methods and properties and also provides the
future of the code reusability.
 It also provides the futures in browser for data binding.
 Using DHTML uses in easily create dynamic fonts for their web sites are web pages.
 With the help of DHTML users can easily change the tax and their properties.
Uses of DHTML:

 It is used for designing the animated and interactive web pages that are developed in real-
time.
 DHTML helps users by animating the text and images in their document.
 It allows the authors for adding the effective on their pages.
 It allows the pages authors for including the drop-down menus or rollover buttons.

Difference between HTML and DHTML:

HTML DHTML
1. HTML stands for hypertext markup 1. HTML stands for dynamic hypertext
language markup language
2. HTML is simply markup language 2. DHTML is not a language but it is set of
technology of web document
3. It is used for developing and creating with 3. It is used for creating and designing the
web pages animated and interactive websites or web
pages
4. The Markup language creates static web 4. It creates dynamic web page
pages
5. It does not contain any server side scripting 5. It may contains the code of server side
code scripting
6. The files of HTML are stored with .html 6. The files of dhtml are stored with .dhtml
or .htm extension extension
7. A simple page which is created by a user 7. A page which is created by user using the
without using scripts or styes calles HTML HTML CSS JavaScript technology school
page dhtml page
8. The HTML does not contain database 8. The DHTML needs database connectivity
connectivity because of return tax with the users
 CSS

 CSS stand for cascading style sheets. It is a simple design language intended to simplify
the process of making web pages presentable.
 css allows you to apply styles to web page.
 css is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the markup languages
HTML.

Advantages of CSS:
 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to
make them compatible to future browsers.

CSS Syntax
Selector
{
Property:value1;
Property:value2;
}

 A CSS rule set contains a selector and a declaration block.

 Selector:Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

CSS Selectors

 CSS selectors are used to select the content you want to style. Selectors are the part of
CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
There are several different types of selectors in CSS.
1. Element Selector
2. Id Selector
3. Class Selector
4. Universal Selector
5. Group Selecto

1) Element Selector

 The element selector selects the HTML element by name.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p >Me too!</p>
<p>And me!</p>
</body>
</html>
2) Id Selector

 The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.
 It is written with the hash character (#), followed by the id of the element.

Example:

<html>
<head>
<style>
#para1
{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

3) Class Selector

 The class selector selects HTML elements with a specific class attribute. It is used with a
period character. (Full stop symbol) followed by the class name.

Example
<html>
<head>
<style>
.center
{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
4) Universal Selector
 The universal selector is used as a wildcard character. It selects all the elements on the
pages.

Example

<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

5) Group Selector
 The grouping selector is used to select all the elements with the same style definitions.
 Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

Example

<html>
<head>
<style>
h1, h2, p
{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello heading1</h1>
<h2>Hello heading2 (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
 Types of style sheets:

 CSS is added to HTML pages to format the document according to information in the
style sheet.
 There are three ways to insert style sheets in HTML document they are

1. Inline style sheets

2. Internal or embedded style sheets
3. External Style sheets

1. Inline style sheets:

 An Inline style may be used to apply a unique style for a single element.
 To use inline styles, add the style attribute to the relevant element.
 The ‘style’ attribute can contain any CSS property

Example:
<html>
<head>
<title>Inline style sheets</title>
</head>
<body>
<h1 style=”color:blue”>Hyper Text Markup Language</h1>
<h1 style=”color:green”>Hyper Text Markup Language</h1>
</body>
</html>

2. internal or embedded style sheets:

 Internal style sheets are used to apply styles on a single document or page.
 It can effect all the elements of the page.
 It is written inside the <style> tag with head section of html.

Example:

<html>
<head>
<title>Internal or emebeded style sheets</title>
<style>
h1
{
Color:blue;
Background-color:yellow;
}
 Body
{
Background-color:red;
}
</style>
</head>
<body>
<h1 >Hyper Text Markup Language</h1>
<p>this is paragraph</p>
<h1”>Hyper Text Markup Language</h1>
</body>
</html>

3. External style sheets:

 If you need to use your style sheet to various pages, then it’s always recommended to
define a common style sheet in separate file and attached to various HTML documents
 With an external style sheet, you can change the look of an entire web site by changing
one file.
 Each page must link to the style sheet using the <link> tag. The <link> tag goes inside
the head section.

Attributes of <link> tag:

rel: it specifies the relationship between the current document and the linked
document.
type: It specifies the style sheet language as a content-type. This attribute is required.
href: it specified the style sheet file having style rules. This attribute is required

<head>
<link rel=”stylesheets type=”text/css” href=”filenemae.css”>
</head>
 An external style sheet can be written in any text editor. The file should not contain
any html tags.
 Your style sheet should be saved with a .css extension.
Example:
{
color:red;
background-color:yellow;
}

p
{
color:green;
text-size:20px;
background-color:skyblue;
}

Save the above code with abc.css extension and link to html document.
<html>
 <head>
<title>Internal or emebeded style sheets</title>
<link rel=”stylesheets” type=”text/css” href=”abc.css”>
</head>
<body>
<h1 >Hyper Text Markup Language</h1>
<p>this is paragraph</p>
<h1”>Hyper Text Markup Language</h1>
</body>
</html>

Changing Text and Attributes

 CSS text formatting properties are used to format text and style.
 CSS text formatting include following properties.
1 Text-color
2 Text-alignment
3 Text-decoration
4 Text-transformation
5 Text-indentation
6 Letter spacing
7 Line height
8 Text-shadow
9 Word spacing
10 Text-direction

1.Text-color:
 Text color property is used to set the color of the text.
 Text color can be set by using the name of the color, hexa decimal or rgb values.

Example:
p
{
color:green;
}

2. Text-alignment:
 Text alignment property is used to set the horizontal alignment of the text.
 The text can be set to left, right, center and justified alignment.
 In justified alignment line is stretched such as that left and right margins are straight.

Example:
p
{
text-align:center;
}
3. Text-decoration:
 Text decoration property is used to add or remove decorations from the text.
 Text decoration can be underline, overline, linethrough or none.

Example:
p
{
text-decoration:linethrough;
}

4.Text-transformation:
 Text transformation property is used to change the cases of text uppercase or lowercase.
 Text transformation can be uppercase, lowercase, capitalize.
 Capitalize is used to change the first letter of each word to uppercase.

Example:
p
{
text-transform:capitalize;
}

5. Text indentation:
 Text indentation property is used set the space of the line.
 The size can be in px, cm, pt.

Example:
p
{
text-indent:50px;
}

6. Letter spacing:
 Letter spacing property is used to specify the space between the characters of the text.
 The size can be in px,

Example:
p
{
letter-spacing:10px;
}
7. Line height:
 The line height property is used to set the space between the lines.
 The size can be in px,

Example:
 p
{
line-height:10px;
}

8. Text shadow:
 Text shadow property is used to add shadow to the text.
 You can specify the horizontal size, vertical size, shadow color.

Example:
p
{
text-shadow:3px 3px blue;
}
9. Word spacing:
 Word spacing property is used to specify the space between the words of the line.
 The size can be in px.

Example:
p
{
word-spacing:10px;
}

10. Text direction:

 Text direction property is used to set the direction of the text.
 The direction can be set by using rtl: right to left
 Left to right is the default direction.

Example:
h1
{
direction:rtl;
}

Example html code for text properties:

<html>
<head>
<title>changing text and attributes</title>
<style>
p
{
color:green;
text-align:center;
text-decoration:linethrough;
text-transform:capitalize;
text-indent:50px;
letter-spacing:10px;
line-height:10px;
text-shadow:3px 3px blue;
word-spacing:10px;
direction:rtl;
}

h1
{
direction:rtl;
}
</style>
</head>
<body>
<p>On the Insert tab, the galleries include items that are designed to coordinate
with the overall look of your document. You can use these galleries to insert tables,
headers, footers, lists, cover pages, and other document building blocks. When you
create pictures, charts, or diagrams, they also coordinate with your current
document look.</p>
<h1>heading1</h1>
</body>
</html>
 Dynamically changing styles

 We can also change the existed styles dynamically by using JavaScript.

 First we have to select the element, which you want to change the style and create the
function with the required styles.
 Call the predefined function called “getElementById(“id”) inside the function to collect
id for the element.
 And use “element.style” property to set the style attribute of an element.
 Set the properties either by using bracket notation or dot notation.
 After that we have to assign that function name with onclick event in the button.
 If you click the button while running time then dynamically the styles will be change of
the selected element.

Example:

<html>
<head>
<title> dyanamically changing styles</title>
</head>
<body>
<h1 id=”h1” style=”color:blue; background-color:red”>heading1</h1>
<button onclick=”change_style”>click me</button>
<script>
var heading=document.getElementById(“h1”);
function change_style()
{
Heading.style[“color”]=”red”;
Heading.style[background-color”]=”blue”;
}
</script>
</body>
</html>