Contents

If you wish to skip to a particular subject area, please click on one of the following links:

Web Site Hosting

Site Types

Page Editors

Site Design Options

Images

Page Layout

Where to now?

Web Site Hosting

Before you can put your site in front of your intended audience there are a few formalities you have to go through such as selecting a hosting provider and registering a domain name.

Registering a Domain Name

Before you can start a website, you need to decide on a domain name. The domain name is the name of your site on the web, the address that people will type into their browsers, such as www.ukitbits.com.

Although a great many sites, particularly ones with a global audience, use a .com domain name. However, there may be more suitable alternatives for your site. You could use .org (organisations) and .net (for Internet service providers). In most case s, you should be looking at .com if you're a company selling physical products, but if your market is specific to one country then you may be better off with that country's suffix, for example .uk (United Kingdom).

There are some addresses that have been made available more recently, such as .name (for individuals) and . biz (for companies), but they don't seem to be gaining any popularity. You should also avoid fake domains like .shop, which are sold at some places but won't be accessible by most of the Internet.

When chhosing a name then don't think about any single word that can be found in a dictionary. These go really fast and so you're very unlikely to find one. It can be an idea to try a tool like the one at www.nameboy.com which allows you to combine words and will come up with variations. The tool will also tell you whether the names are available for .com .net .org and some others.

Once you've made a list of domain names you're happy with, the next step is finding a registrar. The easiest option is to get your domain name with your web hosting. You may pay a little extra when doing this, but it saves you hassle. Alternatively you can get your domain name from one of the specialist services such as godaddy.com, easywebdomains.com, and others.

Finally, when you're registering your domain, make sure to put in genuine contact details, as you can lose the name if you don't. You should also remember the username and password you use, as you will need them before you can point that domain to your website.

Hosting

Many of the low cost domain name companies have taken to offering hosting when you buy your domain from them. This can be an expensive option, and you may lose out on features. It's better to buy good hosting and pay slightly more for the domain registration than pay for a cheap domain and expensive hosting.

It may be worth visiting a few forums and looking at some review sites to see what the buzz is on the best web host in your country or, budget. www.webhostmagazine.com has reviews broken down by host types such as 'Budget Hosting', 'Ecommerce Hosting', etc.

How much you pay for your hosting will depend on things like storage space and bandwidth. The more MB of storage you have, the more you can put on your website. For most websites, this number can be fairly low without it being much of a problem. Bandwidth is generally measured in GB per month. This is a limit on how much data your website can transfer each month. For small websites, you don't need to worry too much, but as you get more visitors the amount you need will increase and your hosting costs will rise. Things like audio will add significantly to the amount transferred, video even more so.

As you get into more advanced aspects of Web Design later on you may want to have a database on your web site, or need to run scripting languages such as PHP, Perl, ASP, ColdFusion, Python, Ruby, etc. It's great if your host offers most or all of these, but at a minimum you want Perl and PHP scripting and MySQL database software.

Addon domains. These allow you to host more than one website on the same hosting . Some hosts allow unlimited domains - which means you can host all your web sites without paying any extra for hosting. Make sure this is real multiple domain hosting though and not web forwarding as forwarded domains often don't get indexed properly, if at all, by the search engines.

POP3 accounts. POP stands for 'Post Office Protocol', which is tech talk for email . The more POP3 accounts you get , the more email addresses you can have - useful if you want to different accounts for each person or function at your company for example.

You may find you'll be offered a choice of server product too. The choice will almost certainly be between Apache running on a Linux server or IIS running on a Windows server. Over the last 10 years or more the server market has been dominated by Apache, but IIS has been closing the gap rapidly during 2006. You should be able to run your site perfectly well on either so it's probably just a matter of personal preference or provider offerings. Personally I prefer Apache, but that's probably just because it's what I'm used to. If you want to find out what the latest trend is on server numbers, take a look at the latest Netcraft Monthly Survey.

Web hosting has dropped in price a lot recently - there's a lot of hosts now offering just about everything you need for under $10 a month. Make sure though that they've got a good reputation for reliability and support. You don't want to be on a premium rate phone call waiting to talk to a support engineer.

Site Types

There are a lot of different kinds of websites, and there are a lot of people who know they want a website, but aren't sure why they want one or what they want it to do. Take some time to figure out exactly what you want your website to do, what kind of thing do you want to put on it, who are you trying to get to visit? Below is a guide to some of the most popular website types. Bear in mind that you may need to combine elements of more than one to achieve your goal.

