[REPRODUCCIÓN DE MÚSICA] 

DAVID J MALAN: Este es CS50 y este es el comienzo de la semana 7. Así que bienvenida. Y usted puede recordar que en el problema en cuatro sets, había un poco de una búsqueda del tesoro para algunos fabulosos premios por el que después de recuperar las fotos el personal, tanto aquí como en New Haven, que estaba el reto de encontrar, ya que muchos de los científicos de la computación como pudieras. Y tenemos un todo montón de presentaciones. Pensé en compartir algunos con ustedes aquí hoy. 

Y pondremos todo esto en línea. Pero, en particular, quería llamar su atención a-- bien uno, Sam estaba en un buen número de ellos en general, posando como este. Sin embargo, parece que a partir de Esta mañana, el ganador fue un cierto alguien llamado Ken con 24 del personal capturado en cámara o un poco más si se toma en cuenta personal múltiple en las imágenes. En la foto es Ken próximo a María en New Haven. 

Ahora, Ken, sin embargo, resulta fuera es algo de un caso esquina que aún no ha ocurrido antes. Resulta que no se le ocurrió para mí para poner letra pequeña en el problema en cuatro sets que dice que el personal son inelegibles para los fabulosos premios porque Ken es, por supuesto, uno de los fotógrafos en nuestro personal. Ahora, dicho esto, él originalmente me escribió para decir por favor no publicar estas fotos en línea. Creo que en gran parte porque la mayoría de las fotos que este fotógrafo tomó mira un poco de algo como esto. Y similares. 

Pero Ken le gustaría que yo aseguro que que es un muy buen fotógrafo, Él es un profesional, él toma fotos que no son borrosas, que son mejores en el foco, y él tomó un buen número de nuestro propio personal. Pero en lugar de solamente reconocer Ken, lo que pensamos que nos gustaría hacer es ir a través de la lista de estudiantes reales que presentaron. Y resulta que Lance con 15 fotos a partir de esta mañana fue nuestro ganador. 

Y representa aquí es Lanza con Colton, con Skaz, conmigo mismo y con Sam. Pero luego resulta que a partir de 11:46 AM, por lo que hace tan sólo un poco, Volví a mi correo electrónico y encontré que teníamos sin embargo, una presentación más por un estudiante llamado Bonnie cuyo correo electrónico se limitó a decir esto. No voy a mentir, estoy haciendo esto durante la clase. Y luego procedió a colocar justo 14 fotos, uno menos que la lanza de 15. 

Pero en las fotos de Bonnie, resulta cabo eran varios miembros del personal, Sam entre ellos, por lo que lo que creíamos que hacer es reconocer ambas cosas. Así que además de conseguir el Dropbox espacio que todos los que participaron recibe, estas dos secciones también recibir un buen almuerzo atendido por ellos y su sección Se acopla la semana que viene. Y por lo que tendrá noticias nuestras, Lance y Bonnie, por eso. Así que las grandes felicidades a ellos. Ahora, aquellos de ustedes que haría al igual que el almuerzo más general saber que el almuerzo CS50 en Cambridge y New Haven es este viernes. Ir a la página web barra de RSVP del CS50. Y ahora una palabra sobre los seminarios. Más curricularly. Así que estamos a punto de la punto del semestre donde debe empezar pensando en los proyectos finales. Y de hecho, en sólo un poco, la voluntad los llamados propuestas pre deberse. Así pre propuestas están destinadas a ser muy bajo impacto y realmente sólo una oportunidad para componer una nota corta su compañero de enseñanza para informar él o ella lo que usted está pensando puede ser que desee hacer para su proyecto final. 

Ahora, muchos estudiantes terminan haciendo web basa proyectos finales. Y, por supuesto, sólo somos semana pasada en este momento y más allá de zambullirse en la programación web. Así que no se preocupe si usted no tienen absolutamente ninguna idea de cómo usted construir las ideas que que pueda tener en su mente. Esto es en realidad una función de fuerza para hacerle pensar y hablar con su TF respecto. Pero para ayudarle con eso, y con proyectos fin de carrera, en última instancia, saber que CS50 tiene una tradición de ofrecer seminarios. 

Y estos son opcionales, manos, o dar una conferencia sobre la base de las oportunidades para aprender más sobre los temas que son un poco de auxiliar al curso de plan de estudios, pero no obstante maravillosa materiales para impulsar proyectos finales. Y lo que esta es la lista que es Personal CS50 aquí en New Haven han llegado con de este año sobre iOS programación, Android programación, desarrollo de juegos, y racimos de más herramientas y los lenguajes y técnicas. 

Así que mantener un ojo en el sitio web del CS50. Y mientras tanto, si desea Si está interesado en alguno de ellos, ir al registro slash del CS50. Y entonces nos daremos seguimiento en cuanto a la días y horarios de vuelo y ubicaciones y todo-- casi todo lo hará ser escuchados y también está disponible a pedido después si usted no puede realmente hacerlo. Así que sin más preámbulos, dejado la última vez con GET. 

Y esto era como el mensaje de que era en el interior de la envolvente virtual, recordar, que pasamos de router a router enrutador entre un navegador web y una red servidor. Y ese mensaje parecía un poco algo como esto. Este fue el mensaje más arcana que era en realidad dentro de un sobre escrita en un pedazo de papel cuyo primera línea dice, literalmente, llegar barra. 

Y así como una comprobación de validez, ¿qué denotan barra? ¿Qué significa la barra cuando solicitando una página web? Usted solicita que todo el tiempo. La mayoría cada vez que visita un sitio web, en realidad no escriba un nombre de archivo. Es probable que sólo tiene que ir a Facebook.com, entrar, gmail.com, o similares. ¿Y qué representa barra? ¿Qué archivo? ¿O qué página, específicamente? 

El índice, sí. Así que la página por defecto. Así que si no se especifica un archivo nombre que vamos a empezar a ver, en realidad estás simplemente solicitando dame la página por defecto de Facebook o darme mi bandeja de entrada o dar Me la página predeterminada de noticias en la página web de la CNN o similares. Y un servidor entonces responde a ese mensaje con algo así, decir que sí, yo hablar HTTP versión 1.1. 

200, que es un estado de código que los seres humanos raramente a ver porque es bueno. Porque significa OK, la solicitud fue recibido y se manejan adecuadamente. Y el tipo de contenido aparentemente en la respuesta es muy a menudo, pero no siempre, texto. Y específicamente, HTML. Y eso es en realidad cuando nos fijamos en la actualidad. 

Así que, de hecho, me voy a ir por delante y abrir un navegador. Voy a usar Chrome, usted puede utilizar más cualquier navegador en las semanas por venir. Generalmente recomendamos Cromo porque es particular bueno para los desarrolladores de software. Tiene un montón de construido en herramientas que hacen más fácil para desarrollar no sólo HTML y CSS, las cosas que vamos a empezar a hablar de la actualidad, sino también otros idiomas. 

Y yo voy a seguir adelante e ir a-- Voy a Controlar clic o derecha haga clic en cualquier parte de una página web. Y yo voy a ir a Inspeccionar Elemento. Y yo voy a modificar mi pantalla de sólo un poco aquí. Permítanme pasar esto a la parte inferior. Así que esto es lo que se llama Inspector de Chrome. Así que esto es como una depuración herramienta integrada en Chrome. 

