Common HTML Mistakes :)
The Common table mistakes are::
Some Basic HTML Codes for you... :)
<B> Here is the Bold code </B>
<I> Here is the Italics code </I>
Here is the under-lining code, <u> So This is Underlined </u>
Here is the strike code, <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
<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 :-)...
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,
paragraph, just like you are seeing now... :-)</ul>
<blockquote>and here is what it will look like</blockquote>
Here is How to Add A Image :-)...
The pre code makes everything stay in place just as you type it,
<pre> ( * )\ ) ) ( ` (()/( ) ( /( )\))( ( /(_))` ) ( /( ( )\()) ((_)()\ ))\ (_)) /(/( )(_)) )\ )((_)\ (_()((_)/((_) / __|((_)_\((_)_ _(_/(| |(_) | \/ (_)) \__ \| '_ \) _` | ' \)) / / | |\/| / -_) |___/| .__/\__,_|_||_||_\_\ |_| |_\___| |_| </pre> Naughty Naughty All you Coders... :-)
Making Text and Image Links :-)...
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>
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... ;-)