Basic HTML | Cascading Style Sheets

  More advanced features

MG Stough, 7 February 2003.

If you are reading this HTML Document, then it is safe to assume that you have acqauired the basic concepts of HTML Web Document Authoring. This document presents an advanced tutorial in Web Authoring.

OBJECTIVES

• Learn how to force line breaks
• Learn how to introduce non-breaking spaces
• Utilize entities to create special characters
• Place links into the middle of pages
• Learn how to use preformatted text
• Cause test to flow around images
• Utilize special coding to define clickable regions within images
• Make and Fill tables with information
• Use special HTML Tools such as roll-overs

How to force line breaks

Line breaks are useful for formatting text into easily readable blocks. Therefore, it is useful to learn how to cause a line of text to break off. To utilize the Line Break Protocol, it is necessary to issue the br element. So then, to include Contact Information within the text of a Web Page, utilize the following:

<p>MG Stough<br>
300 Jose Quervo Street<br>
Apartment Number 18<br>
Escobares, Texas  78583</p>

The br element does not require an end-tag. Normally, elements that do not require end-tags are referred to as self contained elements or empty tags.

Non-Breaking Spaces

Most web browsers automatically wrap text to fit within the margins of their display windows. Line Breaks are often used in locations where space characters appear in the document body. Sometimes it is useful to prevent the browser from wrapping text between two particular words. This is known as a Non-Breaking Space Character. To keep two words from being separated by automatic line wrap, issue a Nonbreaking Space Character. Use   in place of the space character, and the text will be kept together. Consider the following example:

Hard Liquors, such as tequila   and wine coolers,
are popular gateway drugs for date-rape.  By using
such drugs, the victim's ability to make rational
decisions is severely limited. This results in
opportunity for criminal victimization.

It is generally considered bad form to repeatedly use non-breaking spaces to indent text. It is best to use establish a margin as defined in the Cascading Style Sheet Rules.

Use Entities to Create Special Characters

Most Web Documents are copyrighted material. Some of them contain trademarks. To produce the Copyright Mark or the Trademark Symbol, it is necessary to use special characters. To do this, use the following:

Sevefral entities have been defined under the HTML 4.0+ Standard of HTML Web Authoring Style Rules. The following table provides many of these entities.

Sometimes, there is a need to use the accented characters and miscellaneous symbols in the Latin-1 character set when authoring a Web Document. The following table provides a fairly complete listing of the most popular accented characters and symbols found in the Latin-1 Entities.

REMEMBER !! Always test your Web Document. Verify that the document displays correctly in the various available Web Browsers. This almost alway guarantees success for your Web Authoring Project.

Place Links Into The Middle Of A Web page

Many Web Documents are huge. It is preferable to add a Table Of Contents [TOC] at the beginning of a large Web Document. A TOC is a good idea; and a HOT-LINKED TOC is a better idea. In a Hot-Linked TOC, each item in the Contents List is anchored to a particular part of the document's body of text.

I know, I know. You want to know how to make a Hot-Linked TOC. It is actually quite easy.

Let us propose that each part of the Body Of Text is introduced by a Heading of some kind. Each Heading, then, can be converted into a Hot-Linked TOC Entry. For example, consider the following Heading:

<h2>Date Rape Hot Spotss</h2>

To convert this Heading into a a Hypertext Link Target, enclose its contents with <a name=identifier> .... </a>

   <h2><a name="DR-Hotspots">Date Rape Hot Spots</a></h2>

The name attribute specifies the variable name that is used to identify the Link Target within the Body Of Text. In this case, the name is: "DR-Hotspots". The table of contents can now include a hypertext link using this name. It would look like this:

<ul>
  ...
  <li><a href="#DR-Hotspots">Date Rape Hot Spots</a></li>
  ...
</ul>

The # character identifies the target name. To access a Link Target that is in a different document, then it is necessary to place the web address of that document before the # character. So then, to access a TOC Target Link that resides in the document "http://www.shield.org/", you construct your Hot Link as:

