DIY Building advice self build construction garden design gardening garden buildings home tips

Type search for do it yourself home improvement
construction, buildings,
DIY, gardens, home tips >

Custom Search

BUILDING WEBSITES - BEGINNERS' GUIDE

This page came about because someone asked me if this website was about building websites.

This might seem a bit off topic, but the Editor of this site worked in computing and the web for many years, and used to teach web techniques as well as computer graphics at University level (as well as running commercial training) before getting involved in building green eco houses.

See also Laptops, tablets, netbooks, ereaders for trade, business and work >

GETTING STARTED

I will do a quick run through of what you need as a beginner to get started making websites. I will look at doing web sites from scratch - which is mostly how this Building DIY site is made - hand coded! (Incidentally, a website is the same as a web site.)

WEBSITE FIRST PRINCIPLES

What is it for?

A social media web 2 site such as a blog, Youtube, Facebook or MySpace presence might be better and is far easier to run. This series is about building your own website from scratch.

Who is it for?

Is anyone really interested in your new website or is it a vanity project? Perhaps you need it for your portfolio. Again, many easy to use off-the-shelf systems can make websites. Joomla is a good one.

Have you thought about the structure?

This is not the same as the navigation. It is to do with content. Here we approach Information Architecture, which we will cover later on.

Can anyone use it?

Usability is essential so keep it simple. Do not make a big splash page (these were popular a while ago and still exist).

Do you have the time to work on it?

It won't update itself (unless you use RSS but that is a bit pointless). If no time, use a blog or social media web 2 site.

Wordpress theme template

Above: Wordpress theme - a template which needs no HTML skills to use

Design and brand

Can you do design or do you need to get a designer to do it? This is one area it is better to use a professional or skilled person. Some web creation systems like Joomla or blogs come with templates but we are talking about doing it yourself.

Content

Where are all the text and images to come from? Or video, audio, etc? If it is for a company you might be better off paying a copywriter if your prose sucks. And so on for other skills like photography. They will know what to put in and leave out as well.

WHAT YOU NEED TO BUILD A WEB SITE

Web HTML editor in use

Above: Web HTML editor in use

For proper web development you will need some decent software, but simple stuff really, everything is free as open source, or just freeware or cheap shareware. I use this lot:

There are also some content management systems (CMS) running on this Building DIY site, namely:

These are great, easy to use, and free, except you can pay for removal of logos, extra support, etc.

Other things people might tell you to use but don't - like Flash which I do know and have used. But is is pretty horrible from a usability aspect, doesn't run on an iPhone, and has a steep learning curve. But it has strong support from advertisers...

For image slideshows etc use Javascript - a low impact coding system that does tricks on your web pages. Javascript is easy to use, can be hacked about by a beginner, is lightweight (fast load) and has been around for ages. It is also a good way into proper programming, should you fancy that.

WEBSITE COMPONENTS

HTML

This is the markup language used in web pages - not a programming language. Easy at the start can get a bit involved.

HTML controls everything on the web so this is where you start.

It is best to get stuck into this if you want to run a site as will need to know some basic stuff whatever level you are at.

Even if you employ a web company or web freelancers to do the work, you still need to know something about how it all works. Unless you want to remain ignorant of course! Not everyone has the patience and geekiness required.

CSS

Cascading Style Sheets - this is a text and page layout formatting system that is kept away from the file that holds the basic page info like type of page, and the content, and image links, etc.

CSS can be a right pain as the commands 'cascade' through levels of abstraction, meaning a simple text effect might be set in any of several different places in any of several files, or even in the page itself.

CSS was invented to separate content from display (and rid the world of tables for layout) and it is a great system but not easy to read and understand.

Best to do some simple examples of CSS starting with some basic paragraph tags, to get the hang of it. Looking at a mature CSS file will make your head explode.

FLASH

'Flash is Evil' is a common refrain. But it is useful for glorified Powerpoint presentations. Flash is beloved by architects, estate agents, designers and advertisers. How many of those Flash image slideshows are there on the web?

Flash can also be used for games and fun interfaces (ie where you can't find your way around) and is almost a parallel universe for designery geeks. Incidentally I did a project in my computing Masters degree in Flash (I wrote a Zoomable User Interface ZUI) and so I have used it properly, so it has its place.

Steve Jobs hates Flash as it is proprietary, which is ironic considering Apple's use of digital rights management DRM and policy off suing everyone in sight.

Because Flash is not allowed on the ipad, its use on websites is declining. Big sites will now use HTML5 or other open sopurce technology.

JAVASCRIPT

Lightweight programming language for web pages. Quite advanced so start by hacking things around.

JAVA

Difficult (for a beginner) C like programming language invented by Sun. Is everywhere, some things on web pages (you see the Java logo appear when loading) and also your mobile phone.

IMAGES

Web formats are JPG or JPEG, GIF or PNG.

FTP

File transfer protocol.

To move pages images etc from your computer onto the server than is hosting your web site.

You must get the hang of the server locations, or you will be forever making errors.

The worst thing about the web page making programs (the ones where you use DTP like layouts) is that they have an 'easy upload' feature which does FTP but you don't get to control it - which means chaos can ensue very easily as they don't work reliably.

CONCLUSION

This is just a scope for what will come - all these sections will be expanded in the next few weeks. I will use examples from this huge website and others I have run or programmed.

See also Laptops, tablets, netbooks, ereaders for trade, business and work >

See Web standards at W3C >