Planning

Before you start building a website, identify the target audience, purpose, structure and content. Consider all the points in this checklist:

• Target audience - who is the website aimed at? There may be several different audiences, so you might need to tailor the website to the different types of people who will use it.
• Purpose of the website - are you trying to sell something, or to educate and inform? What are the key things people will want to locate when using the website? The key information should be easy to identify and find, so should be placed in a prominent position, either on the homepage or through clear links.
• Structure - what are the main sections within the website? Will they make sense to someone who is visiting your site for the first time? Do the links on the website lead the user to the right point? It is vital to consider the website as a whole when you are planning your design.
• Content - try not to present too much information on each page. People don’t like scrolling down to locate the information they are looking for.
• Accessibility - is your website accessible [accessible: Easy to access/use. ] to people with disabilities? Could a person with poor eyesight use your website? Or someone who has difficulty using a mouse? A well designed website will be accessible to a variety of people. Other things to consider include colour, text size and use of media (eg images or animated content). It is important not to distract too much from the purpose of the website by using features such as animated gifs, scrolling banners, flashing buttons etc...

For more information and tips on good web design, see the Websites Revision Bite in Using ICT.

Website software

When we look at a website, we see a combination of text, images, colours, design and often multimedia (animation, flim and sound). However, behind the façade is a complex code that tells the web browser how to display the webpage. Everything, from the colour of the background to the size and placement of the images, is defined in this code. This code (sometimes referred to as a language) is called Hyper Text Mark-up Language - or HTMLHypertext Markup Language (HTML): web pages are written in HTML, web browsers interpret HTML and render or display the end result for short.

HTML uses a set of predefined tags that tell the web browser how to display the content of the webpage. You cannot create your own tags in HTML - you must use the ones that already exist. The World Wide Web Consortium standardises and develops HTML tags, and should be the first reference point for any matters concerning HTML (see useful links section below).

Websites can be written from scratch using a plain text editor [plain text editor: A text editor that only uses plain text - meaning that the user cannot format the document in any way, for example, use bold text, coloured text, bullets, images etc. ]. If you're a whizz with HTML, you may prefer to write websites this way. You will, however, need a good understanding of how HTML works and all the tags available to mark-up your content.

HTML code in a plain text editor

Most people will use a WYSIWYG (What you see is what you get) HTML editor. This is a more user-friendly way of writing webpages, because with it you don't need a thorough knowledge of HTML to build a webpage. You can design your page(s) and control their content layout, their style, their links and much more, without having to edit HTML tags. You can also preview your webpages in a web browserweb browser: an application used to browse the Internet or view web pages within the software.

Screen shot of a WYSIWYG html editor

Some common WYSIWYGWhat You See Is What You Get (WYSIWYG): an piece of software, eg Dreamweaver, in which the content looks very similar during editing to the final product web editors are:

• Macromedia Dreamweaver
• Microsoft Expression

Useful links

• World Wide Web Consortium

  The official W3C website that documents the latest version of HTML, and gives an extensive list of tags, tutorials, news and other web technologies such as CSS and XML.

• Dreamweaver

  The offical Dreamweaver Developer Center - the latest information on Dreamweaver, and links to tutorials and free trials.

• Expression

  The official Expression resource website, with articles, news and tutorials.

Creating a webpage

It is likely that you will use a WYSIWYGWhat You See Is What You Get (WYSIWYG): an piece of software, eg Dreamweaver, in which the content looks very similar during editing to the final product editor to create your webpage. Follow the instructions below and over the next few pages to create your site.

1. Open your web authoring application. 2. Select the Create New HTML option. You should see a menu similar to this:

You will be presented with a screen that looks similar to this:

Screen shot of website authoring software

Change the title of the page to something that describes your webpage. In the example below, the title is 'Tour of my school'.

Screenshot of the document title bar

Table structure

A table structure will help you to layout your webpage. To insert a table select:Insert > Table.

A Table box will pop up that will allow you to enter the number of rows and columns you want your table to have. In this box, when you get more ambitious, you can also specify other attributes such as cell spacing and padding, border thickness, and extra information for accessibility.

The table properties box

Click 'OK' and your table will be inserted onto your page.

Screenshot of a table in web authoring software

If you want to merge (join) some of the cells in the table:1. Highlight the cells you want to merge.2. Right click.3. Select Table.4. Select Merge cells. You can see below that the cells of the top row have been selected. When merged, they will leave space for a title bar for your table.

Screenshot showing the menu for merging cells

You could also change other properties of the table by using the properties window. For example, the background colour of a cell.

Screenshot of properties window showing a selection of colours from the colour palett

The properties of the table on the page shown below have been changed to make some of the cells different colours.

Screenshot of a table on the page with different coloured cells

Text

You can add text to your webpage, choose a font, the font size, colour and alignment of text. Simply change the text properties in the properties pane at the bottom.

Screenshot showing text and the properties that can be changed in the properties pane

In the example below, you can see that the text 'Tour of the school' has been aligned to the centre and the font colour and size changed.

Screenshot of webpage in progress - the title heading has been added

Images

