Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Inserir imagem pelo html ou pelo css?

Eu ainda não consegui entender quando inserir a imagem pelo html e quando inserir pelo css

3 respostas
solução!

Thiago, imagens sempre serão inseridas via HTML por via de regra, pela tag img

Lembrando que o HTML é uma linguagem de marcação, ou seja, ele marca elementos na sua página web como títulos, subtítulos, parágrafos e imagens por exemplo.

MASSSSSSSSS, se você quiser dar um ESTILO a um elemento específico com uma imagem (por exemplo, colocar uma imagem de fundo no background da sua página), ai sim você deve inserir a imagem via CSS.

Um exemplo seria body { background-image: url ("imagem.jpg");}

Então recapitulando:

  • Se você tiver intenção de apenas subir uma imagem na página para fins de marcação ou ilustrar um texto por exemplo, sobe via HTML.
  • Se você quiser dar estilo a um componente do HTML em específico (como o fundo da sua página, ou colocar uma foto de fundo em um botão, etc) sobe via CSS.

Espero ter te ajudado, um grande abraço e até mais!!

Pense em HTML como se fosse o conteúdo de sua página, se a imagem que você vai inserir tem uma relevância de conteúdo, seria interessante você inserir ela em seu HTML. Sempre se questione da seguinte forma: na ausência dessa imagem o conteúdo ainda faz sentido? Ou seja, quando a imagem não é necessária para que o leitor consiga entender o que você quer transmitir, então a imagem é apenas uma estilização para a página. Um exemplo de utilização no HTML seria a tag <img>. Outro exemplo seria:

<figure>
                    <img src="img/comecando-criar-logotipo.png" alt="">

                    <figcaption>Conheça as primeiras etapas para a criação de um logotipo</figcaption>
</figure>

Consegue perceber que no exemplo acima a gente estaria falando de uma imagem acompanhada de um comentário e ambas as tags se completam? Isso significa que a imagem é importante para o conteúdo, então ela deverá ser colocada no HTML. Segue o resultado desse exemplo:

Exemplo

Já no CSS você colocaria imagens que servem apenas para a estilização do seu site, sem o intuito de ser um conteúdo. Como por exemplo, rodapé, ícones (depende o contexto), banners e backgrounds.

Obrigado pessoal, agora entendi melhor.

Grande abraço.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software