Scribd
Upload
16 views

Answer files for Chapter 21

The document contains sample answers for various activities related to HTML and CSS, focusing on enhancing text with superscript and subscript, creating tables with specific attributes, and applying styles. Each activity includes browser view and markup printout sections, detailing requirements such as visibility, table structure, and styling elements. The activities are attributed to Graham Brown and emphasize correct formatting and presentation in web design.

Uploaded by

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

Answer files for Chapter 21

The document contains sample answers for various activities related to HTML and CSS, focusing on enhancing text with superscript and subscript, creating tables with specific attributes, and applying styles. Each activity includes browser view and markup printout sections, detailing requirements such as visibility, table structure, and styling elements. The activities are attributed to Graham Brown and emphasize correct formatting and presentation in web design.

Uploaded by

AbuobiedaBallaAbusharib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

Answer files for Chapter 21

Sample Answers Activity21a.docx

Browser view printout


Enhancing Text in style h1 1 mark
Superscript on 2 in 10 metres2 1 mark
Superscript on 3 in 500cm3 1 mark
Subscript on 2 in CO2 1 mark
Sample Answers Activity21a.docx

<!DOCTYPE html>
<html>
<head>
<title>Activity 21a</title>
</head>
<body>
<p>Superscript and subscript in a web page by
Graham Brown</p>
<h1>Enhancing Text</h1>
<p>Text can be enhanced in many ways, it can be
made italic, it can be emboldened and it can be
underlined. Although it is possible to underline this
text, it is not often used as this is usually used to
show a Hyperlink. We will study these later when we
apply CSS styles to our web page.</p>
<p>Different styles can be applied to webpages
and individual characters can be enhanced with
superscript and subscript. Superscript can be used
for area or volume, for example: 10
metres<sup>2</sup> or 500 cm<sup>3</sup>. Subscript
can be used with chemical formulae, for example: the
chemical formula for Carbon dioxide is
CO<sub>2</sub>. Other style elements are set using
the styles h1 to h6, paragraph style and list
style.</p>
</body>
</html> Markup printout
Name placed in correct place 1 mark
Style h1 applied to heading rather than h4 1 mark
Superscript on 2 in 10 metres2 1 mark
Superscript on 3 in 500cm3 1 mark
Subscript on 2 in CO2 1 mark
Sample Answers Activity21b.docx

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
9 by 2 table 1 mark
Rows 1 set as heading 1 mark
Sample Answers Activity21b.docx

Markup printout
<!DOCTYPE html> Student’s name 1 mark
<html>
<!-- Activity 21b - Graham Brown -->
<head>
Table with border attribute 1 1 mark
<title>Activity 21b</title> Caption – Hours of sunshine 1 mark
</head>
<body>
<h2> Activity 21b by Graham Brown </h2>
<table border="1">
<caption>Hours of sunshine</caption>
<thead> Table header defined 1 mark
<tr> Day and Hours cells in header 1 mark
<th>Day</th>
<th>Hours</th>
</tr> Table footer defined 1 mark
</thead> Weekly total and 40 in footer 1 mark
<tfoot>
<tr>
<td>Weekly total</td>
<td>40</td> Table body defined 1 mark
</tr> 7 rows in body section (days of week) 1 mark
</tfoot>
<tbody>
<tr>
<td>Monday</td>
<td>6</td>
</tr>
<tr>
<td>Tuesday</td>
<td>4.5</td>
</tr>
<tr>
<td>Wednesday</td>
<td>8</td>
</tr>
<tr>
<td>Thursday</td>
<td>7</td>
</tr>
<tr>
<td>Friday</td>
<td>3.5</td>
</tr>
<tr>
<td>Saturday</td>
<td>5</td>
</tr>
<tr>
<td>Sunday</td>
<td>6</td>
</tr>
Sample Answers Activity21b.docx

</tbody>
</table>
</body>
</html>
Sample Answers Activity21c.docx

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
6 by 2 table 1 mark
Rows 1 set as heading 1 mark
Sample Answers Activity21c.docx

Markup printout
<!DOCTYPE html> Student’s name 1 mark
<html>
<!-- Activity 21c by your name -->
<head>
<title>Activity 21c</title>
</head>
<body>
<h2> Activity 21c by Graham Brown </h2>
Table with border attribute 1 1 mark
Embedded CSS style attribute used 1 mark
Width set to 70% of window 1 mark
Table centre aligned in window 1 mark

