Web Design Primer
Writing HTML (Basic)

Lesson 5: BACKGROUND & IMAGES

By now you know enough to write a very nice, text-based home page, but it is the ability of the World Wide Web to provide pictures, technically called images, graphics, or sometimes icons, that has made it so popular. In this Lesson, you'll learn how to place an image and change the background on your page and also how to turn an image into a link to another page.

Placing An Image On Your Page

The command to place an image is constant. You will use the same format every time.

Now might be a good time to talk about where to store everything because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in the same place as your web pages. That means place the image right on the same floppy disc, or in the same hard drive directory, as the page that will call for it. There's more on that coming up in Lesson 7. But for now, just store everything together in the same place.

Here's the format for placing an image:

<IMG SRC="image.gif">

By replacing "image.gif" with "homepage.gif", you get this...

Here's What's Happening

• IMG stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image Tag.
• SRC stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone. If you start to place your images all over the place, you'll have to start adding directories and sub-directories to the SRC attribute. And at this point, that way is too confusing. Just place the image in the same place as the HTML document that will call for it and then call for the image by name alone. You can get fancy later. Right now, let's just get it to work.
• image.gif is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).

Image Formats

There are four basic formats you will find on the World Wide Web. Each is denoted to the browser by a different suffix. Remember that "name.suffix" discussion from Lesson 1?

• .gif This is pronounced "jif" or "gif" (hard "G") depending on whom you speak to. I have always said "jif". This is an acronym for Graphics Interchange Format.
       The format was invented by Compuserve and it's very popular. The reason is that it's a simple format. It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
• .jpeg or .jpg (pronounced "j-peg") There are two names to denote this format because of the PC and MAC formats allowing 3 and 4 letters after the dot. JPEG is an acronym for Joint Photographic Experts Group, the organization that invented the format.
       The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
       Someone always say that .gif images also use compression. Yes, they do, but only when they are first created into that format. After that, no compression. JPEG, on the other hand, uses compression throughout its life to fold up smaller than it really is.
• .png (pronounced "ping") PNG is an acronym for Portable Network Graphics. A new kid on the block, this format doesn't enjoy the same widespread browser support as GIF or JPG, but that may change. Both Microsoft Internet Explorer and Netscape Navigator support PNG (provided you've installed the proper plug-in). What makes PNG such a big deal? It compresses information 10 times more efficiently than GIFs do, and, unlike GIFs or JPGs, PNG can correct its own brightness by adjusting gamma levels depending on where it's displayed. Given the disparities between how a graphic is displayed from platform to platform and monitor to monitor, a PNG graphic will be able to ensure consistency at a level the best-scrubbed GIF cannot.
• .bmp (pronounced "bimp") This is a "bitmap." You will probably never place a bitmap as an image, although now Internet Explorer browsers allow it. A bitmap is an image that a computer produces and places for you. A counter is an example.
       Even though Internet Explorer will allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Go with .gif or JPEG.

Where Do I Get Images For My Page?

They are literally everywhere. A lot of sites allows you access to over 500 images for free, and there are other sites out there that offer just as many. Plus, since you've been surfing, you've seen hundreds of images already. If you see something on someone's page that you really like, ask to use it. Don't just take it. That's not right and could be against copyright law. Ask. You'll probably get the image. In no time you'll have a slew to use on your page.

Activating An Image

Okay, this gets a little fancy. In Lesson 4, I showed you how to create a hypertext link. What it did was create blue words on your page so someone could click on them and then jump to another site. Well, here we're going to set it up so an image becomes clickable or "active." The viewer would click on the image, instead of on blue words, to make the hypertext link. I'll make a link to my home page using the image above.

Here's the format:

Look at it again. See what happened? I placed an image Tag where I would normally have placed words. Here's what you get with that format. Lay your pointer on the image, but don't click. You'll see the entire image is active:

To make the border disappear, you again turn to a trusty attribute, a command inside of a command.

Here's the format:

See what I did? I added an attribute that denoted that the border should be 0. You can go the other way too if you'd like. Make it BORDER="55" if you want. It'll just make a huge border. Note that the number 0 is in quotes. It is an attribute, after all.

Here's what you get using BORDER="0":

Again, lay your pointer on the image without clicking. You'll see that it is active but doesn't carry that annoying blue border.

Background Colors

Changing background colors is very simple. You need two things:

• A command that alerts the browser (like Netscape or IE) that the color is going to be changed and...
• A color code.

Welcome back. No doubt you looked around and saw a couple of colors. Neat, huh? Hopefully you brought back a color code (hex code) you'd like to use -- but if not, no matter -- I have one: "FFFFFF." That code will produce pure white. (Why FFFFFF?!) I told you the codes weren't too nice.

Be sure to enclose it all inside of quotation marks! So now that I know the code of the background I wish to create, I simply insert the code into the command and place the attribute on the page inside the <BODY> tag. The code for a white background will look like this:

Please note: When you write these codes, you may notice I write them with a "#" sign in front of the code. It used to be that you had to do that but not any more. You may want to just use the six-digit code.

Background Wallpaper

First you need a background image. 

Since you need a digitizer to make backgrounds, and I know not everyone has one of these at their fingertips, the best way to use a background is to grab one off the Internet. Here are a couple background images I have downloaded. Go on and check.

Welcome back. Now that you have a .gif or .jpeg for your background, you will want to put it in the same directory you place all your other images into.

Again, all background attributes come inside the <BODY> tag. Like so:

     All color commands are overridden by the BODY BACKGROUND command. That's mainly because the wallpaper goes over the color.

But... it will take a bit of time for the background .gif or .jpeg to load. It looks nice to put a color command before the BODY BACKGROUND command. What happens is that your page goes to a certain color and then the wallpaper wipes over that color. Nice effect.

Please note: The use of two commands, one for BGCOLOR and the other for BACKGROUND, does not work on upper level browsers. You'll need to put them both together in the same command. Something like this:

And that brings this lesson to a close. Next lesson you'll deal almost exclusively with attributes in order to manipulate your images. You'll truly impress your friends with this one.

Exercise 5: (to be submitted next meeting) This exercise is a must for you to make, you will not get your Certificate of COMPLETION without doing this exercise.

1. Open the same file you have created from the last exercise in Lesson 4 (resume.html), or you may create a fresh one from your "notepad" or "simple text".
2. Use <H1> or <H2> tag in your main Heading (e.g. RESUME, Curriculum Vitae)
3. Use <H2> or <H3> tag in your sub-heading (e.g. Personal Info, Education, Work Experience, Skills, etc.). These are mostly your hotspots, remember the tags <A Name="____">...</A>?
4. Use "bgcolor" and "background" attributes in your <BODY> tag (e.g. <BODY bgcolor="beige" background="image.gif">). You may use the background images I have included in this lesson but don't forget to save the image/s in your exercise diskette.
5. Add photograph... you may add your own photograph  if you have one (pls. file size should not be more than 50KB) or you may use my own photograph (he he). Again, don't forget to save your photograph in the same diskette.
6. Make it consistent, I mean use <B>, <I>, <FONT color....>, etc. consistently like below....
   Name: Firstname Lastname
   Nickname: Your Nickname
   Address: P.O.Box 12345, Dubai, United Arab Emirates
7. Use hyperlink/s to go back to the top of your page. 
8. You may use the graphics I have included in this diskette as you like.
   

Copyright © 2000-2002, MT for use in HTML Writing Course at FWRC-OWWA Only. All rights reserved