In this lab you will debug a web page with embedded CSS. There are errors in both the HTML and CSS.
Save this HTML file to your H drive as "Butterflies.html". To do so, right-click on the link and choose "Save Link As...". Also save this image as "lmeli.jpeg", this image as "pandi.jpeg", and this image as "psiby.jpeg" using the same technique. Save all files in the same folder and spell the file names exactly as written!
Open the file "Butterflies.html" in Firefox or Chrome. Do not use IE. Also open the file in Notepad++. Carefully note several problems on the page and fix them one at a time. Use the debugging strategy we discussed in class: reproduce, pinpoint, eliminate the obvious, and separate the working from the non-working. Find and fix all errors so the page appears like this.
Before you begin fixing errors, though, reformat the document so it's much more readable. Use whitespace to align tags and group related data (e.g., table rows). You will have problems detecting errors otherwise. Note how the head section is formatted much neater than the body. The formatting of the rules in the "style" section needs work, though. See the HTML source for this document for an example of a cleanly formatted page. One third of your grade (33%) will be based on the readability of your HTML source code.
Submit file "Butterflies.html" as "Lab7". Ensure you only modified "Butterflies.html" and used the file names given above.
