1 / 25

The dirty dozen.

The dirty dozen. An in-class debugging exercise . All based upon real errors. 1. What is missing?. <!DOCTYPE html> <HTML > < meta charset="utf-8"/> <Title>Alex B Cook</Title> <h1>Alex</h1> Having a dog can be a very rewarding experience.

aolani
Télécharger la présentation

The dirty dozen.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The dirty dozen. An in-class debugging exercise. All based upon real errors.

  2. 1. What is missing? <!DOCTYPE html> <HTML> <meta charset="utf-8"/> <Title>Alex B Cook</Title> <h1>Alex</h1> Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware. <h3>Identification</h3> Your dog should wear a collar at all times. : :

  3. 1. Answer : Structure tags <!DOCTYPE html> <HTML> <meta charset="utf-8"/> <head> <Title>Alex B Cook</Title> </head> <body> <h1>Alex</h1> Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware. <h3>Identification</h3> Your dog should wear a collar at all times. : :

  4. 2. Why is my bulleted list not working? <bl> <li>American Bobtail<li> <li>Burmese</li> <l1>Egyptian Mau <li>Manx <liSiamese</li> <li>Sphynx<li/> </bl>

  5. 2. Answer:Before After <bl> <li>American Bobtail<li> <li>Burmese</li> <l1>Egyptian Mau <li>Manx <liSiamese</li> <li>Sphynx<li/> </bl> <ul> <li>American Bobtail</li> <li>Burmese</li> <li>Egyptian Mau</li> <li>Manx</li> <li>Siamese</li> <li>Sphynx</li> </ul> End li tags are not required. Always watch out for i vs 1.

  6. 3. Why does my class not work? <h3>Visit the Vet</h3> Your dog should be checked with a local veterinarian. <span class bigbold>He should be fully vaccinated.</class> Booster vaccination will be required yearly. It is especially important that your dog is neutered before he comes in contact with other dogs. Neutering will prevent many of the dogs more anti-social habits. <h3>The First Day Home</h3> It is best to keep him on a leash. : :

  7. 3. Answer : <h3>Visit the Vet</h3> Your dog should be checked with a local veterinarian. <span class=“bigbold”>He should be fully vaccinated.</span> Booster vaccination will be required yearly. It is especially important that your dog is neutered before he comes in contact with other dogs. Neutering will prevent many of the dogs more anti-social habits. <h3>The First Day Home</h3> It is best to keep him on a leash. : :

  8. 4. What is the one littler error? <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" media="screen" href="project5.txt" /> <title>Alex B Cook</title> </head>

  9. 4. Answer: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" media="screen" href="project5.css" /> <title>Alex B Cook</title> </head>

  10. 5. A few problems? <img src="images/riley.jpg" alt=Riley is a 5 year old Shepard /> <ficaption> <a href="sm-funny.jpg">funny.jpg</a> </ficaption> The image files are in the same folder as the page with this code.

  11. 5. Answer: <img src="images/riley.jpg" alt=Riley is a 5 years old /> <ficaption> <a href="sm-funny.jpg">funny.jpg</a> </ficaption> The image files are in the same folder as the page with this code. <img src="riley.jpg" alt=“Riley is a 5 years old” />  removed images <figcaption> <a href="funny.jpg"><img src=“sm-funny.jpg”> </a> </figcaption>

  12. 6. What is wrong here? <table> <td>The penalty for killing a cat, 4,000 years ago in Egypt, was death. <td>95% of cat guardians admit they talk to their cats. <td>A cat can be either right-pawed or left-pawed. </tr> <td>A cat can jump as much as seven times its height. <td>A cat has 230 bones in its body. A human only has 206 bones. <td>A cat has four rows of whiskers. </tr> <tr colspan="2">Source: http://www.pets90210.org/trivia.asp</tr> </table>

  13. 6. Answer: <table> <tr> <td>The penalty for killing a cat, 4,000 years ago in Egypt, was death.</td> <td>95% of cat guardians admit they talk to their cats.</td> <td>A cat can be either right-pawed or left-pawed.</td> </tr><tr> <td>A cat can jump as much as seven times its height.</td> <td>A cat has 230 bones in its body. A human only has 206 bones.</td> <td>A cat has four rows of whiskers.</td> </tr><tr> <td colspan=“3">Source: http://www.pets90210.org/trivia.asp</td></tr> </table>

  14. 7. Why does mainnav not show skyblue and why does my class info not work? td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } h1, h2, h3, h4, p { font-family: Verdana, Arial, Helvetica, sans-serif; } #mainnav { background: skyblue: text-align: center; margin: 0; padding: 0.25em; } #info { background-color: #8BB381; }

  15. 7. Answer: Why does mainnav not show skyblue and why does my class info not work? td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } h1, h2, h3, h4, p { font-family: Verdana, Arial, Helvetica, sans-serif; } #mainnav { background: skyblue;  change colon to semicolon text-align: center; margin: 0; padding: 0.25em; } .info {  a class should have a period before its name background-color: #8BB381; }

  16. 8. Three style errors. .content first-letter { font-size: 3em; float: left; line-height: 0.8em; } footer .callout:before { content: images/.globe.png); } .left, .right { width: 200px; height: 150px; position: absolute; top: 130px; index: 2; }

  17. 8. Answer: .content :first-letter {  missing colon font-size: 3em; float: left; line-height: 0.8em; } footer .callout:before { content: url("images/globe.png"); .left, .right { width: 200px; height: 150px; position: absolute; top: 130px; z-index: 2; }

  18. 9. My links do not work. <p id="mainnav"> |<a href="project3/project3.html">Project 3</a> | <a href="../../project4/project4.html" target=blank>Project 4</a> | <a href="web.gccaz.edu/~abc1234567/lesson5/unit/index-sb.html">Unit E</a> | <a href="http://www.azrescue.org" target="_blank">Dog Rescue | <a href="who">Bottom of Page</a> </p>

  19. 9. Answer. <p id="mainnav"> |<a href="project3/project3.html">Project 3</a> | <a href="../../project4/project4.html" target=blank>Project 4</a> | <a href="web.gccaz.edu/~abc1234567/lesson5/unit/index-abc.html">Unit E</a> | <a href="http://www.azrescue.org" target="_blank">Dog Rescue | <a href="who">Bottom of Page</a> </p> <p id="mainnav"> |<a href="../../project3/project3.html">Project 3</a> | <a href="../../project4/project4.html" target=“_blank”>Project 4</a> | <a href=“http://web.gccaz.edu/~abc1234567/lesson5/unit/index-abc.html">Unit E</a> | <a href="http://www.azrescue.org" target="_blank">Dog Rescue</a> | <a href=“#who">Bottom of Page</a> </p>

  20. 10. What is incorrect? : <h3>Be Consistent </h3> Your new dog must learn a whole set of new rules. Be patient and be consistent. If you want him off the furniture, don't allow him to sit on the couch "sometimes". Don't allow him to do something one time and forbid it another. <br /> </body> </html> Your name: Alex b Cook <br /> Your section number: HTML5,CSS3 Unit Z Project 0

  21. 10. Answer: End body and html tags : <h3>Be Consistent </h3> Your new dog must learn a whole set of new rules. Be patient and be consistent. If you want him off the furniture, don't allow him to sit on the couch "sometimes". Don't allow him to do something one time and forbid it another. <br /> Your name: Alex b Cook <br /> Your section number: HTML5,CSS3 Unit Z Project 0 </body> </html>

  22. 11. Can you find 9 errors? Style sheet for TASK h2 h3 { text-align: center; h4 { text-align: right } #resp { margin left: auto; margin-right; auto; border style: solid; border width: 0.1em; padding: 1; }

  23. 11. Answers: /* Style sheet for TASK */ h2, h3 { text-align: center; } h4 { text-align: right; } #resp { margin-left: auto; margin-right; auto; border-style: solid; border-width: 0.1em; padding: 1em; } • Missing comment tags • Missing comma • Missing } • Missing ; • Missing – • ; should be a : • Missing - • Missing – • Missing em

  24. 12. What is incorrect? <!DOCTYPE html> <HTML> <head> <meta charset="utf-8"/> <Title>Alex B Cook</Title> <h1>Alex</h1> </head> <body> <p>Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware.</p> <h3>Identification</h3> :

  25. 12. Answer: Tags belong in body <!DOCTYPE html> <HTML> <head> <meta charset="utf-8"/> <Title>Alex B Cook</Title> </head> <body> <h1>Alex</h1> <p>Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware.</p> <h3>Identification</h3> :

More Related