Open In App

How to create dynamic HTML pages ?

Improve
Improve
Like Article
Like
Save
Share
Report

Dynamic HTML page, as the name suggests refers to an HTML page that is dynamic in such a way that it is customizable and changeable according to user input. For example, Using CSS we can change the background color of the web page each time the user clicks a button on the webpage and we can also ask the user to enter his/her name and then display it dynamically on the webpage.

If you want to learn more about Dynamic HTML pages, you can look at this article  DHTML JavaScript. In this article, we will learn How to create a dynamic HTML page using HTML, CSS, and JavaScript. Let us first know what is a dynamic HTML page.

Example 1: This example shows how to take a username as input and dynamically change the text content of the web page.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>To create HTML dynamic pages</title>
    <style>
        body {
            text-align: center;
        }
 
        p {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>Dynamically changing content</h1>
    <h3>Enter Your Name</h3>
    <input id="name" type="text">
    <button type="button" onclick="EnterName()">Submit</button>
    <p id="demo"></p>
    <script>
        function EnterName() {
            let user = document.getElementById("name").value;
 
            document.getElementById("demo").innerHTML =
                "Welcome to Geeks For Geeks " + user;
        }
    </script>
</body>
 
</html>


Output:

hdr

Example 2: This example shows to dynamically changing the background color of a webpage on each click .

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Dynamically changing background color</title>
    <script src=
</head>
 
<body id="body">
    <h1>Enter Your Color Choice</h1>
    <button type="button" onclick="changeColor()">Color</button>
    <script>
        function changeColor() {
            // Generating random color each time
            let color = "#" + (Math.random() * 16777215 | 0).toString(16);
            $("body").css("background-color", color);
        }
    </script>
</body>
 
</html>


Output:

Create dynamic HTML Pages



Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads