Common HTML Mistakes :)
  1. The most common mistakes in HTML are usually just plain human mistakes
  2. Misspelling a tag... Using *here* instead of *href* or using scr instead of *src*...
  3. A Missing closing tag... (i.e. <b> and </b>). If a tag needs to surround something like text, then it must be closed. There are a few exeptions, like <hr> and <br> that do not not use a closing tag...
  4. Failing to surround an attribute with double quotes and quotes should be used for for *all* attributes!
    • (e.g. Incorrect <font color=#ffffff>)
    • (e.g. Correct <font color="#ffffff">)
  5. Missing a quotation mark.... Dropping a quote providing only one of a set for an attribute.(e.g. this="that or this=that" and should be, this="that")
  6. Leaving off one of the brackets -- < > -- that surround a tag, (e.g. Incorrect <font color="#ffffff")
  7. Using the word, *color* instead of *bgcolor* to make the table a differnt color, bgcolor is for tables and color is for fonts...
  8. Unbalanced Tags by mis-matching the starting and ending tags,
    • (e.g. Incorrect <H1> ... </H2>)
    • or (e.g., starting with <OL> and ending with a </UL>)
  9. Failing to include the proper ending tag -- either by omitting the required slash (/), or forgetting the entire ending tag all together, turning your entire page into bold text...
  10. Common Image mistakes,
    • a) The misspelling of *src*... It is src and not scr...
    • b) Calling a gif image when you meant jpg, and vise versa...
    • c) Not using width and height atributes, (Using them makes fast loading pages)
  11. Linking mistakes...
    • a) calling "href" *here*
    • b) Forgetting http:// in a link...
      • (e.g. Incorrect, <a href="www.google.com">)
      • (e.g. Correct, <a href="http://www.google.com">)
    • c) missing one or both quotes, double quotes folks.. ;-)
    • d) forgetting to close the link with </a>
    • e) Providing an incorrect URL in an Anchor tag, causing the link to fail
  12. CAPITALIZING HTML TAGS is wrong, although it will work, it is wrong..
  13. Improper use of form tags... The form tag is a block-level tag, meaning that it starts a new section of your page. It is a common mistake to use the form tags within tables.
    • Incorrect: <table><form><tr><td>..... </td></tr></form></table>
    • Correct: <form><table><tr>.... </tr></table></form>
  14. Improper nesting of HTML tags... HTML tags should/must be closed in the opposite order than which they were opened. Like... and the image below...
    • (e.g. Incorrect <i><b>text</i></b>)
    • should be (e.g. Correct <i><b>text</b></i>)



The Common table mistakes are::
  1. Not closing the <table>, <tr>, or <td> tags
  2. or closing them improperly in the wrong order
  3. Using <tr> and <td> in the incorrect order
  4. Using the *form* tag inside of a table
  5. Placing tables within inline elements, such as <b> or <h1>
  6. Misplacement of formatting tags, (the <b> in the example)
    • (i.e., Incorrect <table><b><tr><td>I am bold</td></tr></b></table>)
    • (i.e., Correct <table><tr><td><b>I am bold</b></td></tr></table>)
  7. Spacing before a </td> (advanced trouble shooting)
  8. Forgetting to set *all* table attributes to zero when going for a seamless table, as the cellpadding and cellspacing defaults to 1 and 2, setting to 0 overrides the default
  9. also in a table, using incorrect wording for the align and valign atribute,
    • (e.g. Incorrect <td valign="center">)
    • (e.g. Correct <td valign="middle">)
      • The align tags are... left, right, and center
      • The valign tags are... top, middle and bottom
      • Note that the td align tag is broke inside of facebook
  10. Text in the Void
    • <table>
      <tr><td>Text in cell</td></tr>
      <tr><td>Text in cell</td></tr>
      HELP! I'm lost in the void!
      </table>
    • Why does that display like this, they ask:
      • HELP! I'm lost in the void!
        Text in cell
        Text in cell
    • It's because "HELP! I'm lost in the void" is in a table (between <table></table> tags), but not in between table cells <td></td>. The browser will dump that info in the "void" out on top of the table (for some browsers)....



Some Basic HTML Codes for you... :)
<center> Here is the center code</center>

<B> Here is the Bold code </B>

<I> Here is the Italics code </I>

<center><B><I>Here is centerd, Bold and Italics Combined</I></B></center>

Here is the under-lining code, <u> So This is Underlined </u>

Here is the strike code, <strike> Makes This strike Out </strike>

Here is the typewriter code, <tt> And the text effect </tt>

Here is the sub script code <sub> and what it Looks Like </sub>

Here is the super script code <sup> and what it Looks Like </sup>



Here are the most common font styles
    Note, To see fonts, they must be installed on the other persons Computer, that is why, it is usually best to use the most common fonts, with that, if the person does not have that font on his/her computer, it will resort to default...
<font face="verdana"> font example verdana </font>

<font face="arial">font example arial </font>

<font face="comic sans ms">font example comic sans ms </font>

<font face="courier new">font example courier new </font>

<font face="impact">font example impact </font>

<font face="Times New Roman">font example Times New Roman </font>

<font face="Trebuchet MS">font example Trebuchet MS </font>

<font face="Georgia">font example Georgia </font>




How to Change Color and Size Of Fonts

<font color="red"> Here is red text </font>

<font color="#ff0000"> Here's Red in Hex values </font>

Here are the Font sizes, they range from 1 to 7

<font size="1"> this is size 1 </font>
<font size="2"> this is size 2 </font>
<font size="3"> this is size 3 </font>
<font size="4"> this is size 4 </font>
<font size="5"> this is size 5 </font>
<font size="6"> this is size 6 </font>
<font size="7"> this is size 7 </font>

You can also combine the font codes all in one font code like this...

<font face="verdana" color="blue" size="3"> and this will be blue verdana size 3 text </font>



Here is How <hr> Lines Work :-)...
    With the <hr> code examples below, there is no closing tag, just the <hr> is all that is needed to make Line dividers in your HTML code,
First the basic <hr>
Second, lets add some color, <hr color="#ff0000"> this can be color name or HEX value as shown...
Third, You can add a "size" to these lines to make the Lines thicker...
<hr color="blue" size="7">
Forth, You can also determine the width...
<hr size="4" width="150" color="#FF9C42">
Lastly, the align tag, left, right or center...
<hr size="6" width="200" color="#A2CD5A" align="right">




Codes to make lists... :)

Besides the Lists below,
    <ul>The ul code makes a nice indentation of a whole
    paragraph, just like you are seeing now... :-)</ul>
Same as the blockquote code
<blockquote>and here is what it will look like</blockquote>
Here is a List with Dots
<ul>
    <li> • this is the first line
    <li> • this is the second line
    <li> • this is the third line
</ul>
Here is a Ordered List with numbers
<ol>
    <li>1. this is the first line
    <li>2. this is the second line
    <li>3. this is the third line
</ol>



Here is How to Add A Image :-)...

<img src="URL of image" width="??" height="???">

1) Right click The Cherries,

2) Then Click Properties

3) You now see, the URL, & the height and width of the image

4) Copy The URL image location

4) Insert the URL where it says, URL of Image in the code above

5) Adjust the width value to suit your needs... or use the size you viewed in the properties in step 3

6) Paste the code in the edit field

7) The code for the Cherries Should look like below...


<img src="http://67.228.183.66/hipstar/cherry.jpg" width="71">


Two Common errors are; a misspelling of src, and a missing "quote".. ;-)

Also Note, using both height and width in your code makes pages load in faster as the computer does not have to think... ;-)




The Hot Spanking Pre Code :-)...


The pre code makes everything stay in place just as you type it,
hehehe.. :-)
<pre>
 (                              *          
 )\ )                     )   (  `         
(()/(          )       ( /(   )\))(    (   
 /(_))`  )  ( /(  (    )\()) ((_)()\  ))\  
(_))  /(/(  )(_)) )\ )((_)\  (_()((_)/((_) 
/ __|((_)_\((_)_ _(_/(| |(_) |  \/  (_))   
\__ \| '_ \) _` | ' \)) / /  | |\/| / -_)  
|___/| .__/\__,_|_||_||_\_\  |_|  |_\___|  
     |_|                                          
</pre>

Naughty Naughty All you Coders... :-)



Making Text and Image Links :-)...
    The Link tag is called a Anchor. Text or Images can be use to make Clickable Links...
Link Anchors start With: <a href="URL of Location"> and close with </A>

Click <a href="http://www.youtube.com/watch?v=_Tor0hZCccE">Going Up the Country</a> To Watch Me at YouTube Rock Out... ;-)

And Makes this Link... Click Going Up the Country To Watch Me at YouTube Rock Out... ;-)

