CMSI 655: Internet Technologies: Homework #2 Answers

CMSI 655

Homework #2
Partial Answers

(4.6)

<html>
  <head>
    <title>Horizontal Rule Examples</title>
    <style>
      .halfsize {width: 50%; height: 7px;}
      .centered350 {width: 350px; text-align: center; margin: auto;}
    </style>
  </head>
  <body>
    <hr class="halfsize"/>
    <hr class="centered350"/>
  </body>
</html>

(4.10) Since this chapter did a poor job of telling you about the CSS properties for styling tables, I'd guess the author is looking for an answer with cellspacing and cellpadding. So here's what he's looking for (with a gratuitous border thrown in):

<html>
  <head>
    <title>A Table without Styles</title>
    <style>
      th {text-align: center; font-style: bold;}
    </style>
  </head>
  <body>
    <table border="1" cellspacing="5" cellpadding="3">
      <tr><td colspan="3">Great Places to Eat</td></tr>
      <tr>
        <th>Restaurant</th><th>Type of Food</th><th>Personal Rating</th></tr>
        <tr>
          <td>Strings</td>
          <td style="text-align: center;">Italian</td>
          <td> 3 stars</td>
        </tr>
        <tr>
          <td>Dos Coyotes</td>
          <td style="text-align: center;">Fresh Mex</td>
          <td>4 stars</td>
        </tr>
        <tr>
          <td>Symposium</td>
          <td style="text-align: center;">Greek</td>
          <td>3 stars</td>
        </tr>
        <tr>
          <td>The Graduate</td>
          <td style="text-align: center;">Burgers</td>
          <td>2 stars</td>
        </tr>
    </table>
  </body>
</html>

Note that I did avoid col elements for centering the middle column, since Gecko browsers don't support them. Also I couldn't bring myself to use td align="center", though hey, if I can use cellspacing and cellpadding....

(58) Here's a solution that's strict XHTML, but its use of inline styles isn't too cool.

<p style="text-align: justify">This is
<span style="text-decoration: line-through">really</span>
<span style="font-size: larger">crazy.</span></p>

(59)

<html>
  <head><title></title></head>
  <body style="background-color:white;a:active:red">
  <h1 style="text-align:center;border-bottom:10px solid grey">WHOA!</h1>
  <ol style="list-style-type:lower-alpha">
    <li>An Gr&eacute;as&aacute;n</li>
    <li>&Iacuteomh&aacute;nna</li>
    <li>Gr&uacute;pa&iacute;</li>
    <li>Eolaire</li>
  </ol>
  </body>
</html>

(50) The stylesheet

body {
  margin: 0;
}

#topbar {
  width: 100%;
  height: 100px;
  color: yellow;
  background-color: green;
  text-align: center;
  font-size: 50px;
}

#footer {
  clear: both;
}

#menu {
  float: left;
  width: 9em;
}

#imagetable {
  float: right;
  margin-bottom: 0.5em;
}

#map {
  margin-left: 11em;
  width: 20em;
}

#content {
  margin: 0.5em;
}

address {
  margin-top: 2em;
  padding: 0.2em;
  border-top: 6px solid purple;
}

#map img, a img {
  border: none;
}

table {
  border-collapse: separate;
  border: 1px solid blue;
  border-spacing: 0;
}

th {
  background-color: pink;
}

th.size, td.size {
  border-left: 2px solid black;
}

And the document

