Helpful Code

The Internet for the Rest of Us

The Next Best Thing




March 3rd, 2008 at 9:49 pm

Helpful Code

There are a few things that every blogger should know when it comes to publishing posts that will make their pages look better. As I have been surfing around today, there have been two things that have stood out to me. These two things will either affect the aesthetics of your page, or cut down on the readership of your page.

The first one is failing to word wrap a picture. I have seen pictures inserted in the middle of text, making it very difficult to follow. It is evident that the blogger did not know how to word wrap the text around the graphic. I am no expert on html, but I have learned a couple of things, so perhaps this will be of benefit to you.

The code for word wrapping a graphic is pretty simple…it has to be if I can do it. It is:

<img src=”http://www.imagelocation.com” align=”right” border=1 hspace=10 vspace=10>

You can adjust how closely the text comes to the graphic by increasing or decreasing the hspace and vspace variables. The higher the number, the more distance there will be between the graphic and the text. If you want to link that same graphic to another web address, then you can use this code:

<a href=”http://www.linklocationhere.com” target=_new><img src=”http://www.imagelocationhere.com” align=”right” border=1 hspace=10 vspace=10></a>

You can align the picture to the left or right by changing the “align” variable. Simply change the “right” to “left” and the graphic will be aligned to the left hand side of the page.
The second big problem that I see on a lot of pages is also addressed in the second string of code above. Notice, in the link code, after the link location close quotes, there is a “target” tag. In this case, it is “target=_new” This tells the browser to open the link in a new tab (for Mozilla, or IE 7) or a new page for a version lower than IE7. This is important because you don’t really want people navigating away from your page to visit another, and then forgetting about you. If you use this tag in all of your links, your page will stay open behind the new page, thus giving your visitor the opportunity to come back and look around a bit more. Outgoing links can be good, but you want that reader to come back and finish what you have to say, after they look at whatever you wanted to link.

Both of these design elements are important. I think a page that has pictures and graphics scattered around haphazardly looks very unprofessional. It is possible to place them exactly where you want them–exactly where they improve the look of your page. As for the links, just think how often you surfed away from a page through an outgoing link, and then never returned to the original page because it was no longer available without clicking your “back” button 20 times!

Word Wrapped ImageNow, let me give you a couple of examples for what I am talking about. First, notice that the graphic in this paragraph is seated neatly to the left of the paragraph, with the words wrapped around it. This makes it fit in, and become a part of the “story”. It is easy on the eyes, and looks as if it belongs (even though it has nothing really to do with the post!) As you can see, there is plenty of space at the right side of the graphic, as well as below it. It fits in nicely, and does not distract the reader from the article. If the graphic is a link, you should make it to open in a new window, as we have said before. You want to make sure that all of your graphics are assigned a place in the layout of your story, so that they can add to what you are writing. Under most circumstances, if the graphic does not add to your purpose in some way, you should just leave it out!

Now, what happens if I don’t align my Misaligned Graphicgraphic correctly? It stands out like a sore thumb. It detracts from the purpose of my article itself, and it causes the paragraphs to be aligned poorly. This ends up looking terrible, and makes it clear that you don’t know how to make the graphic look good. If you did, you’d never leave it like this!

Now, look at the links themselves. Here are 2 links, the first will open in a new window, and the second will open in the same window. I know, if I use the first, the reader will have to come back to my site. Even if it is only to close the window eventually, he will still have to put his eyes back on my page–which may make him read something else that I have written. Who knows what that will eventually lead to. If your site is selling different products, you may make multiple sales, where you would only have made one if your link opened in the same window!

First Link
Second Link

Now, if that second link actually led away from my site, I know you’d never be back. If I were trying to sell you something, I’d have lost the possibility of a second sale. So, remember how important these things are as you are writing your posts, and creating your websites!

The best news is that if you are using the latest version of WordPress, all of this is built into the composition tool. Simply click on the insert graphic button, and then enter your source code for the graphic location. Put in the alignment that you want, along with the border, vspace, and hspace. If you want to link the graphic, simply click on the picture to select it, then click on the “link” button. Enter the location of the link, and choose to open in a new window. Make sure and add alternate text, and then you are done. WordPress will put the graphic into your post, and add the link. You don’t even have to know any html. So, if you aren’t running WordPress for your blog, check it out!

 

RSS feed for comments on this post | TrackBack URI

    Subscribe



    Sponsors







    Member Sites



    ss_blog_claim=17010c259449841f61fd4175acd961b2