Web Accessibility & Design

• Course Index
• Syllabus
• Assignments

Login

User:
Password:
Remember me
Forget password?
Create new account

Reset password

Enter your email address:

XHTML Tutorial, Part 2

• XHTML Tutorial, Part 1 |
• Setting up Dreamweaver

Introduction

This topic is a continuation of the basics of XHTML. You'll learn a few new elements and attributes, plus apply what you've already learned to a few new situations. Throughout this lesson I'll be referring to XHTML files, but in some instances it makes more sense to use the more generic term "HTML." Don't be confused by this. After all, XHTML is still HTML. It's just that XHTML is a more recent version of HTML which happens to be more "eXtensible," which is where the "X" came from at the beginning of XHTML. The word "extensible" is the short way of saying that it is more modern, versatile, adaptable, expandable, "forward-compatible," and forward-thinking. Plus it's just so trendy to put the letter "X" in everything that's supposed to be cool (the "X" Games, the "X-Box", and so on). So even when I use the more generic term "HTML," I'm still referring to XHTML, since that's what we're learning here.

More about Links

In the last topic, we learned how to create links, so you already know the basics. There are a few more things worth learning though, and we'll cover those now.

Links to non-HTML files

Is it possible to link to documents that aren't standard XHTML web files? Yes, it is. You can create links to Word documents, PDF documents, PowerPoint slides, images, and any other kind of file that you can think of. All you have to do is include the name of the file, plus the extension at the end, like this:

<a href="word_document.doc">Word document</a>
<a href="powerpoint_slides.ppt">PowerPoint Slides</a>
<a href="pdf_document.pdf">PDF document</a>

It's easy, and it works, but you do have to keep a couple of things in mind:

1. Not everyone will have the correct programs to open all of these types of files. Many people use Microsoft Office, but some use other programs such as Corel WordPerfect or OpenOffice or other programs. Many users have the Adobe Reader installed, but not everyone does, so they may not be able to access PDF files.
2. Many of the non-HTML formats are less accessible to people with disabilities, though it is possible to make some of them accessible. We'll talk about this in more detail in future topics.

File Names

What should you name your files? Does it matter? In some ways, it doesn't matter what your file names are. You can save an HTML document with any kind of strange name if you like, such as 32kjnql.htm. No one will know what that means, but most people don't look at the file name. They just care about the content of the document. Still, you will be doing yourself a favor if you choose names that are easy to remember. For example, if you're creating a document about the products of a company, it might make sense to give it a name like products.htm. This will help you find the file later on.

What about XHTML files? Should you save them with extensions like .xhtm or .xhtml? The answer is that you can, but you'd have to set up your web server to accept this file extension. Most web servers are not configured this way by default. Most people just use the standard .htm or .html extension.

Spaces

Can you put spaces in file names? Yes, but you definitely should not. Some web browsers have a hard time with file names that have spaces. You can always use an underscore or a dash when writing long file names. You can even run all of the words together.

File Extensions

File extensions are added on to the end of the file name. Common file extensions (for various types of documents) are .htm, .html, .doc, .ppt, .pdf, and others. The file extension helps the web server know what kind of file it is. If the file extension is .htm or .html, the web server knows that it is an HTML (or XHTML) document. If the file extension is .doc, the web server knows it is a Word document.

When saving files as HTML (or XHTML), you have to give them either the .htm or .html extension at the end, such as index.htm or index.html. Either one will work. It really doesn't matter which extension you use, but it is a good idea to be consistent. If you use .htm on one file, use .htm on all of the files.

Note: If you are developing dynamic web pages using technologies such as PHP, JSP, ASP, Cold Fusion, etc., your file extension must match the technology in most cases. For example, you would save a file as index.php (or index.jsp, or index.asp, or index.cfm) instead of index.htm. You don't have to worry about dynamic web pages in this class, at least not yet.

Do you have to save all of your documents with file extensions? Yes.

When creating links, you should use the include the extension as a part of the full name of the file that you're linking to (unless the web server has been set to accept links without file extensions—but for our purposes, I'll just say that it's a good habit to always include the file extension).

Note: Most modern operating systems (like Mac OSX and Windows XP) hide the file extension from you unless you have set the operating system preferences to make the file extension visible. This is not a problem as long as you know what the file extension is. For HTML/XHTML files it is normally either .htm or .html. The file extension always shows up in Dreamweaver, no matter what your operating system preferences are.

Links to Image Sources

