... HTML & Webpages ...

... Recommend this series to a friend.

ADDING A GRAPHIC BACKGROUND

Whatever background you want on your page is up to you. Nothing wrong with plain color; and always keep in mind that a webpage is to be seen for graphics and read for text. And if you have a page of color that makes it easy for the viewer to read, there's no problem with that. And if you have the right background (whether color or graphic) that works well with your choice of text and links, that's all right too. Let's see how we make a graphic background:

Before we place one on your page, know that this background must never be too "noisy" or 'busy" so that it will detract from the purpose of your page (to be read for content or seen for aesthetics). Whatever interferes with that purpose is a strike against your page; it's the legibility of the text that is most important. With that said, how are these graphic backgrounds obtained?

  1. I list this one first because it is the one I never use (though I've tried it with some success). You make one with your paint program, which would be a bmp file. But you save it as a jpg file; that's your background file.

  2. Visit the many sites on the internet that specialize in sharing "backgrounds".

  3. When visiting any of the pages that you usually visit on the internet, and you see a background on one page that catches your fancy (and that you know will fit well on your page) … what can I say; borrow it?

Let's say you like the background on this page you are looking at now (the one I used). What do you do?

First a warning to AOL Users … DO NOT Save graphics off the net using your aol browser. It will only allow you to save them as an .art extension instead of a .jpg or .gif

To correct this problem simply MINIMIZE all of your AOL browser by clicking on the _ button (that's the small dash at the top right side of your browser window).

Now once you have it minimized, double click on your Netscape (my preferred browser) or IE (Internet Explorer) to do your surfing for neat graphics to be used on your page.

AOL Users (one program I keep far away from) … you may not be able to upload using the upload feature in file manager. To avoid this headache, use Netscape or IE to upload you files. Now let's continue; uploading a file to your File Manager:

  1. Right click anyplace that is not a picture; right on the text is all right, and click "Save Background As"

  2. In the resulting "Save As" window you give it a name, indicate how you want to save it, what type of file (I have it as a gif file; could just as easily have been a jpg file), give it a name and indicate a place to save it (probably a folder you made temporarily on your desktop).

  3. Name it what you want; I call it as close to what it is and add bkg to the name (that's how I know it is a background file in my backup folder or when I see it in my editor). The full name of this file with the extension is tanbkg.gif. You will develop your own system for naming your website files.

  4. Upload it into your File Manager. You might first create a folder in your first level File Manger (where the index.html file is) and name it "Bkg" … that's where you will store all the backgrounds you use on your website. I used to do that but now I keep to one or two different backgrounds and it is just as easy to store them in a folder I call "Files" along with other graphics for pages I have in m first level File Manager.

    All right, now that you have uploaded the file (see Page 2 for how to upload files to the File Manager), how do we place it on your page? Here's the tag:

    <BODY BACKGROUND="location of file and include the extension after the name">

    And we will also include within those brackets all the other attributes of the BODY tag. Just for practice, let's assume you used the same background I have on this page, and downloaded "tanbkg" which is a gif file, and you loaded it into a folder you named "Bkg" (you can name it whatever you want as long as it is so named in your html tags). And for practice, we'll make the margin 50 pixels wide, the same as I have here, and the color scheme for text the same as I have here. The tag now extends to this:

    <BODY BACKGROUND="URL OF YOU PAGE/Bkg/tanbkg.gif" TEXT="#003300" MARGINWIDTH="50">

    A longer but more accurate way of getting the correct path (at least until you become comfortable working with html tags) is to open the Bkg folder (or whatever you named it), click the "View" link next to this uploaded background file, and then when it comes into view, right-click it, and click "Copy Image Location" (it is now on your clipboard so don't copy anything else; not yet). That's what you will paste next to the first quote in the above tag. Here it is again:

    <BODY BACKGROUND="

    Then you make a space after the Bkg/tanbkg.gif" (after that quote) and add TEXT="#003300" then a space and we add MARGINWIDTH="50">

    Note that there ARE places within extended tags that require spaces. This will become apparent when we add the links to this extended BODY tag.

    We continue on the … Next Page … adding a link & email.

    We return to the … Table of Contents … enjoy your work.

    And if anything to add or correct - - I certainly would appreciate it.

    Return to ... Navigator ... that's it.

    1