How to create dynamic HTML pages ?
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
<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() { var x= document.getElementById("name").value; document.getElementById("demo").innerHTML = "Welcome to Geeks For Geeks "+ x ; }</script> |
Output:
Create dynamic HTML Pages
Example 2: Dynamically changing the background color of a webpage on each click
HTML
<head> </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 var color = "#"+(Math.random()*16777215|0).toString(16); $("body").css("background-color",color); } </script></body> |
Output:
Please Login to comment...