<a href="http://www.shield.org/#DR-Hotspots">Date Rape Hot Spots</a>

Preformatted Text

An advantage of Web Documents is the fact that text is automatically wrapped into lines fitting within the current window size. Sometimes, however, one wants to disable this default text-wrap behavior. For example if one wants to provide samples of program code or other text-position sensitive material, one needs to stop the text-wrap. This is done by way of the pre element. Consider this example:

<pre>
    void Node::keep()
    {
        if (prev)
            prev->next = prev;
        else if (child)
            child->SetContent(null);

        if (next)
            next->prev = next;

        child = null;
    }
</pre>

Which displays within the browser window as:

    void Node::keep()
    {
        if (prev)
            prev->next = prev;
        else if (child)
            child->SetContent(null);

        if (next)
            next->prev = next;

        child = null;
    }

The text and background colors that highlight the previous sample code display are set by way of a style sheet. Notice how every line break and all of the spaces are rendered exactly as they appear in the HTML Text that was entered in the block above the sample code display. The exception to this rule is that a newline is placed immediately after the start tag <pre> and immediately before the end tag </pre>. These lines are are discarded. Thus, the following two examples will be displayed identically:

<pre>this is preformatted text</pre>

<pre>
this is preformatted text
</pre>

Preformatted text is generally displayed by a browser in a monospaced font. Monospaced Font causes each character to be displayed with the same width. This is important to remember. When you define a style rule for the pre element, many browsers forget to use the monospace font. This causes the necessity of using the font-family property. If one wants to display all pre elements in green, then a style rule should be defined as:

<style type="text/css">
  pre { color: green; background: white; font-family: monospace; }
</style>

REMEMBER !! When setting the foreground color for text, BE ADVISED: Also Set The Background Color. This prevents accidents that cause the background color to become hard or impossible to distinguish from the foreground. Rather than setting the background color on the pre element, it is often more convenient to set the background color inn the body element. This is done like so:

<style type="text/css">
  body { color: black; background: white; }
  pre { color: green; font-family: monospace; }
</style>

Flowing text around images

With HTML, you can choose whether any given image is treated as part of the current text line or is floated to the left or right margins. You control this via the align attribute. If the align attribute is set to left the image floats to the left margin. If it is set to right the image floats to the right margin. For instance:

<p><img src="cjasymbol5.jpg" alt="CJA LOGO"
width="32" height="21" align="left"> This text is
flowing around the right side of the graphic.</p>

will display as:

This text is flowing around the right side of the graphic.

The following uses align="right"

<p><img src="cjasymbol15.jpg" alt="CJA LOGO"
width="32" height="21" align="right"> This text flows
around the left side of the graphic.</p>

which renders as:

This text flows around the left side of the graphic.

To float an image in such a way as to force the text to wrap around and below it, use the <br clear=all> element. Consider the following example:

<p><img src="cjasymbol5.jpg" alt="CJA LOGO"
width="35" height="40" align="left"> This text flows around
the right side  <br> of the graphic.<br clear="all">
This text starts a new line below the floated image.</p>

This example is rendered by the browser as:

This text flows around the right side
of the graphic.
This text starts a new line below the floated image.

Creating Image Maps To Make Clickable Image Regions

The following illustration is known as an Image Map. The graphic image has been specially formatted to act as the graphic representation of a group of Web pages. When it loads into the Web Browser Window, the user can then click on the circles to go to the corresponding pages that they represent.

The Hypertext Markup Language which causes this Image Map to function properly is:

<p align="center">
   <img src="imagemap01.gif" width="384" height="245"
      alt="Site Map" usemap="#sitemap" border="0">
   <map name="sitemap">
      <area shape="circle" coords="186,44,45"
         href="simplehtmltutorial.html" alt="Getting Started">
      <area shape="circle" coords="42,171,45"
         href="Style.html" alt="Style Sheet Design And Implementation">
      <area shape="circle" coords="186,171,45"
         alt="Tips And Tricks">
      <area shape="circle" coords="318,173,45"
         href="AdvancedHTML.html" alt="Advanced WEB Authoring Techniques">
   </map>
