Finishing Touches

Text-Based Navigation Bar

As mentioned in the end of the last chapter of this tutorial, it is a good idea to include navigation elements that do not rely on images only. This will allow those who have images off, or a blind person using an accessibility device to be able to navigate through your website.

In most cases, a navigation bar (navbar) is included towards the top of the page. For the solar system page we are building, we just need a series of links to the pages detailing the sun, the nine planets and the other bodies. The URLs to specify will be the same as those used in the image map. The a tag is an inline element, so we will put these links inside a paragraph.

<p>
  <a href="sun.html">The Sun</a>
  <a href="mercury.html">Mercury</a>
  <a href="venus.html">Venus</a>
  <a href="earth.html">Earth</a>
  <a href="mars.html">Mars</a>
  <a href="jupiter.html">Jupiter</a>
  <a href="saturn.html">Saturn</a>
  <a href="uranus.html">Uranus</a>
  <a href="neptune.html">Neptune</a>
  <a href="pluto.html">Pluto</a>
  <a href="other.html">Other Bodies</a>
</p>

The Sun Mercury Venus Earth Mars Jupiter Saturn Uranus Neptune Pluto Other Bodies

It looks ok, but a visual separator other than the space between each link should be included. This assists those using accesibility devices, plus will visually enhance the breaks between each link. A common separator is the vertical bar (|). Another is to enclose each link within square brackets ([]). I like the vertical bar, so will add that between the a elements, with spaces around the vertical bar. Remember that a line break will act as a space as well.

<p>
  <a href="sun.html">The Sun</a> |
  <a href="mercury.html">Mercury</a> |
  <a href="venus.html">Venus</a> |
  <a href="earth.html">Earth</a> |
  <a href="mars.html">Mars</a> |
  <a href="jupiter.html">Jupiter</a> |
  <a href="saturn.html">Saturn</a> |
  <a href="uranus.html">Uranus</a> |
  <a href="neptune.html">Neptune</a> |
  <a href="pluto.html">Pluto</a> |
  <a href="other.html">Other Bodies</a>
</p>

Since our page is fairly long, it might be a good idea to copy this navigation paragraph to the bottom of the page. That way a user reading the content and getting to the end can quickly jump to one of the other pages without having to scroll back up to the top and click the links either on the image map or the top navigation bar.

Character Entities

Even though the solar system page we are building does not use any special symbols, many documents that you may want to create may contain special symbols, such as the Greek letters in a mathematical equation. In working with a word processor, most of you have had to use an insert symbol command or a special keystroke sequence to enter such things as © or ¢. To enter such symbols to be displayed on the web page, you can use character entities.

XHTML has entities defined to put certain symbols on a page. The Web Design Group has a list of character entities available on their site. A thing to remember about entities, is that although the most common entities such as the cent sign (¢) and the copyright symbol (©) are recognized by most browsers, some of the more esoteric entities are not.

Symbols can be entered in XHTML by using the character entity name, immediately preceded by an ampersand (&) and followed immediately by a semicolon (;). This format is also called an escape sequence.

For example, the character entity name for the copyright symbol is copy. To include it on a page, I would enter ©.

There is an alternative method to using the character entity names to enter a symbol or special character on an XHTML page. If you specify the character set your page will be using, you can enter in the numerical representation in the character set in lieu of the character entity name. For example, looking at the list of character entities provided by the Web Design Group, the cent sign has a character entity name of cent and a decimal numerical value in the Latin-1 character set of 162.

To use the numerical value, you must use the ampersand and semicolon as with character entities, but also put the pound sign # before the numerical value like this: ¢.

So to enter the cent sign, I can use ¢ or ¢ as long as I am using the Latin-1 character set on my pages, or a character set such as Unicode that also includes the Latin-1 character set.

The cent sign entered using the character Entity Name (¢): ¢

The cent sign entered using the escape sequence in Unicode (¢): ¢

Because the ampersand is used as the start of a character entity or escape sequence, you must use one of these methods to display an ampersand on an XHTML page. If not, you will get a validation error. Also, for the same reason, the less than (<) and greater than (>) signs used for tags should be entered for display as entities or escape sequences. So for all the less than and greater than symbols that I've used in this tutorial, I've used the character entities < and >. For ampersands to display, I used &.

Character Sets

Character sets are a way of specifying the internal representation of a character for a computer to read and recognize characters. When working with a word processor, many people don't think of which character set they are using, as long as they can enter the symbols they wish into their document. For an XHTML page, however, the character set used by the user's browser can be a character set that is different from the one you employed in writing special characters.

In using the named character entities, this should cause no problem, as long as the browser recognizes the character entity. However, if you used an escape sequence for the special character or symbol, unless the user's character set has the same numerical representation for the same symbol, their page will probably come out having odd symbols or little squares instead of what you intended. To be safe, it is best that you specify in an XHTML file which character set was used for encoding.

