Sunday, September 4, 2011

Basic HTML for new bloggers

It took months of searching, and reading tutorials to learn the basics. In the beginning, I even went as far as to "right click"--->"view source"----->and change the coding to see what the heck the difference would be.

Let me save you a little bit of the trouble, so you can snaz up your blog!




CodingResult
How to create a text link:
<center><a href="http://cute-ecakes.blogspot.com">
WORDS</a></center>
WORDS
How to create an image link:
<center><a href="http://cute-ecakes.blogspot.com/p/christmas-giveaway-and-donation-event.html"><img src="http://i782.photobucket.com/albums/yy105/cynthiathornton/christmasevent.png" width="125"></a></center>
How to create a table (like this!):
<table border=1><tr><td>This table is cool</td><td>Cindy is cool</td></tr><tr><td>Cute-Ecakes is cool</td><td>We LUV followers</td></tr></table>
This table is coolCindy is cool
Cute-Ecakes is coolWe LUV followers
How to change your background color:
<table border="0"><tr><td bgcolor="#cc9966">This color is ugly</td><td bgcolor="#f6b26b">This color is pretty</td></tr></table>

This color is uglyThis color is pretty
How to use an image as your background:
<table border="0"><tr><td background="http://i782.photobucket.com/albums/yy105/cynthiathornton/marb007.jpg"><b><center>Wish I had marble counter tops</b></center></td><td bgcolor="#f6b26b">This color is pretty</td></tr></table>
Wish I had marble counter topsThis color is pretty

  • What each piece of code does, and what you can change:
    • <a href> indicates a link
    • </a> ends the link
    • <center> ummm...centers whatever follows!
    • <img src> precedes the URL of your image. You can use Photobucket for free!
    • <target="blank"> indicates opening a link in a new tab or window, without which the user will click away from your site!
    • <width> indicated the size in pixels of your image
    • <table border="x"> The example above uses "1" but when set at "0" will align your content without "seeing" any table at all!
    • <tr> new row
    • </tr> end of a row
    • <td> new column
    • </td> end of a column
    • <b> bold
Now you can go play for a bit, with just a few basic codes :)

FREE backgrounds and textures: http://www.grsites.com/archive/textures/category/19/texture/0/
Website Design: If you are looking for something beyond the basics, you might look into online college classes in HTML and web design.



10 comments:

Mare said...

hey friend! thanks for the info! I was in charge of a reunion website and I learned some HTML, but forgot, so thanks for some tips!
luv,
mare
http://mare-itsjustmebeingme.blogspot.com

sstone said...

Thanks so much!! This is super helpful! I know zero html, so I can definitely use this.:)
Shiloh
http://everydaygameplan.net

Kristen said...

I list so many links to other blogs featuring giveaways on my site that my Bounce rate is high. When I create a link in blogger it makes the reader leave my site.

For example I have this link in HTML:

Rearz.

Where would I add in the link to make it open a pop up window?

Thanks!

Kristen said...
This comment has been removed by the author.
Kristen said...

Oh, it left the link instead of the html. Ok, it looks like this.

Rearz.

Kristen said...

Ok, I can't even show you what it looks like...

Maybe you can explain anyway.

Cindy said...

Kristen,
You need to add TARGET="BLANK" to your link code. It will look like this: I omitted the <> so that comments wouldn't change it into a link! The entire code goes between the <> :)
a href="http://cute-ecakes.blogspot.com" target="blank

Jessca said...

Thanks for the tips! I'm pretty new to blogging and am finally starting to feel like I semi know what I'm doing, these will definitely come in handy!

www.theflyingtime.blogspot.com

LaVonne @ Long Wait said...

Always love html tips. Thanks. I also RT this post as well to help others.

Blessings,
LaVonne @ Long Wait For Isabella

TigerEyes2001 said...

Wow! Awesome post! Thank you so much for sharing this information. :)

New follower from the FNF Blog Hop! Please follow back! Thanks!

http://tigereyes2001reviews.blogspot.com/