</p>

The src switch is used in the img element to specify image "imagemap01.gif". The usemap switch is used to reference a map element via a Web address. Thus, the # character is used to indicate WEB URL Content. The border switch is set to "0" to suppress the blue border that would normally be displayed around the graphic image.

The map element is used to specify which regions in the image act as HyperText Links to new locations. The name switch is used to match the usemap switch to the img element. This switch behaves in much the same way as the name switch in the <a> element. It is necessary for the map element to be placed in the same file as the img element.

The area element is used to define a region within an image. This region is then bound to a particular WEB Address. The shape switch is used to specify the dimensional area referenced by the area element. The shape switch can specify a "rect" [rectangle], "circle" or "poly" [polygon] within which to bind WEB Addresses. The coords switch specifies the X,Y coordinates for the region being bound within the shape of the Image Map. Syntax for the definition of the X,Y Coordinates within the area shape element switch is:

• rect: left-x, top-y, right-x, bottom-y
• circle: center-x, center-y, radius
• poly: x₁,y₁, x₂,y₂, ... x_n,y_n

The top left pixel is the origin of the image. At the origin, X and Y both equal to zero. From the Image Origin, X increases as the pixel locations move to the right across the image. From the Origin, Y increases as the pixel locations move down across the image. Most image manipulation tools such as paint programs and The GIMP allow the Web Author to find the pixel coordinates of any given point within the image that is to be used as the Image Map. This is done simply by moving the mouse over the image and jotting down the X,Y Positions of the desired areas of the image.

IMPORTANT If two or more regions are defined in such a way as to overlap, the region-defining element that appears earliest in the document takes precedence over all others and will be used to interpret user inputin regard to Image Map Interaction. For a complex shape such as an anular ring, it is preferable to define part of a region and to leave the overlaying inactive by defining that overlayed region with the nohref attribute. Consider the following example, where an overlapping part of an image has been renderred inactive so as to allow two intersecting parts of the image to be used separately for User Input:

      <area shape="circle" coords="142,45,50" nohref>
      <area shape="circle" coords="150,45,100"
         href="simplehtmltutorial.html"
         alt="Basic Web Authoring Techniques">

The first circle creates an inactive region within the larger circle that is created by the second area element. In order to make the inner circle effective, the inactive shape must be defined first. Otherwise it will be hidden by the active shape.

Effective Use Of The alt Switch

The alt switch is used within the area element to specify a text label for each link within the Image Map. Without it, the Image Map cannot be utilized by users whose browsers lack the capacity to display the image. Alternative Text tells the person what they would see if their browser were capable of displaying the Image Map File.

Tables

A relative of the Image Map which contains graphically represented information is the Table. A Table is a very useful item to have in a Web Document. Tables are used to display information and to adjust the layout of a particular Document's Content. Web Authors oten stretch tables to fill the margins, specify a fixed width for text blocks, or allow the browser to automatically size text chuncks to match the Browser Window's size and shape for ease of reading.

Tables consist of one or more rows and one or more collumns. Each intersecting row/collumn location is referred to as a table cell. Below is an example of a simple table:

The markup for this is:

<table border="1">
<tr><th>Year</th><th>Enrollment</th></tr>
<tr><td>1999</td><td>12</td></tr>
<tr><td>2000</td><td>23</td></tr>
<tr><td>2001</td><td>42</td></tr>
<tr><td>2002</td><td>85</td></tr>
<tr><td>2003</td><td>127</td></tr>
</table>

The table element is the container for the tabular information which is to be displayed. The border switch specifies the border width of the Table in pixels. The tr element is the container for each table row. The th element is the container for the table heading. The td element is the container for tabular cell data.

Cell Padding

In some cases, it is desirable to increase the amount of padding for all cells using the cellpadding switch in the table element. Such increases are used to improve the readability of data presented in Tabular Form. To set the padding to 12 pixels:

<table border="1" cellpadding="12">

This line of HTML would produce the following effect upon a table:

Cell Spacing

Somewhat different in nature, but highly useful for formatting Tabular Information, the Web Author might want to use the cellspacing switch to set the space between the cells. Setting the cell spacing to 15 is accomplished with the following:

<table border="1" cellpadding="12" cellspacing="15">

This line of HTML Code is put into action in the following table:

Table Width

A Web Author has a lot of control over the way that his/her Tabular Data appears. One can set the width of the table using the width switch. The value for this switch is either the desired width in pixels or a percentage value that represents the percentage of the space available between the left and right margins. So then, if a Web Author wants to set the width of a table to 75% of the area between the left and right margins, he/she would insert this line of HTML Code at the beginning of the Table Constructor:

<table border="1" cellpadding="10" width="75%">

This would result in a table that looks like this:

Alligning Text Within Cells

By default, most Web Browsers center text within Heading Cells (th), and left justify Data Cells (td). However, the Web Author can alter the alignment of text within cells by utilizing the align switch. The align switch is either added to each cell or to the row (tr element). Its possible values are "left", "center", or "right":

<table border="1" cellpadding="10" width="60%">
<tr align="center"><th>Year</th><th>Sales</th></tr>
<tr align="center"><td>2000</td><td>$8M</td></tr>
<tr align="center"><td>2001</td><td>$2M</td></tr>
<tr align="center"><td>2002</td><td>$6M</td></tr>
</table>

The HTML Block presented above would result in a table that looks like this in a Web Browser:

The valign switch is used to control the vertical alignment of cell content. Its possible values are "top", "middle" or "bottom". This switch can be added to each cell or row, according to the wishes of the Web Author. By default, heading cells (th) aligh their content in the middle of the cells while data cells align their content at the top of each cell. The valign switch allows these values to be changed at will by the Web Author.

Empty Cells

Web Browsers are somewhat unstable when it comes to empty cells in tables. This quirk is an internal construction issue within the Browsers themselves. Compare the following:

with

The former condition occurs when a data cell is empty:

<td></td>

To prevent this condition from occurring, the Web Author should include a non-breaking space in the Empty Data Cell:

<td>&nbsp;</td>

Span More Than One Row Or Column With A Cell

It is time to extend your ability to control Table Formatting. To do this, we will expand upon the above example to break out Profits by north and south Service Regions:

This table illustrates the ability of the Web Author to present complex data in an easy to read and compare Tabular Format. The "Year" heading spans two rows. The "Profit" heading spans three columns. This multi-collumn spanning is achieved by setting the rowspan and colspan switches respectively. The HTML for the above table looks like this:

<table border="1" cellpadding="10" width="75%">
<tr align="center"><th rowspan="2">Year</th><th colspan="3">Profit</th></tr>
<tr align="center"><th>North</th><th>South</th><th>Total</th></tr>
<tr align="center"><td>2002</td><td>$12M</td><td>$18M</td><td>$30M</td></tr>
<tr align="center"><td>2003</td><td>$14M</td><td>$20M</td><td>$34M</td></tr>
</table>

This HTML can be simplified. Most browsers don't need the end tags for table cells and rows:

<table border="1" cellpadding="10" width="75%">
<tr align="center"><th rowspan="2">Year<th colspan="3">Profit
<tr align="center"><th>North<th>South<th>Total
<tr align="center"><td>2002<td>$12M<td>$18M<td>$30M
<tr align="center"><td>2003<td>$14M<td>$20M<td>$34M
</table>

Notice that since the heading "Year" spans two rows, the first th element on the second row appears on the second rather than the first column. This makes for a much more readable and useable table of data.

Borderless Tables

Borderless Tables are often used to lay out pages in the fashion of a grid. All that is required to create this gridded layout is the addition of the border="0" and cellspacing="0" switches to the table element:

This table was produced by entering the following HTML Code:

<table border="0" cellspacing="0" cellpadding="12">
<tr><th>Year</th><th>Production</th></tr>
<tr><td>2000</td><td>18 M</td></tr>
<tr><td>2001</td><td>125 M</td></tr>
<tr><td>2002</td><td>36 M</td></tr>
</table>

