What this session is about

On this page you should (hopefully)...

• Know what comments are and how to use them
• Insert special characters such as the < symbol
• Be more able to find and debug problems in your pages

Comments

When you have a page large enough to take up 20 sheets of printed paper, it can get a little confusing as to what does what. Comments aim to solve this. Comments are visible only in the source-code, you can't see them on the site. There's one in the source-code just below this paragraph.

There, see it? Unless you're reading the source, you won't. To read the source of a page, right click on the page and select "View Source". However, I'm putting the comment in visible form so that you can see how it's done. To start a comment, simply type <!-- and then end the comment with --> much like you would open and close any other tag. Comments are useful for leaving notes in your code about what does what. In addition, if you want to remove some content from the site quickly but don't want to delete it, putting it inside comment tags is a fast way to remove it and not delete it.

Special characters

You know how to make some text appear like this don't you? Well, on the assumption you skipped basic tagging (season 1) you would do so like this. Now ask yourself, how am I making the < and > signs appear? If you guessed "use a tag like <br /> then you're almost right. I am using "HTML entities" or "special characters". There are a lot of them, and I mean a lot of them, as such I'll provide some clever methods of finding them out at the end of the section.

A special character is comprised of 3 parts (much like a tag is). Firstly there is an & (ampersand) symbol. This is created by pushing Shift + 7. After the & comes the character name, in the case of a < it is "lt". Finally, it is closed with a semi-colon (same button as the colon, you just don't need to hit shift). So, to write <strong>I'm strong</strong>, you would need to type the following. Confusing isn't it? Well, it gets better. & itself is actually a special character so each time you need to put one of those in, even if it's as part of the href in a link you have to turn it into a special character. Its name is "amp".

So many symbols!

I'll be quite honest, most of the time I can only remember <, > and & because they're the three I need.

Symbol Caddy is a free Widget for Mac users. It's pretty good and does nothing other than tell you the symbols for different characters.

But fear not, that is not the only option. I Love Jack Daniels .com have a cheat-sheet with all the HTML Entities on it for your perusal and/or printing out. It's also free.

Finally, users of Textmate can hit Ctrl + Escape and a small menu will popup at the bottom of your window, push the right arrow and then scroll down to "Entities", there will be a list of some fairly common ones there and you can add your own yourself or follow the tutorial in Coding Tips - Textmate (Season 2).

Fixing faulty pages

This is actually a lot simpler than you'd think looking at the name, that or I'm just some sort of modern day genius when it comes to coding (I doubt it but I also don't give up hope). When something doesn't work as intended, follow this simple plan and you will (hopefully) find the problem.

1. Look above/before where the problem occurs
2. Look for tag names, it's quite possible you missed a < or >
3. Look for tags that are overrunning and don't stop when they're supposed to, this is especially common when using <div> and <span> tags (we'll come to them later)
4. If using a table and the problem appears before the table, you have almost certainly placed some code in the wrong place, this applies to lists too but is more common in tables due to their complexity
5. Get someone else to look at it, other people can spot our mistakes so much faster than we can