One Weird Blogging Tip: Links, Images, and Tooltips

Jan 10, 2014 | Blogging Tips & How-to, Gadgets & Geekery

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.

Holly Jahangiri is the author of Trockle, illustrated by Jordan Vinyard; A Puppy, Not a Guppy, illustrated by Ryan Shaw; and the newest release: A New Leaf for Lyle, illustrated by Carrie Salazar. She draws inspiration from her family, from her own childhood adventures (some of which only happened in her overactive imagination), and from readers both young and young-at-heart. She lives in Houston, Texas, with her husband, J.J., whose love and encouragement make writing books twice the fun.

2 Comments

  1. Pete Laberge

    Thanks! Well, I am glad top take the blame! Someone had to!

    Reply
  2. Peter Wright

    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.
    Peter Wright recently posted…Life lessons from the Arctic VortexMy Profile

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge
 


Copyright © 1998-2020 Holly Jahangiri
Nothing on this website may be used without prior written consent of the author and owner.

Let’s Connect!

Do you like "unlimited" like I do? Subscribe to Medium for just $5/month, and read everything there is to read, for no extra charge. Use this link: https://hollyjahangiri.medium.com/membership and it will directly support my writing there each month.

Looking for Excellent Web Hosting?

PeoplesHost Web Hosting

 

I have been a happy customer here, myself. While this is an affiliate link, I'm just happy to promote PeoplesHost, because I have had nothing but great customer experience with them as my own web hosting provider.

Post Categories