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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 program’s main screen
can be seen below:
Page |4
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 browser’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 (don’t 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
2.2 - View the style’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
6. Click the style sheet
7. Click OK
8. Click OK again
P a g e | 18
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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…
4. Click the style sheet
5. Click remove
6. Click OK
P a g e | 19
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
2. This will take us to the web
page’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
Your web page should look like this now:
P a g e | 31
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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>
Section 15: Web Authoring
Examples of the effects
of HTML tags:
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
P a g e | 37
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
Task 13 – Open an existing web page and use it’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 table’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
4. At this stage your web page should look like this:
P a g e | 41
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 (I’m just
linking to the same external web
page as in 14.3)
P a g e | 46
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
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
Image based
hyperlink
P a g e | 47
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
Preview the web page to check that the anchor is functioning:
1. Save HOMEPAGE.HTM
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 it’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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 let’s 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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
0
B
0
0
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
F
B
F
Example of Pure RED
Pure red RGB colour code:
FF, 00, 00
(100% RED, no GREEN, no BLUE)
Example of Pure GREEN
Pure green RGB colour code:
00, FF, 00
(no RED, 100% GREEN, no BLUE)
P a g e | 58
F
F
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
Example of Pure BLUE
Pure blue RGB colour code:
00, 00, FF
(no RED, no GREEN, 100% BLUE)
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
(50% RED, no GREEN, no BLUE)
(no RED, 50% GREEN, no BLUE)
(no RED, no GREEN, 50% BLUE)
R
8
G
0
8
B
0
Example of Dark RED
Dark red RGB colour code:
80, 00, 00
(50% RED, no GREEN, no BLUE)
P a g e | 59
8
0
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
Example of Dark GREEN
Dark green RGB colour code:
00, 80, 00
(no RED, 50% GREEN, no BLUE)
Example of Dark BLUE
Dark blue RGB colour code:
00, 00, 80
(no RED, no GREEN, 50% BLUE)
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
4. Select the correct printer
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
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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
5. Select the correct printer
6. Click OK
P a g e | 64
Section 15: Web Authoring
Mark Nicholls – ICT Lounge
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