Tips and Tricks

TIPS AND TRICKS

Indenting and Positioning

There are several ways to indent text or cause it to be positioned someplace other than the margin. If lists or tables aren't right for the situation, you can use one of these methods (they can also be used to position graphics, tables, or items inside a table datacell):

You could use the <SPACER> tag to push the text over any number of pixels that you specify (although this is a new tag that may not work with all browsers):

Now is the winter of our discontent<BR> <SPACER type="horizontal" size=25>Made glorious summer by this sun of York;<BR> <SPACER type="horizontal" size=50>And all the clouds that lour'd upon our house<BR> <SPACER type="horizontal" size=75>In the deep bosom of the ocean buried.

Now is the winter of our discontent
Made glorious summer by this sun of York;
And all the clouds that lour'd upon our house
In the deep bosom of the ocean buried.

Or you can use a one pixel GIF to push the text over. This is a graphics file in the GIF format that consists entirely of a transparent background and is one pixel by one pixel in size. The transparency causes it to be invisible, but its presence forces the text (or other graphics or cell borders in tables) to move over. By adjusting the width and height, you can have a great deal of control over where things are positioned:

Now is the winter of our discontent<BR> <img source="space.gif" height=0 width=25 alt=" "> Made glorious summer by this sun of York;<BR> <img source="space.gif" height=0 width=50 alt=" "> And all the clouds that lour'd upon our house<BR> <img source="space.gif" height=0 width=75 alt=" "> In the deep bosom of the ocean buried.

Now is the winter of our discontent

Made glorious summer by this sun of York;

And all the clouds that lour'd upon our house

In the deep bosom of the ocean buried.

Space.gif is the filename of my one pixel GIF. If you can't make your own, you can have a copy of mine. Right click your mouse in the box, and save it to your disk.

Or you can use the underline character ( _ ) the same font color as the background to push the text over:

Now is the winter of our discontent<BR> <font color="#ffffff">___</font> Made glorious summer by this sun of York;<BR> <font color="#ffffff">______</font> And all the clouds that lour'd upon our house<BR> <font color="#ffffff">_________</font> In the deep bosom of the ocean buried.

Now is the winter of our discontent
___ Made glorious summer by this sun of York;
______ And all the clouds that lour'd upon our house
_________ In the deep bosom of the ocean buried.

Of course, in a text browser or a browser that doesn't support this feature, the line will be visible.

Or you could use the entity for the nonbreaking space,   to push the text over. The   is supposed to be used in the place of a blank space between two words if you don't want those words to be separated by a break at the end of a line. Technically, it is prohibited to have more than one nonbreaking space in a row, but many browsers seem to accept it anyway:

Now is the winter of our discontent<BR>     Made glorious summer by this sun of York;<BR>          And all the clouds that lour'd upon our house<BR>             In the deep bosom of the ocean buried.

Now is the winter of our discontent
    Made glorious summer by this sun of York;
        And all the clouds that lour'd upon our house
             In the deep bosom of the ocean buried.

Generic Webpage Design

As an example of how all the things I've covered work together, I'm going to show you how to create this webpage. I chose this design because it seems to have become the standard layout for the majority of websites, although, personally, I think it's way overused, and you should try to come up with something more original.

First, start with the opening and closing tags, including the page's title:

<HTML> <head> <title>My Generic Webpage</title> </head> </HTML>

In the The <BODY> tag, we want black text and green links. The background graphic will be "generic.gif" which looks like this:

<HTML> <head> <title>My Generic Webpage</title> </head> <body background="generic.gif" bgcolor="#ffff00" text="#000000" link="#00dd00" vlink="#00dd00" alink="#ffff00"> </body> </HTML>

The entire page is composed of one big table that consists of one row with two datacells:

<HTML> <head> <title>My Generic Webpage</title> </head> <body background="generic.gif" bgcolor="#ffff00" text="#000000" link="#00dd00" vlink="#00dd00" alink="#ffff00"> <Table width=620 cellspacing=0 cellpadding=10 vspace=0 hspace=0> <TR> <TD align=left valign=top> </TD> <TD align=left valign=top> </TD> </TR> </table> </body> </HTML>

The datacell on the left contains three things:

Happyt.gif, a graphic of my "corporate logo," It has a transparent background so that the green will show through.
A list of links to other pages on the website. I could have used the list tags here instead of the <BR> tag, but I thought that this looked nicer. (Also note that, in this example, the links just lead back here)
A one pixel GIF (space.gif) set wide enough to force the datacell to be the same width as the green bar on the background image. It took a bit of trial and error to get the size right. Actually, the first graphic could also serve this purpose, but I included this just to show how it works.

The datacell on the right contains three things:

