Make My Own Web Page

Free HTML Tutorial

Web Page Graphic Images

     The old saying "a picture is worth a thousand words" is really true when you make your own web site. Web page graphic images add so much to your web page, without taking up too much space (if you do it right).
     Sometimes web page graphics can cause problems. If your webpage takes forever to load, people leave. This usually happens when a graphic is just too large. Can you make the web page graphic smaller with the same effect? If you can, it loads faster.
     Plan your graphics and definitely get a good computer graphic program. The default size of your web page graphic should fit in your page without adjustments.

more details...

simple picture

<img src="painting.gif">

Web page should look like this.

make GIF image 64x37 pixels

The <img> tag puts a web page graphic image on your web page. All it really needs is a filename with the SRC modifier. The graphic file can be in .GIF or .JPG file format.

more details...

set dimensions

<img src="painting.gif"
width=64 height=37 >

Web page should look like this.

make GIF image 64x37 pixels

Dimensions makes your web page load faster. Each time a page loads, your browser has to set aside space for each web page graphic. If it isn't defined, it guesses. Then, if it's wrong, it refigures how much screen space to allow for the web page graphic image.
Your web page graphic size should match your dimensions. This keeps the browser from having to calculate different dimensions. This works so much faster, besides, you can distort your picture if you use the wrong dimensions.

more details...

align picture right

<img src="painting.gif"
width=64 height=37 align=right >

Web page should look like this.

make GIF image 64x37 pixels

The align modifier simply puts the picture where you want it. Your choices are left, right or center.

more details...

alternate text

<img src="painting.gif"
width=64 height=37 align=right
alt="Palette of a great artist" >

Web page should look like this.

make GIF image 64x37 pixels

     The alternate text actually does two things. First, if you hold your mouse over the graphic, your alt text pops up over your picture. Sure is cool HTML code.
     The second and probably most important, is to make sure someone with an older non-graphic browser also knows what is there. This modifier makes your page ADA compliant for our blind web surfers (or some of us iconically challenged).
     Another side benefit; the Search Engines do not recognize your web page graphic, but will recognize your alt text and index it.

more details...

Wrap text around your web page graphic

<img src="painting.gif"
width=64 height=37 align=right
alt="Palette of a great artist">

    
See, I can make my own web page with web page graphics and text.<br>

    
This is a picture of the palette of a great artist. Of course we can't tell you which great artist, because she is still alive. Artists are seldom recognized during their own lifetimes.

Web page should look like this.

See, I can make my own web page with web page graphics and text.
This is a picture of the palette of a great artist. Of course we can't tell you which great artist, because she is still alive. Artists are seldom recognized during their own lifetimes.

The text wraps around the graphic rather nicely, doesn't it?

Well, when you read something, you often get a picture in your mind of the author. I wonder how many of you thought I would look like this?

My Picture

<img src="pics/alien.gif"
width=75 height=125
alt="Portrait of the Author">

Web page should look like this.

Portrait of the Author

What? How do we make a motion graphic? Good question! This is an animated graphic. All of the motion is contained within a single web page graphic file. This GIF file actually contains several pictures (16 in this case) and flips through them at a programmed rate.

Computer Graphic Program

Paint Shop Pro

     Now, you can make your own graphic image or adjust your web page graphic for most efficient web page loading. You can even make your own free animated graphics.
     Now, you don't have to spend hundreds of dollars for an excellent computer graphic program. I proudly recommend the Paint Shop Pro program from Jasc.
     The software is quite powerful but reasonably priced. I used this computer graphic program for all the web page graphics on this web site. Make you own graphic images now!

Phone: (208)467-6236
FAX: (208)463-9363

mtg@makemyownwebpage.com

MTG EnterPrizes
511-9th Ave. N.
Nampa, Id 83687-3347

Page Created and
Maintained by

All Rights Reserved © 2002-08
www.makemyownwebpage.com/tutor/html-images.htm