Techie Tuesday: Useful HTML Code

When I first started blogging, the HTML world was somewhat familiar to me, but not something I was comfortable with. But, it really isn't that hard, so don't be intimidated by this new "techie" language! In fact, I think it's very important for all bloggers to know the basics. Sure Blogger makes it pretty easy with their user-friendly interface, but there are so many other HTML coding possibilities that blogger doesn't offer.

HTML From the Beginning:

To begin a line of code, always start with an open carrot symbol

and end with a close carrot "<", a slash "/" (which closes the tag) and an open carrot ">" to finish things off.

HTML Tag Basics:

The above example uses an "a" which is the standard tag opener for all links. However, if you would like to give a piece of text a special characteristic, you would use these:

The text inserted between the carrots is what will receive the characteristic.

How-to insert a link:

1. To link a line of text, all you need to do is start a line of code with an open carrot "<" and an "a"
2. Next, reference the link you want the text to go to with an "href="
   
3. Insert your URL between quotation marks " "
   
4. Close the link with a close carrot ">"
5. Insert the word or text you want to be the link
6. Close the line of code with ""
7. Your line of code should look like the image above
   

How-to have a link open in a new window or tab:

1. Simply insert target="blank" after your open carrot "<" and an "a"
2. Your line of code should look like the image above
3. For example, if I wanted the words The How-To Gal to open up to my website in a new tab/window, I would type the following:
   

How-to link a picture:

Linking a picture using HTML Blogger makes this one easy, but if you're working on a website, here's the lowdown.

1. Open your line of code with an open carrot "<" and an "a"
2. Reference where you want the link to go in the "href=" area.
   
3. Then you need to show where to pull the image from. You can use a bunch of different websites to host images, I use www.imageshack.com. Once you have uploaded an image, the service will give you an URL where the image is located. This is the URL you put in the "img src=" area.
4. Your line of code should look like the image above.
   
5. If you want the image to open in a new window, simply insert target="blank" after your opening "

Voila! A few simple lines of HTML code for you to try out on your blog!

Questions? Email me the.how.to.gal@gmail.com