Web Authoring Step by Step Booklet

Section 15: Web Authoring
Mark Nicholls ICT Lounge
IGCSE ICT SECTION 15

WEB AUTHORING
FRONTPAGE
STEP BY STEP GUIDE
Mark Nicholls
ICT lounge
Page |1
Contents
Introduction to this unit.... Page 4
How to open FrontPage.....Page 4
The FrontPage Menu Bar...Page 5
Downloading Files from the Web.....Page 6
Creating a New Folder..................... Page 6
Renaming the Folder..... Page 6
Downloading the Files...... Page 7
Style Sheets... Page 8 - 20
What is a Style Sheet?..................................................................................... Page 8
How to create a Style Sheet..... Page 8
Specify styles for the Style Sheet.....Page 9 - 11
Viewing generated code for a Style Sheet.. Page 12
Saving a Style Sheet.....Page 12 - 13
Example of the effects of a Style Sheet.. Page 13
Printing Style Sheet code.... Page 14 - 15
Attaching Style Sheets to web pages.......... Page 19
Removing Style Sheets from web pages... Page 20
Creating web pages from scratch..... Page 16
Saving web pages.... Page 16
Adding text to web pages. Page 20
Using tags to set styles to text.... Page 20 - 24
Accessing HTML code ... Page 20 - 21
Adding the paragraph <p> tags to the HTML code.. Page 21
Checking that the tag is communicating with the Style Sheet... Page 22
Adding the heading <h1> tags to the HTML code. Page 24
Creating and Formatting Tables.. Page 25 - 28
Inserting a table... Page 25
Formatting a table (border size, rows/columns, colour etc)........... Page 25 - 26
Getting back into table properties.. Page 26
Merging table cells...... Page 26 - 27
Page |2
Resizing table columns and rows..... Page 28

Inserting and Resizing Images..... Page 29 - 31
Inserting images...... Page 29
Resizing images.....Page 30 - 31
Inserting text from a downloaded file.. Page 32 - 33
HTML tags....Page 34 - 35
What are HTML tags?..... Page 34
Examples of HTML tags.. Page 34 35
Using HTML tags to set the rest of the styles. Page 35 - 37
Opening existing web pages... Page 38
Using the contents of one web page in another.... Page 39
Hyperlinks....Page 42 45
Creating links to web pages stored on our computer..Page 42
Checking that hyperlinks work by using preview mode....Page 43
Linking to external websites...Page 44
Opening external websites in a new window.... Page 44 45
Attaching hyperlinks to images...... Page 46 - 47
Anchors (aka Bookmarks)..Page 48 50
Creating anchors......Page 48
Linking to anchors with hyperlinks........ Page 49 50
Editing images in Photoshop.... Page 51 54
Opening images in Photoshop.......... Page 51
Resizing image width and height........ Page 52
Exporting images and colour depths....... Page 53
Cropping images.........Page 54
Independent tasks for revision....Page 55 56
RGB colour codes (web colours).... Page 57 62
What are RGB colour codes?.......... Page 57
Examples of some RGB colour codes....... Page 57 60
How to set and modify RGB colours in style sheets and web pages . Page 61 - 62
Printing.........Page 63 65
Highlighting sections of HTML code...... Page 65
Page |3
What this guide is for

This guide will help you learn how to use Microsoft FrontPage in order to pass unit
15 of the IGCSE ICT syllabus. Unit 15 requires you to be able to design and edit web
pages and you will be asked to do this in up to two different ways:
Create web pages from scratch
Open pre-made web pages and edit them
The guide uses the 2007 past paper question as a basis for its activities and tasks but
skills you gain will also apply to other past paper questions.
How to open FrontPage

Click Start Button All Programs Microsoft Office
Microsoft Office FrontPage 2003
This will open FrontPage. The programs main screen

can be seen below:
Page |4
The FrontPage Menu Bar

The menu bar in FrontPage is very similar to the one found in Microsoft Word
2003. If you have used Word 2003 before then you should be able to transfer your
skills to FrontPage very easily.
The screenshot below shows you the menu bar items that you will use most often:
File:
New Page
Save As
Preview in Browser
Insert:
Pictures
Hyperlinks
Format:
Font Styles / Sizes / Colours
Background Colours
Style Sheets
Table:
Insert a new Table
Edit existing Table
Page |5
Task 1 Download files to use within the web pages

Download the following files from
http://www.ictlounge.com/html/webauthoring_2007_download_files.htm to your
own work area:
SPECIMEN1.TXT
SPECIMEN2.HTM
SPECIMEN3.HTM
SPECIMEN4.GIF
SPECIMEN5.JPG
SPECIMEN6.JPG
SPECIMEN7.CSV
1.1 Downloading Files How to do it

If you are asked to download files from a web site you should first create a folder
where you can store them. This helps you to quickly find the files whenever you
need them.
Creating a new folder:
1. Open your web authoring past

paper folder
2. Right click in a blank area
3. Click New
4. Click Folder
Renaming the new folder:
1. Replace the text New Folder with a more suitable name