Something to keep in mind is even if the character encoding was properly recognized, if the user's font does not have a representation for the symbol, it cannot be displayed. So if using numerous symbols, you may wish to inform visitors to your page that they may need to use a different font. In such cases, it is useful to provide a link where the user can download a font that includes the symbols used on the page.

Which Character Set?

Latin-1 (ISO-8859-1), also known as Western, is the default encoding option used by some browsers, others default to the Unicode scheme UTF-8, others default to none. Most browsers also include an option for a user to change the default encoding option. The W3C has specified the standard should be Unicode. The Latin-1 character set is sufficient for English and most Western European languages, but it also limits you to working with characters only in that character set -- if you wish to use less common symbols or characters from another language within the same document, you should use the the UTF-8 character set for Unicode.

There are two different ways an XHTML author can specify the character set used by a page: (a) the XML processor command xml or (b) the metadata element meta. Both of these methods will be discussed in the next section.

Housekeeping

The solar system page as written so far will validate as XHTML, but there are a couple of other things we should add to XHTML file to make sure the XHTML document will be properly processed by a browser.

The XML Line

XHTML is a set of markup tags defined under the rules of XML. To identify our XHTML document as also being an XML document, we should add the following as the very first line of the XHTML source, preceding the !DOCTYPE declaration:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

As mentioned earlier, you can also specify the character set for the XHTML page on this line. This can be done by including the encoding attribute. The utf-8 (for Unicode) and the iso-8859-1 (for Latin-1) are commonly used. For my version of the solar system page, I will specify the utf-8 character set.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XML-savvy applications will now recognize the XHTML document as an XML file. The !DOCTYPE declaration below the xml line will identify it as a document using the XHTML tag set. Note, however, that the inclusion of this line causes Microsoft's Internet Explorer to go into what is called "quirks" mode when rendering CSS styles. This will be addressed in the CSS tutorial.

Metadata

The meta tag is a generic tag that is often used by browsers and other programs that read your XHTML source file (search robots, for example) to gather information about your page. Most commonly, metadata is used to specify the content type (MIME type) of the document and the character encoding. The meta tag must be contained within the head element.

The metadata attributes are name, content , http-equiv, scheme and internationalization attributes (such as xml:lang). The name attribute assigns a name to the metadata field, while the content attribute contains the value of the field.

For example, if you have multiple persons working on a website, it is a good idea to include a meta tag to give the author's name of a particular page. The metadata field name would be author with the content value giving the author's name.

<meta name="author" content="Keith A. Brown" />

The metadata tag that we should include in the XHTML source for the solar system page is the one that specifies content type and character set encoding.

Requests over the Internet are most often done using the HTTP protocol. This is a means for the client (the person on a browser requesting to view a page) and the server (who handles the request for a document) negotiate. The information used to negotiate between the client and server is contained in the HTTP header.

Most web authors don't have access to set fields in HTTP header directly. However, by using the http-equiv attribute for the meta tag, an author can set some HTTP header values. In our case, we are interested in the Content-Type field of the HTTP header.

The content type, sometime referred to as the MIME type, tells a program such as a browser the type of file and the format of the data within the file. Many programs determine the content type by the file name extension, such as txt for plain text documents and html and htm for an HTML document. Most browsers, when receiving a document with an html or htm filename extension will recognize and display the file as HTML. However, to avoid ambiguity, the content type for the XHTML document should be specified.

There are ways to do this programatically, but as mentioned, the http-equiv attribute of the meta tag can be used in XHTML.

There is a content type for XHTML, which is application/xhtml+xml. However, Internet Explorer 6 doesn't recognize it. If a page is served with an application/xhtml+xml content type, Internet Explorer wouldn't be able to display the page. Since Internet Explorer is the browser used by the majority, if you want these viewers to be able to see your pages, you will need to use the content type for HTML. The content type for an HTML document is text/html.

The meta tag to set the Content-Type field to text/html is shown below.

<meta http-equiv="Content-Type" content="text/html" />

The character set used in the XHTML document can also be specified here, by adding charset=character set to the content attribute value:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I usually include the character set specification in both the xml processor line and the meta tag. This is mainly to ensure that browsers that cannot understand the xml line will still be able to get the character set value from the HTTP header.

Other Metadata Examples

Some search engines use metadata to build their index of keywords to apply to your site.

<meta name="keywords" xml:lang="en"
 content="sun, planets, comets, mercury, venus,
 mars, jupiter, saturn, uranus, neptune, pluto, solar system" />

It is also quite common for HTML/XHTML editors to put in an metadata tag giving the editor name:

<meta name="Editor" content="EditPlus 2.0" />

With the addition of the text navigation bars, the xml processor line and the meta tag to set the HTTP header field Content-Type, the coding of the solar system page is complete.

If you view the page in your browser, it is not fancy in appearance, but the contents of the text file have been marked up for display on the Web, with an image and navigation links added.

Next will be an introduction of some tags that are commonly used in marking up text, but were not used in the solar system page.

Next Chapter - Additional Tags