Create a Table of Contents for Your Hub - Quick and Easy

A Table of Contents (TOC) is a great addition to longer hubs that have lots of capsules, like this one. It makes it easier for your readers - and you - to follow the thread of your ideas, and to find things they want to go back to.

I want to thank DarkSide, the Hubber who first posted an article on how to make a Table of Contents for a hub four years ago. I learned how to do it by reading his instructions, and his method still works. In fact, all I've done is streamline his method in 3 or 4 ways to make it easier for non-geeks who are freaked out by HTML, and easier and faster for everyone.

Thanks, Darkside.

I only use a Table of Contents in hubs that have five or more capsules, and not always, even then. Just think about whether it would be helpful. Are people going to want to find their way to particular quotes, ideas, or suggestions in this hub? Are you offering detailed, step-by-step instructions? Are you casting a wide net about a whole lot of topics? These are good reasons to add a Table of Contents to your Hub.

Usually, I like to put my TOC as the second capsule on the left, with a photo next to it, as you see here. Or, it can go on the right. Anyway, below the introduction, but near the top makes the most sense to me.

Okay, to do this, you will need to play around a bit with HTML, the underlying code that adds links, formatting, and other cool stuff to the plain words and letters on a web page. But don't panic! Even if you've never looked inside a link, you're going to be working with the very simplest bit of HTML code - how to write a link. And I'll hold your hand with pictures and examples all the way through.

There are also a few other geeky tips to make this work, so take a deep breath before each bullet point, because, once you get to the end of this capsule, it's all easy as pie from there. (And I mean eating pie, not even baking it!)

• Locate the > (greater than) symbol (SHIFT+Period) and the # (number sign) symbol (SHIFT+3) on your keyboard. You're going to need them.
• You want to publish your hub, and then go back and add the table of contents, then publish it again. We have to do this because links can only be tested on published hubs, and we want to test our links before we finish our Table of Contents.
• You are going to want 2 browsers open to do this. One will be the one where you go into edit mode on your hub and build a table of contents. The second will hold a published view of your hub. In addition, you may want to either print out this hub, as instructions, or have it open in a third browser window.
• Open Notepad, or any plain-text editor. It's going to hold just one line, the text of the link to your hub page.
• Last, but not least, you're going to do all of this backwards. It's the geeky gimmick that makes this whole thing work. There's a bunch of stuff in this process that all works backwards, and, by tricking it out and working backwards yourself, you're going to fly right through and get your table of contents done in just about 10 minutes. (Well, maybe not the first time!) Here's what I mean:

- You're going to create the last TOC entry first, and work your way up from the bottom
- You're going to create the end of each link first, then paste in the beginning
- You're going to test the link first, then finish writing it.

Still breathing? Good! Because this was the only hard part. It's all easy from here.

So, let's get you set up to create your Table of Contents. You can see the results of these steps in Screen Shot 1.

1. Open two separate browsers, not two tabs of the same browser. I'm using Firefox, but you can use Internet Explorer, or any other browser.
2. One browser will be for editing the hub. I put that one on the left. Go to HubPages, and, under your name, choose My Account. Then select the hub in which you want to add a TOC. Click on Edit to go into Edit mode for that hub.
3. The second browser will be for viewing the same hub. I put that one on the right. Go to HubPages, and, under your name, choose My Account. Select the hub that you are working on, but do not click on edit or go into edit mode. Simply view the hub.
4. Note the two different address bars in the two browsers. The one in edit mode t says something like "http://hubpages.com/hubtool/edit/3171797". The one in view mode says something like, "http://sidkemp.hubpages.com/hub/TOC", which is your domain name and the name of your hub. This is crucial.
5. Open Notepad and resize the window so that it is very small and out of the way.

Your Table of Contents will be in a special capsule called a link capsule. To create it, click on the floating "Add" button on the left that you see in Edit mode, as shown in Screenshot #2. When a blue bar appears listing the different types of capsules, choose link as the type of capsule. This is shown in the close-up in ScreenShot #3.

There is another way to create the TOC capsule. You can go to the menu on the upper right, called Add More Capsules, and click on the links box. which is the second from the top on the right. This is shown in Screenshot #4.

Then click edit, and name the capsule Table of Contents or whatever else you want to call it. The result of these steps is a link capsule called Table of Contents, as shown in Screenshot #5.

