Dominando Tags, um tutorial.
Enviado: 26 Ago 2007, 14:50Tags são um artifício usado para de alguma forma alterar a visualização de um texto, ou então para inserir elementos mais complexos do que um texto, como uma imagem ou um link.
Uma tag consiste em uma palavra chave inserida entre colchetes antes do elemento a ser modificado e a mesma palavra precedida por uma barra, entre colchetes, no final do elemento.
[exemplo]ELEMENTO A SER MODIFICADO PELA TAG[/exemplo]
Apesar de ser um assunto que muitos já conhecem, verifiquei que muita gente não tem idéia de como usar as tags para melhorar a forma como postam, seja para criar uma citação ou mostrar aquele desenho legal que você achou na internet.
Modificando o texto
Às vezes quer se dar destaque em uma palavra chave, criar um título ou de alguma forma fazer o texto ficar diferente do padrão. Para isso, usa-se as tags de modificação de texto.
As 3 tags de modificação mais comuns são a de negrito, itálico e sublinhado. Para usá-las basta colocar as tags a seguir:
Isso resulta em
Negrito
Itálico
Sublinhado
Você pode usar mais de uma tag ao mesmo tempo se quiser. O princípio é o mesmo.
Isso resulta em
Negrito e itálico e sublinhado
Existem tags que alteram o texto de outra forma, mas precisam de um parâmetro para saber como alterar. Por exemplo, quando mudamos a cor ou o tamanho de um texto. O parâmetro a ser definido é qual cor usar e quanto aumentar ou diminuir o tamanho da fonte. O parâmetro é definido depois de um sinal de igual.
Por exemplo, eu quero um texto roxo, e vou usar a seguinte tag:
Veja os elementos
color - é a tag que diz que eu vou mudar a cor da fonte
= - é um sinal necessário para informar qual cor eu vou usar.
#8000BF - é um código de cor. No fórum, já há uma lista de cores, de forma que você não vai ter que se preocupar muito com isso. Mas se isso parece confuso demais, você pode colocar o nome da cor em inglês (red, green, blue, yellow, etc).
O nosso exemplo resulta em
Texto colorido
para mudar o tamanho de uma fonte, o procedimento é parecido. A tag a se usar é a seguinte:
Isso resulta em
Texto com tamanho grande
Texto com tamanho pequeno
o parâmetro a ser definido neste caso é um valor numérico representando quantos porcento a fonte tem em relação ao tamanho normal. Assim, se você quiser um texto com a fonte menor, use valores menores do que 100. Para tamanhos maiores, use valores maiores do que 100.
Imagens e links
Agora que você sabe como fazer textos de tamanhos, cores e estilos diferentes, vamos entender como inserir uma imagem, ou um link.
Para inserir uma imagem, ela tem que estar hospedada em algum lugar na internet. Se ela está no seu computador, sugiro que a hospede em sites como o Tinypic ou o Imageshack.
Com o endereço da imagem em mãos, é só usar o código a seguir:
Isso resulta em
Para inserir um link, é muito simples. Você pode simplesmente colar o endereço e postar. Ele automaticamente vira um link. Mas às vezes você vai querer usar uma palavra chave ao invés do endereço real.
Isso é simples de fazer usando a tag a seguir
[url=endereçodapágina]Texto que vai ser clicado[/url]
Como um exemplo real, usemos a Spell
Spell RPG, o site mais LEGAL do universo!
O exemplo acima mostra que é possível usar até textos modificados em um link. Eu usei o seguinte código para conseguir o resultado acima:
Você pode criar links até usando imagens
Resulta em
Citações, listas e centralização
Às vezes você vai querer citar alguém. Um livro, um outro usuário do fórum, uma lei. Qualquer coisa. Você pode usar aspas para fazer isso, mas existe um jeito que deixa muito mais claro que você está citando alguém. O próprio fórum já tem uma ferramenta à mão para citar algo que alguém postou. Basta clicar no botão "Citar". Mas se você quiser usar para citar outras coisas, aqui vai como:
Isso resulta em
Usando esta tag, você pode deixar claro quem é o autor da mensagem que você está citando. Isso é especialmente importante quando você está citando um livro, ou qualquer outra coisa que venha de outra fonte além do tópico que você está inserindo a citação. para fazer isso, use a estrutura a seguir:
Usando a estrutura anterior, deixo aqui uma citação:
É essencial que se use as aspas para o nome do autor, se não usá-las, a tag não vai funcionar.
Fazer uma lista é importante às vezes, e existe uma tag que deixará sua lista com uma aparência muito boa. Eis como usá-la:
Produz:
Você precisa colocar [*] antes de cada item que vai entrar na lista, mas não deve usar como o botão do fórum dá a entender (está errado).
Observe que você pode escolher usar ou não parâmetros. Se não usar, fica uma lista de botões. Se usar o parâmetro A, aparecem letras, se usar o parâmetro 1, números.
E é possível fazer listas em multi níveis, se necessário.
O que daria:
Há como centralizar itens na tela, é bem simples de fazer. Use o código a seguir:
Isso produz
Essa tag pode ser usada com imagens também.
E pra finalizar, uma tag que eu utilizei em toda extensão do guia. Essa tag é usada para que tudo que seja escrito dentro dela seja considerado apenas como texto, ou seja, dentro dela, nenhuma outra tag funciona. Dificilmente alguém precisará usar esta tag, mas de qualquer forma, eis como usá-la:
Estamos constantemente trabalhando no fórum, e novas tags podem ser instaladas. Se este for o caso, este tópico será atualizado para explicar como cada uma funciona.
Uma tag consiste em uma palavra chave inserida entre colchetes antes do elemento a ser modificado e a mesma palavra precedida por uma barra, entre colchetes, no final do elemento.
[exemplo]ELEMENTO A SER MODIFICADO PELA TAG[/exemplo]
Apesar de ser um assunto que muitos já conhecem, verifiquei que muita gente não tem idéia de como usar as tags para melhorar a forma como postam, seja para criar uma citação ou mostrar aquele desenho legal que você achou na internet.
Modificando o texto
Às vezes quer se dar destaque em uma palavra chave, criar um título ou de alguma forma fazer o texto ficar diferente do padrão. Para isso, usa-se as tags de modificação de texto.
As 3 tags de modificação mais comuns são a de negrito, itálico e sublinhado. Para usá-las basta colocar as tags a seguir:
- Código: Selecionar todos
[b]Negrito[/b]
[i]Itálico[/i]
[u]Sublinhado[/u]
Isso resulta em
Negrito
Itálico
Sublinhado
Você pode usar mais de uma tag ao mesmo tempo se quiser. O princípio é o mesmo.
- Código: Selecionar todos
[u][i][b]Negrito e itálico e sublinhado[/b][/i][/u]
Isso resulta em
Negrito e itálico e sublinhado
Existem tags que alteram o texto de outra forma, mas precisam de um parâmetro para saber como alterar. Por exemplo, quando mudamos a cor ou o tamanho de um texto. O parâmetro a ser definido é qual cor usar e quanto aumentar ou diminuir o tamanho da fonte. O parâmetro é definido depois de um sinal de igual.
Por exemplo, eu quero um texto roxo, e vou usar a seguinte tag:
- Código: Selecionar todos
[color=#8000BF]Texto colorido[/color]
Veja os elementos
color - é a tag que diz que eu vou mudar a cor da fonte
= - é um sinal necessário para informar qual cor eu vou usar.
#8000BF - é um código de cor. No fórum, já há uma lista de cores, de forma que você não vai ter que se preocupar muito com isso. Mas se isso parece confuso demais, você pode colocar o nome da cor em inglês (red, green, blue, yellow, etc).
O nosso exemplo resulta em
Texto colorido
para mudar o tamanho de uma fonte, o procedimento é parecido. A tag a se usar é a seguinte:
- Código: Selecionar todos
[size=150]Texto com tamanho grande[/size]
[size=50]Texto com tamanho pequeno[/size]
Isso resulta em
Texto com tamanho grande
Texto com tamanho pequeno
o parâmetro a ser definido neste caso é um valor numérico representando quantos porcento a fonte tem em relação ao tamanho normal. Assim, se você quiser um texto com a fonte menor, use valores menores do que 100. Para tamanhos maiores, use valores maiores do que 100.
Imagens e links
Agora que você sabe como fazer textos de tamanhos, cores e estilos diferentes, vamos entender como inserir uma imagem, ou um link.
Para inserir uma imagem, ela tem que estar hospedada em algum lugar na internet. Se ela está no seu computador, sugiro que a hospede em sites como o Tinypic ou o Imageshack.
Com o endereço da imagem em mãos, é só usar o código a seguir:
- Código: Selecionar todos
[img]http://i13.tinypic.com/5x97b6w.gif[/img]
Isso resulta em
Para inserir um link, é muito simples. Você pode simplesmente colar o endereço e postar. Ele automaticamente vira um link. Mas às vezes você vai querer usar uma palavra chave ao invés do endereço real.
Isso é simples de fazer usando a tag a seguir
[url=endereçodapágina]Texto que vai ser clicado[/url]
Como um exemplo real, usemos a Spell
Spell RPG, o site mais LEGAL do universo!
O exemplo acima mostra que é possível usar até textos modificados em um link. Eu usei o seguinte código para conseguir o resultado acima:
- Código: Selecionar todos
[url=http://spellrpg.com.br/]Spell RPG, o site mais [color=#0040FF][size=150][b]LEGAL[/b][/size][/color] do universo![/url]
Você pode criar links até usando imagens
- Código: Selecionar todos
[url=http://spellrpg.com.br/][img]http://i13.tinypic.com/5x97b6w.gif[/img][/url]
Resulta em
Citações, listas e centralização
Às vezes você vai querer citar alguém. Um livro, um outro usuário do fórum, uma lei. Qualquer coisa. Você pode usar aspas para fazer isso, mas existe um jeito que deixa muito mais claro que você está citando alguém. O próprio fórum já tem uma ferramenta à mão para citar algo que alguém postou. Basta clicar no botão "Citar". Mas se você quiser usar para citar outras coisas, aqui vai como:
- Código: Selecionar todos
[quote]Mensagem a ser citada[/quote]
Isso resulta em
Mensagem a ser citada
Usando esta tag, você pode deixar claro quem é o autor da mensagem que você está citando. Isso é especialmente importante quando você está citando um livro, ou qualquer outra coisa que venha de outra fonte além do tópico que você está inserindo a citação. para fazer isso, use a estrutura a seguir:
- Código: Selecionar todos
[quote="autor"]Mensagem a ser citada[/quote]
Usando a estrutura anterior, deixo aqui uma citação:
Schopenhauer escreveu:Ler é pensar com a cabeça dos outros.
É essencial que se use as aspas para o nome do autor, se não usá-las, a tag não vai funcionar.
Fazer uma lista é importante às vezes, e existe uma tag que deixará sua lista com uma aparência muito boa. Eis como usá-la:
- Código: Selecionar todos
[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]
Produz:
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Você precisa colocar [*] antes de cada item que vai entrar na lista, mas não deve usar como o botão do fórum dá a entender (está errado).
Observe que você pode escolher usar ou não parâmetros. Se não usar, fica uma lista de botões. Se usar o parâmetro A, aparecem letras, se usar o parâmetro 1, números.
E é possível fazer listas em multi níveis, se necessário.
- Código: Selecionar todos
[list]
[*]Item 1
[list]
[*]Item 1.1
[*]Item 1.2
[*]Item 1.3
[/list]
[*]Item 2
[*]Item 3
[/list]
O que daria:
- Item 1
- Item 1.1
- Item 1.2
- Item 1.3
- Item 1.1
- Item 2
- Item 3
Há como centralizar itens na tela, é bem simples de fazer. Use o código a seguir:
- Código: Selecionar todos
[center]Elemento a ser centralizado na tela[/center]
Isso produz
Elemento a ser centralizado na tela
Essa tag pode ser usada com imagens também.
E pra finalizar, uma tag que eu utilizei em toda extensão do guia. Essa tag é usada para que tudo que seja escrito dentro dela seja considerado apenas como texto, ou seja, dentro dela, nenhuma outra tag funciona. Dificilmente alguém precisará usar esta tag, mas de qualquer forma, eis como usá-la:
- Código: Selecionar todos
[code]Elementos a serem considerados como texto puro[/code]
Estamos constantemente trabalhando no fórum, e novas tags podem ser instaladas. Se este for o caso, este tópico será atualizado para explicar como cada uma funciona.
