Usuário:Leone Melo/Testes/Dicas

Leone Melo/Testes/Dicas é uma página para ser usada como referência para dicas de edição no código-fonte.

Formatação de texto[editar | editar código-fonte]

O texto visualizado pode ser mudado de diversas formas, podemos colocá-lo em itálico, em negrito, sublinhado, riscado, podemos mudar tanto a cor da fonte quanto a do fundo, podemos aumentar ou diminuir a fonte, podemos adicionar hiperlinks, entre outras coisas.

Formatação básica[editar | editar código-fonte]

Nós podemos colocar um texto em itálico colocando-o entre pares de apóstrofos. Já um texto em negrito pode ser obtido inserindo o texto entre uma trinca de apóstrofos. Desta forma, para formatar um texto em negrito e itálico ao mesmo tempo, temos que colocar o texto entre cinco apóstrofos (dois do itálico e três do negrito).

Também podemos fazer uma ligação interna (interlink), isto é, uma ligação para outro verbete da Wikipédia lusófona, colocando a palavra entre pares de colchetes. Se existir uma página com o nome contido entre os colchetes, vai aparecer um link em azul. Já se não existir um artigo com esse nome, um link vermelho é mostrado.

Já uma ligação externa (hiperlink) faz uma ligação para outro website. Se você simplesmente escrever a URL do website, um link clicável aparecerá. No entanto, o correto para ser feito em verbetes é colocar o endereço do website, dar um espaço, e colocar o texto que você quer que apareça no lugar da URL, com isso tudo contido entre colchetes.

Formatações básicas
Descrição	O que digitar	Resultado na tela
Texto em itálico	`''macarronada italiana''`	macarronada italiana
Texto em negrito	`'''vuvuzela sul-africana'''`	vuvuzela sul-africana
Texto em itálico e em negrito	`'''''waka waka'''''`	waka waka
Ligação interna	`[[Copa do Mundo FIFA]]`	Copa do Mundo FIFA
Ligação interna	`[[Zé das Couves]]`	Zé das Couves
Ligação externa	`https://commons.wikimedia.org`	https://commons.wikimedia.org
Ligação externa	`[https://commons.wikimedia.org Commons]`	Commons

Tags[editar | editar código-fonte]

As tags são usadas para informar ao navegador a estrutura do site. Elas colocadas entre chevrons (símbolos de "menor que" e "maior que"). Há dois tipos de tags: as precisam de fechamento (exemplo: <div> </div>) e as que não precisam (exemplo: <br>).^[1]

Atributos[editar | editar código-fonte]

Os atributos são usados para personalizar as tags, modificando sua estrutura ou funcionalidade.^[1] Como exemplos de atributos, podemos citar class, id, lang, title e style.

Atributo id[editar | editar código-fonte]

Esse atributo fornece uma identificação única a um elemento HTML, ou seja, esse elemento não conter mais de um id. Embora seja possível, ele não deve ser reutilizado. O nome dado ao atributo id não deve conter espaços.

Atributo class[editar | editar código-fonte]

É um atributo que permite especificar uma ou mais classes a um elemento HTML. Cada classe tem uma determinada função, podem ser usadas em conjunto e reutilizadas.

Atributo style[editar | editar código-fonte]

O style é um atributo usado para adicionar um estilo a um elemento HTML, usando elementos CSS dentro da tag. Pode ser usado dentro de diversas tags, como <span> e <div>, e em tabelas.

Título de seções[editar | editar código-fonte]

As páginas são organizadas em seções, que por sua vez possuem títulos, que também podem ser chamados de cabeçalhos. Eles servem para organizar o conteúdo e facilitar a leitura, além de otimizar os mecanismos de busca. Os títulos são separados em níveis: nível 1, nível 2, nível 3, nível 4, nível 5 e nível 6. O título de nível 1 é feito colocando o nome do título entre um sinal de igual de cada lado. Já o nível 2 é feito com dois sinais de igual em cada lado, e assim por diante.

Vamos supor que estamos escrevendo um verbete sobre um ator. Um título de nível 2 poderia ter o nome de "Carreira", "Vida pessoal" e "Morte". O título de nível 3 seria um subtítulo do título de nível 2. Assim, possíveis títulos de nível 3 para "Carreira" poderiam ser "Televisão", "Cinema" e "Teatro", ou seja, áreas que o ator trabalhou durante a sua carreira. Já o nível 4 é um subtítulo de algum título de nível 3, isto é, algo ainda mais específico. Algumas possibilidades para títulos de nível 4 para a seção "Televisão" poderiam ser as emissoras de TV onde o ator trabalhou, como TV Globo, SBT e Record.

Nota: Embora funcione, o título de nível 1 não deve ser usado, pois o nome das páginas está no nível 1. Logo, o nível mais alto que deve ser usado é o nível 2.

Descrição	O que digitar	Equivalente em HTML	Resultado na tela
Níveis dos títulos	= Nível 1 =	<h1> Nível 1 </h1>	Nível 1 [ editar \| editar código-fonte ]
	== Nível 2 ==	<h2> Nível 2 </h2>	Nível 2 [ editar \| editar código-fonte ]
	=== Nível 3 ===	<h3> Nível 3 </h3>	Nível 3 [ editar \| editar código-fonte ]
	==== Nível 4 ====	<h4> Nível 4 </h4>	Nível 4 [ editar \| editar código-fonte ]
	===== Nível 5 =====	<h5> Nível 5 </h5>	Nível 5 [ editar \| editar código-fonte ]
	====== Nível 6 ======	<h6> Nível 6 </h6>	Nível 6 [ editar \| editar código-fonte ]

Ligações para seções[editar | editar código-fonte]

Toda seção possui um atributo id que contém o título da seção em seu código HTML. Isso permite que façamos ligações internas diretamente para uma seção específica de uma página. O espaço entre as palavras é substituído por um subtraço, também conhecido como underline (_).

O código HTML gerado no início desta seção, por exemplo, é:

<span class="mw-headline" id="Ligações_paras_seções">Ligações para seções</span>

