Building your own website with XHTML and CSS - Some basics
February 19th, 2008 · Filed under ArchivesIn the introduction of this series we talked about separating the content of your website from the presentation by creating the content in XHTML and style it with CSS.
Tools
Before we continue, let’s make sure we have the right tools to get this done properly. You actually don’t need much:
- A plain text editor - Plain text editors save whatever you typed in them just as you typed it, without any additional styling or reformatting. If you open a file that you created in a plain text editor in any other editer, you should see the same content you wrote.
The most common plain text editor for Windows is Notepad. Microsoft Word is NOT recommended, because it saves a lot of style info with the file by default. Linux and Mac operating systems have their own default plain text editor, depending on the desktop that’s being used. - A web browser - You will need to be able to view your work somewhere. And since we are building web pages, which visitors will view in a browser, we should be able to check our work in a browser.
Since stats show that the majority of web users still uses Internet Explorer, it would be good if you had access to this browser to check your work, because things may be look different in IE, and we want our site to look the same in any browser. For instruction on installing Internet Explorer on Ubuntu, read this article.
Anotomy of a web page
If we want to make our website standards-compliant, we will need to use the proposed scheme to setup the web page. We’ll start from the top:
The DTD
The Document type Definition tag is actually simply telling the user agent which version of (X)HTML the page is written in, by linking to a file with the rules to be used when parsing the elements on the page. Our DTD will look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
The basic scheme
Let’s look at parts of a HTML page:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
All of the HTML code is put within the <html> and </html> tags.
The head section (between <head> and </head>) contains information that will not be displayed on the web page. Some parts contain information that is used by the user agent (the title tag for instance holds information that will be displayed in the title bar of the browser). Other parts link to other files, for further processing or presentation of the content, like stylesheets or Javascript files that are used to get things done.
The head section usually also contains meta information, like the language in which the page is written (English, Dutch, etc), and keywords and description of the page.
The actual content of the web page is placed between the <body> and </body> tags. Whatever you put here, will be processed to be displayed.
I thought it was important to go through the basic structure first before we write our first page. We will do that the next time.
Trackback URL for this post:
http://rehuel.com/2008/02/19/building-your-own-website-with-xhtml-and-css-some-basics/trackback/
Grab my 
Get updates by 
Follow me on 
My profile on 
Connect on 
My favorites on 
