Laboratory Exercise on Some Basics of HTML, Part 3

Summary: This laboratory exercise represents the third lab in a series that introduces the formatting of documents which you routinely find on the World-Wide Web. Topics include simple tables and international HTML standards.

Preliminaries

As with the earlier parts of this introductory lab sequence, this lab assumes that you have created your own copy of the abbreviated course syllabus for this course.

Quick Reference

The following table expands the list of common formatting commands, given in Part 2 of this lab series on HTML basics.

Tables in HTML

In some circumstances, information may be displayed efficiently in a table, with data organized into rows and columns. For example, the above display of commands and their meanings is organized into a table with 2 columns and about 23 rows (including the column headers).

Within HTML,

• a table begins with <table> tag and concludes with </table>.

• a row in a table begins with <tr> (table row) tag, and concludes with </tr> (table row).

• Within a row, the <th> (table header) tag identifies a table cell that serves as a header, and the <td> (table data) tag identifies a regular cell.

To illustrate, consider the following HTML lines that define a simplified table of the computer science faculty at Willamette University.

    <table>
    <tr>
       <th>Faculty Member  <th>Office   <th>Office Phone   <th>email Username
    </tr>    
    
    <tr>
       <td>Haiyan Cheng   <td>Ford Hall 207  <td>5339  <td>hcheng
    </tr>

    <tr>
       <td>Jim Levenick   <td>Ford Hall 206  <td>6486 <td>levenick
    </tr>
    
    <tr>
       <td>K. Fritz Rhehr <td>Ford Hall 208  <td>6165  <td>fruehr
    </tr>

    <tr>
       <td>Henry Walker   <td>Ford Hall 210  <td>5310  <td>henry.walker
    </tr>
    </table>

When loaded into a browser, this table contains the following information, organized into 5 rows and 4 columns:

1. Copy the HTML for the above table into a Web page, and reload the page, checking that the table appears as shows above.

2. As shown in this table, text in header cells <th> is, by default, centered, whereas text in regular cells <td> is, by default, left justified. To help place cell content under its proper header, change the cells for telephone numbers to indicate the text should be centered:

   <td align=center>
   

3. The HTML text above was nicely formatted, so the author (and any person reading the HTML) could understand the various pieces and how they fit together. However, HTML allows spaces, blank lines, etc. to be inserted freely among words and tags. With the above table, add spaces and new lines as you wish, and check the extent to which adding white space matters when viewing Web pages.

   For example, the last line of the table:

       <tr>
          <td>Henry Walker   <td>Ford Hall 210  <td>5310  <td>henry.walker
       </tr>
   

   might be reformatted as

       <tr>        <td>He   nry
            Wal        ker   
   
   <td>Ford Hall 210
   <td>5310                      <td>henry.walker       </tr>
   

   As you reformat the table, maintain a list of where you added white space (e.g., new lines, spaces), and what happens when the revised page is reloaded. Are there any constraints regarding where spaces can be inserted without changing how the page is displayed? Explain briefly.

4. Create your own table, displaying whatever information you wish, provided the table has at least 1 header row, at least 3 regular rows, and at least 3 columns.

5. Enclose each cell within the table with a frame or border, using the border attribute for a table:

      <table border=1>
   

   1. Describe the resulting table, when this border attributed is added.
   2. What happens when border=1 is replaced by border=3, by border=3, and by border=0.
   3. When a border is specified, what happens if a cell is empty? (In the table for faculty, delete a phone number in one or two cells.)
   4. When a border is specified and a cell has no text, what happens if a "non-breaking space" or &nbsp; is inserted:

         <td>&nbsp;
      

World Wide Web Standards

As you might expect, many individuals and groups are working to extend features of Web pages and capabilities of browsers. For example, Microsoft may develop new options for pages displayed in its Edge browser, Mozilla may development enhancements for its Firefox browser, and Apple might add refinements to its Safari browser. With so much development underway, browsers may display a Web page in quite different ways, and elements that work with one browser may or may not work with another browser.

Amid this confused and sometimes contradictory development environment, the World Wide Web Consortium (W3C) provides international standards for Web pages. To be more precise, the W3C has specified several HTML versions, and it publishes precise requirements for the layout and tags for each version. Individual browsers may have their own extensions of a standard, but all browsers are expected to follow the W3C standards for displaying pages within each specified version.

In practice, when a Web page follows a specific W3C standard, different browsers still may display the page in somewhat different ways, but usually the page will be fully functional and look reasonable. However, if a Web page utilizes extensions for a specific browser, then the page may not display or function properly in other browsers.

To aid authors in following W3C standards, the W3C maintains a "validator" which authors can use to check that their page(s) conform to international standards. To check any Web page against the W3C standards, go to:

http://validator.w3.org

and enter the Web page's URL.

As an alternative (illustrated on [almost] all Web pages for this course), one can include the following text on a Web page:

     <a href="http://validator.w3.org/check/referrer">Check HTML against W3C standards</a>

On a Web page, this yields the link Check HTML against W3C standards—calling the W3C validator and referencing the URL of the current Web page.

Once a page has passed W3C standards, the author is allowed to display a W3C logo for the HTML version used. Go to the validator URL for this page, and read the "valid" Icon(s) on your Web page for HTML code to include your the W3C icon and validator link on your own page(s). (Click on the relevant icon to view the icon individually—looking at the URL to identify the specific image reference.

6. Check the W3C validator to determine whether your Web page, sample-html-page.html, conforms to international standards. If the validator identifies errors, try to repair them—asking for help as needed.

   Note: In my experience, using the validator on the first few Web pages can take a moderate amount of time—the W3C standards contain a great deal of detail, and the chances for an error may be high. However, the process becomes more comfortable and efficient with practice!

created 13 January 2019 revised 13-15 January 2019