So, it's time to build a website. Only you don't have anything to go from. You have to create this one from the ground up. You have to start from scratch, with no existing pages, no half-done site to pretty up, and no help from anyone. What do you do? WHAT DO YOU DO?!
Okay, we'll show you what you need to do. We'll give you some ideas on how to go about it. We'll even give you some other tutorials on how to write HTML and CSS and all those other peculiar web languages that are bandied about by those in the know. But you need to start somewhere right? You COULD start typing, and hope it all turns out okay. It won't, but you could try it. You COULD pay someone else to do it for you, but who's got the spare cash for that? Or you could start here, and learn how to do it properly and with a tiny bit of hard work, guarantee success. Sound good? Read on.
The very first thing to do is grab a pad of paper, and a pencil. It's time to do some planning. You need to figure out what you're doing before you do it. You could quite easily just start coding away, and come up with a few pages. But what happens when you want to add more? Is your design expandable? Can it be easily modified? Is it even what you really want? Your website is in some ways a reflection of yourself. You're putting your thoughts, products, ideas or feelings on public display? Do you want everyone to see a jumbled mess? Probably not. So we come up with a plan. Grab your pencil, and read on.
You need to decide what your website is about. You probably know generally why you're doing this. Let's use an example.
Let's say you are going to create a web page for your coven, The Coven of the Magical Mystics. You know basically what you're going to do - put the information about your group on public display. But what information do you want people to see? Do you want it to be a publicity exercise in the hope of gaining new members? Do you want it to be an informative site only where people can find out about your beliefs? Or do you have some other purpose in mind? Let's say, for the purposes of this example, that you want to display some information about your group in order to attract new members. So, you have a purpose. It's time to figure out exactly what information you want displayed. Make a list. Figure out what information is going to be available to people browsing your site. Write it down. Go on. I'll wait.
Okay, got your list? Read it again. Determine if that's really what you want to do. You can change it later if you need to, but it's easier to do it now, before you really start.
Happy? Good. So you've probably got a dozen different things that you want people to know about. You now know that you need to create about a dozen different pages. WAIT! Don't touch your computer yet! We're not finished with the paper.
You know that you want to provide information to attract members. Do you know what sort of people you want to attract? The options here are large, and can really shape what your end product looks like. This is the hard part. You need to look at your group and know what sort of group you are. There isn't much point catering your site to eclectic neo-pagans if you are a satanic group. Likewise, the blood red and black look won't attract too many people looking for a white-magic guardian-angel path. Know who you are catering your site to by knowing what you are advertising. Write it down with your list of topics. "My site is for.........." Done? Grab a new sheet of paper and lets move on.
This is where the scribbling, erasing and screwing up bits of paper starts. Don't worry, screwed up bits of paper make really good origami rocks.
All sites start out with a home page, usually called index.htm or home.htm. This is a good place to start. Make a box in the middle of your page. At the top of the box, write index.htm. This is going to be what people see when they go to your site. So what will you need? Think back to all those thousands of sites you've browsed while surfing. What do they all have in common? Lets see. A title? Good idea - people want to know what they're looking at. Write "title" in the box. A quick blurb about the site? Check. People need to know what the "Coven of the Magical Mystics" is. Don't worry about what you're going to say in your blurb yet. Just write "blurb" in the box. Maybe a photo? Nice touch. Put "photo" in the box. How are people going to navigate around your site? Links, right? "links" into the box. That's probably all you need to have. A general rule of thumb is to make your home page a starting point for exploration. Think of it like a travel brochure. The cover tells you about what's inside the brochure. You can then open the brochure to find out more about tours and airlines. That's what your site is going to be like. A cover page (index.htm) and a series of pages inside which give you all the real information.
So what's next? Look at your topics. You know that you basically need one page per topic. Make some more boxes on your page and give each one a name. Your contact details will probably be called "contact.htm", and your photo page might be called "photo.htm". Name each box until you've pretty well covered all of your topics.
Now we play join the dots. Well, boxes anyway. Are all of your pages going to be accessible from your homepage, or do you want some pages to only be accessible from another page? For example, you might have an online book of shadows. The best idea would be to have a "bos.htm" box joined to your "index.htm" box, and a series of other boxes coming off "bos.htm". "spells.htm", "reading.htm", "potions.htm" and so forth. In this way, your "bos.htm" almost becomes another homepage for your book of shadows!
Right, so you've joined everything together and you've got a whole heaps of boxes and lines. Start filling in the boxes. "contact.htm" will probably have something like "title", "links", "location", "names", "phone" and "email" inside it, while "photo.htm" will probably just have "title", "links" and "photos" written inside it. Each box is a page, and each page will display some sort of information.
Try to keep the page names simple and easy to follow. It is far more difficult to create and maintain a site where the pages are called 1.htm, 2.htm, 3.htm etc. Use index.htm, photo.htm, contact.htm and so forth. Try to keep the names as short as possible, and as readable as possible.
Look over your piece of paper and see if you've covered everything from the first step. Are all your topics covered? Are you displaying everything you need to display? If you aren't, have a look at fitting the information into a relevant box or creating a new box just for that information. Between all these boxes, you should have everything you want people to know about your group written down topic by topic. But we're STILL not finished with the paper!
Grab a new sheet of paper. Think about what sort of technology is available for you to display your website, but first have a think about what sort of technology you NEED. Many websites are "static", meaning that their content is pretty much always going to be the same. If this content changes, any changes are done by hand by physically going in and changing the code before republishing the page. Other sites are "dynamic" which means that information is entered somewhere else, and displayed automatically by the page. This is usually done with a database, but can also be done by automatically changing the contents of a page through a form interface.
Lets say for the sake of simplicity that you don't really need to change your site contents, and are planning to create a static site. This means that you don't need any kind of fancy server or hosting package, and can create your page in straight HTML, with some JavaScript thrown in for the sake of it. Therefore, you can host your site just about anywhere, from a free web host like Geocities to a paid server package. Get online and check your hosts inclusions just to make sure what you've got available to you. Jot it all down.
On the same piece of paper, write down how long you have to build this site. Underneath that, think of some checkpoints along the way. The first checkpoint is probably the completion of your home page - index.htm. Jot down how long this will take. Be fairly loose about this. If you get it done before you thought you would, you feel pretty good about it. You will probably end up with maybe three or four checkpoints such as "complete homepage", "complete 50% other pages and link", "complete all pages and link", "publish site". You might have more, you might have less, depending on the size of your site. But you need to be realistic. If you have three months to build your site, don't allow one month just to build your homepage and leave yourself short to add all the other pages. Generally, a page will take the average person perhaps two or three days to complete, including fiddling with colours, adding links, and placing photos. Allow yourself a week for your homepage, and five days for each of your dozen other pages. This will have your site completed within the three months and quite probably even sooner. Work out your checkpoints, and try to stick to them.
You have decided what you're going to put in your site, now it's time to decide how it's going to look. There's a few ways to go about this, but the absolute best way is to use something called a storyboard. A storyboard is essentially a drawing of how you want your page or pages to look. It's a concept used by artists and movie types when they lay out how a scene is meant to look. You're doing the same thing. How do you want your site to look?
Most people will of course expect to see certain things in certain places. Your title should probably go at the top of your page. Brilliant. Just where people are going to look for it! If you have a logo, or representative symbol, it's customary to place that in the upper left of your page. Links tend to be listed in one of three places. Commonly you'll find links down the left hand side of the page, or across the top under the title, or across the bottom, under the text. Be very careful putting them down the bottom, however, because unless you're absolutely positive that your page will never scroll, you'll find that people will lose the links and not be able to view the rest of your information. If you are using graphical links, or a JavaScript or DHTML menu system, it is probably a good idea to include some text links at the top or bottom of your page for accessibility reasons. So you've got a title and a menu or link system. You also need to include the rest of the things you included in the "index.htm" box.
Start with a blank page. This represents your webpage. Draw boxes or words to represent where you information is going to sit. Think carefully about this. Consider how big you want your title to be. If it takes up half the page, you're only going to have the other half page left for all the rest of the information! Try to figure out where everything should sit on the page, and think about what you want your visitors to see first. What will draw their eye? Will it be your title, your logo, your photo, or something else entirely?
Repeat this process for each page that looks different. In our example, The Coven of the Magical Mystics, your home page will have a certain layout. You might want each page to look identical with only the content changing. You may prefer to have three or four different layouts for your pages. Plan each one fully before you begin coding it.
Page two >>