0:00:00.411,0:00:01.835
Bem vindos à minha página.

0:00:01.835,0:00:04.059
Eu sei, não é uma página muito emocionante

0:00:04.059,0:00:07.477
Está totalmente em branco, [br]mas toda página começa assim

0:00:07.477,0:00:10.385
e vou te mostrar como construir essa [br]página daqui a pouco.

0:00:10.385,0:00:12.101
Mas, primeiro, me dê um momento para

0:00:12.101,0:00:14.860
mostrar o esqueleto de uma [br]página web em braco.

0:00:15.389,0:00:16.944
Toda página começa com

0:00:16.944,0:00:20.222
essa coisa divertida chamada DOCTYPE,[br]aqui em cima.

0:00:20.222,0:00:21.961
Isso é um indicador para o navegador

0:00:21.961,0:00:24.603
de que essa página está escrita[br]utilizando HTML moderno

0:00:24.603,0:00:27.530
ao invés do HTML antigo e esquisito.

0:00:27.851,0:00:30.148
Em seguida, para a primeira tag da página.

0:00:31.025,0:00:34.582
HTML é uma linguagem de marcação,[br]então, tudo se resume à tags.

0:00:34.635,0:00:36.399
E uma tag é uma dessas coisas

0:00:36.399,0:00:38.314
que começa com um colchete angular

0:00:38.314,0:00:40.635
e termina com outro colchete angular.

0:00:40.635,0:00:42.966
Ou, se você gosta de[br]matemática, pense neles

0:00:42.966,0:00:45.383
como sinais de maior e menor (< >).

0:00:46.474,0:00:48.526
A primeira tag de todas as[br]páginas é sempre

0:00:48.526,0:00:51.343
a tag HTML, logo abaixo do DOCTYPE.

0:00:51.343,0:00:53.871
Esse aqui é o começo da tag HTML.

0:00:53.871,0:00:57.055
e, lá embaixo, existe o fechamento[br]da tag HTML.

0:00:57.055,0:01:01.479
que é a mesma coisa, exceto por esta [br]barra, que é muito importante.

0:01:01.759,0:01:05.147
A tag HTML deve conter todas[br]as outras tags

0:01:05.147,0:01:07.266
que compõem a página.

0:01:07.266,0:01:11.009
É por isso que não fechamos a tag[br]HTML antes do fim da página.

0:01:11.009,0:01:13.351
Várias tags HTML vêm em pares como este,

0:01:13.351,0:01:15.099
mas nem todas.

0:01:15.431,0:01:19.176
Abaixo do HTML, sempre existe[br]uma tag "head".

0:01:19.337,0:01:22.146
Ela possui tags que ajudam o navegador [br]a processar a página

0:01:22.146,0:01:25.162
mas não contém nada que o [br]usuário veja, de fato.

0:01:25.265,0:01:27.465
Existe essa tag "meta" que[br]fornece ao navegador

0:01:27.465,0:01:29.937
mais detalhes sobre como ele deve[br]processar a página.

0:01:29.937,0:01:31.935
Por exemplo, se você está[br]usando caracteres

0:01:31.935,0:01:33.201
como os da língua Inglesa

0:01:33.201,0:01:35.497
e não caracteres mais difíceis de[br]processar, como

0:01:35.497,0:01:36.628
os da língua Arábica,

0:01:36.628,0:01:39.618
então você deve ter o meta charset [br]definido como utf-8

0:01:39.920,0:01:41.578
Em seguida, temos essa tag "title"

0:01:41.578,0:01:45.009
que o navegador usa para decidir[br]o título da página.

0:01:45.012,0:01:47.623
Isso é mostrado nas abas de cima[br]dos navegadores,

0:01:47.623,0:01:50.031
nos favoritos e nos resultados de busca.

0:01:50.031,0:01:53.430
Aqui, no Khan Academy, o título é[br]exibido logo acima de nossa página.

0:01:53.557,0:01:55.495
Vamos trocar o título.

0:01:55.495,0:01:59.348
Eu vou criar uma página toda[br]sobre coelhos.

0:01:59.348,0:02:01.914
Então eu vou dizer: "Tudo Sobre Coelhos!!"

0:02:01.914,0:02:04.923
e talvez você até possa ver [br]isso mudando ali em cima.

0:02:05.539,0:02:06.464
Legal.

0:02:06.464,0:02:08.489
Agora terminamos com esses detalhes,

0:02:08.489,0:02:11.946
fechamos a tag "head" e vamos até a tag

0:02:11.946,0:02:14.809
onde tudo vai acontecer: a tag "body".

0:02:15.033,0:02:17.805
Está muito chato agora, [br]apenas o início e o fim.

0:02:17.971,0:02:19.521
O que eu devo adicionar?

