How to Build a Website Part 2
In the 22nd of our series of informative articles, Part 2 looks at how to build a website from the ground up.
Well in Part 1, we looked at the overall website building picture. In this instalment (Part 2), I'm going to take the next logical step (because programming is all about logic) and put up a blank (test) page on the server for you to see. At the time of writing this, the homepage is (almost) blank too, so if you read this when it first goes up, you can see that I really am starting with a blank canvass!
I registered a new domain name for the website we'll be building and have set up hosting with HostGator. The domain is: organicsanity.com. it was tough to find any suitable domains with the word organic in as all the good ones have already been taken, so this one was chosen with a bit of creative lunacy that every good website designer should have in their character!
For the tutorial side of this mini-series, I created a page you can actually see on your browser. Note: That tutorial is currntly down, but I have moved it to this domain. Here's the first page (click the link):
01.htm
Ok, it's not completely blank as I had to put at least something in it so your browser would display it! You can see a line of text that says "...And so it begins..."
Well, there is a bit more to it than just that line of text and I'm going to show you what it is and why it's there. But before I do even that, I have to explain something very important to you about the naming conventions of your website's files.
The Homepage
The homepage of any website is (usually) the first page that is displayed when you type in the name of a website. For example, to display the homepage of The Honest Way, you'd type in: www.thehonestway.com and then hit enter, or go. Your browser would then display the homepage, or welcome page of my site. You didn't need to type in the whole thing, which is www.thehonestway.com/index.php because your browser already knows that it must find the page called either "index.html" or "index.php" and display that first.
If there were no file called "index", then your browser would not be able to display the website and would return an error.
You can get around that by typing in the whole thing if you wanted to go straight to a particular page, say for example you wanted to visit my "Products" page to buy one of the ebooks I promote there. You could type in: www.thehonestway.com/products.php and your browser would open that page.
I can see you squirming in your chair and perhaps your arm wants to raise itself into the air to ask a question! Ok, here it is. "Why are your pages called index.php and products.php and not index.html and products.htm like some other sites I know? "
That's because I use a little PHP code in my pages, and to tell your browser that it has to interpret some PHP, I use the extension ".php" instead of ".html" or ".htm". Ah, I see another question coming…
"What's the difference between .html and .htm?"
Ok, this is just a naming standard that has been adopted so that all browsers know the difference between different files. If you weren't using PHP in your files, you would call your homepage index.html and all your other pages something.htm. That's it. At this point, you don't need to bother yourself as to the deep meaning of all that, just accept it as read that's the way it's done!
Ok, back to the plot. I was going to show you what my new, almost blank test homepage looks like with the code revealed. Well, it looks like this:
<html>
<body>
...And so it begins...
</body>
</html>
If you want to see it for yourself, you can. Open the page in your browser and then move your mouse up to the top line of the browser where you see File, Edit, View… etc and click on View, then click on Page Source (Firefox) or Source (IE). A new window will open with the above code in it. Congratulations. You have just read the source code for the page tutorial1.htm!
So what does it mean?
Well, in HTML, we have controlling pieces of text called "tags". Tags are wrapped in angular brackets "< >". In this example, and in every HTML page you always start with <html>. That tells the browser that it is reading HTML code and it must interpret it so it can display what you see when you open a web page.
HTML does follow programming logic, so for every opening tag there must be a balancing closing tag. A closing tag looks the same as an opening tag except it starts with a slash "/". So in this example, we start the page with <html> and close it with </html>. That tells the browser that everything that is written in between that pair of opening and closing tags is HTML code. Clever, huh?
Now we'll look at the next pair of tags. <body> and </body>.
The <body> tags tell the browser that everything contained in between these tags is the main " body" of the web page. Just like you'd write an article with an introduction, a body, and a conclusion – in HTML you create a page with tags telling the browser " This is HTML code" and " this is the body". Well, the body of a web page is just like the body of an article – it's where you'll write all the text or content and put pictures or graphics and other things like tables or page divisions and the like. They're called "elements", if you want to know the correct terminology – I'll get on to those later.
So in this instalment, I've started you off with some very simple HTML code. But you need to know something. There are different ways of coding a page in HTML and different webmasters (people who make websites) will have their favourites, so everyone will do it a little differently. Don't let that concern you as you'll most likely branch out and do things your own way too. In the next article in this mini-series, I'll show you some more HTML code and show you how it makes the page look via some screenshots. Oh… and I'll do it my way!
Author: Terry Didcott
Word Count: 1052
Date Submitted: 5th June 2007
NEXT ARTICLE #23 >> How to Build a Website Part 3
[TOP]