Este é o quinto post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Estamos muito animados porque neste artigo iremos deixar o seu site mais bonito, pois agora você ira aprender a como colocar imagens no HTML.
Se você ainda não tem nenhuma noção sobre as tecnologias HTML e CSS, recomendamos que siga o guia “O que é HTML“.
Conteúdo
Como colocar imagens no HTML
Tag para imagem no HTML
Para adicionar imagens em uma página HTML, é preciso utilizar a tag <img> e especificar o caminho ou URL da imagem através do atributo “src”. Por exemplo: <img src=”caminho/da/imagem.jpg”>. É importante ter cuidado ao especificar o caminho da imagem, para garantir que ela seja carregada corretamente e esteja disponível no servidor.
Além disso, também temos os atributos title e alt que definem respectivamente o título e o texto alternativo da imagem, isso tem efeito para acessibilidade e SEO da sua página no geral, então é sempre bom definir esses parâmetros.
<!-- Tag imagem -->
<img decoding="async" src="imagem.png" title="Titulo" alt="Texto alternativo">
Muito simples não é mesmo? Mas e se quiser adicionar uma legenda a imagem como fazer? Siga abaixa a maneira certa de adicionar legendas a imagens, conforme o HTML5 semântico.
Como colocar imagem e legenda no HTML semântico com figure
Dando continuidade no HTML5 para exibir uma imagem com legenda deve ser usado a tag <figure> e dentro dela deve ser adicionado a tag da imagem. Além disso, para exibir a legenda deve ser adicionado a tag <figurecaption>, como no exemplo abaixo:
Dessa maneira o navegador pode identificar qual é a legenda de cada imagem.
<!-- imagem com legenda HTML5 -->
<figure>
<img decoding="async" src="imagem.png" title="Titulo" alt="Texto alternativo">
<figcaption>Aqui vai sua legenda</figcaption>
</figure>
Como colocar imagens no HTML com CSS
Além de usar a tag <img> para adicionar imagens à sua página HTML, também é possível usar CSS para colocar imagens de fundo. Para isso você pode usar a propriedade background-image em um seletor de elemento.
Se sentir dificuldade temos um artigo completo só para solucionar essa questão, então confira agora como colocar uma imagem no background com HTML e CSS.
Também pode usar outras propriedades CSS para controlar como a imagem de fundo é exibida. Por exemplo, a propriedade background-size permite controlar como a imagem deve ser redimensionada. A propriedade background-position permite controlar a posição da imagem de fundo em relação ao elemento. A propriedade background-repeat permite controlar se a imagem de fundo deve ser repetida ou não. Veja o exemplo abaixo:
<div class="background-image"></div>
.background-image {
background-image: url("image.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Estilizar imagens com CSS
Também é possível usar CSS para controlar a aparência e posicionamento das imagens. Para usar CSS para estilizar uma imagem, você precisará selecionar a imagem usando um seletor de CSS e aplicar as propriedades de estilo desejadas.
Tamanho ou dimensão da imagem
Por exemplo, para definir o tamanho de uma imagem como largura de 300 pixels e altura de 200 pixels, você pode usar o seguinte código CSS: seletor{ width: 300px; height: 200px; }.
Bordas da imagem
Logo, para adicionar e estilizar uma borda para imagem, você pode usar o seguinte código CSS: seletor{ border: solid 1px black; }. No primeiro parâmetro tera o estilo da borda, apos a espessura da borda e então sua cor. Alembrando que cada lado do elemento também pode ser estilizado separadamente com as propriedades border-left, border-right, border-top e border-bottom. Para bordas arredondadas basta utilizar a propriedade border-radius.
Sombra da imagem
- valor1: deslocamento horizontal;
- valor2: deslocamento vertical;
- valor3: desfoque;
- valor4: propagação;
- valor5: cor.
Siga um exemplo claro: box-shadow: 5px 5px 10px 0px black;
Aplicar filtros na imagem
O CSS oferece uma variedade de filtros que podem ser aplicados às imagens para alterar sua aparência. Alguns dos filtros mais comuns incluem:
- brightness(%): aumenta ou diminui o brilho da imagem. Um valor de 100% mantém o brilho original, enquanto valores maiores aumentam o brilho e valores menores diminuem.
- contrast(%): aumenta ou diminui o contraste da imagem. Um valor de 100% mantém o contraste original, enquanto valores maiores aumentam o contraste e valores menores diminuem.
- saturate(%): aumenta ou diminui a saturação da imagem. Um valor de 100% mantém a saturação original, enquanto valores maiores aumentam a saturação e valores menores diminuem.
- grayscale(%): converte a imagem para escala de cinza. Um valor de 100% converte a imagem completamente para escala de cinza, enquanto valores menores mantêm alguma cor original.
Para aplicar os filtros é só seguir a sintaxe simples: seletor { filter: brightness(150%); }, támbem pode adicionar mais de um filtro, só separar por espaço.
Imagem com efeito Hover
Exemplos de código para aprender como colocar imagens no HTML e CSS
Concluindo, é fundamental lembrar de utilizar caminhos (URLs) absolutos ou relativos corretos para as imagens e garantir que elas estejam disponíveis no servidor. Também sempre mantenha as imagens com tamanho otimizado para um desempenho melhor da sua página. Seguindo esses passos simples, é possível adicionar imagens de maneira eficiente em qualquer página HTML.
Agora siga mais exemplos didáticos para aprimorar tudo que foi aprendido nesse artigo:
<!-- Efeito preto e branco -->
<img decoding="async" class="img" src="imagem.png" alt="imagem com efeito preto e branco">
<style>
.img{
filter: grayscale(100%);
}
</style>
<!-- Com sombra e efeito hover -->
<img decoding="async" class="img" src="imagem.png" alt="imagem com efeito hover">
<style>
.img{
box-shadow: 5px 5px 10px 0px black;
}
.img:hover{
box-shadow: 5px 5px 20px 2px black;
}
</style>
Agora siga um exemplo mais avançado, aqui utilizamos a propriedade transition, para ter uma transição suave com o hover:
<!-- Imagem que almenta de tamanho com efeito hover -->
<img decoding="async" class="img" src="imagem.png" alt="Imagem que almenta com hover">
<style>
.img{
transition: all .5s ease;
}
.img:hover{
transform: scale(1.1);
}
</style>
Como se tornar um Desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
