Manual do Leone

O Manual do Leone é uma iniciativa que visa centralizar a documentação da Wikipédia, que se aplica em parte a outros projetos Wikimedia, em um só lugar. Este manual tem a função de auxiliar editores que desejam entender com mais profundidade certos questões técnicas por meio de uma explicação detalhada da edição pelo código-fonte.

Formatação básica

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.

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

Título de seções

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 Predefinição:Font color editar código-fonte ]
	== Nível 2 ==	<h2> Nível 2 </h2>	Nível 2 [ editar Predefinição:Font color editar código-fonte ]
	=== Nível 3 ===	<h3> Nível 3 </h3>	Nível 3 [ editar Predefinição:Font color editar código-fonte ]
	==== Nível 4 ====	<h4> Nível 4 </h4>	Nível 4 [ editar Predefinição:Font color editar código-fonte ]
	===== Nível 5 =====	<h5> Nível 5 </h5>	Nível 5 [ editar Predefinição:Font color editar código-fonte ]
	====== Nível 6 ======	<h6> Nível 6 </h6>	Nível 6 [ editar Predefinição:Font color editar código-fonte ]

Ligações para seções

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

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>

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>

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>

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

É uma espécie de tag <pre>, mas com a diferença de permitir realçar códigos escritos em uma determinada linguagem de programação ou marcação com diversas cores. Para que essas cores apareçam, é preciso indicar no atributo lang o nome da linguagem do seguinte modo: lang="nome". As aspas são opcionais, mas é uma boa prática colocá-las. Uma lista das linguagens disponíveis para serem realçadas pode ser encontrada em pygments.org. Se o atributo lang não for escrito ou um nome inválido para o nome de uma linguagem, a tag <syntaxhighlight> vai se comportar de forma semelhante à tag <pre>. A atuação dessa tag pode ser alterada de bloco (block) para em linha (inline) apenas escrevendo inline dentro da tag de abertura.

	O que digitamos no código-fonte	O que vemos na tela
Sem o atributo lang	<syntaxhighlight> Vamos para '''boate''' dançar [[lambada]]</syntaxhighlight>	Vamos para boate dançar [[lambada]]
Texto wiki	<syntaxhighlight lang="wikitext"> {\| class="wikitable" style="text-align:center;" \|+Legenda da tabela !Título da coluna 1 !Título da coluna 2 \|- \|Dançar [[lambada]] é necessário \|A conta é {{#expr: 1 + 2}} reais \|} </syntaxhighlight>	{\| class="wikitable" style="text-align:center;" \|+Legenda da tabela !Título da coluna 1 !Título da coluna 2 \|- \|Dançar [[lambada]] é necessário \|A conta é {{#expr: 1 + 2}} reais \|}
Texto wiki em linha	Quero receber um <syntaxhighlight lang="wikitext" inline>{{Grande\|salário decente}}</syntaxhighlight> ano que vem.	Quero receber um `{{Grande\|salário decente}}` ano que vem.
Em python	<syntaxhighlight lang="python"> s = 0 n = 0 for c in range(1, 501): if (c % 2 != 0) and (c % 3 == 0): s += c #s = s+c n += 1 #n = n+1 print('Existem {} números entre 1 e 500 que são ímpares e múltiplos de 3. A soma deles é {}.'.format(n, s)) </syntaxhighlight>	s = 0 n = 0 for c in range(1, 501): if (c % 2 != 0) and (c % 3 == 0): s += c #s = s+c n += 1 #n = n+1 print('Existem {} números entre 1 e 500 que são ímpares e múltiplos de 3. A soma deles é {}.'.format(n, s))

Tag <span>

É 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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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.

Ver também

Manual do Leone/Tabelas

Referências

↑ ^1,0 ^1,1 Rafael Marques (13/01/2024). Tags HTML: as principais tags para criar sua página HTML. Home Host. Página visitada em 20/05/2024.
↑ padding - CSS | MDN (08/11/2023). Página visitada em 02/06/2024.
↑ margin - CSS | MDN (08/11/2023). Página visitada em 02/06/2024.

[host-1] 1,0 ^1,1 Rafael Marques (13/01/2024). Tags HTML: as principais tags para criar sua página HTML. Home Host. Página visitada em 20/05/2024.

[2] padding - CSS | MDN (08/11/2023). Página visitada em 02/06/2024.

[3] margin - CSS | MDN (08/11/2023). Página visitada em 02/06/2024.

[1]

[2]

[3]

Manual do Leone

Formatação básica

Tags

Atributos

Atributo id

Atributo class

Atributo style

Título de seções

Ligações para seções

Listas

Tag <nowiki>

Tag <code>

Tag <pre>

Tag <syntaxhighlight>

Tag <span>

Classe plainlinks

Impedir quebra de linha

Cores

Lista de tags

Tag <div>

Cor da fonte e de fundo

Preenchimento

Margem

Borda

Alinhamento de texto

Float

Altura

Tamanho da fonte

Altura da linha

Ver também

Referências