CS 140 Lab 21 - Spring 2008

Objectives

1. Review basic HTML elements (tags)
2. Learn about HTML Tables

Part I - Review

1. Using notepad open the index.html file from lab 20.
2. Most HTML tags can be combined to create multiple effects. For example if the tag <b> </b> creates bold text and <i> </i> italic text how can we create bold italic text? Make your name bold italic in your web page.
3. Recall that the anchor tag is used to create hyperlinks in a document. For example the HTML <a href="http://myslu.stlawu.edu/~ehar">Ed</a> creates a link to my web page and looks like this ... Ed.
4. Images can be hyperlinks too, not just text. What we're going to do now is insert a small image into your web page and have it be a link to a larger version of the same image. To start copy the folder T:\Harcourt\Spring2008\CS140\gallery\thumbnails to your public_html folder.
5. Recall that you use the img tag to insert an image into a web page. Insert the image polarbear.jpg from the thumbnails folder you just copied into your web page. It should be small.
6. Now copy the full size polarbear image from the folder T:\Harcourt\Spring2008\CS140\gallery to your public_html folder.
7. Create a link to the full size image of the polar bear from the smaller thumbnail version. Do this by putting an anchor tag around the img tag.

HTML Tables

1. Tables are an important part of web page design. Cut and past the following HTML into your web page. What do you get?

      <table border="1">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      <tr>
      
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      <tr>
      
      </table>
    

2. The table tag is used to create a table. You create rows within the table using the tag tr, which means table row. The tag td means table data and is used to create one cell within a row.
3. Add another row to the table for 6,7,8.
4. Make two of the table cells bold and italic.
5. On the table tag the attribute border="1" specifies that the table border should be one pixel wide. What happens if we change the 1 to a 0?
6. Insert a small thumbnail image from your thumbnails folder into the lower left table cell. That is, use the img tag inside a table cell.
7. Make a table of six thumbnail images from your thumbnail folder. Each thumbnail should also have a link to the full size image.