1
00:00:00,000 --> 00:00:03,486
>> [Música tocando]

2
00:00:03,486 --> 00:00:10,460

3
00:00:10,460 --> 00:00:14,250
>> DAVID MALAN J: Este é CS50 e
este é o início da semana 7.

4
00:00:14,250 --> 00:00:15,060
Então, bem-vindo de volta.

5
00:00:15,060 --> 00:00:17,540
E você deve se lembrar que
no conjunto de problemas quatro,

6
00:00:17,540 --> 00:00:21,510
houve um pouco de uma caçada
para alguns fabulosos prémios pelo qual

7
00:00:21,510 --> 00:00:24,219
depois de recuperar as fotos de
equipe, tanto aqui como em New Haven,

8
00:00:24,219 --> 00:00:27,468
você foram desafiados a encontrar o maior número de
esses cientistas da computação como você poderia.

9
00:00:27,468 --> 00:00:29,550
E nós temos um todo
bando de submissões.

10
00:00:29,550 --> 00:00:31,930
Pensei que iria partilhar algumas
com vocês aqui hoje.

11
00:00:31,930 --> 00:00:35,100
>> E nós vamos deixar tudo isso online.

12
00:00:35,100 --> 00:00:39,310
Mas, em particular, eu queria
chamar a sua atenção a-- bem um,

13
00:00:39,310 --> 00:00:42,670
Sam estava em muito poucos deles
geralmente posando como este.

14
00:00:42,670 --> 00:00:45,750
Mas parece que a partir de
esta manhã, o vencedor

15
00:00:45,750 --> 00:00:51,170
foi um certo alguém chamado Ken com
24 da equipe capturado na câmera

16
00:00:51,170 --> 00:00:54,600
ou um pouco mais quando você levar em
conta vários funcionários nas fotos.

17
00:00:54,600 --> 00:00:58,300
Retratado aqui é Ken próxima
a Maria em New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Agora, Ken, porém, transforma
fora é um pouco de um caso de canto

19
00:01:01,300 --> 00:01:02,880
que ainda não aconteceu antes.

20
00:01:02,880 --> 00:01:05,713
Acontece que isso não ocorreu
para me colocar em letras miúdas problema

21
00:01:05,713 --> 00:01:09,710
definir quatro que diz que os funcionários são
inelegíveis para os prémios fabulosos

22
00:01:09,710 --> 00:01:13,130
porque Ken é, evidentemente, uma das
os fotógrafos em nossa equipe.

23
00:01:13,130 --> 00:01:16,820
Agora, com o que disse, ele
originalmente escreveu-me a dizer

24
00:01:16,820 --> 00:01:19,180
por favor, não postar estas fotos online.

25
00:01:19,180 --> 00:01:21,630
Eu acho que em grande parte
porque a maioria das fotos

26
00:01:21,630 --> 00:01:24,499
que este fotógrafo tirou olhar
um pouco algo como isto.

27
00:01:24,499 --> 00:01:25,040
E similar.

28
00:01:25,040 --> 00:01:28,990
>> Mas Ken gostaria de me tranquilizá-lo
que ele é um bom fotógrafo,

29
00:01:28,990 --> 00:01:33,190
Ele é um profissional, ele leva
fotos que não são borradas,

30
00:01:33,190 --> 00:01:37,270
que são melhores em foco, e ele
levou alguns de nossos próprios funcionários.

31
00:01:37,270 --> 00:01:40,370
Mas ao invés de reconhecer única
Ken, o que nós pensamos em fazer

32
00:01:40,370 --> 00:01:43,390
é percorrer a lista de
alunos reais que apresentaram.

33
00:01:43,390 --> 00:01:48,640
E verifica-se que Lance com
15 fotos a partir desta manhã

34
00:01:48,640 --> 00:01:50,030
foi o nosso vencedor.

35
00:01:50,030 --> 00:01:55,730
>> E é aqui retratado com Lance Colton,
com Skaz, comigo mesmo, e com Sam.

36
00:01:55,730 --> 00:02:00,230
Mas, em seguida, verifica-se que a partir de
11:46, por isso apenas um pouco atrás,

37
00:02:00,230 --> 00:02:04,380
Eu voltei para o meu e-mail e encontrado
que teve ainda mais uma apresentação

38
00:02:04,380 --> 00:02:08,300
por um estudante chamado Bonnie
cujo e-mail disse que somente isso.

39
00:02:08,300 --> 00:02:10,800
Não vamos mentir, eu sou
fazendo isso durante a aula.

40
00:02:10,800 --> 00:02:17,620
E então começou a anexar apenas
14 fotos, um tímido de Lance de 15.

41
00:02:17,620 --> 00:02:22,690
>> Mas, em fotos de Bonnie, verifica-se
out foram vários membros da equipe, Sam

42
00:02:22,690 --> 00:02:25,960
entre eles, então o que nós pensamos que nós
gostaria de fazer é reconhecer ambos.

43
00:02:25,960 --> 00:02:29,240
Assim, além de obter o Dropbox
espaço que todos que participaram

44
00:02:29,240 --> 00:02:33,900
recebe, essas duas seções também irá
receber um bom almoço servidos por eles

45
00:02:33,900 --> 00:02:36,100
e sua seção
acasala esta semana que vem.

46
00:02:36,100 --> 00:02:38,970
E assim que você vai ouvir de nós,
Lance e Bonnie, sobre isso.

47
00:02:38,970 --> 00:02:40,002
Tão grande parabéns para eles.

48
00:02:40,002 --> 00:02:42,210
Agora, aqueles de vocês que faria
como o almoço de modo mais geral

49
00:02:42,210 --> 00:02:45,320
sabe que o almoço CS50 em Cambridge
e New Haven é nesta sexta-feira.

50
00:02:45,320 --> 00:02:48,510
Ir para o site da barra de RSVP CS50.

51
00:02:48,510 --> 00:02:49,800
E agora uma palavra sobre os seminários.

52
00:02:49,800 --> 00:02:50,730
Mais curricularly.

53
00:02:50,730 --> 00:02:52,490
Então, nós estamos aproximando o
ponto do semestre

54
00:02:52,490 --> 00:02:55,200
onde você deve começar
pensando sobre projetos finais.

55
00:02:55,200 --> 00:02:59,309
E, de fato, em apenas um pouco, vai
os chamados propostas pré ser devido.

56
00:02:59,309 --> 00:03:01,850
Assim pré propostas destinam-se a
ser muito baixo impacto e realmente

57
00:03:01,850 --> 00:03:04,109
apenas uma oportunidade para
você compor uma nota curta

58
00:03:04,109 --> 00:03:06,900
seu companheiro de ensino para informar
ele ou ela o que você está pensando que você

59
00:03:06,900 --> 00:03:09,140
pode querer fazer para o seu projeto final.

60
00:03:09,140 --> 00:03:11,730
>> Agora, muitos estudantes acabam
fazendo web baseada projetos finais.

61
00:03:11,730 --> 00:03:13,800
E, claro, nós somos apenas
Agora, na semana passada nesta

62
00:03:13,800 --> 00:03:15,890
e além de mergulhar em programação web.

63
00:03:15,890 --> 00:03:18,200
Então não se preocupe se você
não tenho absolutamente nenhuma idéia de como

64
00:03:18,200 --> 00:03:21,594
você iria construir as idéias que
você pode ter em sua mente.

65
00:03:21,594 --> 00:03:24,510
Isto é realmente apenas uma função de força
para você pensar e falar

66
00:03:24,510 --> 00:03:25,650
com o seu TF sobre isso.

67
00:03:25,650 --> 00:03:28,810
Mas, para ajudá-lo com isso, e
com projetos finais, em última análise,

68
00:03:28,810 --> 00:03:31,750
sei que CS50 tem uma tradição
de oferecer seminários.

69
00:03:31,750 --> 00:03:36,084
>> E estes são opcionais, mãos,
ou palestra com base em oportunidades

70
00:03:36,084 --> 00:03:39,000
para aprender mais sobre temas que são
um pouco auxiliares para o curso de

71
00:03:39,000 --> 00:03:43,310
currículo, mas ainda assim maravilhoso
materiais para conduzir projetos finais.

72
00:03:43,310 --> 00:03:46,840
E assim esta é a lista que é
CS50 equipe aqui em New Haven

73
00:03:46,840 --> 00:03:48,600
vêm-se com a
este ano sobre iOS

74
00:03:48,600 --> 00:03:50,730
programação, Android
programação, desenvolvimento de jogos,

75
00:03:50,730 --> 00:03:54,480
e cachos de mais ferramentas
e linguagens e técnicas.

76
00:03:54,480 --> 00:03:56,780
>> Portanto, manter um olho no site do CS50.

77
00:03:56,780 --> 00:04:00,110
E, enquanto isso, se você gostaria de
registrar seu interesse em qualquer um destes,

78
00:04:00,110 --> 00:04:02,510
ir para registo barra de CS50.

79
00:04:02,510 --> 00:04:05,770
E nós vamos depois seguir quanto à
dias e horários de vôos e locais

80
00:04:05,770 --> 00:04:09,090
e mais tudo vai tudo--
ser transmitido e também está disponível sob demanda

81
00:04:09,090 --> 00:04:11,750
depois se você não pode realmente fazê-lo.

82
00:04:11,750 --> 00:04:15,800
Assim, sem mais delongas, vamos
parou na última vez com GET.

83
00:04:15,800 --> 00:04:19,610
>> E esta era como a mensagem de que era
dentro do envelope virtual, lembra,

84
00:04:19,610 --> 00:04:23,960
que passou de roteador para roteador para
router entre um navegador web e um web

85
00:04:23,960 --> 00:04:24,487
servidor.

86
00:04:24,487 --> 00:04:26,695
E essa mensagem parecia um
pouco algo como isto.

87
00:04:26,695 --> 00:04:29,700
Esta foi a mensagem que mais arcano
era, na verdade, dentro de um envelope

88
00:04:29,700 --> 00:04:34,440
escrito numa folha de papel cujo
primeira linha diz, literalmente, chegar barra.

89
00:04:34,440 --> 00:04:37,830
>> E, assim como uma verificação de sanidade,
o que barra denotar?

90
00:04:37,830 --> 00:04:40,455
O que quer dizer quando barra
solicitando um site?

91
00:04:40,455 --> 00:04:43,070

92
00:04:43,070 --> 00:04:44,250
Você solicitá-lo o tempo todo.

93
00:04:44,250 --> 00:04:47,333
A maioria dos qualquer vez que você visita um site, você
na verdade, não digite um nome de arquivo.

94
00:04:47,333 --> 00:04:50,960
Você provavelmente só ir para Facebook.com,
introduzir, gmail.com, ou semelhantes.

95
00:04:50,960 --> 00:04:52,260
E o que barra representam?

96
00:04:52,260 --> 00:04:53,506
Qual arquivo?

97
00:04:53,506 --> 00:04:54,630
Ou que página, especificamente?

98
00:04:54,630 --> 00:04:59,642

99
00:04:59,642 --> 00:05:00,720
>> O índice, sim.

100
00:05:00,720 --> 00:05:01,810
Então, a página padrão.

101
00:05:01,810 --> 00:05:04,810
Portanto, se você não especificar um arquivo
nomear como nós vamos começar a ver,

102
00:05:04,810 --> 00:05:07,750
na verdade você está apenas pedindo
dá-me a página padrão do Facebook

103
00:05:07,750 --> 00:05:10,800
ou me dar a minha caixa de entrada ou dar
me a página padrão de notícias

104
00:05:10,800 --> 00:05:12,510
no site da CNN ou similares.

105
00:05:12,510 --> 00:05:15,220
E em seguida, um servidor responde a
essa mensagem com algo

106
00:05:15,220 --> 00:05:18,420
como este, dizendo: sim, eu
falar HTTP versão 1.1.

107
00:05:18,420 --> 00:05:21,130
>> 200, que é um estado
código que nós, seres humanos raramente

108
00:05:21,130 --> 00:05:22,790
nunca ver porque é bom.

109
00:05:22,790 --> 00:05:26,640
Porque significa OK, o pedido
foi recebida e tratada adequadamente.

110
00:05:26,640 --> 00:05:28,960
E o tipo de conteúdo
aparentemente na resposta

111
00:05:28,960 --> 00:05:31,170
é, muitas vezes, mas não sempre, texto.

112
00:05:31,170 --> 00:05:32,580
E especificamente, o HTML.

113
00:05:32,580 --> 00:05:34,760
E isso é, na verdade,
onde olhamos para hoje.

114
00:05:34,760 --> 00:05:37,140
>> Então, na verdade, eu estou indo para ir
em frente e abrir um browser.

115
00:05:37,140 --> 00:05:40,410
Vou usar o Chrome, você pode usar
mais qualquer navegador nas semanas para vir.

116
00:05:40,410 --> 00:05:42,410
Em geral, recomendamos Chrome
porque é particularmente

117
00:05:42,410 --> 00:05:43,750
bom para os desenvolvedores de software.

118
00:05:43,750 --> 00:05:46,070
Ele tem um monte de construída em
ferramentas que tornam mais fácil

119
00:05:46,070 --> 00:05:49,800
para desenvolver não apenas HTML e CSS,
coisas que vamos começar a falar sobre hoje,

120
00:05:49,800 --> 00:05:51,530
mas também outras línguas também.

121
00:05:51,530 --> 00:05:55,530
>> E eu estou indo para ir em frente e ir a--
Eu estou indo para controlar ou clique direito

122
00:05:55,530 --> 00:05:57,210
clique em qualquer lugar em uma página web.

123
00:05:57,210 --> 00:05:59,070
E eu estou indo para ir para Inspect Element.

124
00:05:59,070 --> 00:06:03,850
E eu vou ajustar meu
tela só um pouquinho aqui.

125
00:06:03,850 --> 00:06:05,790
Deixe-me passar isso para o fundo.

126
00:06:05,790 --> 00:06:08,140
Portanto, este é o que é chamado
Inspector do Chrome.

127
00:06:08,140 --> 00:06:11,010
Então, isso é como uma depuração
ferramenta embutida no Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Todos vocês já têm essa
se você esteve usando o Chrome.

129
00:06:13,520 --> 00:06:17,169
E isso permite que você veja o que está acontecendo
por baixo do capuz de alguma página web.

