BG - JPG Contact - HTM Contact - JPG Daisy - JPG Logo - JPG Owg - Css Text - TXT Vista - JPG Wall - JPG Yearend - CSV Task 1 - Evidence Document
BG - JPG Contact - HTM Contact - JPG Daisy - JPG Logo - JPG Owg - Css Text - TXT Vista - JPG Wall - JPG Yearend - CSV Task 1 - Evidence Document
bg.jpg
contact.htm
contact.jpg
daisy.jpg
logo.jpg
owg.css
text.txt
vista.jpg
wall.jpg
yearend.csv
Task 1 – Evidence Document
Create a new word-processed document.
Make sure your name, centre number and candidate number will appear on every page of this document.
Save this Evidence Document in your work area as evidence_ followed by your centre number_
candidate number. For example, evidence_ZZ999_9999
You will need your Evidence Document during the examination to place screenshots when required.
Task 2 – Web Page
You are going to create a web page and stylesheet for Olde Worlde Gardens. The web page and
stylesheet must work in any browser. All colour codes must be in hexadecimal. Make sure that your
stylesheet contains no HTML.
1 Create a new folder called owg
Locate the following files and store them in your owg folder.
bg.jpg
contact.htm
contact.jpg
daisy.jpg
logo.jpg
owg.css
text.txt
vista.jpg
wall.jpg
Display the contents of your owg folder showing the folder name, all file names, extensions, image
dimensions and file sizes. [1]
EVIDENCE 1
Take a screenshot of your owg folder and place this in your Evidence Document. Make
sure that the folder name, all file names, extensions, image dimensions and file sizes are
clearly visible.
2 Create a web page called owg.htm
This web page must work in all browsers and have a table structure as shown in this diagram:
Each table cell is identified with a letter. Only essential dimensions are shown. These are in pixels.
The cell contents shown in the diagram must not appear on your final web page. Cell widths allow
for border spacing which will be set when your stylesheet is attached in step 12.
Table borders must not appear on the final web page.
[12]
3 Set the title of the web page to Olde Worlde Gardens Homepage
[1]
4 Place in cell A the image logo.jpg
Resize this image in the HTML to be 872 pixels wide by 215 pixels high.
[2]
5 Place in cell:
• F the text Flowers
• G the text Landscaping
• H the text Walled gardens
• I the text Contact us
Set this text to style h2.
Place in cells B, C, D and E the most appropriate image from those provided, to match the text
placed in step 5. The aspect ratio of each chosen image must match the placeholder.
Where necessary, in the HTML, make sure that each image is displayed as 200 pixels wide whilst
maintaining the aspect ratio.
[3]
7 Place in cell J the contents of the file text.txt
Set this text to paragraph style.
[2]
8 Enter in cell K the text:
Web page last updated by:
On a new line below this, place your name, centre number and candidate number.
Set all the text in cell K to style h3.
[3]
9 Add appropriate alternate text to all images. [1]
10 Set the name of the default target window to _self [1]
11 Create hyperlinks from the text Contact us and from the image n20contact.jpg to open the web
page contact.htm in a new browser window called _blank [4]
12 Attach the stylesheet owg.css to this web page.
Save your web page.
[1]
13 Open the stylesheet owg.css in a suitable software package. The stylesheet needs to be
updated to add the following specifications:
Set the background for the web page so that it has a colour with a:
• blue component of a4
• red component of ab
• green component of c5
Set the background for the web page so that the image bg.jpg is placed in only the top right
corner of the window.
Set the font for styles h1, h2, h3 and for the paragraph style to select Arial if this font is available,
if not to select Helvetica Neue, if neither of these fonts are available to select the browser’s
default sans-serif font.
Set the paragraph style to 12 point fully justified text.
Add your name, centre number and candidate number as a comment at the start of the stylesheet.
Save this stylesheet in your owg folder.
Take a screenshot of the contents of your stylesheet.
[13]
EVIDENCE 2
Place this screenshot in your Evidence Document. Make sure the filename and all contents
are clearly visible.
Display the web page in your browser. If necessary, resize it so that:
• all the page width can be seen
• all text can be easily read
• the address bar is visible
• the background image is clearly visible.
EVIDENCE 3
Place in your Evidence Document screenshot(s) showing the web page in your browser.
Make sure that both the table and background elements are visible.
Display the HTML source in your editor.
EVIDENCE 4
Take a copy of the HTML source and place this in your Evidence Document.
[Total: 47]