This method can be used to create interestting effects (a logo that runs only up the left side, a spiral notebook, etc.)
| HTML |
NOTES |
<html> <head> <title>HTML Blueprints</title> <body background="images/roll.gif"> |
Header and body. The body tag contains the option tile the background with ann image. The picture used is a blueprint roll that is 38 pixels high and 1000 pixels wide. Since it fades to white about 200 pixels to the right most of the image is a single color and thus compressed to GIF format, only takes up 4k of space. |
<table border=0 cellpadding=2> |
Invisible Table. The entire page will be a two column table with 0 thickness borders. The cellpadding parameter dictates that amount of space (in pixels) between the table cells and the margins. |
<tr> <td valign=top> <img alt="- " src="images/white.gif" width=120 height=16> </td> |
Left Column. A single pixel invisible GIF (solid color set to transparent) image is used to control the spacing of the left column. By adjusting the parameter width=x one can stretch the size of the graphic and thus make the column wider |
<td>
<H5>HTML Blueprints |
<b>index</b> |
<A HREF="peek.html">peek</A> |
</H5>
<h1>Blueprints for Learning HTML</h1>
Everybody and their mother
(well, not my mom) wants to
create web pages.
There is no shortage of excellent
<A HREF=
"http://www.mcli.dist.maricopa.edu/
links/WWW-html.html">
resources</A> as well as a
plethora of titles at any bookstore.
:
:
:
|
Right Column. This contains the
rest of the HTML that is used on the page. Note how
the upper portion uses <h5> tags for a simple
but clear navigation area. The lack of a hypertext
link for index is a visual clue that it
is the cyrrent page
For brevity,
we have not listed it since we mainly
wanted to illustrate the table technique.
You can also see in the final view that there is a second table used completely inside of this main two-column table! |
</td> </tr> </table> </body> </html> |
End of table. Marks end of second column, first row, the table, and the html document. |
