1
resposta

Organização da pasta

Uma dica para criação do projeto, é deixar as imagens em uma pasta única, no caso, como as imagens que utilizamos, criamos a pasta dentro da pasta do projeto, e para acessarmos essas imagens no projetos, usamos a tag img, da seguinte forma:

<img id="banner" src="imagens/banner.jpg">

Além disso, podemos melhorar o nosso código, colocando uma espécie de legenda para a nossa imagem que no código fica apenas o nome e extensão da imagem, mas podemos colocar uma espécie de legenda para situarmos do que se trata realmente, e isso pode ser feito com o uso da função "alt", da seguinte forma na tag img:

<h1><img src="imagens/logo.png" alt="Logo da barbearia"></h1>
1 resposta

Boa Reirysson, só um ponto: essa tag alt é muito mais do que apenas uma legenda para situarmos do que se trata a imagem. Os dois principais objetivos dela são:

  • Caso, por algum motivo, a sua foto não seja carregada, o texto do atributo alt será exibido para o usuário, exemplo: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Perceba que a foto não foi carregada, e no lugar dela, há um texto escrito: "Beterrabas assadas". Esse texto é o texto do alt.

  • Outro ponto sobre o alt, e não menos importante, é que pessoas que possuem algum tipo de deficiência visual utilizam leitores de tela, onde esses leitores descrevem para elas (através de uma voz meio robótica), os conteúdos do site, e no caso das imagens, os leitores "falam" o que está escrito no atributo alt daquela imagem. Sites de busca como o Google, por exemplo, levam muito em consideração a utilização desta tag alt nas imagens, já que um dos pontos de analise de um site, para rankear na página de buscas, é a acessibilidade, ou seja, o quanto o seu site é inclusivo para pessoas que possuem algum tipo de deficiência. Além disso, tem esse ponto que você comentou também, que em um site com várias imagens, o alt ajuda a identificar cada uma, na hora de fazer alguma alteração no código. Valeu !