WEB DEVELOPMENT

.Presentation preparation.
Guided to-
Mr. C.L.Malviya Sir
Mr. Sanjay Shinde Sir

 Presented by-
 Deepika Yadav
 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.

WEB DEVELOPMENT

Related slideshows

More Related Content

WEB DEVELOPMENT