DHTML Introduction

DHTML, or Dynamic HTML, is a technology that differs from traditional

HTML. DHTML combines HTML, CSS, JavaScript, and the Document Object
Model (DOM) to create dynamic content. It uses the Dynamic Object Model to
modify settings, properties, and methods. Scripting is also an essential component
of DHTML, which was part of earlier computing trends. It is supported by some
versions of Netscape Navigator and Internet Explorer 4.0 and higher.

HTML: HTML stands for Hypertext Markup Language and it is a client-side

markup language. It is used to build the block of web pages.

Javascript: It is a Client-side Scripting language. Javascript is supported by most

of browsers, and also has cookie collection to determine the user’s needs.

CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of
the web pages and helps in designing of the pages. The CSS rules for DHTML will
be modified at different levels using JS with event handlers which adds a
significant amount of dynamism with very little code.

DOM: It is known as a Document Object Model which acts as the weakest link in
it. The only defect in it is that most of the browsers does not support DOM. It is a
way to manipulate the static content.
DHTML is not a technology; rather, it is the combination of three different
technologies, client-side scripting (JavaScript or VBScript), cascading style sheets
and document object model.
Note: Many times DHTML is confused with being a language like HTML but it is
not. It must be kept in mind that it is an interface or browsers enhancement feature
which makes it possible to access the object model through Javascript language
and hence make the webpage more interactive.

Key Features:
• Tags and their properties can be changed using DHTML.
• It is used for real-time positioning.
• Dynamic fonts can be generated using DHTML.
• It is also used for data binding.
• It makes a webpage dynamic and be used to create animations, games,
applications along with providing new ways of navigating through websites.
• The functionality of a webpage is enhanced due to the usage of low-bandwidth
effect by DHTML.
• DHTML also facilitates the use of methods, events, properties, and codes.

Why Use DHTML?

DHTML makes a webpage dynamic but Javascript also does, the question arises
that what different does DHTML do? So the answer is that DHTML has the
ability to change a webpages look, content and style once the document has
loaded on our demand without changing or deleting everything already existing
on the browser’s webpage. DHTML can change the content of a webpage on
demand without the browser having to erase everything else, i.e. being able to
alter changes on a webpage even after the document has completely loaded.

Advantages:
• Size of the files are compact in compared to other interactional media like
Flash or Shockwave, and it downloads faster.
• It is supported by big browser manufacturers like Microsoft and Netscape.
• Highly flexible and easy to make changes.
• Viewer requires no extra plug-ins for browsing through the webpage that uses
DHTML, they do not need any extra requirements or special software to view
it.
• User time is saved by sending less number of requests to the server. As it is
possible to modify and replace elements even after a page is loaded, it is not
required to create separate pages for changing styles which in turn saves time
in building pages and also reduces the number of requests that are sent to the
server.
• It has more advanced functionality than a static HTML. it is capable of
holding more content on the web page at the same time.

Disadvantages:
• It is not supported by all the browsers. It is supported only by recent browsers
such as Netscape 6, IE 5.5, and Opera 5 like browsers.
• Learning of DHTML requires a lot of pre-requisites languages such as HTML,
CSS, JS, etc should be known to the designer before starting with DHTML
which is a long and time-consuming in itself.
• Implementation of different browsers are different. So if it worked in one
browser, it might not necessarily work the same way in another browser.
• Even after being great with functionality, DHTML requires a few tools and
utilities that are some expensive. For example, the DHTML text editor,
Dreamweaver. Along with it the improvement cost of transferring from
HTML to DHTML makes cost rise much higher.

Difference between HTML and DHTML:

• HTML is a markup language while DHTML is a collection of technologies.
• HTML is used to create static webpages while DHTML is capable of creating
dynamic webpages.
• DHTML is used to create animations and dynamic menus but HTML not used.
• HTML sites are slow upon client-side technologies whereas DHTML sites are
comparatively faster.
• Web pages created using HTML are rather simple and have no styling as it
uses only one language whereas DHTML uses HTML, CSS, and Javascript
which results in a much better and way more presentable webpage.
• HTML cannot be used as server side code but DHTML used as server side
code.
• DHTML needs database connectivity but not in case of HTML.
• Files in HTML are stored using .htm or .html extension while DHTML uses
.dhtm extension.
• HTML requires no processing from the browser but DHTML does.
Javascript
JavaScript is a programming language used to create dynamic content for
websites.It is a lightweight, cross-platform, and single-threaded programming
language. JavaScript is an interpreted language that executes code line by line
providing more flexibility.

• HTML adds Structure to a web page, CSS styles it and JavaScript brings it to
life by allowing users to interact with elements on the page, such as actions on
clicking buttons, filling out forms, and showing animations.
• JavaScript on the client side is directly executed in the user's browser. Almost
all browsers have JavaScript Interpreter and do not need to install any
software. There is also a browser console where you can test your JavaScript
code.
• JavaScript is also used on the Server side (on Web Servers) to access
databases, file handling and security features to send responses, to browsers.

Hello World Program

