Turn on or off Bulb using HTML & CSS Last Updated : 09 Apr, 2021 Improve Improve Like Article Like Save Share Report 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: Like Article Suggest improvement Next Turn on or off bulb using JavaScript Share your thoughts in the comments Add Your Comment Please Login to comment... Similar Reads Turn on or off bulb using JavaScript How to turn on/off form autocompletion in HTML ? How to turn off spell checking for HTML form elements ? How to turn off PHP Notices ? How to turn an Image into a Link in HTML ? Create a CSS Fireflies background using HTML/CSS Foundation CSS Off-canvas Multiple Panels Foundation CSS Off-canvas Directions Foundation CSS Off-canvas Transitions Foundation CSS Off-canvas Combining with Title Bar Like imsushant12 Follow Article Tags : Web Technologies Web Templates