How to Build a Website Part 4
In the 24th of our series of informative articles, Part 4 looks at how to build your html website with some php thrown in to help simplify repetitive tasks and cut down on repeated code.
Over the last three articles, we've managed to create an HTML page with a big header and a small body! You'd think the next logical step would be to make the body a bit bigger and possibly add something for it all to stand on, like a footer! Well, I will create a footer, but there's something else I want to do first...
Now that I've got my header, I'm going to get rid of it.
You heard right! I'm going to remove all the header information from my homepage.
Has he gone start raving mad?
Nope. You'll understand what I'm going to do when I explain it – and it will make a ton of common sense.
In life, there are things we do that make life easy and there are things we do that make life difficult.
When a webmaster puts all his code in one page, then creates ten more pages that all look similar to the first but contain different content but all contain the same code, he is making life difficult. He doesn't know it yet. To start with he's got a killer site and he's very proud of it. Then one day he wants to make a change to a portion of that code on his home page. Guess what he's going to have to do to make sure the other ten pages keep the same look as the homepage?
Yep, he's going to have to make the same change to that same piece of code on each of those ten pages. That sounds like a lot of work!
Just imagine if his website is large and he has a hundred pages...
So before we even get to the stage of creating a second page, I'm going to do something that will cancel out all that potential work somewhere down the line. The header has to go!
To do this, I'm going to have to depart from HTML for just a moment and mention another popular website programming language, PHP. PHP is most useful for things like managing databases full of information or handling login procedures and the like. It also has some very useful but simple procedures and I'm going to use one of them in the homepage of our tutorial site, Organic Sanity.
What I'm going to do is put all the header information into a separate file and then "include" that file in my main homepage. There's nothing better than actually seeing something, so here is the source code for our original homepage:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Natural and Organic Food made easy" />
<meta name="keywords" content="Natural and Organic Food" />
<!-- Site Title --> <title>Natural and Organic Food</title>
<!-- Link to Style External Sheet -->
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body> ...And so it begins... </body>
</html>
One part of that HTML code I didn't mention in the last article is something known as comments. Comments are just bits of informational text that programmers leave in code to let other programmers know what a certain piece of code does, or what something is for. Comments are enclosed in angle brackets with an exclamation mark and dashes like so:
<!-- comment -->
So let's take the header information and put in into a file called "head.php". Notice how I changed the extension of the filename from .htm to .php? That's to identify the file as containing (or being imported by a file containing) php code. Here's what the code for "head.php" looks like:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Natural and Organic Food made easy" />
<meta name="keywords" content="Natural and Organic Food" />
<!-- Site Title -->
<title>Natural and Organic Food</title>
<!-- Link to Style External Sheet -->
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
The first thing you'll notice is that we now have an incomplete piece of HTML code because the closing </html> tag is missing. That doesn't matter as this file will not be used on its own for anything. It will still be a part of the homepage or index file which does contain the closing </html> tag. Confused?
I'll show you how it works. The first thing that needs to happen is to rename our homepage from index.html to index.php. In this tutorial, the next partially built homepage file to see in the series is also named with a .php extension and is:
http://www.organicsanity.com/tutorial/03.php
Don't view the source for this file in your browser just yet. I'll give you the source code here:
include ('head.php');
?>
<body>
...And so it begins...
</body>
</html>
A brief explanation of PHP tags is in order, here. PHP code is enclosed in angle brackets with a question mark and begins with "php", like this:
<?php
?>
The actual PHP code is written between these open and close tags. In our example, we are using a simple directive called "include". That is to tell your browser that we want to include all the information in the new file we just created called "head.php"
Ok, now you can go and view the source in your browser. Oh, something strange has happened! See how the browser ignores the <?php and ?> tags and inserts all the HTML code from head.php into our homepage!
Magic!
Can you see the obvious benefit? Whenever I want to change anything in the header information for all my files, I only have to make the change once, in head.php. The code in all the other pages stays the same, because they all have the php include statement to include the code in head.php.
This is a neat trick you can use for any repeating code that is used in some or all of your web pages. In Organic Sanity, we will be using this quite a few times over the course of this tutorial.
But now, I think you deserve to be allowed to mess about with some text. In the homepage, the text line: "...now it begins" is a little lame, don't you think?
Let's change it. How about making that text depict the title of the page? Then we should make it in big letters to stand out. How do we do this?
Well, there are three ways of altering text. One is to use the <font> </font> tags enclosing the text we want to change. That is the old way of doing it, so there's not much point in me showing you all the many ways of using those tags.
The second way is to create all the font attributes in a style sheet. I'll be showing you that in a later article, because style sheets are the way to go with website building these days and no self respecting webmaster would dream of putting up a killer site without a killer style sheet!
The third way is to use what are known as heading tags. These are different from the <head> </head> tags which enclose the header HTML code. Heading tags just enclose any text that needs to be used as a heading. They start with the biggest and boldest <h1> </h1> and get progressively smaller: <h2> </h2>, <h3> </h3> etc. Let's put our site's name in the biggest ones: <h1>Organic Sanity</h1>. Here's the new code:
include ('head.php');
?>
<body>
<h1>Organic Sanity</h1>
</body>
</html>
...and here's the file if you want to view the source:
http://www.organicsanity.com/tutorial/04.php
Notice how the page looks on your browser now with a nice big bold title!
Of course, the beauty of style sheets is that they can be used to alter just about any element of your web page and that includes heading tags. So although our tutorial site displays the standard <h1> </h1> heading, later on we will change that in our style sheet (when I get around to creating it – which will be soon).
That's all for this instalment. There is such a lot to learn and take in and it would be unfair to try to heap too much information on you in each article, which is why I'm breaking it down into small, chewable and digestible chunks.
Until the next article.
Author: Terry Didcott
Word Count: 1348
Date Submitted: 13th June 2007
NEXT ARTICLE #25 >> How to Build a Website Part 5
[TOP]