Do you know basic HTML? Do you know how to create a link that doesn’t involve clicking the Insert/Edit Link button? If you are not afraid to venture into your blog’s HTML editor or Text tab, here’s a short tutorial on creating links that include “tooltips” (additional text that appears in a little box when you hover your cursor over a link) and links that contain images instead of text.
IMPORTANT: Use only straight quotation marks in HTML attributes, regardless of how the examples display, here, in your browser.
Blame Pete Laberge for this; he seems to think more than two of you might find this useful.
HTML Basics
First, let’s talk about HTML. It stands for HyperText Markup Language. The first thing to remember is that every HTML document (web page) starts out with <HTML> and ends </HTML>. That’s a start tag that tells the browser “Hey, there’s some formatting code here!” and an end tag (see that “/” in front of HTML?) that says, “I’m done doing this thing – ready to do the next thing.” There are a few HTML tags that do not absolutely require an end tag, but it is generally good practice to use one (don’t start out lazy – we all get there soon enough).
Here’s a simple one: If you want to make a word bold, you’d enter it like this – <b>bold</b> OR, if you’re a more modern sort of HTML scriptmentalist, you’d type that as <strong>bold</strong>. Because <i> and <b> have been replaced (deprecated) by tags that are longer – and thus a real pain in the butt to type. <b> is now <strong> and <i> is now <emphasis>. I think it’s a conspiracy among HTML authoring tool vendors, personally.
Create a Text Link
The simplest link, in HTML, looks something like this:
<a href=“[URL of place you want the reader to go]“>text you want the reader to click on</a>
The “a” stands for “anchor” – which is just fancy HTML speak for link. Hover your pointer over that link – “a” stands for “anchor” – and read. All that text that appears when you hover over the link comes from the title attribute. To make this link, the syntax is as follows:
<a href=“http://www.w3schools.com/tags/tag_a.asp” title=“w3Schools.com is an even better, more up-to-date reference for HTML tag syntax and use” target=_new>“a” is for “anchor”</a>
Got that? Now, there’s another attribute you should be aware of, and that is the alt= attribute. Use this one inside an image tag to describe the image and/or tell a visually challenged visitor where the link goes, if the image is clickable (that is, if it is inside a link, or <a> tags). This used to also create the hovertext, or “tooltip” text, but it was never really supposed to do that. It’s meant to be an accessibility feature.
Create an Image Link
To put an image in an HTML document, you would enter text like this:
<img src=“[URL that points to the image file]“> height=“[# of pixels]” width=“[# of pixels]“> – or, to put this another way:
<img src=“http://upload.wikimedia.org/wikipedia/commons/8/88/Ctenocephalides-canis.jpgstrong>” title=””Ctenocephalides canis”, pulga del perro. Fotomicrografía. Fotografía: Luis Fernández García. 2007-03-16 {{cc-by-sa-2.5-es}} Category:Siphonaptera” height=“300“ width=“400” />
would produce this:
Notice that <img> is one of those HTML tags that does not have an equivalent end tag. If you want to make it a link, just put the whole thing in place of the “text you want the reader to click on” in the Create a Text Link example, above.
You don’t actually need the height and width attributes, but it is more efficient to include them. And they allow you to resize an image to fit the space on your web page, without having to actually resize the image. You can use just one – height or width – and let the browser calculate the other based on the aspect ratio.
Thanks! Well, I am glad top take the blame! Someone had to!
Thanks for those tips Holly, I have been using basic html for some time when necessary, but generally take the lazier route and use the insert / edit button.
I was intrigued by the photo of Ctenocephalides canis, recalling your recent posts on unusual foods, I thought you were including details of another exotic dish in this post. I almost put your email into my foods folder instead of blogging tips.
Then some distant memories of Latin grammar from school (yes I am that old) reminded me that the subject of the photo was not for eating.