free web graphics
JJW Web Design - Small Business Solutions
Home Page
Small Edge Families
free graphics White Backgrounds
free web graphics Black Backgrounds
Table of Contents - Border Families
graphics families White Backgrounds
graphics design Black Backgrounds
misc graphics
graphics patterns Patterns & Textures
HTML Help
web design Edge Families
free graphics TOC Families
Table of Contents - Contact Me
free web graphics Graphics Requests
web graphics Professional Design
 		JJW Web Design free web graphics

edge graphics

html tutorials
ball How do I write my HTML to be use with an edge graphics family?

At this point you're probably wondering how the HTML is written. This small tutorial will explain the two most common methods of indenting the body of your HTML for use with an edge family of graphics.

First Method, <UL>'s:

The first method is to use two unordered lists to indent the body of your HTML. You basically place two <UL>'s just after your <BODY> tag and two <UL>'s just before the </BODY> tag. The simplest example of this HTML format is shown below.

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>
<BODY>
<UL><UL>

"This is where the contents of your page go."

</UL></UL>
</BODY>
</HTML>

Unfortunately, this method only gives you a marginal amount of control. Different browsers tend to indent the HTML in different amounts. Luckily, there is another method.

Second Method, using a <TABLE>:

The second and preferred method of indenting is much more flexible. This method takes advantage of the very flexible <TABLE> tags. If you are not familiar with the <TABLE> tags, please go to my other Web site, HTML Tutorials for the Complete Idiot, and read the Table and Edge Tutorials.

Using the <TABLE> tag we define two columns. The first column (<TD WIDTH=70>) is used to indent the body of your HTML and the second (<TD WIDTH=550>) is used to display the main content of your page. The HTML looks something like the following.

<HTML>
<HEAD>
<TITLE>My Homepage</TITLE>
</HEAD>

<BODY BGCOLOR=#000000 BACKGROUND="edge.gif">
<TABLE BORDER=0 WIDTH=620>
<TR VALIGN=TOP>
<TD WIDTH=70>
<IMG SRC="spacer.gif" WIDTH=70>
</TD>
<TD WIDTH=550>

"This is where the contents of your page go."

</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Notice how the first column is only 70 pixels in width. This creates enough indentation to push the main HTML contents of the page over to the right so you will not write over the graphics edge.

The edge graphic tiles from top to bottom covering the entire page. Each edge graphic is 1024 pixels in width. This ensures that in most browser windows it will tile from top to bottom. The edge graphics are different in height depending upon on the height of the repeating pattern used. The actual colored-in part of the graphic edge is only about 50 pixels in width. We set the first column width to 70 pixels in order to shift the HTML contents 20 pixels past the colored-in part of the graphics edge.

The second column above has a width of 550 pixels, which is where the contents of your page go. Together the two columns should add up to the total TABLE WIDTH of 620. These amount can be adjusted to whatever you wish.

The only other thing to mention is the use of the spacer.gif. The spacer.gif GIF file is exactly what it sounds like; it's a spacer. The spacer.gif GIF file is a completely transparent GIF file that can be resized to fit your needs. Notice that it doesn't have a HEIGHT attribute. This is because we really don't care about the height, so we just let the browser adjust the height. We do set the WIDTH equal to 70 pixels to make sure the first column's width stays at 70 pixels. With the space.gif GIF file inserted, there is no possible way that the first column will be resized any smaller.

edge graphics


This page has been visited times since March, 2000.
All Graphics Copyright Jeffrey J. Walters, 2000
Web Design by Web Design by JJW