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]