Todos ustedes ya tienen este si has estado usando Chrome. Y le permite ver lo que está pasando de debajo del capó de alguna página web. Así que vamos a echar un hecho mirar esto de la siguiente manera. Tiene forma más características y nos preocupamos por hoy. Pero hay estas fichas por aquí. Elementos, red, fuentes, línea de tiempo, y algunas otras cosas. Voy a hacer clic en Red por un momento. 

Y es un poco abrumador a primera vista aquí. Pero, ¿qué voy a hacer es dejar me simplifico un poco. Voy a encender la grabación de la luz para que sea rojo. Y yo voy a decir a preservar registro. Y esto es sólo un poco Lo que me di cuenta en el tiempo que va a ahorrar todo lo que sucede en el navegador. Y ahora me voy a ir a http://facebook.com. 

En realidad, vamos a hacer www por si acaso, recortar. Intro. Así que un URL que muchos de es posible que haya visitado. Y ahora la web de Facebook página aparece en la parte superior. Y entonces un montón de cosas pasó volando en la parte inferior. Y de hecho, resulta que cuando usted visita Facebook.com, que no sólo está la fabricación de una petición HTTP, resulta que va a Facebook.com envía 41 de esos sobres, cada uno con su propia petición GET, como se ha indicado, aunque detrás de la pantalla aquí, en la parte inferior de la pantalla, indica que, de hecho, mi navegador hizo 41 las solicitudes. 

Y en total, se transfirió 861 kilobytes y tomó por alguna razón tanto como ocho segundos descargar todo eso. Así que en realidad es un poco raro que el sitio de Facebook tendría que largo, pero que así sea en este caso. Ahora, todo esto yo no me importa sobre excepto por la solicitud más alta. Así que vamos a ir a esta de aquí y déjame Alejar por un momento. 

Y permítanme zoom en esto. Así que lo que he hecho en la izquierda a pesar de que no hay mucho que hacer por aquí es que me he destacado Facebook.com y después Noto que estoy desplazarse hacia abajo, desplazamiento hacia abajo, el desplazamiento hacia abajo, para solicitar cabeceras. Y verás que Chrome está mostrando me esencialmente el contenido interno de la solicitud que hice. No es el formato en lo mismo manera, pero notan que hay mención de conseguir, note que hay mención de la huésped, Facebook.com, el camino, o barra, que es el archivo que solicité. 

Y luego, si me desplazo una copia de seguridad, vamos a realidad ver que lo volvió Facebook para mí es todas estas cabeceras. Así que dentro de ese sobre virtual de hecho son un montón de pares de valores clave. Una palabra, una coma, y ​​luego un valor. Una palabra, una coma y un valor. Estos son llamados encabezados. Y no hay manera más detalle aquí que que realmente importa en este momento. 

Pero esto no tiene rival último allá abajo, notar, que el servidor de Facebook.com, de hecho dicho aquí viene algo de HTML texto. Así que todo esto es decir que cuando usted solicita una web página de un navegador a un servidor, ese servidor responde con un sobre de su propio dentro de los cuales es de texto. En otras palabras, HTML. HyperText Markup Language. Lo cual es otra lengua que introducimos hoy que los seres humanos o los ordenadores generan con el fin de poner en práctica páginas web. 

Específicamente, echemos un vistazo a esto. Voy ahora a volver el sitio web de Facebook. Y voy a poco control de clic o clic derecho y haga clic en Ver código fuente. E incluso si usted no utiliza Chrome, IE puede hacer esto, Firefox puede hacer esto, Safari puede hacer esto, aunque el menú opciones podrían parecer un poco diferente. Y este es el HTML que Mark y compañía en Facebook haber escrito. 

Y colectivamente, este lenguaje aquí implementa el azul y la página en blanco que vimos hace un momento. Ahora, esto es un poco abrumador. Pero si miramos hacia arriba a la izquierda, estamos va a comenzar a ver algunos patrones. Parece que hay mucho de éstos el soporte de ángulo abierto y luego está este código HTML palabra clave. Aquí hay otro abierto soporte angular y la cabeza. 

Aquí está, si desplácese hacia abajo y hacia abajo y hacia abajo, yo soy va a seguir adelante y tratar para buscar algo. Hay muy por encima a la derecha aquí es el cuerpo paréntesis abierto. Y recordar de pasada tiempo que propusimos que la página web más sencilla que un humano podría escribir podría parecer un poco algo como esto. Abrir etiqueta HTML, cabeza abierta etiqueta, etiqueta del título abierto, a continuación el título de cierre, cabeza cerrada, abierta etiqueta del cuerpo, un poco de texto, cuerpo cerrado, HTML cerrado. 

Pero una pausa aquí por un momento. Este código, incluso si usted tiene Nunca escrito antes pero todavía no entiendo muy bien lo que está pasando, se ve muy bien. Derecho, es muy limpio. Es muy estilísticamente agradable. Una gran cantidad de sangrado y el espacio blanco. Facebook es no es. ¿Por qué es Facebook tanto peor de lo que en la escritura de HTML? Al parecer. 

Derecho, esto es como un solo de cada cinco para el estilo. Hay una razón de peso para ellos para cortar estas esquinas. Muy bien, así que no quiero hacer más fácil para que lo leas. Así que, en cierto sentido, son ofuscar ella, tipo de codificación que al menos estéticamente por lo que es más difícil para Myspace ir y estafar a su página web y el HTML para él. Resulta que con los programas sin embargo, incluyendo Chrome, podemos limpiar esto muy fácilmente. Por lo tanto, no es que es como la razón. ¿Qué otra cosa podría ser la causa. Sí. Sí, los datos de los costos de espacio en blanco. ¿Qué quieres decir? Si exacto. Si usted choca con la tecla Tab mucho o la barra espaciadora, considere las implicaciones. Así que cada tecla del teclado es un [Inaudible] representado como un byte. 

Así que supongo que Marcos o cualquiera de los desarrolladores estos días golpea la barra espaciadora una vez en esta página HTML que representa la página principal de Facebook. Y Facebook tiene mucho de los usuarios de estos días. Así que supongo que la página de inicio de Facebook es visitado por millones de personas en la actualidad. Y alguien en Facebook tiene golpear la barra espaciadora una vez. 

Así que un byte adicional, mil millones de solicitudes, cuánto más datos Facebook transferir en internet porque alguien golpeó la barra espaciadora en su teclado? Mil millones de bytes, o un gigabyte de se están enviando datos desde los servidores de Facebook a personas de todo el mundo sin una buena razón. Ahora, eso es sólo un espacio. 

Imagínese si en realidad nos limpiamos esto cosa y sangría y añadió una gran cantidad de espacio en blanco y caracteres de tabulación y espacios, terminas gigabytes de gasto, si no terra bytes más del espacio. Y tan super común en el mundo real de desarrollo web es minify su código. Y, finalmente, veremos cómo se puede hacer esto. 

Pero hoy en día, vamos a empezar a escribir código que en realidad es legible por nosotros los seres humanos. Resulta, sin embargo, si nos remontamos a esta herramienta en Chrome Inspeccionar Elemento, anteriormente, estábamos en la ficha Red. Resulta que si vas a la pestaña elementos, lo que se ve es Chrome de bastante impresa versión de esa misma HTML. Para ello hemos deobfuscated ella. Así que no es rival para un ordenador. Y ahora puede hacerlo realidad clic y empezar para ver la jerarquía que es una página web. Así que vamos a hacer esto realidad. Voy a seguir adelante y abrir el mi Mac un programa llamado de edición de texto. Y recuerde que esto es sólo un programa de texto super simple. Windows tiene notepad.exe. Y me voy a pie de la letra escriba lo siguiente. Doc tipo HTML, soporte abierto HTML, HTML cerrado soporte, tenemos la cabecera de la página de aquí, Al final de la cabecera de la página de aquí, un título será, hola mundo. 

Y luego aquí abajo, necesitamos el cuerpo de la página web. Cuerpo cerrado. Y luego aquí, hola mundo. Correcto. Así que hemos escrito una página web muy rápido. Voy a guardarlo como hello.html en mi escritorio. Mi Mac va a quejarse, pensando que, espera un minuto, este es un archivo de texto, hacer quieres llamarlo .txt? Pero no, yo quiero usar HTML punto. 

Y entonces lo que es bueno si simplemente haga doble clic en este archivo, hello.html, aquí está mi página web. Por desgracia, yo soy el única persona en el mundo ¿quién puede visitar esta página en este momento. Porque ¿de dónde viven parecer? Es en mi Mac, ¿verdad? Lo cual es inútil. Al igual que nadie en esta sala y mucho menos en el Internet en realidad puede visitar esa página. Así que hoy, tenemos que introducir otro elemento. 

Y para hacer esto, voy a seguir adelante y abrir la nube 9. Así nube 9 es por supuesto una nube clientes-- basada CS50 IDE-- Eso tiene todos nuestros espacios de trabajo corriendo en algún lugar de internet. Y eso significa que todos nuestros archivos son de acceso público ya. Así que vamos a seguir adelante y hacer esto. Voy a seguir adelante y crear un nuevo archivo NCS50IDE. Voy a guardarlo como antes como hello.html y haga clic en Guardar. Y ahora sólo para ahorrar tiempo, me voy seguir adelante y copiar pegar el código en lugar de escribirla. Y guardarlo. Y por lo que ahora tengo una archivo llamado hello.html. Pero, ¿cómo hacer que en realidad abrirla como una página web? Bueno, resulta que el integrado en CS50 IDE no sólo es un compilador como clang y un depurador como GDB y racimos de otros programas, hay realmente una de pleno derecho servidor web funcionando en CS50 IDE. 

Todos ustedes, es decir, tener su propio servidor web. Y un servidor web es sólo una pieza de software cuyo propósito en la vida es para servir páginas web. Para escuchar las peticiones de los navegadores y responder con pequeños sobres virtuales dentro de los cuales es el contenido que he escrito. Así que este servidor web es fuente realmente libre y abierto. Dónde código abierto sólo significa software que alguien más tiene escrito que todos nosotros podemos realmente ver y descargar e incluso cambiar el código fuente. Y se llama Apache. 

Y lo hemos hecho un poco más fácil utilizar en CS50IDE llamándolo Apache 50. Así que en realidad puede entender lo siguiente. Voy a decir Apache 50 inicio. Y entonces yo sólo voy a decir de puntos. Y vemos algunos un tanto mensaje arcana diciendo el establecimiento de Apache documento [? grupo?] de casa, ubuntu, sea lo que sea, reducir espacio de trabajo. A partir servidor web Apache 2 con éxito. 

Así que cuento largo, me simplemente han empujado un botón y se convirtió en un servidor web que ahora es escuchar en Internet en el puerto TCP 80 en una dirección específica. Y dice aquí, y esto va a cambiar en función en su nombre de usuario y otros factores, notar ahora si hago clic en esto, IDE50 punto jharvard y tal y así, notar que todo este tiempo Durante los últimos semana, es posible que tenga notado que su propio nombre de usuario está incrustado en la parte superior derecha esquina de CS50IDE. 

Y que en realidad ha sido todo esto tiempo de la dirección a la que se puede visitar todos sus archivos a través de la web. Hasta ahora, no ha importado, porque en C, por lo general, quieren que las cosas se ejecutan en un terminal, no en la web. Pero hoy, empezamos la escritura de código basado en la web que nosotros queremos accesible en las direcciones URL públicas. Así que lo que voy a hacer es haga clic en este URL. 

Y noto que veo bastante Índice feo, un listado de directorio, pero ¿qué archivo salta a la vista es probable? Hello.html. Esto se debe a que salvé el archivo en mi espacio de trabajo. Y lo que yo he dicho Apache servidor web se buscará en el directorio del espacio de trabajo de David. Y que a nadie en el mundo vea esos archivos. 

Y de hecho, si ahora haga clic en hello.html, Veo dentro de esta pestaña exactamente ese archivo. Ahora note, nube obra del 9 algo un poco de ayuda para nosotros. Dentro IDE CS50, observe que hay De repente una barra de direcciones. Eso es porque a pesar de que estamos utilizando Chrome para visitar CS50IDE, interior de CS50IDE es su propia versión de un navegador web en este momento. Y así, en lugar de complicar las cosas, como tal, Voy a seguir adelante y simplemente copiar esta URL. Voy a seguir adelante y justo abrir mi propia ventana Chrome. Así que no hay magia aquí, no hay CS50IDE. Yo sólo voy a pegar literalmente mi J Harvard URL y pulse Enter. Y voilá, ahora y En teoría, todos en Internet, si he configurado Apropiadamente, permisos puede visitar este archivo. Y ahora, si me dijo: hello.html, voilá, ahí es mi página web increíblemente decepcionante. Así que vamos a hacer una comprobación de validez rápido. Porque todo eso es conceptual configuración. Y en realidad no he realmente te enseñó cómo escribir HTML en sí. Por lo tanto cualquier duda ahora en lo que acaba de suceder? Sí. ¿Tiene CS50 poseen estas páginas web? ¿En qué sentido? Buena pregunta. Así CS50 de propietaria CS50.io. De hecho hemos comprado ese nombre de dominio. Y por la naturaleza de los chicos ingresando a CS50IDE, todos ustedes obtiene lo que se llama un subdominio. 

So-IDE50 malan o IDE50-Rob.CS50.io, esa es su dirección única dentro nuestro nombre de dominio. Así que para los propósitos de la supuesto, usted tiene su propia dirección única. Pero hemos simplificado las cosas por comprar el dominio de nivel superior, CS50 dot I / O y luego todos los demás están dentro de eso, por así decirlo. Y vamos a volver a eso en un par de semanas, probablemente, especialmente al proyecto final tiempo, cuando algunos de ustedes puede ser que desee para obtener sus propios nombres de dominio. En realidad es relativamente sencillo. Correcto. Así que ahora vamos a hacer esto. Voy a volver a CS50IDE, donde mi archivo en este momento, hello.html, no es tan interesante. Me gustaría hacer algo un poco mejor que eso. Así que voy a hacer algo como esto. Déjame paragraphs.html abierta. Así que este es un archivo que escribí con antelación. En la parte superior de la misma, al igual que siempre, tenemos observaciones. Pero en HTML, comentarios mirar un poco diferente. En la línea de tres y la línea 14, que ver la sintaxis para iniciar un comentario y terminar un comentario. 