<html>
  <head>
    <title>Solution to a Practice Problem</title>
    <link rel="stylesheet" href="funstyle.css" type="text/css" />
  </head>

  <body>
    <div id="topbar">
      Hello
    </div>

    <div id="content">
      <div id="menu">
        <a href="http://www.lmu.edu">LMU</a><br />
        <a href="http://www.ucla.edu">UCLA</a><br />
        <a href="http://www.cam.ac.uk">Cambridge</a>
      </div>

      <div id="imagetable">
        <table>
          <thead>
          </thead>
          <tfoot>
          </tfoot>
          <tbody>
            <tr>
              <th>Thumbnail</th><th class="size">Size</th><th>Link</th>
            </tr>
            <tr>
              <td class="thumb"><img src="fox-thumb.gif" alt="Fox Thumbnail" /></td>
              <td class="size">396K</td>
              <td><a href="fox.gif">Download</a></td>
            </tr>
            <tr>
              <td class="thumb"><img src="coyote-thumb.gif" alt="Coyote Thumbnail" /></td>
              <td class="size">2.3M</td>
              <td><a href="coyote.gif">Download</a></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div id="map">
        <map id="schoolmap" name="schoolmap">
          <area shape="rect" coords="10,80,85,155" href="http://www.lmu.edu" />
          <area shape="circle" coords="137,137,37" href="http://www.ucla.edu" />
          <area shape="circle" coords="37,37,17" href="http://www.cam.ac.uk" />
        </map>
        <img src="schools.gif" alt="schools" usemap="#schoolmap"
          width="200" height="200"
        />
      </div>
    </div>

    <div id="footer">
      <address>Ta dah!</address>
      <p><a href="http://validator.w3.org/check/referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10"
      alt="Valid XHTML 1.0" height="31" width="88" /></a></p>
    </div>

  </body>
</html>

(43) Set the body's margins to 0 and its background color to white. Create a 200 x 1 image that is green, install it as the background image for the body element with repeat-y. Like this:

<html>
  <head>
    <title>Green and White</title>
    <style>
      body {
        margin: 0;
        background-color: white;
        background: url(green.gif);
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <p> This is some text that should show
    up in front of our green and white background</p>
  </body>
</html>

(5.7) The most important thing here is the use of relative links

<a href="DestructiveViruses.htm"><img src="virus_images/VirusOutbreakMap.gif"
  alt="Map of Computer Virus Outbreaks" height="75" width="120"
  style="vertical-align: top" />
</a>

(5.10)

<html>
  <head>
    <title>Image map example</title>
    <style>
      #quiltImage {
        position: absolute;
        top: 80px;
        left: 50px;
      }
    </style>
  </head>
  <body>
    <map id="quilt" name="quilt">
      <area shape="rect" coords="0,0,150,150" href="doc1.html" />
      <area shape="rect" coords="150,0,300,150" href="doc2.html" />
      <area shape="rect" coords="0,150,150,300" href="doc3.html" />
      <area shape="rect" coords="150,150,300,300" href="doc4.html" />
    </map>
    <p>
      <img id="quiltImage" src="PatchworkQuilt.jpeg" alt="A quilt"
        usemap="#quilt" width="300" height="300"
      />
    </p>
  </body>
<html>

(5.11) This problem sucks. How does one know what kind of plugin has been associated with a wave file? Different versions have different size images that appear as embedded content. It's apparent from the examples in the text that the author is looking for something like this:
```
<embed src="sound.wav" autostart="false" height="25" width="72" />
```
though it doesn't look right if you've associated a QuickTime player with wave files.

(6.4)

.centerstage {
  position: absolute;
  top: 175px;
  left: 100px;
  width: 200px;
  height: 125px;
  padding: 5px 3px;
}

<div class="centerstage"><strong>Pretty Spectacular</strong></div>

(6.6)

<html>
  <head>
    <title>Silly Table Layout</title>
    <style>
      table {width: 600px;}
      td {vertical-align: top; width: 200px;}
      tr.top {height: 350px;}
      tr.bottom {height: 75px;}
    </style>
  </head>
  <body>
    <!-- I think the author wants these dumb attributes -->
    <table border="0" cellpadding="0" cellspacing="0">
      <tr class="top">
        <td>This is the upper left section</td>
        <td>This is the upper middle section</td>
        <td>This is the upper right section</td>
      </tr>
      <tr class="bottom">
        <td colspan="3">This is the lower section</td>
      </tr>
    </table>
  </body>
</html>

(6.8)

<html>
  <head>
    <title>Frame Demo</title>
  </head>
  <frameset cols="33%,67%">
    <frame id="left" name="left" src="Doc1.html" />
    <frameset rows="25%,50%,25%">
      <frame id="top" name="top" src="Doc2.html" />
      <frame id="middle" name="middle" src="Doc3.html" />
      <frame id="bottom" name="bottom" src="Doc4.html" />
    </frameset>
  </frameset>
</html>