(I suggest Downloaded Files)
Page |6
Download the files:
1. Open your Web Browser (Internet Explorer for example)

2. Enter the web address of the website that contains the files to download into
the web browsers address bar and then press the Go Arrow
3. Right click each of the files

Save target as
(if you are using Internet Explorer)
Save link as
(if you are using Firefox / Chrome)
4. Point each file to save in the new folder

you created earlier (Downloaded Files)
5. Click Save
6. Check that each file has saved

into the folder
Page |7
Task 2 Create a style sheet

Using a suitable software package, prepare the following styles for use within all
pages on this website:
h1 dark blue, sans-serif font, 36 point, centre aligned, bold

h2 green, serif font, bold, 14 point, left aligned
h3 blue, sans-serif font, 12 point, left aligned
li blue, sans-serif font, 10 point, bullet points, left aligned
p black, sans-serif font, 10 point, left aligned
Save the style sheet and attach it to each web page as you create it.
2.1 What is a Style sheet?

A style sheet is kind of similar to the master slide on a PowerPoint. Style sheets can
be used to specify fonts styles, colours, sizes, alignment, bullet points etc before
objects are actually added to web pages.
Once the style sheet is applied to web pages, these specifications will automatically
be applied to the correct objects. This saves a lot of work and time.
2.2 - Creating a Style sheet How to do it:
1. Click the Black Arrow to the right of the
Page Icon
2. Click Page
3. Click the Style Sheet tab

4. Choose Normal Style Sheet
5. Click OK
Page |8
2.3 Specifying Styles for the Style Sheet How to do it:

At this stage our style sheet is empty. Our next task is to specify the styles required
by the question (blue fonts, 36 points in size etc). This is how you do it:
Open the style window:
1. Check that the style sheet is open.

The name of your style sheet should
end with .css (dont worry about the
actual name at this point we will
choose one when we save later).
2. Click Format
3. Click Style
Select the HTML tag you want to apply the style to:
1. Slect the correct HTML tag from the

list (h1, h2, li etc)
2. Click Modify
Page |9
Specify the correct styles to the HTML tag:
1. Click Format
2. From the menu select what you would
like to change
Font --- for font, colour, bold, italics, size
Paragraph --- for align left/right/centre
Numbering --- for numbers and bullets
Specify the font styles using the Font

Window:
1. Choose a Font
Comic sans = sans-serif font
Times New Roman = serif font
2.
3.
4.
5.
Choose a Font style (Bold/Italic)

Choose a Size
Choose a Colour
Click OK
Specify alignment styles using the Paragraph Window:
1. Click Format
2. Select Paragraph
P a g e | 10
3. Choose the correct Text

Alignment
4. Click OK
Specify alignment styles using the Numbering Window:
1. Click Format
2. Select Numbering
3. Choose the type of bullet you want

Plain Bullets or Numbered Bullets
4. Select the bullet style

5. Click OK
Specify alignment styles for the rest of the HTML tags:
1. Your styles list will only show the styles that you have created.
2. To add styles to more HTML tags
you need to select HTML tags
from the list menu.
NOTE:
At this stage you would repeat the above instructions add create the styles for the
rest of the HTML tags specified in the task
P a g e | 11
2.2 - View the styles code How to do it:

Once you have created the styles for each of the tags specified in the question, you
should be able to see the HTML code that has been created.
The code will be viewable in the style sheet that we created earlier:
2.3 Saving the style sheet How to do it:

To save the style sheet for later use you should do the
following:
1. Click File Save As
2. Browse to your web authoring

past paper folder
3. Name the Style Sheet (Style
will do)
4. Choose CSS Files from the Save
as Type: box
5. Click Save
P a g e | 12
6. The style sheet should now be safely

in your past paper folder
NOTE:
We will attach this style sheet to a web
page later.
Example of what effect a style sheet has on web pages:

The images below show you how style sheets effect how web pages look.
The first image is before the style sheet is attached to the page.
The second image shows the changes that the style sheet has made to the
same web page.
Notice how the fonts, colours and alignment styles have automatically applied
themselves to the objects on the web page.
Before the style sheet was attached:
After the style sheet was applied:
P a g e | 13
Task 3 Print the style sheet

Print a copy of the style sheet that has to be attached to each page as HTML source
code.
Make sure that your name, candidate number and centre number are printed on the
page.
3.1 Printing style sheet code How to do it:

To print style sheets you should do the following:
Open the style sheet (if you have closed it):
1. Click File
2. Click Open
3. Browse to the style sheet

4. Make sure that Files of type: is set
to All Files
5. Click the style sheet
6. Select Open
7. The style sheet will open:
P a g e | 14
Add your name and numbers to the style sheet:
1. Make some room at the bottom of the style sheet

2. Type in the required information (name and numbers)
Print the style sheet:
1. Click File
2. Click Print
3. Select the correct printer
4. Click OK
NOTE:
NEVER print anything without your name and
numbers added.
P a g e | 15
Task 4 Creating a new web page

Using an appropriate software package, create a new homepage called
HOMEPAGE.HTM.
4.1 - Creating a new Web page from Scratch How to do it:

Sometimes your examination task may ask you to start a new web page from
scratch. Fortunately this is very easy as shown below:
1. Click the Black Arrow to the right of
the Page Icon
2. Click Page
3. On the next screen click Normal Page

4. Click OK
4.2 Save the web page with the correct name - How to do it:
To save the web page with a specific name you should do the following:
1. Click File
2. Click Save As
3. Browse to your web authoring past
paper folder
4. Name the file HOMEPAGE.htm
5. Make sure that Save as type is set
to Web Pages
6. Click Save
P a g e | 16
Task 5 Visualise the layout of the web page

HOMEPAGE.htm will have a table and menu options across the bottom.
The page should look like this:
NOTE:
This task is not asking you to do
anything other than understand
where objects will go.
P a g e | 17
Task 6 Attach the external style sheet created in task 2 to the web page
Attach the external style sheet that was saved in task 2 to HOMEPAGE.htm.
6.1 Attaching style sheets to web pages How to do it:

A style sheet will only change how a web page looks after the style sheet is linked to
the web page. The examples below show you how this is done:
1. Open the web page you want to attach the

style sheet to
2. Click Format
3. Click Style Sheet Links
4. Click Add
5. Browse to the style sheet

that you want to attach
7. Click OK
8. Click OK again
P a g e | 18
6.2 Removing style sheets from web pages How to do it:

Sometimes you need to remove a style sheet in order to attach a different one. The
example below shows you how this is done:
1. Open the web page you want to remove the

style sheet from
2. Click Format
3. Click Style Sheet Links

5. Click remove
6. Click OK
P a g e | 19
Task 7 Add some text to the web page and set text styles
In the top left corner add the text Last edited by: and then add your name, centre
number and candidate number.
Set the text to style p.
7.1 Adding text to web pages How to do it:

Adding text to a web page is easy, you just need to make sure that you are typing it
in the correct place:
1. Open the HOMEPAGE.htm web
page file that we saved in task 4
2. Position your curser in the top
left of the web page
3. Type in the required text (Last
edited by: name/numbers)
7.2 Setting text styles: - How to do it
Accessing HTML code so we can change style of text
We need to tell FrontPage that this text is a paragraph. This is so the style sheet can
apply the formatting that we set up for the p tag (paragraph tag) in task 2.
To do this we need to view the code for our
text:
1. Highlight the text and then click the
Code tab
P a g e | 20
2. This will take us to the web

pages HTML code:
Setting the text to style p:
Once we have access to the code, we need to surround our line of text (Last edited
by) with something called a tag.
Tags are used to instruct web browsers how to display objects on the web page
(text styles for example). Tags almost always work in pairs with an opening tag <>
and a closing tag </>. The opening tag tells the browser to start applying the style
and the closing tag tells it to stop applying the style.
The tag we need to surround our text with is the <p> </p> (paragraph) tags.
1. Position your curser to the left
of the text
2. Type in <p>
3. FrontPage will automatically assume you also want the closing tag </p>.
4. Move the closing tag </p> to
the end of the text
P a g e | 21
Checking that the style sheet has applied the correct formatting:
Now that we have surrounded the line of text with the <p> </p> tags, the style
sheet can apply the formatting that we set up during task 2.
To see if this has happened we need to go back into Design View to see the effects.
1. Click the Design tab
2. This will take us back into Design View and you should notice that the style
sheet has indeed altered the text to match the formatting specified in task 2
(black, sans-serif, 10 points, left aligned):
Before style was applied
After style was applied
P a g e | 22
Task 8 Enter a page heading and set text styles

Enter the heading Rootrainer Trees.
Set the text to style h1.
Adding the heading:
Task 8 is almost the same as task 7 apart from different text, different text position
and a different set of tags:
1. Open the HOMEPAGE.htm
web page file in Design View
2. Position your curser under the
first piece of text
3. Type in the required heading
(Rootrainer Trees)
Accessing HTML code so we can change style of text:
1. Highlight the text and then

click the Code tab
P a g e | 23
Setting the text to style h1:
1. Position your curser to the left

of the text
2. Type in <h1>
3. FrontPage will automatically assume you also want the closing tag </h1>.
4. Move the closing tag </h1> to
the end of the text
Checking that the style sheet has applied the correct formatting:
Go back into design view and check that the correct formatting has been applied
from the style sheet (dark blue, sans-serif, 36 points, centre aligned, bold).
Before style was applied
After style was applied
P a g e | 24
Task 9 Laying out the page with a table

Below the heading, create a table which has 4 rows and 2 columns.
Merge the cells to create the table as
shown to the right:
Set the cell padding for the table to 3.

Set the cell spacing for the table to 5
Set the width of the table to 100%
Set the table border to 2.
Set the table background colour to light yellow.
9.1 Creating and formatting a table How to do it:

Tables are used to provide the layout for a web page. Tables can be formatted to
alter row / column numbers, background colours, widths, border thickness etc.
Inserting the table:
To insert a new table you would do

