Make Customized Bookmarks

Wouldn't it be great if you could customize all your bookmarks just like a web page and have them simple to find and execute? And what if, in the process, you learned how to do a little HTML programming, including one of the more complicated things – tables.
   We will add this idea: store your bookmark page on your hard disk instead of at some web site. That way, it will not only be available instantly when you are browsing, but will be easy to change. You won't have to upload it to any web site.
   You say you have a web authoring program that does tables automatically? That's OK, you can use it to create the HTML code we are showing you here. The nice part is that you will be able to change the code as you need it just by understanding how it works.
   One word of caution. You cannot download this page and use the code directly. That is because we have to use special marks on this page to show the "greater than" and "less than" characters on this page itself. If your HTML editor has a search and replace function, you can search for the two
symbols and replace them with the characters themselves, however.

And Away We Go . . .

   The way to start this little project is to first make a list of all the bookmarks you want to be able to call up on demand and divide them into categories. You might decide on "Computer Stuff," "Shareware Sites," "Reference" and "News" to start out.
   This way you have a list of bookmarks you want to use divided up in the areas where you can best find them. Remember, this page has no limit (unlike bookmark menus in browsers) so you can have as many as you like. In fact, in a little bit, we'll show you how to make it easy to add bookmarks to the page.
   Now let's set up the page. Obviously you want a title and so on, so just use the <center> and <h1> attributes to put whatever you want at the top of the page. This is the easy part.

   Next put in the  symbol, which is a comments section. This will not print, but will allow you to comment your document. Use this! If you get into this project and use it a lot, these comments will really help you find your way in the document, even if you have little idea how HTML works.

   Now let's comment the first part by putting in this code:



hit a couple of "ENTER" keys for spacing and add in these comments, too . . .









. . . with a few blank lines in between each.

The Jumps Section

   We want to be able to jump internally in our page to each different section. Many HTML editors automate this process for you, but we're going to show you how the code works by adding it in. That way, when you expand this page, you'll have a better understanding of what you're doing.
   We want this single line at the top to be in smaller type and centered on our page, so first we will add the . . .

   <center><H5>

. . . tags at the start of a blank line right under the "Internal Jumps" comment. Then, to make it easier to read, hit an "ENTER" and type the name of the first jump:

<a href "#Computers"> Books </a>

Now move your cursor down to the first blank line right beneath the "Computer Stuff" comment to define the target of the first jump and type . . .

<a name="Computers"></a>

   This is how you make your internal jumps. Now, add jumps and targets for the three (or however many categories you plan to have) additional categories on your page. Be sure that the target for each jump is right below the comment line for that individual category so that the jumps will go to the right place.
   When you begin using this page, you will be able to click on the categories at the top of the page and jump to the targets down in the page. To get back to the top of the page, you can just select the "Back" button in your browser.

Put the Neat Stuff on the Table . . .

   This really is the fun part. Each individual URL is going to occupy a place in a table. We're going to have four tables in this example, one for each of the categories that we have divided our bookmarks into.
   First we need to define the table, and we do that with the "table" tag. But, in addition, we are going to want the individual cells of the table (think spreadsheet) to be padded to accomodate text and so on. So we will type in this fairly complicated tag:

<table border=1 width=100 cellpadding=2 cellspacing=2>
<caption align=top><H2> Computer Stuff </H2></caption>

   We're movin' on.

   We are now ready for the table itself. Let's type in this code:

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

   This is the first row across of the table, made up of four columns. This is what it looks like (we've added the designations of the rows and columns):

   Computer Stuff

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3 Row 1 Column 4

   You start a row with the <tr> tag. You designate the beginning of each column with the <td> tag. You end each column with the </td> and you end each row
with the </tr> command.
   Once you see this, you see why we did the matrix of tr's and /tr's and td's and /td's like we did above. Obviously, what goes between the <td> and </td> is what appears in each cell along the row.
   What do we put between the <td> and </td>? A jump (or link) to another web page – of course!

Let's Look at External Jumps . . .

   The code for an external jump to another web page is fairly simple (and many HTML editors will make these for you automatically). The format of the external jump is something like this:

<a href="NAME OF URL">DESCRIPTION OF URL</a>

   Notice the equals sign and the quote marks. When you actually type this in with an HTML editor, it will look like this: DESCRIPTION OF URL
   This particular link won't go anywhere, but when you put a URL into the space where "NAME OF URL" is shown here, it will. Let's take a simple URL, to the Adobe Home Page. The URL for Adobe is "http://www.Adobe.com" so we'll plug that into the illustration above to get . . .

<a href="http://www.adobe.com">Adobe Home Page</a>

   . . . which, of course gives us this link . . . Adobe Home Page

   You can't use this link to jump to Adobe's page, because this really is not a link, per se, just some fancy editing to illustrate how it works. But if you want to go visit Adobe, just type the URL shown above into your browser.

Puttin' This All Together . . .

   Almost done, we are. Remember we said that the external links (or jumps) went between the <td> and </td> for each column of each row?
   So let's do that now with the Adobe link:

<td><a href="http://www.adobe.com">Adobe Home Page</a></td>

   So you can see what this will really look like, let's add links to Microsoft, Nico Mak Computing (makers of WinZip) and the PCM/Rainbow main page to the first row of our table. Remember, the matrix looks like this:

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

   And the finished product looks like this:

<tr>
<td><a href="http://www.adobe.com">Adobe Home Page</a></td>
<td><a href="http://microsoft.com">Microsoft Main Page</a></td>
<td><a href="http://www.winzip.com">WinZip Home</a></td>
<td><a href="http://louweb1.mis.net/falkpub/pcm/">PCM/Rainbow Magazine</a></td>
</tr>

And here is what that code gives you . . .

   Computer Stuff
Adobe Home Page Microsoft Main Page WinZip Home PCM/Rainbow Magazine

   Now you see why we went to so much trouble to set up the matrix. It makes it much easier to find the individual listings by rows. You might even want to add a comment  to each row to say something like "Row 1" "Row 2" or whatever.
   Once you have the matrix set up, just copy and paste it to each section. Then, all you need change is the URL and description. At the end of each category, be sure to put in the </table> tag to indicate the end of a table.
   But make yourself three or four blank row matrices, too, for each section. That will make it easier to add individual URL's to the sections. And here's how:
   Keep your HTML editor open while you browse the web. When you get to a URL you would like to save, highlight it in your browser and copy it (CONTROL-C). Switch to your HTML editor (or notepad) whith your bookmark page loaded, position your cursor over the place between the <td> and </td>
where you want it and paste it in (CONTROL-V). Add the appropriate code and description and save. This eliminates the chance that you will mistype complicated URLs.

And Finally . . .

   You can do some pretty fancy things with your individual cells. For instance, we know you always want to call your attention to the PCM/Rainbow site. So you can simply surround the description with <i> </i> to make it italic.
   You can also force a separate line for the description by adding the tag <br> after the </a> in any line. Try experimenting with other tags to see what you can do and what suits you. Remember, this page will load very quickly because you save it on your hard disk, not on the web. For that alone, setting up one will make your browsing easier.