Content Structuring Exercise - Page 8
September 25, 2002
Notice in Listing 1.2 that I've declared the document type through the
DOCTYPE tag in the first two lines of markup. A valid, well-structured
document will declare what version of HTML the document type definition (DTD) is
using.
Listing 1.2 Sample of Properly Marked Up Content
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
-<title>Web Design Pad - a better mousepad by design for
Web designers, developers, and builders</title>
</head>
<body>
<h1>Web Design Pad</h1>
-<p>A better mousepad by design for Web designers,
developers, and builders</p>
<ul>
<li><a href="benefits.html">Benefits</a></li>
<li><a href="faq.html">Frequently Asked Questions</a></li>
<li><a href="press.html">Press and Testimonials</a></li>
<li><a href="https://secure.designpad.com/order.html">
Order Today!</a></li>
</ul>
<h2>Benefits</h2>
<p>Not just another mousepad. We packed this unique mousepad
with functionality by placing those sacred Web colors in an easier
and faster to comprehend arrangement. And the Web Design Pad looks
awesome on anyone's desk.</p>
<h3>The Designs Go Faster on Color Wheels</h3>
<p>The color wheel format presents colors in an orderly
progression, enabling the user to visualize the sequence of color
balance and harmony. Precise hexadecimal values are printed directly
on each of the colors. The RGB=HEX conversion scale is wrapped around
the edges of the mousepad. This helps Web developers choose
compatible Web-safe colors and reference correct hexadecimal coding
instantly.</p>
<h3>Keep Tabs on Your Colors</h3>
<p>Ever try to find a simple shade of green in other Web color
devices? We did on several occasions for a recent Web project. What
took seconds with the Web Design Pad took us ages on other mousepads
and Web editors.</p>
</body>
</html>
This code allows a browser that is rendering the page to know how to properly
render the page. Remember that we are breaking away from traditional design, and
one of the things we have to do now as Web builders is ensure that our Web pages
validate. To validate our code, a validator like the one at W3C (see
http://validator.w3.org/)
needs to know what HTML specification you are coding in. The same goes for the
browser. As the browser tries to render your Web document, it uses the DOCTYPE
tag as a guide for tips on how to render your content.
The current generation of browsers actually has two rendering engines. These
browsers render out a page in two modes: Strict or Quirks. If you use the
DOCTYPE for current flavors of HTML or XHTML, you are going to get your
content rendered in the way that's more closely spelled out in Web
standard, even if HTML hacks stop working. This state of rendering content is
called Strict mode, or Standards mode.
On the flip side, if a browser doesn't understand the DOCTYPE,
the rendering engine goes to Quirks mode—a state in which the browser
renders content in a manner that Web developers are used to seeing from older
browsers, and all.
For More Information - For more information about how DOCTYPEs
turn on a browser's Strict mode or Quirks mode, look at these Web pages:
Knowing the DOCTYPEs to use becomes important when considering how
we want browsers to render our content. Here is a listing of valid DTDs for HTML
4.01:
This DTD contains recommended HTML elements without the deprecated
elements, such as FONT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
This DTD contains the deprecated tags (see Appendix C, "HTML
4.01 Reference"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
If you use a frameset, this is the DTD you want to use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> For XHTML, which requires stricter markup syntax, these are the valid
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">
To check whether the code validates, download the file from the book's
Web site and see
http://validator.w3.org/.
Better yet, if you have your own Web site, run your Web pages to the
validator.
CSS: Renegade Rehabilitation - Page 7
Designing CSS Web Pages
Include Navigation - Page 9
|
