by Paul Bohman

XHTML Full Tutorial

Introduction to XHTML and 'Web Pages'

XHTML and "Web Pages"

So what is a web page? When you type in www dot whatever, what happens? How do you get the information? How did it get there to begin with? The short answer is that a web page is nothing but text. Sometimes that text includes references to images, and sometimes the text has been programmed to do things other than just sit there, but a web page is still just text. This is an over-simplification, but it's still true (or at least it's true enough for our purposes).

The text in web pages has some extra invisible "tags" or "elements" or "markup" (these terms often are used interchangeably by developers) that give text some formatting. For example, if you want to designate a chunk of text as a paragraph, you have to enclose it in paragraph elements, like this:

<p>This is a (very short) paragraph.</p>

You put a <p> at the beginning of the paragraph to say that this is where the paragraph begins, and you put a </p> at the end of the paragraph to say that this is where the paragraph ends. There are similar elements for headings, bulleted lists, images, and other items that you can include in web pages. Here is another example of part of a web page:

<h1>My Day at the beach</h1>
<p>I went to the beach today. It was fun. 
Here are some of the things I saw:</p>
<ul>
<li>Seashells</li>
<li>Seagulls</li>
<li>Seaweed</li>
</ul>

The <ul> element stands for "unordered list," which means that it will create a bulleted list. The <li> elements are "list items" within that bulleted list. Notice that there is an opening element (for example, <h1>, <p>, <ul>, or <li>) and a closing element (for example, </h1> </p>, </ul>, or </li>) surrounding each bit of text. The closing elements always have slashes ( / ).

In a web browser the above example would look something like this:

My Day at the beach

I went to the beach today. It was fun. Here are some of the things I saw:

  • Seashells
  • Seagulls
  • Seaweed

Web browsers—such as Firefox, Internet Explorer, Safari, and Opera—read the XHTML elements and interpret them so that they display in a more human-readable format.

Basic XHTML Components and Syntax

The <html> Element

An XHTML (or HTML) document starts with the <html> element and ends with its corresponding closing element </html>. Put everything else in between these elements.

<head> and <body>

Every properly-coded XHTML document has a <head> and a <body>. The <head> contains some basic information about the document, such as the title. The <body> contains the part of the document that browsers display in the main viewing area. Most of the content in the <head> is invisible. The only thing that viewers can see is the title, which shows up in the title bar at the very top of the browser window.

Simplified Web Page

In an overly-simplified (but completely functional) format, here is a complete web page:

<html>
  <head>
    <title>This is a web page</title>
  </head>
  <body>
    <h1>Web Page 1</h1>
    <p>This web page is short and boring.</p>
  </body>
</html>

Here is a screenshot of this web page as seen in a browser:

Elements: Open and Close

Every "element" or "tag" must have both an opening and a closing part; a start and and a finish. Think of them as parentheses. You can't have just an opening parenthesis. You need to have a closing parenthesis in order to balance the group. Look at these examples of English grammar:

Correct: I like fruit (especially raspberries and mangoes).

