More HTML Fun for Authors

My introductory primer on Web Basics for Authors generated a lot of positive feedback, so I thought that I'd follow up on my promise to do another installment. In this article, I explain how to create lists and tables, more complex HTML structures that rely on related sets of multiple tags. I also introduce some additional concepts related to hyperlinks: relative URLs, internal links, and URLs for protocols other than HTTP.

Lists

If you use a modern word processing program, you are probably accustomed to capabilities for automatic numbering and formatting of lists. These features are convenient since you can insert or rearrange list items without having to worry about manually revising the numbering.

HTML offers similar capabilities, though you don't necessarily have as much detailed control over the appearance of the list. To create a list in HTML, you need to use two sets of tags, one to define the list itself, and another to define individual items on the list.

Here's an excerpt from my To Do list, an example of a numbered list in HTML:

  1. Final line edits for "Shortest Night"
  2. Interview questions to Raine
  3. Prepare blog article for Yankee Romance, November 22
  4. Work on trailer for "Exposure"
  5. Write 4K on "Serpent's Kiss"
  6. Submit review for Erotica Revealed

To code this example, I used two sets of tags. The tags <ol> and </ol> begin and end an ordered list. The tags <li> and </li> mark the start and finish of a list item. HTML automatically assigns numbers according to the order of the list items. So the code for the list above looks as follows: 

<ol>
<li>Final line edits for "Shortest Night"</li>
<li>Interview questions to Raine</li>
<li>Prepare blog article for Yankee Romance, November 14</li>
<li>Work on trailer for "Exposure"</li>
<li>Write 4K on "Serpent's Kiss"</li>
<li>Submit review for Erotica Revealed</li>
</ol>

Would you rather have your list items preceded by letters? You can control this using the type attribute with the <ol> tag. For instance, to change the list above to use lower case letters, I would begin it with <ol type="a">:

  1. Final line edits for "Shortest Night"
  2. Interview questions to Raine
  3. Prepare blog article for Yankee Romance, November 22
  4. Work on trailer for "Exposure"
  5. Write 4K on "Serpent's Kiss"
  6. Submit review for Erotica Revealed
Uppercase letters and other formats are also available.

Like most HTML constructions, lists can be nested (included) inside other lists. Thus, it is easy to create an outline, or a multiple choice poll:

  1. Who is the sexiest actor?
    1. Brad Pitt
    2. Hugh Jackman
    3. Clive Owen
    4. Michael Caine
  2. Who would you most like to have endorse your book?
    1. Oprah Winfrey
    2. Margaret Atwood
    3. Portia da Costa
    4. Salman Rushdie

Here's the HTML code for the nested list above: 

<ol>
<li>Who is the sexiest actor?</li>
  <ol type="a">
    <li>Brad Pitt</li>
    <li>Hugh Jackman</li>
    <li>Clive Owen</li>
    <li>Michael Caine</li>
  </ol>
</li>
<li>Who would you most like to have endorse your book?
  <ol type="a">
    <li>Oprah Winfrey</li>
    <li>Margaret Atwood</li>
    <li>Portia da Costa</li>
    <li>Salman Rushdie</li>
  </ol>
</li>  
</ol>

I have indented to show the different levels of list; this is not required. Notice that the nested list does need to be completely inside the list element tags for the outer list. It's quite easy to get confused; if you put the end tags in the wrong places, you can get some strange results.

In addition to ordered lists, HTML also provides "unordered lists", which use the tags <ul> and </ul>. For example:

The HTML for this nested list is the same as for the numbered list example, except that I replaced <ol> and </ol> with <ul> and </ul>, and took out the type attribute. On my browser, at least, HTML automatically uses a different style of bullet for the nested list, which looks quite nice. I suspect that it is possible to control the style of bullets directly, but I've never tried.

Tables

Tables are an extremely powerful and useful construct in HTML. Obviously they can be used to present data in rows and columns, like the following simple (and fanciful!) example:

BookJan SalesFeb SalesMar Sales
Raw Silk12,04015,23122,765
Incognito23,30918,75632,605
Rough Caress17,65220,12122,811
Ruby's Rules26,12239,10041,615

However, tables can be used in other contexts, to organize both graphical and textual data. For instance, the array of book covers and commentary here is implemented as a table, as is the display of "Lisabet's Friends and Colleagues" on my Links page.

There are many tags that can be used in creating tables, and each of them has a variety of possible attributes. However, to code a basic table, you need only four sets of tags:

Putting these four sets of tags together, we can create the dream book sales table shown above, with the following HTML code: 

<table width="100%" cellpadding=5 border=5>
<tr>
   <th>Book</th>
   <th>Jan Sales</th>
   <th>Feb Sales</th>
   <th>Mar Sales</th>
</tr>
<tr>
   <td>Raw Silk</td>
   <td>12,040</td>
   <td>15,231</td>
   <td>22,765</td>
</tr>
<tr>
   <td>Incognito</td>
   <td>23,309</td>
   <td>18,756</td>
   <td>32,605</td>
</tr>
<tr>
   <td>Rough Caress</td>
   <td>17,652</td>
   <td>20,121</td>
   <td>22,811</td>
