Practical 4

Open text Document or any text editor and type like below.

HTML and JS(javaScript)

<html>
    <head>
        <title>Practical 4</title>
    </head>
    <body>
        <p id="pTag">Change me from following</p>
        <div id="waiting"></div>
        <button id="b1" onclick="bg_color()">bg color</button>
        <button id="b2" onclick="font_family()">font family</button>
        <button id="b3" onclick="font_size()">font size</button>
        <button id="b3" onclick="font_color()">font color</button>
        <button id="b4" onclick="Button_color()">Button color</button>
        <button id="b5" onclick="Add_p_tag()">Add p tag</button>
        <button id="b6" onclick="created_p_tags_size_and_color()">created p tags size 
                                                                    and color</button>
    

        <script>
             function bg_color(){
                let webBody = document.body;
                webBody.style.backgroundColor="Cyan";
            }

            function font_family(){
                let fontStyle = document.getElementById("pTag");
                fontStyle.style.fontFamily="Comic Sans MS";
            }

            function font_size(){
                let fontSize = document.getElementById("pTag");
                fontSize.style.fontSize="30px";
            }

            function font_color(){
                let fontColor = document.getElementById("pTag");
                fontColor.style.color="red";
            }

            function Button_color(){
                let btnColor = document.getElementById("b4");
                btnColor.style.backgroundColor="green";
            }

            function Add_p_tag(){
                if(document.getElementById("addPTag")){
                    alert("Already created!!!");
                }else{
                    let tagP=document.createElement("p");
                    tagP.setAttribute("id","addPTag");
                    let text = document.createTextNode("This p tag is generated by 
                                                                        javaScript");
                    tagP.appendChild(text);
                    let div = document.getElementById("waiting");
                    div.appendChild(tagP);
                }
            }

            function created_p_tags_size_and_color(){
                let p = document.getElementById("addPTag");
                p.style.color="gold";
                p.style.fontSize="30px";
            }
        </script>

    </body>
</html>

Then go to the "File" tab and "Save as". After that "File name: p4.html" and "Save as type: All files (*.*)". Then after that Click on the save button.