You can think of each page element (an image or text, for example) as being surrounded by a box.

For example, the following code will place a black solid border with a weight of 1 pixel around  images.

img {

border: #000 solid 1px;

}

You can think of this as the box.

What if you want to put some space between the image and the inside edge of the border? No problem — just add some padding.

img {

border: #000 solid 1px;
padding: 3px;

}

By setting the padding, you add space inside of the box.

If you wish to place some distance between an image and other page elements — (such as text, for example) — you can do so simply by adding a margin. The box model specifies that creating margins creates space on the outside of the border. The addition of a margin in the following code sample, for example, will add a border to the outside of the box.

img {

border: #000 solid 1px;
padding: 3px;
margin: 5px;

}

The following diagram gives an indication of the results of this code:

CSS box model

The above example uses an image with a border to illustrate the point. However, the box model applies to text and other page elements as well — whether you have a border or not. For example, it applies to headings (eg <h1>) and paragraphs (eg <p>)

To find out more about the CSS box model, visit these links:
Red Melon, ‘Interactive CSS Box Model Demo’, http://redmelon.net/tstme/box_model/

HicksDesign, ‘The 3D CSS Box Model’, http://www.hicksdesign.co.uk/boxmodel/

This is fine as far as it goes, but you may want to customise the color of your links.

To do so, you need to use the :link pseudo class

Links have different states depending on how the user is interacting with them. For example, they can be active, visited, not visited (ie not clicked on) or the user’s mouse can be hovering over a link, without clicking on it. Accordingly, you can set styles to define how links should be styled depending on what the user is doing.

There are  four different states: link, visited, hover, and active.

To define a link, you simply write a:link followed by the style information that you wish to apply enclosed by curly braces.

For example, to change the color of the link and remove the underline, you would write a:link {color:red; text-deocration:none;}

Alternatively, to change the background colour when a user hovers their mouse over the link, you would write a:hover {background-color:gray; }

To ensure that your links are  styled in a consistent manner, it’s always a good idea to create style information for each of the four states that a link can be in — BUT, beware. To have the style information take effect, you need to define your styles in a particular order.

The correct order is 1. link, 2. visited, 3. hover, and 4. active.

As the W3Schools guide explains:

‘Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!

Note: a:active MUST come after a:hover in the CSS definition in order
to be effective!’

See: W3Schools, ‘CSS :link pseudo-class‘ http://www.w3schools.com/Css/pr_pseudo_link.asp

For example, the following styles will alter the appearance of the link depending on whether the link is unvisited, visited or if the user is hovering their mouse over it.

a:link {color: white, background-color:blue; text-decoration:none;}

a:visited {color: gray, background-color:blue; text-decoration:none;}

a:hover {color: red, background-color:gray; text-decoration:none;}

a:active {color: white, background-color:blue; text-decoration:none;}

One final note: you can also use all the normal styling information for links, such as the font-family, font-size and other CSS properties. Your imagination (and the considerable limits imposed by the user’s computer…) is the ‘only’ limit on what you can do with links.

In fact, nothing could be easier.

Before showing you how to do this, however, you may want to consider whether you want to force the users’ browser to open when they click a link. Some websites do it because they don’t want to lose traffic to other sites. By opening a link in a new browser window, they keep visitors on their own site.

However, some web usability and access experts, regard forcing a link to open in a new browser window is considered a no-no. One reason is that it simply annoys visitors. They know where they want to go and they don’t some web designer trying to keep them on their site by opening new browser windows. Usability expert Jakob Nielsen likens the practice ‘to a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer’s carpet.’

