Usando HTML Para Criar Bons Índices

por Caio. Sex 3 Jan 2014 - 20:03

Falae galera! Os índices em uma FanFic sempre foram um sinal de problema para os escritores daqui, independentemente da época. Apesar de parecer algo demasiadamente complexo e/ou desorganizado devido ao sistema de links de post do próprio fórum, tudo isso pode ser facilmente resolvido - até mesmo com bbCode. "Por que então usar HTML?", você deve estar se perguntando. Ora, por dois bons motivos: HTML nos dá muito mais liberdade do que bbCode, como eu canso de dizer E porque, devido a esse novo editor PÉSSIMO, alguns bbCode são perdidos na hora de editar um post. HTML, até onde eu vi, não. Só o segundo motivo para mim já é extremamente útil. O primeiro é mais para algumas coisas "avançadas", como poder fazer índices separados de dois capítulos presentes no mesmo post. Se isso chamou sua atenção ~~euseiquesouchatoprakrl~~, vamos começar!

O Esqueleto do Índice

Antes de mais nada, precisamos construir o esqueleto básico de nosso índice. Supondo que nossa fic tenha duas temporadas, cada uma com três capítulos, poderíamos fazer algo bem simples, como visto no código abaixo:

Código:: [center][b]Temporada I[/b] 0 - [url=http://link.com.br]Prólogo[/url] 1 - [url=http://link.com.br]Primeiro Capítulo[/url] 2 - [url=http://link.com.br]Segundo Capítulo[/url] [b]Temporada II[/b] 1 - [url=http://link.com.br]Primeiro Capítulo[/url] 2 - [url=http://link.com.br]Segundo Capítulo[/url] 3 - [url=http://link.com.br]Terceiro Capítulo[/url][/center]

Vale lembrar que você pode organizar os capítulos como quiser. O prólogo poderia muito bem contar como o 1, os da segunda temporada contar como 3, 4, 5 e assim vai. Escolhi esse jeito por achar mais bonitinho. Ah, claro. Você também tem total liberdade de usar os algarismos que quiser. Pode ser árabe, romano, indígena, imagens. Faça como quiser! Lembre-se sempre, porém, de ser criativo e de tentar agradar seus leitores, o "público-alvo" ;)

Observando esse template básico, a primeira coisa que poderíamos fazer para deixá-lo mais bonito seria usar imagens, pequenos banners, ao invés de texto simples. Não, não use isso para cada capítulo. Em geral, fica péssimo. O ideal seria usar uma imagem para cada temporada. Dá um tom mais "profissional" para sua fic. Outra coisa interessante seria colocar cor nos capítulos. Acredite, a cor padrão das URLs do fórum é feia, sem falar que fica mudando toda vez que você passa o mouse, e isso é muito chato (a não ser que seja planejado). Aí está um de nossos primeiros problemas: usar a tag bbCode [color] não funciona normalmente. Por quê? Sei lá o porquê, esse treco é doido mesmo. Para funcionar, você não pode usar a tag fora das tags de URL; você deve colocar dentro (uuuh!). Sim, dentro (uuuh!) funciona. Fora, não. Por isso lembre-se de não manter a virgindade dos códigos. Abaixo vocês podem ver nosso "template" melhorado, com tudo da cor preta e com imagens:

Código:: [color=black][center][img]http://i.imgur.com/j1Tu6LF.png[/img] 0 - [url=http://link.com.br][color=black]Prólogo[/color][/url] 1 - [url=http://link.com.br][color=black]Primeiro Capítulo[/color][/url] 2 - [url=http://link.com.br][color=black]Segundo Capítulo[/color][/url] [img]http://i.imgur.com/fm5NqZz.png[/img] 1 - [url=http://link.com.br][color=black]Primeiro Capítulo[/color][/url] 2 - [url=http://link.com.br][color=black]Segundo Capítulo[/color][/url] 3 - [url=http://link.com.br][color=black]Terceiro Capítulo[/color][/url][/center][/color]

Observando nossa estrutura, vemos que ela melhorou consideravelmente, não? Parece bem mais simpática para quem vê. Realmente o é. Reparem que usamos duas tags [color], uma externa a tudo, outra dentro (uuuh!) de cada URL. Na verdade, nem precisaríamos ter usado aquela externa. Use-as, por exemplo, quando não for usar imagens ou quando houver algum texto entre os links que você queira deixar com a cor escolhida. Resumidamente, use-a sempre que houver algum texto além dos links.

