If you've ever looked at a busy city street... cars flying this way and that... people walking around and crossing those streets... it's almost a wonder that they all don't just crash into each other. The reason they don't (or don't very often) is because of standards... otherwise known as traffic laws.
Well, HTML is much the same way. Over the years, standards have developed that, while not "laws", are guidelines for HTML structure and well formed web pages so that things work as expected. The current HTML standard (or specification) is HTML 4.01. There are three variations of this standard...
The flavor of HTML that we have been learning here is HTML 4.01 Transitional. It's a less strict HTML specification that allows more traditional markup. Not to mention it's a whole lot easier for beginners to learn.
HTML 4.01 Frameset is the specification that deals with framed pages and we'll get into that in Frames Tutor.
HTML 4.01 Strict seeks to completely separate presentational markup (colors, fonts, borders, alignment, etc.) from structural markup (paragraphs, lists, line breaks, tables, etc). This is accomplished using somewhat limited and rigid HTML markup for the document structure, and CSS (Cascading Style Sheets) for presentational items.
Ok Joe, that's all well and good, but what does that have to do with the HTML I'm learning today?
Good question. It's a perfect introduction to learning about Document Type Declarations and Validation.
Here's a simple HTML document...
<html> <head> <title>My big ole bad page!</title> </head> <body> Hello Joe! </body> </html>
Now add a DocType declaration at the very top...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My big ole bad page!</title> </head> <body> Hello Joe! </body> </html>
This is the Document Type declaration for HTML 4.01 Transitional. It has two purposes.
One, to tell web browsers or other "user agents" which specification the document is using. (That said, for nearly all normal web browsing, browsers can easily do without it and process your HTML in a perfectly proper manner.)
And two, more importantly, it helps with validation.
A HTML validator is nothing more than a software program that scans your HTML markup looking for errors. In order to work properly, you must first tell the validator which specification you wish to conform to. In our document above, we are telling the validator to check our document against the HTML 4.01 Traditional specification.
The next thing you need is a validator. The most popular validator can be found at web site of the World Wide Web Consortium... the folks that write the specifications.
To validate your HTML, first open validator.w3.org in another browser window. You'll find three options for input. Find the section labeled "Validate by Direct Input". Now copy the HTML code above into that box and click the Check button. The result should be valid HTML 4.01 Transitional.
Now, let's play a little. We'll deliberately create an error in the HTML document. We'll wrap "Hello Joe!" in two closing bold tags...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My big ole bad page!</title> </head> <body> </b>Hello Joe!</b> </body> </html>
Now copy and paste this altered HTML doc into the validator and check it. You'll note it tells us that there are errors. You can see how such validation can be quite useful.
I suppose I should be very clear here... a validator ONLY checks for structurally correct HTML and proper attributes against a particular specification. It doesn't check for broken links, it doesn't assure that your page will look good at all resolutions, it doesn't make sure your images can be found and it doesn't make sure that you don't use dark blue text on a black background. Think of a validator as an inspector that certifies your automobile has 4 wheels and doors that open, but has no control over how you drive...
|So, you want to make a Web Page!|
|Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26|
|Index & Quick Reference Table of Contents ColorPicker BareBones HTML Guide|
|Color Charts Simple Font Widget Practice Exercises Where are my images?|
|Print version of this tutorial available - Get the PageTutor Book & CD|
|Tutorial reposted with permission, courtesy PageTutor.com|