2
You have been supplied with the following source files:
m24banner.png
m24calc.csv
m24distance.csv
m24image.png
m24sbs.css
m24text.txt
m24video.mp4
Task 2 – Image editing and file management
1 Create a new folder called march24
Open the file m24image.png in an editing package.
Reflect (flip) this image horizontally so that the balloon is on the left of the image.
Save this new image in your march24 folder with the file name balloon, in a format suitable for
inclusion in a web page.
Locate only the following files and store them in your march24 folder.
m24banner.png
m24text.txt
m24video.mp4
[3]
[Total: 3]
© UCLES 2024 0417/31/F/M/24
3
Task 3 – Web page
2 Create a web page called sbs.htm and save this in your march24 folder.
This web page must be created using a single table and work in all browsers. The table must fit
90% of the browser window and have a structure as shown in this diagram:
A Width 30% B Width 70%
C Height 10%
D Height 15%
Each table cell is identified with a letter. Some dimensions are shown. Do not set the height of
cells B or E.
Table borders must appear on the final web page.
The cell contents shown in the diagram must not appear on the final web page.
[7]
3 Set the title of the web page to Serengeti Balloon Safaris [1]
4 Place in cell:
● A the image balloon saved in Step 1 so that it fits the width of this cell
● B the image m24banner.png so that it fits the width of this cell
● E a video tag to display m24video.mp4 so that it fits the width of this cell. This video must
show the controls and play automatically when the web page opens. Display an automated
text-based error message if the browser does not support this video type.
[10]
5 Add appropriate alternate text to both still images. [1]
© UCLES 2024 0417/31/F/M/24 [Turn over
4
6 Enter in cell C the text:
This web page was created by: then on a new line enter your name, centre number and
candidate number.
Set this text as style h2.
[3]
7 Place in cell D the text from the file m24text.txt
Set this text as paragraph style.
Set the text Memorable and inspiring as style h1.
[3]
8 Open the stylesheet m24sbs.css in an editor.
Add CSS to this stylesheet so that:
● your name, centre number and candidate number are set as a comment at the start of the
stylesheet
● the table is centre-aligned within the browser window
● all table elements have the space between the borders set to 10 pixels
● all table cells have padding set to 20 pixels
● styles h1 and h2 use the:
– font Cooper Black
– font Impact if Cooper Black is not available
– browser’s default serif font if neither of these fonts are available
● styles h1 and h2 are centre-aligned
● styles h1 and h2 have a font colour with a hexadecimal blue component of 99 and no red or
green components
● style h1 is 18 points high
● style h2 is 14 points high.
Make sure that your stylesheet does not contain HTML or scripting language and is as efficient as
possible.
Save this stylesheet in your march24 folder in cascading stylesheet format as m24sbs_ followed
by your centre number_candidate number, for example m24sbs_ZZ999_9999
Attach this stylesheet to your web page.
[16]
© UCLES 2024 0417/31/F/M/24
5
9 Save your web page.
[1]
[Total: 42]
© UCLES 2024 0417/31/F/M/24 [Turn over
