The main difference between "classic" html and xhtml is that all things which is used to color and decorate your web page has disappeard . Currently, most website decorations are directly included in a CSS file. Contents and form are now disjoined which may involves a reduction of the webpage size as well as a simplification of the files processing.

• I.Structure

  A webpage containing a planbox widget is generally divided in different parts like here:

       __________________________
      |             |           |
      |             |           |
      |             |           |
      | Block  A    |  Block B  |
      |             |           | 
      |             |           |
      |_____________|___________|                                   
                |  Block C  |
                |___________|
      ___________
      |_Block D_|
  

• Block A: Y-axis area.
• Block B: graphic area.
• Block C: X-axis area.
• Block D: optionnal area.

All these blocks are described in the css file. Each block is inserted in an html file thanks to the div tag. Inside one block, we can insert others div blocks which will be detail further:

    Ex: <BLOCK A>
             <info1></info1>
             <info2></info2>
                ...
         </BLOCK A>

• I.a Y-axis Block.(Block A).

its structure in the css file looks like this:

    #ordonne{
      position:absolute;
      margin-left:10px;
      margin-top:0px;
      width:150px;
      height:500px;
      background:#d6e5de;
      border-style:solid;
      border-color:#53676e;
      border-width:1px;
    }

The position: relative property positions an element relative to its current position.

The position: absolute property positions an element from the margins of the window.

All others div attributes are explicit enough for not being detailed here.

• I.b Inside block A.

In the Block A tags, we will insert others div tags which are also declared in the css file and called in maquette.html

Here is a short extract of tags which can be used in the Y-axis area:

    /* Y-axis ***************** */
    #ordo1_text{
      position:absolute;
      margin-left:30px;
      margin-top:50px;
      border-style:dotted;
      border-color:#000000;
      border-width:1px;
    }

    #ordo1_100{
      position:absolute;
      margin-left:117px;
      margin-top:4px;
      /*border-style:dotted; 
      border-color:#000000;
      border-width:1px; */
    }

As we showed previously, inside the html file, any tag integrations are very clear, first we open the global tag, then we insert others tags :

    <div id="ordonne">        *-> BLOCK A open* 
      <div id="ordo1_text">workshop A</div>          
      <div id="ordo1_100">100%</div>
         ...
    </div>

• II.Graphic Area (block B)

This block is divided into others blocks which include their own graphics( or activity block). The number of "under-block" is variable and depends on the number of graphic we want to display. :

      BLOCK B
    ____________________
    |                  |
    |graph A           |
    |__________________|
    |                  |
    |graph B           |
    |__________________|
    |                  |
    |graph C           |
    |__________________|
    |                  |
    |      ....        |

Blocks "graph A", "Graph B" etc. are similar to the others blocks we have seen previously (ie. same structure in the css file). In the same way, their integration in the html file is completely similar. The description of a div for creating horizontal and vertical line is a little bit different.

Sample of declaration for an horizontal, dashed line :

    #point1{
      position:absolute;
      margin-left:0px;
      margin-top:13px;
      width:1000px;
      height:2px;
      border-top-width:1px;
      border-left-width:0px;
      border-right-width:0px;
      border-bottom-width:0px;
      border-top-color:#000000;
      border-top-style:dashed;
    }

the creation of a line is therefore a simple creation of a div where we just configure the border-width attribute of three sides to null.

The construction of Block D and Block C is not described just because it is similar as Block A and B.

• III.Html Structure

  This structure corresponds to the implementation which has been made directly in an ERP5 file. This structure will be modified for severals reasons:

1. add/delete of items.
2. setting to the xhtml standards.
3. future javascript implementations.

    <html>
    <body>
    <form>
      <table>                  
        <table>
        </table>
        <table>               Corresponds to the NavigationBox
        </table>
      </table>

      <table>                             
      </table>                         .

      <table>
        <tr>
          <table>
          </table>
        </tr>
        <tr>
          <td>
               <div id='Y-axis'>
                 <div u-block Y-axis> </div>             
                 ...
          </td>
          <td>
               <div id="background1">
                  <div u-block background>        corresponds to the graphic area.     
                    ...................            
               </div>
           </td>
        </tr>
        <tr>
           <td> 
              <div id="X-absciss" >
                  <div id=u-absciss1></div>
                        .....
              </div>
          </td>
     </tr>
    </table>
    </form>
    </body>
    </html>