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 inicio da semana 7.

4
00:00:14,250 --> 00:00:15,060
Entón, benvido de volta.

5
00:00:15,060 --> 00:00:17,540
E ten que lembrar que
no conxunto de problemas catro,

6
00:00:17,540 --> 00:00:21,510
houbo un pouco de unha cacería
para algúns fabulosos premios polo cal

7
00:00:21,510 --> 00:00:24,219
despois de recuperar as fotos de
equipo, tanto aquí como en New Haven,

8
00:00:24,219 --> 00:00:27,468
vostede foron desafiados a atopar o maior número de
estes científicos da computación como podería.

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

10
00:00:29,550 --> 00:00:31,930
Penso que ía compartir algunhas
con vostedes aquí hoxe.

11
00:00:31,930 --> 00:00:35,100
>> E nós imos deixar todo isto en liña.

12
00:00:35,100 --> 00:00:39,310
Pero, en particular, eu quería
chamar a súa atención a-- ben un,

13
00:00:39,310 --> 00:00:42,670
Sam estaba en moi poucos deles
xeralmente pousando como este.

14
00:00:42,670 --> 00:00:45,750
Pero parece que a partir de
esta mañá, o gañador

15
00:00:45,750 --> 00:00:51,170
foi un certo alguén chamado Ken con
24 do equipo capturado na cámara

16
00:00:51,170 --> 00:00:54,600
ou un pouco máis cando ter en
conta varios funcionarios nas fotos.

17
00:00:54,600 --> 00:00:58,300
Retratado aquí é Ken próxima
María en New Haven.

18
00:00:58,300 --> 00:01:01,300
>> Agora, Ken, porén, transforma
fóra é un pouco de un caso de canto

19
00:01:01,300 --> 00:01:02,880
que aínda non aconteceu antes.

20
00:01:02,880 --> 00:01:05,713
Acontece que isto non ocorreu
para me poñer en letras miúdas problema

21
00:01:05,713 --> 00:01:09,710
definir catro que di que os funcionarios son
inelegíveis para os premios fabulosos

22
00:01:09,710 --> 00:01:13,130
porque Ken é, evidentemente, unha das
os fotógrafos no noso equipo.

23
00:01:13,130 --> 00:01:16,820
Agora, co que dixo, el
orixinalmente escribiu-me a dicir

24
00:01:16,820 --> 00:01:19,180
por favor, non publicar estas fotos en liña.

25
00:01:19,180 --> 00:01:21,630
Eu creo que en gran parte
porque a maioría das fotos

26
00:01:21,630 --> 00:01:24,499
que este fotógrafo sacou ollar
un pouco algo así.

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

28
00:01:25,040 --> 00:01:28,990
>> Pero Ken quere me tranquilizalo lo
que é un bo fotógrafo,

29
00:01:28,990 --> 00:01:33,190
El é un profesional, el leva
fotos que non son borradas,

30
00:01:33,190 --> 00:01:37,270
que son mellores en foco, e
levou algúns dos nosos propios funcionarios.

31
00:01:37,270 --> 00:01:40,370
Pero en vez de recoñecer única
Ken, o que pensamos en facer

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

33
00:01:43,390 --> 00:01:48,640
E parece que Lance con
15 fotos dende esta mañá

34
00:01:48,640 --> 00:01:50,030
foi o noso gañador.

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

36
00:01:55,730 --> 00:02:00,230
Pero, a continuación, verifícase que a partir de
11:46, polo que só un pouco atrás,

37
00:02:00,230 --> 00:02:04,380
Eu volvín para o meu correo electrónico e atopou
que tivo aínda máis unha presentación

38
00:02:04,380 --> 00:02:08,300
por un estudante chamado Bonnie
cuxo correo electrónico dixo que só iso.

39
00:02:08,300 --> 00:02:10,800
Non imos mentir, eu son
facendo iso durante a clase.

40
00:02:10,800 --> 00:02:17,620
E entón comezou a achegar só
14 fotos, un tímido de Lance de 15.

41
00:02:17,620 --> 00:02:22,690
>> Pero, en fotos de Bonnie, verifícase se
out foron varios membros do equipo, Sam

42
00:02:22,690 --> 00:02:25,960
entre eles, entón o que nós pensamos que nós
quere facer é recoñecer ambos.

43
00:02:25,960 --> 00:02:29,240
Así, ademais de obter o Dropbox
espazo que todos os que participaron

44
00:02:29,240 --> 00:02:33,900
recibe, estas dúas seccións tamén
recibir un bo xantar servidos por eles

45
00:02:33,900 --> 00:02:36,100
ea súa sección
acasala esta semana que vén.

46
00:02:36,100 --> 00:02:38,970
E así que vai escoitar de nós,
Tiro e Bonnie, sobre iso.

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

48
00:02:40,002 --> 00:02:42,210
Agora, aqueles de vostedes que faría
como o xantar de modo máis xeral

49
00:02:42,210 --> 00:02:45,320
sabe que o xantar CS50 en Cambridge
e New Haven é hoxe.

50
00:02:45,320 --> 00:02:48,510
Ir ao web da barra de RSVP CS50.

51
00:02:48,510 --> 00:02:49,800
E agora unha palabra sobre os seminarios.

52
00:02:49,800 --> 00:02:50,730
Máis curricularly.

53
00:02:50,730 --> 00:02:52,490
Entón, nós estamos achegando o
punto do semestre

54
00:02:52,490 --> 00:02:55,200
onde ten que comezar
pensar sobre proxectos finais.

55
00:02:55,200 --> 00:02:59,309
E, de feito, en só un pouco, vai
os chamados propostas pre ser debido.

56
00:02:59,309 --> 00:03:01,850
Así pre propostas destinadas a
ser moi baixo impacto e realmente

57
00:03:01,850 --> 00:03:04,109
só unha oportunidade para
vostede compoñer unha nota curta

58
00:03:04,109 --> 00:03:06,900
seu compañeiro de ensino para informar
el ou ela o que está a pensar que

59
00:03:06,900 --> 00:03:09,140
Pode querer facer para o seu proxecto final.

60
00:03:09,140 --> 00:03:11,730
>> Agora, moitos estudantes acaban
facendo web baseada proxectos finais.

61
00:03:11,730 --> 00:03:13,800
E, por suposto, somos só
Agora, a semana pasada nesta

62
00:03:13,800 --> 00:03:15,890
e ademais de mergullo programación web.

63
00:03:15,890 --> 00:03:18,200
Non te preocupes se
non teño absolutamente ningunha idea de como

64
00:03:18,200 --> 00:03:21,594
ía construír as ideas que
pode que na súa mente.

65
00:03:21,594 --> 00:03:24,510
Isto é realmente só unha función de forza
para pensar e falar

66
00:03:24,510 --> 00:03:25,650
co seu TF sobre iso.

67
00:03:25,650 --> 00:03:28,810
Pero, para axudar con iso, e
con proxectos finais, en definitiva,

68
00:03:28,810 --> 00:03:31,750
sei que CS50 ten unha tradición
de ofrecer seminarios.

69
00:03:31,750 --> 00:03:36,084
>> E estes son opcionais, mans,
ou charla con base en oportunidades

70
00:03:36,084 --> 00:03:39,000
para saber máis sobre temas que son
un pouco de axuda para o curso de

71
00:03:39,000 --> 00:03:43,310
currículo, pero aínda así marabilloso
materiais para conducir proxectos finais.

72
00:03:43,310 --> 00:03:46,840
E así esta é a lista que é
CS50 equipo aquí en New Haven

73
00:03:46,840 --> 00:03:48,600
veñen-se coa
este ano sobre IOS

74
00:03:48,600 --> 00:03:50,730
programación, Android
programación, desenvolvemento de xogos,

75
00:03:50,730 --> 00:03:54,480
e acios de máis ferramentas
e linguaxes e técnicas.

76
00:03:54,480 --> 00:03:56,780
>> Polo tanto, manter un ollo no sitio web do CS50.

77
00:03:56,780 --> 00:04:00,110
E, mentres tanto, se desexa
rexistrar o seu interese en calquera destes,

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

79
00:04:02,510 --> 00:04:05,770
E nós imos logo seguir en canto á
días e horarios de voos e locais

80
00:04:05,770 --> 00:04:09,090
e máis todo vai tudo--
transmitir e tamén está dispoñible baixo demanda

81
00:04:09,090 --> 00:04:11,750
despois se non pode realmente facer.

82
00:04:11,750 --> 00:04:15,800
Así, sen máis delongas, imos
deixou a última vez con GET.

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

84
00:04:19,610 --> 00:04:23,960
que pasou de router para router para
router entre un navegador web e un web

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

86
00:04:24,487 --> 00:04:26,695
E esa mensaxe parecía un
pouco algo así.

87
00:04:26,695 --> 00:04:29,700
Esta foi a mensaxe que máis arcano
era, en realidade, dentro dun sobre

88
00:04:29,700 --> 00:04:34,440
escrito nunha folla de papel cuxo
primeira liña di literalmente chegar barra.

89
00:04:34,440 --> 00:04:37,830
>> E, así como unha comprobación de sanidade,
o que barra denotar?

90
00:04:37,830 --> 00:04:40,455
O que quere dicir cando barra
solicitando un sitio web?

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

92
00:04:43,070 --> 00:04:44,250
Vostede solicitalo lo o tempo.

93
00:04:44,250 --> 00:04:47,333
A maioría dos calquera vez que visita un sitio web,
en realidade, non escriba un nome de ficheiro.

94
00:04:47,333 --> 00:04:50,960
Probablemente só ir Facebook.com,
introducir, gmail.com, ou semellantes.

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

96
00:04:52,260 --> 00:04:53,506
O ficheiro?

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

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

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

100
00:05:00,720 --> 00:05:01,810
Entón, a páxina por defecto.

101
00:05:01,810 --> 00:05:04,810
Polo tanto, se non especificar un ficheiro
nomear como nós imos comezar a ver,

102
00:05:04,810 --> 00:05:07,750
en realidade está só pedindo
dáme a páxina estándar de Facebook

103
00:05:07,750 --> 00:05:10,800
ou me dar a miña caixa de entrada ou dar
me a páxina estándar de noticias

104
00:05:10,800 --> 00:05:12,510
na páxina web da CNN ou similares.

105
00:05:12,510 --> 00:05:15,220
E a continuación, un servidor responde a
esta mensaxe con algo

106
00:05:15,220 --> 00:05:18,420
como este, dicindo: si, eu
falar HTTP versión 1.1.

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

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

109
00:05:22,790 --> 00:05:26,640
Porque significa OK, a petición
foi recibida e trata adecuadamente.

110
00:05:26,640 --> 00:05:28,960
E o tipo de contido
aparentemente en resposta

111
00:05:28,960 --> 00:05:31,170
é, moitas veces, pero non sempre, texto.

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

113
00:05:32,580 --> 00:05:34,760
E iso é, en realidade,
onde miramos para hoxe.

114
00:05:34,760 --> 00:05:37,140
>> Entón, en realidade, eu estou indo a ir
adiante e abrir un navegador.

115
00:05:37,140 --> 00:05:40,410
Vou usar Chrome, pode utilizar
máis calquera navegador nas semanas por vir.

116
00:05:40,410 --> 00:05:42,410
En xeral, recomendamos Chrome
porque é particularmente

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

118
00:05:43,750 --> 00:05:46,070
Ten unha morea de construída
ferramentas que fan máis doado

119
00:05:46,070 --> 00:05:49,800
para desenvolver non só HTML e CSS,
cousas que imos comezar a falar hoxe,

120
00:05:49,800 --> 00:05:51,530
pero tamén outras linguas tamén.

121
00:05:51,530 --> 00:05:55,530
>> E eu estou indo a ir adiante e ir a--
Eu estou indo a controlar ou prema co botón dereito

122
00:05:55,530 --> 00:05:57,210
clic en calquera lugar nunha páxina web.

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

124
00:05:59,070 --> 00:06:03,850
E eu vou axustar meu
pantalla só un pouquiño aquí.

125
00:06:03,850 --> 00:06:05,790
Déixeme pasar isto para o fondo.

126
00:06:05,790 --> 00:06:08,140
Polo tanto, este é o que se chama
Inspector de Chrome.

127
00:06:08,140 --> 00:06:11,010
Entón, iso é como unha depuración
ferramenta embutida no Chrome.

128
00:06:11,010 --> 00:06:13,520
>> Todos vostedes xa teñen esta
se estivo utilizando o Chrome.

129
00:06:13,520 --> 00:06:17,169
E iso permite que vexa o que está pasando
por baixo do capuz dalgunha páxina web.

130
00:06:17,169 --> 00:06:19,210
Entón, imos realmente ter un
ollar para isto como segue.

131
00:06:19,210 --> 00:06:21,251
Ten xeito máis recursos
e nos preocupa hoxe.

132
00:06:21,251 --> 00:06:22,760
Pero hai esas guías para aquí.

133
00:06:22,760 --> 00:06:25,890
Elementos, rede, fontes,
liña do tempo, e algunhas outras cousas.

134
00:06:25,890 --> 00:06:27,800
Eu estou indo a facer clic en
Rede por un momento.

135
00:06:27,800 --> 00:06:30,500
>> E é un pouco esmagadora
a primeira vista aquí.

136
00:06:30,500 --> 00:06:34,190
Pero o que eu vou facer é deixar
me simplifica-lo un pouco.

137
00:06:34,190 --> 00:06:37,560
Vou chamar o
gravación de luz, co que é vermello.

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

139
00:06:39,140 --> 00:06:41,015
E este é só un pouco
cousa que eu descubrir

140
00:06:41,015 --> 00:06:44,120
co paso do tempo que vai gardar
todo o que acontece no navegador.

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

142
00:06:50,030 --> 00:06:52,690
>> De feito, imos facer www
para unha boa medida, slash.

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

144
00:06:53,643 --> 00:06:56,180
Así, un URL que moitos
podes visitar.

145
00:06:56,180 --> 00:06:58,830
E agora web de Facebook
A páxina xorde na parte superior.

146
00:06:58,830 --> 00:07:02,350
E, a continuación, unha morea de
material voou na parte inferior.

147
00:07:02,350 --> 00:07:04,830
E, de feito, parece que
cando visita Facebook.com,

148
00:07:04,830 --> 00:07:09,320
non está só facendo unha solicitude HTTP,
verifícase que vai Facebook.com

149
00:07:09,320 --> 00:07:14,320
envía 41 destes sobres,
cada un co seu propio solicitude get,

150
00:07:14,320 --> 00:07:18,360
segundo se indica, ben que por detrás da pantalla
aquí, na parte inferior da pantalla,

151
00:07:18,360 --> 00:07:24,040
isto indica que, en realidade, o meu
navegador fixo 41 solicitudes.

152
00:07:24,040 --> 00:07:29,689
>> E en total, trasladou 861
kilobytes e levou por algún motivo

153
00:07:29,689 --> 00:07:31,730
ata oito segundo
para descargar todo isto.

154
00:07:31,730 --> 00:07:33,790
Entón, iso é realmente un pouco raro
que o sitio de Facebook que levaría

155
00:07:33,790 --> 00:07:35,600
por moito tempo, pero que así sexa neste caso.

156
00:07:35,600 --> 00:07:39,520
Agora, todo isto realmente non me importa
sobre, excepto para a solicitude de nivel superior.

157
00:07:39,520 --> 00:07:46,440
Entón imos para este aquí
e déixeme afastar por un momento.

158
00:07:46,440 --> 00:07:47,754
>> E déixeme facer zoom sobre o tema.

159
00:07:47,754 --> 00:07:50,670
Entón o que eu fixen na esquerda, aínda
hai moita cousa a suceder aquí

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

161
00:07:53,360 --> 00:07:56,540
notar que eu estou rodando abaixo,
desprazamento para abaixo, rolando a abaixo,

162
00:07:56,540 --> 00:07:58,330
para solicitar cabeceiras.

163
00:07:58,330 --> 00:08:01,720
E vai ver que Chrome está amosando
me esencialmente o contido interno

164
00:08:01,720 --> 00:08:02,810
da solicitude que eu fixen.

165
00:08:02,810 --> 00:08:06,130
Non é formatear completamente na mesma
xeito, pero teña en conta hai mención de entrar,

166
00:08:06,130 --> 00:08:09,481
notar hai mención do anfitrión,
Facebook.com, o camiño, ou barra,

167
00:08:09,481 --> 00:08:10,730
que é o ficheiro que se solicite.

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

169
00:08:12,930 --> 00:08:17,270
ver que Facebook devolto
para min é todo eses cabeceiras.

170
00:08:17,270 --> 00:08:21,040
Entón, dentro dese sobre virtual
de feito, hai unha morea de pares de valores clave.

171
00:08:21,040 --> 00:08:23,130
Unha palabra, un colonos, e, a continuación, un valor.

172
00:08:23,130 --> 00:08:25,050
Nunha palabra, unha coma, e un valor.

173
00:08:25,050 --> 00:08:26,160
Estes son chamados as cabeceiras.

174
00:08:26,160 --> 00:08:31,860
E non hai forma máis detalles aquí que
que realmente se preocupan agora.

175
00:08:31,860 --> 00:08:33,750
>> Pero esta é a segunda
último alí en baixo,

176
00:08:33,750 --> 00:08:38,809
notar, que o servidor da Facebook.com,
de feito dixo vén aquí un texto HTML.

177
00:08:38,809 --> 00:08:41,409
Entón, todo isto é para dicir
que cando pedir un web

178
00:08:41,409 --> 00:08:44,300
páxina dun navegador para un
servidor, que servidor responde

179
00:08:44,300 --> 00:08:47,630
con un sobre da súa propia
no interior dos cales é texto.

180
00:08:47,630 --> 00:08:49,020
Noutras palabras, o HTML.

181
00:08:49,020 --> 00:08:50,590
Formato Markup Language.

182
00:08:50,590 --> 00:08:53,200
Que é outra lingua
que presentamos hoxe

183
00:08:53,200 --> 00:08:57,740
que o ser humano ou ordenadores xerar
a fin de aplicar páxinas web.

184
00:08:57,740 --> 00:08:59,580
>> En concreto, imos ollar para iso.

185
00:08:59,580 --> 00:09:03,277
Vou agora volver
para o sitio de Facebook.

186
00:09:03,277 --> 00:09:05,360
E eu vou só
control clic ou prema co botón dereito

187
00:09:05,360 --> 00:09:07,634
e faga clic en Ver código fonte da páxina.

188
00:09:07,634 --> 00:09:10,550
E mesmo se non usar Chrome,
IE pode facelo, Firefox pode facelo,

189
00:09:10,550 --> 00:09:14,060
Safari pode facelo, aínda que o menú
opcións pode parecer un pouco diferente.

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

191
00:09:18,990 --> 00:09:24,640
>> E colectivamente, esa linguaxe aquí
aplica o azul e branco da páxina

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

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

194
00:09:28,030 --> 00:09:31,400
Pero se miramos cara arriba na parte superior esquerda, estamos
comezará a ver algúns patróns.

195
00:09:31,400 --> 00:09:34,140
Parece que hai unha morea
destes soporte de ángulo aberto

196
00:09:34,140 --> 00:09:35,970
e despois hai este HTML contrasinal.

197
00:09:35,970 --> 00:09:38,330
Aquí está outro aberto
soporte de ángulo e cabeza.

198
00:09:38,330 --> 00:09:41,560
>> Aquí está, se desprace
e para abaixo e para abaixo, eu son

199
00:09:41,560 --> 00:09:43,820
indo a ir adiante e tratar
para buscar algo.

200
00:09:43,820 --> 00:09:48,510
Hai camiño á dereita
aquí é o órgano de apoio aberto.

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

202
00:09:50,800 --> 00:09:53,364
que a páxina web máis simple
que un ser humano pode escribir

203
00:09:53,364 --> 00:09:55,030
pode parecer un pouco algo así.

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

205
00:09:58,430 --> 00:10:03,230
entón o título pechado, cabeza pechada, aberta
tag corpo, texto, corpo pechado,

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

207
00:10:04,720 --> 00:10:06,290
>> Pero unha pausa aquí por un momento.

208
00:10:06,290 --> 00:10:09,030
Este código, mesmo se ten
nunca escribiu que antes

209
00:10:09,030 --> 00:10:11,864
pero aínda non entendo moi ben
o que está pasando, parece moi bo.

210
00:10:11,864 --> 00:10:12,821
Correcto, é moi limpo.

211
00:10:12,821 --> 00:10:14,120
É moi estilisticamente agradable.

212
00:10:14,120 --> 00:10:16,190
Unha morea de recuar e espazo en branco.

213
00:10:16,190 --> 00:10:18,020
Facebook é non é.

214
00:10:18,020 --> 00:10:23,190
Entón, por que é tan Facebook
peor que eu en escribir HTML?

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

216
00:10:24,310 --> 00:10:26,899
>> Correcto, iso é como un
fóra de cinco para o estilo.

217
00:10:26,899 --> 00:10:29,315
Hai unha razón convincente
para que estes cantos cortados.

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

219
00:10:31,069 --> 00:10:33,860
Todo ben, entón eles non queren
facer máis doado para que poida lelo.

220
00:10:33,860 --> 00:10:36,940
Así, en certo sentido, son
ofuscar-lo, tipo de codificación que

221
00:10:36,940 --> 00:10:40,260
polo menos tan esteticamente
que é máis difícil para Myspace

222
00:10:40,260 --> 00:10:42,705
para ir e iniciar o seu
páxina de inicio eo HTML para el.

223
00:10:42,705 --> 00:10:45,080
Acontece que con programas
con todo, incluíndo o cromo,

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

225
00:10:47,020 --> 00:10:49,420
Por iso, non é ben iso é como a razón.

226
00:10:49,420 --> 00:10:51,290
O que máis podería ser a causa.

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

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

229
00:10:54,680 --> 00:10:55,890
Si, dados os custos de espazo en branco.

230
00:10:55,890 --> 00:10:56,598
Que queres dicir?

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

232
00:11:02,250 --> 00:11:02,979
Si, exactamente.

233
00:11:02,979 --> 00:11:06,020
Se preme a tecla Tab moito ou o
barra de espazo, considerar as implicacións.

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

235
00:11:10,060 --> 00:11:14,560
>> Entón supoño que Mark ou calquera dos devs
estes días chega a barra de espazo só unha vez

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

237
00:11:17,899 --> 00:11:19,690
E o Facebook ten unha morea
de usuarios nos días de hoxe.

238
00:11:19,690 --> 00:11:24,030
Entón, supoña que a páxina de Facebook
é visitado por mil millóns de persoas hoxe.

239
00:11:24,030 --> 00:11:27,020
E alguén en Facebook ten
preme a barra de espazo só unha vez.

240
00:11:27,020 --> 00:11:29,890
>> Entón, un byte adicional,
mil millóns de solicitudes,

241
00:11:29,890 --> 00:11:32,790
canto máis datos son Facebook
a transferencia a través de internet

242
00:11:32,790 --> 00:11:37,160
porque alguén bateu o
barra de espazo no teclado?

243
00:11:37,160 --> 00:11:41,660
Mil millóns de bytes, ou un gigabyte de
os datos están sendo enviados desde servidores de Facebook

244
00:11:41,660 --> 00:11:43,626
para persoas en todo o
mundo sen unha boa razón.

245
00:11:43,626 --> 00:11:44,750
Agora, iso é só un espazo.

246
00:11:44,750 --> 00:11:48,866
>> Imaxina se realmente limpar este
cousa e recuado el e engadiu

247
00:11:48,866 --> 00:11:50,990
unha morea de espazo en branco e
caracteres de tabulación e espazos,

248
00:11:50,990 --> 00:11:53,656
Acaba gastando gigabytes,
se non terra bytes máis espazo.

249
00:11:53,656 --> 00:11:56,640
E tan super común no
mundo real de desenvolvemento 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 imos finalmente ver
como pode facelo.

252
00:12:01,280 --> 00:12:04,630
>> Pero hoxe, imos comezar a escribir código
que é realmente lido por nós seres humanos.

253
00:12:04,630 --> 00:12:10,120
Acontece, porén, se volver
a esta ferramenta en Chrome Inspect Element,

254
00:12:10,120 --> 00:12:12,030
anteriormente, estabamos na guía Rede.

255
00:12:12,030 --> 00:12:15,430
Acontece que se vai para o
guía elementos, o que realmente ver

256
00:12:15,430 --> 00:12:19,230
Chrome é moi impreso
versión HTML que mesmo.

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

258
00:12:20,640 --> 00:12:22,472
Por iso, non é páreo para un ordenador.

259
00:12:22,472 --> 00:12:24,430
E agora pode realmente
clic arredor e comezar

260
00:12:24,430 --> 00:12:27,630
para ver a xerarquía que é unha páxina web.

261
00:12:27,630 --> 00:12:28,780
Entón imos realmente facelo.

262
00:12:28,780 --> 00:12:32,120
Eu estou indo a ir adiante e abrir-se en
meu Mac un programa chamado de edición de texto.

263
00:12:32,120 --> 00:12:35,490
E lembrar que este é só
un programa super texto simple.

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

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

266
00:12:39,820 --> 00:12:44,650
Doc tipo HTML, soporte aberto
HTML, pechou soporte HTML,

267
00:12:44,650 --> 00:12:49,000
temos a cabeza da páxina aquí,
fin da cabeceira da páxina aquí,

268
00:12:49,000 --> 00:12:52,310
un título como, Ola mundo.

269
00:12:52,310 --> 00:12:56,660
>> E, a continuación, para abaixo aquí, cómpre
o corpo da páxina web.

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

271
00:12:58,050 --> 00:13:00,700
E, a continuación, aquí, Ola mundo.

272
00:13:00,700 --> 00:13:01,270
Todo ben.

273
00:13:01,270 --> 00:13:03,350
Entón escribimos unha páxina web super rápido.

274
00:13:03,350 --> 00:13:06,675
Vou gardalo como
hello.html no meu escritorio.

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

276
00:13:09,050 --> 00:13:11,091
este é un ficheiro de texto, facer
quere chamalo .txt?

277
00:13:11,091 --> 00:13:13,300
Pero non, quero usar HTML punto.

278
00:13:13,300 --> 00:13:16,140
>> E entón o que é bo se eu
basta con premer dúas veces neste ficheiro,

279
00:13:16,140 --> 00:13:18,600
hello.html, aquí vai a miña páxina web.

280
00:13:18,600 --> 00:13:22,564
Desafortunadamente, eu son o
única persoa no mundo

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

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

283
00:13:26,734 --> 00:13:27,650
É o meu Mac, non?

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

285
00:13:28,470 --> 00:13:30,390
Como ninguén nesta sala
moito menos en internet

286
00:13:30,390 --> 00:13:31,598
realmente visitar esta páxina.

287
00:13:31,598 --> 00:13:33,820
Entón, hoxe, necesitamos
introducir outro elemento.

288
00:13:33,820 --> 00:13:36,720
>> E para facelo, eu vou
dalle abrir cloud 9.

289
00:13:36,720 --> 00:13:40,090
Entón cloud 9 é, por suposto, un
nube serviço-- baseado CS50

290
00:13:40,090 --> 00:13:44,890
IDE-- Isto ten todos os nosos espazos de traballo
correndo en algún lugar en internet.

291
00:13:44,890 --> 00:13:48,330
E isto significa que todos os ficheiros
son accesibles ao público xa.

292
00:13:48,330 --> 00:13:49,830
Entón, imos seguir adiante e facelo.

293
00:13:49,830 --> 00:13:53,670
Eu estou indo a ir adiante e
crear un novo ficheiro NCS50IDE.

294
00:13:53,670 --> 00:13:58,819
Vou gardalo como antes
como hello.html e prema Gardar.

295
00:13:58,819 --> 00:14:01,860
E agora só para aforrar tempo, eu vou
para ir adiante e copiar e pegar este código

296
00:14:01,860 --> 00:14:03,470
no canto de escriba-lo de novo.

297
00:14:03,470 --> 00:14:04,550
E salvalo.

298
00:14:04,550 --> 00:14:07,550
E entón agora eu teño un
ficheiro chamado hello.html.

299
00:14:07,550 --> 00:14:09,710
Pero como é que realmente
abrilo como unha páxina web?

300
00:14:09,710 --> 00:14:14,120
Ben, resulta que o construído en para CS50
IDE non só é un compilador como clang

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

302
00:14:16,670 --> 00:14:21,140
hai realmente unha pleno dereito
servidor web rodando dentro CS50 IDE.

303
00:14:21,140 --> 00:14:23,900
>> Todos vostedes, é dicir,
ter o seu propio servidor web.

304
00:14:23,900 --> 00:14:26,850
E un servidor web é só unha peza
de software cuxo propósito na vida

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

306
00:14:28,220 --> 00:14:32,490
Para escoitar as peticións de navegadores e
responder con pequenos sobres virtuais

307
00:14:32,490 --> 00:14:35,290
dentro do cal é a
contido que escribín.

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

309
00:14:38,372 --> 00:14:40,830
Onde código aberto significa só
software que alguén ten

310
00:14:40,830 --> 00:14:43,480
escrito que todos podemos
realmente ver e descargar e mesmo

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

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

313
00:14:46,150 --> 00:14:51,450
>> E nós fixemos un pouco máis fácil
usar en CS50IDE chamándoo 50 Apache.

314
00:14:51,450 --> 00:14:53,780
Para que poida realmente
comprender o seguinte.

315
00:14:53,780 --> 00:14:56,560
Eu vou dicir Apache 50 principio.

316
00:14:56,560 --> 00:14:58,910
E entón eu só vou dicir punto.

317
00:14:58,910 --> 00:15:01,080
E vemos algúns un pouco
mensaxe dicindo arcano

318
00:15:01,080 --> 00:15:04,640
configuración de Apache documento [? grupo?]
a casa, ubuntu, calquera que sexa,

319
00:15:04,640 --> 00:15:05,770
barra de espazo de traballo.

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

321
00:15:08,280 --> 00:15:11,330
>> Entón, longa historia curta, I
ter só apertou un botón

322
00:15:11,330 --> 00:15:18,000
e virou-se en un servidor web que é agora
escoitando en internet na porta TCP

323
00:15:18,000 --> 00:15:20,587
80 nun enderezo específico.

324
00:15:20,587 --> 00:15:22,420
E el di aquí, e
iso vai cambiar en base

325
00:15:22,420 --> 00:15:26,550
no seu nome de usuario e outros factores,
pero agora entender se eu premer isto,

326
00:15:26,550 --> 00:15:30,211
IDE50 dot jharvard e así e
por iso, entender que todo este tempo

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

328
00:15:31,960 --> 00:15:35,200
reparou que o seu propio nome de usuario
incorpórase no lado superior dereito

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

330
00:15:37,130 --> 00:15:41,050
>> E iso, en realidade, foi todo isto
cronometrar a dirección en que pode

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

332
00:15:43,574 --> 00:15:45,990
Ata agora, non importaba,
porque en C, normalmente

333
00:15:45,990 --> 00:15:48,073
queren que as cousas funcionan nun
terminal, non na web.

334
00:15:48,073 --> 00:15:50,800
Pero hoxe, comezamos
escribir código baseado na web

335
00:15:50,800 --> 00:15:53,350
que queremos
accesible en URLs públicas.

336
00:15:53,350 --> 00:15:56,100
Entón o que eu vou
facer é premer nese URL.

337
00:15:56,100 --> 00:16:00,880
>> E teña en conta que eu vexo un moi
índice feo, unha listaxe de directorio,

338
00:16:00,880 --> 00:16:04,090
pero o arquivo salta en ti probablemente?

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

340
00:16:05,210 --> 00:16:07,870
Isto é porque eu salvei
o ficheiro na miña zona de traballo.

341
00:16:07,870 --> 00:16:12,310
E o que eu dixen a Apache servidor web
é ollar no directorio do espazo de traballo de David.

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

343
00:16:15,300 --> 00:16:19,050
>> E, de feito, se eu agora
prema o hello.html,

344
00:16:19,050 --> 00:16:22,180
Vexo dentro desta guía exactamente ese ficheiro.

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

346
00:16:26,430 --> 00:16:29,480
Dentro CS50 IDE, teña en conta que hai
de súpeto, unha barra de enderezos.

347
00:16:29,480 --> 00:16:33,690
Porque aínda que esteamos
usando Chrome para visitar CS50IDE,

348
00:16:33,690 --> 00:16:37,940
dentro CS50IDE é a súa propia
versión dun navegador web agora.

349
00:16:37,940 --> 00:16:40,820
E así, en vez de
complicar as cousas, como tal,

350
00:16:40,820 --> 00:16:42,955
Eu estou indo a ir adiante
e só copiar este URL.

351
00:16:42,955 --> 00:16:45,330
Eu estou indo a ir adiante e só
abrir a miña propia fiestra Chrome.

352
00:16:45,330 --> 00:16:47,800
Non hai ningunha máxica aquí, non CS50IDE.

353
00:16:47,800 --> 00:16:51,800
Eu só vou para pegar literalmente
Harvard miña URL e J prema Intro.

354
00:16:51,800 --> 00:16:54,750
E listo, agora e
en teoría, todo

355
00:16:54,750 --> 00:16:57,700
en internet, se eu tivera configurado
Permisos de forma adecuada,

356
00:16:57,700 --> 00:16:58,720
podes visitar este ficheiro.

357
00:16:58,720 --> 00:17:03,230
E agora, se eu dixo
hello.html, listo, hai

358
00:17:03,230 --> 00:17:06,366
é a miña páxina web incrible decepcionante.

359
00:17:06,366 --> 00:17:07,740
Entón imos facer unha comprobación de sanidade rápida.

360
00:17:07,740 --> 00:17:09,710
Por mor de todo isto
é conceptual set up.

361
00:17:09,710 --> 00:17:13,180
E nós realmente non teño realmente
vostede ensinou como escribir HTML per se.

362
00:17:13,180 --> 00:17:16,084
Calquera preguntas ata agora
sobre o que está pasou?

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

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

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

366
00:17:24,290 --> 00:17:25,800
O CS50 posúe estas páxinas web?

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

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

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

370
00:17:29,530 --> 00:17:32,429
Entón CS50 é propietaria CS50.io.

371
00:17:32,429 --> 00:17:33,970
Temos de feito comprou o nome de dominio.

372
00:17:33,970 --> 00:17:37,240
E pola natureza de vós
rexistrando en CS50IDE,

373
00:17:37,240 --> 00:17:39,270
obter todo o que se chama un subdominio.

374
00:17:39,270 --> 00:17:46,840
>> Entón IDE50-Malan, ou IDE50-Rob.CS50.io,
ese é o seu enderezo único dentro

375
00:17:46,840 --> 00:17:47,730
o noso nome de dominio.

376
00:17:47,730 --> 00:17:50,850
Así, para os fins de curso,
ten o seu propio enderezo único.

377
00:17:50,850 --> 00:17:55,150
Pero nós simplificamos as cousas por
mercar o dominio de nivel superior, CS50 dot

378
00:17:55,150 --> 00:17:58,050
E / e, a continuación, todo o mundo é
dentro de que, por así dicir.

379
00:17:58,050 --> 00:17:59,890
E nós imos voltar a iso
en un par de semanas, probablemente,

380
00:17:59,890 --> 00:18:01,930
especialmente no proxecto final
tempo, cando algúns de vostedes

381
00:18:01,930 --> 00:18:03,596
Pode querer obter os seus propios nomes de dominio.

382
00:18:03,596 --> 00:18:06,270
En realidade, é relativamente
simple.

383
00:18:06,270 --> 00:18:06,770
Todo ben.

384
00:18:06,770 --> 00:18:07,880
Entón, imos agora facelo.

385
00:18:07,880 --> 00:18:11,910
Vou volver
CS50IDE, onde meu arquivo agora,

386
00:18:11,910 --> 00:18:14,710
hello.html, non é tan interesante.

387
00:18:14,710 --> 00:18:17,130
Gustaríame facer algo
un pouco mellor do que iso.

388
00:18:17,130 --> 00:18:19,440
Entón, eu vou facer algo coma isto.

389
00:18:19,440 --> 00:18:21,510
Déixeme paragraphs.html aberto.

390
00:18:21,510 --> 00:18:23,560
Polo tanto, este é un ficheiro que escribín con antelación.

391
00:18:23,560 --> 00:18:26,480
Na parte superior de que, como
sempre temos comentarios.

392
00:18:26,480 --> 00:18:28,730
Pero, en HTML, comentarios
mirar un pouco diferente.

393
00:18:28,730 --> 00:18:33,270
Na liña de tres e liña 14, que
vexa a sintaxe para iniciar un comentario

394
00:18:33,270 --> 00:18:34,020
e acabar con un comentario.

395
00:18:34,020 --> 00:18:36,820
>> Pero ningunha das cousas en
entre as cuestións funcionalmente.

396
00:18:36,820 --> 00:18:40,250
É só unha nota a un
humano que está pasando aquí.

397
00:18:40,250 --> 00:18:43,040
E así como a sanidade rápida
comprobar, se eu rolar para abaixo,

398
00:18:43,040 --> 00:18:46,820
o que é o novo obvia
tag que introducimos?

399
00:18:46,820 --> 00:18:52,130
As etiquetas, de momento, vimos son abertos
soporte HTML, cabeza, título, e corpo.

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

401
00:18:54,400 --> 00:18:55,200
>> Si, entón p.

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

403
00:18:57,320 --> 00:19:01,182
E entón eu só prestado algún defecto
Texto en latín para constituír meus parágrafos.

404
00:19:01,182 --> 00:19:03,390
Porque o que eu quería
demostrar é o xeito no que pode

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