0:02:19.521,0:02:21.771
Estou criando uma página[br]sobre coelhos,

0:02:21.771,0:02:25.425
então eu provavelmente deveria declarar [br]isso em um grande título em cima.

0:02:25.425,0:02:28.656
Para adicionar um título, [br]usamos a tag "h1".

0:02:29.574,0:02:32.914
e... Tudo sobre coelhos, ótimo.

0:02:32.914,0:02:34.482
Na verdade, existem seis tags que

0:02:34.482,0:02:38.221
podemos usar como títulos: [br]h1, h2, h3, h4, h5 e h6.

0:02:38.221,0:02:41.153
"h1" é atribuído ao título mais [br]relevante na página

0:02:41.153,0:02:43.061
e "h6", para o menos importante.

0:02:43.061,0:02:45.732
Vamos adicionar mais títulos[br]para as outras seções.

0:02:45.732,0:02:49.035
Eu vou usar um h2 já que essas são seções

0:02:49.035,0:02:51.197
menos importantes.

0:02:51.787,0:02:55.469
E algumas músicas. Ótimo.

0:02:56.214,0:02:58.232
Agora, vamos adicionar algum conteúdo.

0:02:58.232,0:03:00.795
Meu público alvo para essa página

0:03:00.795,0:03:03.934
são alienígenas que nunca viram[br]coelhos antes.

0:03:03.934,0:03:06.790
Logo, é bom que eu dê a eles uma descrição[br]sobre coelhos.

0:03:06.790,0:03:10.166
De fato, acho que preciso de um[br]parágrafo inteiro de informações.

0:03:10.166,0:03:12.856
Como eu posso demarcar um parágrafo [br]usando HTML?

0:03:13.391,0:03:16.309
Com a tag "< p >", é claro!

0:03:16.877,0:03:18.214
Colocamos a tag "< p >" e

0:03:18.214,0:03:22.581
em seguida, vou em frente colando[br]as informações.

0:03:22.581,0:03:25.568
Assim você não precisa me ver[br]digitando tudo isso.

0:03:25.576,0:03:26.986
Lindo!

0:03:27.479,0:03:30.622
Agora os aliens precisam de uma música[br]para cumprimentar os coelhos

0:03:30.622,0:03:33.200
então, vou dar-lhes a letra de uma[br]favorita pessoal.

0:03:33.200,0:03:36.176
E, de novo usamos a tag "< p >" para isso.

0:03:36.176,0:03:39.582
E colocamos a música.

0:03:39.772,0:03:40.885
♫ Little Bunny Foofoo ♫

0:03:40.885,0:03:43.108
Ah, que música boa!

0:03:43.108,0:03:47.298
Mas, tudo está aparecendo[br]na mesma linha.

0:03:47.298,0:03:50.278
Como os aliens vão saber onde parar?

0:03:50.278,0:03:53.810
Por que o navegador não processou as[br]quebras de linha que coloquei ali?

0:03:53.830,0:03:56.572
Na verdade, os navegadores [br]normalmente ignoram as

0:03:56.572,0:03:58.918
quebras de linhas e os espaços em seu HTML

0:03:58.918,0:04:01.677
Se quisermos que o navegador processe as[br]quebras de linhas,

0:04:01.677,0:04:05.022
precisamos avisá-lo explicitamente usando[br]uma outra tag:

0:04:05.022,0:04:08.176
a tag "< br >", que significa uma [br]quebra de linha.

0:04:08.398,0:04:12.513
Vamos em frente e adicionando < br > após [br]cada linha.

0:04:12.777,0:04:14.885
Agora isso parece uma letra de música.

0:04:15.440,0:04:18.890
Você percebeu algo engraçado em[br]relação ao "< br >"?

0:04:19.171,0:04:20.566
Não existe tag de fechamento.

0:04:20.566,0:04:23.568
Se você pensar nisso, uma quebra[br]de linha não tem conteúdo.

0:04:23.568,0:04:25.861
Logo, não há nada para ser fechado.

0:04:26.006,0:04:28.496
Precisamos apenas da tag de abertura.

0:04:29.062,0:04:30.276
Agora sim.

0:04:30.276,0:04:32.704
Os aliens vão aprender o básico[br]sobre coelhos

0:04:32.704,0:04:35.744
e vocês aprenderam o básico do HTML.

0:04:35.744,0:04:37.218
Depois que eu terminar de falar

0:04:37.218,0:04:39.816
brinque um pouco com isso [br]e tente mudar as coisas.

0:04:39.816,0:04:42.853
E, quando estiver pronto, encare seu [br]primeiro desafio HTML.

0:04:42.853,0:04:44.000
Traduzidor por [Felipe Francisco][br]Revisado por [Fernando dos Reis]