When the cellspacing switch is left out, it produces a tiny gap between cells. This can sometimes be useful. Consider the following output:

Using Crayons

By using Style Sheets, the Web Author can add color to his/her tables. The effect of using crayons in cells is that data becomes more accessible and more easily interpreted. The page that you are reading uses a style sheet to set the background colors for the tables that are presented here. That is why their content are displayed with a different color for heading and data cells. The style rules that are used for this page are presented below:

table {
  margin-left: -4%
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }

The last two lines presented above are used to set the background color for th and td cells. In this case, the switches use values that are coded as red/green/blue color value mixes. RGB Color Mix Values span a range between 0 [no saturation] to 255 [full saturation].

Another way to set the background color is to use the bgcolor attribute. This works with nearly all browsers, and doesn't rely on style sheet support. The first step is to determine the hexadecimal values for the red, green and blue components of the color you wish to use. A Hexadecimal Color Convertor is provided in the Style Sheet Tutorial Web Document. An example of the HEX Code for the table cell coloring scheme presented above is provided here:

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Year</th>
    <th bgcolor="#CCCC99">Employees</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">18</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">250</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">369</td>
  </tr>
</table>

Making your tables accessible

Inability to see the table can be quite frustrating. It reduces one's ability to understand what the table is for and what kind of information goes into the table. To alleviate this confusion, the Web Author should add information and comments that describe the purpose and structure of the table. The best method of doing this is through the use of the caption element. The caption element provides a mechanism for attaching comments to a section of a Web Page. The Web Author should position a caption above or below the table. The caption element must be inserted before the tr element for the first row.

The table that is presented above was generated using the following HTML Code:

<table border="1" cellpadding="10" width="80%">
<caption>Projected Employment by Year</caption>
<tr align="center">
  <th>Year</th><th>Sales</th>
</tr>
<tr align="center"><td>2000</td><td>180M</td></tr>
<tr align="center"><td>2001</td><td>2,537</td></tr>
</table>

The same table can be improved with align="bottom" added to the caption element:

For Browsers that cannot display tables, a summary of the table's content should be provided. This is done by setting the table element's summary switch For example, to set the summary switch for the above table to read "the first column gives the year and the second, the projected employment for that year", one would enter the following HTML Code:

<table summary="the first column gives the year
and the second, the projected employment for that year">

Specifying Relationships Between Header and Data Cells

When a table is rendered through translation to audio or to Braille, it is very helpful to the impaired individual if the Web Author identifies which headers describe each cell. For instance, an aural browser allows the user to move up and down or left and right from cell to cell, with the appropriate headers spoken before each cell. But this only works if the appropriate header-to-cell relationship is established by the Web Author.

To support this accessibility option, the Web Author needs to annotate the header and/or data cells with one another. The simplest approach to accomplish this task is to set the scope switch in the header cells. The scope switch may be used with the following values:

• row: The current cell provides header information for the rest of the row that contains it.
• col: The current cell provides header information for the rest of the column that contains it.

Applying this to the example table results in the following HTML Code:

<table border="1" cellpadding="10" width="80%">
<caption>Projected Employment by Year</caption>
<tr align="center">
  <th scope="col">Year</th>
  <th scope="col">Employment</th>
</tr>
<tr align="center"><td>2000</td><td>180</td></tr>
<tr align="center"><td>2001</td><td>2,537</td></tr>
</table>

For more complex tables, use the headers switch on individual data cells to provide a space separated list of identifiers for header cells. Each header cell then must have an id attribute with a matching identifier.

IMPORTANT The Web Author should consider using the abbr attribute to specify an abbreviation for long headers. This makes it tolerable to listen to lists of headers for each cell. Thus, it is preferable to do the following:

<th abbr="Employment">Employment Statistics Presented By Year And Sales Zone</th>

Making Web Pages Roll-Over and Do Tricks