the following:
1. Click Table
2. Click Insert
3. Click Table
Formatting the table:
1. In the table properties window you can set

all of the required table formatting such as:
Row and column numbers

Width (in percent)
Cell Padding / Cell Spacing
Border size and Background colour
2. When you have set the table up correctly

click OK
P a g e | 25
Your table will be inserted into the HOMEPAGE.htm web page:
Getting back into table properties at a later time:
You can get back into table properties at any time by:
1. Right click the table
2. Select table properties
This is useful if you need to correct mistakes or add /
remove rows and columns.
9.2 Merging (joining) table cells How to do it:

The image in task 9 requires us to merge (or join) some of our cells so that we are
left with the correct layout.
P a g e | 26
To merge table cells you should do the following:

1. Highlight the cells across the top
row of the table
2. Right click anywhere in the
highlighted section
3. Select Merge Cells
4. Repeat for the other sections that require merging. Your table should look like
this when you are finished:
P a g e | 27
9.3 Resizing columns and rows How to do it:

Table columns and rows can be resized to help layout the page exactly. In the image
on task 9, cell D was wider than cells B and C.
To resize columns / rows you should do the following:
1. Click the border of the row / column and hold the mouse button down
2. Drag the border to the size you want
3. Your table should look like this when you are finished:
P a g e | 28
Task 10 Importing an image

Import the image SPECIMEN4.GIF and place it in cell D
Set the height to 250 pixels and maintain the aspect ratio
Make sure that the whole image is visible.
10.1 Importing and Resizing images How to do it:

Inserting / Importing images in FrontPage is very easy. You just have to make sure
that you have the image on your computer, ready to import. You SHOULD NOT try
to copy and paste images in FrontPage.
Importing the image:
To insert an image into FrontPage you would do the following:

1. Position your mouse curser into the location
where you want the image to appear
(cell D in the table)
2. Click Insert
3. Click Picture
4. Click From File
5. Browse to the folder we created

in task 1 (Downloaded Files).
6. Click on the SPECIMEN4.GIF
image
7. Click Insert
8. The image will be inserted into

cell D
P a g e | 29
Resizing the image:
When an examination question asks you to resize an image it will also specify
whether or not you should maintain aspect ratio.
Maintaining Aspect Ratio
Resizing the image whilst keeping the correct dimensions
Not Maintaining Aspect Ratio
Resizing the image whilst distorting the dimensions
Image in correct
proportions
Image
distorted
The task wants us to resize the image to 250 pixels high and maintain aspect ratio.
To do this you should:
1. Right click the image
2. Select Picture Properties
3. Find the Size section

4. Make sure the Keep aspect ratio box is
ticked
5. Set the height of the image to 250 pixels
6. Click OK
NOTE:
If you needed to distort the image for any reason you would simply uncheck the Keep aspect
ratio box before setting a new height.
P a g e | 30
Your web page should look like this now:
P a g e | 31
Task 11 Insert text that has been supplied to you in a downloaded text file
Using the contents of the file SPECIMEN1.TXT:
Place the text Our company.. to the customer. into cell A.

Place the text Plants for all..evergreen. into cell B.
Place the text You can contact us in many ways. into cell C.
Place the text Through our website..of our services. into cell E.
11.1 Inserting text that has been supplied to you How to do

it:
Sometimes you are asked to use text that has been supplied to you within one of
the documents that you download at the start of the question paper.
In this case we need to get our text from the file named SPECIMEN1.TXT that we
downloaded back in task 1. This is how you do it:
Open the text file:
1. Open your downloaded files

folder
2. Open the file named
SPECIMEN1.TXT
Select and copy the correct piece of text:
1. Select the line of text Our company..to the customer.

2. Right click it and the select
Copy
P a g e | 32
Paste the text into the correct section of the web page:
1. Position your curser into cell A of the table

2. Right click and the select Paste
3. Repeat for the rest of the information

4. Your completed task should look like this:
P a g e | 33
Task 12 Use tags to attach our style sheet to the text items in the table
Set the text:
Our company.. to the customer. as style h2

Plants for all soil types: as style p.
acid as style li
alkaline as style li
neutral as style li
and all types of plants: as style p
deciduous as style li
coniferous as style li
evergreen as style li
You can contact us in many ways. as style h2
Through our website..of our services. as style h3
12.1 Using HTML tags to set styles How to do it:

What are HTML tags?
In tasks 7 and 8 we used 2 different tags to change how some of the text on our web
page looked. The tags used in those tasks were the <h1> </h1> tag and the <p> tag.
Tags are used to alter how items on our web pages look and they can also be used
alongside style sheets to specify exact font styles, colours, sizes etc.
Tags almost always work in pairs with a start tag <> and a close tag </>.
Common tags that you should know include:
Tags
<h1> </h1>
<h2> </h2>
<h3> </h3>
<li> </li>
<p> </p>
<br>
<b> </b>
<i> </i>
Meaning
Heading 1 (large heading)
Heading 2 (sub heading)
Heading 3 (small sub heading)
List (like bullet lists)
Paragraph
Line break (move text to next line)
Bold
Italic
P a g e | 34
Example
<h1> Text </h1>
<h2> Text </h2>
<h3> Text </h3>
<li> Text </li>
<li> Text </li>
Text <br>
<b> Text </b>
<i> Text </i>
Examples of the effects

