DES 3006 - Web Design II
Week One | Part One: Strict HTML
The Strict HTML Document.
There are several skills you will learn in this course. The first is the ability to create Web pages that are valid under the Strict HTML Document Type Definition.
The Document Type Definition, or DTD, is a declaration made at the beginning of your Web page that tells the browser how to interpret its contents.
The Strict DTD implies that your code will be well-formed and valid according to rules established by the World Wide Web Consortium (WC3). This is an important habit to learn, as the Strict DTD is the de facto standard for HTML design.
Many HTML editing programs allow you to chose your DTD when you start to build a new Web page. Some programs like Dreamweaver select the Transitional DTD as the default. The Transitional DTD allows for more errors in code writing and for the use of deprecated elements. In this course, we will steer away from the Transitional DTD in favor of becoming better code writers.
Strict Coding Tips.
Coding your Web page for the Strict DTD does not really require more work; you just have to pay attention to the six components that comprise the Strict DTD standard.
1. Your page must have a Document Type Definition.
The easiest way to meet this requirement is to copy and paste this bit of code into the beginning of all your Web pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Of course, you could just as easily make it a Transitional declaration --- in which case you won't have the worry about the next five requirements!
2. Documents must be well-formed and valid.
You are familiar with <tags> ... those instructions you put within brackets that mark up your page. Every tag is actually two tags, <b>one that opens it and ...</b>one that closes it.
A well-formed tag adheres to the open/close tag rule. So, too, should an entire Web document.
Stand alone tags (e.g. <hr>, <br>, <img>) are *deprecated* under the Strict HMTL DTD and all XHTML DTDs. (See 5 below for details.)
A valid document is one that includes:
- The Document Type Definition.
- The <head> </head> tag enclosing all your head content.
- The <body> </body> tag enclosing all your body content.
- A closing </html> tag at the very end of your document.
So, a well-formed and valid document looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head> <title>This is My Page Title</title> </head>
<body> <p>All your Web page body content (headings, paragraphs, tables, etc.) go here.</p> </body>
</html>
3. elements and attributes must be written in lower case.
An element could be <p> or <td>, or any number of tags. An attribute determines its display. For example:
<td colspan="3">.
In this example, td is the tag and colspan is the attribute.
Please note: Dreamweaver used to code all elements and properties in CAPS by default when you were in the Design View. That's why it is important to write HTML in the Code View.
4. All values must be "quoted".
In the example <td colspan="3">, "3" is the value.
Putting quotes around the value tells the browser following a Strict DTD not to display that information as actual text in the body of your document. (Unless, of course, it's the image alt=" " or a href title=" " attribute and value. Then the browser *will* display this information in a cursor box.)
5. No more stand alone tags.
You have probably used <br> many times to create extra space between lines of text. It is proper to use it in a Transitional DTD. Not so with the Strict DTD.
Compared to other tags like <b>bold</b>, it doesn't follow the same open/close tag rule, does it?
The Strict DTD corrects this by having you add a space and a ( / ) just before the end bracket to close the tag. For example:
<br /> <hr /> <image src="images/picture.jpg" alt="My picture" />
The tag is opened and closed within the same line, creating well-formed HTML code which adheres to the Strict DTD we will use for this course.
6. Watch your nesting order.
Also known as document symmetry, nesting order is simple, logical, and easy to mess up. One way to remember how to do proper nesting order is to repeat this little mantra:
"First opened, last closed."
The proper HTML would look like this:
<p><strong><em>"First opened, last closed."</em></strong></p>
A good habit for hand coding HTML is to close the tag at the same time as you open it, and then to work inside the tag you created. Some HTML editors like HomeSite can be set to do this automatically.
WC3 Document Validation: The Acid Test.
The W3C developed a number of validators on their Web site to help Web developers write better code. These applications look at the markup code on a page and apply the proper rules according to the document type in use.
The first few times you use it will seem frustrating as you learn to eliminate inappropriate bits of code, but the result is better coding practices for you (and a whole lot less proof work for me!).
Firefox comes with W3C validators built in with the Developers extension, but it isn't as accurate as the online W3C validator. For this reason I've added a link to the validator.
Visit the W3C validator and create a bookmark for future use.
Please note: No assignment is complete until you can put the little validation graphic on your Web page.
I'll repeat that:No assignment is complete until you can put the little validation graphic on your Web page.