Eu ainda não consegui entender quando inserir a imagem pelo html e quando inserir pelo css
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Eu ainda não consegui entender quando inserir a imagem pelo html e quando inserir pelo css
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:
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:
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.