</tr>
<tr>
   <td>Ruby's Rules</td>
   <td>26,122</td>
   <td>39,100</td>
   <td>41,615</td>
</tr>
</table>

Once again, I've used indenting to make the structure of this code clearer. Notice that the table description is purely hierarchical. Table rows are contained within the table tags. Table header or table data tags are contained within the table rows.

You might also notice that you do not need to explicitly tell the browser how many columns you want in your table (although you can). The maximum number of table data or table header tags in any table row will determine the number of columns for the table as a whole. If some rows have fewer table data cells than others, the table will look odd.

You can control many aspects of the table appearance using various attributes, including alignment of the table cell contents, width of the table columns, and thickness of the border, if any. You can also create table rows in which some of the data span multiple columns. I've inserted a spanning heading in the example below, just to demonstrate.

BookQ1 2008 Sales Figures
 Jan SalesFeb SalesMar Sales
Raw Silk12,04015,23122,765
Incognito23,30918,75632,605
Rough Caress17,65220,12122,811
Ruby's Rules26,12239,10041,615

In this modified example, I added a new table row above the previous heading row, with the following code: 

<tr><th>Book</th><th colspan=3>Q1 2008 Sales Figures</th></tr>
The colspan attribute makes the header extend over three columns.

The really powerful thing about tables is that the table cells (material between the <td> and </td> tags) can contain pretty much any HTML code. This means that you can embed an image inside a table cell (as I did on my books page), or a list, or even another table. The possibilities are pretty much limitless. If you spend some time experimenting, you will find that you can create some very sophisticated information layouts using tables.

More about URLS and Links

In my previous article, I illustrated how to use the anchor tag (<a>) to create hyperlinks to other web pages. I showed you the following example: 

 
<a href="http://www.lisabetsarai.com/news.html">my latest newsletter</a>
The href component holds the value of the URL (Universal Resource Locator) which should be requested from the web server if the link is clicked. This example uses an absolute URL, a URL that includes all of the following parts:

There are several variations to specifying target resources in a hyperlink. First of all, if a hyperlink refers to a resource on the same web server as the current page, it is common to use a relative URL which omits the protocol and the host specification. Since you are currently reading a page on www.lisabetsarai.com, the example below is equivalent to the one above. 

 
<a href="./news.html">my latest newsletter</a>
Web sites are often designed with subdirectories, and it may be necessary to specify the local subdirectory path as part of a relative URL: 
 
<a href="./lisabetimages/21Instanbul.jpg">a picture of Instanbul</a>
This would show up as
a picture of Instanbul

In addition to relative URLs, it is also possible to create links to named locations within the current page. My favorites list uses this strategy to create a table of contents. The table is coded as follows (notice that in HTML, tags are not case-sensitive, that is, upper case and lower case are equivalent: 

  <UL>
      <LI><B><I><A HREF="#Authors" TARGET="body">Authors</A></I></B></LI>
      <LI><B><I><A HREF="#EroticAuthors" TARGET="body">Erotic Authors</A></I></B></LI>
      <LI><B><I><A HREF="#Music" TARGET="body">Music</A></I></B></LI>
      <LI><B><I><A HREF="#Film" TARGET="body">Film</A></I></B></LI>
      <LI><B><I><A HREF="#Places" TARGET="body">Places</A></I></B></LI>
  </UL>

How do we tell the browser where in the page to go when someone clicks the "Authors" link? There is a variant on the anchor tag that can be used to associate a name with some text. 

  <font color="#900090"><p><B><A NAME="Authors"></A>Favorite Authors</B></p></font>
Notice that the spelling of the name must match exactly the label used in the link. In the link, this name should be preceded by the pound sign as in "#Authors", and in both tags, the name must be in quotes.

If you've been following me so far, you might wonder whether there are any other possibilities for the protocol section of a URL. In fact, there are several common alternatives, including https:// (Secure HTTP), which is used to send encrypted information (e.g. for a banking or eCommerce web site) and ftp:// (File Transfer Protocol), which is used to retrieve files from a server that will be stored on the local client computer, rather than displayed in the browser. Authors are not that likely to need either of these protocols. However, there is one protocol indicator that might be useful, which is the mailto: protocol. This allows you to create a link that, if clicked, will bring up the client's default email client. For instance:

contests@lisabetsarai.com (Try clicking to see what happens!)

The HTML code for the above link is as follows: 

<a href="mailto:contests@lisabetsarai.com>contests@lisabetsarai.com</a>

Warning: mailto: links are simple and elegant. However, it is possible for "spiders", programs that automatically scan the web, to recognize this kind of link. If you use this sort of link, it's very likely that the relevant email address will end up on spammers' address lists.

Summary

In this article, I've discussed lists, tables, and some variants on using URLs and hyperlinks.

So, is this helpful? Or am I giving you more information than you'll ever need to know? Should I delve deeper? Some of the topics that I've considered discussing include:

Do you want to know more? Do you want me to consider other topics? Please let me know. I value your feedback.
(I use an image rather than a mailto here to discourage email harvesting by spiders!)



Back to 'For Authors' page