Pero ninguna de las cosas en entre los asuntos funcionalmente. Es sólo una nota a un humana lo que está pasando aquí. Y al igual que una cordura rápida comprobar, si me desplazo hacia abajo, ¿cuál es la nueva obvia etiqueta que hemos introducido? Las etiquetas hasta ahora que hemos visto están abiertas HTML soporte, cabeza, título, y el cuerpo. Pero lo que es evidentemente nuevo ahora? 

Sí, así p. La etiqueta po etiqueta de párrafo. Y entonces yo sólo prestado algún incumplimiento Texto latino para constituir mis párrafos. Porque lo que quería demostrar es cómo usted puede ser representar párrafos de texto en HTML. Y así lo que está empezando a suceder aquí es que ya hay un patrón de desarrollo. Y déjame ir adelante y hacer esto. Permítanme primero apago Apache. Y yo voy a decir para que se inicie en sí de nuevo en el interior de la fuente actual de siete m directorio. Así que no tengo acceso a todo. 

Y ahora, si me voy de nuevo a este anuncio en el directorio, noto que veo todos los archivos a partir de hoy. Y verás en el siguiente conjunto de problemas, vamos a dará instrucciones para hacer exactamente esto. Si abro paragraphs.html, esto podría así parecerse a un lenguaje de programación a usted si usted no habla o lee América. Pero esto es sólo tres párrafos de texto que se marcan en HTML. 

Y notar el párrafo pausas entre ellos. Porque resulta que, y aunque podría estar inclinado a hacer esto, mientras que en el mundo real, si usted quiere poner línea descansos entre cosas, usted puede ser, sencillamente, hacer esto y pulsa en Guardar. Y ahora, si vuelvo a cargar aquí, previo aviso que todo acaba desdibuja juntos en una sola burbuja de texto. Debido a HTML es una especie de lenguaje mudo. 

Está destinado a ser utilizado en tales de manera que el navegador sólo se hacer explícitamente lo que usted le dice que haga. Así que si usted no dice que dame un nuevo párrafo, no vas a ver un nuevo párrafo. Y de hecho, lo que el navegador va a hacer es aún si pulsa enter, digamos que una y otra vez y de nuevo, moviendo de esta manera texto abajo en la pantalla y luego guardar y luego vuelva a cargar, el navegador va a colapsar todo ese espacio en blanco en una sola, espacios en blanco visible. Correcto. Así que esa es la etiqueta de párrafo. Y así, lo que es el patrón eso es el desarrollo de aquí? Pues bien, parece ser el caso de que HTML es todo acerca de cómo iniciar una etiqueta y terminando una etiqueta. ¿Y qué es una etiqueta? Bueno, es sólo una parte de la sintaxis. Soporte Open, una palabra clave, soporte cerrado, es una etiqueta. O empezar etiqueta. Y luego cuando estás hecho expresarse, como en que haya terminado con el párrafo, lo hace por así decirlo contrario. Pero lo contrario no es exactamente al revés. 

Sólo tiene que anteponga la misma etiqueta de nombrar con una barra diagonal como este. Correcto. Así que no todo lo que emocionante. Y, de hecho, no estamos haciendo el web todo lo que sea más interesante. ¿Qué pasa si quiero hacer cosas más grandes y en negrita? Así resulta que aquí está un ejemplo en headings.html, donde en mi cuerpo, Tengo una etiqueta H1, H2, H3, cuatro, cinco, o seis, todos los cuales parecer bastante arcano. Pero si voy a abrir este ejemplo, vamos a echar un vistazo. Headings.html. 

Así navegadores por defecto puede dar usted texto eso es grande y en negrita de tamaños dispares. H1 es grande. H6 es menor y luego todo lo demás en el medio. Así que eso es interesante, pero todavía no es realmente la web que conozco. ¿Qué pasa si queremos que tengo algo así como una lista. . Así que aquí está una lista con viñetas de tres de las casas de Harvard. 

¿Cómo fue el proceso de hacer esto? Bueno, eche un vistazo a list.html. Y aquí, vemos una poco de funk pero vamos a considerar lo que está sucediendo. Así que basado en lo que acabas de ver, UL significa lista desordenada. Lista desordenada simplemente significa viñetas. No hay números. También hay algo llamado un lista, que es un OL en la etiqueta ordenada. Entonces LI, elemento de la lista es todo lo que significa. 

Y así de forma automática números de todo para usted. Pero, de nuevo, todos los de mi hendidura y el espacio en blanco es sólo por mí. El navegador no es en realidad va a cuidar. Así que a pesar de que no podía hacer esto, sólo para ser claros, no se debe a pesar de que El navegador sigue ser capaz de entenderlo muy bien. Estoy golpeando recarga en mi navegador, estoy haciendo clic recarga y ningún cambio está ocurriendo porque el navegador todavía haciendo exactamente lo que te digo que hacer. 

Correcto. Así que todo esto es sólo texto. Ahora vamos a hacer algo más interesante. Voy a seguir adelante y pedir prestado algo de esto HTML. Voy a seguir adelante y crear un nuevo archivo aquí. Y vamos a llamar a este rick.html. Tenemos desproporcionadamente algo usado llamado un rollo de rick en este clase este año, no sé, simplemente sucedió orgánicamente. 

Y ahora se salió de control. Así que sólo voy a ir con él. Y si voy a Google Imágenes y Rick Astley. Si usted no sabe por qué lo hacemos esto, acabo de leer en la Wikipedia. Cada vez que haya hecho clic en el enlace, alguien ha estado riendo de alguna parte. Y déjame ir ahead-- existe vamos, vamos a ver esta imagen. 

Así que aquí tenemos una imagen en Google. Y vamos a suponer que se trata de razonablemente todas partes en Internet. Así que voy a asumir que está bien para mí para poner en realidad esto en mi página web. Voy a seguir adelante y copiar URL de la imagen. Y ahora si me voy de nuevo a la nube 9, vamos a ver lo que puedo hacer aquí. Así que aquí es sólo una página web. Esta es Rick Astley, jaja, Voy ahora a volver a mi navegador, vuelva a cargar, e interesante. 

¿Dónde está Rick? Así que déjame ver lo que ha pasado. En realidad, yo voy a fingir que yo no hice eso. [Inaudible] lo puso aquí. Volveremos a eso en un momento. Así que aquí está rick.html. Así que eso no es Rick Astley. Así que resulta que podamos en realidad lo añadir aquí. Se trata de Rick Astley. Yo voy a decir que me dan una imagen cuyo fuente es la dirección URL que acabo de copiado, que al parecer, es un feliz cumpleaños una cosa u otra. 

Y ahora voy a cerrar la etiqueta así. Así que esto es envolver super largo. Pero noto que todo lo que tengo hecho imagen corchete abierto es decir, fuente con un atributo de este. Y es una muy larga URL. Y al final, cuenta de esto. Slash ¿Por qué he hecho horca en lugar de, como cualquier otra etiqueta, tener un soporte abierto, IMG, soporte cerrado? Basta con echar una conjetura incluso si no tienen familiaridad alguna con HTML antes. 

