0:00:00.271,0:00:01.900
Temos conversado sobre coelhos

0:00:01.900,0:00:05.800
todo esse tempo, descrevendo-os com[br]parágrafos e listas,

0:00:05.800,0:00:09.228
mas poderíamos colocar uma foto[br]na nossa página

0:00:09.228,0:00:12.060
e mostrar como é um coelho de verdade.

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

0:00:16.149,0:00:19.466
que, como pode adivinhar, [br]significa imagem.

0:00:19.466,0:00:22.700
se apenas digitarmos <i>img</i>, [br]não vemos nada.

0:00:22.700,0:00:23.966
Por que não?

0:00:23.966,0:00:27.511
Não falamos para o navegador qual [br]imagem mostrar.

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

0:00:29.284,0:00:31.469
e não queremos escolher uma[br]imagem aleatória.

0:00:31.469,0:00:33.930
porque pode ser algo grosseiro[br]que não gostamos,

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

0:00:37.766,0:00:40.925
Temos que dizer a URL da imagem.

0:00:40.939,0:00:43.073
A URL é o que aparece no topo das

0:00:43.073,0:00:44.770
barras de endereço dos[br]navegadores,

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

0:00:46.874,0:00:49.301
É uma forma de encontrar algum recurso[br]na web,

0:00:50.265,0:00:52.413
e significa que só podemos inserir [br]uma imagem

0:00:52.413,0:00:54.552
se ela já estiver na internet em [br]algum lugar.

0:00:54.552,0:00:58.012
Não podemos apenas inserir imagens[br]que estão só no nosso computador.

0:00:58.233,0:01:00.772
Há várias formas de encontrar imagens[br]na internet,

0:01:00.772,0:01:03.137
mas estamos deixando mais fácil para[br]você aqui

0:01:03.137,0:01:06.026
fornecendo um selecionador de imagem[br]em uma coleção de fotos.

0:01:06.026,0:01:07.967
Para ele aparecer, precisamos adicionar

0:01:07.967,0:01:10.735
um atributo para nossa tag de imagem.

0:01:10.735,0:01:12.800
Um atributo é um pedaço de informação

0:01:12.800,0:01:14.772
adicional sobre a tag, e este é

0:01:14.772,0:01:17.106
o primeiro atributo que vimos.

0:01:17.736,0:01:19.714
Para dizer ao navegador a URL, vamos

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

0:01:22.945,0:01:26.490
e adicionaremos um espaço e [br]digitaremos "<i>src</i>".

0:01:28.337,0:01:30.866
Significa "source", mas é[br]muito importante

0:01:30.866,0:01:32.733
que digite "src" porque o navegador

0:01:32.733,0:01:35.333
irá ignorá-lo se digitarmos errado.

0:01:35.733,0:01:37.870
Agora, preciso colocar um sinal de igual

0:01:38.100,0:01:41.400
para dizer ao navegador qual é o [br]valor do atributo,

0:01:41.400,0:01:44.925
e agora adicionarei aspas, e o editor vai

0:01:44.925,0:01:47.286
fechar as aspas automaticamente,

0:01:47.286,0:01:51.053
valores de atributos devem sempre [br]estar entre aspas.

0:01:51.838,0:01:55.833
Normalmente, agora é quando começaríamos[br]a digitar nossa URL,

0:01:55.833,0:01:57.600
mas aqui na Khan Academy, é quando

0:01:57.600,0:02:00.135
nosso selecionador de imagem vai[br]aparecer.

0:02:00.135,0:02:04.024
Nós vamos escolher uma imagem, [br]e quero uma imagem de um coelho,

0:02:04.024,0:02:06.630
então eu clico na aba "animais" [br]e seleciono

0:02:06.630,0:02:08.871
o coelho adorável e clico 'OK'.

0:02:10.238,0:02:13.089
Viu que tem uma URL entre aspas agora,

0:02:13.089,0:02:15.840
e como a URL começa com 'http'?

0:02:15.840,0:02:17.666
É assim que sabemos que [br]está apontando

0:02:17.666,0:02:19.666
para alguma imagem na internet.

0:02:19.666,0:02:22.134
Veja! Tem um coelhinho na minha página!

0:02:23.226,0:02:26.233
Mas e se o servidor que hospeda a[br]imagem estivesse falhando, e o