(In)Utilidades com CSS/HTML
Pule se estiver satisfeito com seu template atual

"Tchio Parry, e se eu quiser que as urls mudem de cor quando eu passo o mouse por cima? Eu posso fazer isso? Posso escolher a cor que eu quiser?".

Sim, caro leitor, você pode fazer isso utilizando-se de CSS! Não corra, cara! Não, corre não, volta, volta. Voltou? Ok, agora respire fundo para descansar um pouco. Pronto. CSS não é esse bicho mirabolante de sete cabeças. Ok, se você souber, você pode fazer várias coisas zueiras nos sites dos outros, tipo a galera daqui (eu inclusive) já fez. Mas, inocentemente, podemos nos aproveitar dele para fazer coisas legais, sem necessariamente quebrar o layout. Para isso, você precisa usar uma tag HTML especial, a tag <style>, e então estilizar o hover da âncora. Hã? Não entendeu? Ah, realmente. Isso é meio doido a princípio, então vou deixar o código que faz o link mudar de cor logo embaixo, é só colar. Vale ressaltar que esse código conta como uma "linha" na página, ou seja, se quiser que ele não estrague nosso belo template, devemos colocá-lo na mesma linha onde o template começa. Eis o código, mudando a cor para vermelho:

Código:: <style > a:hover { color:#f00; } </style >

Só que há um pequeno problema... Ele só funcionária se NÃO usarmos a tag bbCode, mas sim a tag HTML para links. A não ser que você queira muito fazer isso, não vale a pena mudar tudo, ainda mais caso tenha MUITOS capítulos para serem alterados. Caso você continue achando que é necessário, podemos alterar nosso template, sem problemas. Não irei explicar muito. O código em si é auto-explicativo:

Código:: <style > a:hover { color:#f00; } </style >[color=black][center][img]http://i.imgur.com/j1Tu6LF.png[/img] 0 - <a href="http://link.com.br">Prólogo</a> 1 - <a href="http://link.com.br">Primeiro Capítulo</a> 2 - <a href="http://link.com.br">Segundo Capítulo</a> [img]http://i.imgur.com/fm5NqZz.png[/img] 1 - <a href="http://link.com.br">Primeiro Capítulo</a> 2 - <a href="http://link.com.br">Segundo Capítulo</a> 3 - <a href="http://link.com.br">Terceiro Capítulo</a>[/center][/color]

Se você utilizar esse template, irá reparar que tiramos a tag bbCode color. Sim, tivemos que tirar, senão de nada adiantaria a troca de cores. A conseqüência disso é que os links passam a ficar com um tom acinzentado, e não pretos como queríamos originalmente. Felizmente, podemos usar CSS para também resolver esse problema. Novamente, não irei me atentar muito a detalhes. Eis o código:

Código:: <style > a:link { color:#000; } a:hover { color:#f00; } </style >[color=black][center][img]http://i.imgur.com/j1Tu6LF.png[/img] 0 - <a href="http://link.com.br">Prólogo</a> 1 - <a href="http://link.com.br">Primeiro Capítulo</a> 2 - <a href="http://link.com.br">Segundo Capítulo</a> [img]http://i.imgur.com/fm5NqZz.png[/img] 1 - <a href="http://link.com.br">Primeiro Capítulo</a> 2 - <a href="http://link.com.br">Segundo Capítulo</a> 3 - <a href="http://link.com.br">Terceiro Capítulo</a>[/center][/color]

Isso resolve nosso problema, certo? Sim, sim. Resolve. Ufa! Eu disse, não vale muito a pena mudar a cor dos links. Nesse caso, os links ficam originalmente na cor preta e, ao passar o mouse sobre eles, mudam para a cor vermelha. Você pode usar as cores que você quiser, claro! Para isso, você precisa saber o código hexadecimal da cor que você quiser. Calma, calma. Não corra. É sério, confie em mim. Ufa, que bom que dessa vez confiou. Nem precisa respirar! Há vários sites com tabelas de cores hexadecimais já prontas, como esse. O programa GIMP também informa o "código HTML" da cor quando você clica sobre uma. Esse "código" nada mais é que o valor hexadecimal da cor. Abaixo segue a estrutura de onde mudar o quê:

Código:: <style > a:link { color:#CÓDIGO_HEXADECIMAL_AQUI_PARA_MUDAR_COR_DOS_LINKS; } a:hover { color:#CÓDIGO_HEXADECIMAL_AQUI_PARA_MUDAR_COR_DOS_LINKS_AO_PASSAR_O_MOUSE_SOBRE_ELE; } </style >

Prestem atenção no "#". Alguns sites, como o que eu passei, já deixam o código com esse sinal. O GIMP, por sua vez, não. Por isso, lembre-se sempre de o incluir ou de o remover. Somente um cerquilha ("#") já basta; em outros casos, vai dar ruim, estragando todo nosso magnífico trabalho até agora. Acredite, é muito chato arrumar depois - o fórum sempre buga tudo. Pior é ainda tomar alerta por algo que você fez involuntariamente.

"Poxxx tchio Parry, tá tudo mt lekal e lindu. Mas, e se minha fic tiver muitos capítulos? Vou ter que ficar decorando cada número? Isso eh mt chatu!1onze11!". Realmente, jovem gafanhoto. Por isso, existe algo mágico, tanto em HTML quanto em bbCode, que pode o ajudar: listas! Isso mesmo. Listas. Tipo listas de compra mesmo. Elas podem ser ordenadas (com números, dã) ou não-ordenadas (com bolinhas, quadradinhos, etc, dã... Pera, isso não é tão óvio assim. Ok, ok, esquece esse dã). Pessoalmente, não gosto de usar listas pois acho-as muito feias, elas ficam com um espaçamento extra, o que, na minha opinião, estraga tudo. Abaixo você pode conferir o código de uma lista ordenada:

Código:: [list=1] [*]Item 1 [*]Item 2 [*]Item 3 [/list] [list=a] [*]Item 1 [*]Item 2 [*]Item 3 [/list] [list] [*]Item 1 [*]Item 2 [*]Item 3 [/list]

No primeiro exemplo, a lista será ordenada, começando do 1 e assim vai. No segundo, ela também será ordenada, porém irá se utilizar de letras minúsculas do alfabeto para tal. O último exemplo é não-ordenado, utilizando-se de bolinhas. "Mas tchio Parry... Você não disse que podíamos usar quadradinhos também? E números romanos?" Olha, poder até pode. Mas, para isso, precisamos usar HTML. Em HTML, uma lista ordenada começa através da tag <ol>, enquanto que uma não-ordenada, pela tag <ul>. Cada item da lista é então demarcado através de tags <li>. Veja o exemplo abaixo:

Código:: <ol> <li>Exemplo 1</li> <li>Exemplo 2</li> </ol> <ul> <li />Usar essa tag assim também é válido. <li />Mesmo se estiver usando OL. </ul>

Há ainda outra variante das listas, mas acredito que elas iriam fugir demais de nosso objetivo: escrever os capítulos sem ter que nos preocupar com o número deles. Como esse é nosso principal foco, o ideal seria que usássemos uma lista ordenada. Abaixo, podemos observar um exemplo de lista ordenada através de algarismos romanos, começando do 500:

Código:: <ol type='I' start='500'> <li />Nome do Capítulo <li />Nome do Capítulo <li />Nome do Capítulo </ol>

Como você pode observar, o atributo start indica onde nossa lista começa. Você pode ignorá-lo se quiser. Para isso, basta simplesmente removê-lo completamente, ou simplesmente colocar seu valor como 1. O atributo type, por sua vez, é o grande "pulo do gato". É através dele que podemos mudar como será nossa lista (letras, algarismos árabes, romanos, etc). Confira a lista abaixo de opções possíveis para a tag <ol>:

1 - Padrão, mostra os algarismos árabes (1, 2, 3, etc).
a - Ordena a lista por letras do alfabeto, MINÚSCULAS.
A - Ordena a lista por letras do alfabeto, MAIÚSCULAS.
i - Ordena a lista por algarismos romanos (i, ii, v, d), MINÚSCULOS.
I - Ordena a lista por algarismos romanos (i, ii, v, d), MAIÚSCULOS.

A tag <ul> segue a mesma lógica, também tendo os atributos start e type. A diferença é que seu type se limita em três opções: disc (padrão, uma bolinha preta), circle (uma bolinha vazia) e square (um quadrado preto). Modificando nosso template, encontramos isso:

Código:: <style > a:link { color:#000; } a:hover { color:#f00; } </style >[color=black][center][img]http://i.imgur.com/j1Tu6LF.png[/img] <ol start='0'> <li /><a href="http://link.com.br">Prólogo</a> <li /><a href="http://link.com.br">Primeiro Capítulo</a> <li /><a href="http://link.com.br">Segundo Capítulo</a> </ol> [img]http://i.imgur.com/fm5NqZz.png[/img] <ol start='1'> <li /><a href="http://link.com.br">Primeiro Capítulo</a> <li /><a href="http://link.com.br">Segundo Capítulo</a> <li /><a href="http://link.com.br">Terceiro Capítulo</a>[/center][/color]

Como estamos centralizando o conteúdo, não ficou tão ruim assim. Como eu disse, em geral, listas são visualmente feias por darem um espaço no canto esquerdo dos itens. Agora que terminamos nossa seção de (in)utilidades, continuemos. Saiba, porém, que não me utilizarei dessa última versão de nosso template. Guarde-a se gostou, pois vou me limitar a coisas mais "básicas" por agora.

Entendendo o Sistema de Posts do Fórum

Ignorando por um tempo a parte visual, vamos focar onde acontece o real problema em todos os índices: a hora de coletar o "link" onde o capítulo foi postado, afinal, numa página temos vários posts. Como poderíamos especificar um? Foi pensando nesse tipo de coisa que o phpBB, sistema que o fórum se utiliza, se não me engano, colocou "âncoras" em cada post da página.

Tais âncoras funcionam como um acréscimo à URL da página, podendo, através delas, especificar qual post deve ser o primeiro a ser visualizado. Embora já exista um tutorial por aqui explicando isso (se não estou ficando doidão), irei explicar novamente: toda vez que você posta, um pequeno "código" de identificação do post é gerado no sistema.

Para ver essa identificação, basta clicarmos no botão "Editar" depois de termos postado, claro. O código, então, irá aparecer na URL, como no exemplo abaixo:

http://www.pokemonmythology.org/post?p=744410&mode=editpost

Feito isso, basta pegarmos o link da página onde o capítulo está, e acrescentar o símbolo cerquilha ("#", lembra-se dele?) juntamente da identificação logo no fim da URL, como abaixo:

http://www.pokemonmythology.org/t48849-usando-html-para-criar-bons-indices#744410

Isso fará com que a página comece exatamente exibindo seu post, isso é, o capítulo. Com isso, nosso template ficaria mais ou menos assim (os códigos são totalmente aleatórios):

Código:: [color=black][center][img]http://i.imgur.com/j1Tu6LF.png[/img] 0 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Prólogo[/color][/url] 1 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Primeiro Capítulo[/color][/url] 2 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Segundo Capítulo[/color][/url] [img]http://i.imgur.com/fm5NqZz.png[/img] 1 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Primeiro Capítulo[/color][/url] 2 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Segundo Capítulo[/color][/url] 3 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Terceiro Capítulo[/color][/url][/center][/color]

Claro, repetir os links como eu fiz em nada adiantaria, porque iríamos sempre para o mesmo capítulo. Por tanto, lembre-se sempre de ir em "Editar", pegar o código e só então editar seu índice, ok? Perfeito! Só com isso já podemos elaborar um ótimo índice.

ATENÇÃO: Muitas pessoas erram nos índices pois elas pegam o link da PRIMEIRA PÁGINA e aí adicionam a identificação do capítulo. Você deve pegar o link da PÁGINA ONDE ESTÁ O CAPÍTULO. Só assim dará certo, ok? ;) A âncora não está na primeira página, está na página onde está o capítulo. A não ser, é claro, que ele esteja na primeira página xD

Criando Suas Próprias Âncoras

Lembra quando eu disse beeem lá no início do tutorial que eu prefiro HTML porque ele nos dá mais liberdade que bbCode? Pois é... Esse é um dos casos. Com HTML, nós podemos criar nossas próprias âncoras. Vamos entender! :)

A tag <a> (hiperlink/âncora) é muito comum, sendo usada por praticamente todos os sites atuais. É através dela que podemos "linkar" páginas na web. Basicamente, foi através de uma dessas tags que você conseguiu entrar aqui etc. Uma função pouco conhecida e explorada atualmente (mas bem usada no passado, principalmente naqueles GeoCities marotos cheios de glitter, JavaScript e .gifs) é a de âncora. Basicamente, você "marca" parte do seu capítulo, como o título (é sempre uma boa escolha), e aí você pode linkar ele com qualquer hiperlink que você quiser. Parece confuso? Bem, pode ser, realmente. Vamos por partes. O código abaixo simula um capítulo:

Código:: [color=black][center][b]1. Um Título Legal[/b][/center] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec nunc volutpat, porta eros ornare, porttitor felis. Nullam vitae tristique tortor. Nulla non erat vel lectus varius luctus. Nullam congue pellentesque risus quis malesuada. Nunc volutpat, libero eu interdum iaculis, leo tellus cursus lectus, sit amet lobortis ipsum quam ac sapien. Pellentesque tristique convallis felis, in gravida justo vulputate id. Duis pulvinar fringilla gravida. Donec vitae interdum enim. Nulla sed mauris a velit consectetur feugiat id a mi. Praesent molestie sollicitudin tellus, id eleifend sem luctus nec. Sed lobortis bibendum tellus a luctus. Curabitur scelerisque dolor at pretium imperdiet. Nullam dignissim est neque, auctor sagittis nisl feugiat ac. Integer porttitor magna et ipsum ullamcorper dignissim. Nulla eu nisl vel mauris ultricies sagittis sed eu neque. Sed commodo dictum odio, sed euismod justo tincidunt at. Aenean in nibh velit. Aenean ornare nulla nec orci pulvinar fermentum. Vivamus nec facilisis risus. Etiam mi nisi, vulputate at dui et, mollis molestie nulla. Sed vulputate pulvinar nibh, a tristique libero semper et. Ut id ipsum rhoncus, iaculis orci at, aliquet mi. Donec eleifend iaculis nunc a euismod. Integer enim odio, dignissim et dui non, venenatis tempor ligula. Praesent nec pulvinar tortor. Ut iaculis, neque a convallis condimentum, nisi nisl molestie diam, at ultricies enim lectus eu libero. Sed mollis massa sit amet nibh semper egestas. Etiam posuere accumsan sem, a porttitor quam faucibus eu. Integer convallis pharetra tellus dictum facilisis. Fusce iaculis tristique elit, ut dapibus nisl tincidunt sed. Aenean et condimentum dolor, ultrices viverra sapien. Nulla facilisi. In eget lacus eget elit viverra malesuada sed sed mauris. In rutrum dictum urna at dignissim. Nulla lacus odio, porta in rhoncus sed, eleifend eu nibh. Fusce congue in tortor vitae suscipit. Nunc aliquam, mauris ac aliquet vulputate, leo felis vulputate leo, et posuere purus lectus id mi. In convallis a risus vitae euismod. Suspendisse ultrices euismod lectus non ultrices. Nunc fringilla pellentesque nulla in egestas. Praesent placerat quam sed hendrerit scelerisque. Aenean sit amet velit augue. Ut molestie pharetra nunc in viverra. Donec nisi augue, aliquet ut tristique sed, consequat et nisi. Curabitur mauris eros, dapibus id lectus ut, bibendum laoreet mi.[/color]

É um template básico, como podemos ver. Observando esse capítulo, como eu havia dito anteriormente, um ótimo lugar para colocarmos a tag é o início, justamente no título do capítulo. Ficaria assim:

Código:: [color=black][center]<a id='nome_da_ancora'>[b]1. Um Título Legal[/b]</a>[/center] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec nunc volutpat, porta eros ornare, porttitor felis. Nullam vitae tristique tortor. Nulla non erat vel lectus varius luctus. Nullam congue pellentesque risus quis malesuada. Nunc volutpat, libero eu interdum iaculis, leo tellus cursus lectus, sit amet lobortis ipsum quam ac sapien. Pellentesque tristique convallis felis, in gravida justo vulputate id. Duis pulvinar fringilla gravida. Donec vitae interdum enim. Nulla sed mauris a velit consectetur feugiat id a mi. Praesent molestie sollicitudin tellus, id eleifend sem luctus nec. Sed lobortis bibendum tellus a luctus. Curabitur scelerisque dolor at pretium imperdiet. Nullam dignissim est neque, auctor sagittis nisl feugiat ac. Integer porttitor magna et ipsum ullamcorper dignissim. Nulla eu nisl vel mauris ultricies sagittis sed eu neque. Sed commodo dictum odio, sed euismod justo tincidunt at. Aenean in nibh velit. Aenean ornare nulla nec orci pulvinar fermentum. Vivamus nec facilisis risus. Etiam mi nisi, vulputate at dui et, mollis molestie nulla. Sed vulputate pulvinar nibh, a tristique libero semper et. Ut id ipsum rhoncus, iaculis orci at, aliquet mi. Donec eleifend iaculis nunc a euismod. Integer enim odio, dignissim et dui non, venenatis tempor ligula. Praesent nec pulvinar tortor. Ut iaculis, neque a convallis condimentum, nisi nisl molestie diam, at ultricies enim lectus eu libero. Sed mollis massa sit amet nibh semper egestas. Etiam posuere accumsan sem, a porttitor quam faucibus eu. Integer convallis pharetra tellus dictum facilisis. Fusce iaculis tristique elit, ut dapibus nisl tincidunt sed. Aenean et condimentum dolor, ultrices viverra sapien. Nulla facilisi. In eget lacus eget elit viverra malesuada sed sed mauris. In rutrum dictum urna at dignissim. Nulla lacus odio, porta in rhoncus sed, eleifend eu nibh. Fusce congue in tortor vitae suscipit. Nunc aliquam, mauris ac aliquet vulputate, leo felis vulputate leo, et posuere purus lectus id mi. In convallis a risus vitae euismod. Suspendisse ultrices euismod lectus non ultrices. Nunc fringilla pellentesque nulla in egestas. Praesent placerat quam sed hendrerit scelerisque. Aenean sit amet velit augue. Ut molestie pharetra nunc in viverra. Donec nisi augue, aliquet ut tristique sed, consequat et nisi. Curabitur mauris eros, dapibus id lectus ut, bibendum laoreet mi.[/color]

Só a adição desde pequeno código já criou nossa âncora. Dentro do atributo id, devemos informar o nome que queremos dar a ela. Não repita nomes numa mesma página, não sei qual será o resultado disso, mas... Certamente não será bom. Uma vez criada a âncora, podemos usá-la normalmente com as tags URL, exatamente como as âncoras geradas pelo sistema do fórum. Possíveis dúvidas, checar seção Entendendo o Sistema de Posts do Fórum desse tutorial.

Com esse sistema de âncoras personalizados, podemos resolver aquele problema que venho citando desde o início do tópico, de termos dois capítulos no mesmo post. Podemos ter quantos quisermos, basta termos um pouco de criatividade para nomear tantas tags xD

Veja o exemplo básico abaixo:

Código:: [color=black][center][b]1. Capítulo Legal[/b][/center] Aenean et condimentum dolor, ultrices viverra sapien. Nulla facilisi. In eget lacus eget elit viverra malesuada sed sed mauris. In rutrum dictum urna at dignissim. Nulla lacus odio, porta in rhoncus sed, eleifend eu nibh. Fusce congue in tortor vitae suscipit. Nunc aliquam, mauris ac aliquet vulputate, leo felis vulputate leo, et posuere purus lectus id mi. In convallis a risus vitae euismod. Suspendisse ultrices euismod lectus non ultrices. Nunc fringilla pellentesque nulla in egestas. Praesent placerat quam sed hendrerit scelerisque. Aenean sit amet velit augue. Ut molestie pharetra nunc in viverra. Donec nisi augue, aliquet ut tristique sed, consequat et nisi. Curabitur mauris eros, dapibus id lectus ut, bibendum laoreet mi. [center][b]2. Capítulo Mais Legal Ainda![/b][/center] Aenean et condimentum dolor, ultrices viverra sapien. Nulla facilisi. In eget lacus eget elit viverra malesuada sed sed mauris. In rutrum dictum urna at dignissim. Nulla lacus odio, porta in rhoncus sed, eleifend eu nibh. Fusce congue in tortor vitae suscipit. Nunc aliquam, mauris ac aliquet vulputate, leo felis vulputate leo, et posuere purus lectus id mi. In convallis a risus vitae euismod. Suspendisse ultrices euismod lectus non ultrices. Nunc fringilla pellentesque nulla in egestas. Praesent placerat quam sed hendrerit scelerisque. Aenean sit amet velit augue. Ut molestie pharetra nunc in viverra. Donec nisi augue, aliquet ut tristique sed, consequat et nisi. Curabitur mauris eros, dapibus id lectus ut, bibendum laoreet mi.

Vamos colocar, em cada um, uma âncora correspondente ao seu número, acrescido do texto "capítulo", como abaixo:

Código:: [color=black][center]<a id='capitulo1'>[b]1. Capítulo Legal[/b]</a>[/center] Aenean et condimentum dolor, ultrices viverra sapien. Nulla facilisi. In eget lacus eget elit viverra malesuada sed sed mauris. In rutrum dictum urna at dignissim. Nulla lacus odio, porta in rhoncus sed, eleifend eu nibh. Fusce congue in tortor vitae suscipit. Nunc aliquam, mauris ac aliquet vulputate, leo felis vulputate leo, et posuere purus lectus id mi. In convallis a risus vitae euismod. Suspendisse ultrices euismod lectus non ultrices. Nunc fringilla pellentesque nulla in egestas. Praesent placerat quam sed hendrerit scelerisque. Aenean sit amet velit augue. Ut molestie pharetra nunc in viverra. Donec nisi augue, aliquet ut tristique sed, consequat et nisi. Curabitur mauris eros, dapibus id lectus ut, bibendum laoreet mi. [center]<a id='capitulo2'>[b]2. Capítulo Mais Legal Ainda![/b]</a>[/center] Aenean et condimentum dolor, ultrices viverra sapien. Nulla facilisi. In eget lacus eget elit viverra malesuada sed sed mauris. In rutrum dictum urna at dignissim. Nulla lacus odio, porta in rhoncus sed, eleifend eu nibh. Fusce congue in tortor vitae suscipit. Nunc aliquam, mauris ac aliquet vulputate, leo felis vulputate leo, et posuere purus lectus id mi. In convallis a risus vitae euismod. Suspendisse ultrices euismod lectus non ultrices. Nunc fringilla pellentesque nulla in egestas. Praesent placerat quam sed hendrerit scelerisque. Aenean sit amet velit augue. Ut molestie pharetra nunc in viverra. Donec nisi augue, aliquet ut tristique sed, consequat et nisi. Curabitur mauris eros, dapibus id lectus ut, bibendum laoreet mi.

Feito isso, podemos linká-los normalmente em nosso Template, que ficaria mais ou menos parecido com isso, claro, cada caso é um caso e, vale lembrar, todos os exemplos são meramente ilustrativos. Não tente usar os links daqui, tenho quase certeza que eles não vão funcionar, hehe. Anyway, parecido com isso:

Código:: [color=black][center][img]http://i.imgur.com/j1Tu6LF.png[/img] 0 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Prólogo[/color][/url] 1 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#capitulo1][color=black]Capítulo Legal[/color][/url] 2 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#capitulo2][color=black]Capítulo Mais Legal Ainda![/color][/url] [img]http://i.imgur.com/fm5NqZz.png[/img] 1 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Primeiro Capítulo[/color][/url] 2 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Segundo Capítulo[/color][/url] 3 - [url=http://www.pokemonmythology.org/t0-minha-fanfic#123449][color=black]Terceiro Capítulo[/color][/url][/center][/color]

Com isso, já podemos fazer um ótimo índice. Como eu havia dito, podemos ter quantos capítulos desejarmos num mesmo post, basta ter criatividade de escolher os nomes para tantas âncoras. Evite usar suas próprias se o sistema do fórum por si só já "resolver" o problema; acredite, pode deixar seu post MUITO desorganizado, o que não é nem um pouco interessante caso seja iniciante em HTML e não entenda muito do que esteja fazendo.

É, é isso. Espero que tenham gostado. Fiz com todo carinho. Dúvidas, vocês podem postar que eu tento responder, juro. Se eu não responder em uns 3 dias, me mandem MP falando pra eu dar uma passadinha por aqui, volto rápido.

Talvez eu venha com mais algumas coisas de HTML para auxiliar na criação do seu índice, mas é bem mais provável que não, já que a área está totalmente mortona, paradona, boladona. That's all, folks! Brigadão pela atenção e espero ter sido útil :)