Aulas
Disciplinas

Cursos / Informática para Internet / Autoria Web / Aula

arrow_back Aula 03 - HTML: Figuras, Tabelas, Listas e Formulários

Figuras

A inserção de imagens em páginas HTML é feita na seção de corpo da página (<body>...</body>), através do elemento <img/> ou <object>.

O elemento <img/>

A tag <img/> pode possuir basicamente 5 atributos: src, alt, longdesc, width e height. A seguir, você conhecerá cada um deles:

1) src – Indica o caminho do arquivo referente à figura, incluindo o seu formato (pode ser jpg, gif, png, dentre outros tipos). É interessante organizar as imagens usadas em uma página numa única pasta, para facilitar a manutenção dos arquivos. A seguir, é mostrado, de forma genérica, um exemplo da tag <img/> com o atributo src:

2) alt – Fornece uma descrição curta sobre a imagem quando o cursor move-se sobre a mesma e, por algum motivo, o navegador não consegue mostrá-la. No exemplo que segue, ao posicionar o mouse sobre a figura, o texto “Texto Descritivo” será exibido.

3) longdesc – Especifica um link para uma descrição extensa da imagem. Essa descrição deve suplementar a descrição provida pelo atributo alt. No exemplo a seguir, a imagem contém um link para o documento definido no atributo longdesc.

4) Width/Height – Especifica a largura e a altura da imagem, respectivamente. Os valores podem ser em pixels ou proporcionais ao tamanho que a figura ocupará na página.

Os atributos align, border e vspace/hspace, que seguem, responsáveis pela disposição da figura na página, também podem ser utilizados na tag <img/>, mas eles são DEPRECATED.

  • Align – Especifica o tipo de alinhamento entre a imagem e o texto da página. “center”, “left”, “right” e “top” são alguns dos possíveis valores para esse atributo. Eles posicionam a figura de maneira centralizada, à esquerda, à direita ou acima do texto, respectivamente.
  • Border – Determina a espessura da borda da imagem. No caso de não haver borda, esse atributo não precisará ser citado.
  • Vspace/Hspace – Especifica o espaço vertical e horizontal, respectivamente, que pode aparecer entre a imagem e o texto mais próximo ou até mesmo para outra imagem na linha corrente. É dado em pixels.

A Figura 1 (lado direito) mostra um código HTML que insere uma imagem na página, mostrada no lado esquerdo da mesma figura.

Exemplo do uso do elemento < img> e seus atributos

Os atributos: align, border, hspace, longdesc, and vspace não são mais suportados no HTML5.

Versão 5.3 - Todos os Direitos reservados