Como colocar uma imagem em HTML?

imagem html

Basta usar a tag img com o caminho especificado no src.

 

Para inserir um imagem em um site é usado a tag em html <img> e inserido o local onde essa imagem se encontra entre as aspas do src ficando algo assim:

<img src="caminho da imagem"> 

O caminho da imagem pode ser um diretório no computador(nesse caso só ira funcionar na máquina local), no servidor onde o site está hospedado ou no host de outro site.

Normalmente na estrutura do site é criado um diretório para receber as imagens com o nome de img, image ou imagens que pode ser na raiz do site ou no diretório assets. Isso é um padrão não é obrigatório.

Veja abaixo alguns exemplos:

 imagem no mesmo diretório do arquivo html sendo usado, pode ser no computador local ou servidor:

<img src="nome-da-imagem.jpg" >

Imagem em hospedada em outro site:

<img src="http://www.outro-site.com.br/imagens/nome-da-imagem.jpg">

Imagem hospedada no diretório em uma camada mais para dentro:

<img src="..assets/assets/nome-da-imagem.jpg">

Imagem localizada em um diretório mais abrangente do site.

<img src="../../img/nome-da-imagem.jpg">

Nesse último exemplo é usado dois pontos ".." e depois barra "/" para voltar do diretório que está o arquivo. Veja mais em como navegador por pastas no terminal ou arquivos.

Note pelos exemplos que as tags img não são fechadas isso ocorre porque quando o elemento não tem filiação não precisa sem fechado. Ou seja a tag img não recebe outros elementos apenas outras tags dentro dela mesmo.

Outras tags que são usadas junto com as imagens normalmente e são muito importantes serem preenchidas, mas não obrigatórias são as tags alt e title que servem para descrever as imagens. Cada uma das duas tags tem sua finalidade.

Esse é o básico para se inserir uma imagem no site, mas pode ser muito mais aprimorado como por exemplo: saber o melhor tamanho de imagens para usar no site, redimensionar imagens com html, tratar o tamanho das imagens com css, usar link em imagem, usar imagem de fundo, trabalhar melhor imagens para ter melhor resultado em seo, saber para que serve a tag alt em imagens, ou para que serve a tag title em imagens, usar filtro css para tratar imagens, inverter cor de imagens com css...

Quer acompanhar as novidade do site?

Leia mais em: ww.w3schools.com/tags/tag_img...

Como colocar uma imagem em HTML?

Última atualização: 2023-02-15

Palavras-Chaves