Creating Tutorials & Demos - Posting Photos #2

You have your images and you have prepared them for your tutorial. You now need a place to store your photos.

The images that you see on blogs and web pages are actually located at a specific location on a host computer.

The text below is the HTML code needed for Blogger to show you the photo:

The HTML code is required to tell the browser where the image is located and how to display the photo. That location can be a personal web page from your ISP, a business web site or a web based photo hosting company.

The process is:

• Upload the photo,
• Add the HTML code to your blog or web site,
• Upload the new blog post or web site,
• Your photo will appear in your blog.
  

The easy way for newbies and non-technical people place a photo in a blog or web page is to use one of the free photo web hosting services. Not only will they host your photo, you have the option to make that photo public or private and most of them will give you the correct HTML code to place in your blog.

Before you upload - please make sure you have a backup copy of the images. If your photo web host goes bye-bye so does your images. Never post anything without a backup copy.

These are a few of the major free services:

• Flickr is owned by Yahoo. If you have a Yahoo account you have a Flickr account. For more info on how to use Flickr visit http://www.flickr.com/help/faq
• Photobucket http://photobucket.com For tutorials on how to use Photobucket visit http://tutorials.photobucket.com
• Zoomr has support in multiple languages To learn about the service check out the FAQ at http://zooomrlearnmore.wiki.zoho.com/Zooomr-FAQ-June-15-2007.html
  

If you are old school or you want to know what the correct HTML code is to upload photo from your web site then here is the HTML syntax you will need.

Basically the code states that the image can be found at Flickr, the name is dancer.jpg and the width and height of the photo. There is a one pixel border around the photo and this is the text version of what the image is about.

This is the accessible version of the code so that screen readers and adaptive devices can properly convey the photo information. In my most public confession yet I admit that I often forget to use the Alt code. I shall try to do better.

Gold Coast Web Design has a good plain English explanation of how to use the IMG tag with photo examples.