Beginning with the Basics
Now that you have the file unzipped, you’ll see that it is a single index file with a images folder. That was not how it was orginally, as it included duplicate renamed pages (named for each of the links), so I just deleted those out since we are going to change the code that’s duplicated anyway.
So, first of all, I want to tell you what our primary goal is going to be: We are going to make this page validate as HTML 4.01 Strict. What is that? Well, you’ll see as we go along, but that is the highest standard for HTML (not XHTML) that the W3C follows currently.
Now, we first of all have to lable our document so that we know, and a validator software can recognize, that this webpage will be HTML 4.01 Strict. Doing this is called adding the Document Type Definition (DTD).
For now, open up the webpage in your plain text editor. Now you are going to enter the following chunk of code as follows:
Put this…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Here…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="description" content="insert description here">
…..
Actually, while you are right there, go ahead and strip out all of the generator stuff that is unimportant now because we are not using FrontPage and really don’t care to see it. Make your code look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Nightfall</title>
….
Now, save the page, and then let’s try and validate it and see how many errors we come up with, shall we? Point your browser to http://validator.w3.org/, and in the ‘Validate by Upload’ section, select your index page and click ‘Check.’ When I did this, it returned the following:
Result: Failed validation, 45 errors
Ugh. Well, that’s quite a few errors (trust me, I’ve seen much much worse – in the thousands – for a highly developed page). I’m betting that you probably looked down on the results page more and paused a bit if you are unfamiliar with the new standards. The first one should catch the eye of most developers who have not been coding in this new way yet. It says:
Line 12 column 14: there is no attribute “BGCOLOR”.
Which is, of course, a somewhat curious way to phrase it, but it’s honestly the best way to think about it. Yes, there is a bgcolor tag — but it’s better in the long run if you forget that it exists.
However, the vast majority of the errors are those that are displaying as
element “FONT” undefined.
The notorious <font> tag — another tag that should disappear from our memories. So shall we fix those first? I think so. Let’s move on to learning how we’ll do what we used to do with the <font>, but in a way that is following standards — and subsequently make those errors go away.
Intro <– Go Back -OR- Continue on: Step 2
~Nicole
