How to create dynamic HTML pages ?

0 0 1 minute read

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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>