Scribd
Upload
79 views

DHTML Positioning

Uploaded by

Chandrika Surya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
79 views

DHTML Positioning

Uploaded by

Chandrika Surya
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

DHTML

Dynamic HTML (DHTML) is a collection of technologies used together to create interactive


and animated web content. Unlike traditional static HTML, which displays content in a fixed
manner, DHTML enables web pages to be more dynamic, responding to user interactions
without requiring the page to reload. DHTML combines HTML, CSS, and JavaScript to
achieve this interactivity and dynamic behavior.

Key Components of DHTML


1. HTML (HyperText Markup Language):
o HTML is the standard markup language for creating the structure of web pages.
o It defines the elements such as headings, paragraphs, lists, links, images, and
other content.
2. CSS (Cascading Style Sheets):
o CSS is used to style HTML elements and control their layout.
o It allows developers to apply styles such as colors, fonts, spacing, and
positioning, enhancing the visual presentation of web pages.
3. JavaScript:
o JavaScript is a programming language that enables the creation of interactive
and dynamic web content.
o It can manipulate HTML and CSS to update content, create animations, and
respond to user actions like clicks and keyboard events.

How DHTML Works


DHTML works by using JavaScript to manipulate the HTML and CSS of a webpage in real-
time. This interaction creates a more engaging user experience by allowing the webpage to
respond immediately to user actions. For example, JavaScript can change the style
properties of HTML elements, update content dynamically, and animate elements on the
page.

Benefits of DHTML
 Interactivity: DHTML allows the creation of interactive elements like drop-down menus,
forms, and animations, which can respond to user inputs.
 Improved User Experience: By updating content without reloading the page, DHTML
provides a smoother and faster user experience.
 Enhanced Design: With DHTML, web developers can create more visually appealing
and dynamic web pages.

Examples of DHTML
 Interactive Menus: Menus that expand or collapse when clicked or hovered over.
 Animations: Moving elements across the screen, changing colors, or creating other
visual effects.
 Dynamic Content: Updating text, images, or other elements on the page in response to
user actions without requiring a page reload.
Positioning Elements
CSS Positioning:
1. Static Positioning (default): Elements are positioned according to the normal flow of the
document.

.static-element
{
position: static;
}

2. Relative Positioning: Elements are positioned relative to their normal position.

.relative-element
{
position: relative;
top: 20px; /* Move down 20px */
left: 10px; /* Move right 10px */
}

3. Absolute Positioning: Elements are positioned relative to the nearest positioned


ancestor (not static).

.absolute-element
{
position: absolute;
top: 50px;
left: 100px;
}

4. Fixed Positioning: Elements are positioned relative to the viewport and do not move
when scrolled.

.fixed-element
{
position: fixed;
top: 10px;
right: 10px;
}

5. Sticky Positioning: Elements are positioned based on the user’s scroll position.

