HTML: Images

Adding an image to a page is very simple although many students struggle with this, at least in part. What you need to remember is to move or copy the image you wish to use so that it is in the same folder as the html page you will be using it on. Simply adding a path to where it may live within another location on your computer won't work as whn you upload the site a web server for public consumption that path to the image won't be the same on another persons computer.

Let's look at an example. Say you have a photo you wish to use that lives in C:\Documents and Settings\Doug\My Documents\My Pictures\mountains.jpg. If I was to indicate that entire path (known as an absolute path because it absolutely states where the image lives on my computer) as the source of my image, then once on a web server, if someone else viewed the page on thier browser it would be looking for that image on the exact same location on their computer. And that is highly unlikely to be the case.

What we want to do instead is state the relative location of where that image is. And to make is super simple we locate the image in the exact same folder as our html document that will be using it. In this way the path to the image file is simply the image`s filename and extension. Son in the case of the above example, I would change it to just mountains.jpg.

Now let`s look at the actual tag that makes this happen:

<img>

That's it! Well, maybe not completely... We need to add an important attribute that tells the tag what image to display in this spot. Here is what that looks like using the relative path to the mountains.jpg file:

<img src="mountains.jpg">

and since the img tag is an open element, to be XHTML compliant we'll actually write it as:

<img src="mountains.jpg" />

Here is how it looks:

And if we have text following the image it will sit in this odd position aligned to the bottom edge. However you are more likely to want the text to float to either the left of right of the image. We can control this by setting a style for the img and setting the float property to either right or left. Here's how:

<img src="mountains.jpg" style="float: left;" />

Ahhh! Much better. Text aligned as such appears much cleaner and image appears to be better integrated into the layout of the page.

One other thing we want to do is to add a property for the width and height. This reserves the appropriate space for the image. The image of the mountains is 120 pixels wide by 160 pixels high. So we'll add that to the tag like so:

<img src="mountains.jpg" style="float: left; width: 120px; height: 160px;" />

One last tweak! Notice how squished the text is to the image? We can add a bit of a margin using the margin property like this:

<img src="mountains.jpg" style="float: left; width: 120px; height: 160px; margin: 4px;" />

However that creates a margin all around the image. We might prefer to just have it on the right which we can easily accomplish with:

<img src="mountains.jpg" style="float: left; width: 120px; height: 160px; margin-right: 4px;" />

Here is how the above tag appears with some Greek Type added for effect!

Nulla posuere pellentesque scelerisque. Proin sapien lectus, consectetur sed convallis at, ullamcorper nec urna. Mauris a justo a mi luctus euismod. Integer sodales tellus in justo viverra eget bibendum nisi commodo. Sed ullamcorper lectus vel mauris posuere lacinia. Suspendisse vel odio ac tortor gravida convallis. Suspendisse sagittis urna eget massa vulputate vel sagittis augue auctor. In posuere, enim nec rutrum cursus, sapien leo elementum est, eget posuere ante quam sit amet turpis. Vivamus in sollicitudin dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque porta ligula eget sem sodales vel euismod velit porta.