Online Learning Applications for Technical English


Home
Syllabus
Assignments

Instructor



Producing Homepages

Step 3. Adding bars

To create the bars in the homepage example, we can use a couple of methods. For instance, we can prepare a color block image: 

<IMG SRC="./images/purple_block.jpg">
  -->
and change its height and width dimensions to get the bar we want: 

<IMG SRC="./images/purple_block.jpg" HEIGHT=5 WIDTH=90>
  --> 
<IMG SRC="./images/purple_block.jpg" HEIGHT=30 WIDTH=5>
  -->

Another method would be to use the <TABLE> </TABLE> tags. First, we create a one-row table with only one data item: 

<TABLE>
  <TR> <!-- First table row -->
    <TD></TD> <!-- Only one (empty) table data item -->
  </TR>
</TABLE>
and then set the size and color as necessary: 

<TABLE>
  <TR>
    <TD HEIGHT=10 WIDTH=90 BGCOLOR=GREEN></TD>
  </TR>
</TABLE>
-->
 

<TABLE>
  <TR>
    <TD HEIGHT=30 WIDTH=5 BGCOLOR=ORANGE></TD>
  </TR>
</TABLE>
-->

In the bar graph example, let us use the colored tables to create the necessary bars:

Filename: age_range_bar_graph_v2.html 
<HTML>

<HEAD>
</HEAD>

<!-- [7/31/2007] - Version 2 of age range -->
<!--   bar graph using tables. -->

<BODY>
Online Learning Applications

<P>

The age range information of AIP4 students:

<TABLE>
  <TR>
    <TD>Under 10</TD>
    <TD></TD>
    <TD>0.0%</TD>
    <TD>0</TD>
  </TR>
  <TR>
    <TD>Under 20</TD>
    <TD></TD>
    <TD>0.0%</TD>
    <TD>0</TD>
  </TR>
  <TR>
    <TD>Under 30</TD>
    <TD>
<TABLE>
<!-- Under 30 bar -->
  <TR>
    <TD HEIGHT=10 WIDTH=29.6 BGCOLOR=BLUE></TD>
  </TR>
</TABLE>
<!-- End of Under 30 bar -->
    </TD>
    <TD>29.6%</TD>
    <TD>8</TD>
  </TR>

       .
       .
       .

  <TR>
    <TD>70 and over</TD>
    <TD>
<TABLE>
<!-- 70 and over bar -->
  <TR>
    <TD HEIGHT=10 WIDTH=3.7 BGCOLOR=BLUE></TD>
  </TR>
</TABLE>
<!-- End of 70 and over bar -->
    </TD>
    <TD>3.7%</TD>
    <TD>1</TD>
  </TR>
</TABLE>

</BODY>

</HTML>
[ View result ]

[ Back ]