The vast majority of websites built for clients these days are made using a Content Management System that enables the client to edit and update their website without knowledge of any computer programming languages. However there are some tasks that are difficult to automate and at the same time allow a client to have complete control over without editing a little bit of code. Often this will be as simple as copying and pasting code to replicate an element so while you won’t need to be able to write the code yourself, it is useful to understand how it works.

HTML – HyperText MarkUp Language

HTML is not an actual programming language in the sense that we can’t use it to respond to events, manage variables or process data. It is simply a method of adding structural meaning to a block of text. We use ‘tags’ to mark elements such as headings and paragraphs in a given block of text. If we look at block of HTML below we can see the tags in blue. <h1> is a heading, <p> is a paragraph, <ul> is an unordered list, and <li> is a list item. We can also see the elements have an opening and closing tag which demarks where the element starts and ends. This is obvious with the heading and paragraph but if we look at the list we can see that the <li> tags are opened and closed within the <ul> tags. This is known as ‘nesting’ elements, and doing this we know that the <li>s are ‘children’ of the <ul> meaning they belong to the same list.

Without any CSS added the code above would display in a browser as follows:

CSS – Cascading Style Sheets

CSS is the code we use to tell a browser how particular elements should look. In the old days we used to add style such as colour or font-type into the HTML itself which ended up making the HTML bloated and hard to read. These days we keep HTML and CSS separate by naming the elements in our HTML and then adding css ‘rules’ to those elements. We can look at the same example from above but this time we have added naming attributes to our elements. The heading has an ID of ‘heading1′. There can only be one element with a given ID but sometimes we want to add the same styles to different elements and in this case we can add a class. Note that the paragraph and the list have a class of ‘red’.

If we were to display this code in the browser at present it would display exactly as it does above because we have not yet added any CSS to the IDs and Classes. Let’s do that now.

IDs are represented with a ‘#’ (in blue) and classes are represented with a ‘. ‘(in red). Note ‘px’ stands for pixels and this is one way of specifying sizes with CSS. So let’s see how this looks in a browser:

See how the Heading is smaller than the Paragraph, this is counter-intuitive but it displays how we can use CSS to control how elements are displayed. We can also see how the class ‘red’ has effected both the paragraph and the list even though we only specified it once in the css.

Dynamic HTML

Let’s introduce some Javascript to the mix and see how we can make our elements interactive. First we’ll make a box:

A <div> in HTML is usually used as a container to hold other elements but here it is empty and we are using css to make it look like a blue square that is 25 pixels wide and 25 pixels high.

Now lets add some Javascript. The Javascript we are using is actually linked to Javascript library called jQuery which is basically a set of pre-coded functions we can access using simplified Javascript code. What we want to do is make this box grow when it is clicked. The actual Javascript that will do this is quite complex but jQuery makes it really easy for us:

Now this looks a bit confusing but basically what it says in plain English is “when the document is ready (i.e. the page has finished loading), find the HTML element with an ID of ‘box’, and when a user clicks on this box, make the width of the box grow to 660 pixels’. Easy ha?! Let’s try it:

What other languages are there?

You may have heard of a host of other programming languages that are used to make websites: PHP, ASP, ColdFusion, Ruby, Python the list is long. While HTML, CSS and Javascript control how a website looks in the browser, these other languages control all the work that goes on behind the scenes, such as interacting with a database, managing data, sending emails, generating images to name just a few of the most common tasks. Each of these languages has it’s different strengths and peculiarities but ultimately they have a similar purpose when used for building websites.

Liked this Post? Share it with your friends!

Or read some more from the Client Information Series!

• Writing effective content for your site.
• The importance of relational tree diagrams in planning your website
• What is a content management system or CMS?
• Designing for different screen resolutions
• All about browsers (and why we hate Internet Explorer)
• What is Search Engine Optimisation or SEO and why is it important?
• An introduction to HTML and CSS snd other coding languages.
• How to take a screen capture.