DHTML

DHTML is a combination of technologies used to create dynamic and interactive Web sites. HTML - 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. JavaScript - The programming language that allows you to accesses and dynamically control the individual properties of both HTML and Style Sheets

DHTML
DHTML stands for Dynamic HTML. DHTML is NOT a language or a web standard. To most people DHTML means the combination of HTML, JavaScript, DOM and CSS. According to the World Wide Web Consortium (W3C): "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

Why DHTML
With DHTML 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

Introduction
Once a web server processes a web page and sends it to the computer requesting it (called the 'Client' computer) it cannot get any more data from the server unless a new request is made. 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. The scripting language that we will be using is JavaScript as most browsers support it. The scripting language can be used to alter HTML data shown (or present but hidden) on the current page by manipulating the properties for the HTML tags involved. Basically some script function is called to execute the required effect when events like 'MouseOver', 'MouseOut', 'Click', etc. occur.

Using Dynamic Forms : While surfing you must have noticed how some forms seem to have special functions like (a) validation of fields (b) text box character limits (c) dynamic displayed lists depending on your selection (d) redirection to other pages (e) manipulating your keyboard input or disabling some keys or browser buttons, etc. Well all this is done through calling some corresponding script functions.
Using Cascading Style Sheets (CSS) : Yes, you might be surprised to know that CSS is part of DHTML. A CSS file is just a JavaScript file with the extension .css which is necessary for it to be recognized by the server and tools like Macromedia's Dreamweaver to contain styles.

CSS
Syntax selector {property: value} The selector is normally the HTML element/tag the property is the attribute you wish to change, and each property can take a value. Three Method to specify Tag Modfier
body {color: black} p { text-align: center; color: black; font-family: arial }

CSS
Three Method to specify Class Modifier With the class selector you can define different styles for the same type of HTML element .center {text-align: center} <h1 class="center"> This heading will be center-aligned </h1> The id Selector With the id selector you can define the same style for different HTML elements #green {color: green} <h1 id="green">Hello </h1> <p id="green">Some text</p>

The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":
#para1 { text-align:center; color:red; }

 The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: Example .center {text-align:center;} p.center {text-align:center;} Contextual Selectors Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties P EM { background: yellow } This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

 Grouping In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }

 How to Insert a Style Sheet

CSS (cont.)

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style>

Inline Styles: Many of the Advantages are lost

CSS Example
<Html> <head> Tag Modifier <style type="text/css"> hr {color: green} p {margin-left: 20px} body {background-color:yellow} </style> Inline </head> <body> <h1 style ="color =blue; text-align=center"> SEG3210 </h1> <hr> <p>DHTML tutorial</p> </body> </Html>

 How to Insert a Style Sheet

CSS (cont.)
.css text file

External Style Sheet ideal when the style is applied to many pages
<head>
<link rel="stylesheet" type="text/css href="mystyle.css" />

</head>

CSS
Cascading order(Priority) Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)

Background
CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color -Sets the background color of an element background-image -Sets the background image of an element background-repeat -Sets how a background image will be repeated background-attachment -Sets whether a background image is fixed or scrolls with the rest of the page background-position -Sets the starting position of a background image Example: h1 {background-color: blue; background-position :center; } body { background-image:url('img_tree.png'); background-repeat:no-repeat; }

Text formatting
Text Color- The color property is used to set the color of the text. Ex: h2 {color:rgb(255,0,0);} Text Alignment - The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. Ex: h1 {text-align:center;} Text Decoration -The text-decoration property is used to set or remove decorations from text. Values are :undeerline/blink/overline/line-through Ex: h1 {text-decoration: overline;} h2 {text-decoration:line-through;} Text Transformation -The text-transform property is used to specify uppercase and lowercase letters in a text. Ex: p {text-transform: uppercase;} Direction : Specifies the text direction/writing direction Ex: div { direction:rtl; }

Font
CSS font properties define the font family, boldness, size, and the style of a text. font Sets all the font properties in one declaration font-family Specifies the font family for text font-size Specifies the font size of text font-style Specifies the font style for text font-variant Specifies whether or not a text should be displayed in a small-caps font Ex: p{ font-family:"Times New Roman", arial font-style: italic; font-size:30px; }

Link Links can be styled with any CSS property (e.g. color, fontfamily, background, etc.). Special for links are that they can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited, a:hover - a link when the user mouses over it, a:active - a link the moment it is clicked The text-decoration property is mostly used to remove underlines from links: a:hover {text-decoration:underline;} The background-color property specifies the background color for links: a:active {background-color:#FF704D;}

Tables Table Borders: To specify table borders in CSS, use the border property. ex: table, th, td { border: 1px solid black; } Width and height :Width and height of a table is defined by the width and height properties. ex : th { height:50px; } Text alignment: The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center. The vertical-align property sets the vertical alignment, like top, bottom, or middle: ex : td { height:50px; vertical-align:bottom;} Table Color: specifies the color of the borders, and the text and background color : th{border : green;color:blue}

Positioning
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled: Ex: p { position: fixed; top:30px; right:5px; }

 Relative Positioning A relative positioned element is positioned relative to its normal position Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>: Ex: h2 { position:absolute; left:100px; top:150px; }

Display : The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". h1 {visibility: hidden;} or h1{display: none;} Float With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. img { float:right; }

BORDER Border Style: The border-style property specifies what kind of border to display. Values : dotted,dashed,solid,double Border Width: The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. Border Color: The border-color property is used to set the color of the border Ex: p.one { border-style:solid; border-color:red; border-width : thin; }