Third party cookies may be stored when visiting this site. Please see the cookie information.

Introduction to creating a website

Introduction

This guide provides an introduction to the tools and techniques involved in creating a website. This is intended for anyone looking at hosting their first website and the things to be aware of when deciding how to create this. It is applicable to all websites from a personal homepage to a fully fledged e-commerce website.

This tutorial does not go into details of actually creating the website some of which will be covered in future tutorials, but it does provide the names of techniques and technologies as a starting point for finding out more. I have tried to put the steps in an approximate order of priority, but these should not be viewed as discrete unrelated tasks. All the different aspects of the site should be considered when making a decision that may affect a later aspect.

Identify the function of the website

Before starting on designing the website there a a number of things that need to be considered.

Why do you want a website?

There are many different reasons for wanting a website. There is a large difference between the requirements for a website that provides a basic web presence to let potential customers know that you exist and one that provides full e-commerce facilities such as an online store. The first and most important aspect of a website is in identifying its role. In some cases these may at first appear to be obvious, but a proper answer to this question is rarely trivial.

For example even if you are looking at a simple personal website you need to consider whether you may want to use the page to supplement your CV when applying for a job. If you will be referring to your website to promote yourself then you may want to adopt a more formal tone than a site to share ideas with your mates.

What will your website offer that is unique or special?

There are hundreds of websites that just copy what someone else has done, or provide nothing new to the reader. If this sounds like you then perhaps you don't actually need a website at all (see below). If you want a website to be successful then you should be looking at what it is about your site that is unique or that will give visitors a reason to go to your website.

It could be that you are a commercial company and you want to put a website to give your company name a bit more status and credibility. Or perhaps a club or organisation. In any of these cases then it should be your business or organisation that strives for that something special. The mission statement or organisational aims should already provide the unique advantages of people visiting your company or organisation. Do you strive to be the cheapest, or the best quality, or can you provide something that the competition can't? As this is about websites and not business strategy I'll leave that to the specialists in that field.

For those that are just creating the site as a hobby then it's most important that you have something to offer. Perhaps it's your local insight or you are passing on personal experiences for others to learn from. Whatever it is, if you manage to give your website something unique it will help it stand out from the crowd and your visitors will thank you for it. If not then it's likely the visitors will move on to a website that they find more relevant.

Do you actually need a website at all?

So far I've been assuming that we are going to come out with a complete website at the end of this process, but perhaps now is the time to take stock and make sure if this really it what you want. To provide a useful and relevant website involves a considerable investment in time (and possibly money). If you are not committed to providing the resources needed then you are going to end up with a pretty poor website. If there is one thing that is worse than not having a website, it is having a bad website which damages your reputation.

In fact there are so many people or companies doing websites badly that there is even a website and book on that very subject. I have already written a review of the books: Son of Webpages that Suck, and Web Sites that Work.

If you don't have the commitment to maintaining a full website then there are alternatives such as having a page on one of the social networking sites or business portals. A Facebook or Myspace Group Page is a good way of having a web presence for a club or organisation, or there are some professional organisations that include a page related to member businesses etc.

Who is the target audience?

Your website should be designed with your target audience in mind. Factors that should be considered include: the target age group; skill level and interests. Whilst you may hope to attract visitors of all walks of life, unless you consider the needs of your target audience few are going to stay with your site.

This doesn't mean that you cannot provide content that goes outside of your typical target audience, particularly where it fills a particular niche or provides something unique, but you shouldn't expect many outside of your target audience to continue browsing further into your site unless you can provide further content that is relevant to them.

You could have a site that is of interest to multiple target audiences as long as they can find the information that is relevant to them. For example you could design a site that caters for children and parents simultaneously by having a section of the site "for the grown-ups".

The one area where the rules are made to be broken is in a personal blog (web log). Even with so called random blogs there are normally themes related to the author's interests, or to their local area. If that is the case then it is worth grouping the relevant posts into useful categories so that visitors can view related material, or you could include a mini "related posts" menu list to the post to refer to similar posts.

What features are required to realise your website?

There are a number of different technologies and techniques that can be used to engage with the visitors and enable the content to be created. The following are a few that could be considered.

Static html – Traditional web pages whose content changes infrequently.
Dynamic pages – Content created based on changing content (eg. from a database).
Forum – Discussion board where visitors can create and add to discussions
News – News stories, these are normally dropped form the main view of the site after the story is no longer current.
Blog – Web log or journal typically listing news items chronologically. Often these allow visitors to contribute in a discussion.
Wiki – Site allowing visitors to edit the content.
Multimedia – Video is a popular medium for attracting visitors to a website or for demonstrating something visually.
Interactive content – When the world wide web (www) was first created it was used mainly for static text content. Since then it has evolved to provide more interactivity which could be as complex as complete web based applications. These have become more prevalent in recent times with the dynamic content used by social networking sites and the popularity of online applications often referred to under the guise of cloud computing.

