1
00:00:00,271 --> 00:00:01,900
Temos conversado sobre coelhos
2
00:00:01,900 --> 00:00:05,800
todo esse tempo, descrevendo-os com
parágrafos e listas,
3
00:00:05,800 --> 00:00:09,228
mas poderíamos colocar uma foto
na nossa página
4
00:00:09,228 --> 00:00:12,060
e mostrar como é um coelho de verdade.
5
00:00:12,400 --> 00:00:16,149
Para inserir uma foto na página,
usamos a tag img,
6
00:00:16,149 --> 00:00:19,466
que, como pode adivinhar,
significa imagem.
7
00:00:19,466 --> 00:00:22,700
se apenas digitarmos img,
não vemos nada.
8
00:00:22,700 --> 00:00:23,966
Por que não?
9
00:00:23,966 --> 00:00:27,511
Não falamos para o navegador qual
imagem mostrar.
10
00:00:27,511 --> 00:00:29,284
Há milhões de imagens na internet,
11
00:00:29,284 --> 00:00:31,469
e não queremos escolher uma
imagem aleatória.
12
00:00:31,469 --> 00:00:33,930
porque pode ser algo grosseiro
que não gostamos,
13
00:00:34,699 --> 00:00:37,766
e também não será o que queremos que seja.
14
00:00:37,766 --> 00:00:40,925
Temos que dizer a URL da imagem.
15
00:00:40,939 --> 00:00:43,073
A URL é o que aparece no topo das
16
00:00:43,073 --> 00:00:44,770
barras de endereço dos
navegadores,
17
00:00:44,770 --> 00:00:46,874
e é isso que é, um endereço.
18
00:00:46,874 --> 00:00:49,301
É uma forma de encontrar algum recurso
na web,
19
00:00:50,265 --> 00:00:52,413
e significa que só podemos inserir
uma imagem
20
00:00:52,413 --> 00:00:54,552
se ela já estiver na internet em
algum lugar.
21
00:00:54,552 --> 00:00:58,012
Não podemos apenas inserir imagens
que estão só no nosso computador.
22
00:00:58,233 --> 00:01:00,772
Há várias formas de encontrar imagens
na internet,
23
00:01:00,772 --> 00:01:03,137
mas estamos deixando mais fácil para
você aqui
24
00:01:03,137 --> 00:01:06,026
fornecendo um selecionador de imagem
em uma coleção de fotos.
25
00:01:06,026 --> 00:01:07,967
Para ele aparecer, precisamos adicionar
26
00:01:07,967 --> 00:01:10,735
um atributo para nossa tag de imagem.
27
00:01:10,735 --> 00:01:12,800
Um atributo é um pedaço de informação
28
00:01:12,800 --> 00:01:14,772
adicional sobre a tag, e este é
29
00:01:14,772 --> 00:01:17,106
o primeiro atributo que vimos.
30
00:01:17,736 --> 00:01:19,714
Para dizer ao navegador a URL, vamos
31
00:01:19,714 --> 00:01:22,945
adicionar um atributo com o nome "source"
32
00:01:22,945 --> 00:01:26,490
e adicionaremos um espaço e
digitaremos "src".
33
00:01:28,337 --> 00:01:30,866
Significa "source", mas é
muito importante
34
00:01:30,866 --> 00:01:32,733
que digite "src" porque o navegador
35
00:01:32,733 --> 00:01:35,333
irá ignorá-lo se digitarmos errado.
36
00:01:35,733 --> 00:01:37,870
Agora, preciso colocar um sinal de igual
37
00:01:38,100 --> 00:01:41,400
para dizer ao navegador qual é o
valor do atributo,
38
00:01:41,400 --> 00:01:44,925
e agora adicionarei aspas, e o editor vai
39
00:01:44,925 --> 00:01:47,286
fechar as aspas automaticamente,
40
00:01:47,286 --> 00:01:51,053
valores de atributos devem sempre
estar entre aspas.
41
00:01:51,838 --> 00:01:55,833
Normalmente, agora é quando começaríamos
a digitar nossa URL,
42
00:01:55,833 --> 00:01:57,600
mas aqui na Khan Academy, é quando
43
00:01:57,600 --> 00:02:00,135
nosso selecionador de imagem vai
aparecer.
44
00:02:00,135 --> 00:02:04,024
Nós vamos escolher uma imagem,
e quero uma imagem de um coelho,
45
00:02:04,024 --> 00:02:06,630
então eu clico na aba "animais"
e seleciono
46
00:02:06,630 --> 00:02:08,871
o coelho adorável e clico 'OK'.
47
00:02:10,238 --> 00:02:13,089
Viu que tem uma URL entre aspas agora,
48
00:02:13,089 --> 00:02:15,840
e como a URL começa com 'http'?
49
00:02:15,840 --> 00:02:17,666
É assim que sabemos que
está apontando
50
00:02:17,666 --> 00:02:19,666
para alguma imagem na internet.
51
00:02:19,666 --> 00:02:22,134
Veja! Tem um coelhinho na minha página!
52
00:02:23,226 --> 00:02:26,233
Mas e se o servidor que hospeda a
imagem estivesse falhando, e o
53
00:02:26,233 --> 00:02:28,213
navegador não pudesse carregar
a imagem?
54
00:02:28,213 --> 00:02:31,092
Como o visitante saberia qual era minha
imagem incrível?
55
00:02:31,092 --> 00:02:33,401
Eles não verão nada e se perguntarão
pelo resto
56
00:02:33,401 --> 00:02:35,367
das vidas o que perderam.
57
00:02:35,867 --> 00:02:39,353
É por isso que as img tags têm outro
atributo: alt
58
00:02:39,353 --> 00:02:41,066
que usamos pra dizer aos navegadores
59
00:02:41,066 --> 00:02:44,108
qual é o texto alternativo para
uma imagem.
60
00:02:44,108 --> 00:02:46,579
Para adicionar outro atributo
só colocamos um espaço
61
00:02:46,579 --> 00:02:49,510
depois das aspas finais do último,
62
00:02:49,510 --> 00:02:53,635
depois digitamos alt=" "
63
00:02:53,635 --> 00:02:57,250
e dentro das aspas, o texto será
64
00:02:57,250 --> 00:02:58,922
alguma descrição útil da imagem
65
00:02:58,922 --> 00:03:03,746
como "Coelho com orelhas caídas
no celeiro."
66
00:03:04,858 --> 00:03:07,310
Isso também ajuda pessoas que
navegam pelas páginas
67
00:03:07,310 --> 00:03:09,805
mas não podem enxergar, como um
deficiente visual.
68
00:03:09,805 --> 00:03:11,976
Eles usam um aplicativo chamado
leitor de tela
69
00:03:11,976 --> 00:03:13,683
que vai ler a página para eles,
70
00:03:13,683 --> 00:03:15,701
descrevendo cada tag que vê.
71
00:03:15,701 --> 00:03:18,478
Quando ele vê uma tag de imagem,
lê o texto do alt
72
00:03:18,478 --> 00:03:21,335
já que deficientes visuais não podem
ver imagens,
73
00:03:21,535 --> 00:03:24,317
então sempre use um texto no alt
74
00:03:24,317 --> 00:03:28,076
para que o mundo todo possa ter
uma boa experiência na sua página.
75
00:03:28,900 --> 00:03:31,233
De volta para imagem que podemos ver.
76
00:03:31,233 --> 00:03:32,893
Está um pouco grande.
77
00:03:32,893 --> 00:03:34,263
Vamos redimensioná-la.
78
00:03:34,263 --> 00:03:36,206
Podemos fazer isso com mais atributos,
79
00:03:37,037 --> 00:03:38,960
com largura (width) ou altura (height).
80
00:03:38,960 --> 00:03:43,159
Digamos, largura (width) é igual a 100.
(width="100")
81
00:03:43,975 --> 00:03:47,171
Agora ela tem 100 pixels de largura.
82
00:03:47,171 --> 00:03:49,423
Está pequena demais.
83
00:03:49,423 --> 00:03:51,347
Vamos colocar o cursor aqui dentro
84
00:03:51,347 --> 00:03:53,900
para aumentar a imagem.
85
00:03:54,023 --> 00:03:56,572
Parece bem melhor.
86
00:03:56,572 --> 00:03:58,603
Vamos tentar adicionar a
altura (height).
87
00:03:58,603 --> 00:04:00,945
Vou dizer, altura (height) é igual a 50.
88
00:04:02,608 --> 00:04:05,401
Achatei meu coelhinho, pobrezinho!
89
00:04:05,401 --> 00:04:08,764
É por isso que geralmente você deve
especificar apenas
90
00:04:08,764 --> 00:04:10,969
largura ou altura, mas não ambos
91
00:04:10,969 --> 00:04:13,273
porque você pode usar as dimensões erradas
92
00:04:13,273 --> 00:04:16,800
e achatar seus coelhinhos, então vou
apenas deixar o navegador
93
00:04:16,800 --> 00:04:20,884
calcular para decidir quais deveriam ser
as outras medidas.
94
00:04:20,884 --> 00:04:22,500
Vou apagar o atributo height.
95
00:04:22,500 --> 00:04:25,266
Agora que você sabe usar imagens,
comece a pensar em
96
00:04:25,266 --> 00:04:27,971
combinar todas as tags que tem
na caixa de ferramentas,
97
00:04:27,971 --> 00:04:32,971
listas com imagens e parágrafos,
os 10 animais mais doidos.
98
00:04:33,301 --> 00:04:35,833
Só não coloque muitas imagens na
sua página
99
00:04:35,833 --> 00:04:37,576
porque a pessoa acessando sua página
100
00:04:37,576 --> 00:04:40,006
vai ter que carregar todas elas,
101
00:04:40,006 --> 00:04:42,870
mas você ainda pode se divertir muito.
102
00:04:42,870 --> 00:04:45,000
Legendado por [Pablo Vieira]
Revisado por [Fernando dos Reis]