Imagens

As imagens são uma parte essencial do web design. Elas tornam uma página web atrativa para o visitante. Podem ser facilmente incluídas em um documento HTML utilizando a tag <img>.

• src - atributo obrigatório. Seu valor é o caminho para o local da imagem. O caminho pode ser absoluto ou relativo;
• alt - atributo obrigatório. Fornece um texto alternativo que pode ser exibido quando a imagem não pode ser renderizada;
• width e height - especificam o tamanho da imagem em pixels. Sem esses atributos, uma imagem será renderizada em seu tamanho original.

Atributo alt

Tornamos a descrição da imagem informativa e significativa. Isso ajuda a descrever a imagem para pessoas que são visualmente deficientes ou incapazes de vê-la. Dessa forma, o navegador lerá o atributo alt, e o usuário poderá entender o motivo de termos essa imagem.

Imaginemos o seguinte exemplo. Temos uma fonte sobre corridas de cavalo. Queremos mostrar como os competidores se preparam para a corrida.

Um valor inadequado para o atributo alt seria:

html
Copiar código

Um valor adequado para o atributo alt seria:

html
Copiar código

Good value for the alt attribute will be:

The alt text "A man on a horse" is too generic and lacks context. It provides a basic description, but it doesn't convey useful details about the scene or the purpose of the image.

Nota

Para resumir a diferença entre caminhos relativos e absolutos, um caminho absoluto representa o link efetivo que qualquer pessoa pode usar para acessar uma imagem. Por outro lado, um caminho relativo é um link no contexto do seu próprio projeto. Ele se refere a uma imagem e caminho local que qualquer pessoa dentro do projeto pode acessar.

Relative path

It specifies the location of the image file relative to the current document. For example:

html
Copiar código

It means that the image.jpg file located in the images directory.

Please inspect the real example provided in the code sandbox below. You will find the images folder, which contains the sun.png file.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.

Note

To summarize the difference between relative and absolute paths, an absolute path represents the actual link that anyone can use to access an image. On the other hand, a relative path is a link within the context of your own project. It refers to a local image and path that anyone within the project can access.