This appendix covers the answers to each of the exercises at the end of each chapter.
Mark up the following sentence with the relevant presentational elements.
The 1st time thebold
man wrote initalics
, he underlined several key words.
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
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>
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.
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>
Go back to the pages in the sample application and make sure that you have updated the navigation for each page.
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>
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.
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>
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.
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.
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.
Where should the <caption>
element for a table be placed in the document and, by default, where is it displayed?
In what order would the cells in Figure A-5 be read out by a screen reader?
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.
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>
Create an e-mail feedback form that looks like the one shown in 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).
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>
Create a voting or ranking form that looks like the one shown in 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>
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>
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).
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>
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).
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>
In the exercises for this chapter, you are going to continue to work on the Example Café web site:
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.
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.
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;}
Create a CSS rule that will make the following changes to the navigation:
Add a single-pixel gray border on the top and bottom.
Give it 20 pixels of margin above and below the gray lines.
Give it 10 pixels of padding on the top and bottom in the box.
Add a margin to the right of each link in the navigation.
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;}
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.
Increase the gaps between each line of text to 1.3 em.
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.
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.
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;}
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.
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;}
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.
You can find the source XHTML file (ch08_exercise2.html
) with the download code for this chapter.
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;}
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
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
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.
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>
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.
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;}
Create a script to write out the multiplication table for the number 5 from 1 to 20 using a while
loop.
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.
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).
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>
Your task is to create a validation function for the competition form in 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>
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.
3.12.162.65