Overview

In this exercise, you'll be getting practice taking messy XHTML code and making it look clear and readable.

The code involves tags and features you may not yet be familiar with. That doesn't really matter, because the start and end tags are identifiable regardless of what they're supposed to do. Here's a brief key to tags that may not be familiar:

List tags: <ol> = ordered list <ul> = unordered list Either of these can contain: <li> = list item Horizontal rule: <hr />

Table tags: <table> = table, which contains one or more: <tr> = table row, which contains one or more: <td> = table data cell

There are two samples below. For each sample, you will probably want to refer to module X11d to complete the assignment.

General rules for indenting HTML code:

1. When two starting tags occur with no ending tag between them, indent the second tag.
2. When two ending tags occur with no starting tag between them, out-dent the second tag.
3. A self-closing tag is neither indented not out-dented.
4. All other tags should line up with one another.

Tactical tips for formatting and indenting:

• Before you begin, turn word-wrap off in whatever editor you use.
• Put one blank line between major sections of code; don't use multiple blank lines.
• To create an indent, use either the tab key or the space bar. Don't mix them.
• Each block entity should start on a line of its own; in-line entities usually should continue in the same line, unless there are several of them with lengthy rules in their tags - in which case it helps to line them up.

1. Open your template.htm file and save it as x11i-sample1.htm
2. Copy the following code and paste it into the body of the file:
   

   <h2>Utilities on Multi-user Systems </h2> <p>Time-sharing computers and Local Area Networks</p> <hr /><h3>Determining file privacy</h3> <ul><li>Complete privacy</li> <li>Read-only</li><li>Completely open</li> <li>Work-group vs. &quot;World&quot;</li></ul><hr /> <h3>Electronic communication </h3><ul> <li>See who else is using the computer, &quot;chat&quot; with them...</li> <li>...or leave message in &quot;mailbox&quot; (like phone answering machine)</li> <li>Can send messages to other users of that computer or network</li> <li>May be able to send using the &quot;Internet&quot; to most other countries in the world</li></ul><hr /><h3>Further system information </h3> <ul><li>Who's doing what</li> <li>Is printer busy, and is my job being printed OK?</li><li>Who logged in when</li> <li>What is a person's electronic address</li></ul> <h2>User Interfaces</h2><hr /><h3>Interface: What is it?</h3> <ul><li>A way of getting information from one &quot;system&quot; to another</li><li>Systems: the Human vs. the Computer</li> <li>User interface: how you get the computer to do what you want</li> </ul><hr /><h3>Batch interfaces</h3><ul> <li>The original interface was punched cards fed into the computer</li> <li>Variants: paper tape, magnetic tape, disk files</li> <li>All are a kind of character-based interface... </li></ul><hr /> <h3>Character-based Interfaces</h3><ul><li>You type a command</li> <li>The computer responds with an error message (or does what you want)</li><li>Advantages:<ul><li>Good for simple (not powerful) computers</li> <li>If you know them well, they can be very fast and flexible</li> </ul></li><li>Disadvantages:<ul><li>If you don't know the commands and how to put them together, they can be very confusing</li> <li>They tend to be inconsistent</li></ul></li></ul><hr /><h3>Menu-based interfaces</h3><ul><li>The computer gives you a list of options</li> <li>You select which you like (by number, by letter, or by pointer)</li> <li>Advantages:<ul><li>They give you a list of options</li> <li>They work relatively fast on less powerful computers</li></ul></li> <li>Disadvantages:<ul><li>Often not as flexible as character-based interfaces</li><li>Not as appealing as graphical interfaces</li></ul></li></ul> <hr /><h3>Graphical User Interfaces (GUI)</h3><ul><li>The computer shows you pictures (icon) representing objects or activities; or makes a menu available</li><li>You direct and pointer to the icon or menu choice and perform an action</li> <li>Advantages:<ul><li>Easy to learn</li><li>Have visual appeal</li> <li>Are usually consistent from one program to another</li></ul></li> <li>Disadvantages<ul><li>Require much more computing power</li> <li>Often not as flexible as character-based interfaces</li></ul></li></ul><hr /><h3>Voice-Activated Interfaces</h3><ul><li>Currently only available with other (character or graphical) interfaces</li> <li>User speaks command words and phrases; computer attempts to understand and carry out command</li><li>Advantages:<ul><li>Leaves hands free</li> <li>Speech is the most natural command mode for (many) humans</li></ul></li> <li>Disadvantages<ul><li>Require more computing power even than GUI</li> <li>Currently: Has to be trained to understand each individual user's speech</li> <li>Currently: Each word must be articulated separately (you can't just &quot;speak a sentence&quot;)</li></ul></li></ul><hr /> <h3>Future Interface Possibilities</h3><ul><li>Virtual Reality Interface <ul><li>3-D simulated &quot;world&quot; surrounds the user</li> <li>Hand-held pointing devices, treadmills used to control and move</li></ul></li><li>Direct Mind Control<ul><li>Simple case: you move the cursor by thinking (research now using EEG at Carnegie Mellon University, Pittsburgh)</li><li>Ultimate control: &quot;think&quot; what you want, and the computer does it for you (Isaac Asimov and other science fiction authors)</li></ul></li></ul>

3. You may find that printing a copy of the browser output will help you see what the different parts are intended to do.
4. Put blank lines in appropriate places.
5. Indent code to reflect its structure.
6. Add comments to show where structures begin and end.
7. Validate your file as XHTML 1.0 Transitional
8. Continue with Sample 2 below...

For the second sample, do the same as with the first. This sample contains table elements as well as lists.

1. Open your template.htm file and save it as x11i-sample2.htm
2. Copy the following code and paste it into the body of the file:
   

   <table border="1" width="100%" bgcolor="#FFFFCC" ><tr valign="top"> <td><h3>Contents</h3> <p><a href="#Audience">Review</a></p><p><a href="#Audience">Audience and Objectives</a></p><p><a href="#AboutDocument">About this document...</a></p></td><td><ul><li><strong><a href="#Options">What are your options in connecting with the Internet?</a></strong></li><li><strong><a href="#Connection">Kinds of Connection</a></strong><ul><li><a href="#POTS">POTS</a></li><li><a href="#Radio">Radio Frequency</a></li><li><a href="#ISDN">ISDN</a></li><li><a href="#ADSL">ADSL</a></li><li><a href="#Cable">TV Cable</a></li><li><a href="#Satelite">Satelite</a></li><li><a href="ng10c.htm#SpeedChart">Summary: Speed chart</a></li></ul></li><li><strong><a href="#Features">What features are available?</a></strong><ul><li><a href="#Shell">"Shell" accounts</a></li><li><a href="#Email">E-mail accounts</a></li><li><a href="#PPP">PPP accounts</a></li></ul></li></ul></td><td><ul><li><strong><a href="#ValueAdded">Value-Added Service Providers</a></strong><ul><li><a href="#WhatIs">What is the "added value"?</a></li><li><a href="#AOL">America On Line</a></li><li><a href="#CompuServe">CompuServe</a></li><li><a href="#Genie">Genie</a></li></ul></li><li><strong><a href="#ISP">Internet Service Providers (ISPs)</a></strong><ul><li><a href="#National">National ISPs</a></li><li><a href="#Michigan">Major Michigan ISPs</a></li><li><a href="#Washtenaw">Washtenaw County ISPs</a></li></ul></li></ul></td></tr></table> <br /><br /> <table border="1" bgcolor="#ffffcc" align="center"><tr bgcolor="#ffcc00"><td align="right">maximum <strong>Speed</strong> in kBaud</td><td><em>direction</em></td><td colspan="2" align="center">downstream</td><td colspan="2" align="center">upstream </td></tr><tr bgcolor="#FFFFCC"><td rowspan="3"> <div align="right">approximate maximum <strong>Distance</strong> from<br /> telephone exchange</div></td><td align="right"><em>feet</em></td><td align="center"> 10,000</td><td align="center">18,000</td><td align="center"> 10,000</td><td align="center">18,000</td></tr><tr><td> <div align="right"><em>miles</em></div></td><td align="center">2</td> <td align="center">3</td><td align="center">2</td><td align="center">3</td> </tr><tr><td align="right"><em>meters</em> </td><td align="center">3500</td><td align="center">5500</td> <td align="center">3500</td><td align="center">5500</td></tr> <tr bgcolor="#FF9999"><td colspan="2"><strong>T3</strong></td><td colspan="4" align="center">44,736 </td></tr><tr bgcolor="#FFCCCC"><td colspan="2"><strong>T1</strong></td> <td colspan="4" align="center">1544</td></tr><tr bgcolor="#FFFF00"> <td colspan="2"><strong>ADSL</strong> full (G.dmt)</td><td align="center">8000 </td><td align="center">1000</td><td align="center">1500</td> <td align="center">?384</td></tr><tr bgcolor="#CCFFCC"><td colspan="2"> <strong>Cable</strong> (HFC)</td><td colspan="2" align="center">3000</td><td colspan="2" align="center">?128</td></tr><tr bgcolor="#FFFF66"><td colspan="2"><strong>ADSL</strong> lite (G.lite)</td><td align="center">1500</td> <td align="center">384</td><td align="center">384</td> <td align="center">?160</td></tr><tr bgcolor="#CCFFFF"><td colspan="2"> <strong>Satelite</strong> (DSS)</td><td colspan="2" align="center">350</td> <td colspan="2" align="center">none: needs POTS modem</td></tr> <tr bgcolor="#CCCCFF"><td colspan="2"><strong>ISDN</strong></td> <td colspan="4" align="center">128</td></tr><tr bgcolor="#FFFFFF"><td colspan="2"> <strong>56k</strong>-baud modem with POTS</td><td colspan="4" align="center">56</td> </tr></table>

3. Again, I recommend printing a copy of the browser output to help you see what the different parts are intended to do.
4. Put blank lines in appropriate places.
5. Indent code to reflect its structure.
6. Add comments to show where structures begin and end.
7. Validate your file as XHTML 1.0 Transitional
8. Continue by submitting the assignment as described below...

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

Attach your two files (x11i-sample1.htm and x11i-sample2.htm) to email to the instructor. Be sure your email meets the formal requirements: name, class, section and exercise (x11i), and that it follows standard business-email practice. (Printed output is not required for this exercise.)