406
00:19:05,859 --> 00:19:08,400
E entón o que está empezando a pasar
aquí é que xa existe

407
00:19:08,400 --> 00:19:09,657
un nivel de desenvolvemento.

408
00:19:09,657 --> 00:19:10,990
E deixe-me ir adiante e facelo.

409
00:19:10,990 --> 00:19:12,760
Déixeme primeiro desactive Apache.

410
00:19:12,760 --> 00:19:17,340
E eu vou dicir a el para comezar a si mesmo
novo dentro de fonte de hoxe sete

411
00:19:17,340 --> 00:19:18,420
m directorio.

412
00:19:18,420 --> 00:19:20,100
Así que eu teño acceso a todo.

413
00:19:20,100 --> 00:19:22,230
>> E agora, se eu volver
esta listaxe de directorio,

414
00:19:22,230 --> 00:19:24,846
notar que vexo todos os ficheiros a partir de hoxe.

415
00:19:24,846 --> 00:19:26,720
E vai ver no
xogo seguinte problema, imos

416
00:19:26,720 --> 00:19:28,594
darlle instrucións
para facer exactamente isto.

417
00:19:28,594 --> 00:19:35,210
Se eu abrir paragraphs.html, isto pode
ben coma unha linguaxe de programación

418
00:19:35,210 --> 00:19:36,970
para ti, se non falar ou ler en latín.

419
00:19:36,970 --> 00:19:40,525
Pero esta é só tres parágrafos
de texto que son marcados en HTML.

420
00:19:40,525 --> 00:19:43,100
>> E teña en conta o parágrafo
pausas entre eles.

421
00:19:43,100 --> 00:19:46,400
Porque xira para fóra,
e aínda que

422
00:19:46,400 --> 00:19:49,210
pode estar inclinado a facer iso,
Tendo en conta que, no mundo real,

423
00:19:49,210 --> 00:19:51,370
se quere poñer liña
pausas entre as cousas,

424
00:19:51,370 --> 00:19:55,680
pode simplemente
facelo e bateu Gardar.

425
00:19:55,680 --> 00:19:59,460
E agora, se eu volver cargar aquí, aviso
que todo só borra xuntos

426
00:19:59,460 --> 00:20:01,100
en só unha burbulla de texto.

427
00:20:01,100 --> 00:20:03,570
Como o HTML é unha especie de linguaxe mudo.

428
00:20:03,570 --> 00:20:07,230
>> Foi creado para ser usado en tales
dun xeito que o navegador só

429
00:20:07,230 --> 00:20:09,920
facer explicitamente o que diga a el para facer.

430
00:20:09,920 --> 00:20:12,890
Polo tanto, se non dicilo
déame un novo parágrafo

431
00:20:12,890 --> 00:20:14,569
non vai ver un novo parágrafo.

432
00:20:14,569 --> 00:20:16,360
E, de feito, o que a
navegador fará

433
00:20:16,360 --> 00:20:20,020
o é que prema Intro,
digamos que unha e outra vez

434
00:20:20,020 --> 00:20:23,190
e de novo, movendo-se deste xeito texto
abaixo na pantalla e, a continuación, gardar

435
00:20:23,190 --> 00:20:26,610
e, a continuación, actualizar, o navegador vai
a desmoronar todo este espazo baleiro

436
00:20:26,610 --> 00:20:29,021
en só un único espazo en branco, visible.

437
00:20:29,021 --> 00:20:29,520
Todo ben.

438
00:20:29,520 --> 00:20:30,869
Entón esa é a marca de parágrafo.

439
00:20:30,869 --> 00:20:32,910
E entón cal é o estándar
que está a desenvolver aquí?

440
00:20:32,910 --> 00:20:37,450
Ben, parece ser o caso de que
HTML é todo sobre como iniciar un tag

441
00:20:37,450 --> 00:20:38,460
e rematando a etiqueta.

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

443
00:20:39,300 --> 00:20:41,160
Ben, é só unha peza de sintaxe.

444
00:20:41,160 --> 00:20:44,400
Abrir soporte, unha palabra clave,
soporte pechado, é unha etiqueta.

445
00:20:44,400 --> 00:20:45,510
Ou comezar tag.

446
00:20:45,510 --> 00:20:48,590
E entón cando está
feito expresarse,

447
00:20:48,590 --> 00:20:52,300
como no que fixo o parágrafo
fai así dicir contrario.

448
00:20:52,300 --> 00:20:55,480
Pero o contrario non é moi cara atrás.

449
00:20:55,480 --> 00:21:00,630
>> Simplemente prefixar a mesma marca de
nomear cunha barra coma este.

450
00:21:00,630 --> 00:21:01,130
Todo ben.

451
00:21:01,130 --> 00:21:02,570
Entón, non todo o que emocionante.

452
00:21:02,570 --> 00:21:05,270
E, de feito, non estamos facendo o
web todo o que máis interesante.

453
00:21:05,270 --> 00:21:07,630
E se eu queira facer
cousas maiores e ousada?

454
00:21:07,630 --> 00:21:11,780
Así, verifícase que aquí está un exemplo
en headings.html, onde no meu corpo,

455
00:21:11,780 --> 00:21:17,280
Eu teño unha etiqueta H1, H2, H3,
catro, cinco ou seis, os cales

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

457
00:21:18,310 --> 00:21:21,010
Pero se eu for abrir este
exemplo, imos dar un ollo.

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

459
00:21:22,490 --> 00:21:27,030
>> Entón navegadores por defecto pode darlle texto
que é grande e valente de tamaños diferentes.

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

461
00:21:28,070 --> 00:21:31,240
H6 é menor e, a continuación
todo o máis no medio.

462
00:21:31,240 --> 00:21:34,170
Entón, iso é interesante, pero aínda
non é realmente a web sei.

463
00:21:34,170 --> 00:21:36,870
E se queremos que teño
algo así como unha lista. .

464
00:21:36,870 --> 00:21:40,190
Entón aquí está unha lista con viñetas de
tres dos cuartos de Harvard.

465
00:21:40,190 --> 00:21:41,600
>> Como vai facer sobre iso?

466
00:21:41,600 --> 00:21:45,410
Ben, bótalle un ollo list.html.

467
00:21:45,410 --> 00:21:47,870
E aquí vemos unha
pouco de funkiness

468
00:21:47,870 --> 00:21:49,630
pero imos considerar o que está pasando.

469
00:21:49,630 --> 00:21:56,182
Así, segundo o que acaba de ver,
UL significa lista desordenada.

470
00:21:56,182 --> 00:21:57,640
Lista desordenada significa só marcadores.

471
00:21:57,640 --> 00:21:58,431
Non hai números.

472
00:21:58,431 --> 00:22:01,850
Hai tamén unha cousa chamada
lista, que é un OL na etiqueta ordenada.

473
00:22:01,850 --> 00:22:05,350
Logo LI, elemento da lista é todo o que iso significa.

474
00:22:05,350 --> 00:22:07,790
>> E así automaticamente
números de todo para ti.

475
00:22:07,790 --> 00:22:11,270
Pero, de novo, todo o meu recuar
e espazo en branco é só por min.

476
00:22:11,270 --> 00:22:13,050
O seu navegador non é
realmente vai importar.

477
00:22:13,050 --> 00:22:16,670
Así, aínda que non podía
facelo, só para quedar claro,

478
00:22:16,670 --> 00:22:19,880
Non debe mesmo aínda
O navegador aínda

479
00:22:19,880 --> 00:22:22,130
poder comprende-lo moi ben.

480
00:22:22,130 --> 00:22:24,590
Estou batendo na miña recarga
navegador, estou facendo clic recarga

481
00:22:24,590 --> 00:22:26,760
e ningún cambio está a suceder
porque o seu navegador aínda

482
00:22:26,760 --> 00:22:29,550
facendo exactamente o que eu diga a el para facer.

483
00:22:29,550 --> 00:22:30,050
>> Todo ben.

484
00:22:30,050 --> 00:22:31,340
Entón, todo isto non é máis que texto.

485
00:22:31,340 --> 00:22:33,730
Agora imos facer algo máis interesante.

486
00:22:33,730 --> 00:22:36,660
Eu estou indo a ir adiante e
prestar algún deste HTML.

487
00:22:36,660 --> 00:22:40,910
Eu estou indo a ir adiante e
crear un novo ficheiro aquí.

488
00:22:40,910 --> 00:22:43,370
E nós imos 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 un rolo Rick neste
clase este ano, eu non sei,

492
00:22:51,290 --> 00:22:53,880
só sucedeu organismos.

493
00:22:53,880 --> 00:22:55,397
>> E agora ten fóra de control.

494
00:22:55,397 --> 00:22:56,730
Entón, eu estou indo só para ir con el.

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

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

497
00:23:02,450 --> 00:23:06,170
Se non sabe por que facemos
iso, só tes que ler sobre Wikipedia.

498
00:23:06,170 --> 00:23:11,520
Cada vez que fai clic no enlace,
Alguén está rindo en algún lugar.

499
00:23:11,520 --> 00:23:14,860
E deixe-me ir alí ahead--
imos, imos ver esta imaxe.

500
00:23:14,860 --> 00:23:16,750
>> Polo tanto, temos aquí un
imaxe en Imaxes de Google.

501
00:23:16,750 --> 00:23:19,390
E imos supor que este é
razoablemente en todas partes en Internet.

502
00:23:19,390 --> 00:23:22,570
Entón, eu vou asumir que é OK para min
para realmente poñer isto na miña páxina web.

503
00:23:22,570 --> 00:23:24,820
Eu estou indo a ir adiante
e copiar URL da imaxe.

504
00:23:24,820 --> 00:23:28,600
E agora, se eu volver a Nube
9, imos ver o que podo facer aquí.

505
00:23:28,600 --> 00:23:30,630
Entón aquí é só unha páxina web.

506
00:23:30,630 --> 00:23:39,020
Este é Rick Astley, haha,
Vou agora volver

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

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

509
00:23:44,530 --> 00:23:46,050
Entón deixe-me ver o que pasou.

510
00:23:46,050 --> 00:23:49,114
En realidade, eu vou
finxir que eu non fixen iso.

511
00:23:49,114 --> 00:23:50,280
[Inaudível] poñelas aquí.

512
00:23:50,280 --> 00:23:52,520
Nós imos voltar a iso nun momento.

513
00:23:52,520 --> 00:23:54,200
Entón aquí está rick.html.

514
00:23:54,200 --> 00:23:56,070
Entón iso non é Rick Astley.

515
00:23:56,070 --> 00:23:59,680
Entón non é que podemos
realmente engadir el aquí.

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

517
00:24:00,830 --> 00:24:06,680
Vou dicir-me dar unha imaxe cuxo
fonte é a URL só copiados, o que

518
00:24:06,680 --> 00:24:09,110
aparentemente é un feliz
aniversario unha cousa ou outra.

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

520
00:24:13,280 --> 00:24:15,170
Entón, iso é rompe super longa.

521
00:24:15,170 --> 00:24:17,740
Pero teña en conta que todo o que eu teño
feito imaxe soporte está aberto,

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

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

524
00:24:21,530 --> 00:24:23,720
E ao final, entender iso.

525
00:24:23,720 --> 00:24:29,530
Barra Por que foi que eu fixen soporte angular
no canto de, como calquera outra etiqueta,

526
00:24:29,530 --> 00:24:33,590
tendo un soporte aberto,
IMG, soporte pechado?

527
00:24:33,590 --> 00:24:37,040
Só un palpite, aínda que
non teñen ningunha familiaridade

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

529
00:24:40,410 --> 00:24:42,710
>> Así é como se pecha
a orde, senón porque

530
00:24:42,710 --> 00:24:45,850
non realmente facer intuitiva
sentido facer algo un pouco máis

531
00:24:45,850 --> 00:24:48,820
verbose preto imaxe como?

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

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

534
00:24:52,000 --> 00:24:55,620
Só semanticamente, non hai ningún sentido de
a partir dunha imaxe e rematando unha imaxe,

535
00:24:55,620 --> 00:24:56,870
é alí ou non é.

536
00:24:56,870 --> 00:25:00,960
Polo tanto, non ten sentido deixar un oco
para calquera outra cousa dentro dunha imaxe.

537
00:25:00,960 --> 00:25:02,010
Vostede simplemente non pode facelo.

538
00:25:02,010 --> 00:25:03,720
E así a sintaxe
xeralmente sería só

539
00:25:03,720 --> 00:25:07,910
para facer a barra no interior
da etiqueta de apertura ou a marca de comezo

540
00:25:07,910 --> 00:25:09,020
e a continuación, bateu en Gardar.

