Dominando Tags, um tutorial.

Comunique-se direto com quem faz o fórum funcionar! Deixe aqui sua opinião, dúvida, crítica ou sugestão.

Dominando Tags, um tutorial.

Mensagempor louc0 em 26 Ago 2007, 14:50

Tags 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:

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

Imagem

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

Imagem

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:

  1. Item 1
  2. Item 2
  3. Item 3

  1. Item 1
  2. Item 2
  3. 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 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.
Avatar do usuário
louc0
Moderador
 
Mensagens: 2279
Registrado em: 19 Ago 2007, 23:08
Localização: Sapucaia do Sul - RS
Twitter: @louc0

Dominando Tags, um tutorial.

Mensagempor Vinicius em 26 Ago 2007, 15:21

Excelente guia, louc0. Parabéns, vai ajudar muita gente :shades:
:frenzied:
Avatar do usuário
Vinicius
 
Mensagens: 701
Registrado em: 25 Ago 2007, 00:11
Localização: Porto Alegre, Rio Grande do Sul

Dominando Tags, um tutorial.

Mensagempor nelioo em 26 Ago 2007, 19:22

Muito bom Tutorial, louc0.
Tá de parabéns mesmo, vai ajudar muita gente.

Eu nem sabia isso direito, aprendi principalmente o negócio das listas.

Falou!
Imagem

'would you know my name. if I saw you in heaven. would it be the same...'

Imagem
Avatar do usuário
nelioo
 
Mensagens: 619
Registrado em: 25 Ago 2007, 09:54
Localização: Minas Gerais

Dominando Tags, um tutorial.

Mensagempor DracoDruida em 26 Ago 2007, 20:16

Parabéns, realmente tá muito legal. Eu não sabia fazer lista, valeu!
Avatar do usuário
DracoDruida
 
Mensagens: 1677
Registrado em: 18 Ago 2007, 23:41

Dominando Tags, um tutorial.

Mensagempor Cebolituz em 26 Ago 2007, 20:51

Excelente Louc0!

Poderia adicionar como se faz para colocar um hiperlink via fórum também!
Imagem
Avatar do usuário
Cebolituz
 
Mensagens: 4365
Registrado em: 25 Ago 2007, 12:45
Localização: Guarapuava - PR

Dominando Tags, um tutorial.

Mensagempor louc0 em 26 Ago 2007, 21:00

Cebolituz escreveu:Excelente Louc0!

Poderia adicionar como se faz para colocar um hiperlink via fórum também!



Como assim?

Pra fazer um link direto é só colar o endereço direto na postagem, sem tags.

Por exemplo:

http://www.spellrpg.com.br/news.php
Avatar do usuário
louc0
Moderador
 
Mensagens: 2279
Registrado em: 19 Ago 2007, 23:08
Localização: Sapucaia do Sul - RS
Twitter: @louc0

Dominando Tags, um tutorial.

Mensagempor Cebolituz em 26 Ago 2007, 21:07

Ah não, eu não tinha visto esse passo!



Esquece o que eu disse no post anterior.
Imagem
Avatar do usuário
Cebolituz
 
Mensagens: 4365
Registrado em: 25 Ago 2007, 12:45
Localização: Guarapuava - PR

Dominando Tags, um tutorial.

Mensagempor SCCSakura em 06 Jun 2010, 10:19

Criar tabelas na Spell é mais fácil do que parece (tá, eu sei que é mentira, então vou tentar facilitar)

Primeiro vou passar o significado de cada código:

Tamanho de comprimento de tabela

Código: Selecionar todos
[table=400][/table]


Criar as linhas

Código: Selecionar todos
[tr][/tr]

Deve ser usado no início e fim de cada Linha

Criar as células

Código: Selecionar todos
[td][/td]

Deve ser usado no ínicio e fim de cada coluna

Colocar cor de fundo nas celulas

