Section 28. Other Methods for Inserting Images Into Posts

28. Other Methods for Inserting Images Into Posts

BEFORE YOU BEGIN

15 Creating a Post Using the Blogger Editor in Compose Mode

16 Creating a Post Using the Blogger Editor in Manual Mode

SEE ALSO

25 Inserting Images into Your Posts Using Blogger

26 Inserting Images into Your Posts Using Flickr

27 Inserting Images into Your Posts Using PhotoBucket

In addition to hosting images, you have options on Blogger, or other image-hosting services such as Flickr and PhotoBucket, which offer an interface to posting to your blog. If you have access to a web server, you can host images there and simply refer to them via the <img> HTML tag, using the full URL to the image. For instance, you might use an image-hosting service without a direct-to-blog interface. In that instance, you can obtain the URL to your image and manually create the appropriate HTML to include this image in your post.

In addition to Flickr and PhotoBucket, the following image hosting services are just a few of the numerous services that offer free accounts and external linking:

• ImageShack, at http://imageshack.us/

• TinyPic, at http://tinypic.com/

• Village Photos, at http://www.villagephotos.com/

The key phrase is external linking, which means that you will have a URL to an image, such as http://the.server.name/imagename.jpg. Armed with this URL, you can insert inline images into your blog posts or your blog template.

Although the image tag has several attributes, the only required attribute is src or the source location of the imagethe external URL, for example.

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 200 pixels wide, 200 pixels high, with alternative text of myImage:

 <img src="/books/2/863/1/html/2/http://the.server.name/imagename.jpg" width="200" height="200" alt="myImage"/> 

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 not be ready to load at the time the browser encounters the <img> tag.

NOTE

In Appendix B, "CSS Fundamentals," you'll learn how to set additional properties for <img> tag attributes by using styles such as padding, margins, and borders.