Images

Without images.. I must admit.. pages look pretty darn boring!!!! *yawning* .. .. So.. we give the viewer something to look at besides just reading and reading and reading! Pictures are a good idea... but of what? that's best left up to you and what you want to put up... let's cover some of the basics of images..

There are several different types you can chose from .. gif's .. jpg's .. bmp's.. animated gif's..........................................................and that's just a SMALL sampling of what's out there. Let's work on a couple of things here....

First of all.. how to 'obtain' your own images.. well .. if you see an image up someplace.. and you like it.. here's what you do.. See the picture on the right?

1)Place your curser over it
2)Right mouse click on the picture
3)A little screen pops up.. choose the section that says "Save Image As.."
4)hit 'ok'.. once you have the file folder open that you want the image in.
**you really want the image on your own server.. cause if you're using someone else's URL.. and their server is down.. you're going to end up with something that looks like this

UGLY huh?!**

Image obtained.. it's yours.. .. now what? Well besides the fact that I skipped on ahead several sections :) ... you're going to want to learn how to post that image onto your page.

The next thing I suggest you do.. is download a copy of ACDSee or any other type image viewer. You're going to need it for doing page work in the future. I like to have ACDSee open because it's not a really large program to have open ... what ACDSee will do.. is this.. it allows you to view images that are on your harddrive.. it also tells you the dimentions of the image .. height and width aspects in pixels..... and the size of the file in kilobytes.

Now that you know all that .. let's go on... This is the main part of posting an image up..
<img src="button.jpg">

Now this will ONLY work with the shortened URL as explained in the Links section. What does all of that stuff up there mean? It means "image source = the URL of where the image is at and that it's a jpg image". See? Not so complicated!

Let's get a little more advanced here though.. Have you ever been to a web page.. and you're 'stuck' in one spot while it's loading? Well.. that can be avoided... this is where ACDSee comes in...Here's how to do it.

<img src="button.jpg" height="50" width="100" alt="empty button">
What you've added in there is the 'height'.. 'width'.. and the 'alt' tags... this allows the browser to load all text first.. and then start working on the images... it "saves" a spot on the page..the exact size of the picture. This allows the viewer to scroll down and read what is there.. and the images will pop up as they load. No more waiting and waiting for something to load.. with nothing to do.

Ok.. so we have this button just sitting there buttons aren't any good unless you can push them! *a bad habit of mine.. I love pushing buttons on pages :-)* But it's not connected to anything.. it's just an inactive image... let's make it a bit more active...

<a href="http://www.evisione.com"><img src="button.jpg" height="50" width="100" alt="empty button></a>

*if you do push the botton.. just hit the back button on your browser to get back here*
Well.. ok .. now you've got an active image.. something that people can interact with.... but .. you notice something? There's an outline around the pic.. that wasn't there before...hmmmm.. kind of detracts from it... ya know? what to do?

Try this:
<a href="http://www.evisione.com"><img src="button.jpg" height="50" width="100" alt="empty button" border="0"></a>

See? no more outline.. this was taken care of by adding the 'border="0"' aspect to the image source tag. But you can tell that it's still a link.. because when run your curser over it.. your curser changes just as it would for any link! :)

Ok.. you've got pictures.. you know how to get them to load right..and you know how to make them look good if you're going to use them as links... what else is there? .. well as with text.. we can force it to align to the center:

or to the right:

 

What happens if you want to have an image on both sides.. and text in the middle? Or have an image up and you want text written 'around' it? WOW? lots of options with images eh?.. Let's try some things.. and see what the results are...

<img src="button.jpg" height="50" width="100" alt="empty button" align=left>
<img src="button.jpg" height="50" width="100" alt="empty button" align=right> <center><font size=+2>Two buttons with some text in the middle!</font></center>

Two buttons with some text in the middle!

 

 

I think you get the idea of how to do this.. experiment.. you might like what you see...

Text Size & Types | Font Colors & Faces
Combining Attributes | Color Chart
Images | Alignment
Horizontal Rules | Links | Lists
Tables | Resolution | Midis & Sounds
FTP

Copyright © 1996-
Rose Swinson, Eloquent Vision, Evisione
All rights reserved