The Basic Document

Ok, so this is the first thing that you will come across when wanting to start to make your own sites. There are several types of documents you can have. HTML 4.0.1 Transitional, HTML 4.0.1 Strict, XHTML 1.0 Transitional, XHTML 1.0 Strict and XHTML 1.1. Your next problem is choosing which one to use...

Where to start?

Each of the different documents has a different doctype to show the browser how to display the site and which language you are using. At the top of each document is this unique doctype. If you use something like Dreamweaver it will do the basic template document for you and add in the appropriate doctype.

The basic document is as follows: (For this example I have used XHTML 1.1)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Understanding the document

OK so now you can see the basic document that you are given so what do you do now? Well, first of all you need to understand what goes where and where to start.

All of your main content will be placed inside of the <body> and </body>. If you place the website content outside of these tags it simply wont work. So now what? Well, first of all you need to start making the grounds for your site.

If you want to make a good website you will have to try and learn to do it without using tables. If you have ever used a program like Excel you will use tables to group data in an area, web design can be done much like this using tables, the draw-back with using tables is that they are hard to change the shape etc of without effecting anything else, but using a different method called CSS (Cascading Style Sheets) this will give you greater control over where you want to place your content, navigation, pictures, videos etc.

Closing tags

With XHTML all the tags should be closed, if a tag isn´t closed in XHTML it will either generate an error, if using firefox, or simply not display. Although older versions of HTML lazily allowed some tags not to be closed, latest standards require all tags to be closed. This is a good habit to get into anyway.

Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The break tag for example, looks like this : <br />. We will come across these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag – content – closing tag.

Attributes

Tags can also have attributes, which are extra bits of information (Which we touched on briefly in the home page). Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Content</tag>. We will come across tags with attributes later.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' are tags, '<title>Matthew Hillman</title>' is a title element.

Divs

Divs are the main part of the website´s layout. Think of it like a box, you will first start with your outer box (Div) and call it a name that you remember. Most people call it container, so you end up with your first div like this <div id="container"> this first div will sit just under the body tag and the end of the conainer div will go right at the bottom of the page just about the HTML and Body closing tags.

So, now you have your "containing" box for all of your other divs to go into. You don´t have to have a container it depends on the site style that you are going for. Ok, next you need to make sections for your header, navigation, content and footer (and other sections should you so need them).

General layout

This is a very basic version of how a div layout should be done, remember its your choice which language you choose to go for but we have used XHTML 1.1 for our examples as it forces you to close all tags and have cleaner code. You can have as many sections as you want for your main code but remember, the more sections you have the more work you will have to do to style it!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header">This can be filled with text or an image</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<p>Content goes here</p>
</div>
<div id="footer"><p>Matthew Hillman © 2008</p> </div>
</div>
</body>
</html>