Appendix C
Troubleshooting (FAQs)
This resource lists some of the most common problems encountered when writing HTML. If none of these answers solves the trouble you’re experiencing, try running your page through an online validator, such as the one offered by the W3C at validator.w3.org. A service like this tests your page against the HTML specifications and displays a list of errors that makes it easy to locate problems.
Or, you could use Dave Raggett’s HTML Tidy program (available for download at http://sourceforge.net/projects/tidy/). This handy program actually attempts to fix any problems on your page, if possible. It can also display a list of errors to alert you to things you can look for in the future.
Also, consider downloading a few very helpful free add-ons for your Firefox browser. (Don’t have Firefox? Download it here: www.firefox.com.) The following two add-ons are those I find most helpful when coding HTML, especially for pesky details like aligning CSS boxes or tweaking CSS styles. These and plenty of others are available by searching addons.mozilla.org.
• Web Developer gives you a special toolbar filled with features that help you debug and test your pages right within the browser. For more information from the add-on’s creator, visit http://chrispederick.com/work/web-developer/.
• Firebug is different from Web Developer in that it actually lets you edit HTML and CSS live while it is viewed in the browser. For more information from Firebug’s creator, visit http://getfirebug.com/.
Finally, don’t overlook the basic troubleshooting tools built into modern browsers. In most cases, you can access them simply by right-clicking (or control-clicking on the Mac) a page element and choosing Inspect Element.
My Page Is Blank in the Browser!
Yikes! You lost everything? Don’t worry—it’s probably all there, but an unclosed tag or quote somewhere may be causing the browser to ignore everything else on the page.
In my experience, the number-one cause for a page displaying blank or empty in a browser is an unclosed container tag, such as the table tag. So, if your page uses tables, go back through the code and identify each opening and closing table tag to make sure you didn’t leave one off accidentally. Also, be sure to check you’ve closed your title tag.
The number-two cause of a missing section of a page is an unclosed quotation mark. For example, in the following code, the lack of closing quotes in the first a tag causes all the text after it to be considered part of the link URL. No text is displayed in the browser until another set of quotes is encountered that can be considered the closing quotes for the first link.
All I See Is Code in the Browser!
This occurs when the page doesn’t have an HTML extension (such as . htm or . html) or when the page is saved in a format other than text-only. If you encounter this problem, return to your text editor and save the file again, making sure to choose Text Only or ASCII Text from any list of format types. When naming the file, be sure the text editor doesn’t add a . txt extension, because only . htm or . html extensions are recognized as HTML by a browser. Finally, make sure your page includes opening and closing html tags.
My Images Don’t Appear!
When images don’t appear in a page, they are often replaced with a question mark graphic or a broken image symbol. Here’s a quick checklist to run through if you encounter this problem:
• Check filenames Perhaps you named a file image.jpg, but in the HTML, you referenced it as IMAGE.JPG. Any difference at all causes the image to appear “broken” in the browser. In addition, be sure your filename doesn’t include spaces, because those also cause problems.
• Check file locations If you tell the browser your image is in the photos folder when you write your HTML, make sure to upload the image to that folder. If the image is in a different folder, the browser won’t be able to find it.
• Check file types Remember, most graphical editors can view only GIF, JPEG, and PNG files. Other file types, such as BMP or TIFF, may be displayed as a broken image if the browser doesn’t understand them.
• Check img tags It’s common for beginners to write out “image” instead of img when referencing an image. The tag is img, however, not image, and therefore, you must write it as such.
I Tried to Change the Font, But Nothing Happened!
First, make sure the font name is spelled correctly. If it is spelled correctly, make sure you actually have that font running on your system. Try launching your word processor to see if the font is available in that program. If it isn’t, chances are you don’t have that font loaded on your system. You might try a different font or download the font in question. And, remember, your users may not have that font, either.
When I Use a Special Character, It Doesn’t Appear!
This happens for one of two reasons:
• Missing ampersand and/or semicolon Don’t forget, all entities—whether named or numbered—must begin with an ampersand and end with a semicolon.
• Lack of browser support Certain browsers don’t support some entities. If you double-checked that you’re typing the entity correctly and it still doesn’t appear, it might not be supported by your browser.
In something like a trademark symbol, which is not supported by all browsers, try using the superscript tag (<sup>) instead, as in the following example:
My Links Don’t Work!
If your links don’t work, check to make sure you typed them correctly. For example, a link to another web site should look something like this:
while a link to another page in your site might look like this:
Be sure to surround the link name with quotes and, if you are linking to another web site, don’t forget the
http://.Unfortunately, if you are linking to another person’s web site, it may be beyond your control to ensure the link works all the time. If a user clicks a link to another site from one of your pages and that site is unavailable, the link won’t work. For this reason, it’s important to check your links often, making sure they haven’t become extinct. You might also contact the owner of the page you’re linking to, as the owner might be able to provide a specific link address he or she can guarantee won’t change.
My Page Looks Great in One Browser, But Terrible in Another!
Unfortunately, I must say this is not an uncommon problem. In most cases, though, the page’s developer never takes the time to look at the site in another browser and, therefore, never knows how bad the page looks. Take heart—you’re halfway to making your page look great in both browsers just because you know there’s a problem! The following are a few things to consider when you have this problem:
• Did you use Microsoft Word to create your page? This program sometimes adds proprietary code that works great in Internet Explorer, but looks terrible in any other browser. You can use a validation service (such as validator.w3.org) to identify any code that isn’t part of the official W3C spec. In addition, some HTML editors, like Dreamweaver, have a function to delete all the Microsoft HTML code from a Microsoft Word document. If that doesn’t work, keep reading….
• Did you use emerging technologies in HTML5 or CSS3? Certain aspects of these emerging technologies are supported differently by some browsers. This means you may have to create multiple versions of your pages if the formatting is important to the page display, or just know your pages will look different according to the browser used. But before you set out creating multiple versions of your pages, run your page through a validator to look for hidden code errors. The most common reason for pages to display differently in multiple browsers is simply that some browsers are more forgiving than others when it comes to code errors.
Finally, remember some HTML elements are just rendered differently by some browsers. Even though you may have coded your page perfectly, there’s a good chance it still might look different when viewed in certain browsers. The best advice I can offer you on this topic is to test, ask your friends to help you test, and test some more. Previewing your page in as many different browsers and computer systems as possible can help to ensure you know how it will look to the largest number of users.
When I Link My Images, They Have Little Colored Dashes Next to Them!
This happens sometimes when the browser finds a carriage return before it finds the closing a tag for a link, as in the following example:
To eliminate those little dashes next to your images, run all the code on a single link, like this:
I Saved My Image as a JPEG, But the Browser Says It’s Not a Valid File Format!
Open your image in a graphics program like Photoshop and check the color mode (in Photoshop, choose Image | Mode). JPEG files must be in the RGB color mode for the browser to be able to display them. It’s not uncommon for JPEG images to mistakenly be saved in the CMYK color mode.
When this happens, the browser can’t display the image, even though it’s saved in the JPEG file format. To fix this, change the file format to RGB and resave the image as a JPEG.
Strange Characters Are at the Top of My Page!
If you used a word processor to write your HTML—or even if you just copied and pasted some text from Word—you may end up with some characters you didn’t type at the top of your page when you view it in a browser. This occurs when the page contains hidden formatting instructions. To avoid this, return to your file in the editor and save it in Text Only or ASCII Text format, with an . html or . htm extension. Or, if you only copied text from Word, remove all Word formatting to get rid of things like curly quotes or fancy ellipses (or save the file as Text Only), and then try copying and pasting again.
I Added Internal Links to Sections of a Web Page, But When I Click Them, the Browser Launches a Brand New Window!
This occurs when the internal links within the page aren’t defined properly. For instance, suppose you were trying to create a link at the bottom of your web page that took users back to the top of the page. You might use the following code:
However, unless you actually add the code to tell the browser where the top of your page is, the browser won’t know what to do and will just launch a new window. In this instance, you’d need to add the following code near the top of your page:
If you’re saying, “Wait, I already had that code at the top of my page and it still doesn’t work!” then make sure both the
<a name> reference and the <a href> reference match exactly. So if you used “TOP” in the <a name> reference, make sure to use “TOP” and not “top” in the <a href> reference.I Specified One Color, But Got a Totally Different One!
This has happened to me several times, and it’s caused by something that’s easy to fix but hard to spot. Consider the following code:
Did you spot the missing quotation mark after the background color value? That simple omission can cause the background color to be rendered as some odd concoction of the #336699 and #ffffff colors. So if your colors start behaving oddly, first check your quotation marks. Then make sure you haven’t forgotten a hash mark (#), because missing hash marks can also cause colors to display incorrectly, or not to display at all! Finally, confirm you’ve included all of the necessary digits or characters for the color value.
I Need to Protect Some of My Pages from Unwanted Visitors!
Suppose you uploaded some photos of your children to a web site and now want to restrict the pages so that only your friends and family can gain access. You can add simple password protection to your site to do just that, but keep in mind most simple password protection scripts won’t keep the pros out. (If someone is really determined to get in, they’ll be able to unless you add more secure features to the computer your site is hosted on.)
In any case, if you’re interested in adding password protection to your site, check out some of the following sites for some scripts that’ll help:
• JavaScript www.javascriptsource.com/passwords/
I Need to Prevent People from Stealing My Images!
Along with the question about password protection, this is another one I am asked quite frequently: “How can I protect my photography from the casual Internet thief?” Quite honestly, you can’t. And most likely, you don’t need to. Consider what we’re talking about here—in the vast majority of cases, any photos you put on your web site are only 72 dpi (screen resolution).
This means when someone goes to print your 72 dpi photo, they will see a pretty poor representation of the image because it’s so low in file resolution. To really get a nice print of an image, you need at least 300 dpi in file resolution. My guess is that no one can get that high a resolution file from you without asking for it (or breaking into your house and stealing it off your hard drive), so there’s little need to worry. Hey, if the Louvre Museum (www.louvre.fr) is okay with putting photos of their artwork on a web site, you can be okay with it, too.
With that said, there are scripts available that can attempt to prevent users from right-clicking your images and saving them to your hard drives. One example can be found at www.javascriptsource.com/page-details/no-right-click.html. However, users who know what they are doing can disable JavaScript in their browsers or otherwise find ways around this.
If you are a photographer or artist, I suggest you use Photoshop or another graphics program to add a copyright and watermark to your images.
I Tried to Send My Web Page in an Email, But the Page Looked Terrible!
Several things could be happening here. First, you need to make sure the person you’re sending the email to has an HTML-compatible email program. Not all email programs are capable of displaying HTML, and those that do sometimes support only certain aspects of HTML. For example, many email programs don’t support tables or frames, even though they do support images, links, and text formatting. Furthermore, those that are capable of doing so often give the user an option to turn off the display of HTML in emails. Refer to Chapter 16 for tips on how to write pages that do look good in most email readers.
I Updated My Web Page, But I Don’t See the Changes in the Browser!
First, double-check that you saved the file. If you did, indeed, save your changes, and clicking the Refresh or Reload button doesn’t help, try forcing a reload by choosing File | Open Page or File | Open Location and then selecting the file in question. This ensures the browser is looking at the latest version of the file.
In some cases, you may also need to clear the browser’s cache on disk. The cache is a place where browsers store temporary copies of web page files to avoid having to go back to the server to retrieve them multiple times. For example, you can access your browser’s cache by choosing Firefox | Preferences | Privacy, and then clicking the link to clear your recent history.
My Whole Page Is ____________! (Fill in the Blank)
For example, your whole page could be bold or linked or orange, and so forth. Even though this may look like a terrible error, it’s relatively easy to fix. Most likely you’re just missing a closing tag somewhere. For example, if your whole page is a giant link, look in your code for the place you actually wanted to create a link to be sure you included the closing a tag. Or, if all the text on your page is bold, look to make sure you included a closing b tag. Typing something like the following is actually quite common:
At first glance it looks great, but a second look shows the closing tag is actually missing a slash. It should look like the following instead:
My Page Has a White Background in One Browser, But Not in Others!
Some browsers set the default background color of web pages to white, while some other browsers use a default color of gray. If you only test your pages in one browser and forget to specify a background color, other users may complain that your pages look drastically different. To avoid this problem, always specify a background color in your style sheet, even if you only want that color to be white.
TIP
When you do specify a background color, be sure to set the text color to something readable. This is a common reason for “blank” pages: the text and background are the same color!
I Shrank My Images, But They Still Take Forever to Download!
How did you shrink your images? Did you use HTML to do so, within the height and width attributes of the img tag? If so, then you didn’t really shrink your images. You just specified that they should be displayed smaller within the browser. To really shrink your images and reduce their file sizes, you need to open them in a graphics editor and cut down the physical height and width of the images.
I Embedded a Flash File That Works Fine on My Computer, But Doesn’t Work Properly on Other Computers!
I suspect the other computer doesn’t have the latest version of Flash Player and you haven’t included code to catch that incompatibility. If this is the case, you can notify and give manual instructions for an updated Flash Player on your web page. Or, if you’re up for something a bit more advanced, try implementing the deployment kit, at www.adobe.com/products/flashplayer/download/detection_kit/, which can detect cases in which users do not have the appropriate version of the Flash Player and automatically reroute them. (Most plug-ins automatically detect older players, but Flash Player does not in every case.)
My Tables Look Fine in One Browser, But Terrible in Another!
First, make sure you have closed your table tags, and all tr and td tags have opening and closing versions. Consider the following example:
While some browsers can be forgiving when they encounter sloppy HTML that doesn’t include closing tags, others refuse to display the content at all. The key to making tables that look good across multiple platforms is to use proper HTML and to test it in several browsers ahead of time.
If you continue to have table problems, try turning on the border (adding
border=1 to the opening table tag will do the trick) just to help you see the outlines of your table cells. Sometimes simply making those borders visible will shed light on the problem. After you’ve fixed the problem, the border can be removed with border=0.I Still Have Questions!
If the previous sections haven’t answered your questions, the following are a few more things to try:
• Take a break Looking at HTML code for hours on end can be quite straining, regardless of how experienced you are. If you’re having trouble, take a break and don’t come back to the problem page until you feel rested enough to look at the issue with fresh eyes.
• Check for typos This may sound easy, but with HTML it’s not. I can’t tell you how many times I struggled with a certain page, only to find out three days later that it was all because I misspelled a tag or left out a quote. Printing the page and highlighting anything that seems like a potential problem area helps me. Also, reading the code on paper as opposed to on the screen can sometimes help you look at it differently. As much as 90 percent of HTML problems brought to my attention by students or coworkers involve typos!
• Remove the styles If the page structure is causing headaches, try temporarily removing your style sheet. Viewing the bare-bones page elements can sometimes help structural code problems become more visible. Or, it could help identify the style sheet as the problem. If that’s the case, try rebuilding your style sheet one declaration at a time until you identify the culprit.
• Debug Refer back to the beginning of this chapter where I mentioned the various debugging and troubleshooting tools in the browsers. These can be invaluable for all HTML coders, especially when you feel like you’re hitting your head against a brick wall with a certain bit of code.
• Start fresh Begin a new HTML page and add to it from the problem page, piece by piece. For example, first add the head and title tags. Then save the page and try it in the browser. If that works, add something else. While this may take a while, it certainly can help you identify exactly where the problem lies if you didn’t already know.
• Reread the chapter If you’re having trouble with tables, try returning to that chapter and, perhaps, even re-creating some of the examples. After all, practice makes perfect, right? Well, at least it helps….
• Ask someone else If you don’t have fellow students or coworkers to ask, you could try posting your problem HTML on a troubleshooting bulletin board online to see if anyone else has had the same problem.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.