Resources Menu


HTML/CSS Tutorials

Page Structure

In this section:

Building a bare-bones page:

The skeleton for every web page you create should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>

  </head>
  <body>
	<!-my website content goes here (this is a comment)-->
  </body>
</html>

The first item is called a Document Type Definition (DTD).

DTD Tag:

The DTD is one of the most important tags in a web document. The <!DOCTYPE> is the very fist tag in your document, it comes before the opening <html> tag. The DTD tag tells the browser what version of HTML the document is using. This tag should not be closed at the end of the document.

There are three different DTD tags used in HTML.

The most common <!DOCTYPE> tag to use is the Transitional DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The transitional DTD is good for beginners as it allows you to validate a document less stringently.

"This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required." taken from w3.org

Another <!DOCTYPE> tag you will see is Strict. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

"This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required." taken from w3.org

One Last <!DOCTYPE> tag you will use is Frameset but we're not going to cover frames in these tutorials. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

This is the HTML 4.01 Frameset DTD, which should be used for documents with frames. This DTD is identical to the HTML 4.01 Transitional DTD except for the content model of the "HTML" element: in frameset documents, the "FRAMESET" element replaces the "BODY" element. taken from w3.org

REMEMBER - the <!DOCTYPE> tag you will use the most is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML Tag:

The HTML tag tells the browser what language the page is written in. The opening <HTML> tag should always be the second line of your document, right after the DTD. The closing line of your document should always be your closing tag.

HEAD Tag:

The <head> tag comes after the opening <html> and before the opening <body> tag. The head tag is used to specify information about your Web Document. Anything in the tag will not be displayed by the browser.

The most common tag you will find within the <head></head> of the page is the <title> tag. The <title> tag will give your document a title; like so:

<title>Webpage Title</title>

This title is placed in the colored bar at the very top of every web browser.

META Tags:

You can also add Meta Tags to the <head></head> section of your page. Meta Tags are used to give search engines more information about your web page. Search Engines look at these tags to help users find your page when they perform a search.

Meta Tags add information like:
Keywords, your page generator, a description of your page, author, copyright, and expiry.

Meta Tags are coded like this:

<meta name="keywords" content="Usually comma separated keywords that describe your page go here">
<meta name="description" content ="A sentence-based description of your page and what it contains goes here">
<meta name="generator" content ="What program(s) did you use on your page?  They go here">
<meta name="author" content ="Your name goes here">
<meta name="copyright" content ="Copyright 2006 Your Name">
<meta name="expires" content ="the date you wish for the document to automatically expire in a Search Engine's Database">

You do not have to use Meta Tags, they are optional, but very useful. You can use as many or as few as you like.

LINK Tag:

You may also wish to add one or more <link> tags to the head of your document. The <link> tag defines a relationship between documents. The most common usage of the <link> tag is to define a relationship to an external CSS or Javascript file.

<link rel="stylesheet" type="text/css" href="http://www.myDomainName.com/css/style.css">

For more on links click here.

Build your own!

Here's my basic page structure - now you build yours. Open your text editor, paste my code in, and then modify it to suit your purposes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
         <title>My dog Billie-Mae</title>
         <meta name="keywords" content="billie-mae, dog, mutt, canine, pet, friendship, animal, rescue">
         <meta name="description" content ="Pictures and stories about my dog Billie-Mae and the funny things she does">
         <meta name="author" content ="Andrea">
         <meta name="copyright" content ="Copyright 2006 Andrea">
         <link rel="stylesheet" type="text/css" href="css/billie-style.css">
   </head>
   <body>
         <!-this is a comment - I will put my page contents here -->
   </body>
</html>

Once you have your page structure done, it is a good idea to save it as a template. Just name it 'template.html' and every time you start a new webpage open your template and then rename it to an appropriate filename. You should edit your meta tags to reflect the content of the page but at least you don't have to type out the whole works again. Some editors will have a default template that already has several of these elements laid out for you.




Web Applications

Hosting Solutions

Email Marketing

Online Marketing

Help

Bravenet

Partner Tools


All contents copyright 1997-2012 Bravenet Web Services Inc.