Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a dynamic HTML pages
Overview
Nowadays most of the pages are dynamic in nature, the dynamic page means that it changes the content with respect to the user. Dynamic pages cannot be built by simply HTML and CSS because it will provide the page static nature only, so to make the web page dynamic we have to use the scripting language such as javascript or jQuery. We can make the page dynamic in many ways such as when a user enters his credentials to the page he can retrieve the information regarding his credentials. The dynamic page also represents those web pages which can be changed from the frontend of the web page.
Algorithm
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the HTML file.
Step 2 − Now create a div container which contains the dynamic cover background of the website.
<div id="cover"></div>
Step 3 − Now add a heading to the cover page component and add the span tag within the heading tag.
<h3>Welcome <span id="userName"></span> to the tutorialspoint.</h3>
Step 4 − Now create the input buttons to make the background dynamically change and also add the onclick attribute the each input button as “bgL()” and “bgD()”.
<input id="cBtn" type="button" value="light" onclick="bgL()"> <input id="cBtn" type="button" value="dark" onclick="bgD()">
Step 5 − Now create a style.css file in the same folder and link that styling sheet in the head tag of the HTML document.
<link rel="stylesheet" href="style.css">
Step 6 − Now create a script tag in the body tag of the HTML document.
<script></script>
Step 7 − Create a javascript ‘setTimeout()’ function to make a prompt pop up after 1s. This will enter the username on the cover page of the browser.
setTimeout(() => {
let uname = prompt("Enter your gaming name.", "");
var s = document.getElementById("userName");
if (uname != "" || uname != null) {
s.innerHTML = uname + ",";
document.getElementById("cover").style.backgroundColor = "green"
}
var i = document.getElementById("cBtn");
i.addEventListener("click",()=>{
i.checkVisibility
})
}, 1000);
Step 8 − Now create two javascript arrow functions with the same name as we have passed in the above two buttons as bgL() and bgD().
bgL=()=>{
}
bgD=()=>{
}
Step 9 − Add the HTML DOM property to the function which will change the background color of the cover respectively as the given color name on the buttons,
bgL=()=>{ document.getElementById("cover").style.backgroundColor="rgba(112, 112, 112, 0.616)"
}
bgD=()=>{ document.getElementById("cover").style.backgroundColor="#0a0a0a"
}
Step 10 − The dynamic HTML page is created successfully.
Example
In this example we will create a dynamic HTML page, the page will be dynamic with respect to its content and with respect to the change in the background color. So for this we will be creating the two files, the first file will contain the HTML layout part of the page and scripting of the dynamic page. In the second file it contains the styling part of the page
index.html
<html>
<head>
<title>Dynamic HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="coverPage">
<div id="cover">
<h3>Welcome <span id="userName"></span> to the tutorialspoint.</h3>
<p>tutorialspoint.com</p>
</div>
</div>
<p style="width: 80vw;text-align: center;">Use teh below buttons to change the background of the above cover.</p>
<div class="changeBg">
<input id="cBtn" type="button" value="light" onclick="bgL()">
<input id="cBtn" type="button" value="dark" onclick="bgD()">
</div>
<script>
setTimeout(() => {
let uname = prompt("Enter your name.", "");
var s = document.getElementById("userName");
if (uname != "" || uname != null) {
s.innerHTML = uname + ",";
document.getElementById("cover").style.backgroundColor = "green"
}
var i = document.getElementById("cBtn");
i.addEventListener("click",()=>{
i.checkVisibility
})
}, 1000);
bgL=()=>{ document.getElementById("cover").style.backgroundColor="rgba(112, 112, 112, 0.616)"
}
bgD=()=>{ document.getElementById("cover").style.backgroundColor="#0a0a0a"
}
</script>
</body>
</html>
stye.css
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Segoe UI';
width: 100%;
height: 100%;
}
#cover {
height: 10rem;
width: 80vw;
background-color: rgba(0, 0, 0, 0.616);
color: white;
padding: 0.5rem;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
h3{
font-size: 3vw;
}
@media (max-width:500px) {
h3{
font-size: 5vw;
}
}
Example
<html>
<head>
<title>Dynamic HTML Page</title>
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family: 'Segoe UI';
width: 100%;
height: 100%;
}
#cover {
height: 10rem;
width: 80vw;
background-color: rgba(0, 0, 0, 0.616);
color: white;
padding: 0.5rem;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
h3{
font-size: 3vw;
}
@media (max-width:500px) {
h3{
font-size: 5vw;
}
}
</style>
</head>
<body>
<div class="coverPage">
<div id="cover">
<h3>Welcome <span id="userName"></span> to the tutorialspoint.</h3>
<p>tutorialspoint.com</p>
</div>
</div>
<p style="width: 80vw;text-align: center;">Use the below buttons to change the background of the above cover.</p>
<div class="changeBg">
<input id="cBtn" type="button" value="light" onclick="bgL()">
<input id="cBtn" type="button" value="dark" onclick="bgD()">
</div>
<script>
setTimeout(() => {
let uname = prompt("Enter your name.", "");
var s = document.getElementById("userName");
if (uname != "" || uname != null) {
s.innerHTML = uname + ",";
document.getElementById("cover").style.backgroundColor = "green"
}
var i = document.getElementById("cBtn");
i.addEventListener("click",()=>{
i.checkVisibility
})
}, 1000);
bgL=()=>{ document.getElementById("cover").style.backgroundColor="rgba(112, 112, 112, 0.616)"
}
bgD=()=>{ document.getElementById("cover").style.backgroundColor="#0a0a0a"
document.getElementById("cover").style.color="white"
}
</script>
</body>
</html>
Conclusion
As in the above example we have only created two of the components dynamic in the web page, so we can create more content of the web page dynamic by connecting the database also. Most of the dynamic websites are full stack that means they have a full fledged frontend as well as backend connected with a database. If we talk about static websites then these are those websites which are only for readable purposes or to convey any information to a group of community. So both the types of websites are useful for their respective purposes.
2K+ Views
