Adding Graphics

Do you have a Web page that you love but you feel like something is missing? Maybe you have a page about your children. You list their ages, interests, and all about everything they do but you want more. Maybe you have a hobby or a craft such as making beautiful Christmas decorations or decorative bedspreads and you want to show the world how talented you are. Or maybe you have something you want to sell but you know no one is going to buy something they can't see. You need GRAPHICS!

Basic Graphics Tag

I'm going to show you what the basic tag to add graphics looks like and explain to you how it works then I'll give you some examples on how they can be used.

<img src="name_of_graphic.gif" align="left, right, top, or bottom" hspace="#of_spaces">

This is the basic graphics tag. As you can see it is made up of three simple parts.

1. img src="name_of_graphic.gif" - tells what the name of the file is and where it can be found. This file can be a .gif or .jpg (there are other's but generally these are the two that are used in Web pages).

2. align="left, right, top, or bottom" - tells which way you want to align the graphic in the space you are putting it in. This way you can line it up with the text that you are putting with it or just make it look better.

3. hspace="#of_spaces" - tells how many spaces you want between your graphic and the text or next graphic on the page. You wouldn't want your text lying right up against your graphic.

Examples

Here are some more that will show you how to align your graphics to the right, left, top or bottom:

• Left aligned graphic code
  With this code your picture is on the left and your text will be to the right of it.
  <img src="name.gifmp" align="left" hspace="5">

• This is a right aligned graphic code
  With this code your picture is on the right and your text will be to the left of it.
  <img src="name.gifmp" align="right" hspace="5">

• This is a top aligned graphic code
  With this code the words will be underneath the picture.
  <img src="name.gif" align="top" hspace="5">

• This is a bottom aligned graphic code
  With this code the words will be over the picture.
  <img src="name.gif" align="bottom" hspace="5">

Graphics Programs

Using a program such as Paint Shop Photo Album or you can change the look of your Dogz or you can create your own picture of anything you choose. If you want to put a photo on your page there is a great program that will help you touch it up or change it called Photoshop. Mapmaker is a good program to use if you want to make a map to put on your page. If you need some ideas on what kinds of graphics to use you can try About's Web Clip Art site. It is full of pictures and backgrounds you can look at and use.[/link]

Ideas For You

To give you some ideas of what you can do with graphics on your Web page I am going to provide you with a few links of some of my favorite pages with cool graphics:

Diary of an Average Australian - The banner this guy created shows off who he is and what he is about. You can create graphics to show the world who you are too. Remember, a picture is worth a thousand words.

Cartania: A Life in Essays and Pictures - Family picture albums, ancestor timeline chart, photographic family tree and many other ways to use graphics on a Web site. This site will give you lots of ideas.

Jade Leaves - Visit Moonlight Manor for a tour through a virtual haunted house. Join in the Halloween Ball on Halloween eve. See here photos and graphic designs.

Twin Towers Memorium - Before and after picture of the World Trade Center in New York City. One way to use your Website is to memorialize special events in your life.