Wood County Free-Net's Official

HTML Help Page

Lesson 12

Email Subject | Extra Spaces | Create an Index


Email Subject Line

Let's start with a little Email trick. Remember the code to create an email link?
<A HREF="mailto:name@name.org"> </A>

I have a page I call Font Links, it is a page that lists links to various sites that offer fonts for others to use on their systems for free. On the bottom of the page I list my email address asking others to send me any great sites they find that could go on this page. When they send me that email, it could be coming from any of my pages! Unfortunately, most people won't be very specific when sending something in, it will usually be just a link to the site, and the subject of the email might not even be filled in (probably won't be). Anyhow...with this little trick you can force the subject of the email to be whatever you want it to be. Your visitor who sends the email can change that, but most don't bother to.

So...if you were to visit my Font Site above and send me an email, the subject line would automatically be filled in and would say Font Links. Cool! This is the code we will use to do that... ?subject=Font Links. This code will be inserted in our above email code like this:

<A HREF="mailto:name@name.org?subject=Font Links"> </A>

Of course, the first name will be your login name for your service provider, the name.org will be your server name (and could have a different extension) and the subject= will be whatever you want to put there. Yes, the word subject must be in all lower case letters or it won't work! Spaces are okay after the equal sign and will come up that way in the subject field of the email. Try it out, click on the link below and see what comes up in the subject line. Remember this is not a good email address so if you try to send it you will get an email back saying the address is not good.

HTML help! Neat, huh?

Add this item to your HTML document Try it out on your page. You can insert whatever you want for the subject of the email.


Extra Spaces

Did you ever want to put extra spaces between characters on your web page?

In order to insert a space, or any number of spaces, we need to use a strange code that will not show up on the screen unless I put spaces between each character. So here it is with the spaces, but remember you will not put spaces between the characters.

& n b s p ; (Note: the last figure is a semi-colon)

All you would have to do in insert one of these (without the spaces) wherever you want an extra space, or two or three or four...well, you get the idea. Just keep stringing them together. One thing I do is put spaces between each one, just so that I can tell on my HTML document where one begins and one ends. Might want to delete some later.

Yes, that is all there is to this code, it just kinda stands alone. There are no brackets around it. HTML coding???


Create an Index
(like the one on the top of this page)

Let's learn how to create an index on the top of a page that will move your visitor to a section located further down the page. I have an index on the top of this page...scroll back up to the top...press the Create an Index link and it will bring you right back down here, without having to scroll. Neat!

This one will be a little tougher to explain and do...so let's get on with it!

There are two parts to this code to make it work correctly. First, let's learn the Index code...this is the code that will appear at the top of the page (most of the time). When you press on the words that are highlighted the link will take you to another part of the page. That is how you can tell this is the Index code, because you will have the hightlighted words to lead you somewhere else.

The code is: <A HREF="#Link">Create an Index</A>

This is how it will look on your page: Create an Index Try to click on it...it won't go anywhere. Why? Because we have to do part two to give it somewhere to go.

Part two: Let's start with the easy part...the code...

<A NAME="Link"> </A>

This is the hard part to try to explain. We must have something between the two A tags in this last code. This item will NOT show up on the document as a "hot" link to something.

You can put this around the title of the object you are linking to, or you can put it around a line or graphic just before that item. That is my preference, I usually use some sort of line (or even a horizontal rule, HR) just before my title heading for the item I want to skip down to. When my visitor skips down the page to that item, the line is at the top of the page, giving some room to see the item. If you link to the actual title of your object, the title will be at the very top of the page when clicking on the link in the index.

Try this out....go back to the top of the page and click on the title Email Subject, see how the line is at the top of the page? Now go back to the top and click on the title Extra Spaces, see how the title is now at the top of the page? It is all in your personal preference how you want to do this.

What ever you decide to use, that is the code you will put this second code around. I like to use the line, so this is how my code will look...

<A NAME="Create"><IMG SRC="line.gif" ALT="Line" BORDER=0></A>

Again, whatever you use here will NOT be an actual link. This is where your link at the top of the page will jump down to.

OK...you have two or more items on the top of your page, in your newly created index. Now you want to separate these items with something. Maybe a straight up and down line? This item can be found on your keyboard, on the key just above the enter key with the backward slash on it. You do need to hold the shift key down to get the   |   straight line. Neat, huh!! You can insert this between your codes for each individual index item, leaving a space before and after the line.

So, it will look like this:   Item #1 | Item #2   These will not go anywhere, they are just examples. Look at the source code if you have any questions about how this is done.

What if you want to create a 'Return to Index' link? Do the exact opposite of what we just did. Let me explain...below is a Return to Index link, click on it and it will take you back to the top of the page where the index is located.

Return to Index

We will do part one, above, on the link that says Return to Index. So, it will look like this...

<A HREF="#Index">Return to Index</A>

Now on the top of the page, above the actual index somewhere, you will need to choose a place to insert step two. For this page I just used the first image, the index still shows up in the first part of the page (in the browser window).

The neat part of this one is that every time you want to insert the line Return to Index (or Return to Top of Page...) you only need to re-do part one. You will use the same word (here it is: Index) and all the links will go to the same spot...the top of the page where the index is. Great time to use your Copy and Paste commands, just copy the code in part one and paste in the spots on your page you want the item, Return to Index, to go.

Another cool thing you can do with this one is send your visitor, from another page, directly to the item on this page you just created one of these links for. Let me explain...say I wanted to send someone from another one of my pages directly to the Create an Index section on this page. This is what my code would look like for the link on the original page...

Learn how to <A HREF="http://www.wcnet.org/~htmlhelp/adv1.htm#Create">Create an Index</A> here.

The only difference in the link above is what we added to the end of it. We just added a # symbol along with the word we used on this page for that link (Create).

Back to HTML Help Index Page    Question Form

Created and Updated by Kathy Brandt ~ 2/26/2005