Nielsen goes on to explain: ‘Don’t pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management). If I want a new window, I will open it myself!’ (See: Jakob Nielsen, ‘The Top Ten Web Design Mistakes of 1999′, useit.com, 30 May, 1999,
http://www.useit.com/alertbox/990530.html)

Further, inexperienced web users might find this confusing and simply abandon your site.

Finally, the new browser window breaks sequence of the ‘back’ button. Since the user’s browser opens a new session, there is nothing to go back to. This makes re-tracing your steps more difficult, since users must return to the original browser window to re-trace their steps. For more reasons on why not to do this, see: Neil Turner, ‘Beware of Opening Links in a New Window’, Sitepoint, 30 December, 2004
http://www.sitepoint.com/article/beware-opening-links-new-window/)

If you’ve read the warnings, but are determined to add this to your links, you simply set a target for your link, by adding “target= _blank” after the filename or URL you wish to link to.

The following code illustrates this:

<a href=”http://www.upstart.net.au” target=”_blank”>upstart: the magazine for emerging journalists</a>

This line of code displays “upstart: the magazine for emerging journalists” as a link and opens it in a new browser window.

And here’s a working version of the code:

upstart: the magazine for emerging journalists

What’s a Widget? It’s a way easily adding customised functionality to your blog.

To create an RSS feed, click Appearance in the left-hand menu of the Dashboard to expand you options. Then click on Widgets.

You will be taken to another screen. Click on the RSS widget and, holding your mouse button down, drag it over to the sidebar at the right of the screen. Click the arrow in the top right-hand corner of the RSS widget to expand it. First enters the RSS feed or URL.

With a WordPress.com blog, this will usually take the following form: http://nameofblog.wordpress.com/feed/ For example, the RSS feed for this blog is http://onlineproductionworkshop.wordpress.com/feed/

Then give the feed a title such as ‘Subscribe’ or ‘RSS’.

You can also check the boxes to display content, author and date.

See this video from WordPress.tv for more:

Basic CSS syntax

CSS syntax has three parts: a selector, a property and a value. The property and the value are separated by a colon and enclosed within curly braces:

selector {property:value}

For example, if you wanted to set the paragraph font to Arial, you would write:

p {font-family: Arial}

In this example, the ‘p’ tag is the selector, ‘font-family’ is the property (since font-family is a property of the p tag) and ‘Arial’ is the value that you are assigning to the paragraph tag.

If you wanted to set more properties and values for the paragraph tag you can simply put a semi-colon after the value. For example, the CSS rule

p {font-family:aria; color:red}

would style the all paragraph text as Arial and red.

Reference: ‘CSS Syntax’, W3Schools, 2009, http://www.w3schools.com/Css/css_syntax.asp

Using CSS

There are a number of ways to use CSS in your document.

You can apply it a single line (called inline styles)

You can apply it to a single page (by defining styles at the top of your web page between the <head> </head> tags)

or

You can apply it an entire site (in which case, you create a separate file — with .css as the extension rather than .html — and link

Applying styles to a single line

If you only intend to use the style on a single line of text or a paragraph on one or two pages on your site, then an inline style might be the best option.

As the name suggests, inline styles are defined in the same line where they are applied. You can define the style by placing the styling information within the opening HTML tag. For example:

<p style=”font-family:Arial, Helevetica, Verdana, san-serif; font-size:20px; color:red;>This is the text that is to be displayed</p>

produces this:

This is the text that is to be displayed

In other words, the style information sets the font to Arial, the font size to 20 pixels and the color to red.

Creating styles for a single page

If you want your styles to used across more than one or two lines, then it might make more sense to define your styles in at the top of your page. They will then be available for any elements on the page. Usually, styles are defined between the <head> tags of your page like this:

<head>

<title>The title of your site goes here</title>

<style type=”css/text”>

p {

font-family: Arial, Helvetica, Verdana, san-serif;

font-size:20px;

color:red;

}

</style>

</head>

produces the same effect as the text above (ie: uses Arial, 20 pixels and red) except that it will be applied to all instances of the <p> tag on the page in which it appears. As such, it is infinitely more efficient than adding styles one line at a time as in the case of inline styles.

Applying CSS to an entire site

Applying styles to a page saves time, but what about if your site has 100 or even thousands of pages? You could cut and paste the style into the head section of each page, but that would be pretty times consuming and boring. What if there was a better way to style pages on a web site, so that all of your styles were carried throughout your website?

There is a way to do this. You do it be using an external style sheet. With an external stylesheet you create a separate file which contains all your style information. You then link each HTML document to this external file. When the HTML page loads, it pulls in the styling information from this file and applies the styles accordingly.

In this sense, the style information in the document ‘cascades’ across each page that links to it — hence the name cascading style sheets.  In practice, this means that you can control the appearance of paragraphs, headings, blockquotes, links and any number of page elements from a single document, rather than opening each page and editing it individually.

To create an external stylesheet, create a new folder in your root directory called ‘stylesheets’ (or something similar, so long as it is logical).

Open TextEdit or Notepad (or another text editor), and create a new document. Save this document into the folder you just created with the name ‘stylesheet.css’ or ‘styles.css’. The filename can be anything, so long as it is clear what the files is. Note that the file must have .css as its file extension.

When you’ve done that, you’re ready define some styles. Simply pick the tag you wish to style and then place the style information between curly braces. The following is an example.

Setting external styles in TextEdit

NB: White space is not a problem with CSS, so long as the properties and their values are enclosed by curly braces and separated with a semi-colon.  For example p {color:red;text-align:left;font-size:12pt} is the same as this:

p {
color:red;
text-align:left;
font-size:12pt

}

Both are valid, although — in my opinion —  the second one is easier to read and edit.

When you have set up your styles, you will need to attach the stylesheet to your HTML documents. You do this by insert a link to the stylesheet in your HTML file. Usually this is placed within the <head> section.

You create the link by writing:

<link rel=”stylesheet” href=”stylesheets/styles.css” type=”text/css” />

In this line of code, the actual link to the stylesheet is  href=”stylesheets/styles.css” This essentially tells the browser ‘look for a folder called stylesheets in the root folder and, within that folder, find a file called styles.css’. If you called your folder something else, like ‘styles’ and your stylesheet something else, like ‘stylesheet.css’, then the relevant code would be href=”styles/stylesheet.css”

You can link as many HTML files to your stylesheet as you wish and every style that is defined in the stylesheet will then be available to that page. There are many advantages to using external stylesheets including ensuring a consistent and uniform look and feel across your site.  If you want your level 1 headings <h1> to be Arial, you can set it once and apply it to as many HTML documents as you wish.

External stylesheets also make the process of maintaining websites far more efficient. If you have hundreds or thousands of pages on a site and you want to change the paragraph <p> style from Arial to Georgia, to take one example, you can do so by editing a single document rather than opening each individual HTML file and re-styling it. Each change you make will cascade throughout your site.

Want to know more?

This post has only touched on CSS. To find out more about the wonderful world of stylesheets, use these resources:

CSS tutorial http://www.w3schools.com/css/

CSS Zen garden (one site, infinite possibilities through the clever use of CSS): http://www.csszengarden.com/

What would the internet be without links? Pretty boring. Links are what make the internet the net or the web. Without them, the internet wouldn’t be the internet.

Creating links is pretty easy to do. The basic syntax for a link is <a href=”filename.html”>Display text</a>

Let’s break this down.

The first part of the link <a href= opens the ‘a’ tag and creates a reference to a hyptertext file.

Then comes the file name in the quote marks “filename.html”. For the link to work, you need to know that a) it exists and b) where it lives. In this example, we’re assuming that the file we wish to link to is in the same folder as the file we’re linking from. (We’ll look at how to link to a file in another folder in a moment.)

