HTML Básico – Imagens

Agora vamos falar sobre um dos elementos que fazem total diferença em documentos HTML ou páginas Web – As imagens.

Um detalhe antes, as vezes, falo sobre documentos web, outras vezes chamo de páginas web, mas vamos definir que são páginas, certo?

É cedo para explicar sobre isso, especialmente porque esse não é um curso de linguagem de programação e sim de linguagem de marcação.

Contudo, só para você saber, você pode estar vendo uma página com diversos elementos HTML mas aquele não ser um documento HTML.

Isso porque boa parte das linguagens de programação geram um código HTML como resultado para um processamento que ocorre no servidor, chamado de server-side.

Mas, isso foi apenas para esclarecer, já que estamos já quase encerrando o módulo Básico para entrar no Avançado!

Voltando a falar sobre as imagens, elas é que tornam nossas páginas da web mais interessantes visualmente, mais coloridas, mais agradáveis.

Já vimos como inseri-las nas aulas anteriores, mas, a tag que usamos é a <img>, que é varia, ou seja, não precisa de uma tag de fechamento.

Aqui estão alguns exemplos:

<img src="imagens/nomedaimage.jpg" alt="Descrição da Imagem1">
<img src="https://urldaimagem.com.br/imagens/imagem.png alt="Imagem 2">

As tags imagens precisam necessariamente do atributo src (fonte) para informar a localização da imagem, que pode, como vimos, usar um URL absoluto ou relativo.

Outro atributo que não é obrigatório, mas é muito importante é o alt (texto alternativo), porque ele traz uma informação em texto sobre uma imagem e que é lido pelos motores de busca.

Outra coisa importante sobre o atributo alt é que ele será mostrado caso a imagem não estja disponível ou não puder ser exibida por alguma razão.

Definindo o tamanho de uma imagem

É possível atribuir as dimensões da imagem a ser mostrada na página usando os atributos width(largura) e height(largura) que são, por padrão, interpretados em pixels.

Aqui estão alguns exemplos:

<img src="imagens/gato.jpg" alt="Gato" width="300" height="300">
<img src="http://exemplo.com.br/img/cachorro.jpg" alt="Cachorro" width="250" height="150">

Contudo, é possível também usar os atributos com o mesmo nome no CSS para definir as dimensões dessas imagens, então ficariam assim:

<img src="imagens/gato.jpg" alt="Gato" style="width:300px; height:300px;">
<img src="http://exemplo.com.br/img/cachorro.jpg" style="width:100%; height:auto;">

Vale dizer que se você fizer desse modo, deve lembrar que estilos embutidos têm prioridade mais alta, portanto, isso vai fazer com que estilos externos ou incorporados não alterem as dimensões (em teoria).

Outra coisa, diferente de usar os atributos, se for usar estilo CSS embutido, você precisa especificar a unidade de medida do tamanho, geralmente em pixel (px).

Nota: É altamente recomendável especificar as dimensões da imagem, mesmo que sejam em percentuais para que os navegadores possam alocar o espaço mesmo antes de carregar as imagens.

Elementos de imagem no HTML5

Falei sobre definir as imagens com dimensões em percentuais – ou até automáticas – porque essas dimensões poderiam, e deveriam, variar de acordo com o tamanho da tela.

Imagine que você definiu o tamanho de 500px de largura (width), mas a página será carregada em um celular que tem uma largura de uns 350px, o que acha que aconteceria?

Além disso, você precisa saber que a redução de dimensão da imagem usando width e height não reduz o tamanho original do arquivo.

Para resolver essas questões, o HTML introduziu a tag <picture> que permite definir várias versões de uma imagem para diferentes tipos de dispositivos.

Portanto, podemos usar elementos <source>para especificar diferentes fontes para uma <img>final – Isso é bem legal!

Além disso, cada <source>pode especificar uma condição que é usada pelo navegador para determinar qual fonte deve ser usada.

Para ficar mais claro, aqui vai um exemplo:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-grande.png">
    <source media="(max-width: 500px)" srcset="logo-pequena.png">
    <img src="logo-padrao.png" alt="Meu Logotipo">
</picture>

Nota: O navegador vai avaliar cada <source> e escolherá a melhor correspondência ao tamanho da tela em questão. A tag <img> deve ser especificada como último elemento filho de <picture>

Mapas de Imagens

Aqui está um recurso que não é nada novo, mas que é extremamente interessante – mapas de imagens.

Eles funcionam “mapeando” a imagem e criando hiperlinks para capa item especificado.

Dito de outra maneira, os mapas servem para linkar partes de uma mesma imagem, sem ter que dividí-la como arquivos de imagens diferentes.

Imagine por exemplo, o mapa do Brasil e em cada estado teria um mapa com um link para uma página ou seção específica.

Isso é um assunto para uma aula à parte, mas aqui está a representação em HTML:

<img src="mapa-do-brasil.png" usemap="#brasil" alt="Brasil">
<map name="brasil">
    <area shape="circle" coords="137,231,71" href="rj.html" alt="Rio de Janeiro">
    <area shape="poly" coords="363,146,273,302,452,300" href="sp.html" alt="São Paulo">
    <area shape="rect" coords="520,160,641,302" href="bmg.html" alt="Minas Gerais">
</map>

Aqui vai uma breve explicação:

O atributo name da tag <map> é usado para fazer referência ao atributo usemap da tag <img>.

A tag <area> dentro da tag <map> define as áreas clicáveis passando o que chamamos de coordenadas da imagem.

Nota: Você pode usar diversas áreas clicáveis na imagem. Não use mapas de imagens como navegação principal porque os motores de busca não interpretam adequadamente.

Obs: Fazer isso manualmente é impossível, então, podemos usar ferramentas como o Adobe Dreamwever ou ferramentas online como esta (clique aqui), para criar mapas de imagens.

Navegação

<< HTML Básico – EstilosHTML Básico – Tabelas >>