Build a website


What? Did you think there wouldn't be any work involved?

Work from a template.

If you haven't done it before, the easiest way is to get a template and work from that. The template will give you the layout for the web page and you can then fill-in your own text and pictures and links, etc.

You can get a free template from Open Source Web Design . There are many styles to choose from so pick one that fits what you think is the image of your website.

You might also want to make a note of this website: stock.xchng . It offers a huge number of free stock photographs that you can use to highlight your web pages.

You'll see that the template comes as 4 or 5 different files. One of those has a .css extension. That stands for Cascading Style Sheet and it contains all the style information for the page. It is sometimes useful to be able to change the style sheet to customize a page.

To give you an idea of what a Web page template is like, here's a page and the HTML code that created it.

Note that you will simply replace the text in the HTML file with your own and all the references with your references. The formatting doesn't have to change.







Get the tools

The template will come to you as a .HTML file (usually it's called index.html). You must edit the file with an HTML editor the same way you use MS Word to edit a text file.

To get the HTML editor, download it from Arachnophilia editor , then install it.

Get the tutorials

At this point you should do some studying.

If you know little about HTML and Web pages, you really need to take a course. It's not necessary to run down to your local college.

There are free tutorials available on the Web for any subject that you can think of.

To learn HTML, try this one: W3Schools. Note that the tutorial is organized in a multi-page structure with 'Next' and 'Previous lesson' links to navigate between pages.

This tutorial: 2createawebsite, is basically a single page.

If you want to look at others, go to Google and enter: free HTML tutorial and then later, CSS tutorial. Often you'll find both tutorials on the same site. Work down the list and find the ones that look good to you. You don't have to become an expert right off the bat. Bookmark the tutorial so that you can refer to it as you work on the Web pages with the editor.

However, I will give you one CSS reference that you really must look at. It illustrates what can be done with style sheets. When you try it, note that the text in the page doesn't change – you're not looking at a different page - only the formatting of the page changes. It's really cool! Try it at CSS Zen Garden.

Why not go with a WYSIWYG editor?

In case you haven't been hanging around with geeks enough lately, WYSIWYG means: What You See Is What You Get. For example, Microsoft Word is a WYSIWYG editor – you build your web page the way you want to see it in the browser with pictures, colors, fonts, etc. Then you save the file as a Web page with a .html extension and, voila! It's really simple. You never have to look at HTML code or any of that complicated stuff.

To explain why that's not a very good idea I have to get a bit ahead of myself.

As we go along I'll talk more and more about a subject called SEO (Search Engine Optimization). Simply put, SEO means building your Web pages in such a way as to make them attractive to the search engines – Google, Yahoo!, MSN, Ask.com. Why is that important? Because the search engines are the source for more than 80% of your customers!

So, your web page has to be attractive to the human customer who will eventually read it but it has to also be attractive to the search engine robots who will read it first. There are ways of doing both but, WYSIWYG is not one of them.

A page created with a WYSIWYG editor contains way too much formatting information (I hesitate to say “junk”) that hides the content from the robots. And, don't forget, the robots are looking at your page wanting to find CONTENT! You don't want to hide the content; you want to make it as obvious as possible. So, learn enough HTML to understand your template page and use an HTML editor to change it to suit your needs.


If you are now ready to take a break, visit a website devoted to wine and food. From a Web developer's viewpoint, one of the interesting aspects of the site is that it is developed entirely using PHP programming. Take a look at The Ultimate fine wine and food pairing guide.






Top