Ir para o conteúdo

Manual do Leone/Módulo 1

Adicionar hiperligações
De Wikiversidade

Esta subpágina se dedica a explicar o que são tags, mostrar os tipos e dar exemplos práticos de seu uso, como em listas e na formatação do texto.

Definição

[editar | editar código]

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 que precisam de fechamento (exemplo: <div> </div>) e as que não precisam (exemplo: <br>).[1]

Atributos

[editar | editar código]

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]

Esse atributo fornece uma identificação única a um elemento HTML, de forma que esse elemento não pode 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]

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

Atributo style

[editar | editar código]

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.

Formatação básica

[editar | editar código]

Antes de mostrarmos a aplicação das tags, é interessante mostrar a formatação básica que pode ser feita na Wikipédia sem as tags. No entanto, ao vermos o código-fonte real da página (ao apertar o botão direito do mouse e depois ir em "inspecionar" ou em "ver fonte da página"), vamos ver que elas estão aí, mesmo que não explicitamente.

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
[[Zé das Couves]] Zé das Couves
Ligação externa https://commons.wikimedia.org https://commons.wikimedia.org
[https://commons.wikimedia.org Commons] Commons

Título de seções

[editar | editar código]

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]

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]

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 quisermos que seja um item. Para fazer um subitem, é só 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>
  1. Argentina
  2. Brasil
    1. Região Sul
    2. Região Norte
      1. Pará
  3. 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
    1. Madrasta
    2. 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 são possíveis de 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>
  1. Espadas ♠
  2. Paus ♣
  3. Copas ♥
  4. 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>
  1. Angola
  2. Guiné-Bissau
  3. Moçambique
  4. 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>
  1. TIM
  2. Claro
  3. Vivo
  4. 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>
  1. Bíceps
  2. Tríceps
  3. Abdutor
  4. Adutor

Tipos de tags

[editar | editar código]

nowiki

[editar | editar código]

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 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]].

code

[editar | editar código]

Coloca 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.

pre

[editar | editar código]

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. Ela 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]]

syntaxhighlight

[editar | editar código]

É 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))

span

[editar | editar código]

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

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

<span style="propriedade:valor;">texto</span>
[editar | editar código]

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]

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 as tags <br> ou <br/> (não há qualquer diferença prática entre essas duas marcações). 

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

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 as propriedades 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.

Opções do style

[editar | editar código]

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
Tag simples Tag span + atributo style
Negrito <strong>Avenida Brasil</strong> <span style="font-weight:bolder;">Avenida Brasil</span> Avenida Brasil
<b>Avenida Brasil</b>
Itálico <em>Polícia Civil</em> <span style="font-style:italic;">Polícia Civil</span> Polícia Civil
<i>Polícia Civil</i>
Sublinhado <u>Alfabetização</u> <span style="text-decoration: underline;">Alfabetização</span> Alfabetização
<ins>Alfabetização</ins>
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
<del>Desciclopédia</del>
Monoespaçado <kbd>Interessante</kbd> <span style="font-family:monospace;">Interessante</span> Interessante
<tt>Interessante</tt>
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

hiero

[editar | editar código]

Essa tag permite adicionarmos hieróglifos egípcios usando caracteres latinos de acordo com o Manuel de Codage. A lista completa pode ser encontrada em Extension:WikiHiero/Syntax.

Exemplos
Código Resultado Código Resultado
<hiero>A2</hiero>
A2
 <hiero>A38</hiero>
A38
<hiero>C4</hiero>
C4
 <hiero>D10</hiero>
D10
<hiero>E3</hiero>
E3
 <hiero>F7</hiero>
F7
<hiero>G20</hiero>
G20
 <hiero>N15</hiero>
N15

poem

[editar | editar código]

Os textos escritos na Wikipédia são formatados de um certo modo para minimizar erros. Quando se trata de poemas ou textos com estrutura parecida, essa formatação acaba atrapalhando. Dessa forma, com o uso da tag poem, podemos transcrever um texto exatamente como ele é escrito no código-fonte.

O que escrevemos Resultado na tela 
No meio do caminho tinha uma pedra
tinha uma pedra no meio do caminho
tinha uma pedra
no meio do caminho tinha uma pedra.

Nunca me esquecerei desse acontecimento
na vida de minhas retinas tão fatigadas.
Nunca me esquecerei que no meio do caminho
tinha uma pedra
tinha uma pedra no meio do caminho
no meio do caminho tinha uma pedra.
No meio do caminho tinha uma pedra

tinha uma pedra no meio do caminho tinha uma pedra no meio do caminho tinha uma pedra.

