build a web site | fundraising | community | collect fees online | blogz
Home Home
Admin FAQ's Admin FAQ's
HTML Basics HTML Basics
HTML Links HTML Links
Tables Tables
Graphics Graphics
Music Music
JavaScript JavaScript
Tips/Tricks Tips/Tricks


Using HTML to display
images on your web pages.
Graphics Collage

Print This Page

Preface: The easiest way to add graphics to your pages is by using the eteamz "Add Image" wizard buttons that are on many pages in your Admin section. Please review the eteamz Uploading/ Displaying Images FAQ. Here, we will help you to apply the two eteamz supported image formats, either .jpg or .gif, whether they be pictures, bullets, lines, etc., by using HTML. You may wish to check-out the HTML Basics page, as much of the information presented here uses HTML in a similar manner.

Kilroy Dividing Line

Make it exact!

The file path to your uploaded image must be exact, including your site name and your graphic name/type. If you do not use the correct HTML code, the only thing that you will see on your site is the dreaded red X ------>

The image at the top of this page, a .jpg, was applied with the basic code of:

<img src="">

or, as mentioned earlier, because all of our files are on the same web servers, it can be reduced to:

<img src="/member-support/images/graphics_collage.jpg">

The code in black is a constant, you'll use it every time, while the code in blue must exactly match your site name and your uploaded file name/type, whether it is a .gif or .jpg.

Kilroy Dividing Line

Add even more:

You can help your pages load more quickly and give some viewers more info by using attributes in your HTML image source code. If you have a PC, when you "right-click" on the collage image at the top and hit "properties", you'll see that the .jpg is 188 (width in pixels) by 76 (height in pixels), so let us add it to our code:

<img src="/member-support/images/graphics_collage.jpg" width="188" height="76">

As we do not want a border around our graphic, we specified a zero border, which is even more important when using images as links. A few people still surf the net without having images load, so let's tell them what they are missing by using an alt image attribute. Here is the full deal:

<img src="/member-support/images/graphics_collage.jpg" width="188" height="76" border="0" alt="Graphics Collage">

Kilroy Dividing Line

Left, right, or centered?

Aligning images on each page is possible by adding a bit more to your HTML. The diving lines on this page, "Kilroy.gif", were centered by placing <center> and </center> around the image source code, as:

<center><img src="/member-support/images/kilroy.gif" width="560" height="26" border="0" alt="Kilroy Dividing Line"></center>

Using no alignment attribute will cause your image to default to the left, but if you want to align your image to the right, the alignment must be within your image source code. Like:

<img src="/member-support/images/graphics_collage.jpg" width="188" height="76" border="0" alt="Graphics Collage" align="right">

Kilroy Dividing Line

Let's link:

Just like with text, a graphic can be used to link to anything; a web page, an email address, another image, or even to files. Please visit the HTML Links page for more info on links, as we won't show all of the possibilities, but this is how it is done. As with text links, a </a> closing tag is required. Here is an example of an uploaded textual link, opening a separate window, to to out Tables page:

<a href="/member-support/news/index.cfm?cat=200143" target="_blank">Tables Page</a>

Tables Page

All you need to do to use an image in this same code is to replace the text above in blue with your entire image source HTML (in blue, below). Using another one of our uploaded images, this is the code that you would upload to have that image be an online link :

<a href="/member-support/news/index.cfm?cat=200143" target="_blank"><img src="/member-support/images/table.jpg" width="108" height="60" border="0" alt="Visit our tables page!"></a>

Visit our tables page!

A different image, this time used as a centered email link:

<center><a href=""><img src="/member-support/images/email_animated.gif" width="32" height="40" border="0" alt="email member-support!"></a></center>

email member-support!

Kilroy Dividing Line

With Text.

Lightbulb When you wish to place text next to an image, you must include right or left attributes within your image code. If you do not, the text that you use will be placed below your graphic. This image, placed to the right, was inserted immediately before the word "When" as:

<img src="/member-support/images/lightbulb3.gif" border="0" width="62" height="74" alt="Lightbulb" align="right">

HandshakeEven though an image naturally defaults to the left, to have text on the same lines, you must specify align="left" within your code. Why is there so much space around the image? To create space, an invisible fence if you will, around any graphic, you'll want to include "hspace" (horizontal) and "vspace" (vertical) attributes. This will keep everything away from your image as far as you wish. The higher the numbers, the larger the blank area around your image. This particular .jpg was inserted right before the word "Even", as:

<img src="/member-support/images/handshake_world.jpg" border="0" width="125" height="82" alt="Handshake" align="left" hspace="30" vspace="20">

Member-Support TipIf you would like to review some additional info on graphics, check this out.

Home  Admin FAQ's  HTML Basics  Links  JavaScript  Music  Tables  Tips/Tricks  Help Links

Back to Top


  Web Sites Instruction Community
  Local Sites
Spotlight Sites
Build a Web Site
Tips and Drills
Sport Tip Email
Customer Support
News & Updates
Bulletin Boards
Camps & Clinics
Coaches' Corner

"In great attempts it is glorious even to fail." - Unknown
Copyright © 2016,, Inc
User Agreement