There are many different tools that can be used to create these, some of which are discussed in the next section.

Choosing a domain name

Assuming you have decided to go with your own website then one of the early decisions for a new site is to choose a domain name.

The domain name is part of the address that users will access your site through that normally depicts the particular company.

The following website address is used in this explanation. In this case it consists of 3 parts separated by periods (.).

www.penguintutor.com

Starting from the right-hand side is the top level domain entity which in this example is .com . This may also be country specific such as .uk or a generic top level domain such as .org or .info. In the case of a country domain they may or may not have another part which depicts the type of organisation. For example using the UK domain popular suffixes are: .co.uk usually referring to a company; .org.uk usually referring to a charity or volunteer organisation and .ac.uk referring to members of the academic community (schools, universities etc.).

The next part is normally company specific and in this case is penguintutor. At this point we have the domain name.

There can be another section here at which point the domain is split into sub domain. This is sometimes used by larger companies to separate their domains into different departments etc., but won't be considered further at this stage.

The leftmost part in this example is the specific hostname which is usually www for a webserver. This is not part of the domain name and refers to the particular server rather than the domain. Other popular hostnames are mail / pop / imap / smtp, used for mail related servers or ftp used for an ftp server.

The technical details of how the domain name service works is explained in the Basic TCP/IP networking reference guide, but for now it's just a case of picking a domain name for the website address.

Typically most sites will use a generic term which includes reference to the industry or product they supply and or their company name. If the company is a well established name that customers associate with then the latter is usually best, but the first option can help with search engine placement if it is a term that people may search for. It's also useful to have a domain name that is easy to remember.

Another thing you may want to consider doing is to register other related domain names or common misspellings if you chosen domain name includes a word that may be misspelt. You could also include international variations, so for example if you use the English word colour within your domain name you may find it useful to register with the American spelling color as well.

To check the domain name is available it may be easiest to use the search function on your chosen hosting provider. Alternatively you can check directly with the appropriate registrar such as the UK Register: Nominet.org.uk or one of the .com domains using a registrar from the VeriSign Registrar List.

Note if you are using the Whois function from the registrar then you should not normally include the www part of Internet address, only enter the domain name.

How will you create / edit your website?

Although the content and layout should be the priority, it is worth looking at the different options available to create the website early on as this may help deciding on how to organise the content. I put this before finding a hosting provider as I believe that we should dictate how computers should make our life easier and not, as is often the case, that people are forced into a method of working that is convenient for the computer system that has been provided.

This tutorial is mainly designed for those wanting to create the site themselves, but it is of course possible to pay a developer to create a site for you. Many of the aspects discussed are still relevant for discussions with the web site designer especially if you will be relying on someone else in-house to provide new content to keep the site current and relevant to visitors.

This point is a good time to take stock of what resources you have as cost and time will be deciding factors in what tools are available to you. Alternatively if you've not yet set a budget you could use this to determine how much you are going to need to lobby your boss for.

GUI based designer (eg. Adobe Dreamweaver)

Whilst it's possible to edit web pages with nothing but a text editor some people prefer some kind of visual editor. This was the preferred way of creating websites in the past, but now content management systems have become much more popular. As a result most of the GUI based designers for Linux have not been developed for some time. On Windows and Mac Dreamweaver has been the dominant software for some time and it is possible to run Dreamweaver under Linux using cross-over, although you may need too check the particular version against the compatibility list.

Template websites

Some newcomers to web design opt to use a template system hosted by their web provider. These are a quick and easy way to get started, but often result in unoriginal basic web sites.

CMS (Content Management System)

One problem with creating pages using an editor and using the simple templates is that the sites do not cope very well with large websites. Once you have more than a few pages then it can get difficult to track and update all the pages. A content management system provides a way to manage an entire site through the use of highly customisable page templates, plug-ins and document management.

Online content management systems have now become the most popular way of creating a web site, and particularly those that provide interactivity with visitors (eg. visitor feedback).

Normally the content management system is installed on the webserver and is configured using a web browser accessing a management interface. Popular CMS software available for Linux includes Drupal and Joomla. Another popular CMS is Wordpress which I use for my personal website - watkiss online. Wordpress started out as a blogging tool, but has since evolved to provide CMS capabilities.

