1
00:00:00,230 --> 00:00:00,950
Bem vindo de volta.

2
00:00:01,140 --> 00:00:06,360
Então, nesta lição, vamos começar fazendo um novo arquivo realmente preenchendo com h t m

3
00:00:06,360 --> 00:00:11,930
l uma abertura no navegador e também vamos aprender sobre a estrutura subjacente de cada documento HTML.

4
00:00:11,940 --> 00:00:17,190
Então, há algumas coisas em que todos os documentos sempre têm um tipo de conhecimento sobre o qual

5
00:00:17,190 --> 00:00:17,820
vamos aprender.

6
00:00:17,820 --> 00:00:22,880
Então, para começar a ir para sublime e vou fazer um novo arquivo.

7
00:00:23,100 --> 00:00:29,610
Então, arquive um novo arquivo ou comando e, em seguida, eu vou salvar o arquivo e dar-lhe um nome.

8
00:00:29,610 --> 00:00:33,340
Então, guarde ou guarde arquivos como.

9
00:00:34,080 --> 00:00:37,040
Então, uma vez que eu faça isso, vamos dar um nome.

10
00:00:37,140 --> 00:00:42,980
Vamos chamar a primeira página da página T. M. e essa parte é muito importante.

11
00:00:42,990 --> 00:00:44,950
Dot h Timo.

12
00:00:45,690 --> 00:00:47,120
Então eu vou pegar salvar.

13
00:00:47,670 --> 00:00:50,170
E aquele ponto de cada equipe eu digo sublime.

14
00:00:50,340 --> 00:00:55,790
E quando eu abrir no Chrome, ele diz para o Chrome. Este é um h tim que vou tratar como tal.

15
00:00:56,220 --> 00:00:58,000
Então podemos escrever para Tim Allen aqui.

16
00:00:58,260 --> 00:01:04,460
Então, vamos começar com a única tag que vimos até agora, são uma das tags que é um H-1.

17
00:01:04,800 --> 00:01:06,740
E você notará que está destacado para mim.

18
00:01:06,780 --> 00:01:08,040
Então vamos preencher isso.

19
00:01:08,040 --> 00:01:16,470
Esta é a minha primeira etiqueta e salve este arquivo e você verá sublime sabe que é H D M L, portanto ele destaca

20
00:01:16,770 --> 00:01:19,020
que as tags correspondentes são vermelhas.

21
00:01:19,020 --> 00:01:19,950
No meu caso.

22
00:01:20,130 --> 00:01:25,680
Agora, o que queremos fazer é realmente abrir esse arquivo e visualizá-lo porque lembre-se de cada

23
00:01:25,680 --> 00:01:31,910
vez que é apenas texto, mas nosso navegador interpreta-o e o transforma em algo como isto ou aquilo.

24
00:01:31,920 --> 00:01:36,230
Então, para realmente obter o Chrome para abri-lo, existem algumas soluções.

25
00:01:36,270 --> 00:01:41,370
O primeiro é apenas um clique duplo sobre ele e ele irá abri-lo em seu navegador padrão.

26
00:01:41,490 --> 00:01:47,100
Se não for o Chrome, ele ainda funcionará, mas ele irá abri-lo no Safari ou no Firefox

27
00:01:47,580 --> 00:01:53,690
ou no Internet Explorer, e você pode ver, no entanto, enquanto ele abre, ele não está me mostrando o

28
00:01:53,690 --> 00:01:58,090
html real, ele está levando-o para subjacê-lo e transformá-lo em Esta agradável representação visual.

29
00:01:58,470 --> 00:02:03,340
Como sempre, posso ver a fonte da minha página e você verá que é apenas uma tag.

30
00:02:03,510 --> 00:02:07,470
Então, definitivamente mais simples do que algo assim.

31
00:02:09,330 --> 00:02:11,670
Mas subjacentes são exatamente os mesmos.

32
00:02:11,940 --> 00:02:15,910
E provavelmente há um H-1 nesta página também.

33
00:02:15,960 --> 00:02:17,770
Então, uma outra maneira de fazer isso.

34
00:02:18,000 --> 00:02:25,110
Você pode pegar o arquivo clicar direito e clicar em abrir com o Google Chrome ou você pode clicar nele e arrastá-lo

35
00:02:25,110 --> 00:02:27,720
para o Chrome e isso também o abrirá.

36
00:02:27,720 --> 00:02:32,640
O mesmo vale para o bem sublimado, então, se você acidentalmente fechar o arquivo, você pode arrastá-lo aqui e

37
00:02:32,640 --> 00:02:33,470
ele irá reabri-lo.

38
00:02:33,570 --> 00:02:40,200
Então, apenas para mostrar-lhe esse clique e eu posso abri-lo.

39
00:02:40,440 --> 00:02:44,380
Então, infelizmente eu tenho que quebrar as notícias que são simples.

40
00:02:44,370 --> 00:02:47,650
É Tim L que já escrevemos até agora é um pouco errado.

41
00:02:47,850 --> 00:02:52,140
A própria etiqueta de e-mail está bem, mas este não é um documento válido.

42
00:02:52,140 --> 00:02:57,260
E isso é porque estamos perdendo a estrutura subjacente que cada página precisa ter.

43
00:02:57,840 --> 00:02:59,320
Então parece isso.

44
00:02:59,490 --> 00:03:01,370
É muito comparado com o que fizemos até agora.

45
00:03:01,380 --> 00:03:03,950
Mas a boa notícia é que há duas boas notícias.

46
00:03:03,960 --> 00:03:05,560
Um é sempre o mesmo.

47
00:03:05,900 --> 00:03:12,120
E dois sublimes têm um atalho agradável que nos dá essa estrutura muito rapidamente com apenas quatro

48
00:03:12,120 --> 00:03:13,880
letras que temos que digitar.

49
00:03:14,280 --> 00:03:18,570
Então, vamos passar por cima dessas peças individualmente e apenas um pouco, mas

50
00:03:18,570 --> 00:03:25,650
vou começar por mostrar-lhe como obtê-lo em sublime, tão sublime em vez de h tim l, podemos digitar a palavra h tim

51
00:03:25,650 --> 00:03:29,690
L e em seguida, pressione a aba e nós automaticamente recebemos essa estrutura.

52
00:03:30,000 --> 00:03:32,400
Então vamos analisar o que isso faz.

53
00:03:32,400 --> 00:03:33,460
Primeiro, vamos salvar.

54
00:03:33,570 --> 00:03:39,090
Então, há esse tipo de documento H ele acima e está meio estranho, porque não

55
00:03:39,090 --> 00:03:48,650
há um tipo de documento de encerramento correspondente, como H-G M-L, e o tipo de documento de título e corpo e corpo é por conta própria.

56
00:03:48,690 --> 00:03:55,320
Então vamos para M. D. o que ser um desenvolvedor é google algo.

57
00:03:55,850 --> 00:04:00,510
e apenas mostrando-lhe como você conseguiria, eu escrevi MT-NW e depois tipo de documento e pode parecer bobo realmente

58
00:04:00,510 --> 00:04:03,700
falar sobre isso, mas isso é importante porque encontrar esta informação é realmente

59
00:04:03,720 --> 00:04:05,500
Como você encontra a resposta correta.

60
00:04:05,520 --> 00:04:07,740
Eu vou ser um registro completo e quebrado disso.

61
00:04:07,770 --> 00:04:12,660
Meus alunos riem toda vez que falo sobre a arte do google, mas é realmente importante.

62
00:04:12,930 --> 00:04:13,760
Então estou aqui.

63
00:04:13,800 --> 00:04:14,910
Vamos dar uma olhada.

64
00:04:15,030 --> 00:04:20,210
Ele diz que o tipo de documento para cada Timofei é simples de indicar que seu conteúdo HMO usa HDMI.

65
00:04:20,210 --> 00:04:26,970
Cinco simplesmente usam o doctype H-2 com um ponto de exclamação na frente dele e queremos usar o

66
00:04:26,970 --> 00:04:27,770
HMO 5.

67
00:04:27,870 --> 00:04:31,530
Falaremos exatamente sobre o que um schmuck é um 5 e o que não é.

68
00:04:31,530 --> 00:04:32,580
Em um futuro vídeo.

69
00:04:32,790 --> 00:04:34,070
Mas nós queremos usá-lo.

70
00:04:34,140 --> 00:04:36,720
É basicamente apenas a mais nova versão de idosos.

71
00:04:36,990 --> 00:04:38,660
Então, colocamos isso no topo.

72
00:04:39,030 --> 00:04:42,330
Então, a próxima coisa sobre a qual vamos falar é o elemento h t m l.

73
00:04:42,510 --> 00:04:47,490
Então, este é um pouco mais difícil de encontrar pesquisando quem faz o MT-NW e um HMO.

74
00:04:47,670 --> 00:04:48,540
Se nós

75
00:04:51,470 --> 00:04:56,030
apenas elemento lá vamos nós sempre procuro esse fim vazio no nome.

76
00:04:56,040 --> 00:05:01,350
E isso nos diz que o elemento raiz ele é a raiz de um documento HMO.

77
00:05:01,500 --> 00:05:04,930
Todos os outros elementos devem ser descendentes deste elemento.

78
00:05:05,040 --> 00:05:06,500
Então é bastante auto-explicativo.

79
00:05:06,620 --> 00:05:10,310
Basicamente, tudo o que escrevemos precisa entrar em cada elemento.

80
00:05:10,710 --> 00:05:18,360
um elemento principal seguido por um corpo que é o que temos uma cabeça e um corpo.

81
00:05:18,360 --> 00:05:22,640
E, mais importante ainda, nos conteúdos permitidos, nos conta

82
00:05:23,820 --> 00:05:28,140
Então, vamos dar uma olhada em qual cabeça é o elemento principal.

83
00:05:28,140 --> 00:05:34,190
Forneça metadados de informações gerais sobre o documento, incluindo seu título e links para serem definições de

84
00:05:34,200 --> 00:05:36,010
scripts e folhas de estilo.

85
00:05:36,330 --> 00:05:41,200
Então, o que isso significa é basicamente tudo o que não vemos na página como usuário.

86
00:05:41,400 --> 00:05:48,210
Então, coisas como arquivos de fonte em nossos arquivos de folhas de estilo ou arquivos de javascript todos esses

87
00:05:48,210 --> 00:05:53,200
vão na cabeça e então o corpo é onde colocamos todo o nosso conteúdo.

88
00:05:53,610 --> 00:05:57,210
Representa o conteúdo de um documento HTML idade.

89
00:05:57,210 --> 00:06:03,760
Então, se voltarmos aqui, posso garantir-lhe mais uma coisa, como escrever comentários e

90
00:06:03,750 --> 00:06:04,300
ajudá-lo.

91
00:06:04,530 --> 00:06:14,870
Se eu quisesse escrever uma nota para mim mesmo, se eu acabei de escrever este conteúdo vai no

92
00:06:14,910 --> 00:06:21,000
corpo e, depois, apareço que escrevi um dado na cabeça.

93
00:06:21,750 --> 00:06:26,580
Felizmente, isso não funcionará porque isso realmente aparecerá na página.

94
00:06:26,720 --> 00:06:31,070
Sua equipe tratará isso como texto e eu quero que seja apenas uma nota para mim.

95
00:06:31,230 --> 00:06:33,570
Então, isso é algo que você pode fazer em todas as linguagens de programação.

96
00:06:33,690 --> 00:06:41,040
do que signo dois traços e, em seguida, algum conteúdo e, por outro lado, dois traços e um sinal maior do que o sinal.

97
00:06:41,040 --> 00:06:47,100
Você pode transformar isso em um comentário e um comentário parece que isso começa com um ponto de exclamação menos

98
00:06:49,050 --> 00:06:52,420
Então, ele pode digitar que ouça-se, digite-o manualmente e

99
00:06:57,000 --> 00:06:59,680
você pode vê-lo tipo de cinza em sublime.

100
00:07:00,000 --> 00:07:05,220
Mas outro atalho realmente agradável é que você pode selecionar uma linha na

101
00:07:05,220 --> 00:07:08,360
qual você não precisa selecioná-la, apenas vá para

102
00:07:12,570 --> 00:07:21,160
alinhar e acertar a barra de comando e você também pode ver que pode ir até ela e você pode comentar comentário.

103
00:07:21,180 --> 00:07:24,230
Então, no caso de você esquecer isso e você não quer escrevê-lo.

104
00:07:24,260 --> 00:07:25,200
Outra coisa legal.

105
00:07:25,250 --> 00:07:30,380
Digamos que eu tenho um monte de notas para mim, eu posso selecionar todas elas e fazer o mesmo.

106
00:07:30,420 --> 00:07:33,000
Barra de comando.

107
00:07:34,440 --> 00:07:35,320
Ótimo.

108
00:07:35,400 --> 00:07:38,860
Então eu vou manter esses comentários aqui que são apenas notas para mim.

109
00:07:39,000 --> 00:07:40,740
Meu conteúdo vai no corpo.

110
00:07:40,830 --> 00:07:43,000
Ele vai na cabeça.

111
00:07:43,830 --> 00:07:50,880
Então, isso significa que se estamos seguindo nossas próprias anotações, nosso conteúdo aqui precisa entrar no nosso corpo.

112
00:07:52,680 --> 00:07:57,450
Então, não devemos ter nada flutuando ao redor do elemento H Tim L, exceto para o tipo de documento.

113
00:07:57,540 --> 00:08:02,280
Tudo o resto vai na cabeça ou no corpo.

114
00:08:02,280 --> 00:08:06,570
Então, vamos em frente e abra isso, certifique-se de que ele é o mesmo que antes.

115
00:08:06,570 --> 00:08:07,470
Duplo click.

116
00:08:07,620 --> 00:08:09,250
Você pode ver que isso parece idêntico.

117
00:08:09,420 --> 00:08:12,960
Vamos ver a fonte da página a mesma coisa.

118
00:08:12,960 --> 00:08:17,580
Observe que nossos comentários não estão aparecendo, é claro, apenas o nosso H-1 aparece.

119
00:08:17,580 --> 00:08:20,590
Uma coisa que nos falta enquanto estamos aqui é um título.

120
00:08:20,880 --> 00:08:27,570
Um título é importante não porque ele apareça na página que não aparecerá na nossa página atual aqui.

121
00:08:27,690 --> 00:08:28,980
Lembre-se que está na cabeça.

122
00:08:29,040 --> 00:08:32,660
Então, é apenas metadados o que faz é duas coisas.

123
00:08:32,700 --> 00:08:37,270
Um que vai determinar o nome ou o texto que aparece na nossa guia aparecem.

124
00:08:37,740 --> 00:08:43,710
E também é importante para os motores de busca e para outras páginas quando outras páginas são vinculadas

125
00:08:44,070 --> 00:08:49,890
ao seu site ou quando você vai ao Google e você procura o MDA nesses nomes aqui.

126
00:08:49,880 --> 00:08:52,770
Estes provêm dos elementos do título.

127
00:08:52,760 --> 00:08:58,070
Então, por exemplo, M. D. e comemora 10 anos de documento em sua web, você clica nisso.

128
00:08:58,470 --> 00:09:02,120
Você pode ver aqui, diz MDA e comemora que é interrompido.

129
00:09:02,190 --> 00:09:07,500
Você pode inspecionar a página procurando um elemento de título.

130
00:09:07,500 --> 00:09:08,730
Então, muitas coisas aqui vamos.

131
00:09:08,760 --> 00:09:12,250
Título e comemora 10 anos de documentação da sua web.

132
00:09:12,600 --> 00:09:13,810
O blog mizzle.

133
00:09:14,340 --> 00:09:16,340
Então, o título é importante.

134
00:09:17,070 --> 00:09:24,710
Então, vamos dar ao ArcSight um título, vamos chamar isso de relógio de atualização da primeira página aqui e atualiza.

135
00:09:25,710 --> 00:09:27,080
É por enquanto.

136
00:09:27,090 --> 00:09:28,420
Lembre-se de duas coisas.

137
00:09:28,540 --> 00:09:31,640
Este boilerplate pode apenas digitar H ele l tab.

138
00:09:31,770 --> 00:09:33,720
Você nunca teria mais do que um no documento.

139
00:09:33,890 --> 00:09:37,850
Mas apenas para lembrar a aba html e comentários.

140
00:09:37,980 --> 00:09:41,880
Você pode fazer com barra de comando pode direcioná-los e desligar.

141
00:09:41,900 --> 00:09:42,340
Tudo bem