of HTML tags:
Examples of the HTML tag coding:
Using HTML tags to set the styles required by task 12:
To set the rest of the tags required by the question you should do the following:
1. Highlight the text that needs to be set
to style <h2>
2. Access the web page HTML code by
clicking the Code tab
3. Surround the line of text with the <h2> </h2> tags
4. Click design to check that the tag has set

this line of text to style h2:
P a g e | 35
Tag has allowed the style sheet to apply the

h2 style to the text. My text has changed to
green, serif font, bold, 14 point size and left
aligned.
Repeat for the rest of the required tags:
1. Repeat this with all of the other tags required for task 12
2. Your finished task should look like this:
Correct styles applied to the text on

the HOMEPAGE.htm file.
SCREENSHOT OF HTML TAG CODING ON NEXT PAGE:
P a g e | 36
P a g e | 37
Task 13 Open an existing web page and use its contents on HOMEPAGE.htm
Open SPECIMEN3.HTM. Place the contents of SPECIMEN3.HTM below the table of
HOMEPAGE.HTM to create a menu
The menu should be inserted as a new table with a border size of 0
Set the text to style h2
13.1 - Opening SPECIMEN3.HTM and moving contents How to
do it:
Opening the specimen3.htm web page:
Sometimes your examination task may ask you to open existing web pages that have
already been started. To do this you need to find files with the .htm extension (.htm
is the file name given to web pages):
1. Click File
2. Click Open
3. Browse to the web page file (.htm)

that you want to open (SPECIMEN3)
4. Click the file
5. Click Open
6. This will open the SPECIMEN3.HTM file:
P a g e | 38
Place the contents of SPECIMEN3.HTM below the table in

HOMEPAGE.HTM:
This task requires us to simply copy the table found in SPECIMEN3.HTM and paste it
into the correct position underneath the table in HOMEPAGE.HTM.
1. Select the table in SPECIMEN3.HTM

2. Right Click
3. Select Copy
4. Position your curser under the table

in HOMEPAGE.HTM
5. Right Click
6. Select Paste
7. The table from SPECIMEN3 will appear underneath the main table in
HOMEPAGE:
P a g e | 39
Use table properties to check that the table borders are set to 0:
The question said that the menu table borders should be set to 0. To do this we
need to access Table Properties:
1. Select the new table

2. Right click
3. Select Table Properties
4. Find the Borders Property and

ensure that it is set to 0
5. Click OK
Use HTML tags to set the tables text to style h2:
1. Highlight the text that needs to be set to

style <h2>
2. Access the web page HTML code by clicking
the Code tab
3. Surround the text with the <h2> </h2> tags
P a g e | 40
4. At this stage your web page should look like this:
P a g e | 41
Task 14 Create hyperlinks from text

Create a hyperlink from the menu item Try Bonsai to link to the file
SPECIMEN2.HTM
Create a second hyperlink from the menu item Order Form to point at the
following website: http://www.arborday.org/shop/index.cfm
The website should open in a new window called _external
14.1 Linking to web pages we have created How to do it:

The first hyperlink is going to be inserted onto the text Try bonsai. The hyperlink
will take us to a web page that we have already downloaded called
SPECIMEN2.HTM.
This is how you can add a hyperlink to link to web pages we have saved on our
computer:
1. Highlight the text Try Bonsai
2. Click Insert
3. Click Hyperlink
4. Browse to the SPECIMEN2.HTM

file
5. Click the SPECIMEN2 file
6. Click OK
7. Check that the link has been set (it should turn blue and underlined):
P a g e | 42
14.2 Using preview mode to test the hyperlink How to do it:

In order to test that the hyperlink works we need to find the HOMEPAGE.HTM file
and double click it.
Double clicking the file will open it in Preview Mode. This shows us how the web
page would look and work as if it was actually online. This is how you do it:
1. Save the HOMEPAGE.HTM file

2. Browse to the folder that contains
the HOMEPAGE.HTM save file
3. Double click the file
4. Click your hyperlink
5. Check that it takes you to
SPECIMEN2.HTM
NOTE:
You can also click F12 from within FrontPage to preview your web pages.
P a g e | 43
14.3 Linking to external web pages in a new window How

to do it:
You can also create links that take you to external web pages. External web pages
are those that belong to someone else and are already online and available to view.
We link to external websites using their URL (web address). External websites are
usually opened in a new window. This is how you do it:
Creating the link:
1. Highlight the text Order Form

2. Click Insert
3. Click Hyperlink
4. Enter the address of the website

into the Address: Box (address
given in task 14 question)
Making the external website open in a new window named _external:
1. Click Target Frame
P a g e | 44
2. In the Target Setting box, type

_external
3. Click OK
4. Click OK again
5. Save HOMEPAGE.HTM
6. Open the web page in Preview Mode and test that the link opens the correct
website and that it opens in a new window:
Hyperlink takes us to
an external website
External website opens

