Pay special attention to the catch points!
In this particular paper the web page question focused on CSS with only one or two actual changes to the HTML document provided.
In this walkthough:
Required knowledge:
Question 19
- Create a new text file & name it as per the instructions – it will be something like j2232css_zz9999_9999.css
- Open the file in your editor
- Open the webpage j2232twt.htm your editor as well as your browser
- Link your CSS to your HTML:
<link rel="stylesheet" href="j2232css_zz9999_9999.css">- Add the required comment to the CSS:
/* Mister Fox zz9999 9999 */
- Create a rule for h1, h2 & h3 as follows (you must list the selectors, not create separate rules for each heading level):
h1, h2, h3 {
font-family: "Casion Pro Bold", "Times New Roman", serif;
}There is an error (deliberate?) in the above code in that there is no such font as Casion Pro Bold. There is a font called Caslon Pro Bold. This is specifically to text that you understand that the font will fall back to the next font listed, i.e. Times New Roman.
- Create separate rules for h1, h2 & h3 as follows:
h1 {
color: #ff0000;
text-align: center;
font-size: 30pt;
}
h2 {
color: #000000;
text-align: justify;
font-size: 18pt;
}
h3 {
color: #000000;
text-align: left;
font-size: 14pt;
}- The table borders must not be visible
- The table margins must be set
- The table cell padding must be set
- The web page must be styled with a background-color and background-image
The RGB values are not listed in the logical order!
Question 20
- As mentioned in point 4 above, I recommend linking the CSS to your HTML right at the start so that you can test your CSS as you go.
<link rel="stylesheet" href="j2232css_zz9999_9999.css">Question 21
- Add the text Tawara Wildlife Trust between
<title>tags, nested between the<head> tags:
<title>Tawara Wildlife Trust</title>Question 22
- Copy all of your HTML code and paste it in your Evidence Document under EVIDENCE 3.
- Take a screenshot of your entire web-page window and paste it in under EVIDENCE 4.
Final CSS
Below is the final CSS code solution:
/* Mister Fox zz9999 9999 */
body {
background-image: url("j2232logo.png");
background-size: 200px 150px;
background-repeat: no-repeat;
background-position: fixed;
background-position: top right;
background-color: #da9f25;
}
h1, h2, h3 {
font-family: "Casion Pro Bold", "Times New Roman", serif;
}
h1 {
color: #ff0000;
text-align: center;
font-size: 30pt;
}
h2 {
color: #000000;
text-align: justify;
font-size: 18pt;
}
h3 {
color: #000000;
text-align: left;
font-size: 14pt;
}
table {
margin: 5% 25% 5% 5%;
}
td {
padding: 10px;
}
- Some notes:
- setting the color for
h2&h3is unnecessary as the default color is#000000(black) - setting text-align on
h3is unnecessary as the default alignment isleft - explicitly setting the
ptandpxunits is unnecessary as they are the default units
- setting the color for
Final HTML
The only changes to your HTML file are highlighted in the final code below:
<!DOCTYPE html>
<html>
<head>
<title>Tawara Wildlife Trust</title>
<link rel="stylesheet" href="j2232css_zz9999_9999.css">
</head>
<body>
<table style="width:70%;">
<tr>
<td colspan="3" style="width:70%;"><h1>Tawara Wildlife Trust</h1></td>
<td rowspan="4" style="width:30%;"><img src="j2232img1.jpg" alt="Image of a cheetah" width="100%"></td>
</tr>
<tr>
<td colspan="3" style="width:70%"><h2>The Tawara Wildlife Trust runs projects across 6 continents. We endeavour to try and save many endangered species from extinction. You can join us in this by donating to our charitable efforts. Get your children 'on-board' with our special packs to raise their awareness of the plight of the animals.
<br>Use the links below to help with our projects. Your donations can make all the difference.</h2></td>
<tr>
<td style="width:23%"><h2>Our projects</h2></td>
<td style="width:24%"><h2>Children's projects</h2></td>
<td style="width:23%"><h2>Donate</h2></td>
</tr>
<tr>
<td colspan="3"><h1>Page under construction</h1></td>
</tr>
</table>
</body>
</html>