LATEST NEWS

Creating a Table of Contents

img
Déc
15

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.

  • 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.
  • 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]]
  • Add sectionsFinally, 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====

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.

  • 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.
  • 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:

[*]

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.

  • 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>

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.

  • 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]

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


 

  • How to link to other pages from a ToCThis 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]

  • 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]

  • 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).

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.

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>

 


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.

  • img
    Déc 17, 2008 @ 1:06

    Guide Released!Here it is, hope it’s helpful! Please feel free to leave feedback!

  • img
    Déc 17, 2008 @ 5:32

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

  • img
    Déc 17, 2008 @ 8:34

    Awesome Jiyambi, top notchAwesome Jiyambi, top notch as always 🙂

  • img
    Déc 17, 2008 @ 12:35

    Just awesome

    I amJust awesome :O

    I am definitely gonna use this for my future guides.

  • img
    Déc 17, 2008 @ 16:51

    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 ^_^

  • img
    Déc 17, 2008 @ 20:21

    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

    • img
      Déc 17, 2008 @ 20:49

      It’s really easy if you knowIt’s [b]really[/b] easy if you know what to do 🙂

      • img
        Déc 18, 2008 @ 0:45

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

        mwahahah 😀

        • img
          Déc 18, 2008 @ 4:31

          Blasphemy!Blasphemy!

          • img
            Déc 18, 2008 @ 4:57

            No, that’s my job. FirstNo, 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.*

          • img
            Déc 18, 2008 @ 5:23

            *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

  • img
    Déc 20, 2008 @ 0:04

    Sorry Jiyambi…… I [i]’stole\'[/i] 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 🙂

    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 🙂

    • img
      Déc 23, 2008 @ 20:12

      Heh, no prob. Shikamaru alsoHeh, 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.

      • img
        Jan 23, 2009 @ 21:06

        Hope you don’t mind, IHope 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 😛

        • img
          Jan 24, 2009 @ 0:26

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

          • img
            Mar 23, 2009 @ 17:21

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

            [url=https://www.wow-pro.com/tradeskill_guides/nilz039_profession_guide]My Profession Guide[/url]

          • img
            Mar 24, 2009 @ 2:18

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

  • img
    Déc 31, 2008 @ 22:45

    Exalted member = pure profitExalted member = pure profit guide wise!

    Jiyambi’s tree healing guide –> edit –> copy codes –> paste in own guide –> profit! 😛

    • img
      Jan 1, 2009 @ 23:42

      Hehe.

      Step 1 – WriteHehe.

      Step 1 – Write Guides
      Step 2 – …..
      Step 3 – Profit!

  • img
    Fév 5, 2009 @ 21:50

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

    • img
      Fév 8, 2009 @ 2:48

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

  • img
    Mar 23, 2009 @ 17:25

    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

    • img
      Mar 23, 2009 @ 18:03

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

      [url=http://tinypaste.com/7524d]Here[/url] is the code for a list like this:

      [list=1]
      [*]Main 1
      [*]Main 2
      [list=a]
      [*]Sub 1
      [*]Sub 2
      [/list]
      [*]Main 3
      [/list]

      • img
        Mar 23, 2009 @ 20:12

        Thanks a lotThanks a lot for clearing that up.

    • img
      Mar 24, 2009 @ 2:18

      Hah, thanks Jahwo for doingHah, thanks Jahwo for doing my job for me.

  • img
    Mar 23, 2009 @ 18:05

    Just put a list inside aJust put a list inside a list, very easy.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archives