Blogging software (Blogware)

Another way of publishing a web site is by creating a blog using one of the blogging software tools available. A blog (web log) is a collection of document entries (called posts) that are added to on a regular basis. They are often created by an individual but are also used by some companies as a way of providing regular news or of engaging with their clients in a less formal way.

Most CMS systems will include this functionality, but there is software that is specifically designed for blogging. The two most popular blogging software tools are Moveable Type and Wordpress. As mentioned already depending upon configuration and how it is used Wordpress could be classed as a CMS and the Wordpress web site refers to it as a publishing platform, but it is best known for it's origins as blogging software.

More details about using Wordpress for hosting an entire page and blog based web site for watkissonline.co.uk.

Hardcore html and css editing

If you are the sort of person that knows your Java from your coffee beans, your Cookies from your biscuits and thinks that your status is measured by the number of megabytes in your RAM rather than the balance in your bank then html and CSS could be for you. Actually I believe that all web designers / webmasters would benefit from knowing and understanding how webpages work underneath the GUI that users see, but you need to have a good technical expertise to be someone that can create websites just by typing the mark-up directly into a text editor.

All you need is a text editor which is included in all operating systems. Alternative editors are available for free including some specifically designed for creating html. Creating sites in native html also gives you the most control over your site, but it can involve a huge amount of work when creating big sites.

Web server based programming / scripting

Adding scripting or programming to the html discussed above can provide dynamic content which is handled as native html by the browser. Programming languages exist such as PHP which can be used provide dynamic pages with capability only limited by the imagination. Other popular alternatives include Perl, Python and Ruby on Rails.

Much of the content on some of my websites is created through scripting using mainly PHP and some Perl. I do also have a bit of help from Wordpress and OpenOffice.org for the blog and the tutorials respectively, which have been integrated into the site using more scripting.

The rest of these techniques listed are in general much more complex, but can provide some impressive additional capabilities:

Adobe Flash

Macromedia introduced Flash as a way of breaking from the traditional static web content that was available at the time. It gained a large popularity and became the de-facto standard for adding truly dynamic content to a website. Macromedia has since been purchased by Adobe. The rise of html 5 and the html 5 canvas object has now provided a native alternative to flash. With Adobe stating that it will drop the mobile versions of Flash in future (it has never been available for the iPad) the days of Flash are now looking numbered.

Java

Java is a programming language designed for cross platform development and often used embedded within web pages. This provides a useful and popular alternative to Flash with the advantages afforded by a full programming language. A good understanding of computer programming is normally required to produce Java based content for inclusion into a site, although there are some ready-made java applets available to download.

Javascript and client side programming

Not to be mistaken for Java, Javascript is a popular client-side programming language for including code that the web browsers can run. In earlier versions it was considered a less powerful programming language, but is now considered a good option for dynamic web pages.

When used with Ajax or HTML 5's console object Javascript is now a popular choice for creating interactivity and dynamic content.

AJAX

AJAX is not so much a tool as a methodology. In the past to update a web page after it was loaded needed either a plug-in (such as Adobe Flash) or to refresh the page in the browser. AJAX provides another way of dynamically updating a web site on the fly by allowing the client-site programming language to interact with a web server without needing to refresh the page. It is often created using the combination of Javascript running in the browser and PHP on the web server.

AJAX opened up a new world of possibilities and is used extensively in social networking sites (such as Facebook) and cloud computing (such as Google Docs).

Choosing a hosting provider

After deciding upon how the site be will created, there needs to be a server to install this on. This can vary widely depending upon budget and how much of the management of this is going to be kept in-house or handed off to a hosting company.

ISP webspace
At the cheapest end for personal sites you could use the free webspace provided by your broadband Internet provider. In this case you get very basic capability and you are normally stuck with the DNS name of your ISP (Internet Service Provider eg. virginmedia.com ).

Dedicated server
At the other extreme you could manage your own web server in a dedicated rack provided in a data centre. Instructions for installing your own Linux Apache Mysql PHP (LAMP) website

Managed hosting space
In between these there are a range of offerings from having a site hosted on a shared server with many other customers to having a dedicated server fully managed by the provider.

This section is based on managed hosting as this is where most people will be when publishing their first serious web site.

