Creating Structured Documents

No doubt you’re itching to get your hands into the work and actually create a structured document. You will now learn to create a structured HTML 4.01 document as well as an XHTML 1 document.

Authoring a Structured HTML Document

Open your favorite web design tool. You can use anything you like as long as it allows you to work by hand and, when you save your changes, your changes remain intact. You can also use any plain text editor such as Notepad or SimpleText.

  1. Begin with the DOCTYPE declaration. In this case, I’ve chosen HTML 4.01 Strict because I don’t intend to have any presentational elements or attributes within the document, just the structure and content:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
  2. Add the root element. In this case, it will be html. Note that I’ve added both the open and closing tags:

    <html> </html>
  3. Within the html tags, add the head element, along with the title:

    <head> <title>Structured HTML Document</title> </head>
  4. Add the body element below the closing </head> tag:

    <body> </body>

Listing 1.5 shows a complete HTML 4.01 Strict Document that contains all the necessary components to begin working with HTML 4.01.

Listing 1.5: A Conforming HTML 4.01 Strict Document Template

start example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Structured HTML Document</title> </head> <body> </body> </html>
end example

Now that the necessary structural components are complete, you can add some content and structure according to the logical ideas described earlier in this chapter. Listing 1.6 shows my HTML 4.01 document with content. You can follow my lead, or be creative and add your own content.

Note 

Be sure to use only structural markup when managing your content. Do not use visual presentation such as color, alignment, text styles, and so on. If you aren’t sure about something, you can either try to look it up within the DTD, or better yet, wait till the end of this section, where you’ll walk through validation. If you’ve got an error, the validator will let you know.

Listing 1.6: A Conforming HTML 4.01 Strict Document with Logical Styles

start example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Structured HTML Document</title> </head> <body> <h1>weblog</h1> <p><em>left turn</em> <h2>August 17, 2002</h2> <p>Sitting at the light at Fort Lowell. I’m facing East waiting to take a
left turn onto Campbell. Boys in a car next to me, shirtless in the summer
heat. The driver is tall, built. I can smell their beer sweat from here,
hear hardcore music pound. <p>Not meaning to, I find myself staring at the young boy in the passenger
seat. He looks like someone I once knew. <p>He sees me looking. Suddenly, he comes up out of his seat in a leap of
ferocity. Or maybe, insanity. He throws himself across his friend, he’s
reaching out the window for me, screaming. <p>The light turns green so his friend takes off and I turn left.
<hr> </body> </html>
end example

Save the document, as you’ll be validating it in just a bit. Figure 1.12 shows the unstyled page. In Figure 1.13, you can see my content here as viewed from within my website.

click to expand
Figure 1.12: Unstyled markup

click to expand
Figure 1.13: The styled entry at Molly.Com

Creating a Structured XHTML Document

The process here is essentially the same, although there are specific differences as noted earlier in terms of the XML Prolog and the XHTML syntax in use.

As with the prior exercise, open your favorite editor and begin a new document.

  1. This time, you’ll begin by adding the XML Prolog. Remember, this is recommended but not required, and in most cases it’s best to leave it out of a document to avoid browser rendering problems. However, here you’ll learn to include it.

    <?xml version="1.0" encoding="UTF-8"?>
  2. Now add the DOCTYPE declaration. In this case, I’ve chosen XHTML 1.1, which is based on the XHTML 1 Strict DTD:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. Now, add the root element. Note that I’ve added both the open and closing tags:

    <html> </html>
  4. Within the opening html tag, add the XML namespace for XHTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
  5. Within the html tags, add the head element, along with the title:

    <head> <title>Structured XHTML Document</title> </head>
  6. Add the body element below the closing /head tag:

    <body> </body>

Save the document for validation. Listing 1.7 shows a complete XHTML 1.1 Strict Document that contains all the necessary components to begin working with XHTML 1.1.

Listing 1.7: A Conforming XHTML 1.1 Document Template (with XML Prolog)

start example
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Structured XHTML 1.1 Document</title> </head> <body> </body> </html> 
end example

Now I’m going to add the same content to this document that I did to the HTML 4.01 document, but I will modify the document to be in conformance with XHTML. In this case, that means closing the non-empty paragraph elements and properly terminating the horizontal rule in accordance with XHTML.

Listing 1.8 shows the results.

Listing 1.8: XHTML 1.1 Document with Content

start example
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Structured XHTML 1.1 Document</title> </head> <body> <h1>weblog</h1> <p><em>left turn</em></p> <h2>August 17, 2002</h2> <p>Sitting at the light at Fort Lowell. I’m facing East waiting to take a left turn onto Campbell. Boys in a car next to me, shirtless in the summer heat. The driver is tall, built. I can smell their beer sweat from here, hear hardcore music pound.</p> <p>Not meaning to, I find myself staring at the young boy in the passenger seat. He looks like someone I once knew.</p> <p>He sees me looking. Suddenly, he comes up out of his seat in a leap of ferocity. Or maybe, insanity. He throws himself across his friend, he’s reaching out the window for me, screaming.</p> <p>The light turns green so his friend takes off and I turn left.</p> <hr /> </body> </html>
end example

Validating Your Documents

In this section, you’ll use the W3C validator to test your documents. First, you’ll test the HTML document, then the XHTML document. Then, you’ll do some validation tests on your own.

Validating the Document

The W3C validator can validate a document online or by upload. To validate your document online, you’ll first need to place it on a web server. To validate your document by upload, be sure you know the name and location of the document.

Then, follow these steps:

  1. Point your web browser to http://validator.w3.org/.

  2. If you are validating an online document, enter the address of your document in the Validate by URI address field. If you are uploading your file, click the Upload Files link and add the file from your hard drive. Leave all the other options as they are.

  3. Select the Validate This Page or Validate This Document button. The validator will now compare your document to the DTD you described in the document.

First validate your HTML document, then repeat this step with your XHTML document. You may find that the validator returns errors as well as warnings. An error is a problem with the markup that must be fixed for the document to be valid. A warning provides you with information that might assist you in improving your document. Warnings will not affect your document’s validity.

If any errors are reported, examine what they are, troubleshoot your document, make any necessary changes, and revalidate until your document passes the validation test.

start sidebar
Encoding Warnings

If you are uploading files, you will generate a warning with the HTML example here regarding proper encoding.

Encoding is ideally set on the server, so this error should not appear when you are validating from an online source, assuming your server is properly configured.

Note that a warning of this nature does not interfere with your document’s validity; it’s simply a means of alerting you to a potential problem.

Another means of adding encoding is to place the proper encoding information into a meta tag. The document using the XML prolog should not generate this warning on upload or online test because the prolog contains the encoding information. In this case, the encoding is the ISO character set for Latin-1 characters.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Setting your encoding in a meta tag will ensure that you do not receive this warning.

end sidebar

Validating Other Documents

At this point it will serve you well to begin validating other documents that you have been working on recently. Find a document that you know might be problematic (has font tags, uses nested tables, uses proprietary browser tags—anything like that will do). Then, try validating the document with a range of DTDs.



Cascading Style Sheets(c) The Designer's Edge
ASP.NET 2.0 Illustrated
ISBN: 0321418344
EAN: 2147483647
Year: 2005
Pages: 86

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net