About Me Programming Scripts / Tutorials My Musical Instruments My Audio Archive

12:22:28 AM

Thursday

Sep 09

Su	M	Tu	W	Th	F	Sa
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	1	2
3	4	5	6	7	8	9

Play My Typing Game

View Some of My Artwork

The Boilerplate and the DOCTYPE

Many different versions of the HTML specifications have been released over the years, meanwhile different browsers were supporting some parts of the specification. It can be hard on a coder to know when some syntaxes are outdated and deprecated. When you blend code from different versions of HTML it is referred to as "tag soup"... it may render fine in your browser, but perhaps not on another. The World Wide Web Consortium, or the w3c which is based out of MIT, came up with with the DOCTYPE concept, which is the first line of web code the browser will read. It tells the browser what version of HTML the author of the web page had in mind when creating it and lightens the load on how the browser parses the HTML in to the visual representation you see. The w3c provides an excellent HTML Validator to check your web code against.

There was once a student from France staying at my parents house for a few days who told me he tried to load AdamFitch.com at home and it wouldn't display at all. He looked me right in the eye and said, "Don't write tag soup, mister! Validate your pages!".

All tutorials you find here should be for the xhtml transitional doctype in mind. Which is a blend of html4 and xhtml, almost both... but not quite. For the sake of simplicity I will probably refer to both xhtml and html coding as just html.

Here is the first line of code every page should have, or be similar to.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

Yeah thats a bit cryptic, basically its declaring the doctype to be xhtml 1 transitional from html 4, and to use the specification found at w3.org.

The basic skeleton of any web page is whats known as the boiler plate. Its just text, organized like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
                <title>The Title Of The Document</title>
                <meta name="description" content="When your webpage is found from a search engine, it could display a paragraph about the site.  That paragraph of information is found right here." /> 
                <meta name="keywords" content="This, is, a, comma, seperated, list, of, relevant, keywords" />
                <meta http-equiv="Expires" content="never" />
                <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
                <meta name="robots" content="INDEX,FOLLOW" />
                <meta name="robots" content="noodp" />
                <meta name="robots" content="noydir" />
                <meta http-equiv="imagetoolbar" content="no" />
                <link rel="shortcut icon" href="images/favicon.gif" />
        </head>
        <body>
                anything you want to create will go here inbetween the body tags.  
        </body>
</html>

There are more meta tags I could have written, but this is a good minimum - and then some. Actually the bare minimum should be like:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>The Title Of The Document</title>
                <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
        </head>
        <body>
                anything you want to create will go here inbetween the body tags.  
        </body>
</html>

Define the doctype, define the body's title properly and character set (iso-8850-1 allows for some fancy characters)

Read Previous:
Forms