Scribd
Upload
9 views5 pages

Image Editing and Web Page Creation Guide

Uploaded by

khaingtzm2288
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views5 pages

Image Editing and Web Page Creation Guide

Uploaded by

khaingtzm2288
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Task 1 – Image Editing and File Management

1 Create a new folder called j222


Locate the following files and store them in your j222 folder.
[Link]
j31balloon.mp4
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
Open the file [Link] in a graphics package. Edit the image by:
• rotating it 90 degrees clockwise
• reflecting (flipping) it horizontally.
Save this new image in your j222 folder, in .png format, using the file name balloon_ followed
by your candidate number, for example, balloon_9999
Display the contents of your j222 folder showing the folder name, all file names, file extensions,
file sizes, image dimensions and, for the video, the frame height and frame width.
Take a screenshot of this folder making sure that the required information is clearly visible. Place
this screenshot in your Evidence Document.
[4]
EVIDENCE 1
A screenshot of your j222 folder with the required information clearly visible.
[Total: 4]
Task 2 – Web Page
You are going to create a web page for Tawara Balloon Safaris. The web page and stylesheet
must
work in any browser. Make sure that your stylesheet contains no HTML. Make sure your HTML
and stylesheet are as efficient as possible.
2 Create, in your j222 folder, a web page called [Link]
This web page must be created using a single table and must work in all browsers. The table
must
fit 90% of the width and height of the browser window. The table must have a structure as shown
in this diagram:

Each table cell is identified with a letter. Some dimensions are shown. These must be set as
percentage values. Do not set the height of cells A, B, C, E or F.
The cell contents shown in the diagram must not appear on your final web page.
Table borders must appear on the final web page.
[8]
3 Set the title of the web page to Tawara Balloon Safaris [1]
4 Set, in the HTML, the name of the default target window to _new [1]
5 Place in cell:
• A the image [Link]
• B the balloon image saved in step 1
• C a video tag to display j31balloon.mp4 so that it fits the width of this cell. Display an
automated text-based error message if the browser does not support this video type
• E the image [Link]
• F the image [Link]
[9]
6 Place inline style attributes into the HTML so that each image, with its aspect ratio maintained,
fits the width of the table cell.

[1]
7 Add appropriate alternate text to all still images. [1]
8 Place in cell D the text from the file [Link]
Set this text as style h2
[2]
9 Enter in cell G the text:
Click on the images above to enjoy the wonders of Kenya and Tanzania.
Web page last edited by: followed by a space, your name, centre number and candidate number.
Display the text you have entered as two paragraphs.
Set all text in cell G as style h3
[4]
10 Create a hyperlink from the image [Link] to open the web page [Link] [2]
11 Create a hyperlink from the image [Link] to open the web page [Link] in
the browser window that is currently in use. [3]
12 Rename the stylesheet [Link] to j31stylesheet_ followed by your centre number_
candidate number, for example, j31stylesheet_ZZ999_9999
Make sure this stylesheet is still in cascading stylesheet file format.
Attach this stylesheet to your web page.
[2]
A trainee has attempted to create the stylesheet for this website. This file contains a number of
errors and omissions. All colour codes must be displayed in hexadecimal. Your stylesheet must
not contain HTML or scripting language.
13 Open and edit the stylesheet you saved in step 12 to meet the following specifications:

