Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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: 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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=
         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=
         height="350px" width="350px">
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!