Larger Text Normal Text Smaller Text

IT 280 Web Development II, Spring 2008

 
  1. Syllabus
  2. Weekly Topics
  3. Assignments
  4. Online Resources
  5. IT 280 Forum

Refresher: HTML, XHTML & Validation

Elements and Attributes

Element
From dictionary.com:

"An element is a document structuring unit declared in the DTD. The element's content model is defined in the DTD, and additional semantics may be defined in the prose description of the element." Source: XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition); W3C Recommendation 26 January 2000, revised 1 August 2002: Section 2.2. General Terms

Elements are the basic components of the HTML document. Some examples are the document's HEAD and BODY.

Elements are not the same thing as TAGS, which are the symbols used to define the elements in source code. (Think of the difference between numbers and numerals. There is only one number two, which is represented using numerals such as 2 or II.)

Tags in HTML are distinguished by paired angle brackets <>.

Most elements are written with a pair of starting and ending tags, for example <head></head> or <body></body>.

Attribute
From dictionary.com:

"An attribute is a parameter to an element declared in the DTD. An attribute's type and value range, including a possible default value, are defined in the DTD." Source: XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition); W3C Recommendation 26 January 2000, revised 1 August 2002: Section 2.2. General Terms

Attributes specify the characteristics of elements. They are written in the tag, after the element symbol, for example <body id="page1">.

HTML 4 documents

An HTML 4 document is composed of three parts:

  1. A line containing HTML version information,
  2. A declarative header section (delimited by the HEAD element),
  3. A body, which contains the document's actual content. The body may be implemented by the BODY element or the FRAMESET element.

Whitespace (spaces, newlines, tabs, and comments) may appear before or after each section. Sections HEAD and BODY should be contained within the HTML element.

Here's an example of a basic HTML 4 document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
      <TITLE>My first HTML document</TITLE>
   </HEAD>
   <BODY>
      <P>Hello world!
   </BODY>
</HTML>

Many writers omit the DOCTYPE declaration. The browser has to guess what version to use. If it guesses wrong, the document may not be rendered the way the author intended.

Notice that in HTML 4.01, the ending tag for a paragraph (</P>)is optional.

XHTML documents

The beginning of an XHTML document is a little more complicated.

DOCTYPE declaration

To be a valid XHTML document, it must have a DOCTYPE declaration. There are three possibilities in XHTML 1.0.

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

The most rigorous form of the 1.0 standard. Required clean structural mark-up, free of any markup associated with layout. W3C's Cascading Style Sheet language (CSS) will handle font, color, and layout effects.

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

A modified version that allows some use of HTML 4.01 for compatibility with older browsers.

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

A modified version for documents that use frames to divide the window.

XHTML 1.1 is the most recent version. The declaration for XHTML 1.1 is:

    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.1 Frameset//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

XML declaration

An XML declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16. (More on these in a later class.) A typical XML declaration looks like:

  <?xml version="1.0" encoding="UTF-8"?>

Example

Here is a complete short XHTML document.

  <?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html 
       PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
  <html>
    <head>
      <title>XHTML Example</title>
    </head>
    <body>
      <p>The body is almost the same.</p>
      <ul>
        <li>A list item!</li>
        <li>A list item!</li>
        <li>A list item!</li>
      </ul>
    </body>
  </html>

The tags are all in lowercase, and the paragraph has an end tag.

Alternative Example

Internet Explorer 6 has a flaw. It will not recognize the DOCTYPE if the XML declaration (or anything else) comes before the DOCTYPE declaration. But if you skip the XML declaration tag, the validator will complain that there is no language encoding specified.

The fix is to specify the language in a META element. The tag should be in the HEAD.

    <meta http-equiv="content-type" content="text/html; charset=character-set" />

Here is a short XHTML document using that tag .

  <!DOCTYPE html 
       PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=character-set" />

      <title>XHTML Example</title>
    </head>
    <body>
      <p>The body is almost the same.</p>
      <ul>
        <li>A list item!</li>
        <li>A list item!</li>
        <li>A list item!</li>
      </ul>
    </body>
  </html>

Validation

Checking a document against a specific standard is called validation. In the case of formally defined languages such as HTML and XHTML it can be carried out automatically. The W3C has a markup validator at http://validator.w3.org/. You just enter the URL of your published document. If you have a local file that is not yet published, you can upload the file for validation.

The Web Developer Toolbar extension for Firefox has tools for validating the page that is currently being displayed in the browser. The report opens in a new tab. Note: If you have a home firewall, you may need to turn off the "privacy protection" to use this tool.

Advice

Essential HTML structural tags:

Structural diagrams.

The elements in an XHTML document must be in the proper relationship to each other. If they are correctly nested, you can draw diagram which shows the inner elements as branches from the outer ones.

In Class Lab Activity & Homework: Set up your homework directory and correct a document. Due by next class meeting

Your task

In class, work with this document with validation errors.

  1. Make a copy of it.
  2. Correct the page so that it validates (not just tentatively, either), but without changing its essential content and appearance. (Ask if you are not sure about something.)
  3. Once the document validates, create a tree diagram of the HTML structure (pencil and paper).
  4. Create a subdirectory (folder) named IT280 in your public_html directory on wyrd.hood.edu.
  5. Upload the corrected document into your IT280 directory on wyrd.
  6. Create an index page for your IT280 directory. It should:
    • Be valid XHTML 1.0 strict
    • Provide some information about its purpose.
    • Serve as a table of contents for your work for this course
    • Evolve as the course progresses to demonstrate your master of the topics we are covering.
  7. Include a link to the corrected document in your Table of Contents.

Deliverables - Due next class meeting

  1. The designated IT 280 subdirectory in your public_html directory on wyrd.
  2. The index page (with Table of Contents) in that subdirectory.
  3. The corrected document .
  4. A working link to the in your Table of Contents.
  5. Paper hard copy of the tree diagram. Be sure it is legible and your name is on it.
  1. IT 280 index
  2. wyrd.hood.edu
  3. cs.hood.edu
  4. CS Forums
  5. Blackboard
Comments to: chang@hood.edu
Last Modified: 24 January 2008. 04:19
Valid CSS! Valid XHTML 1.0!

 

Hood College Department of Computer Science: Course materials © 1997-2006 by Elizabeth Chang.