Unit Iv-Introduction To Web Design Dynamic HTML

UNIT IV-INTRODUCTION TO WEB DESIGN
DYNAMIC HTML
DYNAMIC HTML:
• Dynamic HTML is a collective term for a combination of
Hypertext Markup Language (HTML) tags and options
that can make Web pages more animated and
interactive than previous versions of HTML.
• Much of dynamic HTML is specified in HTML 4.0. Simple
examples of dynamic HTML capabilities include having
the color of a text heading change when a user passes a
mouse over it and allowing a user to "drag and drop" an
image to another place on a Web page.
• Dynamic HTML can allow Web documents to look and
act like desktop applications or multimedia
productions.
CASCADING STYLE SHEETS:

• Cascading Style Sheets (CSS) is used to format the
layout of a webpage.
• With CSS, you can control the color, font, the size of text,
the spacing between elements, how elements are
positioned and laid out, what background images or
background colors are to be used, different displays for
different devices and screen sizes, and much more!
Using CSS
DYNAMIC HTML
CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external
CSS file
The most common way to add CSS, is to keep the styles in external CSS
files.
Inline CSS
• An inline CSS is used to apply a unique style to a single

HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of
the <h1> element to blue, and the text color of
the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Internal CSS
• An internal CSS is used to define a style for a single HTML

page.
DYNAMIC HTML
• An internal CSS is defined in the <head> section of an

HTML page, within a <style> element.
• The following example sets the text color of ALL

the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the page
will be displayed with a "powderblue" background color:
Example
DYNAMIC HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for

many HTML pages.
• To use an external style sheet, add a link to it in
the <head> section of each HTML page:
DYNAMIC HTML
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
DYNAMIC HTML
DHTML DOCUMENTS OBJECT MODEL

AND COLLECTION:
The DOM presents HTML as a tree-structure (a node tree),
with elements, attributes, and text:
The HTML DOM is:
• A standard object model for HTML

• A standard programming interface for HTML
• Platform- and language-independent
• A W3C standard
• The HTML DOM defines the objects and properties of all
HTML elements, and the methods (interface) to access
them.
• The HTML DOM can be used to change the content of an
HTML element:
DYNAMIC HTML
<html>
<body>
<h1 id="header">Old Header</h1>
<script type="text/javascript">
document.getElementById("header").innerHTML="New
Header";
</script>
</body>
</html>
HTML output:
New Header
Collections :
• A collection is an array of related objects on a page.

• The all collection of an element (syntactically a property) is
a collection of all the elements in it in order of appearance
• . This gives us reference even to elements that lack ID
attributes. Like all collections, it has a length property. For
DYNAMIC HTML
example, document.all[ i ] references the i th element in
the document. The following are needed for the next
example.
• The innerHTML property of a p element is like the
innerText property but may contain HTML formatting. The
tagName property of an element is the name of the HTML
element.
EVENT HANDLING:
An HTML event can be something the browser does, or
something a user does.
Here are some examples of HTML events:
• An HTML web page has finished loading

• An HTML input field was changed
• An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.

With single quotes:
<element event='some JavaScript'>

With double quotes:
DYNAMIC HTML
<element event="some JavaScript">Example

<button onclick="document.getElementById('demo').inn
erHTML = Date()">The time is?</button>
EXTENSIBLE MARKUP LANGUAGE:

XML stands for eXtensible Markup Language
• XML is a markup language much like HTML

• XML was designed to store and transport data
• XML was designed to be self-descriptive
The XML above is quite self-descriptive:
▪ It has sender information.

▪ It has receiver information
▪ It has a heading
▪ It has a message body.
HTML VS XML:
DYNAMIC HTML
There are many differences between HTML (Hyper Text Markup
Language) and XML (eXtensible Markup Language). The
important differences are given below:
No. HTML XML
1) HTML is used to display data and XML is a software and hardware independent tool use
focuses on how data looks. transport and store data. It focuses on what data
2) HTML is a markup language itself. XML provides a framework to define markup lang
3) HTML is not case sensitive. XML is case sensitive.
4) HTML is a presentation language. XML is neither a presentation language nor a program

language.
5) HTML has its own predefined tags. You can define tags according to your need.
6) In HTML, it is not necessary to use a XML makes it mandatory to use a closing tag.
closing tag.
7) HTML is static because it is used to XML is dynamic because it is used to transport data
display data.
8) HTML does not preserve XML preserve whitespaces.

whitespaces.
DYNAMIC HTML
SYNTAX OF XML:
The syntax rules of XML are very simple and logical. The rules
are easy to learn, and easy to use.
DYNAMIC HTML
• XML Documents Must Have a Root

Element
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
• The XML Prolog

<?xml version="1.0" encoding="UTF-8"?>
• All XML Elements Must Have a Closing

Tag
<br />
• XML Tags are Case Sensitive

<message>This is correct</message>
• XML Elements Must be Properly Nested

<b><i>This text is bold and italic</b></i>
DYNAMIC HTML
• XML Attribute Values Must Always be

Quoted
• <note date="12/11/2007">
<to>Tove</to>
<from>Jani</from>
</note>
DOCUMENT XML VALIDATION:

A "well formed" XML document is not the same as a "valid"
XML document.
A "valid" XML document must be well formed. In addition, it

must conform to a document type definition.
There are two different document type definitions that can be

used with XML:
• DTD - The original Document Type Definition

• XML Schema - An XML-based alternative to DTD
DYNAMIC HTML
A document type definition defines the rules and the legal
elements and attributes for an XML document.
XML DTD:
DTD stands for Document Type Definition.

A DTD defines the structure and the legal elements and
attributes of an XML document.
BUILDING BLOCKS OF XML DOCUMENT:

The building blocks of XML documents are
1. Elements. Elements are the main building blocks of
both XML and HTML documents.
2. Tags. Tags are used to markup elements
3. Attributes. Attributes provide extra information about
elements
4. PCDATA.(PCDATA) means parsed character data
5. CDATA
6. Entities
7. Empty elements
DYNAMIC HTML
8. Elements with data.
DTD ELEMENTS:
• Empty Elements
Empty elements are declared with the category keyword
EMPTY:<!ELEMENT element-name EMPTY>
Example:
<!ELEMENT br EMPTY>
XML example:
<br />
• Elements with Parsed Character Data

Elements with only parsed character data are declared with
#PCDATA inside parentheses:
<!ELEMENT element-name (#PCDATA)>

Example:
<!ELEMENT from (#PCDATA)>
• Elements with any Contents

Elements declared with the category keyword ANY, can contain
any combination of parsable data:
DYNAMIC HTML
<!ELEMENT element-name ANY>
Example:
<!ELEMENT note ANY>
• Elements with Children (sequences)

Elements with one or more children are declared with the
name of the children elements inside parentheses:
<!ELEMENT element-name (child1)>

or
<!ELEMENT element-name (child1,child2,...)>
Example:
<!ELEMENT note (to,from,heading,body)>
DTD ATTRIBUTES:
The attribute-type can be one of the following:
Type Description
CDATA The value is character data
(en1|en2|..) The value must be one from an enumerated list

DYNAMIC HTML
ID The value is a unique id
IDREF The value is the id of another element
IDREFS The value is a list of other ids
NMTOKEN The value is a valid XML name
NMTOKENS The value is a list of valid XML names
ENTITY The value is an entity
ENTITIES The value is a list of entities
NOTATION The value is a name of a notation
xml: The value is a predefined xml value
The attribute-value can be one of the following:

DYNAMIC HTML
Value Explanation
value The default value of the attribute
#REQUIRED The attribute is required
#IMPLIED The attribute is optional
#FIXED value The attribute value is fixed

Unit Iv-Introduction To Web Design Dynamic HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit Iv-Introduction To Web Design Dynamic HTML

Uploaded by

Copyright:

Available Formats

UNIT IV-INTRODUCTION TO WEB DESIGN

CASCADING STYLE SHEETS:

• Inline - by using the style attribute inside HTML elements

• An inline CSS is used to apply a unique style to a single

<p style="color:red;">A red paragraph.</p>

• An internal CSS is used to define a style for a single HTML

• An internal CSS is defined in the <head> section of an

• The following example sets the text color of ALL

• An external style sheet is used to define the style for

DHTML DOCUMENTS OBJECT MODEL

The HTML DOM is:

• A standard object model for HTML

<h1 id="header">Old Header</h1>

• A collection is an array of related objects on a page.

Here are some examples of HTML events:

• An HTML web page has finished loading

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

<element event='some JavaScript'>

<element event="some JavaScript">Example

EXTENSIBLE MARKUP LANGUAGE:

• XML is a markup language much like HTML

The XML above is quite self-descriptive:

▪ It has sender information.

No. HTML XML

3) HTML is not case sensitive. XML is case sensitive.

4) HTML is a presentation language. XML is neither a presentation language nor a program

8) HTML does not preserve XML preserve whitespaces.

• XML Documents Must Have a Root

• The XML Prolog

• All XML Elements Must Have a Closing

• XML Tags are Case Sensitive

• XML Elements Must be Properly Nested

• XML Attribute Values Must Always be

DOCUMENT XML VALIDATION:

A "valid" XML document must be well formed. In addition, it

There are two different document type definitions that can be

• DTD - The original Document Type Definition

DTD stands for Document Type Definition.

BUILDING BLOCKS OF XML DOCUMENT:

• Elements with Parsed Character Data

<!ELEMENT element-name (#PCDATA)>

• Elements with any Contents

• Elements with Children (sequences)

<!ELEMENT element-name (child1)>

The attribute-type can be one of the following:

CDATA The value is character data

(en1|en2|..) The value must be one from an enumerated list

ID The value is a unique id

IDREF The value is the id of another element

IDREFS The value is a list of other ids

NMTOKEN The value is a valid XML name

NMTOKENS The value is a list of valid XML names

ENTITY The value is an entity

ENTITIES The value is a list of entities

NOTATION The value is a name of a notation

xml: The value is a predefined xml value

The attribute-value can be one of the following:

value The default value of the attribute

#REQUIRED The attribute is required

#IMPLIED The attribute is optional

#FIXED value The attribute value is fixed

You might also like