<table border="1" style="width:70%; margin-left:auto;


margin-right:auto;"> Caption – SupaHols visitors 2016 1 mark
SupaHols emboldened 1 mark

<caption><b>SupaHols</b> visitors 2016</caption>


Table header defined 1 mark
Country & Visitors cells in header 1 mark
<thead>
Table row height 60px 1 mark

<tr style="height:60px">

Left column 100px wide (Can be in any left cell) 1 mark

<th style="width:100px">Country</th>
<th>Visitors</th>
</tr> Table footer defined 1 mark
</thead> Total visitors and 3000 in footer 1 mark
<tfoot> First footer cell centre aligned 1 mark
<tr>
<td style="text-align:center">Total visitors</td>
<td style="text-align:right">3000</td>
</tr>
</tfoot> Table body defined 1 mark
4 rows in body section 1 mark
<tbody>
<tr>

<td style="text-align:center">Egypt</td>
<td style="text-align:right">440</td>
</tr>
<tr> Correct Country names 1 mark
Correct visitor numbers 1 mark
Country names centre aligned 1 mark
Visitor numbers right aligned 1 mark

<td style="text-align:center">India</td>
<td style="text-align:right">2000</td>
</tr>
<tr>
Sample Answers Activity21c.docx

<td style="text-align:center">Jamaica</td>
<td style="text-align:right">140</td>
</tr>
<tr>
<td style="text-align:center">United Arab
Emirates</td>
<td style="text-align:right">420</td>
</tr>
</tbody>
</table>
</body>
</html>
Sample Answers Activity21d.docx

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
Single solid gridlines and external border 1 mark
Sample Answers Activity21d.docx

Markup printout
Student’s name 1 mark
<html>
<!-- Activity 21d by Graham Brown -->
<head>
<title>Activity 21d</title>
</head>
<body>
<h2> Activity 21d by Graham Brown </h2>
Table with border – collapse: collapse; 1 mark
Border set to "1" 1 mark
Border as embedded CSS including colon 1 mark
set to solid 1 mark
Space then 6px as values for border property 1 mark

<table border="1" style="width:70%; margin-left:auto;


margin-right:auto; border-collapse:collapse; border:solid
6px;" >
<caption><b>SupaHols</b> visitors 2016</caption>
<thead>
<tr style="height:60px">
2cells
<th with attribute style=”border: 1 mark
Border as embedded CSS including colon 1 mark
set to solid 1 mark
Space then 4px” 1 mark

<th style="border:solid 4px; width:100px">Country</th>


<th style="border:solid 4px;">Visitors</th>
</tr>
</thead> In footer – 2 cells
<tfoot> <td with attribute style=”border: 1 mark
set to solid 1 mark
<tr>
Space then 4px” 1 mark
<td style="border:solid 4px; text-align:center">Total
visitors</td>
<td style="border:solid 4px; text-
align:right">3000</td>
</tr>
In table body -8 cells
</tfoot> <td with attribute style=”border: 1 mark
<tbody> set to solid 1 mark
<tr> Space then 2px” 1 mark

<td style="border:solid 2px; text-align:center">Egypt


</td>
<td style="border:solid 2px; text-align:right">440
</td>
</tr>
<tr>
<td style="border:solid 2px; text-align:center">India
</td>
<td style="border:solid 2px; text-align:right">2000
Sample Answers Activity21d.docx

</td>
</tr>
<tr>
<td style="border:solid 2px; text-
align:center">Jamaica
</td>
<td style="border:solid 2px; text-align:right">140
</td>
</tr>
<tr>
<td style="border:solid 2px; text-align:center">United
Arab Emirates
</td>
<td style="border:solid 2px; text-align:right">420
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sample Answers Activity21e.docx

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
Single solid gridlines and external border 1 mark
Table border 6px 1 mark
Table header border 6px 1 mark
All table data borders 3px 1 mark
All data entered with 100% accuracy 1 mark
Student names left aligned 1 mark
Test scores right aligned 1 mark
Right column 50% of table width 1 mark
Right column centre aligned 1 mark
Sample Answers Activity21e.docx

Markup printout
<!DOCTYPE html> Student’s name 1 mark
<html>
<!-- Activity 21e by Graham Brown -->
<head>
<title>Activity 21e</title>
</head>
<body>
<h2> Activity 21e by Graham Brown </h2>

