Incremente seus sites adicionando imagens a eles. Você pode inserir imagens em arquivos HTML usando o
tag, que você usa para especificar a localização da imagem na Internet, a altura e a largura da imagem e o texto alternativo que aparece se a imagem não carregar ou se alguém usar um leitor de tela para visualizar a página. Três tipos comuns de arquivos de imagem usados na Web são GIF, PNG e JPEG.
Etapa 1
Abra o arquivo HTML da página da Web à qual deseja adicionar uma imagem em um editor de texto como o Bloco de Notas ou um software de desenvolvimento da Web.
Etapa 2
Adicione um
marca para o arquivo. Coloque a tag após o elemento em que você deseja que uma imagem apareça quando o arquivo HTML for aberto em um navegador. A tag não tem uma tag de fechamento separada. Dentro da tag, você deve especificar a fonte da imagem que deseja exibir digitando a localização da imagem na internet com o
src atributo. Se a imagem estiver armazenada na mesma pasta que o arquivo HTML, digite o nome e a extensão da imagem. Se a imagem estiver armazenada em outro lugar, digite o URL completo da imagem.
Etapa 3
Adicione o
alt atribua à sua tag. Em HTML5, o atributo alt é obrigatório. Use este atributo para descrever a imagem caso ela não possa ser carregada. Se uma imagem não puder ser carregada, o navegador exibirá o texto digitado após o atributo alt. Além disso, o atributo alt é importante para softwares de leitura de tela usados por pessoas com deficiência visual. O software lê o texto no atributo alt para que a pessoa com deficiência visual que estiver visualizando seu site possa ouvir o que está na imagem mesmo que não possa vê-la.
Etapa 4
Especifique as dimensões da imagem em pixels com a
altura e
largura atributos. Se você não especificar as dimensões, o navegador não saberá quanto espaço deixar para a imagem enquanto a página é carregada. Isso resulta em uma página carregando de forma irregular, pois o texto é carregado primeiro, deixando um pequeno espaço para a imagem, depois se separa à medida que a imagem é carregada e faz com que o espaço se expanda. Com as dimensões especificadas, o navegador deixa exatamente a quantidade certa de espaço entre os outros elementos da página para que a imagem preencha quando terminar de carregar.
Etapa 5
Teste seu código para garantir que a imagem seja exibida no local correto abrindo o arquivo HTML em um navegador.
Dica
Use CSS para mover uma imagem para o lado esquerdo ou direito da tela ou ter texto em volta dela. Por exemplo, você pode usar style="float:left;" ou style="float:right;" dentro da etiqueta.
Se você não souber a altura e a largura de uma imagem, não há problema em usar apenas o atributo height ou width. Você também pode usar CSS para especificar a altura e a largura; por exemplo, com uma imagem de 100 por 100 pixels, use o atributo style:style="height:100px;width:100px."
Transforme a imagem em um link clicável colocando a tag dentro de um par de tags "a href". Por exemplo, se você deseja que uma imagem seja vinculada ao Facebook, digite o seguinte.
Aviso
Não use o atributo alt para tentar aumentar o SEO da sua página. Os mecanismos de pesquisa sabem há muito tempo que alguns designers da Web tentam encher o atributo alt com palavras-chave extras e, portanto, ignoram o texto no atributo alt.