Así es cómo se cierra el comando, pero ¿por qué ¿no realmente hacer intuitiva sentido de hacer algo un poco más verbose como cerca de imagen? Sí. Sí. Sólo semánticamente, no hay sentido de a partir de una imagen y terminando una imagen, es allí o no lo es. Por lo tanto, no tiene sentido dejar un espacio para cualquier otra cosa dentro de una imagen. Usted simplemente no puede hacer eso. Y así la sintaxis sería generalmente justo hacer la barra diagonal en el interior de la etiqueta abierta o la etiqueta de inicio y después haga clic en Guardar. 

Así que si ahora vuelve a cargar el archivo, ahora Tengo un buen sitio en Internet la página de cocina aquí. Y podríamos sin duda realmente molestar a la gente mediante la incorporación en vez como un enlace de YouTube. Y de hecho, en cualquier momento ¿Alguna vez has ido a YouTube, y me dejó realmente accidentalmente rick rodar yo aquí. Así que Rick roll. Así rick Roll-- voy a ir aquí. 

[REPRODUCCIÓN DE MÚSICA] 

OK, una persona le gusta eso. Así cuenta de todo este tiempo, si haga clic en el enlace Share, por supuesto obtener la URL que pueda realmente incrustar en un correo electrónico o una imagen forense o en un conjunto de problemas o en una diapositiva. Y ahora, si me vez clic en embed, notar que todo este tiempo, estas cosas ha estado allí. Voy a seguir adelante y copiar este. 

Y sólo para que podamos ver mejor, estoy va a pegar en mi editor de texto. Tenga en cuenta que esto lo YouTube ha estado diciendo. Cada vez que usted visita un Vídeo de YouTube, si desee incrustar el vídeo en su página web, sólo tiene que agarrar esto. Así que este es otro Etiqueta HTML llama un iframe. O un marco en línea. Por lo tanto, también se ve un poco más complejo que todos los demás. Así que resulta que la imagen etiqueta y al parecer la etiqueta iframe tomar lo que son llamados atributos. 

Y este es otro pedazo de sintaxis en HTML. Además de la etiqueta de nombre, nombre de etiqueta abierta del soporte, se puede controlar el comportamiento de la etiqueta por tener un montón de atributos igual valor. Atributo igual valor. Y así, por ejemplo, YouTube nos está diciendo si desea que el ancho de este vídeo para ser 420 píxeles y la altura ser 315 píxeles, eso es cómo lo expresas en HTML. 

La fuente del vídeo se va estar tanto tiempo URL de YouTube y luego algunas otras cosas como la frontera del marco es cero, por lo que probablemente significa que hay sin borde para la cosa. Permitir pantalla completa, probablemente, significa que el usuario puede hacer clic en un botón y realmente la pantalla completa del vídeo. Así que si realmente quiero ser impresionante aquí en Rick punto HTML, en lugar de utilizar la etiqueta de la imagen, y mucho me borro que, en lugar pega este. Y ahora recargar. Y ahora aquí vamos de nuevo. Muy bien, ya es suficiente. Está bien así que intentaré difícil no hacerlo de nuevo. ¿Cuáles son algunos de los robos de balón de aquí? Así HTML, tan feo como estas páginas web son, en realidad es bastante simple. No es un lenguaje de programación. No tiene funciones. No tiene bucles. No tiene condiciones. Todo lo que tiene es decenas de etiquetas diferentes, cada uno de los cuales tiene cero o más atributos. Y de hecho, lo que es divertido acerca HTML como usted comienza a sumergirse en es que es auto enseñable muy. 

Sólo se necesita un entendimiento del marco general de HTML. ¿Qué es una etiqueta, ¿qué es un atributo, ¿cómo en realidad configura una página web como sigue. Y todo lo demás es realmente el resultado de mirar hacia arriba en una referencia en línea o googlear cómo hacer algunas técnica o como hemos visto, busca en la fuente de Facebook código, mirando a un sitio web que te gusta en él es el código fuente y la comprensión de cómo los desarrolladores de allí realmente relajado cosas. 

Así que podemos hacer imágenes también. Y de hecho, lo hicimos hace un momento. Déjame ir adelante y sólo te muestro. He aquí algunos ejemplos de código. Si alguna vez quieres ver gato gruñón. Así que darse cuenta de que lo que pueda tener una etiqueta de imagen aquí. Y tengo un comentario sobre ella. Tengo una alternativa texto para la accesibilidad. Así que alguien que está usando una pantalla lector por razones de vista en realidad puede entonces tener su lector de pantalla decir gato gruñón. Porque si no pueden ver la imagen, que al menos puede tener su ordenador decirles verbalmente lo que es. Y la fuente de ese archivo es cat.jpeg. Así que, de hecho, si yo realmente quería conseguir listo, lo que podría tener done-- Prometo no ir a Rick Astley, por lo Voy a google para un gato en su lugar. Y si voy a Google aquí, y vamos a suponer que esta es una foto de mi gato. 

Supongamos que tengo el control hace clic o la derecha clic en este, por accidente espeluznante. Y cat.jpeg voy para guardar en mi escritorio. Permítanme ahora vuelvo a la nube 9. Tenga en cuenta que aquí, puede ir a cargar los archivos locales. Y si me agarra este archivo, cat.jpeg, previo aviso que puedo arrastrar y colocarlo en la nube 9 y que va a gritar a mí aquí. 

Porque ya hemos dado un archivo cat.jpeg, pero es muy fácil de tomar una foto que tienes tomada de Facebook o Flickr o similar y en realidad arrastrarlo en la nube 9 y luego hacen parte de su propio personal página web o problema establecer siete u ocho como pronto veremos. Y luego, cuando finalmente visitar ese gato, asumiendo que he descargado ese mismo gato, aviso que-- que era adorable. 

Lo que se puede ver es algo así como esta cara aquí. Así que los archivos que de referencia dentro de una página web o bien puede ser local en su propio cuenta o remoto en algún otro servidor como en el caso de la Rick Foto Astley hace un poco. Entonces, ¿dónde lo else-- más podemos hacer aquí? Así que echemos un vistazo a la siguiente. Usted sabe lo que está bastante guay? 

Hasta ahora hemos estado haciendo páginas web muy estática. Quiero condimentar las cosas de la siguiente manera. Quiero hacer mi propio motor de búsqueda. Así que para hacer un motor de búsqueda, vamos a seguir adelante y empezar a hacer esto. Voy a seguir adelante y crear un nuevo archivo llamado search.html. Y hemos prefabed versiones en línea. ¡Vaya. No pegar en la ventana del terminal. Versiones montadas en línea. Y yo voy a empezar la siguiente. Así que aquí está el comienzo de un archivo llamado search.html. Voy a guardarlo en directorio de origen de hoy. Voy a llamar a esta búsqueda. En realidad, lo haremos mejor. CS50 Búsqueda y realmente marca la misma. Y ahora, yo voy a decir algo así como H1 CS50 Buscar. Y luego aquí abajo, H2 próximamente. Y sólo para recapitular, H1 y H2 significa lo respectivamente? 