130
00:06:17,169 --> 00:06:19,210
Então, vamos realmente ter um
olhar para isto como segue.

131
00:06:19,210 --> 00:06:21,251
Tem maneira mais recursos
e nos preocupamos hoje.

132
00:06:21,251 --> 00:06:22,760
Mas há essas guias para cá.

133
00:06:22,760 --> 00:06:25,890
Elementos, rede, fontes,
linha do tempo, e algumas outras coisas.

134
00:06:25,890 --> 00:06:27,800
Eu estou indo para clicar em
Rede por um momento.

135
00:06:27,800 --> 00:06:30,500
>> E é um pouco esmagadora
à primeira vista aqui.

136
00:06:30,500 --> 00:06:34,190
Mas o que eu vou fazer é deixar
me simplificá-lo um pouco.

137
00:06:34,190 --> 00:06:37,560
Vou ligar o
gravação de luz de modo que é vermelho.

138
00:06:37,560 --> 00:06:39,140
E eu vou dizer preservar log.

139
00:06:39,140 --> 00:06:41,015
E este é apenas um pouco
coisa que eu descobri

140
00:06:41,015 --> 00:06:44,120
ao longo do tempo que vai salvar
tudo o que acontece no navegador.

141
00:06:44,120 --> 00:06:50,030
E agora eu estou indo para ir
para http://facebook.com.

142
00:06:50,030 --> 00:06:52,690
>> Na verdade, vamos fazer www
para uma boa medida, slash.

143
00:06:52,690 --> 00:06:53,643
Enter.

144
00:06:53,643 --> 00:06:56,180
Assim, um URL que muitos
você pode ter visitado.

145
00:06:56,180 --> 00:06:58,830
E agora web do Facebook
A página surge no topo.

146
00:06:58,830 --> 00:07:02,350
E, em seguida, um monte de
material voou na parte inferior.

147
00:07:02,350 --> 00:07:04,830
E, de fato, verifica-se que
quando você visita Facebook.com,

148
00:07:04,830 --> 00:07:09,320
você não está apenas fazendo uma solicitação HTTP,
verifica-se que vai Facebook.com

149
00:07:09,320 --> 00:07:14,320
envia 41 desses envelopes,
cada um com seu próprio pedido get,

150
00:07:14,320 --> 00:07:18,360
conforme indicado, se bem que por detrás do ecrã
aqui, na parte inferior do ecrã,

151
00:07:18,360 --> 00:07:24,040
isso indica que, na verdade, o meu
navegador fez 41 pedidos.

152
00:07:24,040 --> 00:07:29,689
>> E no total, transferiu 861
kilobytes e levou por algum motivo

153
00:07:29,689 --> 00:07:31,730
até oito segundo
para baixar tudo isso.

154
00:07:31,730 --> 00:07:33,790
Então, isso é realmente um pouco estranho
que o site do Facebook que levaria

155
00:07:33,790 --> 00:07:35,600
por muito tempo, mas que assim seja neste caso.

156
00:07:35,600 --> 00:07:39,520
Agora, tudo isso eu realmente não me importo
sobre, exceto para o pedido de nível superior.

157
00:07:39,520 --> 00:07:46,440
Então vamos para este aqui
e deixe-me afastar por um momento.

158
00:07:46,440 --> 00:07:47,754
>> E deixe-me fazer zoom sobre o assunto.

159
00:07:47,754 --> 00:07:50,670
Então o que eu fiz na esquerda, embora
há muita coisa acontecendo aqui

160
00:07:50,670 --> 00:07:53,360
é que eu destaque
Facebook.com e depois

161
00:07:53,360 --> 00:07:56,540
notar que eu estou rolando para baixo,
rolagem para baixo, rolando para baixo,

162
00:07:56,540 --> 00:07:58,330
para solicitar cabeçalhos.

163
00:07:58,330 --> 00:08:01,720
E você vai ver que o Chrome está mostrando
me essencialmente o conteúdo interno

164
00:08:01,720 --> 00:08:02,810
do pedido que eu fiz.

165
00:08:02,810 --> 00:08:06,130
Não é formatar completamente na mesma
maneira, mas observe há menção de entrar,

166
00:08:06,130 --> 00:08:09,481
notar há menção do anfitrião,
Facebook.com, o caminho, ou barra,

167
00:08:09,481 --> 00:08:10,730
que é o arquivo que eu solicitado.

168
00:08:10,730 --> 00:08:12,930
>> E então se eu rolar
backup, nós vamos realmente

169
00:08:12,930 --> 00:08:17,270
ver que o Facebook devolvido
para mim é todos esses cabeçalhos.

170
00:08:17,270 --> 00:08:21,040
Então, dentro desse envelope virtual
na verdade, há um monte de pares de valores-chave.

171
00:08:21,040 --> 00:08:23,130
Uma palavra, um cólon, e, em seguida, um valor.

172
00:08:23,130 --> 00:08:25,050
Uma palavra, uma vírgula, e um valor.

173
00:08:25,050 --> 00:08:26,160
Estes são chamados os cabeçalhos.

174
00:08:26,160 --> 00:08:31,860
E não há maneira mais detalhes aqui do que
que realmente se preocupam agora.

175
00:08:31,860 --> 00:08:33,750
>> Mas esta é a segunda
último lá em baixo,

176
00:08:33,750 --> 00:08:38,809
notar, que o servidor da Facebook.com,
de fato disse vem aqui algum texto HTML.

177
00:08:38,809 --> 00:08:41,409
Então, tudo isso é para dizer
que quando você pedir um web

178
00:08:41,409 --> 00:08:44,300
página de um navegador para um
servidor, que servidor responde

179
00:08:44,300 --> 00:08:47,630
com um envelope de sua própria
no interior dos quais é texto.

180
00:08:47,630 --> 00:08:49,020
Em outras palavras, o HTML.

181
00:08:49,020 --> 00:08:50,590
Linguagem de marcação de hipertexto.

182
00:08:50,590 --> 00:08:53,200
Que é uma outra língua
que apresentamos hoje

183
00:08:53,200 --> 00:08:57,740
que os seres humanos ou computadores gerar
a fim de implementar páginas web.

184
00:08:57,740 --> 00:08:59,580
>> Especificamente, vamos olhar para isso.

185
00:08:59,580 --> 00:09:03,277
Eu vou agora voltar
para o site do Facebook.

186
00:09:03,277 --> 00:09:05,360
E eu vou apenas
controle clique ou clique direito

187
00:09:05,360 --> 00:09:07,634
e clique em Exibir código fonte da página.

188
00:09:07,634 --> 00:09:10,550
E mesmo se você não usar o Chrome,
IE pode fazer isso, o Firefox pode fazer isso,

189
00:09:10,550 --> 00:09:14,060
Safari pode fazer isso, embora o menu
opções pode parecer um pouco diferente.

190
00:09:14,060 --> 00:09:18,990
E este é o código HTML que Mark e
empresa no Facebook escreveu.

191
00:09:18,990 --> 00:09:24,640
>> E coletivamente, essa linguagem aqui
implementa o azul e branco da página

192
00:09:24,640 --> 00:09:26,370
que vimos há pouco.

193
00:09:26,370 --> 00:09:28,030
Agora, isso é um pouco esmagadora.

194
00:09:28,030 --> 00:09:31,400
Mas se olharmos para cima no canto superior esquerdo, estamos
vai começar a ver alguns padrões.

195
00:09:31,400 --> 00:09:34,140
Parece que há um monte
destes suporte de ângulo aberto

196
00:09:34,140 --> 00:09:35,970
e depois há este HTML palavra-chave.

197
00:09:35,970 --> 00:09:38,330
Aqui está outro aberto
suporte de ângulo e cabeça.

198
00:09:38,330 --> 00:09:41,560
>> Aqui está, se desloque
e para baixo e para baixo, eu sou

199
00:09:41,560 --> 00:09:43,820
indo para ir em frente e tentar
para procurar algo.

200
00:09:43,820 --> 00:09:48,510
Há caminho à direita
aqui é o órgão de suporte aberto.

201
00:09:48,510 --> 00:09:50,800
E lembrar da última
tempo que propusemos

202
00:09:50,800 --> 00:09:53,364
que a página web mais simples
que um ser humano pode escrever

203
00:09:53,364 --> 00:09:55,030
pode parecer um pouco algo como isto.

204
00:09:55,030 --> 00:09:58,430
Abrir tag HTML, cabeça aberta
tag, tag title aberto,

205
00:09:58,430 --> 00:10:03,230
então o título fechado, cabeça fechada, aberta
tag corpo, algum texto, corpo fechado,

206
00:10:03,230 --> 00:10:04,720
HTML fechado.

207
00:10:04,720 --> 00:10:06,290
>> Mas uma pausa aqui por um momento.

208
00:10:06,290 --> 00:10:09,030
Este código, mesmo se você tiver
nunca escreveu isso antes

209
00:10:09,030 --> 00:10:11,864
mas ainda não entendo muito bem
o que está acontecendo, parece muito bom.

210
00:10:11,864 --> 00:10:12,821
Certo, é muito limpo.

211
00:10:12,821 --> 00:10:14,120
É muito estilisticamente agradável.

212
00:10:14,120 --> 00:10:16,190
Um monte de recuo e espaço em branco.

213
00:10:16,190 --> 00:10:18,020
Facebook é não é.

214
00:10:18,020 --> 00:10:23,190
Então, por que é tão Facebook
pior do que eu em escrever em HTML?

215
00:10:23,190 --> 00:10:24,310
Aparentemente.

216
00:10:24,310 --> 00:10:26,899
>> Certo, isso é como um
fora de cinco para o estilo.

217
00:10:26,899 --> 00:10:29,315
Há uma razão convincente
para que estes cantos cortados.

218
00:10:29,315 --> 00:10:31,069

219
00:10:31,069 --> 00:10:33,860
Tudo bem, então eles não querem
tornar mais fácil para que você possa lê-lo.

220
00:10:33,860 --> 00:10:36,940
Assim, em certo sentido, eles são
ofuscar-lo, tipo de codificação que

221
00:10:36,940 --> 00:10:40,260
pelo menos tão esteticamente
que é mais difícil para Myspace

222
00:10:40,260 --> 00:10:42,705
para ir e arrancar seu
homepage eo HTML para ele.

223
00:10:42,705 --> 00:10:45,080
Acontece que com programas
no entanto, incluindo o cromo,

224
00:10:45,080 --> 00:10:47,020
podemos limpar isso super fácil.

225
00:10:47,020 --> 00:10:49,420
Por isso, não é bem isso é como a razão.

226
00:10:49,420 --> 00:10:51,290
O que mais poderia ser a causa.

227
00:10:51,290 --> 00:10:51,790
Sim.

228
00:10:51,790 --> 00:10:54,680

229
00:10:54,680 --> 00:10:55,890
Sim, dados os custos de espaço em branco.

230
00:10:55,890 --> 00:10:56,598
O que você quer dizer?

231
00:10:56,598 --> 00:11:02,250

232
00:11:02,250 --> 00:11:02,979
Sim exatamente.

233
00:11:02,979 --> 00:11:06,020
Se você pressionar a tecla Tab muito ou o
barra de espaço, considerar as implicações.

234
00:11:06,020 --> 00:11:10,060
Assim, cada tecla no teclado é uma
[Inaudível] representado como um byte.

235
00:11:10,060 --> 00:11:14,560
>> Então suponho que Mark ou qualquer um dos devs
estes dias atinge a barra de espaço apenas uma vez

236
00:11:14,560 --> 00:11:17,899
nesta página HTML que
representa a página de Facebook.

237
00:11:17,899 --> 00:11:19,690
E o Facebook tem um monte
de usuários nos dias de hoje.

238
00:11:19,690 --> 00:11:24,030
Então, suponha que a página de Facebook
é visitado por um bilhão de pessoas hoje.

239
00:11:24,030 --> 00:11:27,020
E alguém no Facebook tem
pressione a barra de espaço apenas uma vez.

240
00:11:27,020 --> 00:11:29,890
>> Então, um byte adicional,
um bilhão de solicitações,

241
00:11:29,890 --> 00:11:32,790
quanto mais dados são Facebook
a transferência através da internet

242
00:11:32,790 --> 00:11:37,160
porque alguém bateu o
barra de espaço no seu teclado?

243
00:11:37,160 --> 00:11:41,660
Um bilhão de bytes, ou um gigabyte de
os dados estão sendo enviados a partir de servidores do Facebook

244
00:11:41,660 --> 00:11:43,626
para pessoas em todo o
mundo sem uma boa razão.

245
00:11:43,626 --> 00:11:44,750
Agora, isso é apenas um espaço.

246
00:11:44,750 --> 00:11:48,866
>> Imagine se nós realmente limpar este
coisa e recuado ele e acrescentou

247
00:11:48,866 --> 00:11:50,990
um monte de espaço em branco e
caracteres de tabulação e espaços,

248
00:11:50,990 --> 00:11:53,656
Você acaba gastando gigabytes,
se não terra bytes mais espaço.

249
00:11:53,656 --> 00:11:56,640
E tão super comum no
mundo real de desenvolvimento web

250
00:11:56,640 --> 00:11:58,950
é para apoucar o seu código.

251
00:11:58,950 --> 00:12:01,280
E nós vamos finalmente ver
como você pode fazer isso.

252
00:12:01,280 --> 00:12:04,630
>> Mas hoje, nós vamos começar a escrever código
que é realmente lido por nós seres humanos.

253
00:12:04,630 --> 00:12:10,120
Acontece, porém, se você voltar
a esta ferramenta no Chrome Inspect Element,

254
00:12:10,120 --> 00:12:12,030
anteriormente, estávamos na guia Rede.

255
00:12:12,030 --> 00:12:15,430
Acontece que se você vai para o
guia elementos, o que você realmente ver

256
00:12:15,430 --> 00:12:19,230
Chrome é bastante impresso
versão de HTML que mesmo.

257
00:12:19,230 --> 00:12:20,640
Então, nós temos deobfuscated-lo.

258
00:12:20,640 --> 00:12:22,472
Por isso, não é páreo para um computador.

259
00:12:22,472 --> 00:12:24,430
E agora você pode realmente
clique ao redor e começar

