HTML: Imagens (Versão em Vídeo)

Temos conversado sobre coelhos

todo esse tempo, descrevendo-os com
parágrafos e listas,

mas poderíamos colocar uma foto
na nossa página

e mostrar como é um coelho de verdade.

Para inserir uma foto na página,
usamos a tag img,

que, como pode adivinhar,
significa imagem.

se apenas digitarmos img,
não vemos nada.

Por que não?

Não falamos para o navegador qual
imagem mostrar.

Há milhões de imagens na internet,

e não queremos escolher uma
imagem aleatória.

porque pode ser algo grosseiro
que não gostamos,

e também não será o que queremos que seja.

Temos que dizer a URL da imagem.

A URL é o que aparece no topo das

barras de endereço dos
navegadores,

e é isso que é, um endereço.

É uma forma de encontrar algum recurso
na web,

e significa que só podemos inserir
uma imagem

se ela já estiver na internet em
algum lugar.

Não podemos apenas inserir imagens
que estão só no nosso computador.

Há várias formas de encontrar imagens
na internet,

mas estamos deixando mais fácil para
você aqui

fornecendo um selecionador de imagem
em uma coleção de fotos.

Para ele aparecer, precisamos adicionar

um atributo para nossa tag de imagem.

Um atributo é um pedaço de informação

adicional sobre a tag, e este é

o primeiro atributo que vimos.

Para dizer ao navegador a URL, vamos

adicionar um atributo com o nome "source"

e adicionaremos um espaço e
digitaremos "src".

Significa "source", mas é
muito importante

que digite "src" porque o navegador

irá ignorá-lo se digitarmos errado.

Agora, preciso colocar um sinal de igual

para dizer ao navegador qual é o
valor do atributo,

e agora adicionarei aspas, e o editor vai

fechar as aspas automaticamente,

valores de atributos devem sempre
estar entre aspas.

Normalmente, agora é quando começaríamos
a digitar nossa URL,

mas aqui na Khan Academy, é quando

nosso selecionador de imagem vai
aparecer.

Nós vamos escolher uma imagem,
e quero uma imagem de um coelho,

então eu clico na aba "animais"
e seleciono

o coelho adorável e clico 'OK'.

Viu que tem uma URL entre aspas agora,

e como a URL começa com 'http'?

É assim que sabemos que
está apontando

para alguma imagem na internet.

Veja! Tem um coelhinho na minha página!

Mas e se o servidor que hospeda a
imagem estivesse falhando, e o

navegador não pudesse carregar
a imagem?

Como o visitante saberia qual era minha
imagem incrível?

Eles não verão nada e se perguntarão
pelo resto

das vidas o que perderam.

É por isso que as img tags têm outro
atributo: alt

que usamos pra dizer aos navegadores

qual é o texto alternativo para
uma imagem.

Para adicionar outro atributo
só colocamos um espaço

depois das aspas finais do último,

depois digitamos alt=" "

e dentro das aspas, o texto será

alguma descrição útil da imagem

como "Coelho com orelhas caídas
no celeiro."

Isso também ajuda pessoas que
navegam pelas páginas

mas não podem enxergar, como um
deficiente visual.

Eles usam um aplicativo chamado
leitor de tela

que vai ler a página para eles,

descrevendo cada tag que vê.

Quando ele vê uma tag de imagem,
lê o texto do alt

já que deficientes visuais não podem
ver imagens,

então sempre use um texto no alt

para que o mundo todo possa ter
uma boa experiência na sua página.

De volta para imagem que podemos ver.

Está um pouco grande.

Vamos redimensioná-la.

Podemos fazer isso com mais atributos,

com largura (width) ou altura (height).

Digamos, largura (width) é igual a 100.
(width="100")

Agora ela tem 100 pixels de largura.

Está pequena demais.

Vamos colocar o cursor aqui dentro

para aumentar a imagem.

Parece bem melhor.

Vamos tentar adicionar a
altura (height).

Vou dizer, altura (height) é igual a 50.

Achatei meu coelhinho, pobrezinho!

É por isso que geralmente você deve
especificar apenas

largura ou altura, mas não ambos

porque você pode usar as dimensões erradas

e achatar seus coelhinhos, então vou
apenas deixar o navegador

calcular para decidir quais deveriam ser
as outras medidas.

Vou apagar o atributo height.

Agora que você sabe usar imagens,
comece a pensar em

combinar todas as tags que tem
na caixa de ferramentas,

listas com imagens e parágrafos,
os 10 animais mais doidos.

Só não coloque muitas imagens na
sua página

porque a pessoa acessando sua página

vai ter que carregar todas elas,

mas você ainda pode se divertir muito.

Legendado por [Pablo Vieira]
Revisado por [Fernando dos Reis]