Website design – building blocks

Returning to the topic of website design for a while, I want to pick up where I left off last time.

So far, we have talked about the design considerations for a website, whether to buy or build your site, and the key tools that I used to build my site.

What I’d like to go through now is a grab bag of useful tips to get you started in website coding. Note – even if you have decided to buy a websit template, you might still end up needing to get somewhat comfortable with the terms and languages used in this section. For example, I trialled a smugmug account as part of my early website testing, and to customeise my site I started to play around with CSS (Cascading Style Sheets), so even though I was looking for a simple solution, I still ended up knee deep in code. So on to the bits and bytes:

To create a web site / page, you should get familiar with the following concepts:

• HTML Pages have a header, a body and a footer
• HTML pages have a hearchy of headers from H1 to H6
• HTML pages can have Paragraphs
• HTML pages can have a bacground, which can be an image or a colour
• You can set up Tables in a HTML page, which is a useful way to structure your page layout
• The best way to set up the formatting of your website is to use a CSS style sheet to specify formatting that is common across the site, then reference the style sheet in each sheet. That way, if you want to change the font or background colour (for example), then you make one change in the CSS style sheet and it is applied to every page.
• Of course, you will want to have hyperlinks in your web page for the purposes of getting around. There is specific code for these
• Most HTML commands start with brackets like this: <> and end with a close out like this: </> for example a header might start with a <h1> and finish with </h1>
• All the most populate browsers have an option to view the source code for any site that you visit. This is a really useful way to see what code is used by others when you see them doing something that you would like to replicate on your site.
• Most importantly, it is possible to embed flash items etc in your website using html code. It  gets a bit fiddly but can be done!

The best way to get your head aroundall of this is to visit w3schools. I found their method of teaching (especially the ability to trile little pieces of code and see them work live on the screen) very useful, and all the concepts are broken down into discrete little chunks of learning. HTML and CSS are dealt with seperately. I did find their tuition a little thin in soe areas, but I was able to use Google to find more info on pretty much everything I encountered along the way.

This seems a bit thin, but then as I have said, it’s really not that hard as long as you take a “step by Step”, methodical approach to your learning.