Optimizing Text, Links & Images - HTML for Garden Geeks

Poncirus trifoliata 'Flying Dragon'
Image courtesy of Landscapedia.info

When last we left our floating island of text, it was starting to come together. We had an image. It had a border. There was some text. All in all, it was coming along quite nicely.

In our final lesson, we are going to work with optimizing our text, links and images.

Now there are 2 ways to work with formatting text. You can hand code it, or you can use the format bar with your blog software. I believe in working smater, not harder. So let's just dress it up using our software, shall we?

First, let's italicize the scientific name of our plant. Highlight and select the appropriate button on your toolbar. Let's highlight and add our link back to our source. Now, let's shrink the source text down to smallest. You can add a return in there for some space if you like. You have probably done this a million times, so I won't spend any more time on it.

If you remember way back to another blog post (SEO for Garden Bloggers), you'll stop me (which you better) to gently remind me that we need to make our page a little friendlier to the search engines. You are absolutely correct to do so.

Let's flip over to our Edit HTML view of our draft blog post. Your island should look something like this (though some minor differences may apply depending on how your software translates your call-out):

<div style="background-color: #EFEFEF; border: 1px #6699CC; float: right; margin-left: 10px; padding: 5px;">
<img src="http://www.landscapedia.info/images/plant_images/Poncirus_trifoliata__Flying_Dragon_Flying_Dragon_Hardy_Orange.jpg" />
<p><i>Poncirus trifoliata 'Flying Dragon'</i></p>
<p style="font-size: xx-small;">Image courtesy of <a href="http://landscapedia.info/">Landscapedia.info</a></p>
</div>

 The first thing we are going to do is to add our alt property to our image. Search engines can't read images, so we have to tell them what our image is. Add alt="Poncirus trifoliata 'Flying Dragon'" to our img tag behind source. If you notice, there is a single quote AND a double quote. Double quotes define an element so you cannot have 2 sets of double quotes. However, we can use single quotes. We are also going to add a title property so that when someone hovers over our image, they get a nifty little floating tag letting them know what the image is. Let's add title="Poncirus trifoliata 'Flying Dragon'" behind our alt property. Now your img tag should look like:

<img src="http://www.landscapedia.info/images/plant_images/Poncirus_trifoliata__Flying_Dragon_Flying_Dragon_Hardy_Orange.jpg" alt="Poncirus trifoliata 'Flying Dragon'" title="Poncirus trifoliata 'Flying Dragon'" />

Quite long, huh? If you take a look at it though, it makes sense. We are telling the computer to display an img from this src on the web. We are providing search engines with an alt content of the image is so they can understand what we are showing our readers. Finally, we are telling it that you display a title when a reader hovers the mouse over the image.

Now you should be able to add the title tag to the link text yourself. Give it a try. Add a title property in the a tag behind href. Make up your own descriptive text.

Now our final call-out code should look like this:

<div style="background-color: #EFEFEF; border: 1px #6699CC; float: right; margin-left: 10px; padding: 5px;">
<img src="http://www.landscapedia.info/images/plant_images/Poncirus_trifoliata__Flying_Dragon_Flying_Dragon_Hardy_Orange.jpg" alt="Poncirus trifoliata 'Flying Dragon'" title="Poncirus trifoliata 'Flying Dragon'" />
<p><i>Poncirus trifoliata 'Flying Dragon'</i></p>
<p style="font-size: xx-small;">Image courtesy of <a href="http://landscapedia.info/" title="Landscapedia :: Inspiring Garden Design">Landscapedia.info</a></p>
</div>

Poncirus trifoliata 'Flying Dragon'

Image courtesy of Landscapedia.info

That's it really. I know it took a long time to get here, but if you break everything down into small chunks, you can see what each piece means. Let me know if you have any questions, and I'll answer them in a follow-up post.