You can make a image a link, Here is a example... Note that the use of border="0" will prevent the image link from having a Highlighted border around it, these links will take you to the full sized cherry... I reduced the image size so the images below, are acting like a thumbnail image... ;-), also note, Facebook seams to prevent the border in the examples below, elsewhere on the web, a blue box surrounds the one image...

<a href="URL Addy"><img src="URL of Image" width="?" height="?" border="0"></A>

With border="0"
Without Border="0"


Basic Table Making Template & Color Chart... ;-)


Below is a basic HTML code to get you started at making fun Diary Pages just like This page you are looking at now.



To Begin, Take notice that each starting code has a closing code to turn the code off, (look at the very first center tag, (Which centers the Table) and then look at the very last center tag, the / turns off a code, That is the basics of html, turn it on, and then turn it off...

The Table Template code above, Is the same table you are reading this in, It is a Table built for You to Cut and Paste and Modify as you learn HTML, and to get you started in Using HTML in your Diary Entries, (note that the quotes in the code are important for proper html)

The width="645" is the maximum width in Pixels allowed inside of facebook, (this table is 645, same as the template) and touches the sides just like you are viewing now, you can change that number for different table widths to suit your needs...

The bgcolor="#F9F3EC" is the tables Background color of the table and can be changed to any hex color value, (see the color chart below for colors you may want to use, ;-), and change "#F9F3EC" which is the background color you are viewing now, to one of the colors you would like to use...

The cellpadding="5" controls a invisible border inside of the table keeping your text and objects off of the sides of the table, look at the edges inside of this table, see the small gap from the sides?, that is what cellpadding does... this value goes from 0 to any number, most never use above 15...

The border="1" is the border you see around this table now, and the number range is 0 to any number, 0 is no border, and usually most never use above 12...

The next 2 tags, <tr> and <td> are for advanced users, they make the rows and cells in a table, they are needed, leave them in, both the opening and the closing tags of them, do not remove them from the template...

The <font size="3"> will make the text in the table to the size of 3, presently size="1" is the smallest font and the font defaults to size="1" inside of a Facebook table, this text your reading is font size="3", the font sizes go from 1 to 7, At the End of the Template Code, is the font closing tag, </font>, which ends the font size 3... ;-)

I included a basic <center> tag for those wanting to center text and images so you can see how the code works. Turn on <center>, write or add a image, then turn off </center>, just like the example shows.

The line break looks like this, <br>, this tag does not need to be closed like the others, so you will NOT see a </br> and this works just like return on your keyboard in comments...

and lastly, the codes that turn off the font and table codes and make it all work, </font> </td></tr></table> </center> ;-)

So, go ahead, copy and paste the Template code into the diary entry and change some colors, some sizes, add your thoughts.. make a cool webpage style diary blog, the more codes you learn, the more fun you will have... ;-)

