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 2

In part 1 we created a simple web page. Now it is time to add some fancy things, like headings and pictures. Here's what we've got so far:

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

Now we can add a big title for the page - that is, a heading which is displayed in big text on the web page, rather than the "title" which appears right at the top of your web browser.

Headings are made using pairs of tags. To make the biggest heading, enclose text with <h1> ... </h1>. Smaller headings are obtained by using bigger numbers - anything from <h2> up to <h9>.

So now you can create a page, with headings, like so:

<html>
<head>
<title>Independent Musician / Singer-songwriter</title>
</head>
<body>
<h1>Joe Blogs</h1>
<h2>Introduction</h2>

<p>The introduction to the website can
go here - notice it is sandwiched in "p" tags
to denote the fact that it is a
paragraph.</p>

<p>Subsequent paragraphs are sandwiched
in the same way. The introduction could be as
long as you like - but once you've whetted
the visitors' interest enough for them to
want to keep reading, why not progress to
another section - this time giving latest
news?</p>

<h2>News<\h2> 

<p>The heading above denotes a new
section - this time detailing news of gigs,
etc.... you could go on like this until you'd
got a whole page describing each aspect of
your work. But it would look plain... Keep
reading for more info.</p>

<p>More paragraphs can be fitted in here!</p>
</body>
</html>

So this is all good - a page with headers and some text. But if you want your site to look good you'll certainly want to add some images.

How to get the images onto the Internet? Well there are a variety of ways to do this. First of all, get them onto your computer. You can use either a scanner (if you've got conventional prints) or put the images directly onto the computer from a digital camera. If you've not got either of these bits of equipment, most high street photo processing labs can put your prints onto a cdrom for you - from there, you just stick the disc in the computer and access them like you would any other file.

You'll hopefully find that the resulting pictures are in "jpeg" format. Their filenames will end in .jpg. That's good, because these files use special technology to make them take up as little space on your computer as possible. On the Internet, the smaller a file is the better, because that way the images will take less time to be transmitted over the phone line to a person's computer - making your webpage load as fast as possible.

When you're saving the pictures from a scanner or camera, your software may offer you a choice of "resolutions" at which to save your picture. The best thing to do is experiment. Go for low resolutions / qualities, but only if the resulting picture looks acceptable. A good guide is that your picture should take up less than 10Kb each (a Kb is measure of file size, and an average modem can receive about 3Kb each second - so your pics would take 3 seconds to load).

After all this, you'll end up with some files on your computer - called things like "gig.jpg". Now you need to link these pictures to the webpage.

First of all, store the pictures in a folder that's easily accesible from the place where your webpage is currently stored. By that, I mean that if your webpage, "index.html", is stored in "My Documents", then you should put your images in a folder called, say, "images" which is also in "My Documents". That way, it's really easy to specify where the files are in your webpage. You do it like this:

<img src="images/gig.jpg">

That's pretty much all there is to it. There are some additional things you'll probably need to put in the line. For example, you'll want to specify how big the image is. Usually a good size would be 300 "pixels" by 200 "pixels" (pixels are just the dots on the screen). Usually you'll only need to specify the width - the height will be worked out automatically by the web browser. So:

<img src="images/gig.jpg" width="300px">

And now you should have an image in your webpage. You can add as many images as you like, in different parts of the page, just by following the steps above. At the end of all this, you'll have an extremely simple web page. Nothing fancy, but at least it conveys the information.

Spicing it up is harder. At Artisticsites we use a language called "CSS". This works in quite a clever way. Rather than writing lots of information like colors, fonts, sizes, into the webpage which you've designed above, we write it all into another file. At its simplest, this file tells the web browser how to display ALL h1 tags, or ALL images... So rather than specify the width="300px" bit in the image above, we could have left that out of the webpage. Instead, the css file would say "all images have to be 300px"... If you've got a website with many different pages, that makes it very easy to change the look of a whole site, just by changing one line in the css file.

Of course, as I've described it, this seems very inflexible. But CSS can be more specific. You can give each object in your HTML code a "class". So the image above could be part of the "largeimage" class. Then you could replace the line you've written above with:

<img>src="images/gig.jpg" class="largeimage"</img>

Then the CSS would simply say "make all images in the largeimage class have a width of 300px". You can do even more complicated things than this, but these ideas alone make it easy to write a flexible and easily upgradeable webpage.

How does this help the novice web designer - and how will it help you to create your own webpage? Well now you have the basics of html code --- you've got enough to put together the most basic of webpage. The next step is to create a CSS file which will control how the document will look on screen and make it look as nice and sophisticated as you like.

Even if you can't stomach CSS, you're at an advantage now. Having finished your basic html page, with exactly the information you want on it, it makes it very easy for a professional design agency to add flare to the page --- to insert things like header bars and shiny buttons. All they have to do is create a css file which describes exactly how the page should look. So if you've got this far and just want to get a professional looking page, feel free to contact us.

Or, if you'd like to have a go at the CSS - now you've got the basic page layout - then just carry on reading!

Next -->