O código no final do enunciado está OK e funciona como esperado.
Nas linhas
<a href='?f=on' onclick="alert('LiGHT ON')" class='btn1 btn-sea'>ON</a>
<a href='?f=off' onclick="alert('LiGHT OFF')" class='btn2 btn-sea'>OFF</a>
A expressão: href='?f=xxx'
passa o parâmetro que é preciso para o sistema funcionar. Isto quer dizer que existem 2 botões, um para cada diferente valor do parâmetro.
Eu gostaria de fazer a mesma coisa, porém, utilizando apenas um botão para realizar um evento de cada vez. Algo parecido com o botão toggle.
Também é importante manter o uso de HTML/CSS/JavaScript e não usar links ou chamadas para rotinas externas, pois este código ficará embarcado.
<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8'>
<meta http-equiv='cache-control' content='max-age=0' />
<meta http-equiv='cache-control' content='no-cache' />
<meta http-equiv='expires' content='0' />
<meta http-equiv='expires' content='Tue, 01 Jan 1980 1:00:00 GMT' />
<meta http-equiv='pragma' content='no-cache' />
<title>automation</title>
<style>
body {font-family: Helvetica; color: rgb(85,85,85);} /* backgroud color */
h1 {font-size: 24px; font-weight: normal; margin: 0.4em 0;}
.container {width: 100%; margin: 0 auto;}
.container .row {float: left; clear: both; width: 100%;}
.container .col {float: left; margin: 0 0 1.2em; padding-right: 1.2em; padding-left: 1.2em;}
.container .col.twelve {width: 100%;}
@media screen and (min-width: 200px) {
.container {width: 50%; max-width: 1080px; margin: 0 auto;}
.container .row {width: 100%; float: left; clear: both;}
.container .col {float: left; margin: 0 0 1em; padding-right: .5em; padding-left: .5em;}
.container .col.four {width: 50%;}
.container .col.tweleve {width: 100%;}}
* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
a {text-decoration: none;}
.btn1 {font-size: 20px;
white-space: nowrap;
width: 100%;
padding: .8em 1.5em;
font-family: Helvetica;
line-height: 20px;
display: inline-block;
zoom: 1;
color: rgb(255,255,255);
text-align: center;
position:relative;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;}
.btn1.btn-sea{background-color: rgb(15,219,0); border-color: rgb(10,145,0); -webkit-box-shadow: 0 3px 0 rgb(10,145,0); box-shadow: 0 3px 0 rgb(10,145,0);}
.btn1.btn-sea: hover{background-color: rgb(10,145,0);}
.btn1.btn-sea: active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
.btn2 {font-size: 20px;
white-space: nowrap;
width: 100%;
padding: .8em 1.5em;
font-family: Helvetica;
line-height: 20px;
display: inline-block;
zoom: 1;
color: rgb(255,255,255);
text-align: center;
position:relative;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
transition: border .25s linear, color .25s linear, background-color .25s linear;}
.btn2.btn-sea{background-color: rgb(255,42,42); border-color: rgb(204,0,0); -webkit-box-shadow: 0 3px 0 rgb(204,0,0); box-shadow: 0 3px 0 rgb(204,0,0);}
.btn2.btn-sea: hover{background-color: rgb(204,0,0;}
.btn2.btn-sea: active{top: 3px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col twelve'>
<p align='center'>
<font size='10'>REMOTE CONTROL</font>
</p>
</div> </div>
<div class='row'>
<div class='col four'>
<a href='?f=on' onclick="alert('LiGHT ON')" class='btn1 btn-sea'>ON</a>
</div>
<div class='col four'>
<a href='?f=off' onclick="alert('LiGHT OFF')" class='btn2 btn-sea'>OFF</a>
</div> </div>
<div class='col twelve'> </div> </div>
</body>
</html>