Como colocar imagens no HTML tutorial passo a passo

Indicação
Aprenda como colocar imagens no html passo a passo

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

Este tutorial passo a passo ensinará como incluir imagens em sua página HTML. Aprenderá como usar a tag <img> para adicionar imagens à sua página, como especificar o caminho para a imagem e como adicionar atributos, além disso, discutiremos como adicionar legenda de forma semântica e ainda adicionar imagens de fundo com CSS. 

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

Para adicionar uma sombra de caixa a uma imagem usando CSS, você pode usar a propriedade box-shadow, seguindo a sintaxe básica: seletor { box-shadow: valor1 valor2 valor3 valor4 valor5; }
  • 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

Após ter feito toda a estilização ainda pode animar a sua imagem quando o mouse passar sobre ela, para isso utilize o seletor da sua imagem com o hover, e assim poderá definir as novas propriedades para quando estiver ativado. Como, por exemplo, seletor:hover{border: solid 1px black;} , isso ira adicionar uma borda preta a imagem quando passar o ponteiro do mouse.

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?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado.

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.