Set the background for the web page so that it has a colour with a:
• blue component of d2
• red component of 74
• green component of ab
Set the font for styles h1, h2 and h3 so that the browser selects and displays the font Times CY.
If this font is not available, the browser selects and displays the font Times New Roman. If
neither of these fonts are available, the browser must display its default serif font. Set the text in
styles h1, h2 and h3 to black.
Set style h1 so the text is centre aligned with a 16-point font.
Set style h2 so the text is fully justified with a 12-point font.
Set style h3 so the text is left aligned with a 10-point font.
Set each table margin individually to 5% of the width and height of the browser window.
Set all table cell padding to 10 pixels.
Set all table borders and gridlines to be:
• visible
• separated
• solid
• black
• 1 pixel wide.
Set the spaces between the borders of all table elements to 10 pixels.
Correct and edit the comment at the start of the stylesheet to contain your name, centre number
and candidate number.
Save this stylesheet in your j2231 folder.
Take a screenshot to show the file name and all contents of your stylesheet and place this in your
Evidence Document. Make sure the file name and all contents are clearly visible.
[27]
EVIDENCE 2
A screenshot of your stylesheet with the required information clearly visible.
14 Save your web page.
Display your web page in a browser. If necessary resize it so that:
• all the page can be seen
• all text can be easily read
• the address bar is visible.
Take screenshot evidence showing your web page in the browser. Place this in your Evidence
Document.
EVIDENCE 3
Screenshot evidence of your web page in the browser with the table contents and background
elements clearly visible.
Take a copy of the HTML source and place this in your Evidence Document.
[1]
EVIDENCE 4
A copy of your HTML source.
[Total: 62]

Common questions

Powered by AI

To ensure efficiency and compatibility, the HTML should only include necessary components without redundancy. The CSS must be free of HTML or scripting languages, and use hexadecimal codes for colors. Ensure code validation against HTML and CSS standards to confirm browser compatibility. Setting font priorities and fallback options in CSS also aids cross-browser usability. In particular, ensure no inline styles in the stylesheet, and that all styles are properly externalized .

Table dimensions should be set as a percentage of the browser window, allowing responsiveness relative to different screen sizes. Cell padding can be consistently set to ensure spacing and readability without altering layout across browsers. For example, use a percentage for table margins (5%) and pixels for padding (10px) to combine fluid design with precise control .

CSS-based styling offers separation of content and design, facilitating cleaner and more maintainable HTML. It enhances loading performance by reducing HTML redundancy and allows global changes through a single stylesheet edit. Implementing CSS efficiently requires avoiding inline styles and ensuring CSS specificity and inheritance are used judiciously to prevent unintended overrides. Keeping CSS DRY (Don't Repeat Yourself) ensures scalability and manageability .

In the stylesheet, first, identify the color components in their hexadecimal format. For a color with a red component of '74', green component of 'ab', and blue component of 'd2', the combined hexadecimal code would be '#74abd2'. This code is then applied in the CSS as the background color property for the webpage. Such precise specification ensures consistent rendering across different browsers and devices .

In cell D, text from 'j31text.txt' must be styled as h2, which includes being fully justified with a 12-point font. For cell G, text styling involves displaying in two paragraphs with all text set as style h3; this includes left alignment with a 10-point font. These conditions ensure stylistic consistency with the overall design .

Before taking a screenshot, ensure that the entire web page is visible and all text is readable. The browser's address bar must be visible, ensuring that the Evidence Document clearly shows the URL and confirms the web page's authenticity. Furthermore, check that all elements such as table content and background are correctly displayed without any rendering issues .

First, open the file 'j31balloon.jpg' in a graphics package. Rotate the image 90 degrees clockwise and reflect it horizontally. Save the edited image in the 'j222' folder in '.png' format with the filename 'balloon_' followed by your candidate number, such as 'balloon_9999'. These instructions follow the requirements to both modify and correctly rename and save the file as outlined in the task .

To create a hyperlink from an image, wrap the image element with an anchor tag '<a>'. Specify the 'href' attribute for the target URL. Use 'target="_blank"' for links opening in a new tab or window, which might be used for external links to avoid navigating away from the page. Without the 'target' attribute or setting it to '_self', links will open in the same tab aiding seamless browsing within the web application .

Alternative text should describe the content and function of images succinctly, enabling screen readers to convey this information to visually impaired users. This not only aids accessibility but also improves SEO. For each image in the web page, include the 'alt' attribute with an appropriate descriptive text matching the image's context or purpose .

The stylesheet needs editing to include your name, centre number, and candidate number in the comment at the start. Adjustments to the font settings for styles h1, h2, and h3 for specific fallback sequences (Times CY, Times New Roman, default serif). Additionally, set dimensions for table margins as 5% of the browser window and ensure all table elements have visible, separated, and specified black 1px wide gridlines .

You might also like