Sites from Scratch

A Simple XHTML Page

Introduction

This article introduces the requirements for starting to effectively use CSS for positioning (sometimes referred to as CSS-P). There are no completely accurate WYSIWYG tools for using CSS-P. Therefore, we will need to learn to code our requirements

First, though, there are a number of steps to establish our site :

  1. create a directory for your website
  2. create a HTML file in that directory called index.htm
  3. create two sub-directories called css and img
  4. create a CSS file called main.css and place it in your css directory
  5. open both index.htm and main.css for editing

A Basic XHTML page

If you created your HTML file in Dreamweaver MX, it should already have some simple code in it. When you switch to Code View, it probably looks something like Figure 1

Figure 1

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD
    HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
  7.  
  8. </head>
  9.  
  10. <body>
  11.  
  12. </body>
  13. </html>

We will be coding XHTML 1.0 Strict rather than HTML 4.01 Transitional, so we need to replace the first three lines. When you want to find out more about that, you can read this article : Fix Your Site With the Right DOCTYPE!, but to be honest, you don't need to know about that right now. All you need to do is replace all the current code with the code in Figure 2

Figure 2

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD
    XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/
    xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
  5.  
  6. <head>
  7. <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
  8. <meta name="author" content="Lachlan Hardy"
    />
  9. <meta name="created" content="01/01/04"
    />
  10.  
  11. <title>First Website of Lachlan Hardy
    </title>
  12.  
  13. <link rel="stylesheet" type="text/css"
    media="screen" href="css/main.css" />
  14. </head>
  15.  
  16. <body>
  17.  
  18. </body>
  19.  
  20. </html>
  21. Download this code: 01-fig01.txt

Okay, now we know that we're all starting from the same place. Save your file and we'll take a look at the code. As I indicated earlier, the first few lines relate to DOCTYPE and you don't need to know about that yet. Line 6 contains the <head> tag. This indicates the beginning of the Head element, which stores information about the current page like its title and any meta-data. On line 14 you'll see the </head> tag which indicates the end of the Head element

In between are a number of other elements which we will discuss in detail later. Briefly though, the first three are Meta elements and they store meta-data about the file. The first of these is related to the DOCTYPE so we will leave it for later, and the other two you should modify to include your own name and the appropriate date. There are many different types of Meta elements which can provide all sorts of information to search engines and other programs to let them understand your webpage, which ones you use depends on what you want to achieve. For now, though, those three will do

Line 11 is the Title element. This is the title of your webpage as it will appear in the title bar of your browser. You should this one to reflect your own name. Line 13 requires no changes and references the CSS file you created earlier, so that the two files are associated

There are 3 more XHTML tags in our code. The </html> tag on line 20 indicates the close of the HTML element begun on line 4, and the other two indicate the Body element

All of the above code is merely set-up. If you were to open the file in a browser now, it would be a completely empty page, with a title in the browser title bar. So on line 17 add the code <p>This is a paragraph</p> and save your file. Now open it in your browser

You have now created the basis for your web page. Next we will go over some Basic Text Tags and begin styling them with CSS