A key criteria when looking at shared hosting is going to be the budget available. If you have a lot of money to spend then you will be able to dictate the terms of the hosting agreement than if you are going for a cheap hosting service. I have listed a large number of considerations if you are looking for a cheaper option you may not be able to find out about these, let alone directly influence them. The following are some of the factors to consider:

  • What are the operating systems available?
  • What are the price options?
    • Can you move between different service / price levels if requirements change?
  • How much web space is provided?
    • Is there a maximum file size?
  • Are databases included?
    • Is there a limit to the number of databases that can be created?
  • Is the DNS address included (for an explanation of DNS see TCP/IP Networking Reference Guide) ?
    • Is the DNS entry country specific (eg. .uk) or other domains
    • Will they create provide the entry on a DNS server?
      • Do you have any control over the DNS entry
    • Does it allow for subdomains?
  • Is email included?
    • Is there a limit to the number of mailboxes?
    • How can email be accessed eg. POP3 / IMAP / web client?
  • Is there a template based site-builder (if required)?
  • Is scripting enabled?
    • What languages eg. PHP / CGI (Perl)?
  • Are there any CMS / blog applications included?
    • If so what are they and what version are they on?
  • What admin tools are provided (eg. Cpanel)?
    • Is SSH / shell access available?
    • What reporting functionality is provided (eg. Webalizer / Awstats / Analog / Raw logs)?
  • Are there restrictions over forums?
  • What is the actual bandwidth
  • What is the maximum bandwidth usage, or is it un-metered (see caution below)?
    • What happens if that is exceeded (additional cost / blocked site)?
  • How can you upload pages / content? (eg. FTP)
  • What is the specification of the server?
    • How many other websites share that server?
  • What country are the servers located in?

When looking at these features it may not be just enough to look through a feature list on the provider's website. It may be that although a feature is offered there may be certain restrictions. Sometimes these will be listed in the terms and conditions (small print), but it may be obscure enough for you to miss. Two examples of these are where un-metered bandwidth accounts may put a stop on the account when a certain level is reached or they may have a restrictive maximum file size (eg 1mb).

The first decision I made was for the operating system that I wanted, most of which offer the choice of Linux or Windows. An important note is that this does not need to match the operating system that is used to create the web pages (if creating locally) and certainly doesn't need to match the operating system that the end user is using to use to access the site. You don't need to know anything about the operating system as you are unlikely to interact directly with the operating system, but are more likely to use the tools that the hosting provider includes with the offering. The choice of operating system can affect the cost and the tools available to create the site. Linux is usually cheaper and includes features that are sometimes charged as extras or only available on upgraded accounts. For example the mysql database is often provided as standard for all but the cheapest hosting offerings, but Windows options usually provide MS SQL server only on the more expensive accounts due to the additional cost. If you want to run ASP.Net then you may need to choose Windows (although some Linux servers provide mono which can also run sites designed with ASP). My personal recommendation would be to choose Linux unless you have something specific that has to be run on Windows.

Unmetered bandwidth was also an important feature for me as I wanted the costs to be fixed with no nasty additional surcharges in the case of a sudden increase in the amount of traffic. CGI (perl) support was a requirement to run my Web Based Quiz (although that is now PHP based) and PHP for the PenguinGallery – web photo gallery application and numerous other bits of scripting code that I used. I do use Wordpress, but I didn't choose a provider that offered that pre-installed, mainly because I wasn't actually using Wordpress at the time. Rather than upgrading to a hosting account that provided that I just installed it into my normal account. I also needed at least 2 mysql databases (For Wordpress / Web Quiz / Other database driven scripts), so that was on my requirements. All that meant that I could not choose the cheapest packages, but was still able to go for something reasonably priced. I then looked at the amount of disk space allocated, it was not really an issue at the time as my sites were quite small, but the photo gallery on watkissonline does take up quite a bit of disk space. Another thing to be aware of is that the disk space allocated is likely to include any emails stored on the server as well as temporary files such as log / statistics related files, which can add us as well.

Another consideration is the location of the site and specifically the country in which it is located. You would think that going for a hosting company that is advertising in GB Pounds and has a .co.uk domain name that the servers would also be in the UK, but that is not always the case. The reason that this is important is that if you are primarily targetting customers of a specific country then a server located in that region is more likely to have a good rating in local versions of search engines (eg. Google). You can use the website country checker to see what country a specific server is located in.

The rest of the features were a case of weighing one provider against another. The problem when looking for low cost solutions is that they only highlight the features that they have and in many cases they won't publish information on number of sites per server etc. You may also want to search for reviews of that particular hosting provider on the Internet to check for other people's experience.

Adding the content

The tools used will determine how content is created which may be through using an online tool (CMS etc.) or by editing on your local machine. If the content is created locally then it will normally be uploaded to the web site using a file transfer application based on FTP, WEBDAV or one of the secure alternatives (sftp etc.).