541
00:25:09,020 --> 00:25:13,350
>> Entón, se eu agora recargar esta imaxe, agora
Eu teño unha boa páxina web cociñar aquí.

542
00:25:13,350 --> 00:25:15,100
E nós certamente podería
realmente irritar as persoas

543
00:25:15,100 --> 00:25:17,010
por incorporación no canto
como unha ligazón de YouTube.

544
00:25:17,010 --> 00:25:19,350
E, de feito, en calquera momento
xa pasou a YouTube,

545
00:25:19,350 --> 00:25:22,190
e deixoume realmente accidentalmente
Rick roll-me aquí.

546
00:25:22,190 --> 00:25:25,770
Entón Rick roll.

547
00:25:25,770 --> 00:25:29,592
Entón rick roll-- Eu estou indo a ir aquí.

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

549
00:25:31,900 --> 00:25:33,730
>> OK, unha persoa que lle gustaba.

550
00:25:33,730 --> 00:25:37,270
Entón, observe todo este tempo, se
prema na ligazón Compartir, ten naturalmente

551
00:25:37,270 --> 00:25:41,390
obter a URL que realmente pode
incorporar nun correo electrónico ou nunha imaxe forense

552
00:25:41,390 --> 00:25:43,730
ou nun conxunto de problemas ou nunha corredías.

553
00:25:43,730 --> 00:25:49,055
E agora, se eu premer en vez de incorporación,
notar que todo este tempo, este material

554
00:25:49,055 --> 00:25:49,680
foi alí.

555
00:25:49,680 --> 00:25:50,910
Eu estou indo a ir adiante e copiar este.

556
00:25:50,910 --> 00:25:54,000
>> E só así podemos velo mellor, eu son
indo pegalo no meu editor de textos.

557
00:25:54,000 --> 00:25:55,860
Teña en conta que isto que
YouTube está a dicir.

558
00:25:55,860 --> 00:25:57,693
Cada vez que visitar un
Vídeo de YouTube, se

559
00:25:57,693 --> 00:26:00,410
quere incorporar o vídeo no seu
A páxina web, coller iso.

560
00:26:00,410 --> 00:26:03,350
Polo tanto, este é un
Tag HTML chamado un iframe.

561
00:26:03,350 --> 00:26:04,590
Ou un en liña cadro.

562
00:26:04,590 --> 00:26:08,680
Por iso, tamén parece un pouco máis
complexo do que todos os outros.

563
00:26:08,680 --> 00:26:11,950
Así, verifícase que a imaxe
tag e, ao parecer, a etiqueta iframe

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

565
00:26:13,370 --> 00:26:15,710
>> E este é outro
peza de sintaxe en HTML.

566
00:26:15,710 --> 00:26:19,240
En adición á reserva de
nome, nome da marca do soporte aberto,

567
00:26:19,240 --> 00:26:23,780
é posible controlar o comportamento da etiqueta
por ter unha morea 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 así, por exemplo,
YouTube está nos dicindo

571
00:26:28,100 --> 00:26:31,990
se quere o ancho deste vídeo
ser de 420 píxeles ea altura

572
00:26:31,990 --> 00:26:35,470
para ser 315 píxeles, que é
como expresalo en 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, a continuación, algunhas outras cousas
como marco de fronteira é cero,

575
00:26:40,830 --> 00:26:43,500
de xeito que probablemente significa que hai
ningunha bordo ao redor da cousa.

576
00:26:43,500 --> 00:26:45,450
Permitir pantalla enteira, probablemente,
significa que o usuario

577
00:26:45,450 --> 00:26:47,840
pode premer no botón e
realmente de pantalla completa do vídeo.

578
00:26:47,840 --> 00:26:52,870
Entón, se eu realmente quero ser
impresionante aquí en Rick dot HTML,

579
00:26:52,870 --> 00:26:58,490
en vez de usar a etiqueta de imaxe, deixe-
me eliminar que, no canto pega este.

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

581
00:27:00,810 --> 00:27:02,500
E agora aquí imos nós de novo.

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

583
00:27:04,979 --> 00:27:06,020
Todo ben, iso é o suficiente.

584
00:27:06,020 --> 00:27:08,970
Todo ben, entón eu vou tentar
difícil non facelo de novo.

585
00:27:08,970 --> 00:27:11,400
Entón, cales son algúns dos temas aquí?

586
00:27:11,400 --> 00:27:15,130
Entón, HTML, tan feo como estas páxinas web
son, en realidade é moi sinxelo.

587
00:27:15,130 --> 00:27:16,467
Non é unha linguaxe de programación.

588
00:27:16,467 --> 00:27:17,550
Non ten funcións.

589
00:27:17,550 --> 00:27:18,410
Non ten tirantes.

590
00:27:18,410 --> 00:27:19,535
Non ten condicións.

591
00:27:19,535 --> 00:27:22,900
Todo o que ten é decenas de
diferentes etiquetas, cada unha das cales

592
00:27:22,900 --> 00:27:24,620
ten cero ou máis atributos.

593
00:27:24,620 --> 00:27:27,320
E, de feito, o que é divertido sobre
HTML que comeza a mergullo

594
00:27:27,320 --> 00:27:29,560
é que é auto aprendizaxe moito.

595
00:27:29,560 --> 00:27:32,880
>> Só é preciso un entendemento
do cadro xeral da HTML.

596
00:27:32,880 --> 00:27:36,510
¿Que é unha etiqueta, o que é un atributo,
como realmente configurar unha páxina web

597
00:27:36,510 --> 00:27:37,250
deste xeito.

598
00:27:37,250 --> 00:27:40,720
E todo o demais é realmente o resultado
de mirar para arriba nunha referencia en liña

599
00:27:40,720 --> 00:27:43,080
ou buscando como facer algunhas
técnica ou, como vimos,

600
00:27:43,080 --> 00:27:45,371
mirando na fonte de Facebook
código, mirando para un sitio

601
00:27:45,371 --> 00:27:48,710
que lle gusta no seu código fonte e
a comprensión de como os desenvolvedores alí

602
00:27:48,710 --> 00:27:50,550
realmente puxo as cousas.

603
00:27:50,550 --> 00:27:52,180
>> Entón o que podemos facer imaxes tamén.

604
00:27:52,180 --> 00:27:53,994
E, de feito, nós fixémolo dun momento atrás.

605
00:27:53,994 --> 00:27:55,410
Deixe-me ir adiante e só amosar-lle.

606
00:27:55,410 --> 00:27:56,770
Aquí está o código de exemplo.

607
00:27:56,770 --> 00:27:58,380
Se queres ver gato mal humor.

608
00:27:58,380 --> 00:28:00,620
Entón, teña en conta que podo
ter unha etiqueta de imaxe aquí.

609
00:28:00,620 --> 00:28:02,090
E eu teño un comentario anterior.

610
00:28:02,090 --> 00:28:04,490
Eu teño unha alternativa
texto para a accesibilidade.

611
00:28:04,490 --> 00:28:07,250
Entón, alguén que está a usar unha pantalla
lector, por razóns de vista

612
00:28:07,250 --> 00:28:10,172
a continuación, pode realmente ter o seu
NVDA dicir gato mal humor.

613
00:28:10,172 --> 00:28:11,880
Porque se eles non poden
ver a imaxe, eles

614
00:28:11,880 --> 00:28:14,504
pode, polo menos, teñen o seu ordenador
dicirlles verbalmente o que é.

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

616
00:28:18,020 --> 00:28:22,472
Entón, en realidade, se realmente quería
obter intelixente, o que eu podería ter done--

617
00:28:22,472 --> 00:28:25,680
Eu prometer non ir Rick Astley, para
Eu estou indo a Google para un gato no seu lugar.

618
00:28:25,680 --> 00:28:28,290
E se eu for a Google Images
aquí, e nós imos asumir

619
00:28:28,290 --> 00:28:30,040
que esta é unha imaxe do meu gato.

620
00:28:30,040 --> 00:28:35,070
>> Supoña que teño control premendo
ou á dereita clic sobre este, accidentalmente

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

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

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

624
00:28:44,700 --> 00:28:48,150
Lembre que aquí, podo
ir subir arquivos locais.

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

626
00:28:51,530 --> 00:28:54,674
que eu poida arrastralo lo e
soltalo en cloud 9

627
00:28:54,674 --> 00:28:56,090
e vai berrar comigo aquí.

628
00:28:56,090 --> 00:28:59,000
>> Porque xa
recibe un ficheiro cat.jpeg,

629
00:28:59,000 --> 00:29:01,430
pero é super doado de
coller unha foto que ten

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

631
00:29:03,220 --> 00:29:05,678
e, de feito, arrastre e solte-o
en cloud 9 e, a continuación, facelo

632
00:29:05,678 --> 00:29:07,970
parte do seu propio persoal
web ou problema

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

634
00:29:10,442 --> 00:29:12,150
E entón cando
finalmente visitar aquel gato,

635
00:29:12,150 --> 00:29:16,610
supoñendo que eu baixei ese mesmo gato,
aviso isso-- que era encantador.

636
00:29:16,610 --> 00:29:19,160
>> O que ves é
algo así como este cara aquí.

637
00:29:19,160 --> 00:29:21,810
Entón os ficheiros que
referencia dentro dunha páxina web

638
00:29:21,810 --> 00:29:26,050
poden ser locais no seu propio
conta ou remoto nalgún outro servidor

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

640
00:29:29,670 --> 00:29:32,990
Entón, onde o que else--
máis podemos facer aquí?

641
00:29:32,990 --> 00:29:34,890
Entón imos dar un ollo ao seguinte.

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

643
00:29:36,160 --> 00:29:39,330
>> Temos está a facer ata agora
páxinas web moi estáticos.

644
00:29:39,330 --> 00:29:41,830
Quero apimentado as cousas do seguinte xeito.

645
00:29:41,830 --> 00:29:44,344
Eu quero facer o meu propio buscador.

646
00:29:44,344 --> 00:29:47,010
Entón, para facer un buscador, imos
dalle comezar a facelo.

647
00:29:47,010 --> 00:29:52,570
Eu estou indo a ir adiante e crear
un novo ficheiro chamado search.html.

648
00:29:52,570 --> 00:29:54,890
E nós temos prefabed versións en liña.

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

650
00:29:56,027 --> 00:29:57,610
Non pega na súa fiestra de terminal.

651
00:29:57,610 --> 00:29:58,744
Prefab versións en liña.

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

653
00:30:00,160 --> 00:30:04,490
Entón aquí está o inicio
un arquivo chamado search.html.

654
00:30:04,490 --> 00:30:07,510
Vou gardalo no
directorio de orixe de hoxe.

655
00:30:07,510 --> 00:30:09,079
Vou chamar ese Search.

656
00:30:09,079 --> 00:30:10,370
De feito, imos facelo mellor.

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

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

659
00:30:17,500 --> 00:30:20,930
E, a continuación, para abaixo aquí, H2 pronto.

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
>> Si, tan grande e valente, e
non tan grande, pero aínda negra.

663
00:30:30,320 --> 00:30:37,375
Entón, se eu gardar este e pasar por riba aquí,
imos ver search.html arquivo.

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

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

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

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, está alí.

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

671
00:30:54,860 --> 00:30:55,420
Aceptar.

672
00:30:55,420 --> 00:30:56,660
Entón é iso.

673
00:30:56,660 --> 00:30:58,350
Así, busca CS50 pronto.

674
00:30:58,350 --> 00:31:00,370
Entón, agora, imos sintetizar
o que fixemos a semana pasada.

675
00:31:00,370 --> 00:31:03,400
>> Cando falamos sobre a
mecánica de nivel máis baixo de HTTP.

676
00:31:03,400 --> 00:31:05,780
E esas novas ideas
HTML, que é só

677
00:31:05,780 --> 00:31:08,890
esta linguaxe de reserva, onde
dicir un navegador exactamente o que facer

678
00:31:08,890 --> 00:31:10,740
e aplicar o noso propio buscador.

679
00:31:10,740 --> 00:31:12,520
Entón, en vez de só
dicindo pronto, eu son

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

681
00:31:14,810 --> 00:31:19,610
E deste xeito, eu vou
ter algo como un campo de entrada.

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

683
00:31:22,450 --> 00:31:26,240
E o tipo de campo de entrada
Eu vou dicir non é máis que "texto".

684
00:31:26,240 --> 00:31:29,130
E un campo de texto, como veremos
ver, non é máis que unha caixa de texto.

685
00:31:29,130 --> 00:31:32,830
E por iso non sente aquí para ter
algo dentro del neste momento.

686
00:31:32,830 --> 00:31:35,320
E polo que estou indo simplemente
para pechar a etiqueta que

