Capitulo – Imagem

Inserindo imagens no HTML

Geralmente, quando uma pessoa acessa um site ela está à procura de conteúdo que, na
maioria das vezes, está em formato de texto. No entanto, se as páginas web fossem formadas
apenas por texto, elas seriam muito monótonas e entediantes para a leitura do internauta.
Felizmente, temos à nossa disposição uma tag muito fácil de utilizar para inserir imagens ao
conteúdo das nossas páginas e a aprenderemos agora mesmo neste capítulo.

Inserção de Imagens
O uso de imagens em páginas web é indispensável tanto por uma questão estética
quanto para compreensão do conteúdo. O HTML possui uma tag específica para a
inclusão de imagens.
A tag <img> possibilita trabalhar com imagens. Os atributos dessa tag auxiliam
na definição do tamanho, da posição e da descrição da imagem.

<img src= “Local onde está a imagem”>

Vamos ver isso na prática?

Para inserirmos uma imagem em nossa página web temos que utilizar a tag <img> e
dentro dela informar onde a imagem está localizada através do atributo “src”
(abreviatura para “source” – local de armazenagem). Para entendermos melhor, vamos
a um exemplo:

1
 <img src="bandeira.jpg" />

No exemplo acima estamos inserindo em nossa página uma imagem chamada

“bandeira.jpg”. Note que a tag <img>, semelhante às tags <br /> e <hr />, é do tipo “tag
isolada” e por essa razão, temos uma só tag de abertura e fechamento, não
necessitando de um texto inserido nela.
Em algumas situações precisamos acrescentar mais informações às nossas tags
através de atributos, como no caso da tag <img>, em que o “src” informa qual é o
endereço da imagem que queremos exibir na nossa página. Existem diversos tipos de
atributos para as mais diversas situações e neste capítulo aprenderemos alguns deles
relativos à inserção de imagens.
Regra geral: Atributos são escritos dentro das tags seguidos por um sinal de igual e
entre aspas é declarado o valor do atributo.
O valor do atributo, no caso do “src”, deve ser o nome da imagem ou, quando
necessário, o endereço da imagem seguido do nome dela. Vamos exemplificar para
entender melhor:
<img src="bandeira.jpg" />

Exemplo 1: Apenas o nome da imagem

Para que esse comando html funcione precisamos que a imagem que você quer inserir
na página esteja nomeada exatamente assim: bandeira.jpg . Onde, “bandeira” é o
nome do arquivo e “jpg” é a extensão do tipo da imagem. Além dessas condições, é
imprescindível também que a imagem esteja na mesma pasta que a sua página html.

<img src="imagens/bandeira.jpg" />

Exemplo 2: Endereço (pasta) e nome da imagem

Já nesse exemplo, temos um hábito muito comum entre os desenvolvedores: separar

as imagens colocando-as dentro de uma única pasta. Nesse caso, estamos
informando através do atributo “src” que a mesma imagem (bandeira.jpg) está
localizada agora dentro de uma pasta chamada “imagens”.

2
Tipos de imagens: JPG, GIF e PNG

Tal como a extensão “.html” para documentos html, o “.jpg” informa ao navegador que o
arquivo é uma imagem. Veja abaixo os três tipos de imagens mais comuns:

 JPG (Joint Photographic Experts Group)

 GIF (Graphics Interchange Format)

 PNG (Portable Network Graphics)

Em geral, imagens do tipo GIF são mais utilizadas para desenhos, ícones e ilustrações. Por
trabalhar com apenas 256 cores, as imagens ficam com o arquivo muito leve e carregam
rapidamente no navegador. Além disso, o formato GIF permite inserir uma sequência de
imagens em um único arquivo para criar pequenas animações.

As imagens do tipo JPG são muito utilizadas em fotografias por aliar duas características
importantes: níveis razoáveis de qualidade de imagem (trabalha com 16,8 milhões de cores)
e geração de arquivos de tamanhos pequenos quando comparado a outros formatos.

Tradicionalmente os formatos GIF e JPG são os mais utilizados na internet, mas ultimamente
o formato PNG tem se tornado cada vez mais popular por reunir a qualidade das imagens JPG
(milhões de cores) e as características tão bem aceitas do formato GIF: animação, fundo
transparente e compressão sem perda de qualidade.

Atributos: alt, title, width e height

Toda vez que utilizamos a tag <img> obrigatoriamente temos que informar o atributo “src”.
Além dele existem alguns outros atributos que podem ser bem úteis quando estamos
trabalhando com imagens. Vamos conhecer então mais alguns atributos.

Atributo alt

Este atributo é usado para fornecer uma descrição textual da imagem, principalmente por suas
razões: Primeiro, caso a imagem não apareça para o usuário é exibido o texto contido no
atributo e, segundo, informa para os mecanismos de buscas sobre o conteúdo da imagem em
questão. Exemplo:

