[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.41,0:00:01.84,Default,,0000,0000,0000,,Bem vindos à minha página.
Dialogue: 0,0:00:01.84,0:00:04.06,Default,,0000,0000,0000,,Eu sei, não é uma página muito emocionante
Dialogue: 0,0:00:04.06,0:00:07.48,Default,,0000,0000,0000,,Está totalmente em branco, \Nmas toda página começa assim
Dialogue: 0,0:00:07.48,0:00:10.38,Default,,0000,0000,0000,,e vou te mostrar como construir essa \Npágina daqui a pouco.
Dialogue: 0,0:00:10.38,0:00:12.10,Default,,0000,0000,0000,,Mas, primeiro, me dê um momento para
Dialogue: 0,0:00:12.10,0:00:14.86,Default,,0000,0000,0000,,mostrar o esqueleto de uma \Npágina web em braco.
Dialogue: 0,0:00:15.39,0:00:16.94,Default,,0000,0000,0000,,Toda página começa com
Dialogue: 0,0:00:16.94,0:00:20.22,Default,,0000,0000,0000,,essa coisa divertida chamada DOCTYPE,\Naqui em cima.
Dialogue: 0,0:00:20.22,0:00:21.96,Default,,0000,0000,0000,,Isso é um indicador para o navegador
Dialogue: 0,0:00:21.96,0:00:24.60,Default,,0000,0000,0000,,de que essa página está escrita\Nutilizando HTML moderno
Dialogue: 0,0:00:24.60,0:00:27.53,Default,,0000,0000,0000,,ao invés do HTML antigo e esquisito.
Dialogue: 0,0:00:27.85,0:00:30.15,Default,,0000,0000,0000,,Em seguida, para a primeira tag da página.
Dialogue: 0,0:00:31.02,0:00:34.58,Default,,0000,0000,0000,,HTML é uma linguagem de marcação,\Nentão, tudo se resume à tags.
Dialogue: 0,0:00:34.64,0:00:36.40,Default,,0000,0000,0000,,E uma tag é uma dessas coisas
Dialogue: 0,0:00:36.40,0:00:38.31,Default,,0000,0000,0000,,que começa com um colchete angular
Dialogue: 0,0:00:38.31,0:00:40.64,Default,,0000,0000,0000,,e termina com outro colchete angular.
Dialogue: 0,0:00:40.64,0:00:42.97,Default,,0000,0000,0000,,Ou, se você gosta de\Nmatemática, pense neles
Dialogue: 0,0:00:42.97,0:00:45.38,Default,,0000,0000,0000,,como sinais de maior e menor (< >).
Dialogue: 0,0:00:46.47,0:00:48.53,Default,,0000,0000,0000,,A primeira tag de todas as\Npáginas é sempre
Dialogue: 0,0:00:48.53,0:00:51.34,Default,,0000,0000,0000,,a tag HTML, logo abaixo do DOCTYPE.
Dialogue: 0,0:00:51.34,0:00:53.87,Default,,0000,0000,0000,,Esse aqui é o começo da tag HTML.
Dialogue: 0,0:00:53.87,0:00:57.06,Default,,0000,0000,0000,,e, lá embaixo, existe o fechamento\Nda tag HTML.
Dialogue: 0,0:00:57.06,0:01:01.48,Default,,0000,0000,0000,,que é a mesma coisa, exceto por esta \Nbarra, que é muito importante.
Dialogue: 0,0:01:01.76,0:01:05.15,Default,,0000,0000,0000,,A tag HTML deve conter todas\Nas outras tags
Dialogue: 0,0:01:05.15,0:01:07.27,Default,,0000,0000,0000,,que compõem a página.
Dialogue: 0,0:01:07.27,0:01:11.01,Default,,0000,0000,0000,,É por isso que não fechamos a tag\NHTML antes do fim da página.
Dialogue: 0,0:01:11.01,0:01:13.35,Default,,0000,0000,0000,,Várias tags HTML vêm em pares como este,
Dialogue: 0,0:01:13.35,0:01:15.10,Default,,0000,0000,0000,,mas nem todas.
Dialogue: 0,0:01:15.43,0:01:19.18,Default,,0000,0000,0000,,Abaixo do HTML, sempre existe\Numa tag "head".
Dialogue: 0,0:01:19.34,0:01:22.15,Default,,0000,0000,0000,,Ela possui tags que ajudam o navegador \Na processar a página
Dialogue: 0,0:01:22.15,0:01:25.16,Default,,0000,0000,0000,,mas não contém nada que o \Nusuário veja, de fato.
Dialogue: 0,0:01:25.26,0:01:27.46,Default,,0000,0000,0000,,Existe essa tag "meta" que\Nfornece ao navegador
Dialogue: 0,0:01:27.46,0:01:29.94,Default,,0000,0000,0000,,mais detalhes sobre como ele deve\Nprocessar a página.
Dialogue: 0,0:01:29.94,0:01:31.94,Default,,0000,0000,0000,,Por exemplo, se você está\Nusando caracteres
Dialogue: 0,0:01:31.94,0:01:33.20,Default,,0000,0000,0000,,como os da língua Inglesa
Dialogue: 0,0:01:33.20,0:01:35.50,Default,,0000,0000,0000,,e não caracteres mais difíceis de\Nprocessar, como
Dialogue: 0,0:01:35.50,0:01:36.63,Default,,0000,0000,0000,,os da língua Arábica,
Dialogue: 0,0:01:36.63,0:01:39.62,Default,,0000,0000,0000,,então você deve ter o meta charset \Ndefinido como utf-8
Dialogue: 0,0:01:39.92,0:01:41.58,Default,,0000,0000,0000,,Em seguida, temos essa tag "title"
Dialogue: 0,0:01:41.58,0:01:45.01,Default,,0000,0000,0000,,que o navegador usa para decidir\No título da página.
Dialogue: 0,0:01:45.01,0:01:47.62,Default,,0000,0000,0000,,Isso é mostrado nas abas de cima\Ndos navegadores,
Dialogue: 0,0:01:47.62,0:01:50.03,Default,,0000,0000,0000,,nos favoritos e nos resultados de busca.
Dialogue: 0,0:01:50.03,0:01:53.43,Default,,0000,0000,0000,,Aqui, no Khan Academy, o título é\Nexibido logo acima de nossa página.
Dialogue: 0,0:01:53.56,0:01:55.50,Default,,0000,0000,0000,,Vamos trocar o título.
Dialogue: 0,0:01:55.50,0:01:59.35,Default,,0000,0000,0000,,Eu vou criar uma página toda\Nsobre coelhos.
Dialogue: 0,0:01:59.35,0:02:01.91,Default,,0000,0000,0000,,Então eu vou dizer: "Tudo Sobre Coelhos!!"
Dialogue: 0,0:02:01.91,0:02:04.92,Default,,0000,0000,0000,,e talvez você até possa ver \Nisso mudando ali em cima.
Dialogue: 0,0:02:05.54,0:02:06.46,Default,,0000,0000,0000,,Legal.
Dialogue: 0,0:02:06.46,0:02:08.49,Default,,0000,0000,0000,,Agora terminamos com esses detalhes,
Dialogue: 0,0:02:08.49,0:02:11.95,Default,,0000,0000,0000,,fechamos a tag "head" e vamos até a tag
Dialogue: 0,0:02:11.95,0:02:14.81,Default,,0000,0000,0000,,onde tudo vai acontecer: a tag "body".
Dialogue: 0,0:02:15.03,0:02:17.80,Default,,0000,0000,0000,,Está muito chato agora, \Napenas o início e o fim.
Dialogue: 0,0:02:17.97,0:02:19.52,Default,,0000,0000,0000,,O que eu devo adicionar?
Dialogue: 0,0:02:19.52,0:02:21.77,Default,,0000,0000,0000,,Estou criando uma página\Nsobre coelhos,
Dialogue: 0,0:02:21.77,0:02:25.42,Default,,0000,0000,0000,,então eu provavelmente deveria declarar \Nisso em um grande título em cima.
Dialogue: 0,0:02:25.42,0:02:28.66,Default,,0000,0000,0000,,Para adicionar um título, \Nusamos a tag "h1".
Dialogue: 0,0:02:29.57,0:02:32.91,Default,,0000,0000,0000,,e... Tudo sobre coelhos, ótimo.
Dialogue: 0,0:02:32.91,0:02:34.48,Default,,0000,0000,0000,,Na verdade, existem seis tags que
Dialogue: 0,0:02:34.48,0:02:38.22,Default,,0000,0000,0000,,podemos usar como títulos: \Nh1, h2, h3, h4, h5 e h6.
Dialogue: 0,0:02:38.22,0:02:41.15,Default,,0000,0000,0000,,"h1" é atribuído ao título mais \Nrelevante na página
Dialogue: 0,0:02:41.15,0:02:43.06,Default,,0000,0000,0000,,e "h6", para o menos importante.
Dialogue: 0,0:02:43.06,0:02:45.73,Default,,0000,0000,0000,,Vamos adicionar mais títulos\Npara as outras seções.
Dialogue: 0,0:02:45.73,0:02:49.04,Default,,0000,0000,0000,,Eu vou usar um h2 já que essas são seções
Dialogue: 0,0:02:49.04,0:02:51.20,Default,,0000,0000,0000,,menos importantes.
Dialogue: 0,0:02:51.79,0:02:55.47,Default,,0000,0000,0000,,E algumas músicas. Ótimo.
Dialogue: 0,0:02:56.21,0:02:58.23,Default,,0000,0000,0000,,Agora, vamos adicionar algum conteúdo.
Dialogue: 0,0:02:58.23,0:03:00.80,Default,,0000,0000,0000,,Meu público alvo para essa página
Dialogue: 0,0:03:00.80,0:03:03.93,Default,,0000,0000,0000,,são alienígenas que nunca viram\Ncoelhos antes.
Dialogue: 0,0:03:03.93,0:03:06.79,Default,,0000,0000,0000,,Logo, é bom que eu dê a eles uma descrição\Nsobre coelhos.
Dialogue: 0,0:03:06.79,0:03:10.17,Default,,0000,0000,0000,,De fato, acho que preciso de um\Nparágrafo inteiro de informações.
Dialogue: 0,0:03:10.17,0:03:12.86,Default,,0000,0000,0000,,Como eu posso demarcar um parágrafo \Nusando HTML?
Dialogue: 0,0:03:13.39,0:03:16.31,Default,,0000,0000,0000,,Com a tag "< p >", é claro!
Dialogue: 0,0:03:16.88,0:03:18.21,Default,,0000,0000,0000,,Colocamos a tag "< p >" e
Dialogue: 0,0:03:18.21,0:03:22.58,Default,,0000,0000,0000,,em seguida, vou em frente colando\Nas informações.
Dialogue: 0,0:03:22.58,0:03:25.57,Default,,0000,0000,0000,,Assim você não precisa me ver\Ndigitando tudo isso.
Dialogue: 0,0:03:25.58,0:03:26.99,Default,,0000,0000,0000,,Lindo!
Dialogue: 0,0:03:27.48,0:03:30.62,Default,,0000,0000,0000,,Agora os aliens precisam de uma música\Npara cumprimentar os coelhos
Dialogue: 0,0:03:30.62,0:03:33.20,Default,,0000,0000,0000,,então, vou dar-lhes a letra de uma\Nfavorita pessoal.
Dialogue: 0,0:03:33.20,0:03:36.18,Default,,0000,0000,0000,,E, de novo usamos a tag "< p >" para isso.
Dialogue: 0,0:03:36.18,0:03:39.58,Default,,0000,0000,0000,,E colocamos a música.
Dialogue: 0,0:03:39.77,0:03:40.88,Default,,0000,0000,0000,,♫ Little Bunny Foofoo ♫
Dialogue: 0,0:03:40.88,0:03:43.11,Default,,0000,0000,0000,,Ah, que música boa!
Dialogue: 0,0:03:43.11,0:03:47.30,Default,,0000,0000,0000,,Mas, tudo está aparecendo\Nna mesma linha.
Dialogue: 0,0:03:47.30,0:03:50.28,Default,,0000,0000,0000,,Como os aliens vão saber onde parar?
Dialogue: 0,0:03:50.28,0:03:53.81,Default,,0000,0000,0000,,Por que o navegador não processou as\Nquebras de linha que coloquei ali?
Dialogue: 0,0:03:53.83,0:03:56.57,Default,,0000,0000,0000,,Na verdade, os navegadores \Nnormalmente ignoram as
Dialogue: 0,0:03:56.57,0:03:58.92,Default,,0000,0000,0000,,quebras de linhas e os espaços em seu HTML
Dialogue: 0,0:03:58.92,0:04:01.68,Default,,0000,0000,0000,,Se quisermos que o navegador processe as\Nquebras de linhas,
Dialogue: 0,0:04:01.68,0:04:05.02,Default,,0000,0000,0000,,precisamos avisá-lo explicitamente usando\Numa outra tag:
Dialogue: 0,0:04:05.02,0:04:08.18,Default,,0000,0000,0000,,a tag "< br >", que significa uma \Nquebra de linha.
Dialogue: 0,0:04:08.40,0:04:12.51,Default,,0000,0000,0000,,Vamos em frente e adicionando < br > após \Ncada linha.
Dialogue: 0,0:04:12.78,0:04:14.88,Default,,0000,0000,0000,,Agora isso parece uma letra de música.
Dialogue: 0,0:04:15.44,0:04:18.89,Default,,0000,0000,0000,,Você percebeu algo engraçado em\Nrelação ao "< br >"?
Dialogue: 0,0:04:19.17,0:04:20.57,Default,,0000,0000,0000,,Não existe tag de fechamento.
Dialogue: 0,0:04:20.57,0:04:23.57,Default,,0000,0000,0000,,Se você pensar nisso, uma quebra\Nde linha não tem conteúdo.
Dialogue: 0,0:04:23.57,0:04:25.86,Default,,0000,0000,0000,,Logo, não há nada para ser fechado.
Dialogue: 0,0:04:26.01,0:04:28.50,Default,,0000,0000,0000,,Precisamos apenas da tag de abertura.
Dialogue: 0,0:04:29.06,0:04:30.28,Default,,0000,0000,0000,,Agora sim.
Dialogue: 0,0:04:30.28,0:04:32.70,Default,,0000,0000,0000,,Os aliens vão aprender o básico\Nsobre coelhos
Dialogue: 0,0:04:32.70,0:04:35.74,Default,,0000,0000,0000,,e vocês aprenderam o básico do HTML.
Dialogue: 0,0:04:35.74,0:04:37.22,Default,,0000,0000,0000,,Depois que eu terminar de falar
Dialogue: 0,0:04:37.22,0:04:39.82,Default,,0000,0000,0000,,brinque um pouco com isso \Ne tente mudar as coisas.
Dialogue: 0,0:04:39.82,0:04:42.85,Default,,0000,0000,0000,,E, quando estiver pronto, encare seu \Nprimeiro desafio HTML.
Dialogue: 0,0:04:42.85,0:04:44.00,Default,,0000,0000,0000,,Traduzidor por [Felipe Francisco]\NRevisado por [Fernando dos Reis]