Web Authoring Step by Step Booklet

Section 15: Web Authoring Mark Nicholls ICT Lounge

P a g e | 1

IGCSE ICT SECTION 15

WEB AUTHORING

FRONTPAGE

STEP BY STEP GUIDE

Mark Nicholls

ICT lounge


P a g e | 2

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 tags to the HTML code.. Page 21

Checking that the tag is communicating with the Style Sheet... Page 22

Adding the heading 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


P a g e | 3

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


P a g e | 4

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:


P a g e | 5

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:

New Page

Save As

Preview in Browser

File:

Pictures

Hyperlinks

Insert:

Font Styles / Sizes / Colours

Background Colours

Style Sheets

Format:

Insert a new Table

Edit existing Table

Table:


P a g e | 6

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)


P a g e | 7

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


P a g e | 8

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


P a g e | 9

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


P a g e | 10

Specify the correct styles to the HTML tag:

1. Click Format

2. From the menu select what you would

like to change

Specify the font styles using the Font

Window:

1. Choose a Font

2. Choose a Font style (Bold/Italic) 3. Choose a Size 4. Choose a Colour 5. Click OK

Specify alignment styles using the Paragraph Window:

1. Click Format 2. Select Paragraph

Comic sans = sans-serif font Times New Roman = serif font

Font --- for font, colour, bold, italics, size Paragraph --- for align left/right/centre Numbering --- for numbers and bullets


P a g e | 11

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

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.

Plain Bullets or Numbered Bullets

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 | 12

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 | 13

6. The style sheet should now be safely in your past paper folder

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:

NOTE: We will attach this style sheet to a web page later.


P a g e | 14

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 | 15

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 | 16

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 | 17

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 | 18

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 | 19

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 | 20

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 | 21

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 (paragraph) tags.

1. Position your curser to the left

of the text

2. Type in

3. FrontPage will automatically assume you also want the closing tag .

4. Move the closing tag to

the end of the text


P a g e | 22

Checking that the style sheet has applied the correct formatting:

Now that we have surrounded the line of text with the 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 | 23

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 | 24

Setting the text to style h1:

1. Position your curser to the left

of the text

2. Type in

3. FrontPage will automatically assume you also want the closing tag .

4. Move the closing tag 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 | 25

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 | 26

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 | 27

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 | 28

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 | 29

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 | 30

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

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

Image in correct

proportions

Image

distorted

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 | 31

Your web page should look like this now:


P a g e | 32

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 | 33

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 | 34

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 tag and the 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 Meaning Example Heading 1 (large heading) Text

Heading 2 (sub heading) Text

Heading 3 (small sub heading) Text

List (like bullet lists) Text Paragraph Text

Line break (move text to next line) Text

Bold Text Italic Text


P a g e | 35

Examples of the effects Examples of the HTML tag coding:

of HTML tags:

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

2. Access the web page HTML code by

clicking the Code tab

3. Surround the line of text with the tags

4. Click design to check that the tag has set

this line of text to style h2:


P a g e | 36

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:

SCREENSHOT OF HTML TAG CODING ON NEXT PAGE:

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.

Correct styles applied to the text on

the HOMEPAGE.htm file.


P a g e | 37


P a g e | 38

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 | 39

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 | 40

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

2. Access the web page HTML code by clicking

the Code tab

3. Surround the text with the tags


P a g e | 41

4. At this stage your web page should look like this:


P a g e | 42

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 | 43

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 | 44

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 | 45

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:

New hyperlink

Hyperlink takes us to

an external website

External website opens

in a new window


P a g e | 46

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 | 47

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:

Image based

hyperlink

Hyperlink takes us to

an external website

External website opens

in a new window


P a g e | 48

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 | 49

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 | 50

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 | 51

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 | 52

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.

73

Original Image Resized Image

72

40

60


P a g e | 53

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 | 54

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. Click File and then Save for Web

2. Select the .JPEG file type

3. Name the image SPECIMEN6

4. Click Save

5. Overwrite the old version of the image


P a g e | 55

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 | 56

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 | 57

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 G B

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)

0 0 0 0 0 0


P a g e | 58

Examples of pure RGB Colour Codes

Pure colours use 100% (FF)

Pure RED is FF,00,00 (100% RED, no GREEN, no BLUE)

Pure GREEN is 00,FF,00 (no RED, 100% GREEN, no BLUE)

Pure BLUE is 00,00,FF (no RED, no GREEN, 100% BLUE)

Pure BLACK is 00,00,00 (no RED, no GREEN, no BLUE)

Pure WHITE is FF,FF,FF (100% RED, 100% GREEN, 100% BLUE)

R G B

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)

F F F F F F


P a g e | 59

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 (50% RED, no GREEN, no BLUE)

Dark GREEN is 00,80,00 (no RED, 50% GREEN, no BLUE)

Dark BLUE is 00,00,80 (no RED, no GREEN, 50% BLUE)

R G B

Example of Dark RED

Dark red RGB colour code:

80, 00, 00

(50% RED, no GREEN, no BLUE)

8 0 8 0 8 0


P a g e | 60

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) 25% of the colour (40) RED : C0,00,00 GREEN : 00,C0,00 BLUE : 00,00,C0

RED : 40,00,00 GREEN : 00,40,00 BLUE : 00,00,40


P a g e | 61

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 | 62

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 | 63

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 | 64

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 | 65

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 section.

4. Use the highlighter pen to colour in the code.

Repeat steps 18.1 18.2 for SPECIMEN2.HTM..

END OF GUIDE

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.

Section of HTML

code to highlight

Web Authoring Step by Step Booklet

Documents

Transcript of Web Authoring Step by Step Booklet