Incorrect: I like fruit (especially raspberries and mangoes.

The same thing is true for XHTML elements. You can't just start a paragraph, for example. You also have to end it at some point.

Correct: <p>This is my paragraph.</p>

Incorrect: <p>This is my paragraph.

sandwichYou might think of this structure like a sandwich (one of my previous students came up with this metaphor). You wouldn't put bread on only the top of the sandwich. You'd want bread on both the top and the bottom of the sandwich (at least in the type of sandwich that we're trying to build here). "XHTML sandwiches" can get quite complex, with lots of layers of sandwiched inside each other. For example, The <html> tags surround everything. Then there are the <head> and <body> tags. Within the <body> tags you have <p> tags, which may contain other tags, and so on.

With the early versions of HTML, you could get away with just opening tags in some instances. They weren't as strict in HTML as they are in XHTML, but there are good reasons to be strict. For now I'll just say "that's the way it is" and tell you that you need to have both opening and closing tags.

Self-Closing Elements

Even though the general rule is that elements need both an opening and closing "tag" (for example: <p> and </p>), some elements can close themselves. They don't require separate closing tags because they have the closing tags built into them. The most common self-closing elements are images, line breaks, and horizontal "rules" (i.e. horizontal lines).

How does an element to close itself? It's the slash ( / ) that does the trick. The difference here is that the slash is inside of the the opening tag, which makes it also the closing tag. In the case of image elements, it looks like this (simplified for illustration purposes):

<img src="someimage.jpg" />

The slash at the end means that the element is done. It's over. It's finished. You won't have a </img> tag at the end. In some ways it would make sense to have that extra closing tag, but that's not the way they do it. Why? Because there's no information to go in between the tags. All of the information you need is already in the main element itself.

In case you're wondering, "img" stands for image and "src" stands for source. The src attribute specified which image to use. In this case, the image is called someimage.jpg. In essence, this element says to the browser, "insert the image called someimage.jpg here."

The <br /> and <hr /> elements work in a similar way, but hey do not require a src attribute or anything else:

<p>This paragraph<br />
will show up on two lines in the browser.</p>
<hr />
<p>Here is another paragraph.</p>

Don't Overlap Elements

Another thing to keep in mind with the opening and closing of elements is that you can't overlap them. You can embed them inside each other in many cases, but you can't overlap them.

Correct: <p>Words with both <em><strong>bold and italics</strong></em></p>

Incorrect: <p>Words with both <em><strong>bold and italics</em></strong></p>

The incorrect example is sort of like putting the sandwich meat on the bottom of the sandwich, beneath the bread. You shouldn't do that. It doesn't work very well with sandwiches, and it doesn't work very well with XHTML. Elements can contain other elements, but they can't cross over each other.

Block Elements vs. Inline Elements

Some XHTML elements are "block" elements, and others are "inline" elements. Block elements are chunks of content that form a rectangle, or block, such as paragraphs, tables, block quotes, bulleted lists, numbered lists, and list items. They all start on a new line. Inline elements, in contrast, do not start a new line. Links and images fall into this category. In the example below, I have applied a blue background to a paragraph (a block element). Notice that the background stretches to the edge of the borders of this page and that the paragraph is on its own line. It is not a part of the paragraph above it. I have also applied a yellow background to a link (an inline element). Notice that the background does not stretch across the full width of the paragraph. The dimensions of the link are confined to the small area that the text occupies and the link is on the same line as the paragraph in which it resides.

This is a paragraph with a link to GMU.

Here are a couple more inline elements worth knowing:

Element Opening Closing The default visual effect in the browser
Strong emphasis <strong> </strong> Bold text
Emphasis <em> </em> Italicized text 
<p><strong>Note:</strong> Don't forget to tie your shoes,
even if you don't <em>want</em> to tie your shoes.</p>

XHTML Elements (Tags)

The two table below shows most of the main elements that are used commonly in XHTML. Use these tables as a reference as you create your web content.

Table of elements
Type of Element Opening Closing Block or Inline
An HTML document <html> </html> not applicable
The "head" of an HTML document (this is where you put the title and other "meta" information) <head> </head> not applicable
Title (the "name" of your web page) <title> </title> not applicable
The body (visible portion) of an HTML document <body> </body> not applicable
Paragraph <p> </p> block
Heading level 1 <h1> </h1> block
Heading level 2 <h2> </h2> block
Heading level 3 <h3> </h3> block
Heading level 4 <h4> </h4> block
Heading level 5 <h5> </h5> block
Heading level 6 <h6> </h6> block
Unordered list (bulleted list) <ul> </ul> block
Ordered list (numbered list) <ol> </ol> block
List items (the text of a single item in either a bulleted or numbered list) <li> </li> block
Definition list <dl> </dl> block
Definition list: term <dt> </dt> block
Definition list: definition <dd> </dd> block
Blockquote (a chunk of text quoting somebody else) <blockquote> </blockquote> block
Table <table> </table> block
Table row <tr> </tr> block
Table data cell <td> </td> block
Table header cell <th> </th> block
Div (a generic, block-level section of a page) <div> </div> block
Iframe <iframe> </iframe> block
Span (a generic inline-level section of text) <span> </span> inline
Strong emphasis (for important text; this is rendered as bold in browsers) <strong> </strong> inline
Emphasis (this is rendered as italic in browsers) <em> </em> inline
Anchor or Link (used to create links or link destinations) <a> </a> inline
Superscript <sup> </sup> inline
Subscript </sub> </sub> inline
Form <form> </form> block
Form: inputs (text, checkbox, radio buttons, submit buttons) <input> </input> inline
Form: text area (for entering multiple lines of text <textarea> <textarea> inline
Form: select (drop-down lists, or multiple-select lists) <select> </select> inline

 

Self-Closing Elements
Type of Element Opening (and Closing)
Meta <meta />
Image <img />
Line Break (go to a new line, but stay in the same paragraph) <br />
Horizontal "rule" (a horizontal line separating sections of a document) <hr />

XHTML Attributes

In XHTML, elements can have attributes which give the elements additional qualities. They might give an element its height, or width, or provide some other information about that element. The <img> element provides a good example. If you put only the <img> element in the code, nothing will show up on the web page. The browser has no idea which image to put there. You have to specify which image. The src attribute (short for "source") tells the browser which image to insert. The height and width attributes tell the browser what size to make the image. The alt attribute tells the browser which text to display if images are turned off. The alt attribute is also made available to people using screen readers, as a substitute for the image which they cannot see (because they are blind). A complete <img> element might look like this:

<img src="someimage.jpg" height="350" width="300" alt="Springtime in the Swiss	Alps" />

Here are a few things that you should know about attributes:

  • They are inside elements
  • They are followed by an equals sign ( = ), then the value of the attribute
  • The value of the attribute is enclosed in quotation marks ( " )
  • They do not begin or end with "pointy brackets" (the "less than" or "greater than" symbols: < >)
  • You can have more than one attribute in a given element
  • All of the attributes are separated by spaces (they don't run into each other)
  • The order of the elements doesn't matter

With regard to the last point, we could rearrange the attributes in any order, and the browser would render the image the same way. All of the examples below are correct, and identical in the way they are rendered:

<img src="someimage.jpg" height="350" width="300" alt="Springtime in the Swiss Alps" />

<img height="350" width="300" alt="Springtime in the Swiss Alps" src="someimage.jpg" />
	
<img height="350" alt="Springtime in the Swiss Alps" src="someimage.jpg" width="300" />

Attributes Aren't Elements (or "Tags")

Even though elements (or "tags") must be opened and closed, you don't need to open and close attributes, unless you count the quotation marks around them (alt="products"). There is no such thing as a "src tag" or an "alt tag," even though you may hear some people refer to them that way. They aren't tags. They are attributes. Attributes can't survive on their own. They must be contained within an element/tag in order to mean anything.

Mistakes to Avoid

1. Make sure you put a space between the element and its attribrutes.

Correct: <img src="someimage.jpg" />

Incorrect: <imgsrc="someimage.jpg" />

In the incorrect example, someone has in effect invented a new element/tag called "imgsrc". Browsers won't know what to do with the strange new element. They'll probably ignore it, and it won't work the way you wanted it to.

2. Don't forget the quotation marks.

Correct: <img src="someimage.jpg" />

Incorrect: <img src=someimage.jpg />

3. Don't use attributes by themselves. They must be inside elements.

Correct: <img src="someimage.jpg" />

Incorrect: <img> src="someimage.jpg"

Your First Web Page

From what we've learned so far, you can already create a web page. You can create a web page in less than a minute. Are you ready? Let's do it. Open up a text editor such as Notepad (in Windows: Start > All Programs > Accessories > Notepad) or download more sophisticated text editors like PSPad or TextPad (for Windows) or Text Wrangler (for Macs) or other similar programs.

Note: Don't use Word or any other word processor. All of the extra features in these programs will just get in the way.

Copy and paste this text right into your text editor:

<html>
  <head>
    <title>My first web page</title>
  </head>

  <body>
    <h1>This is my first web page</h1>
    <p>I'm so excited to be creating my very first web page.
       I'm so proud of myself. I wish my friends could see me now. 
       My mom would be so proud of me. Here's a list of things I like:</p>
    <ul>
      <li>Ice cream</li>
      <li>Cute bunny rabbits</li>
      <li>Myself</li>
    </ul>
    <p>My dad always said:</p>
      <blockquote>
        <p>If you can't say something nice, say something mean nicely.</p>
      </blockquote> 
    <p>Ok. That's enough bragging about myself. I think it's 
       time to end this web page and move on.</p>
  </body>
</html>

Now save the document. Make sure that you save it as an HTML document. In Notepad, you'll have to specify "All Files" from the "Save as type" option in the "Save As" dialogue box. You'll then need to give the file a .htm or .html extension. For example, you could save the file as "webpage.htm". Make sure you save the file to a place that you can find easily, like your desktop.

So if you've done this step correctly, you now have a file sitting on your desktop (or somewhere else handy) called "webpage.htm" (or whatever you called your file). Good. Now double click on that file. It should open up your new web page in your default browser program. It should look something like this:

This is my first web page

I'm so excited to be creating my very first web page. I'm so proud of myself. I wish my friends could see me now. My mom would be so proud of me. Here's a list of things I like:

  • Ice cream
  • Cute bunny rabbits
  • Myself

My dad always said:

If you can't say something nice, say something mean nicely.

Ok. That's enough bragging about myself. I think it's time to end this web page and move on.

If it looks like that, then congratulations! You've created your first web page!

(And no, my dad didn't always say that.)

Now, some of you have already created other web pages before. I know that, but let's all keep with the spirit of offering excited words of encouragement to people who have never done this before.

Ok. That's a good beginning. One question that you may be asking yourself at this point is "can everybody now see my exciting new web page?" The answer is no. Only you can see it... and maybe anyone else in the room who happens to be looking over your shoulder at this moment, but this web page is just for you to see. It's your little secret. So now you're wondering, "how do I put this page on the web? Isn't that what the web is all about... sharing things with the whole wide world?" The answer is yes, that's what the web is all about, but your page isn't on the web. It's on your desktop. In order to put the page on the web, you have to, well, put it there. Don't worry about doing that at the moment. We'll get into that later. For now, just be satisfied knowing that you've created a document that could go on the web if you wanted it to.

Head

The head of a document is where you say what type of document you're creating and what language it's created in. At a minimum, an HTML document consists of a <head> and a <body>, surrounded by <html> elements. A complete document head will look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head><title>All about parrots and cute bunny rabbits</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="keywords" content="parrots, bunnies, rabbits, bunny rabbits, cute" />
    <meta name="description" content="Everything you ever wanted to know
        about parrots and bunny rabbits (especially cute ones) that 
        you were always afraid to ask" />
  </head>

Yikes! What does all that mean? Don't get too frightened. Look closely. Yeah, some of it's a mess if you don't understand it, but some of it is sort of self-explanatory. For example, lang="en" means that the language is English. The xml:lang="en" means the same thing. It's redundant, and in some ways is not necessary, but it's there for a reason. Just trust me on that one.

The "meta" elements tell us "meta" information about the page. Meta information is "information about information." Maybe that's confusing, but the concept is rather simple when you look at what the <meta> elements are doing. These particular elements are just specifying keywords for the page and giving it a brief description. Notice that <meta> elements are self-closing in the same way that <img> elements and <hr /> elements are.

Title

The <title> will show up in the top of the browser window, and it lets people know what your page is about. It's especially important for people who use screen readers because the <title> is the first thing screen readers read on a page. The <title> is a part of a document's <head>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head><title>All about parrots and cute bunny rabbits</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="keywords" content="parrots, bunnies, rabbits, bunny rabbits, cute" />
    <meta name="description" content="Everything you ever wanted to know
        about parrots and bunny rabbits (especially cute ones) that 
        you were always afraid to ask" />
  </head>

Here are a few things to remember about <title> elements:

  • Make sure each page has a <title>
  • Make each <title> unique and descriptive, so that people will know the overall purpose of the page by reading the <title>
  • Put the unique aspects of the <title> at the beginning.

Regarding the last point, let's say that you have four pages about your trip to Germany. One is a picture of the Köln cathedral. Another is a picture of the Neuschwanstein castle. Another is a picture of the Bavarian Alps. The last is a picture of the Black Forrest. You should NOT start all of the titles with "Trip to Germany." Instead, start with the unique information. This allows allows screen reader users to hear the most important items first.

Incorrect:
<title>Trip to Germany - Köln cathedral</title>
<title>Trip to Germany - Neuschwanstein castle</title>
<title>Trip to Germany - Bavarian Alps</title>
<title>Trip to Germany - Black Forrest</title>

Correct:
<title>Köln cathedral - Trip to Germany</title>
<title>Neuschwanstein castle - Trip to Germany</title>
<title>Bavarian Alps - Trip to Germany</title>
<title>Black Forrest - Trip to Germany</title>

OR (Also Correct):
<title>Köln cathedral</title>
<title>Neuschwanstein castle</title>
<title>Bavarian Alps</title>
<title>Black Forrest</title>

Doctype

There are several different document types, or "doctypes." A doctype is a statement in the document saying what type of document it is, and what version. Some of the common modern doctypes include:

  • XHTML 1.0 Strict (this is the one we're learning here)
  • XHTML 1.0 Transitional
  • XHTML 1.0 Frameset
  • HTML 4.01 Strict
  • HTML 4.01 Transitional
  • HTML 4.01 Frameset

The "transitional" doctypes allow web developers to be sloppier. This may sound like a good idea, but it limits what you can do, and reduces the reliability of the output. Because the strict doctypes follow the rules more closely, the results are more reliable. Using strict doctypes increases the likelihood that documents will look the same across different kinds of browsers on different operating systems.

The frameset doctypes are used when creating a document that is actually a collection of two or more documents in a frameset. One document acts as the "frame"or container for the other documents inside of it. The container document specifies the height and width of the documents inside of it, and other properties. The documents inside will not use the frameset doctype. They will use a regular doctype, such as XHTML 1.0 strict.

Below is the doctype for XHTML 1.0 strict:

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

And here is the XHTML 1.0 frameset doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Character Encoding

The character encoding of a document refers to a technical specification of a standard character set, including letters, numbers, and symbols. The character set is specified as a <meta> element in the <head> of an XHTML document.

One of the most universal character sets—allowing for a wide range of international alphabets—is UTF-8. This is the recommended character set for most purposes. It is specified as follows:

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

Other character sets include:

  • ISO 8859-1 (Western European; this is the default in many English language web editors, including the English version of Dreamweaver)
  • ISO 8859-2 (Central European)
  • ISO 8859-9 (Turkish)
  • ISO 8859-11 (Thai)
  • ...and many others, specific to specific languages

Paragraphs

Paragraphs are one of the most basic of all XHTML elements. They start with <p> and end with </p>. Paragraphs are a block of text. As you may recall from your English classes, well-written paragraphs contain a main idea, usually (but not always) at the beginning, with relevant supporting information.

Example Paragraph:

<p>The "placebo effect" is evidence that the way one thinks can influence one's health. Scientific studies consistently show that some people respond therepuetically when they believe that they are receiving medicine, even when they are receiving nothing more than inert pills (placebos) with no medicinal properties. This effect is so strong, and so well documented that researchers must take the placebo effect into account when designing medical trials, to ensure that any positive results are greater than would be obtained with just the placebo. If researchers did not take this into account, they may assume that a pill exerts a therepuetic effect, when in fact, the only real effect is the patient's (mistaken) belief that the pill contains beneficial medicine.</p>

Here are a couple of things worth knowing about paragraphs:

  • You can place inline elements (such as links, images, or emphasized text) inside of paragraphs, but you cannot place block level elements (such as headings, tables, or other paragraphs) inside of paragraphs.
  • Unlike some word processors, browsers do not indent the first line of a paragraph. Instead, they place some "white space" above and below paragraphs, to make them appear visually separate.

Headings

In XHTML, there are 6 predefined levels of headings:

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

There are no pre-defined headings after <h6>. The purpose of headings is to organize written content into a logical outline. In most cases, the main content of a web page should begin with a <h1> heading. Subheadings beneath that would be <h2>, and so on. It is best to keep the heading structure internally consistent, so that the next heading below <h1> is not <h6>, for example.

Browsers display <h1> headings very large, and <h6> headings very small, with descending sizes in between, as shown below:

This is a heading level 1.

This is a heading level 2.

This is a heading level 3.

This is a heading level 4.

This is a heading level 5.
This is a heading level 6.

You can alter the default size of headings using Cascading Style Sheets (CSS). Knowing this, you should not refuse to use a certain heading just because it is too big or too small. Using headings in a logical way is always the right thing to do. Once the heading structure is in place, you can alter the way it looks with CSS.

Blockquote

The <blockquote> element is used to enclose quotations. The effect in browsers is that the block of text is indented.

Here is a quotation by Maria Mitchell:

"We have a hunger of the mind which asks for knowledge of all around us, and the more we gain, the more is our desire; the more we see, the more we are capable of seeing."

The code is shown below:

<blockquote>
	<p>"We have a hunger of the mind which asks for knowledge of all around
	us, and the more we gain, the more is our desire; the more we see, the more
	we are capable of seeing."
	</p>
</blockquote>

Note:

  • Quotation marks are NOT automatically generated by the <blockquote> element. If you want quotation marks, you will need to add them yourself.
  • You must place your text within paragraph ( <p> ) elements (or other block-level elements) within the <blockquote>.

Line Breaks (br)

Line breaks allow you to stay within the same block level element (a heading or paragraph, for example), but force part of it to display on the next line. Here are some examples:

<h1>Tomorrow's Legacy:<br />
Shouldn't we Start Today?</h1>

<p>The only way to wake up in a better tomorrow...<br />
is to start working towards better goals today.</p>

The above examples will display as follows in a browser:

Tomorrow's Legacy:
Shouldn't we Start Today?

The only way to wake up in a better tomorrow...
is to start working towards better goals today.

Here are a couple of points worth remembering about line breaks:

  • Don't use multiple line breaks in a row. If you need to increase the space between objects, use CSS instead
  • Don't use line breaks to imitate the effect of paragraphs. Use paragraphs when paragraphs are appropriate.

Horizontal Rules

Horizontal rules are horizontal lines that can be used to separate sections of a document. Using a horizontal rule ( <hr /> ) produces a line like this:

See the line below?

That's all there is to it.

Strong and Em

The <em> element is used to give emphasis to text. Browsers display this text in italics. The <strong> element is used to give strong emphasis to text. Browsers display this as bold text.

This text is emphasiszed

This text is strongly emphasized.

This text is emphasized and strongly emphasized.

<p><em>This text is emphasiszed</em></p>
<p><strong>This text is strongly emphasized.</strong></p>
<p><strong><em>This text is emphasized and strongly emphasized.</em></strong></p>

In older versions of HTML, <b> was used for bold and <i> was used for italics. In XHTML, these have been deprecated, which means that <b> and <i> are outdated. Don't use them.

Superscript and Subscript

You can add superscripts to text to write things like H2O and E=mc2. Here's how:

Subscript:

H<sub>2</sub>O

Superscript:

E=mc<sup>2</sup>

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:

Footnotes in printed documents:

There is a reference to a footnote at the end of this sentence1.

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.

Links to footnotes on the web
(Note: these links don't actually go anywhere. They're just examples.)

Link too small: There is a reference to a footnote at the end of this sentence1.

A better method: There is a reference to a footnote at the end of this sentence[1].

Another good method: There is a reference to a footnote at the end of this sentence[note 1].

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.

Acronyms:

<acronym title="World Wide Web">WWW</acronym>

<acronym title="Self-Contained Underwater Breathing Apparatus">SCUBA</acronym>

Abbreviations:

<abbr title="Doctor">Dr.</abbr>

<abbr title="Drive">Dr.</abbr>

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 doesn't support the <abbr> element. Internet Explorer 7 does, but not all IE users have converted to IE 7 yet.

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:

Here's a paragraph.

Here's a third paragraph

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

Lists

There are three main types of lists in XHTML:

Unordered (Bulleted) Lists

Unordered (bulleted) lists are a useful way to organize a list of items that does not need to appear in a particular order. Lists help to organize content and make it easy to read. Browsers render them much the same way that word processors render bulleted lists, as shown in the example below:

Categories of disabilities to take into account when designing web content include:

  • Visual disabilities
  • Auditory disabilities
  • Motor/Mobility disabilities
  • Cognitive disabilities
  • Seizure disorders

The code for the above list is as follows:

<ul>
	<li>Visual disabilities</li>
	<li>Auditory disabilities</li>
	<li>Motor/Mobility disabilities</li>
	<li>Cognitive disabilities</li>
	<li>Seizure disorders</li>
</ul>

The <ul> stands for "unordered list." The <li> stands for "list item."

It is possible to embed lists within lists, as shown in the example below:

Categories of disabilities to take into account when designing web content include:

  • Visual disabilities
    • Blindness
    • Low vision
    • Color-blindness
  • Auditory disabilities
    • Deafness
    • Hard-of-hearing
  • Motor/Mobility disabilities
    • Inability or difficulty using a mouse
    • Inabiltiy or difficulty using a keyboard
  • Cognitive disabilities
    • Difficulty with memory
    • Difficulty with attention
    • Difficulty with perception
    • Difficulty with reading
    • Other cognitive difficulties
  • Seizure disorders
    • Vulnerability to seizures when viewing strobe or flickering effects

The code for the above list is shown below:

<ul>
	<li>Visual disabilities 
		<ul>
			<li>Blindness</li>
			<li>Low vision</li>
			<li>Color-blindness</li>
		</ul>
	</li>
	<li>Auditory disabilities 
		<ul>
			<li>Deafness</li>
			<li>Hard-of-hearing</li>
		</ul>
	</li>
	<li> Motor/Mobility disabilities 
		<ul>
			<li>Inability or difficulty using a mouse</li>
			<li>Inabiltiy or difficulty using a keyboard</li>
		</ul>
	</li>
	<li>Cognitive disabilities 
		<ul>
			<li>Difficulty with memory</li>
			<li>Difficulty with attention</li>
			<li>Difficulty with perception</li>
			<li>Difficulty with reading</li>
			<li>Other cognitive difficulties</li>
		</ul>
	</li>
	<li>Seizure disorders
		<ul>
			<li>Vulnerability to seizures when viewing strobe or flickering effects</li>
		</ul>
	</li>
</ul>

Notice that the embedded lists are contained completely within a list item ( <li> ) of the parent list. Take a closer look at the Seizure disorders list item:

<li>Seizure disorders
	<ul>
		<li>Vulnerability to seizures when viewing strobe or flickering effects</li>
	</ul>
</li>

The closing </li> for the parent list item ("Seizure disorders") is after the closing </ul> of the embedded list.

Ordered (Numbered) Lists

Ordered (numbered) lists are almost exactly the same as unordered lists. The only difference is that the list has numbers instead of bullets:

How to cook pasta:

  1. Pour water into a pot
  2. Put the pot on the stove
  3. Turn up the heat on the stove to high
  4. When water boils, reduce heat slightly
  5. Place pasta in the boiling water
  6. Cook until pasta is soft but not mushy
  7. Turn of stove
  8. Remove pot from the stove
  9. Drain water from the pot; retain the pasta
  10. Serve pasta (with sauce, spices, side dishes, etc.)

The code for the above list is as follows:

<ol>
	<li>Pour water into a pot</li>
	<li>Put the pot on the stove</li>
	<li>Turn up the heat on the stove to high</li>
	<li>When water boils, reduce heat slightly</li>
	<li>Place pasta in the boiling water</li>
	<li>Cook until pasta is soft but not mushy</li>
	<li>Turn of stove</li>
	<li>Remove pot from the stove</li>
	<li>Drain water from the pot; retain the pasta</li>
	<li>Serve pasta (with sauce, spices, side dishes, etc.)</li>
</ol>

The <ol> stands for "ordered list." As with unordered lists, the <li> stands for "list item."

Just as with unordered lists, it is possible to embed lists within ordered lists. It is even possible to embed unordered lists within ordered lists, and vice versa, as shown in the example below:

How to cook pasta:

  1. Pour water into a pot
  2. Put the pot on the stove
  3. Turn up the heat on the stove to high
  4. When water boils, reduce heat slightly
  5. Place pasta in the boiling water
  6. Cook until pasta is soft but not mushy
  7. Turn of stove
  8. Remove pot from the stove
  9. Drain water from the pot; retain the pasta
    1. Place a collander in the sink
    2. Pour all contents into the collander
    3. Let sit for a minute or so, to allow water to drain
  10. Serve pasta. Suggested accompanying foods include:
    • Tomato-based pasta sauce
    • Grated parmesan or romano cheese
    • Salad
    • Mixed squash and zucchini
    • Bread

The code for the above list is shown below:

<ol>
	<li>Pour water into a pot</li>
	<li>Put the pot on the stove</li>
	<li>Turn up the heat on the stove to high</li>
	<li>When water boils, reduce heat slightly</li>
	<li>Place pasta in the boiling water</li>
	<li>Cook until pasta is soft but not mushy</li>
	<li>Turn of stove</li>
	<li>Remove pot from the stove</li>
	<li>Drain water from the pot; retain the pasta
		<ol>
			<li>Place a collander in the sink</li>
			<li>Pour all contents into the collander</li>
			<li>Let sit for a minute or so, to allow water to drain</li>
		</ol>
	</li>
	<li>Serve pasta. Suggested accompanying foods include:
		<ul>
			<li>Tomato-based pasta sauce</li>
			<li>Grated parmesan or romano cheese</li>
			<li>Salad</li>
			<li>Mixed squash and zucchini</li>
			<li>Bread</li>
		</ul>
	</li>
</ol>

As with unordered lists, the embedded lists—whether ordered or unordered—are contained completely within a list item ( <li> ) of the parent list.

Definition Lists

Definition lists 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:

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

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 description"

Links

Links are fun. Links are what makes the web webby. It's the way that all the internet is connected and interconnected. When you click on links, you leave one spot in the internet and you go to another. Sometimes the links take you to a different spot on the same page, and sometimes they take you to a different page somewhere in the middle of China. It can happen.

Here's one way to create a link:

<a href="http://www.gmu.edu/">George Mason University</a>

When creating links, you have to know where the link destination is (the "href", which stands for "hypertext reference") and what text you'll have as the visible clickable link text. In our example, the words "George Mason University" will be clickable, like this:

George Mason University

Most anything on a web page can be made into a link, as long as it's either text or graphics. To turn our graphic into a link, we would wrap it inside of a link element, like this:

<a href="awebpage.htm">
 <img src="someimage.jpg" height="200" width="210" alt="Five parrots attack a helpless cute bunny" />
</a>

Notice that the <a> tags surround the image. That means that everything inside of the <a> tags will be a clickable link.

Links to External Web Sites

When linking to someone else's web site, you must include the full web address, including the http:// at the beginning, as shown below: 

<a href="http://www.gmu.edu">GMU</a> (CORRECT)

It's not enough to say:

<a href="www.gmu.edu">GMU</a> (WRONG)

The above bad example simply won't work.

Relative vs. Absolute Links

Relative Links

Relative links depend on a context. They are relative to their location on their current web site. Relative links are often shorter than absolute links. As a general recommendation, it is better to use relative links when linking to pages within the same web site. There is more than one type of relative link.

Relative Links
Relative to... Examples Notes
the current page, linking to a document in the same folder as the current page 
<a href="somepage.html">Some page</a>
 Just type the name of the file if it is in the same folder
the current page, linking to a document in the folder above the current page 
<a href="../somepage2.html">page 2</a>
the dot dot slash ( ../ ) means go up to the parent folder
the current page, linking to a document in two (or more) folders above the current page 
<a href="../../somepage3.html">page 3</a>
the dot dot slash ( ../ ) is used, as in the example above, but this time it is used twice, meaning that it is two folders up, instead of just one folder up. The same logic applies with three folders up, four folders up, etc.
the current page, linking to a document in a folder below the current page 
<a href="somefolder/somepage2.html">page 2</a>
"somefolder" is the name of the folder
the home page of the web site 
<a href="/about_us/me.html">It's all about me</a>
 The link starts with a slash. The web browser will add on the link to the base url, which, under normal circumstances, means that it will add it on after the domain name. For example:
http://gmu.edu + /about_us/me.html =
http://gmu.edu/about_us/me.html

Using Links Relative to the Home Page

If you own your own web address, or if your web site is on the main level of the domain name, links relative to the home page will work just fine. The biggest caveat with links that are relative to the home page of a site is that it won't work quite in the way that you might expect it to if you are on a shared server in which your web site is a folder on the main server. For example, if the web address of your web site is http://portfolios.gmu.edu/yourname/, your home page is actually one folder deep within the structure of the whole web site. The "yourname" folder is your folder, and your home page is located there, but the home page for the server is located at http://portfolios.gmu.edu/.

When working under these circumstances, if you choose to write links that are relative to the site, you will need to take this structure into account. A link to your "about me" page that is relative to the site would look like something like this:

<a href="/yourname/about_me.html">About me</a>

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.

Links to image source files:

<img src="file.jpg" height="200" width="200" alt="Islands" />

<img src="../file.jpg" height="200" width="200" alt="Islands" />

<img src="folder/file.jpg" height="200" width="200" alt="Islands" />

<img src="../folder/file.jpg" height="200" width="200" alt="Islands" />

Links to the Index Page of a Folder or Web Site

When linking to the main file ("home page") in a folder, you can drop the file name entirely. Let's pretend that this is the file structure of our web site:

  • about_us
    • index.html
    • me.html
    • you.html
  • contact_us
    • index.html
  • graphics
    • background.jpg
    • logo.gif
    • person.jpg
  • products
    • index.html
    • mousetraps
      • index.html
    • doodads
      • index.html
  • index.html

At the bottom of this list of files is a file called index.html. This is the home page for the whole web site. When we type the web address of this site (let's pretend the site's address is http://www.mysite.com/), we could either type http://www.mysite.com/ or http://www.mysite.com/index.html. Either one would work because the web site has already been set up so that all files named index.html will be the default file of their respective folders.

The index.html file on the top level is the home page for the whole site, but notice that most of the folders have their own index.html file. You could sort of say that each index.html file is the "home page" of their respective folders. For example, you could type http://www.mysite.com/about_us, but you could also type http://www.mysite.com/about_us/index.html. Both of these links will go to the same place.

However, it is important to note that not all web sites are set up in exactly the same way. Sometimes the default "home page" is index.htm (without the "L" at the end). Sometimes it is default.html, or index.php, or index.jsp, or some other name. The truth is that it could be called bananas_are_yellow.q7v or any other outlandish name if someone decided to do that on the server. For the most part, though, index.html or index.htm are the most common. Only the web server administrator has control over the name of the default file. If you're not the web server administrator, you'll have to accept the way that it was set up.

When creating links to default pages, 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 default pages in folders:

<a href="http://www.somesite.com/products/">the products page</a>

<a href="http://www.somesite.com/products/mousetraps/">Mouse traps</a>

<a href="../products/">the products page</a>

<a href="../products/mousetraps/">Mouse traps</a>

<a href="products/">the products page</a>

<a href="/products/mousetraps/">Mouse traps</a>

etc.

Anchors and Same-Page Links

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:

Example Link and Anchor in Context:

<p>The <a href="#conclusion">conclusion</a> is at the bottom of the page.</p>

<p>Blah Blah Blah.</p>

<p>Blah Blah Blah.</p>

<h2><a name="conclusion" id="conclusion"></a>Conclusion</h2>

<p>Blah Blah Blah</p>

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

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 Non-HTML Content

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 and/or servers 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.

Acceptable (Good) File Names: soap_products.htm, soap-products.htm, soapproducts.htm

Problematic (Bad) File Name: soap products.htm

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.

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

When creating links, you should include the file extension (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: Modern operating systems (like Mac OSX and Windows XP) often 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.

Images

When used effectively, images help make web content more interesting, more attractive, and, in the case of meaningful illustrations, easier to understand. When used less effectively, images can detract from the overall effect by cluttering the page with distracting visual information.

Images in web pages are not actually "in" the web page. The web page contains a link to the image. Web browsers find the image based on the link, then insert the image in the page. The main components of the image element are:

  • src (source)
  • height (in pixels)
  • width (in pixels)
  • alt (alternative text for screen readers or for when images are turned off)

A basic image element looks something like this:

<img src="someimage.jpg" height="348" width="290" alt="A bottle of homemade jam" />

A bottle of homemade jam

Images are self-closing elements. There is no such thing as a closing </img> tag. Instead, the closing slash ( / ) is included at the end of the element.

Images are inline elements, which means they can appear within paragraphs or other block level elements. If you want the image to appear by itself, you should place it alone in the appropriate block level element. You may also use Cascading Style Sheets (CSS) to alter the way images are placed within the document.

Tables

It's kind of a pain to create tables by hand. It's easier to do it inside of a tool like Dreamweaver that does most of the work for you, but it is still important to learn the markup, so that you know what tools like Dreamweaver are doing.

Tables have rows and columns. They are a grid of information. A simple table in XHTML looks like this: 

<table border="1">
  <tr>
    <th>Color</th>
    <th>Size</th>
  </tr>
  <tr>
    <td>Red</td>
    <td>Large</td>
  </tr>
    <tr>
    <td>Blue</td>
    <td>Small</td>
  </tr>
</table>
  • <tr> means" table row"
  • <th> means "table header" cell
  • <td> means "table data" cell

The table will look something like this in the browser:

Color Size
Red Large
Blue Small

And there you have it. A simple data table. Look back at the markup and compare it to the visible table. You'll notice that we designate table rows, but there is no markup that designates a table column, at least not explicitly. The columns are designated as either header cells or data cells within rows. The first cell within a row is the first column, and the second cell is the second column, and so on. You could have fun with this table by adding more and more data cells to each row. Just remember to make sure that you have the same number of cells per row, or else you're going to have some odd-looking tables that won't display correctly.

Don't Use Tables Just for Visual Formatting

Those of you who have created web sites in the past probably know that it is possible to use tables for layout purposes. In the interest of using elements for what they're supposed to be used for, it is better to use tables to display a grid of data, not merely for visual layout purposes. While you should be aware that it is possible to use tables for layout, CSS is better. CSS is more powerful, cleaner, standards-based, and more modern. CSS also has accessibility benefits because it helps to separate content (the XHTML) from the "look and feel" or "presentation" of that content (the CSS). With a clean separation between content and presentation, it is usually easier to ensure that the content itself is usable and accessible. One of the reasons for this is because if you remove the styles from the XHTML, you essentially have a text-only version, which helps you to "visualize" how pages sound to screen reader users.

Simple Data Tables

A "simple" data table is one that has up to two levels of headers. The headers can be on the rows and/or on the columns. Here is an example of a simple data table:

Temperatures in Fairfax
  Summer Winter
High 102 68
Low 72 -2

It has two column headers ("Summer" and "Winter") and two row headers ("High" and "Low").

The code for this table looks like this:

<table width="200" border="1"> 
  <caption>
    Temperatures in Fairfax
  </caption>
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">Summer</th>
    <th scope="col">Winter</th>
  </tr>
  <tr>
    <th scope="row">High</th>
    <td>102</td>
    <td>68</td>
  </tr>
  <tr>
    <th scope="row">Low</th>
    <td>72</td>
    <td>-2</td>
  </tr>
</table>

The scope attribute specifies where the header should be applied. The two options are either col (column) or row.

Complex Data Tables

A "complex" data table is a table with three or more levels of headings. (Note: The data in the example below are fictional.)

Temperatures in the Washington DC Area
  Summer Winter
DC Fairfax DC Fairfax
High 102 102 70 68
Low 74 72 -1 -2

In the example above, there are three headers that are associated with each data cell. For example the cell that says "74" is associated with Summer, DC, and Low.

Ignoring, for now, the additional markup that is necessary to make this table accessible to screen readers, the code for this table is shown below:

<table width="327" border="1" class="normal">
  <caption>
    Temperatures in the DC Area
  </caption>
  <tr>
    <th rowspan="2">&nbsp;</th>
    <th colspan="2">Summer</th>
    <th colspan="2">Winter</th>
  </tr>
  <tr>
    <th>DC</th>
    <th>Fairfax</th>
    <th>DC</th>
    <th>Fairfax</th>
  </tr>
  <tr>
    <th>High</th>
    <td>102</td>
    <td>102</td>
    <td>70</td>
    <td>68</td>
  </tr>
  <tr>
    <th>Low</th>
    <td>74</td>
    <td>72</td>
    <td>-1</td>
    <td>-2</td>
  </tr>
</table>

If you look closely at the code above, you'll notice that the top row has only three cells, whereas all of the other rows have five. That's because two of the cells use the colspan attribute. The cells are spanning (or merging) more than one cell together. In this case, they are spanning 2 cells. A similar attribute, called rowspan, allows a cell to span over multiple rows.

It can be tricky to type all of this out by hand, and to remember which header cells are spanning which columns, but if you can keep it all straight, you can create quite complex tables.

Avoid Complex Tables if Possible

Now that you know the basic technique for creating complex tables, a good rule of thumb is to avoid creating complex tables, to the extent possible. Simple tables are easier to create, easier to understand, and easier to make accessible to people with disabilities. That doesn't mean that complex tables are wrong, but it does mean that you should use them only when necessary.

The <div> Element

The <div> element is used to group block-level elements. It is not a useful or meaningful element on its own, but it is extremely useful when applying styles to documents.

<div>
	<p>This is paragraph 1.</p>
	<p>This is paragraph 2.</p>
	<p>This is paragraph 3.</p>
	<p>All of this information is grouped
	in the same "div".</p>
</div>

The usefulness of this element will become more apparent as you learn Cascading Style Sheets (CSS).

The <span> Element

The <span> element is used to group inline-level elements. Like the <div> element, <span> is not a useful or meaningful element on its own, but it is extremely useful when applying styles to documents.

<p>Here is some text <span>with a group of text</span>
singled out for some purpose.</p>

The usefulness of this element will become more apparent as you learn Cascading Style Sheets (CSS).

Frames

XHTML frames are a way of viewing multiple web pages at the same time through the same "frame" or browser window. To make this work, a "frameset" XHTML document must specify which other XHTML documents to view. The frameset is also usually used to specify the dimensions of the documents within the viewing space.

A simulated frameset is shown in the example below (in this case, CSS is used to simulate the frameset effect):

This is the left frame.

This is the right frame. You can use the scrollbar to scroll down on this frame (to the happy surprise on the bottom).

The code for a frameset could look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
	</head>
<frameset rows="*" cols="239,370">

	<frame src="left_frame.htm" title="Navigation" />
	<frame src="right_frame.htm" title="Main Content" />
</frameset>

<noframes>
	<body>
		<p>Put alternative content here
		for when frames are disabled.</p>
	</body>
</noframes>
</html>

Notice that the <frame> elements contain links to other web pages. Those pages are completely separate from the frameset, and are normal web pages, complete with <head>, <body>, doctype, and everything else. The cols attribute specifies the width of each of the frames. The width can be specified in pixels or as a percentage of the total width of the frameset.

Framesets can get more complicated than this, but these are the basics.

Avoid Frames if Possible

In general, frames should be avoided unless absolutely necessary. They complicate things for both users and the developer. The only times when frames could be considered "necessary" are when two completely separate documents must be shown simultaneously side by side (or one above the other, or in some other similar configuration). This is a rare circumstance, but it does arise occasionally.

 

Iframes

Like regular frames, iframes (short for "internal frames") are web pages inserted inside of other web pages. The difference is that regular frames require a frameset document, and iframes do not. An iframe is like a hole, or window, in a web page, through which you can see the other web page. An iframe could look something like the example below (the iframe effect is simulated here, using CSS):

This is part of the regular web page

This is the other web page, showing through the iframe "hole."

This is more of the original web page.

The code for an iframe could look something like this:

<iframe src="web_page.htm" width="50%" height="300" title="Smiley face">
</iframe>

Like frames in general, iframes should be avoided whenever possible. They have legitimate uses, but you should consider other techniques first.

Interactivity

By themselves, XHTML documents are not particularly interactive. They do have links which you can click on, but but without some kind of scripting or programming, web pages just sit there and do nothing. That's not necessarily a bad thing, but if you need them to interact with the user, you need to use

Forms. One way to make web pages slightly more interactive is to use forms. Forms allow users to type text, choose from lists of options, and submit information so that it can be collected. In order to collect that information, the web developer must use some sort of programming language to process the data.

JavaScript. JavaScript is a client-side scripting, or programming, language that allows web developers to use logic in web pages. You can say something like "if condition A is true, then do B, or else to C." It can get much more complex than that, but that's the basis for much of the logic made possible by JavaScript. The term "client-side" refers to the fact that the computations are all performed on the client's computer, rather than on the web server. JavaScript files must be completely downloaded to the user's computer. At that point, the browser can implement the logic in the JavaScript files. The advantage of client-side scripting is that it allows for fast interactions, because there is no need to send requests to the server or wait for responses. Disadvantages include the fact that users can turn off JavaScript, users can see all of the JavaScript code if they view the source code, and there are certain types of server interactions that are impossible with JavaScript alone.

Plugins. Plugins such as Flash, Shockwave, Quicktime, RealPlayer, Windows Media Player, etc. offer other types of interaction. Flash, in particular, boasts full-featured scripting capabilities, similar to JavaScript. The great advantage of plugins is that they can offer specialized services and features that would otherwise not be possible in plain XHTML files. One of the disadvantages of plugins is that in order for a user to take advantage of content created for plugins, the user must have the plugin installed on the computer.

Server-Side Scripting. Unlike JavaScript, all of the computation with server-side scripting is performed on the web server. This offers the advantage that users do not need to download the scripts. Also, some server interactions would be impossible otherwise. The disadvantage is that even small interactions must be sent to the web server, processed there, and responses returned to the user's browser. This can slow down the interaction considerably, especially if the internet connection is slow. Examples of server-side scripting languages include PHP, ASP, JSP, .net, Cold Fusion, Perl, and others.

AJAX. AJAX is the combination of JavaScript and server-side scripting. Some requests are sent to the server to be processed by a server-side programming language.. Others are processed on the client's computer using JavaScript. AJAX is often considered an integral part of the so-called "Web 2.0" experience, which represents a certain degree of maturation of web processes and user interaction, often with a collaborative social interaction component.

 

Forms

HTML forms are used to get information from the user. Users either type in the information or they select from a list of pre-set options.

All forms begin with <form> and end with </form>. Within those elements, a variety of form elements are possible.

Form Element Notes Example XHTML (simplified)
One-line text input boxes   
<input type="text" />
Multi-line text input boxes   
<textarea>
</textarea>
Checkboxes You can choose as many as you like within the list 
<input type="checkbox" />
Radio buttons You can choose only one within the list 
<input type="radio" />
Single-line drop-down selection lists   
<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

 
Multi-line selection lists   
<select multiple="multiple" size="4">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

Here is a simple example (Note: This form is non-functional. You can type in it, but you can't submit it anywhere):

Do you prefer green or yellow?


Here is the code for this particular form:

<form id="sample_form" method="post" action="">
  <p>

    <label for="who">Who are you?</label>
    <input type="text" name="who" id="who" />

  </p>
  <p>
    <label for="where">Where are you from?</label>
    <input type="text" name="where" id="where" />

  </p>
  <fieldset>
    <legend>Do you prefer green or yellow?</legend>
    <p>
      <input name="color" type="radio" value="green" id="green" />

      <label for="green">green</label>
    </p>
    <p>
      <input name="color" type="radio" value="yellow" id="yellow" />

      <label for="yellow">yellow</label>
    </p>
  </fieldset>
  <p> 
    <label for="textarea">Why is the sky blue?</label><br />

    <textarea name="textarea" cols="30" rows="5" id="textarea"></textarea>
  </p>

</form>

How Does a Form Work?

Setting up a form is relatively easy, but how do you make a form work? How do you get a form to do something?

The answer to these questiones depends on what you want a form to do. Forms are most commonly used to do the following two types of actions:

  1. save information to a database
  2. send an email to someone

There are other things that you could do with forms, but there are by far the most common. Unfortunately, to do either of those things, somebody has to write a script to perform these functions, and it would go way beyond the scope of this class to teach you how to do that. Scripts can be written in such languages as PHP, JSP, Perl, Python, ASP, Cold Fusion, or others. The script tells the server what to do with the information once it is submitted. Should the information be sent in an email? If so, to whom? Should the information be sent to a database? If so, to which database? How should the data be handled? What happens if someone submits a bad email address? Should the user see an error message? What about when users forget to fill in important elements of a form? These are usually not small issues. It takes time to set this up and to do it right.

The illustration below shows how most forms are set up to work:

diagram, explained below

The user fills out the information in the form. This information is sent to a script. The script determines whether or not there are errors. If there are no errors, the script processes the data by either sending an email to someone or by inserting it in a database somewhere. Then the script presents the user with a confirmation message. If there are errors, the script presents an error message, and usually sends the user back to the form to try again.

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