Código: Selecionar todos
[tdc=#000000][/tdc]

No caso <tdc> ocupa o lugar de <td>, o esquema de cor deve ser seguido no padrão do fórum

Mesclar células Vertical

Código: Selecionar todos
[tdr=2][/tdr]

Se usado no lugar de <td> será criado uma celula de N linhas. <tdr=N>

Mesclar células horizontal

Código: Selecionar todos
[tdk=2][/tdk]

Caso não for utilizado a tabela apresentará erro (ERRO 1)

Mesclar células verticais com cor de fundo

Código: Selecionar todos
[thr=2x#ffffff][/thr]

Usado no lugar de <tdr> permite que seja colocado cor se devidamente separado por um x <thr=Nx#000000>

Mesclar células horizontais com cor de fundo

Código: Selecionar todos
[thk=2x#ffffff][/thk]

Usado no lugar de <thk> permite que seja colocado cor se devidamente separado por um x <thk=Nx#000000>

----------------------------------------
----------------------------------------

A partir daí é só utilizar de muita imaginação:

Exemplo:
Código: Selecionar todos
[table=400]
[tr][thk=6x#0080FF][color=#FFFFFF]POKÉMONS CAPTURÁVEIS POR SURF[/color][/thk][/tr]
[tr][tdr=2]Tentacool[/tdr][td][color=#0000FF]Macho[/color][/td][td]Água[/td][td]Veneno[/td][td]Comum[/td][td]12.5%[/td][/tr]
[tr][td][color=#FF0000]Fêmea[/color][/td][td]Água[/td][td]Veneno[/td][td]Comum[/td][td]12.5%[/td][/tr]
[tr][tdr=2]Tentacruel[/tdr][td][color=#0000FF]Macho[/color][/td][td]Água[/td][td]Veneno[/td][td]Raro[/td][td]3%[/td][/tr]
[tr][td][color=#FF0000]Fêmea[/color][/td][td]Água[/td][td]Veneno[/td][td]Raro[/td][td]3%[/td][/tr]
[/table]


POKÉMONS CAPTURÁVEIS POR SURF
TentacoolMachoÁguaVenenoComum12.5%
FêmeaÁguaVenenoComum12.5%
TentacruelMachoÁguaVenenoRaro3%
FêmeaÁguaVenenoRaro3%


-----------------------------
-----------------------------

Pórem existem erros que DEVEM ser evitados:

Não mesclar células com os códigos <tdr> e <tdk>:

Código: Selecionar todos
[table=400]
[tr][td]Teste 1[/td][td]Teste 1[/td][/tr]
[tr][td]ERRO!!![/td][/tr]
[/table]


Teste 1Teste 1
ERRO!!!


Código: Selecionar todos
[table=400]
[tr][td]Teste 1[/td][td]Teste 1[/td][/tr]
[tr][tdk=2]Corrigido![/tdk][/tr]
[/table]


Teste 1Teste 1
Corrigido!


Também pode ser editado para mais colunas:

Código: Selecionar todos
[table=400]
[tr][tdr=2]Célula 1[/tdr][td]Célula 2[/td][td]Célula 3[/td][tdr=3]Célula 4[/tdr][/tr]
[tr][tdr=2]Célula 5[/tdr][td]Célula 6[/td][/tr]
[tr][td]Célula 7[/td][td]Célula 8[/td][/tr]
[tr][td]Célula 9[/td][tdk=3][center]Célula 10[/center][/tdk][/tr]
[/table]


Célula 1Célula 2Célula 3Célula 4
Célula 5Célula 6
Célula 7Célula 8
Célula 9
Célula 10


---------------------------
---------------------------

Por último e não menos importante, delete TODAS AS QUEBRAS DE LINHA, aquele onde você termina um <tag>, bate um enter para visualizar mais fácil, e assim vai...
O código é lido, pórem ele nega completamente os espaços e a menos que você queira um espaço sem limites no seu post, é bom evitar eles digitando algo assim:

Código: Selecionar todos
[table=400][tr][tdr=2]Célula 1[/tdr][td]Célula 2[/td][td]Célula 3[/td][tdr=3]Célula 4[/tdr][/tr][tr][tdr=2]Célula 5[/tdr][td]Célula 6[/td][/tr][tr][td]Célula 7[/td][td]Célula 8[/td][/tr][tr][td]Célula 9[/td][tdk=3][center]Célula 10[/center][/tdk][/tr][/table]


Isso é apenas questão estética, qualquer dúvida é só falar e eu volto aqui para ajudar!
Imagem
Avatar do usuário
SCCSakura
 
Mensagens: 2055
Registrado em: 11 Ago 2009, 20:02

Dominando Tags, um tutorial.

Mensagempor Eltor Macnol em 06 Jun 2010, 10:45

Ótima iniciativa, cara. Obrigado!
ImagemImagem Gmail/gtalk/MSN: gilnei.nh ahoba gmail.com
Imagem@Macnol ImagemFacebook ImagemGoogle Reader
Imagem
Avatar do usuário
Eltor Macnol
Administrador
 
Mensagens: 6691
Registrado em: 17 Ago 2007, 17:42
Localização: Novo Hamburgo - RS
Twitter: http://twitter.com/Macnol

Dominando Tags, um tutorial.

Mensagempor oculto em 27 Jul 2010, 21:50

Cara... que !!! Quer dizer que a ficha de monstro da 4e ficaria assim aqui no fórum:

Bullywug MuckerLevel 1 Brute
Medium Natural Humanoid (Aquatic)XP 100
Initiative +2
Senses Perception 0
Rancid Air aura 2; each enemy that spends a healing surge within the aura is weakened until the end of its next turn.
HP 34; Bloodied 17
AC 12; Fortitude 12; Reflex 12; Will 10
Speed 6 , Swim 4
Spear (standard; at-will) • Weapon
+4 vs AC; 1d8 + 3 damage
Bullywug Rush (standard; usable only in place of a melee basic attack when charging; recharge 5)
+5 vs Fortitude; 2d6 + 4 damage, and the target is knocked prone. Miss: The bullywug mucker takes 3 damage and is knocked prone
Bully
A bullywug mucker’s attack deals 1d6 extra damage against prone targets.
Nature's Release • Healing
Any attacker who scores a critical hit against a bullywug mucker regains 3 hit points.
Alignment Chaotic Evil Languages Primordial
Skills Athletics +8
Str 16 (+3) Dex 14 (+2) Wis 10 (+0)
Con 14 (+2) Int 6 (–2) Cha 8 (–1)
Equipment Leather Armor, Spear

:haha: :haha: :haha:

Nem consigo calcular a quantidade de awesomeness points que a Sakura conseguiu com esse tutorial. :mrgreen:
SPOILER: EXIBIR
E eu levei quase duas horas pra fazer isso...

Editado: Em breve bumparei o tópico de monstros da 4e :haha:
Imagem
Avatar do usuário
oculto
Moderador / Co-ordenador da seção de RPG Online
 
Mensagens: 1521
Registrado em: 26 Ago 2007, 06:59
Localização: Campos / RJ
Twitter: @jca_godoy

Dominando Tags, um tutorial.

Mensagempor _Virtual_Adept_ em 28 Jul 2010, 00:20

Oculto... você tem problemas, cara. XD
Adepto do Heroísmo, blog sobre Mutantes & Malfeitores.
Avatar do usuário
_Virtual_Adept_
Webmaster
 
Mensagens: 6879
Registrado em: 25 Ago 2007, 14:31
Localização: Manaus
Twitter: http://twitter.com/Denommus

Dominando Tags, um tutorial.

Mensagempor oculto em 28 Jul 2010, 06:57

Exaltação por causa de uma frustração vencida. Vou voltar ao modo normal agora. XD
Imagem
Avatar do usuário
oculto
Moderador / Co-ordenador da seção de RPG Online
 
Mensagens: 1521
Registrado em: 26 Ago 2007, 06:59
Localização: Campos / RJ
Twitter: @jca_godoy

Dominando Tags, um tutorial.

Mensagempor Allefcapt em 28 Jul 2010, 09:56

Olá a todos,

Vocês realmente estão ficando bons.
SENSACIONAL.


Ganhou uma camisa SPELLIANA.

Abraços,
"É o seu navio que faz o porto.
Lance ferros com sabedoria"

Diários do Capitão Allef: http://www.fotolog.net/allefcapt
Aventura: http://www.alqadim.blogger.com.br/index.html

"Todo o homem é culpado do bem que não fez." Voltaire
Avatar do usuário
Allefcapt
 
Mensagens: 2629
Registrado em: 20 Ago 2007, 15:59
Localização: Porto de origem: RJ

Re: Dominando Tags, um tutorial.

Mensagempor SCCSakura em 25 Nov 2010, 20:29

Ainda não recebi minha camisa XD
Imagem
Avatar do usuário
SCCSakura
 
Mensagens: 2055
Registrado em: 11 Ago 2009, 20:02

Re: Dominando Tags, um tutorial.

Mensagempor louc0 em 25 Nov 2010, 20:44

Bem vindo ao time!
Avatar do usuário
louc0
Moderador
 
Mensagens: 2279
Registrado em: 19 Ago 2007, 23:08
Localização: Sapucaia do Sul - RS
Twitter: @louc0

Próximo

Voltar para Linha Direta

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado e 1 visitante

cron