Sí, por lo grande y en negrita, y no tan grande, pero aún negrita. Así que si puedo guardar esto y voy por aquí, vamos a ver la search.html archivo. Muy bien, y éste es derecha- [inaudible]. Colocarse. David es confusa. Oh, es justo ahí. David es un idiota. OK. Así que ahí está. Así CS50 búsqueda próximamente. Así que ahora, vamos a sintetizar lo que hicimos la semana pasada. 

Cuando hablamos de la mecánica menor nivel de HTTP. Y estas nuevas ideas de HTML, que es sólo Este lenguaje de marcas en el que contar un navegador exactamente qué hacer e implementar nuestro propio motor de búsqueda. Así que en lugar de sólo diciendo que viene pronto, estoy va a introducir algo que se llama una etiqueta de formulario. Y en esta forma, voy a tener algo como un campo de entrada. 

Y el nombre de esta entrada campo, voy a llamarlo P. Y el tipo de este campo de entrada Yo voy a decir es "texto". Y un campo de texto, como veremos ver, es sólo un cuadro de texto. Y así no sentir aquí para tener nada dentro de él en este momento. Y así que estoy simplemente va para cerrar la etiqueta con la que barra diagonal justo en la propia etiqueta. Y luego voy a tener otra entrada. Tipo de entrada es igual a presentar. Y luego voy a cerrar esta también. 

Y ahora voy a volver aquí. Y ya vemos, aunque bastante feo, tengo consiguió los inicios de mi propia página de búsqueda aquí. De hecho, voy a tratar de limpiar esto un poco. Resulta que en el Introducir, puedo tener otro atributo llamado marcador de posición. Y podría ver algo como palabras clave, o más específicamente, consultar para q. 

Y cuenta, ahora, tengo este tipo de texto gris que desaparece tan antes de empezar a escribir, pero es probable que haya algo usted ha visto en otras páginas web. No me gusta realmente el botón Enviar. Así que estoy realmente va a dar el Botón Enviar un valor de búsqueda. Y ahora, si vuelvo a cargar, observe que mi botón se convierte en el nombre de búsqueda. Sabes, realmente no me como el logo aquí. Así generador de Google Fuente. 

Quiero darle vida a esto aún más. Búsqueda para CS50. Déjame crear mi propio logo. Parece interesante. Así que ahora vamos a salvar este como-- vamos. ¿Dónde va? Ya está. OK. Perdido. Guardar como. Navegadores estúpido. Prepárense, vamos a arreglar esto de una vez por todas. Allá vamos. Correcto. Apenado. Día libre. Ahora bien, esto es muy de moda. Salir de pantalla completa. Correcto. 

Ahora, al igual que uno normal persona, registrar la imagen. Logo.gif. Ahora voy a entrar en CS50IDE y Voy a simplemente agarrar el logotipo, Voy a arrastrarlo a mi directorio fuente siete, ya existe el archivo, estoy bien con eso. Así que voy a anularlo porque yo ya tenía. Y ahora, ¿cómo puedo deshacerme de esto? 

Vamos a seguir adelante y hacer aquí fuente de imagen es igual logo.gif. Cerrar esta. Guardar. Y ahora si me vuelvo a mi búsqueda página, ahora se ve bastante bien. Muy bien, por lo que no tiene bastante hecho nada útil. De hecho, voy a tratar de buscar para un gato y ver qué pasa. Gatos. Maldición. No sólo funciona, al parecer. ¿Cuál es la pieza clave que falta aquí? 

Derecha, incluso si usted no sabe nada de HTML, He empezado a marcar el formulario de teléfono y yo he dicho es cómo conseguir entradas, dame un cuadro de texto y un botón de envío, qué pieza aparentemente falta? Supongamos que queremos conseguir realmente esta cosa funcione correctamente. ¿Qué necesitamos hacer? Tenemos una necesidad de implementar la parte de atrás base de datos o el motor de búsqueda de sí mismo, y eso va a tomar un todo mucho tiempo, francamente. 

Así recordamos lo que hicimos la última vez. Así que si usted busca algo en Google y ha adelantado desactivado, revocatorio, búsqueda instantánea. Así que permítanme que fuera de modo que en realidad esto se comporta como un navegador de la escuela más antigua, si yo ahora busco algo como gatos, recordar lo que la URL se parece. Es bastante críptico. Pero incrustado allí, recuerdo, es la búsqueda de tala. Signo de interrogación q es igual a los gatos. 

Y eso me parece dar un montón de resultados de búsqueda. Así que ya sabes lo que voy a hacer? Voy a pedir prestado Google sólo por un minuto. Voy a ir más aquí y yo voy a decir que esta forma de acción o destino, por así decirlo, literalmente debe ser Google. Y el método que yo quería para uso va a ser conseguir. 

Entonces, ¿qué es la acción? Acción está extrañamente nombrado, pero eso sólo significa ¿quién va a manejar la acción de esta forma? Cuando hago clic en Buscar, donde si el resultado de ir? Y si ahora vuelvo a mi forma aquí y recargar mi página web y ahora buscar algo como el perro, cuenta ahora He re implementado Google. ¿Correcto? 

Si quiero buscar algo otra cosa, funciona para no sólo los perros, también funciona para los gatos. También funciona para CS50. Y bien, esto es sólo bajo encima tuyo, ¿no? Muy bien, pero realmente funciona. Así que lo que está sucediendo realmente? Así que me he enseñado a mi navegador, utilizando HTML, para tomar la entrada del usuario y en realidad enviar esa entrada a un servidor remoto a través de HTTP. 

Y porque mi navegador entiende HTTP, que en realidad construir la URL para que lo Termino otra vez en mi navegador, darse cuenta de lo que sucede cuando busqué para el perro. Si hago clic en Buscar, observe que la URL cambia a medida que pensaba a google.com/search~~V consulta equivale perro. Y eso es porque la forma sabe, porque el método es obtener, simplemente añadirlo a esa URL allí. 

Ahora, estas páginas web son todavía feo. Así que vamos a introducir otro pedazo de sintaxis si podemos hoy. Y esto es algo conocido como las hojas de estilo en cascada. Así que déjame echar un vistazo a este ejemplo aquí y ver si podemos inferir lo que está pasando. Esto es CSS0.html. Y aquí es donde las cosas conseguir un poco feo. Porque por desgracia, en el mundo de la web, HTML por sí sola no puede hacerlo todo. Y así, si quieres estilizar tu página web, que realmente necesita para centrarse en el la estética de una manera diferente. Así que aquí, tengo el cuerpo de mi web página dentro de la cual es un gran div. Y un div sólo significa división. Así que es como un párrafo pero no tiene la misma semántica de un párrafo de texto. 

Esto sólo significa que el navegador, aquí viene una región rectangular grande de mi web página, quiero manejarlo de forma especial. Ahora, la línea 21 es donde comienza esa div. Y acaba de tomar una conjetura. ¿Cuál es el efecto de la línea 21 en el resto de los contenidos de la página? Centrándola. Eso es todo. Así que no hemos visto una forma de en realidad centrar el texto. 