Personal/Community Site

A site providing information on an individual or small group. It could be a family site or maybe about a club to which you belong or a hobby you have. They can be fun to participate in and if you hit the right subject they can become very popular with visitors.

The CV/Portfolio Website

A site directed at getting people to call you if they're interested in you. for example, it could just be a list of the jobs you've had, or it could be an archive of articles you've written for various publications. The key to these sites is to be brief and they can be effective , although you should realise that you're more likely to get work because of a site that people find useful than because of one that's just about you.

The Brochure Website

Brochure sites simply reproduce the kind of material you would send out in a brochure to an interested customer, complete with pictures and relevant details. These are not full eCommerce sites, where you do business on line. Instead you give the customer your contact information. If you offer the kinds of services that are individual to each customer and can't be priced or specified easily then this type of site may be appropriate.

The eCommerce Website

This type of site is ideal for selling online services or products that you can ship out to customers. Don't worry that you don't know how to handle all the payment processing and all that techie stuff. Depending on the type of product or service you have there are plenty of companies who can run that for you and you can easily integrate the shopping cart into your site or have them host the whole thing.

Content Site

Content sites provide targetted information on a specific subject area. Some examples might be hobbies, fitness, cars, even computer information (hey that sounds familiar). Content sites frequently pay their way by displaying ads or having a button or form asking people to donate money to keep the site on line.

Page Editors

Once you know what type of site you want and what it's all about you'll be keen to start building pages. You could just open a text editor and start coding the HTML, but that's my idea of torture. One way to create web pages from scratch without hand-coding HTML is to use an editor that lets you lay out a web page like you might do in a word processor. These programs are called WYSIWYG (What You See is What You Get) editors. You lay out the page and they create the HTML for you. Here are a few notes on some of the more popular editors.

FrontPage

FrontPage can be a great choice if your web server runs 'FrontPage Extensions' installed, that make it easir to upload your from FrontPage to your server. In most cases, though, you'll be better off just saving the files using FTP. You will also need to have the Extensions installed on your server if you want to use some features like forms to work. Come to think of it these could be considered reasons not to use FrontPage!

FrontPage's biggest pro blem is that it often produces non-standard 'Microsoft HTML'. This HTML is bad enough to be completely un-editable by anyone who isn't also using Front Page, and may not display correctly in any browser apart from Internet Explorer.

Overall, tr ying to create and manage anything but a basic website with FrontPage can be a big headache. It's all too easy to hit one of FrontPage's bugs and end up with a real mess. It's cheaper than Dreamweaver, but you'll probably waste that money fighting against it's flaws.

Dreamweaver

In my opinion, Dreamweaver is the editor of choice. It may be expensive, but there are serious web designers out there using it and getting work done. Dreamweaver is part of the Macromedia Studio (recently acquired by Adobe) so it integrates well with other Studio software like Flash. Their software is particularly popular with designers, and all it works on the Mac as well as Windows. It can be complex, but it's basic functions are easy to use.

The code Dreamweaver produces generally conforms well to standards expecially in the more recent versions and the product now even includes a built-in standards validator. Other features include XHTML support plus good support for CSS, Javascript and PHP (we cover these areas more in our Advanced Web Design page).

One of my favourite bits is the split design view. This gives you the WYSIWYG window for layout, but also gives you a small window where you can see the code being built and where you can tweak it if you want to. Always handy for fixing those little quirks that even the best software still has.

Site Design Options

When it comes to designing your site there are a few options. You could have the site designed by a specialist company, design the site yourself, or maybe obtain a pre-built template.

Hiring a professional

If you decide you want to leave web design to the professionals then you have to face the fact that not all of them are exactly professional. As yet you can't get a meaningful qualification in web design. If you're looking for certification then you might be better off with someone who has a graphic design qualification.

What you should pay attention to when you're looking at web designers is which of their skills they think are import ant. If they 're trying to sell you on bulked up sites with Flash menus all over the place then you probably don 't want to hire them. If they can competently explain what XHTML and CSS are, and why they're good for your website, then they're a better candidate. It's always worth looking at examples of past work and, if possible, talking to other customers.

