CSS stands for Cascading Style Sheets and is the language behind the design of most web pages. In order to achieve a good looking website desifn that is XHTML 1.0 compliant, you should always build your pages using CSS. Its structure is similar to that of both PHP and Javascript, meaning that if you already develop using either of these languages then you should find CSS realtively easy to learn. If you are new to the concept of coding, then you will need to start by learning the basic structure of CSS.

The Basic Structure

CSS elements are normally contained within a code structure which normally takes this form: ‘[element type]#/.[element name] { style properties }’. The element type is the type of element which you want to style, such as a div; the element name is the actual name which you want to give the element, such as ‘bob’. An element which is an id can only be used once within a web page, and in the CSS code is defined by using ‘#’ before the element name; elements which are defined as classes can be used multiple times within a web page and is defined by using a ‘.’ before the element name within a CSS document. The actual properties of the element are contained within the ‘{} tags, ‘{’ being the opening tag and ‘}’ being the closing tag.

You can also style elements without using a name. This is useful is you want the same style to be applied to the same element type throughout a web page. To do this you don’t need to use the id or class symbols since no name is being specified; all you need to put before the opening tag is the element type as seen in HTML format, for our example we want the paragraph element to have the same style properties throughout the web page, so we define the style in this way: ‘p { style properties }’ - we used the ‘p’ element since this is the HTML for a paragraph within a web page. Each style property is defined in the following format: ‘property: value;’; as you can see a colon is present after the property name is defined - this is important as browsers are only able to read elements which are set out with the colon; the semi-colon is present to represent the end of the property - without this present at the end of each property, browsers won’t be able to read the rest of your style sheet.

Style Properties

There are many different properties that you can use within a style block to make an element look good; however, the likelihood is that you will never use all of them. The most important properties within a style block are the ‘width’ and ‘height’ properties since they control the size of the element. However, if you only want to style a text element, such as a ’span’ or ‘p’ element then you will not need to use either of these properties since they are only used to control a box object; in your case the most important properties would be the ‘font-family’, ‘font-size’ and ‘color’ elements since they control how the text will appear.

With CSS you can control how far away other objects on the page must keep from a certain object - the property to control this is called the ‘margin’ property; it has four ’sub-properties’ for each different side of an object, these being ‘margin-top’, ‘margin-bottom’, ‘margin-left’ and ‘margin-right’ - these ’sub-properties’ provide margin styling for each separate side of the object and can be defined individually.

One problem which many people face when building websites using CSS is getting their pages centred. Achieving this is quite simple, all you have to do is define the ‘text-align’ element of the body tag within the CSS document as ‘center’, and each element which you want to centre must have their ‘margin-left’ and ‘margin-right’ properties set to ‘auto’.

Other CSS Resources 

The following is a list of resources you may want to visit if you want to extend your knowledge of CSS:

• http://w3schools.com/css/default.asp - W3Schools is the learning medium trusted by most. This site gives you an extended knowledge base of tutorials which should help you learn CSS.
• http://www.devarticles.com/c/a/Web-Style-Sheets/Learn-CSS-part-1/ - This is the first part of a serious of articles discussing CSS.
• http://www.utexas.edu/learn/css/ - This article is perfect for beginners and covers the higher up basics.

Blogs are online journals in which people write about things - whether it be the ramblings of their life or tutorials to help others along. The word ‘blog’ comes from the word ‘weblog’, and has many words which derive from it; these words being: blogger and blogging. The word blogger is the name given to the author of the blog, and blogging the name given to the process of writing to a blog; the world blog can also refer to the process of writing to a blog. Blogs have been becoming more popular over the last 2 years, and as of July 2007 there are around 70 million active blogs on the internet. If you are looking to start your own blog, there is no time better than now to do so.

To start your own blog, there are certain factors which you need to work out before you start anything, there are:

• What you are going to blog about.
• Your intended target audience.
• The name of your blog.
• Whether you are going to use a free or paid blogging service.
• If you are going to pay for a hosting service: what blog software you are going to use.

