In this article, we will know How to create a dynamic HTML page using HTML, CSS, and JavaScript. Let us first know what actually is a dynamic HTML page.
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.
- Using JavaScript we can ask the user to enter his/her name and then display it dynamically on the webpage.
If you want to get to know more about Dynamic HTML pages, you can have a look at this article  DHTML JavaScript .
Let us take some examples to know how to create a dynamic HTML page using HTML and CSS.
Example 1: Taking username as input and dynamically changing the text content of web page
HTML
<!DOCTYPE html><html lang="en"><head>    <title>        How to create dynamic HTML pages ?    </title></head>Â
<body>Â Â Â Â <h1>Enter Your Name</h1>Â
    <input id="name" type="text">    <button type="button" onclick="EnterName()">Submit</button>    <p style="color:green" id="demo"></p>Â
Â
    <script>        function EnterName() {            let x = document.getElementById("name").value;Â
            document.getElementById("demo").innerHTML =                "Welcome to Geeks For Geeks " + x;        }    </script></body></html> |
Output:
Create dynamic HTML Pages
Example 2: Dynamically changing the background color of a webpage on each clickÂ
HTML
<!DOCTYPE html><html lang="en"><head>Â Â Â Â <script src=Â Â Â Â </script></head>Â
<body style="text-align:center;" 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:
