how to learn html | html basics |
how to fix html problems | html faq | media tutorial | more in this directory

how to fix web page problems

checking your code: it's all yours!

The usual problem with our html or css code is some stupid little thing that we just aren't finding with our human eyes.

The web browser only knows the code that you give it. If "it's not working", it's in the code you gave!

So the only solution is: check your code.

1. At the very least, your page should have the codes you see in this template
   (It doesn't need to have those comments though! But comments that are useful to you are good to have.)
2. All your content should be "in a box" — that is, within an opening and closing tag. For example,
   Paragraph texts should be inside opening <p> and closing </p>
   A list item should be inside opening <li> and closing </li>
   And on like that.
3. If your tag has any properties, the property should always be in quotes. And there should be no spaces before or after the =
   So, do like this: <p align="center">
   NOT this: <p align=center>
   NOT this: <p align = "center">
   

let your own code help you

If you write your code in a clean and organised way, it will be much much much easier to see if something is missing or wrong. See html guidelines and "why clean html" for what is good code.

let your computer help you

There are many useful tools that will check our code. Here are three of the easiest to get (and probably the best!)

1. "Syntax coloring"

Most good text editors and browsers make different colors for different parts (syntax) of your code. If you see the pattern of the colors doesn't look right, you can probably see where your html went wrong.

You can see the syntax coloring in your editor, and also in "view source" in the Firefox browser.

2. Firefox extensions

The Firefox web browser has two extensions for checking our web pages. Extensions are small programs that we can install into Firefox.

The extensions you must have are HTML validator (Tidy) and FireBug. Another one that is nice to have is Web Developer Toolbar.

We can get these extensions (and many others) at https://addons.mozilla.org/en-US/firefox/ and type the name of the extension you want in the search bar at the top of the page.

Installing is very easy — click on "Add to FireFox" and it will download and install.

do i really need to bother with these things?

Well let me say it this way: I have been developing websites, as my profession, for 19 years (since the web began!). These extensions only came out about a few years ago — and i don't know how i lived without them. When i start on a new computer anywhere, i don't even do any web work until i install these extensions. Working without them is like working with one hand tied behind your back!

Read on for an explanation for each of the extensions:

HTML Validator (Tidy)

After you install the HTML Validator, then you will have a little icon in the bottom right corner of your browser. If the html code is all ok, the icon will be a green check mark. If any problem, there will be a yellow triangle with an exclamation point! You can Click on it, or "View Source". At the bottom of the "View source" window will be a separate pane showing any html problems. Each error will show line number, and the errors will be highlighted in the source code.

The most useful thing i can tell you about using this is: Always start fixing, from the top of the list of errors. Many times when you fix one error, several other errors after it will just go away!

FireBug

After you install Firebug, you will have a little "insect" icon in the bottom right corner of your browser. You can click on it, and at the bottom of the page there will be a separate pane showing your html on the left side, and your css on the right, and menus for checking different things.

The most useful thing for us is, click on 'Inspect', and then move your mouse over the part of your web page that is having the problem. Firebug will show the html and css code, and any problems.

This is much easier to do than to explain! Just experiment and find out all that Firebug can show you.

Web Developer ToolBar

This puts a toolbar at the top of your FireFox window, that gives you so many useful things i don't even know them all. Find sizes and other info about images, tables, anything on your page. A little ruler to measure things on the web page. Links to your "view source" and "FireBug". And more more more.

3. Check your code online

You can also check your html online at the w3c website validator.w3.org/ You can upload your page, and it will check it and show any errors.

You can check your css (stylesheet) online at jigsaw.w3.org/css-validator/

fixing your code: divide and conquer

If we are having a problem with a web page, our natural reaction is to want to try to fix the problem right on that page, which often ends up in frustration.

But when someone builds a house, he doesn't throw up an entire wall here and there, build half the roof, and then start building another wall. First one brick, then another brick, then another brick ...

The same principle works for building web pages (and programs)! And this is the real way that real developers (and programmers) do things.

Best thing is to start small, then add things. Don't try to do everything at once in the full page.

So if you are having some problem on a page, just make another, simple, html page, that contains only the code for the problem. Then practice doing stuff with that problem.

Example:
If you are having trouble making a div float to the right:

• Make an html page with one <div> and a little text in it.
  
  Don't even use a separate stylesheet — that will complicate things.
• Just put your style in your div tags or any other tags ...
   <div style="float: right;">
• Then you gradually add the things you want from the real page. Until it breaks and then you learn the next thing :)

3-how_to_fix_html_problems.html
rev. 06 September 2011