Email URLs

Create an email link so people can send you email right from your web page. The code could look like this:

<a href="mailto:you@your-email-address.com"> Send me some email </a>

Send me some email

Clicking on that email link will automatically open the default email program. Because so many people no longer use their default email program, you should also visibly add your actual email address so they can grab it, just in case. This is an example of how you could do that:

Email me at: cfaulk@miracosta.edu

Document or Jump Links

Go to the Bottom of the Page

There are two examples of Internal Links - or Jump Links on this page. One Jumps to the bottom of the page and one, probably the most common Jump Link, jumps "Back to Top".

When you have a long page of text you may want to offer the reader the option of jumping down the page to a specific section of text. You can create an anchor at the destination that you want them to jump to and then make a link which refers to that anchor. I have made a link to jump to the bottom of this page and also one to jump back to the Top of the page.

The code for that link to the bottom is:

<a href="#bottom">Go to the Bottom of the Page</a>

The hash or number symbol # tells the browser that the href is referring to an 'anchor point' on a page. Once we get down to the section about External Document Links, I will show you the code to make this the destination point. I chose "bottom" as my identifying name, because it relates to the section I am jumping down to - the bottom of the page. I could have named it "fred", but that might not make sense to me later.

Now we will talk about jumping back up the page...

Say the reader has jumped down below and want to go back to the top of the page. Instead of making them scroll back up (you know how lazy users can be) you offer them a "Back to Top" link.

I do not really want to have the word TOP displayed at the top of my page - so I add the word top in the code that only the browser can read. I choose some code at the highest point on my page. I identify it by adding an id to it - and I make it "top". Again, I chose the name "top" because it makes sense to use it. The code for the target destination on this page looks like this:

<div id="top">Document References or Jump Links</div>

We use the 'ID' attribute to identify sections that only occur ONCE per page. We can reference the ID with hyperlinks or styles sheets. It gives a unique name to a section. IDs must always begin with a letter. And it is best to use words that make sense in relation to what you are naming.

Here is the code for a Back to Top link:
<a href="#top">Back to Top</a>

Back to Top

Now that we are near the bottom of the page I will share how I identified this end of the Jump to Bottom link. I added an ID to my closing footer content. The code looks like this:

<p id="bottom"> © Claudia Faulk. Updated 9.17</p>

Be sure to remember on the actual ID area, you do not need the hash mark # in the code. Only use it when you are creating a link to it. Add it to the link.