links within the same post

I was trying to create a post the other day that had a list of terms at the top of the page, and definitions for each term below. But I didn’t want people to have to scroll through and find the one term they were looking for…Lightbulb! Create a hyperlink! Like, you click on the term and it jumps down to that definition. Brilliant!…Except I had no idea how to do that.

But I figured it out! So here’s how, in case you wanted to know!

1.  Go to the HTML tab

111link

I know, I know…if you’re reading this blog post, it’s probably because you (much like me) hate to code. But I promise this isn’t so bad.

2. Create your anchor

First, find where you want the anchor to be. This is where you want to link to take you. So in this example, we are starting with the description.

111link2

This is the block of text with my definition for the term “Title Command.” When someone clicks on that term, this is where I want the link to go. So this is where we want out anchor.

 

111link3

Don’t be like me and get overwhelmed by the code. “Strong” is just the code for bolding the term. So ignore that for now.

 

111link4

“The Title Command” is the text that starts the paragraph that I want to link to, so we want to place the anchor in front of that text. The code for an anchor is the text inside of the purple rectangle.

 

This is the basic HTML code for creating an anchor point in your post: <a name=”Pickaname“></a>

The HTML statement “<a>” = “anchor”, and you close the statement as you typically close an HTML statement: the same thing, just with a “/”…so in this case, </a> means we are ending the anchor statement.

The “name=” term is where you enter the name of the anchor. You have to name the anchor so that you can tell your link where it is jumping to. In this example, I just named this anchor Title.

4. Create your link.

111link5

Now, scroll back up to where your links need to go (in this case, my list of terms at the top of the post).

 

111link6

The term that I want to turn into a link is “Title Command,” which is shown in the green box above.

 

111link7

To make it into a link, we put a code referencing the anchor we just made around the text.

 

The code for the link is this: <a href=”#Title”> Link text </a>

Notice this is the same statement <a>, but instead of naming an anchor like we did before, we are referencing an anchor (href=””).

After the reference term (href), you put a pound sign (#) and then the name of the anchor that you want the link to jump to. Don’t forget to close the statement either.

And check it out…

done

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s