Creating a Table of Contents

Jiyambi's picture

I'm sure some of you have seen guides which have a table of contents with links in them. Some examples include my Tree Healing Guide and Shikamaru's Eternal Farming Guide. For long guides with multiple parts, these tables of contents (or ToCs, for short) are extremely useful for quickly navigating between sections of the guide. They can also be used to navigate between guides split up into separate chapters. This guide will show you how to create interactive ToCs for your guides.

A quick note: in the code shown in this guide, some parts need to be replaced by code specific to your guide. These parts will appear in green.

Let's start off with an example - the ToC for this guide!



Table of Contents


  1. Choosing a type of code
  2. Using Mediawiki to create a ToC
  3. Using HTML and BBCode to create a ToC
  4. Tips and Tricks for HTML ToCs
  5. Comments



Choosing a type of code


There are actually two ways to make a ToC for your guide. One uses Mediawiki, the other uses HTML. The Mediawiki way is the easiest, but unfortunately requires that your guide be done entirely in Mediawiki with zero HTML or BBCode. That means limited customization, and additionally many people on WoW-Pro don't know how to use Mediawiki at all. Using HTML to make the ToC is more complicated, but lets you use both HTML and BBCode throughout the guide.

IMPORTANT NOTE: Either of these methods will work for BOTH a "wiki" (group) page OR a "guide" (single editor) - you can use the wiki formatting even if it is a solo editor page, and you can choose not to use it on a group page.


BBCode


BBCode is the default option for WoW-Pro's input format. It is a type of code used on many online forums. Through BBCode, you can use many common HTML tags, but it keeps users from seriously messing up page layouts with bad HTML. You can get a lot of custamizability out of pure BBCode (for example, the only non-BBCode things in my Tree Healing Guide are the ToC links), but this input format is even better because WoW-Pro lets you use HTML as well - but only when BBCode is the input format, NOT when you use Mediawiki.

Essentially: A large amount of custamizability and the ability to use HTML, with the drawback of somewhat complicated and ugly code and the potential to mess up page layouts with bad HTML.


Mediawiki


Mediawiki is the code language used on most wikis, such as Wikipedia and Wowwiki. However, the Mediawiki available on WoW-Pro is a little more limited than on many wiki sites, since WoW-Pro is not a full wiki. In addition, you cannot use HTML if you chose Mediawiki as your input format.

Essentially: Sacrifices custamizability for easy to read and easy to write code.


Back to the top



Using Mediawiki to create a ToC


Using Mediawiki to make a ToC is very easy, so we'll cover it quickly in this section. For an example guide with a wiki ToC, see the Loot Distribution Systems guide. For a cheat sheet of common Mediawiki code, see this page.


  1. Input format

    First, you must have your input format set to Mediawiki. The input format options are found just below your guide's main content textbox when you edit your guide. It is minimized by default - click the arrow to maximize it.


  2. Place ToC

    Next, you need to tell your guide where you want the ToC. Simply place the following code wherever you want the ToC in your guide:

      [[toc]]

  3. Add sections

    Finally, you need to tell the ToC what to list. You do this by using equal signs around your section headings throughout your guide:

      ==Highest Level heading==

      ===Subheading===

      ====Sub-sub heading====

  4. Each of these will be added to your ToC automatically, and it will also automatically format your section headings.


Back to the top



Using HTML and BBCode to create a ToC


As mentioned above, BBCode and HTML allow a lot more customization at the expense of ease of use. See this page for some basic BBCode formatting information to help with the rest of your guide.


  1. Input format

    First, you must have your input format set to BBCode. The input format options are found just below your guide's main content textbox when you edit your guide. It is minimized by default - click the arrow to maximize it.


  2. Make the ToC list

    Next, you need to make the ToC itself. This is significantly more complicated than in Mediawiki. But, you can also make it look however you want!

    I'll teach you how to make a simple ToC, but you can modify the formatting to suit your style. Please note that to format text that is a link, you need to put the formatting tags inside the link tags.

    To make your ToC, start by making a numbered list. Use the following tag to start and end your list:

      [list=1]

      You'll put all your list content in between these two tags. Feel free to separate them from the content with line breaks as shown, it can help when reading your code.

      [/list]

    This is how you start and end your list. To put a numbered item on your list, simply use the following tag at the start of the line you want to add:

      [*]
  3. This should be all you need to create a list like the one at the top of this guide. However, it won't have any links in it yet.


  4. Create anchors

    Next, we need to make the anchors that will let you link to parts of your guide. Time for a little HTML vocabulary.

    An anchor tag always starts with a, for anchor. An anchor tag is usually used to make a link - it's used to reference an anchor, usually another page. In this guide, we'll learn to add anchors inside our page, and then reference those anchors.

    First you will learn to add the anchors. In your guide, find a section you would like to link to. Right above that section, you will add an anchor:

      <a name="sectionname"> </a>
  5. Choose a shortened name for the section - no users will see it, so don't worry about it being perfect. Make sure it is all lower case with no spaces. Also, make sure you add the closing </a> tag, otherwise the code won't work and may mess up your page.


  6. Link to anchors

    Now that you have your anchors created, you can link to them from your ToC. Simply add <a href> tags to your already-created list as follows:

      [list=1]

      [*] <a href="#sectionname">Your Section's Full Name</a>

      [/list]
  7. Make sure you include the # at the beginning of your anchor's name - this tells the browser that the anchor is in this page.

That's all you need to know to make a basic list!


Back to the top