I should point out that all of the rules about referencing link destinations also apply to referencing image source files. You can have images in the same folder as your document, in a child folder, in a parent folder, or in some other location on the web site.

Linking to the main page in a folder

When linking to the main file in a folder, you can drop the file name entirely, as explained in the previous topic (see the discussion about folders and default pages). As a reminder, most web servers use either index.htm, index.html, default.htm, or default.html as their default pages in folders. When linking to these files, you can just name the folder. The web server is programmed to look for the default file. When doing this, it's a good habit to put a slash at the end of the link, so that the browser (and web server) know that you are referring to a folder and not to a file. The example links below include various kinds of both relative and absolute links. The important point to notice is that each of these references a folder, rather than a file.

Links to Email Addresses

The first thing you should know about links to email addresses is that when you post your email on the web, you are almost guaranteed to get spam. The people who send spam are very resourceful, and they will eventually find your email and send you advertisements that you don't want. But if you're aware of the risk, and don't mind the fact that you'll be getting spam, here is the method for making a link to an email address:

<a href="mailto:myemail@myemail.com">My email</a>

You just precede the email address with the word "mailto:" (no space between "mail" and "to", and no space between the colon and the email address).

Links to Other Spots (Anchors) on the Same Page

When you want to link to another spot on the same page, you have to create an "anchor" at the spot where you want the link to take the user. The page that you're reading right now has links at the very top (in the "contents" section) that take the user to spots further down in the document. The links are normal links, but with an added element: a "pound sign" (sometimes called a "hash"): #.

<a href="#some_spot_on_the_page">Some spot on the page</a>