Then we need to close the opening tag with an angled bracket >

So far, nothing we’ve written in our code will display on the screen. In other words, our user doesn’t know that there is a link there. To remedy this, we need to put some text that will display on the screen. In this case, the user will see the words ‘Display text‘.

Assuming that we are using the browser’s default settings for displaying links, this will most likely render in the browser as blue, underlined text ie. Display text

Finally, we need to close our ‘a’ tag to tell the browser where the link should end. Do this by adding </a> Anything between the ‘a’ tags will be a link.

Linking to a file in a subfolder

What if we want to link to a file in a subfolder? No problem, you just need to alter the path to the folder.

For example, say you have a subfolder called ‘archive’ with a whole bunch of subfolders in it, located in your main site. Suppose, further, you have a subfolder located in your archive folder called ‘news’ which holds all the news items on your site.

Your folder structure would look something like this:

In this example, the path to the news-index page would be archive/news/news-index.html

To link to news-index.html, you need to put the full path in your href tag. In other words, your link would look like this: <a href=“archive/news/news-index.html”>News archive</a>

In this example, the words ‘News archive’ would appear on the page and the filepath is: archive/news/news-index.html

Creating external links

An external link is a link to a page that is external to your website. For example, you may wish to include a page on your website with all your favourite websites.

This is easily done by simply changing the address between the double quotation marks. For example <a href=”http://www.theage.com.au”>The Age</a> displays the words ‘The Age’ and links to The Age’s homepage.

