As imagens podem ser facilmente inseridas em qualquer seção em uma página HTML. Para inserir a imagem em uma página HTML, use as tags <img>. É uma tag vazia, contendo apenas atributos, uma vez que a tag de fechamento não é necessária.

Tenha em mente que você deve usar a tag <img> dentro <corpo>… </corpo> tag. O atributo src é usado para adicionar a fonte de imagem, ou seja, URL da imagem.

O atributo alt é para adicionar texto alternativo, largura para adicionar largura e altura para adicionar a altura da imagem.

Como colocar imagem no html

Como colocar imagem no html
Como colocar imagem no html

Veja aqui como colocar imagem no html, há caminhos diferentes que cada usuário pode tomar para completar esta etapa, por isso não se surpreenda se sua rota difere das outras.

1. Faça upload de sua imagem

Isso pode ser realizado com um serviço de hospedagem de imagens, um serviço FTP ou um serviço de hospedagem de blogs. Selecione o que funcionar melhor para você.

2. Abra seu documento HTML

Isso é autoexplicativo, apenas certifique-se de que é o documento HTML para o lugar onde você deseja inserir a imagem.

3. Copie e cole sua URL de imagem em uma tag IMG, adicione um SRC a ela

Identifique primeiro onde você gostaria de colocar sua imagem dentro do HTML e inserir a tag de imagem, <img>. Em seguida, pegue sua imagem carregada, copie a URL e coloque-a dentro dos parâmetros img prefácio por um src.

O resultado final desta etapa deve ser assim:

<img src=”(sua%20URL%20de%20imagem%20aqui)”>

4. Adicione atributo alt e toques finais

Isso ajuda a identificar o que a imagem implica. Por exemplo, se é uma foto de um guarda-chuva em uma praia, escreva a tag alt para incluir algo sobre um guarda-chuva de praia. Seja muito descritivo como se estivesse descrevendo para alguém que não podia olhar para ele.

Como colocar uma imagem em um diretório em HTML

Se você tem um site e está tentando inserir uma imagem em um diretório, o processo é relativamente simples. Veja como é feito em três passos fáceis:

  1. Copie a URL da imagem que deseja inserir.
  2. Em seguida, abra seu arquivo .html índice e insira-o no código img. Exemplo: <img src=”(sua%20URL%20de%20imagem%20aqui)”>
  3. Salve o arquivo HTML. Da próxima vez que você abri-lo, você verá a página web com sua imagem recém-adicionada.

Como inserir uma imagem de fundo em HTML

Se você quiser definir uma imagem como o fundo de uma página da Web ou um elemento HTML, em vez de simplesmente inserir a imagem na página, você precisará usar a propriedade de imagem de fundo CSS.

Esta propriedade CSS substituiu o atributo de imagem de fundo nas versões anteriores do HTML. É muito mais flexível e previsível do que o atributo HTML — e ainda é fácil de usar.

Para definir o valor da imagem em segundo plano, você tem que usar a seguinte sintaxe: url(‘ ‘);

Entre as aspas únicas, você colocará a URL da imagem ou o caminho do arquivo.

Como fazer um link de imagem em HTML

As imagens também são links eficazes — você pode fazer um link a partir de um ícone ou de uma imagem de alta resolução. De qualquer forma, o processo é o mesmo: Inclua seu elemento <img> em uma tag <a> (âncora), assim:

<a href="URL">
    <img src="URL" alt="descriptive text"/>
</a>

Tornando seu site visual

Adicionar imagens em seu site é importante tanto para sua experiência de visitante quanto para os mecanismos de busca. É fácil se você está construindo seu site com um sistema de gerenciamento de conteúdo ou do zero. Você só precisa saber um pouco de HTML e CSS.