Experiment 5
— print (last updated: Sep 23, 2009) — print

The issues that this experiment treats are how create the appropriate column sizes and spacing between columns to produce an attractive appearance (given what we have available to us at this point).

1. Create the folder ColumnExample in your USB drive (or Desktop if not available).
2. The page you are creating uses this image:
   btrfly.jpg
   which you should save to the ColumnExample folder.
3. Create a new HTML document and save it as the file webdesign.html in the ColumnExample folder.
   The first goal is to make this document look like this. The features are:
   • the top centered header is an h1 element,
   • the second left-justified header is an h2 element.
   • the outer table has one row and four td cells
   The respective contents are given below (copy and paste into each cell, once created):

   ---

   <table summary="">
   <tr><td><a href="index.html">home</a></td></tr>
   <tr><td><b>Web Design</b></td></tr>
   <tr><td><a href="moves.html">Favorite Movies</a></td></tr>
   <tr><td><a href="hobbies.html">My Hobbies</a></td></tr>
   <tr><td><a href="songs.html">Top 10 Songs</a></td></tr>
   </table>
   

   ---

   <h3>HTML</h3> 
   

   ---

   <h3>Lists</h3>
   

   ---

   <h3>Graphical Images</h3>
   

   ---

4. Add more content to each of the three content cells getting this effect.
   The respective contents of the three content cells is given below (copy and paste into each cell, minus the already-created h3 element):

   ---

   <h3>HTML</h3> 
   HTML stands for
   <b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage.
   It was invented in 1989 by Tim Berns-Lee.
   <p>
   <em>Hypertext</em> refers
   to the ability to move among information in many files in 
   non-linear way by activing <em>links</em> to other files.
   </p>
   

   ---

   <h3>Lists</h3>
   Lists are ways of organizing information in a hierarchical way
   according to a sequence of elements (numbered or not)
   along with their subsequences. 
   HTML lists are usually thought of
   as combinations of the elements:
    <tt>ul</tt> (unordered list), 
    <tt>ol</tt> (ordered list),
    and 
    <tt>li</tt> (list item).
   

   ---

   <h3>Graphical Images</h3>
   Here is an example:
   <p>
   <img width="120px" height="73px" src="btrfly.jpg" />
   </p>
   The HTML content is:
   <p>
   <tt>&lt;img width="120px" height="73px" src="btrfly.jpg" /&gt;</tt>
   </p>
   

   ---

   Note the usage of the special characters "&lt;" and "&gt;" used to literally display the "<" and ">", respectively. Only the replacement of "<" by "&lt;" is actually necessary.
5. Make the width of each of the three content cells 30% and add 5px cellpadding to the outer table, getting this effect.
6. Set the width of the inner table to 120px, getting this effect.
7. Add spacer td cells of width 1% with empty content between each of the four cells, getting this effect.
   It is not possible to create this spacing effect using cellspacing and/or cellpadding. We'll eventually know a better way to do so using style properties.
8. Remove the table border and add the following style attribute/value to the leftmost td cell (not to the inner table):

   style="background-color:lavender; border: solid 1px red"
   

   By doing so, we create the final product.

9. Check the appearance of this code in IE and Firefox browsers.