12.2  HTML code

HTML files are filename.htm or filename.html.
If they contain embedded sections of PHP code, then they must be filename.php.


All website requests from browser to server are calls to download or run a file.

eg:  the default piWebCAT RPi ip address is set to 192.168.1.117.

Placing this address in the URL bar of a web browser accesses port 80 on the RPI
and looks for a default web page in the web root folder. index.html loads as start page.

The START button in the index page then calls catcontrol.php which generates the main page.

catcontrol.php is mainly HTML code.


Web browsers have a rendering engine. On initial download, – this takes HTML code and interprets it into what you see visually. The lines of code are processed sequentially such that their sequence determines the arrangement of the final appearance.


HTML tables as an example of HTML coding:


piWebCAT makes extensive use of <table> components which have rows <tr> containing cells  <td>.
I use tables within tables to achieve the required panels and positioning.

Some of the inner tables are not visible:   I design with a border width of one pixel so as to be able to see the positions of the cells.  Then when finished, I remove the borders.
The code below generates the S meter area and the Tx meter buttons below it.

A table is used for the top part of the page.
The table below is within that table on the left.


 <table class="noselect" cellspacing="2px">    <!-- inner table for meter and Tx buttons -->

  <tr>    <!-- first row  for S meter-->

    <td class="noselect" id="meterboxmain"  width="252px" height="96px" valign="middle" bgcolor="black">

    </td>

  </tr>

  <tr>    <!-- second row for buttons -->

    <td class="noselect" height="44px" bgcolor="black" style="padding-left:3px">

       <span style="font-size:medium;font-weight:bold;color:aqua">TX</span>&nbsp;   

button>  <input name="btnTxmA" id="btnTxmA" type="button" class="buttontxmeter" style="width:34px"

value="TxA" align="top"  onclick="onPwcClick(BTN_TX_METER_A)"  />

button> <input name="btnTxmB" id="btnTxmB" type="button" class="buttontxmeter" style="width:36px"

 value="TxB" align="top"  onclick="onPwcClick(BTN_TX_METER_B)"  />        

                           ..... 3 more buttons follow.....

    </td>

  </tr>

 </table>       <!--   end of inner table -->        


In the above code:

  • The S meter cell has id="meterboxmain"
    I can use this id to load the meter background images into this cell.
  • The first button has id= "btnTxmA"
    I use this id to set the button's caption (from your database settings).
    I use jQuery code for this:   $("#btnTxmA").val('PO');    sets caption = 'PO'  ie: Power Output.
  • The first button has an on-click event javascript function: onPwcClick(BTN_TX_METER_A)
    onPwcClick(..) is used by all buttons.  BTN_TX_METER_A is  numeric identifier (= 61   - see buttons.js)
    This directs the javascript code in function onPwcClick(...)   to carry out the correct button action.