The name of the page in large type, bold, italics, and centered.
The main text of the page (that quote you're getting really sick of).
A link back to this page.

<HTML> <head> <title>My Generic Webpage</title> </head> <body background="generic.gif" bgcolor="#ffff00" text="#000000" link="#00dd00" vlink="#00dd00" alink="#ffff00"> <Table width=620 cellspacing=0 cellpadding=10 vspace=0 hspace=0> <TR> <TD align=left valign=top> <P><img src="happyt.gif" alt="My Logo" width=115 height=115 vspace=0 hspace=0> <BR> <a href="tricks.htm#generic">First Link</a><BR> <a href="tricks.htm#generic">Second Link</a><BR> <a href="tricks.htm#generic">Third Link</a><BR> <a href="tricks.htm#generic">Fourth Link</a><BR> <a href="tricks.htm#generic">Fifth Link</a><BR> <a href="tricks.htm#generic">Sixth Link</a><BR> <a href="tricks.htm#generic">Seventh Link</a><BR> <a href="tricks.htm#generic">Eighth Link</a><BR> <P> <img src="space.gif" width=115 height=0 vspace=0 hspace=0 alt=" "> </TD> <TD align=left valign=top> <center> <font size=7><B><I>My Generic Webpage</I></B></font> </center> <P>Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds that lour'd upon our house in the deep bosom of the ocean buried. <P>Now are our brows bound with victorious wreaths; our bruised arms hung up for monuments; our stern alarums chang'd to merry meetings, our dreadful marches to delightful measures. <P>Grim-visag'd war hath smooth'd his wrinkled front, and now, instead of mounting barbed steeds to fright the souls of fearful adversaries, he capers nimbly in a lady's chamber to the lascivious pleasing of a lute. <P> <center> <a href="tricks.htm#generic">Go Back</a> </center> </TD> </TR> </table> </body> </HTML>

That's all there is to it. Check it out again. The rest of the pages on your website could use the same format with the same stuff in the left datacell. Each right datacell would have new contents.

As an alternative to using the background graphic to create the colored bar on the left, you could also try using the datacell background color command. It will save the download time of the graphic but will create a slightly different look and may not be supported by as many browsers.

Notes

If a tag begins with an exclamation point (!), the browser will ignore everything inside it. You can use this to add notes or comments that are useful to you:

<! bottom of page footer begins here >

<! update this section each month >

Buttons

Many websites use graphics that look like buttons to serve as links to other pages. The problem is that the use of too many different graphics can make the user's download time very slow. But there are a couple of HTML tricks that can achieve a similar effect without the use of any graphics.

For each button, create a little table with a colored background and a border that consists of one row and one datacell with a link inside it:

<table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="intro.htm">Menu</a> </TD> </TR> </table>

Then place each of these tables inside a datacell of a much larger table that has no border:

<CENTER> <table cellpadding=0 cellspacing=12> <TR> <TD> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="intro.htm">Menu</a> </TD> </TR> </table> </TD> <TD> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="links.htm">Links</a> </TD> </TR> </table> </TD> <TD> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="graphics.htm">Graphics</a> </TD> </TR> </table> </TD> <TD> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="tables.htm">Tables</a> </TD> </TR> </table> </TD> <TD> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="lists.htm">Lists</a> </TD> </TR> </table> </TD> </TR> </table> </CENTER>

The big table can be used the arrange the "buttons" in many different ways:

<CENTER> <table cellpadding=0 cellspacing=12> <TR> <TD colspan=2> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="intro.htm">Menu</a> </TD> </TR> </table> </TD> <TD colspan=2> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="links.htm">Links</a> </TD> </TR> </table> </TD> <TD colspan=2> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="graphics.htm">Graphics</a> </TD> </TR> </table> </TD> </TR> <TR> <TD></TD> <TD colspan=2> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="tables.htm">Tables</a> </TD> </TR> </table> </TD> <TD colspan=2> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="lists.htm">Lists</a> </TD> </TR> </table> </TD> <TD></TD> </TR> <TR> <TD></TD> <TD></TD> <TD colspan=2> <table border=6 bgcolor="#ffffff" cellpadding=3 cellspacing=0> <TR> <TD width=100 align=center><P> <a href="font.htm">Text</a> </TD> </TR> </table> </TD> <TD></TD> <TD></TD> </TR> <TR> <TD><img src="space.gif" width=52 height=1 alt=" "></TD> <TD><img src="space.gif" width=52 height=1 alt=" "></TD> <TD><img src="space.gif" width=52 height=1 alt=" "></TD> <TD><img src="space.gif" width=52 height=1 alt=" "></TD> <TD><img src="space.gif" width=52 height=1 alt=" "></TD> <TD><img src="space.gif" width=52 height=1 alt=" "></TD> </TR> </table> </center>

Buttons can also be created with the <FORM> tag which sets up forms that your visitors can use to search databases, fill out surveys, select various options, place orders for products, or submit other kinds of information. The appearance of a form is controlled by HTML just like anything else on your page, but getting the form to actually do the task you want requires computer programming skills, so I chose to leave them out of this guide. However, buttons can be created using HTML alone.

<form method=GET action="intro.htm"> <input type=submit value=" Menu "> </form>

The action command contains the address of the page or site you want to link to.

The value command contains the text that will appear on the button. Add some blank spaces inside the quotation marks if you want to make the button wider.

As shown with table buttons above, several form buttons can be arranged on the page using tables.

Previous Section

Table of Contents

Next Section

HTML by Robert Delaney
robert.delaney@liu.edu