Turn on or off Bulb using HTML & CSS

Last Updated : 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>