in a new window
New hyperlink
P a g e | 45
Task 15 Attach hyperlinks to images

Create a hyperlink from the image of a tree on HOMEPAGE.HTM. The hyperlink
should direct the user to the following website:
http://www.arborday.org/shop/index.cfm
The website should open in a new window called _external
15.1 Attaching hyperlinks to images How to do it:

Hyperlinks do not need to be text based. You can also attach hyperlinks to images
and these will direct the user to other web pages when the image is clicked. In this
example I am going to use an image to link to an external website.
This is how you do it:
Creating the link:
1. Click the image of a tree that we

inserted into HOMEPAGE.HTM
2. Click Insert
3. Click Hyperlink
4. Enter the address of the website

into the Address: Box (Im just
linking to the same external web
page as in 14.3)
P a g e | 46
Making the external website open in a new window named _external:
1. Click Target Frame
2. In the Target Setting box, type

_external
3. Click OK
4. Click OK again
6. Open the web page in Preview Mode and test that the link opens the correct
website and that it opens in a new window:
Hyperlink takes us to
an external website
External website opens
in a new window
Image based
hyperlink
P a g e | 47
Task 16 Using anchors (aka bookmarks)

Type the text Top of page at the very bottom of HOMEPAGE.HTM
Create an anchor named top which takes the user to the top of the page whenever
the above text is clicked.
16.1 Creating anchors / bookmarks How to do it:
Anchors / bookmarks are special types of hyperlinks that help you navigate around
the same page. They are different from normal hyperlinks because they are not
used to link one web page to another.
For example in this task we are going to use an anchor that will take us from the
bottom of the web page, to the top whenever the text that the anchor is attached to
is clicked.
This is how to do it:
Create the anchor:
1. Open HOMEPAGE.HTM
2. Position your mouse curser at the
top left of the web page
3. Click Insert
4. Click Bookmark
5. Name the anchor top

6. Click OK
7. The anchor will insert itself into the top left of the
web page:
P a g e | 48
Add the text top of page to the web page:
1. Position your curser

underneath the menu table
2. Type the text Top of page
Use a hyperlink to connect the Top of

page text to the anchor:
1. Select the text that you have just added

(top of page)
2. Click Insert
3. Click Hyperlink
4. Click Bookmark
5. Click the bookmark that you named top

6. Click OK
7. Click OK again
P a g e | 49
Preview the web page to check that the anchor is functioning:
2. Open the web page in Preview Mode and click the text Top of page to check
that the anchor is working properly. If everything is correct, the text should be
set as a hyperlink (blue and underlined) and the link should move you to the
top of the page when it is clicked:
P a g e | 50
Task 17 Editing images using Adobe Photoshop
Open the file SPECIMEN5.JPG in a suitable application.

Change the width to 40 pixels and its height to 60 pixels.
Ensure that the colour depth is 256 colours (8 bit colour)
Save the file as SPECIMEN5.GIF.
Open the file SPECIMEN6.JPG in a suitable application.

Crop the plant pot out of the bottom of the image.
Save the file as SPECIMEN6.JPG (replace original file).
The image editor that is used in my school is currently Adobe Photoshop but this
will vary from school to school.
Photoshop can be used to open and edit all the main types of images including:
.JPG
.GIF
.PNG
17.1 Opening images in Photoshop How to do it:

1. Click the Start Button
2. Click All Programs
3. Click Adobe Photoshop 7.0
4. In Photoshop click File Open
5. Browse to the file you wish to open
(Specimen 5.jpg)
6. Click the file and then select Open
P a g e | 51
17.2 Resizing image width and height How to do it:

Open the Image Size menu:
1. Click Image
2. Click Image Size
Resize the image:
1. Uncheck the Constrain

Proportions tick box
2. Enter 40 into the width box
3. Enter 60 into the height box
4. Click OK
NOTE:
We need to uncheck the Constrain Proportions tick box before we enter the new width and
height because this image was required to be distorted when compared to its original size.
If we were required to keep the original dimensions we would have ticked the Constrain
Proportions box.
72
60
73
40
Original Image
Resized Image
P a g e | 52
17.3 Setting image colour depth to 256 colours and saving

the file as SPECIMEN5.GIF How to do it:
Colour depth is the number of colours that each pixel in an image can be:
8 bit colour (used by GIFs) = each pixel can be any of 256 colours
24 bit colour (used by JPGs) = each pixel can be any of 16,800,000 colours
To ensure that our image colour depth is set to 256 colours (8 bit) we simply need
to save the image as a GIF.
This is how you do it using Photoshop:
1. Click File
2. Click Save for Web
3. This will take you to the Export menu
4. Select the file type of GIF
5. Make sure that the number of colours is
set to 256
6. Click Save
7. Point the file to be saved in your
Downloaded Files folder.
8. Make sure the file is named Specimin5.GIF
9. Check the Downloaded Files

folder to make sure that the
image has saved in the correct
place:
P a g e | 53
17.4 Cropping images in Photoshop How to do it:

