Brilliant Create your
Pearson Education Limited
Essex CM20 2JE
and Associated Companies throughout the world
Visit us on the World Wide Web at:
First published 2007
© Pearson Education Limited 2007
The rights of Rob Clymo and Geoff Spick and Lon Barfield to be identified as
authors of this Work have been asserted by them in accordance with the
Copyright, Designs and Patents Act 1988.
All rights reserved. No part of this publication may be reproduced, stored in a
retrieval system, or transmitted in any form or by any means, electronic,
mechanical, photocopying, recording or otherwise, without either the prior
written permission of the publisher or a licence permitting restricted copying in
the United Kingdom issued by the Copyright Licensing Agency Ltd,
Saffron House, 6–10 Kirby Street, London EC1N 8TS.
All trademarks used herein are the property of their respective owners. The use of
any trademark in this text does not vest in the author or publisher any trademark
ownership rights in such trademarks, nor does the use of such trademarks imply
any affiliation with or endorsement of this book by such owners.
British Library Cataloguing-in-Publication Data
A catalogue record for this book is available from the British Library
10 9 8 7 6 5 4 3 2 1
11 10 09 08 07
Prepared for Pearson Education Ltd by Syllaba Ltd (http://www.syllaba.co.uk).
Typeset in 12pt Arial Condensed by 30
Printed and bound in Great Britain by Ashford Colour Press Ltd, Gosport.
The publisher's policy is to use paper manufactured from sustainable forests.
What you need to know and how to do it
When you’re working on your computer and come up against a problem that you’re
unsure how to solve, or want to accomplish something in an application that you aren’t
sure how to do, where do you look? Manuals and traditional training guides are usually
too big and unwieldy and are intended to be used as end-to-end training resources,
making it hard to get to the info you need right away without having to wade through
pages of background information that you just don’t need at that moment – and
helplines are rarely that helpful!
Brilliant guides have been developed to allow you to find the info you need easily and
without fuss and guide you through the task using a highly visual, step-by-step
approach – providing exactly what you need to know when you need it!
Brilliant guides provide the quick easy-to-access information that you need, using a
detailed table of contents and troubleshooting guide to help you find exactly what you
need to know, and then presenting each task in a visual manner. Numbered steps guide
you through each task or problem, using numerous screenshots to illustrate each step.
Added features include ‘See also’ boxes that point you to related tasks and information in
the book, while ‘Did you know?’ sections alert you to relevant expert tips, tricks and
advice to further expand your skills and knowledge.
In addition to covering all major office PC applications, and related computing subjects,
the Brilliant series also contains titles that will help you in every aspect of your working
life, such as writing the perfect CV, answering the toughest interview questions and
moving on in your career.
Brilliant guides are the light at the end of the tunnel when you are faced with any minor
or major task.
This book is dedicated to my Mum and Dad.
The author and publisher would like to thank the following for permission to reproduce
the material in this book: 1&1 Internet Ltd, 123 Domain Names UK, AddMe LLC, Adobe
Systems Incorporated, American Library Association, BBC, British Telecommunications
plc., CoffeeCup Software, Inc., EasyByte Software, fantomaster.com, Google UK, HitCounter-Download.com, Htmlgames, Keynote NetMechanic, Lexico Publishing Group,
LLC, MySpace, Nominet UK, Orange Home UK plc., Web CEO Ltd, Webeden, Website
Pros, Worldwide Recipes, www.visitorcounters.org, Yahoo! Inc., ZyWeb Ltd.
Screen shots from Corel Paint Shop Pro X are Copyright 2005 Corel Corporation and
Corel Corporation Limited, reprinted by permission.
Microsoft product screen shots reprinted with permission from Microsoft Corporation.
In some instances we have been unable to trace the owners of copyright material, and
we would appreciate any information that would enable us to do so.
Special thanks to:
Geoff Spick for contributing Chapter 6: Creating a website using Expression Web
Designer and material for page 192.
P.K. MacBride for permission to use material on pages 1–28, 41 and 190 which first
appeared in his book Brilliant Internet for the Over 50s.
Lon Barfield of the Usability Design Partnership for contributing the Web Usability
design tips in Chapter 7.
Dom Brookman for permission to use material on pages 39 and 40 which first appeared
in his book Brilliant Internet.
Clare H, Clare C and Marissa for their help with child care.
About the author
A journalist for nearly two decades, Rob Clymo has spent the last five years dedicating his time to
writing about web design and the internet. In that period he has been the editor of Web Pages Made
Easy and Website Maker magazines and made regular freelance contributions to a host of other
computing and technology publications. As well as specialising in writing beginner-friendly web
design tutorials, Rob also makes regular forays into website construction himself. He has developed
various eCommerce and database-driven sites and is currently a web developer for Bournemouth
University. He spends his spare time building and maintaining online ventures for a handful of
1. Creating your first website
Understanding HTML tags
Creating your own index page
Viewing your index page
Understanding the basics of text formatting
Formatting your text
Understanding the basics of setting colours
Setting your colours
Setting the text size
Drawing a line
Making a list
Understanding the basics of displaying images
Displaying your images
Linking a thumbnail to an image
Linking pages in a website
Creating a web page in Word
Formatting text in Word
Creating a link in Word
Following links in Word
2. Researching and planning your first website
Researching personal websites
Taking a look at hobbyist and club websites
Considering a small business website
Planning your project on paper
Managing your files
Finding online resources: content
Final thoughts on planning a website
3. Creating a website using online services
Picking an online web page creation service
Constructing a web page using the free ZyWeb trial
Customising your web page
Publishing a web page
Creating a site with WebEden
Customising a WebEden site
Getting your web pages online
Making your own web blog
Updating your blog
Creating a MySpace personal home page
4. Creating a website using FrontPage
Importing web page files
Starting a new project
Formatting your text
Editing colours and layout
Previewing your pages
Creating additional pages
Adding buttons and graphics
Creating rollover ALT tags
Investigating alternative software
5. Exploring web graphics
Understanding file types
Creating a simple banner using Paint Shop Pro
Making some navigation buttons
Creating lots of similar buttons
Previewing your graphics
Incorporating digital photos
Fixing your photos
Experimenting with graphical effects
Optimising your images for the web
6. Creating a website using Expression Web Designer
Downloading Expression Web
Finding your way around Expression Web
Changing the layout of the interface
Using a web template
Importing an existing web page file
Starting a new project
Adding pictures and creating hyperlinks
Previewing your pages
Previewing your pages in other browsers
Applying and managing styles
Changing CSS properties
Using the quick command list
Shortcuts reference list
7. Advanced techniques
Discovering cascading style sheets
Web usability design tips
8. Getting online
Finding an ISP to host your site
Using a web hosting provider
Buying a domain name
Getting help from Nominet
Using FTP software to connect to your site
Uploading your files via FTP
Testing your website
9. Getting your site seen
Adding keywords and descriptions in a META tag
Inserting keywords and descriptions using FrontPage
Submitting information to search engines
Monitoring site activity with Web CEO
Exploiting the visitor information captured by your web host
Advertising with Adwords
Welcome to Brilliant Create your own Website, a visual quick
reference book that shows you how to establish and maintain
your presence on the Web. Learn the basics of how to create a
web page and how to design the layout to make it appropriate
to your readers, how to set up a website and test it and,
perhaps most importantly, how to get your site seen. We have
focussed on describing software applications that are
commonly used by amateur website developers (such as online
services, FrontPage and Expression Web Designer – both found
in the Microsoft Office suite, and Paint Shop Pro) rather than
the expensive but powerful professional developer tools.
How you’ll learn
Find what you need to know –
when you need it
How this book works
Find what you need to know – when you
You don’t have to read this book in any particular order. We’ve
designed the book so that you can jump in, get the information
you need, and jump out. To find the information that you need,
just look up the task in the table of contents or
Troubleshooting guide, and turn to the page listed. Read the
task introduction, follow the step-by-step instructions along
with the illustration, and you’re done. Please note that we have
described how to create websites using various different
software applications and, in order to avoid duplication of
content, we have included numerous ‘See also’ cross
references to point you to the section of the book that deals
with a particular task.
How this book works
Each task is presented with step-by-step instructions and
annotated screen illustrations on the same page. This
arrangement lets you focus on a single task without having to
turn the pages too often.
This book provides concise step-by-step
instructions that show you how to accomplish
a task. Each set of instructions includes
illustrations that directly correspond to the
easy-to-read steps. Eye-catching text features
provide additional helpful information in bitesized chunks to help you work more efficiently
or to teach you more in-depth information. The
‘For your information’ feature provides tips and
techniques to help you work smarter, while the
‘See also’ cross-references lead you to other
parts of the book containing related
information about the task. Essential
information is highlighted in ‘Important’ boxes
that will ensure you don’t miss any vital
suggestions and advice.
A web page can be a great place for exploring your artistic
tendencies! Enjoy exploring the possibilities but take a look at
our usability design tips in Chapter 7 before you go live.
1 A small colour palette allows
you to pick a web-friendly
shade for your wording.
2 Text alignment is particularly
important on a web page
where numerous different
elements compete for the
For your information
Save yourself the
embarrassment of a typo
on your home page and
use the spell checker in the
Web safe palette – a
subset of commonly used
colours that browsers
display in a standard way.
Colours not contained in
this palette may not be
viewed in the same way on
Creating a website using FrontPage 75
This book offers quick and easy ways to
diagnose and solve common problems that you
might encounter using the Troubleshooting
guide. The problems are grouped into
categories that are presented alphabetically.
We have used UK spelling conventions
throughout this book. You may therefore
notice some inconsistencies between the text
and the software on your computer which is
likely to have been developed in the USA. We
have however adopted US spelling for the
words ‘disk’, ‘dialog’ and ‘program’ as these
are becoming commonly accepted throughout
Will people using different browsers
be able to view my website?
Will people using different sized
monitors be able to view my website?
How can I design my website to make 164, 167
it usable by the visually impaired?
Can users with different needs change
the way they view my website to
make it more accessible?
How can I make sure interested
parties find out about my website?
How can I make sure my site comes up
when a potential visitor types an
appropriate keyword into a search
How can I find out which browsers my
readers are using?
How can I customise my pages?
50, 58, 68
How should I decide which colours
I don’t know where to start with layout 72, 175
– are there any templates I can use?
How do I use Frames to make one part
of the screen stay in place whilst the
visitor clicks through content in
How can I make a lot of pictures
available without the visitor having
to download each and every high
How can I make the layout of my pages 80, 157
consistent throughout my site?
Can I change my mind about the
design of my website later?
How can I use styles to make the
construction of the site more efficient
and the design of the site more
Can visitors change the design of my
site to suit them?
Where can I find website templates
suitable for a small business website?
How do I get my website online?
53, 60, 169
How do I find my own unique web
How can I connect to other similarly
How can I get my site listed in the big
portal directories and on the major
What is FTP?
What do I do if someone has stolen my
Troubleshooting guide 213
Creating your first
Building a website is not that difficult, as long as you don’t need
anything fancier than formatted text and images on the pages,
with a straightforward set of links between them. The pages can
be created from ‘scratch’ – writing the HTML code directly,
which is far easier than you might at first expect. Of course, they
can also be produced using a number of different applications,
ranging from specialised multimedia editing suites to Word. In
this chapter we will create a basic web page using HTML in
order to demonstrate the fundamental construction techniques.
Although you will probably choose to use a web authoring
software package in the long run (they do all the coding for you
and we describe how to use these later in the book), it is well
worth understanding the code by which they operate. So we
recommend starting with this chapter and experimenting briefly
with the tags before you go on to explore other options. We will
also touch briefly on creating a basic site using Word. In future
chapters we will demonstrate how to make much ‘fancier’ sites
using specialised software and providing design guidelines, but
for now, let’s get on with the basics.
What you’ll do
Understand HTML tags
Create your own index page
View your index page
Understand the basics of text
Format your text
Understanding the basics of
Set your colours
Set the text size
Draw a line
Make a list
Understand the basics of
displaying an image
Display an image
Website – a set of related web pages, usually owned
and constructed by one organisation or individual.
Navigational aids and hyperlinks allow the visitor to find
their way around the site.
HTML – HyperText Markup Language, a system of
instructions that browsers can interpret to display text
Link a thumbnail to an image
Link pages in a website
Create a web page in Word
Format text in Word
Create a link in Word
Follow links in Word
Creating your first website 1
In HTML, all styling is done with tags – codes
which tell the browser how to display text or
images. These are mainly in pairs, one at each
end of whatever is being styled. They follow
Use whichever form is easiest to read in your text
So you would write:
This is a sub-head
or, remembering the last two rules, you could
write it like this:
Commonly used tags
Mark the header area, that will hold the title and
information about the page, which search
engines can use to identify the nature and
contents of the page.
The remainder of the text is the body and is
This holds the code for the visible page.
This is a sub-head
Instructions on pages 24 and 25 demonstrate
how you can get Word to produce web pages
directly – letting it write the tags for you.
Both produce this same effect:
This is a sub-head
Web – World Wide Web, also shortened to
WWW or W3. One of the most popular
ways of using the internet, it consists of
billions of web pages that can be viewed
An HTML file is plain text, and can be
created in any editor or word-processor
that can output plan ASCII text – WordPad
or Notepad (they should both be on the
Accessories menu in Windows) are ideal.
For your information
Keep up-to-date with developments in the
HTML standard on the World Wide Web
Consortium’s website: www.w3.org.
Creating your first website 3
own index page
1 Set up a new folder for your
home page files. You will be
saving all the pages and
The first page anyone meets on your site will be the index page
(otherwise known as the Home page), so we’ll start by creating
that. We’ll actually do this in stages. At first we will set up a
very simple page, then come back later to add links to it so
that you can move from the index page to the others once you
have created them.
This is my page. Yours should have the same structure and
tags, but with your own words for the title and heading.
2 Start NotePad, WordPad,
Word – whichever you prefer.
3 Type in the HTML text shown
here, customised to suit you.
4 Open the File menu and select
Advice on organising your files is given on page 38.
Home page – the first page your browser loads when
you type in the address or URL of a website. The
‘gateway’ or entrance to a site.
Index – the home page and entrance to your website.
The first page to open when your web address is typed
into a browser.
own index page
5 Locate your home page folder.
6 Save the document as a text
file with the name ‘index.htm’.
7 Click Save.
Web page files can have .htm or .html extensions. Some
Internet Service Providers insist that your top level page
is called index.html – with an ‘L’. Check the rules at
Creating your first website 5
In this early stage of construction, your ‘website’ will remain
located on your computer, and you will be the only one who
will be able to see it. Later, you will upload the completed
pages and image files to your web space at your ISP’s site –
and then it will be on the web. Meanwhile, you can still view
your pages in Internet Explorer.
1 Switch to, or start Internet
Explorer. You do not need to
be online, but it won’t matter
if you are.
2 Open the File menu and select
3 At the Open dialog box click
4 Look in the website folder and
open your index.htm file.
5 Check the display and return
to the editor to enhance and
improve the text file!
ISP – Internet Service
Provider – organisation
whose main business it is
to enable people to access
It is quick and easy to see the effects of changes in your
HTML file. Keep Internet Explorer and the editor
windows open, and after each change to the text, save
the HTML file again, then click on Refresh to reload the
new version into Internet Explorer.
The simplest tags are the ones that format text.
These will produce six levels of headings, a
small, italicised style (mainly used for email
addresses), and bold and italic for emphasis.
Start a new line without a space before it. When you combine tags, you must nest them – write one pair inside the other. Timesaver tip If your formatting tags don’t seem to be doing the job properly, check that each opening