As you're working your way though the examples in this eBook at some point you may encounter an error. I can assure you that your error is not a complex computer programming convolution. You simply made a typo.
As your web browser reads your html code and tries to follow your instruction to lay out the webpage, it is extremely forgiving. But it can't read your mind, and as a computer program it's designed to follow your instructions exactly and not do too much thinking on its own. That's why you have to type everything according to the specification.
The html specification is very strict about punctuation. Dots, commas, equal signs, and quotation marks must be in the proper places. Not only that, but if you place a double-quote on one side of a value, you must place a double-quote on the other side. If you place a single-quote on one side of a value, you must place a single-quote on the other side.
HTML is not so picky as to whether you use single-quotes or double-quotes, but they must match in pairs. An example of this is shown below.
Correct:
<img src="imagename.jpg" />
Error:
<img src='imagename.jpg" />
HTML usually just ignores spaces, which is good because it allows you to format your code so that it's easy to understand. But sometimes if you put just one space in the wrong place, and the browser gets all confused. An example of this is shown below.
Correct:
<img src="imagename.jpg" />
Error:
<img src=" imagename.jpg" />
HTML is not so picky as to whether you use upper-case letters or lower-case letters in your code, but they should match. An example of this is shown below.
Correct:
<blockquote>This is my text</blockquote>
Error:
<blockquote>This is my text</BLOCKQUOTE>
Some browsers will ignore case and display your webpage just fine. Other browsers are case-sensitive and will choke if the case of the opening and closing tag don't match. Also, remember we are actually using XHTML here, and being a version of XML it must follow XML's strict rules. So the case of the opening tag and the closing tag must match.
Fixing html errors, or typos, is extremely easy. But sometimes FINDING typos can be a bear. You need to go through your code, carefully focusing on each character, until you find the typo. If you have only a small amount of code that's practical. But if you have a lot of code, wouldn't it be nice if you narrow down the location of the typo by commenting out some of the code and see what parts work?
Shown below is an example of how to comment out text or code so that the browser can't see it.
<!-- the browser can't see this text -->
How can this be used for debugging code? Lets say you typed the html code shown below.
<p><img src="image1.jpg" /><br /> <img src='image2.jpg" /><br /> <img src="image3.jpg" /></p>
You run the page, and only the first image displays. Let's comment out some of the code and see if we can iscolate the typo.
<p><img src="image1.jpg" /><br /> <!-- <img src='image2.jpg" /><br /> --> <img src="image3.jpg" /></p>
Above we have commented out the second line of code. This time when you run the code both the first and third images display. There must be a typo in the code for the second image. You could also use the comment characters as shown below.
<p><img src="image1.jpg" /><br /> <!-- <img src='image2.jpg" /><br /> <img src="image3.jpg" /></p> -->
This is a common way of debugging html. You comment out all but a line or so of code at the top of the page, then run the page. If that part of the code displays okay, you uncover another line or two at the top. As you uncover more lines and retest the code, eventually you'll uncover a line or lines that cause the page to not display.
When you have isolated the lines the that cause the error, you need to go through those lines, carefully focusing on each character, until you find the typo.
Now you may be thinking; why don't I just use my WYSIWYG design application? It never makes any errors. Untrue. While a WYSIWYG design application doesn't make any TYPOS, it does make errors. Any time an application doesn't do what you want, in my opinion, that's an error.
Also, after you've been coding for a while, you'll get so familiar with the symptoms of the various errors that you won't need to debug. You'll just know from experience where the error is.
More HTML Code:
• How to Troubleshoot an HTML Table
• Adding Space Around an Image
• HTML5 Input Type - Email
• The HTML BODY tag
• Changing the Size of an Image on Your Webpage
• The HTML Head Tag
• How to Write and Run HTML
• HTML center Tag
• HTML List Basics
• Checkbox Basics