Placing your photos on your web page is easy to do with just a little knowledge. Yes, you can learn how easy it is with just one HTML Tag!

By now, if you have read my previous articles on HTML you have read a rather steamy approach to explain HTML. Assuming you have done your homework you now understand the basics of HTML and should be capable of accomplishing the following:

• View HTML source on MySpace and other websites
• Use Basic HTML Tags
• Create a basic HTML Page

More advanced HTML tags for images and video are nearly as easy to learn as the basic HTML tags. However, as with anything new it is important to understand how images on the internet work.

Images on the internet come in a variety of image formats with several properties. Size, shape, transparency, type and format are the most common properties you will need to understand when trying to embed an image.

Before I get technical let's describe the image process in simplified terms. Images appear on web pages much like adding a photo to a real hand written letter. You clip, paste, glue, or staple your photo to the paper. The image you have affixed to your paper arrived by some transport method, normally by plucking from a photo album, photo shoe box, or other photo storage container. Placement of your photo on the paper page depends on how you want reader to see the photo in relationship to your words on the page. Some people affix the photos over the text obscuring the words. Other people affix the photo and write the words around the photo allowing readers a complete view of both the photo and words.

The same is true with HTML pages, however, the computer is the first reader of your letter with an affixed photo and it needs to know the same information to properly display a photo. The computer needs to know the answers to the following questions:

• 1. How is the photo retrieved?
• 2. Where is the photo?
• 3. How large is the photo?
• 4. Where does the photo get attached?
• 5. What is used to attach the photo?
• 6. Should the photo obscure words or allow words around it?

The answers to the above questions in simplified terms are:

• 1. Answer: Normally by HTTP
• 2. Answer: A hyperlink that points to the photo
• 3. Answer: Size matters and is normally measured by inches, pixels, or EM. For example you probably would not include an 8 inch by 10 inch photo in a brief note to your friend right? Most likely you would send a much smaller picture appropriate to the size of the envelope and letter.
• 4. Answer: Top, Bottom, Left, Right and IN. IN, "as in" the words and words flowing around the photo.
• 5. Answer: HTML Image tag because computers do not use glue.
• 6. Answer: Normally, most web pages to not want to obscure the words and therefore choose to wrap the words around the photo.

Now for the more technical description of how to embed a photo into you web page. First, you must use an IMAGE tag and set all the properties of the tag as described in the questions above. Second, you must place the IMAGE tag in the correct place on your web page. Third, you must make sure your image is located somewhere that your browser can "SEE IT". Finally, test your IMAGE tag to make sure you have set the properties correctly.

A point of clarification is required here. An IMAGE TAG is not the actual image and is only a pointer to where the photo exists on the internet. The same is true for many other image and video HTML tags; most are just pointers of an internet location.

Embedding a photo in your web page really means that you are embedding a link and not the physical photo. The HTML IMAGE tag for accomplishing this task is the <IMG></IMG> tag. The image tag is either a complete HUG as written in the previous sentence or a half HUG <IMG />. This difference depends on the "HTML Standard" used for your web pages. Older standards use both start and end tags and newer standards use the half tag. We will use the newer standard for simplicity in this article.

Displaying a photo using the image tag requires you to set all of the properties correctly.

Setting properties is easy as typing out text with some abbreviations thrown in. The properties are:

• "img" an abbreviation for image and is the TAG property itself.
• "src" an abbreviation for SOURCE
• "alt" an abbreviation for ALTERNATE (Alternate text to show on the page while waiting for the photo)
• "width" width of the photo
• "height" height of the photo

The properties above are just properties without any value until you assign a value using the equals sign (=). Therefore a complete image tag is written as:

<img src="" mce_src="" alt="" width="" height="" />

You will notice I used quotation marks after the equal sign. The quotes are where you will put the information about your image. A complete image tag using HubPages as an example looks like:

<img src="http://z.hubpages.com/u/376851_f496.jpg" mce_src="http://z.hubpages.com/u/376851_f496.jpg" alt="Dictionary Image" width="300px" height="300px" />

All of the properties must be set to properly display a photo on your web page with the exception of width and height. Leaving out height and width causes the computer to display the image the actual size. (or you could use one or both settings) Meaning, if you create an image tag which points at an 8 inch by 10 inch photo the visitors to your web page will see a huge picture. However, "how to size photos" is a complete topic in and of itself and better addressed in a separate article. For now, test your images with and without width and height settings.

One more note of mention on setting the height and width properties involves stretching or squashing the photo. If you don't know the original size and you set the width and height properties your image will stretch (larger) or squash (stretch smaller) to the size you set. Stretched photos may not look correct so you will need to play around with the settings to get the desired effect.

Getting the desired effect means testing different properties you have set. Simply place the competed link anywhere in your web page and view it in a web browser. Change the settings and repeat the process until you have what you want.

This article also mentioned the flow of words around the image. A standard image tag as set above causes words to flow around the image unless you specify more advanced HTML property settings. More advanced HTML property settings is a topic for other articles and perhaps I will write on that soon.

You now know how to embed pictures into a web page. Enjoy!

Previous articles on HTML are:

Hugs To My Letters Or Words (HTML)

How to Learn Markup Language

Putting Hyper Text Markup Language To Work