I’m not going to teach you XHTML/HTML: Homework Review

wolfweb.jpg

Last month in my entry about
HTML/XHTML
I provided a homework assignment for those who wanted to try learning a bit of XHTML. I know some of you are still working on the project, but as I've completed it myself, I'll walk you through some of the elements of the site.

If you have not yet started the project, you should go ahead and give it a try before reading this, but I leave it to you to decide what works best for your learning style.

My results

On the right is a screen capture of the site I built, Wolves, our social cousins. As you can see, there isn't much to it. Per the instructions, I included a photograph, headers, links, and list elements. I didn't apply any style formatting so nothing has been done to affect color, font or positioning of the elements on the page.

While the site isn't visually interesting, it is visually informative. The use of headers such as h1's, h3's and h6's help to differentiate between title, page header and footer. The use of a list for the menu makes that easy to follow as well.

Content

Given the reason for building the site, I spent very little time researching and writing about wolves. Anyone hungry to learn about wolves will be disappointed. Knowing this, I explained the reason for the site on the "About this site" page and included my contact information. Were this a serious site, it would still be important to include a page explaining the parameters and scope of the project.

About the document structure

You can view the complete code used to build this by going to the site and selecting "view source" from your browser menu. What follows is a breakdown of the elements used, with some general information about each.

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

The Document Type declaration is used to tell user agents such as Web browsers what type of code was used to create the document so that they may render it appropriately. The World Wide Web Consortium maintains a list of valid document types.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The html tag indicates the start of the document, the format (XHTML) and the language (English).

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Wolves: a web site demo</title>
<meta name="Keywords" content="wolves, unstyled web site, sample web site for tutorial" />
<meta name="Description" content="Sample web site to demonstrate simple xhtml files without any style formatting" />
<meta name="author" content="Heidi Adams Cool" />
</head>

Information within the header provides additional information to the browser, such as the page title—which is shown at the top of a browser window—and meta tags which can provide added information to search engines. In this example I've included author information, a brief description of the site, and keywords related to the site. While keywords help search engines reference your page, it is more important for them to be accurate than plentiful. A list of 200 keywords will not raise your site rankings, whereas a short list of words or phrases—specific to your site—will complement the other data these engines collect.

<body>

All content intended to be read or heard by users is enclosed within the body tags.

<h1><img src="wolf.gif" alt="wolf head" /> Wolves: our social cousins</h1>

The title of the site is enclosed within opening and closing h1 tags. In XHTML all elements must include both the opening and closing tags. In earlier versions of HTML, opening tags alone were sufficient. XHTML provides headers h1 through h6 with h1 being the largest. They should be used from large to small in descending order of importance. The words contained in headers are also referenced by search engines to help determine what is the most important content on your site. If one rendered the same words in plain paragraphs with bold text, user agents would not be able to recognize them as being more important.

In this example I have enclosed the wolf image within the h1 tag in order to affect it's placement on the page. When using CSS, I would handle the image separately. The img tag is "self-closing." As there is only the one tag it incorporates a closing slash at the end before the angle bracket. Manual line breaks <br /> and horizontal rules <hr /> also function in this manner.

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About this site</a></li>
<li><a href="species.html">Species</a></li>
<li><a href="haiku.html">Haiku</a></li>
<li><a href="links.html">Links</a></li>
</ul>

Here I've treated our menu as an unordered list. When I later add CSS to the page this will allow me to control whether the list has bullets or not, whether it is vertical or horizontal, etc. The linking words are enclosed within opening and closing anchor tags. As each page is located in the same folder I have used short "relative" links that use only the file name.

When including adjacent links in a document, such as those found in a menu, the use of a list helps to differentiate them. If instead we had put these in a paragraph with manual line breaks, user agents wouldn't easily know where one link ends and another begins. This is of particular importance for browsers for the visually impaired. When lists are not practical, you should always remember to put an actual character such as a comma or vertical bar between such links.

<h3>Home</h3>

Here I've enclosed the page header within h3 tags. I could just as easily have used an h2, but by skipping that I can save that tag for something more important if necessary. In the Case templates, we use h2's on the opening page of a site within the gray or colored box, and h3's for individual page headers.

<p>Wolves are a member of the family, <a href="http://en.wikipedia.org/wiki/Canid">Canidae</a>, which also includes dogs, foxes, coyotes, and jackals. It is thought that wolf-like animals evolved from a common ancestor 2-3 million years ago, while more familiar species such as the gray wolf probably emerged 1 million years ago. </p>

<p>Like dogs, and our own species, humans, wolves are social creatures. Whether hunting prey or nurturing their young, wolves work together for the good of the pack. </p>

Most of your text will be enclosed in paragraph tags as shown here.

<h6>Questions? Contact <a href="mail:cool@case.edu">cool@case.edu</a> or visit the <a href="http://blog.case.edu/webdev">Web Development Blog</a> at <a href="http://www.case.edu">Case Western Reserve University</a>.</h6>

I enclosed the footer information in h6's. While I could have used paragraph tags, I think the use of the header tags helps to distinguish this content from the main text. The use of the smaller header also indicates that it is of less importance to the subject than are the h3's. I feel it is important to include some sort of contact information in the footer. If a user finds an error on your page or has a question he/she needs to have a way of contacting you. If the contact person for the site is different than the content person for the subject matter, then you should include both somewhere on the site.

You will notice that the footer includes links to an e-mail address and to an external site. The external site makes use of a full url (uniform resource locator, aka address) in which the http:// designates that the link uses the hypertext protocol. The e-mail address begins with mailto: to indicate that it uses the mail protocol.

</body> </html>

As with other tags, the body and html tags must be closed.

To learn more about the tags used in this document, and XHTML in general, visit the resources listed in the previous entry. For our next project, we'll add the functionality of cascading style sheets to make our site look a bit spiffier.

Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

4 Comments »
  1. Thanks for checking out my site...I have overhauled it since your comment; after trying (and failing) to mix and match iWeb and Moveable Touch, I decided to just use the Apple homepage as a template and based mine off of that. I've got all the basics done on the main index, but any other pages still need to be done.

    Comment by Kyle Niemeyer — July 16, 2006 @4:05 am

  2. Hi all, here is my first attempt at creating a Web site: http://filer.case.edu/kmf17/Flamingo/index.html.

    Comment by Kim Finley — August 22, 2006 @2:56 pm

  3. [...] Next: Homework Review [...]

    Pingback by » I’m not going to teach you XHTML/HTML, but you should learn it anyway | Web Development Blog: Heidi Adams Cool — March 23, 2009 @1:49 pm

  4. [...] a follow-up to the I'm not going to teach you XHTML/HTML and homework review entries, today I'll introduce you to Cascading Style Sheets [...]

    Pingback by » I’m not going to teach you CSS: Lesson 1 | Web Development Blog: Heidi Adams Cool — August 7, 2009 @1:21 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL