beginning html xhtml css and javascript phần 9 potx

Appendix A: Answers to Exercises 662 td { color:#000000; padding:2px;} Chapter 8 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 bapp01.indd 662bapp01.indd 662 11/21/09 12:19:31 AM11/21/09 12:19:31 AM 663 Appendix A: Answers to Exercises 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;} bapp01.indd 663bapp01.indd 663 11/21/09 12:19:31 AM11/21/09 12:19:31 AM Appendix A: Answers to Exercises 664 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 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). bapp01.indd 664bapp01.indd 664 11/21/09 12:19:32 AM11/21/09 12:19:32 AM 665 Appendix A: Answers to Exercises 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;} Chapter 9 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 bapp01.indd 665bapp01.indd 665 11/21/09 12:19:32 AM11/21/09 12:19:32 AM Appendix A: Answers to Exercises 666 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 Figure A-15 bapp01.indd 666bapp01.indd 666 11/21/09 12:19:32 AM11/21/09 12:19:32 AM 667 Appendix A: Answers to Exercises 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. bapp01.indd 667bapp01.indd 667 11/21/09 12:19:33 AM11/21/09 12:19:33 AM Appendix A: Answers to Exercises 668 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 > bapp01.indd 668bapp01.indd 668 11/21/09 12:19:33 AM11/21/09 12:19:33 AM 669 Appendix A: Answers to Exercises < 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 > Chapter 10 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. ❑ ❑ bapp01.indd 669bapp01.indd 669 11/21/09 12:19:33 AM11/21/09 12:19:33 AM Appendix A: Answers to Exercises 670 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: Figure A-16 bapp01.indd 670bapp01.indd 670 11/21/09 12:19:34 AM11/21/09 12:19:34 AM 671 Appendix A: Answers to Exercises < 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;} bapp01.indd 671bapp01.indd 671 11/21/09 12:19:34 AM11/21/09 12:19:34 AM [...]... test and the returnValue (either true or false) indicates whether the form will be submitted or not return returnValue } There were no exercises in Chapters 13 or 14 676 bapp01.indd 676 11/21/ 09 12: 19: 36 AM B XHTML Element Reference This appendix is a quick reference to the elements that are in the HTML and XHTML recommendations They are listed with the attributes each element can carry and. .. Specifies the language used in this element version = url Specifies the version of HTML used in the document — replaced by the DOCTYPE declaration in XHTML xmlns = uri Specifies namespaces used in XHTML documents xml:lang = language_type Specifies the language used in this element 691 bapp02.indd 691 11/20/ 09 5:30:28 PM Appendix B: XHTML Element Reference The content of this element should be rendered in... pixels — you must use this property if the image is a link, to prevent borders from appearing 692 bapp02.indd 692 11/20/ 09 5:30: 29 PM Appendix B: XHTML Element Reference height = number Specifies the height of the image in pixels hspace = number Specifies the amount of additional space to be added to the left and right of the image ismap = ismap Specifies whether the image is a server-side image map longdesc... content of the element is an abbreviation Indicates that the content of the element is an acronym Indicates that the content of the element is an address 6 79 bapp02.indd 6 79 11/20/ 09 5:30: 19 PM Appendix B: XHTML Element Reference (Deprecated) Used to place a Java applet or executable code in the page Takes only the attributes listed in the table that follows align = top... number Defines this element’s position in the tabbing order value = string Specifies the value of the parameter sent to the processing application as part of the name/value pair 693 bapp02.indd 693 11/20/ 09 5:30: 29 PM Appendix B: XHTML Element Reference Creates a form input control that is a checkbox a user can check accesskey = key_character Defines a hotkey/keyboard shortcut for... script to run when the element gains focus readonly = readonly Prevents user from modifying content size = number Specifies the number of characters to display for the element 694 bapp02.indd 694 11/20/ 09 5:30: 29 PM Appendix B: XHTML Element Reference tabindex = number Defines this element’s position in the tabbing order value = string Specifies the value of the control sent to the processing application... number Defines this element’s position in the tabbing order value = string Specifies the value of the control sent to the processing application as part of the name/ value pair 695 bapp02.indd 695 11/20/ 09 5:30: 29 PM Appendix B: XHTML Element Reference Creates a form input control that is like a single-line text input control but shows asterisks or bullet marks rather than the characters... same value for the name attribute and create mutually exclusive groups of values (only one of the radio buttons in the group can be selected) accesskey = key_character Defines a hotkey/keyboard shortcut for this radio button checked = checked Specifies that the default condition for this radio button is checked 696 bapp02.indd 696 11/20/ 09 5:30:30 PM Appendix B: XHTML Element Reference disabled = disabled... element Headings from (largest) through (smallest) align = left | center | right Specifies the horizontal alignment of the header within its containing element 690 bapp02.indd 690 11/20/ 09 5:30:28 PM Appendix B: XHTML Element Reference Creates a horizontal rule across the page (or containing element) Supports only the attributes listed in the table that follows [event_name] = script... Specifies that there should not be a 3D shading on the rule style = string Specifies inline CSS style rules for the element title = string Specifies a title for the element width = number Specifies the width of the rule in pixels or as a percentage of the containing element Containing element for an HTML or XHTML page class = classname Specifies a class for the element to associate it with rules . < !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/ 199 9 /xhtml lang=”en”. 676bapp01.indd 676 11/21/ 09 12: 19: 36 AM11/21/ 09 12: 19: 36 AM B XHTML Element Reference This appendix is a quick reference to the elements that are in the HTML and XHTML recommendations. They. text-decoration:underline;} a:link:hover { color:#003 399 ; background-color:#e9e9e9; text-decoration:underline;} bapp01.indd 663bapp01.indd 663 11/21/ 09 12: 19: 31 AM11/21/ 09 12: 19: 31 AM Appendix A: Answers to Exercises 664