Placing an image on a web page

Using the <img> element

The inline markup looks like this

<img style="width: 512px; height: 342px;" alt="Mouton Falls in local folder" src="Images/MoultonFalls-moss.jpg">

Note that <img> has no closing tag
to comply with Strict rules one needs to add a "  />"  the end of the inline statement like this

<img style="width: 512px; height: 342px;" alt="Mouton Falls in local folder" src="Images/MoultonFalls-moss.jpg" />



in the above <img> statement the picture being displayed is given a width and height value in pixels
in this case 1/2 the width and height of the original.

"src"  tells us where the original image is located
It is relative to this web page "images.html" in a folder called "Images" the name of the picture file is
"MoutlonFalls-moss.jpg"

I have another version of the picture on my web site at this location
http://uofgts.com/2008photos/bin/images/large/MoultonFalls_7.jpg

and as a result I can replace the above "src"

This way
<img style="width: 512px; height: 342px;" alt="Mouton Falls elsewhere" src="http://uofgts.com/2008photos/bin/images/large/MoultonFalls_7.jpg" />



As a result the above image being displayed is actually from a different source...


So how does one make the above photo a link to one of the larger versions?
To link to the version that is local in in the Images folder...
use the
<a></a>
Anchor element
"Local" Link is...
<a href="Images/MoultonFalls-moss.jpg">
<img alt="Mouton Falls Local"src="Images/MoultonFalls-moss.jpg"
style="border: 0px solid ; width: 256px; height: 170px;" /></a><br>


Double click on the photos to see the larger version

Local	Elsewhere

This is the link for "Elsewhere"
<a href="http://uofgts.com/2008photos/bin/images/large/MoultonFalls_7.jpg">
<img alt="Moulton Falls Photo located elesewhere"
src="http://uofgts.com/2008photos/bin/images/large/MoultonFalls_7.jpg"
style="border: 0px solid ; width: 256px; height: 171px;"></a>

Whew! That's a lot of work to do by hand
Luckily WYSIWYG editors like Seamonkey, Coffee Cup, iWeb, Dreamweaver
can do this quickly

For an example, here is Seamonkey's Image requester
Use the Link Tab to input the path to the photo you want displayed at full size
when a visitor to your web page double clicks on the thumbnail...




To display the image as a thumbnail on the web page like this

The requester looks like this
Note that "URL relative to page location" is checked...

and the Thumbnail is sized using the Dimensions tab, like this





But what if you have a file folder with hundreds of images like this

http://uofgts.com/DW/index/index.html


You need a gallery "creator" program!

For Free
Use
XnView Create > Web Page  (available for all platforms)

Picasa Album > Export as Web Page (Windows only)

iPhoto and/or iWeb (Mac Only)


Take a look at the free Gallery Layout program Jalbum
You can learn more about JAlbum here... 


If you have a digital camera it may come with database or cataloguing software that can also make web image galleries...

Look for Software like Photo Impact or Photo Impression

If you have Photoshop Elements or Photoshop CS, they have built in "wizards" for making web based photo galleries

Speciality software like Adobe's Lightroom and Apple's Aperture have photo gallery software built in as part of the program,

I used Lightroom  to make these photo gallery pages

If you don't like how any of the above gallery creators create web pages
You can always edit their results!

I found some more "free" web site   templates by
Andreas Viklund
Check these out... Nice Templates!