0:02:26.233,0:02:28.213
navegador não pudesse carregar [br]a imagem?

0:02:28.213,0:02:31.092
Como o visitante saberia qual era minha[br]imagem incrível?

0:02:31.092,0:02:33.401
Eles não verão nada e se perguntarão[br]pelo resto

0:02:33.401,0:02:35.367
das vidas o que perderam.

0:02:35.867,0:02:39.353
É por isso que as <i>img</i> tags têm outro [br]atributo: <i>alt</i>

0:02:39.353,0:02:41.066
que usamos pra dizer aos navegadores

0:02:41.066,0:02:44.108
qual é o texto alternativo para[br]uma imagem.

0:02:44.108,0:02:46.579
Para adicionar outro atributo[br]só colocamos um espaço

0:02:46.579,0:02:49.510
depois das aspas finais do último,

0:02:49.510,0:02:53.635
depois digitamos <i>alt=" "</i>

0:02:53.635,0:02:57.250
e dentro das aspas, o texto será

0:02:57.250,0:02:58.922
alguma descrição útil da imagem

0:02:58.922,0:03:03.746
como "Coelho com orelhas caídas [br]no celeiro."

0:03:04.858,0:03:07.310
Isso também ajuda pessoas que [br]navegam pelas páginas

0:03:07.310,0:03:09.805
mas não podem enxergar, como um [br]deficiente visual.

0:03:09.805,0:03:11.976
Eles usam um aplicativo chamado [br]leitor de tela

0:03:11.976,0:03:13.683
que vai ler a página para eles,

0:03:13.683,0:03:15.701
descrevendo cada tag que vê.

0:03:15.701,0:03:18.478
Quando ele vê uma tag de imagem, [br]lê o texto do <i>alt</i>

0:03:18.478,0:03:21.335
já que deficientes visuais não podem [br]ver imagens,

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

0:03:24.317,0:03:28.076
para que o mundo todo possa ter [br]uma boa experiência na sua página.

0:03:28.900,0:03:31.233
De volta para imagem que podemos ver.

0:03:31.233,0:03:32.893
Está um pouco grande.

0:03:32.893,0:03:34.263
Vamos redimensioná-la.

0:03:34.263,0:03:36.206
Podemos fazer isso com mais atributos,

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

0:03:38.960,0:03:43.159
Digamos, largura (<i>width</i>) é igual a 100.[br](width="100")

0:03:43.975,0:03:47.171
Agora ela tem 100 pixels de largura.

0:03:47.171,0:03:49.423
Está pequena demais.

0:03:49.423,0:03:51.347
Vamos colocar o cursor aqui dentro

0:03:51.347,0:03:53.900
para aumentar a imagem.

0:03:54.023,0:03:56.572
Parece bem melhor.

0:03:56.572,0:03:58.603
Vamos tentar adicionar a[br]altura (<i>height</i>).

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

0:04:02.608,0:04:05.401
Achatei meu coelhinho, pobrezinho!

0:04:05.401,0:04:08.764
É por isso que geralmente você deve [br]especificar apenas

0:04:08.764,0:04:10.969
largura ou altura, mas não ambos

0:04:10.969,0:04:13.273
porque você pode usar as dimensões erradas

0:04:13.273,0:04:16.800
e achatar seus coelhinhos, então vou [br]apenas deixar o navegador

0:04:16.800,0:04:20.884
calcular para decidir quais deveriam ser [br]as outras medidas.

0:04:20.884,0:04:22.500
Vou apagar o atributo <i>height</i>.

0:04:22.500,0:04:25.266
Agora que você sabe usar imagens,[br]comece a pensar em

0:04:25.266,0:04:27.971
combinar todas as tags que tem[br]na caixa de ferramentas,

0:04:27.971,0:04:32.971
listas com imagens e parágrafos,[br]os 10 animais mais doidos.

0:04:33.301,0:04:35.833
Só não coloque muitas imagens na [br]sua página

0:04:35.833,0:04:37.576
porque a pessoa acessando sua página

0:04:37.576,0:04:40.006
vai ter que carregar todas elas,

0:04:40.006,0:04:42.870
mas você ainda pode se divertir muito.

0:04:42.870,0:04:45.000
Legendado por [Pablo Vieira][br]Revisado por [Fernando dos Reis]