DHTML stands for Dynamic Hyper Text Markup Language. DHTML is not a language or a web standard, rather is a term describing the art of making dynamic and interactive web pages.

DHTML
• DHTML stands for Dynamic Hyper Text Markup Language. DHTML is not a
language or a web standard, rather is a term describing the art of making
dynamic and interactive web pages.
• In DHTML, the term "Dynamic" means the ability of the browser to alter a
web document's look and style after the document has loaded.
• DHTML give you more control over the HTML elements and allows them
to change at any time, without returning to the web server.
• DHTML is basically a combination of HTML, JavaScript, and CSS that allows
web documents to be more dynamic and interactive.
• DHTML is a new tool for web designers to create web pages with special
effects and animations. For example, a piece of text can change from one
size or color to another, or a graphic can move from one location to
another, in response to some kind of user action, such as clicking a button.

COMPONENTS OF DHTML
• (1) HTML: HTML stands for Hypertext Markup Language, and it is the most
• widely used language to design Web Pages, HTML defines the structure of a web page,
using some basic elements or tags.
• (il) Cascading Style Sheets (CSS): CSS controls the formatting of HTML elements it defines
how to display HTML elements our webpage. CSS easy to learn and understand but it
provides powerful control over the presentation of an HTML document.
• iii) 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.

HTML VS. DHTML
html dhtml
HTML stands for Hyper Text Markup
Language mainly used to design static or
flat web pages.
DHTML stands for Dynamic Hyper Text
Markup Language mainly used to develop
dynamic or interactive web pages.
HTML creates a plain web page without
any Styles and Scripts.
DHTML creates a dynamic web page with
HTML, CSS, DOM and Scripts.
In HTML, there is no need for database
connectivity.
DHTML can contain server side code.
DHTML may require connecting to a
database as it interacts with user
HTML sites work slowly upon client-side
technologies.
. DHTML sites work faster upon client-side
technologies.
HTML does not make use of any methods
for making it dynamic.
DHTML uses events, methods and much
more for providing dynamism for HTML
pages.

CSS (CASCADING STYLE SHEET)
• CSS or Cascading Style Sheet is used to control the style of a web
document in a simple and easy way.
• A single CSS file can contain positioning, layout, font, colors and style
information for an entire web site.
• CSS file can be referenced by each html file on the site.
• CSS is a means of separating the content of an html document from the
style and layout of that document.
• Development of large web sites, where fonts and color information were
added to every single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS
• Using CSS, you can control the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, as well as a variety of other effects.

ADVANTAGES OF CSS
• CSS saves time: You can write CSS once and then reuse same sheet
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 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 CSS
file, 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 far better look to your HTML page in comparison of
HTML attributes.
• Multiple device compatibility: Style sheets allow content to be optimized
for more than one type of device.
• Create dynamic pages: With CSS, anyone can easily animate HTML
elements with just a couple lines of simple code.

DISADVANTAGES OF CSS
• Browser Compatibility: CSS works differently on different browsers. Internet
Explorer and Opera supports CSS as different logic.
• Lack of Variables: CSS contain no variables. This makes it necessary to do a
"replace-all" when one desires to change a fundamental constant such as
color,height,width.
• Different syntax to html:uses a different syntax, so a web developer has to
learn two sets formatting syntax instead of one. CSS syntax is also rather
clumsy ar user-unfriendly.
• Lack of Security: CSS is an open text-based system. There is no secure built in,
and anyone with read/write access to a website can disrupt t formatting by
changing the CSS files.

CSS LEVELS
• Page level CSS: This requires the style sheet code to be embedded in a
web page- usually in the <HEAD> tag section at the top. The code then
applies to that page only. To apply the same styles to another page the
entire <STYLE> block must be copied and pasted into the new page.
• Site level CSS: In Site level CSS, somewhere in the website a single page
is stored, usually with the extension .CSS, containing style definitions.
Each page on the website is then linked to that page via a tag in the
<HEAD> tag section, like this: <LINK REL-StyleSheet HREF="style.css">.
When the user downloads the web page, the link is activated and the
styles are applied to the page as it appears on the screen.

