Section 15: Web Authoring Mark Nicholls – ICT Lounge
IGCSE ICT – SECTION 15 WEB AUTHORING
FRONTPAGE STEP BY STEP GUIDE
Mark Nicholls
ICT lounge
P a g e | 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
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 | 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
P a g e | 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:
P a g e | 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: Format: New Page Font Styles / Sizes / Colours Save As Background Colours
Preview in Browser Style Sheets
Insert: Table: Pictures Insert a new Table Hyperlinks Edit existing Table
P a g e | 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’)
P a g e | 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
P a g e | 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
P a g e | 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
P a g e | 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. 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
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 (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 textP 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 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…
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 | 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. Image in correct proportions Maintaining Aspect Ratio Resizing the image whilst keeping the correct dimensions
Image Not Maintaining Aspect Ratio distorted 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
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
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
Line break (move text to next line) Text
Bold Text Italic Text
P a g e | 34 Section 15: Web Authoring Mark Nicholls – ICT Lounge
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 | 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
2. Access the web page HTML code by clicking the ‘Code’ tab 3. Surround the text with the
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 Image based in a new window 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. 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 | 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 G B 0 0 0 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 (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
F F F F F 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 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 (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
8 0 8 0 8 0
Example of Dark RED
Dark red RGB colour code:
80, 00, 00
(50% RED, no GREEN, no BLUE)
P a g e | 59 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) 25% of the colour – (40) RED : C0,00,00 RED : 40,00,00 GREEN : 00,C0,00 GREEN : 00,40,00 BLUE : 00,00,C0 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
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