How to Build a Website Part 5

In the 25th of our series of informative articles, Part 5 looks at how to build an HTML website using some more cool HTML code and introducing a style sheet into the mix.

We're up to article number five in this series and it seems like we haven't actually done very much. Well, that's true, but it's also true that you already know a lot more about the very basic parts of the code that make up a website page than you did before you started reading this series! We have a dismembered head and a headless body so far! Now in this instalment, we'll create a foot and then sever it from the body as well! Gory stuff indeed...

The foot, or footer is really a simple piece of HTML code that will make up the bottom of the page and it looks nice and adds that professional feeling of continuity on any website if the footer is the same on every page. In our simple footer, we'll include details of the webmaster's name, a copyright statement and a link to the site map.

The what?

The site map. This is a page that every good website should have, because it is a map of the website, detailing every link to every single page on that site. This is so a visitor to the site can navigate around with ease. It is also the first extra page that I will be creating – even before the homepage is anywhere near complete. That's how important a site map is to any website.

Um, what's a link?

It is simply a piece of code that directs your browser to a web page, or part of a web page, thereby linking it with the page you are already on. More about that in a moment.

So, moving along swiftly, the code for our homepage looks like this at the moment:

<?php
include ('head.php');
?>

<body>

<h1>Organic Sanity</h1>

</body>

</html>


I'll write the simple code for the footer in a separate file to save on confusing the issue, and then use another PHP include statement to include the code in the main page. The footer looks like this:

<div id="page_footer">

<p>www.organicsanity.com © 2007 Terry Didcott All Rights Reserved.
<br />
<a href="http://www.organicsanity.com/tutorial/sitemap.php">Site Map</a>
</p>

</div>


The actual file is called:

http://www.organicsanity.com/tutorial/foot.php

However if you tried to open that page in your browser, you'd get an error, so don't bother. That's because it doesn't contain an opening HTML or BODY tag. Those are already coded in the header. Getting confused again? Have a good look at how it all looks...

Now I'll explain what's in there. First there are some new tags we haven't come across yet called <div> and </div>. These are division tags and mark out a division on the page. The size and position of this division can be specified in a style sheet using the id= qualifier. I'll explain style sheets and qualifiers a little later.

Next there is the name of the website and the copyright logo and the name of the website author – me!

Next comes another HTML tag that you will use often in your website. The <a> and </a> tags are known as anchor tags and it is these that are used to tell your browser that there is a link to another webpage contained within them. In this case, the webpage we are pointing at is the name of the sitemap.

Anchor tags usually look just the way they do in this example – you have to include the inverted commas around the webpage name (commonly called the "URL", which is short for "Uniform Resource Locator"). In between the opening and closing tags, you can put some text. Often, when the URL is a website name, it is common to put the actual name of the website in there. In our example, the URL is that of our own site map, so we've put the words: "Site Map" in there. When the web page is displayed in the browser, all that code is hidden, but what you see is the text you entered between the open a close anchor tags – in this case, when we display the whole homepage now, we see "Site Map".

Open this page in your browser to see for yourself:

http://www.organicsanity.com/tutorial/05.php

There are two more HTML tags in there that are used often and need explaining too. The first are the <p> and </p> tags and the second is the <br /> tag. The <p> and </p> tags enclose a paragraph of text and the <br /> tag causes a line break to occur in that text. The <br /> tag doesn't use a closing tag as if you'll remember from a previous chapter it is self closing by placing the forward slash character after a space before the closing angle bracket. Placing two <br /> tags together causes a line space to occur in the text, which is handy for splitting the text into paragraphs. The same effect can be made by using the paragraph tags as well.

So that's the footer file explained. Now back to the entire homepage. In its current state, it doesn't look very appealing, though, does it?

Ok, so that's you first look at division tags and anchor tags. We're not done yet, because I'll want to explain a little more about those division tags in a later instalment. But to do that, I also need to explain a bit about style sheets, because the two go hand in hand. And we want that homepage to start to look a little better too.

Style Sheets

A style sheet is just another file that contains some code which governs how your webpage will look, from the size of the viewable page to the colour of the background and text to the size and font of the text, colours of the links, size of any internal boxes, whether graphics are used and where they will be placed on the page, etc.

In other words, the style sheet does everything that governs the look of the page and its contents.

