IMAGES

So far you can build a web page with text and links! Are you feeling cool yet?

You can modify the text to look how you want it to look, but you havent yet learned how to make your pages into fine shining examples of heavenly art. Youre going to need some color, and images. Without further delay, let the web design course continue to:

Background Color

Setting a background color is easy.

Remember how the <font> tag had modifiers, like COLOR, SIZE, and FACE? The modifiers affected the font tag, and were listed inside the tag itself (example: <font color="red">). Some other tags also have modifiers, and background color is a modifier for the <body> tag.

It is important to keep in mind that you can only have one body tag. You are going to add the background color modifier to the existing body tag.

A body tag that includes a background color looks like:

<body bgcolor="whatever_color">

Remember the "one command, one word" rule about modifiers? In HTML, each command is its own separate word. Bgcolor sounds like it might be two words. Youre telling the web page to change color, which is only one command. On command, one word. So, bgcolor is one word.

Open up an HTML page and change the background color. Experiment. Have fun

Be careful with your background color choices. Remember that the web is still a written medium. Its very hard to read over glaring yellow.

Image Types for the Web

Of course youll want some pictures to spice up your website. Images are used as buttons, banners, and design elements.

There are different types of image files for the web, If you use the wrong one, your web pages will look bad. Images compress in different ways to make their file size smaller so that they download more quickly. Different image types compress images in different ways and use different compression strategies that work better for different types of images. Luckily for you, its pretty easy to decide which compression type to use.

Images and their compression types are easily identifiable by their three-letter file extension, immediately following the file name.

.JPG(pronounced jay-pegg)

JPG stands for Joint Photographers Expert Group. Although its not super necessary for you to memorize what all the initials for all the file types stand for, some people like to know. The compression method JPG uses works very well on an image that is (industry term coming) non-continuous tone. Tone means color, right? Continuous means "keeps right on going". So, "non-continuous tone" means colors that dont keep right on going. What were talking about here is a photograph. If you took a picture of my face, youd have one color here and another color there. JPG was designed to show color photographs on a computer. If you try to save a picture that is continuous tone as a JPG, itll look messed up.

.GIF

.GIF stands for, "Graphics Exchange Format". Later on we will get much deeper into the workings of the compression methods that different image types use, but for now, you should know that a GIF is generally intended to be used for images created on a computer, with solid colors and text.

Here are some examples of images saved as correct and incorrect image types:

Okay, where should I get these images?

Create them yourself.
You can use image creation software like Macromedias Fireworks, or Adobes Illustrator. More about these programs later.

Scan them in.
As a web designer, you should have a scanner. Luckily you dont need a super expensive one. Hewlett Packard makes very good scanners, and theyve got a very nice one for about $100.00. Well talk more about scanning later, but you should know a little about resolution right now. Resolution, or DPI (dots per inch), refers to the number of dots that make up one linear inch on a picture. On the web all images are 72 dpi, because thats how many dots per inch a standard monitor can show. When you scan, your scanning software will give you a choice about resolutions. Choose 72 DPI.

Get images off of the web.
Its easy to take images off of the web. Simply right-click the image you want (ctrl-click on a Mac), and choose "save image as". Make sure you save the image somewhere in your root folder. Now you can use that image in your website. Note that using someone elses image without their permission may constitute a copyright violation. Search for "Free Images" on the web, or try various free image web pages, like www.microsoft.com/clipgallerylive
or
http://desktoppub.about.com/compute/desktoppub/cs/freephotos/index.htm

Buy a disk with images on it.
Any major computer store will sell you disk with thousands of copyright-free images for around $40.00.

Hire an Artist
Artists can be expensive, but heres a nice tip, try local art schools. There are geniuses just begging for work they can use for their portfolio. You can have logos and other original designs created for very inexpensive rates. Try the Academy of Art Collage in San Francisco at: 415.296.2088

Now Ive got images, how do I place them in my web page?

The tag you use to place an image in your web page is:

<img src="whateverimage.gif (or) whateverimage.jpg">

People refer to this tag as the "image source" tag.

Dont Forget About File Paths!

Remember that youll need to give directions from your HTML page to the image you want to insert/

How would you write the tag to insert image.gif into page1.htm in the example below?

The tag would be <img src="images/image.gif">

Image Tag Modifiers

The image tag has some very important modifiers. You can use any or all of these modifiers in the same image tag.

Height and Width
You can add height and width settings to your images. Height and Width is measured in pixels. A pixel is a dot. Remember that the Internet uses 72 dots per inch?
An image tag with a height and width of 100 pixels would look like:

<img src="any.gif" width="100" height="100">

It is important to note that you should not change your images size with these settings. Youd end up with a bad looking image or an image that takes too long to download. Instead, youll change image sizes with an image-editing program like PhotoShop of Fireworks.
So, if you cant change the actual size of your image, why would you bother with height and width modifiers?
Good question.
The answer is: you will use a height and width modifier because they allow the web page to load faster and in a more pleasing manner. When the browser reads a height and width tag, it inserts a placeholder the same size as the image. Next, the browser skips loading the image, and continues loading and displaying text. When the text is all finished loading, the images load. This provides a much nicer experience for people with slower modems.

The ALT tag
ALT stands for "alternative". The ALT tag allows a viewer to see a word in place of the image while the image is loading. There are, believe it or not, some people who browse with images turned off. There are also sight-impaired users who have their web pages read to them by the computer. Either way, some search engines will not list your site unless all of your images have an "alt" modifier. The ALT tag, added to an image tag might look like this:

<img src="any.gif" alt="alternative text here" width="100" height= "100">

ALIGN
You can put two images next to each other. You can put an image next to text. HTML treats the image just like it was another word. Text will line up next to the image, but only one line of text.
The text will not "wrap". Later youll learn tricks to get around this. By default, the text will center itself vertically when placed next to a taller image. You can use modifier tags in an image to affect orientation.

<img src="any.gif" align="top">
<img src="any.gif" align="middle">
<img src="any.gif" align="bottom">

BORDER
If youd like to, you can assign a border to an image. The border size is measured in pixels. There may be times you want to stipulate the border as "0", to ensure that there isnt one.
<img src="any.jpg" border="1" width="100" height= "100">

Remember that you can use any or all of these modifiers in the same image tag.

Using Images as Links (Buttons)

To use an image as a button, simply insert it between the opening and closing hyperlink tag.

When an image is used as a link, the browser will automatically display a blue border around the image, unless you tell it not to with BORDER="0"

<a href="somepage.htm">

<img src="somegraphinc.gif" border="0">

</a>

Background Images

Images can also be used in the background of a web page. When using an image-based background you have to be very careful about download time. A very large image will often take a long time to download. There are tricks you can use to keep file size small even if the image is large, though. Well learn those tricks later. Right now you should know that an image used as a background will tile itself until it covers the entire page. A users computer will download the small image quickly, and duplicate it using the processor. The image would continue duplicating until it covered the whole page.

The tag used to add a background image is a modifier of the existing BODY tag:

<body background="whateverimage.gif or .jpg">

Notice that the modifier is a different than BGCOLOR. You cannot have a background image and a background color.

Forward to Lists |