De hecho, mi motor de búsqueda, a diferencia del actual Google, fue todo justificado a la izquierda. Y por lo que ahora en la línea 21, que estoy diciendo, hey navegador, crear una división de la página. Sólo dame un grande, rectángulo invisible. Eso es lo que quiero pensar en la página web. Y luego estilizar la siguiente manera. Dentro de esas cotizaciones, Ahora, es un segundo idioma que presentamos hoy llamadas hojas de estilo en cascada. Afortunadamente, también no es un lenguaje de programación, así que es muy limitado en su sintaxis, pero También es muy limitado en su funcionalidad mientras que HTML está todo sobre el marcado de los datos de una página web y la estructura de una página web. CSS es generalmente de aproximadamente el última milla, la estética, conseguir el tamaño y el color y la colocación exactamente a la derecha en una página web. Y, de hecho, está formado con pares de valores clave. 

Una propiedad de este tipo, el texto alinear, seguido de dos puntos, seguido por el valor de ese propiedad, que en este caso es central. Y ahora cuenta de que Puede anidar estas cosas. Si quería todo en esa He destacado que estar centrado, es por eso que tengo la línea 21 y la línea correspondiente 31. Pero supongamos ahora quieren decir John Harvard, bienvenido a mi página de inicio. 

Símbolo de copyright John Harvard. Y supongo que quiero la primera de esas líneas para ser bastante grande. 36 píxeles. Así que eso es un tamaño decente. Y yo quería su peso a ser valientes. Pero entonces debajo de eso, Quiero texto más pequeño. Y debajo de eso, quiero texto aún más pequeño. Apenado. Hoy en día se siente como un día de descanso. 

Así que ahora, ¿qué estoy haciendo para expresar esto? Aquí en la línea 22 es una embebido div o div anidado, si se quiere. También tiene su propia etiqueta de estilo. Puedo especificar un tamaño de fuente de 36. Puedo especificar un peso de la fuente de negrita. Aquí abajo, solamente puedo especificar 24 píxeles. Y, por último, en la línea 28, que especifique 12. Así que como una prueba de cordura rápida y como una lectura humana esto, que las palabras en la pantalla son en realidad va a ser audaz? ¿Qué líneas son realmente audaz? 

Sólo John Harvard. ¿Correcto? Porque así como la línea 22 dice bueno navegador, aquí está una división de la página. Que sea el tamaño de fuente de 36 puntos. Hacer que el peso de la fuente negrita. Tan pronto como llegue a la etiqueta final correspondiente o etiqueta de cierre en la línea 24, eso significa, bueno navegador, dejar de hacer lo que sea que esté haciendo. Y fíjense que quede claro, a pesar de que línea 22 tiene todos estos atributos como el estilo, cuando cerrar la etiqueta en la línea 24, sólo se menciona el nombre de la etiqueta. 

No repetir el estilo palabra o todo lo que hay dentro de esas cotizaciones. Y por lo que si me veo en este momento en mi navegador, echemos Una mirada a el resultado final. Déjame ir por delante de este archivo, que es CSS 0. Y aún así es bastante llano, pero conseguir bastante interesante. Pero resulta que hay otras cosas que puedo hacer aquí, y en el riesgo de hacer esta completamente horrible, notar aquí que en mi cuerpo de mi página web, Puedo hacer algo divertido como bg o color de fondo. 

Y rápido, ¿cuál es tu color favorito? Verde que oí. Correcto. Así que ahora, si me golpeó recarga ahora, tenemos una página web verde. Muy bien, así que no está mal. Y ahora, si quiero hacer esto realmente fresco, puedo hacer el color de mi texto incluso rojo. Así que vamos a ver lo que esto se parece. Ahora se ve bastante bien. Y aquí, si realmente quiere meterse con alguien o si quieres ser una de esas personas que trata de engañarlo para que visite una web página porque han engañado Google en el pensamiento de que hay un montón de las palabras clave como-- vamos a ver, volver a cargar. ¿A donde se fué? Y no nosotros. Correcto. Por eso digo esto como un aparte, vamos a hablar de estas cosas en un par de semanas cuando hablamos de seguridad, si en realidad incrustar racimos enteros de palabras clave en una página web, incluso si no son visibles a un humana, alguien como Google, por supuesto, todavía puede realmente encontrar esto. Muy bien, así que es bastante horrible con bastante rapidez. 

Y, de hecho, no lo es todo que gran diferencia de mi propia web página como estudiante, que Empecé buscando en Google alrededor para encontrar Las versiones anteriores de mis viejos sitios Web. Era bastante malo. De hecho, he encontrado uno justo antes de la clase. Pero no hay peor que hay. Al parecer, esto fue mi página de inicio en el año 1996. Al parecer, pensé que era apropiado para preguntar a la gente de su nombre antes de que pudieran en realidad ver a mi página web. 

Y entonces les mostré algo estúpido, probablemente. Voy a desenterrar más para la próxima vez. Pero por ahora, vamos a considerar un poco de diseño. Hemos hablado de estilo. Y esta página hasta el momento y casi todo lo que he escrito es bastante limpio estilísticamente. Pero ¿qué pasa con el diseño? Bueno, hay una gran cantidad de redundancia en lo que he estado haciendo aquí. 

He mencionado la palabra color en un par de lugares. He mencionado el tamaño de fuente en un par de lugares y audaz en un par de lugares. Y fundamentalmente, soy co mezclándose dos idiomas. Tengo HTML con mis etiquetas y mi atributos y luego, de repente, entre comillas, tengo la segunda lengua de hoy llamado CSS, que a su vez, es sólo éstas pares de valores clave o estas propiedades separados por dos puntos. 

Resulta que mucho como en C donde puede comenzar a factorizar un código en archivos de cabecera, así que podemos hacer lo mismo en HTML. Y un paso hacia la que es como sigue. Tenga en cuenta que esta versión, es CSS1.html Estructuralmente la misma página web exacta. Así que tengo un montón de divs, pero esta vez, no tengo librado de la envoltura div como verás. 

Y me he dado esos tres divs superior, media e inferior, identificadores únicos. Esto es bueno, porque por dando esas divisiones de las páginas identificadores únicos, Puedo hacer referencia a ellos en otros lugares. ¿Dónde? Bueno, déjame desplazarse hacia arriba. Y hasta el momento, en cualquier momento nos hemos visto a la cabeza de una página web, lo que es la única etiqueta que hemos tenido en la cabeza de una página web? Un poco más fuerte. Sólo el título hasta el momento. Pero resulta que hay algunas otras cosas usted puede poner en allí, uno de que se llama una etiqueta de estilo. Así que hace un momento, buscamos a un atributo de estilo. Resulta que hay una etiqueta de estilo. Pertenece interior el jefe de una página web. Y ahora noto lo que estoy haciendo. Que tengo dentro de esta etiqueta de estilo lo siguiente. Estoy literalmente mencionar en la línea 20 del nombre de una etiqueta que quiero para estilizar. 