.sticky-element
{
position: sticky;
top: 0;
}

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning Example</title>
<style>
.container {
margin: 20px;
}
.static-element {
position: static;
background-color: lightcoral;
padding: 10px;
border: 1px solid black;
}
.relative-element {
position: relative;
top: 20px;
left: 20px;
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
.absolute-element {
position: absolute;
top: 50px;
left: 100px;
background-color: lightgreen;
padding: 10px;
border: 1px solid black;
}
.fixed-element {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgoldenrodyellow;
padding: 10px;
border: 1px solid black;
}
.sticky-element {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
background-color: lightpink;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<h1>CSS Positioning Example</h1>
<h2>Static Positioning</h2>
<div class="static-element">
This is a static positioned element. It follows the normal document flow.
</div>
<h2>Relative Positioning</h2>
<div class="relative-element">
This is a relative positioned element. It is positioned relative to its normal position.
</div>
<h2>Absolute Positioning</h2>
<div class="absolute-element">
This is an absolute positioned element. It is positioned relative to its nearest
positioned ancestor.
</div>
<h2>Fixed Positioning</h2>
<div class="fixed-element">
This is a fixed positioned element. It is positioned relative to the viewport and does
not move when the page is scrolled.
</div>
<h2>Sticky Positioning</h2>
<div class="sticky-element">
This is a sticky positioned element. It sticks to the top of the viewport when you scroll
past it.
</div>
<p style="height: 1000px;">
Scroll down to see the sticky element in action.
</p>
</div>
</body>
</html>
Output:

Moving Elements
JavaScript Animation: JavaScript can dynamically move elements by manipulating their
style properties.
 Using setInterval or requestAnimationFrame:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move Element Example</title>
<style>
#moving-element {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: lightcoral;
border: 2px solid black;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="moving-element">Move me</div>
<script>
const element = document.getElementById('moving-element');
let position = 0;
function move() {
position += 1;
element.style.left = position + 'px';
if (position < 500) {
requestAnimationFrame(move); // for smoother animations
}
}
move();
</script>
</body>
</html>

Changing Elements

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Style Example</title>
<style>
#styled-element {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid black;
transition: all 0.3s ease; /* Smooth transition effect */
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<button onclick="changeStyle()">Change Style</button>
<div id="styled-element"></div>
<script>
function changeStyle() {
const element = document.getElementById('styled-element');
element.style.backgroundColor = 'blue'; // Change background color to blue
element.style.width = '200px'; // Change width to 200px
}
</script>
</body>
</html>

Output:

Changing Content:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Content Example</title>
<style>
#content-element {
padding: 20px;
border: 2px solid black;
width: 200px;
text-align: center;
}
button {
margin-top: 20px;
}
</style>
</head>
<body>
<button onclick="changeContent()">Change Content</button>
<div id="content-element">Original Content</div>
<script>
function changeContent() {
const element = document.getElementById('content-element');
element.innerHTML = 'New Content'; // Change the content of the div
}
</script>
</body>
</html>

Output:

Differences between html and dhtml:

HTML DHTML
Dynamic Hyper Text Markup
Full-Form Hyper Text Markup Language
Language
It is a combination of technologies
A standard markup language
(HTML, CSS, and JavaScript) used to
Definition used to create and design web
make webpages dynamic and
pages.
interactive.
Combines HTML for structure, CSS
Consists solely of HTML tags
Components for design and JavaScript for
and elements.
interactivity
Static, i.e., displays the same Dynamic, i.e., content can be
Nature content every time the page is changed in response to user action
loaded. without reloading the page.
Generally, all the web browser
Browser Supported by all the web
supports DHTML. But in case it is
Support browsers.
not supported, you need plug-ins.
Database No need for database Database connectivity is not
Connectivity connectivity. needed.
No dependencies on other Depends on HTML, CSS, and
Dependencies
programming languages. JavaScript
Basic text editors like Notepad, Visual Studio Code with appropriate
Development
Specialized editors like VS Code plug-ins that support HTML, CSS,
Tools
or sublime text. and JavaScript.
Ideal for creating interactive web
Ideal for creating a basic
Usage applications, animation, and
webpage with static content.
dynamic web content.
Blogs, Articles, and company Online calculator, interactive forms
Example
information pages. and games.

DOM (DOCUMENT OBJECT MODEL)

The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of a document as a tree of objects, allowing programs to
manipulate the content and structure of web pages dynamically. Here’s a brief overview:

Introduction to the DOM:

What is the DOM?


The DOM is an abstract representation of a document’s structure. It defines the logical
structure of documents and the way a document is accessed and manipulated. When a web
page is loaded, the browser creates a DOM of the page that can be accessed and modified
using JavaScript.

How It Works:
When a web page is loaded in a browser, the browser parses the HTML and CSS and
constructs the DOM tree from the page’s content. This DOM tree is a live representation of
the document structure that JavaScript can interact with in real-time.

Components of the DOM:


1. Document: The document node is the root of the DOM tree. It represents the entire
web page and serves as the entry point to the rest of the DOM structure.

Key Properties and Methods:


 document.documentElement: The root element of the document (typically the
<html> element).
 document.body: The <body> element of the document.
 document.head: The <head> element of the document.
 document.getElementById(id): Finds an element by its ID.
 document.querySelector(selector): Finds the first element that matches the CSS
selector.
 document.createElement(tagName): Creates a new element.

2. Element Nodes: Element nodes represent the HTML elements (e.g., <div>, <p>, <a>)in
the document. Each element node corresponds to an HTML tag.
Example:
<div id="container"> <p>Some text here</p> </div>
Key Properties and Methods:
 element.id: Gets or sets the ID of the element.
 element.className: Gets or sets the class name of the element.
 element.innerHTML: Gets or sets the HTML content inside the element.
 element.appendChild(childNode): Adds a child node to the element.

3. Text Nodes: Text nodes represent the text content within HTML elements. They are the
pieces of text that appear between the opening and closing tags of an element.
Example:
<p>Hello, World!</p>
The text node here is "Hello, World!", and it is a child of the <p> element node.

Key Properties and Methods:


 textNode.nodeValue: Gets or sets the text content of the text node.
 textNode.textContent: Another way to get or set the text content.

4. Attribute Nodes: Attribute nodes represent the attributes of HTML elements. Attributes
provide additional information about an element and usually appear within the
opening tag of an element. (Represent attributes of elements (e.g., class, id))
Example:
<a href="https://example.com" title="Example">Click here</a>
 The <a> element has two attributes:
o href with the value https://example.com
o title with the value Example
Key Properties and Methods:
 element.getAttribute(name): Retrieves the value of the specified attribute.
 element.setAttribute(name, value): Sets the value of the specified attribute.
 element.removeAttribute(name): Removes the specified attribute.

DOM Tree Structure:


 Root Node: The top-level node of the tree, typically the document node.
 Child Nodes: Nodes that are direct descendants of another node.
 Parent Node: A node that has child nodes.
 Sibling Nodes: Nodes that share the same parent.

Accessing and Manipulating the DOM:


 Selecting Elements:
o document.getElementById(id): Selects an element by its ID.
o document.getElementsByClassName(className): Selects elements by their
class name.
o document.getElementsByTagName(tagName): Selects elements by their tag
name.
o document.querySelector(selector): Selects the first element matching the CSS
selector.
o document.querySelectorAll(selector): Selects all elements matching the CSS
selector.
 Modifying Elements:
o Change Content: element.innerHTML, element.textContent.
o Change Attributes: element.setAttribute(name, value),
element.getAttribute(name).
o Change Styles: element.style.property = value.
o Add/Remove Classes: element.classList.add(className),
element.classList.remove(className).
 Creating and Deleting Elements:
o Create Elements: document.createElement(tagName).
o Append Elements: parentElement.appendChild(newElement).
o Remove Elements: parentElement.removeChild(childElement).

You might also like