Scribd
Upload
175 views

DHTML

The document discusses Dynamic HTML (DHTML) which combines HTML, style sheets, and scripting languages to make web pages dynamic and interactive. It describes the three types of style sheets - inline, embedded, and cascading style sheets (CSS) - and their syntax. It also covers CSS style rules, selectors, declarations, and common style properties. Examples are provided of applying styles using inline, embedded, and external CSS stylesheets.

Uploaded by

Laxman Thapa
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
175 views

DHTML

The document discusses Dynamic HTML (DHTML) which combines HTML, style sheets, and scripting languages to make web pages dynamic and interactive. It describes the three types of style sheets - inline, embedded, and cascading style sheets (CSS) - and their syntax. It also covers CSS style rules, selectors, declarations, and common style properties. Examples are provided of applying styles using inline, embedded, and external CSS stylesheets.

Uploaded by

Laxman Thapa
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

Dynamic HTML DHTML is a new and emerging technology that has evolved eye catching and mind catching

web sites. DHTML combines HTML with Style Sheets and Scripting Language. Simply:DHTML stands for Dynamic HTML. DHTML is NOT a separate 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 <STYLE> </STYLE> tags. The <STYLE> </STYLE> tags are written within the <HEAD> </HEAD> tags. You can group more than one style rule using the <style> </style> 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. There are three types of Style Sheet: a. Inline Style Sheet b. Embedding Style Sheet c. Cascading Style Sheet 1. Inline Style Sheet:It is applied to individual elements in the webpage.

Syntax <html tag style=property:value> 2. Embedding Style Sheet:We can group more than one style rule using the <style>.</style> tag within HTML code inside the head section. Syntax <Style type=text /css> tag {attribute: value; attribute:value;;} </style> 3. 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 <link> tag inside the <head> part of an html page. Syntax <head> <link rel=stylesheet href=filename.css type=text/css> </head> 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. A simple selector describes an element Irrespective of its position in the document structure. There are three types of simple selectors: a. Html element selector:-which can use the names of html elements without brackets so the html<p> tag become p b. Class selector:-The class selector gives authors the ability to apply styles to specific parts of a document and not necessarily to the whole document. It is denoted by symbol (.) c. Id selector :- Id selector is also used to apply style to the selected parts of text. In this style, each id selector has a unique identifier. It is denoted by symbol(#). 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 <STYLE> tags, the expression type=text/css indicates that the style sheet confirms to css syntax. Basic Style Properties:

A. B. C. D. E. F.

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.

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 throughout the page. repeat, no-repeat. background-position: sets the background position of image. Background-attachment:fixed/scroll

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)

Border Attributes:

border-style: solid, double, groove, ridge, inset, outset,dotted border-color: A color name or color code. border-width: thin, medium, thick or length(e.g: 10) border-radius: px

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. Character spacing 2. Paragraph indentation 3. Word Spacing 4. Line Spacing

{letter-spacing: 12} {margin-left: 40; margin-top: 40; margin-right: 20; margin-bottom: 20} {word-spacing: 20} {line-height: 150%}

Example <HTML> <BODY> <H1 STYLE="font-family:vardana;color:red;font-style:italic">Kathmandu is the capital of Nepal</H1>

<p style="font-family:monotype corsiva;font-size:20pt;font-weight:bold;color:green">Nepal is a beautiful country</p> </BODY> </HTML>

Example Sheet1.css h1{font-family:arial;color:green;font-style:normal} p{font-family:verdana;color:red;text-align:justify;texttransform:uppercase;font-weight:bold;font-size:xx-large} Css.html <html> <head><title>Contextual selectors</title> <link rel="stylesheet" href="sheet1.css" type="text/css"> </head> <body> <h1>Nepal</h1> <p>Nepal is a beautiful country</p> </body> </html>

Changing the color of scrollbar: <body style= scrollbar-face-color:purple; scrollbar-base-color:red; scrollbar-arrow- color: orange; scrollbar-track-color: blue; scrollbar-shadow-color:yellow> Changing Mouse Cursor: <html> <head> <title>Mouse Cursor </title> </head> <body> <p style="cursor:auto">Auto</p> <p style="cursor:text">Text</p> <p style="cursor:default">Default</p> <p style="cursor:move">Move</p> <p style= "cursor:crosshair">CrossHair</p> <p style="cursor:hand">Hand</p> <p style="cursor:pointer">Pointer</p> <p style="cursor:wait">Wait</p> <p style="cursor:help">Help</p> <p style="cursor:e-resize"> E-Resize</p> <p style="cursor:n-resize"> N-Resize</p> <p style="cursor:ne-resize"> NE-Resize</p> <p style="cursor:nw-resize">NW-Resize</p> </body> </html> Filter/Text Effects: <html> <head><title>Filter effects</title> <style type="text/css"> h1{width:50%;color:red} </style> </head> <body> <h1 style="filter:glow(color:green)"> Glow</h1> <h1 style="filter:mask(color:teal)"> Mask</h1>

<h1 style="filter:shadow(color:gray)"> Shadow</h1> <h1 style= "filter:dropshadow(color:gray)"> Drop Shadow</h1> <h1 style="filter:fliph()">Fliph Horizontal</h1> <h1 style="filter:flipv()">Flipv Vertical</h1> <h1 style="filter:wave(strength:4)"> Wave</h1> </body> </html> <h1 style="filter:blur(strength:4)"> Wave</h1> </body> </html> Note: We must define the width of any tag if we are using filter. effects. Positioning: <html> <head><title>Positioning</title></head> <body bgcolor=lavender text=aqua> <div style="position:absolute;top:30;left:50"> <img src="lake.jpg" width=200 height=150 border=2> </div> <div style="position:absolute;top:30;left:260"> <img src="lake.jpg" width=200 height=150 border=2> </div> <div style="position:absolute;top:200;left:50"> <img src="lake.jpg" width=200 height=150 border=2> </div> </body> </html> DHTML Events:<html> <head><title>Events in DHTML</title></head> <body> <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">Nepal</h1> <span onmouseover="document.bgColor='teal'" onmouseout="document.bgColor='white'">Background Color</span> <p onmouseover="this.innerText='M O V E'"

onmouseout="this.innerText='Move'">Move</p> <img src="lake.jpg" width=200 height=150 onmouseover="this.src='lake1.jpg'" onmouseout="this.src='lake.jpg'"> </body> </html>

The-End

You might also like