Creating and Using Hyperlinks
When I created my first website, I had a terrible time creating links. Now that I've been doing this for a while, it's pretty basic stuff to me. I want to try to explain them in such a way that you'll remember how to make them on your own, even though Composer can make them for you.
The basic code for a link is <a></a>. Most of the TAGS in HTML have to be OPENED and CLOSED. The first part of the tag is <a>; it means "start doing this". The slash (/) in the second half of the tag means "stop doing this". You include the name of the tag so your browser knows what to stop doing.
A PARAMETER is something that sets limits or conditions on a tag. The parameter for linking to a web page or an email address is href, think of it as an abbreviation for HTML reference, <a href></a>, we're getting there.
We want to link to a web page so we have to add a URL (Internet address). We use an equal sign (=) and quotation
marks to specify that URL, <a href=""></a>. This little tag is what I type when I
want to create a link, then I go back inside the quote marks and type or paste the URL. I rarely mistype it any more. In
addition, I add some LINK TEXT for the user to click
<a href="index.htm">My Home Page</a>. Browsers add an underline to all link text by default and a border to linked images.
To link to an email address, we add the parameter mailto: INSIDE the quote marks <a
href="mailto:"></a>. Now we type or paste the email address between the colon (:) and the second quote mark
and add some link text
<a href="mailto:somebody@somewhere.com">Email
Me</a>. Easy enough.
Another link tag that you might need is used to link to a specific line on a page instead of just going to the top
of a page. This tag requires two parts, sort of like a sender and a receiver (called an ANCHOR). Instead of using href, we're going to name
a line in our page and use name as our parameter, <a name></a>. I want to send you
to the bottom of this page for some reason so I create a link
<a href="#bottom">Go to the bottom of my page</a>. The pound sign (#) means "look on THIS page for this name". And I create an anchor
<a name="bottom"></a> that I put in the spot I want the link to send you. This
second tag doesn't need link text in it and won't use any space on your page if you leave it empty.
If I want to send you to the bottom of a different page, I use a regular link and add the
anchor name to it like so
<a href="links.htm#bottom">Go to the bottom
of my links page</a>.
I have a few large images (usually maps) on my site that I don't embed in pages; it would be silly because they're
bigger than the page. Instead, I link to the image and use a target parameter. It's also useful for linking off-site.
This will open whichever link you've created in a new tab or window (according to the user's preference):
<a href="images/photo.jpg" target="_blank">Photo</a>
- OPEN Composer and your practice page.
- On the right side, in the bottom table cell, where it says Contact Me, we're going to add some links, starting with your email address. Before we do that, you need to know that putting your address online means you'll have to deal with spam. Most of us have started using a special address for our websites and Gmail and Yahoo both have excellent spam filters. So decide which address you want to use and we'll get going.
- HIGHLIGHT Contact Me and center it and make it bold. In the icon
bar CLICK the Link icon. In Link Location, TYPE your
email address preceded by mailto:, i.e. mailto:somebody@somewhere.com. CLICK OK. Way too
easy.
- There are a lot of genealogy websites that we can link to but we're going to get to them in stages.
First, we want to link to TXGenWeb. CLICK the TXGenWeb icon in the top left corner of
your page. CLICK the Link icon up top.
In the new pop up, in the location box, TYPE (or copy and paste) http://www.txgenweb.org/. CLICK
OK and don't panic when the logo disappears. I don't know why it disappears in Composer but you can still see it in
SeaMonkey. Now do the USGenWeb logo with http://www.usgenweb.org/.
- Add a few more links for sites like Ancestry, FamilySearch, FindaGrave, etc. It's easiest to visit those sites with your browser and then copy the URL straight from the browser. NOTE that off-site links MUST begin with http:// or https://. There are several others that are seldom used so these two are what you need to learn. The s means secure and a lot of websites are going to secure servers these days. When you look in the address bar, you won't see the http part of the address but when you paste it, it'll be there.
- Now my page is really starting to look like it belongs online. In Composer, I see this first image.
The second image is the way it looks in SeaMonkey.
- You don't necessarily want to fill the right side of the page with links but you can add important ones as you think of them. Perhaps your site will win awards (entirely possible) and this SIDEBAR is a good place to display them.
- Now we have one more type of link to use. I want to set a link to the bottom of the page. Suppose we want to draw attention to our local library. We can add a nice blurb about it on our page and link to the hours down at the bottom. Be creative and write a nice sentence about the great genealogy resources in your County library. HINT - it's easier to create this link if you create the anchor down there first.
- Use your ENTER key to add enough blank lines to cause a scroll bar to appear on the right side of
Composer and then add a bunch more. I usually just hold it down. When you think you have enough lines, make up some open
and closing times for the library and enter them at the bottom of the page. CLICK on the
line above the hours OR highlight the first few words. CLICK Insert in the menu up top
and CHOOSE Named Anchor. TYPE a name for the anchor in
the box. CLICK OK. NOTE that there can be multiple anchors on a page but each one must
have a different name. Now you'll see an icon on your page at the location of the anchor.
- SCROLL up to the sentence about the library and highlight some
relevant text. CLICK the Link icon and CLICK the second
box. CHOOSE the anchor you just created. CLICK OK. SAVE the page and open it in SeaMonkey. CLICK each link you've
created to make sure they work!
