Os elementos gráficos em HTML são fundamentais para criar interfaces visuais interativas e atraentes. Esses elementos permitem a inclusão de imagens, gráficos vetoriais, vídeos e animações em uma página web, melhorando a experiência do usuário e tornando o conteúdo mais dinâmico. Neste post, vamos explorar os principais elementos gráficos disponíveis no HTML e como utilizá-los corretamente.
Principais elementos gráficos em HTML
- Imagens (
<img>) - SVG (Scalable Vector Graphics)
- Canvas (
<canvas>) - Vídeos (
<video>) - Áudio (
<audio>) - Figura e Legenda (
<figure>e<figcaption>)
Inserção de imagens:
O elemento <img> é o mais usado para exibir imagens estáticas em uma página web. Ele permite a inserção de arquivos de imagem como JPEG, PNG, GIF, entre outros.
<img src="https://www.criandobits.com.br/images/logo_criandoBits.png" alt="Logotipo CriandoBits" width="200" height="60" title="Logotipo">
A propriedade alt cria um rótulo para a imagem, mostrando o texto no lugar da imagem quanto esta não estiver disponível.
A propriedade width representa a largura da imagem e height a altura.
A propriedade title mostra o título da imagem ao passar o mouse sobre a mesma.
Dicas:
Sempre use o atributo alt para descrever a imagem, especialmente para usuários que dependem de leitores de tela. Otimize suas imagens para web, reduzindo o tamanho dos arquivos sem comprometer a qualidade.
Textura/Imagem de fundo:
<body background="imagem">Cor de fundo:
<body bgcolor="imagem">Gráficos Vetoriais SVG (<svg>)
O SVG é um formato de imagem vetorial que pode ser escalado sem perder qualidade, ao contrário de imagens baseadas em pixels. É ideal para gráficos como logotipos, ícones e formas geométricas.
Exemplo básico de um gráfico SVG:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>Esse código cria um círculo amarelo com uma borda verde. O SVG é poderoso porque permite animar e manipular graficamente elementos diretamente no HTML.
Vantagens do SVG:
- Escalabilidade infinita sem perda de qualidade.
- Manipulação direta via CSS e JavaScript.
- Ideal para gráficos interativos.
Canvas (<canvas>)
O <canvas> é um elemento gráfico usado para renderizar gráficos 2D ou 3D dinâmicos via JavaScript. Ao contrário do SVG, o Canvas não mantém uma estrutura de objetos gráficos; ele desenha pixels diretamente no navegador, ideal para animações, jogos ou gráficos interativos em tempo real.
Exemplo básico de uso do <canvas>:
<canvas id="meuCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("meuCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 20, 100, 50);
</script>Neste exemplo, criamos um retângulo azul dentro de um canvas. A partir daí, você pode criar gráficos mais complexos, animações e até jogos.
Vantagens do Canvas:
- Ideal para gráficos dinâmicos e animações.
- Flexível, mas requer manipulação via JavaScript.
- Útil para gráficos interativos e jogos em 2D.
Vídeo (<video>)
O elemento <video> permite a inserção e controle de vídeos diretamente na página HTML. Ele inclui uma série de controles para reproduzir, pausar, ajustar o volume, entre outras funções.
Exemplo básico de uso do <video>:
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Seu navegador não suporta vídeos HTML5.
</video>controls: Exibe os controles padrão de reprodução.width: Define a largura do vídeo.source: Define a URL do arquivo de vídeo.
Dicas:
- Ofereça suporte a diferentes formatos de vídeo (MP4, WebM, Ogg) para garantir compatibilidade com vários navegadores.
- Inclua uma mensagem alternativa para navegadores que não suportam vídeos.
Áudio (<audio>)
O elemento <audio> funciona de maneira semelhante ao <video>, permitindo a inclusão de arquivos de som diretamente na página.
Exemplo básico de uso do <audio>:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>controls: Exibe os controles de reprodução (play, pause, volume).source: Define a URL do arquivo de áudio.
Assim como no <video>, ofereça diferentes formatos de áudio (MP3, Ogg) para garantir compatibilidade.
Figura e legenda (<figure> e <figcaption>)
O <figure> é usado para encapsular elementos gráficos como imagens, gráficos ou vídeos, enquanto o <figcaption> adiciona uma legenda descritiva. Esse par de elementos ajuda na organização do conteúdo gráfico, melhorando a acessibilidade e a semântica.
Exemplo de uso do <figure> e <figcaption>:
<figure>
<img src="imagem.jpg" alt="Descrição da imagem">
<figcaption>Legenda explicativa da imagem</figcaption>
</figure>A legenda no <figcaption> ajuda a descrever o conteúdo gráfico, melhorando a experiência do usuário e o SEO da página.
Os elementos gráficos em HTML permitem enriquecer suas páginas web com uma variedade de mídias, desde imagens e vídeos até gráficos interativos e áudio.
Cada elemento gráfico serve a um propósito específico e pode ser utilizado de maneira estratégica para melhorar a experiência do usuário e tornar o conteúdo mais acessível e atrativo. Seja usando imagens simples com <img>, gráficos vetoriais com SVG, ou vídeos com <video>, esses elementos são essenciais para qualquer site moderno.
Conheça a Danki Club e tenha acesso a uma infinidade de cursos na área de programação web, Android e IOS. Desenvolvimento de games, Blockchain e criptomoedas. Produtividade, marketing, empreendedorismo e muito mais!
CLIQUE NA IMAGEM ABAIXO E VEJA MAIS DETALHES:
Dúvidas ou sugestões sobre elementos gráficos em HTML? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários