WEBVTT

00:00:00.271 --> 00:00:01.900
Temos conversado sobre coelhos

00:00:01.900 --> 00:00:05.800
todo esse tempo, descrevendo-os com
parágrafos e listas,

00:00:05.800 --> 00:00:09.228
mas poderíamos colocar uma foto
na nossa página

00:00:09.228 --> 00:00:12.060
e mostrar como é um coelho de verdade.

00:00:12.400 --> 00:00:16.149
Para inserir uma foto na página, 
usamos a tag <i>img</i>,

00:00:16.149 --> 00:00:19.466
que, como pode adivinhar, 
significa imagem.

00:00:19.466 --> 00:00:22.700
se apenas digitarmos <i>img</i>, 
não vemos nada.

00:00:22.700 --> 00:00:23.966
Por que não?

00:00:23.966 --> 00:00:27.511
Não falamos para o navegador qual 
imagem mostrar.

00:00:27.511 --> 00:00:29.284
Há milhões de imagens na internet,

00:00:29.284 --> 00:00:31.469
e não queremos escolher uma
imagem aleatória.

00:00:31.469 --> 00:00:33.930
porque pode ser algo grosseiro
que não gostamos,

00:00:34.699 --> 00:00:37.766
e também não será o que queremos que seja.

00:00:37.766 --> 00:00:40.925
Temos que dizer a URL da imagem.

00:00:40.939 --> 00:00:43.073
A URL é o que aparece no topo das

00:00:43.073 --> 00:00:44.770
barras de endereço dos
navegadores,

00:00:44.770 --> 00:00:46.874
e é isso que é, um endereço.

00:00:46.874 --> 00:00:49.301
É uma forma de encontrar algum recurso
na web,

00:00:50.265 --> 00:00:52.413
e significa que só podemos inserir 
uma imagem

00:00:52.413 --> 00:00:54.552
se ela já estiver na internet em 
algum lugar.

00:00:54.552 --> 00:00:58.012
Não podemos apenas inserir imagens
que estão só no nosso computador.

00:00:58.233 --> 00:01:00.772
Há várias formas de encontrar imagens
na internet,

00:01:00.772 --> 00:01:03.137
mas estamos deixando mais fácil para
você aqui

00:01:03.137 --> 00:01:06.026
fornecendo um selecionador de imagem
em uma coleção de fotos.

00:01:06.026 --> 00:01:07.967
Para ele aparecer, precisamos adicionar

00:01:07.967 --> 00:01:10.735
um atributo para nossa tag de imagem.

00:01:10.735 --> 00:01:12.800
Um atributo é um pedaço de informação

00:01:12.800 --> 00:01:14.772
adicional sobre a tag, e este é

00:01:14.772 --> 00:01:17.106
o primeiro atributo que vimos.

00:01:17.736 --> 00:01:19.714
Para dizer ao navegador a URL, vamos

00:01:19.714 --> 00:01:22.945
adicionar um atributo com o nome "<i>source</i>"

00:01:22.945 --> 00:01:26.490
e adicionaremos um espaço e 
digitaremos "<i>src</i>".

00:01:28.337 --> 00:01:30.866
Significa "source", mas é
muito importante

00:01:30.866 --> 00:01:32.733
que digite "src" porque o navegador

00:01:32.733 --> 00:01:35.333
irá ignorá-lo se digitarmos errado.

00:01:35.733 --> 00:01:37.870
Agora, preciso colocar um sinal de igual

00:01:38.100 --> 00:01:41.400
para dizer ao navegador qual é o 
valor do atributo,

00:01:41.400 --> 00:01:44.925
e agora adicionarei aspas, e o editor vai

00:01:44.925 --> 00:01:47.286
fechar as aspas automaticamente,

00:01:47.286 --> 00:01:51.053
valores de atributos devem sempre 
estar entre aspas.

00:01:51.838 --> 00:01:55.833
Normalmente, agora é quando começaríamos
a digitar nossa URL,

00:01:55.833 --> 00:01:57.600
mas aqui na Khan Academy, é quando

00:01:57.600 --> 00:02:00.135
nosso selecionador de imagem vai
aparecer.

00:02:00.135 --> 00:02:04.024
Nós vamos escolher uma imagem, 
e quero uma imagem de um coelho,

00:02:04.024 --> 00:02:06.630
então eu clico na aba "animais" 
e seleciono

00:02:06.630 --> 00:02:08.871
o coelho adorável e clico 'OK'.

00:02:10.238 --> 00:02:13.089
Viu que tem uma URL entre aspas agora,

00:02:13.089 --> 00:02:15.840
e como a URL começa com 'http'?

00:02:15.840 --> 00:02:17.666
É assim que sabemos que 
está apontando

00:02:17.666 --> 00:02:19.666
para alguma imagem na internet.

00:02:19.666 --> 00:02:22.134
Veja! Tem um coelhinho na minha página!