260
00:12:24,430 --> 00:12:27,630
para ver a hierarquia que é uma página web.

261
00:12:27,630 --> 00:12:28,780
Então vamos realmente fazer isso.

262
00:12:28,780 --> 00:12:32,120
Eu estou indo para ir em frente e abrir-se em
meu Mac um programa chamado de edição de texto.

263
00:12:32,120 --> 00:12:35,490
E lembrar que este é apenas
um programa super texto simples.

264
00:12:35,490 --> 00:12:37,490
Windows tem notepad.exe.

265
00:12:37,490 --> 00:12:39,820
E eu vou Verbatim
digite o seguinte.

266
00:12:39,820 --> 00:12:44,650
Doc tipo HTML, suporte aberto
HTML, fechou suporte HTML,

267
00:12:44,650 --> 00:12:49,000
temos a cabeça da página aqui,
o fim do cabeçalho da página aqui,

268
00:12:49,000 --> 00:12:52,310
um título será como, Olá mundo.

269
00:12:52,310 --> 00:12:56,660
>> E, em seguida, para baixo aqui, precisamos
o corpo da página web.

270
00:12:56,660 --> 00:12:58,050
Corpo fechado.

271
00:12:58,050 --> 00:13:00,700
E, em seguida, aqui, Olá mundo.

272
00:13:00,700 --> 00:13:01,270
Tudo certo.

273
00:13:01,270 --> 00:13:03,350
Então nós escrevemos uma página da web super rápido.

274
00:13:03,350 --> 00:13:06,675
Vou guardá-lo como
hello.html no meu desktop.

275
00:13:06,675 --> 00:13:09,050
Meu Mac vai reclamar,
pensando que, espere um minuto,

276
00:13:09,050 --> 00:13:11,091
este é um arquivo de texto, fazer
você quiser chamá-lo .txt?

277
00:13:11,091 --> 00:13:13,300
Mas não, eu quero usar HTML ponto.

278
00:13:13,300 --> 00:13:16,140
>> E então o que é bom se eu
basta clicar duas vezes neste arquivo,

279
00:13:16,140 --> 00:13:18,600
hello.html, aqui vai a minha página web.

280
00:13:18,600 --> 00:13:22,564
Infelizmente, eu sou o
única pessoa no mundo

281
00:13:22,564 --> 00:13:23,980
que pode visitar esta página agora.

282
00:13:23,980 --> 00:13:26,734
Porque onde ela vive aparentemente?

283
00:13:26,734 --> 00:13:27,650
É no meu Mac, certo?

284
00:13:27,650 --> 00:13:28,470
Que é inútil.

285
00:13:28,470 --> 00:13:30,390
Como ninguém nesta sala
muito menos na internet

286
00:13:30,390 --> 00:13:31,598
pode realmente visitar essa página.

287
00:13:31,598 --> 00:13:33,820
Então, hoje, nós precisamos
introduzir um outro elemento.

288
00:13:33,820 --> 00:13:36,720
>> E para fazer isso, eu vou
vá em frente e abrir cloud 9.

289
00:13:36,720 --> 00:13:40,090
Então cloud 9 é, naturalmente, um
nuvem serviço-- baseado CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Isso tem todos os nossos espaços de trabalho
correndo em algum lugar na internet.

291
00:13:44,890 --> 00:13:48,330
E isso significa que todos os nossos arquivos
são acessíveis ao público já.

292
00:13:48,330 --> 00:13:49,830
Então, vamos seguir em frente e fazer isso.

293
00:13:49,830 --> 00:13:53,670
Eu estou indo para ir em frente e
criar um novo arquivo NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Vou guardá-lo como antes
como hello.html e clique em Salvar.

295
00:13:58,819 --> 00:14:01,860
E agora só para economizar tempo, eu vou
para ir em frente e copiar e colar este código

296
00:14:01,860 --> 00:14:03,470
em vez de digitá-lo novamente.

297
00:14:03,470 --> 00:14:04,550
E salvá-lo.

298
00:14:04,550 --> 00:14:07,550
E então agora eu tenho um
arquivo chamado hello.html.

299
00:14:07,550 --> 00:14:09,710
Mas como é que eu realmente
abri-lo como uma página da web?

300
00:14:09,710 --> 00:14:14,120
Bem, acontece que o construído em para CS50
IDE não só é um compilador como clang

301
00:14:14,120 --> 00:14:16,670
e um depurador como o GDB e
cachos de outros programas,

302
00:14:16,670 --> 00:14:21,140
há realmente uma pleno direito
servidor web rodando dentro CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Todos vocês, isto é,
ter seu próprio servidor web.

304
00:14:23,900 --> 00:14:26,850
E um servidor web é apenas um pedaço
de software cujo propósito na vida

305
00:14:26,850 --> 00:14:28,220
é para servir páginas web.

306
00:14:28,220 --> 00:14:32,490
Para escutar as solicitações de navegadores e
responder com pequenos envelopes virtuais

307
00:14:32,490 --> 00:14:35,290
dentro do qual é a
conteúdo que eu escrevi.

308
00:14:35,290 --> 00:14:38,372
Portanto, este servidor web é
fonte realmente livre e aberto.

309
00:14:38,372 --> 00:14:40,830
Onde open source significa apenas
software que alguém tem

310
00:14:40,830 --> 00:14:43,480
escrito que todos nós podemos
realmente ver e baixar e mesmo

311
00:14:43,480 --> 00:14:44,780
alterar o código-fonte.

312
00:14:44,780 --> 00:14:46,150
E ele é chamado Apache.

313
00:14:46,150 --> 00:14:51,450
>> E nós temos feito um pouco mais fácil
usar em CS50IDE chamando-50 Apache.

314
00:14:51,450 --> 00:14:53,780
Para que ele possa realmente
compreender o seguinte.

315
00:14:53,780 --> 00:14:56,560
Eu vou dizer Apache 50 início.

316
00:14:56,560 --> 00:14:58,910
E então eu só vou dizer ponto.

317
00:14:58,910 --> 00:15:01,080
E nós vemos alguns um pouco
mensagem dizendo arcano

318
00:15:01,080 --> 00:15:04,640
configuração do Apache documento [? grupo?]
a casa, ubuntu, qualquer que seja,

319
00:15:04,640 --> 00:15:05,770
barra de espaço de trabalho.

320
00:15:05,770 --> 00:15:08,280
Iniciando o servidor web
Apache 2 com êxito.

321
00:15:08,280 --> 00:15:11,330
>> Então, longa história curta, I
ter apenas apertou um botão

322
00:15:11,330 --> 00:15:18,000
e virou-se em um servidor web que é agora
escutando na internet na porta TCP

323
00:15:18,000 --> 00:15:20,587
80 em um endereço específico.

324
00:15:20,587 --> 00:15:22,420
E ele diz aqui, e
isso vai mudar com base

325
00:15:22,420 --> 00:15:26,550
em seu nome de usuário e outros fatores,
mas agora perceber se eu clicar isto,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard e assim e
por isso, perceber que todo esse tempo

327
00:15:30,211 --> 00:15:31,960
Para os últimos
semanas, você pode ter

328
00:15:31,960 --> 00:15:35,200
reparou que o seu próprio nome de usuário
é incorporado no lado superior direito

329
00:15:35,200 --> 00:15:37,130
esquina da CS50IDE.

330
00:15:37,130 --> 00:15:41,050
>> E isso, na verdade, tem sido tudo isso
cronometrar o endereço em que você pode

331
00:15:41,050 --> 00:15:43,574
visitar todos os seus ficheiros através da web.

332
00:15:43,574 --> 00:15:45,990
Até agora, não importava,
porque em C, você geralmente

333
00:15:45,990 --> 00:15:48,073
querem que as coisas funcionam em um
terminal, não na web.

334
00:15:48,073 --> 00:15:50,800
Mas hoje, começamos
escrever código baseado na web

335
00:15:50,800 --> 00:15:53,350
que nós queremos
acessível em URLs públicas.

336
00:15:53,350 --> 00:15:56,100
Então o que eu vou
fazer é clicar nesse URL.

337
00:15:56,100 --> 00:16:00,880
>> E note que eu vejo um bastante
índice feio, uma listagem de diretório,

338
00:16:00,880 --> 00:16:04,090
mas o arquivo salta em você provavelmente?

339
00:16:04,090 --> 00:16:05,210
Hello.html.

340
00:16:05,210 --> 00:16:07,870
Isso é porque eu salvei
o arquivo na minha área de trabalho.

341
00:16:07,870 --> 00:16:12,310
E o que eu disse a Apache o servidor web
é olhar no diretório do espaço de trabalho de David.

342
00:16:12,310 --> 00:16:15,300
E deixe que ninguém no
mundo ver esses arquivos.

343
00:16:15,300 --> 00:16:19,050
>> E, de fato, se eu agora
clique no hello.html,

344
00:16:19,050 --> 00:16:22,180
Eu vejo dentro deste guia exatamente esse arquivo.

345
00:16:22,180 --> 00:16:26,430
Agora note, nuvem 9 de obra
algo um pouco útil para nós.

346
00:16:26,430 --> 00:16:29,480
Dentro CS50 IDE, observe que há
de repente, uma barra de endereços.

347
00:16:29,480 --> 00:16:33,690
Isso porque mesmo que estejamos
usando Chrome para visitar CS50IDE,

348
00:16:33,690 --> 00:16:37,940
dentro de CS50IDE é a sua própria
versão de um navegador da web agora.

349
00:16:37,940 --> 00:16:40,820
E assim, em vez de
complicar as coisas, como tal,

350
00:16:40,820 --> 00:16:42,955
Eu estou indo para ir em frente
e apenas copiar este URL.

351
00:16:42,955 --> 00:16:45,330
Eu estou indo para ir em frente e apenas
abrir a minha própria janela Chrome.

352
00:16:45,330 --> 00:16:47,800
Então não há nenhuma mágica aqui, não CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Eu só vou para colar literalmente
Harvard minha URL e J pressione Enter.

354
00:16:51,800 --> 00:16:54,750
E pronto, agora eu e
em teoria, todos

355
00:16:54,750 --> 00:16:57,700
na internet, se eu tiver configurado
Permissões de forma adequada,

356
00:16:57,700 --> 00:16:58,720
pode visitar este arquivo.

357
00:16:58,720 --> 00:17:03,230
E agora, se eu disse
hello.html, voila, há

358
00:17:03,230 --> 00:17:06,366
é a minha página web incrivelmente decepcionante.

359
00:17:06,366 --> 00:17:07,740
Então vamos fazer uma verificação de sanidade rápida.

360
00:17:07,740 --> 00:17:09,710
Por causa de tudo isso
é conceitual set up.

361
00:17:09,710 --> 00:17:13,180
E nós realmente não tenho realmente
você ensinou como escrever HTML per se.

362
00:17:13,180 --> 00:17:16,084
Quaisquer perguntas até agora
sobre o que está aconteceu?

363
00:17:16,084 --> 00:17:18,549

364
00:17:18,549 --> 00:17:19,049
Sim.

365
00:17:19,049 --> 00:17:24,290

366
00:17:24,290 --> 00:17:25,800
O CS50 possui estas páginas da web?

367
00:17:25,800 --> 00:17:26,460
Em que sentido?

368
00:17:26,460 --> 00:17:28,947

369
00:17:28,947 --> 00:17:29,530
Boa pergunta.

370
00:17:29,530 --> 00:17:32,429
Então CS50 é proprietária CS50.io.

371
00:17:32,429 --> 00:17:33,970
Temos de fato comprou o nome de domínio.

372
00:17:33,970 --> 00:17:37,240
E pela natureza de vocês
registrando em CS50IDE,

373
00:17:37,240 --> 00:17:39,270
você obter tudo o que é chamado um subdomínio.

374
00:17:39,270 --> 00:17:46,840
>> Então IDE50-Malan, ou IDE50-Rob.CS50.io,
esse é o seu endereço exclusivo dentro

375
00:17:46,840 --> 00:17:47,730
o nosso nome de domínio.

376
00:17:47,730 --> 00:17:50,850
Assim, para os fins de curso,
você tem seu próprio endereço exclusivo.

377
00:17:50,850 --> 00:17:55,150
Mas nós simplificamos as coisas por
comprar o domínio de nível superior, CS50 dot

378
00:17:55,150 --> 00:17:58,050
I / O e, em seguida, toda a gente é
dentro de que, por assim dizer.

379
00:17:58,050 --> 00:17:59,890
E nós vamos voltar a isso
em um par de semanas, provavelmente,

380
00:17:59,890 --> 00:18:01,930
especialmente no projeto final
tempo, quando alguns de vocês

381
00:18:01,930 --> 00:18:03,596
pode querer obter seus próprios nomes de domínio.

382
00:18:03,596 --> 00:18:06,270
Na verdade, é relativamente
direto.

383
00:18:06,270 --> 00:18:06,770
Tudo certo.

384
00:18:06,770 --> 00:18:07,880
Então, vamos agora fazer isso.

385
00:18:07,880 --> 00:18:11,910
Eu vou voltar para
CS50IDE, onde meu arquivo agora,

386
00:18:11,910 --> 00:18:14,710
hello.html, não é tão interessante.

387
00:18:14,710 --> 00:18:17,130
Eu gostaria de fazer algo
um pouco melhor do que isso.

388
00:18:17,130 --> 00:18:19,440
Então, eu vou fazer algo parecido com isto.

389
00:18:19,440 --> 00:18:21,510
Deixe-me paragraphs.html aberto.

390
00:18:21,510 --> 00:18:23,560
Portanto, este é um arquivo que eu escrevi com antecedência.

391
00:18:23,560 --> 00:18:26,480
No topo de que, como
sempre, temos comentários.

392
00:18:26,480 --> 00:18:28,730
Mas, em HTML, comentários
olhar um pouco diferente.

393
00:18:28,730 --> 00:18:33,270
Na linha de três e linha 14, você
veja a sintaxe para iniciar um comentário

394
00:18:33,270 --> 00:18:34,020
e acabar com um comentário.

395
00:18:34,020 --> 00:18:36,820
>> Mas nenhuma das coisas em
entre as questões funcionalmente.