This JavaScript Compiler is completely free and easy to use. Here, you can
practice various JS Exercises.
console.log("Hello World!");

Output
Hello World!
Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

1. HTML to define the content of web pages

 2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

This tutorial covers every version of JavaScript:

• The Original JavaScript ES1 ES2 ES3 (1997-1999)

• The First Main Revision ES5 (2009)
• The Second Revision ES6 (2015)
• The Yearly Additions (2016, 2017 ... 2021, 2022)

JSSS

JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed

by Netscape Communications in 1996 to provide facilities for defining the
presentation of webpages. It was an alternative to the Cascading Style Sheets
(CSS) technology.

Syntax
Using JavaScript code as a stylesheet, JSSS styles individual element by modifying
properties of a document.tags object. For example, the CSS:

h1 { font-size: 20pt; }
is equivalent to the JSSS:

document.tags.H1.fontSize = "20pt";
JSSS element names are case sensitive.

JSSS lacks the various CSS selector features, supporting only simple tag name,
class and id selectors. On the other hand, since it is written using a complete
programming language, stylesheets can include highly complex dynamic
calculations and conditional processing. (In practice, however, this can be achieved
using JavaScript to modify the stylesheets applicable to the document at runtime.)
Because of this JSSS was often used in the creation of dynamic web pages.

Example
The following example shows part of the source code of an HTML document:

<style type="text/javascript">
tags.H1.color = "red";
tags.p.fontSize = "20pt";

with (tags.H3) {
color = "green";
}
with (tags.H2) {
color = "red";
fontSize = "16pt";
marginTop = "4cm";
}
</style>
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html>

Layers of netscape

Netscape was one of the first widely used web browsers, and when we talk about
the "layers of Netscape," we're essentially referring to how the browser was
structured to process and display web pages.

In simple terms, Netscape Navigator (and modern browsers in general) is like a

software that lets you explore the internet. It does this through several "layers,"
which are just different stages or components that work together to make the
experience smooth.

Here's a clearer breakdown:

1. User Interface (UI): This is what you see and interact with. It's the browser
window, buttons, address bar, and so on.
2. Browser Engine: This layer makes sure your clicks (back, forward, refresh)
and address bar actions get passed to the right parts of the browser for
action.
3. Rendering Engine: When you load a web page, the browser needs to
"understand" the code (like HTML) behind the page. The rendering engine
processes that code and turns it into the page you see.
4. Networking Layer: This layer is responsible for making network requests
to the web servers, like asking for the contents of a webpage when you type
in a URL.
5. HTML Parser and DOM: The browser needs to break down the HTML
code it receives from the network, and then represent it in a structured way
(like a tree of elements) that JavaScript can manipulate.
6. JavaScript Engine: This layer handles any JavaScript in the web pages,
allowing you to interact with the page (such as clicking buttons or
submitting forms).
7. Data Storage: The browser needs to remember things (like cookies, saved
passwords, cached data), and this layer stores all of that.
So, the layers in Netscape are just different parts of the browser that work
together to load a web page, display it to you, and allow you to interact with it.

It's basically a collection of technologies that helped turn a bunch of internet data
(from servers) into the page you see on your screen, with all its functionality.

The id Attribute

The id attribute specifies a unique id for an HTML element. The value of

the id attribute must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is

also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then,
define the CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name
"myHeader". This <h1> element will be styled according to the #myHeader style
definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

 </body>
</html>

Dhtml Events
DHTML events are user actions or browser-generated signals that trigger specific
code execution. These events, often combined with JavaScript, allow developers to
create dynamic and interactive web pages. Essentially, they are the "triggers" that
initiate actions based on user input or browser activity.
Here's a more detailed look:
What are DHTML Events?
• User Actions:
Events can be triggered by user actions like clicking a button, moving the mouse
over an element, or typing in a text field.
• Browser-Generated:
The browser also generates events, such as when a page loads or when an image
is loaded.
• Event Handlers:
Event handlers are functions that are executed when a specific event occurs. They
are used to respond to the triggered event.
• Dynamic and Interactive:
DHTML events are crucial for making web pages dynamic and interactive, as
they allow developers to change content, update styles, and perform other actions
based on user interaction or browser events.
Examples of DHTML Events:
• onclick: Triggered when an element is clicked.
• onmouseover: Triggered when the mouse pointer moves over an element.
• onmouseout: Triggered when the mouse pointer moves away from an element.
• onload: Triggered when a page or image has finished loading.
• onkeydown, onkeypress, onkeyup: Triggered when a key is pressed, held down, or
released on the keyboard.
• onchange: Triggered when the value of an input field changes.
• onsubmit: Triggered when a form is submitted.
• onblur: Triggered when an element loses focus.
How DHTML Events Work:
1. Event Trigger: The user performs an action or the browser generates an event.
2. Event Detection: The web page monitors for specific events.
3. Event Handler Execution: When a matching event occurs, the corresponding
event handler function is executed.
4. Dynamic Behavior: The event handler can then modify the page's content, style,
or behavior.
In essence, DHTML events enable developers to create responsive and engaging
web experiences by making web pages react to user actions and browser events.