• Home
• About
• Contact
• Blog

How to Build a Website Part 7

In the 27th of my cool series of informative articles, Part 7 looks at how to build a static website using yet more HTML code and adding some more groovy stuff into the style sheet.

Here we are at the seventh instalment. So far we've built a basic homepage with a style sheet to power it and a site map to map out where to find everything.

As we have been progressing through these articles, I wouldn't be at all surprised if some of you have looked at other websites and had a sneaky look at their code. I bet some of them made you sit back in horror at all those lines of unintelligible HTML and very little of it has been covered here yet.

Well, I'll let you into a secret. Most of what you see other websites built out of is the old way of using HTML to design the page layout as well as define all the parameters for text formatting, page formatting, box formatting, borders, colours... etc... etc... etc...

While it is very much still widely used today, a lot of it can be binned because the style sheet contains just about all the formatting you'll ever need all nicely stored in one place.

Of course, you still need some HTML or you won't have much of a webpage, but you really don't need as much as older sites use to create a really professional looking webpage. I told you I'd make it simple!

Ok, now its time to put some boxes on our homepage. To do that, we'll create their various parameters in the style sheet, then use our favourite <div> and </div> tags to place them in the HTML of our home page.

Going back to the basic design sketch I posted in the last article, we can see that we'll need four individual boxes to make it look like the sketch. We already have the background, and a box to hold it all together called the page_wrapper and a header above and a footer below.

Before we start putting in boxes, we need another layer to sit on top of the page_wrapper to hold all the content together. We want it to sit between the header and the footer and it will contain all the page content, so here comes another box which we'll call content_wrapper. This is what the style sheet code looks like with the extra box defined:

You can see the highlighted statement called #content_wrapper and its few elements: they should all be obvious as they do what they say the do. Simply, margin-top, margin... etc just set the width of the margin around the whole box – top, bottom, left and right. There's that clear: both element again – don't worry about that for now – I'll explain it in a later instalment.

Of course, we have to tell the browser to look for this extra box, so we'll add another division tag in our HTML. Rather than create a separate file just to show the content_wrapper, which won't look like much at all with nothing in it, I'll add the first text box to the page and show you how that looks.

This box will be placed in the top left of the page_wrapper. We'll call it box_top_left – using a name that describes exactly what it is. In the style sheet code below, I've highlighted the new statement:

The first new element you'll see in the #box_top_left statement is "float: left;". What has happened here is we have created all the parameters to define our box, like width: 480 pixels, height: 200 pixels, solid border 5 pixels wide coloured salmon pink... etc and we also have to tell it where to be on the page. There are two ways of doing this. We could define the exact position of the box in pixels, but that, for some strange reason, is not always as accurate as you'd think across different browsers. So a more effective way and the one I've chosen is to simply tell the box to float to the left of the page (or in this case, the page_wrapper, as it defines the limits of the viewable page). So that's exactly where you should expect to see this box on our homepage. To highlight this box a little more, I've put some text into it – in fact the text that I used to pad out the homepage from the last article – along with the title of the page.

And here is the HTML:

See what you think. Oh, by the way, I've also placed some comments by the closing division tags so you know which divs they are closing. Saves being confused...!! Ok, let's see how it looks. Open this url in your browser:

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

Now we'll make the second box in the top right of the page_wrapper and keep with naming conventions, let's call it box_top_right. Here's the style sheet with the new code added:

The elements are pretty much the same as the box_top_left except that in this case the width is a lot narrower (it has to fit into a total width of 760 pixels including the extra bits for margins and padding, so as the box_top_left took up 480 of those pixels, we only have so much to play with. So it's set to just 180 pixels, which is plenty wide enough for what we want the box for. The other difference, of course is that this box must sit to the right of the content_wrapper, so we've set float: right, so the box floats to the right.

Now let's add another division into the HTML and here is what it looks like:

And if you were wondering what that looks like in your browser, click this url:

http://www.organicsanity.com/tutorial/07b.php

Looking better? Let's make it better still and add the other two boxes below the ones we've already got (according to our reliable old page sketch). We'll call them box_bottom_left and box_bottom_right.

The style sheet has to be amended again to add the statements for two new boxes. As the two we've already got, they contain the same elements – just different sizes and the left box has float: left and the right box has float: right. But you already guessed that, right? Or was that left...?

Whatever... here's the CSS code:

The only differences between the top two boxes and the bottom two boxes are their widths and the fact that I omitted the height parameters. That's because they will be able to grow as more content is added to them, whereas by defining a set height, that's as big as they can get!

And here's the amended HTML with two new division tags for the two bottom boxes:

Last up, here's the whole thing to enjoy in your browser...

http://www.organicsanity.com/tutorial/07c.php

That's all I'm going to do in this instalment, because it is still a lot to take in. Next time, we'll create some graphics and make a nice page header. I'll explain how we'll do that next time too.

See you then!



Author: Terry Didcott

Word Count: 1139

Date Submitted: 29th June 2007



NEXT ARTICLE #28 >> How to Build a Website Part 8

[TOP]

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