Dynamic HTML

DHTML is a new and emerging technology that has evolved eye catching and mind catching web sites. DHTML combines HTML with Cascading Style Sheets (CSS) and Scripting Language.
Simply:-
DHTML stands for Dynamic HTML.
DHTML is NOT a language or a web standard.
DHTML is a TERM used to describe the technologies used to make web pages dynamic and interactive.

Style Sheet
A style sheet is a list of style rules that describe the style and appearance of an html document. Styles are used in a webpage to control the font size, color etc. The Style assignment process is accomplished with the tags. The tags are written with in the … tags. You can group more than one style rule using the tag pair unlike of applying it individually in inline Style. Each of these tags when used in the BODY of HTML code will apply the style rules.
Style rule:-A style rule is a set of html tags specifying the formatting element. Style rule can be applied to selected contents of a webpage.
Style rules can be divided into two parts.
 Selector:-A selector is a string that identifies what elements the corresponding rule applies to and is the first part of the rule.
 Declaration:-This part of the rule is enclosed within curly brackets. A declaration has two sections separated by a colon. The section before the colon is the property and the one after the colon is the value of that property.
Selector {property: value}
Where,
Selector=any html tag without angular brackets.
Property=attributes like font color, font size etc.
Value=settings for the attribute
E.g. H2 {color: red}
H2 is the selector, color: red is the declaration, color is the property and red is the value.
In the tag within HTML code inside the head section. Syntax There are two types of selector: 1. Simple selectors 2. Contextual selectors. Simple selector:-A simple selector describes an element Irrespective of its position in the document structure. There are three types of simple selectors: 1. Html element selector:-which can use the names of html elements without brackets so the html

tag become p 2. Class selector:-The class selector gives authors the ability to apply styles to specify parts of a document and not necessarily to the whole document. It is denoted by . symbol (.) 3. Id selector:-Id selector is also used to apply style to be selected parts of text. In this style, each id selector has a unique identifier. It is denoted by # symbol. Example

Nepal

Japan

China

USA

Jarmany

England

Argentina

C. Contextual selectors:-contextual selectors can be used to combine number of simple selectors separated by a comma. Eg. H1{color:red} I{color:red} Or h1,i{color:red} Example

Nepal

Nepal is a beautiful country Css (Cascading style sheet):- It is a separate file with the extension of ‘.css’ that contains different style rules and linked to the page with tag inside the part of an html page. Syntax Example Sheet1.css h1{font-family:arial;color:green;font-style:normal} p{font-family:verdana;color:red;text-align:justify;text transform:uppercase;font-weight:bold;font-size:xx-large} Css.html

Nepal

Nepal is a beautiful country

Basic Style Properties: A. Font Attributes: font-family: arial, verdana font-style: normal, italic or oblique font-weight: normal, bold font-size: xx-small, x-small, small, medium, large, x-large, xx-large, larger and smaller or size in points. B. Color and Background Attributes: Color: A color name or color code. background-color: A color name or color code. background-image: Sets the background image (url) background-repeat: With a background image specified, sets up how the image repeats through out the page. Repeat-x, repeat-y, repeat, no-repeat. C. Text Attributes: Text-decoration: Adds decoration to an element's text. (none, underline, overline, line-through) Text-transform: Applies a transformation to the text. (capitalize, uppercase, lowercase or none. Text-align: Aligns text with in an element. (left, right, center, justify) Text-indent: indents the first line of the text. ( percentage of the elements width , or length) D. Border Attributes: Border-style: solid, double, groove, ridge, inset, outset Border-color: A color name or color code. Border-width: Thin, medium, thick or length(e.g 10) E. Margin Related Attributes: Margin-top: percent, length, or auto. Margin-bottom: percent, length, or auto. Margin-left: percent, length, or auto. Margin-right: percent, length, or auto. List Attributes: List-style-type: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none. Description: Tags 1. Capital letter {text-transform: capitalize} 2. Character spacing {letter-spacing: 12} 3. Paragraph indentation {margin-left: 40; margin-top: 40; margin-right: 20; margin-bottom: 20} 4. First line Indent {text-indent: 30} 5. Word Spacing {word-spacing: 20} 6. Line Spacing {line-height: 150%} 7. Background Image {background-image: url (‘abc.jpg’)} 8. Background position of image {background-position: center} Borders: 1. Dotted {border-style: dotted red} 2. Double {border-style: double green} 3. Groove {border-style: groove} 4. Ridge {border-style: ridge} 5. Inset {border-style: inset} 6. Outset {border-style: outset} Changing the color of scrollbar: Changing Mouse Cursor:

Auto

Text

Default

Move

CrossHair

Hand

Pointer

Wait

Help

E-Resize

N-Resize

NE-Resize

NW-Resize

Filter Effects:

Glow

Mask

Shadow

Drop Shadow

Fliph Horizontal

Fliph Vertical

Wave

Note: we must define the width of any tag if we are using filter effects. Positioning:

DHTML Events:-

Nepal

Background Color

Move