Similarly, <a href=”http://www.crikey.com.au”>Crikey</a> displays the word ‘Crikey’ on the screen and links to Crikey.

You don’t have to link to a page, either. You can link to anything that’s on the web: movie files (eg mp4), image files (gif, jpeg, png), audio files (eg mp3), Word files (.doc or .docx) Excel spreadsheets (.xls or .xlsx) PDFs (.pdf) etc etc .

For example, <a href=”http://www.latrobe.edu.au/media/images/staff/scanlon.jpg”>Christopher Scanlon</a> displays the text ‘Christopher Scanlon’ to the user and links to my staff image on the La Trobe University server.

Similarly,  <a href=”http://www.latrobe.edu.au/journalism/opw/cv-template.doc”>CV template</a> displays the words ‘CV template’ in the browser window and links to a MS Word file in the Online Production Workshop folder on the La Trobe server.

How can I use an image as a link?

You may have noticed that on many websites you can position your mouse over an image and click it link a text link. It’s easy to do. You just have to replace the text between the opening and closing tag with the image tag and the path to the relevant image file.

For example, if my image file is located at <img src=”assets/scanlon.jpg”> I can make this an image by simply enclosing this line of code with ‘a’ tags like this:

<a href=”http://www.latrobe.edu.au/media/staffdir/scanlon.html”> <img src=”assets/scanlon.jpg”> </a>

NB: the opening and closing ‘a’ tags are in red and the code that loads the image is in green.

In this example, a jpeg image file called ‘scanlon,jpg’ located in the assets folder would be displayed in the user’s browser. When the user clicked the image, it would take them to my staff page on the La Trobe University server: http://www.latrobe.edu.au/media/staffdir/scanlon.html

Here’s a bit of a step-by-step refresher.

Step 1 — Open TextEdit (or Notepad, if you’re working on a PC)
First, make sure that TextEdit is configured for user-friendly HTML development. Not sure if it is? If not, read this.

Step 2 — Save the file as an HTML file
If it’s your home page, call it ‘index.html’ or ‘home.html’.

Step 3 — Add the opening and closing HTML tags ie and <html> and </html>

Opening and closing HTML tags

The html tags tell the browser where the HTML file begins and ends.

Step 4 —  Add some header tags <head> </head> and title tags <title> </title>.

Anything between the title tags will appear at the top of the browser. In this case, the words ‘Online Production Workshop’ will appear at the top of the browser window.

Head and title tags

What the title looks like in the browser

Step 5 — Add a body tag

Add an opening <body> and closing </body> body tag. Anything between the body tags will appear in the browser window.

Add opening and closing body tags

Step 6 —  Add some content

You are now ready to add some content. Using heading tags from levels 1 through to 6 — <h1> </h1>, <h2> </h2>, <h3> </h3> … <h6> </h6> — to add headings.

Use opening and closing paragraph tags <p> </p> to define the beginning and end of paragraphs.

Examples of heading one and two tags and the paragraph tags

... and what it looks like in the browser

Step 7 — Insert and image

Use the image tag <img> to insert an image. You will need to specify the path of the source of the image file. In this case, the filename of the image is avatar.jpg and it is located in the assets folder.

As such, you add <img src=”assets/avatar.jpg”> The image will be insert after the second heading and before the paragraph.

NB: you do not need a closing tag.