If you are asked to crop, you will need to remove certain parts of an existing
image and then resave. In this case we are being asked to crop out the plant pot
part of the SPECIMEN6.JPG image.
This is how you crop an image using Photoshop:
Open the image and access the edit pictures
menu:
1. Open SPECIMEN6.JPG in Photoshop

2. Click the Crop option which you can find on
the tools menu bar to the left.
Crop out the correct part of the image:
1. Drag the crop tool around the image

2. Use the crop handles to remove the pot from
the bottom of the image
3. Click the tick button to make
the crop permanent
Save the image with the correct file name and with a file type of .JPEG:
1.
2.
3.
4.
5.
Click File and then Save for Web

Select the .JPEG file type
Name the image SPECIMEN6
Click Save
Overwrite the old version of the image
P a g e | 54
Independent work - Opening an existing web page and editing

Open the file SPECIMEN2.HTM.
Import the image SPECIMEN6.JPG into the right cell of the table.
Resize the image SPECIMEN6.JPG to 250 pixels wide and maintain the aspect
ratio.
Replace the text Candidate name (at the top of the page) with your name,
centre number and candidate number.
Replace the text click here (at the bottom of the page) with the image
SPECIMEN5.GIF.
Make this image a link to open the file HOMEPAGE.HTM in the same window.
Save the file as SPECIMEN2.HTM (replace original file).
Now lets see what you have remembered. You should be able to carry out the
above tasks by yourself. If you run into trouble you can always refer back to the
tasks in this guide that cover the above problems.
After you have completed this task, SPECIMEN2.HTM should look like this:
P a g e | 55
Independent work - Create a second style sheet for use with SPECIMEN2.HTM
Create a second style sheet named style2
Set the following styles:
h1 50% red, sans-serif font, 36 point, centre aligned, bold, underlined

h3 75% blue, serif font, 12 point, left aligned
li 50% blue, sans-serif font, 10 point, bullet points, left aligned
p Full green, sans-serif font, 10 point, left aligned
Save the style sheet with the name suggested above

Attach the style sheet to SPECIMEN2.HTM.
READ ME:
See if you can create and attach this style sheet independently. Notice how the
colours in this task are not as straight forward as red, green, blue etc. You are
sometimes required to use precise shades of colours.
For help with these colours read pages 57 62 below.
SPECIMEN2.HTM should look like this when you have created the style sheet and
attached:
P a g e | 56
RGB Colour Codes

(Web Colours)
What are RGB colour codes?
Web colours are made up of 3 main primary colours. We call these RGB.
Red
Green
Blue
All colours used on web pages are made up of different combinations of RGB. The
code used to create these colours is called hexadecimal and it is broken down as
follows: #RGB
Each primary colour can be assigned 2 digits or letters to determine what level of
that colour to use.
R
0
G
0
B
0
Examples of some of the main RGB Colour Codes

By entering different values into the Red, Green and Blue sections of the
hexadecimal code we can create any colour from 16 million possibilities.
Fortunately you do not need to remember many of these. The RGB colour code
values that you need to understand are as follows:
FF = 100% of the colour (maximum)
C0 = 75% of the colour
80 = 50% of the colour
40 = 25% of the colour
00 = 0% of the colour (none)
P a g e | 57
Examples of pure RGB Colour Codes

Pure colours use 100% (FF)
Pure RED is
FF,00,00
Pure GREEN is 00,FF,00
Pure BLUE is
00,00,FF
Pure BLACK is 00,00,00
Pure WHITE is FF,FF,FF
(100% RED, no GREEN, no BLUE)

(no RED, 100% GREEN, no BLUE)
(no RED, no GREEN, 100% BLUE)
(no RED, no GREEN, no BLUE)
(100% RED, 100% GREEN, 100% BLUE)
R
F
G
F
B
F
Example of Pure RED
Pure red RGB colour code:

FF, 00, 00
Example of Pure GREEN
Pure green RGB colour code:

00, FF, 00
P a g e | 58
Example of Pure BLUE
Pure blue RGB colour code:

00, 00, FF
Examples of darker Colour Codes

Darker colours use 50% (80)
Dark RED is
80,00,00
Dark GREEN is
00,80,00
Dark BLUE is
00,00,80

R
8
G
0
B
0
Example of Dark RED
Dark red RGB colour code:

80, 00, 00
P a g e | 59
Example of Dark GREEN
Dark green RGB colour code:

00, 80, 00
Example of Dark BLUE
Dark blue RGB colour code:

00, 00, 80
And so on.
The other possible shades of RGB colours that you may be asked to create are
summarised below:
75% of the colour (C0)

RED :
C0,00,00
GREEN : 00,C0,00
BLUE : 00,00,C0
25% of the colour (40)

RED :
40,00,00
GREEN : 00,40,00
BLUE : 00,00,40
P a g e | 60
How to set RGB colours for a style sheet or web page:

The following method works for both style sheet colour choices or if you were
altering the colour of text on a normal web page:
On a style sheet:
1. Open or create the style sheet

