Colors and Patterns
You've already used BGCOLOR="white" in your <BODY> tag to use a white background color on your first page. It is one of the 216 browser safe colors that are displayed the same way with any browser. Some other colors you might want to try are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow. Please remember to use quotation marks (" ") around the color name preceded by the word BGCOLOR=, as in BGCOLOR="blue" for a blue background color.
The browser safe colors all have names, but it is easier to use the hexadecimal color codes than remember all 216 names. I only used white or black backgrounds so far in my puzzles except for Kitty Kitty, which uses BGCOLOR="#FFCC33" which is a medium gold color. If you want to see all the browser safe colors, I have a set of charts for the browser safe colors with a brief explanation of the RRGGBB format in my Graphics section. Click on Color Charts to see the charts, but use the browser Back button to return to this page. Clicking on the Index link on that page will take you to the Graphics index page, not back to this tutorial.
To add a background pattern, you would use the code BACKGROUND="name-of-graphics-file" in your <BODY> tag along with the BGCOLOR code. You can use both a BGCOLOR and a BACKGROUND in this line, but the background color will be covered by the graphics file unless you use a graphic that has a transparent background that will let the background color you set show through. It is a good idea to specify a background color that contrasts with your text color just in case the computer can't find or display the graphics file. The computer uses black text (blue for links) unless you tell it otherwise. I used a border graphics file from my Graphics section to make the colorful tiled pattern on the left side of this tutorial. The text was positioned over it using a table, which I'll discuss later.
The name-of-the-graphics-file must not only include the actual name of the file, but also the folder where it is located relative to the HTML page. If you have your HTML page stored in a folder called puzzles and the graphics files stored in a subfolder called graphics within your puzzle folder, you would use a file called blu.jpg by using BACKGROUND="graphics/blu.jpg". The graphics/ tells the computer to go to the graphics folder within the same folder where this puzzle page is stored and get blu.jpg from there. Please note that you need to surround the name with quotations marks. If you omit one or both of them, the computer might not understand which file you want and just ignore the BACKGROUND code entirely.
If you store your graphics in a folder outside the puzzles folder, you will need to specify the complete path to reach it. On my site, I have put my backgrounds into a folder named backgrounds and left my other kinds of graphics in a folder named graphics in my main directory at the same level as my HTML puzzle folder so that all my site pages in all the folders can share the same backgrounds and graphics files easily. It makes it much easier to manage a well-stuffed folder with dozens of files that way. Remember, it is easier to get organized first than go back and do it later.
I have to tell it to find blu.jpg by going up from the HTML puzzle folder to the main directory, over to the backgrounds folder, and down in there to find blu.jpg. The code to use for this is BACKGROUND="../backgrounds/blu.jpg". That ../ (just type two periods and a slash to form it) is shorthand for "leave this folder and go up into the folder (or directory) which contains it first". Once you are there, the backgrounds/ tells the computer to look for a folder named backgrounds and look in there for the file specified blu.jpg. Since this is the way you created your three folders in the first chapter, this is the form of the BACKGROUND code you will use in your files in this tutorial.
Note: These files should be in .jpg or .gif format. There are other graphics storage formats, but not all will work in HTML.
Pretty pages
I made the border on this page with a border graphic with a table to position the text. A border graphic is a graphics file with a pretty design on one side and a solid colored strip that should be long enough to extend across the width of the screen. If you put a BACKGROUND code in your <BODY> tag, your browser will repeat this design down the length of the page to form a decorative strip on one side of the page with a solid colored area next to it for your text. It's a good idea to specify a background color too in a color that contrasts well with your text in case the browser can't find the file or can't display it. The code looks like this:<BODY BACKGROUND="../backgrounds/railfencebor.jpg" bgcolor="#FFFFFF">
However, if you type the text below the <BODY> code, you'll see the text displayed from one side of the screen to the other, including over that nice design. To confine the text to the solid colored area with a nice margin, use a table with cells over the left and right margins held open with the spacer graphic to display the background design. Here's a sample page:
|
|
Here's my text on a simulated page, nicely confined to a box with left and right margins defined by the cells held open with the spacer graphic. I can define top and bottom margins by using line break tags <BR> to add extra blank lines above and below the text. I have used border=1 in the table tag so you can see the three cells of this table. |
|
Try different background colors and graphics in your first HTML page to see the effect. If you don't have any graphics files to use on your computer, you can get some from my Graphics section pages. The instructions for saving the graphics files are at the top of the display pages whose links are listed on that index page. Save the graphics files in the backgrounds folder you created in the same directory which holds your puzzle folder and practice using the correct path in your BACKGROUND code. If the desired background isn't displayed, check your code for errors, including making sure that you spell the file name exactly as it appears in the directory. I'll explain about setting up and using tables in the next chapter, Using Tables.
Last update: August 12, 2001