Appendix A. Answers to Exercises

This appendix covers the answers to each of the exercises at the end of each chapter.

Exercise 1

Mark up the following sentence with the relevant presentational elements.

The 1st time the bold man wrote in italics, he underlined several key words.

Answer

The sentence uses superscript, bold, italic, and underlined presentational elements.

<p>The 1<sup>st</sup> time the bold man wrote in <i>italics</i>, he
<u>underlined</u> several key words.</p>

Exercise 2

Mark up the following list, with inserted and deleted content:

Ricotta pancake ingredients:

  • 1 1/2 3/4 cups ricotta

  • 3/4 cup milk

  • 4 eggs

  • 1 cup plain white flour

  • 1 teaspoon baking powder

  • 75g 50g butter

  • pinch of salt

Answer

Here is the bulleted list with elements that show which content has been inserted and deleted:

<h1>Ricotta pancake ingredients:</h1>
<ul>
  <li>1 <del>1/2</del><ins>3/4</ins> cups ricotta</li>
  <li>3/4 cup milk</li>
  <li>4 eggs</li>
  <li>1 cup plain <ins>white</ins> flour</li>
  <li>1 teaspoon baking powder</li>
  <li><del>75g</del><ins>50g</ins> butter</li>
  <li>pinch of salt</li>
</ul>

Exercise 1

Look back at the Try It Out example where you created a menu, and create a new page that links directly to each course on the menu. Then add a link to the main Wrox web site (www.wrox.com). The page should look something like Figure A-1.

Figure A-1

Figure A.1. Figure A-1

Answer

Here is the page with links to the menu first, and then a link to the Wrox Press web site:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Links to Example Cafe and Wrox.com</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body>
<h1>Links to Example Cafe</h1>
  <p>
    <a href="http://www.examplecafe.com/menu.html#starters">Starters</a> |
    <a href="http://www.examplecafe.com/menu.html#mains">Main Courses</a> |
    <a href="http://www.examplecafe.com/menu.html#desserts">Desserts</a>
  </p>
  <p>This is an example taken from a book published by
    <a href="http://www.wrox.com">Wrox Press</a>
  </p>.
</body>
</html>

Exercise 2

Go back to the pages in the sample application and make sure that you have updated the navigation for each page.

Answer

Navigation for the homepage:

<div>
    HOME
    <a href="menu.html">MENU</a>
    <a href="recipes.html">RECIPES</a>
    <a href="contact.html">CONTACT</a>
</div>

Navigation for the menu page:

<div>
    <a href="index.html">HOME</a>
    MENU
    <a href="recipes.html">RECIPES</a>
    <a href="contact.html">CONTACT</a>
  </div>

Navigation for the recipes page:

<div>
    <a href="index.html">HOME</a>
    <a href="menu.html">MENU</a>
    RECIPES
    <a href="contact.html">CONTACT</a>
  </div>

Navigation for the contact page:

<div>
    <a href="index.html">HOME</a>
    <a href="menu.html">MENU</a>
    <a href="recipes.html">RECIPES</a>
    CONTACT
  </div>

Exercise 1

Add the images of icons that represent a diary, a camera, and a newspaper to the following example. All of the images are provided in the images folder in the download code for Chapter 3.

<h1>Icons</h1>
<p>Here is an icon used to represent a diary.</p>
<img src="images/diary.gif" alt="Diary" width="150" height="120" /><br />

<p>Here is an icon used to represent a picture.</p>
Camera image goes here<br />

<p>Here is an icon used to represent a news item.</p>
Newspaper image goes here<br />

Your finished page should resemble Figure A-2.

Figure A-2

Figure A.2. Figure A-2

Answer

Here is the code for this page:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <title>Exercise 1</title>
</head>

<body>
  <h1>Icons</h1>
  <p>Here is an icon used to represent a diary.</p>
  <img src="images/diary.gif" alt="Diary" width="150" height="120" /><br />

  <p>Here is an icon used to represent a picture.</p>
  <img src="images/picture.gif" alt="Picture" width="150" height="120" /><br />

  <p>Here is an icon used to represent a news item.</p>
  <img src="images/news.gif" alt="news" width="150" height="120" /><br />

</body>
</html>

Exercise 2

Look at the images shown in Figures A-3 and A-4 and decide whether you are more likely to get smaller file sizes and better quality images if you save them as JPEGs or GIFs.

Figure A-3

Figure A.3. Figure A-3

Figure A-4

Figure A.4. Figure A-4

Answer

As discussed in Chapter 3, images with large, flat areas of color, such as Image 1 where we see only the silhouette of the people, compress better as GIFs than JPEGs, while JPEGs are better for saving photographic images where there is greater variety of colors and more difference in the shades of different colors.

  • Image 1 (Figure A-3): GIF or PNG (you may remember that PNGs are a replacement for GIFs)

  • Image 2 (Figure A-4): JPEG.

Exercise 3

Go through the files for the sample application and replace the main heading with the logo on each page. On every page except for the homepage, make sure that the image links back to the index.html page.

Answer

The new heading should look like this:

<a id="top" href="index.html">
  <img src="images/logo.gif" alt="example cafe" width="194" height="80" />
</a>

Exercise 1

Where should the <caption> element for a table be placed in the document and, by default, where is it displayed?

Answer

The <caption> element should appear after the opening <table> element but before the first <tr> element.

Exercise 2

In what order would the cells in Figure A-5 be read out by a screen reader?

Figure A-5

Figure A.5. Figure A-5

Answer

The names would be read in the following order: Emily, Jack, Frank, Mary, Dominic, Amy, Thomas, Angela, and David.

Exercise 3

Create a table to hold the data shown in Figure A-6. To give you a couple of clues, the document must be Transitional XHTML 1.0 because the width attribute is used on the cells of the first row of the table. You have also seen examples of how the border is generated in this chapter, using another deprecated attribute, but on the <table> element rather than the cells.

Figure A-6

Figure A.6. Figure A-6

Answer

Here is the code for the cinema timetable (ch04_exercise3.html):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
  <title>Classic Movies Times</title>
</head>

<body>
<table border="1" width="500">
<caption>Classic Movie Day</caption>
  <tr>
    <th></th>
    <th width="200">5 pm</th>
    <th width="200">7 pm</th>
    <th width="200">9 pm</th>
    <th width="200">11 pm</th>
  </tr>
  <tr>
    <th>Screen one</th>
    <td>Star Wars</td>
    <td>Empire Strikes Back</td>
    <td>Return of the Jedi</td>
    <td>The Exorcist</td>
  </tr>
  <tr>
    <th>Screen two</th>
    <td colspan="2">Dances with Wolves</td>
    <td colspan="2">Gone With the Wind</td>
  </tr>
  <tr>
    <th>Screen three</th>
    <td colspan="2">2001: A Space Odyssey</td>
    <td>The Conversation</td>
    <td>5 Easy Pieces</td>
  </tr>
</table>

</body>
</html>

Exercise 1

Create an e-mail feedback form that looks like the one shown in Figure A-7.

Figure A-7

Figure A.7. Figure A-7

Note that the first textbox is a readonly textbox so that the user cannot alter the name of the person the mail is being sent to, and that readonly textboxes are displayed in different ways on different browsers (in this example you can see the text input is grayed out, whereas on some other browsers you might just see a lighter border around the text input).

Answer

Here is the code for the feedback form:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
  <title>Reply to ad</title>
</head>

<body>
<h2>Reply to ad</h2>
<p>Use the following form to respond to the ad:</p>

<form action="http://www.example.com/ads/respond.aspx" method="post"
      name="frmRespondToAd">
<table>
  <tr>
    <td><label for="emailTo">To</label></td>
    <td><input type="text" name="txtTo" readonly="readonly" id="emailTo"
         size="20" value="Star Seller" /></td>
  </tr>
<tr>
    <td><label for="emailFrom">To</label></td>
    <td><input type="text" name="txtFrom" id="emailFrom" size="20" /></td>
  </tr>
  <tr>
    <td><label for="emailSubject">Subject</label></td>
    <td><input type="text" name="txtSubject" id="emailSubject"
        size="50" /></td>
  </tr>
  <tr>
    <td><label for="emailBody">Body</label></td>
    <td><textarea name="txtBody" id="emailBody" cols="50" rows="10">
        </textarea></td>
  </tr>
</table>
  <input type="submit" value="Send email" />

</form>

</body>
</html>

Exercise 2

Create a voting or ranking form that looks like the one shown in Figure A-8.

Figure A-8

Figure A.8. Figure A-8

Note that the following <style> element was added to the <head> of the document to make each column of the table the same fixed width, with text aligned in the center.

<head>
  <title>Voting</title>
  <style type="text/css">td {width:100; text-align:center;}</style>
</head>

Answer

Here is the code for the voting form. Note how the checked attribute is used on the middle value for this form so that it loads with an average score (in case the form is submitted without a value selected):

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
  <title>Voting</title>
  <style type="text/css">td {width:100; text-align:center;}</style>
</head>

<body>
<h2>Register your opinion</h2>
<p>How well do you rate the information on this site (where 1 is
    very poor and 5 is very good)?</p>

<form action="http://www.example.com/ads/respond.aspx" method="get"
       name="frmRespondToAd">

<table>
  <tr>
    <td><input type="radio" name="radVote" value="1" id="vpoor" /></td>
    <td><input type="radio" name="radVote" value="2" id="poor" /></td>
    <td><input type="radio" name="radVote" value="3" id="average"
         checked="checked" /></td>
    <td><input type="radio" name="radVote" value="4" id="good" /></td>
    <td><input type="radio" name="radVote" value="5" id="vgood" /></td>
  </tr>
  <tr>
    <td><label for="vpoor">1 <br />Very Poor</label></td>
    <td><label for="poor">2 <br />Poor</label></td>
    <td><label for="average">3 <br />Average</label></td>
    <td><label for="good">4 <br />Good</label></td>
    <td><label for="vgood">5 <br />Very Good</label></td>
  </tr>
</table>
<input type="submit" value="Vote now" />
</form>

</body>
</html>

Exercise 1

Create a frameset like the one shown in Figure A-9, where clicking a fruit loads a new page in the main window. When the page loads in the main window, it will carry the details for the appropriate fruit (to save time, you can use the images and fruit description pages in the code download, but try to create the frameset and navigation on your own).

Figure A-9

Figure A.9. Figure A-9

Answer

The first example required five files:

  • A frameset document

  • A navigation document

  • The apple page

  • The orange page

  • The banana page

Here is the frameset document (ch06_exercise1.html):

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
  <title>Fruit example</title>
</head>

<frameset cols="200, 450, *">
  <frame src="frames/fruitNav.html" />
  <frame name="main_frame" src="frames/apple.html" />

  <noframes><body>This site makes use of a technology called frames.
  Unfortunately the browser you are using does not support this technology.
  We recommend that you update your browser. We apologize for any
  inconvenience this causes.
  </body></noframes>

</frameset>

</html>

This is a frameset document type, which contains two columns that are a fixed size, and then the remainder of the window is left blank (hence there are only <frame> elements for the first two columns). Note how the second <frame> element carries the name attribute so that the links in the navigation frame can load in that part of the page.

Here is the navigation pane (fruitNav.html):

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Navigation</title>
  <style type="text/css">img {border-style:none; border-width:0px;}</style>
</head>
<body>

<h1> Navigation </h1>
<p>Click on the fruit to find out more about it.</p>
<a href="../frames/apple.html" target="main_frame"><img src="../images/
   apple.jpg" alt="apple" /></a>
<a href="../frames/orange.html" target="main_frame"><img src="../images/
   orange.jpg" alt="orange" /></a>
<a href="../frames/banana.html" target="main_frame"><img src="../images/
   banana.jpg" alt="banana" /></a>
</body>
</html>

This is a normal XHTML document; the only things of note in this document are the target attributes on the links to indicate that the link should open in the other frame, and the <style> element in the <head>.

The pages about the fruit (apple.html, orange.html, and banana.html) are all the same except for their text content. Here is apple.html:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Apple</title>
</head>

<body>
  <h1>Apples</h1>

  <p>Apples come in different colors, and there are over 7500 varieties
  of apples.</p>

  <p>An apple contains about 5g of fiber (1/5 recommended daily
  average).</p>

</body>
</html>

Exercise 2

Re-create the <iframe> element shown in Figure A-10 (where you can load two different documents inside the iframe window in the current page).

Figure A-10

Figure A.10. Figure A-10

Answer

The inline frame example requires four files:

  • ch06_exercise2.html contains the page that you load.

  • teamA.html contains the names of players in Team A.

  • teamB.html contains the names of players in Team B.

  • clickForTeam.html is what loads in the iframe before the user clicks either team.

First up is ch06_exercise2.html, which contains the <iframe> element. It is a normal XHTML document, with two links that carry the target attribute so that they can indicate which frame the document that they link to should go into.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Football focus</title>
</head>
<body>
<h1>Quarter Final - Wintertons Cup</h1>
<h3>
  <a href="frames/teamA.html" target="iframe">Manchester Rangers</a>
  vs
  <a href="frames/teamB.html" target="iframe">Birmingham United</a>
</h3>
  <p>
   <iframe name="iframe" width="300" height="150"
   src="frames/clickForTeams.html" align="left" ></iframe>

   Today's big soccer game is between Manchester Rangers and Birmingham
   United. The match will be played at Highgate Fields stadium, and is
   Sure to be the big game of the week, with all eyes on the underdogs
   Birmingham United who did not expect to get this far in the
   competition.
  </p>
</body>
</html>

As you can see from the <iframe> element, it carries an src attribute that indicates that a page called clickForTeams.html should load into the iframe when the page loads. This is just a plain XHTML page:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Teams</title>
</head>
<body>
<h3>Click on a team name to load their players here</h3>
</body>
</html>

Now here is the page teamB.html, which contains a table for the players in the starting lineup of the team. The page teamA.html is exactly the same, just with different players.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Team B</title>
</head>
<body>
<h3>Birmingham United</h3>
  <p>The players of Birmingham United are</p>:
  <table>
    <tr><th>Number</th><th>Name</th></tr>
    <tr><td>1</td><td>Chris Warner</td></tr>
    <tr><td>2</td><td>Felix Thomlinson</td></tr>
    <tr><td>3</td><td>Barry Carr</td></tr>
    <tr><td>4</td><td>Mike Patterson</td></tr>
    <tr><td>5</td><td>Richard Neilson</td></tr>
    <tr><td>6</td><td>Brian Childer</td></tr>
    <tr><td>7</td><td>Micky Stephens</td></tr>
    <tr><td>8</td><td>Richard Brooks</td></tr>
    <tr><td>9</td><td>Nick Evans</td></tr>
    <tr><td>10</td><td>Joseph Barton</td></tr>
    <tr><td>11</td><td>Rob Bishop</td></tr>
  </table>
</body>
</html>

Exercise 1

In the exercises for this chapter, you are going to continue to work on the Example Café web site:

  1. First, open the index.html page and add a <div> element just inside the opening <body> tag and the closing </body> tag, and give the element an id attribute whose value is page. Repeat this for each page of the site.

  2. Now, in the style sheet add a rule that gives this element a margin, border, and padding so that it looks like the border in Figure A-11.

Figure A-11

Figure A.11. Figure A-11

Answer

First, here is the XHTML for the homepage; you can see the new <div> element has been highlighted:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example Cafe - community cafe in Newquay, Cornwall, UK</title>
  <link rel="stylesheet" type="text/css" href="css/interface.css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>

<body>
<div id="page">

  <a id="top"><img src="images/logo.gif"
    alt="example cafe" width="194" height="80" />
  <div id="navigation">
    HOME
    <a href="menu.html">MENU</a>
    <a href="recipes.html">RECIPES</a>
<a href="opening.html">OPENING</a>
    <a href="contact.html">CONTACT</a>
  </div>

  <img src="images/scrambled_eggs.jpg" width="622" height="370"
    alt="Photo of scrambled eggs on an English muffin" align="left" />
  <h2>A community cafe serving home cooked, locally sourced,
    organic food</h2>
  <p>With stunning views of the ocean, Example Cafe offers the perfect
    environment to unwind and recharge the batteries.</p>
  <p>Our menu offers a wide range of breakfasts, brunches and lunches,
    including a range of vegetarian options.</p>
  <p>Whether you sip on a fresh, hot coffee or a cooling smoothie,
    you never need to feel rushed - relax with friends or just watch
    the world go by.</p>

  <h2>This weekend's special brunch</h2>
  <p>This weekend, our season of special brunches continues with scrambled
    egg on an English muffin. Not for the faint-hearted,
    the secret to these eggs is that they are made with
    half cream and cooked in butter, with no more than four eggs
    in the pan at a time.</p>

</div>
</body>
</html>

Now here is the CSS rule that creates the blue border:

#page {
       width:960px;
       border:10px solid #3399cc;
       padding:40px;
       margin:20px;}

Exercise 2

Create a CSS rule that will make the following changes to the navigation:

  1. Add a single-pixel gray border on the top and bottom.

  2. Give it 20 pixels of margin above and below the gray lines.

  3. Give it 10 pixels of padding on the top and bottom in the box.

  4. Add a margin to the right of each link in the navigation.

Answer

The first three changes (for points a, b, and c) can be handled using one CSS rule. The rule will need to control four properties:

  • The border-top and border-bottom properties add a single-pixel gray line above and below the navigation

  • The padding property adds space between the lines and the items in the navigation

  • The margin property adds a bit of space above and below the gray lines

Then the margin-right property can be used to add space to the right of each individual link.

#navigation {
       border-top:1px solid #d6d6d6;
       border-bottom:1px solid #d6d6d6;
       padding:10px 0px 10px 0px;
       margin:20px 0px 20px 0px;}

#navigation a {
       color:#3399cc;
       text-decoration:none;
       margin-right:20px;}

Exercise 3

Give the main image on the homepage a class attribute whose value is main_image, and then create a rule that gives the image a single-pixel black border, and also give the image a 10-pixel margin on the right and bottom sides of the image.

Answer

Here is the new CSS rule that controls the appearance of the image:

.main_image {
       border:1px solid #000000;
       margin:0px 10px 10px 0px;}

Exercise 4

Increase the gaps between each line of text to 1.3 em.

Answer

You can add the line-height property to the rule that controls the <p> elements to change the gap between the text, which typesetters refer to as leading.

p {
       color:#333333;
       font-size:90%;
       line-height:1.3em;}

Exercise 5

Take a look at the following XHTML page:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>Font test</title>
  <link rel="stylesheet" type="text/css" href="ch07_exercise5.css" />
</head>
<body>
<table>
  <tr>
    <th>Quantity</th>
    <th>Ingredient</th>
  </tr>
  <tr class="odd">
    <td>3</td>
    <td>Eggs</td>
  </tr>
  <tr>
    <td>100ml</td>
    <td>Milk</td>
  </tr>
  <tr class="odd">
    <td>200g</td>
    <td>Spinach</td>
   </tr>
   <tr>
     <td>1 pinch</td>
     <td>Cinnamon</td>
   </tr>
 </table>
</body>
</html>

Now create the ch07_exercise5.css style sheet, which makes this example look like it does in Figure A-12.

Figure A-12

Figure A.12. Figure A-12

Don't worry about getting the sizes exactly the same as the screenshot, but do make sure you have padding in the cells and a border around the outside. The white border is created by default in IE and you find out how to remove this in Chapter 8.

Answer

First you need to add a style rule for the either the <body> element or all elements using the universal selector *, which indicates that the rule applies to all elements. As I mentioned in the chapter, I always set the background-color property of the <body> element on a site in case the user has set it to another value. You can also set the font-family and font-size properties to control how the text appears.

body {
  background-color:#ffffff;
  font-family:arial, verdana, sans-serif;
  font-size:14px;}

In order to give the entire table a single-pixel, dark gray border, you can use the following style rules (or you could just use the border property shorthand):

