d HTML Updated

7/28/2019 d HTML Updated

1/23

DHTML

DHTML is a combination of technologies used to createdynamic and interactive Web sites.

HTML - For creating text and image links and other pageelements.

CSS - Style Sheets for further formatting of text and html plusother added features such as positioning and layering content.

JavaScript - The programming language that allows you toaccesses and dynamically control the individual properties of

both HTML and Style Sheets


2/23

DHTML

DHTML stands forDynamic 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."


3/23

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


4/23

Introduction

Once a web server processes a web page and sends it to thecomputer requesting it (called the 'Client' computer) it cannotget any more data from the server unless a new request ismade.

We use Dynamic HTML (DHTML) which is combining HTML

and a scripting language that runs on the Client's browser tobring special effects to otherwise static pages.

The scripting language that we will be using is JavaScript asmost browsers support it.

The scripting language can be used to alter HTML datashown (or present but hidden) on the current page bymanipulating the properties for the HTML tags involved.

Basically some script function is called to execute therequired effect when events like 'MouseOver', 'MouseOut','Click', etc. occur.


5/23

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 orbrowser 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'sDreamweaver to contain styles.


6/23

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 }


7/23

CSS Three Method to specify

Class Modifier

With the class selector you can define different styles for the same type ofHTML element

.center {text-align: center}

This heading will be center-aligned

The id Selector

With the id selector you can define the same style for different HTMLelements

#green {color: green}

Hello

Some text


8/23

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;

}


9/23

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 assignednormal 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.


10/23

Grouping

In order to decrease repetitious statements within style sheets,

groupingof selectors and declarations is allowed. For example,

all of the headings in a document could be given identicaldeclarations through a grouping:

H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }


11/23

CSS (cont.) How to Insert a Style Sheet Internal style

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

Inline Styles: Many of the Advantages are

lost


12/23

CSS Example

hr {color: green}

p {margin-left: 20px}

body {background-color:yellow}

SEG3210

DHTML tutorial

Tag Modifier

Inline


13/23

CSS (cont.) How to Insert a Style Sheet External Style Sheet ideal when the style is

applied to many pages


14/23

CSS Cascading order(Priority)

Browser default

External style sheet

Internal style sheet (in the head section)

Inline style (inside an HTML element)


15/23

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;}


16/23

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 horizontalalignment 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 removedecorations 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 specifyuppercase and lowercase letters in a text.

Ex: p {text-transform: uppercase;}

Direction : Specifies the text direction/writing directionEx: div{

direction:rtl;}


17/23

Font

CSS font properties define the font family, boldness, size, and the styleof 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;

}
http://www.w3schools.com/cssref/pr_font_font.asphttp://www.w3schools.com/cssref/pr_font_font-family.asphttp://www.w3schools.com/cssref/pr_font_font-family.asphttp://www.w3schools.com/cssref/pr_font_font.asp


18/23

Link

Links can be styled with any CSS property (e.g. color, font-

family, 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 theuser 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;}


19/23

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}


20/23

Positioning

The CSS positioning properties allow you to position an element. It can alsoplace an element behind another, and specify what should happen when anelement'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 isalways 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;}


21/23

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 :

Ex:

h2

{

position:absolute;

left:100px;top:150px;

}


22/23

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; }


23/23

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;

}

d HTML Updated

Documents

Transcript of d HTML Updated