Saturday, March 01, 2008

A Couple HTML Tips

It occurred to me as I was writing that last post that I ought to share a couple html tips I use on a regular basis.

First - Mouseover this link: My Flickr page. Do you see that little box pop up? The one that says, "See some pictures I've taken"? I love that little thing. Sometimes I just play with it, but mostly it's a good way to let people know what a link is about before they click it. To make your links do this, use the title attribute. Insert title="this is what this link is about" right after the url, like this:
< a href="http://www.flickr.com/photos/bcmom/" title="See some pictures I've taken">

Be sure to use the quotation marks. A title can also be added to an image.

Second - I'm one of those people who hates to see text right up on top of an image. I like a little white space (or, in my case, purple space) around the image. To add space above and below the image, use vspace="15" - v for vertical. To add space to the left and right, use hspace="5" - h for horizontal. The number is the number of pixels that will be inserted between your image and your text. It can be whatever you want it to be. Just play with the numbers to see what looks good. If you want more space, increase the number. You'll notice that the numbers do not have to be the same. In this example - an award from Lady Banana, I also used align="right" to place the image on the right side of the post. If I had used align="left" the image would be, you guessed it, on the left side.

So the whole thing looks like this: < img src="imagename.jpg" title="an award from Lady Banana" align="right" hspace="5" vspace="15">

If you're inserting images by clicking on the little Add Image thing in Blogger, there is a whole lot more code, so you'll have to look for the part that starts with img src= and insert it into that part of the code. It's in there, I promise.

Did that help anyone? Hopefully it wasn't too confusing. :P A special Thank You to Lady Banana for the adorable award I used in this example.

3 comments:

  1. Useful tips there Anna, I like the title attribute one. I've done it before in an editor but not thought of adding it manually in the blog!

    ReplyDelete
  2. You are awesome Anna! Thanks for these great tips!

    ReplyDelete
  3. Ooh, I'd forgotten a couple of those - thanks for the reminder! :)

    ReplyDelete

I love your comments! Keep them coming.