table {
  border-style:solid;
  border-width:1px;
  border-color:#666666;}

The table headings have a dark background with light writing; the font is also bold. In addition, there is no border to the headings (note how the shorthand border property is used this time) and the cells have padding:

th {
  color:#ffffff;
  background-color:#999999;
  font-weight:bold;
  border:none;
  padding:4px;}

By default, the table rows will have a light background color:

tr {background-color:#cccccc;}

To alternate the colors of the rows, the <tr> elements that have a class attribute whose value is odd will have a different background color:

tr.odd {background-color:#efefef;}

Finally, we should give two pixels of padding to each table cell, and ensure that the color of the text in the cells is black.

td {
  color:#000000;
  padding:2px;}

Exercise 1

In this exercise, you create a linked table of contents that will sit at the top of a long document in an ordered list and link to the headings in the main part of the document.

The XHTML file ch08_exercise1.html is provided with the download code for this book, ready for you to create the style sheet. Your style sheet should do the following:

  • Set the styles of all links including active and visited links

  • Make the contents of the list bold

  • Make the background of the list light gray and use padding to ensure the bullet points show

  • Make the width of the links box 250 pixels wide

  • Change the style of heading bullet points to empty circles

  • Change the style of link bullet points to squares

Your page should look something like Figure A-13.

Figure A-13

Figure A.13. Figure A-13

Answer

To start off, you can create a rule that applies to the <body> element to control the background color of the page and the font used.

body {
  background-color:#ffffff;
  font-family:arial, verdana, sans-serif;
  font-size:12px;}

There were several tasks that related to the list of bullet points that make up the contents. If you look at the following rule, you can see it starts by setting the background color of the list to a light gray. This is followed by a property that sets the default style of bullet points to empty circles. Then all the text is made bold. The fourth property sets the padding to the left of the list. Finally, the width of the lists are set to 250 pixels wide.

ul {
  background-color:#d6d6d6;
  list-style:circle;
  font-weight:bold;
  padding-left:30px;
  width:250px;}

The links to the sections are in nested unordered lists, and there are a couple of properties you need to set for these lists. First, you have to set the bullet points to squares. Second, because all unordered lists have a gray background and are 250 pixels wide, the nested lists would end up poking out to the right-hand side if you did not make them less wide.

ul ul {
  list-style:square;
  width:220px;}

The final item on the list was to set the styles of all links including active and visited links, which requires another four rules:

a:link {
  color:#0033ff;;
  text-decoration:none;}
a:visited {
  color:#0066ff;
  text-decoration:none;}
a:active {
  text-decoration:underline;}
a:link:hover {
  color:#003399;
  background-color:#e9e9e9;
  text-decoration:underline;}

Exercise 2

In this exercise, you test your CSS positioning skills. You should create a page that represents the links to the different sections of the chapter in a very different way. Each of the sections will be shown in a different block, and each block will be absolutely positioned in a diagonal top left to bottom right direction. The middle box should appear on top, as shown in the Figure A-14.

Figure A-14

Figure A.14. Figure A-14

You can find the source XHTML file (ch08_exercise2.html) with the download code for this chapter.

Answer

To begin, you set the background color for the entire page and default font in a rule that applies to the <body> element.

body {
  background-color:#ffffff;
  font-family:arial, verdana, sans-serif;
  font-size:12px;}

Next, you can set a rule that applies to all of the <div> elements. Even though you will be changing the background color of two of the boxes, whenever boxes are taken out of normal flow there is a risk that they will overlap, so you should give them a background color (because by default boxes have no background).

You can also set some common properties, adding padding to each box, as well as a border and the width of the boxes.

div {
  background-color:#ffffff;
  padding:10px;
  border-style:groove; border-width:4px; border-color:#999999;
  width:300px;}

Finally, you simply position each of the boxes. Because the containing element is the <body> element, you position each box from the top-left corner of the browser window.

div.page1 {
  position:absolute;
  top:70px;
  z-index:2;
  background-color:#d6d6d6;}

div.page2 {
  position:absolute;
  top:170px; left:100px;
  z-index:3;}

div.page3 {
  position:absolute;
  top:270px; left:200px;
  z-index:1;
  background-color:#efefef;}

Exercise 1

Take another look at the article page from the Guardian newspaper's web site; it is shown again in Figure A-15. List all the different elements on the page that would have been listed in the design stage, and put them together in their relevant grouping or categories. For example, the main article section of the page might need a list like this:

Title
Summary
Author
Date
Figure A-15

Figure A.15. Figure A-15

Answer

It should look something like the following list (although there will be some slight differences depending on the level of detail you have gone into and the names you have chosen).

Header
       Sign in / Register
       Link to mobile site
       Text size
       Drop down select box of links to other parts of site

Advert
Site name / link to home page
Search

Navigation
       News, Sport, Comment, Culture, Business, Money, Life & Style,
       Travel, Environment, Blogs, Video, Community, Jobs

Breadcrumb trail

Article

Title
Summary
Author
Date
Article history
Main photograph
Photograph caption
Article body

Social media links
       Buzz Up, Digg

Tools
       Print, Send to friend, Share, Clip, Contact

Change text size

Related article links

Most viewed articles
       Last 24 hours, last 7 days, most talked about

Best sellers from shop

Exercise 2

Try to recreate the structure of the page you can see in Figure A-15. It sits in the 12-column 960-pixel grid we were using in this chapter, so you have seen much of the code you need already—you just need to assemble it correctly.

Answer

The code in ch09_eg07.html and ch09_eg07.css shows several configurations for columns on the grid, and covers most of what you need for the example.

What is missing from this example is a CSS class that splits the page into two, which is needed because the main article only takes up half of the page. You also need to add a margin to the right-hand side of the first column. The new rules should look like this:

.column1of2, .column2of2 {
       float:left;
       width:440px;
       background-color:#cccccc;
       padding:10px;
       margin-top:20px;}

.column1of2 {margin-right:20px;}

Now, you have all of the combinations of columns that you need; you can start to build up the structure that is shown in Figure A-15.

If you look at the main article, which takes up half of the page, we will use the new class we created for that. Next to that is a column that takes up one-sixth of the page, so we will use the appropriate column for that—column4of6. The final column there takes up one-third of the page, so we use the class column3of3 to represent that one. It is important to remember that, in all of these classes, the column to the right is different than the others because it does not have a margin to the right. And for clarity, it helps to use the class that represents the element's position.

At the top of the page, all of the elements either take up the full width of the page, or fit into thirds of a page.

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>Layout Example</title>
    <link rel="stylesheet" type="text/css" href="ch09_exercise2.css" />
  </head>
  <body>
    <div id="frame">
         <div id="page">

        <div class="columns1and2of3 clear">sign in / register /
          text size</div>
        <div class="column3of3">go to... site sections</div>

        <div id="header clear">ad</div>

        <div class="column1of3 clear">site name</div>
        <div class="column2of3">empty</div>
        <div class="column3of3">search</div>

        <div id="navigation clear">navigation and breadcrumb</div>

        <div class="column1of2 clear">article</div>
<div class="column4of6">socia media links, tools, and other
          links</div>
        <div class="column3of3">most viewed articles and best sellers from
          the shop</div>

              <div class="clear"></div>

      </div>
    </div>
  </body>
</html>

Exercise 1

In this exercise, you should add a second page to the Try It Out form at the end of the chapter (registration.html). The table that follows shows the new items you must add to the form.

You should also add the following:

  • An indication at the top of the page as to how much of the form the user has completed

  • A Back button and a Proceed button at the bottom (instead of the Submit button)

Information

Form control

Required

Address 1

Text input

Yes

Address 2

Text input

No

Town/Suburb

Text input

No

City/State

Text input

Yes

Zip code

Text input

Yes

When you have finished, the page should look something like Figure A-16.

Figure A-16

Figure A.16. Figure A-16

Answer

To start, you need to add indicators to show how far the user is through the form. You are indicating that they are at step 2 of 3. So you create an element to contain each of the steps.

If you are following the same approach as you did in the last chapter, you could use a <div> element for each of these steps and call these column1of3, column2of3, and column3of3, or you could just create one class that represents all of them, called step.

In this case, however, you will use an unordered list for each of the steps rather than a <div> element since they are related points.

<ul class="steps">
  <li>Step 1 of 3</li>
  <li class="on">Step 2 of 3</li>
  <li>Step 3 of 3</li>
</ul>

Because you are going to use the CSS float property to make these list items sit next to each other, and because the form is in normal flow, the form might end up sitting next to the three steps unless you use the CSS clear property. When you come to the CSS, you will create a CSS rule that will use the clear property, and attach it to any element that has a class attribute whose value is clear.

<br class="clear" />

Then there is the main part of the form, which collects the address details. You will change the <legend> for the fieldset at the same time as adding the address fields:

<form name="frmExample" action="" method="post">
<fieldset>
<legend>Your address:</legend>

<label for="address1">Address 1: <span class="required">*</span></label>
<div class="input">
  <input type="text" name="txtAddress1" id="address1" size="12" />
</div>

<label for="address2">Address 2: </label>
<div class="input">
  <input type="text" name="txtAddress2" id="address2" size="12" />
</div>

<label for="town">Town / Suburb: </label>
<div class="input">
  <input type="text" name="txtTown" id="town" size="12" />
</div>

<label for="city">City: <span class="required">*</span></label>
<div class="input">
  <input type="text" name="txtCity" id="city" size="12" />
</div>

<label for="zip">ZIP Code: </label>
<div class="input">
  <input type="text" name="txtZIP" id="zip" size="5" />
</div>

Finally, you have to add in the Back and proceed buttons that link between the pages.

<br class="clear" />

  <span class="back"><input type="submit" value="Back" /></span>
  <span class="next"><input type="submit" value="Proceed" /></span>

  <div class="clear"><span class="required">*</span> = required</div>

</fieldset>

</form>

In the CSS, you need to add five new rules to the style sheet. To start off, you set the styles for the unordered list that represents the steps.

.steps {list-style-type:none;}
.steps li {display:inline; float:left; width:100px; margin:20px;
       padding:5px; color:#ffffff; background-color:#000000;
       border:1px solid #000000;}
.steps .on {border: 1px solid #666666; background-color:#efefef;
       color:#000000; background-color:#ffffff;}

You also need to add the class that describes how to clear content that comes after floated elements:

.clear {clear:both;margin:20px;}

Finally, in order to make the next button sit to the right of the form, you need to float that element to the right of the fieldset:

.next {float:right;}

Exercise 1

Create a script to write out the multiplication table for the number 5 from 1 to 20 using a while loop.

Answer

The exercise is based around a counter (to work out where you are in your tables); each time the code is run, the counter increments by 1. So, you need to make sure the counter can go up to 20, rather than 10. This goes in the condition of the while loop:

while (i < 21) {

Then you need to change the multiplier, which is both written out and used in the calculation:

document.write(i + " x 5 = " + (i * 5) + "<br />");

The final code should look like this:

<script type="text/JavaScript">
i = 1
while (i < 21) {
 document.write(i + " x 5 = " + (i * 5) + "<br />");
  i ++
}
</script>

As you can see, this code is no longer than the loop in ch11_eg09.html, but it writes out twice the numbers, which really shows you the power of using loops in your code.

Exercise 2

Modify ch11_eg06.html so that it can say one of three things:

  • "Good Morning" to visitors coming to the page before 12 p.m. (using an if statement).

  • "Good Afternoon" to visitors coming to the page between 12 and 6 p.m., again using an if statement. (Hint: You might need to use a logical operator.)

  • "Good Evening" to visitors coming to the page after 6 p.m. up until midnight (again using an if statement).

Answer

This script needs to use the getHours() method of the date object to determine the time and then uses if statements to check the appropriate time for each statement presented to the user.

Note how the afternoon uses a logical operator to check that it is after 12 but before 6 p.m.

<script type="text/JavaScript">
  date = new Date();
  time = date.getHours();

  if (time < 12)
  document.write('Good Morning'),

  if (time >= 12 && time < 18)
  document.write('Good Afternoon')

  if (time >= 18)
  document.write('Good Evening'),
</script>

Exercise 1

Your task is to create a validation function for the competition form in Figure A-17.

Figure A-17

Figure A.17. Figure A-17

The function should check that the user has done the following things:

  • Entered his or her name

  • Provided a valid e-mail address

  • Selected one of the radio buttons as an answer to the question

  • Given an answer for the tiebreaker question and that it is no more than 20 words

These should be in the order that the controls appear on the form.

Here is the code for the form:

<form name="frmCompetition" action="competition.aspx" method="post"
    onsubmit="return validate(this);">
<h2>An Example Competition Form <br />(Sorry, there are no real
prizes!)</h2>
<p> To enter the drawing to win a case of Jenny's Jam, first answer
  this question: "What color are strawberries?" Then provide an answer for
  the tie-breaker question: "I would like to win a case of Jenny's Jam
  because..." in no more than 20 words.</p>
<table>
  <tr>
    <td class="formTitle">Name: </td>
    <td><input type="text" name="txtName" size="18" /></td>
  </tr>
  <tr>
    <td class="formTitle">Email: </td>
    <td><input type="text" name="txtEmail" size="18" /></td>
  </tr>
  <tr>
    <td class="formTitle">Answer: </td>
    <td><input type="radio" name="radAnswer" value="Red" /> Red<br />
          <input type="radio" name="radAnswer" value="Gray" /> Gray<br />
          <input type="radio" name="radAnswer" value="Blue" /> Blue
    </td>
  </tr>
  <tr>
    <td class="formTitle">Tie breaker <br/ ><small>(no more than 20 words)
    </small>:
</td>
    <td><textarea name="txtTieBreaker" cols="30" rows="3" /></textarea></td>
  </tr>
  <tr>
    <td class="formTitle"></td>
    <td><input type="submit" value="Enter now" /></td>
  </tr>
</table>

</form>

Answer

The validate() function for this example uses techniques you learned about in Chapter 12. It starts off by setting a variable called returnValue that will either be true or false when the function finishes running—it starts off with a value of true, which is switched to false if any of the form fields fail to meet the requirements.

<script type="text/JavaScript">

  function validate(form) {
    var returnValue = true

First you have to check whether the value of the txtName field has a value in it:

var name=form.txtName.value
if (name=="")
  {
    returnValue = false;
    alert("You must enter a name")
    document.frmCompetition.txtName.focus();
  }

Next you have to check whether the e-mail address follows the format it is supposed to. If the address is empty, it will not match the regular expression; therefore you do not need to check if the control is empty first:

var email=form.txtEmail.value
var rxEmail = /^ w(.?[w-])*@w(.?[w-])*.[a-z]{2,6}(.[a-z]{2})?$/i;

if (!rxEmail.test(email))
  {
    returnValue = false;
    alert("You must enter a valid email address")
    document.frmCompetition.txtEmail.focus()
  }

Next you must loop through the radio buttons to see if an answer was provided. This involves looping through the buttons and testing whether each button has the checked property. If a radio button has been checked then a variable (in this case called radioChosen) is changed to have a value of true. Once all of the radio buttons have been looped through, there is a conditional if statement checking whether the value of this attribute is true or false.

var radioChosen = false;
var radioButtons = form.radAnswer;
for (var i=0; i<radioButtons.length; i++) {
if (radioButtons[i].checked)
  {
  radioChosen=true;
  }
}

if (radioChosen == false) {
  returnValue = false;
  alert("You did not answer the question");
}

Finally, you come to the <textarea> element and the tiebreaker. This one needs to have a value, but must not be longer than 20 words. To start then, it is checked to see if it has any value at all:

var tieBreaker=form.txtTieBreaker.value
if (tieBreaker=="")
  {
    returnValue = false;
    alert("You must enter an answer for the tie breaker")
    document.frmCompetition.txtTieBreaker.focus();
  }

Then the value entered is split into separate words using the split() function of the string object and a regular expression. Because the split() function splits the string after spaces, you can check how many words were entered simply by finding out the length of the array created by the split() function. Because the array is zero-based, you need to find out whether the number of items in the array is less than or equal to 20. If there are too many words, the user is warned and told how many words she entered in order to help her make the response shorter.

var tieBreakerWords = tieBreaker.split(/s+/g);
wordCount = tieBreakerWords.length;

if (wordCount > 20) {
  returnValue = false;
  alert("Your tie breaker answer must be no more than 20 words. You entered"
  +wordCount+ "words.");
  document.frmCompetition.txtTieBreaker.focus();
}

That is the final test and the returnValue (either true or false) indicates whether the form will be submitted or not.

return returnValue
}

</script>

There were no exercises in Chapters 13 or 14.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.162.65