Linux users will find that the file explorer in most distributions can be used for transferring directly to an FTP server. Windows users may need to use a 3rd party application such as WinSCP.

Attracting visitors

Once you have your site up and running you need to attract visitors to your site. The following can be used to help get your site noticed amongst the millions of websites on the Internet.

Looking at some of my owns sites currently between 20% to 50% of visitors arrive to the site from a search engine. Most of the rest of my visitors are from either direct addresses, bookmarks or email links, with social network sites then coming in quite low down. This can however vary depending upon how well the statistics are collected and depending upon how popular a current topic or subject is with Internet users.

Search engines

A significant number of visitors to most websites will come from a search engine, and of those for most sites the vast majority come from Google (although search engines are quite a dynamic arena so this may change in future). In fact looking at my current site 90% of all visitors who come to my site through search engines are from Google. The Google search engine is therefore key to getting a large number of visitors.

You can add your site to Google using the Google submit your site page, but the best way to get listed in Google is to use Google Sitemaps which helps Google to build an index based on your entire site.

Social networking

Social network sites such as Facebook and Twitter have taken off in a huge way and despite privacy concerns are set to maintain a large following. These sites can be used to help get your site known and help build loyal fans. This can be done by creating your own Facebook Page and / or by creating an account on Twitter, but some other sites with social networking features can also be used such as Flickr and YouTube.

The social network sites can have a strong viral effect as if someone Likes or retweets your content then it gets propagated down to their friends. If any of your friend's friends then Likes or retweets that then it can be propagated further out. If an article is particularly popular then this can be considered as "going viral" and can get spread around the world very quickly, although you need to have particularly good content for that to happen.

Another advantage to using social networking sites is that they can help deal with some of the initial traffic that these sites can generate. This is particularly important with video files which can be large and easily overload a low-cost hosting provider. If looking at creating multi-media files then you could consider using a social networking site for this reason.

Community forums

Community forums can provide another way of spreading the word about your website, but should be used with caution to ensure that the posting could not be considered as SPAM. This is most effective when used to provide a service to the public in assisting other visitors to the forum with issues they have and then including (perhaps in your signature) a link back to your website. Posts to forums purely to advertise the site are likely to be considered as SPAM and can generate negative feeling towards your site and brand.

Traditional publicity

It's also worth remembering traditional printed media when looking to publicising a new website. This can include adding the address to your company's letterhead and including on any posters, leaflets or other publicity materials.

Keeping the site current and providing new content

To have a successful website means ensuring that the content is kept up-to-date and there are regular updates to the site. A site that is regularly updated looks more professional and is likely to gain trust from the users and is more likely to attract return visitors.

Some ways that you can provide regular updates are:

News – A news section on a site can provide updates on changes to the site, the organisation or other news related to a related topic.

Blog – A blog is a web based log or journal. It doesn't have to be limited to formal announcements as blogs often provide personal comments or announcements related to the same industry or theme.

Additional Considerations

Finally there are some other considerations when creating a website. These are related to the creation of the pages themselves so are not discussed in detail, but understanding these upfront will help when it comes to creating the design.

The first of these is browser compatibility. The number of different browsers and devices used to browse the Internet. In the past Internet Explorer (provided by Microsoft for the Windows operating system) was the most popular browser, but many users have now switched to improved browsers such as Firefox (from Mozilla) and Chrome (from Google). The Linux operating system is gaining in popularity on PCs as well as Netbooks and Android (Linux based mobile operating system) is proving very popular on smartphones and tablets. One of the ways of achieving cross-browser support for current and future browsers is to concentrate on implementing the HTML standards and using CSS to direct the presentation, as newer browsers are much better at following the standards. Internet Explorer 6 was one of the worst browsers for incompatibility problems whose use is now negligable, but Internet Explorer 7 does still cause problems with some sites.

Attention should also be given as to how disabled users can access the site. This has become a legal requirement in many countries including the UK through the Disability Discrimination Act. Complying with the HTML standards is a good starting point, but there are other considerations such as providing good alternate text for images, high contrast colours and scalable text size.

Conclusion

This has only scratched the surface of all the different aspects involved in creating a successful first web site. Although this can involve quite a lot of hard work the results can be very rewarding and help promote your business, organisation or opinions.

Other Raspberry Pi Projects and tutorials

Previous Installing Raspberry Pi PIXEL x86 in a VM
Installing Raspberry Pi PIXEL x86 in a VM
Next Guide to the Apache mod_rewrite module
Guide to the Apache mod_rewrite module