IST129: The HTML Challenge - answers

Following are some exercises to see just how well you know HTML.

1. Given two images, img1.jpg and img2.jpg, code the HTML to put the images side-by-side (not one atop the other).
   <img src="img1.jpg" align=LEFT>
   <img src="img2.jpg" align=RIGHT>
2. Code the following TABLE:
   <table border=3>
   
   <tr>
   
   <th rowspan=3>Manufacturer</th>
   <th rowspan=3>Model</th>
   <th colspan=6># Produced</th>
   
   </tr>
   <tr>
   
   <th colspan=2>1965</th>
   <th colspan=2>1966</th>
   <th colspan=2>1967</th>
   
   </tr>
   <tr>
   
   <th>1st 1/2</th>
   <th>2nd 1/2</th>
   <th>1st 1/2*lt;/th>
   <th>2nd 1/2</th>
   <th>1st 1/2</th>
   <th>2nd 1/2</th>
   
   </tr>
   <tr>
   
   <td>Gibson</td>
   <td>GA20RVT</td>
   <td>12</td>
   <td>15</td>
   <td>10</td>
   <td>08</td>
   <td>06</td>
   <td>10</td>
   
   </tr>
   blah-blah-blah...
   </table>
   
3. How would you code a FRAME statement with 4 frames to make one frame be leftmost for 33% of the width of the screen another frame be rightmost for 33% of the width - both running top to bottom. The remaining 2 frames are 33% wide and are in the middle stacked atop one another.
   <frameset cols="33%,33%,*">
   
   <frameset rows="100%,*">
   
   <frame src="framex.htm"> <!-- leftmost frame -->
   
   </frameset>
   
   <frameset rows="50%,*">
   
   <!-- middle 2 frames -->
   <frame src="framex.htm">
   <frame src="framex.htm">
   
   </frameset>
   
   <frameset rows="100%,*">
   
   <frame src="framex.htm"> <!-- rightmost frame -->
   
   </frameset>
   
   </frameset>
   
4. How would you code to make all Paragraphs blue, bolded, and centered?
   <style>
   
   <!--
   P {color:BLUE; font-weight:BOLD; text-align:CENTER}
   -->
   
   </style>
   
5. How would you code to make all RED paragraphs be right-aligned in normal font?
   In the STYLE tag, code:
   P.RED {color:RED; text-align:RIGHT; font-weight:NORMAL}
   Then in the BODY of your HTML, code paragraph as follows:
   <p class="RED">
   Here is a sample paragraph that contains no
   attributes in the <P> tag. Notice that
   this paragraph is RED, NORMAL, and RIGHT-ALIGNED.
   </p>
   
6. Under what circumstances would you have to code the the font-weight attribute in the case above?
   Hint: think cascading=inheritance.
   If you had defined the <P> tag ahead of the P.RED class to have bolded text.
7. When should you use the ending </P> tag?
   If you had defined the <P> tag within the STYLE tag to do special formatting and you did not want that formatting to apply to all text that followed your use of <P>.
8. How would you code an unordered list such that if it contain an ordered list, the text of the order list would be RED as follows?
   • Outer list
   1. Inner ordered list
   • Inner list cont'd
   In the STYLE tag, code:
   UL OL {color:RED}
9. How would you code the following list?
   1. Topics to cover:
   1. Bandana waving
   1. Hold the bandana
   2. Wave the bandana
   2. Stomping of feet
   1. Lift right foot
   2. Force foot to ground quickly
   3. Do same for left foot
   Check source code!
10. How would you code the following table for thumbnail images with a GREEN caption using the STYLE attribute? Hyperlink each picture to display just the picture in normal size.

    Thumbnails

    <center>
    <table border=3>
    
    <caption style="color:GREEN" >Thumbnails</caption>
    <tr>
    
    <td>
    
    <a href="../pix/joepass.gif">
    <img src="../pix/joepass.gif";
    width=40 height=40 border=3>
    </a>
    
    </td>
    <td>
    
    <a href="../pix/joepass.jpg">
    <img src="../pix/joepass.jpg";
    width=40 height=40 border=3>
    </a>
    
    </td>
    <td>
    
    <a href="../pix/joepass1.jpg">
    <img src="../pix/joepass1.jpg";
    width=40 height=40 border=3>
    </a>
    
    </td>
    
    </tr>
    
    </table>
    </center>
    
11. If you copy my HTML from HOMEPAGE and paste it directly into notepad on your PC and then run it, why can you not see my pictures?
    Hint: Think relative versus absolute.
    Because I coded relative references to my pictures. That is, I did not tell my HTML code that the pictures reside in http://guitarzan.homepage.com/pix/. I simply used ../pix in the IMG tag.
12. What's the problem with the following HTML code and how should I fix it?
    1. Number one
    Subpoints.....
    2. Number two
    Subpoints.....
    3. Number three
    Subpoints.....
    Number four
    Subpoints.....
    I left off a closing > symbol:
    <li>Number three</li>
    <ul>
    
    Subpoints.....
    
    </ul <<<see?
13. Why does the browser generate horizontal scrollbars for the following 3 cell table even though I told the table to take up only 60% of the screen and each cell is only to consume 20%?

    ABCDEFGHIJKLMNOPQRTSUVWXYZABCEDFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRTSUVWXYZABCEDFGHIJKLMNOPQRSTUVWXYZ

    Because the data in the 3rd cell definition (TD) one extends far enough that instead of chopping the data off, the browser automatically gives you the scroll bars.
14. How can you ensure that you always get horizontal scroll bars on in an HTML document?
    Use the <nobr>...</nobr> tags as I mentioned here.
15. Put a visitor counter and/or guest book on your WWW site.
    Hint: Visit www.beseen.com
    Visit the BESEEN site and sign up for the free WWW site options that you need. Then simply plug in the JAVA script that they give you and the rest is automatic.