Delicious Digg Facebook Favorites More Stumbleupon Twitter

Building Your Website – Part 2

Getting started with the code

When a visitor arrives on your site and the web page is displayed on their browser quite a lot has gone on behind the scenes to make this happen. A couple of terms you may come across are ‘client side coding’ and ‘server side coding’.

Client side code (which covers HTML, CSS and JavaScript) is script executed by the user’s web browser whereas server side coding (which covers PHP & MySQL, Perl and ASP/ ASP.NET) is script first executed by the server before being shown to the visitor.

Client-side

A web page has three layers which you build up as the site progresses. First you start with your content (HTML) which is essentially the website’s blue print. You then move on to how it looks by adding components such as colour, images and spacing (CSS) and finally you add interactive and behavioural elements to the page (JavaScript).

The 3 layers of a web page:

Keep them all separate

Initially web developers put all of these scripts on to one page however they soon realized how time consuming and labour intensive this approach was, especially when any changes were required. Today best practice using HTML, CSS and JavaScript dictates you use separate files for each.

  • Easier to re-use code across multiple pages or even sites
  • Reduces the amount of duplicate code
  • Easier to find and fix problems
  • Makes a site more accessible (e.g. browsers with JavaScript disabled can still show the HTML/ CSS files)

This guide will focus on introducing you to HTML and CSS.

File structure

A web site is basically a collection of inter connected files kept within directories. Keeping your files well structured and logically named helps you administer the site as it grows and from an Search Engine Optimisation perspective.

File structure and SEO

Search engine optimisation is the process of increasing a websites organic position in a search engine. Keyword analysis is a major part of a search engine’s ranking factors, be it in the domain name, the <title> tag, in the text etc. This also goes for your file names which make up the page’s URL.

Bad: http://www.super-sport.com/range2/catgeorty4.html
Good: http://www.super-sport.com/trainers/basketball

Below is an example of a typical file structure for a site. Index (the home page), ‘about’, ‘FAQs’ and ‘products’ are all in the parent directory. ‘Apples’, ‘Oranges’ and ‘Pears’ are in the ‘Products’ directory and ‘conference pears’ and ‘dessert pears’ are in the ‘Pears’ directory:

- Index
- About
- FAQs
- Products
+ Apples
+ Oranges
+ Pears
++ Conference Pears
++ Dessert Pears

If I wanted to link to the ‘About’ page I would do the following
<a href=”/about”>Text goes here</a>

If I wanted to link to the ‘Oranges’ page I would do the following
<a href=”…/products/oranges”>Text goes here</a>

If I wanted to link to the ‘Dessert Pears’ page I would do the following
<a href=”…/products/pears/dessert pears”>Text goes here</a>

(end of Part 2)

2 Responses to “Building Your Website – Part 2”

  1. karen millen dresses on sale says:

    great experience, dude! thanks for this great article

Leave a Reply

You must be logged in to post a comment.