What You Are Going to Blog About

The most important factor to consider when starting your own blog is what you are going to blog about; this is because the content of the blog will determine how successful it is: if you write about personal stuff then your blog is not going to gain much traffic, as the only visitors will probably only be friends or family; if you write posts which will help others out in any way then they are most likely to recommend your blog to others which means that it will gradually gain traffic.

Identifying Your Intended Target Audience

Once you have worked out what you are going to blog about, you need to work out who is most likely to visit your blog, and why; this is important because when you come to promoting your blog, you want to make sure that you are promoting it to the right group of people. This also plays a huge part in the amount of visitors that you receive; if it’s only family and friends visiting your blog then the amount of traffic that you receieve won’t be a huge amount, however, if people are finding and visiting your blog from web searches then they are most likely to be returning visitors, and will recommend your blog to others.

The Name of Your Blog

You can name your blog anything you want, you can even name it after yourself. However, most blog names are normally linked to the blog’s subject in some way or another. The name of your blog must be simple to say, and easy to remember; simple names are more likely to stick in people’s heads which means that if people can remember the name and address of your blog then they will most likely recommend it to others.

Using a Free or Paid Service

There are many different services which you could use to host your blog. You could use a free service which gives you a sub of their main domain name; the main downside of free blog hosting services is that they normally fill your blog with unwanted adverts. The following is a list of free blog hosting services which you can use to help get you started:

• http://www.blogger.com/ - Blogger is Google’s free blog hosting service. It is one of the most popular in the world. The adverts that they place are rather discrete and blend in with the chosen design. The address given is normally ‘blogname.blogspot.com’.
• http://www.cjb.net/ - CJB.net run a free blog hosting service along with a range of other free services. Adverts placed by them aren’t that discrete and don’t blend in with the blog. The url provided is normally ‘http://blogs.cjb.net/blogname’.
• http://www.wordpress.com/ - Witth Wordpress.com you can create your own instance of the popular open source WordPress blog system, but hosted on their servers. The url provided is normally ‘blogname.wordpress.com’.

If you are not tempted to use a free blog hosting service, then you buy a cheap web hosting package with a web host along with a domain. With paid blog/hosting services you have full control of your blog and don’t have forced advertisements displayed. You can then install one of the following free blog software packages:

• http://www.wordpress.org/ - Wordpress is the world’s most popular open source blog system.
• http://www.b2evolution.net/ - B2Evolution is another piece of popular blog software. It is different from Wordpress in the way that you are able to create multiple blogs within one installation.
• http://www.mephistoblog.com/ - Mephisto is a relatively new piece of open source blog software. It is different from both Wordpress and B2Evo since it was written in the up and coming RoR scripting language.

Websites can be used for many different purposes; you can make a personal website about yourself where you may want to post family photos that you might want to share with friends and family, or you may want to build a business website so that you can sell your products online and promote your business through the means of the internet. Many people would love to be able to create their own website, but don’t necessarily have the knowledge to do so; although there are many web-based products which claim to let you build your own website, they don’t necessarily let you customize your website as much as you want since your are limited to certain templates- because of this you should always learn how to build your own website from scratch with HTML.

Learning Languages

To build the most basic of websites you need to start off by learning HTML and CSS. HTML is the basic language of all web pages - without it you won’t even be able to create one page. CSS stands for ‘Cascading Style Sheets’ and is the language used to style elements on a web page - you need to know this if you want to make your web pages look good. If you want to extend the features of your website to include something dynamic, such as a shopping cart then you will need to learn a server side web language such as PHP or ASP.

There are many resources on the internet that you can use to learn web languages, including:

• http://www.w3schools.com - This site has tutorials for languages which are widely used on the internet. This resource if perfect to get your from being a novice to having intermediate knowledge of web languages.
• http://www.4guysfromrolla.com/ - This site has many different articles, tutorials and code examples which can help you to learn ASP.NET, and its older sister - classic ASP.
• http://uk3.php.net/tut.php - PHP.net - the home website of the PHP scripting language has put together a simple tutorial to help out beginners.

