[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.28,0:00:02.64,Default,,0000,0000,0000,,Fiz esta página sobre meus\Nanimais de estimação,
Dialogue: 0,0:00:02.64,0:00:04.12,Default,,0000,0000,0000,,com uma lista de seus nomes.
Dialogue: 0,0:00:04.32,0:00:06.80,Default,,0000,0000,0000,,Quando você olha para a lista,\No que você quer saber?
Dialogue: 0,0:00:07.02,0:00:10.95,Default,,0000,0000,0000,,Eu tive animais de estimação chamados\N"Black & White", "Daemon" e "Angel".
Dialogue: 0,0:00:11.09,0:00:12.99,Default,,0000,0000,0000,,Mas que tipo de animais eles que eram?
Dialogue: 0,0:00:13.13,0:00:14.41,Default,,0000,0000,0000,,Que cor eles tinham?
Dialogue: 0,0:00:14.52,0:00:15.92,Default,,0000,0000,0000,,Quantos anos eles tinham?
Dialogue: 0,0:00:16.11,0:00:18.32,Default,,0000,0000,0000,,Provavelmente deveria\Nlhe dar mais informações
Dialogue: 0,0:00:18.32,0:00:21.03,Default,,0000,0000,0000,,sobre os animais nesta lista\Npara responder suas perguntas
Dialogue: 0,0:00:21.20,0:00:23.46,Default,,0000,0000,0000,,Posso fazer isso por\Nfazer uma lista alinhada
Dialogue: 0,0:00:23.46,0:00:27.01,Default,,0000,0000,0000,,ou talvez por colocar \Ninformações entre parênteses
Dialogue: 0,0:00:27.17,0:00:32.00,Default,,0000,0000,0000,,Black & White era um coelho,\NDemon é um gato,
Dialogue: 0,0:00:32.00,0:00:34.17,Default,,0000,0000,0000,,e Angel também é um gato.
Dialogue: 0,0:00:34.50,0:00:37.60,Default,,0000,0000,0000,,Mas não gosto disso, porque \Nnão fica muito organizado,
Dialogue: 0,0:00:37.60,0:00:40.91,Default,,0000,0000,0000,,e não posso simplesmente rolar para baixo\Ne ver todas as espécies
Dialogue: 0,0:00:40.91,0:00:42.59,Default,,0000,0000,0000,,em uma lista bem alinhada.
Dialogue: 0,0:00:43.11,0:00:47.12,Default,,0000,0000,0000,,Na verdade isso é uma oportunidade\Nperfeita para uma tabela.
Dialogue: 0,0:00:47.40,0:00:49.13,Default,,0000,0000,0000,,Com uma linha para cada animal
Dialogue: 0,0:00:49.13,0:00:51.86,Default,,0000,0000,0000,,e colunas para cada atributo\Nsobre o animal de estimação
Dialogue: 0,0:00:51.86,0:00:53.76,Default,,0000,0000,0000,,que eu quero compartilhar com você.
Dialogue: 0,0:00:54.05,0:00:58.39,Default,,0000,0000,0000,,Para fazer tabelas em HTML,\Nprecisamos de um monte de tags.
Dialogue: 0,0:00:58.62,0:00:59.84,Default,,0000,0000,0000,,Então, prepare-se.
Dialogue: 0,0:00:59.97,0:01:02.55,Default,,0000,0000,0000,,Mas não se preocupe em memorizar\Ntodas essas tags.
Dialogue: 0,0:01:02.55,0:01:04.39,Default,,0000,0000,0000,,Você sempre pode procurá-las depois.
Dialogue: 0,0:01:04.43,0:01:07.19,Default,,0000,0000,0000,,Levei dez anos para memorizar\Ntodas as tags da tabela,
Dialogue: 0,0:01:07.19,0:01:08.04,Default,,0000,0000,0000,,sou profissional.
Dialogue: 0,0:01:08.58,0:01:10.19,Default,,0000,0000,0000,,Tudo bem, prepare-se!
Dialogue: 0,0:01:10.49,0:01:14.89,Default,,0000,0000,0000,,A primeira tag é apropriadamente\Nchamada de "< table >".
Dialogue: 0,0:01:15.10,0:01:19.93,Default,,0000,0000,0000,,Em seguida precisamos de um cabeçalho para\Nmanter os rótulos para cada coluna.
Dialogue: 0,0:01:20.02,0:01:22.46,Default,,0000,0000,0000,,Então escrevemos "< thead >".
Dialogue: 0,0:01:23.27,0:01:27.87,Default,,0000,0000,0000,,Dentro disso, normalmente só quero uma\Núnica fileira de células de cabeçalho.
Dialogue: 0,0:01:27.99,0:01:31.96,Default,,0000,0000,0000,,Toda vez que escrevermos uma linha na\Ntabela, usamos a tag "< tr >".
Dialogue: 0,0:01:32.63,0:01:35.29,Default,,0000,0000,0000,,Dentro dessa linha, queremos \Nas células de cabeçalho.
Dialogue: 0,0:01:36.02,0:01:40.91,Default,,0000,0000,0000,,Para uma única célula de cabeçalho,\Nescrevemos "< th >".
Dialogue: 0,0:01:42.23,0:01:44.84,Default,,0000,0000,0000,,Qual será o primeiro rótulo da coluna?
Dialogue: 0,0:01:45.10,0:01:49.25,Default,,0000,0000,0000,,Vai ser nomes de estimação, já que\Né a coisa mais importante na linha,
Dialogue: 0,0:01:49.25,0:01:51.10,Default,,0000,0000,0000,,e é o identificador para ela.
Dialogue: 0,0:01:51.29,0:01:54.55,Default,,0000,0000,0000,,Agora vamos adicionar outra\Ncoluna para a espécie.
Dialogue: 0,0:01:55.27,0:01:58.58,Default,,0000,0000,0000,,E, finalmente, vamos adicionar\Numa coluna para a cor.
Dialogue: 0,0:01:59.34,0:02:01.53,Default,,0000,0000,0000,,Acho que essas colunas são suficientes,
Dialogue: 0,0:02:01.53,0:02:03.52,Default,,0000,0000,0000,,então vamos adicionar alguns dados.
Dialogue: 0,0:02:03.90,0:02:05.95,Default,,0000,0000,0000,,Começamos com as linhas de dados
Dialogue: 0,0:02:05.95,0:02:09.47,Default,,0000,0000,0000,,com "< tbody >" embaixo do\Nnosso "< thead >"
Dialogue: 0,0:02:09.47,0:02:11.85,Default,,0000,0000,0000,,e, em seguida, mais uma vez,\Nqueremos uma linha,
Dialogue: 0,0:02:11.85,0:02:14.00,Default,,0000,0000,0000,,então vamos usar essa tag "< tr >".
Dialogue: 0,0:02:14.34,0:02:16.72,Default,,0000,0000,0000,,Mas aqui dentro, em vez de usar "< th >",
Dialogue: 0,0:02:16.72,0:02:19.82,Default,,0000,0000,0000,,vamos usar o "< td >" porque \Nestamos no corpo.
Dialogue: 0,0:02:20.06,0:02:23.14,Default,,0000,0000,0000,,Vamos dizer que "< td >" representa\Nos dados da tabela
Dialogue: 0,0:02:23.14,0:02:26.47,Default,,0000,0000,0000,,e que é o valor que vai nesta\Nprimeira célula
Dialogue: 0,0:02:26.47,0:02:27.94,Default,,0000,0000,0000,,na primeira linha de dados.
Dialogue: 0,0:02:28.27,0:02:30.26,Default,,0000,0000,0000,,Só vou olhar para a minha lista,
Dialogue: 0,0:02:30.26,0:02:33.80,Default,,0000,0000,0000,,e ver que a primeira coisa na minha\Nlista era "Black & white",
Dialogue: 0,0:02:33.80,0:02:36.02,Default,,0000,0000,0000,,e que isso é o nome do animal de estimação
Dialogue: 0,0:02:36.02,0:02:39.32,Default,,0000,0000,0000,,então vou escrever "Black & White".
Dialogue: 0,0:02:40.42,0:02:42.33,Default,,0000,0000,0000,,Agora, o segundo "< td >".
Dialogue: 0,0:02:42.69,0:02:46.73,Default,,0000,0000,0000,,Podemos olhar para cima e ver que\Na nossa segunda "< th >" foi as espécies,
Dialogue: 0,0:02:46.73,0:02:49.73,Default,,0000,0000,0000,,e 'Black & White' era um coelho,
Dialogue: 0,0:02:49.91,0:02:52.11,Default,,0000,0000,0000,,então vamos escrever, "coelho".
Dialogue: 0,0:02:52.70,0:02:55.16,Default,,0000,0000,0000,,Finalmente, o terceiro "< th >".
Dialogue: 0,0:02:55.31,0:02:58.13,Default,,0000,0000,0000,,Olhe para cima e veja que o\Nterceiro "< th >" era a cor.
Dialogue: 0,0:02:58.23,0:03:00.18,Default,,0000,0000,0000,,Assim, o correspondente "< td >"...
Dialogue: 0,0:03:00.18,0:03:04.43,Default,,0000,0000,0000,,Eu não era uma criança muito criativa\Nquando eu coloquei o nome deste coelho,
Dialogue: 0,0:03:04.43,0:03:07.94,Default,,0000,0000,0000,,então você provavelmente\Npode adivinhar as cores dele.
Dialogue: 0,0:03:08.48,0:03:10.53,Default,,0000,0000,0000,,Vamos fazer outra linha.
Dialogue: 0,0:03:10.92,0:03:12.97,Default,,0000,0000,0000,,Vou lhe mostrar um pequeno truque.
Dialogue: 0,0:03:13.10,0:03:15.51,Default,,0000,0000,0000,,O que gosto de fazer\Numa vez que eu fiz uma linha,
Dialogue: 0,0:03:15.51,0:03:17.13,Default,,0000,0000,0000,,é selecionar a primeira linha,
Dialogue: 0,0:03:17.13,0:03:19.39,Default,,0000,0000,0000,,e a copiar, usando um atalho de teclado,
Dialogue: 0,0:03:19.39,0:03:22.59,Default,,0000,0000,0000,,que normalmente é "Ctrl+C" ou\N"Command+C (⌘+C)"
Dialogue: 0,0:03:22.59,0:03:24.44,Default,,0000,0000,0000,,dependendo do seu sistema operacional.
Dialogue: 0,0:03:24.63,0:03:28.64,Default,,0000,0000,0000,,E, em seguida, vou colá-la, também\Nusando um atalho de teclado.
Dialogue: 0,0:03:28.64,0:03:31.08,Default,,0000,0000,0000,,que normalmente é "Ctrl+V" ou\N"Command+V (⌘+V)"
Dialogue: 0,0:03:31.08,0:03:33.04,Default,,0000,0000,0000,,dependendo do seu sistema operacional.
Dialogue: 0,0:03:33.18,0:03:36.98,Default,,0000,0000,0000,,E agora que eu colei, \Nsó irei alterar os valores.
Dialogue: 0,0:03:37.04,0:03:41.78,Default,,0000,0000,0000,,Então este será 'Daemon', 'gato' e 'preto'
Dialogue: 0,0:03:41.78,0:03:44.40,Default,,0000,0000,0000,,então vamos fazer isso mais uma vez,
Dialogue: 0,0:03:44.40,0:03:52.40,Default,,0000,0000,0000,,e este será 'Angel', 'gato' e 'laranja'.
Dialogue: 0,0:03:52.97,0:03:55.61,Default,,0000,0000,0000,,Só fica muito chato
Dialogue: 0,0:03:55.61,0:03:59.07,Default,,0000,0000,0000,,se realmente escrever os\N"< tr >" e "< td >" toda vez,
Dialogue: 0,0:03:59.07,0:04:03.00,Default,,0000,0000,0000,,de modo que o truque de copiar e colar\Nvai fazer tudo ficar muito menos chato.
Dialogue: 0,0:04:03.53,0:04:05.72,Default,,0000,0000,0000,,E aí está: uma tabela.
Dialogue: 0,0:04:05.95,0:04:08.04,Default,,0000,0000,0000,,Eu poderia facilmente adicionar\Nmais colunas
Dialogue: 0,0:04:08.04,0:04:10.55,Default,,0000,0000,0000,,bastando adicionar outra\N"< th >" no cabeçalho,
Dialogue: 0,0:04:10.55,0:04:12.83,Default,,0000,0000,0000,,e em seguida "< td >" em cada\Numa das linhas,
Dialogue: 0,0:04:12.83,0:04:15.10,Default,,0000,0000,0000,,se quisesse compartilhar mais detalhes
Dialogue: 0,0:04:15.10,0:04:17.38,Default,,0000,0000,0000,,sobre os meus animais de estimação.
Dialogue: 0,0:04:17.38,0:04:19.78,Default,,0000,0000,0000,,Talvez se pergunte como mudar\Na aparência da tabela
Dialogue: 0,0:04:19.78,0:04:22.19,Default,,0000,0000,0000,,como a mudar as bordas, ou as cores\Nou espaçamento.
Dialogue: 0,0:04:22.36,0:04:24.67,Default,,0000,0000,0000,,Você pode fazer isso com as\Npropriedades do CSS,
Dialogue: 0,0:04:24.67,0:04:27.75,Default,,0000,0000,0000,,que você já aprendeu, \Nou vai aprender em breve.
Dialogue: 0,0:04:27.92,0:04:31.52,Default,,0000,0000,0000,,Tente fazer uma página igual e faça\Numa lista de seus animais de estimação
Dialogue: 0,0:04:31.52,0:04:33.26,Default,,0000,0000,0000,,ou dos que você gostaria de ter.
Dialogue: 0,0:04:33.49,0:04:35.15,Default,,0000,0000,0000,,Faça uma tabela com esses dados!
Dialogue: 0,0:04:35.15,0:04:36.00,Default,,0000,0000,0000,,Traduzido por [Fernando dos Reis]