Table with border – collapse: collapse; 1 mark


Border="1" 1 mark
Border as embedded CSS including colon 1 mark
set to solid 1 mark
Space then 6px as values for border property 1 mark

<table border="1" style="width:80%; margin-left:auto;


margin-right:auto; border-collapse:collapse; border:solid
6px;" >
<thead> <th with attribute style=”border: 1 mark
<tr style="height:60px"> Border as embedded CSS including colon 1 mark
set to solid 1 mark
Space then 6px” 1 mark

<th colspan="3" style="border:solid 6px;">Class 11A


Exam Results</th>
</tr> All <td> tags in tbody section
</thead> with attribute style=”border: 1 mark
<tbody> set to solid 1 mark
<tr> Space then 3px” 1 mark

<td style="border:solid 3px; text-align:left">Amir


</td>
<td style="border:solid 3px; text-align:right">96</td>
<td rowspan="4" style="border:solid 3px; text-
align:center; width:50%;"><p>Students who have performed
extremely well.</p></td>
</tr>
<tr>
<td style="border:solid 3px; text-align:left">Belle
</td>
<td style="border:solid 3px; text-align:right">96</td>
</tr>
<tr>
<td style="border:solid 3px; text-align:left">Cai</td>
<td style="border:solid 3px; text-align:right">94</td>
</tr>
<tr>
<td style="border:solid 3px; text-align:left">Denise
</td>
<td style="border:solid 3px; text-align:right">92</td>
</tr>
<tr>
<td style="border:solid 3px; text-align:left">Eric
Sample Answers Activity21e.docx

</td>
<td style="border:solid 3px; text-align:right">66</td>
<td rowspan="2" style="border:solid 3px; text-
align:center; width:50%;"><p>Must do better.</p></td>
</tr>
<tr>
<td style="border:solid 3px; text-align:left">Fiona
</td>
<td style="border:solid 3px; text-align:right">23</td>
</tr>
</tbody>
</table>
</body>
Sample Answers Activity21f.docx

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
Sample Answers Activity21f.docx

Markup printout
<!DOCTYPE html> Student’s name 1 mark
<html>
<!-- Activity 21f - Graham Brown -->
<head>
<title>Activity 21f</title>
</head>
<body>
<h2> Activity 21f by Graham Brown </h2>
Table with border attribute 1 1 mark
Border NOT collapsed 1 mark
Border-spacing:20px 1 mark

<table border="1" style="border-collapse:separate; border-


spacing:20px">
<caption>Hours of sunshine</caption>
<thead>
All <th> and <td> tags 1 mark
<tr> Style=”padding: 1 mark
8px (top) 1 mark
16px (right) 1 mark
12px (bottom) 1 mark
20px (left) 1 mark

<th style="padding:8px 16px 12px 20px;">Day</th>


<th style="padding:8px 16px 12px 20px;">Hours</th>
</tr>
</thead>
<tfoot>
<tr>
<td style="padding:8px 16px 12px 20px;">Weekly
total</td>
<td style="padding:8px 16px 12px 20px;">40</td>
</tr>
</tfoot>
<tbody>
<tr>
<td style="padding:8px 16px 12px 20px;">Monday</td>
<td style="padding:8px 16px 12px 20px;">6</td>
</tr>
<tr>
<td style="padding:8px 16px 12px 20px;">Tuesday</td>
<td style="padding:8px 16px 12px 20px;">4.5</td>
</tr>
<tr>
<td style="padding:8px 16px 12px 20px;">Wednesday</td>
<td style="padding:8px 16px 12px 20px;">8</td>
</tr>
<tr>
Sample Answers Activity21f.docx

<td style="padding:8px 16px 12px 20px;">Thursday</td>


<td style="padding:8px 16px 12px 20px;">7</td>
</tr>
<tr>
<td style="padding:8px 16px 12px 20px;">Friday</td>
<td style="padding:8px 16px 12px 20px;">3.5</td>
</tr>
<tr>
<td style="padding:8px 16px 12px 20px;">Saturday</td>
<td style="padding:8px 16px 12px 20px;">5</td>
</tr>
<tr>
<td style="padding:8px 16px 12px 20px;">Sunday</td>
<td style="padding:8px 16px 12px 20px;">6</td>
</tr>
</tbody>
</table>
</body>
</html>
Sample Answers Activity21g.docx

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
5 by 5 table 1 mark
Rows 1 and 2 merged in column 1 1 mark
Columns 2-5 merged in row 1 1 mark
Column 1 set as headings 1 mark
Rows 1 and 2 set as headings 1 mark
Sample Answers Activity21g.docx
Markup printout
<!DOCTYPE html> Student’s name 1 mark

