This chapter will be our basic tutorial and reference for XHTML. Most computer literate folks are familiar with HTML as the language used to write documents for the web, but you may or may not have encountered XHTML before.
Section 2.1 will go over the differences in more detail, but here's the "short version":
A lot of this chapter is not particularly scintiallating reading. It is more like a reference guide than a narrative. It is tempting to suggest that you only consult this chapter as and when needed as a reference.
Instead, I'm going to suggest that you at least read through it once, even if you skim. I find that when I read a new book about a technology—even one that I'm already very familiar with—I almost always pick up at least one new tip.
The intro to Section 2.1 is one of only two places in the book that Standard Generalized Markup Language (SGML) is mentioned, the other being a brief mention in Section 8.1. Nevertheless, I think this is an important detail to learn, since SGML-based technologies are likely to be around for a while.
Essentially, any language that uses open tags such as <foo> and close tags such as </foo> is likely to have been derived from SGML. This includes not only HTML, XHTML and XML (all of which we will encounter in this course), but also WML, the language used for content distributed to cell phones.
So SGML is one of two important points in this section. The other is description of the "original intent" of HTML, and how it differed from other text-formatting languages. Be sure to pick up that point.
You'll find more information on both of these points in the CISC474 course notes, under topics/xhtml/validation/validation.txt
One more point to make here: if you are still using tags such as <FONT COLOR=#0000FF>berry</FONT> to make the word berry appear in blue, then you are still stuck in the 1990s.
Cascading Style Sheets (CSS) is the new way of changing fonts and colors in your document—CSS gives you much more control over how your documents look, and most importantly, it allows you to separate structure from presentation which will be a major theme in this course. CSS is covered in Chapter 3 of Sebesta.
By the way, if you like the Head First Servlets and JSP book, there is a new Head First book for HTML, with XHTML and CSS. It was published too late for me to adopt it for this course, but I am reviewing it for possible use in the future. If any of you happen to be at a well-stocked major bookstore (such as a Borders or Barnes and Noble), I invite you to check it out, and give me your feedback (via the WebCT discussion board for XHTML discussions.).
Some things to know from this section:
There are three different flavors of XHTML version 1.0. Each of these is specified in a Document Type Definition (DTD).
The three versions are:
The first two should be fairly self-explanatory: transitional allows a lot more of the elements and attributes that were legal in HTML, but are being phased out in XHTML, where strict requires you to clean-up that stuff a bit more.
Frames are being phased out of XHTML as well; it turns out that everything you might want to be able to do with frames you can also do with the box model of CSS. However, if you haven't fully embraced CSS yet and still want to use frames, you'll have to use the frameset DTD.
In CISC474, the approach that I recommend towards frames is that we learn just enough about them that we know how to maintain sites that already use frames, but we avoid frames for new development. Projects and pages you develop in this course should not use frames (if you want to earn the highest grades.)
Here are the three DOCTYPE definitions associated with the three XHTML 1.0 DTDs:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The most current, up-to-date way to make websites is with XHTML 1.1. With XHTML 1.1, there is only one DTD (a strict one). It's DOCTYPE definition is the one below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
No matter which of these four DOCTYPE declarations you use, you always need to specify the xmlns attribute on the html open tag as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
Typo: second line of p. 32: XTHML should be XHTML.
This section starts with a nice outline of the "pros/cons" of moving from HTML to XHTML.
You are invited to find other web sites that take a position on this one way or the other. Could you argue either side of this question? (In the real world, your company might be marketing a product that is more useful if folks are, or are not moving from HTML to XHTML quickly. So it is important to be able to make such arguments. Consequently, might also ask you to do this on an exam.)
See also, the CISC474 course notes: topics/xhtml/validation/validation.txt
Things to consider:
For convenience, here are links to some of the items mentioned in this section in case you want to follow up on your own.
Sebesta also mentions that some document editors support creation of XHTML. Dreamweaver MX supports the creation of XHTML 1.0 compliant documents by clicking the button "Make documnent XHTML compatible" when creating a new document, as shown below. By manually editing and avoiding certain elements and tags, one can also create XHTML 1.1 documents fairly easily (for example, the document you are reading now was created in Dreamweaver MX, and validates as XHTML 1.1)
There is a more recent version of Dreamweaver available (version 8.0); I don' t know whether this version supports XHTML 1.1 directly.
From this section, be sure to know how to work with the following concepts:
Questions:
Based on the material in this section, you should be able to identify the following elements in a valid XHTML 1.1 web page:
Sebesta also notes in this section the deprecation of frames (I already mentioned this in Section 2.1.1 of these notes.)
At the very start of the section, Sebesta makes a blanket statement that is true in theory, but I have found to be problematic in practice. He writes:
Every XHTML document must begin with an xml declaration... [such as]
<?xml version="1.0" encoding=-"utf-8"?>
Sebesta is not wrong about this; many sources offer the same advice.
Sometimes, however, with web sites hosted on copland.udel.edu, when I've tried to follow this advice, I've run into problems. In particular, when the xml declaration is included at the top of an XHTML file, under some circumstances that I haven't quite been able to pin down, IE6 refuses to render the document as XHTML—instead, it renders the content as raw XML and displays the element structure as a tree diagram without any formatting, in a format similar to the one shown in the image below (Figure 8.3 from Sebesta):
I tried various work arounds for this problem, including setting the content-type via a .htaccess file, or in a <meta> element, to no avail; the only thing that worked was removing the <?xml version="1.0" encoding=-"utf-8"?> declaration.
However, the <!DOCTYPE ...> declaration is absolutely required if you want the document to be considered valid.
Note too that while the html, head, body and title elements are all required for a document to be well-formed @@@ CHECK THIS @@@, sometimes when we write code in class to generate a web page (e.g. in JavaScript, Java, Perl or PHP) as a quick 5 minute demo, we might sometimes leave out some of these parts (e.g a body with no head, or vice versa). And, in most cases, the web browser will gracefully deal with whatever we throw at it.
We may also sometimes leave out niceties such as the <!DOCTYPE... or the value of the xmlns attribute on the <html> open tag.
When demo-ing a feature of a language in a lecture, specfying all of these items can clutter up both the code and the "airtime" in our lecture, and obscure the larger point we are trying to make.
However, writing code that generates "half-formed" web pages like this is probably not a good habit. In production code (e.g. code you are submitting for credit for a homework assignment or project) we certainly always want to be sure to generate all parts of each web page correctly.
Exams are another story: if I ask you to write code to do "such and such" on an exam, I will often tell you "focus on this or that part of the code", and explicitly allow you to gloss over certain details of syntax such as DOCTYPE declarations, since in practice, these would be copied from a template, or generated by a tool.
That doesn't mean you'll never be asked about syntactic details of DOCTYPE declarations; I might ask a question on some occaision that focuses exactly on that. It just means that you shouldn't freak out that you'll be expected to reproduce all of these syntax details in the answer to every exam question that involves writing XHTML.
I will try to give you guidance along the way so that you'll know when the rules are strict (and which rules are strict), and when they are loose when you are writing exam and quiz answers. If you aren't sure, just ask.
There is a temptation to just skip over this section, since it appears at first to just be a reference guide to a bunch of tags. The problem is that Sebesta has "buried the lead" a little bit. (That's "lead" as in the "lead story", not "lead" as in "don't eat those paint chips; you'll get lead poisoning!")
Several of these sections contain little nuggets about XHTML that you need to know, and sometimes these nuggets are directly connected with the title of the section. So, "since he buried the lead, you gotta read!"
Some things to be sure to be on the look out for:
Understand about how white space is handled inside a <p></p> element. Also, note that while by default there is space between paragraphs, this can be overridden with CSS. For example, compare and contrast the following:
| Source code | Rendered |
| <p>This is a paragraph. Note how the line breaks are determined only by where the tags start and end. </p><p>This is a new paragraph. There is space between the paragraphs</p><p>This is the very last paragraph</p> | This is a paragraph. Note how the line breaks are determined only by where the tags start and end. This is a new paragraph. There is space between the paragraphs This is the very last paragraph |
<style> p {style="margin: 0px; text-indent: 2em;"} </style> |
This is a paragraph. Note how the line breaks are determined only by where the tags start and end. This is a new paragraph. There is space between the paragraphs This is the very last paragraph |
The moral of the story is: if you want to acheive a certain effect with the way text is spaced out on the page, messing around with <p> and <br /> tags isn't necessarily the best way to do it. Use <p> </p> tags to delimit logical paragraphs, and use CSS to change how things appear.
This section is important material for our course, and is very well explained; I have nothing to add. Except perhaps, that you should also check out: topics/xhtml/validation/validation.txt
This section includes a discussion of self-closing tags such as <br /> (which you may be accustomed to seeing as <br>. Note that <hr> (for horizontal rule) is another tag that should be written as a self-closing tag in XHTML.
Check out the footnote too on why you'll generally see <br /> (with the space in it) rather than <br/>, which strictly speaking should be equivalent.
This section explains headings pretty well. One thing it doesn't mention is that the choice of headings should NOT be based on the size of text you want, but rather on the hierarchy of information.
A common thing you'll see on poorly designed web pages (including many that I designed before I learned better!) is the use of <h2></h2> tags as the top level heading because the font size looked better than the default font size for <h1></h1> which was way too big.
However, the way to change the font size is with CSS, not by choosing a different level of header tag. Two reasons it matters:
Again, what I would add to the Sebesta's discussion is this: use blockquote for quotations only, not for an indentation effect. (I've been guilty of this practice in the past.)
Here are some links to more information on this aspect of HTML/XHTML usage:
blockquote element is insufficient from
Web authoring and surfing by Jukka "Yucca" Korpela.This section contains an important concept embedded in it:
Understand the difference. Each time you learn a new tag, know whether it is a block tag, or an inline tag. This turns out to be crucial to understanding XHTML layout.
In general, I'd suggest that in practice, <sub> and <sup> tags are ok to use when specifying mathematical formulas (as in Figure 2.11 of Sebesta). However, the following tags should be avoided:
<b>, <i>, <tt>, <big>, <small>.
Instead of <b>, use <strong>.
Instead of <i>, use <em>.
Instead of <big> and <small> use CSS and classes.
Instead of <tt>, use <code> or <pre>.
The four most important character entities mentioned in this section are the ones for &, <, > and non-breaking space. You'll end up using those a lot, and I would expect you to know those on an exam. The others, I would not expect you to memorize.
Note what kind of element (tag) an <hr> element is—that is, it is block or inline?
meta Element In addition to using a meta element for the purpose listed here (providing information to search engines), meta elements also sometimes play a role in document encoding. Read the following article from the blog "Joel On Software" (thanks to Chris Fischer for pointing me to this resource):
As you do, look for the proper use of this meta element:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
A reasonable overview of GIF, JPEG, and PNG files. Be sure you know a little bit about all three.
<img /> tagKnow about the alt attribute of the img tag. Also note what can happen if you choose arbitrary values for the height and width attributes.
Here's the link that Sebesta provides to learn more about the <img /> tag:
Strange that in a book that emphasizes XHTML 1.1, he provides a link to the HTML 4.0.1 version of the tag. Also, that link is actually to a reference about attributes in HTML 4.01 "in general", not a list that is specific to the IMG tag.
Here's the XHTML1.1 version of the same material:
That link notes that the attributes alt, height, longdesc, src, and width are specific to the <img /> element, with alt and src being required attributes.
There is also a hyperlink to "Common", a group of attributes that are common to virtually all elements in XHTML 1.1, including the following:
The Common attributes mentioned above in the following contexts in CISC474:
Things to watch out for:
Be sure to understand the difference, and the pros/cons of using one vs. the other.
Hyperlinks are specified with the <a href="..."></a> element. Watch out for this: you'll also later see something called a <link /> element which is NOT a hyperlink, but something else instead.
This section explains how you can use the id attribute to specify the target of a hyperlink within a document. Some older documents use the name attribute for this purpose, but the id attribute should be used in newer documents (because, as we'll see later, id can also be used with CSS and Dynamic HTML).
This section describes implementing a table of contents with links. You can see example of that in some of the documents I've created for your use in this course:
Most folks who write HTML know about Unordered Lists and Ordered Lists, but fewer know about Definition Lists, which are also quite useful.
This section is quite short and straightforward. If you want to know more about Unordered Lists, though, try this article from the nice folks at W3C Quality Assurance:
A straightforward section. Note the rules for proper nesting.
Note the use of the <dt><dd> and <dl> tags, and the proper nesting thereof.
From this section, be sure you know the proper use of the following elements: <table><caption><tr><th><td> and the border attribute of the <table> tag.
Particularly pay attention to the difference betweeen <th> and <td>, and the proper use of the <caption> element.
Something I did not know until I read this was that the syntax:
<table border="border">
is legal syntax, and uses the default value for the table border. I've always assumed that it was necessary to specify a numeric value. (That just goes to show that you can always learn something new.)
rowspan and colspan Attributes This section illustrates rowspan and colspan with simple examples. A more complex example can be seen on my Spring 2006 semester schedule, where rowspan and colspan are extensively.
align and valign Attributes I wasn't sure about the align and valign attributes—in particular, whether they were considered "ok" or not in XHTML 1.1. For the most part, the trend is away from doing alignment in the XHTML code, and moving alignment into the CSS code. You'll find that a lot of other align="center" type constructs do not work in XHTML, so I was suprised to see this here in the table section.
However, they appear here in Sebesta's example, so I tried typing it in (more accurately, I downloaded the code from the Addison-Wesley web site for the book.)
What I found is that the code does indeed work, and it does validate—with one small nitpick. Throughout the book, Sebesta shows the following in his DOCTYPE strings at the top of the code examples:
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
In fact, in order to get his examples to validate, I had to replace the lowercase w3c with an uppercase W3C as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Apart from that, though, all was well.
Even so, you might find that the CSS mechanisms for aligning text are a better way to go, so that you keep all your formatting code in one place.
cellpadding and cellspacing AttributesI'm in the habit of remembering three attributes that I always specify when I'm "hand coding" a table:
<table border="10" cellpadding="1" cellspacing="2"> ... </table>
This results in a table like the following one:
| first column | second column |
|---|---|
| foo | bar |
Figure 2.24 shows a nice example of the difference between the cellspacing and cellpadding elements; that's a detail worth remembering.
Some books make a big detail out of the <thead><tbody> and <tfoot> elements. Firefox, when rendering tables, seems to create a <tbody> element on the fly if the document contains a table that doesn't specify a <tbody> element. I'm not entirely clear on the point of these elements yet, and Sebesta moves over the topic very quickly. If you can find a good source of information on this with not only the "theory" but also some comments on "practice", "use cases", and examples from real web sites, that might be worth some points. Post your findings to the XHTML discussion board on WebCT.
Update: Brian Sheehan found the following web links that explain more about <thead><tbody> and <tfoot> elements:
It appears that there is at least one benefit of using these elements: if you print a web page containing a table, and that table spans multiple pages, these elements will make sure that the headers and footers are repeated on each page. I've put up an example of this in the folder ch02.
Update: Graham Becker found the following information.
Here are some additional links I have found about thead tfoot and tbody
- http://www.htmldog.com/reference/htmltags/thead/
- http://webdesign.about.com/library/tags/bltags-thead.htm
- And my personal favorite (which is from an O'Reilly Book) http://www.unix.org.ua/orelly/web/html/ch11_03.html
I have been reading on the subject of thead tbody and tfoot and have some interesting findings.
While these tags may not be useful for very small tables these tags come in very handy for large tables. These tags will allow the coder to separate the tables into logical sections. It is from here that the user can use these sections to help the seperate those sections of the table via some visual element.
The last link I posted...gives us a very good example of this. In his example [this reference] gives us a table of the results of people when asked if they rather eat kumquats or get poked in the eye. Yes, I know its a "stupid" poll but that's not really the point. The point is that [this reference] presents us two tables. One table without thead,tbody,and tfoot and one table with. In figure 11.5 [this reference] shows us a table with data that could be expanded on (ie give us more detail) and then in figure 11.6, [this reference] shows how with those 3 tags [one] is able to expand more into the data by separating the male and female data into groups of people under 18 and then people over 18 by each gender.
Forms will be one of the most important XHTML elements for building web sites that work with server side software. They are our basic tool for gathering input. You kind of need to have a pretty solid understanding of forms before you can work with Java Servlets, JavaScript, Perl-based CGI Scripts, PHP—well, you get the idea.
Check out, for example p.75 in the HFSJ text. You'll see that in our very first 'non-trivial' servlet, we are using the tag
<form method="POST" action="SelectBeer.do">
You'll also notice that the HTML on that page is not even close to being correct XHTML 1.1, or even HTML 4.0.1. Learning how to spot that and fix it should be one of your goals as you read through section 2.9 of Sebesta.
Note the vocabulary words controls and widgets defined in the intro to this section; you'll see those terms used in references that talk about web interfaces, and more generally, any kind of graphical user interface.
<form> TagThis section introduces the <form> tag, and notes that in Chapter 1, the examples of <form> elements have blank action attributes. Contrast that with the action attribute of the <form> open tag from p.75 of HFSJ:
<form method="POST" action="SelectBeer.do">
The action attribute here is used on the server side to identify which Servlet is going to be run to process the HTTP request and produce the HTTP response. The value of this attribute is typically case-sensitive, and is interpreted by the web server.
The method attribute is used to indicate whether the request should use the HTTP "GET" method or the HTTP "POST" method. Since those are HTTP method names, they should be specified in all capital letters (despite the fact that they appear in lowercase in this section of Sebesta.)
<input> TagThings to know from this section
Also, as you read this section, skip ahead to section 2.9.4 about the <textarea> element. Make sure you can compare and contrast the use of
<input type="text" ... />
with the use of
<textarea> ... </textarea>
Where would you use an <input> element with type="text", and when would you use a <textarea> element?
Also:
<select> TagCompare the syntax of the <select> tags shown in this section to the rather sloppy syntax shown oni p. 75 of HFSJ. Could you fix the HTML code on p. 75 to be compliant with XHTML 1.1 syntax?
<textarea> TagA reminder: look back at Section 2.9.2 and compare and contrast the use of <textarea> ... </textarea> with <input type="text" ... />.
Know what the submit and reset buttons do. Also note that the value attribute specifies what text goes inside the button label.
The book contains an example CGI Scrript in Perl, and an example PHP script to process the data in this form. It would be a good exercise to develop a Java Servlet or a JSP to do the same.
When there is so much material, we have to find something to leave out. So we are going to leave out a detailed discussion of Frames in this course. The introduction to this section summarizes why.
You may skip over the reading in these sections.
This is a good review of the differences that you'll need to keep in mind as you read examples in the HFSJ, which uses a kind of "sloppy HTML", and Sebesta which uses strict XHTML 1.1 (which is what I'll be looking for in work that is eligible for the highest grades.)
id and name attributesMany of the points discussed in this section have already been mentioned elsewhere, but one is worthy of special note, because it comes up frequently: the id and name attributes (final paragraph on p. 86). Be sure to read this one carefully. I often find that Dreamweaver inserts name attributes in places that XHTML 1.1 prefers id attributes.
Newer JavaScript, Dynamic HTML and AJAX based applications depend a lot on a method getElementById() (that's "method" in the "object-oriented programming sense of "method"—it turns out to be a method of the window.document object.) As such, it is important for elements that are going to be referred to in JavaScript scripts to have a unique value for the id attribute. That allows the getElementById() method to take an id as input, and return a reference to the document element that has that id.
Older techniques based on the name attribute turn out to be browser specific—in particular, someolder books on JavaScript recommend techniques based on name attribute value that only work in Internet Explorer. So we are definitely going to push use of the more "cross-platform" id attribute instead.
Except for the last pargraph (about frames), this is a good summary of what you should know about XHTML before proceeding further in the course. Take some time to read through this summary a few times and make sure you are confident about all the topics it contains.
For each review question, I'll indicate "yes" if it's something I think you should be reasonably expected to know on an exam, or "no" if its something I probably wouldn't ask.
These exercises are all reasonable practice, but I think we can come up with some on our own that are more interesting. In any case, I would omit 14, 15 and 17, since they involve creating a document with Frames.
