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.
Adicione uma tag ao arquivo. Coloque a tag após o elemento sob o qual deseja que a imagem apareça quando o arquivo HTML for aberto em um navegador. A tag não possui uma tag de fechamento separada. Dentro da tag, você deve especificar a origem 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 do 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.
Adicione o alt atribuir à sua tag. Em HTML5, o atributo alt é obrigatório. Use este atributo para descrever a imagem caso ela não possa carregar. Se uma imagem não puder ser carregada, o navegador exibirá o texto inserido após o atributo alt. Além disso, o atributo alt é importante para software leitor de tela usado por pessoas com deficiência visual. O software lê o texto no atributo alt para que a pessoa com deficiência visual que visualiza seu site possa ouvir o que está na imagem, embora não possa ver.
Especifique as dimensões da imagem em pixels com o altura e largura atributos. Se você não especificar as dimensões, o navegador não saberá quanto espaço deve deixar para a imagem conforme a página carrega. Isso resulta em um carregamento da página instável, pois o texto é carregado primeiro, deixando um pequeno espaço para a imagem, e então se separa conforme a imagem carrega 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 na página para que a imagem seja preenchida quando terminar de carregar.
Teste seu código para ter certeza de que a imagem é exibida no local correto, abrindo seu arquivo HTML em um navegador.
Use CSS para mover uma imagem para o lado esquerdo ou direito da tela ou para contornar o texto. Por exemplo, você pode usar style = "float: left;" ou style = "float: right;" dentro da tag.
Se você não sabe a altura e a largura de uma imagem, é bom usar apenas o atributo de altura ou largura sozinho. 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 de estilo: style = "height: 100px; largura: 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.
Não use o atributo alt para tentar impulsionar o SEO da sua página. Os mecanismos de busca há muito sabem que alguns Web designers tentam preencher o atributo alt com palavras-chave extras e, portanto, ignoram o texto no atributo alt.