Entonces tengo llave de apertura y cerrado corchete. Así similares en espíritu a C, pero de nuevo, esta no es una función, esto es sólo un detalle sintáctica aquí. Y luego, por supuesto, yo estoy diciendo el navegador, hey navegador, hacer que todo el cuerpo de la página tener una alineación de texto de centro. Y entonces esto está diciendo lo siguiente. Hey navegador, si usted ve un HTML elemento o etiqueta en la página que tiene un identificador único de la parte superior, por lo que el símbolo de hash aquí sólo significa idea única de la parte superior, adelante y hacer que su tamaño de fuente 36 y su peso negrita. 

Hey navegador, un elemento cuya ID es media, lo convierten en 24 píxeles. Y oye navegador, si usted ve un idea de fondo, lo convierten en 12 píxeles. El efecto en el final es exactamente el sam. Si entro en CSS 1, el página tiene el mismo aspecto. Pero estamos un paso hacia un poco mejor diseño. Permítanme ahora vuelvo aquí para CSS2 y veo qué otra cosa que he hecho. 

Ahora la página está muy, muy limpio. De hecho, puedo encajar todos el contenido de una página aquí. Pero, ¿qué nueva etiqueta he introducido, obviamente? Enlace. Y no es el mejor nombre para una etiqueta, porque no es un enlace en el sentido que lo conocemos, pero esto significa un enlace en algún otro archivo. Esto es algo así como aguda incluyen en C. 

Esta es la manera en HTML para decir oye navegador, ir a buscar los contenidos de el archivo llamado css2.css. La relación, para mí, es que es una hoja de estilo. Y de hecho, eso es lo que el de la S de estilo en cascada en medio sábanas. Se trata de una hoja de estilo. Es sólo el archivo de texto que contiene un montón de propiedad. Es un montón de estilos que desea aplicar a una página. 

Y por lo que este aparentemente es refiriéndose a un segundo archivo. Y si abro que, CSS2.css, cuenta de que todo lo que he hecho es copiar y pegar todo de esto en este archivo. Y ahora, incluso si usted nunca ha codificado estas cosas antes, basta con considerar la sombrero de la ingeniería proverbial , ¿por qué es esto un mejor diseño, probablemente? Factoring esas propiedades CSS, ponerlos en su propio archivo. A pesar de que hemos resuelto este Hace problema como cinco minutos en la primera versión. 

Nosotros no hemos mejorado la página estilísticamente, esto es simplemente mejor diseño en algún sentido. ¿Por qué piensas? Sí. Más flexible, ¿cómo? Sí. Así que si quieres ir atrás y cambiar las cosas, Ahora, usted tiene un solo lugar donde puede cambiar las cosas. Y de hecho, algo como problema establece siete, donde vamos a implementar un sitio web de comercio de valores, eso va a tener un toda montón de páginas. Y sería muy molesto si usted decide, hm, Realmente no me gusta 24 píxeles, quiero que sea 28 píxeles o un poco más grande. Y luego tener que hacer un mundial buscar y reemplazar o abrir todos los archivos de su sitio web simplemente para cambiar realmente un valor. Al tener estos estilos en un lugar central, Ahora usted puede abrir un archivo de texto en CS50IDE en cualquier programa, cambiarlo, guardarlo, y hecho. Usted ha propagado los cambios en todas partes. Y eso sería el mismo en un archivo dot h también. Así que cualquier pregunta por lo tanto ahora en esta sintaxis? Muy bien, así que hemos hecho todo lo que parece excepto en realidad aplicar hipervínculos. Y así vamos a seguir adelante y hacer esto. Déjame ir adelante y crear un nuevo archivo aquí. Voy a llamarlo link.html, poner en el código actual. 

Y yo voy a hacer abierta soporte de tipo doc html. Como acotación al margen, esta cosa en la superior, esta declaración de tipo de documento, que es el único que es raro con el signo de exclamación. Sólo tienes que hacerlo allí y significa que estamos utilizando la versión de HTML 5. Las versiones anteriores de idioma tenía mucho más largo cadenas que se necesitaba para poner allí. Así que aquí es un ejemplo llamado enlace. 

Necesito un cuerpo de mi página web aquí. Y en este caso, un href iguales digamos HTTP://www.disney.com y mi sitio web favorito, vamos a decir. Muy bien, por lo que una muy página inocuo, fácil de usar. Si ahora entro en mi directorio lista aquí y abrir link.html, tenemos hiper texto. 

Y de hecho, aquí es donde la H en HTTP viene. Protocolo de Transferencia de Hipertexto es acerca de la transferencia de texto que tiene hipervínculos a otros recursos. Y de hecho, aquí está lo familiar, si retro, azul enlace que si se hace clic, en realidad me llevan a Disney.com. Ahora, oh, eso es que saldrá pronto. Muy bien, así que ahora, ¿cuáles son algunas de las consecuencias de esto? 

Y, francamente, el mundo comienza para conseguir un poco más familiar y también un poco más miedo pero también un poco más auto defendible una vez que comience para entender estas cosas. Debido a que las probabilidades son, algunos de ustedes, si vas a través de su carpeta de spam Gmail o incluso su bandeja de entrada, probablemente conseguido algún tipo de correo electrónico que usted está pidiendo que cambiar su contraseña verificar tal vez o tal vez sus credenciales de PayPal o qué sé yo. 

Y de hecho, es posible que haya recibido algo que dice como hacer clic aquí para restablecer su contraseña de PayPal. Y ahora, observe, si esto no es Disney.com pero al igual que badplace.com y recargar, tenga en cuenta que el texto aquí podían decir nada en absoluto. Y de hecho, esto es sólo palabras. ¿Por qué no puedo ser realmente muy malicioso y decir http://www.paypal.com. 

Haga clic aquí restablecer su PayPal contraseña y ahora recargar. Esto se ve muy legítimo, ¿no? Quiero decir, no me haga clic en un correo electrónico que sólo dice esto. Pero notar la dicotomía aquí. Dice www.paypal.com, y de hecho, espera un minuto, sabemos que usted quiere el s para la seguridad. Así que ahora, vaya a www.paypal.com HTTPS, pero si usted nunca ha hecho esto antes, no entrar en el hábito de se cierne sobre pequeños que enlaza aquí. Y es difícil de ver en la pantalla de allí, y no es todo lo más fácil aquí. Pero hasta aquí en el pequeño rincón pequeño el navegador hace realidad que vamos decirle a badplace.com lugar de Paypal.com. Ahora, ¿a dónde vamos con esto? Todos los ejemplos que hemos hecho hoy, hemos codificado y escribimos manualmente duro. La web es increíblemente sin interés cuando dura codificar sus páginas web para que el contenido es estático y nunca cambia. Por supuesto, todo nuestro sitios web favoritos de hoy, ya sea Gmail o Twitter o Facebook o cualquier número de otros son dinámicos. Están cambiando en respuesta a la entrada de usuario al igual que los resultados de búsqueda de Google. 

Y así, el miércoles, lo que hacemos es dejamos HTML y CSS introducción detrás de nosotros y nos tomamos por sentado que ahora conocerla y introducimos un nuevo lenguaje de programación llamado PHP, lo que le gusta C, se nos va a dar el poder de crear en realidad programas que ellos mismos generan salida. En este caso, vamos a utilizar PHP para generar dinámicamente web páginas con este nuevo lenguaje. Así que más en que el miércoles. Nos vemos entonces. 

[REPRODUCCIÓN DE MÚSICA]