Making a Website - Where to Begin

Alright, now to start on getting the layout of your site done. There is quite a bit to do to get your site set up. This section will include the code to start making your layout, menus and simple code and will contain other information to better explain the task at hand.

Before we get started, you may be wondering what CSS is. CSS stands for 'Cascading Style Sheets' which is currently the biggest styling language in web development. This language is decipricating a lot of HTML code and is making it easier to control a website by applying a style that can be used throughout the whole site. For example, this site only has one style sheet. If you want to have a look, check it out. You might recognise a few of the tags I used in it:
Click Here to View my Stylesheet.

Also, there are a few words I will use in the next three pages, so before you get confused, here they are:

Decipricate/Decipricated - I use this word to say that the tags have been replaces by another element and shouldn't use it, as it may not be recognised in the future.

Tags - This word is what I use to describe a complete piece of the code, for example:
<img src="image.png">

Element - This is what I use to describe the main part of the tag, for example:
<img src="image.png">

Attribute - These are the things that give style and link the tags, for example:
<img src="image.png">

Value - This is the variable option for each element which also contains the attribute, for example:
<img src="image.png">

Validator - There are many validators around. A validator checks your code for error and is helpful if the program you use to code doesn't point errors out. A validator also finds unneeded tags, attributes or values which don't work. There are three main !DOCTYPE statements which all have different effects, which I will explain later on, on this page in the !DOCTYPE section.

Quick Links

!DOCTYPE
<html>
<head>
<body>
Adding a Banner
Navigation Menus
Tables

<!DOCTYPE - RETURN TO TOP
First of all, what is !DOCTYPE? This is the code that is used to validate your website. Don't worry, it may seem, in the way I have written it, that it fixed your code automatically, but it just finds errors and lists them, instead of altering the code, so you can undo it if something goes wrong.
I don't think you need to remember these statements, but it could help. I usually just copy and paste it onto my page, as it's not too easy to remember, or build it into a simple template which I use for my sites.

!DOCTYPEs are placed at the very top of the page, even above the <html> tag.

The most suitable !DOCTYPE is "Transitional". Transitional !DOCTYPE is the !DOCTYPE which the validator checks through, while leaving some decipricated tags like <center>.
Below is the Transitional !DOCTYPE. Feel free to copy and paste it from my site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

The next statement I'll discuss is the "Strict" !DOCTYPE. This statement is the most picky of all the statements. It removes decipricated tags completely. Here it is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

The final statement is what is used if you decide to use frames in your site.
I don't cover framesets as they aren't completely necessary in making a site, but they can look great if you use them and can be very helpful. I would've written about them if I had got to work on this site earlier. The deadline is too close to dwell on large topics like frames.
Click here to learn about adding frames and framesets to you site.

Here is the !DOCTYPE statement you use if you use framesets:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">

<html> - RETURN TO TOP
This is a necessary element to use in your page. This goes at the very top of your page, but under the !DOCTYPE statement. This states that your page contains HTML code in it, so obviously, include it. Everything in your site is put inside this, as it states that the site is made from code. Make sure you add this tag at the start and the end of your site, like so:

<html>
<head>
<title>Website Title</title>
</head>

<body>
Content
</body>
</html>

<head> - RETURN TO TOP
The <head> tag is important. This code is where you put the <title> tag, <meta> tags and for linking style sheets to your pages, which are all important for a site. Nothing in the head element can be seen on the webpage.

<html>
<head> <title>Website Title</title> <link type="text/css" rel="stylesheet" href="stylesheet.css"> <meta name="author" content="Chris Conway"> </head>

<body>...

This is a great element, so I'll go over those three tag types inside the head tag.

<title> - This is where you put the title, which you will see at the top of the page in the program's label bar. For example, on this page the title element is this:

<title>Making a Website - Where to Begin</title>

Obviously, put your title between the tags and keep it as short as possible. Also, codes like <b> for bolding your heading doesn't work. The title is plain text and can't be visually altered.

<link> - Use this tag to link stylesheets to your site. This is necessary if you want to include CSS in your page. Here is an example, taken from this page, although, I shortened the address of the style.css as it's quite big:

The rel="*" tells the viewer's internet browser that the link element is a stylesheet, as there are other uses you can use the link tag for, like favicons (which is the little image you see in the top corner of the page).
My site's one is this. You can add a favicon to your site using the following code:

The type="text/css" specifies what the stylesheet is, in this case, CSS. There are different values for different stylesheets but for other link rel values this isn't needed.

The href="style.css" obviously links the page to the stylesheet, or whatever your are linking to through the tag. There are many other things you can link to, including a javascript file, but I won't discuss these as javascript is advanced. If you want to learn javascript there are information sources everywhere.

<meta> - This tag is used to include information about the site for search engines and your viewers. You can include anything in meta tags. It's simply about just changing the values. For example:

Yes, you can have whatever you want in these tags, so I won't dive into the hundreds of things you could include.

So as you can see, the <head> tag is very important and holds a lot of the important tags together.

<body> - RETURN TO TOP
This is the tag which all the content is placed. I won't discuss that here though. I'll discuss that during "Adding Content".

