>> Tecnologia eletrônica >  >> Lar inteligente >> Vida Inteligente

Como inserir uma imagem com HTML


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.