Web Page Making Help Page

| Preface | Introduction | HTML vs. PHP | Hosting? | Domain |

| Printing | Images Part 1 | Images Part 2 | Help Forum |

Chapter 6 - Images

Once you have your basic design layout planned (whether your working with an 800 x 600 layout or a 1024 x 768 layout) you are now ready to add text and images to your webpage.

There are several types of image files for webpages. The most popular files are in .jpg (pronounced "j-peg") or .gif (pronounced "jiff") files.

Sure .bmp (bitmap) and .png files are good too, but .jpg and .gif are most efficient for quick loading times.

This is a typical .jpg image. I colored the background yellow so that you can see that the image is NOT transparent.

.gif files are useful when you want a transparent background or a moving image.

This is a typical .gif image. I colored the background yellow so that you can see that the image being transparent.

Moving .gif

This is a typical moving .gif image. I colored the background yellow so that you can see that the image is transparent and moving.

Of course there is a lot more than rotating and spinning a picture. You can colorize or pixelate or add lots of cool effects to a .gif file. The only catch is the fancier you're getting with the picture, the larger the file size. So it goes back again to the concept of bandwidth.

Now how can you create your own .jpg or .gif files? There's always the cheapest way - Microsoft Paint.

Every computer that runs Windows have Microsoft Paint.

Start Menu -> Programs -> Accessories -> Paint

Back to Top

Image Softwares

If you want to get fancy, you can buy your own image creation software.

The most popular are Adobe products. Such as Adobe Photoshop and Adobe Illustrator.

I use Jasc (now Corel) Paint Shop Pro because of the cheaper price and quicker loading time on my computer. Adobe Photoshop needs a good computer to use, my tiny laptop just doesn't cut it.

Besides the large difference in prices between Adobe Illustrator and Paint Shop Pro. The biggest difference is HOW the software create the images.

Adobe Illustrator uses "vector-based" technology. While Corel Paint Shop Pro and Adobe Photoshop use"pixel-based". Vector gives truer color and definition to the image, especially if you decide to enlarge or shrink the image.

Back to Top

Vector vs. Pixel based images

The best way to understand the difference is by taking a small image and enlarging it. Anyone that's ever tried that in pixel-based format will realize the horrible resolution to the picture. The enlarged picture looks all choppy and dotty and the tech-term is - "pixelated".

If the image was in "vector-based" format, you can enlarge the image without losing ANY color or resolution.

Vector-based is probably going to be the technology of the future, but the price of the software is probably what holds many people back. But if you've got the money, Adobe Illustrator is well worth the investment. However if you like to use pixel-based (which is still me) Adobe Photoshop is very powerful and useful and definitely a worthy investment.

Back to Top

HTML Coding an Image - without word wrap

Now that you've got the image you want, you want to place it inside your website.

OR if you have your own forum or your at someone else's forum that allows HTML coding, this is also useful information for you to learn.

Adding images to your webpage is easy. The most basic HTML coding is:

<img src = "gemelle.jpg">

The above HTML coding is the simplest form. When you write "image.jpg", you're assuming that the "gemelle.jpg" file is in the SAME EXACT folder as your webpage file.

For example, you create a webpage titled "webpage.html" and you want to add a picture of gemelle.jpg into it. You would input this as your coding:

<img src = "gemelle.jpg">

If you want the image to be on the right-hand side of the page WITHOUT any word wrap, then this is the code:

<p align = "right"><img src = "gemelle.jpg"></p>

See sample ->

<p></p> means "paragraph".

Also notice that <p> is the beginning and </p> ends the code. You will see the backslash / used a lot in HTML programming.

If you want the image to be centered on the page WITHOUT any word wrap, then this is the code:

<p align = "center"><img src = "gemelle.jpg"></p>

See sample ->

Now see if you can figure out the HTML coding for placing the image on the left-hand side!

Back to Top

HTML Coding an Image - With word wrap

If you want the image to be on the right-hand side of the page WITH word wrap, then this is the code:

<img src = "gemelle.jpg" align="right">

If you want the image to be on the left-hand side of the page WITH word wrap, then this is the code:

<img src = "gemelle.jpg" align="left">

There is no "center" function when placing hte word "center" inside the <img src> If you want to put the image in the middle with words on both sides of it, then you're looking at the concept of tables.

text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text

When I make the table border "0", this is what you'll see ...

text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text

But I'll get into that concept of tables in another chapter.

Back to Top

Next Part -> Chapter 6 "Images Part 2"

Lasted Updated: April 24, 2007