Appendix 2
Problem-Solving Tips
My Code Doesn’t Work!
When you are learning to code, you'll have a lot of situations where your code just doesn't work. Things look wrong, or don't validate, or look significantly different on different browsers.
Most of the time it's because of simple things that break your code's ability to work, especially depending on which doctype you chose. Here are a few things to keep an eye out for:
Placement
• Your web page must have open and closed html tags surrounding the head and body.
• Your head tags must open and close before you open the body tags: <head></ head><body></body>
• NO tables, text tags, styles, etc. ever go inside the head section of your website.
• All your text, image, link, and styling tags need to be in the body of your web page
Validation Hint: If your page has several dozen errors, you likely have a problem with your doctype, opening html tag, and/or metatags.
Tags
• Make sure you have open and closing tags for tags that wrap around something: Ex. <p>text here</p>
• Make sure your closing tag has a slash in it: Ex. </p>
• Make sure you open and close the same tags:
• NO <h1></h2>
• YES <h2></h2>
• Check that you did stand-alone tags right: <br />, <hr />, <img />
Validation hint: If you get an error mentioning some part of the <p>, <td>, and like tags, look at both the line the error has hit on AND the lines above it. Often you will find you forgot to close another tag set, like ending a table row before starting a new table row.
Nesting
You need to nest tags properly:
NO: <p><em></p></em> YES: <p><em></em></p>
Consider: <table><tr><td><p><strong>text</strong></p></td></tr></ table>
Validation hint: You might get a message stating that some tag or element ‘can't be used in this location”. Use your cursor to highlight your tag pairs to make sure everything nests properly.
Mistyping
• Close all quote marks you open: Ex. <p style=”color:red;”>
• Check for missing carets: Ex. NO: <p> </p NO: <!--comment--
• Use the = sign when needed: Ex. NO: width-”20%” YES: width=”20%”
• Check coding spelling: NO: img scr
• If you see odd symbols showing up in your browser, you may have used a key- board key to make a symbol, such as the &. You will need to instead use the HTML character code for that symbol.
• Use hex colors properly, with the # sign before the color code. Ex. NO: color:ccc; YES: color:#ccc;
Validation hint: You can get all sorts of weird little warnings, but check the noted line, and the line above and below, very carefully for mistyped tags, styles, carats, punctuation, etc.
Images
• Put the correct location of the image in your code
• Verify the image you need is actually in the location you code
• Type the correct image extension - .jpg, .gif
• Check to see that you have a space before you close your img tag: Ex. <img src=” />
• Make sure you added the alt tag and the title tag.
Validation hint: A main image error is that you have not added the mandatory alt tag. Always add both the alt and title information in the image for accessibility purposes.
Links
• Be sure to spell and space the link right: Ex. NO: <ahref=””>, YES: <a href=””>
• Make sure to wrap your linking info around the item to be clicked: <a href=”url”>linktext</a>, <a href=”url”><img src=”” /></a>
• Make sure to always have the title tag in your link tag: Ex. <a href=”url” title=”image info”>
File Not Getting Found?
• Absolute urls - full length, used for external links, redirect pages
• Relative urls – the link name is relative to file location
• Moving down a level (foldername/filename)
• Moving up one level (../filename
• Moving up a level to another folder in that level (../foldername/filename)
• Moving up multiple levels (../../filename)
Validation hint: Usually any error with your link will be because you forgot to close it with the </a> tag, or you did not nest the closing tag in the right place.
Styles
• Can only be used inside of a style=”” attribute for another tag, such as <p style=””></p>.
• ALL rules need to have the attribute/value paired style shown after style=” and must close with another “ (quote marks).
• General use and format: <tag style=”ruleattribute1: value; ruleattribute2: value;”> </tag>
• All measurements need a qualifier - px, %, etc.
• Inside the style quote marks, do not use the equal = sign - use the colon : instead.
• Every attribute/value pair needs a semi colon ; to ‘finish' it.
• Remember there are no more font colors. Use color:color;
Validation hint: Errors will usually be mistypes, using the colon instead of the semi-co- lon at the end of a value rule, using the = sign instead of the : inside the style=”” space, and using deprecated code like font color.
Validation hint #2: Always use the inline style rules instead of old deprecated tags, since your validator will find tons of errors, like font face=, align=, valign=, font color=,
Seeing Code Changes
Sometimes you do the work and make code changes, and you can't see any difference.
• Save your file after changing code.
• Refresh your browser when testing changes to your code.
• If your browser seems “stuck”, try closing it and opening it or another browser after 30 seconds.
• Make sure that you check any pages you upload to your web host using the full website url, so you can make sure it transferred properly.
Understanding the W3C Validator Error Messages
Unfortunately, the W3C validator messages are written for code developers, not normal designers trying to make sure their web pages will work properly for all browsers. Here are a couple tricks of the trade, plus I listed some Validation Hints above.
Don’t panic.
• Focus on correcting only the first error or two in your original code, then revali- dating the full code of the page you changed. Often you'll solve several errors that appear at one time when the first ones are corrected.
• Look for the line number the error is referring to and find it in your Text Editor.
• If you see several references to one specific line number, carefully go over that line to find out what is wrong: nesting, mistypes, missing characters, etc. This will usually solve all the repeat errors for that line in the Validator/
• Look at the error note for anything that looks familiar, and for any bit of code highlighted in red. Usually, this means the error has hit when the validator passed over this highlighted bit of code, which means something in the line, or within the lines immediately above it, is incorrect.
• If you really aren't getting the point of the error message, look over the referenced line in your text editor, and check the code coloring carefully to see if it is off (like all green, tags not being blue but purple, etc.) The incorrect color can also help you discover what is wrong.
• If you see errors stating ‘deprecated' and/or with things like align=, valign=, font color=, etc., you'll know you are not using the inline style rules and that you should be.