Como colocar uma imagem em HTML?

 

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...

Seja bem vindo ao blog Espaço HTML

Com dicas que vão direto ao ponto sobre html

Quer deixar seu site mais profissional e memorável?

Aprenda a criar e adicionar um favicon personalizado em poucos passos. Descubra como esse pequeno ícone pode fazer toda a diferença na identidade da sua marca.

Para que serve o atributo loading="lazy" em imagens e iframes?

É o adiamento e eventualmente dispensa do carregamento de imagens que o usuário não irá visualizar imediatamente. Serve para melhorar a experiência de usuários com internet ruim e assim otimizar o SEO.

Desenvolvimento Web: Desvendando os Segredos da CSS, HTML e JS

Vamos desvendar juntos como essas linguagens fundamentais se combinam para criar não apenas estética visual, mas também uma presença online otimizada e impactante.

Cores para HTML: Desvendando o Universo das Cores em um Guia Completo para Design Visual e SEO Eficiente

Explore as infinitas possibilidades de design no HTML, desvendando os segredos das cores que cativam visitantes e elevam seu site nos rankings de busca.

Explorando o Universo da Codificação HTML: Caracteres Especiais, Entidades, Elementos, Números e Símbolos

Descubra o poder oculto por trás da codificação HTML: desde a elegância dos caracteres especiais até a versatilidade das entidades, elementos, números e símbolos.

Como dar espaço em html?

Desvende os truques do espaçamento em HTML e CSS com esta lista imperdível de 10 itens. A surpresa do número 6 vai redefinir suas noções de design web!

Exemplo de Aviso de Cookies Verificação de AdBlock