Nunca me esquecerei desse acontecimento na vida de minhas retinas tão fatigadas. Nunca me esquecerei que no meio do caminho tinha uma pedra tinha uma pedra no meio do caminho no meio do caminho tinha uma pedra. 

<poem>
No meio do caminho tinha uma pedra
tinha uma pedra no meio do caminho
tinha uma pedra
no meio do caminho tinha uma pedra.

Nunca me esquecerei desse acontecimento
na vida de minhas retinas tão fatigadas.
Nunca me esquecerei que no meio do caminho
tinha uma pedra
tinha uma pedra no meio do caminho
no meio do caminho tinha uma pedra.
</poem>

No meio do caminho tinha uma pedra
tinha uma pedra no meio do caminho
tinha uma pedra
no meio do caminho tinha uma pedra.

Nunca me esquecerei desse acontecimento
na vida de minhas retinas tão fatigadas.
Nunca me esquecerei que no meio do caminho
tinha uma pedra
tinha uma pedra no meio do caminho
no meio do caminho tinha uma pedra.

[editar | editar código]

Essa tag nos permite colocar diversas imagens uma ao lado a outra, como se fosse uma galeria. Para colocar as imagens, devemos colocar o nome do arquivo, juntamente com a extensão, depois uma barra horizontal (|) seguida da legenda da imagem. Se colocarmos File:, Ficheiro: ou Imagem: antes do nome do arquivo, vai funcionar, mas não é necessário.

O atributo mode (modo) pode ser usado para mudar a forma como as imagens são mostradas. Na forma tradicional, sem o uso do mode, uma moldura de mesma dimensão é criada, com a legenda embaixo dessa moldura. A legenda fica centralizada à esquerda, mas é possível deixá-las centralizadas colocando style="text-align:center" dentro da tag.

Quando atribuímos nolines ao mode, essa moldura some e as legendas ficam logo abaixo das imagens, fazendo com que as legendas não fiquem alinhadas se as imagens tiverem alturas diferentes. Já o modo packed coloca todas as imagens com a mesma altura. Outra possibilidade é usarmos o modo packed-overlay, que insere a legenda sobre uma camada na parte inferior da imagem. Outra opção é o modo packed-hover, que faz com que a legenda só apareça se passarmos o cursor do mouse sobre a imagem.

Por fim, temos o modo slideshow, que mostra uma imagem de cada vez, preservando as dimensões da imagens. É possível usar o parâmetro showthumbnails para que todas as imagens apareçam em miniatura embaixo da imagem destacada.

Nota: Alguns desses modos podem não funcionar adequadamente em dispositivos móveis.

Código Resultado 
<gallery>
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery style="text-align:center">
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery mode="nolines">
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery mode="packed">
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery mode="packed-overlay">
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery mode="packed-hover">
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery mode="slideshow">
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho
<gallery mode="slideshow" showthumbnails>
Pôr do Sol na Rural.jpg|Pôr do Sol em Seropédica
Deslocamento de um corpo.png|Gráfico de velocidade x tempo
Trem com minério.jpg|Minério de ferro em Brumadinho
</gallery>
  • Pôr do Sol em Seropédica
    Pôr do Sol em Seropédica
  • Gráfico de velocidade x tempo
    Gráfico de velocidade x tempo
  • Minério de ferro em Brumadinho
    Minério de ferro em Brumadinho

É possível aumentar a largura e a altura das imagens na galeria por meio dos parâmetros widths e heights, respectivamente. Basta atribuir um valor numérico a cada um, que será interpretado em pixels (não é necessário adicionar 'px'). O valor padrão é 120 pixels. No entanto, esses parâmetros não funcionam quando a galeria está nos modos packed, packed-overlay, packed-hover ou slideshow.

Código
<gallery>
Vestes litúrgicas.jpg|Vestes litúrgicas
Retábulo rococó.jpg|Retábulo rococó
</gallery>
Resultado
  • Vestes litúrgicas
    Vestes litúrgicas
  • Retábulo rococó
    Retábulo rococó
Código
<gallery widths="200" heights="200">
Vestes litúrgicas.jpg|Vestes litúrgicas
Retábulo rococó.jpg|Retábulo rococó
</gallery>
Resultado
  • Vestes litúrgicas
    Vestes litúrgicas
  • Retábulo rococó
    Retábulo rococó

Ver também

[editar | editar código]

Referências

  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.
Obtida de "https://pt.wikiversity.org/w/index.php?title=Manual_do_Leone/Módulo_1&oldid=174636"