Add an image using the image tag

The image now appears in the browser, after the second heading and before the paragraph

Step 8 — Finally, add some opening <div> and closing </div> div tags

The to divide the page into logical ‘chunks’ that will be helpful when we come to style the page.

The div tags have been added with ID's 'header' and 'content'

You will not be able to see the div tag in the browser, but they will come in handy when we begin Cascading Stylesheets (CSS). We can target specific parts of the page and style them as we wish.

Note, however, that not all themes support the use of customised headers. Note also that your custom header image must be the same size as the one you wish to replace.

I thought he’d say something sexy like web video, podcasting or Adobe Flash. Instead, he replied ‘file management’. He went on to tell me that too many of their new employees have no idea about file management or its importance to an online news operation.

It surprised me at the time, but it shouldn’t have. File management, while being an important part of online production, is often overlooked because, well, it’s dull. In terms of fun things to do on the web, file management just doesn’t rate.

But, if you’ve ever built or inherited a web site with no — or little — attempt to manage the files in a consistent and logical way, you’ll know that it’s a nightmare.

What is file management? It can be complex, but here are five tips to help you better manage your files.

1. Create a root folder
The root folder (stop sniggering) is where all the files related to your website are stored. This includes all your HTML files, your stylesheets, your images and other media assets (such as videos, audio files and so on). If you had Javascript on your site, all your Javascripts would also be contained here.

2. Create sub-folders and a logical file structure within your root folder
Your website should contain some sub-folders. Some good candidates for sub-folders are an ‘assets’ folder and a ‘stylesheets’ folder.

Your ‘assets’ folder will contain all your media asset (images, video, audio etc) and your ‘stylesheets’ folder will, as the name suggests, contain your external stylesheets.

You might add more folders as well. For example, if you have images, audio and video files on your site, your assets folder might contain three sub-folder called ‘images’, ‘audio’ and ‘video’.

3. Consistent folder and file naming conventions
The names of your files should be named in a consistent way. There are a number of conventions you should follow here.

a. Filenames and folders should be in lowercase

Lowercase should be used for folders and sub-folders: eg ‘asset’ and not ‘Assets’ or ‘ASSETS’.

File names should also be written in lowercase: eg ‘index.html’ and ‘about-us.html’

b. No spaces
Files should not contain spaces. This is not a problem with files that are a single word (eg ‘index.html’) but is less reader friendly when it comes to filenames with two or more words (eg ‘aboutus.html’).

You have a number of options to make filenames with two or more words more reader-friendly.
Use a hyphen to separate the words: eg. ‘about-us.html’

Use an underscore to separate the words: eg. ‘about_us.html’

Use ‘camel case’ — ie capitalise the first letter of the second word and all subsequent wordsCamel case: eg. ‘aboutUs.html’

Use one of these naming conventions and stick with it. Do not use camel case for some files and hyphens for others.

For more on file naming conventions, see: http://everythingaboutweb.wordpress.com/2008/04/27/web-file-name-conventions/

An example of a logical file structure

4. Give your files logical names
Your website’s home page should be called ‘index.html’ or ‘home.html’.

For the purposes of this course, there are no other options.

For example, in Assignment 3, I do not want to see something like ‘myExcellentHomePage.html’ or ‘Assignment3Homepage.html’

Other pages could be given other names, but they should give some indication about the content. For example, your ‘contact.html’ page indicates that the page contains information about how to contact you, whereas ‘larry.html’ does not.

5. Use a consistent file extension
HTML files can have a three letter file extension (.htm) or a four letter file extension (.html). Both are valid and will load in a browser. You should choose one and stick with it.

But don’t worry, Window’s PCs come with a similar program installed and ready to go. It’s called Notepad and you can find it in the Accessories sub-menu in the ‘All Programs’ menu under the Start menu.

Where to find Notepad on a Windows PC

To create an HTML file, simply add .html to the end of the file name. For example, if you were making an ‘About Us’ page, you would call it something like ‘about.html’

To create a new HTML file, simply open a new file in Notepad and save using the .html file extension