Tuesday, June 8, 2010

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 "(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:

To link a line of text, all you need to do is start a line of code with an open carrot "

Next, reference the link you want the text to go to with an "href="

Insert your URL between quotation marks " "

Close the link with a close carrot ">"

Insert the word or text you want to be the link

Close the line of code with ""

Your line of code should look like the image above

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

Simply insert target="blank" after your open carrot "

Your line of code should look like the image above

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.

Open your line of code with an open carrot "

Reference where you want the link to go in the "href=" area.

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 "imgsrc=" area.

Your line of code should look like the image above.

If you want the image to open in a new window, simply insert target="blank" after your opening "