Tips and Tricks for HTML ToCs


  1. How to link to other pages from a ToC

    This can be useful if your guide is broken into several chapters. Linking to other pages is very easy - you don't even have to use HTML, just the basic BBCode. Here is the code to link:

      [url=yoururlhere]Text you want to be the link here[/url]

  2. How to link within other pages from a ToC

    Also useful if your guide is in multiple chapters, this lets you link to specific anchors in other pages. First, make sure you have the anchors set up in the other page. Then, simply use the same type of link as for anchors within your main guide, except instead of just the #, use the other page's url:

      [list=1]

      [*] <a href="yourguidesurl#sectionname">Your Section's Full Name</a>

      [/list]

  3. Create "Back to top" links

    For large guides, it is really nice to be able to click a quick link to return to the ToC at the top of the guide. You can very easily do this by creating an anchor above your ToC, then add a simple link referencing that anchor at the end of each section.

    Example anchor:

      <a name="top"></a>

    Example end of section link:

      <a href="#top">Back to the top</a>

    You can even add a little up arrow as a link to the top, along with the words (or without them if you like).

    1. First, you'll need to upload the arrow - use the file attachments option at the bottom of your guide's edit page. Once it is uploaded, it will show you the picture's url, copy that.

    2. Add an image tag inside the anchor reference tag. You can use BBCode for this part. You can leave the words as well, or delete them depending on your preference.

      Example with words:

        <a href="#top">[img]http://yourimagesurl[/img]Back to the top</a>

  4. Back to the top




Now you should know enough to make ToCs for your guides! Feel free to leave a comment with suggestions for improvements, questions, or corrections.

Comments

Skumball's picture

Just put a list inside a

Just put a list inside a list, very easy.

Nilz's picture

How do you make

How do you make sub tabs inside the table of contents i.e

1. Mining
---a. Locations
---b. Nodes
2. Herbalism
etc.

BTW i use bbcode

Jiyambi's picture

Hah, thanks Jahwo for doing

Hah, thanks Jahwo for doing my job for me.

Jahwo's picture

You can just put another

You can just put another list into the list for the main tabs.

Here is the code for a list like this:

  1. Main 1
  2. Main 2
    1. Sub 1
    2. Sub 2
  3. Main 3
Nilz's picture

Thanks a lot

Thanks a lot for clearing that up.

Thanks!

I just added a table to my guide and it worked great!
Critters and Books

Jiyambi's picture

I'm glad it was helpful My

I'm glad it was helpful Smiling My next guide will talk about how to use GIMP to make maps and such.

Shikamaru's picture

Exalted member = pure profit

Exalted member = pure profit guide wise!

Jiyambi's tree healing guide --> edit --> copy codes --> paste in own guide --> profit! Sticking out tongue

Jiyambi's picture

Hehe. Step 1 - Write

Hehe.

Step 1 - Write Guides
Step 2 - .....
Step 3 - Profit!

Skumball's picture

Sorry Jiyambi...

... I 'stole' your green arrow image file for use in my guides, I hope that's OK with you? If not I'll get rid no probz Smiling

Just thought I might as well stick to using something that already looks great for use in a great feature - would never have thought about implementing interactive ToC's if had not been for your amazing guide, so for that I thank you dude Smiling

Jiyambi's picture

Heh, no prob. Shikamaru also

Heh, no prob. Shikamaru also has a guide with his own style of arrow, or you can just google image search "up arrow" on the small image size and find a ton. But I don't mind if you use this one.

Brune's picture

Hope you don't mind, I

Hope you don't mind, I 'borrowed' it too. My theory is, people see it on your guides, then see it on mine, and, subconsciously, they get a better impression of mine Sticking out tongue

Jiyambi's picture

Heh no prob. I am actually

Heh no prob. I am actually looking for a replacement arrow, I don't really like mine anymore >_< It's too squigly.

Nilz's picture

I have a pretty good

I have a pretty good arrow in my profession guide if you want to use that.

My Profession Guide

Jiyambi's picture

I was eyeing that, Nilz, but

I was eyeing that, Nilz, but it's color scheme clashes with my guide (which is mostly green).

dark_fanboy's picture

YAY!

Its nice to finally be part of community to try to help out and have respectful people replying. Wonderful guide, have to give it a try. I'm still testing Jame's Northrend guide right now and loving it! Not sure when I get a chance to create a Table of Contents, but for my BS guide I might just have to tweak it a little.

Don't be famous, be infamous

Don't be famous, be infamous

Shikamaru's picture

It's really easy if you know

It's really easy if you know what to do Smiling

Jame's picture

Oh I know exactly what to

Oh I know exactly what to do: copy/paste Jiyambi's stuff!

mwahahah Laughing out loud

Jiyambi's picture

Blasphemy!

Blasphemy!

No, that's my job. First

No, that's my job. First people steal my tanking role, then you people steal my role of being Blasphemous!? You shall all die!

*Turns into the Hulk... with chainsaws.*

dark_fanboy's picture

*blasts Akraen in the face

*blasts Akraen in the face with the Patent Pending Bootzooka* Has that handy dandy booterang ammo, saves tons of gold.

Don't be famous, be infamous

Don't be famous, be infamous

Belirahc's picture

Thanks, Jiyambi!

This helps out a lot. I haven't worked with HTML in quite a while, so I've forgotten a lot of these little tricks and hints you have here. This will be useful for anyone writing a guide here, or pretty much anyway.

Thanks much ^_^

Kwaice's picture

Just awesome I am

Just awesome Shocked

I am definitely gonna use this for my future guides.

Jame's picture

Awesome Jiyambi, top notch

Awesome Jiyambi, top notch as always Smiling

Great guide, Jiyambi! I'm

Great guide, Jiyambi! I'm planning on putting the HTML coding into the guides I make in the future; this definitely deserves a bookmark!

Jiyambi's picture

Guide Released!

Here it is, hope it's helpful! Please feel free to leave feedback!