396
00:18:36,820 --> 00:18:40,250
É apenas uma nota a um
humano que está acontecendo aqui.

397
00:18:40,250 --> 00:18:43,040
E assim como a sanidade rápida
verificar, se eu rolar para baixo,

398
00:18:43,040 --> 00:18:46,820
o que é o novo óbvia
tag que nós introduzimos?

399
00:18:46,820 --> 00:18:52,130
As tags, até agora, temos visto são abertos
suporte HTML, cabeça, título, e corpo.

400
00:18:52,130 --> 00:18:54,400
Mas o que é obviamente novo agora?

401
00:18:54,400 --> 00:18:55,200
>> Sim, então p.

402
00:18:55,200 --> 00:18:57,320
A tag p ou parágrafo tag.

403
00:18:57,320 --> 00:19:01,182
E então eu apenas emprestado algum padrão
Texto em latim para constituir meus parágrafos.

404
00:19:01,182 --> 00:19:03,390
Porque o que eu queria
demonstrar é a forma como você pode

405
00:19:03,390 --> 00:19:05,859
representam parágrafos de texto em HTML.

406
00:19:05,859 --> 00:19:08,400
E então o que está começando a acontecer
aqui é que já existe

407
00:19:08,400 --> 00:19:09,657
um padrão de desenvolvimento.

408
00:19:09,657 --> 00:19:10,990
E deixe-me ir em frente e fazer isso.

409
00:19:10,990 --> 00:19:12,760
Deixe-me primeiro desligue Apache.

410
00:19:12,760 --> 00:19:17,340
E eu vou dizer a ele para começar a si mesmo
novamente dentro de fonte de hoje sete

411
00:19:17,340 --> 00:19:18,420
m diretório.

412
00:19:18,420 --> 00:19:20,100
Assim que eu tenho acesso a tudo.

413
00:19:20,100 --> 00:19:22,230
>> E agora, se eu voltar para
esta listagem de diretório,

414
00:19:22,230 --> 00:19:24,846
notar que eu vejo todos os arquivos a partir de hoje.

415
00:19:24,846 --> 00:19:26,720
E você vai ver no
jogo seguinte problema, vamos

416
00:19:26,720 --> 00:19:28,594
dar-lhe instruções
para fazer exatamente isso.

417
00:19:28,594 --> 00:19:35,210
Se eu abrir paragraphs.html, isso pode
bem parecido com uma linguagem de programação

418
00:19:35,210 --> 00:19:36,970
para você, se você não falar ou ler em latim.

419
00:19:36,970 --> 00:19:40,525
Mas esta é apenas três parágrafos
de texto que são marcados em HTML.

420
00:19:40,525 --> 00:19:43,100
>> E observe o parágrafo
pausas entre eles.

421
00:19:43,100 --> 00:19:46,400
Porque gira para fora,
e mesmo que você

422
00:19:46,400 --> 00:19:49,210
pode estar inclinado a fazer isso,
Considerando que, no mundo real,

423
00:19:49,210 --> 00:19:51,370
se você quiser colocar linha
pausas entre as coisas,

424
00:19:51,370 --> 00:19:55,680
você pode simplesmente
fazer isso e bateu em Salvar.

425
00:19:55,680 --> 00:19:59,460
E agora, se eu recarregar aqui, aviso
que tudo só borra juntos

426
00:19:59,460 --> 00:20:01,100
em apenas uma bolha de texto.

427
00:20:01,100 --> 00:20:03,570
Como o HTML é uma espécie de linguagem mudo.

428
00:20:03,570 --> 00:20:07,230
>> Ele foi criado para ser usado em tais
uma maneira que o navegador só irá

429
00:20:07,230 --> 00:20:09,920
fazer explicitamente o que você diga a ele para fazer.

430
00:20:09,920 --> 00:20:12,890
Portanto, se você não dizê-lo
dê-me um novo parágrafo,

431
00:20:12,890 --> 00:20:14,569
você não vai ver um novo parágrafo.

432
00:20:14,569 --> 00:20:16,360
E, de fato, o que a
navegador vai fazer

433
00:20:16,360 --> 00:20:20,020
é mesmo que você pressione Enter,
digamos que uma e outra vez

434
00:20:20,020 --> 00:20:23,190
e novamente, movendo-se deste modo texto
para baixo na tela e, em seguida, salvar

435
00:20:23,190 --> 00:20:26,610
e, em seguida, recarregar, o navegador vai
a desmoronar todo este espaço branco

436
00:20:26,610 --> 00:20:29,021
em apenas um único espaço em branco, visível.

437
00:20:29,021 --> 00:20:29,520
Tudo certo.

438
00:20:29,520 --> 00:20:30,869
Então essa é a marca de parágrafo.

439
00:20:30,869 --> 00:20:32,910
E então qual é o padrão
que está desenvolvendo aqui?

440
00:20:32,910 --> 00:20:37,450
Bem, parece ser o caso de que
HTML é tudo sobre como iniciar um tag

441
00:20:37,450 --> 00:20:38,460
e terminando a tag.

442
00:20:38,460 --> 00:20:39,300
E o que é uma marca?

443
00:20:39,300 --> 00:20:41,160
Bem, é apenas um pedaço de sintaxe.

444
00:20:41,160 --> 00:20:44,400
Abrir suporte, uma palavra-chave,
suporte fechado, é uma tag.

445
00:20:44,400 --> 00:20:45,510
Ou começar tag.

446
00:20:45,510 --> 00:20:48,590
E então quando você está
feito se expressar,

447
00:20:48,590 --> 00:20:52,300
como no que você fez com o parágrafo,
você faz assim dizer oposto.

448
00:20:52,300 --> 00:20:55,480
Mas o contrário não é muito para trás.

449
00:20:55,480 --> 00:21:00,630
>> Você simplesmente prefixar a mesma marca de
nomear com uma barra como este.

450
00:21:00,630 --> 00:21:01,130
Tudo certo.

451
00:21:01,130 --> 00:21:02,570
Então, nem tudo o que emocionante.

452
00:21:02,570 --> 00:21:05,270
E, de fato, nós não estamos fazendo o
web tudo o que mais interessante.

453
00:21:05,270 --> 00:21:07,630
E se eu quiser fazer
coisas maiores e ousada?

454
00:21:07,630 --> 00:21:11,780
Assim, verifica-se que aqui está um exemplo
em headings.html, onde no meu corpo,

455
00:21:11,780 --> 00:21:17,280
Eu tenho uma tag H1, H2, H3,
quatro, cinco, ou seis, os quais

456
00:21:17,280 --> 00:21:18,310
parecem bastante misterioso.

457
00:21:18,310 --> 00:21:21,010
Mas se eu for abrir este
exemplo, vamos dar uma olhada.

458
00:21:21,010 --> 00:21:22,490
Headings.html.

459
00:21:22,490 --> 00:21:27,030
>> Então navegadores por padrão pode dar-lhe texto
que é grande e corajoso de tamanhos diferentes.

460
00:21:27,030 --> 00:21:28,070
H1 é grande.

461
00:21:28,070 --> 00:21:31,240
H6 é menor e, em seguida
tudo o mais no meio.

462
00:21:31,240 --> 00:21:34,170
Então, isso é interessante, mas ainda
não é realmente a web eu sei.

463
00:21:34,170 --> 00:21:36,870
E se nós queremos que tenho
algo como uma lista. .

464
00:21:36,870 --> 00:21:40,190
Então aqui está uma lista com marcadores de
três das casas de Harvard.

465
00:21:40,190 --> 00:21:41,600
>> Como você vai fazer sobre isso?

466
00:21:41,600 --> 00:21:45,410
Bem, dê uma olhada list.html.

467
00:21:45,410 --> 00:21:47,870
E aqui, vemos uma
pouco de funkiness

468
00:21:47,870 --> 00:21:49,630
mas vamos considerar o que está acontecendo.

469
00:21:49,630 --> 00:21:56,182
Assim, com base no que você acabou de ver,
UL significa lista desordenada.

470
00:21:56,182 --> 00:21:57,640
Lista não ordenada significa apenas marcadores.

471
00:21:57,640 --> 00:21:58,431
Não há números.

472
00:21:58,431 --> 00:22:01,850
Há também uma coisa chamada
lista, que é um OL na tag ordenada.

473
00:22:01,850 --> 00:22:05,350
Em seguida, LI, item da lista é tudo o que isso significa.

474
00:22:05,350 --> 00:22:07,790
>> E assim automaticamente
números de tudo para você.

475
00:22:07,790 --> 00:22:11,270
Mas, novamente, todo o meu recuo
e espaço em branco é apenas por minha causa.

476
00:22:11,270 --> 00:22:13,050
O navegador não é
realmente vai se importar.

477
00:22:13,050 --> 00:22:16,670
Assim, mesmo que você não podia
fazer isso, só para ficar claro,

478
00:22:16,670 --> 00:22:19,880
Você não deve mesmo embora
O navegador ainda

479
00:22:19,880 --> 00:22:22,130
ser capaz de compreendê-lo muito bem.

480
00:22:22,130 --> 00:22:24,590
Eu estou batendo na minha recarga
navegador, estou clicando recarga

481
00:22:24,590 --> 00:22:26,760
e nenhuma mudança está acontecendo
porque o navegador ainda

482
00:22:26,760 --> 00:22:29,550
fazendo exatamente o que eu diga a ele para fazer.

483
00:22:29,550 --> 00:22:30,050
>> Tudo certo.

484
00:22:30,050 --> 00:22:31,340
Então, tudo isso é apenas texto.

485
00:22:31,340 --> 00:22:33,730
Agora vamos fazer algo mais interessante.

486
00:22:33,730 --> 00:22:36,660
Eu estou indo para ir em frente e
emprestar algum deste HTML.

487
00:22:36,660 --> 00:22:40,910
Eu estou indo para ir em frente e
criar um novo arquivo aqui.

488
00:22:40,910 --> 00:22:43,370
E nós vamos chamar este rick.html.

489
00:22:43,370 --> 00:22:46,190

490
00:22:46,190 --> 00:22:48,916
Temos desproporcionalmente
algo usado

491
00:22:48,916 --> 00:22:51,290
chamado um rolo Rick neste
classe este ano, eu não sei,

492
00:22:51,290 --> 00:22:53,880
apenas aconteceu organicamente.

493
00:22:53,880 --> 00:22:55,397
>> E agora ele tem fora de controle.

494
00:22:55,397 --> 00:22:56,730
Então, eu estou indo só para ir com ele.

495
00:22:56,730 --> 00:22:59,700
E se eu for para o Google
Imagens e Rick Astley.

496
00:22:59,700 --> 00:23:02,450

497
00:23:02,450 --> 00:23:06,170
Se você não sabe por que fazemos
isso, basta ler sobre Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Toda vez que você clicou no link,
Alguém está rindo em algum lugar.

499
00:23:11,520 --> 00:23:14,860
E deixe-me ir lá ahead--
vamos, vamos ver esta imagem.

500
00:23:14,860 --> 00:23:16,750
>> Portanto, temos aqui um
imagem em Imagens do Google.

501
00:23:16,750 --> 00:23:19,390
E vamos supor que este é
razoavelmente em toda parte na internet.

502
00:23:19,390 --> 00:23:22,570
Então, eu vou assumir que é OK para mim
para realmente colocar isso em minha página web.

503
00:23:22,570 --> 00:23:24,820
Eu estou indo para ir em frente
e copiar URL da imagem.

504
00:23:24,820 --> 00:23:28,600
E agora, se eu voltar para a Nuvem
9, vamos ver o que posso fazer aqui.

505
00:23:28,600 --> 00:23:30,630
Então aqui é apenas uma página web.

506
00:23:30,630 --> 00:23:39,020
Este é Rick Astley, haha,
Eu vou agora voltar

507
00:23:39,020 --> 00:23:43,510
para o meu navegador, recarregar e interessante.

508
00:23:43,510 --> 00:23:44,530
>> Onde está Rick?

509
00:23:44,530 --> 00:23:46,050
Então deixe-me ver o que aconteceu.

510
00:23:46,050 --> 00:23:49,114
Na verdade, eu vou
fingir que eu não fiz isso.

511
00:23:49,114 --> 00:23:50,280
[Inaudível] colocá-lo aqui.

512
00:23:50,280 --> 00:23:52,520
Nós vamos voltar a isso em um momento.

513
00:23:52,520 --> 00:23:54,200
Então aqui está rick.html.

514
00:23:54,200 --> 00:23:56,070
Então isso não é Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Então não é que nós podemos
realmente adicionar ele aqui.

516
00:23:59,680 --> 00:24:00,830
Este é Rick Astley.

517
00:24:00,830 --> 00:24:06,680
Eu vou dizer-me dar uma imagem cujo
fonte é o URL eu só copiados, o que

518
00:24:06,680 --> 00:24:09,110
aparentemente é um feliz
aniversário uma coisa ou outra.

519
00:24:09,110 --> 00:24:13,280
>> E agora eu vou
fechar a tag como este.

520
00:24:13,280 --> 00:24:15,170
Então, isso é quebra super longa.

521
00:24:15,170 --> 00:24:17,740
Mas note que tudo o que eu tenho
feito imagem suporte é aberto,

522
00:24:17,740 --> 00:24:20,270
fonte com um atributo deste.

523
00:24:20,270 --> 00:24:21,530
E é realmente uma longa URL.

524
00:24:21,530 --> 00:24:23,720
E no final, perceber isso.

525
00:24:23,720 --> 00:24:29,530
Barra Por que foi que eu fiz suporte angular
em vez de, como qualquer outra tag,

526
00:24:29,530 --> 00:24:33,590
tendo um suporte aberto,
IMG, suporte fechado?

527
00:24:33,590 --> 00:24:37,040
Basta dar um palpite, mesmo que você
não têm qualquer familiaridade

528
00:24:37,040 --> 00:24:40,410
com HTML antes.

529
00:24:40,410 --> 00:24:42,710
>> Assim é como ele se fecha
o comando, mas porque

530
00:24:42,710 --> 00:24:45,850
ele não realmente fazer intuitiva
sentido fazer algo um pouco mais

531
00:24:45,850 --> 00:24:48,820
verbose perto imagem como?

532
00:24:48,820 --> 00:24:51,400
Sim.