CSS SYNTAX
• A CSS comprises of style rules (CSS Rules) that are interpreted by the web
browser and then applied to the corresponding elements in your
document. A CSS rule has two main parts.
• (i) Selector: A selector is an HTML tag at which style will be applied. This
could be any tag like <H1> or <BODY> etc
• ii) Declaration: Each declaration consists of a property and a value. The
property is the style attribute you want to change. Each property has a
value. A CSS declaration always ends with a semicolon, and declaration
groups are surrounded by curly brackets.
• Syntax of CSS style rule is:
Selector {property: value}
Example:
Selector Declaration Declaration
h1 {color:blue; font-size:12px;}
• Property:Value Property:Value

CSS SYNTAX
We can apply same style to more than one selector
P,HI {
color: red;
text-align: center; }

Example:
<HTML>
<HEAD>
<STYLE>
P, H2, H3 {
TEXT-ALIGN: CENTER;
COLOR: BLUE;
FONT-WEIGHT: BOLD;
</STYLE>
</HEAD>
<BODY>
<H2>HEADING-2 IS AFFECTED BY STYLE.</H2>
<H3>HEADING-3 IS AFFECTED BY STYLE.</H3>
<P>THIS PARAGRAPH IS AFFECTED BY STYLE.</P>
</BODY>
</HTMl>

CSS PROPERTIES
• CSS provides number of properties to change the look and feel of web
pages. Here are some basic CSS properties to work with
1. Text Properties
Property Description Values
Color Sets the color of a text. RGB, hex, keyword
line-height Sets the distance between lines.Normal,number,length,%
letter- spacing Increase or decrease the space normal, length
between characters.
text-align Aligns the text in an element. left, right, center, justify
text- decoration Adds decoration to text. none, underline,
l overline, line-
through
text-indent Indents the first line of text in an element. length, %
text- transform controls the letters in an element none, capitalize,
uppercase, lowercase

CSS PROPERTIES
• CSS Font color: This property is used to change the color of
the text. (standalone attribute)
• CSS Font family: This property is used to change the face of
the font.
• CSS Font size: This property is used to increase or decrease
the size of the font.
• CSS Font style: This property is used to make the font bold,
italic or oblique.
• CSS Font variant: This property creates a small-caps effect.
• CSS Font weight: This property is used to increase or
decrease the boldness and lightness of the font.

CSS PROPERTIES
• List-style-type:This property is used to determine
the look of the list item marker, such as a disc,
character, or custom counter style.
• List-style-image: The pictures that will serve as list
item markers may be specified using this parameter.
• List-style-position: It describes where the marker
box should be about the main block box.
• List-style: The list style is configured with this
attribute

CSS PROPERTIES
1.Border: Sets all the border properties in one declaration.
Values: border-width, border-style, border-color
• border- bottom:Sets all the bottom border properties in
one declaration.
border-bottom-width, border- bottom-style, border-
bottom- color: Sets the color of the bottom border.
• border-color: sets the color of the border
• border- bottom-style:Sets the style of the bottom
border.

CSS PROPERTIES
• Border-left –color:sets the color of the left border
• Border-left: setes the all left border properties
• Border –left-style:sets the color of the left border style
• Border –left-width:sets the width of the left border style
• Border-right–color:sets the color of the right border
• Border-right: setes the all right border properties
• Border –right-style:sets the color of the right border style
• Border –right-width:sets the width of the right border
style

CSS PROPERTIES
• Border-top -color:sets the color of the top border
• Border-style: setes the style border properties
• Border-top :sets the color of all top border
• Border-top-style: set the top style border
properties
• Border –top-width:sets the width of the top
border style
• Border width:sets the width of the four borders.

CSS: ID AND CLASS SELECTORS
• In addition to setting a style for a HTML
element, CSS allows you to specify your id and
class
• Id Selector
You can define the style rules based on the Id
attribute of the HTML element All the elements
having that Id will be formatted according to
the defined rule. The HTML element, and is
defined with a #

Example:
<HTML>
<HEAD>
<STYLE>
#P1 {
TEXT-ALIGN: CENTER;
COLOR: RED;
</STYLE>
</HEAD>
<BODY>
<P ID="P1">GOOD MORNING</P>
<P>THIS PARAGRAPH IS NOT AFFECTED BY THE STYLE.</P>
<H2 ID="P1">HAVE A NICE DAY</H2>
<H2> THIS HEADING IS NOT AFFECTED BY THE STYLE.</H2>
</BODY>
</HTML>

Class selector
• Class Selector
• You can also define style rules based on the
class attribute of the <HTML> elements. All the
elements having that class will be formatted
according to the defined rule. This allows you to
set a particular style for many HTML elements
the same class. The class selector uses the
HTML class attribute, and is delic with a "."

Example:
<HTML>
<HEAD>
<STYLE>
.CLS {
TEXT-ALIGN: CENTER;
</STYLE>
</HEAD>
<BODY>
<H2 CLASS="CLS">CENTER-ALIGNED HEADING</H2>
<P CLASS="CLS-CENTER-ALIGNED PARAGRAPH.</P>
</BODY>
</HTML>

You can specify particular element for class selector.
<HTML>
<HEAD>
<STYLE>
P.CLS {
TEXT-ALIGN
</STYLE>
</HEALD>
<BODY>
<H2 CLASS=“CLS”> THIS HEADING IS NOT AFFECTED BY STYLE</H2>
<P CLA=“CLS”>THIS HEADING IS NOT AFFECTED BY STYLE</P>
</BODY>
</HTML>

CSS EMBEDDING TECHNIQUES
• There are three techniques to embed styles or dynamically
change styles within HTML document:
1.Embedded CSS - The <STYLE> Element: You can put your CSS rules
into HTML document using the <STYLE> element this tag is
placed placed between <HEAD>...</HEAD> tags. applied to all the
elements available in the document. General format of this is:
• syntax:
<HEAD>
<STYLE TYPE="TEXT/CSS">
STYLE RULES
</STYLE>

Example:
<HTML>
<HEAD>
<STYLE TYPE-TEXT/CSS">
<!—
BODY
Background: Red;
Font-family: Impact }
H1 {
Font weight: Bold;
Font size: 24pt;
Color: Blue }
-->
</STYLE>
<TITLE>EMBEDDING A STYLE SHEET</TITLE>
</HEAD>
<BODY>
<H1>WELCOME TO THE WORLD OF STYLE SHEET</H1>
</BODY>
</HTML>

Inline CSS
• Inline CSS- The style Attribute: 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 general
• syntax:
• <Element style="...style rules....">

Example:
<HTML>
<HEAD>
<TITLE>INLINE STYLE SHEET</TITLE>
</HEAD>
<BODY>
<H1 STYLE="Color: Red; Font-family: Arial">
INLINE STYLE SHEET
</H1>
<H1>This line is not styled</H1>
</BODY>
</HTML>

EXTERNAL CSS
• External Style Sheets are used to style multiple set of
pages.
• In this type of style sheets, the CSS rules that are
specific to an application are written in a single
document and saved under "filename .css" extension.
• Whenever a web document requires these rules,
filename .css document is linked to the web document.
• This document can be downloaded once and applied to
any number of pages, multiple times, This is possible as
CSS documents are stored in the cache of the browser.

EXTERNAL CSS
External Style sheet of CSS3 can be linked with the web document in
following two ways:
(1) <link>tag
(ii) @import rule
The <link> tag helps in linking the style sheet to single webpage. This
should be linked with every webpage in a website for styling.
Syntax
<link href="" rel="">
• Here, href specifies the location of the stylesheet and rel indicates
that the referred document is a stylesheet.

EXTERNAL CSS
ex.css
body {background-color: yellow;}
h1 {color: blue;}
ExternalStyleSheet.html
<html>
<head>
<link rel="stylesheet" href="ex.css">
</head>
<body>
<h1>WELCOME TO SIA GROUP</h1>
</body>
</html>

CSS: CHANGING TEXT
1. Text Color:The color property is used to set the
color of the text. The color is specified by either
name like "red" or hexadecimal value like
"#ff0000".
Example:
BODY {
color: grey;
color: red; }

CHANGING TEXT
2. Text Alignment:The text-align property is used to set the
horizontal alignment of a text. A text can be left or right aligned,
centered, or justified.
Example:
H1{
text-align: centers }
H2 {
text-align: left; }
H3 {
text-align: right; }

CHANGING TEXT
. Text Decoration:Text Decor-decoration property is used to set or remove decorations
from text.
Example:
H1 { text-decoration: overline;
}
H2 { text-decoration: line-through;
}
H3 { text-decoration: underline;
}
H4 { text-decoration: none;
}
The value text-decoration: none; is often used to remove underlines from links.

CHANGING TEXT
4. Text Transformation:The text-transform property is used to
specify uppercase and lowercase letters in a text.
Example:
H1 { text-transform: uppercase;
H2 { text-transform: lowercase; }
H3 { text-transform: capitalize; }

CHANGING TEXT
The text-indent property in CSS is used to define the
indentation of the first line in each block of text.
example
P {text-indent: 50px; }
The letter-spacing: this property in CSS is used to adjust the
space between characters in a block of text.
Example
H1 {letter-spacing: 3PX; }
H2 {letter-spacing: -3PX; }

CHANGING TEXT
The CSS line height property determines the height of each
line of text within an element
Example:
H1 {line-height: 0.2; }
H2 {line-height: 0.1; }
The word-spacing property adjusts the white space
between words, increasing or decreasing
Example:
H1 {word-spacing: 10px; }
H2 {word-spacing: 20px; }

CSS: CHANGING ATTRIBUTES
It is possible to style HTML elements that have specific attributes or
attribute values. The [attribute] selector is used to select
elements with a specified attribute.
The CSS attribute selector matches elements based on the presence
or value of a given attribute. The [attribute="value"] selector is
used to select elements with a specified attribute and value.
1. CSS [attribute *"="value"] Selector
The [attribute*=value] selector matches every element whose
attribute value below set obtaining color and color on all
elements that have a class attribute value containing "line":

<HTML>
<HEAD>
<STYLE>
[class*="line"] {
background: red;
color: white
}
</STYLE>
</HEAD>
<BODY>
<DIV class="first_line">The first DIV element. </DIV>
<DIV class="second">The second DIV element. </DIV>
<DIV class="third line">The third DIV element. </DIV>
<P class="This is line 4">This is some text in a paragraph. </P>
</BODY>
</HTML>

CSS Selector
2.The [attribute-="value"] selector is used to select elements with an atribute
value containing a specified word
The following example selects all elements with a class attribute that contains
a space-separated list of words, one of which is "student":
Example:
[class~="student"] {
border: 5px solid yellow; }
3. CSS [attributel="value"] Selector
8The [attributel="value"] selector is used to select elements with the
specified attribute starting with the specified value.
The following example selects all elements with a class attribute value that
begins with "once":
Example:
[class l="once"] { background: yellow; }

CSS Selector
4. CSS [attribute$="value"] Selector
The [attribute$="value") selector is used to select elements whose attribute value
ends with a specified value.
The following example selects all elements with a class attribute value that ends with
"test".
Example:
[class$="test"] {
background: yellow;
}

CSS: TEXT GRAPHICS
• CSS to display a nice textual effect
• CSS helps to give style to design including
various effects in text or typography.
• With CSS, you can use clipping add animation
to text .

Example:
<HTML>
<HEAD>
<STYLE>
BODY {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
.typewriter H1
{
color: #fff;
font-family: monospace;
overflow: hidden;
white-space: nowrap;
letter-spacing: .15em;
animation: typing 3.5s steps (30, end),
blink-caret 5s step-end infinite;
}
@keyframes typing
from (width: 0) to (width: 100%)
</STYLE>

CREATING MULTIMEDIA EFFECTS WITH FILTERS AND TRANSITIONS
we can apply multimedia-style effects to their content through the use of
visual filters and transitions.
These effects are implemented in web pages using a Cascading Style Sheets
() attribute.
Visual filters and transitions can be applied to standard HTML controls, such
as text containers, images, and any other windowless object.
A filter allows you to define and apply visual effects to HTML web pages.
There are two types of filters:
1)visual filter and transitions. A visual filter affects the appearance of the
content, whereas, transitions determine how the content will be loaded on
the page.
2)Transitions are time-varving filters that can create a transition from one
visual state to another.

CSS FILTERS
CSS FILTERS
The CSS filter property adds visual effects (like
blur and saturation) to an element
The Filters are applied to HTML controls through
the filter style sheet property.
The filter property is a string of filter
descriptions that uses a function. like notation
but does not require any knowledge of scripting.

Example:
<HTML>
<HEAD>
<STYLE>
#img1
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
</STYLE>
</HEAD>
<BODY>
<P> <B> Original Image </B> </P>

filter funtions
The various filter functions are:
1 ) brightness ()
blur(px)Applies a blur effect to the image.
brightness(%)Adjusts the brightness of the image.
0% will make the image completely black.
100% (1) is default and represents the original image.
Values over 100% will provide brighter results.
Values under 100% will provide darker results.
contrast(%)Adjusts the contrast of the image.
0% will make the image completely gray.
100% (1) is default, and represents the original image.
Values over 100% increases the contrast.
Values under 100% decreases the contrast.

filter funtions
• grayscale(%)Converts the image to grayscale.
100% will make the image completely grayscale
invert(%)Inverts the samples in the image.
100% will make the image completely inverted.
• opacity(%)Sets the opacity level for the image. The opacity-level
describes the transparency-level, where:
0% is completely transparent.
100% (1) is default and represents the original image (no
transparency).
saturate(%)Saturates the image.
0% (0) will make the image completely un-saturated.

filter funtions
• saturate(%)Saturates the image.
0% (0) will make the image completely un-
saturated.
100% is default and represents the original
image.
Values over 100% provides super-
saturated results.

CSS transitions
• The CSS transitions are effects that are added to
change the element graduaally from one style to
another, without using Flash or JavaScript.
• You should specify following two things to create
CSS transition:
(i) The CSS property on which you want to add an
effect.
(ii) The time duration of the effect

<HTML>
<<HEAD>
<STYLE>
DIV {
width: 100px;
height: 100px;
background: orange;
-webkit-transition: width 1s;
transition: width 1s;
}
DIV:hover
{
width: 300px;
}
</STYLE>
</HEAD>
<BODY>
<P> <B> Move the cursor over the DIV element below, to see the
Fransition effect. </B> </P>
<DIV></DIV>
</BODY>
</HTML>

CSS ANIMATION
• CSS "animation property is used to create
animation on the webpage
• animation is created in the @keyframe rule
• When the animation is created in the @keyframe
rule, it must be bound with selector
• Animation can be bound to the selector by
specifying these rules
(i) The name of the animation
(ii) The duration of the animation

EXAMPLE:CSS ANIMATION
<HTML>
<HEAD>
<STYLE>
DIV
{
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 6s;
animation: myfirst 5s;
}
@-webkit-keyframes myfirst {
{from {background:red}

EXAMPLE:CSS ANIMATION
To {background:green}
}
Keyframes myfirst{
{from {background:red}
To {background:green}
}
< /STYLE>
</HEAD>
<BODY>
This example convert the color of bo from red to green
< DIV></DIV>
</BODY>
</HTML>

DHTML stands for Dynamic Hyper Text Markup Language. DHTML is not a language or a web standard, rather is a term describing the art of making dynamic and interactive web pages.

More Related Content

Similar to DHTML stands for Dynamic Hyper Text Markup Language. DHTML is not a language or a web standard, rather is a term describing the art of making dynamic and interactive web pages. (20)

Recently uploaded (20)

DHTML stands for Dynamic Hyper Text Markup Language. DHTML is not a language or a web standard, rather is a term describing the art of making dynamic and interactive web pages.