How to make a website

CSS stands for Cascading Style Sheets. It is some code that can be used on a website to control the way that a website displays. In its ideal, purist form it can mean that you can simply change the code contained in one file and it will change the way a website looks. I believe that sometime in the future this will be the reality for all websites. It is anyones guess when that will happen.

Now to get a little more realistic. It is true that some purists have been able to make this dream a reality even today and more and more people are starting to use CSS in their websites. However the people who build browsers (e.g. Firefox, Internet Explorer, etc) can’t agree on how CSS is supposed to work. This means that website builders (at least the very expensive professional ones) have to spend hours and hours working on little ways to make CSS work for everyone.

I really want to encourage you to use CSS but you will probably find that you have to use a combination of the old ways of building websites and CSS. We will cover this in more detail in this blog from time to time.

FTP (file transfer protocol) is the method you will probably need to use to get your website on to the Internet.

Once you have designed and built your web site you will need to copy the files from your computer onto the computer (aka server) where your site will now reside so everyone can see it.

There are various free ftp programs available on the Internet (a popular one at the moment is SMART FTP. It’s not the one I use but then I use the one I do because I always have and not because it’s a good one (which is why I’m not telling you what it is).

When you sign up for some hosting from an ISP (Internet Service Provider) they will give you some information about ftp. You will get a server address (often ftp.yoursitename but sometimes some numbers seperated by dots), a username and a password.

Somewhere you will have to put this information into your ftp software. This varies as to where the information goes but I recommend reading the software’s information to find out.

Most ftp system used port 21 (you will probably not have to do anything about this but I mention it in case you get a port number that confuses you).

Once you have set up your ftp program and connected to your server (computer where your site will live on the Internet) you will get the option to transfer files from your machine to the server. Pay attention to what you are doing and if you are making a major change I always like to have a backup of any files that I am overwriting. I have had occasions where files have not transfered properly and so cause all kinds of problems on a website – it is always wise to make sure you have copies of everything.

Then when you have uploaded (or updated) things I recommend testing it. I’ve been caught out more times than I’d like to mention with not checking things. The typical thing to do is to forget to upload some images when you upload a file. You will be annoyed if you forget so its best to make sure you’ve got it right straight away – saves on the stress.

If you are going to build a website you need to know a little about html (hyper text markup language). For a web browser (i.e. Internet Explorer, Mozilla, Chrome, etc) to know how to display a web page it uses a language called html. This language describes what the web page will look like and then the browser uses that information to display everything.

Here is a little bit of html (that displays an image in a page):

<img src=”whereTheImageIs” border=”0″ alt=”this text shows when images are turned off in the browser” />

An html file is just a simple text file with the html code written in it.

Thankfully there are standards for html so that everyone who builds a browser can make sure that the websites all display in the way they were intended to. Anyone who has ever built a website will know that the last sentence was ironic. Browser developers don’t always agree with the standards and so they build things a little differently. Not long ago it seemed that Microsoft has gone it alone and intended to use html that no one else was using but this seems to have been pretty much ironed out now. Anyway these browser wars have resulted in a problem for web builders because we now have to check our pages in as many browsers as we can because they all do something a little different.

I’m going to say a quick word about CSS here. CSS – which stands for Couldn’t Standardise Sheets (actually it stands for Cascading Style Sheets) is a way to remove the formatting from the layout of a webpage. What this means is that you tell your CSS what font you want to use and then if you want to change the font you just edit the style sheet and the whole site picks up the change. It can also be used for layout. On the surface it sounds brilliant but in usage it is complex beyond understanding. Browsers do all kinds of different things with CSS and to be honest its a nightmare. Although I should recommend using them you may find it easier to use other methods of laying out your webpage (most of us use a combination of layout techniques – but more of that another time).

In the good old days there was just simple HTML and it was all in capital letters. We jocks who started the Internet revolution (ah who can ever forget putting those first images on a web page – heady days indeed) used to write everything in plain old HTML. Then someone invented WYSIWYG web design and things got a whole lot easier. However to suit the new fangled browsers that could display images and the new web site building software HTML was expanded and improved. We have now reached the stage where we even had to add another letter to the name of the language (now whose living on the edge). So we now use XHTML and its now all in lowercase.

Don’t be put off by that new high tec X this isn’t a new freedom movement but is simply a slightly more developed form of HTML – I guess HTML as it probably should have been originally. XHTML is a form of XML (don’t worry about XML for now).

Essentially this means that all html tags now have to have a closing tag (a tag is what html uses to describe things, like the image tag shown above) and where html doesn’t have a closing tag we have to make the end of the tag look like this />

So here are a couple of tags:

<br> (html)  <br /> (xhtml) = line break

<p></p> (html and xhtml) = paragraph

<img> (html) <img /> (xhtml) = image tag

<a><a/>(html and xhtml) = link or anchor tag

Most of the time you won’t need to worry about html because your web design software will take care of it but it does help to have a little idea of what it’s all about so you can tweak things.

At some point you will need to make your images smaller for a website. If you try to put a picture taken on your 10 Megapixel camera on to your website without resizing it then if you try to view the image it will fill up your screen and several other screens as well. On top of this it will take a very long time to load.

In a lot of software programs if you want a smaller image you just get hold of the little handles on the sides of the image and pull them in to make the picture smaller, don’t you?

Never do this for a website!!!!

Now there may be the odd exception to this rule if your particular software is idiot proof and will take care of resizing for you but if you get in the habit of not doing it this way you won’t ever be caught out.

On a website when you drag the sides of an image in you are not actually making the image smaller. Instead some code is being added to the page to tell the browser to display the image smaller. Note the word “display”. The picture is the same size as it was before (e.g. huge) but the browser is being told to make it display small.

So then what you want to do is to make the picture small (small = fast loading) and tell the browser to display it the right size.

You do this with some image editing software. I’m afraid they all work a little differently so I can’t give you a blow by blow account here but you are looking for something that says resize, or adjust dimensions, etc.

When you get the right dialogue box in your software there will probably be options for size (e.g. the size you want to resize your image to). You don’t want to resize an image by inches, cm, or mm. You will want to resize by pixels (a pixel is one dot on a monitor). You resize in pixels because monitor sizes are measured in pixels so it makes working out the dimensions on a website that much easier – just trust me on this one.

Also you may see a choice between image size and canvas size. If you are resizing a photo then these are pretty much the same thing but if you are creating an image and resizing it you will find the canvas size is the size of the whole image and if you resize the canvas but not the images on it then they will take up more of the canvas (if that makes sense).

You need to decide how big to make your image. This will very much depend on how big you are making your website, or how big your website actually is. Also remember that the bigger you make an image the slower it will load into the viewers browser. So you want it as small as is reasonably possible whilst still keeping the impact of the image.

Some sites like to put great big images on that spread across the page. I think these look really nice but sadly this was of doing things comes at a cost to the content and speed of the website. It’s up to you.

Then you tell your software to make the image the right size for your requirements.

Now I need to add a word about resolution. You may hear people speak about resolution size (often dots per inch or dpi) and they will say that you need to set this to 75dpi for the web. This is wrong information. A very long time ago when people resized by dpi then this would reduce a big image to something reasonable for the web. However dpi has no effect on file size. Within the image file is a setting that tells a printer what to print the image at and this is where dpi comes in (the usual setting is 300dpi for a print by the way) but this setting has nothing to do with the final file size of the image. The only thing for you to think about for images that display on screen is the pixel size (length and height of the image).

So set your image size to whatever you have decided is right in pixels and ignore any talk of dpi. It took me a long time to work this out for myself (because I started back in the dark ages when people thought dpi mattered to file size) but you get the information straight away.

Click your save or apply button and you have your file resized and ready for the web.

Images on your computer come in lots of different types. The problem is that not all types will be viewable in a web browser. In general there are just three types of image that you can rely on being visible in a browser and they are:

• jpg (jpeg)
• gif
• png

The last one – png is a fairly new standard and is still not fully supported by older browsers. If you don’t care that older browsers won’t see it then you may want to risk it and use png for your site.

However the other two options (jpg and gif) have been viewable in browsers for a very long time.

In general jpg is better for photos and images with lots of gradients and fancy stuff in, whereas gif is better for images created on a computer out of shapes. These days most of the time you will end up using jpg but its up to you.

jpg is a lossy format which means that you lose information in an effort to try and make the image small. I’m not going to bother with details here but if you look carefully at a highly compressed jpg image you will notice the places where the information has been removed to make the file smaller.

Again, as a rule of thumb, you should be compressing your images down to about 75% or above – anything lower and the image starts to show its compression. It does depend a lot on the image and what detail and colours are in it but you can often see a preview of the image as you compress it in your software. If in doubt go bigger rather than smaller.

Why bother compressing at all?

Well the smaller the image the faster it will load in the browser and fast is always a good thing on the Internet.

Hosting, to put it simply, is the computer that is permanently connected to the Internet where your web site will live. To get your website on the Internet so everyone in the world can see it all of the time you need to have some good hosting.

The Internet is simply a network of computers. There are some parts of that Network that work faster than others and so you want to get your site on the bit that is fast. The quickest part of the Internet is often referred to as the “backbone”. This is essentially the fast cables that link the worldwide Internet together – much faster than your telephone line.

Now you could in theory use your own computer for hosting but there are many reasons why this is a bad idea. I would certainly recommend getting yourself some paid for hosting.

The first question anyone should ask about websites is: do I need one? Websites take a lot of time to build and most small businesses don’t have time to spare. So it’s important – before you commit to the process – to decide if you need a website or not.

Of course I’ve been a little sneaky because I believe every business should have a website and here are my reasons why:

1. Websites are a point of contact between you and your customers
   Any business is only ever as good as the contact it makes with its customers. Without customers businesses become hobbies. Because the Internet is so easy to use people like to get their information from it. If they want to find you there is a pretty good chance they will try to find you on the Internet. If they know the address of your website then they will go there to get information about what you do and how to contact you – which they will probably want to do by email.
2. Your competitor will have one
   Every business (as far as I am aware) is in competition with someone else. I don’t mean that every business is trying to put another one out of business – there are great advantages to having competitors but that’s beyond the scope of this blog. There is a very good chance that your competitor will have a web site themselves and if you don’t have one anyone looking for what you sell/do will find your competitor but not you.
3. Even the smallest of businesses needs to let people know how to contact them
   In the good old days – about 5 years ago in Internet terms – people used to use a telephone directory to find businesses (you may remember them).  Now people don’t just use telephone directories they go online (this trend seems set to continue). I’m sure you can work out the rest.
4. Saves money
   I once got a printer very upset (and I mean very to the point of shouting across a crowded room at me) because I happened to suggest that you could save money on printing by having a website. I think we will probably always have printers by the way but I seem to hit a nerve with my printer friend. The truth is that small businesses can save a fortune by putting their catalog online.

Now I know that somewhere there is a small business that doesn’t need a website. They will  have a long line of prospective customers to sign up and a very happy list of satisfied customers who don’t want any contact with them but to be honest I just can’t think of what that business might be – perhaps someone can enlighten me.

The truth is that 99.9% of small businesses need some kind of web site. The truth is also that many small businesses can’t really afford to get one built for them. That is where this site comes in. Over time I will give you all you need to build your own website.