Curso Fundamentos de HTML: Construindo a Web
Sobre a Aula

Inserindo imagens em uma página HTML

A inclusão de imagens em uma página HTML é uma prática essencial para tornar o conteúdo visualmente atraente e envolvente para os visitantes.

Além de fornecer informações valiosas por meio de texto, as imagens podem transmitir mensagens de forma impactante, ilustrar conceitos e melhorar a experiência do usuário.

Dicas SEO

1 –  Nomeie suas imagens de forma descritiva: Ao nomear seus arquivos de imagem, utilize palavras-chave relevantes para que os mecanismos de busca possam entender o conteúdo visual. Por exemplo, em vez de “imagem1.jpg“, use “logo-da-empresa.jpg“.
2 –  Utilize a tag alt: A tag alt fornece uma descrição alternativa para a imagem, o que é importante para acessibilidade e SEO. Descreva a imagem de forma clara e objetiva, incluindo palavras-chave relevantes, se possível.
3 – Otimize o tamanho do arquivo: Imagens grandes podem tornar o carregamento da página lento. Certifique-se de otimizar o tamanho do arquivo, sem comprometer a qualidade visual. Existem ferramentas online que podem ajudar nesse processo.

Legibilidade

Ao inserir imagens em sua página HTML, é importante manter a legibilidade do conteúdo. Evite adicionar muitas imagens em sequência, pois isso pode distrair e sobrecarregar o leitor.

Certifique-se de que as imagens sejam relevantes para o conteúdo e complementem o texto, proporcionando uma experiência de leitura fluida.

Exemplo em código:

<!DOCTYPE html>
<html>
    <head>
        <title>Exemplo de Inserção de Imagens</title>
    </head>

    <body>
        <h1>Meu Site</h1>
        <p>
            Bem-vindo ao meu site! Aqui está uma
            imagem do meu logo:
        </p>
        <img src="logo-da-empresa.jpg" alt="Logo da Empresa" width="200" height="150">
        <p>
            Continue explorando nosso site para
            descobrir mais informações interessantes.
        </p>
    </body>

</html>

Nesse exemplo, utilizamos a tag <img> para inserir a imagem do logo da empresa na página HTML. O atributo src indica o caminho para o arquivo de imagem, o atributo alt fornece uma descrição alternativa e os atributos width e height especificam as dimensões da imagem.

Ao inserir imagens em suas páginas HTML, lembre-se de adaptar o código e os atributos às suas necessidades específicas. Além disso, verifique se os arquivos de imagem estão corretamente hospedados e acessíveis para que sejam exibidos corretamente aos visitantes.

A inclusão de imagens relevantes e bem otimizadas em suas páginas HTML pode enriquecer o conteúdo, tornar a experiência do usuário mais agradável e contribuir para uma melhor classificação nos mecanismos de busca.

Explore diferentes possibilidades e aproveite ao máximo o poder visual das imagens em seu site.

Quer mais informações sobre o assunto? clique em sabia mais

Livro - e-book de HTML para iniciante

Entrar na conversa
Rolar para cima