WEBVTT

00:00:00.411 --> 00:00:01.835
Bem vindos à minha página.

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

00:00:04.059 --> 00:00:07.477
Está totalmente em branco, 
mas toda página começa assim

00:00:07.477 --> 00:00:10.385
e vou te mostrar como construir essa 
página daqui a pouco.

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

00:00:12.101 --> 00:00:14.860
mostrar o esqueleto de uma 
página web em braco.

00:00:15.389 --> 00:00:16.944
Toda página começa com

00:00:16.944 --> 00:00:20.222
essa coisa divertida chamada DOCTYPE,
aqui em cima.

00:00:20.222 --> 00:00:21.961
Isso é um indicador para o navegador

00:00:21.961 --> 00:00:24.603
de que essa página está escrita
utilizando HTML moderno

00:00:24.603 --> 00:00:27.530
ao invés do HTML antigo e esquisito.

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

00:00:31.025 --> 00:00:34.582
HTML é uma linguagem de marcação,
então, tudo se resume à tags.

00:00:34.635 --> 00:00:36.399
E uma tag é uma dessas coisas

00:00:36.399 --> 00:00:38.314
que começa com um colchete angular

00:00:38.314 --> 00:00:40.635
e termina com outro colchete angular.

00:00:40.635 --> 00:00:42.966
Ou, se você gosta de
matemática, pense neles

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

00:00:46.474 --> 00:00:48.526
A primeira tag de todas as
páginas é sempre

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

00:00:51.343 --> 00:00:53.871
Esse aqui é o começo da tag HTML.

00:00:53.871 --> 00:00:57.055
e, lá embaixo, existe o fechamento
da tag HTML.

00:00:57.055 --> 00:01:01.479
que é a mesma coisa, exceto por esta 
barra, que é muito importante.

00:01:01.759 --> 00:01:05.147
A tag HTML deve conter todas
as outras tags

00:01:05.147 --> 00:01:07.266
que compõem a página.

00:01:07.266 --> 00:01:11.009
É por isso que não fechamos a tag
HTML antes do fim da página.

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

00:01:13.351 --> 00:01:15.099
mas nem todas.

00:01:15.431 --> 00:01:19.176
Abaixo do HTML, sempre existe
uma tag "head".

00:01:19.337 --> 00:01:22.146
Ela possui tags que ajudam o navegador 
a processar a página

00:01:22.146 --> 00:01:25.162
mas não contém nada que o 
usuário veja, de fato.

00:01:25.265 --> 00:01:27.465
Existe essa tag "meta" que
fornece ao navegador

00:01:27.465 --> 00:01:29.937
mais detalhes sobre como ele deve
processar a página.

00:01:29.937 --> 00:01:31.935
Por exemplo, se você está
usando caracteres

00:01:31.935 --> 00:01:33.201
como os da língua Inglesa

00:01:33.201 --> 00:01:35.497
e não caracteres mais difíceis de
processar, como

00:01:35.497 --> 00:01:36.628
os da língua Arábica,

00:01:36.628 --> 00:01:39.618
então você deve ter o meta charset 
definido como utf-8

00:01:39.920 --> 00:01:41.578
Em seguida, temos essa tag "title"

00:01:41.578 --> 00:01:45.009
que o navegador usa para decidir
o título da página.

00:01:45.012 --> 00:01:47.623
Isso é mostrado nas abas de cima
dos navegadores,

00:01:47.623 --> 00:01:50.031
nos favoritos e nos resultados de busca.

00:01:50.031 --> 00:01:53.430
Aqui, no Khan Academy, o título é
exibido logo acima de nossa página.

00:01:53.557 --> 00:01:55.495
Vamos trocar o título.

00:01:55.495 --> 00:01:59.348
Eu vou criar uma página toda
sobre coelhos.

00:01:59.348 --> 00:02:01.914
Então eu vou dizer: "Tudo Sobre Coelhos!!"

00:02:01.914 --> 00:02:04.923
e talvez você até possa ver 
isso mudando ali em cima.

00:02:05.539 --> 00:02:06.464
Legal.

00:02:06.464 --> 00:02:08.489
Agora terminamos com esses detalhes,

00:02:08.489 --> 00:02:11.946
fechamos a tag "head" e vamos até a tag

00:02:11.946 --> 00:02:14.809
onde tudo vai acontecer: a tag "body".

00:02:15.033 --> 00:02:17.805
Está muito chato agora, 
apenas o início e o fim.

00:02:17.971 --> 00:02:19.521
O que eu devo adicionar?

00:02:19.521 --> 00:02:21.771
Estou criando uma página
sobre coelhos,

00:02:21.771 --> 00:02:25.425
então eu provavelmente deveria declarar 
isso em um grande título em cima.

00:02:25.425 --> 00:02:28.656
Para adicionar um título, 
usamos a tag "h1".

00:02:29.574 --> 00:02:32.914
e... Tudo sobre coelhos, ótimo.

00:02:32.914 --> 00:02:34.482
Na verdade, existem seis tags que

00:02:34.482 --> 00:02:38.221
podemos usar como títulos: 
h1, h2, h3, h4, h5 e h6.

00:02:38.221 --> 00:02:41.153
"h1" é atribuído ao título mais 
relevante na página

00:02:41.153 --> 00:02:43.061
e "h6", para o menos importante.

00:02:43.061 --> 00:02:45.732
Vamos adicionar mais títulos
para as outras seções.

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

00:02:49.035 --> 00:02:51.197
menos importantes.

00:02:51.787 --> 00:02:55.469
E algumas músicas. Ótimo.

00:02:56.214 --> 00:02:58.232
Agora, vamos adicionar algum conteúdo.

00:02:58.232 --> 00:03:00.795
Meu público alvo para essa página

00:03:00.795 --> 00:03:03.934
são alienígenas que nunca viram
coelhos antes.

00:03:03.934 --> 00:03:06.790
Logo, é bom que eu dê a eles uma descrição
sobre coelhos.

00:03:06.790 --> 00:03:10.166
De fato, acho que preciso de um
parágrafo inteiro de informações.

00:03:10.166 --> 00:03:12.856
Como eu posso demarcar um parágrafo 
usando HTML?

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

00:03:16.877 --> 00:03:18.214
Colocamos a tag "< p >" e

00:03:18.214 --> 00:03:22.581
em seguida, vou em frente colando
as informações.

00:03:22.581 --> 00:03:25.568
Assim você não precisa me ver
digitando tudo isso.

00:03:25.576 --> 00:03:26.986
Lindo!

00:03:27.479 --> 00:03:30.622
Agora os aliens precisam de uma música
para cumprimentar os coelhos

00:03:30.622 --> 00:03:33.200
então, vou dar-lhes a letra de uma
favorita pessoal.

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

00:03:36.176 --> 00:03:39.582
E colocamos a música.

00:03:39.772 --> 00:03:40.885
♫ Little Bunny Foofoo ♫

00:03:40.885 --> 00:03:43.108
Ah, que música boa!

00:03:43.108 --> 00:03:47.298
Mas, tudo está aparecendo
na mesma linha.

00:03:47.298 --> 00:03:50.278
Como os aliens vão saber onde parar?

00:03:50.278 --> 00:03:53.810
Por que o navegador não processou as
quebras de linha que coloquei ali?

00:03:53.830 --> 00:03:56.572
Na verdade, os navegadores 
normalmente ignoram as

00:03:56.572 --> 00:03:58.918
quebras de linhas e os espaços em seu HTML

00:03:58.918 --> 00:04:01.677
Se quisermos que o navegador processe as
quebras de linhas,

00:04:01.677 --> 00:04:05.022
precisamos avisá-lo explicitamente usando
uma outra tag:

00:04:05.022 --> 00:04:08.176
a tag "< br >", que significa uma 
quebra de linha.

00:04:08.398 --> 00:04:12.513
Vamos em frente e adicionando < br > após 
cada linha.

00:04:12.777 --> 00:04:14.885
Agora isso parece uma letra de música.

00:04:15.440 --> 00:04:18.890
Você percebeu algo engraçado em
relação ao "< br >"?

00:04:19.171 --> 00:04:20.566
Não existe tag de fechamento.

00:04:20.566 --> 00:04:23.568
Se você pensar nisso, uma quebra
de linha não tem conteúdo.

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

00:04:26.006 --> 00:04:28.496
Precisamos apenas da tag de abertura.

00:04:29.062 --> 00:04:30.276
Agora sim.

00:04:30.276 --> 00:04:32.704
Os aliens vão aprender o básico
sobre coelhos

00:04:32.704 --> 00:04:35.744
e vocês aprenderam o básico do HTML.

00:04:35.744 --> 00:04:37.218
Depois que eu terminar de falar

00:04:37.218 --> 00:04:39.816
brinque um pouco com isso 
e tente mudar as coisas.

00:04:39.816 --> 00:04:42.853
E, quando estiver pronto, encare seu 
primeiro desafio HTML.

00:04:42.853 --> 00:04:44.000
Traduzidor por [Felipe Francisco]
Revisado por [Fernando dos Reis]