<!-- Activity 21g by Graham Brown -->


<html>
<head>
<title>Activity 21g by Graham Brown</title>
</head> Table with border attribute 1 1 mark
<body> Border collapsed 1 mark
Caption – Last week 1 mark

<h2> Activity 21g by Graham Brown </h2>


<table border="1" style="border-collapse:collapse;
border:solid 1px;">
<caption>Last week</caption>
<thead> Merged cells, - rowspan=”2”
<tr>
<td rowspan="2"><img src="PTCT.JPG" alt="PTCT Company
Logo"></td>
Image
Correct file 1 mark
Appropriate alternative text used 1 mark

<th colspan="4">Expenses</th>
</tr>
<tr>
<th>Anne</th>
<th>Dan</th> Merged cells, - colspan=”4”
<th>Lisa</th>
<th>Udoka</th>
</tr>
</thead>
<tbody>
<tr style="text-align:right;">
<th>Petrol</th>
<td>$182.20</td>
<td>$185.75</td>
<td>$260.00</td>
<td>$322.00</td>
</tr>
<tr style="text-align:right;">
<th>Food</th>
<td>$80.00</td>
<td>$62.40</td>
<td>$54.00</td>
<td>$40.00</td>
</tr>
Sample Answers Activity21g.docx

<tr style="text-align:right;">
<th>Hotel</th>
<td>$420.00</td>
<td>$382.10</td>
<td>$104.50</td>
<td>$260.00</td>
</tr>
</tbody>
</table>
</body>
</html>
Activity 21h
Activity 21h

Browser view printout – Unordered list


Browser view printout – Unordered
Shows nested lists list 2 marks
Sub-lists changed
Usestosub-bullets
ordered lists (1 mark / list) 1 mark
Lists both unordered 3 marks 2 marks
Student’s name present 1 mark
First list contains Skiing, Tobogganing and Snowboarding
1 mark
100% accurate data entry 1 mark
Sub-lists contain any number of relevant items
(be generous) 1 mark
Activity 21h

<html>
<!-- Activity 21h by Graham Brown -->
<head>
</head>
<body>
<h1>Winter sports</h1>
<p>This website gives you information on some aspects of
winter sports. Here

is a list of winter sports and the clothes that you need to


wear for them.</p>
<ul>
<li>Skiing</li>
<ul>
<li>Jacket</li>
<li>Salopettes</li>
<li>Hat</li>
<li>Gloves</li>
<li>Goggles</li>
<li>Ski boots</li>
</ul>
<li>Tobogganing</li>
<ul>
<li>Jacket</li>
<li>Salopettes</li>
<li>Hat</li>
<li>Gloves</li>
<li>Goggles</li>
</ul>
<li>Snowboarding</li>
<ul>
<li>Jacket</li>
<li>Salopettes</li>
<li>Hat</li>
<li>Gloves</li>
<li>Snowboard boots</li>
</ul>
</ul>
<p> Webpage by Graham Brown</p>
</body>
</html>
>

Markup printout
Use of UL for lists (1 mark per list) 4 marks
Activity 21h
Activity 21h

Browser view printout – Unordered


Browser view printoutlist– Unordered list
Sub-lists changed Shows
to ordered
nestedlists
lists(1 mark / list) 2 marks
Uses sub-bullets 3 marks 1 mark
Lists both unordered 2 marks
Student’s name present 1 mark
First list contains Skiing, Tobogganing and Snowboarding
1 mark
100% accurate data entry 1 mark
Sub-lists contain any number of relevant items
(be generous) 1 mark
Activity 21h