Notice that the link starts with the pound sign (#) and does not include the file name, because the browser already knows what file you're on. This link tells the browser to go to the "anchor" (link destination) called "some_spot_on_the_page". But before this link will work, we have to create the anchor. If we don't create the anchor, the browser won't know where to send the user when the user clicks on the link.

You create an anchor (the link destination, meaning the location that the browser jumps to) like this:

<a name="some_spot_on_the_page" id="some_spot_on_the_page"></a>

Notice that the the "name" and the "id" are the same. We have to do this in order to make the document backward compatible with older browsers. When writing XHTML (as opposed to plain HTML, we don't actually need to include the "name" attribute at all. We could leave it off entirely, except for the fact that older browsers won't know how to interpret the anchor if we leave the name off. In fact, with XHTML, we don't even need the anchor tag at all. We just need an id to assign some element—any element—on the page. We could assign the id to a paragraph (<p id="some_spot_on_the_page">) or to an unordered list (<ul id="some_spot_on_the_page">) or to a table (<table id="some_spot_on_the_page">) or to any other element.

The problem is that this technique doesn't work with older browsers. To accommodate older browsers, we have to use the anchor tag (<a>) and give it both a name and an id, because the old system used only the name method. Some day we'll be able to stop using this old method, but not for a while, since there are still a lot of people who use older browsers, and even some of the newer browsers don't handle the id method very well.

Also notice that the anchor element is empty. There is nothing between the opening <a> element and the closing </a> element. It is ok to do this because anchors are invisible. Nobody can see them. They exist with the sole purpose of providing a destination for the link to arrive at. Can you place content within the anchor? Yes. In fact, some web professionals recommend that you do this. For the purposes of this class, though, you can leave the anchor empty. This is the most common method of creating anchors.

Some of you may have noticed that anchor elements are the same as link elements. They both are the letter "a". As it turns out, links are anchor elements. They're a special kind of anchor element that links to other anchor elements or to other spots in a web document. In other words, normal links are the anchors that you leave from. The empty anchors with name and id attributes are the anchors that you arrive at. It may be a little confusing to have both links and link destinations called "anchors," but that's the way it is.

At this point you it may be helpful to show you the code in the context of other content. Here's an example:

When the user clicks on the word "conclusion," the user will be taken to the conclusion, which is further down the page.

Site Structure

All of this talk about folders and paths brings up another important topic: site structure. When you create a web site, you create more than one document. Simple sites don't require a lot of structure, but complex sites with lots of files can be very difficult to organize. If you are creating a site with information about the products and services of a company, it might make sense to have the following folders:

• products
• services
• about (about the company)
• contact (how to contact the company)
• specials (promotions, sales, etc.)
• images (this is where you put all of the site's images and graphics)
• styles (this is where you put style sheets—which we'll talk about later)

It's nearly always a good idea to put all of your images in the same folder. It's nearly always a bad idea to put copies of images all over the place throughout your web site. If you're going to use the same image on multiple pages on the web site, you don't want to put that same image in every folder or have a copy of the same image for every page in which it is inserted. You want to have only one copy of the image, in only one place, and then reference that one image from all of the pages that use it. This type of organization is much cleaner and more efficient than having multiple copies of everything everywhere. This will become more apparent as we get further into the process of building a web site.

Abbreviations and Acronyms

Abbreviations and acronyms should be marked up with <abbr> or <acronym> tags, as appropriate. Browsers which support these elements will allow a "tooltip" or a "popup" to appear when you hover your mouse over the acronym or abbreviation, so that users can see the full expansion of the term. This information is also available to the technologies used by people with disabilities.

The acronym and abbreviation tags should appear whenever acronyms or abbreviations are used. It can be a bit of a pain to do this if the page has many acronyms or abbreviations, but it can also be useful to people with disabilities. We'll get into the details of how it helps them in future lesson topic.

What's the difference between an acronym and and an abbreviation? The truth is that there isn't much of a difference. In fact, in future versions of XHTML, they're going to get rid of the <acronym> element entirely, and use only the <abbr> element, because both elements serve essentially the same purpose. Unfortunately, for now we have to stick mainly with the <acronym> element rather than with the <abbr> element because Internet Explorer 6 still doesn't support the <abbr> element. I'm assuming the next version will.

Subscripts and Superscripts

You can add superscripts to text to write things like H₂O and E=mc². Here's how:

Superscripts are often used when creating links to footnotes at the bottom of a page. In printed documents, it is common practice to have a number as the reference to the footnote, like this:

On web pages, it is common practice to make the footnote references clickable, so that you can jump down to the bottom of the page to read the footnote. Some authors use the same conventions that they would use in printed documents, meaning that they use a number. On the web, though, it's usually better to provide a larger target to click on than a single small number. Some people with disabilities (and many people without disabilities) will have a hard time clicking on such a small link.

Definition Lists

You've already learned how to create unordered (bulleted) lists and ordered (numbered) lists. Now we're going to learn how to create definition lists. These are a little bit different from the other kinds of lists, but they're similar. The purpose of a definition list is to create—surprise, surprise—a list of definitions of terms. Here's what a definition list with two terms looks like:

Here's what the code looks like:

<dl>
<dt>Curious</dt>
<dd>Eager to learn more; Unduly inquisitive; prying; arousing interest because
of novelty or strangeness.</dd>
<dt>Cat</dt>
<dd>A small carnivorous mammal (<em>Felis catus or F. domesticus</em>) 
domesticated since early times as a catcher of rats and mice and as a pet 
and existing in several distinctive breeds and varieties.</dd>
</dl>

<dl> means "definition list"

<dt> means "definition term"

<dd> means "definition" (I don't think the other "d" stands for anything)

Invisible Comments

Sometimes web developers want to write notes to themselves in the code. They can write these notes, and keep them invisible from the user, by writing these notes in "comments." Anything included in comment elements will remain hidden, unless the user decides to look at the source code. Here is how you write a comment:

<!-- I don't want anyone to read this 
unless they look at the source code -->

Everything inside the beginning <!-- and the closing --> will remain hidden.

Why would you want to hide content from users? Some developers use comments to help them remember things about the design. They might write "start main content here" or "don't forget to include the alt text in any images inserted here" or anything else that they feel like writing. Comments can be a useful way to check pages for errors too. If part of a page isn't working, you can comment out different parts of it and see how the page renders in the browser. Sometimes this can help you pinpoint errors. It can also be a quick way of removing visible content from a page if you think you may want to keep the content for later. Here's another example:

<p>Here's a paragraph.</p>
<!-- I want to hide the next paragraph
<p>Here's another paragraph, but you can't see it.</p>
end hidden content here -->
<p>Here's a third paragraph</p>

Here's what this looks like in a browser:

The middle paragraph is gone, and the comments around the paragraph are gone because all of that is included within the comment tags.

Additional Resources

Here are a couple of web sites to refer to when learning XHTML:

• W3 Schools — Free XHTML tutorials and other items
• Free Webmaster Help — Free XHTML tutorials and other items
• A List Apart — An excellent online magazine with more advanced tutorials about standards-based web design and accessibility.

---

• XHTML Tutorial, Part 1 |
• Setting up Dreamweaver

• XHTML Tutorial, Part 1 |
• Setting up Dreamweaver

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.