533
00:24:51,400 --> 00:24:52,000
Sim.

534
00:24:52,000 --> 00:24:55,620
Apenas semanticamente, não há nenhum sentido de
a partir de uma imagem e terminando uma imagem,

535
00:24:55,620 --> 00:24:56,870
é lá ou não é.

536
00:24:56,870 --> 00:25:00,960
Portanto, não faz sentido deixar uma lacuna
para qualquer outra coisa dentro de uma imagem.

537
00:25:00,960 --> 00:25:02,010
Você simplesmente não pode fazer isso.

538
00:25:02,010 --> 00:25:03,720
E assim a sintaxe
geralmente seria apenas

539
00:25:03,720 --> 00:25:07,910
para fazer a barra no interior
da tag de abertura ou a marca de início

540
00:25:07,910 --> 00:25:09,020
e em seguida, bateu em Salvar.

541
00:25:09,020 --> 00:25:13,350
>> Então, se eu agora recarregar este arquivo, agora
Eu tenho uma boa página web cozinhar aqui.

542
00:25:13,350 --> 00:25:15,100
E nós certamente poderia
realmente irritar as pessoas

543
00:25:15,100 --> 00:25:17,010
por incorporação em vez
como um link do YouTube.

544
00:25:17,010 --> 00:25:19,350
E, na verdade, em qualquer altura
você já passou para o YouTube,

545
00:25:19,350 --> 00:25:22,190
e me deixou realmente acidentalmente
Rick Roll-me aqui.

546
00:25:22,190 --> 00:25:25,770
Então Rick roll.

547
00:25:25,770 --> 00:25:29,592
Então rick roll-- Eu estou indo para ir aqui.

548
00:25:29,592 --> 00:25:31,900
>> [Música tocando]

549
00:25:31,900 --> 00:25:33,730
>> OK, uma pessoa que gostava.

550
00:25:33,730 --> 00:25:37,270
Então, observe todo esse tempo, se você
clique no link Compartilhar, você naturalmente

551
00:25:37,270 --> 00:25:41,390
obter a URL que você pode realmente
incorporar em um email ou uma imagem forense

552
00:25:41,390 --> 00:25:43,730
ou em um conjunto de problemas ou numa corrediça.

553
00:25:43,730 --> 00:25:49,055
E agora, se eu clicar em vez de incorporação,
notar que todo esse tempo, este material

554
00:25:49,055 --> 00:25:49,680
foi lá.

555
00:25:49,680 --> 00:25:50,910
Eu estou indo para ir em frente e copiar este.

556
00:25:50,910 --> 00:25:54,000
>> E só assim podemos vê-lo melhor, eu sou
indo para colá-lo no meu editor de texto.

557
00:25:54,000 --> 00:25:55,860
Observe que isso que
YouTube tem vindo a dizer.

558
00:25:55,860 --> 00:25:57,693
Toda vez que você visitar um
Vídeo do YouTube, se você

559
00:25:57,693 --> 00:26:00,410
deseja incorporar o vídeo em seu
A página web, simplesmente pegar isso.

560
00:26:00,410 --> 00:26:03,350
Portanto, este é mais um
Tag HTML chamado um iframe.

561
00:26:03,350 --> 00:26:04,590
Ou um em linha quadro.

562
00:26:04,590 --> 00:26:08,680
Por isso, também parece um pouco mais
complexo do que todos os outros.

563
00:26:08,680 --> 00:26:11,950
Assim, verifica-se que a imagem
tag e, aparentemente, a tag iframe

564
00:26:11,950 --> 00:26:13,370
tomar o que são chamados atributos.

565
00:26:13,370 --> 00:26:15,710
>> E este é outro
pedaço de sintaxe no HTML.

566
00:26:15,710 --> 00:26:19,240
Em adição à marcação de
nome, nome da marca do suporte aberto,

567
00:26:19,240 --> 00:26:23,780
é possível controlar o comportamento da etiqueta
por ter um monte de atributo

568
00:26:23,780 --> 00:26:24,860
é igual ao valor.

569
00:26:24,860 --> 00:26:26,290
Atributo é igual ao valor.

570
00:26:26,290 --> 00:26:28,100
E assim, por exemplo,
YouTube está nos dizendo

571
00:26:28,100 --> 00:26:31,990
se você quiser a largura deste vídeo
ser de 420 pixels e a altura

572
00:26:31,990 --> 00:26:35,470
para ser 315 pixels, que é
como você expressá-lo em HTML.

573
00:26:35,470 --> 00:26:38,480
>> A fonte do vídeo vai
ser que URL longo YouTube

574
00:26:38,480 --> 00:26:40,830
e, em seguida, algumas outras coisas
como quadro de fronteira é zero,

575
00:26:40,830 --> 00:26:43,500
de modo que provavelmente significa que há
nenhuma borda em torno da coisa.

576
00:26:43,500 --> 00:26:45,450
Permitir tela inteira, provavelmente,
significa que o utilizador

577
00:26:45,450 --> 00:26:47,840
pode clicar em um botão e
realmente de tela cheia do vídeo.

578
00:26:47,840 --> 00:26:52,870
Então, se eu realmente quero ser
impressionante aqui em Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
ao invés de usar a tag de imagem, deixe-
me excluir que, em vez cole este.

580
00:26:58,490 --> 00:27:00,810
E agora recarregar.

581
00:27:00,810 --> 00:27:02,500
E agora aqui vamos nós de novo.

582
00:27:02,500 --> 00:27:04,979

583
00:27:04,979 --> 00:27:06,020
Tudo bem, isso é o suficiente.

584
00:27:06,020 --> 00:27:08,970
Tudo bem, então eu vou tentar
difícil não fazer isso de novo.

585
00:27:08,970 --> 00:27:11,400
Então, quais são alguns dos tópicos aqui?

586
00:27:11,400 --> 00:27:15,130
Então, HTML, tão feio como estas páginas web
são, na verdade é muito simples.

587
00:27:15,130 --> 00:27:16,467
Não é uma linguagem de programação.

588
00:27:16,467 --> 00:27:17,550
Ele não tem funções.

589
00:27:17,550 --> 00:27:18,410
Não tem alças.

590
00:27:18,410 --> 00:27:19,535
Ele não tem condições.

591
00:27:19,535 --> 00:27:22,900
Tudo o que tem é dezenas de
diferentes etiquetas, cada uma das quais

592
00:27:22,900 --> 00:27:24,620
tem zero ou mais atributos.

593
00:27:24,620 --> 00:27:27,320
E, de fato, o que é divertido sobre
HTML que você começa a mergulhar

594
00:27:27,320 --> 00:27:29,560
é que é auto aprendizado muito.

595
00:27:29,560 --> 00:27:32,880
>> Só é preciso um entendimento
do quadro geral do HTML.

596
00:27:32,880 --> 00:27:36,510
O que é uma tag, o que é um atributo,
como você realmente configurar uma página web

597
00:27:36,510 --> 00:27:37,250
do seguinte modo.

598
00:27:37,250 --> 00:27:40,720
E tudo o resto é realmente o resultado
de olhar para cima em uma referência on-line

599
00:27:40,720 --> 00:27:43,080
ou pesquisando como fazer algumas
técnica ou, como vimos,

600
00:27:43,080 --> 00:27:45,371
olhando na fonte do Facebook
código, olhando para um site

601
00:27:45,371 --> 00:27:48,710
que você gosta no seu código-fonte e
a compreensão de como os desenvolvedores lá

602
00:27:48,710 --> 00:27:50,550
realmente colocou as coisas.

603
00:27:50,550 --> 00:27:52,180
>> Então o que podemos fazer imagens também.

604
00:27:52,180 --> 00:27:53,994
E, de fato, nós fizemo-lo de um momento atrás.

605
00:27:53,994 --> 00:27:55,410
Deixe-me ir em frente e apenas mostrar-lhe.

606
00:27:55,410 --> 00:27:56,770
Aqui está um código de exemplo.

607
00:27:56,770 --> 00:27:58,380
Se você quiser ver gato mal-humorado.

608
00:27:58,380 --> 00:28:00,620
Então, observe que eu posso
ter uma tag de imagem aqui.

609
00:28:00,620 --> 00:28:02,090
E eu tenho um comentário acima.

610
00:28:02,090 --> 00:28:04,490
Eu tenho uma alternativa
texto para a acessibilidade.

611
00:28:04,490 --> 00:28:07,250
Então, alguém que está usando uma tela
leitor, por razões de vista

612
00:28:07,250 --> 00:28:10,172
em seguida, pode realmente ter o seu
leitor de tela dizer gato mal-humorado.

613
00:28:10,172 --> 00:28:11,880
Porque se eles não podem
ver a imagem, eles

614
00:28:11,880 --> 00:28:14,504
pode, pelo menos, têm o seu computador
dizer-lhes verbalmente o que é.

615
00:28:14,504 --> 00:28:18,020
E a fonte desse arquivo é cat.jpeg.

616
00:28:18,020 --> 00:28:22,472
Então, na verdade, se eu realmente queria
obter inteligente, o que eu poderia ter done--

617
00:28:22,472 --> 00:28:25,680
Eu prometo não ir para Rick Astley, de modo
Eu estou indo para o google para um gato em vez disso.

618
00:28:25,680 --> 00:28:28,290
E se eu for para o Google Images
aqui, e nós vamos assumir

619
00:28:28,290 --> 00:28:30,040
que esta é uma imagem de meu gato.

620
00:28:30,040 --> 00:28:35,070
>> Suponha que eu tenho controle clicado
ou para a direita clicou sobre este, acidentalmente

621
00:28:35,070 --> 00:28:35,630
assustador.

622
00:28:35,630 --> 00:28:40,320
E eu vou cat.jpeg
para salvar no meu desktop.

623
00:28:40,320 --> 00:28:44,700
Deixe-me agora voltar para cloud 9.

624
00:28:44,700 --> 00:28:48,150
Repare que aqui, posso
ir para fazer upload de arquivos locais.

625
00:28:48,150 --> 00:28:51,530
E se eu pegar esse
arquivo, cat.jpeg, aviso

626
00:28:51,530 --> 00:28:54,674
que eu possa arrastá-lo e
soltá-lo em cloud 9

627
00:28:54,674 --> 00:28:56,090
e ele vai gritar comigo aqui.

628
00:28:56,090 --> 00:28:59,000
>> Porque já
você recebe um arquivo cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
mas é super fácil de
agarrar uma foto que você tem

630
00:29:01,430 --> 00:29:03,220
tomada a partir do Facebook
ou Flickr ou similares

631
00:29:03,220 --> 00:29:05,678
e, na verdade, arraste e solte-o
em cloud 9 e, em seguida, torná-lo

632
00:29:05,678 --> 00:29:07,970
parte do seu próprio pessoal
site ou problema

633
00:29:07,970 --> 00:29:10,442
definir sete ou oito anos, como veremos em breve.

634
00:29:10,442 --> 00:29:12,150
E então quando você
finalmente visitar aquele gato,

635
00:29:12,150 --> 00:29:16,610
supondo que eu baixei esse mesmo gato,
aviso isso-- que era adorável.

636
00:29:16,610 --> 00:29:19,160
>> O que você vê é
algo como este cara aqui.

637
00:29:19,160 --> 00:29:21,810
Então os arquivos que você
referência dentro de uma página web

638
00:29:21,810 --> 00:29:26,050
podem ser locais em seu próprio
conta ou remoto em algum outro servidor

639
00:29:26,050 --> 00:29:29,670
como no caso do Rick
Foto Astley um pouco atrás.

640
00:29:29,670 --> 00:29:32,990
Então, onde o que else--
mais podemos fazer aqui?

641
00:29:32,990 --> 00:29:34,890
Então vamos dar uma olhada no seguinte.

642
00:29:34,890 --> 00:29:36,160
Você sabe o que é legal?

643
00:29:36,160 --> 00:29:39,330
>> Temos vindo a fazer até agora
páginas da web muito estáticos.

644
00:29:39,330 --> 00:29:41,830
Eu quero apimentar as coisas da seguinte forma.

645
00:29:41,830 --> 00:29:44,344
Eu quero fazer o meu próprio motor de busca.

646
00:29:44,344 --> 00:29:47,010
Então, para fazer um motor de busca, vamos
vá em frente e começar a fazer isso.

647
00:29:47,010 --> 00:29:52,570
Eu estou indo para ir em frente e criar
um novo arquivo chamado search.html.

648
00:29:52,570 --> 00:29:54,890
E nós temos prefabed versões online.

649
00:29:54,890 --> 00:29:56,027
Whoops.

650
00:29:56,027 --> 00:29:57,610
Não cole em sua janela de terminal.

651
00:29:57,610 --> 00:29:58,744
Prefab versões on-line.

652
00:29:58,744 --> 00:30:00,160
E eu vou começar como segue.

653
00:30:00,160 --> 00:30:04,490
Então aqui está o início de
um arquivo chamado search.html.

654
00:30:04,490 --> 00:30:07,510
Vou guardá-lo no
diretório de origem de hoje.

655
00:30:07,510 --> 00:30:09,079
Eu vou chamar esse Search.

656
00:30:09,079 --> 00:30:10,370
Na verdade, vamos torná-lo melhor.

657
00:30:10,370 --> 00:30:13,600
CS50 Pesquisa e realmente marca-lo.

658
00:30:13,600 --> 00:30:17,500
E agora, eu vou dizer
algo como H1 CS50 Search.

659
00:30:17,500 --> 00:30:20,930
E, em seguida, para baixo aqui, H2 em breve.

660
00:30:20,930 --> 00:30:23,230
E só para recapitular, H1 e
H2 significa que, respectivamente?

661
00:30:23,230 --> 00:30:26,750

662
00:30:26,750 --> 00:30:30,320
>> Sim, tão grande e corajoso, e
não tão grande, mas ainda negrito.

663
00:30:30,320 --> 00:30:37,375
Então, se eu salvar este e passar por cima aqui,
vamos ver o search.html arquivo.

664
00:30:37,375 --> 00:30:42,560
Tudo bem, e este
é direita-- [inaudível].

665
00:30:42,560 --> 00:30:46,980

666
00:30:46,980 --> 00:30:49,110
Estar por.

667
00:30:49,110 --> 00:30:49,945
David é confuso.

668
00:30:49,945 --> 00:30:52,610

669
00:30:52,610 --> 00:30:54,080
Oh, ele está lá.

670
00:30:54,080 --> 00:30:54,860
David é um idiota.

671
00:30:54,860 --> 00:30:55,420
ESTÁ BEM.

672
00:30:55,420 --> 00:30:56,660
Então é isso.

673
00:30:56,660 --> 00:30:58,350
Assim, busca CS50 em breve.

674
00:30:58,350 --> 00:31:00,370
Então, agora, vamos sintetizar
o que fizemos na semana passada.

675
00:31:00,370 --> 00:31:03,400
>> Quando falamos sobre a
mecânica de nível mais baixo de HTTP.

676
00:31:03,400 --> 00:31:05,780
E essas novas idéias
de HTML, que é apenas

677
00:31:05,780 --> 00:31:08,890
esta linguagem de marcação, onde
dizer um navegador exatamente o que fazer

678
00:31:08,890 --> 00:31:10,740
e implementar o nosso próprio motor de busca.

679
00:31:10,740 --> 00:31:12,520
Então, ao invés de apenas
dizendo em breve, eu sou

680
00:31:12,520 --> 00:31:14,810
vai introduzir
algo chamado de tag form.

681
00:31:14,810 --> 00:31:19,610
E desta forma, eu vou
ter algo como um campo de entrada.

682
00:31:19,610 --> 00:31:22,450
>> E o nome de esta entrada
campo, eu vou chamá-lo P.

683
00:31:22,450 --> 00:31:26,240
E o tipo de campo de entrada
Eu vou dizer é apenas "texto".

684
00:31:26,240 --> 00:31:29,130
E um campo de texto, como veremos
ver, é apenas uma caixa de texto.

685
00:31:29,130 --> 00:31:32,830
E por isso não sente aqui para ter
qualquer coisa dentro dele neste momento.

686
00:31:32,830 --> 00:31:35,320
E por isso estou indo simplesmente
para fechar a tag com que

687
00:31:35,320 --> 00:31:38,099
de barra direita na marca própria.

688
00:31:38,099 --> 00:31:39,890
E então eu vou
tem uma outra entrada.

689
00:31:39,890 --> 00:31:43,480
Tipo de entrada é igual a enviar.

690
00:31:43,480 --> 00:31:45,320
E então eu vou
fechar um presente também.

691
00:31:45,320 --> 00:31:46,840
>> E agora eu vou voltar aqui.

692
00:31:46,840 --> 00:31:49,520
E já vemos,
embora muito feio, eu tenho

693
00:31:49,520 --> 00:31:52,460
tem os começos de
minha própria página de pesquisa aqui.

694
00:31:52,460 --> 00:31:55,150
Na verdade, deixe-me tentar
limpar isso um pouco.

695
00:31:55,150 --> 00:31:57,330
Acontece que no
entrada aqui, eu posso ter

696
00:31:57,330 --> 00:31:59,910
outro atributo chamado espaço reservado.

697
00:31:59,910 --> 00:32:05,165
E eu poderia ver algo como palavras-chave,
ou, mais especificamente, consulta para q.

698
00:32:05,165 --> 00:32:07,820
>> E observe, agora, eu tenho
este tipo de texto cinza

699
00:32:07,820 --> 00:32:10,440
que desaparece tão
Assim que eu começar a digitar,

700
00:32:10,440 --> 00:32:12,930
mas é provavelmente algo
você já viu em outras páginas da web.

701
00:32:12,930 --> 00:32:14,650
Eu realmente não gosto do botão Enviar.

702
00:32:14,650 --> 00:32:18,320
Então, eu estou indo realmente para dar a
Botão enviar um valor de pesquisa.

703
00:32:18,320 --> 00:32:21,680
E agora, se eu recarregar, observe que
meu botão torna-se o nome de busca.

704
00:32:21,680 --> 00:32:24,140
Você sabe, eu realmente não
como o logotipo aqui.

705
00:32:24,140 --> 00:32:27,140
Então gerador Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Eu quero apimentar este ainda mais.

707
00:32:28,820 --> 00:32:30,660
Pesquisa de modo CS50.

708
00:32:30,660 --> 00:32:31,870
Deixe-me criar o meu próprio logotipo.

709
00:32:31,870 --> 00:32:33,080
Isso parece bom.

710
00:32:33,080 --> 00:32:36,945
Então, agora deixe-me salvar esta as-- vamos lá.

711
00:32:36,945 --> 00:32:40,710

712
00:32:40,710 --> 00:32:43,120
Onde é que vai?

713
00:32:43,120 --> 00:32:43,620
Lá.

714
00:32:43,620 --> 00:32:44,160
ESTÁ BEM.

715
00:32:44,160 --> 00:32:44,980
Perdeu.

716
00:32:44,980 --> 00:32:47,740
Salvar como.

717
00:32:47,740 --> 00:32:49,470
Navegadores estúpido.

718
00:32:49,470 --> 00:32:51,700
Stand by, vamos
corrigir isso de uma vez por todas.

719
00:32:51,700 --> 00:32:57,650

720
00:32:57,650 --> 00:32:58,590
Aí vamos nós.

721
00:32:58,590 --> 00:32:59,090
Tudo certo.

722
00:32:59,090 --> 00:32:59,600
Desculpe.

723
00:32:59,600 --> 00:33:00,750
Dia de folga.

724
00:33:00,750 --> 00:33:02,310
Agora, este é funky.

725
00:33:02,310 --> 00:33:03,160
Sair da tela inteira.

726
00:33:03,160 --> 00:33:04,150
Tudo certo.

727
00:33:04,150 --> 00:33:06,870
>> Agora, como uma normal,
pessoa, salvar imagem como.

728
00:33:06,870 --> 00:33:08,810
Logo.gif.

729
00:33:08,810 --> 00:33:13,194
Agora eu estou indo para ir para CS50IDE e
Eu vou simplesmente pegar o logotipo,

730
00:33:13,194 --> 00:33:15,360
Eu vou arrastá-lo para
meu diretório de origem sete,

731
00:33:15,360 --> 00:33:17,002
arquivo já existe, eu estou bem com isso.

732
00:33:17,002 --> 00:33:19,210
Então, eu estou indo para substituí-lo
porque eu já tinha.

733
00:33:19,210 --> 00:33:20,630
E agora como faço para me livrar disso?

734
00:33:20,630 --> 00:33:24,670
>> Vamos em frente aqui e fazer
fonte de imagem é igual a logo.gif.

735
00:33:24,670 --> 00:33:25,490
Feche essa.

736
00:33:25,490 --> 00:33:26,050
Guardar.

737
00:33:26,050 --> 00:33:30,560
E agora, se eu voltar para a minha pesquisa
página, agora está olhando muito bom.

738
00:33:30,560 --> 00:33:33,610
Tudo bem, por isso não tem
bem feito nada de útil.

739
00:33:33,610 --> 00:33:37,000
Na verdade, deixe-me tentar pesquisar
para um gato e ver o que acontece.

740
00:33:37,000 --> 00:33:38,890
Cats.

741
00:33:38,890 --> 00:33:39,420
Caramba.

742
00:33:39,420 --> 00:33:41,400
Ele não apenas trabalhar, aparentemente.

743
00:33:41,400 --> 00:33:43,760
Então, qual é a peça-chave
o que está faltando aqui?

744
00:33:43,760 --> 00:33:49,100
>> Certo, mesmo se você não sabe nada de HTML,
Eu comecei marcando o formulário de telefone

745
00:33:49,100 --> 00:33:54,130
e eu disse a ele como obter entradas,
dá-me uma caixa de texto e um botão de envio,

746
00:33:54,130 --> 00:33:55,730
o pedaço aparentemente está faltando?

747
00:33:55,730 --> 00:33:58,975
Suponha que nós queremos realmente chegar
esta coisa funcionando corretamente.

748
00:33:58,975 --> 00:34:02,420

749
00:34:02,420 --> 00:34:05,360
O que precisamos fazer?

750
00:34:05,360 --> 00:34:08,860
Temos uma necessidade de implementar o back-end
banco de dados ou o motor de busca próprio,

751
00:34:08,860 --> 00:34:11,210
e que vai levar um
todo muito tempo, francamente.

752
00:34:11,210 --> 00:34:13,380
>> Então lembre-se o que fizemos da última vez.

753
00:34:13,380 --> 00:34:18,230
Então, se você procurar algo no Google
e você com antecedência desligado,

754
00:34:18,230 --> 00:34:20,355
recall, pesquisa instantânea.

755
00:34:20,355 --> 00:34:22,230
Então deixe-me desligar isso
de modo que este realmente

756
00:34:22,230 --> 00:34:26,650
se comporta como um navegador de escola mais velho,
se eu agora procurar algo como gatos,

757
00:34:26,650 --> 00:34:28,190
recordar o que o URL parece.

758
00:34:28,190 --> 00:34:29,449
É muito enigmática.

759
00:34:29,449 --> 00:34:33,000
Mas incorporado em lá,
recall, é a pesquisa barra.

760
00:34:33,000 --> 00:34:35,100
Ponto de interrogação q é igual a gatos.

761
00:34:35,100 --> 00:34:37,760
>> E isso parece-me dar-
um monte de resultados de pesquisa.

762
00:34:37,760 --> 00:34:39,134
Então você sabe o que eu vou fazer?

763
00:34:39,134 --> 00:34:41,650
Eu estou indo para emprestar
Google por apenas um minuto.

764
00:34:41,650 --> 00:34:43,670
Eu vou passar por cima
aqui e eu vou dizer

765
00:34:43,670 --> 00:34:47,850
que esta forma de ação ou
destino, por assim dizer,

766
00:34:47,850 --> 00:34:49,330
deve ser literalmente Google.

767
00:34:49,330 --> 00:34:52,590
E o método que eu queria
para uso vai ser chegar.

768
00:34:52,590 --> 00:34:53,560
>> Então, o que é ação?

769
00:34:53,560 --> 00:34:55,760
A ação é estranhamente nomeado,
mas isso apenas significa

770
00:34:55,760 --> 00:34:58,120
que está indo para lidar com
a ação dessa forma?

771
00:34:58,120 --> 00:35:00,820
Quando eu clique em Procurar, onde
Caso o resultado ir?

772
00:35:00,820 --> 00:35:05,300
E se eu agora voltar para a minha forma
aqui e recarregar minha página web

773
00:35:05,300 --> 00:35:09,000
e agora procurar algo
como o cão, observe agora

774
00:35:09,000 --> 00:35:10,850
Tenho re implementado Google.

775
00:35:10,850 --> 00:35:11,350
Certo?

776
00:35:11,350 --> 00:35:14,141
>> Se eu quiser procurar alguma coisa
mais, ele trabalha para não apenas os cães,

777
00:35:14,141 --> 00:35:16,400
ele também funciona para gatos.

778
00:35:16,400 --> 00:35:21,930
Ele também funciona para CS50.

779
00:35:21,930 --> 00:35:24,310
E OK, este é apenas
sob whelming, não é?

780
00:35:24,310 --> 00:35:25,920
Tudo bem, mas ele realmente funciona.

781
00:35:25,920 --> 00:35:27,360
Então, o que está realmente acontecendo?

782
00:35:27,360 --> 00:35:31,340
Então eu ensinei meu navegador, usando
HTML, para ter a entrada do usuário

783
00:35:31,340 --> 00:35:35,810
e realmente enviar essa entrada
para um servidor remoto através de HTTP.

784
00:35:35,810 --> 00:35:39,120
>> E porque meu navegador
entende HTTP, ele realmente

785
00:35:39,120 --> 00:35:43,500
construir a URL para que o
Eu acabar mais no meu navegador,

786
00:35:43,500 --> 00:35:45,660
observe o que acontece
quando eu procurei para o cão.

787
00:35:45,660 --> 00:35:49,270
Se eu clique em Procurar, observe que
o URL muda como eu pretendia

788
00:35:49,270 --> 00:35:52,770
google.com/search~~V a consulta é igual a cachorro.

789
00:35:52,770 --> 00:35:56,020
E isso é porque a forma
sabe, porque o método é obter,

790
00:35:56,020 --> 00:35:59,560
simplesmente anexá-lo para a URL lá.

791
00:35:59,560 --> 00:36:01,730
>> Agora, essas páginas da web ainda são feios.

792
00:36:01,730 --> 00:36:04,890
Então, vamos introduzir uma outra
pedaço de sintaxe, se pudermos hoje.

793
00:36:04,890 --> 00:36:07,640
E isso é algo conhecido
como folhas de estilo em cascata.

794
00:36:07,640 --> 00:36:10,720
Então deixe-me dar uma olhada
este exemplo aqui e veja

795
00:36:10,720 --> 00:36:12,380
se é que podemos inferir o que está acontecendo.

796
00:36:12,380 --> 00:36:14,520
Este é CSS0.html.

797
00:36:14,520 --> 00:36:16,532
E é aí que as coisas
ficar um pouco feio.

798
00:36:16,532 --> 00:36:18,490
Porque, infelizmente,
no mundo da web,

799
00:36:18,490 --> 00:36:20,920
HTML por si só não pode fazer tudo.

800
00:36:20,920 --> 00:36:22,920
E por isso, se você quiser
estilizar sua página web,

801
00:36:22,920 --> 00:36:28,370
você realmente precisa se concentrar no
estética de uma forma diferente.

802
00:36:28,370 --> 00:36:33,090
Então, aqui, eu tenho o corpo de meu Web
principal no interior do qual é uma grande div.

803
00:36:33,090 --> 00:36:34,700
E um div apenas significa divisão.

804
00:36:34,700 --> 00:36:38,060
Então, é como um parágrafo, mas
não tem a mesma semântica

805
00:36:38,060 --> 00:36:39,180
de um parágrafo de texto.

806
00:36:39,180 --> 00:36:40,940
>> Isto apenas significa que o
navegador, vem aqui

807
00:36:40,940 --> 00:36:45,210
uma grande região retangular da minha web
página, eu quero lidar com isso especialmente.

808
00:36:45,210 --> 00:36:47,420
Agora, linha 21 é onde que começa div.

809
00:36:47,420 --> 00:36:48,770
E apenas dar um palpite.

810
00:36:48,770 --> 00:36:53,080
O que é o efeito da linha 21 no
resto do conteúdo da página?

811
00:36:53,080 --> 00:36:55,640

812
00:36:55,640 --> 00:36:56,311
Centralizando-a.

813
00:36:56,311 --> 00:36:56,810
Isso é tudo.

814
00:36:56,810 --> 00:36:58,830
Então, nós não vimos uma forma de
na verdade, a centragem texto.

815
00:36:58,830 --> 00:37:00,996
>> Na verdade, o meu motor de busca,
Ao contrário do Google real,

816
00:37:00,996 --> 00:37:03,040
foi tudo justificado para a esquerda.

817
00:37:03,040 --> 00:37:07,430
E agora na linha 21, eu estou dizendo, hey
navegador, criar uma divisão da página.

818
00:37:07,430 --> 00:37:09,450
Dá-me um grande, retângulo invisível.

819
00:37:09,450 --> 00:37:11,490
É assim que eu quero
pensar sobre a página web.

820
00:37:11,490 --> 00:37:13,870
E então estilizar-lo como se segue.

821
00:37:13,870 --> 00:37:16,900
Dentro destas citações,
agora, é uma segunda língua

822
00:37:16,900 --> 00:37:19,969
que apresentou hoje
chamados de folhas de estilo em cascata.

823
00:37:19,969 --> 00:37:22,010
Felizmente, isso também não é
uma linguagem de programação,

824
00:37:22,010 --> 00:37:26,470
Portanto, é muito limitada na sua sintaxe, mas
também muito limitado na sua funcionalidade

825
00:37:26,470 --> 00:37:30,670
Considerando que é tudo sobre HTML
marcando-se os dados de uma página web

826
00:37:30,670 --> 00:37:32,130
e a estrutura de uma página web.

827
00:37:32,130 --> 00:37:35,320
CSS é geralmente sobre o
última milha, a estética,

828
00:37:35,320 --> 00:37:40,160
obter o tamanho ea cor eo
colocação exatamente correto em uma página web.

829
00:37:40,160 --> 00:37:43,000
E, de fato, ela é formada
com pares de valores-chave.

830
00:37:43,000 --> 00:37:46,290
>> A propriedade como esta, texto
alinhar, seguido de dois pontos,

831
00:37:46,290 --> 00:37:49,720
seguido pelo valor da referida
propriedade, que, neste caso, é o centro.

832
00:37:49,720 --> 00:37:51,910
E agora observá-lo
pode aninhar essas coisas.

833
00:37:51,910 --> 00:37:56,780
Se eu queria que tudo em que
Eu destacou a ser centralizado,

834
00:37:56,780 --> 00:38:00,270
é por isso que eu tenho linha 21 e
a linha correspondente 31.

835
00:38:00,270 --> 00:38:04,820
Mas suponha agora quero dizer John
Harvard, bem-vindo ao meu home page.

836
00:38:04,820 --> 00:38:06,530
>> Copyright symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
E suponha que eu quero o primeiro de
essas linhas a ser bastante grande.

838
00:38:09,180 --> 00:38:10,450
36 pixels.

839
00:38:10,450 --> 00:38:11,530
Então, isso é um tamanho decente.

840
00:38:11,530 --> 00:38:13,240
E eu queria que o seu peso de ser ousado.

841
00:38:13,240 --> 00:38:15,450
Mas, em seguida, abaixo que,
Eu quero texto menor.

842
00:38:15,450 --> 00:38:19,980
E abaixo disso, eu quero
texto ainda menor.

843
00:38:19,980 --> 00:38:20,480
Desculpe.

844
00:38:20,480 --> 00:38:24,490

845
00:38:24,490 --> 00:38:26,940
Hoje parece um dia de folga.

846
00:38:26,940 --> 00:38:29,840
>> Então, agora, o que estou fazendo para expressar isso?

847
00:38:29,840 --> 00:38:34,580
Aqui na linha 22 é um embutido
div ou div aninhada, se você quiser.

848
00:38:34,580 --> 00:38:36,190
Ele também tem sua própria marca de estilo.

849
00:38:36,190 --> 00:38:38,160
Eu especificar um tamanho de fonte de 36.

850
00:38:38,160 --> 00:38:40,460
Eu especificar uma espessura da fonte de negrito.

851
00:38:40,460 --> 00:38:43,360
Aqui embaixo, eu só especificar 24 pixels.

852
00:38:43,360 --> 00:38:45,960
E, finalmente, na linha 28, eu especificar 12.

853
00:38:45,960 --> 00:38:49,070
Então, assim como uma verificação de sanidade rápida
e como uma leitura humana presente,

854
00:38:49,070 --> 00:38:52,545
que as palavras na tela são
realmente vai ser corajoso?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
Quais as linhas são realmente corajoso?

857
00:38:58,760 --> 00:38:59,570
>> Apenas John Harvard.

858
00:38:59,570 --> 00:39:00,070
Certo?

859
00:39:00,070 --> 00:39:05,940
Porque assim como linha 22 diz hey
navegador, aqui é uma divisão da página.

860
00:39:05,940 --> 00:39:07,920
Faça-lhe o tamanho da fonte de 36 pontos.

861
00:39:07,920 --> 00:39:09,460
Faça o peso negrito.

862
00:39:09,460 --> 00:39:11,920
Assim que chegar ao
tag final correspondente

863
00:39:11,920 --> 00:39:15,340
ou tag fechada na linha 24,
Isso significa que, hey navegador,

864
00:39:15,340 --> 00:39:17,640
parar de fazer tudo o que você está fazendo.

865
00:39:17,640 --> 00:39:21,020
E notem que ser claro, mesmo que
A linha 22 tem todos estes atributos

866
00:39:21,020 --> 00:39:24,430
como estilo, quando você
fechar a tag na linha 24,

867
00:39:24,430 --> 00:39:25,940
só mencionar o nome do tag.

868
00:39:25,940 --> 00:39:29,990
>> Você não repetir o estilo de texto ou
qualquer coisa que está dentro dessas citações.

869
00:39:29,990 --> 00:39:32,860
E por isso, se eu olhar para isso agora
no meu navegador, vamos dar

870
00:39:32,860 --> 00:39:38,060
um olhar para o resultado final. Deixe-me ir
frente a esse arquivo, que é CSS 0.

871
00:39:38,060 --> 00:39:41,814
E ainda é bastante simples,
mas ficando muito interessante.

872
00:39:41,814 --> 00:39:43,980
Mas acontece que há
outras coisas que posso fazer aqui,

873
00:39:43,980 --> 00:39:46,490
e correndo o risco de fazer
esta completamente hediondo,

874
00:39:46,490 --> 00:39:48,630
notar aqui que, na minha
corpo de minha página web,

875
00:39:48,630 --> 00:39:53,930
Eu posso fazer algo engraçado
como bg ou cor de fundo.

876
00:39:53,930 --> 00:39:56,670
>> E rápido, o que é sua cor favorita?

877
00:39:56,670 --> 00:39:57,720
Verde ouvi.

878
00:39:57,720 --> 00:39:58,750
Tudo certo.

879
00:39:58,750 --> 00:40:02,920
Então, agora, se eu acertar recarregar agora,
temos uma página web verde.

880
00:40:02,920 --> 00:40:04,710
Tudo bem, então isso não é ruim.

881
00:40:04,710 --> 00:40:08,350
E agora, se eu quiser fazer isso realmente
legal, eu posso fazer a cor do meu texto

882
00:40:08,350 --> 00:40:09,360
até mesmo vermelho.

883
00:40:09,360 --> 00:40:10,870
Então vamos ver o que isso parece.

884
00:40:10,870 --> 00:40:12,230
Agora ele está olhando muito bom.

885
00:40:12,230 --> 00:40:15,460
E aqui embaixo, se você realmente
quer mexer com alguém

886
00:40:15,460 --> 00:40:17,487
ou se você quer ser
uma daquelas pessoas que

887
00:40:17,487 --> 00:40:20,570
tenta induzi-lo a visitar um web
página porque eles enganado Google

888
00:40:20,570 --> 00:40:27,610
em pensar que há um grupo inteiro
de palavras-chave como-- vamos ver, recarregar.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Para onde ele foi?

891
00:40:30,680 --> 00:40:31,530
E não nos TI.

892
00:40:31,530 --> 00:40:32,030
Tudo certo.

893
00:40:32,030 --> 00:40:34,905
Então eu digo isso como um aparte, nós vamos
falar sobre essas coisas em algumas semanas

894
00:40:34,905 --> 00:40:36,740
quando falamos de
segurança, se você realmente

895
00:40:36,740 --> 00:40:38,852
cachos inteiros de embutir
palavras-chave em uma página web,

896
00:40:38,852 --> 00:40:41,810
mesmo se eles não são visíveis para um
humano, alguém como Google, é claro,

897
00:40:41,810 --> 00:40:43,250
ainda pode realmente encontrar este.

898
00:40:43,250 --> 00:40:45,820
Tudo bem, então isso é muito
hedionda muito rapidamente.

899
00:40:45,820 --> 00:40:48,420
>> E, de fato, não é tudo
que muito diferente de minha própria web

900
00:40:48,420 --> 00:40:51,480
página como estudante de graduação, que
Comecei pesquisando em torno de encontrar

901
00:40:51,480 --> 00:40:53,690
versões anteriores de meus velhos sites.

902
00:40:53,690 --> 00:40:54,500
Foi muito ruim.

903
00:40:54,500 --> 00:40:56,650
Na verdade, eu achei
um pouco antes da aula.

904
00:40:56,650 --> 00:40:58,620
Mas há pior lá fora.

905
00:40:58,620 --> 00:41:01,534
Este, aparentemente, era meu
home page de volta em 1996.

906
00:41:01,534 --> 00:41:04,200
Aparentemente, eu pensei que era
apropriado para pedir às pessoas o seu nome

907
00:41:04,200 --> 00:41:05,991
Antes que pudessem
realmente ver a minha página web.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> E então eu mostrei a eles
algo estúpido, provavelmente.

910
00:41:11,920 --> 00:41:13,450
Eu vou cavar-se mais para a próxima vez.

911
00:41:13,450 --> 00:41:16,220
Mas, por agora, vamos
considere um pouco de design.

912
00:41:16,220 --> 00:41:17,444
Nós conversamos sobre estilo.

913
00:41:17,444 --> 00:41:19,735
E esta página, até agora, e
mais tudo que eu escrevi

914
00:41:19,735 --> 00:41:21,890
é bastante limpo estilisticamente.

915
00:41:21,890 --> 00:41:23,320
Mas o que dizer de design?

916
00:41:23,320 --> 00:41:25,990
Bem, há um monte de redundância
em que eu venho fazendo aqui.

917
00:41:25,990 --> 00:41:28,156
>> Eu mencionei a palavra
cor em um par de lugares.

918
00:41:28,156 --> 00:41:31,630
Eu mencionei o tamanho da fonte em um par de
lugares e corajosa em um par de lugares.

919
00:41:31,630 --> 00:41:34,870
E, fundamentalmente, eu sou co
misturando-se duas línguas.

920
00:41:34,870 --> 00:41:38,100
Eu tenho HTML com os meus tags e minha
atributos e, em seguida, de repente,

921
00:41:38,100 --> 00:41:40,100
entre aspas, eu tenho
a segunda língua hoje

922
00:41:40,100 --> 00:41:43,830
chamado de CSS, que por sua vez, é apenas estes
pares de valores-chave ou essas propriedades

923
00:41:43,830 --> 00:41:45,280
separados por dois pontos.

924
00:41:45,280 --> 00:41:47,700
>> Acontece que muito
como em C onde nós

925
00:41:47,700 --> 00:41:50,550
pode começar a fatorar
algum código em arquivos de cabeçalho,

926
00:41:50,550 --> 00:41:53,520
para que possamos fazer o mesmo em HTML.

927
00:41:53,520 --> 00:41:56,030
E um passo para que é como se segue.

928
00:41:56,030 --> 00:42:02,230
Observe que esta versão, é CSS1.html
Estruturalmente a mesma página da web exato.

929
00:42:02,230 --> 00:42:05,250
Então, eu tenho um monte inteiro
de divs, mas desta vez, eu tenho

930
00:42:05,250 --> 00:42:07,220
se livrado do invólucro
div como você vai ver.

931
00:42:07,220 --> 00:42:12,390
>> E eu dei esses três divs
superior, média e inferior, IDs exclusivos.

932
00:42:12,390 --> 00:42:14,760
Isso é bom, porque por
dando essas divisões

933
00:42:14,760 --> 00:42:18,715
dos identificadores únicos de página,
I pode referenciá-los em outro lugar.

934
00:42:18,715 --> 00:42:19,215
Onde?

935
00:42:19,215 --> 00:42:21,070
Bem, deixe-me rolar para cima.

936
00:42:21,070 --> 00:42:24,070
E, até agora, a qualquer hora nós olhamos
à frente de uma página web, o que é

937
00:42:24,070 --> 00:42:28,560
a única tag que tivemos em
o chefe de uma página da web?

938
00:42:28,560 --> 00:42:29,740
Um pouco mais alto.

939
00:42:29,740 --> 00:42:30,799
Apenas o título até agora.

940
00:42:30,799 --> 00:42:32,590
Mas acontece que há
algumas outras coisas

941
00:42:32,590 --> 00:42:35,840
você pode colocar lá, um dos
que é chamado de tag estilo.

942
00:42:35,840 --> 00:42:37,850
Então, há pouco, nós olhamos
em um atributo de estilo.

943
00:42:37,850 --> 00:42:39,150
Acontece lá fora é uma marca de estilo.

944
00:42:39,150 --> 00:42:41,200
Pertence no interior da
o chefe de uma página web.

945
00:42:41,200 --> 00:42:42,840
E agora perceber o que estou fazendo.

946
00:42:42,840 --> 00:42:46,540
Eu tenho dentro deste
tag estilo a seguir.

947
00:42:46,540 --> 00:42:51,190
Eu estou literalmente mencionando na linha 20 do
nome de uma marca que eu quero para estilizar.

948
00:42:51,190 --> 00:42:53,489
>> Então eu tenho chaveta aberta
e fechou chaveta.