00:02:23.226 --> 00:02:26.233
Mas e se o servidor que hospeda a
imagem estivesse falhando, e o

00:02:26.233 --> 00:02:28.213
navegador não pudesse carregar 
a imagem?

00:02:28.213 --> 00:02:31.092
Como o visitante saberia qual era minha
imagem incrível?

00:02:31.092 --> 00:02:33.401
Eles não verão nada e se perguntarão
pelo resto

00:02:33.401 --> 00:02:35.367
das vidas o que perderam.

00:02:35.867 --> 00:02:39.353
É por isso que as <i>img</i> tags têm outro 
atributo: <i>alt</i>

00:02:39.353 --> 00:02:41.066
que usamos pra dizer aos navegadores

00:02:41.066 --> 00:02:44.108
qual é o texto alternativo para
uma imagem.

00:02:44.108 --> 00:02:46.579
Para adicionar outro atributo
só colocamos um espaço

00:02:46.579 --> 00:02:49.510
depois das aspas finais do último,

00:02:49.510 --> 00:02:53.635
depois digitamos <i>alt=" "</i>

00:02:53.635 --> 00:02:57.250
e dentro das aspas, o texto será

00:02:57.250 --> 00:02:58.922
alguma descrição útil da imagem

00:02:58.922 --> 00:03:03.746
como "Coelho com orelhas caídas 
no celeiro."

00:03:04.858 --> 00:03:07.310
Isso também ajuda pessoas que 
navegam pelas páginas

00:03:07.310 --> 00:03:09.805
mas não podem enxergar, como um 
deficiente visual.

00:03:09.805 --> 00:03:11.976
Eles usam um aplicativo chamado 
leitor de tela

00:03:11.976 --> 00:03:13.683
que vai ler a página para eles,

00:03:13.683 --> 00:03:15.701
descrevendo cada tag que vê.

00:03:15.701 --> 00:03:18.478
Quando ele vê uma tag de imagem, 
lê o texto do <i>alt</i>

00:03:18.478 --> 00:03:21.335
já que deficientes visuais não podem 
ver imagens,

00:03:21.535 --> 00:03:24.317
então sempre use um texto no <i>alt</i>

00:03:24.317 --> 00:03:28.076
para que o mundo todo possa ter 
uma boa experiência na sua página.

00:03:28.900 --> 00:03:31.233
De volta para imagem que podemos ver.

00:03:31.233 --> 00:03:32.893
Está um pouco grande.

00:03:32.893 --> 00:03:34.263
Vamos redimensioná-la.

00:03:34.263 --> 00:03:36.206
Podemos fazer isso com mais atributos,

00:03:37.037 --> 00:03:38.960
com largura (<i>width</i>) ou altura (<i>height</i>).

00:03:38.960 --> 00:03:43.159
Digamos, largura (<i>width</i>) é igual a 100.
(width="100")

00:03:43.975 --> 00:03:47.171
Agora ela tem 100 pixels de largura.

00:03:47.171 --> 00:03:49.423
Está pequena demais.

00:03:49.423 --> 00:03:51.347
Vamos colocar o cursor aqui dentro

00:03:51.347 --> 00:03:53.900
para aumentar a imagem.

00:03:54.023 --> 00:03:56.572
Parece bem melhor.

00:03:56.572 --> 00:03:58.603
Vamos tentar adicionar a
altura (<i>height</i>).

00:03:58.603 --> 00:04:00.945
Vou dizer, altura (<i>height</i>) é igual a 50.

00:04:02.608 --> 00:04:05.401
Achatei meu coelhinho, pobrezinho!

00:04:05.401 --> 00:04:08.764
É por isso que geralmente você deve 
especificar apenas

00:04:08.764 --> 00:04:10.969
largura ou altura, mas não ambos

00:04:10.969 --> 00:04:13.273
porque você pode usar as dimensões erradas

00:04:13.273 --> 00:04:16.800
e achatar seus coelhinhos, então vou 
apenas deixar o navegador

00:04:16.800 --> 00:04:20.884
calcular para decidir quais deveriam ser 
as outras medidas.

00:04:20.884 --> 00:04:22.500
Vou apagar o atributo <i>height</i>.

00:04:22.500 --> 00:04:25.266
Agora que você sabe usar imagens,
comece a pensar em

00:04:25.266 --> 00:04:27.971
combinar todas as tags que tem
na caixa de ferramentas,

00:04:27.971 --> 00:04:32.971
listas com imagens e parágrafos,
os 10 animais mais doidos.

00:04:33.301 --> 00:04:35.833
Só não coloque muitas imagens na 
sua página

00:04:35.833 --> 00:04:37.576
porque a pessoa acessando sua página

00:04:37.576 --> 00:04:40.006
vai ter que carregar todas elas,

00:04:40.006 --> 00:04:42.870
mas você ainda pode se divertir muito.

00:04:42.870 --> 00:04:45.000
Legendado por [Pablo Vieira]
Revisado por [Fernando dos Reis]