687
00:31:35,320 --> 00:31:38,099
barra dereita na marca propia.

688
00:31:38,099 --> 00:31:39,890
E entón eu vou
ten 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ón eu vou
pechar un regalo tamén.

691
00:31:45,320 --> 00:31:46,840
>> E agora eu vou volver aquí.

692
00:31:46,840 --> 00:31:49,520
E xa vemos,
aínda que moi feo, eu teño

693
00:31:49,520 --> 00:31:52,460
ten os comezos de
miña propia páxina de busca aquí.

694
00:31:52,460 --> 00:31:55,150
De feito, déixeme probar
limpar iso un pouco.

695
00:31:55,150 --> 00:31:57,330
Acontece que o
entrada aquí, podo ter

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

697
00:31:59,910 --> 00:32:05,165
E eu podería ver algo como palabras clave,
ou, máis especificamente, consulta a q.

698
00:32:05,165 --> 00:32:07,820
>> E teña en conta, agora, eu teño
este tipo de texto gris

699
00:32:07,820 --> 00:32:10,440
que desaparece tan
Así que eu comezar a escribir,

700
00:32:10,440 --> 00:32:12,930
pero pode ser algo
xa viu noutras páxinas web.

701
00:32:12,930 --> 00:32:14,650
Realmente non me gusta do botón Enviar.

702
00:32:14,650 --> 00:32:18,320
Entón, eu estou indo realmente para dar a
Botón enviar un valor de investigación.

703
00:32:18,320 --> 00:32:21,680
E agora, se eu actualizar, teña en conta que
meu botón pasa a ser o nome de busca.

704
00:32:21,680 --> 00:32:24,140
Vostede sabe, eu realmente non
como logotipo aquí.

705
00:32:24,140 --> 00:32:27,140
Entón xerador Google Font.

706
00:32:27,140 --> 00:32:28,820
>> Quero apimentado este aínda máis.

707
00:32:28,820 --> 00:32:30,660
Investigación de xeito CS50.

708
00:32:30,660 --> 00:32:31,870
Déixeme crear o meu propio logotipo.

709
00:32:31,870 --> 00:32:33,080
Isto parece bo.

710
00:32:33,080 --> 00:32:36,945
Entón, agora déixeme gardar esta as-- imos alí.

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
Non.

714
00:32:43,620 --> 00:32:44,160
Aceptar.

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

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

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

718
00:32:49,470 --> 00:32:51,700
Stand by, imos
solucionar isto dunha vez por todas.

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

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

721
00:32:58,590 --> 00:32:59,090
Todo ben.

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

723
00:32:59,600 --> 00:33:00,750
Día de descanso.

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

725
00:33:02,310 --> 00:33:03,160
Saír da pantalla enteira.

726
00:33:03,160 --> 00:33:04,150
Todo ben.

727
00:33:04,150 --> 00:33:06,870
>> Agora, como unha normal,
persoa, gardar imaxe 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 a ir a CS50IDE e
Vou coller o logotipo,

730
00:33:13,194 --> 00:33:15,360
Vou arrastralo ata
meu directorio de orixe sete,

731
00:33:15,360 --> 00:33:17,002
arquivo xa existe, eu estou ben con iso.

732
00:33:17,002 --> 00:33:19,210
Entón, eu estou indo a substitúe-lo
porque eu xa tiña.

733
00:33:19,210 --> 00:33:20,630
E agora como fago para librar diso?

734
00:33:20,630 --> 00:33:24,670
>> Imos adiante aquí e facer
fonte de imaxe é igual a logo.gif.

735
00:33:24,670 --> 00:33:25,490
Peche esa.

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

737
00:33:26,050 --> 00:33:30,560
E agora, se eu volver á miña investigación
páxina, agora está mirando moi bo.

738
00:33:30,560 --> 00:33:33,610
Todo ben, polo que non ten
ben feito nada útil.

739
00:33:33,610 --> 00:33:37,000
De feito, déixeme probar a buscar
para un gato e ver que pasa.

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

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

742
00:33:39,420 --> 00:33:41,400
Non só traballar, aparentemente.

743
00:33:41,400 --> 00:33:43,760
Entón, cal é a peza clave
o que falta aquí?

744
00:33:43,760 --> 00:33:49,100
>> Seguro, mesmo se non sabe nada de HTML,
Comece marcando o formulario de teléfono

745
00:33:49,100 --> 00:33:54,130
e eu dixen a el como obter entradas,
dáme unha caixa de texto e un botón de enviar,

746
00:33:54,130 --> 00:33:55,730
o anaco aparentemente falta?

747
00:33:55,730 --> 00:33:58,975
Supoña que queremos realmente chegar
esta cousa funciona correctamente.

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

749
00:34:02,420 --> 00:34:05,360
O que necesitamos facer?

750
00:34:05,360 --> 00:34:08,860
Temos unha necesidade de aplicar o back-end
base de datos ou o buscador propio,

751
00:34:08,860 --> 00:34:11,210
e que vai levar un
todo moito tempo, a verdade.

752
00:34:11,210 --> 00:34:13,380
>> Entón lembre o que fixemos a última vez.

753
00:34:13,380 --> 00:34:18,230
Entón, se buscar algo en Google
e con antelación desactivado,

754
00:34:18,230 --> 00:34:20,355
recall, procura instantánea.

755
00:34:20,355 --> 00:34:22,230
Entón deixe-me apagar isto
de xeito que este realmente

756
00:34:22,230 --> 00:34:26,650
compórtase como un navegador de escola máis vello,
se eu agora buscar algo como gatos,

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

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

759
00:34:29,449 --> 00:34:33,000
Pero incorporado alí,
recall, é a procura barra.

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

761
00:34:35,100 --> 00:34:37,760
>> E iso paréceme dar-
unha morea de resultados de busca.

762
00:34:37,760 --> 00:34:39,134
Entón vostede sabe o que eu vou facer?

763
00:34:39,134 --> 00:34:41,650
Eu estou indo a prestar
Google por só un minuto.

764
00:34:41,650 --> 00:34:43,670
Vou pasar por riba
aquí e eu vou dicir

765
00:34:43,670 --> 00:34:47,850
que esta forma de acción ou
destino, por así dicir,

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

767
00:34:49,330 --> 00:34:52,590
E o método que eu quería
para uso será chegar.

768
00:34:52,590 --> 00:34:53,560
>> Entón, o que é acción?

769
00:34:53,560 --> 00:34:55,760
A acción é estrañamente nomeado,
pero iso só quere dicir

770
00:34:55,760 --> 00:34:58,120
que está indo a xestionar
a acción desta forma?

771
00:34:58,120 --> 00:35:00,820
Cando prema en Buscar, onde
Se o resultado ir?

772
00:35:00,820 --> 00:35:05,300
E se eu agora volver á miña forma
aquí e recargar miña páxina web

773
00:35:05,300 --> 00:35:09,000
e agora buscar algo
como o can, teña en conta agora

774
00:35:09,000 --> 00:35:10,850
Teño re aplicado Google.

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

776
00:35:11,350 --> 00:35:14,141
>> Se eu queira buscar algo
máis, traballa para non só os cans,

777
00:35:14,141 --> 00:35:16,400
el tamén funciona para gatos.

778
00:35:16,400 --> 00:35:21,930
Tamén traballa para CS50.

779
00:35:21,930 --> 00:35:24,310
E ben, este é só
baixo whelming, non é?

780
00:35:24,310 --> 00:35:25,920
Todo ben, pero realmente funciona.

781
00:35:25,920 --> 00:35:27,360
Entón, o que está realmente a suceder?

782
00:35:27,360 --> 00:35:31,340
Entón eu ensinei meu navegador, utilizando
HTML, para ter a entrada do usuario

783
00:35:31,340 --> 00:35:35,810
e realmente enviar esta entrada
para un servidor remoto mediante HTTP.

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

785
00:35:39,120 --> 00:35:43,500
construír a URL para que o
Eu acabar máis no meu navegador,

786
00:35:43,500 --> 00:35:45,660
teña en conta o que pasa
cando eu procurei para o can.

787
00:35:45,660 --> 00:35:49,270
Se eu faga clic en Buscar, teña en conta que
a URL cambia como eu pretendía

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

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

790
00:35:56,020 --> 00:35:59,560
simplemente anexo-lo para a URL alí.

791
00:35:59,560 --> 00:36:01,730
>> Agora, estas páxinas web aínda son feos.

792
00:36:01,730 --> 00:36:04,890
Entón, imos introducir outra
peza de sintaxe, se podemos hoxe.

793
00:36:04,890 --> 00:36:07,640
E iso é algo coñecido
como follas de estilo en cascada.

794
00:36:07,640 --> 00:36:10,720
Entón deixe-me dar un ollo
este exemplo aquí e mira

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

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

797
00:36:14,520 --> 00:36:16,532
E é aí onde as cousas
estar un pouco feo.

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

799
00:36:18,490 --> 00:36:20,920
HTML por si só non pode facer todo.

800
00:36:20,920 --> 00:36:22,920
E por iso, se quere
estilizar súa páxina web,

801
00:36:22,920 --> 00:36:28,370
realmente precisa concentrarse no
estética dunha forma diferente.

802
00:36:28,370 --> 00:36:33,090
Entón, aquí, eu teño o corpo do meu sitio
principal no interior do cal é unha gran div.

803
00:36:33,090 --> 00:36:34,700
E un div só significa división.

804
00:36:34,700 --> 00:36:38,060
Entón, é como un parágrafo, pero
non ten a mesma semántica

805
00:36:38,060 --> 00:36:39,180
dun parágrafo de texto.

806
00:36:39,180 --> 00:36:40,940
>> Isto só significa que o
navegador, vén aquí

807
00:36:40,940 --> 00:36:45,210
unha gran rexión rectangular da miña web
páxina, quero tratar con isto especialmente.

808
00:36:45,210 --> 00:36:47,420
Agora, liña 21 é onde que comeza div.

809
00:36:47,420 --> 00:36:48,770
E só dar un palpite.

810
00:36:48,770 --> 00:36:53,080
¿Que é o efecto da liña 21 no
resto do contido da páxina?

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
Iso é todo.

814
00:36:56,810 --> 00:36:58,830
Entón, nós non vimos unha forma de
de feito, a centragem texto.

815
00:36:58,830 --> 00:37:00,996
>> En realidade, o meu buscador,
A diferenza de Google real,

816
00:37:00,996 --> 00:37:03,040
foi todo xustificado á esquerda.

817
00:37:03,040 --> 00:37:07,430
E agora na liña 21, eu digo, hey
navegador, crear unha división da páxina.

818
00:37:07,430 --> 00:37:09,450
Dáme un gran, rectángulo invisible.

819
00:37:09,450 --> 00:37:11,490
É así que eu quero
pensar sobre a páxina web.

820
00:37:11,490 --> 00:37:13,870
E entón estilizar lo deste xeito.

821
00:37:13,870 --> 00:37:16,900
Dentro destas citas,
agora, é unha segunda lingua

822
00:37:16,900 --> 00:37:19,969
que presentou hoxe
chamados de follas de estilo en cascada.

823
00:37:19,969 --> 00:37:22,010
Afortunadamente, iso tampouco é
unha linguaxe de programación,

824
00:37:22,010 --> 00:37:26,470
Polo tanto, é moi limitada na súa sintaxe, pero
tamén moi limitado na súa funcionalidade

825
00:37:26,470 --> 00:37:30,670
Tendo en conta que é todo sobre HTML
marcando-se os datos da páxina web

826
00:37:30,670 --> 00:37:32,130
ea estrutura dunha páxina web.

827
00:37:32,130 --> 00:37:35,320
CSS é xeralmente sobre o
última milla, a estética,

828
00:37:35,320 --> 00:37:40,160
obter o tamaño ea cor eo
colocación exactamente correcto nunha páxina web.

829
00:37:40,160 --> 00:37:43,000
E, de feito, está formada
con pares de valores clave.

830
00:37:43,000 --> 00:37:46,290
>> A propiedade como esta, texto
aliñar, seguido de dous puntos,

831
00:37:46,290 --> 00:37:49,720
seguido polo valor de dita
propiedade, que, neste caso, é o centro.

832
00:37:49,720 --> 00:37:51,910
E agora observa-lo
pode aninhar isto.

833
00:37:51,910 --> 00:37:56,780
Se eu quería que todo o que
Eu destacou a ser central,

834
00:37:56,780 --> 00:38:00,270
é por iso que eu teño liña 21 e
a liña correspondente 31.

835
00:38:00,270 --> 00:38:04,820
Pero supoñamos agora quero dicir John
Harvard, Benvido ao meu páxina principal.

836
00:38:04,820 --> 00:38:06,530
>> Copyright symbol John Harvard.

