• Home
• About
• Contact
• Blog

How to Build a Website Part 6

In the 26th of our series of informative articles, Part 6 looks at how to build the static website using even more snazzy HTML code and expanding the style sheet to do more cool stuff.

Well, number six has arrived and things are starting to happen. Now that we've got a basic style sheet, we can start doing some page layout... Don't be scared, it's really quite fun!

What I didn't mention in the Part 5 was how to create that style sheet. I took it for granted that you'd know that it is simply a text file that you can create and edit in Notepad or any other text editor (PsPad is my chosen tool for this, or you could even use Dreamweaver or Eclipse if you've a mind to...). So if I rush ahead and take anything for granted in any article and there is anything, ANYTHING you don't understand or can't quite grasp, please either email me (see Contacts page) or sign up to the forum and post a question to me there.

Ok, let's move on. We already know what the code looks like for our homepage, so now I'll explain some of the code inside the Sitemap. Here it is:

The first HTML tags that we haven't covered yet are the <ul> and </ul> tags. These enclose what is known as an Unordered List. This is simply a list of items that will be displayed in your browser one on top of the other with simple bullet point characters. Inside the <ul> and </ul> tags are other tags that surround each item in the list that are the <li> and </li> tags. These stand for List Item.

You'll notice from the HTML code above that the two items in the list are both Anchor tags (we covered them in the last article) each containing a link to another page in our website.

Website? That's the first time I think I've actually referred to our project as a website and not a simple web page.

Why?

It's because now that there are two visual pages and a style sheet, it's more than just a page. A website is a collection of web pages, images, software, style sheets and lots more besides, depending on how simple or complicated you want it to be. Ours is now a collection of two pages and a style sheet!

Getting interesting, isn't it?

Now let's get back to our homepage. Remember the basic design sketch I produced in the first article? Well, now would be a good time to make a start on bringing that from the drawing board and making it a reality.

A good place to start on any page is at the top.

So we'll start by creating the heading space. That's not the same as the page header we have already created in the HTML code. What we want to do now is define a block at the top of our visual page where the graphic for our heading will eventually go. For a visual idea of exactly what I'm talking about, simply scroll up and look at the top of this page – the one you're reading now. Go on, it won't take a moment!

There, did you see it? The big, black rectangle with some fireworks and a picture of some Euros as well as the name of this website: The Honest Way. That's the page heading, or header. It can also be referred to as the page banner, although that might confuse it with an advertising banner, like you see on many sites, this one included. So we'll stick with calling it the Page Header.

In the old days of HTML code, the only way to produce that kind of a box was with something called a Table. Tables were very useful and fairly versatile pieces of HTML code that enabled webmasters to create nice boxes on a page to divide it up into logical sections for text and pictures and to align text in columns. Things like tables have made most websites you see even today look the way they do and we would have been lost without them.

Not any more.

The problem with tables was not in their use when used for what they were intended, but when they were relied upon exclusively to make a page look the way the owner wanted it to look. Tables are actually fairly simple pieces of code, with certain limits, but they can be used one inside another to create what is known as nested tables to create boxes within boxes with or without borders, different background colours of even graphics – the webmaster was limited only by his imagination... well almost!

The use of nested tables started to get out of hand and made for some almost impossible to follow HTML. Good for the webmaster who wrote the code. Bad for anyone else that had to support it once he had moved on to his next project.

So there had to be a better way.

There is! Style Sheets were created to simplify the whole business of page layout and design. When used in conjunction with <div> and </div> tags, style sheets can now (to a point) emulate in simple and very easily readable HTML those often unintelligible and undecipherable rats nests of tables within tables within tables...

That also saves me writing the couple or so articles I would have needed to explain all about tables! If you are still interested in using them, then at the end of the series, I might be convinced to show you some table tags.

Back to our style sheet and creating our page header. Without further ado, here is what the amended HTML code will look like:

Ok, that's not so different from the code in our previous article. We've added one more division tag that we've called the Page Wrapper. What this division creates is a box that sits on top of what we know as the Body. I can see this might start getting confusing, so I'll stop and try to explain how this all works.

Unlike tables, where you create separate cells (similar to a table you might create in a MS Word document) which may divide the page into, say three columns across and four rows down making twelve separate boxes, divisions layer the boxes one on top of another. Sort of like 3D, but in a two dimensional layout. If you look at our original diagram for our intended page layout in the3 first article in this series (Number 21), you'll see there are a few boxes floating slightly apart from one another. There is a Header atop four different sized boxes with a Footer at the base. Let's change it a bit.

Ok, here's a slightly amended sketch. This one now shows all our boxes joined together in one large rectangular box, with a larger box enclosing the whole thing:-

Imagine the outer box is our PC monitor's screen. The inner box is our Page Wrapper that will hold our text and boxes of our web page as a slightly smaller rectangle on the screen. Just like this page you are looking at now, in fact! The difference in our intended web page is that we have a footer, a header and four boxes, instead of a footer, header and two columns as in the page that this article is written on.

But in our amended homepage, we only have the Page Wrapper with a header and footer top and bottom. The bit in the middle is still one single area. We'll add the boxes in the next instalment. Remember, slowly does it!

And now here is what the style sheet that supports it looks like:

You'll notice the style sheet has grown somewhat since that last article, along with our HTML.

I'll explain each new piece in the style sheet first. Then you can open the page in your browser and see exactly how it looks. But wait until I've explained the style sheet...

Ok, we still have the comment at the top followed by the BODY statement. The next statement is the #page_wrapper. This defines the width of the box as 760 pixels (but not the height), the background colour (white), text alignment of any text within this box (left), the border thickness (1 pixel) and its colour (mid green). The margins are set to auto (automatic – not fixed). We didn't specify a fixed height, so the box can grow vertically as we add more text or pictures etc to it. The elements of style sheet statements are usually fairly self explanatory. Width means width, margin means margin, etc. It isn't written in some esoteric or foreign language as you can see – it's fairly standard English!

Incidentally, the names given to each statement (i.e. #page_wrapper) are not set in stone, you can call them whatever you want. Just remember that someone else might need to support your style sheet in the future, so use names that are descriptive of what each statement is for. It makes everyone's life easier. I think page wrapper is quite an easy picture to conjure up in your mind.

Next statement is for the #page_header. Again, an obviously descriptive name for what it is for. We've fixed the page header's height at 120 pixels, its background colour (pale yellow) and the text colour (green).

Well, that's the style sheet. Now you can go and look at how it formats the page:

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

What a difference! Are you impressed? Just a few short lines of code and we have transformed an almost blank page into something that is starting to resemble a real homepage. I added some text to pad out the middle part between the header and the footer. So far, the header is blank – that's where the graphic banner will eventually go but I've made it the same colour as the footer so you can see how it is a separate entity from the rest of the page, which is white.

That's about all for this instalment. We have made a giant leap in one fell swoop, so I'll leave you to go back over the previous articles if you need to in order to let it all sink in. In the next article, I'll look at how we can use our new found knowledge to make the rest of the boxes appear on the homepage like I drew in the original sketch.

See you then!



Author: Terry Didcott

Word Count: 1724

Date Submitted: 24th June 2007



NEXT ARTICLE #27 >> How to Build a Website Part 7

[TOP]

• www.thehonestway.com © 2007-2024 Terry Didcott All rights reserved
• Privacy
• Site Map