There are many attributes, which can be added to customise the site, which are placed in this tag, although they are now placed in a stylesheet as it's much more organised. I'll use the CSS method as placing it directly in the body tag is decipricated
The background image is a main thing for this element. This is the main image, which is placed behind everything. To do this you use this code by placing it in your stylesheet:

body{
background: black url(background.png) no-repeat fixed;
}

You don't have to include all those but I include them to show how it would be done. There is no particular order needed either. When I use the value, black it means that the main colour of the site (the one that is at the very back of everything) is going to be black. This can be changed to any value you want, as long as it's name shortcut exists. If it doesn't, you can use HEX Codes, which are numbers that relate to a colour, depending on what code you write in. To find out more information about HEX Codes go here

url(background.png) links to the image which will be used as the background.

no-repeat states that the background will not repeat in any direction. If you don't write this it will tile the background across the page. You can also have repeat-x instead, which will tile the background image horizontally, but not vertically. Also, the same can be done for repeat-y except it tiles the image vertically, but not horizontally.

The last value fixed states that the image will not move when you scroll down the page. The default option for this is scroll but it's not necessary to put as the internet browser will automatically do it. There are a lot of other things that can be done in this element but I will discuss these in the "Adding Content" section.

Adding a Banner - RETURN TO TOP
To add a banner to your site, you should add some code similar to this:

<img ... is the code that is used to add an image to your site. The src="banner.png" means you are linking to the image known as 'banner.png'. 'banner.png' can be replaced with any image URL you want. border=0 removes the border from the image and this makes the image look cleaner. If you want to include a border, feel free to. title="Return to Index" is a good effect to use. This creates a small popup description on the image saying "Return to Index". This is helpful if it isn't obvious that the banner returns to the main page. Finally, <a href="index.htm"> creates a hyperlink, which when clicked will direct them to that page.

Make sure your banner is relevant to your site and matches the rest of your site. If it doesn't look like it blends in with the site it can stand out too much, drawing their attention away from your content.
Make sure your banner is aligned to where the content is, as it can look bad if it isn't aligned in the same place as the rest of the site.

Navigation Menu - RETURN TO TOP
Navigation menus are a big thing, as I said in Design Tips so here I will tell you how to make a basic one. A navigation menu should be easily noticeable and easy to use.
Menus don't have to be at the top. They can be used effectively from the left too and including one at the bottom along with your top menu makes the site easier to navigate. I recommend you don't have a menu at the bottom with no other menus as this means the user has to go to the bottom of the page. Also, a menu is expected to be close to the top left-hand corner, so people generally want one to be found there. I'm yet to see a menu on the right of the page and I think that's because it's in an awkward place.

I'll provide you with two examples of effective menus:

That sort of example may seem lame but with good styling it can look good. For example, I used this technique on my other site and it came out nicely: Visit the Site
That technique is simply a text menu with hyperlinks to each page. It's a great menu idea. The only problem is that if a viewer decides to resize the font size of the webpage the menu will change size. If you do this on my site listed above, the menu will disappear under the content, overflow the sides of the layout and look ugly. It's best to avoid this where possible, possibly by making a large area for it to resize, for example, that site can be have a slightly larger text size, if someone decides it's a little too small.

Another style is to use images, like this:

This style works well as you can make the buttons more interesting than plain text. Instead of text you can use icons too, or you could combine them and create something effective. The <br /> is the HTML code for a line break. This means that the menu images would be on separate lines, generally meaning it's a side menu.

Another complicated way to do a menu is using an 'Image Map'. Since these are complicated to explain I'll provide a link to a reliable site.
Click here to learn about making an Image Map.

Tables - RETURN TO TOP
Tables are a great way to space out information on a webpage or to create a layout.
The basic parts to a Table are these:
table - This tells the internet browser that there is a table there. All the table information and code is here except the styling if you choose to use CSS (which I strongly recommend).
tr - This stands for "Table row". This makes vertical rows. Two trs would make two boxes, one on top of the other.
td - I'm unsure what the 'D' stands for here but the td creates horizontal rows. Two tds would make two boxes, side by side.

Here is a quick example of a table:

<table>
<tr>
<td>
Content 1
</td>
<td>
Content 2
</td>
</tr>
</table>

If you can't visualise that, you don't have to. Here is that example:

Content 1

Content 2

I added a border so you can see the boxes. Notice that the table is one box deep (vertically) and two boxes deep (horizontally). This is because there are two td tags inside the tr tag. Here's another example:

<table>
<tr>
<td>
Content 1
</td>
</tr>
<tr>
<td>
Content 2
</td>
</tr>
</table>

And the table's result:

Content 1

Content 2

If you look closely at that code you will see that you need to contain the td inside the tr tags. If you don't the table won't work. Using these simple tags, and a bit of CSS styling, you can create great page layouts and table. There are a lot of attributes you can include in your table styling, and instead of writing them down I think it is best if I gave you a link, so I have time to complete this site.
Click here to learn about styling tables in CSS.

Well that was a long chapter. Thanks for reading the whole thing, if you did. And even if you only flicked through, thanks anyway. I'll try to make the next chapter easier to follow and more interesting.

Time to get into 'Adding Content' to start getting your site looking flash.

Website created by Chris Conway in 2007 - Read More
Created for the TVNZ NetGuide Schools Web Challenge