2. Click Format
3. Click Style
4. Select the tag which requires
the colour change
5. Click Modify
6. Click Font
7. Open the More Colours
window from the colour menu:
On a normal HTML web page:
1. Select the text you wish to

apply the colour to
2. Click Format
3. Click Font
4. Open the More Colours
window from the colour menu
(see screenshot above):
Select the colour you want:
1. Click the colour you want

2. Click OK
P a g e | 61
Example of modifying a colour by manipulating the RGB code:
The RGB colour code in this

example is:
80, FF, 40
This combination gives me a light
green colour
I am going to remove the green
value completely to see what
colour I am left with.
After removing the green value

completely my RGB colour code is
now:
80, 00, 40
This leaves us with a mixture of
RED and BLUE but no GREEN.
This combination has given me a
DARK PURPLE colour:
P a g e | 62
Task 18 Print web pages in both browser view and HTML code view
Print HOMEPAGE.HTM as it is viewed in your browser.
Print a copy of HOMEPAGE.HTM source code.
Use a highlighter pen to show the area of the source code which attaches the first
style sheet to the web page.
Repeat the above tasks for SPECIMEN2.HTM.
Examination questions always require you to print off 2 versions of your web pages:
1. A copy of the web page as it appears in a browser
2. A copy of the HTML source code.
18.1 - Printing web pages as they appear in a browser
How to do it:
1. Open HOMEPAGE.HTM in preview mode
(double click the icon in your folder or press
F12 from within FrontPage.
2. Click File
3. Click Print

5. Click Print
NOTE:
Check that your printout is complete and that
your whole web page can be seen clearly.
P a g e | 63
18.2 - Printing web page HTML code How to do it:
1. Open HOMEPAGE.HTM in FrontPage

2. Click the Code tab
3. Click File
4. Click Print

6. Click OK
P a g e | 64
18.3 - Highlighting sections of HTML source code

How to do it:
Sometimes examination questions ask you to highlight key sections of the HTML
code of your web site.
For example task 18 requires you to highlight the section of HTML code that
attaches the first style sheet to the web page.
This is how you do it:
1. Take a highlighter pen
2. Take the printout of your HTML source code
3. Find the section of the code that attaches the style sheet to the web page (it
will be near the top in the <HEAD> </HEAD> section.
4. Use the highlighter pen to colour in the code.
Section of HTML
code to highlight
NOTE:
To find the style sheet link in the code you should look for the name of your style sheet.
For example my style sheet was called STYLE.CSS.
Repeat steps 18.1 18.2 for SPECIMEN2.HTM..
END OF GUIDE
P a g e | 65

Web Authoring Step by Step Booklet

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Authoring Step by Step Booklet

Uploaded by

Copyright:

Available Formats

Section 15: Web Authoring

Mark Nicholls ICT Lounge

IGCSE ICT SECTION 15

Section 15: Web Authoring

Mark Nicholls ICT Lounge

Section 15: Web Authoring

Mark Nicholls ICT Lounge

Resizing table columns and rows..... Page 28

Section 15: Web Authoring

Mark Nicholls ICT Lounge

What this guide is for

How to open FrontPage

This will open FrontPage. The programs main screen

Section 15: Web Authoring

Mark Nicholls ICT Lounge

The FrontPage Menu Bar

Section 15: Web Authoring

Mark Nicholls ICT Lounge

Task 1 Download files to use within the web pages

1.1 Downloading Files How to do it

1. Open your web authoring past

Renaming the new folder:

1. Replace the text New Folder with a more suitable name

Section 15: Web Authoring

Mark Nicholls ICT Lounge

Download the files:

1. Open your Web Browser (Internet Explorer for example)

3. Right click each of the files

4. Point each file to save in the new folder

6. Check that each file has saved

Section 15: Web Authoring

Mark Nicholls ICT Lounge

Task 2 Create a style sheet

h1 dark blue, sans-serif font, 36 point, centre aligned, bold

2.1 What is a Style sheet?

3. Click the Style Sheet tab

Section 15: Web Authoring

Mark Nicholls ICT Lounge

2.3 Specifying Styles for the Style Sheet How to do it:

1. Check that the style sheet is open.

1. Slect the correct HTML tag from the

Section 15: Web Authoring

Mark Nicholls ICT Lounge

Specify the correct styles to the HTML tag:

Specify the font styles using the Font

Choose a Font style (Bold/Italic)

Specify alignment styles using the Paragraph Window:

Section 15: Web Authoring

Mark Nicholls ICT Lounge

3. Choose the correct Text

Specify alignment styles using the Numbering Window:

3. Choose the type of bullet you want

4. Select the bullet style

Specify alignment styles for the rest of the HTML tags:

Section 15: Web Authoring

Mark Nicholls ICT Lounge

2.2 - View the styles code How to do it:

2.3 Saving the style sheet How to do it:

2. Browse to your web authoring

Section 15: Web Authoring

Mark Nicholls ICT Lounge

6. The style sheet should now be safely

Example of what effect a style sheet has on web pages:

Before the style sheet was attached: