1
00:00:00,411 --> 00:00:01,835
Bem vindos à minha página.

2
00:00:01,835 --> 00:00:04,059
Eu sei, não é uma página muito emocionante

3
00:00:04,059 --> 00:00:07,477
Está totalmente em branco, 
mas toda página começa assim

4
00:00:07,477 --> 00:00:10,385
e vou te mostrar como construir essa 
página daqui a pouco.

5
00:00:10,385 --> 00:00:12,101
Mas, primeiro, me dê um momento para

6
00:00:12,101 --> 00:00:14,860
mostrar o esqueleto de uma 
página web em braco.

7
00:00:15,389 --> 00:00:16,944
Toda página começa com

8
00:00:16,944 --> 00:00:20,222
essa coisa divertida chamada DOCTYPE,
aqui em cima.

9
00:00:20,222 --> 00:00:21,961
Isso é um indicador para o navegador

10
00:00:21,961 --> 00:00:24,603
de que essa página está escrita
utilizando HTML moderno

11
00:00:24,603 --> 00:00:27,530
ao invés do HTML antigo e esquisito.

12
00:00:27,851 --> 00:00:30,148
Em seguida, para a primeira tag da página.

13
00:00:31,025 --> 00:00:34,582
HTML é uma linguagem de marcação,
então, tudo se resume à tags.

14
00:00:34,635 --> 00:00:36,399
E uma tag é uma dessas coisas

15
00:00:36,399 --> 00:00:38,314
que começa com um colchete angular

16
00:00:38,314 --> 00:00:40,635
e termina com outro colchete angular.

17
00:00:40,635 --> 00:00:42,966
Ou, se você gosta de
matemática, pense neles

18
00:00:42,966 --> 00:00:45,383
como sinais de maior e menor (< >).

19
00:00:46,474 --> 00:00:48,526
A primeira tag de todas as
páginas é sempre

20
00:00:48,526 --> 00:00:51,343
a tag HTML, logo abaixo do DOCTYPE.

21
00:00:51,343 --> 00:00:53,871
Esse aqui é o começo da tag HTML.

22
00:00:53,871 --> 00:00:57,055
e, lá embaixo, existe o fechamento
da tag HTML.

23
00:00:57,055 --> 00:01:01,479
que é a mesma coisa, exceto por esta 
barra, que é muito importante.

24
00:01:01,759 --> 00:01:05,147
A tag HTML deve conter todas
as outras tags

25
00:01:05,147 --> 00:01:07,266
que compõem a página.

26
00:01:07,266 --> 00:01:11,009
É por isso que não fechamos a tag
HTML antes do fim da página.

27
00:01:11,009 --> 00:01:13,351
Várias tags HTML vêm em pares como este,

28
00:01:13,351 --> 00:01:15,099
mas nem todas.

29
00:01:15,431 --> 00:01:19,176
Abaixo do HTML, sempre existe
uma tag "head".

30
00:01:19,337 --> 00:01:22,146
Ela possui tags que ajudam o navegador 
a processar a página

31
00:01:22,146 --> 00:01:25,162
mas não contém nada que o 
usuário veja, de fato.

32
00:01:25,265 --> 00:01:27,465
Existe essa tag "meta" que
fornece ao navegador

33
00:01:27,465 --> 00:01:29,937
mais detalhes sobre como ele deve
processar a página.

34
00:01:29,937 --> 00:01:31,935
Por exemplo, se você está
usando caracteres

35
00:01:31,935 --> 00:01:33,201
como os da língua Inglesa

36
00:01:33,201 --> 00:01:35,497
e não caracteres mais difíceis de
processar, como

37
00:01:35,497 --> 00:01:36,628
os da língua Arábica,

38
00:01:36,628 --> 00:01:39,618
então você deve ter o meta charset 
definido como utf-8

39
00:01:39,920 --> 00:01:41,578
Em seguida, temos essa tag "title"

40
00:01:41,578 --> 00:01:45,009
que o navegador usa para decidir
o título da página.

41
00:01:45,012 --> 00:01:47,623
Isso é mostrado nas abas de cima
dos navegadores,

42
00:01:47,623 --> 00:01:50,031
nos favoritos e nos resultados de busca.

43
00:01:50,031 --> 00:01:53,430
Aqui, no Khan Academy, o título é
exibido logo acima de nossa página.

44
00:01:53,557 --> 00:01:55,495
Vamos trocar o título.

45
00:01:55,495 --> 00:01:59,348
Eu vou criar uma página toda
sobre coelhos.

46
00:01:59,348 --> 00:02:01,914
Então eu vou dizer: "Tudo Sobre Coelhos!!"

47
00:02:01,914 --> 00:02:04,923
e talvez você até possa ver 
isso mudando ali em cima.

48
00:02:05,539 --> 00:02:06,464
Legal.

49
00:02:06,464 --> 00:02:08,489
Agora terminamos com esses detalhes,

50
00:02:08,489 --> 00:02:11,946
fechamos a tag "head" e vamos até a tag

51
00:02:11,946 --> 00:02:14,809
onde tudo vai acontecer: a tag "body".

52
00:02:15,033 --> 00:02:17,805
Está muito chato agora, 
apenas o início e o fim.

53
00:02:17,971 --> 00:02:19,521
O que eu devo adicionar?

54
00:02:19,521 --> 00:02:21,771
Estou criando uma página
sobre coelhos,

55
00:02:21,771 --> 00:02:25,425
então eu provavelmente deveria declarar 
isso em um grande título em cima.

56
00:02:25,425 --> 00:02:28,656
Para adicionar um título, 
usamos a tag "h1".

57
00:02:29,574 --> 00:02:32,914
e... Tudo sobre coelhos, ótimo.

58
00:02:32,914 --> 00:02:34,482
Na verdade, existem seis tags que

59
00:02:34,482 --> 00:02:38,221
podemos usar como títulos: 
h1, h2, h3, h4, h5 e h6.

60
00:02:38,221 --> 00:02:41,153
"h1" é atribuído ao título mais 
relevante na página

61
00:02:41,153 --> 00:02:43,061
e "h6", para o menos importante.

62
00:02:43,061 --> 00:02:45,732
Vamos adicionar mais títulos
para as outras seções.

63
00:02:45,732 --> 00:02:49,035
Eu vou usar um h2 já que essas são seções

64
00:02:49,035 --> 00:02:51,197
menos importantes.

65
00:02:51,787 --> 00:02:55,469
E algumas músicas. Ótimo.

66
00:02:56,214 --> 00:02:58,232
Agora, vamos adicionar algum conteúdo.

67
00:02:58,232 --> 00:03:00,795
Meu público alvo para essa página

68
00:03:00,795 --> 00:03:03,934
são alienígenas que nunca viram
coelhos antes.

69
00:03:03,934 --> 00:03:06,790
Logo, é bom que eu dê a eles uma descrição
sobre coelhos.

70
00:03:06,790 --> 00:03:10,166
De fato, acho que preciso de um
parágrafo inteiro de informações.

71
00:03:10,166 --> 00:03:12,856
Como eu posso demarcar um parágrafo 
usando HTML?

72
00:03:13,391 --> 00:03:16,309
Com a tag "< p >", é claro!

73
00:03:16,877 --> 00:03:18,214
Colocamos a tag "< p >" e

74
00:03:18,214 --> 00:03:22,581
em seguida, vou em frente colando
as informações.

75
00:03:22,581 --> 00:03:25,568
Assim você não precisa me ver
digitando tudo isso.

76
00:03:25,576 --> 00:03:26,986
Lindo!

77
00:03:27,479 --> 00:03:30,622
Agora os aliens precisam de uma música
para cumprimentar os coelhos

78
00:03:30,622 --> 00:03:33,200
então, vou dar-lhes a letra de uma
favorita pessoal.

79
00:03:33,200 --> 00:03:36,176
E, de novo usamos a tag "< p >" para isso.

80
00:03:36,176 --> 00:03:39,582
E colocamos a música.

81
00:03:39,772 --> 00:03:40,885
♫ Little Bunny Foofoo ♫

82
00:03:40,885 --> 00:03:43,108
Ah, que música boa!

83
00:03:43,108 --> 00:03:47,298
Mas, tudo está aparecendo
na mesma linha.

84
00:03:47,298 --> 00:03:50,278
Como os aliens vão saber onde parar?

85
00:03:50,278 --> 00:03:53,810
Por que o navegador não processou as
quebras de linha que coloquei ali?

86
00:03:53,830 --> 00:03:56,572
Na verdade, os navegadores 
normalmente ignoram as

87
00:03:56,572 --> 00:03:58,918
quebras de linhas e os espaços em seu HTML

88
00:03:58,918 --> 00:04:01,677
Se quisermos que o navegador processe as
quebras de linhas,

89
00:04:01,677 --> 00:04:05,022
precisamos avisá-lo explicitamente usando
uma outra tag:

90
00:04:05,022 --> 00:04:08,176
a tag "< br >", que significa uma 
quebra de linha.

91
00:04:08,398 --> 00:04:12,513
Vamos em frente e adicionando < br > após 
cada linha.

92
00:04:12,777 --> 00:04:14,885
Agora isso parece uma letra de música.

93
00:04:15,440 --> 00:04:18,890
Você percebeu algo engraçado em
relação ao "< br >"?

94
00:04:19,171 --> 00:04:20,566
Não existe tag de fechamento.

95
00:04:20,566 --> 00:04:23,568
Se você pensar nisso, uma quebra
de linha não tem conteúdo.

96
00:04:23,568 --> 00:04:25,861
Logo, não há nada para ser fechado.

97
00:04:26,006 --> 00:04:28,496
Precisamos apenas da tag de abertura.

98
00:04:29,062 --> 00:04:30,276
Agora sim.

99
00:04:30,276 --> 00:04:32,704
Os aliens vão aprender o básico
sobre coelhos

100
00:04:32,704 --> 00:04:35,744
e vocês aprenderam o básico do HTML.

101
00:04:35,744 --> 00:04:37,218
Depois que eu terminar de falar

102
00:04:37,218 --> 00:04:39,816
brinque um pouco com isso 
e tente mudar as coisas.

103
00:04:39,816 --> 00:04:42,853
E, quando estiver pronto, encare seu 
primeiro desafio HTML.

104
00:04:42,853 --> 00:04:44,000
Traduzidor por [Felipe Francisco]
Revisado por [Fernando dos Reis]