<html>
<!-- Activity 21h by Graham Brown -->
<head>
</head>
<body>
<h1>Winter sports</h1>
<p>This website gives you information on some aspects of
winter sports. Here
is a list of winter sports and the clothes that you need to
wear for them.</p>
<ul>
<li>Skiing</li>
<ol>
<li>Jacket</li>
<li>Salopettes</li>
<li>Hat</li>
<li>Gloves</li>
<li>Goggles</li>
<li>Ski boots</li>
</ol>
<li>Tobogganing</li>
<ol>
<li>Jacket</li>
<li>Salopettes</li>
<li>Hat</li>
<li>Gloves</li>
<li>Goggles</li>
</ol>
<li>Snowboarding</li>
<ol>
<li>Jacket</li>
<li>Salopettes</li>
<li>Hat</li>
<li>Gloves</li>
<li>Snowboard boots</li>
</ol>
</ul>
<p> Webpage by Graham Brown</p>
</body>
</html> Markup printout
Use of OL for sub-lists (1 mark per list) 3 marks
Activity 21i

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
Evidence that all 6 hyperlinks visible on page 1 mark

Page 1 of 6
Activity 21i
Markup printout
<!DOCTYPE html> YOUR NAME replaced by student’s name
1 mark
<html>
<!-- Activity 21i by Graham Brown -->
<head>
<title>Activity 21i</title>
<style>
h1 { color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 30pt;
text-align: center }

h2 { color: #800000;
font-family: Arial,Helvetica,sans-serif;
font-size: 20pt;
text-align: left }

h3 { color: #000000;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
text-align: justify;
margin-left: 40px;
margin-right: 40px }

p { color: #663300;
font-family: Arial,Helvetica,sans-serif;
font-size: 14pt;
text-align: justify;
margin-left: 20px;
margin-right: 20px }

