Atributos

From WikiEducator
Jump to: navigation, search






Icon key points.gif

Pontos Chave

Acabámos de ver como inserir a sintaxe mais simples para inserir uma imagem numa página Wiki. Nesta subsecção vamos abranger alguns atributos que pode adicionar à sintaxe da sua imagem para:

  • alinhar / justificar imagens,
  • colocar as imagens dentro de molduras e adicionar legendas, e
  • criar miniaturas (pequenas imagens, que ao serem activadas, mostram a imagem no seu tamanho original) a partir das suas imagens de foma a poupar espaço numa página.



Apresentando a sintaxe

Muito concisamente, a sintaxe completa para fazer aparecer uma imagem é a seguinte:

   [[Image:nome do ficheiro|tipo|localização|tamanho|legenda]]

Notas:

  1. tipo refere-se à apresentação da imagem: quer apresentar a sua imagem como uma miniatura ou dentro de uma moldura;
  2. localização permite-lhe especificar onde pretende que a imagem apareça na página, por exemplo, alinhada à esquerda, ao centro ou à direita;
  3. tamanho permite-lhe especificar o tamanho da imagem na página;
  4. legenda permite-lhe adicionar uma descrição da sua imagem.

Na realidade, para inserir uma imagem, só precisa utilizar [[Image:nome do ficheiro]]. A maior parte das imagens deveria usar [[Image:nome|thumb|legenda]] (e não deveria especificar um tamanho). Os outros atributos são opcionais e podem ser inseridos na sintaxe em qualquer ordem. A seguir pode ver uma tabela com os atributos opcionais para imagens e os efeitos que terão ao aparecer nas páginas Wiki.

Icon present.gif
Dica: Ao princípio pode parecer confuso, mas experimente utilizar os atributos opcionais que lhe damos a seguir na sua área de rascunho ou na sua página de utilizador. Muito rapidamente irá ver como é fácil inserir atributos nas imagens! E não é preciso memorizar esta sintaxe, pois estes tutoriais estão permanentemente disponíveis online, como materiais de referência.

A tabela seguinte resume as diferentes opções que irá praticar em actividades que lhe damos mais à frente:

Atributos adicionais para imagens Resultado final na página
humb / thumbnail ou frame (moldura)

A imagem aparecerá com a formatação específica (veja os exemplos mais à frente).

Localização

right, left, center ou none. Determina o alinhamento da imagem na página. Se não determinar um alinhamento, assume alinhamento à esquerda.

Tamanho

{width}px ou {width}x{height}px, adapta o tamanho da imagem de acordo com as medidas especificadas para largura e altura, mas mantendo a proporcionalidade.

Legenda Qualquer elemento que não seja identificado como um dos atributos acima será assumido como texto de legenda.



Exemplos e actividades

Aqui pode ver uma imagem inserida usando a sintaxe mais simples:

[[Image:networkedlearning.jpg]]

Networkedlearning.jpg

As actividades que lhe apresentamos a seguir tem como objectivo proporcionar-lhe oportunidades para praticar as diferentes opções para manipular imagens numa página Wiki.

Inserindo uma imagem thumbnail com legenda

Usando a mesma imagem que usámos acima, adicionamos o atributo 'thumb' (miniatura), alinhado à direita e com uma legenda:

[[Image:networkedlearning.jpg|thumb|left|Creative Commons makes it flow.]]
Creative Commons makes it flow.


O tamanho assumido para uma miniatura de uma imagem são: 180 pixels. Se clicar na imagem, poderá ver a imagem com um tamanho maior.



Icon activity.jpg

Actividade

Usando a mesma imagem que temos vindo a usar, vá à sua área de rascunho ou à sua página de utilizador e insira uma imagem com os seguintes atributos:
  • Thumbnail (miniatura)
  • Alinhada ao centro
  • Com a legenda: "Esta é a minha primeira miniatura"




Neste caso deveria ter usado a sintaxe seguinte: [[Image:networkedlearning.jpg|thumb|center|Esta é a minha primeira miniatura]]. Repare que tem de usar a escrita Americana para a palavra "center".

Inserindo uma imagem com moldura

A seguir pode ver uma imagem com o atributo moldura:

[[Image:networkedlearning.jpg|frame|center|Creative Commons makes it flow.]]
Creative Commons makes it flow.

O atributo para moldura (frame), fará com que a imagem apareça na página com o seu tamanho original, emoldurada, independentemente dos atributos thumb ou tamanho. A legenda, se existir, aparecerá dentro da moldura. Se não inserir opções de alinhamento, o assumido é à direita.



Icon activity.jpg

Actividade

Usando a imagem que mandou para o servidor numa actividade anterior, dirija-se à sua área de rascunho ou à sua página de utilizador e insira uma imagem emoldurada com os seguintes atributos:
  • Alinhada à esquerda
  • Legenda com uma hiperligação ao arquivo WikiEducator news: "Esta é a minha imagem. No entanto, se quiser ler notícias antigas do WikiEducator, clique aqui."




Verifique se utilizou a sintaxe seguinte: "[Image:nome_da_sua_imagem_aqui.jpg|frame|left|Esta é a minha página, No entanto, se quiser ler notícias antigas do ''WikiEducator'', clique [[Old_news|aqui]].]] ". Acertou? Excelente!

Modificando o tamanho de uma imagem

Para controlar o tamanho da sua imagem pode usar o atributo tamanho (size) para designar um tamanho específico em pixels. A seguir pode ver um exemplo de uma imagem cujo tamanho foi designado, alinhada ao centro:

[[Image:networkedlearning.jpg|300px|center]]
Networkedlearning.jpg
Icon present.gif
Dica: Por vezes, ao adicionar imagens poderá se deparar com um problema na forma como elas podem 'flutuar' sobre o texto ou títulos na sua página. Para remediar este problema, tente adicionar o seguinte por baixo da sua imagem:
<br style="clear:both;" />

Estes códigos fazem com que o texto que pretende inserir a seguir à imagem apareça no local certo depois da imagem ser inserida na página Wiki.



Icon activity.jpg

Actividade

Parte 1:

Usando a mesma imagem com que tem vindo a trabalhar, inclua os seguintes atributos na sua área de rascunho ou na sua página de utilizador:

  • 350 pixels de largura
  • alinhada à direita
  • sem legenda

Parte 2: Experimente adicionar mais alguns atributos à sua imagem. Se a imagem for grande, adicione o atributo thumb para a reduzir . Se a sua imagem pode beneficiar de uma pequena descrição, adicione o atributo frame e uma legenda.





Em relação à primeira parte da actividade, veja se usou a sintaxe seguinte:

[[Image:networkedlearning.jpg|350px|right]]