Passo 1 de 6
Inserir uma imagem com img e src
Use img e src para inserir uma imagem, apontando para o arquivo correto a partir da localização da página HTML.
Trilha de aprendizado · Nível 4 · Tutorial 1
Inserir imagens com endereço válido, declarar suas dimensões e definir o texto alternativo conforme a função da imagem no conteúdo.
Inserir uma imagem com img e src
Use img e src para inserir uma imagem, apontando para o arquivo correto a partir da localização da página HTML. 3 min
Declarar dimensões sem distorcer a imagem
Use width e height para preservar a proporção da imagem e ajudar o navegador a reservar espaço durante o carregamento. 4 min
Identificar a função da imagem no contexto
Distinguir imagens informativas e decorativas pelo que acrescentam ao conteúdo e entender a finalidade do atributo alt. 3 min
Escrever um texto alternativo relevante
Escreva um alt que comunique a informação essencial da imagem sem repetir desnecessariamente o texto próximo. 3 min
Usar alt vazio em imagens decorativas
Marque imagens decorativas com alt="" e entenda por que deixar o atributo vazio é diferente de removê-lo. 3 min
Aplicar e revisar a marcação das imagens
Complete uma página com uma imagem informativa e uma decorativa, teste no navegador e revise caminhos, dimensões e alternativas textuais. 5 min
Passo 1 de 6
Use img e src para inserir uma imagem, apontando para o arquivo correto a partir da localização da página HTML.
O elemento img insere uma imagem no conteúdo da página. Ele é vazio: não recebe conteúdo interno nem tag de fechamento </img>.
O atributo src informa o endereço do arquivo de imagem. No exemplo abaixo, index.html e cachoeira.jpg estão na mesma pasta.
<img src="cachoeira.jpg" alt="Cachoeira entre rochas e árvores">O atributo alt já está preenchido nos exemplos. Vamos estudá-lo adiante; por enquanto, mantenha o valor fornecido.
site/
├── index.html
└── imagens/
└── cachoeira.jpgVocê está editando index.html. Considerando a organização acima, escolha o trecho que insere a foto da cachoeira.
Os caminhos que você já conhece também valem para src.
Agora, a página está em site/paginas/trilha.html, e a foto continua em site/imagens/cachoeira.jpg. A partir da pasta paginas, o caminho precisa subir um nível antes de entrar em imagens.
<img src="../imagens/cachoeira.jpg" alt="Cachoeira entre rochas e árvores">Dica
Compare o src com a localização real do arquivo: pasta, nome e extensão precisam corresponder. Respeite também maiúsculas e minúsculas. Alterar .jpg para .png no código não converte o arquivo.
site/
├── paginas/
│ └── equipe.html
└── midia/
└── equipe.pngComplete apenas o valor de src, sem as aspas. Use um caminho relativo à pasta de equipe.html.
<img src="____" alt="Equipe reunida no jardim da escola">
Passo 2 de 6
Use width e height para preservar a proporção da imagem e ajudar o navegador a reservar espaço durante o carregamento.
As dimensões intrínsecas são a largura e a altura próprias do arquivo de imagem. Uma foto de 1200 × 800 pixels tem 1200 pixels de largura e 800 de altura.
A proporção é a relação entre essas medidas. Para preservá-la, altere as duas pelo mesmo fator: dividindo ambas por 2, você obtém 600 × 400. Usar 600 × 800 reduziria apenas a largura, deixando a foto estreita.
width define a largura e height, a altura. Para exibir essa foto em 600 × 400 pixels, acrescente este trecho de atributos ao elemento img:
width="600" height="400"Dica
Use valores inteiros em pixels, sem escrever a unidade: width="600", não width="600px".
Você também pode declarar as dimensões originais: width="1200" height="800". Tanto o par original quanto um par proporcional preservam a forma da imagem.
Uma imagem tem dimensões intrínsecas de 900 × 600 pixels. Você quer exibi-la com 300 pixels de largura. Qual trecho preserva sua proporção?
A imagem pode demorar mais para carregar do que o texto. Ao encontrar width e height no HTML, o navegador já tem informações para reservar espaço antes de a imagem terminar de carregar.
Isso ajuda a evitar que o conteúdo abaixo mude de posição quando a imagem aparecer.
Exemplo
Sem espaço reservado, o parágrafo pode aparecer perto do topo e depois ser empurrado para baixo pela foto.
Com width="600" height="400", o navegador pode reservar uma área de 600 × 400 pixels para a foto, mantendo o parágrafo abaixo dela durante o carregamento.
Dica
Exibir uma foto de 1200 × 800 em 600 × 400 pixels não modifica o arquivo. Suas dimensões intrínsecas e seu tamanho em bytes continuam iguais: mudar width e height não comprime a imagem nem reduz o que precisa ser baixado.
Um arquivo mede 1000 × 600 pixels. Para exibi-lo com metade da largura e metade da altura, complete o trecho de atributos do img.
Digite os dois atributos na ordem width e height, separados por um espaço e com aspas duplas:
____
Mesmo antes de a imagem terminar de carregar, o navegador pode usar width e height para reservar espaço para ela.
Passo 3 de 6
Distinguir imagens informativas e decorativas pelo que acrescentam ao conteúdo e entender a finalidade do atributo alt.
Uma imagem é informativa quando comunica informação relevante para compreender o conteúdo.
É decorativa quando apenas compõe o visual, sem acrescentar informação necessária naquele contexto.
No elemento img, o atributo alt oferece uma alternativa textual à informação transmitida pela imagem. Esse texto é importante para quem usa leitor de tela e também pode ser exibido quando a imagem não está disponível.
Dica
Imagine a página sem a imagem: alguma informação relevante deixaria de ser comunicada? Avalie sua função no conteúdo, não sua beleza, seu tamanho ou o formato do arquivo.
Em uma previsão do tempo, o texto mostra apenas “22 °C”. Um pequeno desenho de uma nuvem com gotas é a única indicação de chuva. Como classificar esse desenho?
A classificação não é uma característica fixa do arquivo. Veja como esta mesma foto pode ter funções diferentes.
Exemplo
O guia pede: “Observe o formato da borda desta folha”. A foto apresenta a característica que será estudada. Sem ela ou uma alternativa textual, falta a informação necessária para a atividade.
Exemplo
O aviso diz: “A oficina de jardinagem será sábado, às 10h, na biblioteca”. A mesma foto aparece apenas para enfeitar. Sem ela, todas as informações do aviso continuam disponíveis.
Associe cada uso à classificação e ao motivo. Nos dois casos da bicicleta, a foto é exatamente a mesma.
Toque em um item e depois no par correspondente.
Passo 4 de 6
Escreva um alt que comunique a informação essencial da imagem sem repetir desnecessariamente o texto próximo.
Antes de escrever o alt, leia o texto próximo e pergunte: “Que informação relevante só a imagem mostra aqui?” Descreva essa informação, em vez de enumerar todos os detalhes visuais.
Exemplo
Em uma página de produto, o texto informa: “Caneca Aurora, capacidade de 300 ml.” A foto mostra uma caneca amarela com alça larga sobre uma mesa de madeira. Para conhecer o produto, a cor e a alça importam; a mesa não.
<p>Caneca Aurora, capacidade de 300 ml.</p>
<img src="imagens/caneca-aurora.jpg" width="600" height="400"
alt="Caneca amarela com alça larga.">Uma página apresenta a “Estante Modular” e informa: “Disponível para retirada na loja.” A foto mostra três prateleiras abertas e duas gavetas na base. Qual é o alt mais adequado?
Use palavras suficientes para comunicar o significado, sem detalhes que não ajudam naquele contexto. Não há um limite rígido de caracteres para um bom alt.
Corte repetições desnecessárias, nomes de arquivo e descrições vagas, como “uma imagem bonita”. Não atribua à imagem características que ela não permite identificar.
Dica
Não automaticamente. Use expressões desse tipo apenas quando identificar a natureza da imagem acrescentar informação. Em uma página sobre técnicas artísticas, por exemplo, “Aquarela de uma paisagem...” pode ser relevante.
Título: Mochila Horizonte.
Texto próximo: “Modelo para o dia a dia, com capacidade de 20 litros.”
A foto apresenta a aparência e os compartimentos externos do produto.
Escreva apenas o texto que você colocaria no atributo alt. Foque no que ajuda a conhecer o produto, sem repetir desnecessariamente o texto próximo.
Passo 5 de 6
Marque imagens decorativas com alt="" e entenda por que deixar o atributo vazio é diferente de removê-lo.
Para uma imagem já identificada como decorativa, mantenha o atributo alt e deixe o valor vazio: alt="", sem nada entre as aspas.
Isso sinaliza que a imagem não precisa de uma alternativa textual própria e pode ser ignorada na leitura por tecnologias assistivas.
<img src="imagens/faixa.png" width="600" height="40" alt="">Dica
Usar alt="" não esconde nem remove a imagem da página. O valor vazio comunica uma decisão sobre a alternativa textual, não sobre a apresentação visual.
Uma imagem de bolinhas ao lado do título serve apenas como enfeite. Complete a lacuna com o atributo e seu valor para indicar que ela não precisa de alternativa textual própria.
<img src="imagens/bolinhas.png" width="80" height="20" ____>
Estas duas situações têm significados diferentes:
alt="": você declara que a imagem não precisa de alternativa textual própria.alt: você não fornece essa informação. A ausência não declara que a imagem é decorativa.<img src="imagens/faixa.png" width="600" height="40">Atenção
Sem alt, alguns leitores de tela podem anunciar informações pouco úteis, como o nome do arquivo faixa.png. Para esse enfeite, a correção é acrescentar alt="", não deixar o atributo ausente.
Uma pessoa removeu alt="" de uma imagem decorativa e percebeu que ela continuou igual na tela. Por isso, concluiu que remover o atributo é equivalente a deixá-lo vazio. Essa conclusão está correta.
Passo 6 de 6
Complete uma página com uma imagem informativa e uma decorativa, teste no navegador e revise caminhos, dimensões e alternativas textuais.
Você vai completar uma página sobre o jardim da escola. A foto informa como as flores estão distribuídas; a faixa apenas enfeita o final da página.
Crie duas pastas lado a lado dentro do projeto:
paginas: salve nela a página da próxima tela como jardim.html.imagens: salve nela as duas imagens abaixo, com os nomes indicados.Use as dimensões informadas como referência para a atividade.
Dimensões de referência: 1200 × 800 pixels.
Dimensões de referência: 600 × 200 pixels. Uso na página: apenas decorativo.
Os dois elementos img estão incompletos. O primeiro receberá a foto; o segundo, a faixa decorativa.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jardim da escola</title>
</head>
<body>
<main>
<h1>Jardim da escola</h1>
<p>Veja a distribuição das flores ao lado do caminho.</p>
<img>
<p>Um espaço de convivência para toda a comunidade.</p>
<img>
</main>
</body>
</html>Complete cada img com src, width, height e alt.
Cole abaixo o trecho main completo. Depois, justifique brevemente suas duas escolhas de alt.
Salve paginas/jardim.html, abra a página no navegador e atualize após qualquer correção.
Se os arquivos salvos tiverem dimensões diferentes das referências, preserve a proporção real deles ao ajustar os valores.
As duas imagens carregaram sem distorção? Os atributos alt correspondem às funções das imagens? Registre o resultado e qualquer correção feita. Se não conseguiu testar no navegador, indique o que ficou pendente.
Resumo
Use este roteiro nas próximas páginas.
Parabéns! Você concluiu: Inserir imagens com dimensões e texto alternativo
Você concluiu “Inserir imagens com dimensões e texto alternativo”. Ao inserir uma imagem, revise tanto sua exibição quanto a informação que ela acrescenta ao conteúdo.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
