991109-4

Below is shown a small part of a web page. Specify the HTML code to generate this.

Note 1: No graphics (<IMG> tags) are used.

Note 2: The distance between "Go to:" and "All forums" is slightly larger than the distance between row 2 and 3. But I will give 5 points for an otherwise correct answer, even for those who cannot propose how to achieve this without user of an <IMG> tag.

Answer

Solution 1:

There are of course many ways to achieve this. Below is one solution. All this was not required for full score on the exam. The actual web page from which the example was taken used style sheets, but the solution below does not use style sheets.

<table border="0" cellspacing="0" cellpadding="5">
  <tr valign="top">
    <td bgcolor="#003333" width="150">
      <font color="#CCCC99" size="2" face="Verdana"><b>Go to:</b></font><br> 
      <a href="foo.bar/allforums" 
      <font color="#CCCC99" size="2" face="Verdana"          
        style="text-decoration:none"><b>           
      All forums</b></font></a>
      <font face="Verdana" size=4><b>&nbsp;</b></font><br>           
      <a href="foo.bar/Work">           
      <font color="#CCCC99" size="2" face="Verdana"          
        style="text-decoration:none"><b>           
      &nbsp;&nbsp;Work</b></font></a><br>           
      <a href="foo.bar/bugsinkom2000">           
      <font color="#FFCCCC" size="2"          
      face="Verdana" style="text-decoration:none"><b>           
      &nbsp;&nbsp;&nbsp;&nbsp;Bugs in KOM 2000</b></font></a>
      <br><br>          
</td></tr></table>

A very different solutions would be to split the table into many cells to achieve the desired look.

Explanations

<td bgcolor="#003333" width="150"> will produce a table cell, filled with a dark colour.

<font face="Verdana" size=4><b>&nbsp;</b></font> will introduce one large (non-visibile) character on the second line, causing the line difference before this line to be slightly increased.

Since this is obviously a command bar, <a href=... was added for the commands.

style="text-decoriation:none" will inhibit the normal underscoring of links made by most web browsers.
 

Solution 2:

This solution uses a multi-cell construct instead:

<table border="0" cellspacing="0" cellpadding="0" width="150">
  <tr>
    <td bgcolor="#003333" height=20 colspan="3" valign=middle>
      <font color="#CCCC99" size="2" face="Verdana"><b>
        Go to:</b></font></td>
  </tr>
  <tr>
    <td bgcolor="#003333" colspan="3" valign=top>
      <a href="foo.bar/allforums">
      <font color="#CCCC99" size="2" face="Verdana"
        style="text-decoration:none"><b>
      All forums</b></font></a></td>
  </tr>
  <tr>
    <td bgcolor="#003333" width="10">&nbsp;</td>
    <td bgcolor="#003333" colspan="2" valign=top>
      <a href="foo.bar/Work">
      <font color="#CCCC99" size="2" face="Verdana"
        style="text-decoration:none">
      <b>Work</b></font></a></td> 
   </tr>
   <tr> 
     <td bgcolor="#003333"height="30">&nbsp;</td>
     <td bgcolor="#003333" width="10" height="30">&nbsp;</td>
     <td bgcolor="#003333" height="30" valign=top>
       <a href="foo.bar/bugsinkom2000">
       <font color="#FFCCCC" size="2" face="Verdana"
         style="text-decoration:none"><b>
       Bugs in KOM 2000</b></font></a></td>
    </tr>
</table>

Scoring

1 Dark background
1 Light text
1 Limited width
1 Clickable links
1 No underscoring of links
1 Indentation
1 Increased line distance after "Go to:"
6 Max score

List of exam questions