Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a dynamic HTML pages
Dynamic HTML pages are web pages that can change their content, appearance, or behavior based on user interactions or other conditions. Unlike static pages that display fixed content, dynamic pages respond to user input and can modify themselves in real-time using JavaScript and DOM manipulation.
Syntax
/* Dynamic styling with JavaScript */
element.style.property = "value";
document.getElementById("elementId").style.backgroundColor = "color";
Key Components of Dynamic Pages
Dynamic pages typically combine HTML structure, CSS styling, and JavaScript functionality to create interactive experiences. The main components include
- HTML Elements Provide the structure and content containers
- CSS Styling Handle the visual presentation and responsive design
- JavaScript Enable interactivity and dynamic content changes
Example: Dynamic Background Changer
The following example creates a dynamic page where users can change the background color and see personalized content
<!DOCTYPE html>
<html>
<head>
<title>Dynamic HTML Page</title>
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
#cover {
height: 200px;
width: 80%;
max-width: 600px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
margin-bottom: 20px;
transition: all 0.3s ease;
}
h3 {
font-size: 24px;
margin: 10px 0;
}
.controls {
display: flex;
gap: 10px;
margin-top: 20px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.light-btn {
background-color: #f0f0f0;
color: #333;
}
.dark-btn {
background-color: #333;
color: white;
}
button:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="cover">
<h3>Welcome <span id="userName">Guest</span> to TutorialsPoint</h3>
<p>Your dynamic learning experience starts here!</p>
</div>
<p>Use the buttons below to change the background theme:</p>
<div class="controls">
<button class="light-btn" onclick="changeTheme('light')">Light Theme</button>
<button class="dark-btn" onclick="changeTheme('dark')">Dark Theme</button>
<button onclick="getUserName()">Set Name</button>
</div>
<script>
// Function to change theme
function changeTheme(theme) {
const cover = document.getElementById('cover');
if (theme === 'light') {
cover.style.backgroundColor = 'rgba(240, 240, 240, 0.9)';
cover.style.color = '#333';
} else if (theme === 'dark') {
cover.style.backgroundColor = 'rgba(20, 20, 20, 0.9)';
cover.style.color = 'white';
}
}
// Function to get user name
function getUserName() {
const userName = prompt('Enter your name:');
if (userName && userName.trim() !== '') {
document.getElementById('userName').textContent = userName;
}
}
// Initialize with a greeting after page loads
window.onload = function() {
setTimeout(() => {
const userName = prompt('Welcome! What's your name?');
if (userName && userName.trim() !== '') {
document.getElementById('userName').textContent = userName;
}
}, 1000);
};
</script>
</body>
</html>
A dynamic webpage loads with a dark cover section displaying "Welcome Guest to TutorialsPoint". After 1 second, a prompt appears asking for the user's name. Once entered, the name replaces "Guest" in the welcome message. Three buttons below allow users to switch between light and dark themes or change their name again.
Dynamic Features Explained
The example demonstrates several key dynamic features
- User Input Prompts collect user information and update the display
- Theme Switching Buttons trigger JavaScript functions to change CSS properties
- Real-time Updates Content changes without page reloads
- Event Handling Click events and timed functions create interactivity
Best Practices
When creating dynamic HTML pages, consider these practices
- Use semantic HTML for better accessibility
- Implement smooth transitions with CSS for better user experience
- Validate user input to prevent errors
- Use modern JavaScript features like const/let instead of var
Conclusion
Dynamic HTML pages combine HTML structure, CSS styling, and JavaScript functionality to create interactive web experiences. By manipulating the DOM and responding to user events, you can build engaging websites that adapt to user preferences and interactions in real-time.
6K+ Views
