Web Design

Find out how to make a simple but flexible website using basic html and css.

Website promotion

If you've already got a website, read our how-to guide for advice on attracting visitors. There's information on search-engine optomisation, and advice on advertising your website.

Bands as companies

Find out how it can be worthwhile to form your band into a limited company. It may sound crazy, but will save agro later on!

Cutting records

You can't quite beat vinyl - find out how to cut a 12" record, and what you'll need to get it done.

Designing your own website p1 p2 p3

Part 3

Well, you've come a long way, and got your basic webpage up and running. Now let's give it some real flare.

Remember the basic layout of the html code in your webpage? It looked something like this:

<html>
<head>
<title>The title of my page</title>
</head>
<body>
<h1>This is a big heading!</h1>
<p>This is a sample paragraph.</p>
<p>This is a second sample paragraph!</p>
</body>
</html>

Now for inserting the "style" info. As I mentioned in the last section, this can be done in a separate "css" file. But if you're only creating one or two pages, you can actually put all this style info in the html file you've just designed. It's easy enough to put it in a separate file later on.

The style info simply goes between two tags called, simply enough, <style> and </style>. These sit inside the "head" tags, usually just below the "title" tags. You'll see exactly where in the example below. First of all, let's experiment by changing the h1 tag (which creates the biggest headings in your page) to make it red (yuk!). This is what you'll have to type:

<html>
<head>
<title>The title of my page</title>

<style>
h1 {color:red}
</style>

</head>
<body>
<h1>This is a big heading!</h1>
<p>This is a sample paragraph.</p>
<p>This is a second sample paragraph!</p>
</body>
</html>

The format of the css is easy enough to remember. Just type the name of the tag you want to change, and then, in braces, a list of properties you'd like to change. To illustrate this, let's try doing a variety of things to the main text - the bits that are encased in "p" tags:

<html>
<head>
<title>The title of my page</title>

<style>
h1 {color:red}
p  {color:green;
    font-size:14pt;
    width:300px;
    border-style:dotted;
    border-width:2px;
    border-color:red;}
</style>

</head>
<body>
<h1>This is a big heading!</h1>
<p>This is a sample paragraph.</p>
<p>This is a second sample paragraph!</p>
</body>
</html>

Notice we've simply got a list of all the properties we want to change, and they are separated by semi-colons. The whole list is sandwiched between braces. Easy!

So now we've started spicing up the page by changing bits and pieces of the layout. As the css gets more advanced, you can change everything about the page - not just colours, widths and borders. For example, you can precisely place objects like images. You can also treat objects differently depending upon what bit of the page they are on... the possibilities are endless. To find out even more about css, I'd recommend reading the following guide - which should explain how to get a really complex and good-looking page using little more than the steps I've described above.

Before that, lets just try one final thing. Remember when we added that image, we specified it as being in the "largeimage" class? Well, you can create as many classes of things as you like. This is an arbritrary label we've created to identify a certain type of image. If we want all images in the "largeimage" class to have a width of 300px, then we do it using a similar method to the one above. Just add a little more to the "style" section of the page. Here it is (including the changes we've already made to the "h1" and "p" tags:

<style>
h1 {color:red}
p  {color:green;
    font-size:14pt;
    width:300px;
    border-style:dotted;
    border-width:2px;
    border-color:red;}
img.largeimage {width:300px;}
</style>

That's all there is to it. We could have just written "img {width:300px;}" but by specifying "img.largeimage" we are instead affecting only the images which have been labelled with the class="largeimage" attribute in the html. The same logic can be applied to any object. For example, we could specify a certain type of paragraph, which we'd like to appear slightly bigger - say the intro paragraph. Then, we could label certain paragraphs <p class="intro"> ... </p> - and on adding certain code to the style section --- eg. by adding "p.intro {font-size="18"}" we could make them big! Easy.

I hope this has enabled you to get off to a good start designing your own web pages. Don't forget to check out the resources section section for more advice.