Active Classes
BT109
 
Student Resources
Tips/Resources
Past Classes
Tutoring
 
 
Office: BE3175c, no phone
Mailbox: BE3176
Hours: Appointment only

 

 

  • flags

    Translate This Page To:

    Powered by: ALS & Google

  • Solving Problems in Code


    My Code Doesn't Work! What Gives?

     

    When you are learning xhtml code, you'll have a lot of situations where your code doesn't work. Most of the time it's because of simple things that break your code's ability to work. Here are some 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 web site.
    • 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.

     

    Deprecated tags and values

    Most of the tags listed here will pull up error messages in the validator. Sometimes they might not, but do not ever use them anyway! They are deprecated (non-standard, phased out)

    • center
    • font
    • basefont
    • menu
    • font
    • br
    • b
    • i
    • u
    • NO on these attributes: align=, valign=, bgcolor=, bgANYTHING=, border=, height=, hspace=, alink=, vlink=, width=, vspace=, size=, hr=noshade, border=, link=, type=, value=

     

    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 curson to highlight your tag pairs to amke 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
    • Use hex colors properly, with the # sign before the color code. Ex. NO: color:ccc; YES: color:#000;
    • 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 right image location in your code
    • Verify the image you need is 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="" />
    • Validation hint: A main image error is that you have not added the mandatory alt tag. Make sure you 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? Keep the following in mind:
      • Absolute urls - full length, used for external links, thank you pages
      • Relative urls - 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.

     

    Refresh!!

    • Save your file after changing code
    • Refresh your browser when testing changes to your code
    • Make sure that you check any pages you uplaod to your web host using the full website url, so you can make sure it transferred properly.

     

    Understand 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.

    • Focus on correcting only the first error or two, then revalidating. Often you'll solve several errors below when the first ones are corrected.
    • Look for the line number the error is referring to.
    • 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 and biy 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 witn things like align=, valign=, font color=, etc., you'll know you are not using the inline style rules and that you should be.

     

    BACK TO TOP