Now it's time to start building the links and putting them into your TOC capsule!

Okay, we're almost ready to start building the TOC. There's just one more step, and its simple. The web page address in the address bar is called a URL (Universal Resource Locator). The URL is the key to making a link, because it tells computers where to do when they click on the link.

You want to copy the URL of your Hub from the View browser to Notepad:

1. Click on the browser on the right, with the view of your hub, and highlight the text in the Address window, the URL, which will look something like this: "http://yourname.hubpages.com/name-of-your-hub.
2. Copy the highlighted URL (CTRL+C).
3. Click on notepad, and click inside the blank document.
4. Paste the URL into notepad (CTRL+V).
5. Type a pound sign (#) (SHIFT+3) in Notepad right after the end of the URL.
6. Compare the URL in Notepad to the URL in the view browser. Make sure they are exactly the same, except for the extra pound sign. Make sure there are no extra spaces in the text in Notepad.
7. If you want, you can save the notepad file.

Now, you are all ready to start building your Table of Contents.

To make things easier, we're going to make the last entry first. Here are the steps, which are explained in detail below:

1. View the source code, the HTML version of your hub.
2. Find the location of the last capsule title.
3. Copy the ID that marks the location of the last capsule.
4. Build the link.
5. Test the link.
6. Add the Link Title.
7. Add the Link Summary.

"Seven steps for each link," your screaming, "This is going to take forever!" Not so, my friend. I timed it. You can do this in two minutes per link - literally. I just followed these steps, and created a Table of Contents for a hub with 10 capsules in 20 minutes. In fact, the longest part is deciding what to say in your summary!

Following these seven steps, you will build one link, the link for the last capsule. Then you'll work your way up from the bottom, adding the rest of the links.

Step 1: View the source code of your hub

When you look at a web page in a browser, you see the display view, which is actually created by the browser on your computer. The host out on the internet sends instructions to your browser called HTML code, and the browser turns it into the page display you see. We're going to go under the hood and see the HTML code. Don't worry. The way we're doing it, you won't be able change anything, not even by mistake, so you can't possibly mess up your hub.

Go to the browser which is showing you the display view of your web page. That's the one on the right, if you set up the screen the way I did. Viewing the source code is easy. How to do it depends on the browser you use:

• In Firefox, right click anywhere on the web page, and select "view page source."
• In Internet Explorer (IE) 9, look for the tools icon on the top right. Click on it, and select F12 Developer Tools (or just hit the F12 key on your keyboard).
• In Google Chrome, use the tools icon on the top right, then select Tools, then select Developer Tools (or hit CTRL+SHIFT+I on the keyboard).

If you're looking at the source code, it will look something like Screenshot 6.

Step 2: Find the location of the last capsule title

If you look closely at Screenshot #6, you'll see, in the bottom left, the Find: box. That's there because I hit CTRL+F to open this Find Dialog box. CTRL+F gives you a Find Dialog box in any browser. Anything I type in there, the computer will find what I'm looking for in the source code. And that's exactly what we want to do.

1. Put the cursor in the Find Dialog Box.
2. Type the greater-than symbol (>) by hitting SHIFT+Period.
3. Type the title of the last capsule in your hub.

If you did that right, you'll see the HTML code for the header of the last capsule of your hub. If you didn't, just try again. You'll get it! When you do, it will look like Screenshot #7.

Step 3: Copy the ID that marks the location of the last capsule

When you find the header of the last capsule of your hub, take a look to the right. You're looking for something that looks like id="txtd_19064139". Of course, you're ID code will be different. That's the whole point. Congratulations! You've just found the unique ID for this capsule. This unique ID will be the target of your link. That means, when anyone clicks on the link in the Table of Contents, the browser will jump down to the capsule that shows exactly this location in your hub. Note that the ID may begin "txtd_", but I've also seen capsules with ID's that begin "mod_". Either way, it doesn't matter. Whatever the ID is, that's what you want to find and copy.

Now, highlight what's inside the quotation marks with your mouse. Make sure you get the whole ID, but not the quotation marks. And copy that text by hitting CTRL+C.

You're ready to build the link.

Step 4: Build the link

Now, return to the browser where you are editing your hub, and go to the Links capsule that says "Table of Contents." You will see an edit button on the blue bar above the words "Table of Contents. Click on the Edit button, and you will go into Edit mode for the Link Capsule, which looks like Screenshot #8. Make sure the round radio button Add links by: URL is checked.

Put the cursor in the URL: dialog box. Paste in the ID you copied from the source view of your hub with CTRL+V. When you do, your link box should look like the one you see in Screenshot #8, except that the ID for your hub capsule will be in place.

Now you're ready for the last step in building your link. Return to your Notepad window. (If you've forgotten what that is, check out Screenshot #1, and look at the lower left.) Highlight all the text of the link from the beginning "http://" to the end "#" and copy it with CTRL+C.

Return to the link edit box for your table of contents. Put the cursor at the beginning of the URL dialog box, before the ID. Paste in the web page URL of your hub with CTRL+V. The result should be a URL that looks something like this: "your.name.hubpages.com#txtd_123456789", as shown in Screenshot #9.

This is what I mean by building the link backwards. We find the unique end of the link first, and paste it in. Then we put the cursor in front of it, and add the piece that's the same for every link, the URL of your hub. Easy-peasy!

Click on the "add Link" button.

Step 5: Test the Link

As soon as you've clicked on the "Add Link" button, you will see the dialog box where you test the Link URL; add the Link Title; then add the Link Description.

The first thing you do is hit the Test button and test the Link URL. If it comes up okay, then you're good to go. If it doesn't, check these items:

• Be sure you've published your hub. A test of a Link URL will fail, even if it is right, if the hub is not published.
• If the hub is published, just read the link really carefully. Make sure there are no spaces or extra characters. Make sure that all the ??forward slashes (/) are correctly in place. Make sure the pound sign (#) is in place between the page name and the ID code.
• Double check that the ID code is right.
• Test again. It should work this time.

Once the message "Link is Okay" appears, you're ready to add the Link Title and the Link Description.

Step 6: Add the Link Title

This is the easiest part. Simply type the title of your capsule into the Link Title Dialog Box.

Step 7: Add the Link Description

This is easy, too. Type any short phrase or sentence that describes the capsule. Feel free to make it fun or enticing! You don't have to to this, but a TOC with no descriptions makes me yawn!

Your TOC entry is ready!

Congratulations! You've made the last entry in your Table of Contents. Now, you're ready to work upwards, putting in the rest.

Now, working your way up from the bottom, make each entry in your table of contents just like you made the last one.

Why work from the bottom up? Simple: The HubPages editor inserts each link above the last link you made. So we start at the bottom, then create the second-to-last link, then work your way up. Then, when we finish, the whole TOC capsule has all the TOC entries in the right order.

If you don't do that, no worries! You can re-order the links by dragging them up or down, as needed.

And, of course, you don't need to include all your capsules in your Table of Contents. I usually don't include the first one, which is an introduction. And I don't include photo capsules. It's up to you!

You've done it! If you come this far, and worked along with me, you've created your first table of contents.

You can see the results by scrolling up to the top of this article, and seeing the Table of Contents I created for this hub. It's just to the left of the coconuts!

And if you haven't done it yet, that's okay. Take a deep breath. Go wash some dishes or walk the dog, or whatever relaxes you. Then come back and give it a try.

You can add a table of contents to a hub any time. In fact, it's a great thing to do when you're freshening up an old hub, and you want to get more page views.

And here's a freebie! How did I get that cute French à ("a," with accent grâve) in the capsule title? In the capsule, in Edit mode, look at the toolbar. You'll see the bulleted list, the undo, and a weird thing that looks like a horseshoe (Ω) but is actually the Greek letter Omega. That is the button to insert a special symbol. Click there, and a page of special symbols comes up. They're all too small to read, but that's okay, because, if you hover over one with the mouse, you'll see it nice and large on the upper left. Click on any special character, and it gets inserted into your capsule. And, because this hub is all about how to deal with weird glitches, the character gets inserted into the body of the capsule. If you want it in the Capsule Subtitle, you'll need to cut it (CTRL+X on a PC) and move the cursor to the Capsule Subtitle and paste it (CTRL+V) into place.

If you're still with me, you're a pro!

I look forward to seeing your next hub - with a table of contents - soon!