Before we had style sheets, all that formatting was done within the HTML code and made for some extremely messy looking and difficult to read code. No wonder so many people were put off trying to learn how to use HTML! The flip side to that was of course that it created a sort of programming elite who could decipher what sometimes amounted to programming scribble and along the way charge their clients a lot of money for writing the stuff for their websites.

That still happens, as it's one thing being able to write some simple HTML and putting up a fairly decent web page and another to create a truly killer site with all the bells and whistles.

What we're aiming for here is somewhere in between. The really advanced stuff comes with lots of time and practice and we're all still learning as we go.

So let's also create our own style sheet. We'll call it "style.css" (css being the recognised extension for a style sheet – CSS stands for Cascading Style Sheet, if you're interested). You can't actually open this file on the server with an editor like Notepad or PsPad because it is secured so that only the file owner can do that. Me.

So I'll show you what it looks like and explain the bits and pieces in it. In its current form, it is very basic. As the series moves on, I'll update the file and create a series of style sheets, each one pertaining to each article in the series. So as this is article number 5, the relevant style sheet is called "style05.css". This is what it looks like:

/* CSS Document

http://www.organicsanity.com/style.css

Copyright: Terry Didcott 2007 */

body {
background: #ccffcc;
margin-top:10px;
margin-bottom:10px;
}

#page_footer {
height: 50px;
background-color: #FFFFCC;
clear: both;
}

#page_footer p {
padding-top:18px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #336633;
letter-spacing:1px;
}


The first part is a comment, which is just pertinent information about the file. Comments in style sheets are enclosed in forward slash and star, start and forward slash ("/*" and "*/") characters.

The next part is called a statement. This statement is called "body" and contains the basic layout of the body of the page. Any fields in this statement will affect everything that is contained within the <body> and </body> tags in the HTML of the page. All fields contained in the body statement are enclosed in curly brackets and must be delimited with a semicolon.

The first field tells us what the colour of the background for the body of the page will be. This is written in hexadecimal code which translates to a specific colour. In this case it is #ccffcc, which is a light green colour. The next two fields are margin-top and margin-bottom which tell the browser to leave a 10 pixel margin at the top and bottom of the page.

The next statement starts with a hash (#) character and this tells the browser that it is an identifier (id). Go back and look at the code for our foot.php file. In the opening <div> tag there was some more text that said id=page_footer. Well, that equates to this statement, which is called #page_footer. Here is the information that formats our footer. Height tells us that we want that division to be 50 pixels high, have a background colour of #ffffcc (a light yellow). The clear field I’ll go into at a later date.

The next statement is also an identifier (id). This changes the characteristics of the paragraph (<p>) tag whenever it is used in the division with an id=page_footer. Here we have given it attributes that define how the text will look, where it will be placed on the page, what colour it id, what spacing it should have. Are you getting the idea now? Or is it still a bit unclear? The best way is to let you see it all for yourself.

Ok, let's do it. I've put all the code together in a different file. There is a new header file (head05.php) that points to the style sheet (style05.css) we're using for this instalment and when you open it in your browser, you'll notice a few big differences to the previous one. Here's the link (or URL):

http://www.organicsanity.com/tutorial/05a.php

Here's what the code looks like if you can't be bothered viewing the page source...

<?php
include ('head.php');
?>

<body>

<center>
<h1>Natural and Organic Food</h1>
</center>

<?php
include ('foot05.php');
?>


I’ve added one more set of HTML tags to improve the look, called the <center> and </center> tags. These cause anything they enclose to be placed in the centre of the page. They can be replaced with some further code in the style sheet, but that is for a later instalment. I've also taken the closing </body> and </html> tags out of the main homepage file and placed them into the footer file, just to make things look a little cleaner.

The great thing about this version is that not only does it look a little better than the plain white page we had before, but there is a working link in there that you can click on. So go ahead, click on the link that says "Site Map". In the site map, you can click on a link that will bring you back to our 05a.php homepage.

I'll explain some of the code that's written in the site map in a later instalment. That's really enough for this one as it's a lot to take in all at once. So until the next time...



Author: Terry Didcott

Word Count: 1897

Date Submitted: 19th June 2007



NEXT ARTICLE #26 >> How to Build a Website Part 6

[TOP]