IFRN

Diretoria Acadêmica de Gestão e Tecnologia da Informação

Disciplina de Design Web e Arquitetura da Informação

Imagens e atributos de tags

Atributos de tags

Algumas tags aceitam atributos, os quais definem informação adicional ou detalhes da tag. Os atributos são sempre definidos na abertura da tag, possuem um nome e geralmente possuem um valor. No exemplo a seguir, a tag meta apresenta o uso do atributo charset com o valor UTF-8. 

    <meta charset="UTF-8">

Outro exemplo de atributo é lang, o qual define o idioma do conteúdo de sua tag. Assim, se utilizado na tag html, indica o idioma utilizado na página. Se utilizado em uma tag p, indica o idioma daquele parágrafo. 

  <!DOCTYPE html>
  <html lang="pt-br">
  <head>
  </head>
  <body>
    <p lang="en">The book is on the table.</p>
  </body>
  </html>

Imagens

img é a tag que permite a inserção de imagens em uma página web. img é uma tag órfã (dispensa fechamento) e sempre é acompanhada do atributo src. Este atributo é utilizado para indicar a localização do arquivo da imagem. Veja o exemplo a seguir e repare que o arquivo deve estar na mesma pasta que o documento HTML. 

  <!DOCTYPE html>
  <html>
  <head>
  </head>
  <body>
    <img src="logo.png">
    <p>O IFRN está presente em todas as regiões do RN através de seus 21 campi.</p>
  </body>
  </html>
Visualização da página na qual é possível ver o resultado da tag img

Além de arquivos localizados no próprio computador da página web, também é possível utilizar imagens disponíveis na internet. Para tal, basta utilizar a URL da imagem como valor do atributo src. Para obter a URL de uma imagem visualizada em uma página web, basta clicar com o botão direito do mouse sobre a imagem e selecionar a opção Copiar endereço da imagem. 

    <img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

alt é outro atributo que pode ser utilizado em conjunto com img. Este atributo serve para acrescentar uma descrição da imagem, a qual é apresentada quando o navegador não consegue carregar a imagem. Faça um teste: use o atributo alt para definir uma descrição, use o nome de um arquivo inexistente em src e veja o resultado.

Exercícios

1) Escreva uma página HTML com informações sobre três animais de sua escolha. Para cada um apresente: (a) o nome do animal com uma tag de cabeçalho; (b) uma imagem do animal; (c) um parágrafo com informações sobre o animal.

Referências