949
00:42:53,489 --> 00:42:56,030
Então similares em espírito à C, mas
Novamente, isto não é uma função,

950
00:42:56,030 --> 00:42:57,796
este é apenas um detalhe sintático aqui.

951
00:42:57,796 --> 00:43:00,170
E depois, claro, estou dizendo
o navegador, hey navegador,

952
00:43:00,170 --> 00:43:05,210
fazer todo o corpo da página
ter um alinhamento do texto do centro.

953
00:43:05,210 --> 00:43:06,930
E então isto está dizendo o seguinte.

954
00:43:06,930 --> 00:43:12,600
Hey navegador, se você vê uma página HTML
elemento ou tag na página que

955
00:43:12,600 --> 00:43:17,040
tem um identificador único de topo,
de modo que o símbolo de hash aqui significa apenas

956
00:43:17,040 --> 00:43:21,010
idéia original de topo, vá em frente
e fazer seu tamanho de fonte 36

957
00:43:21,010 --> 00:43:22,490
e seu peso negrito.

958
00:43:22,490 --> 00:43:26,840
>> Hey navegador, um elemento cuja
ID é médio, torná-lo 24 pixels.

959
00:43:26,840 --> 00:43:31,070
E hey navegador, se você vê uma
idéia de fundo, torná-lo 12 pixels.

960
00:43:31,070 --> 00:43:33,540
O efeito na extremidade
é exatamente o sam.

961
00:43:33,540 --> 00:43:36,500
Se eu entrar em CSS 1, o
A página parece o mesmo.

962
00:43:36,500 --> 00:43:39,810
Mas estamos um passo na direção
um design um pouco melhor.

963
00:43:39,810 --> 00:43:44,850
Deixa-me voltar aqui para CSS2
e ver o que mais eu fiz.

964
00:43:44,850 --> 00:43:48,030
>> Agora, a página é realmente, realmente limpo.

965
00:43:48,030 --> 00:43:50,730
Na verdade, eu posso atender a todas as
o conteúdo de uma página aqui.

966
00:43:50,730 --> 00:43:54,270
Mas o novo tag tenho
introduzido, obviamente?

967
00:43:54,270 --> 00:43:54,770
Ligação.

968
00:43:54,770 --> 00:43:57,853
E não é o melhor nome para um tag,
porque não é um link no sentido

969
00:43:57,853 --> 00:44:00,780
que a conhecemos, mas isso significa
um link em algum outro arquivo.

970
00:44:00,780 --> 00:44:02,890
Este é tipo de como afiado incluir em C.

971
00:44:02,890 --> 00:44:06,280
>> Esta é a maneira em HTML
para dizer hey navegador,

972
00:44:06,280 --> 00:44:10,240
ir buscar o conteúdo de
o arquivo chamado css2.css.

973
00:44:10,240 --> 00:44:12,880
A relação, para mim,
é que é uma folha de estilo.

974
00:44:12,880 --> 00:44:17,980
E, de fato, é isso que a do
S de em Cascading Style Sheets meios.

975
00:44:17,980 --> 00:44:20,350
Isto é uma folha de estilo.

976
00:44:20,350 --> 00:44:23,120
É apenas o arquivo de texto contendo
um monte de propriedade.

977
00:44:23,120 --> 00:44:25,940
É um monte de estilos
que você deseja aplicar a uma página.

978
00:44:25,940 --> 00:44:28,860
>> E assim esta é, aparentemente,
referindo-se a um segundo ficheiro.

979
00:44:28,860 --> 00:44:32,970
E se eu abrir esse, CSS2.css,
perceber que tudo que eu fiz

980
00:44:32,970 --> 00:44:35,900
é copiar e colar tudo
desta para este arquivo.

981
00:44:35,900 --> 00:44:38,220
E agora, mesmo se você nunca
codificado essas coisas antes,

982
00:44:38,220 --> 00:44:40,700
considerar apenas com o
chapéu engenharia proverbial

983
00:44:40,700 --> 00:44:44,220
em, por que isso é uma
melhor concepção provavelmente?

984
00:44:44,220 --> 00:44:48,910
Factoring para fora aquelas propriedades CSS,
colocá-los em seu próprio arquivo.

985
00:44:48,910 --> 00:44:51,330
Mesmo que resolveu este
problema como há cinco minutos

986
00:44:51,330 --> 00:44:52,600
na primeira versão.

987
00:44:52,600 --> 00:44:55,730
>> Nós não tenha melhorado o
página estilisticamente,

988
00:44:55,730 --> 00:44:57,520
este é apenas melhor
projeto em algum sentido.

989
00:44:57,520 --> 00:44:58,990
Por que você pensa?

990
00:44:58,990 --> 00:45:01,510
Sim.

991
00:45:01,510 --> 00:45:02,260
Mais flexível como?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Sim.

994
00:45:05,540 --> 00:45:07,373
Então, se você quer ir
para trás e mudar as coisas,

995
00:45:07,373 --> 00:45:09,540
agora, você tem um lugar
onde você pode mudar as coisas.

996
00:45:09,540 --> 00:45:11,622
E, na verdade, para algo
como conjunto de problemas de sete,

997
00:45:11,622 --> 00:45:13,690
onde vamos implementar um
site de negociação de ações,

998
00:45:13,690 --> 00:45:15,523
que vai ter um
todo grupo de páginas.

999
00:45:15,523 --> 00:45:17,620
E seria realmente
irritante se você decidir, hm,

1000
00:45:17,620 --> 00:45:21,630
Eu realmente não gosto de 24 pixels, eu quero
que seja 28 pixels ou ligeiramente maior.

1001
00:45:21,630 --> 00:45:23,550
E então tem que fazer um
global de localizar e substituir

1002
00:45:23,550 --> 00:45:27,560
ou abrir todos os arquivos do seu site
simplesmente para realmente mudar um valor.

1003
00:45:27,560 --> 00:45:31,290
Ao fatorar esses estilos
em um lugar central,

1004
00:45:31,290 --> 00:45:34,720
Agora você pode abrir um arquivo de texto
em CS50IDE em qualquer programa,

1005
00:45:34,720 --> 00:45:36,479
mudá-lo, salvá-lo, e feito.

1006
00:45:36,479 --> 00:45:38,270
Você propagada aqueles
mudanças em todos os lugares.

1007
00:45:38,270 --> 00:45:42,450
E que seria a mesma
em um arquivo ponto h bem.

1008
00:45:42,450 --> 00:45:46,697
Assim dúvidas, portanto,
medida sobre essa sintaxe?

1009
00:45:46,697 --> 00:45:48,530
Tudo bem, então nós temos
feito tudo o que parece

1010
00:45:48,530 --> 00:45:51,170
exceto realmente implementar hyperlinks.

1011
00:45:51,170 --> 00:45:52,740
E então vamos ir em frente e fazer isso.

1012
00:45:52,740 --> 00:45:54,830
Deixe-me ir em frente e
criar um novo arquivo aqui.

1013
00:45:54,830 --> 00:45:59,970
Vou chamá-lo
link.html, coloque o código de hoje.

1014
00:45:59,970 --> 00:46:03,000
>> E eu vou fazer aberto
suporte tipo doc html.

1015
00:46:03,000 --> 00:46:05,970
Como um aparte, essa coisa no
top, esta declaração de tipo doc,

1016
00:46:05,970 --> 00:46:08,420
é o único que é estranho
com o ponto de exclamação.

1017
00:46:08,420 --> 00:46:12,100
Você apenas tem que fazê-lo lá e
significa que estamos usando HTML versão 5.

1018
00:46:12,100 --> 00:46:14,460
Versões mais antigas do
linguagem teve muito mais tempo

1019
00:46:14,460 --> 00:46:16,400
strings que você precisava para colocar lá.

1020
00:46:16,400 --> 00:46:18,620
Então, aqui está um exemplo chamado link.

1021
00:46:18,620 --> 00:46:20,950
>> Eu preciso de um corpo de minha página web aqui.

1022
00:46:20,950 --> 00:46:29,770
E aqui, a é igual a href
digamos HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
e meu site favorito, vamos dizer.

1024
00:46:35,420 --> 00:46:38,550
Tudo bem, então um muito
, página amigável inócuo.

1025
00:46:38,550 --> 00:46:42,950
Se eu agora vá em meu diretório
listando aqui e abrir link.html,

1026
00:46:42,950 --> 00:46:44,780
temos de hiper texto.

1027
00:46:44,780 --> 00:46:47,410
>> E, de fato, este é o lugar onde
o H em HTTP vem.

1028
00:46:47,410 --> 00:46:51,580
Protocolo de Transferência de Hipertexto
é sobre a transferência de texto

1029
00:46:51,580 --> 00:46:53,840
que tem hiperlinks a outros recursos.

1030
00:46:53,840 --> 00:46:58,210
E, de fato, aqui é o familiar,
se retro, azul link que, se clicado,

1031
00:46:58,210 --> 00:47:02,607
vai realmente me levar a Disney.com.

1032
00:47:02,607 --> 00:47:03,940
Agora, oh, que está saindo em breve.

1033
00:47:03,940 --> 00:47:08,970
Tudo bem, então agora, quais são alguns
das implicações disso?

1034
00:47:08,970 --> 00:47:11,610
>> E, francamente, o mundo começa
para obter um pouco mais familiar

1035
00:47:11,610 --> 00:47:15,090
e também um pouco mais assustador
mas também um pouco mais

1036
00:47:15,090 --> 00:47:17,840
auto defensável uma vez que você começar
para entender essas coisas.

1037
00:47:17,840 --> 00:47:21,610
Porque as probabilidades são, alguns de vocês, se você ir
através de sua pasta de spam do Gmail ou mesmo

1038
00:47:21,610 --> 00:47:23,990
sua caixa de entrada, você provavelmente
obtido algum tipo de e-mail

1039
00:47:23,990 --> 00:47:26,980
que está lhe pedindo para mudar o seu
password talvez ou talvez verificar

1040
00:47:26,980 --> 00:47:28,910
suas credenciais PayPal ou outros enfeites.

1041
00:47:28,910 --> 00:47:34,510
>> E, de fato, você pode ter recebido
algo que diz como, clique aqui

1042
00:47:34,510 --> 00:47:42,260
para redefinir sua senha PayPal.

1043
00:47:42,260 --> 00:47:44,130
E agora, repare, se
Isto não é Disney.com

1044
00:47:44,130 --> 00:47:51,600
mas como badplace.com e
recarregar, note que o texto aqui

1045
00:47:51,600 --> 00:47:53,710
pudesse dizer qualquer coisa que seja.

1046
00:47:53,710 --> 00:47:55,260
E, de fato, este é apenas palavras.

1047
00:47:55,260 --> 00:48:04,610
Por que não posso realmente ser super mal-intencionado
e dizer http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Clique aqui redefinir sua PayPal
senha e agora recarregar.

1049
00:48:14,090 --> 00:48:16,220
Isso parece bastante legítimo, certo?

1050
00:48:16,220 --> 00:48:20,470
Quero dizer, eu não clique em
um e-mail que só diz isso.

1051
00:48:20,470 --> 00:48:22,450
Mas note a dicotomia aqui.

1052
00:48:22,450 --> 00:48:26,880
Diz www.paypal.com,
e, de fato, espere um minuto,

1053
00:48:26,880 --> 00:48:29,210
nós sabemos que você quer
a s para a segurança.

1054
00:48:29,210 --> 00:48:35,450
Então, agora, ir para www.paypal.com HTTPS,
mas se você nunca fez isso antes,

1055
00:48:35,450 --> 00:48:38,182
Não adquira o hábito de
pairando sobre pequenos links aqui.

1056
00:48:38,182 --> 00:48:39,890
E é difícil ver
na tela existe,

1057
00:48:39,890 --> 00:48:41,340
e não é tudo o que mais fácil aqui.

1058
00:48:41,340 --> 00:48:43,615
Mas até aqui em
o pequeno cantinho

1059
00:48:43,615 --> 00:48:45,740
faz o navegador realmente
dizer-lhe que vamos

1060
00:48:45,740 --> 00:48:48,850
para badplace.com em vez de Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Agora, para onde estamos indo com isso?

1062
00:48:51,620 --> 00:48:54,859
Todos os exemplos que fizemos hoje,
temos codificado e digitado manualmente.

1063
00:48:54,859 --> 00:48:56,900
A web é incrivelmente
desinteressante quando você duro

1064
00:48:56,900 --> 00:48:59,844
codificar suas páginas da web para que o conteúdo
é estático e nunca mudar.

1065
00:48:59,844 --> 00:49:01,760
Claro, todo o nosso
sites favoritos hoje,

1066
00:49:01,760 --> 00:49:04,470
se é o Gmail ou o Twitter ou
Facebook ou qualquer número de outros

1067
00:49:04,470 --> 00:49:05,290
são dinâmicas.

1068
00:49:05,290 --> 00:49:07,340
Eles estão mudando em
resposta à entrada do usuário

1069
00:49:07,340 --> 00:49:08,840
assim como os resultados de pesquisa do Google.

1070
00:49:08,840 --> 00:49:12,415
>> E assim na quarta-feira, o que fazemos é
deixamos HTML e CSS introdução

1071
00:49:12,415 --> 00:49:14,290
atrás de nós e nós tomamos
por certo que nós agora

1072
00:49:14,290 --> 00:49:16,640
conhecê-la e introduzimos
uma nova linguagem de programação

1073
00:49:16,640 --> 00:49:19,050
chamado PHP, que gosta
C, vai nos dar

1074
00:49:19,050 --> 00:49:22,450
o poder de realmente criar programas
que se geram saída.

1075
00:49:22,450 --> 00:49:25,900
Neste caso, vamos usar
PHP para gerar dinamicamente web

1076
00:49:25,900 --> 00:49:27,340
páginas usando essa nova linguagem.

1077
00:49:27,340 --> 00:49:28,989
Então, mais sobre isso na quarta-feira.

1078
00:49:28,989 --> 00:49:29,530
Vejo você então.

1079
00:49:29,530 --> 00:49:33,130

1080
00:49:33,130 --> 00:49:37,380
>> [Música tocando]

1081
00:49:37,380 --> 00:52:38,864