Once you have learnt the basics of HTML and CSS, you are ready to start building your website.

Choosing the Design Software

When building a website you need to design what piece of software you will be using to do it. When choosing web design software, there are several variables that you should always take into consideration, these are: cost of the software, the complexity of the software and whether you are going to build using your own code or by using a WYSIWYG (what you see is what you get) editor. Website design software can range from nothing to around £500; if you are going to be building your site using your own code then you have no need for a WYSIWYG editor meaning that all you need is a text application, such as Microsoft Notepad or jEdit - a piece of software specifically built for this kind of scenario. If you are after a piece of software which you would like to do all the coding for you and that lets you see the final outcome without having to do anything complicated then you want a piece of software which is known as a ‘WYSIWYG’ editor; these pieces of software generally cost, and examples include NetObject’s Fusion and Adobe’s Dreamweaver. WYSIWYG editors are generally more complicated to use than normal text editors since they have more built in features to help someone along with the building of their site. Listed below are some of the most commonly used website design programs:

• http://www.microsoft.com/express/vwd/Default.aspx - Microsoft Visual Web Developer Express Edition is a free piece of Microsoft software created to encourage more developers and designers alike to take up ASP.NET coding. It can be used as both a WYSIWYG editor and a plain text editor, and has many features built in.
• http://msdn2.microsoft.com/en-gb/vstudio/default.aspx - Microsoft Visual Studio is VWD’s bigger brother and it’s costs vary since there are various different editions of it.
• http://www.jedit.net/ - jEdit is a free plain text editor that was created specifically for web designers. You can use it to script in any language, but it doesn’t come with a WYSIWYG editor.
• http://www.adobe.com/products/dreamweaver/ - Adobe Dreamweaver (formally Macromedia Dreamweaver) is probably the best known piece of website design software throughout the world. It comes with both a code editor and a WYSIWYG editor, but is quite costly priced at $399 (approximately £199).

Getting Your Website onto the Internet

Getting your website onto the internet doesn’t have to be the complicated process that many make it out to be. All you need to do is purchase a domain and website hosting and you are all set to go. A domain is the address which you type in to go to a website - the cost of these is relatively low as you can pick a domain up for about £5/year these days; web hosting as well is relatively cheap as in most cases you pick a package up for £22.99/year. After you have purchased both of these you should be given access to an online system known as a ‘control panel’ where you can control all aspects of your website and its hosting.