837
00:38:06,530 --> 00:38:09,180
E supoña que quero o primeiro de
esas liñas a ser moi grande.

838
00:38:09,180 --> 00:38:10,450
36 píxeles.

839
00:38:10,450 --> 00:38:11,530
Entón, iso é un tamaño decente.

840
00:38:11,530 --> 00:38:13,240
E eu quería que o seu peso de ser ousado.

841
00:38:13,240 --> 00:38:15,450
Pero, a continuación, a continuación que,
Quero texto menor.

842
00:38:15,450 --> 00:38:19,980
E a continuación diso, quero
texto aínda 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
Hoxe parece un día de descanso.

846
00:38:26,940 --> 00:38:29,840
>> Entón, agora, o que estou facendo para expresar iso?

847
00:38:29,840 --> 00:38:34,580
Aquí na liña 22 é un embutido
div ou div aniñada, se quere.

848
00:38:34,580 --> 00:38:36,190
Tamén ten a súa propia marca de estilo.

849
00:38:36,190 --> 00:38:38,160
Eu especificar un tamaño de fonte de 36.

850
00:38:38,160 --> 00:38:40,460
Eu especificar espesor da fonte de negra.

851
00:38:40,460 --> 00:38:43,360
Aquí embaixo, eu só especificar 24 píxeles.

852
00:38:43,360 --> 00:38:45,960
E, finalmente, na liña 28, eu especificar 12.

853
00:38:45,960 --> 00:38:49,070
Entón, así como unha comprobación de sanidade rápida
e como unha lectura humana presente,

854
00:38:49,070 --> 00:38:52,545
que as palabras na pantalla son
realmente vai ser valente?

855
00:38:52,545 --> 00:38:56,100

856
00:38:56,100 --> 00:38:58,760
As liñas son realmente valente?

857
00:38:58,760 --> 00:38:59,570
>> Só John Harvard.

858
00:38:59,570 --> 00:39:00,070
Non?

859
00:39:00,070 --> 00:39:05,940
Porque así como liña 22 di hey
navegador, aquí é unha división da páxina.

860
00:39:05,940 --> 00:39:07,920
Fai-lle o tamaño da fonte de 36 puntos.

861
00:39:07,920 --> 00:39:09,460
Faga o peso negra.

862
00:39:09,460 --> 00:39:11,920
Así que chegar ao
tag final correspondente

863
00:39:11,920 --> 00:39:15,340
ou etiqueta pechada na liña 24,
Isto significa que, hey navegador,

864
00:39:15,340 --> 00:39:17,640
deixar de facer todo o que está facendo.

865
00:39:17,640 --> 00:39:21,020
E noten que ser claro, aínda que
A liña 22 ten todos estes atributos

866
00:39:21,020 --> 00:39:24,430
como estilo, cando
pechar a etiqueta na liña 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
>> Non repetir o estilo de texto ou
calquera cousa que está dentro destas citas.

869
00:39:29,990 --> 00:39:32,860
E por iso, se eu ollar para iso agora
no meu navegador, imos dar

870
00:39:32,860 --> 00:39:38,060
un ollar para o resultado final. Deixe-me ir
fronte a este ficheiro, que é CSS 0.

871
00:39:38,060 --> 00:39:41,814
E aínda é moi sinxelo,
pero quedando moi interesante.

872
00:39:41,814 --> 00:39:43,980
Pero resulta que hai
outras cousas que podo facer aquí,

873
00:39:43,980 --> 00:39:46,490
e correndo o risco de facer
esta completamente hediondo,

874
00:39:46,490 --> 00:39:48,630
notar aquí que, na miña
corpo da miña páxina web,

875
00:39:48,630 --> 00:39:53,930
Podo facer algo divertido
como bg ou cor de fondo.

876
00:39:53,930 --> 00:39:56,670
>> E rápido, o que é a súa cor favorita?

877
00:39:56,670 --> 00:39:57,720
Verde oín.

878
00:39:57,720 --> 00:39:58,750
Todo ben.

879
00:39:58,750 --> 00:40:02,920
Entón, agora, se eu acertar recargar agora,
temos unha páxina web verde.

880
00:40:02,920 --> 00:40:04,710
Todo ben, entón iso non é malo.

881
00:40:04,710 --> 00:40:08,350
E agora, se eu queira facelo realmente
legal, podo facer a cor do meu texto

882
00:40:08,350 --> 00:40:09,360
incluso vermello.

883
00:40:09,360 --> 00:40:10,870
Entón imos ver o que iso parece.

884
00:40:10,870 --> 00:40:12,230
Agora que está mirando moi bo.

885
00:40:12,230 --> 00:40:15,460
E aquí debaixo, se realmente
quere xogar con alguén

886
00:40:15,460 --> 00:40:17,487
ou se quere ser
unha desas persoas que

887
00:40:17,487 --> 00:40:20,570
tenta inducilo a visitar un sitio
páxina porque enganado Google

888
00:40:20,570 --> 00:40:27,610
en pensar que hai un grupo enteiro
de palabras clave como-- veremos, actualizar.

889
00:40:27,610 --> 00:40:29,020

890
00:40:29,020 --> 00:40:30,680
Para onde foi?

891
00:40:30,680 --> 00:40:31,530
E non nos TI.

892
00:40:31,530 --> 00:40:32,030
Todo ben.

893
00:40:32,030 --> 00:40:34,905
Entón eu digo isto como un aparte, nós imos
falar sobre isto nalgunhas semanas

894
00:40:34,905 --> 00:40:36,740
cando falamos de
seguridade, se realmente

895
00:40:36,740 --> 00:40:38,852
acios enteiros de embutir
palabras clave nunha páxina web,

896
00:40:38,852 --> 00:40:41,810
aínda que eles non son visibles para un
humano, alguén como Google, por suposto,

897
00:40:41,810 --> 00:40:43,250
Aínda pode realmente atopar este.

898
00:40:43,250 --> 00:40:45,820
Todo ben, entón iso é moi
hedionda moi rapidamente.

899
00:40:45,820 --> 00:40:48,420
>> E, de feito, non é todo
que moi diferente da miña propia web

900
00:40:48,420 --> 00:40:51,480
páxina como estudante de graduación, que
Comecei buscando en torno a atopar

901
00:40:51,480 --> 00:40:53,690
versións anteriores dos meus vellos sitios.

902
00:40:53,690 --> 00:40:54,500
Foi moi malo.

903
00:40:54,500 --> 00:40:56,650
En realidade, eu penso
un pouco antes da clase.

904
00:40:56,650 --> 00:40:58,620
Pero hai peor aí.

905
00:40:58,620 --> 00:41:01,534
Este, ao parecer, era meu
páxina principal de volta en 1996.

906
00:41:01,534 --> 00:41:04,200
Ao parecer, eu penso que era
apropiado para pedir á xente o seu nome

907
00:41:04,200 --> 00:41:05,991
Antes de que puidesen
realmente ver a miña páxina web.

908
00:41:05,991 --> 00:41:09,380

909
00:41:09,380 --> 00:41:11,920
>> E entón eu mostre a eles
algo estúpido, probablemente.

910
00:41:11,920 --> 00:41:13,450
Vou cavar-se máis para a próxima vez.

911
00:41:13,450 --> 00:41:16,220
Pero, por agora, imos
considerada un pouco de deseño.

912
00:41:16,220 --> 00:41:17,444
Nós falamos sobre estilo.

913
00:41:17,444 --> 00:41:19,735
E esta páxina, ata agora, e
máis todo o que escribín

914
00:41:19,735 --> 00:41:21,890
é moi limpo estilisticamente.

915
00:41:21,890 --> 00:41:23,320
Pero o que dicir de deseño?

916
00:41:23,320 --> 00:41:25,990
Así, hai unha morea de redundancia
en que eu veño facendo aquí.

917
00:41:25,990 --> 00:41:28,156
>> Eu mencionar a palabra
cor en un par de lugares.

918
00:41:28,156 --> 00:41:31,630
Eu mencionar o tamaño da fonte en un par de
lugares e valente nun par de lugares.

919
00:41:31,630 --> 00:41:34,870
E, fundamentalmente, son co
mesturando-se dúas linguas.

920
00:41:34,870 --> 00:41:38,100
Teño HTML cos meus etiquetas e miña
atributos e, a continuación, de súpeto,

921
00:41:38,100 --> 00:41:40,100
entre comiñas, eu teño
a segunda lingua hoxe

922
00:41:40,100 --> 00:41:43,830
chamado CSS, que á súa vez, é só estes
pares de valores clave ou esas propiedades

923
00:41:43,830 --> 00:41:45,280
separados por dous puntos.

924
00:41:45,280 --> 00:41:47,700
>> Acontece que moi
como en C onde nós

925
00:41:47,700 --> 00:41:50,550
Pode comezar a fatorar
algún código en arquivos de cabeceira,

926
00:41:50,550 --> 00:41:53,520
para que poidamos facer o mesmo en HTML.

927
00:41:53,520 --> 00:41:56,030
E un paso que é como segue.

928
00:41:56,030 --> 00:42:02,230
Teña en conta que esta versión, é CSS1.html
Estruturalmente a mesma páxina web exacto.

929
00:42:02,230 --> 00:42:05,250
Entón, eu teño unha morea enteiro
de divs, pero esta vez, eu teño

930
00:42:05,250 --> 00:42:07,220
se librar do invólucro
div como vai ver.

931
00:42:07,220 --> 00:42:12,390
>> E eu dei estes tres divs
superior, media e inferior, IDs exclusivos.

932
00:42:12,390 --> 00:42:14,760
Isto é bo, porque por
dando esas divisións

933
00:42:14,760 --> 00:42:18,715
dos identificadores únicos de páxina,
I pode referencia a eles noutro lugar.

934
00:42:18,715 --> 00:42:19,215
Onde?

935
00:42:19,215 --> 00:42:21,070
Ben, deixe-me rolar para arriba.

936
00:42:21,070 --> 00:42:24,070
E, de momento, a calquera hora nós miramos
á cabeza dunha páxina web, o que é

937
00:42:24,070 --> 00:42:28,560
a única etiqueta que tivemos en
o xefe dunha páxina web?

938
00:42:28,560 --> 00:42:29,740
Un pouco máis alto.

939
00:42:29,740 --> 00:42:30,799
Só o título ata agora.

940
00:42:30,799 --> 00:42:32,590
Pero resulta que hai
algunhas outras cousas

941
00:42:32,590 --> 00:42:35,840
pode pór alí, un dos
que se chama tag estilo.

942
00:42:35,840 --> 00:42:37,850
Entón, hai pouco, nós miramos
nun atributo de estilo.

943
00:42:37,850 --> 00:42:39,150
Acontece aí é unha marca de estilo.

944
00:42:39,150 --> 00:42:41,200
Pertence no interior da
o xefe dunha páxina web.

945
00:42:41,200 --> 00:42:42,840
E agora entender o que estou facendo.

946
00:42:42,840 --> 00:42:46,540
Teño dentro deste
tag estilo a continuación.

947
00:42:46,540 --> 00:42:51,190
Estou literalmente mencionando na liña 20 do
nome dunha marca que quero para estilizar.

948
00:42:51,190 --> 00:42:53,489
>> Entón eu teño chaveta aberta
e pechou chaveta.

949
00:42:53,489 --> 00:42:56,030
Entón similares en espírito á C, pero
De novo, isto non é unha función,

950
00:42:56,030 --> 00:42:57,796
este é só un detalle sintático aquí.

951
00:42:57,796 --> 00:43:00,170
E despois, claro, digo
o navegador, hey navegador,

952
00:43:00,170 --> 00:43:05,210
facer todo o corpo da páxina
ter un aliñamento do texto do centro.

953
00:43:05,210 --> 00:43:06,930
E entón isto está dicindo o seguinte.

954
00:43:06,930 --> 00:43:12,600
Hey navegador, se ve unha páxina HTML
elemento ou etiqueta na páxina que

955
00:43:12,600 --> 00:43:17,040
ten un identificador único de arriba,
de xeito que o símbolo de hash aquí significa só

956
00:43:17,040 --> 00:43:21,010
idea orixinal de arriba, vai adiante
e facer o seu tamaño de fonte 36

957
00:43:21,010 --> 00:43:22,490
eo seu peso negra.

958
00:43:22,490 --> 00:43:26,840
>> Hey navegador, un elemento cuxa
ID é medio, facelo 24 píxeles.

959
00:43:26,840 --> 00:43:31,070
E hey navegador, se ve unha
idea de fondo, facelo 12 píxeles.

960
00:43:31,070 --> 00:43:33,540
O efecto no extremo
é o sam.

961
00:43:33,540 --> 00:43:36,500
Se eu entrar en CSS 1, o
A páxina parece o mesmo.

962
00:43:36,500 --> 00:43:39,810
Pero estamos un paso na dirección
un deseño un pouco mellor.

963
00:43:39,810 --> 00:43:44,850
Déixame volver aquí para CSS2
para ver o que máis eu fixen.

964
00:43:44,850 --> 00:43:48,030
>> Agora, a páxina é realmente, realmente limpo.

965
00:43:48,030 --> 00:43:50,730
En realidade, eu podo atender a todas as
o contido dunha páxina aquí.

966
00:43:50,730 --> 00:43:54,270
Pero o novo tag teño
introducido, obviamente?

967
00:43:54,270 --> 00:43:54,770
Facer a conexión.

968
00:43:54,770 --> 00:43:57,853
E non é o mellor nome para un tag,
porque non é unha ligazón cara

969
00:43:57,853 --> 00:44:00,780
que a coñecemos, pero iso significa
unha ligazón nalgún outro ficheiro.

970
00:44:00,780 --> 00:44:02,890
Este é tipo de como afiado incluír en C.

971
00:44:02,890 --> 00:44:06,280
>> Esta é o xeito en HTML
para dicir hey navegador,

972
00:44:06,280 --> 00:44:10,240
ir buscar o contido de
o ficheiro chamado css2.css.

973
00:44:10,240 --> 00:44:12,880
A relación, para min,
é que é unha folla de estilo.

974
00:44:12,880 --> 00:44:17,980
E, de feito, é iso que a do
S de en CSS medios.

975
00:44:17,980 --> 00:44:20,350
Isto é unha folla de estilo.

976
00:44:20,350 --> 00:44:23,120
É só o arquivo de texto que contén
unha morea de propiedade.

977
00:44:23,120 --> 00:44:25,940
É unha morea de estilos
que quere aplicar a unha páxina.

978
00:44:25,940 --> 00:44:28,860
>> E así esta é, ao parecer,
referíndose a un segundo ficheiro.

979
00:44:28,860 --> 00:44:32,970
E se eu abrir ese, CSS2.css,
entender que todo o que eu fixen

980
00:44:32,970 --> 00:44:35,900
é copiar e pegar todo
desta con esta imaxe.

981
00:44:35,900 --> 00:44:38,220
E agora, aínda que nunca
codificado isto antes,

982
00:44:38,220 --> 00:44:40,700
considerar só co
sombreiro enxeñaría proverbial

983
00:44:40,700 --> 00:44:44,220
en, por que iso é unha
mellor deseño probablemente?

984
00:44:44,220 --> 00:44:48,910
Factoring para fóra aquelas propiedades CSS,
poñer-los no seu propio arquivo.

985
00:44:48,910 --> 00:44:51,330
Aínda que resolveu este
problema como hai cinco minutos

986
00:44:51,330 --> 00:44:52,600
na primeira versión.

987
00:44:52,600 --> 00:44:55,730
>> Non teña mellorado o
páxina estilisticamente,

988
00:44:55,730 --> 00:44:57,520
este é só mellor
proxecto nalgún sentido.

989
00:44:57,520 --> 00:44:58,990
Por que pensas?

990
00:44:58,990 --> 00:45:01,510
Si.

991
00:45:01,510 --> 00:45:02,260
Máis flexible como?

992
00:45:02,260 --> 00:45:05,040

993
00:45:05,040 --> 00:45:05,540
Si.

994
00:45:05,540 --> 00:45:07,373
Entón, se quere ir
para atrás e cambiar as cousas,

995
00:45:07,373 --> 00:45:09,540
agora, ten un lugar
onde pode cambiar as cousas.

996
00:45:09,540 --> 00:45:11,622
E, de feito, para algo
como conxunto de problemas de sete,

997
00:45:11,622 --> 00:45:13,690
onde imos aplicar un
web de negociación de accións,

998
00:45:13,690 --> 00:45:15,523
que terá un
todo grupo de páxinas.

999
00:45:15,523 --> 00:45:17,620
E sería realmente
irritante se decide, hm,

1000
00:45:17,620 --> 00:45:21,630
Realmente non me gusta de 24 píxeles, quero
que sexa 28 píxeles ou lixeiramente maior.

1001
00:45:21,630 --> 00:45:23,550
E entón ten que facer un
global de localizar e substituír

1002
00:45:23,550 --> 00:45:27,560
ou abrir todos os ficheiros do seu sitio
simplemente para realmente cambiar un valor.

1003
00:45:27,560 --> 00:45:31,290
Ao fatorar estes estilos
nun lugar central

1004
00:45:31,290 --> 00:45:34,720
Agora podes abrir un arquivo de texto
en CS50IDE en calquera programa,

1005
00:45:34,720 --> 00:45:36,479
mudalo, garda-lo, e feito.

1006
00:45:36,479 --> 00:45:38,270
Vostede propagada aqueles
cambios en todos os lugares.

1007
00:45:38,270 --> 00:45:42,450
E que sería a mesma
nun ficheiro punto h ben.

1008
00:45:42,450 --> 00:45:46,697
Así dúbidas, polo tanto,
medida sobre esta sintaxe?

1009
00:45:46,697 --> 00:45:48,530
Todo ben, entón temos
feito todo o que parece

1010
00:45:48,530 --> 00:45:51,170
excepto realmente aplicar hyperlinks.

1011
00:45:51,170 --> 00:45:52,740
E entón imos ir adiante e facelo.

1012
00:45:52,740 --> 00:45:54,830
Deixe-me ir adiante e
crear un novo ficheiro aquí.

1013
00:45:54,830 --> 00:45:59,970
Vou chamalo
link.html, introduza o código de hoxe.

1014
00:45:59,970 --> 00:46:03,000
>> E eu vou facer aberto
soporte tipo doc html.

1015
00:46:03,000 --> 00:46:05,970
Como un aparte, esa cousa no
top, esta declaración de tipo doc,

1016
00:46:05,970 --> 00:46:08,420
é a única que é estraño
co signo de admiración.

1017
00:46:08,420 --> 00:46:12,100
Vostede só ten que facelo alí e
significa que estamos a usar HTML versión 5.

1018
00:46:12,100 --> 00:46:14,460
Versións anteriores de
linguaxe tivo moito máis tempo

1019
00:46:14,460 --> 00:46:16,400
cadeas que necesitas para poñer alí.

1020
00:46:16,400 --> 00:46:18,620
Entón, aquí está un exemplo chamado enlace.

1021
00:46:18,620 --> 00:46:20,950
>> Eu teño un corpo de miña páxina web aquí.

1022
00:46:20,950 --> 00:46:29,770
E aquí, a é igual a href
digamos HTTP://www.disney.com

1023
00:46:29,770 --> 00:46:35,420
e meu sitio favorito, imos dicir.

1024
00:46:35,420 --> 00:46:38,550
Todo ben, entón un moi
, Páxina agradable inocuo.

1025
00:46:38,550 --> 00:46:42,950
Se eu agora vai meu directorio
list aquí e abrir link.html,

1026
00:46:42,950 --> 00:46:44,780
debemos amiga texto.

1027
00:46:44,780 --> 00:46:47,410
>> E, de feito, este é o lugar onde
o H en HTTP vén.

1028
00:46:47,410 --> 00:46:51,580
Protocolo de transferencia de hipertexto
é sobre a transferencia de texto

1029
00:46:51,580 --> 00:46:53,840
que ten hiperlinks a outros recursos.

1030
00:46:53,840 --> 00:46:58,210
E, de feito, aquí é o familiar,
se retro, azul enlace que, se premendo,

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á saíndo en breve.

1033
00:47:03,940 --> 00:47:08,970
Todo ben, entón agora, cales son algúns
das implicacións disto?

1034
00:47:08,970 --> 00:47:11,610
>> E, francamente, o mundo comeza
para obter un pouco máis familiar

1035
00:47:11,610 --> 00:47:15,090
e tamén un pouco máis asustado
pero tamén un pouco máis

1036
00:47:15,090 --> 00:47:17,840
auto defendíbel unha vez que comezar
para entender isto.

1037
00:47:17,840 --> 00:47:21,610
Porque as probabilidades son, algúns de vós, se ir
a través da súa carpeta de spam de Gmail ou mesmo

1038
00:47:21,610 --> 00:47:23,990
súa caixa de entrada, probablemente
obtido algún tipo de correo-e

1039
00:47:23,990 --> 00:47:26,980
que está lle pedindo para cambiar a súa
password quizais ou que comprobar

1040
00:47:26,980 --> 00:47:28,910
súas credenciais PayPal ou outros adornos.

1041
00:47:28,910 --> 00:47:34,510
>> E, de feito, pode recibir
algo que di como, prema aquí

1042
00:47:34,510 --> 00:47:42,260
para axustar o teu contrasinal PayPal.

1043
00:47:42,260 --> 00:47:44,130
E agora, repare, se
Isto non é Disney.com

1044
00:47:44,130 --> 00:47:51,600
pero como badplace.com e
actualizar, teña en conta que o texto aquí

1045
00:47:51,600 --> 00:47:53,710
puidese dicir calquera cousa que sexa.

1046
00:47:53,710 --> 00:47:55,260
E, de feito, este é só palabras.

1047
00:47:55,260 --> 00:48:04,610
Por que non podo realmente ser super mal intencionado
e dicir http://www.paypal.com.

1048
00:48:04,610 --> 00:48:14,090
>> Prema aquí axustar o teu PayPal
contrasinal e agora recargar.

1049
00:48:14,090 --> 00:48:16,220
Isto parece moi lexítimo, non?

1050
00:48:16,220 --> 00:48:20,470
Quero dicir, eu non prema
unha mensaxe que só di iso.

1051
00:48:20,470 --> 00:48:22,450
Pero teña en conta a dicotomía aquí.

1052
00:48:22,450 --> 00:48:26,880
Di www.paypal.com,
e, de feito, agarde un minuto,

1053
00:48:26,880 --> 00:48:29,210
sabemos que quere
a s para a seguridade.

1054
00:48:29,210 --> 00:48:35,450
Entón, agora, ir www.paypal.com HTTPS,
pero se nunca fixo iso antes,

1055
00:48:35,450 --> 00:48:38,182
Non adquira o hábito de
paira sobre pequenos enlaces aquí.

1056
00:48:38,182 --> 00:48:39,890
E é difícil ver
na pantalla existe,

1057
00:48:39,890 --> 00:48:41,340
e non é todo o que máis fácil aquí.

1058
00:48:41,340 --> 00:48:43,615
Pero ata aquí en
o pequeno recuncho

1059
00:48:43,615 --> 00:48:45,740
fai o navegador realmente
dicirlle que imos

1060
00:48:45,740 --> 00:48:48,850
para badplace.com en vez de Paypal.com.

1061
00:48:48,850 --> 00:48:51,620
Agora, a onde estamos indo con iso?

1062
00:48:51,620 --> 00:48:54,859
Todos os exemplos que fixemos hoxe,
temos codificado e ingresaran manual.

1063
00:48:54,859 --> 00:48:56,900
A web é incrible
desinteressante cando duro

1064
00:48:56,900 --> 00:48:59,844
codificar súas páxinas web para que o contido
é estático e nunca cambiar.

1065
00:48:59,844 --> 00:49:01,760
Por suposto, todo o noso
sitios favoritos hoxe,

1066
00:49:01,760 --> 00:49:04,470
se é o Gmail ou Twitter ou
Facebook ou calquera número de outros

1067
00:49:04,470 --> 00:49:05,290
son dinámicas.

1068
00:49:05,290 --> 00:49:07,340
Están cambiando en
resposta á entrada do usuario

1069
00:49:07,340 --> 00:49:08,840
así como os resultados de busca de Google.

1070
00:49:08,840 --> 00:49:12,415
>> E así o mércores, o que facemos é
deixamos HTML e CSS introdución

1071
00:49:12,415 --> 00:49:14,290
detrás de nós e nós tomamos
por certo que agora

1072
00:49:14,290 --> 00:49:16,640
coñecela e introducimos
unha nova linguaxe de programación

1073
00:49:16,640 --> 00:49:19,050
chamado PHP, que lle gusta
C, vai dar

1074
00:49:19,050 --> 00:49:22,450
o poder de realmente crear programas
que se xeran saída.

1075
00:49:22,450 --> 00:49:25,900
Neste caso, imos empregar
PHP para xerar dinamicamente web

1076
00:49:25,900 --> 00:49:27,340
páxinas usando esta nova linguaxe.

1077
00:49:27,340 --> 00:49:28,989
Entón, máis sobre iso o mércores.

1078
00:49:28,989 --> 00:49:29,530
Velo entón.

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