JavaScript is very helpful in creating a fun and educational Web Page Experience. Just don't over-use it. In this section of the tutorial, the student will learn how to create roll-overs. A Roll-Over causes the appearence of a link to change as the user moves the mouse over its position. Another trick that is discussed in this section is the cycling banner. Cycling Banner Ads help to direct visitors to other sites. Of course there are many other tricks to the Web Authoring Trade, but this tutorial will only focus on these two items. Mainly, this is due to time constraints and to size-of-tutorial constraints.

Roll-Overs

A Roll-Over usually consists of an image that serves as a HyperText Link. As the mouse pointer moves into and remains within the boundaries of the image, a new image is loaded into the browser at that location, thus changing the appearence of the location and attracting the User's attention to the HLink. Glow Effect, Drop Shadow, and/or Background Color Changes are among the commonly available Roll-Over Effects used by Web Authors. Consider the following example:

<script type="text/javascript">
if (document.images)
{
    image1 = new Image;
    image2 = new Image;
    image1.src = "rol1.gif";
    image2.src = "rol2.gif";
}

function chgImg(name, image)
{
    if (document.images)
    {
        document[name].src = eval(image+".src");
    }
}
</script>

...

Insert this code into the location where you want the Roll Over to occur within your Web Document.

<A HREF="http://www.oocities.org/gallo_roma"
  onmouseover="SwapOut()"
  onmouseout="SwapBack()">
<IMG SRC="ro1.jpg"
  NAME="Rupert"
  WIDTH=175
  HEIGHT=153
  BORDER=0>

This HTML Javascript Code produces the following Roll-Over Image ...

Go To My CrimeFighter Resource Site.

When you move your mouse over the image and then back off of the image, it will change to a new image. Whenever the mouse rolls over he image, it changes again. Pretty cool eh? Pretty useful too, don't you think?

I created these images using a FreeWare Graphic Image Manipulation Program. By adding an old photo effect and a coffee stain effect, User attention and curiosity is piqued. There are a plethora of advice files and royalty free clipart on the Web. They can easily be located via standard InterNet Search Engines.

Banner Ads

Many Web Documents offer Hot Links to several sponsors. I disagree with this concept, as it is both annoying and opens too many gateways for unintentional download of virii. Also, many slower machines [there are litterally millions still out there being used] and many slower InterNet Connectinos [there are too many of those] take too long to load the banner advertizements. This slow load time for banners also slows the load of the Web Document; and people will not continue to read your documents if they take too long to load. Therefore, I do not recommend using Banner Ads. Use a LINK to a separate page that contains a list of Advertizement Links instead.

What about browsers that don't support scripting?

The content of a noscript element is only shown if the browser doesn't support scripting. It should be used when you want to give people access to information that would otherwise be inaccessible to people with browsers that don't support scripting. Let's assume that you want to make the links for your sponsors available as text:

<noscript>
Our sponsors: <a href="http://www.lcs.mit.edu/">MIT</a>,
<a href="http://www.inria.fr/">INRIA</a>, and
<a href="http://www.keio.ac.jp/">Keio University</a>.
</noscript>

There are many free sources of information about scripting, which can be easily found via most search engines.

Getting Further Information

W3C's Recommendation for HTML 4.0 is the authorative specification for HTML. However, it is a technical specification. For a less technical source of information you may want to purchase one of the many books on HTML that can be found in local book stores or on the InterNet. For information about the W3C's reformulation of HTML as an application of XML, check out the XHTML 1.0 web page, which is now a W3C Recommendation.

CONGRATULATIONS

You now have the basic information necessary for creating a more Advanced Web Document. This concludes the Advanced HTML Web Authoring Tutorial. See, I told you it wasn't all that hard to learn this stuff!

Want More?

Are you ready to learn more? If so, then explore the Style Sheet Tutorial. You are well on the way to becoming a great Web Author! Keep practicing the fine art of Web Document Creation. Have a lot of fun! Learn something new every day!

Now, get busy creating your own Web Document!

MG Stough
stoughmg@juno.com

© 2003 All Rights Reserved.