Turn on or off Bulb using HTML & CSS - GeeksforGeeks

09 Apr, 2021
HTML frames are used to divide the browser window into multiple sections where each section loads a separate HTML document. In this project we are going to make a webpage that will ON and OFF a bulb on user’s click. We will be using HTML frame and frameset feature and some CSS to design our ON and OFF button.
Approach: 
To use frames, we have used <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Inside the frame, we have used src attribute which is used to give the file name that should be loaded in the frame.
Separately we have created two files namely – ON.html and OFF.html which has images of bulbs in on and off position respectively. Whenever user presses on, ON file is loaded into the frame and whenever off is pressed, the OFF file is loaded.
Example:
index.html
<!DOCTYPE html><html lang="en">  <!--Setting the frames and opening on and off html-pages--><frameset cols="25%,75%">    <frame src="main.html" name="left-frame"></frame>    <frame src="off.html" name="right-frame"></frame></frameset>    </html>
 
main.html
<!DOCTYPE html><html lang="en">  <head>  <style type="text/css">          /* Styling the anchor tag */        a {            font-weight: bold;            text-decoration: none;            font-size: 2rem;            display: inline-block;        }          /* Styling the on button */        #on {            background-color: chartreuse;            color: black;            width: 75px;            text-align: center;            margin-bottom: 25px;            margin-top: 70%;            margin-left: 40%;        }          /* Styling the off button */        #off {            background-color: orangered;            color: black;            width: 75px;            text-align: center;            margin-left: 40%;        }    </style></head>  <body>    <p>        <a href="on.html" target="right-frame"            id="on">ON</a>    </p>      <p>        <a href="off.html" target="right-frame"           id="off">OFF</a>    </p></body>  </html>
on.html
<!DOCTYPE html><html lang="en">  <head>    <style>          /* Styling the image */        img {            margin-left: 30%;            margin-top: 15%;        }    </style></head>  <body>    <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210324132942/on.png"          height="350px" width="350px"></body>  </html>
off.html
<!DOCTYPE html><html lang="en">  <head>    <style>          /* Styling the image */        img {            margin-left: 30%;            margin-top: 15%;        }    </style></head>  <body>    <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210324132941/off.png"          height="350px" width="350px"></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Attributes
HTML-Questions
HTML-Tags
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?