Por exemplo, uma ligação de outra página para esta seção seria [[Usuário:Leone Melo/Testes/Dicas#Ligações para seções]]. Note que não precisamos colocar o subtraço entre as palavras. Contudo, se colocarmos vai funcionar do mesmo modo.

Uma ligação de uma página qualquer na Wikipédia para um verbete é feita colocando o nome do artigo seguido de uma cerquilha, também conhecida como hashtag (#), e o título da seção. Não importa se o título é de nível 2, 3 ou menor, sempre usamos apenas uma cerquilha.

	O que digitamos	Resultado na tela
Ligação de outra página	[[Brasil#Independência e Império]]	Brasil#Independência e Império
Ligação na mesma página	[[#Tamanho da fonte]]	#Tamanho da fonte

Listas[editar | editar código-fonte]

A Wikipédia possui uma codificação própria para três tipos de listas: lista não ordenada (*), lista ordenada por números (#) e lista por definição (; e :). Elas facilitam a criação de listas em relação ao que é feito em HTML. É interesssante notar que a codificação HTML funciona na Wikipédia, mas deve ser evitada por ser mais complexa.

Para fazermos um item, é só colocarmos o símbolo correspondente ao tipo de lista antes do conteúdo que nós queiramos que seja um item. Para fazer um subitem, é colocar dois símbolos desses. Para fazer um subsubitem, são necessários três desses símbolos, e assim por diante.

Tipo de lista	O que digitamos	Equivalente em HTML	Resultado na tela
Lista não ordenada	Rio de Janeiro Minas Gerais Zona da Mata Triângulo Mineiro **Uberlândia Espírito Santo	<ul> <li>Rio de Janeiro</li> <li>Minas Gerais</li> <ul> <li>Zona da Mata</li> <li>Triângulo Mineiro</li> <ul> <li>Uberlândia</li> </ul> </ul> <li>Espírito Santo</li> </ul>	Rio de Janeiro Minas Gerais Zona da Mata Triângulo Mineiro Uberlândia Espírito Santo
Lista ordenada por números	#Argentina #Brasil ##Região Sul ##Região Norte ###Pará #Uruguai	<ol> <li>Argentina</li> <li>Brasil</li> <ol> <li>Região Sul</li> <li>Região Norte</li> <ol> <li>Pará</li> </ol> </ol> <li>Item 3</li> </ol>	Argentina Brasil Região Sul Região Norte Pará Uruguai
Lista combinada	Cinderela Branca de Neve #Madrasta #Sete anões #Mestre #Zangado *Bela Adormecida	<ul> <li>Cinderela</li> <li>Branca de Neve</li> <ol> <li>Madrasta</li> <li>Sete anões</li> <ul> <li>Mestre</li> <li>Zangado</li> </ul> </ol> <li>Bela Adormecida</li> </ul>	Cinderela Branca de Neve Madrasta Sete anões Mestre Zangado Bela Adormecida
Lista por definição	;Bairros do Rio de Janeiro :Copacabana :Jacarepaguá ::Tanque ::Curicica :Barros Filho	<dl> <dt>Bairros do Rio de Janeiro</dt> <dd>Copacabana</dd> <dd>Jacarepaguá <dl> <dd>Tanque</dd> <dd>Curicica</dd> </dl> </dd> <dd>Barros Filho</dd> </dl>	Bairros do Rio de Janeiro Copacabana Jacarepaguá Tanque Curicica Barros Filho

Há outros tipos de listas que não possuem codificação própria na Wikipédia, mas que é possível fazê-las usando HTML. O atributo type é usado para determinar o tipo de lista. Também podemos usar o atributo start para estabelecer a partir de qual número ou letra começa a contagem em listas ordenadas.

Tipo de lista	O que digitamos	Resultado na tela
Lista ordenada por algarismos romanos minúsculos	<ol type="i"> <li>Espadas ♠</li> <li>Paus ♣</li> <li>Copas ♥</li> <li>Ouros ♦</li> </ol>	Espadas ♠ Paus ♣ Copas ♥ Ouros ♦
Lista ordenada por algarismos romanos maiúsculos	<ol type="I" start="2"> <li>Angola</li> <li>Guiné-Bissau</li> <li>Moçambique</li> <li>Portugal</li> </ol>	Angola Guiné-Bissau Moçambique Portugal
Lista ordenada por letras minúsculas	<ol type="a" start="4"> <li>TIM</li> <li>Claro</li> <li>Vivo</li> <li>Oi</li> </ol>	TIM Claro Vivo Oi
Lista ordenada por letras maiúsculas	<ol type="A" start="9"> <li>Bíceps</li> <li>Tríceps</li> <li>Abdutor</li> <li>Adutor</li> </ol>	Bíceps Tríceps Abdutor Adutor

Tag <nowiki>[editar | editar código-fonte]

Permite que se insira um código wiki sem que a formatação seja aplicada. Para mostrar na tela algo sem a formatação, temos que colocá-lo entre as tags de abertura e fechamento nowiki.

	O que digitar no código-fonte	O que vemos na tela
Sem nowiki	'''Juarez''' gosta de jogar [[futebol]].	Juarez gosta de jogar futebol.
Com nowiki	<nowiki>'''Juarez'''</nowiki> gosta de jogar <nowiki>[[futebol]]</nowiki>.	'''Juarez''' gosta de jogar [[futebol]].

Tag <code>[editar | editar código-fonte]

Deixa o texto monoespaçado e o ressalta com um fundo cinza. Ela não impede que um código wiki formate o texto. Essa tag atua em linha (inline).

	O que digitamos no código-fonte	O que vemos na tela
Sem code	O Palmeiras será Campeão Mundial.	O Palmeiras será Campeão Mundial
Com code	<code>O Palmeiras será Campeão Mundial.</code>	`O Palmeiras será Campeão Mundial.`
code + código wiki	<code>O '''[[Palmeiras]]''' será <u>Campeão</u> <s>Mundial</s>.</code>	`O Palmeiras será Campeão Mundial.`

Tag <pre>[editar | editar código-fonte]

Assim como a tag <code>, a tag <pre> deixa o texto monoespaçado e o ressalta com um fundo cinza. No entanto, ao contrário de <code>, ela impede que um código wiki formate o texto, atua em bloco (block) e preserva as quebras de linhas. Se uma linha começa com um espaço, então esse texto vai parecer como se tivesse entre as tags <pre>, com a diferença que a codificação wiki vai funcionar.

	O que digitamos no código-fonte	O que vemos na tela
Sem nenhuma tag	Vamos para boate dançar [[Zumba]]	Vamos para boate dançar Zumba
Com code	<code> Vamos para boate dançar [[Zumba]]</code>	`Vamos para boate` `dançar Zumba`
Com nowiki	<nowiki> Vamos para boate dançar [[Zumba]]</nowiki>	Vamos para boate dançar [[Zumba]]
Com pre	<pre> Vamos para boate dançar [[Zumba]]</pre>	Vamos para boate dançar [[Zumba]]

Tag <span>[editar | editar código-fonte]

É um contêiner genérico em linha para conteúdo fraseado (inline) que não possui peso semântico. Ele não faz nada sozinho, mas pode ser usado para agrupar elementos para fins de estilo com o auxílio de atributos, como class, id e style. É uma tag que precisa de fechamento, ou seja, <span> </span>.

<span class="nome">texto</span>

<span style="propriedade:valor;">texto</span>

Classe plainlinks[editar | editar código-fonte]

Essa classe faz com que a setinha que aparece ao lado de ligações externas suma, ficando parecida com uma ligação interna.

	O que digitamos no código-fonte	O que vemos na tela
Sem a classe plainlinks	Vou acessar o [https://pt.wikisource.org/ Wikisource].	Vou acessar o Wikisource.
Com a classe plainlinks	Vou acessar o <span class="plainlinks">[https://pt.wikisource.org/ Wikisource]</span>.	Vou acessar o Wikisource.

Impedir quebra de linha[editar | editar código-fonte]

Podemos forçar que todo o texto entre as tags de span fique na mesma linha usando propriedade white-space com o valor nowrap. Os outros valores de white-space não são muito úteis na Wikipédia, por isso não vou abordá-los. Isso deve ser usado em trechos pequenos, normalmente para grandezas que são compostas por um número, seguido de um espaço e da unidade. A quebra de linha só ocorre se a forçarmos usando a tag <br>.

<span style="white-space:nowrap">texto na mesma linha</span>

Sem formatação	Com white-space:nowrap
Eu defendo a democratização do conhecimento. Isso é fundamental para o estabelecimento de uma internet livre. Vamos juntos nessa batalha?	Eu defendo a democratização do conhecimento. Isso é fundamental para o estabelecimento de uma internet livre. Vamos juntos nessa batalha?

Cores[editar | editar código-fonte]

No texto, para mudar só as letras com span, devemos usar a propriedade color. Para mudar só o fundo, usamos a propriedade background. Já para alterar a cor da letra e do fundo, devemos separar os conjuntos de propriedade e valor por um ponto e vírgula (;). A ordem no código é irrelavente, ou seja, "color:valor; background:valor" é equivalente a "background:valor; color:valor;". As cores podem ser expressas pelo seu nome em inglês, em hexadecimal, em RGB ou em HSL.

O que digitar no código-fonte

O que vemos na tela

A <span style="color:red">cor vermelha</span> é muito bonita.

A cor vermelha é muito bonita.

A <span style="background:yellow">cor amarela</span> é muito legal.

A cor amarela é muito legal.

Eu tenho um casaco <span style="color:white; background:black;">preto e branco</span> caro.

Eu tenho um casaco preto e branco caro.

Lista de tags[editar | editar código-fonte]

O atributo style possui várias propriedades que nos permitem obter o mesmo resultado de diversas tags.

Estilização com *tags*
Nome	Conteúdo do código-fonte		Mostrado na tela
Nome	Tag simples	Tag span + atributo style	Mostrado na tela
Negrito	<strong>Avenida Brasil</strong>	<span style="font-weight:bolder;">Avenida Brasil</span>	Avenida Brasil
Negrito	<b>Avenida Brasil</b>	<span style="font-weight:bolder;">Avenida Brasil</span>	Avenida Brasil
Itálico	<em>Polícia Civil</em>	<span style="font-style:italic;">Polícia Civil</span>	Polícia Civil
Itálico	<i>Polícia Civil</i>	<span style="font-style:italic;">Polícia Civil</span>	Polícia Civil
Sublinhado	<u>Alfabetização</u>	<span style="text-decoration: underline;">Alfabetização</span>	Alfabetização
Sublinhado	<ins>Alfabetização</ins>		Alfabetização
Sobrelinhado	Não possui	<span style="text-decoration:overline;">Futebol</span>	Futebol
Riscado	<s>Desciclopédia</s>	<span style="text-decoration:line-through;">Desciclopédia</span>	~~Desciclopédia~~
Riscado	<del>Desciclopédia</del>		~~Desciclopédia~~
Monoespaçado	<kbd>Interessante</kbd>	<span style="font-family:monospace;">Interessante</span>	`Interessante`
Monoespaçado	<tt>Interessante</tt>	<span style="font-family:monospace;">Interessante</span>	`Interessante`
Subscrito	<sub>Frodo</sub>	<span style="vertical-align:sub; font-size:80%;">Frodo</span>	_Frodo
Sobrescrito	<sup>Golias</sup>	<span style="vertical-align:super; font-size:80%;">Golias</span>	^Golias
Pequeno	<small>Computador</small>	<span style="font-size:smaller;">Computador</span>	Computador
Grande	<big>Cadeira</big>	<span style="font-size:larger;">Cadeira</span>	Cadeira
Destaque	<mark>Atenção</mark>	<span style="background:mark;">Atenção</span>	Atenção

Tag <div>[editar | editar código-fonte]

A <div> é uma tag usada para separar os conteúdos do código HTML em divisões de espaço/conjunto, sem peso semântico. A diferença entre <div> e <span> é que a <div> é um elemento de nível de bloco enquanto <span> é um elemento em linha.

<div style="propriedade:valor;">texto</div>

Cor da fonte e de fundo[editar | editar código-fonte]

Como a tag <div> é um elemento de bloco, ela atua ao longo de toda largura da tela por padrão e por uma certa altura. Isso pode ser evidenciado se a gente mudar a cor de fundo. As cores atribuídas como valores podem ser expressas usando o nome em inglês das cores, em hexadecimal, em RGB (ou RGBA) e em HSL (ou HSLA).

O que digitar no código-fonte	O que vemos na tela
<div style="color:red; background:yellow;"> Vendo carro velho. </div>	Vendo carro velho.
<div style="color:#00f; background:#0f0;"> Vendo carro velho. </div>	Vendo carro velho.

Preenchimento[editar | editar código-fonte]

O preenchimento, mais conhecido como padding, é a distância entre a borda e o conteúdo do elemento. Ele agrupa quatro propriedades (padding-top, padding-right, padding-bottom e padding-left) em uma só.

Quando apenas um valor é passado, ele vai ser aplicado nos quatros lados.
Já quando dois valores são colocados, o primeiro é aplicado às bordas verticais (superior e inferior) e o segundo às bordas horizontais (esquerda e direita).
Agora quando colocamos três valores, o primeiro valor diz respeito à borda superior, o segundo é aplicado às bordas da esquerda e da direita. O terceiro é valor é atribuído à borda inferior.
Por fim, quando há quatro valores, o primeiro valor é para borda superior, o segundo para a borda da direita, o terceiro para borda inferior e o último valor está relacionado à borda da esquerda. Essa atribuição se dá no sentido horário (↑→↓←).^[2]

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; padding:1em;">
   Promoção: 4 por 1 real.
</div>
<div style="background:lime; padding:0 2em;">
   Fui comprar pão na padaria.
</div>

Promoção: 4 por 1 real.

Fui comprar pão na padaria.

<div style="background:yellow; padding-top:2em;">
   Compro carro novo.
</div>
<div style="background:lime; padding:1em 2em 2em 3em;">
   Cuidado com o pirata.
</div>

Compro carro novo.

Cuidado com o pirata.

Margem[editar | editar código-fonte]

A margem dos quatro cantos é definida pela propriedade margin. Ela une as propriedades de margens individuais (margin-top, margin-right, margin-bottom e margin-left) em apenas uma propriedade, sendo possível atribuir de um até quatro valores. As regras de atribução de margin são as mesmas de padding, de modo que segue um sentido horário quando há quatro valores (↑→↓←). Podemos atribuir como valores uma medida de comprimento (positiva ou negativa), de porcentagem ou deixar que o navegador selecione a mais adequada (auto), normalmente usada para centralizar o elemento.^[3]

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; margin:1em;">
   Alugo moto seminova.
</div>
<div style="background:lime; margin:1em 2em;">
   Ouço música no rádio.
</div>

Alugo moto seminova.

Ouço música no rádio.

<div style="background:yellow; margin-right:3em;">
   Eu tenho um roteador.
</div>
<div style="background:lime; margin:0 -0.5em auto 3em;">
   O Maracanã está lotado.
</div>

Eu tenho um roteador.

O Maracanã está lotado.

Borda[editar | editar código-fonte]

Uma borda pode ser colocada e estilizada nos quatros cantos do elemento usando a propriedade border. Podemos definir, em qualquer ordem, o estilo da borda, a espessura e a cor. A espessura e a cor são opcionais, mas o estilo da borda é obrigatório. Caso queiramos estilizar um canto específico, podemos usar as propriedades border-top (borda superior), border-right (borda à direita), border-bottom (borda inferior) e border-left (borda à esquerda).

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; border:brown double 3px;">
   Danço na festa junina.
</div>
<div style="background:lime; margin-top:2em; border:inset;">
   Canto na despedida de solteiro.
</div>

Danço na festa junina.

Canto na despedida de solteiro.

<div style="background:yellow; padding:2em; border-top:4px dotted tomato; border-bottom:3px dashed #32cd32; border-left: 5px ridge pink; border-right:solid 2px;">
   O sonho não acabou.
</div>

O sonho não acabou.

Alinhamento de texto[editar | editar código-fonte]

A propriedade text-align é a responsável pelo alinhamento do texto. Há 8 valores possíveis, mas na Wikipedia é preciso saber apenas três valores: left (esquerda), center (centro) e right (direita). O alinhamento à esquerda é o padrão (default), só sendo necessário usá-lo quando seu elemento pai (a div que contém a div que estamos querendo formatar) estiver definido com outro alinhamento.

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; text-align:center;">
   Essa pimenta é forte.
</div>
<div style="background:lime; text-align:right;">
   O forró está bacana.
</div>

Essa pimenta é forte.

O elefante venceu o rinoceronte.

<div style="background:yellow; text-align:center;">
   Vou comer um lanchinho esperto.
   <div style="background:lime; text-align:left;">
      O forró está bacana.
   </div>
</div>

Vou comer um lanchinho esperto.

O forró está bacana.

Float[editar | editar código-fonte]

Um texto definido fora de uma div fica acima ou abaixo dessa dessa div. Assim, para que esse texto fica ao lado da div em questão, podemos nos valer da propridade float, que significa algo como "flutuação". É como essa div, que é uma espécie de contêiner, flutuasse acima do conteúdo que queremos que passe ao lado. Se o elemento "flutuando" e o outro sem o float não conseguirem compartilhar a mesma linha, o elemento com float vai para linha de baixo, a não que coloquemos para flutuar para cima.

Usando essa propriedade conseguimos colocar duas divs uma ao lado da outra caso as duas tiverem float para lados diferentes. Se uma das divs não tiver um float, a div com float vai ficar embaixo.

O que digitar no código-fonte

O que vemos na tela

Vamos ao ''show'' do Exaltasamba.
<div style="background:yellow; float:left;">
   Esse bairro é muito perigoso.
</div>

Vamos ao show do Exaltasamba.

Esse bairro é muito perigoso.

Peguei minha moto para dar uma voltinha. Aproveitei e fui ao supermercado comprar iogurte.
<div style="background:yellow; float:right;">
   ele é muito pão duro.
</div> Havia muitas opções e decidi comprar o mais barato, pois eu sou um cara econômico.

Peguei minha moto para dar uma voltinha. Aproveitei e fui ao supermercado comprar iogurte.

ele é muito pão duro.

Havia muitas opções e decidi comprar o mais barato, pois eu sou um cara econômico.

<div style="background:yellow; float:left;">
   Recebi um pacote misterioso...
</div>
<div style="background:lime; float:right;">
   será que é uma bomba ou apenas uma pizza?
</div>

Recebi um pacote misterioso...

será que é uma bomba ou apenas uma pizza?

Altura[editar | editar código-fonte]

A altura do conteúdo de um determinado elemento é determinada pela propriedade height, ou seja, não inclui as bordas, o preenchimento e a margem. Podemos usar uma medida de comprimento ou uma porcentagem da altura do conteúdo do bloco. Um texto colocado em uma determinada div sempre fica na parte de cima por padrão, de modo que o texto não fica no meio quando aumentamos a altura do conteúdo do elemento.

Também podemos nos valer das propriedades min-height e max-height para limitar a altura do elemento do seguinte modo:

Se max-height > height → vale o valor de height.
Se max-height < height → vale o valor de max-height.
Se min-height > height → vale o valor de min-height.
Se min-height < height → vale o valor de height.

Caso o valor sobrescrevendo height quando seu valor ultrapassar os valores definidos ultr

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; height:4em;">
   Eu fiz um truque de mágica.
</div>

Eu fiz um truque de mágica.

<div style="background:yellow; height:6em; max-height:2em; margin-bottom:1em;">
   A altura pode ser limitada.
</div>
<div style="background:lime; height:3em; max-height:9em;">
   A altura não pode ser limitada.
</div>

A altura pode ser limitada.

A altura não pode ser limitada.

Tamanho da fonte[editar | editar código-fonte]

Para configurar o tamanho do texto usamos a propriedade font-size. Os valores usados podem ser em termos de unidades de comprimento absolutas ou relativas.

Unidade absoluta: fornece um valor exato para fonte, não mudando de valor caso o elemento pai possua uma definição diferente. Podem variar a depender do dispositivo. Ex: px, pt, cm, mm, in, pc.
Unidade relativa: fornece um valor que depende de outra definição de comprimento, seja de outro elemento ou de tela. Ex: em, rem, %, ex, ch, vh, vx, vmim, vmax.

Na Wikipédia, as unidades mais usadas são px, em, %. Por padrão, a altura da caixa que um conteúdo de texto pertence (line-height) aumenta ou diminui de acordo com a alteração do tamanho da fonte.

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; font-size:132%;">
   Fonte 32% maior que a padrão.
</div>

Fonte 32% maior que a padrão.

<div style="background:lime; font-size:10px;">
   O elemento pai foi definido a 10px.
   <div style="background:yellow; font-size:2em;">
      2em é o dobro da altura do elemento pai, ou seja, 2em = 20px.
   </div>
</div>

O elemento pai foi definido a 10px.

2em é o dobro da altura do elemento pai, ou seja, 2em = 20px.

Altura da linha[editar | editar código-fonte]

A propriedade line-height é responsável por estabelecer a altura da caixa que um conteúdo de texto pertence. Ao contrário de quando mudamos o valor de height, aqui o texto fica centralizado verticalmente nessa caixa. O padding, margin e border não entram na conta. Assim, se dentro do conteúdo do contêiner tiver duas caixas de 15px de altura, o contêiner vai ter 30px de altura. Se o contêiner tiver um padding-top e um padding-bottom de 10px, acima da caixa de cima vai ter 10px, e abaixo da caixa de baixo vai ter 10px, totalizando 50px para a altura do contêiner. Repare que o padding não é aplicado entre as caixas de texto.

Dentre as opções possíveis, as mais relevantes para o valor a ser passado são:

Um número mais sua unidade (ex: 20px).
Apenas um número, que vai representar o número que será multiplicado pelo tamanho da fonte, ou seja, se o tamanho da fonte for 10px, um line-height:2 vai representar uma caixa de 20px.
Uma porcentagem do tamanho da fonte. Assim, um line-height:50% represente uma caixa com metade do tamanho da fonte.

O que digitar no código-fonte

O que vemos na tela

<div style="background:yellow; line-height:20px; font-size:20px; margin-bottom:2em;">
   O bagulho é doido.
</div>
<div style="background:lime; line-height:50%; font-size:25px;">
   O bagulho é animal.
</div>

O bagulho é doido.

O bagulho é animal.

<div style="background:yellow; line-height:2;">
   Balança o rabinho<br>e faz au<br>faz au au!
</div>

Balança o rabinho
e faz au
faz au au!

<div style="background:yellow; line-height:15px; margin-bottom:2em;">
   A música é a emoção<br>que encanta o coração.
</div>
<div style="background:lime; line-height:15px; padding:10px">
   O macaco velho.<br>O macaco ancião.
</div>

A música é a emoção
que encanta o coração.

O macaco velho.
O macaco ancião.

Tabelas[editar | editar código-fonte]

As tabelas são um arranjo de linhas e colunas que permitem a organização de dados e imagens.

Para mostrarmos conteúdo em colunas diferentes, nós podemos colocar tanto os cabeçalhos e os dados em linhas diferentes (com ! e |) quanto na mesma linha (com !! e ||), que fornecem o mesmo resultado. Para mudarmos a linha, temos que colocar o indicador de linha da tabela (|-), que não necessariamente vai mostrar uma linha.

Visão geral da marcação básica de uma tabela
Elemento	Função	Status	Notas
`{\|`	Inicia uma tabela	Obrigatório	Deve ser colocado na parte de cima.
`\|+`	Legenda da tabela	Opcional	Deve ser colocado entre o início da tabela e a primeira linha da tabela.
`\|-`	Coloca uma linha da tabela	Opcional	Pode ser omitido antes da primeira linha. Todo o conteúdo entre dois em `\|-` fica contido na mesma linha.
`!` ou `!!`	Insere uma célula de cabeçalho	Opcional	Para colocar um cabeçalho por linha, use um símbolo de exclamação (`!`). Para colocar mais cabeçalhos na mesma linha, use dois símbolos de exclamação (`!!`).
`\|` ou `\|\|`	Insere uma célula de dado	Opcional	Para colocar um dado por linha, use uma barra vertical (`\|`). Para colocar mais dados na mesma linha, use duas barras verticais (`\|\|`).
`\|}`	Finaliza uma tabela	Obrigatório	Deve ser colocado por último

Classes[editar | editar código-fonte]

Sem classe[editar | editar código-fonte]

A legenda da tabela é centralizada em desktops e alinhado à esquerda em dispositivos móveis, o cabeçalho é centralizado e seu texto é em negrito, os dados são alinhados à esquerda. A cor das letras é preta e a cor de fundo é branca. Não há nenhuma borda, de modo que as bordas externas que aparecem são meramente ilustrativas.

Forma 1 no código-fonte

{|
|+Legenda
|-
! Animal
! Alimento
|-
| Gato
| Mingau quente
|-
| Cachorro
| Ração do cão
|}

Forma 2 no código-fonte

{|
|+Legenda
|-
! Animal !! Alimento
| Gato || Mingau quente
|-
| Cachorro || Ração do cão
|}

Resultado na tela

Legenda
Animal	Alimento
Gato	Mingau quente
Cachorro	Ração do cão

Classe wikitable[editar | editar código-fonte]

O atributo class é usado para atribuir uma classe para um elemento wiki. Ele deve ser colocado à direita do indicador de início da tabela, seguido de um sinal de igual e do nome da classe escolhida. Todas as classes possuem uma folha de estilo própria, que definem cor, tamanho, posição, bordas, entre outras coisas. A classe escolhida deve ser colocada à direita de {|.

A classe wikitable fornece as seguintes mudanças na tabela: o cabeçalho fica em negrito, o fundo das células de cabeçalho passa a ser cinza, surgem bordas pretas finas em torno das células e o conteúdo das células ficam um pouco mais afastados.

Forma 1 no código-fonte

{| class="wikitable"
|+Rango de pet
|-
! Animal
! Alimento
|-
| Gato
| Mingau quente
|-
| Cachorro
| Ração do cão
|}

Forma 2 no código-fonte

{| class="wikitable"
|+Rango de pet
|-
! Animal !! Alimento
| Gato || Mingau quente
|-
| Cachorro || Ração do cão
|}

Resultado na tela

Legenda
Animal	Alimento
Gato	Mingau quente
Cachorro	Ração do cão

Classe sortable[editar | editar código-fonte]

A classe sortable permite colocar as colunas em ordem alfabética ou em ordem inversa, assim como colocar os números em ordem crescente ou decrescente. As classes podem ser usadas em conjunto, de forma que o uso conjunto entre as classes wikitable e sortable é mais indicado do que o uso da classe sortable sozinha. Para colocarmos duas classes, temos a seguinte estrutura: class="nomeclasse1 nomeclasse2". Repare que elas são separadas apenas por um espaço simples e estão dentro das aspas (pode ser aspas simples ou duplas). Seguindo essa lógica, é possível colocar mais classes.

Setas para cima e para baixo surgem ao lado das colunas. Se você clicar uma vez em um cabeçalho, a tabela vai ficar na ordem alfabética (caso sejam palavras) ou em ordem crescente (caso sejam números) baseada na ordenação dessa coluna, de maneira que a seta para baixo dessa coluna some, só ficando a seta para cima. Se a gente clicar novamente no cabeçalho, vai ficar na ordem inversa, com apenas a seta para baixo aparecendo. Por fim, se clicarmos de novo no cabeçalho, vai voltar a ordem original definida na tabela, com as duas setas aparecendo.

Forma 1 no código-fonte

{| class="wikitable sortable"
|+Ordem
|-
! Palavras
! Números
|-
| Mesa
| 3
|-
| Cadeira
| 1
|-
| Sofá
| 4
|-
| Estante
| 2
|}

Forma 2 no código-fonte

{| class="wikitable sortable"
|+Ordem
|-
! Palavras !! Números
|-
| Mesa || 3
|-
| Cadeira || 1
|-
| Sofá || 4
|-
| Estante || 2
|}

Resultado na tela

Ordem
Palavras	Números
Mesa	3
Cadeira	1
Sofá	4
Estante	2

Classe mw-collapsible[editar | editar código-fonte]

Já a classe mw-collapsible possibilita que o conteúdo da tabela seja ocultado. Pode ser usado em qualquer tipo de tabela, mas normalmente é usado em tabelas grandes. Como as outras classes, pode ser usada sozinha ou em conjunto com outras classes.

No exemplo abaixo, é mostrado um caso em que o marcador de cabeçalho (!) é usado para nomear uma linha. No entanto, se ele for usado na mesma linha dos outros dados (no código-fonte), isto é, ! 1 || 1 || 2 || 3 || 4, a formatação dele será aplicada a todas as células da linha dessa tabela (o que é mostrado na tela). Logo, é necessário colocar os outros dados em outra linha para a formatação de título não seja aplicada a eles. Por sua vez, no código-fonte, os dados podem ser colocados todos na mesma linha, separados por duas barras verticais (||), ou em linha próprias, separados apenas por uma barra vertical (|), que normalmente é colocada no início da linha.

Código-fonte

{| class="wikitable mw-collapsible"
|+Multiplicação
|-
! X !! 1 !! 2 !! 3 !! 4
|-
! 1
| 1 || 2 || 3 || 4
|-
! 2
| 2 || 4 || 6 || 8
|-
! 3
| 3 || 6 || 9 || 12
|-
! 4
| 4 || 8 || 12 || 16
|}

Resultado na tela

Multiplicação
X	1	2	3	4
1	1	2	3	4
2	2	4	6	8
3	3	6	9	12
4	4	8	12	16

Classes mw-collapsible mw-collapsed[editar | editar código-fonte]

A classe mw-collapsible usada em conjunto com mw-collapsed deixa o contéudo da tabela ocultado por padrão, tendo como opção expandir. Em comparação, se colocarmos apenas a classe mw-collapsible, o conteúdo da tabela é mostrado por padrão (expandido), tendo como opção ocultar. Não devemos usar classe mw-collapsed sozinha, pois o conteúdo da tabela não será mostrado.

Código-fonte

{| class="wikitable mw-collapsible mw-collapsed"
|+Multiplicação
|-
! X !! 1 !! 2 !! 3 !! 4
|-
! 1
| 1 || 2 || 3 || 4
|-
! 2
| 2 || 4 || 6 || 8
|-
! 3
| 3 || 6 || 9 || 12
|-
! 4
| 4 || 8 || 12 || 16
|}

Resultado na tela

Multiplicação
X	1	2	3	4
1	1	2	3	4
2	2	4	6	8
3	3	6	9	12
4	4	8	12	16

Atributo style[editar | editar código-fonte]

Esse atributo contém as informações de CSS que se aplicam as tabelas. O atributo style permite alterar a borda, cor do texto, cor de fundo, margem, alinhamento e tamanho do texto do texto, entre outras coisas. Ele possui a seguinte sintaxe: style="propriedade:valor;".

Largura[editar | editar código-fonte]

Por padrão, a largura das células é moldada pelo conteúdo. Como as células de uma mesma coluna apresentam a mesma largura, a célula que precisar ser mais extensa para se moldar ao seu conteúdo, vai definir a largura de todas as células dessa coluna. Assim, colunas diferentes podem ter larguras diferentes por padrão.

Para mudarmos isso, podemos nos valer da propriedade width (largura) do atributo style, de modo que possui a seguinte sintaxe: style="width:valor;". Se nós o colocamos na primeira linha, isto é, à direita do símbolo de início da tabela ({|), esse formatação vai valer para toda a tabela. No entanto, se colocamos ao lado de ! ou |, isso vai ser aplicado na coluna que eles representam. Por questão de organização, o recomendado é colocar ao lado do símbolo de cabeçalho (!). Note que precisamos colocar uma barra vertical (|) entre esse código e o conteúdo da célula. O valor passado é constituído por um número seguido da unidade. As unidades de medida mais usadas para a largura são:

px

O nome px vem de pixel. É uma unidade de medida absoluta que mede um pixel em uma tela de 96 dpi. Como ela é uma medida absoluta, se nós definirmos uma coluna com 50px, o comprimento pelo qual definimos a tabela como um todo não vai importar, a coluna continuará com 50px. Entretanto, como a definição de pixel usada está relacionada a uma tela de 96 dpi, uma tela com outra resolução vai mudar o tamanho definido em px. Se a gente definir um valor em px menor ou igual ao necessário para conter a palavra ou o número mais extenso, não irá mudar em nada.

Código-fonte

{| class="wikitable"
|+ Brasil
|-
! style="width:200px;"| Estado
! style="width:150px;"| Região
|-
| Pará || Norte
|-
| Pernambuco || Nordeste
|}

Resultado na tela

Brasil
Estado	Região
Pará	Norte
Pernambuco	Nordeste

%

Esta unidade é uma medida relativa que está relacionada com proporções. Por padrão, as tabelas tem style="width:100%;", isto é, a tabela irá preencher toda a largura da tela se tiver conteúdo suficiente. Se você diminuir essa porcentagem, o conteúdo de certas células irão para a linha de baixo, mas ainda na mesma célula. Podemos definir uma porcentagem para certas colunas que serão relativas ao tamanho definido para a tabela na primeira linha. Se tabela é definida com 300px, uma coluna definida com 50% terá 150px. Por outro lado, se a tabela for definida como 90%, uma coluna definida com 50% na verdade será 50% de 90%, ou seja, 45%.

Código-fonte

{| class="wikitable" style="width:300px;"
|+ Roupas
|-
! style="width:50%;"| Venda
! style="width:50%;"| Tipo
|-
| Camisa || Vermelha de algodão
|-
| Casaco || Marrom de lã
|}

Resultado na tela

Roupas
Venda	Tipo
Camisa	Vermelha de algodão
Casaco	Marrom de lã

Alinhamento[editar | editar código-fonte]

Para mudarmos o alinhamento dos dados das tabelas, temos que usar a propriedade text-align do atributo style, que possui a seguinte forma: style="text-align:valor;". O valor pode ser left (esquerda), center (centro) ou right (direita).

Se nós colocarmos esse atributo na mesma linha e à direita do símbolo de início da tabela ({|), essa estilização será aplicada a todos os elementos da tabela colocados ao lado de barras verticais (|). A posição relativa em relação ao atributo class não faz diferença, mas normalmente o atributo style é colocado mais à direita. O primeiro elemento de linha (|-) não precisa ser colocado, mas é recomendado para fins de organização. O alinhamento da legenda e das cabeçalhos não são alterados quando colocamos o código no topo da tabela.

Código-fonte

{| class="wikitable" style="width:300px; text-align:right;"
|+ Tipos de elementos
|-
! Elemento !! Forma encontrada
|-
| Água || Líquida
|-
| Sal || Sólido
|}

Resultado na tela

Tipos de elementos
Elemento	Forma encontrada
Água	Líquida
Sal	Sólida

Também podemos mudar o alinhamento dos elementos de apenas uma linha. Para realizarmos isso, devemos colocar o atributo style à direita do marcador de linha (|-), que está imediatamente acima dos dados que representam a linha desejada.

Código-fonte

{| class="wikitable"
|+ Nomes lusófonos
|-
! Nome brasileiro
! Nome português
|-style="text-align:center;"
| Rafael || Manoel
|-
| Leonardo || Joaquim
|}

Resultado na tela

Nomes lusófonos
Nome brasileiro	Nome português
Rafael	Manoel
Leonardo	Joaquim

Como os procedimentos anteriores não alteram nem o alinhamento da legenda nem dos cabeçalhos, para mudá-los temos que colocar o atributo style na mesma linha, um a um. Esse modo também pode mudar o alinhamento de células específicas dos dados normais, isto é, os que ficam ao lado da barra vertical (|).

Código-fonte

{| class="wikitable"
|+ style="text-align:right;" |Bichanos
|-
! style="text-align:left;" |Animal
! style="text-align:left;" |Comportamento
|-
| Mico-leão-dourado || Tímido
|-
| Leão || Feroz e territorialista
|}

Resultado na tela

Bichanos
Animal	Comportamento
Mico-leão-dourado	Tímido
Leão	Feroz e territorialista

Cores[editar | editar código-fonte]

Para mudar a cor do texto, temos que usar a propriedade color. Já para mudar a cor de fundo temos que usar a propriedade background. Se nós quisermos usar mais de uma propriedade, temos que colocar um ponto e vírgula (;) após o primeiro valor. No entanto, se usarmos apenas uma propriedade, o ponto e vírgula é opcional, não mudando em nada no resultado mostrado na tela. O conteúdo do atributo e do texto da célula devem ser colocados na mesma linha e separados por uma barra vertical (|).

Há quatro tipos de valores que podem ser passados às propriedades color e background: o nome das cores (em inglês), a codificação hexadecimal, valores em RGB e valores em HSL.^[4]

Nome da cor

Podemos usar o nome de uma das cores em inglês disponíveis, algumas mais famosas, como Red, Blue, Black, e outras menos famosas como DarkOrchid, Khaki e FloralWhite.^[5] O sistema não diferencia letras minúsculas e maiúsculas.

Hexadecimal

Consiste em seis números após uma cerquilha (#). Os dois primeiros elementos representam a intensidade de vermelho, o dois seguintes representam a intensidade de verde e os dois últimos a intensidade de azul. Assim, o resultado final é a combinação dessas três cores em diferentes intensidades, formando a cor desejada. Os valores variam entre 00 (mais escuro) até FF (mais claro), isto é, do mais escuro para o mais claro, temos [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F]. As letras podem ser colocadas tanto em letras minúsculas quanto em maiúsculas. Se as três primeiras letras são iguais às três últimas, só precisamos colocar colocar as três primeiras letras, isto é, #ccf é equivalente a #ccfccf.

RGB

A sigla significa Red (vermelho), Green (verde) e Blue (azul). É representado por três valores entre parênteses, com uma escala que varia de 0 a 255. A primeiro número representa o vermelho, o segundo o verde e último representa o azul. Um quarto número pode ser adicionado, representando a opacidade, com uma escala que varia de 0.0 (transparente) a 1.0 (opaco). O último valor é conhecido como valor alfa e o sistema com quatro números é chamado de RGBA.

HSL

A sigla representa Hue (tom), Saturation (saturação) e Lightness (luminosidade). O valor do tom é medido em graus, com sua escala variando de 0 a 360 (não é para colocar o símbolo de graus). Já a saturação é representada em porcentagem, de 0% a 100%. A luminosidade também é representada em porcentagem, sendo 0% a cor preta e 100% a cor branca. Do mesmo modo que o sistema RGBA, podemos adicionar mais um número para representar a opacidade, com uma escala de 0.0 a 1.0, resultando no sistema HSLA.

Cores de referência
Cor	Nome	Hex	RGB	HSL
Branco	white	#ffffff	rgb(255,255,255)	hsl(0, 100%, 100%)
Preto	black	#000000	rgb(0,0,0)	hsl(0, 100%, 0%)
Vermelho	red	#ff0000	rgb(255,0,0)	hsl(0, 100%, 50%)
Verde	lime	#00ff00	rgb(0,255,0)	hsl(120, 100%, 50%)
Azul	blue	#0000ff	rgb(0,0,255)	hsl(240, 100%, 50%)

Aplicação das cores

Código-fonte

{| class="wikitable"
! Muda a cor da letra
! Muda a cor do fundo
! Muda a cor do fundo e da letra
|-
| style="color:red;" | Cor da letra em inglês
| style="background:yellow;" | Cor do fundo em inglês
| style="color:white; background:brown;" | Cor da letra e fundo em inglês
|-
| style="color:#085705;" | Cor da letra em hexadecimal
| style="background:#fabbfa;" | Cor do fundo em hexadecimal
| style="color:#d604cc; background:#10f507;" | Cor da letra e fundo em hexadecimal
|-
| style="color:rgb(87, 109, 222);" | Cor da letra em RGB
| style="background:rgb(182, 240, 194);" | Cor do fundo em RGB
| style="color:rgb(133, 237, 234); background:rgb(51, 26, 18);" | Cor da letra e fundo em RGB
|-
| style="color:hsl(12, 3%, 50%);" | Cor da letra em HSL
| style="background:hsl(357, 71%, 77%);" | Cor do fundo em HSL
| style="color:hsl(226, 100%, 50%); background:hsl(45, 100%, 50%);" | Cor da letra e fundo em HSL
|}

Resultado na tela
Muda a cor da letra	Muda a cor do fundo	Muda a cor do fundo e da letra
Cor da letra em inglês	Cor do fundo em inglês	Cor da letra e fundo em inglês
Cor da letra em hexadecimal	Cor do fundo em hexadecimal	Cor da letra e fundo em hexadecimal
Cor da letra em RGB	Cor do fundo em RGB	Cor da letra e fundo em RGB
Cor da letra em HSL	Cor do fundo em HSL	Cor da letra e fundo em HSL

Borda[editar | editar código-fonte]

As propriedades border-width, border-style e border-color podem ser agrupadas em uma só propriedade chamada border, que é responsável por definir as características das quatro bordas. Assim, se nós a colocarmos na primeira linha, para definir a borda da tabela inteira, as bordas internas não serão configuradas, permanecendo na definição padrão.

Se duas células vizinhas tiverem definições de bordas diferentes, a linha que separa as duas células herdará a configuração da borda definida com a maior largura. Isso não se aplica a borda hidden, que é sempre prioritária. Caso as definições possuírem a mesma largura, o desempate será pelo tipo do borda, em que a ordem preferencial é dada por double > solid > dashed > dotted > inset > none (considerando as mais usadas).

A sintaxe é dada por style="border: valor1 valor2 valor3;". A ordem dos tipos de valores é irrelavante.

border-width — determina a largura da borda. O valor passado é constituído pelo número seguido da unidade, que normalmente é px.
border-style — diz respeito ao estilo de borda. Pode ser solid (borda contínua), dotted (borda pontilhada), dashed (borda tracejada), double (borda contínua dupla), inset, outset, ridge, groove, none e hidden.
border-color — determina a cor da borda. O valor passado pode ser o nome em inglês das cores, hexadecimal, RGB ou HSL.

Código-fonte

{| class="wikitable"
|+ Futebol
! style="border-color:red; border-style:dotted; border-width:3px"| Jogador
! style="border:red dotted 3px;"| Posição 
! style="border:inset 3px red;"| Camisa
|-
| Amaral
| Volante
| 5
|-
| style="border: 4px dashed #226de6;"| Juan
| style="border: 4px double rgb(112, 22, 106);"| Zagueiro
| style="border: 4px solid hsl(116, 61%, 35%);"| 4
|}

Resultado na tela

Futebol
Jogador	Posição	Camisa
Amaral	Volante	5
Juan	Zagueiro	4

Expansão do tamanho das células[editar | editar código-fonte]

Para expandirmos o número de colunas que uma célula vai ocupar, devemos usar o atributo colspan, com a estrutura colspan="valor". O "col" que vem antes de "span" se refere a column (coluna) e span quer dizer "abranger". Já para expandir o número de colunas, usamos o atributo rowspan, da sintaxe rowspan="valor". O "row" antes de "span" significa row (linha) mesmo. O valor se refere ao número de colunas ou linhas que serão expandidas.

Código-fonte

{| class="wikitable"
! colspan="3"|Linguagens e Frameworks
|-
| Python || Django
|-
| rowspan="2"| Javascript || React.js
|-
| Vue.js
|-
| Ruby || Ruby on Rails
|}

Resultado na tela

Linguagens e Frameworks
Python	Django
Javascript	React.js
Javascript	Vue.js
Ruby	Ruby on Rails

Predefinições[editar | editar código-fonte]

As predefinições são páginas que contém texto pré-definido, isto é, feito para ser reutilizado por outras páginas sem a necessidade de ser copiado manualmente em cada uma delas.

Uso[editar | editar código-fonte]

Elas podem ser usadas para formatar um texto assim como as tags. No entanto, com as predefinições conseguimos escrever um código grande e complexo, que não vai aparecer no código-fonte do verbete, mas sim em outra página. Desse modo, evitamos que esse código polua o código-fonte do verbete e nos permitem usá-las em diversas páginas.

Estilização com predefinições
Nome	Conteúdo do código-fonte		Mostrado na tela
Nome	Tag	Predefinição	Mostrado na tela
Monoespaçado	Ele é <kbd>culpado</kbd>	Ele é {{Kbd\|culpado}}	Ele é `culpado`
Monoespaçado	Ele é <span style="font-family:monospace;">culpado</span>	Ele é {{Mono\|culpado}}	Ele é culpado
Sobrescrito	10<sup>23</sup>	10{{Exp\|23}}	10²³
Sobrescrito	10<span style="vertical-align:super; font-size:80%;">23</span>	10{{Exp\|23}}	10²³
Pequeno	Fluminense <small>(campeão)</small>	Fluminense {{Pequeno\|(campeão)}}	Fluminense (campeão)
Pequeno	Fluminense <span style="font-size:smaller;">(campeão)</span>	Fluminense {{Pequeno\|(campeão)}}	Fluminense (campeão)
Grande	Vi uma <big>barata</big>	Vi uma {{Grande\|barata}}	Vi uma barata
Grande	Vi uma <span style="font-size:larger;">barata</span>	Vi uma {{Grande\|barata}}	Vi uma barata
Cores	Trinta <span style="background:black; color:white;">candidatos</span>	Trinta {{Font color\|white\|black\|candidatos}}	Trinta candidatos

Criação[editar | editar código-fonte]

As predefinições devem ser criadas com o prefixo Predefinição:, que no caso seria seu espaço de nomes (do inglês namespace) da página, seguida do nome escolhido. Por exemplo, vamos considerar a criação da página "Predefinição:Manual" com o seguinte conteúdo:

O que colocamos na predefinição

Olá, este é o manual de edições avançadas do Leone.

Para usar uma predefinição em um artigo, você deve colocar o nome da predefinição dentro de chaves duplas, isto é, {{ }}. Não deve-se colocar o prefixo Predefinição: entre as chaves duplas. Você só deve colocar esse prefixo para criar a predefinição ou encontrá-la na barra de pesquisa.

Assim, ao colocar {{Manual}} em qualquer outra página, vai aparecer Olá, seja bem-vindo à página de dicas do Leone. em vez de {{Manual}}. Podemos dizer que o conteúdo for transcluído para dentro de outra página.

O que colocamos na página

{{Manual}}

O que é mostrado na tela

Olá, seja bem-vindo à página de dicas do Leone.

Parâmetros[editar | editar código-fonte]

Os parâmetros permitem que a predefinição forneça resultados diferente ou se comporte de maneiras diversas. Dentro da página da predefinição, os parâmetros são identificados entre chaves triplas, isto é, {{{ }}}. Dentro dessas chaves triplas, você deve colocar o nome do parâmetro, que pode ser um número ou uma palavra.

Agora vamos imaginar a criação de uma predefinição chamada "Agradecimento", ou seja, "Predefinição:Agradecimento". O conteúdo dela vai ser o seguinte:

O que colocamos na predefinição

Quero te agradecer... {{{1}}}. Obrigado, {{{2}}}.

Nas páginas onde a predefinição é transcluída, eles devem ser separados por uma barra vertical (|). Os parâmetros são passados às predefinições de três formas: de forma anônima, numerada e nomeada.

Parâmetros anônimos[editar | editar código-fonte]

Os parâmetros anônimos também são conhecidos como parâmetros posicionais. Eles seguem a seguinte estrutura dentro do artigo em que as predefinições são colocadas (onde elas são transcluídas):

{{Nome da predefinição| parâmetro1 | parâmetro2 |...}}

Assim, podemos usar a nossa predefinição na página onde o conteúdo é transcluído do seguinte modo:

O que colocamos na página

{{Agradecimento|por pintar meu carro|Juvenal}}

O que é mostrado na tela

Quero te agradecer... por pintar meu carro. Obrigado, Juvenal.

A ordem é essencial nesse caso. O conteúdo que estiver logo à direita da primeira barra, vai ser atribuído ao primeiro parâmetro, já o conteúdo que estiver à direita da segunda barra, vai ser atribuído ao segundo parâmetro, ou seja, {{{1}}} = por pintar meu carro e {{{2}}} = Juvenal. Então se a gente inverter a ordem, vamos obter

O que colocamos na página

{{Agradecimento|Juvenal|por pintar meu carro}}

O que é mostrado na tela

Quero te agradecer... Juvenal. Obrigado, por pintar meu carro.

Ao invertermos as posições, a atribuição de parâmetros se deu da seguinte forma: {{{1}}} = Juvenal e {{{2}}} = por pintar meu carro.

Se nós nomeássemos os parâmetros com nomes (exemplo: {{{motivo}}} e {{{pessoa}}}) em vez de números ({{{1}}} e {{{2}}}), não iria funcionar nesse caso.

Parâmetros numerados[editar | editar código-fonte]

Podemos passar parâmetros por número, identificando o número de cada parâmetro ao passá-lo. Os números farão o papel de chave. Segue-se a seguinte estrutura:

{{Nome da predefinição|1 = parâmetro1|2 = parâmetro2|...}}

que produz resultado equivalente a

{{Nome da predefinição|2 = parâmetro2|1 = parâmetro1|...}}

Aplicando na nossa predefinição, vamos obter

O que colocamos na página

{{Agradecimento|1=por me emprestar um dinheiro|2=Djalma}}

ou

{{Agradecimento|2=Djalma|1=por pintar meu carro}}

O que é mostrado na tela

Quero te agradecer... por me emprestar um dinheiro. Obrigado, Djalma.

Tanto o que foi apresentado no código de cima quanto o que foi mostrado no código de baixo produzem o mesmo resultado. A ordem mostrada não importa neste caso, pois atribuição vai ser sempre {{{1}}} = por me emprestar um dinheiro e {{{2}}} = Djalma.

Parâmetros nomeados[editar | editar código-fonte]

Os parâmetros nomeados seguem a seguinte forma:

{{Nome da predefinição|nomedoparâmetro1 = parâmetro1|nomedoparâmetro2 = parâmetro2|...}}

sendo nomedoparâmetro1 e nomedoparâmetro2 as chaves.

Dessa maneira, o nosso código deve ser mudado na página da predefinição, isto é,

O que colocamos na predefinição

Quero te agradecer... {{{motivo}}}. Obrigado, {{{pessoa}}}.

Agora, na página em que a predefinição é transcluída, temos que identificar o nome de cada parâmetro ao passá-lo, ou seja,

O que colocamos na página

{{Agradecimento|motivo=por cuidar da minha filha|pessoa=Lindalva}}

ou

{{Agradecimento|pessoa=Lindalva|motivo=por cuidar da minha filha}}

O que é mostrado na tela

Quero te agradecer... por cuidar da minha filha. Obrigado, Lindalva.

Assim como o caso anterior, a ordem não importa, e o que foram mostrados no código de cima e no código de baixo resultam no mesmo resultado, de modo que {{{motivo}}} = por cuidar da minha filha e {{{pessoa}}} = Lindalva.

Para facilitar a leitura do código, podemos colocar as instruções em linhas diferentes, o que não muda em nada o resultado na tela. No entanto, é importante destacar que letras minúsculas e maiúsculas são interpretadas de modo diferente (case-sentive). Assim,

O que colocamos na página

{{Agradecimento
 |pessoa = Dalila
 |Motivo = por tosar o meu cão
 |motivo = por alimentar o meu gato
}}

O que é mostrado na tela

Quero te agradecer... por alimentar o meu gato. Obrigado, Dalila.

Isso ocorreu pois definimos o parâmetro como {{{motivo}}} na página da predefinição, e não como {{{Motivo}}}.

Valores padrões (default)[editar | editar código-fonte]

Se nós não colocarmos parâmetros, a predefinição mostra os próprios parâmetros em vez de seus respectivos valores, uma vez que eles não foram passados. Assim, considerando o caso dos parâmetros nomeados, isto é,

O que colocamos na predefinição

Quero te agradecer... {{{motivo}}}. Obrigado, {{{pessoa}}}.

Vamos obter na página onde o conteúdo é transluído a seguinte configuração

O que colocamos na página

{{Agradecimento}}

O que é mostrado na tela

Quero te agradecer... {{{motivo}}}. Obrigado, {{{pessoa}}}.

Para evitar que isso ocorra, podemos colocar uma barra vertical (|) à direita do nome do parâmetro na página da predefinição, de modo que não retorne nada caso o parâmetro não seja definido.

O que colocamos na predefinição

Quero te agradecer... {{{motivo|}}}. Obrigado, {{{pessoa|}}}.

Desta forma, não é passado nada caso os parâmetros não sejam declarados na página, ou seja,

O que colocamos na página

{{Agradecimento}}

O que é mostrado na tela

Quero te agradecer... . Obrigado, .

Outra solução seria atribuir valores padrões para os parâmetros, ou seja, valores que são atribuídos aos parâmetros em caso de omissão. Eles são colocados após a barra vertical (|), isto é,

O que colocamos na predefinição

Quero te agradecer... {{{motivo|por me ajudar}}}. Obrigado, {{{pessoa|amigo}}}.

Desse modo, caso os parâmetros sejam omitidos, os valores definidos após a barra vertical, que são os valores padrões (default), são mostrados no lugar. Portanto, vamos obter

O que colocamos na página

{{Agradecimento}}

O que é mostrado na tela

Quero te agradecer... por me ajudar. Obrigado, amigo.

Contudo, se a gente atribuir valores aos parâmetros, esse valores vão sobrescrever os valores padrões, ou seja,

O que colocamos na página

{{Agradecimento
 |motivo = por dançar comigo
 |pessoa = Lucileide
}}

O que é mostrado na tela

Quero te agradecer... por dançar comigo. Obrigado, Lucileide.

Parâmetros alternativos[editar | editar código-fonte]

Pode ser interessante usarmos nomes alternativos para os parâmetros. Assim, um valor específico pode atribuído a um certo parâmetro em quaisquer das formas alternativas definidas.

Para colocarmos um nome alternativo, devemos colocá-lo dentro das chaves triplas da primeira forma do parâmetro, ou seja, {{{ }}}, e à direita da barra vertical. E esse parâmetro alternativo também deve estar entre chaves triplas, e de preferência com uma barra vertical à direita para evitar os problemas em caso de omissão das duas formas.

O que colocamos na predefinição

Quero te agradecer... {{{motivo|{{{razão|}}} }}}. Obrigado, {{{pessoa|}}}.

O sistema busca o valor atribuído ao primeiro parâmetro, caso não exista, ele busca no segundo parâmetro, e assim por diante. Então, poderíamos colocar mais parâmetros alternativos, que seguiriam essa lógica.

O que colocamos na página

{{Agradecimento
 |motivo = por dançar comigo
 |pessoa = Dalila
 }}

ou

{{Agradecimento
 |razão = por dançar comigo
 |pessoa = Dalila
}}

O que é mostrado na tela

Quero te agradecer... por dançar comigo. Obrigado, Dalila.

As duas opções de código resultam no mesmo resultado. Não é necessário colocar o espaço entre as chaves triplas de fechamento, de modo que elas foram colocadas aqui para mostras as chaves triplas mais internas são da segunda forma alternativa, e as chaves triplas mais externas são da primeira forma definida. Caso valores diferentes sejam passados para valores alternativos, o valor correspondende à primeira forma definida na predefinição, isto é,

O que colocamos na página

{{Agradecimento
 |razão = por lavar a minha casa
 |motivo = por cantar na minha festa
 |pessoa = Marinete
}}

O que é mostrado na tela

Quero te agradecer... por cantar na minha festa. Obrigado, Marinete.

Repare que a ordem colocada na página onde a predefinição é transcluída é irrelavante nesse caso. Para que a informação "por lavar a minha casa", ligada à chave "razão", aparecesse no caso acima, a definição na página da predefinição deveria ser {{{razão|{{{motivo|}}} }}} ao invés de {{{motivo|{{{razão|}}} }}}.

Citação em um texto[editar | editar código-fonte]

Para nós citarmos uma predefinição sem que o conteúdo dela apareça na página, temos que escrever {{Lp|nome da predefinição}}. Exemplo:

Código: {{Lp|Sim 2}}
Resultado: {{Sim 2}}

Caso a gente queira que os parâmetros apareçam, então temos que usar {{Lpp|nome da predefinição|parâmetro1|parâmetro2|...}}. Exemplo:

Código: {{Lpp|data|ano|mês|dia}}
Resultado: {{data|ano|mês|dia}}

Se nós quisermos fazer uma ligação semelhante de páginas que não são predefinições, ou seja, que não possuem o prefixo Predefinição:, temos que usar {{Lpu|nome da página (com o prefixo)}}. Exemplo:

Código: {{Lpu|Wikipédia:Userbox/Rio de Janeiro}}
Resultado: {{Wikipédia:Userbox/Rio de Janeiro}}

Funções sintáticas[editar | editar código-fonte]

As funções sintáticas ou funções parser são um extensão da MediaWiki que permitem criar predefinições mais sofisticadas. Eles possuem uma cerquilha (#) no início, possuindo a seguinte sintaxe:

{{#nome da função: argumento 1| argumento 2| argumento 3}}

Função #expr[editar | editar código-fonte]

A função #expr realiza operações matemáticas. Ela não funciona com strings.

{{#expr: expressão matemática }}

Operações simples[editar | editar código-fonte]

A precisão de números reais é de 13 casas decimais. Na matemática de "módulo" e "valor absoluto" são geralmente tratados como sinônimos. No entanto, na computação eles possuem significados diferentes. O "valor absoluto" continua significando o valor do número sem o sinal da frente. Já "módulo" significa o resto de uma divisão.

Operação	Operador	O que digitamos	Resultado na tela	Notas
Adição	`+`	`{{#expr: 1 + 2}}`	3	a + b = a - (-b)
Subtração	`-`	`{{#expr: 9 - 4}}`	5	a - b = a - (+b) = (-b) + a
Multiplicação	`*`	`{{#expr: 3 * 2}}`	6	a × b = (-a) × (-b) = b × a = (-b) × (-a)
Divisão	`div`	`{{#expr: 25 / 4}}`	6.25	Os operadores `/` e `div` são equivalentes
Divisão	`/`	`{{#expr: 25 div 4}}`	6.25	Os operadores `/` e `div` são equivalentes
Parênteses	`()`	`{{#expr: (6 + 4) * 3}}`	30	Também conhecidos como operadores de grupo
Potenciação	`^`	`{{#expr: 2 ^ 3}}`	8	a^b = c → 2³ = 2 × 2 × 2 = 8
Raiz quadrada	`sqrt`	`{{#expr: sqrt 81}}`	9	√a = b → √81 = √(9 × 9) = 9
Exponencial	`exp`	`{{#expr: exp 4}}`	54.598150033144	`exp = e ≅ 2.7` (número de Euler)
Logaritmo neperiano	`ln`	`{{#expr: ln 100}}`	4.6051701859881	e^b = a → log_ea = ln a = b
Valor absoluto	`abs`	`{{#expr: abs -7}}`	7	\|-a\| = a → \|-7\| = 7
Módulo	`mod`	`{{#expr: 28 mod 3}}`	1	Resto da divisão

Operações de arredondamento[editar | editar código-fonte]

Nos países lusófonos, é usada a vírgula como separador decimal. No entanto, em computação é usado o ponto para isso.

O número após round indica quantos lugares à direita do decimal estão incluídos no arredondamento. Quando esse número após round é negativo, o arredondamento se dá para os números à esquerda do ponto, isto é, para a parte inteira. Esse arredondamento é feito para o número mais próximo.

Operação	Operador	O que digitamos	Resultado na tela	Notas
Truncamento	`trunc`	`{{#expr: trunc 1.5}}`	1	O número decimal 0.5 é ignorado, sobrando 1
Truncamento	`trunc`	`{{#expr: trunc -1.5}}`	-1	O número decimal 0.5 é ignorado, sobrando -1
Arredondamento para cima	`ceil`	`{{#expr: ceil 1.5}}`	2	Como 1 < 1.5 < 2 ∴ vai retornar 2
Arredondamento para cima	`ceil`	`{{#expr: ceil -1.5}}`	-1	Como -2 < 1.5 < -1 ∴ vai retornar -1
Arredondamento para baixo	`floor`	`{{#expr: floor 1.5}}`	1	Como 1 < 1.5 < 2 ∴ vai retornar 1
Arredondamento para baixo	`floor`	`{{#expr: floor -1.5}}`	-2	Como -2 < 1.5 < -1 ∴ vai retornar -2
Arredondamento especificado	`round`	`{{#expr: 40 / 7 round 3}}`	5.714	40/7 = 5,7143 → 5,714
		`{{#expr: 40 / 7 round 1}}`	5.7	40/7 = 5,7143 → 5,714 → 5,71 → 5,7
		`{{#expr: 4539 round -1}}`	4540	4540 está mais próximo de 4539 do que 4530
		`{{#expr: 4539 round -2}}`	4500	4500 está mais próximo de 4539 do que 4600

Operações trigonométricas[editar | editar código-fonte]

Os ângulos das funções trigonométricas são expressos em radianos, sendo π rad = 180°.

Operação	Operador	O que digitamos	Resultado na tela
Seno	`sin`	`{{#expr: sin 0.5}}`	0.4794255386042
Cosseno	`cos`	`{{#expr: cos 0.5}}`	0.87758256189037
Tangente	`cos`	`{{#expr: tan 0.5}}`	0.54630248984379
Arco seno	`asin`	`{{#expr: asin 1}}`	1.5707963267949
Arco cosseno	`acos`	`{{#expr: acos 1}}`	0
Arco tangente	`atan`	`{{#expr: atan 1}}`	0.78539816339745

Operações comparativas[editar | editar código-fonte]

Se a proposição é «verdadeira», então retorna 1. Se a proposição é «falsa», então retorna 0.

Operação	Operador	O que digitamos	Resultado na tela	Notas
Igualdade	`=`	`{{#expr: 7 = 5}}`	0	Como 7 = 5 é falso, então retorna 0
Igualdade	`=`	`{{#expr: 8 = 8}}`	1	Como 8 = 8 é verdadeiro, então retorna 1
Desigualdade	`<>`	`{{#expr: 7 <> 5}}`	1	Como 7 ≠ 5 é verdadeiro, então retorna 1
Desigualdade	`!=`	`{{#expr: 8 != 8}}`	0	Como 6 ≠ 6 é falso, então retorna 0
Maior que	`>`	`{{#expr: 20 > 9}}`	1	Como 20 > 9 é verdadeiro, então retorna 1
		`{{#expr: 9 > 20}}`	0	Como 9 > 20 é falso, então retorna 0
		`{{#expr: 20 > 20}}`	0	Como 20 > 20 é falso, então retorna 0
Maior ou igual a	`>=`	`{{#expr: 12 >= 8}}`	1	Como 12 ≥ 8 é verdadeiro, então retorna 1
		`{{#expr: 12 >= 12}}`	1	Como 12 ≥ 12 é verdadeiro, então retorna 1
		`{{#expr: 8 >= 12}`	0	Como 8 ≥ 12 é falso, então retorna 0
Menor que	`<`	`{{#expr: 20 < 9}}`	0	Como 20 < 9 é falso, então retorna 0
		`{{#expr: 9 < 20}}`	1	Como 9 < 20 é verdadeiro, então retorna 1
		`{{#expr: 9 < 9}}`	0	Como 9 < 9 é falso, então retorna 0
Menor ou igual a	`<=`	`{{#expr: 12 <= 8}}`	0	Como 12 ≤ 8 é falso, então retorna 0
		`{{#expr: 8 <= 8}}`	1	Como 8 ≤ 8 é verdadeiro, então retorna 1
		`{{#expr: 8 <= 12}`	1	Como 8 ≤ 12 é verdadeiro, então retorna 1

Operações lógicas[editar | editar código-fonte]

Quando operadores lógicos são usados, o número 0 significa um valor lógico «falso». Já qualquer outro número, positivo ou negativo, é interpretado como «verdadeiro», e retorna o valor 1.

Operação	Operador	O que digitamos	Resultado na tela	Notas
NÃO lógico	`not`	`{{#expr: not 6}}`	0	Se não é verdadeiro, então é falso (0)
		`{{#expr: not 0}}`	1	Se não é falso, então é verdadeiro (1)
		`{{#expr: not 0 * 7}}`	7	not 0 * 7 = 1 * 7 = 7
		`{{#expr: not (0 * 7)}}`	1	not (0 * 7) = not 0 = 1
E lógico	`and`	`{{#expr: 12 < 8 and 4 < 2}}`	0	F and F → F (retorna 0)
		`{{#expr: 12 > 8 and 4 < 2}}`	0	V and F → F (retorna 0)
		`{{#expr: 12 > 8 and 4 > 2}}`	1	V and V → V (retorna 1)
OU lógico	`or`	`{{#expr: 12 < 8 or 4 < 2}}`	0	F or F → F (retorna 0)
		`{{#expr: 12 > 8 or 4 < 2}}`	1	V or F → V (retorna 1)
		`{{#expr: 12 > 8 or 4 > 2}}`	1	V or V → V (retorna 1)

Função #se ou #if[editar | editar código-fonte]

Se a condição é uma string vazia ou consiste apenas de espaços em branco, então é considerada como «falsa», e a função retorna <senão texto>. Caso contrário, a função retorna <então texto>. O <senão texto> pode ser omitido; assim, se a condição for «falsa», a função devolve um texto vazio. Normalmente o parâmetro é passado na página em que o contéudo é transcluído.

{{#se: <condição> | <então texto> | <senão texto>}}

{{#if: <condição> | <então texto> | <senão texto>}}

O que digitamos	O que vemos na tela
{{#se: \| Certo \| Errado}}	Errado
{{#se: X\| Certo \| Errado}}	Certo
{{#se: {{{parâmetro\|A}}} \| Parâmetro é definido. \| Parâmetro não definido ou vazio}}	Parâmetro é definido.
{{#se: {{{parâmetro\|}}} \| Parâmetro é definido. \| Parâmetro não definido ou vazio}}	Parâmetro não definido ou vazio
{{#se: {{{parâmetro\|}}} \| Parâmetro é definido.}}

Note que a função se não suporta sinais de "=" ou expressões matemáticas. {{#se: 1 = 2|sim|não}} irá devolver "sim", porque a string "1 = 2" não é vazia.

Função #seigual ou #ifeq[editar | editar código-fonte]

Essa função compara dois valores, que podem ser números ou strings, e retorna uma string se os valores foram equivalentes ou outra string se não forem equivalentes. Letras maiúsculas de letras minúsculas são interpretadas como diferentes (case-sentitive), assim como strings e números. Se <texto 1> for equivalente a <texto 2>, será mostrada a string <igual texto>. Caso <texto 1> seja interpretado como diferente de <texto 2>, vai retornar <não igual texto>.

{{#seigual: <texto 1> | <texto 2> | <igual texto> | <não igual texto>}}

{{#ifeq: <texto 1> | <texto 2> | <igual texto> | <não igual texto>}}

O que digitamos	O que vemos na tela
{{#seigual: +05 \| 005 \| Equivalente \| Diferente}}	Equivalente
{{#seigual: "+05" \| "005" \| Equivalente \| Diferente}}	Diferente
{{#seigual: "5" \| 5 \| Equivalente \| Diferente}}	Diferente
{{#seigual: -5 \| 9.5 \| Equivalente \| Diferente}}	Diferente
{{#seigual: B \| b \| 1 \| 0}}	0

Função #seerro ou #iferror[editar | editar código-fonte]

Esta função avalia se existe um erro na expressão, isto é, se é possível obter um resultado numérico. Se houver um erro em <expressão>, retorna <valor se verdadeiro>. Caso não haja erro, retorna <valor se falso>.

{{#seerro: <expressão> | <valor se verdadeiro> | <valor se falso> }}

{{#iferror: <expressão> | <valor se verdadeiro> | <valor se falso> }}

Como não há um erro na expressão {{#expr: 3 + 2}}, isto é, é possível extrair um resultado dessa expressão, vai retornar Falso. Já a {{#expr: x + 2}} retorna um erro, então retorna Verdadeiro. Se um

O que digitamos	O que vemos na tela	Notas
`{{#seerro: {{#expr: 3 + 2}} \| Verdadeiro \| Falso}}`	Falso	{{#expr: 3 + 2}} = 5
`{{#seerro: {{#expr: x + 2}} \| Verdadeiro \| Falso}}`	Verdadeiro	{{#expr: x + 2}} → Erro de expressão: Palavra "x" não reconhecida
`{{#seerro: {{#expr: 4 mod 2}} \| Há erro}}`	0	{{#expr: 4 mod 2}} = 0
`{{#seerro: {{#expr: 3 / 0}} \| Há erro}}`	Há erro	{{#expr: 3 / 0}} → Divisão por zero
`{{#seerro: {{#expr: 3 ^ 2}} }}`	9	{{#expr: 3 ^ 2}} = 9
`{{#seerro: {{#expr: sqrt -4}} }}`		{{#expr: sqrt -4}} → Em sqrt: resultado não é um número

Função #seexpr ou #ifexpr[editar | editar código-fonte]

{{#seexpr: <expressão> | <então texto> | <senão texto>}}

{{#ifexpr: <expressão> | <então texto> | <senão texto>}}

Se não escrevermos as opções após a barra, dá um resultado vazio (independentemente se a expressão é verdadeira ou não). A exceção é quando há uma expressão inválida.

O que digitamos	Resultado na tela
`{{#seexpr: 8 >= 6 \| Correto \| Errado}}`	Correto
`{{#seexpr: 8 <= 6 \| Correto \| Errado}}`	Errado
`{{#seexpr: 8 >= 6}}`
`{{#seexpr: 8 <= 6}}`
`{{#seexpr: 8 / 0}}`	Divisão por zero

Função #se ou #if com #seexpr ou #ifexpr[editar | editar código-fonte]

Se a expressão calculada resulta em um resultado vazio (que é diferente do número 0), então é mostrado o <senão texto>. Caso a expressão calculada dê qualquer outro valor, independentemente se a expressão é correta ou não, resulta é mostrado o <então texto>.

{{#se: {{#seexpr: <expressão> | <então texto> | <senão texto>}} }}

{{#if: {{#ifexpr: <expressão> | <então texto> | <senão texto>}} }}

O que digitamos	O que vemos na tela	Notas
`{{#se: {{#seexpr: 4 >= 3}} \| Verdadeiro \| Falso}}`	Falso	{{#seexpr: 4 >= 3}} =
`{{#se: {{#seexpr: 4 <= 3}} \| Verdadeiro \| Falso}}`	Falso	{{#seexpr: 4 <= 3}} =
`{{#se: {{#seexpr: 4 >= 3 \| 1 \| 0}} \| Verdadeiro \| Falso}}`	Verdadeiro	{{#seexpr: 4 >= 3 \| 1 \| 0}} = 1
`{{#se: {{#seexpr: 4 <= 3 \| 1 \| 0}} \| Verdadeiro \| Falso}}`	Verdadeiro	{{#seexpr: 4 <= 3 \| 1 \| 0}} = 0
`{{#se: {{#seexpr: 4 / 0}} \| Verdadeiro \| Falso}}`	Verdadeiro	{{#seexpr: 4 / 0}} = Divisão por zero

Função #seexiste ou #ifexist[editar | editar código-fonte]

Se existir uma página na Wikipédia lusófona com o nome igual ao que consta em <nome do artigo>, retorna <existe o artigo>. Caso não exista uma página com esse nome, retorna <não existe o artigo>.

{{#seexiste: <nome do artigo> | <existe o artigo> | <não existe o artigo> }}

{{#ifexxist: <nome do artigo> | <existe o artigo> | <não existe o artigo> }}

O que digitamos	O que vemos na tela	Notas
`{{#seexiste: Wikipédia \| Sim \| Não}}`	Sim	Existe o artigo Wikipédia
`{{#seexiste: wikipédia \| Sim \| Não}}`	Sim	Não faz diferença se só alterar a primeira letra
`{{#seexiste: WikiPédiA \| Sim \| Não}}`	Não	É interpretado como se fosse outra página se alterar qualquer outra letra

Função #switch[editar | editar código-fonte]

Essa função compara o <valor de comparação> com o <valor1>, <valor2>, etc. Se o <valor de comparação> for igual ao <valor1>, será mostrado <resultado1>, se for igual ao <valor2>, será mostrado <resultado2>, e assim diante. Se o <valor de comparação> não for igual a nenhum dos valores, será mostrado o <resultado padrão>, que é colocado por último.

{{ #switch: <valor de comparação> | <valor1> = <resultado1> | <valor2> = <resultado2> | ... | <valorn> = <resultadon> | <resultado padrão>}}

A análise é feita da esquerda para a direita. O primeiro valor igual é mostrado na tela. É case-sensitive.

O que digitamos	O que vemos na tela
`{{#switch: 5 \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	cinco
`{{#switch: 6 \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	seis
`{{#switch: 9 \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	valor não encontrado
`{{#switch: "5" \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	valor não encontrado
`{{#switch: {{ns:0}} \| = vazio \| não vazio}}`	vazio
`{{#switch: C \| C = 0 \| C = 1 }}`	0
`{{#switch: C \| c = 0 \| C = 1 }}`	1
`{{#switch: {{FULLPAGENAME}} \| Wikipédia:Esplanada/geral = esplanada \| Ajuda:Página principal = ajuda \| Usuário:Leone Melo/Testes/Dicas = nome da página atual \| Outra página qualquer}}`	nome da página atual
`{{#switch: {{{1}}} \| Foo = Leo \| baz = Baz \| Bar}}`	Bar
`{{#switch: {{{1\|Foo}}} \| Foo = Leo \| baz = Baz \| Bar}}`	Leo
`{{#switch: {{#expr: 1 + 2}} \| 2 = dois \| 3 = três \| Erro }}`	três
`{{#switch: 1=2 \| 1=2 = A \| 1<'nowiki>=<'/nowiki>2 = B \| 1{{=}}2 = C \| default }}`	C

Exatas[editar | editar código-fonte]

Matemática[editar | editar código-fonte]

No padrão da maioria das linguagens de programação, a separação de casas decimais é feita pelo ponto. Nos países lusófonos, essa separação é feita pela vírgula. Se nós simplesmente colocarmos uma vírgula, vai aparecer um espaço indevido, de modo que para resolver isso, nós podemos colocar {,}, isto é,

Código-fonte

1.5 \Rightarrow 1,5 \Rightarrow 1{,}5)

Resultado na tela

1.5\Rightarrow 1,5\Rightarrow 1{,}5

Função que possui valores diferentes dependendo da incógnita

Código-fonte

f(n) = 
\begin{cases}
n/2, & \text{se } n \mbox{ é par} \\
3n+1, & \text{se } n \text{ é ímpar}
\end{cases}

Resultado na tela

f(n)={\begin{cases}n/2,&{\text{se }}n{\mbox{ é par}}\\3n+1,&{\text{se }}n{\text{ é ímpar}}\end{cases}}

Sistema de três variáveis

Código-fonte

\begin{cases}
3x+2y-z = 2 \\ x-4x+4z = -1 \\ -2x+3y+5z = 0
\end{cases}

Resultado na tela

{\begin{cases}3x+2y-z=2\\x-4x+4z=-1\\-2x+3y+5z=0\end{cases}}

Quebra de linha de uma função

Código-fonte

\begin{align}
f(x) & = (a-b)^2 \\
& = a^2-2ab+b^2 \\
\end{align}

Resultado na tela

{\begin{aligned}f(x)&=(a-b)^{2}\\&=a^{2}-2ab+b^{2}\\\end{aligned}}

Química[editar | editar código-fonte]

Há pelo menos três maneiras de mostrar eficientes de mostrar elementos químicos. Com a tag <chem> e com as predefinições {{chem}} ou {{chem2}}.

O que digitamos	Resultado na tela
<chem>CrO4^2-</chem>	${\ce {CrO4^2-}}$
<chem>AgCl2-</chem>	${\ce {AgCl2-}}$
{{chem\|Cr\|O\|4\|2-}}	CrO2− 4
{{chem\|Ag\|Cl\|2\|-}}	AgCl− 2
{{chem2\|CrO4(2-)}}	CrO2– 4
{{chem2\|AgCl2(-)}}	AgCl– 2

Palavras mágicas[editar | editar código-fonte]

O que eu escrevi no código-fonte	O que aparece na tela
Esta é a página de {{SUBPAGENAME}} de {{ROOTPAGENAME}}. Com o ''namespace'', o nome desta página é {{FULLPAGENAME}}. Já sem o ''namespace'', que no caso é {{NAMESPACE}}, o nome desta página é {{PAGENAME}}.	Esta é a página de Dicas de Leone Melo. Com o namespace, o nome desta página é Usuário:Leone Melo/Testes/Dicas. Já sem o namespace, que no caso é Usuário, o nome desta página é Leone Melo/Testes/Dicas.
Hoje é {{CURRENTDAYNAME}}, dia {{CURRENTDAY}} de {{CURRENTMONTHNAME}} de {{CURRENTYEAR}}.	Hoje é quarta-feira, dia 26 de junho de 2024.
Olá, o endereço URL da {{SITENAME}} é https:{{SERVER}}. O endereço URL da minha página de usuário é https:{{fullurl:Usu%C3%A1rio:Leone_Melo}}.	Olá, o endereço URL da Wikipédia é https://pt.wikipedia.org. O endereço URL da minha página de usuário é https://pt.wikipedia.org/wiki/Usu%C3%A1rio:Leone_Melo.

Domínios[editar | editar código-fonte]

O que escrevemos	Resultado na tela
{{ns:0}}
{{ns:1}}	Discussão
{{ns:Talk}}	Discussão
{{ns:2}}	Usuário(a)
{{ns:User}}	Usuário(a)
{{ns:3}}	Usuário(a) Discussão
{{ns:User talk}}	Usuário(a) Discussão
{{ns:4}}	Wikipédia
{{ns:Project}}	Wikipédia
{{ns:5}}	Wikipédia Discussão
{{ns:Project talk}}	Wikipédia Discussão
{{ns:6}}	Ficheiro
{{ns:Image}}	Ficheiro
{{ns:7}}	Ficheiro Discussão
{{ns:Image talk}}	Ficheiro Discussão
{{ns:8}}	MediaWiki
{{ns:MediaWiki}}	MediaWiki
{{ns:9}}	MediaWiki Discussão
{{ns:MediaWiki talk}}	MediaWiki Discussão
{{ns:10}}	Predefinição
{{ns:Template}}	Predefinição
{{ns:11}}	Predefinição Discussão
{{ns:Template talk}}	Predefinição Discussão
{{ns:12}}	Ajuda
{{ns:Help}}	Ajuda
{{ns:13}}	Ajuda Discussão
{{ns:Help talk}}	Ajuda Discussão
{{ns:14}}	Categoria
{{ns:Category}}	Categoria
{{ns:15}}	Categoria Discussão
{{ns:Category talk}}	Categoria Discussão
{{ns:100}}	Portal
{{ns:101}}	Portal Discussão

Referências

↑ ^a ^b Rafael Marques (13 de janeiro de 2024). «Tags HTML: as principais tags para criar sua página HTML». Home Host. Consultado em 20 de maio de 2024
↑ «padding - CSS | MDN». developer.mozilla.org. 8 de novembro de 2023. Consultado em 2 de junho de 2024
↑ «margin - CSS | MDN». developer.mozilla.org. 8 de novembro de 2023. Consultado em 2 de junho de 2024
↑ «HTML Background Color». htmlcolorcodes.com (em inglês). Consultado em 22 de maio de 2024
↑ Rafael Marques (9 de janeiro de 2024). «Tabela de cores HTML: aplicando cores nas tags HTML». Home Host. Consultado em 22 de maio de 2024

[host-1] Rafael Marques (13 de janeiro de 2024). «Tags HTML: as principais tags para criar sua página HTML». Home Host. Consultado em 20 de maio de 2024

[2] «padding - CSS | MDN». developer.mozilla.org. 8 de novembro de 2023. Consultado em 2 de junho de 2024

[3] «margin - CSS | MDN». developer.mozilla.org. 8 de novembro de 2023. Consultado em 2 de junho de 2024

[4] «HTML Background Color». htmlcolorcodes.com (em inglês). Consultado em 22 de maio de 2024

[5] Rafael Marques (9 de janeiro de 2024). «Tabela de cores HTML: aplicando cores nas tags HTML». Home Host. Consultado em 22 de maio de 2024

[1]

[2]

[3]

[4]

[5]

O que digitamos	O que vemos na tela
`{{#switch: 5 \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	cinco
`{{#switch: 6 \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	seis
`{{#switch: 9 \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	valor não encontrado
`{{#switch: "5" \| 5 = cinco \| 6 = seis \| 7 = sete \| valor não encontrado}}`	valor não encontrado
`{{#switch: {{ns:0}} \| = vazio \| não vazio}}`	vazio
`{{#switch: C \| C = 0 \| C = 1 }}`	0
`{{#switch: C \| c = 0 \| C = 1 }}`	1
`{{#switch: {{FULLPAGENAME}} \| Wikipédia:Esplanada/geral = esplanada \| Ajuda:Página principal = ajuda \| Usuário:Leone Melo/Testes/Dicas = nome da página atual \| Outra página qualquer}}`	nome da página atual
`{{#switch: {{{1}}} \| Foo = Leo \| baz = Baz \| Bar}}`	Bar
`{{#switch: {{{1\|Foo}}} \| Foo = Leo \| baz = Baz \| Bar}}`	Leo
`{{#switch: {{#expr: 1 + 2}} \| 2 = dois \| 3 = três \| Erro }}`	três
`{{#switch: 1=2 \| 1=2 = A \| 1<'nowiki>=<'/nowiki>2 = B \| 1{{=}}2 = C \| default }}`	C