body { background-color: #ADD8E6}


</style> Div correct name and position 1 mark
</head>
<body>
<div id="top"></div>
YOUR NAME replaced by student’s name 1 mark

<h1>Hints and tips for HTML</h1><hr>


<h3>Last edited by Graham Brown </h3>
<h2>This page offers some hints and tips for using html</h2>
<h3>Click on the hyperlinks below to take you to the correct
section of this webpage.</h3>
<p><a href="#website">What is a website?</a></p>
<p><a href="#html">What is html?</a></p>
<p><a href="#create">How do I create a webpage?</a></p>
<p><a href="#terms">Make sure that you use the correct
terms</a></p>
<p><a href="#hex">What is hexadecimal?</a></p>
<p><a href="#links">Useful hyperlinks</a></p>
<hr>
For all six references correct hyperlink references
(Names of references will vary from these examples)
(Check they match the anchor names) 6 marks
End anchor in correct place so all text is the hyperlink
6 marks

Page 2 of 6
Activity 21i

<h2><div id="website"></div>What is a website?</h2>


<p>A website is a collection of individual but related webpages
that are usually stored together and hosted
Div name by place
in correct a web server. These1 mark
can be programmed or created using Appropriate
different languages
div name including 1 mark
HTML, <i>Sun Microsystems Java</i> and <i>Microsoft ASP</i>. Each
webpage can include a variety of different objects such as text,
sound, as well as still and moving images. You are going to develop
your webpages in HTML.</p>
<hr>
<h2><div id="html"></div>What is html?</h2>
<p>HTML is an abbreviation for <b>H</b>yper<b>T</b>ext
<b>M</b>arkup <b>L</b>anguage. It is a text based language used to
develop websites, and is often used within an intranet or the
Div name in correct place 1 mark
Internet. Files are written in HTML using a simple text editor or
Appropriate div name 1 mark
web authoring package like <i>Macromedia Dreamweaver</i> or
<i>Microsoft FrontPage</i>. Files are written in text format and are
usually saved with an .htm file extension. These are file formats
that are recognised as webpages by web browsers like <i>Internet
Explorer</i> or <i>Mozilla Firefox</i>. You are going to develop
your webpages using a simple text editor.</p>
<hr>
<h2><div id="create"></div>How do I create a webpage?</h2>
<p>There are two ways of creating a webpage using html. The
first method involves creating the markup language in a text editor,
which is the method demonstrated in this textbook. The second method
Div name in correct place
involves 1 mark
using a WYSIWYG package. In this type of package an
Appropriate div name
interface is used so that you 1 mark
do not usually see the html code, but
actions that you take within the package create the html markup for
you. Although these packages appear to be easier to use, they do not
give you an understanding of the markup that they create. The markup
is often inefficient, having extra tags that are not really required
for the task that you are completing. The code created by some
WYSIWYG packages is not strict html and would not validate to w3
standards, so may not work in all browsers. We would recommend that
you create your webpages using a text editor to start with, then if
you wish use a WYSIWYG package, but use the underlying skills to go
in and edit the markup as required.</p>
<hr>
<h2><div id="terms"></div>Make sure that you use the correct
terms</h2>
<p> Over the past few years, as the practical examinations
have developed there has been a trend to test your knowledge and
Div name in correct place 1 mark
understanding of each topic as well as just your practical skills.
Appropriate div name 1 mark
In some examination questions you are asked to use the correct terms
to describe what you have done/would do in certain circumstances.
Make sure that you call the language html a markup language and not
code or a programming language and use the term tags correctly. It
is possible that examiners may ask you to describe how mixed colours
are created using hex codes, or how cell spacing and cell padding
work in a table. As you read the book and work through each section
try to make sure that you understand the key words. In the book many
of these are highlighted in red as they also appear in the glossary,
along with an explanation of what they mean.</p>
<hr>

Page 3 of 6
Activity 21i

<h2><div id="hex"></div>What is hexadecimal?</h2>


<p>Hexadecimal, or hex for short is a counting system that is
based upon sixteens. This means that numbers are counted in
sixteen’s
Div name rather than in the
in correct place ten’s used in the decimal system.
1 mark
Because
Appropriate div namewe do not have sixteen
1 markdifferent characters for each number
we use letters and numbers like this.</p>
<p>
<table border="1" style="padding:2;spacing:2">
<tr>
<td>Decimal</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>Decimal</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>

Page 4 of 6
Activity 21i

<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>1A</td>
<td>1B</td>
<td>1C</td>
</tr>
</table>
<p>... and so on. This counting system continues like
this...</p>
<br>
<table border="1" style="padding:2;spacing:2">
<tr>
<td>Decimal</td>
<td>152</td>
<td>153</td>
<td>154</td>
<td>155</td>
<td>156</td>
<td>157</td>
<td>158</td>
<td>159</td>
<td>160</td>
<td>161</td>
<td>162</td>
<td>163</td>
<td>164</td>
<td>165</td>
<td>166</td>
<td>167</td>
<td>168</td>
<td>170</td>
<td>171</td>
<td>172</td>
<td>173</td>
</tr>
<tr>
<td>Decimal</td>
<td>98</td>
<td>99</td>
<td>9A</td>
<td>9B</td>
<td>9C</td>
<td>9D</td>
<td>9E</td>
<td>9F</td>
<td>A0</td>
<td>A1</td>
<td>A2</td>

Page 5 of 6
Activity 21i

<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
<td>A8</td>
<td>A9</td>
<td>AA</td>
<td>AB</td>
<td>AC</td>
</tr>
</table>
<p>The largest number that can be stored in a single byte of
information is the decimal number 255 which is FF in
hexadecimal.</p>
<hr>
<h2><div id="links"></div> Useful hyperlinks</h2>
<p>There are other places that can be used to gain valuable
information that may help. These include the <a
href="http:\\www.hoddereducation.co.uk">Hodder Education</a> website
and the <a href="http:\\www.w3.org">W3C</a> website.</p>
<p>Back to the <a href="#top">top</a></p>
</body>
</html>
External hyperlink address correct 3 marks
1st anchor around the text ‘Hodder Education’ 1 mark
2nd anchor around the text ‘W3C’ 1 mark

Page 6 of 6
Activity 21j

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
Yellow background 1 mark
Thick outside border 1 mark
Image shows as hyperlink 1 mark

Page 1 of 3
Activity 21j

Markup printout 1 mark


YOUR NAME replaced by student’s name 1 mark
<!DOCTYPE html>
<!-- Activity 21j by Graham Brown -->
<html>
<head>
<title>Activity 21j by Graham Brown</title>

Metadata
meta tag used for all 4 1 mark
…. charset 1 mark
Correct text "ISO-8859-1" 1 mark
name = "author" 1 mark
content = authors name 1 mark
name = "keywords" 1 mark
content = all 3 text items 1 mark
… separated with commas 1 mark
name = "viewport" 1 mark
content = "width=device-width 1 mark
, initial-scale= 1 mark
2.0" 1 mark

<meta charset="ISO-8859-1">
<meta name="author" content="Graham Brown">
<meta name="keywords" content="PTC, travel, expenses">
<meta name="viewport" content="width=device-width, initial-
scale=2.0">
Base tag … 1 mark
… Target attribute … 1 mark
… ="_self" 1 mark
<base target="_self">
</head>
<body>
<h2> Activity 21j by Graham Brown </h2>
table styles defined
style attribute to embed CSS 1 mark
background-color:#FFFF00 1 mark
border-collapse:collapse; 1 mark
border for table 4px 1 mark

<table border="1" style="background-color:#FFFF00; border-


collapse:collapse; border: solid 4px"}>
<caption>Last week</caption>
<thead>
Anchor surrounds <a> image tag </a> 1 mark
<tr>
href="mailto: 1 mark
correct email address 1 mark
?subject= Expenses 1 mark
&amp; 1 mark
body= 1 mark
correct text with %20 in place of spaces" 1 mark
<td rowspan="2"><a
href="mailto:[email protected]?subject=Expenses&amp;body=Please
%20send%20me%20updated%20expenses%20details.">
<img src="PTCT.JPG" alt="PCT Company Logo"></a></td>

Page 2 of 3
Activity 21j

<th colspan="4">Expenses</th>
</tr>
<tr>
<th>Anne</th>
<th>Dan</th>
<th>Lisa</th>
<th>Udoka</th>
</tr>
</thead>
<tbody>
<tr style="text-align:right;">
<th>Petrol</th>
<td>$182.20</td>
<td>$185.75</td>
<td>$260.00</td>
<td>$322.00</td>
</tr>
<tr style="text-align:right;">
<th>Food</th>
<td>$80.00</td>
<td>$62.40</td>
<td>$54.00</td>
<td>$40.00</td>
</tr>
<tr style="text-align:right;">
<th>Hotel</th>
<td>$420.00</td>
<td>$382.10</td>
<td>$104.50</td>
<td>$260.00</td>
</tr>
</tbody>
</table>
</body>
</html>

Page 3 of 3
Activity 21k

Browser view
Visible in a web browser 1 mark
Student’s name visible on printout 1 mark
Thick outside border 1 mark
Yellow background colour to table 1 mark

Page 1 of 4
Activity 21k

Markup printout 1 mark


All 3 references to 21j changed to 21k 1 mark
Name present 1 mark

<!DOCTYPE html>
<!-- Activity 21k by Graham Brown -->
<html>
<head>
<title>Activity 21k by Graham Brown</title>
<link rel="stylesheet" type="text/css" href="21kstyles.css">
</head>
<body> Head section
Stylesheet attached 1 mark
….replacing previously defined <style></style> 1 mark
Correct filename and extension 1 mark
With relative file path 1 mark

<h2> Activity 21k by Graham Brown </h2>


<table border="1">
<caption>Last week</caption>
<thead>
<tr>
<td rowspan="2"><a
href="mailto:[email protected]?subject=Expenses&amp;body=Please
%20send%20me%20updated%20expenses%20details.">
<img src="PTCT.JPG" alt="PCT Company Logo"></a></td>
<th colspan="4">Expenses</th>
</tr>
<tr>
<th>Anne</th>
<th>Dan</th>
<th>Lisa</th>
<th>Udoka</th>
</tr>
</thead>
<tbody>
<tr style="text-align:right;">
<th>Petrol</th>
<td>$182.20</td>
<td>$185.75</td>
<td>$260.00</td>
<td>$322.00</td>
</tr>
<tr style="text-align:right;">
<th>Food</th>
<td>$80.00</td>
<td>$62.40</td>
<td>$54.00</td>
<td>$40.00</td>
</tr>
<tr style="text-align:right;">
<th>Hotel</th>
<td>$420.00</td>
<td>$382.10</td>
<td>$104.50</td>
<td>$260.00</td>
</tr>

Page 2 of 4
Activity 21k

</tbody>
</table>
</body>
</html>

Page 3 of 4
Activity 21k

Css screenshot/printout 1 mark


Correct css present 1 mark
In curly brackets 1 mark

table {border-collapse:collapse; border:solid 4px;


background-color:#FFFF00;}

table,tr,td {padding:4px; spacing:4px;}

or

Page 4 of 4
Activity 21l

Cascading stylesheet printout


h1
Helvetica, or Arial narrow, or sans-serif 3 marks
Arial narrow has speech marks 1 mark
24 point 1 mark
Centre aligned 1 mark
Italic 1 mark
h2
Courier narrow or Courier, or proportional 3 marks
Courier narrow has speech marks 1 mark
16 point 1 mark
Right aligned 1 mark
Bold 1 mark
h3
Courier narrow or Courier, or proportional 3 marks
Courier narrow has speech marks 1 mark
16 point 1 mark
Left aligned 1 mark
Underlined 1 mark
p
Serif font 1 mark
14 point 1 mark
Left aligned 1 mark
Your name as a comment 1 mark

Page 1 of 2
Activity 21l
Markup printout
<html> Stylesheet correctly attached 2 marks
<head> With relative file path 1 mark
<title>Activity 21L</title>
<link rel="stylesheet" type="text/css" href="mystyle2.css">
</head>
<body>
<h1>Activity 21L</h1>
<h4>by Graham Brown</h4>
<h1>If you have attached the stylesheet correctly, this text
will have a sans-serif, 24 point, centre aligned, italic font.</h1>
<h2>If you have attached the stylesheet correctly, this text
will be a proportionally spaced, 16 point, right aligned, bold
font.</h2>
<h3>If you have attached the stylesheet correctly, this text
will be a proportionally spaced, 16 point, left aligned, underlined
font.</h3>
<p>If you have attached the stylesheet correctly, this text will
have a serif, 14 point, left aligned font.</p>
</body>
</html> Browser view printout
Shows all correct styles 4 marks
(1 mark for each correct style)
Student name in correct place & style 1 mark
Printed from browser 1 mark

Page 2 of 2
Activity 21m

Cascading stylesheet printout


h1
color:#0000FF 1 mark
h2
color:#FF4500 1 mark
h3
color:#483D8B 1 mark
h4
color:8B008B 1 mark
p
color:#800000 1 mark
Your name as a comment 1 mark

Page 1 of 2
Activity 21m

Browser view printout


Shows all correct styles 5 marks
(1 mark for each correct style)
Student name in correct place & style 1 mark
Printed from browser 1 mark

Page 2 of 2
Activity 21n

Cascading stylesheet printout


Body defined 1 mark
Background-color:#f2e88e 1 mark
Your name as a comment 1 mark

Page 1 of 2
Activity 21n

Browser view printout


Background colour correct 1 mark
Printed from browser 1 mark

Page 2 of 2
Activity 21o

Cascading stylesheet printout


body section 1 mark
background-image: 1 mark
…url("brick.png"); 1 mark
background-repeat: 1 mark
…repeat; 1 mark
Your name as a comment 1 mark

Page 1 of 2
Activity 21o

Browser view printout


Background colour pattern 1 mark
Printed from browser 1 mark

Page 2 of 2
Activity 21p

Cascading stylesheet printout


body section 1 mark
background-image: url("wall.png"); 1 mark
background-repeat: repeat-y; 1 mark
margin-left: 1 mark
… value >=200pixels 1 mark
Your name as a comment 1 mark

Page 1 of 2
Activity 21p

Browser view printout


Background colour pattern 1 mark
Left side only 1 mark
Text does not overlap 1 mark
Printed from browser 1 mark

Page 2 of 2
Activity 21q

HTML printout
head section 1 mark
correct link to css file 1 mark
with your own filename 1 mark
Your name as a comment 1 mark

Page 1 of 3
Activity 21q

Cascading stylesheet printout


body section 1 mark
background-color: #ff8c00 1 mark
background-image: url("sun.png"); 1 mark
background-repeat: no-repeat; 1 mark
background-position: right 1 mark
…top 1 mark
margin-right: 1 mark
… value >=150pixels 1 mark
table section 1 mark
background-color: #ff4500 1 mark
td section 1 mark
background-color: #ffff00 1 mark
thead section 1 mark
background-color: #ffd700 1 mark
Your name as a comment 1 mark

Page 2 of 3
Activity 21q

Browser view printout


Background colour 1 mark
Image right side only 1 mark
Text does not overlap 1 mark
Printed from browser 1 mark
Correct colours in all areas 1 mark

Page 3 of 3
Activity 21r

HTML printout
Your name as a comment 1 mark

Page 1 of 3
Activity 21r

Cascading stylesheet printout


table section 1 mark
border-style: solid; 1 mark
border-width: 4px; 1 mark
border-color: #ff0000; 1 mark
padding:10px 1 mark
table, td, th 1 mark
(These could be separate lines)
text-align: center 1 mark
Your name as a comment 1 mark

Page 2 of 3
Activity 21r

Browser view printout


Padding is correct 1 mark
Text centre aligned in table 1 mark
Printed from browser 1 mark
Correct colours in all areas 1 mark

Page 3 of 3

You might also like