Use a thumbnail image for attractive links
It’s time for a beginner post. Mostly because my brother has been asking about how to post thumbnails, but also just because it seemed like other people probably had the same questions. There are a lot of things that can be done with links online. In this article, we’re just going to touch on the basics and we can fill in the gaps in a later post.
Links are just a way of referencing material online. In order to do that, you need 2 things: 1) The address of the material you are referencing. 2) The content which will send the user to that material. By content, we refer to either text or a graphic. When you click that text or graphic, you then go to the referring webpage.
So first, let’s look at a simple link:
<a href="http://www.internetstarting.com">Helpful Website</a>
This link starts with a tag, which opens <a. We must end the tag with a greater than (>), but not until we specify the address to which we link. That is specified in the href parameter of the a-tag (<a>). In this case, our address is http://www.internetstarting.com. Always be sure to enclose the address in quotes. Then we end the a-tag (which is short for Anchor, BTW). So far we’ve covered:
Next, we have “Helpful Website”. This is the content of our link, or the anchor text. In our case it is just text, but we’ll add images later. This anchor text is what is going to actually be displayed to our user. Finally, the <a> tag we opened must be closed. HTML tags are closed with a forward-slash in front of the tag. Our closing anchor tag would then look like this: </a>. Now, when shown online, our link will look like the following:
Now, let’s go about adding an image in there. To do that, we’ll need to use the image tag, which is simply, <img>. Similar to the link, we need to supply a parameter to the image tag and that is the location of our image. This is usually on our site, but it could be anywhere on the web. In the image tag, that address will be put into the “src” attribute. So, we’re going to have something that looks like this:
Again, notice that we have to put the parameter to “src” in quotation marks. Finaly, we’ll close the image tag. This is a little different than closing the anchor tag because we’re going to use some HTML shorthand. Because the img doesn’t have any content (only the src attribute here), we can close it immediately. So, we’re just going to add “/>” instead of our nomal “>” followed by “</img>”. Our entire image tag now looks like this:
<img src="http://www.csh.rit.edu/~geisel/car/3kgt-md.jpg" />
Now, let’s make that a link. All we’re going to do, is take our anchor text (which was Helpful Website) and replace it with our image tag. Now we have:
<a href="http://www.internetstarting.com"> <img src="http://www.csh.rit.edu/~geisel/car/3kgt-md.jpg" /> </a>
<img src=”http://www.csh.rit.edu/~geisel/car/3kgt-md.jpg” />
Now, we have an image used as the content for our link. When you click the image, it will still take you to the homepage for InternetStarting.com. One last thing before we show you the image and link. It would be a little big to add to this post again, so let’s shrink our image. We could use photo editing software to shrink the image, or for images that are reasonably small we can just cheat a bit. We’re going to add two more parameters to the image tag. They are “height” and “width” and you can probably imagine what they do. Let’s make our new thumbnail image 80×47 (1/4 the size of the original). The code would now look like this:
<a href="http://www.internetstarting.com"> <img src="http://www.csh.rit.edu/~geisel/car/3kgt-md.jpg" width="80" height="47" /> </a>
There, now you can see what the thumbnail will look like at 1/4 of its size. This is not recommended for very large images however as it will slow down your site. We’re actually using a big image and displaying it as a small image. For example, if you were to take an image directly from your camera and “cheat” the image tag, it might take 15 or 30 seconds to load this tiny image on your site. That’s not very efficient and why it would then be better to use some photo editing software to actually save the picture in a smaller format and just use that instead.
One last thing on links for the beginner. Sometimes you will see a very, very long link. These especially show up at affiliate sites like Amazon.com. In fact, you might even see a full web address inside the web address which is in the href. Don’t let this confuse you! We’re only concerned with what’s between the quotation marks. So, <a href=”someReallyReallyLongStringIsOK”> — even if it’s several lines long. Just look for the closing quotation mark and you will be fine.
For anyone still having trouble with links or who has other questions, use the comment link below. Let us know what trouble you’re having with links and we’ll see if I, or someone in the community here, can help you out.