[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:01.90,Default,,0000,0000,0000,,Temos conversado sobre coelhos
Dialogue: 0,0:00:01.90,0:00:05.80,Default,,0000,0000,0000,,todo esse tempo, descrevendo-os com\Nparágrafos e listas,
Dialogue: 0,0:00:05.80,0:00:09.23,Default,,0000,0000,0000,,mas poderíamos colocar uma foto\Nna nossa página
Dialogue: 0,0:00:09.23,0:00:12.06,Default,,0000,0000,0000,,e mostrar como é um coelho de verdade.
Dialogue: 0,0:00:12.40,0:00:16.15,Default,,0000,0000,0000,,Para inserir uma foto na página, \Nusamos a tag {\i1}img{\i0},
Dialogue: 0,0:00:16.15,0:00:19.47,Default,,0000,0000,0000,,que, como pode adivinhar, \Nsignifica imagem.
Dialogue: 0,0:00:19.47,0:00:22.70,Default,,0000,0000,0000,,se apenas digitarmos {\i1}img{\i0}, \Nnão vemos nada.
Dialogue: 0,0:00:22.70,0:00:23.97,Default,,0000,0000,0000,,Por que não?
Dialogue: 0,0:00:23.97,0:00:27.51,Default,,0000,0000,0000,,Não falamos para o navegador qual \Nimagem mostrar.
Dialogue: 0,0:00:27.51,0:00:29.28,Default,,0000,0000,0000,,Há milhões de imagens na internet,
Dialogue: 0,0:00:29.28,0:00:31.47,Default,,0000,0000,0000,,e não queremos escolher uma\Nimagem aleatória.
Dialogue: 0,0:00:31.47,0:00:33.93,Default,,0000,0000,0000,,porque pode ser algo grosseiro\Nque não gostamos,
Dialogue: 0,0:00:34.70,0:00:37.77,Default,,0000,0000,0000,,e também não será o que queremos que seja.
Dialogue: 0,0:00:37.77,0:00:40.92,Default,,0000,0000,0000,,Temos que dizer a URL da imagem.
Dialogue: 0,0:00:40.94,0:00:43.07,Default,,0000,0000,0000,,A URL é o que aparece no topo das
Dialogue: 0,0:00:43.07,0:00:44.77,Default,,0000,0000,0000,,barras de endereço dos\Nnavegadores,
Dialogue: 0,0:00:44.77,0:00:46.87,Default,,0000,0000,0000,,e é isso que é, um endereço.
Dialogue: 0,0:00:46.87,0:00:49.30,Default,,0000,0000,0000,,É uma forma de encontrar algum recurso\Nna web,
Dialogue: 0,0:00:50.26,0:00:52.41,Default,,0000,0000,0000,,e significa que só podemos inserir \Numa imagem
Dialogue: 0,0:00:52.41,0:00:54.55,Default,,0000,0000,0000,,se ela já estiver na internet em \Nalgum lugar.
Dialogue: 0,0:00:54.55,0:00:58.01,Default,,0000,0000,0000,,Não podemos apenas inserir imagens\Nque estão só no nosso computador.
Dialogue: 0,0:00:58.23,0:01:00.77,Default,,0000,0000,0000,,Há várias formas de encontrar imagens\Nna internet,
Dialogue: 0,0:01:00.77,0:01:03.14,Default,,0000,0000,0000,,mas estamos deixando mais fácil para\Nvocê aqui
Dialogue: 0,0:01:03.14,0:01:06.03,Default,,0000,0000,0000,,fornecendo um selecionador de imagem\Nem uma coleção de fotos.
Dialogue: 0,0:01:06.03,0:01:07.97,Default,,0000,0000,0000,,Para ele aparecer, precisamos adicionar
Dialogue: 0,0:01:07.97,0:01:10.74,Default,,0000,0000,0000,,um atributo para nossa tag de imagem.
Dialogue: 0,0:01:10.74,0:01:12.80,Default,,0000,0000,0000,,Um atributo é um pedaço de informação
Dialogue: 0,0:01:12.80,0:01:14.77,Default,,0000,0000,0000,,adicional sobre a tag, e este é
Dialogue: 0,0:01:14.77,0:01:17.11,Default,,0000,0000,0000,,o primeiro atributo que vimos.
Dialogue: 0,0:01:17.74,0:01:19.71,Default,,0000,0000,0000,,Para dizer ao navegador a URL, vamos
Dialogue: 0,0:01:19.71,0:01:22.94,Default,,0000,0000,0000,,adicionar um atributo com o nome "{\i1}source{\i0}"
Dialogue: 0,0:01:22.94,0:01:26.49,Default,,0000,0000,0000,,e adicionaremos um espaço e \Ndigitaremos "{\i1}src{\i0}".
Dialogue: 0,0:01:28.34,0:01:30.87,Default,,0000,0000,0000,,Significa "source", mas é\Nmuito importante
Dialogue: 0,0:01:30.87,0:01:32.73,Default,,0000,0000,0000,,que digite "src" porque o navegador
Dialogue: 0,0:01:32.73,0:01:35.33,Default,,0000,0000,0000,,irá ignorá-lo se digitarmos errado.
Dialogue: 0,0:01:35.73,0:01:37.87,Default,,0000,0000,0000,,Agora, preciso colocar um sinal de igual
Dialogue: 0,0:01:38.10,0:01:41.40,Default,,0000,0000,0000,,para dizer ao navegador qual é o \Nvalor do atributo,
Dialogue: 0,0:01:41.40,0:01:44.92,Default,,0000,0000,0000,,e agora adicionarei aspas, e o editor vai
Dialogue: 0,0:01:44.92,0:01:47.29,Default,,0000,0000,0000,,fechar as aspas automaticamente,
Dialogue: 0,0:01:47.29,0:01:51.05,Default,,0000,0000,0000,,valores de atributos devem sempre \Nestar entre aspas.
Dialogue: 0,0:01:51.84,0:01:55.83,Default,,0000,0000,0000,,Normalmente, agora é quando começaríamos\Na digitar nossa URL,
Dialogue: 0,0:01:55.83,0:01:57.60,Default,,0000,0000,0000,,mas aqui na Khan Academy, é quando
Dialogue: 0,0:01:57.60,0:02:00.14,Default,,0000,0000,0000,,nosso selecionador de imagem vai\Naparecer.
Dialogue: 0,0:02:00.14,0:02:04.02,Default,,0000,0000,0000,,Nós vamos escolher uma imagem, \Ne quero uma imagem de um coelho,
Dialogue: 0,0:02:04.02,0:02:06.63,Default,,0000,0000,0000,,então eu clico na aba "animais" \Ne seleciono
Dialogue: 0,0:02:06.63,0:02:08.87,Default,,0000,0000,0000,,o coelho adorável e clico 'OK'.
Dialogue: 0,0:02:10.24,0:02:13.09,Default,,0000,0000,0000,,Viu que tem uma URL entre aspas agora,
Dialogue: 0,0:02:13.09,0:02:15.84,Default,,0000,0000,0000,,e como a URL começa com 'http'?
Dialogue: 0,0:02:15.84,0:02:17.67,Default,,0000,0000,0000,,É assim que sabemos que \Nestá apontando
Dialogue: 0,0:02:17.67,0:02:19.67,Default,,0000,0000,0000,,para alguma imagem na internet.
Dialogue: 0,0:02:19.67,0:02:22.13,Default,,0000,0000,0000,,Veja! Tem um coelhinho na minha página!
Dialogue: 0,0:02:23.23,0:02:26.23,Default,,0000,0000,0000,,Mas e se o servidor que hospeda a\Nimagem estivesse falhando, e o
Dialogue: 0,0:02:26.23,0:02:28.21,Default,,0000,0000,0000,,navegador não pudesse carregar \Na imagem?
Dialogue: 0,0:02:28.21,0:02:31.09,Default,,0000,0000,0000,,Como o visitante saberia qual era minha\Nimagem incrível?
Dialogue: 0,0:02:31.09,0:02:33.40,Default,,0000,0000,0000,,Eles não verão nada e se perguntarão\Npelo resto
Dialogue: 0,0:02:33.40,0:02:35.37,Default,,0000,0000,0000,,das vidas o que perderam.
Dialogue: 0,0:02:35.87,0:02:39.35,Default,,0000,0000,0000,,É por isso que as {\i1}img{\i0} tags têm outro \Natributo: {\i1}alt{\i0}
Dialogue: 0,0:02:39.35,0:02:41.07,Default,,0000,0000,0000,,que usamos pra dizer aos navegadores
Dialogue: 0,0:02:41.07,0:02:44.11,Default,,0000,0000,0000,,qual é o texto alternativo para\Numa imagem.
Dialogue: 0,0:02:44.11,0:02:46.58,Default,,0000,0000,0000,,Para adicionar outro atributo\Nsó colocamos um espaço
Dialogue: 0,0:02:46.58,0:02:49.51,Default,,0000,0000,0000,,depois das aspas finais do último,
Dialogue: 0,0:02:49.51,0:02:53.64,Default,,0000,0000,0000,,depois digitamos {\i1}alt=" "{\i0}
Dialogue: 0,0:02:53.64,0:02:57.25,Default,,0000,0000,0000,,e dentro das aspas, o texto será
Dialogue: 0,0:02:57.25,0:02:58.92,Default,,0000,0000,0000,,alguma descrição útil da imagem
Dialogue: 0,0:02:58.92,0:03:03.75,Default,,0000,0000,0000,,como "Coelho com orelhas caídas \Nno celeiro."
Dialogue: 0,0:03:04.86,0:03:07.31,Default,,0000,0000,0000,,Isso também ajuda pessoas que \Nnavegam pelas páginas
Dialogue: 0,0:03:07.31,0:03:09.80,Default,,0000,0000,0000,,mas não podem enxergar, como um \Ndeficiente visual.
Dialogue: 0,0:03:09.80,0:03:11.98,Default,,0000,0000,0000,,Eles usam um aplicativo chamado \Nleitor de tela
Dialogue: 0,0:03:11.98,0:03:13.68,Default,,0000,0000,0000,,que vai ler a página para eles,
Dialogue: 0,0:03:13.68,0:03:15.70,Default,,0000,0000,0000,,descrevendo cada tag que vê.
Dialogue: 0,0:03:15.70,0:03:18.48,Default,,0000,0000,0000,,Quando ele vê uma tag de imagem, \Nlê o texto do {\i1}alt{\i0}
Dialogue: 0,0:03:18.48,0:03:21.34,Default,,0000,0000,0000,,já que deficientes visuais não podem \Nver imagens,
Dialogue: 0,0:03:21.54,0:03:24.32,Default,,0000,0000,0000,,então sempre use um texto no {\i1}alt{\i0}
Dialogue: 0,0:03:24.32,0:03:28.08,Default,,0000,0000,0000,,para que o mundo todo possa ter \Numa boa experiência na sua página.
Dialogue: 0,0:03:28.90,0:03:31.23,Default,,0000,0000,0000,,De volta para imagem que podemos ver.
Dialogue: 0,0:03:31.23,0:03:32.89,Default,,0000,0000,0000,,Está um pouco grande.
Dialogue: 0,0:03:32.89,0:03:34.26,Default,,0000,0000,0000,,Vamos redimensioná-la.
Dialogue: 0,0:03:34.26,0:03:36.21,Default,,0000,0000,0000,,Podemos fazer isso com mais atributos,
Dialogue: 0,0:03:37.04,0:03:38.96,Default,,0000,0000,0000,,com largura ({\i1}width{\i0}) ou altura ({\i1}height{\i0}).
Dialogue: 0,0:03:38.96,0:03:43.16,Default,,0000,0000,0000,,Digamos, largura ({\i1}width{\i0}) é igual a 100.\N(width="100")
Dialogue: 0,0:03:43.98,0:03:47.17,Default,,0000,0000,0000,,Agora ela tem 100 pixels de largura.
Dialogue: 0,0:03:47.17,0:03:49.42,Default,,0000,0000,0000,,Está pequena demais.
Dialogue: 0,0:03:49.42,0:03:51.35,Default,,0000,0000,0000,,Vamos colocar o cursor aqui dentro
Dialogue: 0,0:03:51.35,0:03:53.90,Default,,0000,0000,0000,,para aumentar a imagem.
Dialogue: 0,0:03:54.02,0:03:56.57,Default,,0000,0000,0000,,Parece bem melhor.
Dialogue: 0,0:03:56.57,0:03:58.60,Default,,0000,0000,0000,,Vamos tentar adicionar a\Naltura ({\i1}height{\i0}).
Dialogue: 0,0:03:58.60,0:04:00.94,Default,,0000,0000,0000,,Vou dizer, altura ({\i1}height{\i0}) é igual a 50.
Dialogue: 0,0:04:02.61,0:04:05.40,Default,,0000,0000,0000,,Achatei meu coelhinho, pobrezinho!
Dialogue: 0,0:04:05.40,0:04:08.76,Default,,0000,0000,0000,,É por isso que geralmente você deve \Nespecificar apenas
Dialogue: 0,0:04:08.76,0:04:10.97,Default,,0000,0000,0000,,largura ou altura, mas não ambos
Dialogue: 0,0:04:10.97,0:04:13.27,Default,,0000,0000,0000,,porque você pode usar as dimensões erradas
Dialogue: 0,0:04:13.27,0:04:16.80,Default,,0000,0000,0000,,e achatar seus coelhinhos, então vou \Napenas deixar o navegador
Dialogue: 0,0:04:16.80,0:04:20.88,Default,,0000,0000,0000,,calcular para decidir quais deveriam ser \Nas outras medidas.
Dialogue: 0,0:04:20.88,0:04:22.50,Default,,0000,0000,0000,,Vou apagar o atributo {\i1}height{\i0}.
Dialogue: 0,0:04:22.50,0:04:25.27,Default,,0000,0000,0000,,Agora que você sabe usar imagens,\Ncomece a pensar em
Dialogue: 0,0:04:25.27,0:04:27.97,Default,,0000,0000,0000,,combinar todas as tags que tem\Nna caixa de ferramentas,
Dialogue: 0,0:04:27.97,0:04:32.97,Default,,0000,0000,0000,,listas com imagens e parágrafos,\Nos 10 animais mais doidos.
Dialogue: 0,0:04:33.30,0:04:35.83,Default,,0000,0000,0000,,Só não coloque muitas imagens na \Nsua página
Dialogue: 0,0:04:35.83,0:04:37.58,Default,,0000,0000,0000,,porque a pessoa acessando sua página
Dialogue: 0,0:04:37.58,0:04:40.01,Default,,0000,0000,0000,,vai ter que carregar todas elas,
Dialogue: 0,0:04:40.01,0:04:42.87,Default,,0000,0000,0000,,mas você ainda pode se divertir muito.
Dialogue: 0,0:04:42.87,0:04:45.00,Default,,0000,0000,0000,,Legendado por [Pablo Vieira]\NRevisado por [Fernando dos Reis]