1 00:00:00,000 --> 00:00:03,486 >> [REPRODUCCIÓN DE MÚSICA] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J MALAN: Este es CS50 y este es el comienzo de la semana 7. 4 00:00:14,250 --> 00:00:15,060 Así que bienvenida. 5 00:00:15,060 --> 00:00:17,540 Y usted puede recordar que en el problema en cuatro sets, 6 00:00:17,540 --> 00:00:21,510 había un poco de una búsqueda del tesoro para algunos fabulosos premios por el que 7 00:00:21,510 --> 00:00:24,219 después de recuperar las fotos el personal, tanto aquí como en New Haven, 8 00:00:24,219 --> 00:00:27,468 que estaba el reto de encontrar, ya que muchos de los científicos de la computación como pudieras. 9 00:00:27,468 --> 00:00:29,550 Y tenemos un todo montón de presentaciones. 10 00:00:29,550 --> 00:00:31,930 Pensé en compartir algunos con ustedes aquí hoy. 11 00:00:31,930 --> 00:00:35,100 >> Y pondremos todo esto en línea. 12 00:00:35,100 --> 00:00:39,310 Pero, en particular, quería llamar su atención a-- bien uno, 13 00:00:39,310 --> 00:00:42,670 Sam estaba en un buen número de ellos en general, posando como este. 14 00:00:42,670 --> 00:00:45,750 Sin embargo, parece que a partir de Esta mañana, el ganador 15 00:00:45,750 --> 00:00:51,170 fue un cierto alguien llamado Ken con 24 del personal capturado en cámara 16 00:00:51,170 --> 00:00:54,600 o un poco más si se toma en cuenta personal múltiple en las imágenes. 17 00:00:54,600 --> 00:00:58,300 En la foto es Ken próximo a María en New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Ahora, Ken, sin embargo, resulta fuera es algo de un caso esquina 19 00:01:01,300 --> 00:01:02,880 que aún no ha ocurrido antes. 20 00:01:02,880 --> 00:01:05,713 Resulta que no se le ocurrió para mí para poner letra pequeña en el problema 21 00:01:05,713 --> 00:01:09,710 en cuatro sets que dice que el personal son inelegibles para los fabulosos premios 22 00:01:09,710 --> 00:01:13,130 porque Ken es, por supuesto, uno de los fotógrafos en nuestro personal. 23 00:01:13,130 --> 00:01:16,820 Ahora, dicho esto, él originalmente me escribió para decir 24 00:01:16,820 --> 00:01:19,180 por favor no publicar estas fotos en línea. 25 00:01:19,180 --> 00:01:21,630 Creo que en gran parte porque la mayoría de las fotos 26 00:01:21,630 --> 00:01:24,499 que este fotógrafo tomó mira un poco de algo como esto. 27 00:01:24,499 --> 00:01:25,040 Y similares. 28 00:01:25,040 --> 00:01:28,990 >> Pero Ken le gustaría que yo aseguro que que es un muy buen fotógrafo, 29 00:01:28,990 --> 00:01:33,190 Él es un profesional, él toma fotos que no son borrosas, 30 00:01:33,190 --> 00:01:37,270 que son mejores en el foco, y él tomó un buen número de nuestro propio personal. 31 00:01:37,270 --> 00:01:40,370 Pero en lugar de solamente reconocer Ken, lo que pensamos que nos gustaría hacer 32 00:01:40,370 --> 00:01:43,390 es ir a través de la lista de estudiantes reales que presentaron. 33 00:01:43,390 --> 00:01:48,640 Y resulta que Lance con 15 fotos a partir de esta mañana 34 00:01:48,640 --> 00:01:50,030 fue nuestro ganador. 35 00:01:50,030 --> 00:01:55,730 >> Y representa aquí es Lanza con Colton, con Skaz, conmigo mismo y con Sam. 36 00:01:55,730 --> 00:02:00,230 Pero luego resulta que a partir de 11:46 AM, por lo que hace tan sólo un poco, 37 00:02:00,230 --> 00:02:04,380 Volví a mi correo electrónico y encontré que teníamos sin embargo, una presentación más 38 00:02:04,380 --> 00:02:08,300 por un estudiante llamado Bonnie cuyo correo electrónico se limitó a decir esto. 39 00:02:08,300 --> 00:02:10,800 No voy a mentir, estoy haciendo esto durante la clase. 40 00:02:10,800 --> 00:02:17,620 Y luego procedió a colocar justo 14 fotos, uno menos que la lanza de 15. 41 00:02:17,620 --> 00:02:22,690 >> Pero en las fotos de Bonnie, resulta cabo eran varios miembros del personal, Sam 42 00:02:22,690 --> 00:02:25,960 entre ellos, por lo que lo que creíamos que hacer es reconocer ambas cosas. 43 00:02:25,960 --> 00:02:29,240 Así que además de conseguir el Dropbox espacio que todos los que participaron 44 00:02:29,240 --> 00:02:33,900 recibe, estas dos secciones también recibir un buen almuerzo atendido por ellos 45 00:02:33,900 --> 00:02:36,100 y su sección Se acopla la semana que viene. 46 00:02:36,100 --> 00:02:38,970 Y por lo que tendrá noticias nuestras, Lance y Bonnie, por eso. 47 00:02:38,970 --> 00:02:40,002 Así que las grandes felicidades a ellos. 48 00:02:40,002 --> 00:02:42,210 Ahora, aquellos de ustedes que haría al igual que el almuerzo más general 49 00:02:42,210 --> 00:02:45,320 saber que el almuerzo CS50 en Cambridge y New Haven es este viernes. 50 00:02:45,320 --> 00:02:48,510 Ir a la página web barra de RSVP del CS50. 51 00:02:48,510 --> 00:02:49,800 Y ahora una palabra sobre los seminarios. 52 00:02:49,800 --> 00:02:50,730 Más curricularly. 53 00:02:50,730 --> 00:02:52,490 Así que estamos a punto de la punto del semestre 54 00:02:52,490 --> 00:02:55,200 donde debe empezar pensando en los proyectos finales. 55 00:02:55,200 --> 00:02:59,309 Y de hecho, en sólo un poco, la voluntad los llamados propuestas pre deberse. 56 00:02:59,309 --> 00:03:01,850 Así pre propuestas están destinadas a ser muy bajo impacto y realmente 57 00:03:01,850 --> 00:03:04,109 sólo una oportunidad para componer una nota corta 58 00:03:04,109 --> 00:03:06,900 su compañero de enseñanza para informar él o ella lo que usted está pensando 59 00:03:06,900 --> 00:03:09,140 puede ser que desee hacer para su proyecto final. 60 00:03:09,140 --> 00:03:11,730 >> Ahora, muchos estudiantes terminan haciendo web basa proyectos finales. 61 00:03:11,730 --> 00:03:13,800 Y, por supuesto, sólo somos semana pasada en este momento 62 00:03:13,800 --> 00:03:15,890 y más allá de zambullirse en la programación web. 63 00:03:15,890 --> 00:03:18,200 Así que no se preocupe si usted no tienen absolutamente ninguna idea de cómo 64 00:03:18,200 --> 00:03:21,594 usted construir las ideas que que pueda tener en su mente. 65 00:03:21,594 --> 00:03:24,510 Esto es en realidad una función de fuerza para hacerle pensar y hablar 66 00:03:24,510 --> 00:03:25,650 con su TF respecto. 67 00:03:25,650 --> 00:03:28,810 Pero para ayudarle con eso, y con proyectos fin de carrera, en última instancia, 68 00:03:28,810 --> 00:03:31,750 saber que CS50 tiene una tradición de ofrecer seminarios. 69 00:03:31,750 --> 00:03:36,084 >> Y estos son opcionales, manos, o dar una conferencia sobre la base de las oportunidades 70 00:03:36,084 --> 00:03:39,000 para aprender más sobre los temas que son un poco de auxiliar al curso de 71 00:03:39,000 --> 00:03:43,310 plan de estudios, pero no obstante maravillosa materiales para impulsar proyectos finales. 72 00:03:43,310 --> 00:03:46,840 Y lo que esta es la lista que es Personal CS50 aquí en New Haven 73 00:03:46,840 --> 00:03:48,600 han llegado con de este año sobre iOS 74 00:03:48,600 --> 00:03:50,730 programación, Android programación, desarrollo de juegos, 75 00:03:50,730 --> 00:03:54,480 y racimos de más herramientas y los lenguajes y técnicas. 76 00:03:54,480 --> 00:03:56,780 >> Así que mantener un ojo en el sitio web del CS50. 77 00:03:56,780 --> 00:04:00,110 Y mientras tanto, si desea Si está interesado en alguno de ellos, 78 00:04:00,110 --> 00:04:02,510 ir al registro slash del CS50. 79 00:04:02,510 --> 00:04:05,770 Y entonces nos daremos seguimiento en cuanto a la días y horarios de vuelo y ubicaciones 80 00:04:05,770 --> 00:04:09,090 y todo-- casi todo lo hará ser escuchados y también está disponible a pedido 81 00:04:09,090 --> 00:04:11,750 después si usted no puede realmente hacerlo. 82 00:04:11,750 --> 00:04:15,800 Así que sin más preámbulos, dejado la última vez con GET. 83 00:04:15,800 --> 00:04:19,610 >> Y esto era como el mensaje de que era en el interior de la envolvente virtual, recordar, 84 00:04:19,610 --> 00:04:23,960 que pasamos de router a router enrutador entre un navegador web y una red 85 00:04:23,960 --> 00:04:24,487 servidor. 86 00:04:24,487 --> 00:04:26,695 Y ese mensaje parecía un poco algo como esto. 87 00:04:26,695 --> 00:04:29,700 Este fue el mensaje más arcana que era en realidad dentro de un sobre 88 00:04:29,700 --> 00:04:34,440 escrita en un pedazo de papel cuyo primera línea dice, literalmente, llegar barra. 89 00:04:34,440 --> 00:04:37,830 >> Y así como una comprobación de validez, ¿qué denotan barra? 90 00:04:37,830 --> 00:04:40,455 ¿Qué significa la barra cuando solicitando una página web? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Usted solicita que todo el tiempo. 93 00:04:44,250 --> 00:04:47,333 La mayoría cada vez que visita un sitio web, en realidad no escriba un nombre de archivo. 94 00:04:47,333 --> 00:04:50,960 Es probable que sólo tiene que ir a Facebook.com, entrar, gmail.com, o similares. 95 00:04:50,960 --> 00:04:52,260 ¿Y qué representa barra? 96 00:04:52,260 --> 00:04:53,506 ¿Qué archivo? 97 00:04:53,506 --> 00:04:54,630 ¿O qué página, específicamente? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> El índice, sí. 100 00:05:00,720 --> 00:05:01,810 Así que la página por defecto. 101 00:05:01,810 --> 00:05:04,810 Así que si no se especifica un archivo nombre que vamos a empezar a ver, 102 00:05:04,810 --> 00:05:07,750 en realidad estás simplemente solicitando dame la página por defecto de Facebook 103 00:05:07,750 --> 00:05:10,800 o darme mi bandeja de entrada o dar Me la página predeterminada de noticias 104 00:05:10,800 --> 00:05:12,510 en la página web de la CNN o similares. 105 00:05:12,510 --> 00:05:15,220 Y un servidor entonces responde a ese mensaje con algo 106 00:05:15,220 --> 00:05:18,420 así, decir que sí, yo hablar HTTP versión 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, que es un estado de código que los seres humanos raramente 108 00:05:21,130 --> 00:05:22,790 a ver porque es bueno. 109 00:05:22,790 --> 00:05:26,640 Porque significa OK, la solicitud fue recibido y se manejan adecuadamente. 110 00:05:26,640 --> 00:05:28,960 Y el tipo de contenido aparentemente en la respuesta 111 00:05:28,960 --> 00:05:31,170 es muy a menudo, pero no siempre, texto. 112 00:05:31,170 --> 00:05:32,580 Y específicamente, HTML. 113 00:05:32,580 --> 00:05:34,760 Y eso es en realidad cuando nos fijamos en la actualidad. 114 00:05:34,760 --> 00:05:37,140 >> Así que, de hecho, me voy a ir por delante y abrir un navegador. 115 00:05:37,140 --> 00:05:40,410 Voy a usar Chrome, usted puede utilizar más cualquier navegador en las semanas por venir. 116 00:05:40,410 --> 00:05:42,410 Generalmente recomendamos Cromo porque es particular 117 00:05:42,410 --> 00:05:43,750 bueno para los desarrolladores de software. 118 00:05:43,750 --> 00:05:46,070 Tiene un montón de construido en herramientas que hacen más fácil 119 00:05:46,070 --> 00:05:49,800 para desarrollar no sólo HTML y CSS, las cosas que vamos a empezar a hablar de la actualidad, 120 00:05:49,800 --> 00:05:51,530 sino también otros idiomas. 121 00:05:51,530 --> 00:05:55,530 >> Y yo voy a seguir adelante e ir a-- Voy a Controlar clic o derecha 122 00:05:55,530 --> 00:05:57,210 haga clic en cualquier parte de una página web. 123 00:05:57,210 --> 00:05:59,070 Y yo voy a ir a Inspeccionar Elemento. 124 00:05:59,070 --> 00:06:03,850 Y yo voy a modificar mi pantalla de sólo un poco aquí. 125 00:06:03,850 --> 00:06:05,790 Permítanme pasar esto a la parte inferior. 126 00:06:05,790 --> 00:06:08,140 Así que esto es lo que se llama Inspector de Chrome. 127 00:06:08,140 --> 00:06:11,010 Así que esto es como una depuración herramienta integrada en Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Todos ustedes ya tienen este si has estado usando Chrome. 129 00:06:13,520 --> 00:06:17,169 Y le permite ver lo que está pasando de debajo del capó de alguna página web. 130 00:06:17,169 --> 00:06:19,210 Así que vamos a echar un hecho mirar esto de la siguiente manera. 131 00:06:19,210 --> 00:06:21,251 Tiene forma más características y nos preocupamos por hoy. 132 00:06:21,251 --> 00:06:22,760 Pero hay estas fichas por aquí. 133 00:06:22,760 --> 00:06:25,890 Elementos, red, fuentes, línea de tiempo, y algunas otras cosas. 134 00:06:25,890 --> 00:06:27,800 Voy a hacer clic en Red por un momento. 135 00:06:27,800 --> 00:06:30,500 >> Y es un poco abrumador a primera vista aquí. 136 00:06:30,500 --> 00:06:34,190 Pero, ¿qué voy a hacer es dejar me simplifico un poco. 137 00:06:34,190 --> 00:06:37,560 Voy a encender la grabación de la luz para que sea rojo. 138 00:06:37,560 --> 00:06:39,140 Y yo voy a decir a preservar registro. 139 00:06:39,140 --> 00:06:41,015 Y esto es sólo un poco Lo que me di cuenta 140 00:06:41,015 --> 00:06:44,120 en el tiempo que va a ahorrar todo lo que sucede en el navegador. 141 00:06:44,120 --> 00:06:50,030 Y ahora me voy a ir a http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> En realidad, vamos a hacer www por si acaso, recortar. 143 00:06:52,690 --> 00:06:53,643 Intro. 144 00:06:53,643 --> 00:06:56,180 Así que un URL que muchos de es posible que haya visitado. 145 00:06:56,180 --> 00:06:58,830 Y ahora la web de Facebook página aparece en la parte superior. 146 00:06:58,830 --> 00:07:02,350 Y entonces un montón de cosas pasó volando en la parte inferior. 147 00:07:02,350 --> 00:07:04,830 Y de hecho, resulta que cuando usted visita Facebook.com, 148 00:07:04,830 --> 00:07:09,320 que no sólo está la fabricación de una petición HTTP, resulta que va a Facebook.com 149 00:07:09,320 --> 00:07:14,320 envía 41 de esos sobres, cada uno con su propia petición GET, 150 00:07:14,320 --> 00:07:18,360 como se ha indicado, aunque detrás de la pantalla aquí, en la parte inferior de la pantalla, 151 00:07:18,360 --> 00:07:24,040 indica que, de hecho, mi navegador hizo 41 las solicitudes. 152 00:07:24,040 --> 00:07:29,689 >> Y en total, se transfirió 861 kilobytes y tomó por alguna razón 153 00:07:29,689 --> 00:07:31,730 tanto como ocho segundos descargar todo eso. 154 00:07:31,730 --> 00:07:33,790 Así que en realidad es un poco raro que el sitio de Facebook tendría que 155 00:07:33,790 --> 00:07:35,600 largo, pero que así sea en este caso. 156 00:07:35,600 --> 00:07:39,520 Ahora, todo esto yo no me importa sobre excepto por la solicitud más alta. 157 00:07:39,520 --> 00:07:46,440 Así que vamos a ir a esta de aquí y déjame Alejar por un momento. 158 00:07:46,440 --> 00:07:47,754 >> Y permítanme zoom en esto. 159 00:07:47,754 --> 00:07:50,670 Así que lo que he hecho en la izquierda a pesar de que no hay mucho que hacer por aquí 160 00:07:50,670 --> 00:07:53,360 es que me he destacado Facebook.com y después 161 00:07:53,360 --> 00:07:56,540 Noto que estoy desplazarse hacia abajo, desplazamiento hacia abajo, el desplazamiento hacia abajo, 162 00:07:56,540 --> 00:07:58,330 para solicitar cabeceras. 163 00:07:58,330 --> 00:08:01,720 Y verás que Chrome está mostrando me esencialmente el contenido interno 164 00:08:01,720 --> 00:08:02,810 de la solicitud que hice. 165 00:08:02,810 --> 00:08:06,130 No es el formato en lo mismo manera, pero notan que hay mención de conseguir, 166 00:08:06,130 --> 00:08:09,481 note que hay mención de la huésped, Facebook.com, el camino, o barra, 167 00:08:09,481 --> 00:08:10,730 que es el archivo que solicité. 168 00:08:10,730 --> 00:08:12,930 >> Y luego, si me desplazo una copia de seguridad, vamos a realidad 169 00:08:12,930 --> 00:08:17,270 ver que lo volvió Facebook para mí es todas estas cabeceras. 170 00:08:17,270 --> 00:08:21,040 Así que dentro de ese sobre virtual de hecho son un montón de pares de valores clave. 171 00:08:21,040 --> 00:08:23,130 Una palabra, una coma, y ​​luego un valor. 172 00:08:23,130 --> 00:08:25,050 Una palabra, una coma y un valor. 173 00:08:25,050 --> 00:08:26,160 Estos son llamados encabezados. 174 00:08:26,160 --> 00:08:31,860 Y no hay manera más detalle aquí que que realmente importa en este momento. 175 00:08:31,860 --> 00:08:33,750 >> Pero esto no tiene rival último allá abajo, 176 00:08:33,750 --> 00:08:38,809 notar, que el servidor de Facebook.com, de hecho dicho aquí viene algo de HTML texto. 177 00:08:38,809 --> 00:08:41,409 Así que todo esto es decir que cuando usted solicita una web 178 00:08:41,409 --> 00:08:44,300 página de un navegador a un servidor, ese servidor responde 179 00:08:44,300 --> 00:08:47,630 con un sobre de su propio dentro de los cuales es de texto. 180 00:08:47,630 --> 00:08:49,020 En otras palabras, HTML. 181 00:08:49,020 --> 00:08:50,590 HyperText Markup Language. 182 00:08:50,590 --> 00:08:53,200 Lo cual es otra lengua que introducimos hoy 183 00:08:53,200 --> 00:08:57,740 que los seres humanos o los ordenadores generan con el fin de poner en práctica páginas web. 184 00:08:57,740 --> 00:08:59,580 >> Específicamente, echemos un vistazo a esto. 185 00:08:59,580 --> 00:09:03,277 Voy ahora a volver el sitio web de Facebook. 186 00:09:03,277 --> 00:09:05,360 Y voy a poco control de clic o clic derecho 187 00:09:05,360 --> 00:09:07,634 y haga clic en Ver código fuente. 188 00:09:07,634 --> 00:09:10,550 E incluso si usted no utiliza Chrome, IE puede hacer esto, Firefox puede hacer esto, 189 00:09:10,550 --> 00:09:14,060 Safari puede hacer esto, aunque el menú opciones podrían parecer un poco diferente. 190 00:09:14,060 --> 00:09:18,990 Y este es el HTML que Mark y compañía en Facebook haber escrito. 191 00:09:18,990 --> 00:09:24,640 >> Y colectivamente, este lenguaje aquí implementa el azul y la página en blanco 192 00:09:24,640 --> 00:09:26,370 que vimos hace un momento. 193 00:09:26,370 --> 00:09:28,030 Ahora, esto es un poco abrumador. 194 00:09:28,030 --> 00:09:31,400 Pero si miramos hacia arriba a la izquierda, estamos va a comenzar a ver algunos patrones. 195 00:09:31,400 --> 00:09:34,140 Parece que hay mucho de éstos el soporte de ángulo abierto 196 00:09:34,140 --> 00:09:35,970 y luego está este código HTML palabra clave. 197 00:09:35,970 --> 00:09:38,330 Aquí hay otro abierto soporte angular y la cabeza. 198 00:09:38,330 --> 00:09:41,560 >> Aquí está, si desplácese hacia abajo y hacia abajo y hacia abajo, yo soy 199 00:09:41,560 --> 00:09:43,820 va a seguir adelante y tratar para buscar algo. 200 00:09:43,820 --> 00:09:48,510 Hay muy por encima a la derecha aquí es el cuerpo paréntesis abierto. 201 00:09:48,510 --> 00:09:50,800 Y recordar de pasada tiempo que propusimos 202 00:09:50,800 --> 00:09:53,364 que la página web más sencilla que un humano podría escribir 203 00:09:53,364 --> 00:09:55,030 podría parecer un poco algo como esto. 204 00:09:55,030 --> 00:09:58,430 Abrir etiqueta HTML, cabeza abierta etiqueta, etiqueta del título abierto, 205 00:09:58,430 --> 00:10:03,230 a continuación el título de cierre, cabeza cerrada, abierta etiqueta del cuerpo, un poco de texto, cuerpo cerrado, 206 00:10:03,230 --> 00:10:04,720 HTML cerrado. 207 00:10:04,720 --> 00:10:06,290 >> Pero una pausa aquí por un momento. 208 00:10:06,290 --> 00:10:09,030 Este código, incluso si usted tiene Nunca escrito antes 209 00:10:09,030 --> 00:10:11,864 pero todavía no entiendo muy bien lo que está pasando, se ve muy bien. 210 00:10:11,864 --> 00:10:12,821 Derecho, es muy limpio. 211 00:10:12,821 --> 00:10:14,120 Es muy estilísticamente agradable. 212 00:10:14,120 --> 00:10:16,190 Una gran cantidad de sangrado y el espacio blanco. 213 00:10:16,190 --> 00:10:18,020 Facebook es no es. 214 00:10:18,020 --> 00:10:23,190 ¿Por qué es Facebook tanto peor de lo que en la escritura de HTML? 215 00:10:23,190 --> 00:10:24,310 Al parecer. 216 00:10:24,310 --> 00:10:26,899 >> Derecho, esto es como un solo de cada cinco para el estilo. 217 00:10:26,899 --> 00:10:29,315 Hay una razón de peso para ellos para cortar estas esquinas. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Muy bien, así que no quiero hacer más fácil para que lo leas. 220 00:10:33,860 --> 00:10:36,940 Así que, en cierto sentido, son ofuscar ella, tipo de codificación que 221 00:10:36,940 --> 00:10:40,260 al menos estéticamente por lo que es más difícil para Myspace 222 00:10:40,260 --> 00:10:42,705 ir y estafar a su página web y el HTML para él. 223 00:10:42,705 --> 00:10:45,080 Resulta que con los programas sin embargo, incluyendo Chrome, 224 00:10:45,080 --> 00:10:47,020 podemos limpiar esto muy fácilmente. 225 00:10:47,020 --> 00:10:49,420 Por lo tanto, no es que es como la razón. 226 00:10:49,420 --> 00:10:51,290 ¿Qué otra cosa podría ser la causa. 227 00:10:51,290 --> 00:10:51,790 Sí. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Sí, los datos de los costos de espacio en blanco. 230 00:10:55,890 --> 00:10:56,598 ¿Qué quieres decir? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Si exacto. 233 00:11:02,979 --> 00:11:06,020 Si usted choca con la tecla Tab mucho o la barra espaciadora, considere las implicaciones. 234 00:11:06,020 --> 00:11:10,060 Así que cada tecla del teclado es un [Inaudible] representado como un byte. 235 00:11:10,060 --> 00:11:14,560 >> Así que supongo que Marcos o cualquiera de los desarrolladores estos días golpea la barra espaciadora una vez 236 00:11:14,560 --> 00:11:17,899 en esta página HTML que representa la página principal de Facebook. 237 00:11:17,899 --> 00:11:19,690 Y Facebook tiene mucho de los usuarios de estos días. 238 00:11:19,690 --> 00:11:24,030 Así que supongo que la página de inicio de Facebook es visitado por millones de personas en la actualidad. 239 00:11:24,030 --> 00:11:27,020 Y alguien en Facebook tiene golpear la barra espaciadora una vez. 240 00:11:27,020 --> 00:11:29,890 >> Así que un byte adicional, mil millones de solicitudes, 241 00:11:29,890 --> 00:11:32,790 cuánto más datos Facebook transferir en internet 242 00:11:32,790 --> 00:11:37,160 porque alguien golpeó la barra espaciadora en su teclado? 243 00:11:37,160 --> 00:11:41,660 Mil millones de bytes, o un gigabyte de se están enviando datos desde los servidores de Facebook 244 00:11:41,660 --> 00:11:43,626 a personas de todo el mundo sin una buena razón. 245 00:11:43,626 --> 00:11:44,750 Ahora, eso es sólo un espacio. 246 00:11:44,750 --> 00:11:48,866 >> Imagínese si en realidad nos limpiamos esto cosa y sangría y añadió 247 00:11:48,866 --> 00:11:50,990 una gran cantidad de espacio en blanco y caracteres de tabulación y espacios, 248 00:11:50,990 --> 00:11:53,656 terminas gigabytes de gasto, si no terra bytes más del espacio. 249 00:11:53,656 --> 00:11:56,640 Y tan super común en el mundo real de desarrollo web 250 00:11:56,640 --> 00:11:58,950 es minify su código. 251 00:11:58,950 --> 00:12:01,280 Y, finalmente, veremos cómo se puede hacer esto. 252 00:12:01,280 --> 00:12:04,630 >> Pero hoy en día, vamos a empezar a escribir código que en realidad es legible por nosotros los seres humanos. 253 00:12:04,630 --> 00:12:10,120 Resulta, sin embargo, si nos remontamos a esta herramienta en Chrome Inspeccionar Elemento, 254 00:12:10,120 --> 00:12:12,030 anteriormente, estábamos en la ficha Red. 255 00:12:12,030 --> 00:12:15,430 Resulta que si vas a la pestaña elementos, lo que se ve 256 00:12:15,430 --> 00:12:19,230 es Chrome de bastante impresa versión de esa misma HTML. 257 00:12:19,230 --> 00:12:20,640 Para ello hemos deobfuscated ella. 258 00:12:20,640 --> 00:12:22,472 Así que no es rival para un ordenador. 259 00:12:22,472 --> 00:12:24,430 Y ahora puede hacerlo realidad clic y empezar 260 00:12:24,430 --> 00:12:27,630 para ver la jerarquía que es una página web. 261 00:12:27,630 --> 00:12:28,780 Así que vamos a hacer esto realidad. 262 00:12:28,780 --> 00:12:32,120 Voy a seguir adelante y abrir el mi Mac un programa llamado de edición de texto. 263 00:12:32,120 --> 00:12:35,490 Y recuerde que esto es sólo un programa de texto super simple. 264 00:12:35,490 --> 00:12:37,490 Windows tiene notepad.exe. 265 00:12:37,490 --> 00:12:39,820 Y me voy a pie de la letra escriba lo siguiente. 266 00:12:39,820 --> 00:12:44,650 Doc tipo HTML, soporte abierto HTML, HTML cerrado soporte, 267 00:12:44,650 --> 00:12:49,000 tenemos la cabecera de la página de aquí, Al final de la cabecera de la página de aquí, 268 00:12:49,000 --> 00:12:52,310 un título será, hola mundo. 269 00:12:52,310 --> 00:12:56,660 >> Y luego aquí abajo, necesitamos el cuerpo de la página web. 270 00:12:56,660 --> 00:12:58,050 Cuerpo cerrado. 271 00:12:58,050 --> 00:13:00,700 Y luego aquí, hola mundo. 272 00:13:00,700 --> 00:13:01,270 Correcto. 273 00:13:01,270 --> 00:13:03,350 Así que hemos escrito una página web muy rápido. 274 00:13:03,350 --> 00:13:06,675 Voy a guardarlo como hello.html en mi escritorio. 275 00:13:06,675 --> 00:13:09,050 Mi Mac va a quejarse, pensando que, espera un minuto, 276 00:13:09,050 --> 00:13:11,091 este es un archivo de texto, hacer quieres llamarlo .txt? 277 00:13:11,091 --> 00:13:13,300 Pero no, yo quiero usar HTML punto. 278 00:13:13,300 --> 00:13:16,140 >> Y entonces lo que es bueno si simplemente haga doble clic en este archivo, 279 00:13:16,140 --> 00:13:18,600 hello.html, aquí está mi página web. 280 00:13:18,600 --> 00:13:22,564 Por desgracia, yo soy el única persona en el mundo 281 00:13:22,564 --> 00:13:23,980 ¿quién puede visitar esta página en este momento. 282 00:13:23,980 --> 00:13:26,734 Porque ¿de dónde viven parecer? 283 00:13:26,734 --> 00:13:27,650 Es en mi Mac, ¿verdad? 284 00:13:27,650 --> 00:13:28,470 Lo cual es inútil. 285 00:13:28,470 --> 00:13:30,390 Al igual que nadie en esta sala y mucho menos en el Internet 286 00:13:30,390 --> 00:13:31,598 en realidad puede visitar esa página. 287 00:13:31,598 --> 00:13:33,820 Así que hoy, tenemos que introducir otro elemento. 288 00:13:33,820 --> 00:13:36,720 >> Y para hacer esto, voy a seguir adelante y abrir la nube 9. 289 00:13:36,720 --> 00:13:40,090 Así nube 9 es por supuesto una nube clientes-- basada CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Eso tiene todos nuestros espacios de trabajo corriendo en algún lugar de internet. 291 00:13:44,890 --> 00:13:48,330 Y eso significa que todos nuestros archivos son de acceso público ya. 292 00:13:48,330 --> 00:13:49,830 Así que vamos a seguir adelante y hacer esto. 293 00:13:49,830 --> 00:13:53,670 Voy a seguir adelante y crear un nuevo archivo NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Voy a guardarlo como antes como hello.html y haga clic en Guardar. 295 00:13:58,819 --> 00:14:01,860 Y ahora sólo para ahorrar tiempo, me voy seguir adelante y copiar pegar el código 296 00:14:01,860 --> 00:14:03,470 en lugar de escribirla. 297 00:14:03,470 --> 00:14:04,550 Y guardarlo. 298 00:14:04,550 --> 00:14:07,550 Y por lo que ahora tengo una archivo llamado hello.html. 299 00:14:07,550 --> 00:14:09,710 Pero, ¿cómo hacer que en realidad abrirla como una página web? 300 00:14:09,710 --> 00:14:14,120 Bueno, resulta que el integrado en CS50 IDE no sólo es un compilador como clang 301 00:14:14,120 --> 00:14:16,670 y un depurador como GDB y racimos de otros programas, 302 00:14:16,670 --> 00:14:21,140 hay realmente una de pleno derecho servidor web funcionando en CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Todos ustedes, es decir, tener su propio servidor web. 304 00:14:23,900 --> 00:14:26,850 Y un servidor web es sólo una pieza de software cuyo propósito en la vida 305 00:14:26,850 --> 00:14:28,220 es para servir páginas web. 306 00:14:28,220 --> 00:14:32,490 Para escuchar las peticiones de los navegadores y responder con pequeños sobres virtuales 307 00:14:32,490 --> 00:14:35,290 dentro de los cuales es el contenido que he escrito. 308 00:14:35,290 --> 00:14:38,372 Así que este servidor web es fuente realmente libre y abierto. 309 00:14:38,372 --> 00:14:40,830 Dónde código abierto sólo significa software que alguien más tiene 310 00:14:40,830 --> 00:14:43,480 escrito que todos nosotros podemos realmente ver y descargar e incluso 311 00:14:43,480 --> 00:14:44,780 cambiar el código fuente. 312 00:14:44,780 --> 00:14:46,150 Y se llama Apache. 313 00:14:46,150 --> 00:14:51,450 >> Y lo hemos hecho un poco más fácil utilizar en CS50IDE llamándolo Apache 50. 314 00:14:51,450 --> 00:14:53,780 Así que en realidad puede entender lo siguiente. 315 00:14:53,780 --> 00:14:56,560 Voy a decir Apache 50 inicio. 316 00:14:56,560 --> 00:14:58,910 Y entonces yo sólo voy a decir de puntos. 317 00:14:58,910 --> 00:15:01,080 Y vemos algunos un tanto mensaje arcana diciendo 318 00:15:01,080 --> 00:15:04,640 el establecimiento de Apache documento [? grupo?] de casa, ubuntu, sea lo que sea, 319 00:15:04,640 --> 00:15:05,770 reducir espacio de trabajo. 320 00:15:05,770 --> 00:15:08,280 A partir servidor web Apache 2 con éxito. 321 00:15:08,280 --> 00:15:11,330 >> Así que cuento largo, me simplemente han empujado un botón 322 00:15:11,330 --> 00:15:18,000 y se convirtió en un servidor web que ahora es escuchar en Internet en el puerto TCP 323 00:15:18,000 --> 00:15:20,587 80 en una dirección específica. 324 00:15:20,587 --> 00:15:22,420 Y dice aquí, y esto va a cambiar en función 325 00:15:22,420 --> 00:15:26,550 en su nombre de usuario y otros factores, notar ahora si hago clic en esto, 326 00:15:26,550 --> 00:15:30,211 IDE50 punto jharvard y tal y así, notar que todo este tiempo 327 00:15:30,211 --> 00:15:31,960 Durante los últimos semana, es posible que tenga 328 00:15:31,960 --> 00:15:35,200 notado que su propio nombre de usuario está incrustado en la parte superior derecha 329 00:15:35,200 --> 00:15:37,130 esquina de CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> Y que en realidad ha sido todo esto tiempo de la dirección a la que se puede 331 00:15:41,050 --> 00:15:43,574 visitar todos sus archivos a través de la web. 332 00:15:43,574 --> 00:15:45,990 Hasta ahora, no ha importado, porque en C, por lo general, 333 00:15:45,990 --> 00:15:48,073 quieren que las cosas se ejecutan en un terminal, no en la web. 334 00:15:48,073 --> 00:15:50,800 Pero hoy, empezamos la escritura de código basado en la web 335 00:15:50,800 --> 00:15:53,350 que nosotros queremos accesible en las direcciones URL públicas. 336 00:15:53,350 --> 00:15:56,100 Así que lo que voy a hacer es haga clic en este URL. 337 00:15:56,100 --> 00:16:00,880 >> Y noto que veo bastante Índice feo, un listado de directorio, 338 00:16:00,880 --> 00:16:04,090 pero ¿qué archivo salta a la vista es probable? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Esto se debe a que salvé el archivo en mi espacio de trabajo. 341 00:16:07,870 --> 00:16:12,310 Y lo que yo he dicho Apache servidor web se buscará en el directorio del espacio de trabajo de David. 342 00:16:12,310 --> 00:16:15,300 Y que a nadie en el mundo vea esos archivos. 343 00:16:15,300 --> 00:16:19,050 >> Y de hecho, si ahora haga clic en hello.html, 344 00:16:19,050 --> 00:16:22,180 Veo dentro de esta pestaña exactamente ese archivo. 345 00:16:22,180 --> 00:16:26,430 Ahora note, nube obra del 9 algo un poco de ayuda para nosotros. 346 00:16:26,430 --> 00:16:29,480 Dentro IDE CS50, observe que hay De repente una barra de direcciones. 347 00:16:29,480 --> 00:16:33,690 Eso es porque a pesar de que estamos utilizando Chrome para visitar CS50IDE, 348 00:16:33,690 --> 00:16:37,940 interior de CS50IDE es su propia versión de un navegador web en este momento. 349 00:16:37,940 --> 00:16:40,820 Y así, en lugar de complicar las cosas, como tal, 350 00:16:40,820 --> 00:16:42,955 Voy a seguir adelante y simplemente copiar esta URL. 351 00:16:42,955 --> 00:16:45,330 Voy a seguir adelante y justo abrir mi propia ventana Chrome. 352 00:16:45,330 --> 00:16:47,800 Así que no hay magia aquí, no hay CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Yo sólo voy a pegar literalmente mi J Harvard URL y pulse Enter. 354 00:16:51,800 --> 00:16:54,750 Y voilá, ahora y En teoría, todos 355 00:16:54,750 --> 00:16:57,700 en Internet, si he configurado Apropiadamente, permisos 356 00:16:57,700 --> 00:16:58,720 puede visitar este archivo. 357 00:16:58,720 --> 00:17:03,230 Y ahora, si me dijo: hello.html, voilá, ahí 358 00:17:03,230 --> 00:17:06,366 es mi página web increíblemente decepcionante. 359 00:17:06,366 --> 00:17:07,740 Así que vamos a hacer una comprobación de validez rápido. 360 00:17:07,740 --> 00:17:09,710 Porque todo eso es conceptual configuración. 361 00:17:09,710 --> 00:17:13,180 Y en realidad no he realmente te enseñó cómo escribir HTML en sí. 362 00:17:13,180 --> 00:17:16,084 Por lo tanto cualquier duda ahora en lo que acaba de suceder? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Sí. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 ¿Tiene CS50 poseen estas páginas web? 367 00:17:25,800 --> 00:17:26,460 ¿En qué sentido? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Buena pregunta. 370 00:17:29,530 --> 00:17:32,429 Así CS50 de propietaria CS50.io. 371 00:17:32,429 --> 00:17:33,970 De hecho hemos comprado ese nombre de dominio. 372 00:17:33,970 --> 00:17:37,240 Y por la naturaleza de los chicos ingresando a CS50IDE, 373 00:17:37,240 --> 00:17:39,270 todos ustedes obtiene lo que se llama un subdominio. 374 00:17:39,270 --> 00:17:46,840 >> So-IDE50 malan o IDE50-Rob.CS50.io, esa es su dirección única dentro 375 00:17:46,840 --> 00:17:47,730 nuestro nombre de dominio. 376 00:17:47,730 --> 00:17:50,850 Así que para los propósitos de la supuesto, usted tiene su propia dirección única. 377 00:17:50,850 --> 00:17:55,150 Pero hemos simplificado las cosas por comprar el dominio de nivel superior, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O y luego todos los demás están dentro de eso, por así decirlo. 379 00:17:58,050 --> 00:17:59,890 Y vamos a volver a eso en un par de semanas, probablemente, 380 00:17:59,890 --> 00:18:01,930 especialmente al proyecto final tiempo, cuando algunos de ustedes 381 00:18:01,930 --> 00:18:03,596 puede ser que desee para obtener sus propios nombres de dominio. 382 00:18:03,596 --> 00:18:06,270 En realidad es relativamente sencillo. 383 00:18:06,270 --> 00:18:06,770 Correcto. 384 00:18:06,770 --> 00:18:07,880 Así que ahora vamos a hacer esto. 385 00:18:07,880 --> 00:18:11,910 Voy a volver a CS50IDE, donde mi archivo en este momento, 386 00:18:11,910 --> 00:18:14,710 hello.html, no es tan interesante. 387 00:18:14,710 --> 00:18:17,130 Me gustaría hacer algo un poco mejor que eso. 388 00:18:17,130 --> 00:18:19,440 Así que voy a hacer algo como esto. 389 00:18:19,440 --> 00:18:21,510 Déjame paragraphs.html abierta. 390 00:18:21,510 --> 00:18:23,560 Así que este es un archivo que escribí con antelación. 391 00:18:23,560 --> 00:18:26,480 En la parte superior de la misma, al igual que siempre, tenemos observaciones. 392 00:18:26,480 --> 00:18:28,730 Pero en HTML, comentarios mirar un poco diferente. 393 00:18:28,730 --> 00:18:33,270 En la línea de tres y la línea 14, que ver la sintaxis para iniciar un comentario 394 00:18:33,270 --> 00:18:34,020 y terminar un comentario. 395 00:18:34,020 --> 00:18:36,820 >> Pero ninguna de las cosas en entre los asuntos funcionalmente. 396 00:18:36,820 --> 00:18:40,250 Es sólo una nota a un humana lo que está pasando aquí. 397 00:18:40,250 --> 00:18:43,040 Y al igual que una cordura rápida comprobar, si me desplazo hacia abajo, 398 00:18:43,040 --> 00:18:46,820 ¿cuál es la nueva obvia etiqueta que hemos introducido? 399 00:18:46,820 --> 00:18:52,130 Las etiquetas hasta ahora que hemos visto están abiertas HTML soporte, cabeza, título, y el cuerpo. 400 00:18:52,130 --> 00:18:54,400 Pero lo que es evidentemente nuevo ahora? 401 00:18:54,400 --> 00:18:55,200 >> Sí, así p. 402 00:18:55,200 --> 00:18:57,320 La etiqueta po etiqueta de párrafo. 403 00:18:57,320 --> 00:19:01,182 Y entonces yo sólo prestado algún incumplimiento Texto latino para constituir mis párrafos. 404 00:19:01,182 --> 00:19:03,390 Porque lo que quería demostrar es cómo usted puede ser 405 00:19:03,390 --> 00:19:05,859 representar párrafos de texto en HTML. 406 00:19:05,859 --> 00:19:08,400 Y así lo que está empezando a suceder aquí es que ya hay 407 00:19:08,400 --> 00:19:09,657 un patrón de desarrollo. 408 00:19:09,657 --> 00:19:10,990 Y déjame ir adelante y hacer esto. 409 00:19:10,990 --> 00:19:12,760 Permítanme primero apago Apache. 410 00:19:12,760 --> 00:19:17,340 Y yo voy a decir para que se inicie en sí de nuevo en el interior de la fuente actual de siete 411 00:19:17,340 --> 00:19:18,420 m directorio. 412 00:19:18,420 --> 00:19:20,100 Así que no tengo acceso a todo. 413 00:19:20,100 --> 00:19:22,230 >> Y ahora, si me voy de nuevo a este anuncio en el directorio, 414 00:19:22,230 --> 00:19:24,846 noto que veo todos los archivos a partir de hoy. 415 00:19:24,846 --> 00:19:26,720 Y verás en el siguiente conjunto de problemas, vamos a 416 00:19:26,720 --> 00:19:28,594 dará instrucciones para hacer exactamente esto. 417 00:19:28,594 --> 00:19:35,210 Si abro paragraphs.html, esto podría así parecerse a un lenguaje de programación 418 00:19:35,210 --> 00:19:36,970 a usted si usted no habla o lee América. 419 00:19:36,970 --> 00:19:40,525 Pero esto es sólo tres párrafos de texto que se marcan en HTML. 420 00:19:40,525 --> 00:19:43,100 >> Y notar el párrafo pausas entre ellos. 421 00:19:43,100 --> 00:19:46,400 Porque resulta que, y aunque 422 00:19:46,400 --> 00:19:49,210 podría estar inclinado a hacer esto, mientras que en el mundo real, 423 00:19:49,210 --> 00:19:51,370 si usted quiere poner línea descansos entre cosas, 424 00:19:51,370 --> 00:19:55,680 usted puede ser, sencillamente, hacer esto y pulsa en Guardar. 425 00:19:55,680 --> 00:19:59,460 Y ahora, si vuelvo a cargar aquí, previo aviso que todo acaba desdibuja juntos 426 00:19:59,460 --> 00:20:01,100 en una sola burbuja de texto. 427 00:20:01,100 --> 00:20:03,570 Debido a HTML es una especie de lenguaje mudo. 428 00:20:03,570 --> 00:20:07,230 >> Está destinado a ser utilizado en tales de manera que el navegador sólo se 429 00:20:07,230 --> 00:20:09,920 hacer explícitamente lo que usted le dice que haga. 430 00:20:09,920 --> 00:20:12,890 Así que si usted no dice que dame un nuevo párrafo, 431 00:20:12,890 --> 00:20:14,569 no vas a ver un nuevo párrafo. 432 00:20:14,569 --> 00:20:16,360 Y de hecho, lo que el navegador va a hacer 433 00:20:16,360 --> 00:20:20,020 es aún si pulsa enter, digamos que una y otra vez 434 00:20:20,020 --> 00:20:23,190 y de nuevo, moviendo de esta manera texto abajo en la pantalla y luego guardar 435 00:20:23,190 --> 00:20:26,610 y luego vuelva a cargar, el navegador va a colapsar todo ese espacio en blanco 436 00:20:26,610 --> 00:20:29,021 en una sola, espacios en blanco visible. 437 00:20:29,021 --> 00:20:29,520 Correcto. 438 00:20:29,520 --> 00:20:30,869 Así que esa es la etiqueta de párrafo. 439 00:20:30,869 --> 00:20:32,910 Y así, lo que es el patrón eso es el desarrollo de aquí? 440 00:20:32,910 --> 00:20:37,450 Pues bien, parece ser el caso de que HTML es todo acerca de cómo iniciar una etiqueta 441 00:20:37,450 --> 00:20:38,460 y terminando una etiqueta. 442 00:20:38,460 --> 00:20:39,300 ¿Y qué es una etiqueta? 443 00:20:39,300 --> 00:20:41,160 Bueno, es sólo una parte de la sintaxis. 444 00:20:41,160 --> 00:20:44,400 Soporte Open, una palabra clave, soporte cerrado, es una etiqueta. 445 00:20:44,400 --> 00:20:45,510 O empezar etiqueta. 446 00:20:45,510 --> 00:20:48,590 Y luego cuando estás hecho expresarse, 447 00:20:48,590 --> 00:20:52,300 como en que haya terminado con el párrafo, lo hace por así decirlo contrario. 448 00:20:52,300 --> 00:20:55,480 Pero lo contrario no es exactamente al revés. 449 00:20:55,480 --> 00:21:00,630 >> Sólo tiene que anteponga la misma etiqueta de nombrar con una barra diagonal como este. 450 00:21:00,630 --> 00:21:01,130 Correcto. 451 00:21:01,130 --> 00:21:02,570 Así que no todo lo que emocionante. 452 00:21:02,570 --> 00:21:05,270 Y, de hecho, no estamos haciendo el web todo lo que sea más interesante. 453 00:21:05,270 --> 00:21:07,630 ¿Qué pasa si quiero hacer cosas más grandes y en negrita? 454 00:21:07,630 --> 00:21:11,780 Así resulta que aquí está un ejemplo en headings.html, donde en mi cuerpo, 455 00:21:11,780 --> 00:21:17,280 Tengo una etiqueta H1, H2, H3, cuatro, cinco, o seis, todos los cuales 456 00:21:17,280 --> 00:21:18,310 parecer bastante arcano. 457 00:21:18,310 --> 00:21:21,010 Pero si voy a abrir este ejemplo, vamos a echar un vistazo. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Así navegadores por defecto puede dar usted texto eso es grande y en negrita de tamaños dispares. 460 00:21:27,030 --> 00:21:28,070 H1 es grande. 461 00:21:28,070 --> 00:21:31,240 H6 es menor y luego todo lo demás en el medio. 462 00:21:31,240 --> 00:21:34,170 Así que eso es interesante, pero todavía no es realmente la web que conozco. 463 00:21:34,170 --> 00:21:36,870 ¿Qué pasa si queremos que tengo algo así como una lista. . 464 00:21:36,870 --> 00:21:40,190 Así que aquí está una lista con viñetas de tres de las casas de Harvard. 465 00:21:40,190 --> 00:21:41,600 >> ¿Cómo fue el proceso de hacer esto? 466 00:21:41,600 --> 00:21:45,410 Bueno, eche un vistazo a list.html. 467 00:21:45,410 --> 00:21:47,870 Y aquí, vemos una poco de funk 468 00:21:47,870 --> 00:21:49,630 pero vamos a considerar lo que está sucediendo. 469 00:21:49,630 --> 00:21:56,182 Así que basado en lo que acabas de ver, UL significa lista desordenada. 470 00:21:56,182 --> 00:21:57,640 Lista desordenada simplemente significa viñetas. 471 00:21:57,640 --> 00:21:58,431 No hay números. 472 00:21:58,431 --> 00:22:01,850 También hay algo llamado un lista, que es un OL en la etiqueta ordenada. 473 00:22:01,850 --> 00:22:05,350 Entonces LI, elemento de la lista es todo lo que significa. 474 00:22:05,350 --> 00:22:07,790 >> Y así de forma automática números de todo para usted. 475 00:22:07,790 --> 00:22:11,270 Pero, de nuevo, todos los de mi hendidura y el espacio en blanco es sólo por mí. 476 00:22:11,270 --> 00:22:13,050 El navegador no es en realidad va a cuidar. 477 00:22:13,050 --> 00:22:16,670 Así que a pesar de que no podía hacer esto, sólo para ser claros, 478 00:22:16,670 --> 00:22:19,880 no se debe a pesar de que El navegador sigue 479 00:22:19,880 --> 00:22:22,130 ser capaz de entenderlo muy bien. 480 00:22:22,130 --> 00:22:24,590 Estoy golpeando recarga en mi navegador, estoy haciendo clic recarga 481 00:22:24,590 --> 00:22:26,760 y ningún cambio está ocurriendo porque el navegador todavía 482 00:22:26,760 --> 00:22:29,550 haciendo exactamente lo que te digo que hacer. 483 00:22:29,550 --> 00:22:30,050 >> Correcto. 484 00:22:30,050 --> 00:22:31,340 Así que todo esto es sólo texto. 485 00:22:31,340 --> 00:22:33,730 Ahora vamos a hacer algo más interesante. 486 00:22:33,730 --> 00:22:36,660 Voy a seguir adelante y pedir prestado algo de esto HTML. 487 00:22:36,660 --> 00:22:40,910 Voy a seguir adelante y crear un nuevo archivo aquí. 488 00:22:40,910 --> 00:22:43,370 Y vamos a llamar a este rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Tenemos desproporcionadamente algo usado 491 00:22:48,916 --> 00:22:51,290 llamado un rollo de rick en este clase este año, no sé, 492 00:22:51,290 --> 00:22:53,880 simplemente sucedió orgánicamente. 493 00:22:53,880 --> 00:22:55,397 >> Y ahora se salió de control. 494 00:22:55,397 --> 00:22:56,730 Así que sólo voy a ir con él. 495 00:22:56,730 --> 00:22:59,700 Y si voy a Google Imágenes y Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Si usted no sabe por qué lo hacemos esto, acabo de leer en la Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Cada vez que haya hecho clic en el enlace, alguien ha estado riendo de alguna parte. 499 00:23:11,520 --> 00:23:14,860 Y déjame ir ahead-- existe vamos, vamos a ver esta imagen. 500 00:23:14,860 --> 00:23:16,750 >> Así que aquí tenemos una imagen en Google. 501 00:23:16,750 --> 00:23:19,390 Y vamos a suponer que se trata de razonablemente todas partes en Internet. 502 00:23:19,390 --> 00:23:22,570 Así que voy a asumir que está bien para mí para poner en realidad esto en mi página web. 503 00:23:22,570 --> 00:23:24,820 Voy a seguir adelante y copiar URL de la imagen. 504 00:23:24,820 --> 00:23:28,600 Y ahora si me voy de nuevo a la nube 9, vamos a ver lo que puedo hacer aquí. 505 00:23:28,600 --> 00:23:30,630 Así que aquí es sólo una página web. 506 00:23:30,630 --> 00:23:39,020 Esta es Rick Astley, jaja, Voy ahora a volver 507 00:23:39,020 --> 00:23:43,510 a mi navegador, vuelva a cargar, e interesante. 508 00:23:43,510 --> 00:23:44,530 >> ¿Dónde está Rick? 509 00:23:44,530 --> 00:23:46,050 Así que déjame ver lo que ha pasado. 510 00:23:46,050 --> 00:23:49,114 En realidad, yo voy a fingir que yo no hice eso. 511 00:23:49,114 --> 00:23:50,280 [Inaudible] lo puso aquí. 512 00:23:50,280 --> 00:23:52,520 Volveremos a eso en un momento. 513 00:23:52,520 --> 00:23:54,200 Así que aquí está rick.html. 514 00:23:54,200 --> 00:23:56,070 Así que eso no es Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Así que resulta que podamos en realidad lo añadir aquí. 516 00:23:59,680 --> 00:24:00,830 Se trata de Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Yo voy a decir que me dan una imagen cuyo fuente es la dirección URL que acabo de copiado, que 518 00:24:06,680 --> 00:24:09,110 al parecer, es un feliz cumpleaños una cosa u otra. 519 00:24:09,110 --> 00:24:13,280 >> Y ahora voy a cerrar la etiqueta así. 520 00:24:13,280 --> 00:24:15,170 Así que esto es envolver super largo. 521 00:24:15,170 --> 00:24:17,740 Pero noto que todo lo que tengo hecho imagen corchete abierto es decir, 522 00:24:17,740 --> 00:24:20,270 fuente con un atributo de este. 523 00:24:20,270 --> 00:24:21,530 Y es una muy larga URL. 524 00:24:21,530 --> 00:24:23,720 Y al final, cuenta de esto. 525 00:24:23,720 --> 00:24:29,530 Slash ¿Por qué he hecho horca en lugar de, como cualquier otra etiqueta, 526 00:24:29,530 --> 00:24:33,590 tener un soporte abierto, IMG, soporte cerrado? 527 00:24:33,590 --> 00:24:37,040 Basta con echar una conjetura incluso si no tienen familiaridad alguna 528 00:24:37,040 --> 00:24:40,410 con HTML antes. 529 00:24:40,410 --> 00:24:42,710 >> Así es cómo se cierra el comando, pero ¿por qué 530 00:24:42,710 --> 00:24:45,850 ¿no realmente hacer intuitiva sentido de hacer algo un poco más 531 00:24:45,850 --> 00:24:48,820 verbose como cerca de imagen? 532 00:24:48,820 --> 00:24:51,400 Sí. 533 00:24:51,400 --> 00:24:52,000 Sí. 534 00:24:52,000 --> 00:24:55,620 Sólo semánticamente, no hay sentido de a partir de una imagen y terminando una imagen, 535 00:24:55,620 --> 00:24:56,870 es allí o no lo es. 536 00:24:56,870 --> 00:25:00,960 Por lo tanto, no tiene sentido dejar un espacio para cualquier otra cosa dentro de una imagen. 537 00:25:00,960 --> 00:25:02,010 Usted simplemente no puede hacer eso. 538 00:25:02,010 --> 00:25:03,720 Y así la sintaxis sería generalmente justo 539 00:25:03,720 --> 00:25:07,910 hacer la barra diagonal en el interior de la etiqueta abierta o la etiqueta de inicio 540 00:25:07,910 --> 00:25:09,020 y después haga clic en Guardar. 541 00:25:09,020 --> 00:25:13,350 >> Así que si ahora vuelve a cargar el archivo, ahora Tengo un buen sitio en Internet la página de cocina aquí. 542 00:25:13,350 --> 00:25:15,100 Y podríamos sin duda realmente molestar a la gente 543 00:25:15,100 --> 00:25:17,010 mediante la incorporación en vez como un enlace de YouTube. 544 00:25:17,010 --> 00:25:19,350 Y de hecho, en cualquier momento ¿Alguna vez has ido a YouTube, 545 00:25:19,350 --> 00:25:22,190 y me dejó realmente accidentalmente rick rodar yo aquí. 546 00:25:22,190 --> 00:25:25,770 Así que Rick roll. 547 00:25:25,770 --> 00:25:29,592 Así rick Roll-- voy a ir aquí. 548 00:25:29,592 --> 00:25:31,900 >> [REPRODUCCIÓN DE MÚSICA] 549 00:25:31,900 --> 00:25:33,730 >> OK, una persona le gusta eso. 550 00:25:33,730 --> 00:25:37,270 Así cuenta de todo este tiempo, si haga clic en el enlace Share, por supuesto 551 00:25:37,270 --> 00:25:41,390 obtener la URL que pueda realmente incrustar en un correo electrónico o una imagen forense 552 00:25:41,390 --> 00:25:43,730 o en un conjunto de problemas o en una diapositiva. 553 00:25:43,730 --> 00:25:49,055 Y ahora, si me vez clic en embed, notar que todo este tiempo, estas cosas 554 00:25:49,055 --> 00:25:49,680 ha estado allí. 555 00:25:49,680 --> 00:25:50,910 Voy a seguir adelante y copiar este. 556 00:25:50,910 --> 00:25:54,000 >> Y sólo para que podamos ver mejor, estoy va a pegar en mi editor de texto. 557 00:25:54,000 --> 00:25:55,860 Tenga en cuenta que esto lo YouTube ha estado diciendo. 558 00:25:55,860 --> 00:25:57,693 Cada vez que usted visita un Vídeo de YouTube, si 559 00:25:57,693 --> 00:26:00,410 desee incrustar el vídeo en su página web, sólo tiene que agarrar esto. 560 00:26:00,410 --> 00:26:03,350 Así que este es otro Etiqueta HTML llama un iframe. 561 00:26:03,350 --> 00:26:04,590 O un marco en línea. 562 00:26:04,590 --> 00:26:08,680 Por lo tanto, también se ve un poco más complejo que todos los demás. 563 00:26:08,680 --> 00:26:11,950 Así que resulta que la imagen etiqueta y al parecer la etiqueta iframe 564 00:26:11,950 --> 00:26:13,370 tomar lo que son llamados atributos. 565 00:26:13,370 --> 00:26:15,710 >> Y este es otro pedazo de sintaxis en HTML. 566 00:26:15,710 --> 00:26:19,240 Además de la etiqueta de nombre, nombre de etiqueta abierta del soporte, 567 00:26:19,240 --> 00:26:23,780 se puede controlar el comportamiento de la etiqueta por tener un montón de atributos 568 00:26:23,780 --> 00:26:24,860 igual valor. 569 00:26:24,860 --> 00:26:26,290 Atributo igual valor. 570 00:26:26,290 --> 00:26:28,100 Y así, por ejemplo, YouTube nos está diciendo 571 00:26:28,100 --> 00:26:31,990 si desea que el ancho de este vídeo para ser 420 píxeles y la altura 572 00:26:31,990 --> 00:26:35,470 ser 315 píxeles, eso es cómo lo expresas en HTML. 573 00:26:35,470 --> 00:26:38,480 >> La fuente del vídeo se va estar tanto tiempo URL de YouTube 574 00:26:38,480 --> 00:26:40,830 y luego algunas otras cosas como la frontera del marco es cero, 575 00:26:40,830 --> 00:26:43,500 por lo que probablemente significa que hay sin borde para la cosa. 576 00:26:43,500 --> 00:26:45,450 Permitir pantalla completa, probablemente, significa que el usuario 577 00:26:45,450 --> 00:26:47,840 puede hacer clic en un botón y realmente la pantalla completa del vídeo. 578 00:26:47,840 --> 00:26:52,870 Así que si realmente quiero ser impresionante aquí en Rick punto HTML, 579 00:26:52,870 --> 00:26:58,490 en lugar de utilizar la etiqueta de la imagen, y mucho me borro que, en lugar pega este. 580 00:26:58,490 --> 00:27:00,810 Y ahora recargar. 581 00:27:00,810 --> 00:27:02,500 Y ahora aquí vamos de nuevo. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Muy bien, ya es suficiente. 584 00:27:06,020 --> 00:27:08,970 Está bien así que intentaré difícil no hacerlo de nuevo. 585 00:27:08,970 --> 00:27:11,400 ¿Cuáles son algunos de los robos de balón de aquí? 586 00:27:11,400 --> 00:27:15,130 Así HTML, tan feo como estas páginas web son, en realidad es bastante simple. 587 00:27:15,130 --> 00:27:16,467 No es un lenguaje de programación. 588 00:27:16,467 --> 00:27:17,550 No tiene funciones. 589 00:27:17,550 --> 00:27:18,410 No tiene bucles. 590 00:27:18,410 --> 00:27:19,535 No tiene condiciones. 591 00:27:19,535 --> 00:27:22,900 Todo lo que tiene es decenas de etiquetas diferentes, cada uno de los cuales 592 00:27:22,900 --> 00:27:24,620 tiene cero o más atributos. 593 00:27:24,620 --> 00:27:27,320 Y de hecho, lo que es divertido acerca HTML como usted comienza a sumergirse en 594 00:27:27,320 --> 00:27:29,560 es que es auto enseñable muy. 595 00:27:29,560 --> 00:27:32,880 >> Sólo se necesita un entendimiento del marco general de HTML. 596 00:27:32,880 --> 00:27:36,510 ¿Qué es una etiqueta, ¿qué es un atributo, ¿cómo en realidad configura una página web 597 00:27:36,510 --> 00:27:37,250 como sigue. 598 00:27:37,250 --> 00:27:40,720 Y todo lo demás es realmente el resultado de mirar hacia arriba en una referencia en línea 599 00:27:40,720 --> 00:27:43,080 o googlear cómo hacer algunas técnica o como hemos visto, 600 00:27:43,080 --> 00:27:45,371 busca en la fuente de Facebook código, mirando a un sitio web 601 00:27:45,371 --> 00:27:48,710 que te gusta en él es el código fuente y la comprensión de cómo los desarrolladores de allí 602 00:27:48,710 --> 00:27:50,550 realmente relajado cosas. 603 00:27:50,550 --> 00:27:52,180 >> Así que podemos hacer imágenes también. 604 00:27:52,180 --> 00:27:53,994 Y de hecho, lo hicimos hace un momento. 605 00:27:53,994 --> 00:27:55,410 Déjame ir adelante y sólo te muestro. 606 00:27:55,410 --> 00:27:56,770 He aquí algunos ejemplos de código. 607 00:27:56,770 --> 00:27:58,380 Si alguna vez quieres ver gato gruñón. 608 00:27:58,380 --> 00:28:00,620 Así que darse cuenta de que lo que pueda tener una etiqueta de imagen aquí. 609 00:28:00,620 --> 00:28:02,090 Y tengo un comentario sobre ella. 610 00:28:02,090 --> 00:28:04,490 Tengo una alternativa texto para la accesibilidad. 611 00:28:04,490 --> 00:28:07,250 Así que alguien que está usando una pantalla lector por razones de vista 612 00:28:07,250 --> 00:28:10,172 en realidad puede entonces tener su lector de pantalla decir gato gruñón. 613 00:28:10,172 --> 00:28:11,880 Porque si no pueden ver la imagen, que 614 00:28:11,880 --> 00:28:14,504 al menos puede tener su ordenador decirles verbalmente lo que es. 615 00:28:14,504 --> 00:28:18,020 Y la fuente de ese archivo es cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Así que, de hecho, si yo realmente quería conseguir listo, lo que podría tener done-- 617 00:28:22,472 --> 00:28:25,680 Prometo no ir a Rick Astley, por lo Voy a google para un gato en su lugar. 618 00:28:25,680 --> 00:28:28,290 Y si voy a Google aquí, y vamos a suponer 619 00:28:28,290 --> 00:28:30,040 que esta es una foto de mi gato. 620 00:28:30,040 --> 00:28:35,070 >> Supongamos que tengo el control hace clic o la derecha clic en este, por accidente 621 00:28:35,070 --> 00:28:35,630 espeluznante. 622 00:28:35,630 --> 00:28:40,320 Y cat.jpeg voy para guardar en mi escritorio. 623 00:28:40,320 --> 00:28:44,700 Permítanme ahora vuelvo a la nube 9. 624 00:28:44,700 --> 00:28:48,150 Tenga en cuenta que aquí, puede ir a cargar los archivos locales. 625 00:28:48,150 --> 00:28:51,530 Y si me agarra este archivo, cat.jpeg, previo aviso 626 00:28:51,530 --> 00:28:54,674 que puedo arrastrar y colocarlo en la nube 9 627 00:28:54,674 --> 00:28:56,090 y que va a gritar a mí aquí. 628 00:28:56,090 --> 00:28:59,000 >> Porque ya hemos dado un archivo cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 pero es muy fácil de tomar una foto que tienes 630 00:29:01,430 --> 00:29:03,220 tomada de Facebook o Flickr o similar 631 00:29:03,220 --> 00:29:05,678 y en realidad arrastrarlo en la nube 9 y luego hacen 632 00:29:05,678 --> 00:29:07,970 parte de su propio personal página web o problema 633 00:29:07,970 --> 00:29:10,442 establecer siete u ocho como pronto veremos. 634 00:29:10,442 --> 00:29:12,150 Y luego, cuando finalmente visitar ese gato, 635 00:29:12,150 --> 00:29:16,610 asumiendo que he descargado ese mismo gato, aviso que-- que era adorable. 636 00:29:16,610 --> 00:29:19,160 >> Lo que se puede ver es algo así como esta cara aquí. 637 00:29:19,160 --> 00:29:21,810 Así que los archivos que de referencia dentro de una página web 638 00:29:21,810 --> 00:29:26,050 o bien puede ser local en su propio cuenta o remoto en algún otro servidor 639 00:29:26,050 --> 00:29:29,670 como en el caso de la Rick Foto Astley hace un poco. 640 00:29:29,670 --> 00:29:32,990 Entonces, ¿dónde lo else-- más podemos hacer aquí? 641 00:29:32,990 --> 00:29:34,890 Así que echemos un vistazo a la siguiente. 642 00:29:34,890 --> 00:29:36,160 Usted sabe lo que está bastante guay? 643 00:29:36,160 --> 00:29:39,330 >> Hasta ahora hemos estado haciendo páginas web muy estática. 644 00:29:39,330 --> 00:29:41,830 Quiero condimentar las cosas de la siguiente manera. 645 00:29:41,830 --> 00:29:44,344 Quiero hacer mi propio motor de búsqueda. 646 00:29:44,344 --> 00:29:47,010 Así que para hacer un motor de búsqueda, vamos a seguir adelante y empezar a hacer esto. 647 00:29:47,010 --> 00:29:52,570 Voy a seguir adelante y crear un nuevo archivo llamado search.html. 648 00:29:52,570 --> 00:29:54,890 Y hemos prefabed versiones en línea. 649 00:29:54,890 --> 00:29:56,027 ¡Vaya. 650 00:29:56,027 --> 00:29:57,610 No pegar en la ventana del terminal. 651 00:29:57,610 --> 00:29:58,744 Versiones montadas en línea. 652 00:29:58,744 --> 00:30:00,160 Y yo voy a empezar la siguiente. 653 00:30:00,160 --> 00:30:04,490 Así que aquí está el comienzo de un archivo llamado search.html. 654 00:30:04,490 --> 00:30:07,510 Voy a guardarlo en directorio de origen de hoy. 655 00:30:07,510 --> 00:30:09,079 Voy a llamar a esta búsqueda. 656 00:30:09,079 --> 00:30:10,370 En realidad, lo haremos mejor. 657 00:30:10,370 --> 00:30:13,600 CS50 Búsqueda y realmente marca la misma. 658 00:30:13,600 --> 00:30:17,500 Y ahora, yo voy a decir algo así como H1 CS50 Buscar. 659 00:30:17,500 --> 00:30:20,930 Y luego aquí abajo, H2 próximamente. 660 00:30:20,930 --> 00:30:23,230 Y sólo para recapitular, H1 y H2 significa lo respectivamente? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Sí, por lo grande y en negrita, y no tan grande, pero aún negrita. 663 00:30:30,320 --> 00:30:37,375 Así que si puedo guardar esto y voy por aquí, vamos a ver la search.html archivo. 664 00:30:37,375 --> 00:30:42,560 Muy bien, y éste es derecha- [inaudible]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Colocarse. 667 00:30:49,110 --> 00:30:49,945 David es confusa. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, es justo ahí. 670 00:30:54,080 --> 00:30:54,860 David es un idiota. 671 00:30:54,860 --> 00:30:55,420 OK. 672 00:30:55,420 --> 00:30:56,660 Así que ahí está. 673 00:30:56,660 --> 00:30:58,350 Así CS50 búsqueda próximamente. 674 00:30:58,350 --> 00:31:00,370 Así que ahora, vamos a sintetizar lo que hicimos la semana pasada. 675 00:31:00,370 --> 00:31:03,400 >> Cuando hablamos de la mecánica menor nivel de HTTP. 676 00:31:03,400 --> 00:31:05,780 Y estas nuevas ideas de HTML, que es sólo 677 00:31:05,780 --> 00:31:08,890 Este lenguaje de marcas en el que contar un navegador exactamente qué hacer 678 00:31:08,890 --> 00:31:10,740 e implementar nuestro propio motor de búsqueda. 679 00:31:10,740 --> 00:31:12,520 Así que en lugar de sólo diciendo que viene pronto, estoy 680 00:31:12,520 --> 00:31:14,810 va a introducir algo que se llama una etiqueta de formulario. 681 00:31:14,810 --> 00:31:19,610 Y en esta forma, voy a tener algo como un campo de entrada. 682 00:31:19,610 --> 00:31:22,450 >> Y el nombre de esta entrada campo, voy a llamarlo P. 683 00:31:22,450 --> 00:31:26,240 Y el tipo de este campo de entrada Yo voy a decir es "texto". 684 00:31:26,240 --> 00:31:29,130 Y un campo de texto, como veremos ver, es sólo un cuadro de texto. 685 00:31:29,130 --> 00:31:32,830 Y así no sentir aquí para tener nada dentro de él en este momento. 686 00:31:32,830 --> 00:31:35,320 Y así que estoy simplemente va para cerrar la etiqueta con la que 687 00:31:35,320 --> 00:31:38,099 barra diagonal justo en la propia etiqueta. 688 00:31:38,099 --> 00:31:39,890 Y luego voy a tener otra entrada. 689 00:31:39,890 --> 00:31:43,480 Tipo de entrada es igual a presentar. 690 00:31:43,480 --> 00:31:45,320 Y luego voy a cerrar esta también. 691 00:31:45,320 --> 00:31:46,840 >> Y ahora voy a volver aquí. 692 00:31:46,840 --> 00:31:49,520 Y ya vemos, aunque bastante feo, tengo 693 00:31:49,520 --> 00:31:52,460 consiguió los inicios de mi propia página de búsqueda aquí. 694 00:31:52,460 --> 00:31:55,150 De hecho, voy a tratar de limpiar esto un poco. 695 00:31:55,150 --> 00:31:57,330 Resulta que en el Introducir, puedo tener 696 00:31:57,330 --> 00:31:59,910 otro atributo llamado marcador de posición. 697 00:31:59,910 --> 00:32:05,165 Y podría ver algo como palabras clave, o más específicamente, consultar para q. 698 00:32:05,165 --> 00:32:07,820 >> Y cuenta, ahora, tengo este tipo de texto gris 699 00:32:07,820 --> 00:32:10,440 que desaparece tan antes de empezar a escribir, 700 00:32:10,440 --> 00:32:12,930 pero es probable que haya algo usted ha visto en otras páginas web. 701 00:32:12,930 --> 00:32:14,650 No me gusta realmente el botón Enviar. 702 00:32:14,650 --> 00:32:18,320 Así que estoy realmente va a dar el Botón Enviar un valor de búsqueda. 703 00:32:18,320 --> 00:32:21,680 Y ahora, si vuelvo a cargar, observe que mi botón se convierte en el nombre de búsqueda. 704 00:32:21,680 --> 00:32:24,140 Sabes, realmente no me como el logo aquí. 705 00:32:24,140 --> 00:32:27,140 Así generador de Google Fuente. 706 00:32:27,140 --> 00:32:28,820 >> Quiero darle vida a esto aún más. 707 00:32:28,820 --> 00:32:30,660 Búsqueda para CS50. 708 00:32:30,660 --> 00:32:31,870 Déjame crear mi propio logo. 709 00:32:31,870 --> 00:32:33,080 Parece interesante. 710 00:32:33,080 --> 00:32:36,945 Así que ahora vamos a salvar este como-- vamos. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 ¿Dónde va? 713 00:32:43,120 --> 00:32:43,620 Ya está. 714 00:32:43,620 --> 00:32:44,160 OK. 715 00:32:44,160 --> 00:32:44,980 Perdido. 716 00:32:44,980 --> 00:32:47,740 Guardar como. 717 00:32:47,740 --> 00:32:49,470 Navegadores estúpido. 718 00:32:49,470 --> 00:32:51,700 Prepárense, vamos a arreglar esto de una vez por todas. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Allá vamos. 721 00:32:58,590 --> 00:32:59,090 Correcto. 722 00:32:59,090 --> 00:32:59,600 Apenado. 723 00:32:59,600 --> 00:33:00,750 Día libre. 724 00:33:00,750 --> 00:33:02,310 Ahora bien, esto es muy de moda. 725 00:33:02,310 --> 00:33:03,160 Salir de pantalla completa. 726 00:33:03,160 --> 00:33:04,150 Correcto. 727 00:33:04,150 --> 00:33:06,870 >> Ahora, al igual que uno normal persona, registrar la imagen. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Ahora voy a entrar en CS50IDE y Voy a simplemente agarrar el logotipo, 730 00:33:13,194 --> 00:33:15,360 Voy a arrastrarlo a mi directorio fuente siete, 731 00:33:15,360 --> 00:33:17,002 ya existe el archivo, estoy bien con eso. 732 00:33:17,002 --> 00:33:19,210 Así que voy a anularlo porque yo ya tenía. 733 00:33:19,210 --> 00:33:20,630 Y ahora, ¿cómo puedo deshacerme de esto? 734 00:33:20,630 --> 00:33:24,670 >> Vamos a seguir adelante y hacer aquí fuente de imagen es igual logo.gif. 735 00:33:24,670 --> 00:33:25,490 Cerrar esta. 736 00:33:25,490 --> 00:33:26,050 Guardar. 737 00:33:26,050 --> 00:33:30,560 Y ahora si me vuelvo a mi búsqueda página, ahora se ve bastante bien. 738 00:33:30,560 --> 00:33:33,610 Muy bien, por lo que no tiene bastante hecho nada útil. 739 00:33:33,610 --> 00:33:37,000 De hecho, voy a tratar de buscar para un gato y ver qué pasa. 740 00:33:37,000 --> 00:33:38,890 Gatos. 741 00:33:38,890 --> 00:33:39,420 Maldición. 742 00:33:39,420 --> 00:33:41,400 No sólo funciona, al parecer. 743 00:33:41,400 --> 00:33:43,760 ¿Cuál es la pieza clave que falta aquí? 744 00:33:43,760 --> 00:33:49,100 >> Derecha, incluso si usted no sabe nada de HTML, He empezado a marcar el formulario de teléfono 745 00:33:49,100 --> 00:33:54,130 y yo he dicho es cómo conseguir entradas, dame un cuadro de texto y un botón de envío, 746 00:33:54,130 --> 00:33:55,730 qué pieza aparentemente falta? 747 00:33:55,730 --> 00:33:58,975 Supongamos que queremos conseguir realmente esta cosa funcione correctamente. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 ¿Qué necesitamos hacer? 750 00:34:05,360 --> 00:34:08,860 Tenemos una necesidad de implementar la parte de atrás base de datos o el motor de búsqueda de sí mismo, 751 00:34:08,860 --> 00:34:11,210 y eso va a tomar un todo mucho tiempo, francamente. 752 00:34:11,210 --> 00:34:13,380 >> Así recordamos lo que hicimos la última vez. 753 00:34:13,380 --> 00:34:18,230 Así que si usted busca algo en Google y ha adelantado desactivado, 754 00:34:18,230 --> 00:34:20,355 revocatorio, búsqueda instantánea. 755 00:34:20,355 --> 00:34:22,230 Así que permítanme que fuera de modo que en realidad esto 756 00:34:22,230 --> 00:34:26,650 se comporta como un navegador de la escuela más antigua, si yo ahora busco algo como gatos, 757 00:34:26,650 --> 00:34:28,190 recordar lo que la URL se parece. 758 00:34:28,190 --> 00:34:29,449 Es bastante críptico. 759 00:34:29,449 --> 00:34:33,000 Pero incrustado allí, recuerdo, es la búsqueda de tala. 760 00:34:33,000 --> 00:34:35,100 Signo de interrogación q es igual a los gatos. 761 00:34:35,100 --> 00:34:37,760 >> Y eso me parece dar un montón de resultados de búsqueda. 762 00:34:37,760 --> 00:34:39,134 Así que ya sabes lo que voy a hacer? 763 00:34:39,134 --> 00:34:41,650 Voy a pedir prestado Google sólo por un minuto. 764 00:34:41,650 --> 00:34:43,670 Voy a ir más aquí y yo voy a decir 765 00:34:43,670 --> 00:34:47,850 que esta forma de acción o destino, por así decirlo, 766 00:34:47,850 --> 00:34:49,330 literalmente debe ser Google. 767 00:34:49,330 --> 00:34:52,590 Y el método que yo quería para uso va a ser conseguir. 768 00:34:52,590 --> 00:34:53,560 >> Entonces, ¿qué es la acción? 769 00:34:53,560 --> 00:34:55,760 Acción está extrañamente nombrado, pero eso sólo significa 770 00:34:55,760 --> 00:34:58,120 ¿quién va a manejar la acción de esta forma? 771 00:34:58,120 --> 00:35:00,820 Cuando hago clic en Buscar, donde si el resultado de ir? 772 00:35:00,820 --> 00:35:05,300 Y si ahora vuelvo a mi forma aquí y recargar mi página web 773 00:35:05,300 --> 00:35:09,000 y ahora buscar algo como el perro, cuenta ahora 774 00:35:09,000 --> 00:35:10,850 He re implementado Google. 775 00:35:10,850 --> 00:35:11,350 ¿Correcto? 776 00:35:11,350 --> 00:35:14,141 >> Si quiero buscar algo otra cosa, funciona para no sólo los perros, 777 00:35:14,141 --> 00:35:16,400 también funciona para los gatos. 778 00:35:16,400 --> 00:35:21,930 También funciona para CS50. 779 00:35:21,930 --> 00:35:24,310 Y bien, esto es sólo bajo encima tuyo, ¿no? 780 00:35:24,310 --> 00:35:25,920 Muy bien, pero realmente funciona. 781 00:35:25,920 --> 00:35:27,360 Así que lo que está sucediendo realmente? 782 00:35:27,360 --> 00:35:31,340 Así que me he enseñado a mi navegador, utilizando HTML, para tomar la entrada del usuario 783 00:35:31,340 --> 00:35:35,810 y en realidad enviar esa entrada a un servidor remoto a través de HTTP. 784 00:35:35,810 --> 00:35:39,120 >> Y porque mi navegador entiende HTTP, que en realidad 785 00:35:39,120 --> 00:35:43,500 construir la URL para que lo Termino otra vez en mi navegador, 786 00:35:43,500 --> 00:35:45,660 darse cuenta de lo que sucede cuando busqué para el perro. 787 00:35:45,660 --> 00:35:49,270 Si hago clic en Buscar, observe que la URL cambia a medida que pensaba 788 00:35:49,270 --> 00:35:52,770 a google.com/search~~V consulta equivale perro. 789 00:35:52,770 --> 00:35:56,020 Y eso es porque la forma sabe, porque el método es obtener, 790 00:35:56,020 --> 00:35:59,560 simplemente añadirlo a esa URL allí. 791 00:35:59,560 --> 00:36:01,730 >> Ahora, estas páginas web son todavía feo. 792 00:36:01,730 --> 00:36:04,890 Así que vamos a introducir otro pedazo de sintaxis si podemos hoy. 793 00:36:04,890 --> 00:36:07,640 Y esto es algo conocido como las hojas de estilo en cascada. 794 00:36:07,640 --> 00:36:10,720 Así que déjame echar un vistazo a este ejemplo aquí y ver 795 00:36:10,720 --> 00:36:12,380 si podemos inferir lo que está pasando. 796 00:36:12,380 --> 00:36:14,520 Esto es CSS0.html. 797 00:36:14,520 --> 00:36:16,532 Y aquí es donde las cosas conseguir un poco feo. 798 00:36:16,532 --> 00:36:18,490 Porque por desgracia, en el mundo de la web, 799 00:36:18,490 --> 00:36:20,920 HTML por sí sola no puede hacerlo todo. 800 00:36:20,920 --> 00:36:22,920 Y así, si quieres estilizar tu página web, 801 00:36:22,920 --> 00:36:28,370 que realmente necesita para centrarse en el la estética de una manera diferente. 802 00:36:28,370 --> 00:36:33,090 Así que aquí, tengo el cuerpo de mi web página dentro de la cual es un gran div. 803 00:36:33,090 --> 00:36:34,700 Y un div sólo significa división. 804 00:36:34,700 --> 00:36:38,060 Así que es como un párrafo pero no tiene la misma semántica 805 00:36:38,060 --> 00:36:39,180 de un párrafo de texto. 806 00:36:39,180 --> 00:36:40,940 >> Esto sólo significa que el navegador, aquí viene 807 00:36:40,940 --> 00:36:45,210 una región rectangular grande de mi web página, quiero manejarlo de forma especial. 808 00:36:45,210 --> 00:36:47,420 Ahora, la línea 21 es donde comienza esa div. 809 00:36:47,420 --> 00:36:48,770 Y acaba de tomar una conjetura. 810 00:36:48,770 --> 00:36:53,080 ¿Cuál es el efecto de la línea 21 en el resto de los contenidos de la página? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Centrándola. 813 00:36:56,311 --> 00:36:56,810 Eso es todo. 814 00:36:56,810 --> 00:36:58,830 Así que no hemos visto una forma de en realidad centrar el texto. 815 00:36:58,830 --> 00:37:00,996 >> De hecho, mi motor de búsqueda, a diferencia del actual Google, 816 00:37:00,996 --> 00:37:03,040 fue todo justificado a la izquierda. 817 00:37:03,040 --> 00:37:07,430 Y por lo que ahora en la línea 21, que estoy diciendo, hey navegador, crear una división de la página. 818 00:37:07,430 --> 00:37:09,450 Sólo dame un grande, rectángulo invisible. 819 00:37:09,450 --> 00:37:11,490 Eso es lo que quiero pensar en la página web. 820 00:37:11,490 --> 00:37:13,870 Y luego estilizar la siguiente manera. 821 00:37:13,870 --> 00:37:16,900 Dentro de esas cotizaciones, Ahora, es un segundo idioma 822 00:37:16,900 --> 00:37:19,969 que presentamos hoy llamadas hojas de estilo en cascada. 823 00:37:19,969 --> 00:37:22,010 Afortunadamente, también no es un lenguaje de programación, 824 00:37:22,010 --> 00:37:26,470 así que es muy limitado en su sintaxis, pero También es muy limitado en su funcionalidad 825 00:37:26,470 --> 00:37:30,670 mientras que HTML está todo sobre el marcado de los datos de una página web 826 00:37:30,670 --> 00:37:32,130 y la estructura de una página web. 827 00:37:32,130 --> 00:37:35,320 CSS es generalmente de aproximadamente el última milla, la estética, 828 00:37:35,320 --> 00:37:40,160 conseguir el tamaño y el color y la colocación exactamente a la derecha en una página web. 829 00:37:40,160 --> 00:37:43,000 Y, de hecho, está formado con pares de valores clave. 830 00:37:43,000 --> 00:37:46,290 >> Una propiedad de este tipo, el texto alinear, seguido de dos puntos, 831 00:37:46,290 --> 00:37:49,720 seguido por el valor de ese propiedad, que en este caso es central. 832 00:37:49,720 --> 00:37:51,910 Y ahora cuenta de que Puede anidar estas cosas. 833 00:37:51,910 --> 00:37:56,780 Si quería todo en esa He destacado que estar centrado, 834 00:37:56,780 --> 00:38:00,270 es por eso que tengo la línea 21 y la línea correspondiente 31. 835 00:38:00,270 --> 00:38:04,820 Pero supongamos ahora quieren decir John Harvard, bienvenido a mi página de inicio. 836 00:38:04,820 --> 00:38:06,530 >> Símbolo de copyright John Harvard. 837 00:38:06,530 --> 00:38:09,180 Y supongo que quiero la primera de esas líneas para ser bastante grande. 838 00:38:09,180 --> 00:38:10,450 36 píxeles. 839 00:38:10,450 --> 00:38:11,530 Así que eso es un tamaño decente. 840 00:38:11,530 --> 00:38:13,240 Y yo quería su peso a ser valientes. 841 00:38:13,240 --> 00:38:15,450 Pero entonces debajo de eso, Quiero texto más pequeño. 842 00:38:15,450 --> 00:38:19,980 Y debajo de eso, quiero texto aún más pequeño. 843 00:38:19,980 --> 00:38:20,480 Apenado. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Hoy en día se siente como un día de descanso. 846 00:38:26,940 --> 00:38:29,840 >> Así que ahora, ¿qué estoy haciendo para expresar esto? 847 00:38:29,840 --> 00:38:34,580 Aquí en la línea 22 es una embebido div o div anidado, si se quiere. 848 00:38:34,580 --> 00:38:36,190 También tiene su propia etiqueta de estilo. 849 00:38:36,190 --> 00:38:38,160 Puedo especificar un tamaño de fuente de 36. 850 00:38:38,160 --> 00:38:40,460 Puedo especificar un peso de la fuente de negrita. 851 00:38:40,460 --> 00:38:43,360 Aquí abajo, solamente puedo especificar 24 píxeles. 852 00:38:43,360 --> 00:38:45,960 Y, por último, en la línea 28, que especifique 12. 853 00:38:45,960 --> 00:38:49,070 Así que como una prueba de cordura rápida y como una lectura humana esto, 854 00:38:49,070 --> 00:38:52,545 que las palabras en la pantalla son en realidad va a ser audaz? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 ¿Qué líneas son realmente audaz? 857 00:38:58,760 --> 00:38:59,570 >> Sólo John Harvard. 858 00:38:59,570 --> 00:39:00,070 ¿Correcto? 859 00:39:00,070 --> 00:39:05,940 Porque así como la línea 22 dice bueno navegador, aquí está una división de la página. 860 00:39:05,940 --> 00:39:07,920 Que sea el tamaño de fuente de 36 puntos. 861 00:39:07,920 --> 00:39:09,460 Hacer que el peso de la fuente negrita. 862 00:39:09,460 --> 00:39:11,920 Tan pronto como llegue a la etiqueta final correspondiente 863 00:39:11,920 --> 00:39:15,340 o etiqueta de cierre en la línea 24, eso significa, bueno navegador, 864 00:39:15,340 --> 00:39:17,640 dejar de hacer lo que sea que esté haciendo. 865 00:39:17,640 --> 00:39:21,020 Y fíjense que quede claro, a pesar de que línea 22 tiene todos estos atributos 866 00:39:21,020 --> 00:39:24,430 como el estilo, cuando cerrar la etiqueta en la línea 24, 867 00:39:24,430 --> 00:39:25,940 sólo se menciona el nombre de la etiqueta. 868 00:39:25,940 --> 00:39:29,990 >> No repetir el estilo palabra o todo lo que hay dentro de esas cotizaciones. 869 00:39:29,990 --> 00:39:32,860 Y por lo que si me veo en este momento en mi navegador, echemos 870 00:39:32,860 --> 00:39:38,060 Una mirada a el resultado final. Déjame ir por delante de este archivo, que es CSS 0. 871 00:39:38,060 --> 00:39:41,814 Y aún así es bastante llano, pero conseguir bastante interesante. 872 00:39:41,814 --> 00:39:43,980 Pero resulta que hay otras cosas que puedo hacer aquí, 873 00:39:43,980 --> 00:39:46,490 y en el riesgo de hacer esta completamente horrible, 874 00:39:46,490 --> 00:39:48,630 notar aquí que en mi cuerpo de mi página web, 875 00:39:48,630 --> 00:39:53,930 Puedo hacer algo divertido como bg o color de fondo. 876 00:39:53,930 --> 00:39:56,670 >> Y rápido, ¿cuál es tu color favorito? 877 00:39:56,670 --> 00:39:57,720 Verde que oí. 878 00:39:57,720 --> 00:39:58,750 Correcto. 879 00:39:58,750 --> 00:40:02,920 Así que ahora, si me golpeó recarga ahora, tenemos una página web verde. 880 00:40:02,920 --> 00:40:04,710 Muy bien, así que no está mal. 881 00:40:04,710 --> 00:40:08,350 Y ahora, si quiero hacer esto realmente fresco, puedo hacer el color de mi texto 882 00:40:08,350 --> 00:40:09,360 incluso rojo. 883 00:40:09,360 --> 00:40:10,870 Así que vamos a ver lo que esto se parece. 884 00:40:10,870 --> 00:40:12,230 Ahora se ve bastante bien. 885 00:40:12,230 --> 00:40:15,460 Y aquí, si realmente quiere meterse con alguien 886 00:40:15,460 --> 00:40:17,487 o si quieres ser una de esas personas que 887 00:40:17,487 --> 00:40:20,570 trata de engañarlo para que visite una web página porque han engañado Google 888 00:40:20,570 --> 00:40:27,610 en el pensamiento de que hay un montón de las palabras clave como-- vamos a ver, volver a cargar. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 ¿A donde se fué? 891 00:40:30,680 --> 00:40:31,530 Y no nosotros. 892 00:40:31,530 --> 00:40:32,030 Correcto. 893 00:40:32,030 --> 00:40:34,905 Por eso digo esto como un aparte, vamos a hablar de estas cosas en un par de semanas 894 00:40:34,905 --> 00:40:36,740 cuando hablamos de seguridad, si en realidad 895 00:40:36,740 --> 00:40:38,852 incrustar racimos enteros de palabras clave en una página web, 896 00:40:38,852 --> 00:40:41,810 incluso si no son visibles a un humana, alguien como Google, por supuesto, 897 00:40:41,810 --> 00:40:43,250 todavía puede realmente encontrar esto. 898 00:40:43,250 --> 00:40:45,820 Muy bien, así que es bastante horrible con bastante rapidez. 899 00:40:45,820 --> 00:40:48,420 >> Y, de hecho, no lo es todo que gran diferencia de mi propia web 900 00:40:48,420 --> 00:40:51,480 página como estudiante, que Empecé buscando en Google alrededor para encontrar 901 00:40:51,480 --> 00:40:53,690 Las versiones anteriores de mis viejos sitios Web. 902 00:40:53,690 --> 00:40:54,500 Era bastante malo. 903 00:40:54,500 --> 00:40:56,650 De hecho, he encontrado uno justo antes de la clase. 904 00:40:56,650 --> 00:40:58,620 Pero no hay peor que hay. 905 00:40:58,620 --> 00:41:01,534 Al parecer, esto fue mi página de inicio en el año 1996. 906 00:41:01,534 --> 00:41:04,200 Al parecer, pensé que era apropiado para preguntar a la gente de su nombre 907 00:41:04,200 --> 00:41:05,991 antes de que pudieran en realidad ver a mi página web. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> Y entonces les mostré algo estúpido, probablemente. 910 00:41:11,920 --> 00:41:13,450 Voy a desenterrar más para la próxima vez. 911 00:41:13,450 --> 00:41:16,220 Pero por ahora, vamos a considerar un poco de diseño. 912 00:41:16,220 --> 00:41:17,444 Hemos hablado de estilo. 913 00:41:17,444 --> 00:41:19,735 Y esta página hasta el momento y casi todo lo que he escrito 914 00:41:19,735 --> 00:41:21,890 es bastante limpio estilísticamente. 915 00:41:21,890 --> 00:41:23,320 Pero ¿qué pasa con el diseño? 916 00:41:23,320 --> 00:41:25,990 Bueno, hay una gran cantidad de redundancia en lo que he estado haciendo aquí. 917 00:41:25,990 --> 00:41:28,156 >> He mencionado la palabra color en un par de lugares. 918 00:41:28,156 --> 00:41:31,630 He mencionado el tamaño de fuente en un par de lugares y audaz en un par de lugares. 919 00:41:31,630 --> 00:41:34,870 Y fundamentalmente, soy co mezclándose dos idiomas. 920 00:41:34,870 --> 00:41:38,100 Tengo HTML con mis etiquetas y mi atributos y luego, de repente, 921 00:41:38,100 --> 00:41:40,100 entre comillas, tengo la segunda lengua de hoy 922 00:41:40,100 --> 00:41:43,830 llamado CSS, que a su vez, es sólo éstas pares de valores clave o estas propiedades 923 00:41:43,830 --> 00:41:45,280 separados por dos puntos. 924 00:41:45,280 --> 00:41:47,700 >> Resulta que mucho como en C donde 925 00:41:47,700 --> 00:41:50,550 puede comenzar a factorizar un código en archivos de cabecera, 926 00:41:50,550 --> 00:41:53,520 así que podemos hacer lo mismo en HTML. 927 00:41:53,520 --> 00:41:56,030 Y un paso hacia la que es como sigue. 928 00:41:56,030 --> 00:42:02,230 Tenga en cuenta que esta versión, es CSS1.html Estructuralmente la misma página web exacta. 929 00:42:02,230 --> 00:42:05,250 Así que tengo un montón de divs, pero esta vez, no tengo 930 00:42:05,250 --> 00:42:07,220 librado de la envoltura div como verás. 931 00:42:07,220 --> 00:42:12,390 >> Y me he dado esos tres divs superior, media e inferior, identificadores únicos. 932 00:42:12,390 --> 00:42:14,760 Esto es bueno, porque por dando esas divisiones 933 00:42:14,760 --> 00:42:18,715 de las páginas identificadores únicos, Puedo hacer referencia a ellos en otros lugares. 934 00:42:18,715 --> 00:42:19,215 ¿Dónde? 935 00:42:19,215 --> 00:42:21,070 Bueno, déjame desplazarse hacia arriba. 936 00:42:21,070 --> 00:42:24,070 Y hasta el momento, en cualquier momento nos hemos visto a la cabeza de una página web, lo que es 937 00:42:24,070 --> 00:42:28,560 la única etiqueta que hemos tenido en la cabeza de una página web? 938 00:42:28,560 --> 00:42:29,740 Un poco más fuerte. 939 00:42:29,740 --> 00:42:30,799 Sólo el título hasta el momento. 940 00:42:30,799 --> 00:42:32,590 Pero resulta que hay algunas otras cosas 941 00:42:32,590 --> 00:42:35,840 usted puede poner en allí, uno de que se llama una etiqueta de estilo. 942 00:42:35,840 --> 00:42:37,850 Así que hace un momento, buscamos a un atributo de estilo. 943 00:42:37,850 --> 00:42:39,150 Resulta que hay una etiqueta de estilo. 944 00:42:39,150 --> 00:42:41,200 Pertenece interior el jefe de una página web. 945 00:42:41,200 --> 00:42:42,840 Y ahora noto lo que estoy haciendo. 946 00:42:42,840 --> 00:42:46,540 Que tengo dentro de esta etiqueta de estilo lo siguiente. 947 00:42:46,540 --> 00:42:51,190 Estoy literalmente mencionar en la línea 20 del nombre de una etiqueta que quiero para estilizar. 948 00:42:51,190 --> 00:42:53,489 >> Entonces tengo llave de apertura y cerrado corchete. 949 00:42:53,489 --> 00:42:56,030 Así similares en espíritu a C, pero de nuevo, esta no es una función, 950 00:42:56,030 --> 00:42:57,796 esto es sólo un detalle sintáctica aquí. 951 00:42:57,796 --> 00:43:00,170 Y luego, por supuesto, yo estoy diciendo el navegador, hey navegador, 952 00:43:00,170 --> 00:43:05,210 hacer que todo el cuerpo de la página tener una alineación de texto de centro. 953 00:43:05,210 --> 00:43:06,930 Y entonces esto está diciendo lo siguiente. 954 00:43:06,930 --> 00:43:12,600 Hey navegador, si usted ve un HTML elemento o etiqueta en la página que 955 00:43:12,600 --> 00:43:17,040 tiene un identificador único de la parte superior, por lo que el símbolo de hash aquí sólo significa 956 00:43:17,040 --> 00:43:21,010 idea única de la parte superior, adelante y hacer que su tamaño de fuente 36 957 00:43:21,010 --> 00:43:22,490 y su peso negrita. 958 00:43:22,490 --> 00:43:26,840 >> Hey navegador, un elemento cuya ID es media, lo convierten en 24 píxeles. 959 00:43:26,840 --> 00:43:31,070 Y oye navegador, si usted ve un idea de fondo, lo convierten en 12 píxeles. 960 00:43:31,070 --> 00:43:33,540 El efecto en el final es exactamente el sam. 961 00:43:33,540 --> 00:43:36,500 Si entro en CSS 1, el página tiene el mismo aspecto. 962 00:43:36,500 --> 00:43:39,810 Pero estamos un paso hacia un poco mejor diseño. 963 00:43:39,810 --> 00:43:44,850 Permítanme ahora vuelvo aquí para CSS2 y veo qué otra cosa que he hecho. 964 00:43:44,850 --> 00:43:48,030 >> Ahora la página está muy, muy limpio. 965 00:43:48,030 --> 00:43:50,730 De hecho, puedo encajar todos el contenido de una página aquí. 966 00:43:50,730 --> 00:43:54,270 Pero, ¿qué nueva etiqueta he introducido, obviamente? 967 00:43:54,270 --> 00:43:54,770 Enlace. 968 00:43:54,770 --> 00:43:57,853 Y no es el mejor nombre para una etiqueta, porque no es un enlace en el sentido 969 00:43:57,853 --> 00:44:00,780 que lo conocemos, pero esto significa un enlace en algún otro archivo. 970 00:44:00,780 --> 00:44:02,890 Esto es algo así como aguda incluyen en C. 971 00:44:02,890 --> 00:44:06,280 >> Esta es la manera en HTML para decir oye navegador, 972 00:44:06,280 --> 00:44:10,240 ir a buscar los contenidos de el archivo llamado css2.css. 973 00:44:10,240 --> 00:44:12,880 La relación, para mí, es que es una hoja de estilo. 974 00:44:12,880 --> 00:44:17,980 Y de hecho, eso es lo que el de la S de estilo en cascada en medio sábanas. 975 00:44:17,980 --> 00:44:20,350 Se trata de una hoja de estilo. 976 00:44:20,350 --> 00:44:23,120 Es sólo el archivo de texto que contiene un montón de propiedad. 977 00:44:23,120 --> 00:44:25,940 Es un montón de estilos que desea aplicar a una página. 978 00:44:25,940 --> 00:44:28,860 >> Y por lo que este aparentemente es refiriéndose a un segundo archivo. 979 00:44:28,860 --> 00:44:32,970 Y si abro que, CSS2.css, cuenta de que todo lo que he hecho 980 00:44:32,970 --> 00:44:35,900 es copiar y pegar todo de esto en este archivo. 981 00:44:35,900 --> 00:44:38,220 Y ahora, incluso si usted nunca ha codificado estas cosas antes, 982 00:44:38,220 --> 00:44:40,700 basta con considerar la sombrero de la ingeniería proverbial 983 00:44:40,700 --> 00:44:44,220 , ¿por qué es esto un mejor diseño, probablemente? 984 00:44:44,220 --> 00:44:48,910 Factoring esas propiedades CSS, ponerlos en su propio archivo. 985 00:44:48,910 --> 00:44:51,330 A pesar de que hemos resuelto este Hace problema como cinco minutos 986 00:44:51,330 --> 00:44:52,600 en la primera versión. 987 00:44:52,600 --> 00:44:55,730 >> Nosotros no hemos mejorado la página estilísticamente, 988 00:44:55,730 --> 00:44:57,520 esto es simplemente mejor diseño en algún sentido. 989 00:44:57,520 --> 00:44:58,990 ¿Por qué piensas? 990 00:44:58,990 --> 00:45:01,510 Sí. 991 00:45:01,510 --> 00:45:02,260 Más flexible, ¿cómo? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Sí. 994 00:45:05,540 --> 00:45:07,373 Así que si quieres ir atrás y cambiar las cosas, 995 00:45:07,373 --> 00:45:09,540 Ahora, usted tiene un solo lugar donde puede cambiar las cosas. 996 00:45:09,540 --> 00:45:11,622 Y de hecho, algo como problema establece siete, 997 00:45:11,622 --> 00:45:13,690 donde vamos a implementar un sitio web de comercio de valores, 998 00:45:13,690 --> 00:45:15,523 eso va a tener un toda montón de páginas. 999 00:45:15,523 --> 00:45:17,620 Y sería muy molesto si usted decide, hm, 1000 00:45:17,620 --> 00:45:21,630 Realmente no me gusta 24 píxeles, quiero que sea 28 píxeles o un poco más grande. 1001 00:45:21,630 --> 00:45:23,550 Y luego tener que hacer un mundial buscar y reemplazar 1002 00:45:23,550 --> 00:45:27,560 o abrir todos los archivos de su sitio web simplemente para cambiar realmente un valor. 1003 00:45:27,560 --> 00:45:31,290 Al tener estos estilos en un lugar central, 1004 00:45:31,290 --> 00:45:34,720 Ahora usted puede abrir un archivo de texto en CS50IDE en cualquier programa, 1005 00:45:34,720 --> 00:45:36,479 cambiarlo, guardarlo, y hecho. 1006 00:45:36,479 --> 00:45:38,270 Usted ha propagado los cambios en todas partes. 1007 00:45:38,270 --> 00:45:42,450 Y eso sería el mismo en un archivo dot h también. 1008 00:45:42,450 --> 00:45:46,697 Así que cualquier pregunta por lo tanto ahora en esta sintaxis? 1009 00:45:46,697 --> 00:45:48,530 Muy bien, así que hemos hecho todo lo que parece 1010 00:45:48,530 --> 00:45:51,170 excepto en realidad aplicar hipervínculos. 1011 00:45:51,170 --> 00:45:52,740 Y así vamos a seguir adelante y hacer esto. 1012 00:45:52,740 --> 00:45:54,830 Déjame ir adelante y crear un nuevo archivo aquí. 1013 00:45:54,830 --> 00:45:59,970 Voy a llamarlo link.html, poner en el código actual. 1014 00:45:59,970 --> 00:46:03,000 >> Y yo voy a hacer abierta soporte de tipo doc html. 1015 00:46:03,000 --> 00:46:05,970 Como acotación al margen, esta cosa en la superior, esta declaración de tipo de documento, 1016 00:46:05,970 --> 00:46:08,420 que es el único que es raro con el signo de exclamación. 1017 00:46:08,420 --> 00:46:12,100 Sólo tienes que hacerlo allí y significa que estamos utilizando la versión de HTML 5. 1018 00:46:12,100 --> 00:46:14,460 Las versiones anteriores de idioma tenía mucho más largo 1019 00:46:14,460 --> 00:46:16,400 cadenas que se necesitaba para poner allí. 1020 00:46:16,400 --> 00:46:18,620 Así que aquí es un ejemplo llamado enlace. 1021 00:46:18,620 --> 00:46:20,950 >> Necesito un cuerpo de mi página web aquí. 1022 00:46:20,950 --> 00:46:29,770 Y en este caso, un href iguales digamos HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 y mi sitio web favorito, vamos a decir. 1024 00:46:35,420 --> 00:46:38,550 Muy bien, por lo que una muy página inocuo, fácil de usar. 1025 00:46:38,550 --> 00:46:42,950 Si ahora entro en mi directorio lista aquí y abrir link.html, 1026 00:46:42,950 --> 00:46:44,780 tenemos hiper texto. 1027 00:46:44,780 --> 00:46:47,410 >> Y de hecho, aquí es donde la H en HTTP viene. 1028 00:46:47,410 --> 00:46:51,580 Protocolo de Transferencia de Hipertexto es acerca de la transferencia de texto 1029 00:46:51,580 --> 00:46:53,840 que tiene hipervínculos a otros recursos. 1030 00:46:53,840 --> 00:46:58,210 Y de hecho, aquí está lo familiar, si retro, azul enlace que si se hace clic, 1031 00:46:58,210 --> 00:47:02,607 en realidad me llevan a Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Ahora, oh, eso es que saldrá pronto. 1033 00:47:03,940 --> 00:47:08,970 Muy bien, así que ahora, ¿cuáles son algunas de las consecuencias de esto? 1034 00:47:08,970 --> 00:47:11,610 >> Y, francamente, el mundo comienza para conseguir un poco más familiar 1035 00:47:11,610 --> 00:47:15,090 y también un poco más miedo pero también un poco más 1036 00:47:15,090 --> 00:47:17,840 auto defendible una vez que comience para entender estas cosas. 1037 00:47:17,840 --> 00:47:21,610 Debido a que las probabilidades son, algunos de ustedes, si vas a través de su carpeta de spam Gmail o incluso 1038 00:47:21,610 --> 00:47:23,990 su bandeja de entrada, probablemente conseguido algún tipo de correo electrónico 1039 00:47:23,990 --> 00:47:26,980 que usted está pidiendo que cambiar su contraseña verificar tal vez o tal vez 1040 00:47:26,980 --> 00:47:28,910 sus credenciales de PayPal o qué sé yo. 1041 00:47:28,910 --> 00:47:34,510 >> Y de hecho, es posible que haya recibido algo que dice como hacer clic aquí 1042 00:47:34,510 --> 00:47:42,260 para restablecer su contraseña de PayPal. 1043 00:47:42,260 --> 00:47:44,130 Y ahora, observe, si esto no es Disney.com 1044 00:47:44,130 --> 00:47:51,600 pero al igual que badplace.com y recargar, tenga en cuenta que el texto aquí 1045 00:47:51,600 --> 00:47:53,710 podían decir nada en absoluto. 1046 00:47:53,710 --> 00:47:55,260 Y de hecho, esto es sólo palabras. 1047 00:47:55,260 --> 00:48:04,610 ¿Por qué no puedo ser realmente muy malicioso y decir http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Haga clic aquí restablecer su PayPal contraseña y ahora recargar. 1049 00:48:14,090 --> 00:48:16,220 Esto se ve muy legítimo, ¿no? 1050 00:48:16,220 --> 00:48:20,470 Quiero decir, no me haga clic en un correo electrónico que sólo dice esto. 1051 00:48:20,470 --> 00:48:22,450 Pero notar la dicotomía aquí. 1052 00:48:22,450 --> 00:48:26,880 Dice www.paypal.com, y de hecho, espera un minuto, 1053 00:48:26,880 --> 00:48:29,210 sabemos que usted quiere el s para la seguridad. 1054 00:48:29,210 --> 00:48:35,450 Así que ahora, vaya a www.paypal.com HTTPS, pero si usted nunca ha hecho esto antes, 1055 00:48:35,450 --> 00:48:38,182 no entrar en el hábito de se cierne sobre pequeños que enlaza aquí. 1056 00:48:38,182 --> 00:48:39,890 Y es difícil de ver en la pantalla de allí, 1057 00:48:39,890 --> 00:48:41,340 y no es todo lo más fácil aquí. 1058 00:48:41,340 --> 00:48:43,615 Pero hasta aquí en el pequeño rincón pequeño 1059 00:48:43,615 --> 00:48:45,740 el navegador hace realidad que vamos decirle 1060 00:48:45,740 --> 00:48:48,850 a badplace.com lugar de Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Ahora, ¿a dónde vamos con esto? 1062 00:48:51,620 --> 00:48:54,859 Todos los ejemplos que hemos hecho hoy, hemos codificado y escribimos manualmente duro. 1063 00:48:54,859 --> 00:48:56,900 La web es increíblemente sin interés cuando dura 1064 00:48:56,900 --> 00:48:59,844 codificar sus páginas web para que el contenido es estático y nunca cambia. 1065 00:48:59,844 --> 00:49:01,760 Por supuesto, todo nuestro sitios web favoritos de hoy, 1066 00:49:01,760 --> 00:49:04,470 ya sea Gmail o Twitter o Facebook o cualquier número de otros 1067 00:49:04,470 --> 00:49:05,290 son dinámicos. 1068 00:49:05,290 --> 00:49:07,340 Están cambiando en respuesta a la entrada de usuario 1069 00:49:07,340 --> 00:49:08,840 al igual que los resultados de búsqueda de Google. 1070 00:49:08,840 --> 00:49:12,415 >> Y así, el miércoles, lo que hacemos es dejamos HTML y CSS introducción 1071 00:49:12,415 --> 00:49:14,290 detrás de nosotros y nos tomamos por sentado que ahora 1072 00:49:14,290 --> 00:49:16,640 conocerla y introducimos un nuevo lenguaje de programación 1073 00:49:16,640 --> 00:49:19,050 llamado PHP, lo que le gusta C, se nos va a dar 1074 00:49:19,050 --> 00:49:22,450 el poder de crear en realidad programas que ellos mismos generan salida. 1075 00:49:22,450 --> 00:49:25,900 En este caso, vamos a utilizar PHP para generar dinámicamente web 1076 00:49:25,900 --> 00:49:27,340 páginas con este nuevo lenguaje. 1077 00:49:27,340 --> 00:49:28,989 Así que más en que el miércoles. 1078 00:49:28,989 --> 00:49:29,530 Nos vemos entonces. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [REPRODUCCIÓN DE MÚSICA] 1081 00:49:37,380 --> 00:52:38,864