"#FF8E8E" "#E994AB" "#67C7E2" "#A5D3CA" "#74BAAC" "#F5E8E2"
"#FFA4A4" "#EDA9BC" "#8ED6EA" "#C0E0DA" "#8DC7BB" "#F9F5EC"
"#FFB5B5" "#F0B9C8" "#4FBDDD" "#A6DEEE" "#CFE7E2" "#F9F3EC"
"#FFC8C8" "#F4CAD6" "#DEBCE7" "#C6C6FF" "#C0E7F3" "#F5F5E2"
"#FFEAEA" "#F8DAE2" "#EFCDF8" "#DBDBFF" "#D8F0F8" "#DCEDEA"
"#FAE7EC" "#FFE3FF" "#F8E9FC" "#EEEEFF" "#EFF9FC" "#E7F3F1"
"#D7D78A" "#CEB86C" "#D1D17A" "#DBDB97" "#D6C485" "#E6CCCC"
"#E1E1A8" "#DECF9C" "#DAAF85" "#DAA794" "#DAAC96" "#DDB9B9"
"#E9E9BE" "#E3D6AA" "#DDB791" "#DFB4A4" "#E0BBA9" "#D7ACAC"
"#EEEECE" "#EADFBF" "#E4C6A7" "#E6C5B9" "#DEB19E" "#E8CCBF"
"#E9E9C0" "#EDE4C9" "#E9D0B6" "#EBD0C7" "#E4C0B1" "#ECD5CA"
"#EEEECE" "#EFE7CF" "#EEDCC8" "#EACDC1" "#F0DDD5" "#ECD9D9"
"#F1F1D6" "#F5EFE0" "#F2E4D5" "#F0DDD5" "#F5E8E2" "#F3E7E7"
"#BABA21" "#DFA800" "#FFB428" "#FFBD82" "#FFAC62" "#FF9C42"
"#E0E04E" "#D9C400" "#F9BB00" "#EAA400" "#FFBF48" "#FFA04A"
"#E6E671" "#E6CE00" "#FFCB2F" "#FFB60B" "#FFC65B" "#FFAB60"
"#EAEA8A" "#F7DE00" "#FFD34F" "#FFBE28" "#FFCE73" "#FFBB7D"
"#EEEEA2" "#FFDD75" "#FFC848" "#FFD586" "#FFC48E" "#FFC895"
"#F1F1B1" "#FFE699" "#FFD062" "#FFDEA2" "#FFCFA4" "#FFCEA2"
"#F4F4BF" "#FFECB0" "#FFE099" "#FFE6B5" "#FFD9B7" "#FFD7B3"
"#F7F7CE" "#FFF1C6" "#FFEAB7" "#FFEAC4" "#FFE1C6" "#F9F9DD"
"#27DE55" "#1FCB4A" "#2DC800" "#C8C800" "#FFF2D9" "#FFEBD9"
"#4AE371" "#CDD11B" "#DFDF00" "#59DF00" "#FFE6D0" "#FFE2C8"
"#93EEAA" "#A6CAA9" "#DFE32D" "#32DF00" "#FFF4EA" "#FFF1E6"
"#A4F0B7" "#B4D1B6" "#F2F4B3" "#7CEB98" "#FFF9EA" "#FFF7E6"
"#BDF4CB" "#C9DECB" "#CAFEB8" "#D1FFB3" "#F5F7C4" "#FFFAEA"
"#D6F8DE" "#DBEADC" "#DDFED1" "#DFFFCA" "#FFFFC8" "#FFFBDF"
"#E3FBE9" "#EAFEE2" "#D2FFC4" "#E8FFD9" "#FFFFD7" "#FBFBE8"
"#62D0FF" "#06DCFB" "#01FCEF" "#03EBA6" "#FAFBDF" "#F7F9D0"
"#75D6FF" "#24E0FB" "#1FFEF3" "#03F3AB" "#F2FFEA" "#FFFFE3"
"#8ADCFF" "#3DE4FC" "#5FFEF7" "#E3FBE9" "#F1FEED" "#E7FFDF"
"#A9D7FF" "#99E0FF" "#63E9FC" "#74FEF8" "#62FDCE" "#FCFCE9"
"#99C7FF" "#A8E4FF" "#75ECFD" "#92FEF9" "#7DFDD7" "#CAFFD8"
"#A8CFFF" "#BBEBFF" "#8CEFFD" "#A5FEFA" "#8FFEDD" "#EAFFEF"
"#BBDAFF" "#CEF0FF" "#ACF3FD" "#B5FFFC" "#A5FEE3" "#B5FFC8"
"#CACAFF" "#D0E6FF" "#D9F3FF" "#C0F7FE" "#CEFFFD" "#BEFEEB"
"#E1E1FF" "#DBEBFF" "#ECFAFF" "#C0F7FE" "#E1FFFE" "#BDFFEA"
"#EEEEFF" "#ECF4FF" "#F9FDFF" "#E6FCFF" "#F2FFFE" "#CFFEF0"
"#B0A7F1" "#8EB4E6" "#A5DBEB" "#7BCAE1" "#57BCD9" "#EAFFEF"
"#EAA6EA" "#CEA8F4" "#BCB4F3" "#A9C5EB" "#8CD1E6" "#B8E2EF"
"#FFBBFF" "#EEBBEE" "#DFB0FF" "#DBBFF7" "#CBC5F5" "#BAD0EF"
"#FFCEFF" "#F0C4F0" "#E8C6FF" "#E1CAF9" "#D7D1F8" "#CEDEF4"
"#FFDFFF" "#F4D2F4" "#EFD7FF" "#EDDFFB" "#E3E0FA" "#E0EAF8"
"#FFECFF" "#F4D2F4" "#F9EEFF" "#F5EEFD" "#EFEDFC" "#EAF1FB"
"#FFF9FF" "#F7F5FE" "#F8FBFE" "#DBF0F7" "#EAF7FB" "#C9EAF3"
"#FF9797" "#FF97CB" "#C4ABFE" "#DDCEFF" "#E6DBFF" "#D0BCFE"
"#FFA8A8" "#FFACEC" "#FFA8D3" "#FEA9F3" "#EFA9FE" "#E7A9FE"
"#FFBBBB" "#FFACEC" "#FFBBDD" "#FFBBF7" "#F2BCFE" "#EDBEFE"
"#FFCECE" "#FFC8F2" "#FFC8E3" "#FFCAF9" "#F5CAFF" "#F0CBFE"
"#FFDFDF" "#FFDFF8" "#FFDFEF" "#FFDBFB" "#F9D9FF" "#F4DCFE"
"#FFECEC" "#FFEEFB" "#FFECF5" "#FFEEFD" "#FAECFF" "#F1ECFF"
"#E0EEEE" "#C1CDCD" "#87CEFF" "#7EC0EE" "#C6E2FF" "#B9D3EE"
"#CAE1FF" "#BCD2EE" "#A2B5CD" "#BFEFFF" "#B2DFEE" "#9AC0CD"
"#E0FFFF" "#D1EEEE" "#B4CDCD" "#BBFFFF" "#AEEEEE" "#96CDCD"
"#98F5FF" "#8EE5EE" "#7AC5CD" "#B0C4DE" "#ADD8E6" "#B0E0E6"
"#AFEEEE" "#00CED1" "#48D1CC" "#40E0D0" "#00FFFF" "#E0FFFF"
"#00BFFF" "#87CEEB" "#87CEFA" "#66CDAA" "#7FFFD4" "#C1FFC1"
"#B4EEB4" "#9BCD9B" "#4EEE94" "#43CD80" "#A2CD5A" "#FFF68F"
"#EEE685" "#CDC673" "#BDB76B" "#EEE8AA" "#FAFAD2" "#FFFFE0"
"#FFEC8B" "#EEDC82" "#CDBE70" "#FFFFE0" "#EEEED1" "#CDCDB4"
"#FFD700" "#EEC900" "#CDAD00" "#FFC125" "#EEB422" "#DEB887"
"#F5F5DC" "#F5DEB3" "#F4A460" "#D2B48C" "#E9967A" "#FFC0CB"
"#FFB6C1" "#FFBBFF" "#EEAEEE" "#FFE1FF" "#EED2EE" "#00F5FF"
"#00E5EE" "#00C5CD" "#00FFFF" "#00EEEE" "#00CDCD" "#97FFFF"
"#8DEEEE" "#79CDCD" "#7FFFD4" "#76EEC6" "#66CDAA" "#FFC1C1"
"#EEB4B4" "#CD9B9B" "#FFD39B" "#EEC591" "#CDAA7D" "#FFE7BA"
"#EED8AE" "#CDBA96" "#FFA54F" "#EE9A49" "#FFA07A" "#EE9572"
"#FFB5C5" "#EEA9B8" "#FFAEB9" "#EEA2AD" "#FFA500" "#EE9A00"
"#FFDAB9" "#EECBAD" "#CDAF95" "#FFDEAD" "#EECFA1" "#FFFACD"
"#EEE9BF" "#CDC9A5" "#FFF8DC" "#EEE8CD" "#CDC8B1" "#FFFFF0"
"#EEEEE0" "#CDCDC1" "#F0FFF0" "#E0EEE0" "#C1CDC1" "#FFF0F5"
"#EEE0E5" "#CDC1C5" "#FFE4E1" "#EED5D2" "#CDB7B5" "#F0FFFF"
"#FFFAFA" "#FFFAF0" "#FDF5E6" "#FAF0E6" "#FAEBD7" "#FFEFD5"
"#FFEBCD" "#FFE4C4" "#FFDAB9" "#FFE4B5" "#FFF8DC" "#FFFFF0"
"#FFFACD" "#FFF5EE" "#F0FFF0" "#F5FFFA" "#F0FFFF" "#F0F8FF"
"#E6E6FA" "#FFF0F5" "#FFE4E1" "#FFF5EE" "#EEE5DE" "#CDC5BF"
"#FFEFDB" "#EEDFCC" "#CDC0B0" "#FFE4C4" "#EED5B7" "#CDB79E"