Tom Kerswill

MySpace:

Theme: Themed SimpleText New Feeling

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

First steps

Designing a website can seem daunting. It's not. There is a whole variety of ways to create a homepage to promote yourself - whether you're an artist, a musician, an actor or actress.... Some word processors (eg. Microsoft Word) can even convert your existing promotional documents or press releases into "html" (the language that web pages tend to be written in).

That has disadvantages, though. Because it's a computer program and not a human which is creating the page, you'll often find extra bits and pieces behind the scenes on your pages that you don't need. They can sometimes make older browsers crash! If you've included images in your web page, you might find that they load very slowly when people view your pages via the Internet. Things can get messy when you try to do more complex changes to your pages later on.

Here I talk you through the method I use to create web pages. It doesn't use expensive or complex software. In fact, everything can be done using a simple text editor like Notepad or Simpletext. "Html" isn't as difficult as it's cracked up to be.

Put simply, an html page is just a text file - identical to what you'd create in Notepad. All that sets it apart is the inclusion of "tags" to tell somebody's Internet software or web browser how to lay out the page.

So, to create your first web page try this:

  1. Open a suitable text editor. On Windows, Notepad is probably the easiest (Start menu --> Programs --> Accessories -->Notepad). On a Mac, use Simpletext. On Linux, Emacs is good.
  2. Type the first paragraph of your webpage. For a site promoting your own talent, a brief overview of what you can offer might be a good start. Or maybe if you have promotional material to hand you could copy text from that.
  3. Save the file. As it's the "homepage" of your site, give it the name index.html
  4. Open the file in your favourite web browser. For example, in Internet Explorer, go to "File" menu, then "Open".

If you've followed these steps, you'll see the text you've written... That's all so far - no fancy headings, and no pictures yet, just text. Now the fun begins. Let's turn that text into proper html.

The first "tag" we'll insert tells a web browser that this is a web page. Move to the beginning of your document then press return to create a blank line at the top. In that line write:

<html>

Now move to the end of your document. Type

</html>
These tags mark the beginning and end of your page. They should always sandwich the entire text of your document.

Other html tags are just as easy. Here are a few to be going on with:

<title> ... </title>
Specifies the title of your web page. This appears at the top of a browser window.
<h1> ... </h1>
Creates a heading, which appears big and bold by default
<p> ...</p>
Specifies a normal paragraph - these tags should normally sandwich each paragraph of normal text on the site.

So at the moment we have an html document, with one paragraph of text. There are a few more things to do. First create a title for the page. At the top of the document, just after the

<html>
tag, we need to create a section of the documents where useful information such as the title can go. Type
<head>
Then on the next line type
</head>
Now, between the two, type
<title></title>
You guessed it - the title sits between those two tags. When you save and load the document in your web browser, you should see that the title bar of the browser shows the new title of your web page.

To recap, the page you've made in Notepad should look something like this:

<html>
<head>
<title>The title of my page</title>
</head>
This is some sample text.
</html>

One last thing to make this proper. As well as the "head" section, we need a "body" section. So sandwich that paragraph you've written with

<body>
and
</body>
tags. These should always sandwich the entire body of your web page. Finally, each new paragraph you create should be sandwiched by these tags:
<p> and <\p>

So the page so far should look like:

<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>

So far, so good. Next, we'll add titles to your site, and add some jpeg images to spice things up.

Next -->