The anatomy of a website

Over the last few weeks of TiPE, we have (hopefully) explained the various steps that you need to follow in order to get setup with a website. To recap, you need to pick and register a domain name, you need to get a hosting package so you have somewhere to put your site and you need to make sure that your hosting has sufficient capacity in terms of bandwidth to cope with your data requirements.

This week we will move on to look at your website itself. This means we will be lifting the lid on your website and exploring, in a very simple way, the various elements that make up your site and some of the tools you can use to build and manage your content.

What is a website anyway?

We’ll start today at the beginning with an overview of a very simple website. Let’s assume that Joe Blogs wants a personal website to represent himself on the web. He will have a number of pages reflecting his various likes and interests but does not want to be able to update them quickly at this stage, i.e. these pages will be static. He wants these to be all linked together by a homepage so the site will look something like this: 

• Homepage:
• About Me
• Personal History
• Football
• Bird Watching
• Food

In this case we can build the pages very quickly using the standard web language, called html, to reflect this layout. However, while the content of all these individual pages will be contained in the html, we also want to apply a standard ‘look and feel’ to them so that the site all looks the same. In web design we can do this with a stylesheet or css which we can define once to describe the general page background, layout, colours, fonts, etc, and then apply this to all pages on the site. This not only simplifies the design process but it also gives us another important property in web design, consistency.

With this in place, we can then add whatever content we want to the pages in terms of text and images, put all of this into our web hosting space, and voila, we have a (simple) website!

Welcome to the Web 2.0

So, this is all well and good for our simple example as it gives us a presence online and is probably enough to meet Joes original needs. However, in the early 2000s there was a realisation that the Web could be so much more than just a bunch of static websites and we started to see the rise of dynamic content. Now we could have websites that were constantly being quickly and easily updated with new content, allowing users to interact and share things seamlessly, and collaborate in building shared online spaces. Out of this movement we saw the rise of many of the things we now consider to be fundamental to the Web such as blogging (web logs for the uninitiated), music and video sharing sites like YouTube and MySpace, and social media networks like Facebook and Twitter.

Now let us assume that Joe wants to update his now outdated website to include dynamic content. For example, he would like a blog so he can write about his interests, he would like a gallery so he can post photos and videos from his bird watching, and he would also like to link all of this to his Facebook and Twitter account so his friends can find them online. Clearly it is now unfeasible to write all of this by hand so we need to use some tools to make the job easier. What we really need is a content management system (CMS) that we can use to manage our site, keep track of all the various elements, and give us an easy-to-use interface to interact with.

As luck would have it, a number of these tools now exist online and many of these are even free to download and use. There a many of these to choose from, such as Joomla and Drupal, but we tend to use WordPress as it offers many of the powerful features available in professional tools but is still aimed at normal users so is very easy to use. With something like WordPress running our site, we can have any static content we want and still use stylesheets to create our look-and-feel but also now introduce a wide variety of dynamic content and features. Moreover, we can manage our entire site via a simple web-based interface and customise many basic elements like page layout, style, etc without ever having to dig around in html.

It’s never been easier to get yourself online!

——