Using Graphics

Tuesday, 18 November 2003 11:22

Here's the sample picture that we're going to use for this tutorial... if you want to nab a copy of it yourself then check out [mysmilies.com] which is where we have borrowed if from :-) What we're going to do with this pic is insert it into a web page then move it around and play with it a bit so that you can see how the different tags tell the browser where and what to display. We're assuming you've got a directory on your server called Images and this is where you have stored the picture... so if you've named your directory pictures (or something else) instead then just substitute that for our reference to images :-)

~oOo~ ~oOo~ ~oOo~

Alignment...
The standard image tag looks similar to what you see below....

<img src="images/smilie_home.gif" width="115" height="55">

now lets pull it apart so that you can see which bit is doing what....

<img src="images/smilie_home.gif" width="115" height="55">

img - identifies it as being an image
src=" - where the image (picture/graphic) is stored
images/ - this is the directory (folder) where the picture is located
smilie_home.gif - name of the picture which is stored INSIDE your images directory (folder)
width="115" height="55" - dimensions... our sample pic is 115 wide by 55 high

now if you dropped this...
<img src="images/smilie_home.gif" width="115" height="55">
onto your page it would display as you see below...

the pic is plonked into your page using the default display.. which is hard left.. but say you want the picture to be placed to the right.. or dead center... to do that you need to add a wee bit more to your existing string....
to place the picture to the right, simply add in align="right"

<img src="images/smilie_home.gif" width="115" height="55" align="right">

or to the left (without using the default display) you'd add align="left"

<img src="images/smilie_home.gif" width="115" height="55" align="left">

to the center can cause a bit of grief.. so you can try adding align="center" or just use
<div align="center"><img src="images/smilie_home.gif" width="115" height="55"></div>

simple :-) now onto spacing...

~oOo~ ~oOo~ ~oOo~ ~oOo~ ~oOo~

Spacing...
how many times have you seen text muscling in on pictures like shown below...

word here, word there, bit of a blurb, a long word, a short word, any word and here we go again.. word here, word there, bit of a blurb, a long word, a short word, any word and here we go again.. word here, word there, bit of a blurb, a long word, a short word, any word and here we go again.. word here, word there, bit of a blurb, a long word, a short word, any word and here we go again.. word here, word there, bit of a blurb, a long word, a short word, any word and here we go again..

now sometimes this is just fine as it suits your purpose.. but what about when you want to give your picture some breathing room? It's not as hard as you think...

Again we're using our std html image tag...
<img src="images/smilie_home.gif" width="115" height="55" align="left"> and as you can see we've instructed the browser to display the image to the left (align="left") .. but now we're going to also tell it to give the picture a bit of breathing room using space tags...

for vertical (top and bottom) spacing use vspace="10"
for horizontal (left and right) spacing use hspace="10"
the larger the number ="10" the greater the distance between your picture and your text, the lesser the number the closer your text will be to your picture.

vertical (top and bottom)...

<img src="images/smilie_home.gif" width="115" height="55" align="left" vspace="10">

left and right (horizontal) ...

<img src="images/smilie_home.gif" width="115" height="55" align="left" hspace="10">

all the way around...

<img src="images/smilie_home.gif" width="115" height="55" align="left" vspace="10" hspace="10">

~oOo~ ~oOo~ ~oOo~ ~oOo~ ~oOo~

Alt Tags....

without an Alt tag

with Alt tag
from www.mysmilies.com

Hover your mouse over the pictures above, the one to the left reveals nothing.. but with the one to right you'll notice some text appears "from mysmilies.com" this is because we've thrown the alt tag into the std string. Alt tags are very usefull when you want to identify the picture in some way.. like saying "this is picture of our family" or "this a link to my favourite site" and it's dead easy to add...

still using our sample <img src="wackybconz/smilie_home.gif" width="115" height="55">
simply add the following alt="from www.mysmilies.com" replacing the text inside the " " with your own wording..
<img src="wackybconz/smilie_home.gif" width="115" height="55" alt="from www.mysmilies.com">

~oOo~ ~oOo~ ~oOo~ ~oOo~ ~oOo~

Thought for the Day...
Try not to have too many pictures on one page as it can dramatically slow down how fast your page will load.