To upload your website to your web space all you need to do is establish an FTP connection with the FTP server for your site (normally ftp://ftp.yourdomain.com). You will be asked to login with your FTP account - these can normally be created through your control panel. Once a connection has been established you have to copy your website files into the root of your website, this is a folder normally named ‘public_html’ under Linux hosting or ‘httpdocs’ if you are on Windows hosting.

Once the files have been copied, all you need to do is open a fresh browser window, type your domain into the address bar and your website should appear as if by magic!

Promoting Your Website

You’ve got your website completed and on the web now. The next thing to do is to get your website promoted so that you can start receiving visitors. You can submit your website online directories under a category that fits your website and sign up to online advertising services so that your website will be advertised on other websites; you should also make sure that your website is listed in the results of popular search engines such as MSN, Google, and Yahoo - this will ensure that your website receives visitors. You should find the links below helpful when promoting your website:

• http://www.google.com/adwords/ - Google AdWords is Google’s advertiser network which is known as a PPC (pay per click) program where you can create your own adverts for your website which will be then shown on the websites of Google publisher’s.
• http://www.url-free.net/ - This is a prime example of a website directory where you can submit your website to a certain category where it can then be found by others who are browsing the category.

Javascript is a client-side scripting language which can be used to manipulate client’s browsers as well as to fetch information on a client’s machine. However, Javascript has only been used in it’s intended way recently, this is because since it’s launch back in the ’90s it has been used by spammers, hackers and virus makers to compromise client machines. The most common use of Javascript at this moment in time is for popup adverts - something which more browsers are beginning to put blocks on.

The most up to date use of Javascript has been in the creating of AJAX. AJAX is a mixture of other languages as well as Javascript which allows data to be posted back to a server without the need for pages to be reloaded. To learn more about AJAX, click here.
However good Javascript may seem to be, it has its limitations, the main one being that older browsers don’t support it.

Creating Your First Javascript

Javascript functions are located within the ‘function()’ tag. These functions can be delcared in two ways: by creating a function with its own names and variables that can be called again at any time within a script, this would be delcared in the following format: ‘function function_name(var1, var2, var3)’; functions can also be called directly which means that they can’t be used again within a script unless the code is copied since the function isn’t assigned a name, a function of this type would be declared in the following format: ‘var variable = function()’.

Any code for a function, or any part of the scipt is located within the opening and closing tags, for javascript these being ‘{’ as the opening tag and ‘}’ as the closing tag.

Variables for a function are located in the brackets after a function name - these variables are set directly each time the function is called, and can be different each time. Variables can also be set directly within a function, but these variables can’t be different each time; these variables are set using the ‘var’ tag.

Basic Page and Browser Manipulation

The main use of javascript is to manipulate client machines and web browsers - it can also be used to manipulate web pages. Browsers can be manipulated in ways that include resizing browser windows, opening new windows with custom settings as well as creating transition effects inbetween web pages.

Opening new windows with javascript is simple as there is the built in ‘window.open’ function; the variables of this function take the following form: ‘window.open(url, windowname[, variables]). Javascript can also be used to close windows by using the ‘window.close’; to use this function you can either close another window, or you can close the window which currently open. To close another window you will need to use the function in this format: ‘windowname.close();’, to close the window which is currently open you need to the function in this format: ’self.close();’.

Page transitions can be achieved with the use of special meta-tags within the ‘head’ section of a page. However, page transitions only work with Internet Explorer. To use page transitions youn will need to add a meta-tag named ‘Page-Enter’ if you want to use effects when someone enters the page, and a tag named ‘Page-Exit’ if you want effects to be used when someone leaves a page. The ‘Content’ part of the meta-tags needs to contain the information that will trigger the effects; to trigger them they will need to be wrapped in the ‘RevealTrans’ tag in the following format: ‘RevealTrans (Duration=Duration, Transition=TransitionNumber)’. The duration can be set in the tag, as well as the transition used; the transitions don’t go by name but by number; click here for a list of transitions and the numbers related to them.

Javascript can also be used to change a browser’s location. To do this the following code must be placed within a function which must be called within the ‘onLoad’ tag of the body tag of a web page: ‘window.location.href = ‘location’;’.

A stands for Achronymous Javascript and XML; it is the latest technology which is taking the Web 2.0 world by storm. AJAX can’t really be considered a new technology as it utilizes existing technologies - those being Javascript and XML. The main use of AJAX is ton query a database or to submit a form without the need to do a postback or to reload the page concerned. Although AJAX may seem to be just a thing to use if you want to make sure site all cool and fancy, it has advantages for developers as well; by using less postbacks within a website, less bandwidth is used which keeps costs down for the developer.

Creating Your First AJAX Page

To begin with, your ‘front-end’ page can be in any scripting language - it can even be just a basic HTML file. However, your ‘back-end’ page needs to be written in a dynamic scripting language which is able to query a database, accept querystring data - basically anything which requires access to a server or needs to fetch client-side data; examples of these kind of languages include PHP and ASP. If you are new to the concept of server side scripting then I recommend that you start at somewhere like http://www.w3schools.com/ where you will be able to pick up the basics of several server-side scripting languages.

You will need a Javascript written which is able to create XML objects within a browser and must be then able to post information back to your ‘back-end’ page. For this article I have created a Javascript which the rest of the article will be based on; click here to download it.

The Javascript Function

The main AJAX script itself is made up of 2 different functions: fetchData() and filterData(). The hard work is done by the fetchData() function becuase as you can see the XMLHttpRequests are created within the function - also the code used to send the data is located within this function - this code being located within the ‘if (dataToSend)’ segment of the function.

The fetchData() function is made up of three variables which must be defined: url, dataToSend and objectID; the url variable is the path to your ‘back-end’ page where all the hard work is done, the ‘dataToSend’ variable is the data that you want to be sent to the ‘back-end’ page - this will be sent over a query string, and the objectID is the div or table cell on the ‘front-end’ page which you want to be filled with the data/response from the back-end page.

The Back-End Page

For an AJAX post back to work, you need to create a ‘back-end’ page in a dynamic scripting language. This page can be created in any dynamicscripting language as long as it supports fetching data from querystrings. Any data posted back to the page will be located within the ’sendData’ query string element.

The Front-End Page

To initiate an AJAX post back, you need to create a basic link element, but the hyperlink reference needs to be in the following form: ‘javascript: fetchData(url, dataToSend, objectID)’. The variables of the function are described within the ‘Javascript Function’ paragraph above here. If you create a normal link with the hyperlink reference taking the form of the example given then you should have a working AJAX post-back link.
Customizing the Fetch Response

You may want to customize the response received whilse the data is being fetched. The code which determines the response is located within the filterData() function. The response received could be replaced with something like ‘Loading…’ or similar - the text or image displayed is completely up to you.

The lines which determine the responses are located within the segments of the script which determine the status code received (pageRequest.readyState == 0,1,2,3,4 - the numbers go up in stages). Each of those segments contain the line ‘objectID.innerHTML’; this shows that the response changes the HTML within the desired object, meaning that you have the freedom to change the response as much as you would like.

RSS feeds are xml files updated on a regular basis which people subscribe to within RSS readers. The information carried on them is normally up to date and they are normally found on news sites and blogs, basically sites which are updated regularly and which people might like to be up to date with. In this article I will go through creating an RSS feed; they can be created in two forms: dynamic - this is where dynamic server side pages are created to query databases to display the new information automatically and require no manual intervention for the data to be displayed; manual - this is where a basic xml file is created and which has to be updated manually.

The Basic RSS Format

RSS feeds are made up of several different elements and tags which create the final document. The following is an example of an RSS feed:

As you can see the XML version used is the first thing to be declared within the document, the second being the beginning of the RSS tag which means the beginning of the feed; including both of these within your feed is important since a browser will use these to work out that it is an XML file which contains an RSS feed. Click here for an example of an RSS 2.0 feed.
The feed itself is contained within a ‘channel’ tag - some browsers output RSS feeds into a styled, readable format and this tag is important to ensure that browsers which have this capability are able to render your feed in this way. The first few lines within this tag describe your feed and contain information such as the title of the feed, a description of it, the language in which it is written as well as the last time it was updated.

After that the different items of the feed are shown - these are displayed within ‘item’ tags and there is no limit on the amount of these which you can have in one feed. The basics needed to structure an ‘item’ tag are the ‘title’ and ‘description’ tags which ensure that the item is outputted into a readable format.

Dynamic RSS Feeds

Feeds of this type require a server side page such as a PHP or ASP page be created to query a database so that the up to date information be displayed. This process requires no manual intervention and is completely automatic. To begin with you need to make sure that your page is outputted to the browser as an XML document, to do this you will need to add a header response line to the top of your page, and make sure that it outputs the page in the ‘text/xml’ format. The rest of the feed is outputted like the example above, except
Manual RSS Feeds

These feeds are ‘.xml’ files which are updated manually and always take the form of the feed displayed within the first section of this article. You should only opt for this type of feed if you aren’t going to update often as updating it can be a timely procedure.