CSIS 1
Lab 2.1 Debugging HTML Web Pages
In this lab we will be practicing HTML debugging using web pages from past student
projects. To begin, visit the CSIS 1 webpage, then click on the link Lab2p1.zip and
extract (unzip) the files and store them in your network folder. Ask the instructor if you
need help with this step.
Problem 1:
Open the folder Assignment5, then open folder Problem1 and click on the file index.htm.
It should look like the following:
Is this what the web page looks like? You’ve probably noticed a few errors in the way it
looks compared to the picture above. We’re going to apply the debugging steps
mentioned in the lecture to track down the errors in the web page.
As we go through the process, remember these following steps in your debugging
practice from the textbook:
1) Check that the error is reproducible
2) Make sure you know what the problem is
3) Check all the "obvious" sources of error
4) Isolate the problem
5) If you reach a dead end, reassess your information; then step through the process again
6) As you work, make predictions about what should happen, then verify they’re fulfilled
Step 1) Reproducing the error
This step is all about making sure we really have an error and not just a temporary glitch
in the system. One way to reproduce the error is to close your browser and reopen the
file. To get another view of your page, you might look at it in a different browser.
Firefox is loaded on our lab computers. If you are doing this from home, you can
download the Firefox web browser at http://www.mozilla.com/firefox/
A more drastic step, if you suspect the problem is system wide (and we don’t) would be
to reboot your computer—but don’t do this now, it’s not necessary. After rerunning your
browser, is the error still there?
Another way to reproduce the error, and something you MUST do before continuing, is
to make a copy of the original file index.htm called indexBackup.htm so you can
return to this file if your debugging process goes awry. Does the error occur when you
load indexBackup.htm?
You can continue by modifying either file index or indexBackup
Step 2) What is the problem?
So that you can clearly attack the problems one at a time, make a list of all the things that
you find wrong with the webpage compared to the picture above. It may turn out that one
error in HTML may cause more than one mistake in the browser view of the page, or one
mistake in the way the page looks can be caused by several errors. But we can use this
list later to check that we have found and corrected all the necessary mistakes.
Mistakes in how the page appears in the browser:
1)
2)
3)
Step 3) Check the "obvious"
What are “obvious” webpage errors? The likely suspects can be quite long. But before
checking your html, if you have a red X where a picture is supposed to be, an obvious
error is…is the picture in the same folder? These kinds of errors result when you copy a
webpage to a floppy disk or server, and forget to copy the picture as well. If you’re
missing some expected text, is the text actually in the HTML file, but not being
displayed—or is it just not in the file (obvious error).
Other common HTML errors usually will include the following:
1)
2)
3)
4)
forgetting to close a tag
Improper nesting of tags
Missing < or > on a tag
Pictures: wrong filename,
<bold> without a </bold>
<bold><italics> XYZ Industries </bold></italics>
<bold
picture.jpg instead of picture.jpeg
Error number 4 is particularly challenging if your Windows system is hiding file
extensions of known file types. Sometimes the icon indicates that it is a JPEG file when
in fact the extension is .jpg (either .jpg or .jpeg qualify as JPEG files. Likewise, .htm
and .html qualify as HTML files)
To reduce the likelihood of error 4, make Windows show all file extensions. You can do
this on your computer by opening a window (click on Start>MyComputer), then choose
Tools>Folder Options, select the View tab, then uncheck the box “Hide extensions for
known file types” to make the check mark disappear (see below). Then click Apply to
All Folders, then click OK and close the MyComputer window. You will now see the
full name of all your files in every folder you visit.
Step 4) Isolate the problem
This step involves focusing in on the area you suspect the problem is occurring. If you’re
having problems loading an image, the problem will probably be located near the <img
src > tag. A problem involving a hyperlink will usually be near those tags, etc.
Spend some time exploring the file and see if you can discover any of the errors.
Step 5) Still Stuck?
If the answer isn’t popping out at you, you may need to revisit the above steps one more
time. Debugging is often the process of immersing yourself deeper and deeper into the
problem until your unconscious brain gets involved. When this happens, the error will
often leap out at you, either while looking at the page or while doing an unrelated
activity.
Another great approach is to print out the file and mark it up with a pencil, highlighting
all the open/close tags and clarifying the structure of the file (where one section ends and
another begins.
One final hint, for this problem, is that all the errors involve either the addition or
deletion of a single character. If you find yourself making major changes to the file, you
may need to backtrack to your saved copy and start again.
Step 6) Make predictions
Making predictions about what should happen when you change something is another
good technique. If the image link isn’t working, try loading a different image. You are
trying to solve a crime like a detective, and you need more data. You can generate your
own data by running your own experiments.
You can also experiment with Simplifying The Problem. For example, make a new
page that only loads the problem image.
Step 7) Record your corrections
After you have made your corrections, record them on the answer sheet for Assignment
5. In the process of searching for the cause of the viewing errors, you may discover other
mistakes that didn’t change the way the file is viewed. Record those as well.
Problem 2:
Open the Problem 2 folder and click on file project1.html. It should look like this:
Use the debugging steps to identify the errors, filling in your answers on the Assignment
5 handout.
Problem 3
Go to Problem 3 folder, open file parta.htm and debug this page as well. Record your
corrections on the Assignment 5 handout