Section 7

[REPRODUCCIÓN DE MÚSICA] ALLISON Buchholtz-AU:Muy bien, todo el mundo. Bienvenido de nuevo a la sección. Así que nuestra agenda de hoy vadurante mucho más web dev cosas. No sé cuántos deusted ha visto sus conjuntos de procesadores desde que fue puesto en libertada principios de esta mañana. Yo lo haría como cuántospersonas han leído la especificación, pero viendo que has tenido todode, como, a siete horas para lo miran y es un lunes yusted probablemente ha tenido clase, Voy a asumir quela mayoría de ustedes no tienen. Si usted tiene, felicitaciones adicionales. >> Básicamente, se está ayudandoimplementar un sencillo web servidor en C, que es un nuevo conjunto de procesadores marca,para que ustedes llegan a ser los conejillos de indias. Va a ser una diversión, semana salvaje,pero creo que va a ser un montón de diversión y va a ser una realidadbuena experiencia en realidad. Así que para prepararse paraque, en la sección de hoy, vamos a ir chmod, TCP / IP, ya continuación, un poco de HTML y CSS. >> Al final, vamos a realmente códigouna página web sencilla juntos para ayudarle a chicos tipo de conseguirmás familiarizado con eso. Y entonces, si usted no ha recogidosus pruebas, que están en el frente, pero estoy bastante seguro de que todosaquí tiene su concurso. Y también en esa nota,Las soluciones no son todavía, pero tan pronto como nos gusta finish--, laúltimas personas que toman su quizzes-- que será en. Si usted tiene alguna preguntaMientras tanto, no dude en enviarme un correo electrónico personal. Voy a responder con su personapreguntas, como siempre lo hago. >> Así que en esa nota, chmod. Así que, básicamente, todo lo quenecesita saber acerca de chmod es que se utiliza para cambiarlos permisos de archivos, ¿verdad? Así que es sólo algunos sistemas llaman uncambiar los permisos, como se dice aquí. Y si alguna vez quieres verlos permisos que un archivo tiene, en lugar de sólo hacerls, que podría hacer ls -l. l significa mucho. >> Así que va a hacer listas largasde todo, y le dará mucho más detalladainformación acerca de cada uno de sus archivos. Y verás algo-- estoyva a pasar por delante de un second-- pero verás algo similar aque la línea superior hay para cada archivo. Y vamos a ir a través de lo que eso significa. >> Así que, básicamente, para cambiarsus permisos de archivos, lo que desea es utilizar chmod. Usted puede pensar en él como cualquier otroUNIX llamar como ls o cd o lo que sea. Es sólo un poco de otra llamada similar. >> Así que hacemos chmod y luego vamos atener tres dígitos normalmente. Hay un par de maneras de hacerél, uno de los cuales vamos a repasar. Pero por lo general, tendrá tresdígitos en el rango de 0 a 7 cada vez. >> Así que una cosa es que haytres permisos diferentes que podemos dar a cada archivo. Y es legible, que esrepresentado por R, que tendrá sentido en un poco; w, que esse puede escribir; y ejecutable, que es x. Sé que el correo uno, ejecutable,tal vez no el más sentido, pero nosotros representarla con x. >> Y entonces lo que pasa es cada uno de ellosTambién tener la representación número. Así que tenemos 1, 2 y 4. Y, básicamente, lo que pasa escada uno de estos tres números aquí corresponde a unadiferente conjunto de usuarios que se refieren a esos permisos. >> Así que usted puede pensar en ese primernúmero corresponde al usuario real o el propietario del archivo, el segundonúmero se corresponderá con el grupo, y el último se refiereal mundo, ¿de acuerdo? Así que lo que pasa es recordarlos numbers-- r es 4, w es 2, x es 1, ¿no? Esto-- si usted resume estas arriba,que le da ese primer número que podríamos entrada en nuestro chmod. >> Así que en este caso, lo quesería este número? Sería 4 más 2 más1, que es un 7, ¿no? Y en este caso, estosno tienen nada, por lo que esta aquí lo haríatraducir a chmod 700, ¿de acuerdo? Y lo que hace es que otorga todode estos permisos a tu usuario. >> Así que esto significa que nuestro usuariopueden hacer lo que quieran. Pueden leer este archivo. Pueden ejecutar este archivo. Ellos pueden escribir en este archivo. Pero el grupo y en el mundo, nopermisos de ningún tipo, ¿de acuerdo? >> Así que otra manera de escribir que, podemoshacer chmod de tres dígitos, cada uno de los cuales corresponde a cualquiera que sea la suma o quegrupo específico es, subconjunto específico. O podemos hacer realidad otra cosa. Espere. Podemos hacer algo con ellos aquí. >> ¿Cuántos de ustedes vieron un ejemplodonde fue como a chmod un plus x? ¿Has visto que en la conferencia, que pienso? Así que un sinónimo de todo. Significa darle a todos los usuarios,que me olvidé de poner aquí. >> Pero una ventaja x, sinotar aquí, si lo hacemos a chmod-- qué grupo estamoshablando más los permisos queremos darles. Así que esto puede ser una ventaja o un inconveniente. Además añade permiso. Menos quita el permiso. Bastante intuitivo, creo. >> Así que un plus x significa chmod. Así que cambiar los permisos de todas las personasSi esto es un add permisos A--. Y eso significa que lo x-- permisoestamos otorgando todo el mundo. Leer, escribir, o ejecutar? >> AUDIENCIA: Ejecutar. >> ALLISON Buchholtz-AU: Ejecutar. Así que estamos dando a todos los usuariospermiso para ejecutar este archivo, ¿de acuerdo? ¿Y qué si lo que queríamos hacerque con la forma numérica? Así que recuerde con numérico,queremos tres números. >> AUDIENCIA: 4. ALLISON Buchholtz-AU: ¿Qué fue eso? AUDIENCIA: 4. ALLISON Buchholtz-AU: No 4. AUDIENCIA: 0, 0, 4. ALLISON Buchholtz-AU: Bueno, queremospara darle a todos los usuarios, ¿no? Así que vamos a tenerun número en cada ranura. Eso va a ser elmismo número en cada ranura porque sólo queremos dartodos los permisos ejecutables. Así ejecutable es 1,pero en el camino correcto. >> Así que si lo hicimos chmod 111 que haríaser el equivalente de chmod un plus x. ¿Eso tiene sentido para todo el mundo? Vamos a ir a través deun par de ejemplos. >> Así que la gran comida para llevaraquí es una no es de aquí, pero un sólo significa dar a todos los usuarios. u es si lo que deseapara dar o quitar un permiso específico deel usuario o el propietario. g es para el grupo,de manera que dígito medio. Y luego los demás que se pueda imaginarcomo el mundo, que el último dígito. >> Así que con eso, vamos a ir a un ejemplo,porque me siento como ejemplos siempre hacer estas cosas más fáciles de entender. Así que nos fuimos a través de rwx-- esto--también podría ser representar como 700. Ese es el ejemplo que buscamosen más de la imagen. Así chmod 444 en algún archivodaría lo que los permisos? Estabas muy cerca. AUDIENCIA: legible para todos. ALLISON Buchholtz-AU: lectura mecánica. Así legible para todo el mundo, ¿verdad? Y entonces lo que es otra manera de hacer eso? Si lo que queremos hacer, ya sea con chmodde w de r o, más y sus menos, ¿cuál sería ese llamado parece? Sería chmod qué? >> AUDIENCIA: un plus r. >> ALLISON Buchholtz-UA: una r más en el 5. Aceptar, por lo que este es el mismo que este,sólo dos diferentes traducciones de la misma cosa. Así que con eso, tenemos estos. Así que quiero que los chicos a tratar de escribireste tipo de en su camino opuesto. >> Así que con chmod 555,¿qué sería como? ¿Sería un plus ou plus o lo que sea? Para más de u x, dame los tres números. Y luego me dicen acerca de lo que los permisosestamos en realidad la concesión y para quién? >> Así que te voy a dar dos chicosminutos para trabajar en eso. Siéntase libre de hablar unos con otros. Para aquellos de ustedes que se produjo en un pequeñotarde, hay dulces y camisas. Hemos dejado tres camisas, ytenemos Kit Kats y Starbursts. Así que no dude en venir grabalgunos en este pequeño interludio. >> Además, el último es complicado. Se trata de dos chmods para el último. En realidad, déjenme cierro esa puertamientras que ustedes están trabajando en eso. Caramelo siempre es necesarioen un lunes por la tarde. >> OK, así chmod 555. ¿Cuál es otra manera podríamos escribir eso? ¿Alguna idea? Sí. >> AUDIENCIA: una Rx Plus. >> ALLISON Buchholtz-AU: r más rx. ¿Quieres explicar por qué estaría rx? >> AUDIENCIA: Porque tienes5, así que eso es 4 más 1, por lo que ha leído másejecutable, y es para todos. ALLISON Buchholtz-AU: Derecho. Así que reiterar, 5 aquíque conocemos como la suma de 4 y 1, debido a que cada número en nuestro trío es lasuma de los permisos para ese subconjunto, ¿verdad? O bien el usuario, lagrupo, o el mundo. Así que en este caso, sabemos que5 tiene que ser formado por 4 y 1. >> Y 4 y 1 corresponden alegible y ejecutable. Estamos dando a todo el mundo,para que podamos hacer un chmod rx plus. Y, obviamente, nos fuimosa través de las preguntas allí, por lo que ahora este archivo es ejecutabley legible para todos. >> Así que ¿qué pasa con el segundo? ¿Cuál podría ser el número uno para que? ¿Alguna idea? Seguir adelante. >> AUDIENCIA: 100 [inaudible]. >> ALLISON Buchholtz-AU: 100. Exactamente. Así que es lo que quieres para explicar por qué 100? AUDIENCIA: Porque es para elusuario, por lo que es en la primera posición. Y entonces x ejecutable es 1. ALLISON Buchholtz-AU: Exactamente. Así que estamos otorgando ejecutablepermisos a sólo el usuario. Así que en este caso, sería de 100. Y yo tengo todas las respuestasarriba en la siguiente diapositiva en el caso usted está escribiendo un montón de cosas. >> Aceptar, por lo que este próximo uno se hace realidadcon dos chmods, usted podría hacerlo. Así que ¿alguien tienealguna idea de lo que te pueden obtener chmod 640 reescritaen el otro lado? Usted puede cambiar el usuario y luegousted puede cambiar el grupo es mi sugerencia. >> Así que si nos estábamos cambiando lausuario, que es esta primera uno aquí, lo que podría ser nuestra llamada? Así usuario es u, ¿no? Así chmod u más qué? Mmhmm? >> AUDIENCIA: rw. ALLISON Buchholtz-AU: rw. Derecha, para leer y escribir, porque de lecturaes 4, w es 2, los suma juntos como 6. Así obtenemos chmod u más RW,y conseguimos nuestro primer 6 allí. >> Así que para obtener la 4, ahora queremospara cambiar nuestros ambientes de grupo. Así que vamos a hacer chmod g más qué? ¿Qué es un 4? >> AUDIENCIA: r. ALLISON Buchholtz-AU: r. Precisamente. Así que estamos dando al propietariopermisos de lectura y escritura y le estamos dando la lectura de grupopermisos, que tenemos todos aquí. Mmhmm? >> AUDIENCIA: Si usted puede escribir algo,tampoco implica que usted puede ejecutarlo? >> ALLISON Buchholtz-AU: Ustedpuede escribir en algo-- Yo no creo queimplica que usted puede ejecutarlo. Enfriar. Así que eso es todo lo que nos fuimos a través. Así que en este siguiente, que escasos sólo tipo de comunes que desea mantener enmente para fijar su problema. Estos son por lo general los permisosque nos gusta que usted utilice. >> Así que para el año 711, que danosotros, por supuesto, el usuario todos los permisos, quetiende a tener sentido. Y entonces es ejecutable por elgrupo en el mundo, lo cual tiene sentido si usted tiene algún directorio,quiero ser capaz de atravesar en él. Las personas necesitan tener acceso. >> Para cualquier archivo que no sea PHP, vasutilizar 644, lo que hacer qué? ¿Qué implica eso, o lo quepermisos que hace que dan? Así que el dueño pueda qué? AUDIENCIA: Leer y escribir. ALLISON Buchholtz-AU: Leer y escribir. Y a continuación, el grupo y los demásse acaba de leer, ¿no? Y luego chmod 600 para cualquierArchivos PHP que se utilizan, su propietario, una vez más, puedeleer y escribir en él pero todo el mundo essólo un poco bloqueado. >> Así que esto lo hará realidadser más útil cuando que llegue a su problemaestablecer la semana próxima, donde en realidad estás construyendo un sitio web. Así que si alguna vez se encuentra concualquier problema extraño donde no está cargandocorrectamente, tal vez usted que tenga que agregar un archivo ejecutablepermiso, o tal vez usted necesita una lectura o permiso de escritura. Las pequeñas cosas que tienden a tropezar personasarriba, pero eso es algo así como el go-to al iniciar conjunto de procesadores de la próxima semana. Y yo le daría másindirectas en conjunto de procesadores de esta semana, pero todavía tengo que mirarlo desdeque fue puesto en libertad esta mañana. Pero usted me envía por correo electrónico, habré miradoen que por el momento me respondo mañana. >> Así que ahora, todo el mundo es bueno con chmod? Para cualquier duda persistente? Bastante sencillo. Sólo tipo de hacer el seguimiento de lo queleer, escribir, y ejecutar los números son es probablemente la parte más difícil. >> Así que con TCP / IP, todos estos protocolos,algo así como con sus estructuras de datos la semana pasada, es mucho másimportante tipo de conseguir una intuición mayor nivel de ellos. Esto no es CS143 dónde vamospara pedirle que implementar una red, por lo que estará bien siusted no entiende el quid de la cuestión de todos los protocolos. Lo que es importante entender esalgo así como lo que representan y por qué son importantes. >> Así TCP / IP, por supuesto, es elTransmission Control Protocol o Protocolo de Internet, que esbásicamente un conjunto de leyes, básicamente, o normas que dicen los datoscómo debe ser manejado, cómo debe ser empaquetadas,transmitida y recibida. Por lo tanto, básicamente, tal y comoAquí dice, aumenta las posibilidades que los datos lleva a dondeusted lo quiere llegar a. >> Estoy seguro que si ustedes fueron aconferencia o lo vio en línea, él has-- No sési lo hizo este año, pero sé que el año pasado, tuvo undemostración donde tenía una foto de Rob y él partió para arriba encuatro y ponerlo en sobres y trató de conseguirlo a través de Sanders. Y usted puede tipo depensar de esa manera. Es sólo un conjunto de reglas quecontar los datos como llegar a algún lugar y le permite saber sise echa en falta de datos, de la misma manera que si usted esteniendo varias páginas de notas y usted les etiqueta con la página 104, página204, y que se remontan a estudiar más tarde y se echa en falta algo--usted no puede encontrar la página 304-- sabes algo está mal, por lo quepuede mirar a través de sus notas de nuevo o pedir a alguien que volveremos a enviarla conferencia toma nota de ese día. De la misma manera con los datos en el Internet. Si yo estoy pidiendoalgo de algún servidor y necesita enviaren múltiples paquetes, probablemente va a númerode alguna manera, deja Quiero saber cuántos debería haber recibido,y me dicen, oh, este es uno de 10 o este es uno de 10.000. De esa manera, cuando voy a volver a montartodas las piezas juntas, Cómo sé si falta algoy yo puedo pedir que otra vez. ¿Eso tiene sentido? Sólo un conjunto de reglas. En su base, un conjunto de reglas, ¿de acuerdo? >> Así también hablamos unpoco acerca de los puertos. Esto es en realidad una norma quele permite saber qué tipo de datos está siendo transmitida en estos paquetes. Si vamos con nuestroejemplo sobre, no lo hacemos sé que es una imagen deRob allí a menos que lo escribimos en el exterior de nuestra sobre. Así que los puertos son básicamente la misma cosa. Es sólo una manera de averiguar lo quetipo de datos se están transmitiendo. >> Así que tenemos toda lala mayoría de los más comunes aquí. Así 21-- estos también son amablesde que las cosas buenas de saber. Es una especie de una pregunta de cuestionario fácil. Sea como, ¿qué puerto 80 hacer? O, ¿qué puerto 443 lo hacen? Así que las cosas buenas que saben. >> Así que tenemos aquí, es 21 archivoprotocolo de transferencia, por lo que sólo las reglas que gobiernan la transferencia de archivos. 25, algo que todosutilizar demasiado, es de correo electrónico. 53 es el nombre de dominiosistema, que es básicamente sólo un poco de una búsqueda para elDirección IP de un nombre de dominio. >> Así que estoy bastante seguro de que eramencionado en la conferencia, si ir a algo así comogoogle.com, tiene una dirección IP que está asociada con él. No es en realidad google.com. Y así 53 es el puertoque realmente tiene cuidado de tipo de traducirlaen esa dirección IP para usted. Y a continuación, 80 y 443 son muy comunes. O tienes tu página web ousted tiene su página web segura, que una gran cantidad de páginas web sontransferir a ahora. >> Así que es una especie de alto nivelvisión general de protocolo de transferencia. No veo mucho más en profundidad. Es una especie de cosas interesantessi usted está interesado. Hay un montón de recursos. Wikipedia es en realidaduna muy buena página. Así que yo estaba buscando en ellaHace sólo un poco de tiempo, así que recomiendo encarecidamentemirarlo si te interesa o tomar 143 en dos años, porqueCreo que es cada dos años. >> Así que en el final de esto, estamoshablando de las páginas web y HTTP, que en realidad es nuestro próximo tema parahoy antes de entrar en HTML y CSS y en realidad se puede codificar una página web. Será divertido. Tendremos imágenes deconejitos y va a ser genial. >> Así HTTP, como se puede ver aquí,es una de las encantadoras acrónimos para esta semana, que esProtocolo de transferencia de hipertexto. Así que de nuevo, es sólootro conjunto de reglas que gobierna hipertextotransferir, en este caso. Así que mejor manera de aprendersobre esto es sólo un poco de a dividirlo enestas palabras individuales porque hay una gran cantidad depalabras en la pantalla allí. >> Así que vamos a empezar con el hipertexto. Así que "hiper", que se pueda imaginar"Por encima de", como de tipo súper cosa. Así que es realmente sólo texto llevado a lasiguiente nivel, así que es como súper texto, como el siguiente texto. Así que es básicamente sólotexto que nos da más información quetexto normal hace, ¿de acuerdo? >> Así que en este caso aquí, este es el hipertexto. Esto nos dice que tenemosalgún vínculo que vamos a, que es cs50.net, quees ahora cs50.harvard.edu. Estas diapositivas son un poco viejo. Y se va a mostrarcomo este, como un hipervínculo, y luego una página web realmente genial. >> Así que es de texto, que es un pocopoco de cosas muy interesantes en allí. Así que usted puede vincular las cosas y que puedainsertar imágenes y usted puede estilo de cosas. Y la cosa más familiar quechicos probablemente tienen con hipertexto es HyperText Markup Language, HTML,que por supuesto es todo de la web que vemos a nuestro alrededor, sentadocon un poco de estilo CSS tirado. >> Pero si había alguienmuy grande con MySpace, Estoy seguro de que todo usado HTMLtodo el tiempo para crear esos perfiles perfectos, ¿no? Me siento como que podría ser unreferencia obsoleta ahora, pero lo que sea. Sólo un poco-- ustedesno son que mucho más joven. Algunos de ustedes son mayores que yo. MySpace era todavía uncosa cuando yo era joven. No soy tan viejo. >> De todas formas, HTML sólo una forma de hipertexto. Así que el hipertexto es sólotexto con características añadidas. Así protocolo de transferencia es probablementela cosa más dudoso de explicar. Obviamente, transfer--sólo la transferencia de datos. Así que, o entre el cliente, al igual quesu hermano web, y un servidor. Así que, básicamente, sólo elforma en que la Internet funciona. >> Así la solicitud exacta decómo funcionan, estamos en realidad va a mirar unejemplo de solicitud y respuesta. Pero, ¿cómo se solicitainformación de un servidor y cómo el servidor responde a nosotros eslo que rige este protocolo de transferencia. Así la solicitud y la respuesta tienenseguir este conjunto específico de reglas. Se estandarizó de manera que no importadonde se está usando el Internet, que siempre funciona de la misma, ¿de acuerdo? >> Una vez más, el protocolo, un conjunto de reglas. Es sólo una normal,la interacción de la misma manera que el profesor habla de Malansi alguien extiende su mano, usted sabe que es cortesía comúnllegar a la suya y estrechar su mano. Eso es un protocolo, ¿no? >> Así que le doy un poco de solicitud normalizado,que es que quiero darte la mano, y le das algún estandarizadarespuesta, que es ya sea no, gracias o usted podría tratar de sacudir mimano o tal vez usted va a tratar y el puño me golpee. Y no tenemos un protocolo para eso. Se degrada. Pero si todo el mundo sigue elmismo protocolo, por supuesto, va mucho más a la perfección. La gente llega a conocerse. Todo el mundo está feliz. >> Así que en el mundo de la web,todo el mundo sigue el mismo rules-- un poco mejor que los estándares sociales. Pero con eso, vamos a veren una solicitud de ejemplo aquí. Así que hay esta pequeñaclave en la parte inferior que te dice los diferentes colores,lo que se supone que quiere decir. >> Así que es blanco al igual que su métodosolicitud y protocolo version-- así lo soliciten método, versión. Y entonces esto es unanombre del campo y el valor de ese campo, que lo haremosentrar en muy, muy poco. Así que este es un ejemplo de petición. Esto es como yo que se extiende hacia fuera,queriendo presentarme. >> Esto es lo que el clienteo lo que el navegador web se envía a su servidor. Así que esta es una petición GET, por lo que espedir algo desde el servidor. Y es, por supuesto, HTTPy es la versión 1.1. >> Así que el resto de este aquí es lo que llamamosla cabecera, y su información adicional que nos da una mejor idea delo que en realidad estamos pidiendo, o información que se quiere darel servidor que podrían ser pertinentes. Así User-Agent le da un poco másDescripción en-- por ejemplo, aquí, rizo / 7.24.0 es en realidad va a decirel servidor que estamos usando Google Chrome como nuestro navegador. Así que si alguna vez escuchaacerca de las personas que hablan sobre la fabricación de una aplicación de respuestapara múltiples navegadores, esto es algo queusaría porque si no sé qué navegadorla solicitud está viniendo, no se puede adaptar los datos a eso. Así pues, en este caso, el usuariose acaba de dar este tipo de información de identificaciónsobre qué navegador el usuario está utilizando actualmente, ¿de acuerdo? >> Así que también tenemos anfitrión, que esdonde en realidad estamos con ganas de ir. En este caso, queremos ir aapple.com, comprar algunos nuevos iPads fresco o algo así, tal vez lindoluces en nuestros dormitorios. Y el valor de nombre al final es sólouna carga, sólo una cosa en general para que ustedes puedan ver. En realidad, nocorresponder a cualquier cosa aquí. >> Así que usted puede tener tanto o tanpoco como desee en cada caso. La mayoría de las veces, estos son opcionales. Sólo depende de lo quelo que necesita desde el navegador, de su usuario con el fin dedar correctamente la solicitud. ¿O depende de lo que tu usuarioen realidad quiere renunciar al servidor. Así que usted puede tener muchos, muchosde estos nombres de campos de cabecera o que sólo podría tener una pareja. Como con tantas cosasLo he dicho en esta sección, que realmente depende del contextode cómo se está utilizando este. >> ¿Eso tiene sentido para todo el mundo? Esto es sólo un ejemplo deuna solicitud, cabeceras, qué sé yo. OK, así que con eso, tenemos algún tipo de respuesta. >> Una vez más, tenemos nuestro código de estado, el protocoloversión y, a continuación, el nombre del campo y el campo valorar como siempre. Así que nuestra versión del protocoloy nuestro código de estado es 200. Aceptar, por lo que,sí, todo ha ido bien. Esto es lo que quiere. >> El tipo de servidor, el contenidotype-- nos dice, bien, tú estás va a conseguir algo de HTML texto. Aquí es la longitud de la misma y aquí estálo que debe hacer con la conexión. OK, así que de nuevo, dependiendoen los datos que está pidiendo, dependiendo de lo que elservidor quiere volver a usted, es posible que tenga más de estos camponombres, es posible que tenga menos. Totalmente dependiente del contexto. >> Y en cuanto a este estatuscódigo aquí, por supuesto, 200 no es el únicousted podría tener, ¿no? Tenemos un montón de códigos de estado. ¿Alguien recuerda alguna de lasotros que hemos mencionado en la conferencia? Muchos de ellos comienzan con 4. >> AUDIENCIA: 404. >> ALLISON Buchholtz-AU: 404, lo que es? >> AUDIENCIA: Archivo no encontrado? >> ALLISON Buchholtz-AU: Archivo no encontrado. Exactamente. Entonces, ¿qué acerca de 403? AUDIENCIA: Prohibida. ALLISON Buchholtz-AU: Prohibida. Entonces, ¿qué cree usted queeso significa que con chmods? >> AUDIENCIA: Significa que ustedno tienen permiso para leerlo. >> ALLISON Buchholtz-AU: Exactamente. De alguna manera, usted no tienepermiso para acceder a ella, ¿verdad? Así 404, 403. Hay un muy divertidouno que siempre introducir todos los años queMe he puesto aquí arriba, como 413, que es que soy una tetera. Usted puede google esto. Es curioso como, que es el código413 y es que soy una tetera. ¿Qué yo no sé por qué lo haríanecesitará siempre que en el Internet, pero estoy divagando. AUDIENCIA: Tal vez usted es una tetera. ALLISON Buchholtz-AU: Tal vezel servidor es una tetera. Quién sabe? Muy bien, así que estamos a punto dela transición a la codificación real. Siento que ustedes van asalir de aquí con bastante rapidez. >> AUDIENCIA: ¿Por qué lo hacedecir "servidor: dos veces? >> ALLISON Buchholtz-AU: Hm? Servidor de dos veces? Esa es una buena pregunta. No estoy seguro. Voy a averiguar yTodos ustedes voy a enviar por correo electrónico. >> Bien, cualquier otra pregunta, además de eso? Buena? Enfriar. >> HTML y CSS, y ahora nosotrosllegar a todas las partes divertidas. Así que como he mencionado antes, HTMLes probablemente una de las cosas ustedes están más familiarizados. Así que tenemos HyperText Markup Language. >> La mejor manera de aprender esto-- no lo hagotener las diapositivas o nada preparados para ustedes con HTML. Se trata realmente de aprender la sintaxis. Y si usted estuviera en el MySpacedía, usted tendría esto. >> Así que en realidad, lo más importante essólo para practicar y experimentar. Uno de los grandes recursos que lo haríaaltamente recomiendo usar es W3Schools. Así que W, 3, y luego Escuelas. Tienen una gran cantidad derecursos sobre HTML, CSS en, y que en realidad tienen unpantalla dividida tipo de cosas donde te darán ejemplo de código. Usted puede jugar con él,cambiarlo, y presione Update, y te voy a mostrar lo queen realidad hace a la página web. >> Así que recomiendo encarecidamente utilizar eso. Es muy bueno. Usted no recibirá los fallos segaquí cuando las cosas van mal. Si te las arreglas para conseguirun fallo seg con HTML, hágamelo saber porque estoyva a ser real intrigado. Pero es realmente genial, porqueusted puede cambiar las cosas, se puede ver en vivo actualizados. Y creo que usted obtendrá una gran partecomprensión más intuitiva de HTML si en realidad sólo pasa algúntiempo experimentando con ella. Así que por eso he dicho,la práctica y la experimentación. >> Google, a partir de ahoraa cabo, probablemente será uno de sus mejores recursos y amigos. O Bing-- estoy trabajando en Microsoft,así que tal vez debería decir Bing. Pero casi cualquier cosasólo va a ser la sintaxis, por lo que la comprensión de lo que las etiquetas son,understanding-- al menos con CSS-- cómo cambiar ciertos atributos. Va a ser muy útil. >> Así que, aunque no lo hacemostener las cosas preparadas, nosotros tenemos clase de algunas de las mejores prácticasque queremos que los chicos a probar y permanecéis por-- o más bien, que debieraacatar hasta nuevo aviso. Así que cierra todas sus etiquetas. Esperemos que todo el mundo has-- sabes qué,si esto no tiene sentido en este momento, Te prometo que tendrá sentidocuando estamos de codificación de la página. Pero cerrar todas sus etiquetas. Así que si alguna vez tiene algunaencabezado que es el soporte, H1, soporte, asegúrese de quecada vez que haya terminado con eso, cerrar esa cabecera. Valida tu página con W3 Validador. Si no cierra sus etiquetas,usted puede conseguir un comportamiento inesperado. Se dirá que su página no es válidosi se ejecuta a través de este validador. Así que cuando en doubt-- y especialmenteen esta semana y la semana siguiente pset-- de la misma forma que pedimosusted utiliza el cheque 50 y el estilo 50, usted podría pensar en estocomo uno de sus cheques, ¿de acuerdo? >> Así que si no pasa el validador W3. Eso es algo que vamos a atracar en usted. O que te estoy diciendo la derechaAhora, voy a atracar en usted. Así que asegúrese de que valida. No es difícil. Usted acaba de pegar en el códigoy que va a decir, ya sea buen trabajo o que se está perdiendoalgo de la misma manera que el estilo 50 te dicedonde usted está arruinando. >> Y a continuación, una última cosaes lo que quieres para separar su margen de beneficio, que es todo lo que HTMLo el texto, y su estilo. Así que vamos a hacer un ejemplode ese derecho después de esto. Así HTML y CSS deben estar separados. Y vamos a estar hablando deMVC, que es el Modelo Vista Controlador, la próxima semana. Ustedes deben, probablemente,aprender acerca de que en la conferencia mañana si tuvierasya aprendido hoy. >> Y es sólo un poco deun paradigma que tendemos utilizar al crear webpáginas para separar las cosas. Usted puede pensar en él de la misma maneraque tendemos a funciones separadas en C donde hash para encontrar cosas. Es sólo una manera dehacer su vida más fácil. Se separa atributos o código queusted estaría utilizando una y otra vez, pero de esta manera, que tipode lo mantiene agradable y limpio. Y si usted quiere cambiaruna cosa, que lo cambie una vez y que ha cambiado en todas partes. Así que es más por sula facilidad y flexibilidad. >> Así que con CSS, que es muy similara HTML, pero en lugar de etiquetas que acabo de mencionar, queutilizar lo que se llama selectores. Y, básicamente, sólo un pocode asociar una determinada etiqueta en HTML con diferentes atributos. Y cuando digo atributos, quiero decircosas como el color de la fuente, estilo de fuente, el color del fondo,el color de tu texto. Ese tipo de cosas. Al igual que si se centra,si es a la derecha, si es inverted-- todode estas cosas frescas. Cualquier cosas estilísticaslo que hacen para su texto, esto es lo que quiero decir con atributos. >> Y luego dos cosas principales que debe saber es queselectors-- dos de la factors-- principal son ID, que es único. Sólo se puede usar esa por una cosa. De lo contrario, va a gritar a usted. Y cuando lo definimosen un archivo CSS, lo hará ser de hash ID y luegoqué atributos que queremos. Te prometo que vamos air a través de un ejemplo. Se va a hacer mucho más sentido. >> Clase puede referirse a varios bloques. Así que usted puede tener suprimer y tercer párrafo tener el mismo tipo de atributos sique ellos asocian con la misma clase. Y cuando definimos ellosen CSS, hacemos una clase de puntos, con ser cualquier claseusted desea que sea nombrada. >> Así que sé que esto es lo correctoahora muy abstracto. Es por eso que vamos a código. Yo sé que ustedes amoreso, y todos ustedes son me va a ayudar porqueesta es su página web. Esta es la página web de nuestra sección, chicos. Así que, ¿hay alguna pregunta antes de la Primeraapagar el PowerPoint o nada quieres que desplazarse hacia atrásque antes de empezar a codificar? >> AUDIENCIA: Cuando usted dice etiquetas de los partidos,Qué quieres decir selectores o etiquetas? ALLISON Buchholtz-AU: Puedepensar en ellos como la misma cosa. Es sólo diferentes palabras. Quiero decir, como selectores. Pero selectores también se asignan a etiquetas. Así que usted puede pensar en ellos comoefectivamente la misma cosa. Te prometo que va a hacermás sentido cuando codificamos. Cualquier cosa, desde laPowerPoint o cualquier pregunta en este momento antes de que realmentecrear la página de la sección? Todo el mundo listo? Enfriar. >> Así que tengo uno comenzó. Permítanme aumentar el tipo de letra para ustedes. Aceptar, por lo que en este momento, sólo tenemos unesqueleto página web aquí. >> Tenemos algo de HTML. Tenemos un poco de cabecera, que nosver aquí como ejemplo la página web. Algunos título, algunos de fuente. Estas son las etiquetas, ¿de acuerdo? Así que cuando me refiero a cerrar sus etiquetas, vemosaquí esta cabeza soporte es su apertura etiqueta, y este soporte/ Cabeza está cerrando él, ¿de acuerdo? >> Así que usted podría pensar en esto comosus apoyos en sus condiciones si o el de los bucles. Si usted tiene uno al principio,quieres uno al final. Es todavía funcionará la mayoría del tiemposi usted no tiene una etiqueta de cerrado, pero mejor es cerrar sus etiquetas. >> Así que en este caso, vamos a cambiar esto. Vamos a tener una sección de siete. "Sección Página Web." Así que sólo voy a cambiar esto. >> Y si nos vamos de aquí y nosotrostengo reload-- guardar y reload-- nos damos cuenta de que hasta aquícambió, ¿no? Enfriar. Así que esto cambia el título. Esto es lo que haya en su ficha. >> Así que esto es una especie demirando un poco aburrido. Yo no sé acerca de los chicos. Creo que queremos algo más aquí. >> Así que lo que podemos hacer es lacabecera es sólo allí. Vamos a hacer algún tipo de cuerpo. Así que tenemos un cuerpo aquí. Yo siempre hago abierta ycerrar mis etiquetas para empezar, de la misma manera que lo hago llaves. Ah. Espera, ¿qué? >> AUDIENCIA: [inaudible]. ALLISON Buchholtz-AU: Ah. Ustedes me dieron. Buen trabajo. Estrella de oro. >> Aceptar, por lo que tenemos un cuerpo aquí. Y ahora vamos a empezar añadiendo un poco de texto. Así que tienes una pareja diferenteopciones para agregar texto. Tenemos cosas como las cabeceras. Tenemos sólo texto normal. Así que vamos a empezar con un cabezazo. En realidad, si ustedes quierenpara levantar HTML de W3 School, puedes especie de mirar a su alrededory si hay algo en particular que desea probarcon esta página web, podemos hacer eso. Así que en este caso, vamos a hacer un poco de h1. Así h1 es como la cabecera más alta. Le dará algoque es muy grande y en negrita. >> Y en este caso, lo que queremospara el primer texto en nuestra página web? Cualquier cosa. Ustedes van a crear esto. Yo sólo voy a escribir. AUDIENCIA: Bienvenido. >> ALLISON Buchholtz-AU: Bienvenido. Aceptar, por lo que si lo guardamos y recargamos,tenemos una gran gran bienvenida. Así que para que pueda ver eldiferencias, vamos a hacer algo en H6. ¿Qué es lo que queremos aquí? Derecha? >> Aceptar, por lo que sólo lo que puedever la diferencia. Sí, Sublime. Así que si te fijas, h1, muy, muy grande. h6, como negrita, pero mucho más pequeño,y usted tiene todo lo demás. Así que usted podría tener h2, h3, h4. Y estos son sólo los encabezados,así que si usted está tratando de para crear una página web quetiene diferentes secciones, tal vez usted quiera usarcabeceras en alguna parte. >> Enfriar. Así que vamos a añadir algunos máscosas en nuestro cuerpo. Veo que sería tipode fresco si tuviéramos una imagen. Siento que todo el mundo podía utilizar tal vezun cuadro lindo conejito justo ahora, por lo que vamos a encontraruna imagen del conejito de primera. >> Yo no sé si ustedes tienen algunapreferencias sobre cuál queremos. ¿Tiene alguna preferencia? Este de aquí? Abajo. Okay. Que uno es. Buenas opciones. >> OK, así que vamos a ver nuestra imagen. Mira eso. Mira que cosa adorable. ¿Cómo puedes estar tristeun lunes con esto? >> Así que sólo vamospara copiar la URL de la imagen. Y lo que queremos hacer es, vamos adecir que tenemos un poco de p para párrafo. Vamos a decir: "Miramirar el conejito lindo. d'awwww ". Amo a mis conejitos. Tengo un conejo en casa. Echo de menos mi conejito. Entonces, ¿qué vamos a hacer--No sé si ustedes quieren to google esto-- pero con HTML,¿cómo podría incluir una imagen? Literalmente, si google"Incluir la imagen HTML" ¿Por qué no ustedes me dicenlo que esta etiqueta debe ser? >> AUDIENCIA: img source-- >> ALLISON Buchholtz-AU: img source-- AUDIENCIA: --equals-- ALLISON Buchholtz-AU: --equals-- AUDIENCIA: --quote-- sí. ALLISON Buchholtz-AU: Perfecto. Precioso. Vea, la generación MySpace, ¿verdad? Audiencia: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Guau. Ha sido una locura. Okay. >> Así que asegúrese de que tengo este derecho. Enfriar. Así que esto debería estar aquí. Y luego, si recargamos, tenemos nuestraBunny en la página ¿No es esto adorable? >> Esto es tan lindo. Elegiste un gran, gran foto. Estoy cavando ella. >> OK, así que tenemos este conejito adorable ahora. Hemos sido capaces de añadir unimagen, así como así. Así que, básicamente, si hay alguna imagenque desea añadir a su página web, puedes añadir como este. Otra cosa sería siusted ha almacenado la imagen en la misma carpeta queeste archivo, usted puede simplemente escribir lo que el nombre de esa imagenes en lugar de tener un enlace web. >> Todavía sería entre comillas. Sólo sería comosi hubiéramos llamado esto-- si esta imagen se había salvadoen la carpeta con el archivo HTML que estoy editando yfue llamado bunny.jpg. También podríamos hacer esoy que se presentaba. Sin embargo, no tengo este guarda enel archivo y quiero mantener el conejito, así que vamos a seguir el enlace. >> AUDIENCIA: ¿Cuál es rabbit.org? >> ALLISON Buchholtz-AU: rabbit.org. Es un oportunas paraMira, puedes adoptarlo. Adopción. bunny.jpg. Quiero adoptar este conejito. Oh, dios, es tan lindo. >> Aceptar, por lo que hemos añadido las cabeceras. Hemos añadido una imagen. Obviamente, hemos añadidoalgún texto aquí, ¿verdad? Si quisiéramos añadir otratextos, nos volveríamos a ir de esta manera. Así que este es otro párrafo. >> Y decimos "este es otro párrafo." Además, yo soy un corrector ortográfico horrible,así que puede escribir mal las cosas. Sólo para tu información. >> Así que tenemos otropárrafo aquí, ¿verdad? Así que tal vez usted quiere hacer algoun poco más interesante que un simple tener todo el texto, como alineado a la derecha. Tal vez usted desea centrar el texto, ¿de acuerdo? >> Así que si alguien quiere utilizar losordenadores a mano en frente de usted y dime cómo estásva a centrar este texto, >> AUDIENCIA: p align. >> ALLISON Buchholtz-AU: Asíp align es igual a "centro". Él está matando, chicos. Ustedes necesitan dar un paso hacia arriba. Y tenemos "Esto está centrado." Y ahora nos hemos centrado en algo. >> De la misma manera, silo quieren alineado a la izquierda, usted podría hacer iguales alignizquierda, alineación es igual a la derecha. Totalmente de usted. Si lo hice aquí, entonces estedeberían: ahora está alineado a la derecha. >> AUDIENCIA: Allison? Por origen de la imagen, ¿por qué no eshay cerca de la fuente img? ALLISON Buchholtz-AU: Lo sentimos. Éste debe serAhora hay ya está bueno. Ahora estamos bien. AUDIENCIA: ¿No tienespara cerrarla allí, o no? ALLISON Buchholtz-AU: Bueno, por lo imgfuente, ésta se solo-- con la imagen, que sólo es visto como uno de los elementos, mientras quesi nota para el resto de ellos, tenemos alguna etiqueta a continuación la información queque se refiere a continuación, y una etiqueta de cierre. Pero con la imagen, todo estásólo una especie de auto-contenida. Enfriar. Así que ustedes saben cómo crear unencabezado, usted sabe cómo introducir texto, usted sabe cómo poner una imagenahora, puede alinear las cosas. >> Otra cosa que ustedpuede ser que desee ser capaz de hacer es crear una lista en CS-- estamostipo de entrar en conjunto de procesadores de la próxima semana. Las cosas que nostípicamente enseñar esta semana va muy bien conconjunto de procesadores de la próxima semana, así que estamos tipo de mezcla, la superposición de las cosas aquí. Pero va a ser útil para la próxima semana. >> Así que si queríamos crear algo delista, ¿cómo podemos hacer eso? No se puede responder a esta hora. Alguien tiene que hacerlo. No es difícil, chicos, lo prometo. Google "lista desordenada HTML." Qué fue eso? >> AUDIENCIA: [inaudible]. ALLISON Buchholtz-AU: Derecho. Así que es lo que queremos pedimos o desordenada? Vamos a hacer una desordenada. Así que tenemos algunos ul, querepresenta lista desordenada. Y ¿qué es lo que tenemos para cada elemento? Qué se necesita su propia etiqueta? ¿Podemos empezar a escribir las cosas? >> AUDIENCIA: li. >> ALLISON Buchholtz-AU: li. Entonces, ¿cuál es nuestra lista va a ser? ¿Qué es lo que queremos aquí? Acabamos de hacer nombres. Sólo hacer Jacob. >> Alimentos Conejo: audiencia. >> ALLISON Buchholtz-AU: alimentos de conejo. Aceptar que me gusta esto. Alimentos de conejo. >> Aceptar, por lo que tenemos zanahorias. Me gusta este tema de conejo. Estoy cavando mucho. AUDIENCIA: En realidad, yo pensabaque Jacob sería una de fiar. ALLISON Buchholtz-AU: Jacob? Jacob es comida de conejo. Si usted vio Jacobfoto de las horas de oficina, usted podría haber pensado que él consiguióatacado por un conejo asesino. >> AUDIENCIA: Tengo un conejo ahora. Tengo un conejo asesino ahora. >> ALLISON Buchholtz-AU:Me estás tomando el pelo? >> AUDIENCIA: Voy a traer la próxima sección. Lo tengo. >> ALLISON Buchholtz-AU:Esto es ridículo. De todos modos. >> AUDIENCIA: [inaudible] >> AUDIENCIA: Sí, mi supervisortiene un conejo también. >> ALLISON Buchholtz-AU: Quiero un conejo. Aceptar, quien trae un verdadero conejo dela siguiente sección, brownie puntos totales. AUDIENCIA: [inaudible] AUDIENCIA: ¡Oh, no es real. Es un conejo de peluche. >> ALLISON Buchholtz-AU: Ohsí, podemos cerrar estos. Parece rad. AUDIENCIA: ¿Realmente importa? ALLISON Buchholtz-AU: No lo hace. Con la mayoría de estas cosas,no cierra la etiqueta, El 99% del tiempo nada malo vaa suceder, pero es un buen estilo, también. Así que Jacob. Y tenemos la lechuga. AUDIENCIA: Para los enlaces,que es realmente importante. ALLISON Buchholtz-AU: Hm? AUDIENCIA: Para hipervínculos. ALLISON Buchholtz-AU: Para hipervínculos. Sí, hipervínculos lo necesitan. OK, así que vamos a ver aquí. Y tenemos el cierre de nuestra lista. Y nos fijamos en eso. Hemos todos-- Jacob, justo ahí. Comida de conejo. Me recuerda a Bunnicula. >> AUDIENCIA: [inaudible] ALLISON Buchholtz-AU: Estoy trayendo de vueltatodas las referencias de la vieja escuela de hoy, ¿no? A tan solo todas las viejas referencias escolares. Debería haber traído comoGogurts o algo para picar. >> AUDIENCIA: O Gushers. ALLISON Buchholtz-AU: Oh. Okay. Voy a ver si puedo rastrearabajo Gushers para la próxima semana. Creo que puedo hacer eso. Creo que podríamos teneralgunos en la oficina. >> Aceptar, por lo que hemos cubierto una gran cantidad de diferentescosas que usted puede hacer con HTML, ¿verdad? Y como usted probablemente puede ver, esnothing-- con suerte, no demasiado intim-- si lo es, no me refiero amenospreciar a nadie. Si usted está teniendo problemas,por favor, venir a hablar conmigo. >> Pero la mayor parte de ella es justomirando a la sintaxis, ¿verdad? Si desea una lista desordenada,si quieres algún tipo de lista, si usted desea alinear algo oFormato de algo, todo se trata de sólo tipo de buscar elsintaxis para HTML, ¿verdad? Y una cosa que esmuy bien hecho es si vas a-- vamos a ver,lo que es un buen sitio web que nos gusta? Alguien tiene alguna sitios web favoritosque están bien para que aparezca en línea? ¿Sabes qué, vamos a hacer CS50. Eso es bonito y seguro, ¿no? >> OK, así que aquí CS50. Oh, mira, hay una sección en este momento. Si te gusta la forma en que se ve. >> AUDIENCIA: [inaudible]. ALLISON Buchholtz-AU: No somosva a hacer la sección meta, chicos. No está sucediendo. Sería genial, perono vamos a hacerlo. >> Entonces, ¿qué se podía hacerhacer si te gusta la forma esto funciona es que usted puede siempre tiene la razónhaga clic en cualquier página web que te gusta y usted puede hacer Ver origen de página. Traerá todo el HTML. Y esto es en realidad una muy buenaforma el estilo de su propia página web. Ir a una página Web querealmente te gusta y mirar el HTML y averiguar cómo lo hicieron. >> Y, literalmente, todo el tiempocomo usted cita cosas, siempre y cuando usted no está solorobando a la gente, que está bien. Especialmente para CS50[? financiamos?], estamos tipo de esperar que para llegarla inspiración de otro sitio web. Así que no dude. Mira a través de sitios web quecrees que son realmente bastante y averiguar cómo utilizanHTML y CSS para hacer estas cosas. >> Así que como ves aquí, obviamente haycomo enlaces y tenemos una clase aquí. Tenemos un enlace aquí. Tenemos una lista. Es probable que tengamos algunafotos en alguna parte. >> Tenemos un poco de estilo fresco aquí. Esta es la próxima cosaque vamos a hacer. Así estilo, cada vez que vea estossoportes de estilo, que es básicamente CSS. Ben, ¿usted tiene una pregunta? >> AUDIENCIA: ¿Cuál es div? >> ALLISON Buchholtz-AU: dives justo lo que es A-- div? AUDIENCIA: División. ALLISON Buchholtz-AU: División. Sí, es comoseparar diferentes elementos. OK, así que aquí es lo que estamosva a entrar en la próxima. Así que este puede no ser el mejorestilo porque, si usted nota tenemos HTML y estilo en la misma página,y que en realidad queremos separar aquellos, ¿De acuerdo? Y, de hecho, me dejóabrir mi derecho porque esto se supone que esel PDF, por lo que tenemos style.css. >> Así que lo que podemos hacer aquí es estosson cosas interesantes como algunos se desvanecen y podríamos tratar de hacer eso, pero me sientocomo lo haría desastre que sobre la marcha, así que te animo a chicosir intentarlo por su cuenta, pero yo no voy a hacerlo ahora mismo. Así que si ustedes, recuerden,si alguna vez golpeó conjunto de problemas, algo se abalanza desde el lado. Tiene que ver con el fundido yla transición y otras cosas. >> AUDIENCIA: ¿Y eso es todo CSS y HTML? >> ALLISON Buchholtz-AU: Todo CSS y HTML. Sí. Así que usted puede hacer un montón de realmentecosas interesantes con CSS y HTML. Así que con nuestro increíblepágina web del conejito aquí, vamos a hacer un poco depoco de estilo CSS con él. >> Así que si alguna vez tiene un estilohoja, lo que tenemos aquí, usted puede llamar a style.css. Se le puede llamar lo que quieras. Lo que es importante es que vamoshacer referencia a ella en nuestra web.html aquí. >> Así que lo que vamos a hacer esnosotros-- así que no me meto esta up-- vamos a vincularestos dos archivos juntos. Así que en el mismo manera-- voyestablecer una analogía a C aquí. De la misma manera que si tienealgunos library-- y tenemos cs50.h-- nuestro compilador lo vincula. Esto es sólo una explícitaenlace de nuestra parte. Así que de la misma manera que lo hacemoshash de incluir algún archivo, lo que Estoy a punto de escribir es sólo elEquivalente HTML / CSS de eso. >> Sólo estamos diciendo, OK, esta página webse va a utilizar esta hoja de estilo, ¿de acuerdo? Así que tenemos link rel igual a hoja de estilo. Y luego tenemos el tipo, css. Y entonces es igual a href. >> Okay. Así que todo esto lo hizo aquí es puedepensar en esto como la misma cosa como un hash incluir. Obviamente se ve un poco máscomplicado, pero en todos los casos, es efectivamente lo mismo. Así que esto es sólo un poco de vinculación de unhoja de estilo, que es de tipo text / css, y el nombre de la misma es style.css. >> ¿Qué es importante saberes que la página web que estoy trabajando justo ahora-- web.htmly style.css-- están en la misma carpeta. Debido a que en diferentes carpetas,usted necesita dar a la raíz real a ella o la ruta de acceso a la misma. Pero en este caso, estamos manteniéndolasuper sencillo y que va a estar aquí. Así que si hacemos eso, tengo un poco delas cosas ya se ponen en cola hasta aquí. >> Así que tenemos un cuerpo, que se vapara que nuestro color de fondo, que en este momento es de color azul claro. Podemos cambiarlo si queremos, perosi recuerdo correctamente, sólo debe cambiarlo a azul claro. Y ahora tenemos un fondo azul claro. Y tuvimos aquí-- puede alguien recordarcuál es ID de hash o clase? >> AUDIENCIA: ID. >> ALLISON Buchholtz-AU: ID. Enfriar. Así que lo que queremos haceres cuál de estas fuentes o las cuales: ¿queremos "Mirael conejito lindo "ser púrpura? Creo que queremos que para ser púrpura. Estoy bastante de acuerdo con eso de ser púrpura. >> Así que lo que hace es que hacesIdentificación equals-- en este caso Yo dije, ¿qué, de color bastante aquí. Nos recargamos. De repente, es púrpura. OK, así que con la identificación, recuerdetiene que ser único, por lo que nunca debería estar usandoeste ID en cualquier otro lugar. Sin embargo, con clase, como lo hemos hechoaquí con un tipo de letra bonita, Yo debería ser capaz de utilizarque en cualquier lugar que quiero. >> Así que vamos a hacer esto de aquí. Así que podemos decir que la clase es igual a la fuente bonita. Y si miramos ahora, tenemoseste tipo de letra muy bien aquí. Así que tal vez quiero hacer las dos cosas. OK, yo realmente no sé si esto esir a trabajar, pero quiero intentarlo. Y así es como se aprende CSS y HTML. Usted es como, ya sabesqué, quiero probar esto. No estoy seguro de si va a funcionar. Vamos a ver si funciona. >> Y mira eso. Ahora es de color morado yes un tipo de letra bonita. Aceptar, por lo que tiene todo estodiferentes cosas que puede hacer. ¿Tiene una pregunta? >> AUDIENCIA: Sí. Bueno, al igual que los coloresque está usando son palabras. ¿Hay una manera de hacer colorescon el hexadecimal RGB? ALLISON Buchholtz-AU: También puedehágalo con hexadecimal, creo. Sí. Pero es algo bueno sino quieren mirar hacia arriba. Usted sólo puede ser como, púrpura o azul. AUDIENCIA: Esperemos quesaben lo que eso significa. ALLISON Buchholtz-AU: Derecho. Así que vamos a hacer esta lectura o chartreuse. ¿Por qué nunca elegir chartreuse? Es un color interesante. >> Aceptar, por lo que, obviamente, podemos ver quepuede cambiar las cosas como queramos. Si querías create-- digamosqueríamos crear otra clase. ¿Qué puede ser que ustedes quieren cambiar? Si acabas de llegar W3Schools 'Documentación CSS, Dejo la palabra a ustedes. Podemos tratar de hacer algo fresco conesto en el último par de minutos. Porque he amable de su parte dieron unaCurso acelerado en un montón de cosas interesantes que usted puede hacer. Pero al final, como ya he dicho, sisólo experimento, usted aprenderá mucho. >> AUDIENCIA: ¿Sabía usted mira para arriba esa fuente? >> ALLISON Buchholtz-AU: Sí,Miré hacia arriba esa fuente. Así como, literalmente, mefui a-- ¿qué hice? Hice la lista de fuentes CSS, yluego hice pila de la fuente, y entonces yo estaba como, mira, aquíson todas las fuentes frescas que usted puede hacer. Y allí estaba este, por lo queLo copié a mi portapapeles. Y entonces yo estaba como,Aceptar, fresco, ahí vamos. Todo hecho. >> AUDIENCIA: Así que usted tiene que asegurarse deCSS que sabe lo que es la fuente. >> ALLISON Buchholtz-AU: Sí. >> AUDIENCIA: ¿Qué es lo que dice al final? Cursiva? >> ALLISON Buchholtz-AU: cursiva. Sí. >> AUDIENCIA: Imagen de fondo. >> ALLISON Buchholtz-AU: Imagen de fondo. Okay. Así que usted quiere decirme cómo hacer esto. Dejo esto a usted. Sólo estoy escribiendo aquí ahora. La rueda está en tus manos. >> AUDIENCIA: Aceptar >> ALLISON Buchholtz-AU: OK. ¿Qué estoy haciendo? >> AUDIENCIA: Doing-- Sé loviene después del corchete. ALLISON Buchholtz-AU: OK. Así que, probablemente, en el cuerpo,asumiría, porque somos haciendo la imagen de fondo. >> AUDIENCIA: Sí, vamos a hacer eso. >> ALLISON Buchholtz-AU: OK. AUDIENCIA: OK, entonces fondode colon, y luego necesita una dirección URL de esa imagen. Tal vez pseudo-código que, por ahora, tal vez. >> ALLISON Buchholtz-AU: ¿Qué¿me gustaría a-- AUDIENCIA: Estoy pensando como un GIF. ALLISON Buchholtz-UA: Un GIF? Eso va a ser interesante. Bien, ¿qué estoy buscando en Google aquí? >> AUDIENCIA: No, eso es su elección. >> ALLISON Buchholtz-AU: ¿Por quéno nosotros-- si es un conejito, Siento que deberíamos tener unbonito césped o algo de hierba. >> AUDIENCIA: Prado. Un prado. >> ALLISON Buchholtz-UA: Un prado? Okay. AUDIENCIA: O Rachel Maddow. ALLISON Buchholtz-AU:Éste se ve bastante. Oh, eso es muy pequeña, sin embargo. Necesitamos una imagen de buen tamaño. Vamos a ver. Oh, mira. Eso es un prado bastante. ¿Sabes qué me gusta esta. Vamos a copiar éste. >> AUDIENCIA: OK, así que creo que esla URL, los paréntesis abiertos. >> ALLISON Buchholtz-AU: OK, URL. >> AUDIENCIA: A continuación, la dirección. >> ALLISON Buchholtz-AU: OK. ¿Es eso todo lo que necesitamos? >> AUDIENCIA: Cerrar paréntesis, punto y coma,y luego el espacio, fondo guión dos puntos de fijación fijo, y corchete. >> ALLISON Buchholtz-AU: OK. Vamos a ver si funciona. Va a ser muy bien si lo hace. Estoy muy emocionado aquí. No funcionó. Me pregunto por qué. AUDIENCIA: Tal vez la URLtiene que estar en las citas. ALLISON Buchholtz-AU: Tal vez. Y esta es la manera de aprender, chicos. >> AUDIENCIA: ¿Podemos tener fondocolor y la imagen de fondo? >> AUDIENCIA: No. Uno sustituye al otro. >> ALLISON Buchholtz-AU: No lo sé. Vamos a ver. Vamos a echarle un vistazo y ver. >> AUDIENCIA: ¡Oh, tal vez, sí. [Interponiendo VOCES] >> ALLISON Buchholtz-AU: OK, esto esobviously-- yo [inaudible] aquí. Así Aceptar. AUDIENCIA: apego Antecedentes. ALLISON Buchholtz-AU: Ah. >> AUDIENCIA: OK, yo no lo sé. ALLISON Buchholtz-AU: Separece que debería funcionar. ¿Estás seguro de que es el colon después de la URL? >> AUDIENCIA: No, es punto y coma. ALLISON Buchholtz-AU: Es punto y coma. AUDIENCIA: ¿He dicho de colon? ALLISON Buchholtz-AU: Usted dijo que dos puntos. AUDIENCIA: ¡Oh, no. ALLISON Buchholtz-AU: Hay que ir. AUDIENCIA: Oh, espera, ahorano podemos leer el texto. ALLISON Buchholtz-AU: Ahorano puedes leer el texto, pero tenemos la imagen de fondo. Mmhmm? >> AUDIENCIA: ¿El HTMLapoyar el contenido dinámico? Al igual, ¿podría cambiar el tamaño de esa imagendependiendo del tamaño de la ventana, o es que un CSS-- >> ALLISON Buchholtz-AU:Así que CSS tiene que hacer eso. Así que si ustedes están interesadosen el aprendizaje de CSS avanzado, Estoy co-enseñando unaseminario sobre CSS en la séptima. Y te prometo que lo harámucho más en profundidad y hacer mucho más frescocosas en esta sección. Y mi compañero de maestro es comototal de extremo frontal maestro dev web. Así que será muy bien si quierespara aprender acerca de todas las cosas interesantes CSS que puede hacer. >> Pero lo que tenemos aquí consu apego fondo fixed-- así que es un poco de size-- fijopero en realidad se puede dynamically-- si alguna vez ver páginas web, comola mayoría de las buenas páginas web van a hacer, al ajustar latamaño de su navegador, se ajusta el fondo o la cantidadestá mostrando o reformatea las cosas, ¿no? Así que eso es lo que llamamosposicionamiento relativo. >> Y CSS realmente puede tomar el tamaño de suancho del navegador es o qué tan alto es, y se puede colocar las cosasde acuerdo con los tamaños relativos frente tamaños absolutos. Y eso es, obviamente, más avanzadoCSS, pero eso es algo que usted puede hacer. Si quieres aprendermás, ven a mi seminario. >> Así que eso es algo que usted puede hacer. Y CSS puede en realidadhacer-- CSS y JavaScript, que vamos a entrar en la próxima week--puede permitir que usted cambie de forma dinámica páginas sin tener queellos recargar todo el tiempo. Y se llega a hacer algocosas muy bien. >> Entonces, ¿hay otra cosaque ustedes podrían querer hacer o lo que quieras para explorar? Tenemos 10 minutos para el final. También podemos salir temprano, pero siusted quiere hacer algunos más cosas web, podemos, pero no estoyte va a obligar a. Pero podemos también acaba de comer dulces. AUDIENCIA: Resalta el textoblanco así que usted puede leer. ALLISON Buchholtz-AU: OK. Así que en este caso, queremos un poco de p. AUDIENCIA: ¿Hay que hacerlo en elcuerpo por lo que se aplica a toda la página? ALLISON Buchholtz-AU:Sí, podemos en realidad. Esa es una buena idea. Así que tener-- ¿Es ustedSabemos lo que debemos ser? No sé si podemos hacer el color del texto. Iba a tratar decrear otra clase aquí. >> AUDIENCIA: ¿Cómo se llega de modoque tiene las sugerencias? ALLISON Buchholtz-AU: Asísi ustedes están interesados, este es otro textoeditor llamado Sublime. Usted debe ser capaz deinstalarlo en su aparato. A veces se pone un poco complicado. Si desea ayudar con eso,Estoy súper feliz de ayudarle a con él, porque es grande y geditque es impresionante, porque se puede compilarlo en la parte inferior, pero realmentecomo Sublime porque es bastante y que sí hace cosascomo la función de autocompletar. >> Así que usted puede sin duda no dude enque me haga saber si usted quiere hacer eso. Si usted acaba de Google "Sublimetexto, "por lo general tiene instrucciones sobre cómo instalaren diversos sistemas operativos. Es realmente genial, mepensar, en mi opinión. Así p. Creo que sólo puedo hacer texto-- osólo podemos hacer el color es "blanco." Ya está. >> Así que lo que hice aquí es que yono cambiar todo el texto. Pero p aquí es sólo unetiqueta que tenemos, ¿no? Esta etiqueta de párrafo. Así que acabo de crear un elemento de CSS queDicho esto, bien, cualquier cosa con esta etiqueta p, hacen que el color blanco. >> Así que si te has dado cuenta, se hizoeste blanco y este blanco. No tenía nuestra lista blanca porqueque no está asociado con eso. Usted podría ir a través y usted podría decir-- >> AUDIENCIA: Haga color de fondo. >> ALLISON Buchholtz-AU: El color de fondo? >> AUDIENCIA: Antecedentes de la tubería ende color donde usted pone la etiqueta p. >> ALLISON Buchholtz-AU: OK. ¿Lo quieres blanco? AUDIENCIA: Mmhmm. ALLISON Buchholtz-AU: OK. Hay que ir. AUDIENCIA: Eso es raro. ALLISON Buchholtz-AU:Bastante bien, ¿verdad? Así que si usted acaba de perder el tiempo,usted va a aprender mucho. Y puede ser bastante fresco. Creo que es definitivamente másgratificante que a veces porque usted no tiene que esperarpara su programa para compilar. Usted sólo puede golpear Actualizary usted es como, ¡oh, mira, funcionó, o oh, yo soyprobablemente perdiendo algo. Y eso es algo que es realmentebueno de la siguiente parte de la clase, es sin duda, yopiense, más fácil de comprobar a medida que avanza en el camino frente atener que escribir estos programas largos y deseando y rezandoque funciona en el extremo. >> Así que con eso, creo queustedes todo parece bueno. Si usted tiene alguna pregunta, como siempre,venir a hablar conmigo, ven que me haga saber. Seré justo fuerapara los próximos 15 minutos si quieres charlar sobrecualquier cosa y todo. >> Así que espero que guys--buena suerte con este conjunto de procesadores. La fecha límite es el viernes al mediodíaya que fue lanzado a finales. Así que probablemente van a verun montón de ustedes el jueves, pero espero que no. Tal vez usted tendrá que hacer para entonces. Yo estaría muy orgulloso. >> Pero si no, te veré el jueves. También puede utilizar una fecha tardía, quese extiende a sábado al mediodía. Pero yo no-- ¿eh? >> AUDIENCIA: Halloween. >> ALLISON Buchholtz-AU:Es Halloween, a, yb, Yo no creo que vaya aser las horas de oficina el viernes. Así que en realidad no tratar de lograr que se haga porViernes, así que todos podemos celebrar Fin de semana de Halloween. Muy bien, voy a ver ustedes la próxima semana.