It is likely that you will want to insert images on your webpage. Click where you would like the image to go (if the image needs to go inside a table, make sure you click inside the correct cell). Select:Insert > Image.

Locate your image and click 'OK'. The image will appear on the page, although it may need to be resized.

Screenshot of webpage with an image added to the bottom

Hyperlinks

Hyperlinks (often called links) are the method through which you can link one webpage of your site to another. You can also link to files and other people's websites.

To create a hyperlink:

1. Select the text or image you want to link from.
2. Enter the URL (or filename) into the Link section of the properties window.

Hyperlink properties box

You should know the difference between an absolute link and a relative link - make sure you have read this page in the Websites Revision Bite in the Using ICT section.

Rollover images

You can insert rollover images in your webpage. A rollover image shows a second image when your mouse is rolled over it. These images are particularly useful as button images, when you want to show the option that a button offers.

To insert a rollover image:

1. Click on the intended location of the image on the webpage.
2. Select Insert > Image Objects > Rollover Image.

Insert menu with 'Image Objects and 'Rollover Image' highlighted

You will need to fill in the following information for each rollover image:

• Image - a name for this image.
• Original image - the location of the original image.
• Rollover image - the location of the rollover image (when the mouse is placed over the original image).
• Preload rollover image - check this box (this will tell the web browser to download both images at the same time, meaning that when the user puts their mouse over the original image, there will not be a delay in displaying the rollover image).
• Alternate text - text that will appear when the user places their mouse over the image. Also, this text is important for accessibility - it allows blind users who may use a text-based browser to get a description of the image or button.
• When clicked, go to URL - where this rollover image will link to.

Insert Rollover Image property box

Background sounds

You can add background sound to your webpage. Start by switching to the code view.

The code view

In the head section, you will need to add the following details: <sound src="location of the sound file" loop="infinite">

Screenshot of the code view with the sound code inserted

If you like the loop can be a number, which will determine how often the sound file is played. In the example of the code shown here, the loop number is 2, so the sound file will be played twice through. <sound src="location of the sound file" loop="2">

If you decide to use a background sound, think about giving the user a choice to turn it off - background sounds can be annoying. Always remember who your audience is - children often enjoy background noise, whereas adults can find it distracting.

Video

To insert videos into your webpage:

1. Click on the intended location of the video on the webpage.
2. Select Insert > Media > Plugin.
3. Select your video and click 'OK'.

Insert menu with 'Media' and 'Plugin' highlighted

Cascading Style Sheets

What is a style sheet?

A Cascading Style Sheet (CSS), more simply referred to as a style sheet, is a separate document that contains all the information about style for your webpage or website. You don't have to use a style sheet - fonts, colours and size can be coded directly into your HTMLHypertext Markup Language (HTML): web pages are written in HTML, web browsers interpret HTML and render or display the end result document - but there are many good reasons for separating your webpage's content and style.

Why use a style sheet?

The main reason for using a style sheet is because it will save time. You might finish your website and decide that you don't like the font and the font colour. If you don't have a style sheet, it could be very time-consuming to change the font and colour for each separate paragraph of text. With a style sheet, you only have to make the change once, save your changes and then refresh your browser and all the text will change accordingly.

Using a style sheet makes it easier to be organised as you create your site, and makes it simpler to make changes. When you want to make a style change, you will know where to look, and not have to search through lines of HTML code.

These days websites aren't just viewed on your computer screen. They can be viewed on mobile phones, PDA [PDA: Personal Digital Assistant - a type of handheld mini computer. ]s and television screens. You may need to apply different styles for different platform [platform: A platform requires to the architecture of a particular piece of technology (and sometimes software). The most common technology platform is the computer, but more recent platforms include mobile phones, PDAs and game consoles. ]s, and style sheets enable you to do this. You could develop one style sheet for use in a normal web browserweb browser: an application used to browse the Internet or view web pages, and another made for mobile phones.

Here is an excerpt from a style sheet used on Bitesize. This part determines which font and size to use for the headings H1 to H3.

Screenshot of a style sheet

How do I get my style sheet to work with my HTML pages?

Using a style sheet is very simple - you put a link to it within the head section of your HTML document. Note that you must use the file extension .CSS for all style sheets.

<link rel="stylesheet" href="mystyle.css" type="text/css">

The href attribute is the link to where your style sheet is kept. In the screenshot below, you can see the head information for a GCSE Bitesize webpage. The link to the style sheet can be seen on line 5.

Screenshot of HTML code showing the line of code that refers to the style sheet

Metadata

Metadata is information that is entered into the metadata tags within the head section of an HTMLHypertext Markup Language (HTML): web pages are written in HTML, web browsers interpret HTML and render or display the end result document. The metadata tags allow you to enter a description of your page and key words associated with it. These are used by search engines and other computer applications to find and rank your website. Better metadata can affect how high your website rank is in search results, so it's worth spending time describing your site.

For example, if you were designing a website for a fitness club, the metadata would include words such as fitness, health, gym, aerobics. Take a look at the screenshot below, and note the metadata included in this page.

Screenshot of the metadata tags for a webpage about a fitness club