Hyperlinks

Internet content without hyperlinks would be very boring indeed, especially when it's blog content. A large part of blogging involves the hyperlinking of content to and from other content available in the Blogosphere. Hyperlinks are created using the <a></a> tag pair, using the href attribute to provide the actual target to which you want to link. The text between the opening and closing tag becomes the clickable text of the tag. For instance, I would use the following to create a link that would take you to the blog for this book using the text visit my blog! as the clickable link:

 <a href="http://bloggerinasnap.blogspot.com">visit my blog!</a> 

Unless you are linking to a file on the same server as your blog, you must use the full protocol and domain name in the linkfor example, http:// and bloggerinasnap.blogspot.com. If you publish your blog on your own server, you need only specify the directory and page or image name as part of your link, such as

 <a href="/directory/page.html">sample link</a> 

TIP

The <a></a> tag pair has four different states, all of which can be specifically styled through the stylesheet. You can define a specific appearance for links that are normally displayed on the page, links that have been visited, links as they are being hovered over by the user's mouse, and links as they are being clicked. You will learn more about link styles in Appendix B.

In addition to linking to specific pages, you might want to provide a hyperlink to an email address. The act of clicking a hyperlinked email address typically launches the default email application for the end-user. The format of this type of link is

 <a href="mailto:[e-mail]">e-mail me</a> 

Clicking the words e-mail me will launch the user's default email application, creating a blank email with the To: field prepopulated with the value in the HRef attribute of the <a> tag.

Image Tags

In Chapter 4, "Using Basic HTML and Working with Images," you learned several methods for inserting inline images into your blog posts. The image tag (<img>) has several attributes, but the only required attribute is src or source. The image source attribute contains the URL at which the image can be found. The URL can be to an external server, such as

 <img src="/books/2/863/1/html/2/http://photos2.flickr.com/3623668_0743b16eda_m.jpg"/> 

or it could be to an image on your own server:

 <img src="/books/2/863/1/html/2//images/petey.jpg"/> 

Other attributes that you should use, but are not required, include height, width, and alt text attributes. For instance, the following defines an image that is 180 pixels wide, 240 pixels high, with alternative text of petey:

[View full width]
 <img src="/books/2/863/1/html/2/http://photos2.flickr.com/3623668_0743b16eda_m.jpg" width="180" height="240"  alt="petey"/> 

Specifying the height and width of the image allows the browser to render the page while leaving the correct space for the photo that might or might not be ready to load at the time the browser encounters the <img> tag.

NOTE

When images are used as hyperlinks (that is, they are surrounded by the <a></a> tag pair), use the border attribute in the <img> tag. If the attribute value is set to 0, no border will appear. A border value of 1 will display a 1-pixel border, a border value of 2 will display a 2-pixel border, and so forth.

In Appendix B, you'll learn how to set additional properties for <img> tag attributes.