Dhtml ppt (2)

6.1 © 2007 by Prentice Hall
Welcome

.Presentation preparation.
Guided to-
Mr. Sanjay Shinde Sir

• Presented by-
• Abhishek meena
• B.sc. 6th sem.(computer science)
• Web Development

Topic
•
• DHTML (Dynamic HyperText
Markup Language)

• Context-
• 1. DHTML Definition
• 2. Need of HTML
• 3. Various components of DHTML
• 4. Overview of DHTML
• 5. Advantage / Disadvantage of DHTML
• 6. CSS (Cascading Style Sheets)
• 7. DOM( Document Object Model)
• 8. DOM evolution
• 9. HTML & Scripting access
• 10. Rollover buttons

• DHTML Definition-
• DHTML is stands for Dynamic HyperText
Markup Language. It is a combination of HTML with CSS and Scripting
language. DHTML is not language. It is a term that is used to describe the
technologies used to make web pages dynamic and interactive.
• According to the World Wide Web Consortium -“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”.
•

Need of DHTML
• DHTML is the combination of several built-in browser features in fourth
generation browsers that enable a web page to be more dynamic. DHTML
is not a scripting language (like JavaScript), but merely a browser feature
or enhancement that gives our browser the ability to be dynamic. What we
really want to learn is not DHTML itself, but rather, the syntax needed to
use DHTML.
•

Various components of DHTML
The term DHTML is implies that there is a single magic characteristic that
turns plain HTML into a DHTML page. Actually. DHTML is a
combination of several different browser features that work together to
make web pages more dynamic and interactive.
components into our page to make it dynamic. DHTML components are-
1. HTML
2. CSS(Cascading Style Sheets)
3. DOM(Document Object Model)
4. JavaScript

• Overview of DHTML- DHTML stands for Dynamic hypertext
markup language, and it is the most widely used language to write web
pages.
• . Hypertext refers to the way in which web pages (DHTML Document) are
linked together. Thus the link available on a web page are called hypertext.
• . As its name suggests, HTML is a Markup Language which means you
use HTML to simply” Markup “ a text document with tags that tell a web
browsers how to structure it to display.

• Advantage of DHTML-
• 1. Quicker Downloads
• 2. No plug-ins required
• 3. Utility
• Disadvantage of DHTML –
• 1. Costly Editing Tools
• 2. Long and complex Coding
• 3. Browsers Support Problem

• Cascading Style Sheets-
• . Css brings powerful layout and design capabilities to DHTML .
• . Css provides an efficient way to define universal style.
• . Separation the structure of document form content allows greater
manageability and makes changing the style easier.
• The style sheet start and end with <STYLE>….<STYLE> Tags.
Between those tags we specified all the style attributes.
<STYLE>…..<STYLE> Tags are written within the
<HEAD>…..<HEAD> Tags.
• For Example-
• <STYLE Type= “text/CSS”>
• Tag {attribute: value; attribute: value;}
• </STYLE>

• Css evolution-
• . Css was first developed in 1997, as a way for Web developers to define
the look and feel of their Web pages.
• . It was indented to allow develseparate content form design so that HTML
could perform more of the function that it was originally based on- the
markup of content, without worry about the design and layout.

• DOM (Document Object Model)-
• . DOM is platform- and language-neutral interface that allow programs and
scripts to dynamically access and manipulate the content, structure and
style of document.
• . DOM chooses OMG IDL to provide language- independent specification
of the DOM interfaces and provide language bindings for Java and
ECMAScript.
• TYPES-
• 1.Legacy DOM
• 2. Intermediate DOM

• DOM evolution-
• .Level 0 (Netscape Navigator 3.0 and MS IE 3.0)
• . Level1 ( Oct. 1998)
• Contains functionality for document navigation and manipulation of the
content and structure of DHTML and XML documents.
• . Level 2 (Nov. 2000)
• . Level 3 ( Draft, under development)

• HTML & Scripting access-
• . HTML is a markup language. A markup language is a set of markup tags
which used to describe the content of a document. A basic HTML
document contain various HTML tag and plain text. These HTML
documents are also called web page.
• .Scripting access the document demonstrates how to script across the
“embed” element to an embedded SVG documents and it’s scripts in a
cross – browser way. View the document’s (heavily commented ) source to
see how.

• HTML Script-
• Nested HTML Element-
• HTML elements can be nested (elements can contain elements)
• All HTML document consist of nested HTML elements .
• This example contains 4 HTML elements:
• Example-
• <!Doctype html>
• <html>
• <body>
• <h1> My First Heading </h1>
• <p> My First Paragraph</P>
• </body>
• </html>

.Rollover Button.
• What is rollover button?
• A rollover button provides an eye-pleasing option to your site as an
alternative to a standard hyperlink. When a user hovers their mouse over
the button image it magically changes – a great part trick to impress all
your friends.
• There are a variety of methods for doing this but
we’ are going to show you the cleanest, most browser-friendly option. A
small caveat, however: while this method generally works fine on modern
computers (from the last five years or so), you may find it a little hit-and-
miss on anything older, so be cartious.

• There are three aspects to this process:
• 1. Creating the image
• 2. Adding the HTML to the page
• 3. Adding some new style to the CSS file

• 1. Creating the image-
• What you need to do is create a single image
that includes your button in its normal state as well as its rollover state, the
final image will be exactly twice the height of the button size.
• For example, if you button
size is 100 pixels wide and 20 pixels high, then the image you are creating
will be 100 pixels wide and 40 pixels high.

• 2. The HTML-
• We simply insert a search engine friendly hyperlink in
the code, as shown here.
• <a id = “click me 1”
• href = “ some page. Htm” >< span> click me </span></a>
• It is important we give the link a unique ID, as in this example it is
clickme1. This is particularly important if we are adding more than one
rollover button. The second button will be clickme2 etc. The reason for this
will become obvious in the next step.

• 3. Adding the CSS –
• This is where a little bit of CSS magic comes in
to play and transforms our ordinary looking hyperlink into a super
impressive rollover button.
• Add the CSS code shown here to your CSS style file, replacing clickme1
with the ID you have used as well as updating the image file name. If the
image is not stored in the same folder as your CSS file then add the full
URL.

• # clickme1
• {
• display: block;
• Width: 100PX;
• height: 20PX;
• Background : URL (“ click me. gif”)
• No- repeat0 0;
• }
• # clickme1 : hover
• {
• Background – position : 0 _ 20px;
• }
• # clickme1 span
• {
• Display : none ;
• }
•

• You should also change the “width” and “height” so that its same width
and height as your button.
• Remember that you’ve made your
original image twice as high as your actual button. So your “height”
number should be half the height of your image.
• Lastly, look at the part the refers to
• background – position : 0-20PX;
•
• Substitute – 20 with the number you just used for” height”, with a minus in
front of it. So if the total height of your button is actually 60 pixels and not
40 as we’ve used in our example, then change it to what’s shown here.

• background – position : 0-30PX;
• Save the changes to your CSS file.
• That’s it – you are done.

• Any Question ?

• ……Thank you…..

Dhtml ppt (2)

More Related Content

What's hot (20)

Similar to Dhtml ppt (2) (20)

More from Rai Saheb Bhanwar Singh College Nasrullaganj (20)

Recently uploaded (20)

Dhtml ppt (2)