How much you should pay is another tricky area. Many web designers have no idea what to charge for their services. If you post a project to a freelance site like elance.com where designers can bid on it, you'll get bids ranging from $50 to $5,000. The two extremes are probably worth avoiding for a start. At one end, you' ve got kids with no experience, at the o ther, you're paying for people to meet and discuss it for hours on end. If hiring through a freelance site, have a look at other briefs and responses to get a feel for the sort of price others are paying for similar work.

Templates

If you don' t want to deal with designers and you you don't want to design a site yourself, then there are plenty of places where you can obtain pre-built templates.

A quick search for "free website templates" will return thousands of results. Free templates though, are likely to be fairly poor, often just plain horrible. If you want a free template then you're probably better off using the ones that come with your page editor. You have to realise that by using a free template your website will look just like hundreds of other websites out there that use the same template.

Once you start looking at paid-for templates, things start to improve. For a start the sites that sell templates can pay designers to do a good job and then resell it as many times as they want for a relatively low price. It's good news for designers too as they can be paid for many designs without ever having to deal with customers. The biggest template selling site is templatemonster.com.

You can even buy an exclusive template from some template sites. You can browse a bunch of pre-built templates, looking for something that meets your needs, and be the only one to buy it. This way designers are free to create something great, and customers can take it if they like it or look at alternatives. You can usually have small changes made for an extra fee too.

Template Software

Another option is to use software that can generate templates for you. One definitely worth a look is Xara Webstyle. Webstyle started out as a package allowing users to make web graphics such as logos and buttons without knowing anything about graphic design. It still does that very well, but as of version 4 it can also be used to create templates for complete web pages. It isn't a page editor, but it integrates with FrontPage and Dreamweaver.

There are a number of pre-built customisable templates included and you can buy add-on template packs. The software isn't particularly cheap, $79 for the CD only version, but if you're looking for a painless way to build your own templates and graphics with no technical or graphic design knowledge it's worth a look. You can download a trial version to check it out before you part with your hard-earned money.

Images

Even if you do nothing more than add a logo at the top of your site you'll need to know a little about images. This section gives you some information on graphic formats as well as a few notes on some parameters used when adding images to your web pages.

Formats

GIF - GIF stands for Graphics Interchange Format, and it was invented by CompuServe in 1987. It was updated in 1989, and hasn't been changed since. Images stored in GIF format can only use a maximum of 256 colours, which makes it unsuitable for photographs and some other complex graphics. For all its shortcomings the popularity of the format is mainly due to it being first and producing very small files. It can be useful in allowing you to create small animations, but that function has largely been overtaken by Flash.

JPEG - JPEG was designed by the Joint Photographic Experts Group, hence the name. It was designed as a format suitable for storing photographs at low file sizes. Today , the format is supported in almost all web browsers, and has also been adopted as the format that you'll get photos in if you take them with a digital camera.

PNG - PNG (Portable Network Graphics) is a bitmap image format that was created as a replacement for GIF. There are several areas of improvment over the GIF format, but PNG has not been widely adopted. Part of the reason for this is poor support in Internet Explorer. Internet Explorer 7 has addresses PNG rendering and the format is well supported in other browsers such as Mozilla Firefox, Opera and Apple's Safari.

For now you'll most likely want to use JPEG for photos and GIF for other graphics like logos and buttons. Keep an eye on PNG once the majority of people have upgraded to browsers with good support. If you have graphics in other formats then you'll need to convert them. Paint Shop Pro is a good software choice for this and can even handle bulk conversion.

Adding Images to Web Pages

I know I said I wasn't going to get into HTML tags, but the <img> tag is worth a closer look. The <img> tag has a number of attributes such as border, height, width, etc.

The height and width attributes can be useful for ensuring your graphics display at the size you want. This can be expressed as a number of pixels or as a percentage. Bear in mind though that resizing an image by more than a moderate amount from it's original size is best done in a graphics package. For instance, if you have a large photo and you want it to display much smaller in a browser then using something like the resize function in Paint Shop Pro will give a better result as well as producing a smaller file which will download more quickly.

Alt - The alt attribute is an increasingly important one for images. This is where you can put text that gives a brief description of the image. It is important for the following reasons:

• Search engines use the alt text and so use of relevant keywords can help your browser position (as with everything, don't overdo it and put hundreds of keywords in your alt text)
• Accessibility - Text to speech software for the visually impaired will refer to the alt text to describe the images on the page
• Text based browsers, such as Lynx, display the alt text instead of the image
• If you are validating your page to ensure it complies with code standards it will fail validation if no alt attribute is included on images

Many browsers display the alt text when you put your mouse cursor over an image. Mozilla Firefox does not do this as it is seen as non-standard behaviour and Firefox is a more standards-based browser

Page Layout

Page layout is something that's always being analysed and re-assessed. There has been extensive research into whether left or right navigation works best although it's hard to find a firm conclusion. You need to try things out and see what works, asking for user feedback where possible.

Navigation

I can't overemphasize the importance of navigation or internal-linking. I've had all manner of fancy menus and Flash navigation over the years, but in the end I reckon plain old text links work best. Users and search engines alike can make use of standard text links using the <a href> tag. The important thing is to keep your links consistent, simple and up-to-date!

Avoid broken links upset users and can lead to your pages being incorrectly indexed by search engines. I realise writing this bit is asking for trouble. I just know you're going to find a broken link now. If you do, I'd appreciate it if you could let me know.

I use a few rules of thumb on site navigation. Personally I have main page links across the top of the page and down the left hand side too. If you want you can also add sub-page links on the left (or right) navigation as you have more space down the side of the page. Finally, I use the bottom for "site info" links. This is a common convention and you'll often find links to "Contact", "Terms of Use", etc at the bottom of sites. Another word about the links at the bottom of this page. The link titles are pretty much the accepted titles in each case. You could, for example, substitute "Who we are" or something instead of "About Us", but people are kind of used to "About Us".

A word about links to external sites. You'll notice a few places on this page where we refer to sites where you can find web design resources. In each case the links start a new browser window whereas links to other parts of the UKITbits site mostly open in the same window. This is deliberate. I'm happy that you visit these other sites that I provide links to, it's what they are there for and it's what makes the Web work. But I want you to be able to come back to the place you were at on my site and carry on reading. By adding the target attribute I can direct your browser to open a new window to display the external content in. Below is an example of an external link with the relevant part highlighted so you can see how it's done:

<a href="http://www.xara.com/products/webstyle/" target="_blank">Xara Webstyle</a>

You can see from the above example that the target attribute has a value of "_blank" which effectively means "new window". If you use a page editor then you will have menu options that will build the link for you. Below is a screen capture showing part of the Dreamweaver Properties window depicting how the above link can be built using that editor:

CSS and the Death of Tables

Laying out pages used to involve using tables. As well as requiring a lot of complicated code, page editing software often made a complete mess of creating tables. You could start out trying to resize a table cell and end up with a complete disaster. These days page layout is usually done using CSS.

CSS stands for Cascading Style Sheets. CSS lets you apply styling i nformation to specific parts of your HTML, identified by tag name, or by IDs and classes you specify. It's much more standards based and you can use an external style sheet which you can pull in on each page. The great thing about that is you can define your layout once and keep it consistent on every page of your site. We'll cover CSS in more detail in our Advanced Web Design page.

You may still need to use tables, but only for what they were originally designed for, namely to represent tables of information. The table uses a combination of <tr> (table row) and <td> (table data cell) tags to lay out your data. For example:

<table border = "1" >
<tr> <td> row 1, cell 1 </td> <td> row 1, cell 2 </td> </tr>
<tr> <td> row 2, cell 1 </td> <td> row 2, cell 2 </td> </tr>
<tr> <td> row 3, cell 1 </td> <td> row 3, cell 2 </td> </tr>
</table>

would display as follows:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2
row 3, cell 1	row 3, cell 2

Heading Styles

Another key part of the page layout is a consistent set of heading styles. Up to six standard headings are defined in HTML and XHTML using the tags <h1></h1> up to <h6></h6>. These are OK as far as they go, but you might not want the size, font or colour used in these defaults. In the Advanced Web Design page we'll show you how to redefine these heading styles so they'll look how you want them.

To give you an idea, on this page we use styles h1 to h3. Each of the section headings is an h2, the sub-sections are h3. Just the one h1 is used at the top of the page.

Where to now?

Now you have an idea of the basics you might want to put some of it into action. The best way to learn is to play around with some software and ideas and see what works.

If you've got a basic site already and you want to know where to go next then head to our Advanced Web Design page where we cover items such as CSS, PHP, etc. We'll show you really useful stuff such as how you can build your page out of a number of external elements, great for letting you build a separate navigation page. Imagine being able to update a menu once and have it instantly reflected on every page of your site.

©  Russell Card - The UKITbits editorial team 2006