<img src="bandeira.jpg" alt="bandeira-do-brasil" />

3
Atributo title

Alguns navegadores mostram uma caixa pop-up quando o usuário passa o mouse
sobre a imagem. Este conteúdo é informado no atributo “title” e deve ser usado para
fornecer uma curta descrição da imagem. Exemplo:

<img src="bandeira.jpg" title=“Bandeira do Brasil hasteada” />

Colocando o ponteiro do mouse sobre a imagem, sem clicar, aparecerá uma caixa pop-
up semelhante à da imagem acima com o conteúdo do atributo “title”.

Atributos width e height

Outros dois atributos importantes na tag <img> são o “width” e “height”. Eles são usados para
definir respectivamente, a largura e a altura da imagem.

Os navegadores, tendo informações sobre a altura e a largura das imagens, não precisam
esperar que as imagens descarregarem completamente para continuar a exibir o resto da
página. Além disso, com os atributos “width” e “height”, você pode alterar a dimensão da
imagem, se eles não forem definidos, a imagem será inserida com seu tamanho real. Exemplo:

<img src="imagens/bandeira.jpg" width="180" height="240" />

4
 HTML - Aprenda a colocar imagens lado-a-lado

Hoje iremos aprender a alinhar imagens em HTML lado a lado de uma forma bem simples
usando a propriedade flexbox, você vai ver como fazê-lo passo a passo, mas caso queira o
código pronto para copiar e colar, está no final da página.

Exemplo:

Adicionando HTML

<div class="row">
<div class="coluna">
<img src="imagem1" alt="descrição da imagem"
style="width:100%">
</div>
<div class="coluna">
<img src="imagem2" alt="descrição da imagem"
style="width:100%">
</div>
<div class="coluna">

5
 <img src="imagem3" alt="descrição da imagem"
style="width:100%">
</div></div>

Legenda:
Propriedade Descrição

imagem Caminho URL específico da imagem

descrição da
Descrição da foto, pesquise para ler sobre importância da tag ALT
imagem

Essa propriedade irá dizer ao site para fazer com que a imagem preencha
width:100%
toda a área requisitada (não é necessário editá-la)

Adicionando o CSS

.coluna{
float: left;
width: 33.33%;
.row::after {
content: "";
clear: both;
display: table;
}

O valor 33.33% determina que haverá um limite de 3 imagens por linha (33,33% = 1/3),
caso você queira retirar essa limitação, é só apagar toda a linha width. Caso você queira
determinar outro número de imagem por linha, use a porcentagem que cada uma vai ocupar
indo pela lógica de frações (1/2=50%; 1/3 = 33,33%; 1/4 = 25%; 1/5 = 20%;)

2 imagens por linha = 50%

4 imagens por linha = 25%
5 imagens por linha = 20%
X imagens por linha = 1/X * 100 [%]

6
Deixando responsivo
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
Faz as três colunas se empilharem de forma distribuídas umas sobre as outras.

O valor 500px determina que a partir das telas com valores iguais ou menos que 500px, as
imagens irão se empilhar, você pode alterar esse valor de acordo com a sua necessidade.

Copiar e colar
Para quem não quer setar o CSS fora da caixa do HTML, ou seja, quer o código para copiar,
colar e usar logo:
<div class="row">
<div class="coluna">
<img src="imagem1" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem2" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem3" alt="descrição da imagem" style="width:100%">
</div></div>

<style>
.coluna{
float: left;
width: 33.33%;
.row::after {
content: "";
clear: both;
display: table;
7
}
</style>

@media screen and (max-width: 500px) {

.column {
width: 100%;
}
}

Deixar as imagens com link

Você só precisa pôr a tag <a> antes da <img> e fechá-la após a <img> acabar, por exemplo:

<div class="row">
<div class="coluna"><a href='http://url-destino'><img src=".jpg"
alt="" style="width:100%"></div></a>

8
Fontes:

https://www.hiperbytes.com.br/curso-de-html-aula3-inserindo-imagens-html/

http://www.maikbasso.com.br/2011/12/inserindo-e-manipulando-imagens-em-uma.html

https://www.homehost.com.br/blog/tutoriais/html-img/

https://www.amotrix.com/2012/03/html-aprenda-colocar-imagens-lado-lado.html

https://pt.stackoverflow.com/questions/288878/como-dispor-imagens-uma-ao-lado-da-outra-com-
t%C3%ADtulos-abaixo-em-css

https://cursos.alura.com.br/forum/topico-colocar-outra-imagem-ao-lado-da-ja-existente-34624

https://baiadoconhecimento.com/biblioteca/conhecimento/read/179961-como-colocar-uma-imagem-do-
lado-da-outra-html-css

https://www.devmedia.com.br/forum/imagens-uma-do-lado-da-outra-com-as-css/616642