[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 va durante mucho más web dev cosas. No sé cuántos de usted ha visto sus conjuntos de procesadores desde que fue puesto en libertad a principios de esta mañana. Yo lo haría como cuántos personas han leído la especificación, pero viendo que has tenido todo de, como, a siete horas para lo miran y es un lunes y usted probablemente ha tenido clase, Voy a asumir que la mayoría de ustedes no tienen. Si usted tiene, felicitaciones adicionales. Básicamente, se está ayudando implementar 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 realidad buena experiencia en realidad. Así que para prepararse para que, en la sección de hoy, vamos a ir chmod, TCP / IP, y a continuación, un poco de HTML y CSS. Al final, vamos a realmente código una página web sencilla juntos para ayudarle a chicos tipo de conseguir más familiarizado con eso. Y entonces, si usted no ha recogido sus pruebas, que están en el frente, pero estoy bastante seguro de que todos aquí 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 pregunta Mientras tanto, no dude en enviarme un correo electrónico personal. Voy a responder con su persona preguntas, como siempre lo hago. Así que en esa nota, chmod. Así que, básicamente, todo lo que necesita saber acerca de chmod es que se utiliza para cambiar los permisos de archivos, ¿verdad? Así que es sólo algunos sistemas llaman un cambiar los permisos, como se dice aquí. Y si alguna vez quieres ver los permisos que un archivo tiene, en lugar de sólo hacer ls, que podría hacer ls -l. l significa mucho. Así que va a hacer listas largas de todo, y le dará mucho más detallada información acerca de cada uno de sus archivos. Y verás algo-- estoy va a pasar por delante de un second-- pero verás algo similar a que 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 cambiar sus permisos de archivos, lo que desea es utilizar chmod. Usted puede pensar en él como cualquier otro UNIX 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 a tener tres dígitos normalmente. Hay un par de maneras de hacer él, uno de los cuales vamos a repasar. Pero por lo general, tendrá tres dígitos en el rango de 0 a 7 cada vez. Así que una cosa es que hay tres permisos diferentes que podemos dar a cada archivo. Y es legible, que es representado por R, que tendrá sentido en un poco; w, que es se 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 ellos También tener la representación número. Así que tenemos 1, 2 y 4. Y, básicamente, lo que pasa es cada uno de estos tres números aquí corresponde a una diferente conjunto de usuarios que se refieren a esos permisos. Así que usted puede pensar en ese primer número corresponde al usuario real o el propietario del archivo, el segundo número se corresponderá con el grupo, y el último se refiere al mundo, ¿de acuerdo? Así que lo que pasa es recordar los 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 que sería este número? Sería 4 más 2 más 1, que es un 7, ¿no? Y en este caso, estos no tienen nada, por lo que esta aquí lo haría traducir a chmod 700, ¿de acuerdo? Y lo que hace es que otorga todo de estos permisos a tu usuario. Así que esto significa que nuestro usuario pueden 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, no permisos de ningún tipo, ¿de acuerdo? Así que otra manera de escribir que, podemos hacer chmod de tres dígitos, cada uno de los cuales corresponde a cualquiera que sea la suma o que grupo 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 ejemplo donde 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, si notar aquí, si lo hacemos a chmod-- qué grupo estamos hablando 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 personas Si esto es un add permisos A--. Y eso significa que lo x-- permiso estamos otorgando todo el mundo. Leer, escribir, o ejecutar? AUDIENCIA: Ejecutar. ALLISON Buchholtz-AU: Ejecutar. Así que estamos dando a todos los usuarios permiso para ejecutar este archivo, ¿de acuerdo? ¿Y qué si lo que queríamos hacer que 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, queremos para darle a todos los usuarios, ¿no? Así que vamos a tener un número en cada ranura. Eso va a ser el mismo número en cada ranura porque sólo queremos dar todos los permisos ejecutables. Así ejecutable es 1, pero en el camino correcto. Así que si lo hicimos chmod 111 que haría ser el equivalente de chmod un plus x. ¿Eso tiene sentido para todo el mundo? Vamos a ir a través de un par de ejemplos. Así que la gran comida para llevar aquí es una no es de aquí, pero un sólo significa dar a todos los usuarios. u es si lo que desea para dar o quitar un permiso específico de el usuario o el propietario. g es para el grupo, de manera que dígito medio. Y luego los demás que se pueda imaginar como 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 buscamos en más de la imagen. Así chmod 444 en algún archivo darí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 chmod de 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 escribir este 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 permisos estamos en realidad la concesión y para quién? Así que te voy a dar dos chicos minutos para trabajar en eso. Siéntase libre de hablar unos con otros. Para aquellos de ustedes que se produjo en un pequeño tarde, hay dulces y camisas. Hemos dejado tres camisas, y tenemos Kit Kats y Starbursts. Así que no dude en venir grab algunos 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 puerta mientras que ustedes están trabajando en eso. Caramelo siempre es necesario en 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 tienes 5, así que eso es 4 más 1, por lo que ha leído más ejecutable, 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 la suma de los permisos para ese subconjunto, ¿verdad? O bien el usuario, la grupo, o el mundo. Así que en este caso, sabemos que 5 tiene que ser formado por 4 y 1. Y 4 y 1 corresponden a legible y ejecutable. Estamos dando a todo el mundo, para que podamos hacer un chmod rx plus. Y, obviamente, nos fuimos a través de las preguntas allí, por lo que ahora este archivo es ejecutable y 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 el usuario, por lo que es en la primera posición. Y entonces x ejecutable es 1. ALLISON Buchholtz-AU: Exactamente. Así que estamos otorgando ejecutable permisos a sólo el usuario. Así que en este caso, sería de 100. Y yo tengo todas las respuestas arriba 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 realidad con dos chmods, usted podría hacerlo. Así que ¿alguien tiene alguna idea de lo que te pueden obtener chmod 640 reescrita en el otro lado? Usted puede cambiar el usuario y luego usted puede cambiar el grupo es mi sugerencia. Así que si nos estábamos cambiando la usuario, 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 lectura es 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 queremos para 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 propietario permisos de lectura y escritura y le estamos dando la lectura de grupo permisos, que tenemos todos aquí. Mmhmm? AUDIENCIA: Si usted puede escribir algo, tampoco implica que usted puede ejecutarlo? ALLISON Buchholtz-AU: Usted puede escribir en algo-- Yo no creo que implica que usted puede ejecutarlo. Enfriar. Así que eso es todo lo que nos fuimos a través. Así que en este siguiente, que es casos sólo tipo de comunes que desea mantener en mente para fijar su problema. Estos son por lo general los permisos que nos gusta que usted utilice. Así que para el año 711, que da nosotros, por supuesto, el usuario todos los permisos, que tiende a tener sentido. Y entonces es ejecutable por el grupo 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, vas utilizar 644, lo que hacer qué? ¿Qué implica eso, o lo que permisos 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ás se acaba de leer, ¿no? Y luego chmod 600 para cualquier Archivos PHP que se utilizan, su propietario, una vez más, puede leer y escribir en él pero todo el mundo es sólo un poco bloqueado. Así que esto lo hará realidad ser más útil cuando que llegue a su problema establecer la semana próxima, donde en realidad estás construyendo un sitio web. Así que si alguna vez se encuentra con cualquier problema extraño donde no está cargando correctamente, tal vez usted que tenga que agregar un archivo ejecutable permiso, o tal vez usted necesita una lectura o permiso de escritura. Las pequeñas cosas que tienden a tropezar personas arriba, 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ás indirectas en conjunto de procesadores de esta semana, pero todavía tengo que mirarlo desde que fue puesto en libertad esta mañana. Pero usted me envía por correo electrónico, habré mirado en 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 que leer, 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ás importante tipo de conseguir una intuición mayor nivel de ellos. Esto no es CS143 dónde vamos para pedirle que implementar una red, por lo que estará bien si usted no entiende el quid de la cuestión de todos los protocolos. Lo que es importante entender es algo así como lo que representan y por qué son importantes. Así TCP / IP, por supuesto, es el Transmission Control Protocol o Protocolo de Internet, que es básicamente un conjunto de leyes, básicamente, o normas que dicen los datos cómo debe ser manejado, cómo debe ser empaquetadas, transmitida y recibida. Por lo tanto, básicamente, tal y como Aquí dice, aumenta las posibilidades que los datos lleva a donde usted lo quiere llegar a. Estoy seguro que si ustedes fueron a conferencia o lo vio en línea, él has-- No sé si lo hizo este año, pero sé que el año pasado, tuvo un demostración donde tenía una foto de Rob y él partió para arriba en cuatro y ponerlo en sobres y trató de conseguirlo a través de Sanders. Y usted puede tipo de pensar de esa manera. Es sólo un conjunto de reglas que contar los datos como llegar a algún lugar y le permite saber si se echa en falta de datos, de la misma manera que si usted es teniendo varias páginas de notas y usted les etiqueta con la página 104, página 204, 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 que puede mirar a través de sus notas de nuevo o pedir a alguien que volveremos a enviar la conferencia toma nota de ese día. De la misma manera con los datos en el Internet. Si yo estoy pidiendo algo de algún servidor y necesita enviar en múltiples paquetes, probablemente va a número de 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 montar todas las piezas juntas, Cómo sé si falta algo y 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 un poco acerca de los puertos. Esto es en realidad una norma que le permite saber qué tipo de datos está siendo transmitida en estos paquetes. Si vamos con nuestro ejemplo sobre, no lo hacemos sé que es una imagen de Rob 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 que tipo de datos se están transmitiendo. Así que tenemos toda la la mayoría de los más comunes aquí. Así 21-- estos también son amables de 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 archivo protocolo de transferencia, por lo que sólo las reglas que gobiernan la transferencia de archivos. 25, algo que todos utilizar demasiado, es de correo electrónico. 53 es el nombre de dominio sistema, que es básicamente sólo un poco de una búsqueda para el Dirección IP de un nombre de dominio. Así que estoy bastante seguro de que era mencionado en la conferencia, si ir a algo así como google.com, tiene una dirección IP que está asociada con él. No es en realidad google.com. Y así 53 es el puerto que realmente tiene cuidado de tipo de traducirla en esa dirección IP para usted. Y a continuación, 80 y 443 son muy comunes. O tienes tu página web o usted tiene su página web segura, que una gran cantidad de páginas web son transferir a ahora. Así que es una especie de alto nivel visión general de protocolo de transferencia. No veo mucho más en profundidad. Es una especie de cosas interesantes si usted está interesado. Hay un montón de recursos. Wikipedia es en realidad una muy buena página. Así que yo estaba buscando en ella Hace sólo un poco de tiempo, así que recomiendo encarecidamente mirarlo si te interesa o tomar 143 en dos años, porque Creo que es cada dos años. Así que en el final de esto, estamos hablando de las páginas web y HTTP, que en realidad es nuestro próximo tema para hoy antes de entrar en HTML y CSS y en realidad se puede codificar una página web. Será divertido. Tendremos imágenes de conejitos y va a ser genial. Así HTTP, como se puede ver aquí, es una de las encantadoras acrónimos para esta semana, que es Protocolo de transferencia de hipertexto. Así que de nuevo, es sólo otro conjunto de reglas que gobierna hipertexto transferir, en este caso. Así que mejor manera de aprender sobre esto es sólo un poco de a dividirlo en estas palabras individuales porque hay una gran cantidad de palabras 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 la siguiente nivel, así que es como súper texto, como el siguiente texto. Así que es básicamente sólo texto que nos da más información que texto normal hace, ¿de acuerdo? Así que en este caso aquí, este es el hipertexto. Esto nos dice que tenemos algún vínculo que vamos a, que es cs50.net, que es ahora cs50.harvard.edu. Estas diapositivas son un poco viejo. Y se va a mostrar como este, como un hipervínculo, y luego una página web realmente genial. Así que es de texto, que es un poco poco de cosas muy interesantes en allí. Así que usted puede vincular las cosas y que pueda insertar imágenes y usted puede estilo de cosas. Y la cosa más familiar que chicos probablemente tienen con hipertexto es HyperText Markup Language, HTML, que por supuesto es todo de la web que vemos a nuestro alrededor, sentado con un poco de estilo CSS tirado. Pero si había alguien muy grande con MySpace, Estoy seguro de que todo usado HTML todo el tiempo para crear esos perfiles perfectos, ¿no? Me siento como que podría ser un referencia obsoleta ahora, pero lo que sea. Sólo un poco-- ustedes no son que mucho más joven. Algunos de ustedes son mayores que yo. MySpace era todavía un cosa cuando yo era joven. No soy tan viejo. De todas formas, HTML sólo una forma de hipertexto. Así que el hipertexto es sólo texto con características añadidas. Así protocolo de transferencia es probablemente la cosa más dudoso de explicar. Obviamente, transfer-- sólo la transferencia de datos. Así que, o entre el cliente, al igual que su hermano web, y un servidor. Así que, básicamente, sólo el forma en que la Internet funciona. Así la solicitud exacta de cómo funcionan, estamos en realidad va a mirar un ejemplo de solicitud y respuesta. Pero, ¿cómo se solicita información de un servidor y cómo el servidor responde a nosotros es lo que rige este protocolo de transferencia. Así la solicitud y la respuesta tienen seguir este conjunto específico de reglas. Se estandarizó de manera que no importa donde 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 Malan si alguien extiende su mano, usted sabe que es cortesía común llegar 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 estandarizada respuesta, que es ya sea no, gracias o usted podría tratar de sacudir mi mano 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 el mismo 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 ver en una solicitud de ejemplo aquí. Así que hay esta pequeña clave 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étodo solicitud y protocolo version-- así lo soliciten método, versión. Y entonces esto es una nombre del campo y el valor de ese campo, que lo haremos entrar 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 cliente o lo que el navegador web se envía a su servidor. Así que esta es una petición GET, por lo que es pedir algo desde el servidor. Y es, por supuesto, HTTP y es la versión 1.1. Así que el resto de este aquí es lo que llamamos la cabecera, y su información adicional que nos da una mejor idea de lo que en realidad estamos pidiendo, o información que se quiere dar el servidor que podrían ser pertinentes. Así User-Agent le da un poco más Descripción en-- por ejemplo, aquí, rizo / 7.24.0 es en realidad va a decir el servidor que estamos usando Google Chrome como nuestro navegador. Así que si alguna vez escucha acerca de las personas que hablan sobre la fabricación de una aplicación de respuesta para múltiples navegadores, esto es algo que usaría porque si no sé qué navegador la solicitud está viniendo, no se puede adaptar los datos a eso. Así pues, en este caso, el usuario se acaba de dar este tipo de información de identificación sobre qué navegador el usuario está utilizando actualmente, ¿de acuerdo? Así que también tenemos anfitrión, que es donde en realidad estamos con ganas de ir. En este caso, queremos ir a apple.com, comprar algunos nuevos iPads fresco o algo así, tal vez lindo luces en nuestros dormitorios. Y el valor de nombre al final es sólo una carga, sólo una cosa en general para que ustedes puedan ver. En realidad, no corresponder a cualquier cosa aquí. Así que usted puede tener tanto o tan poco como desee en cada caso. La mayoría de las veces, estos son opcionales. Sólo depende de lo que lo que necesita desde el navegador, de su usuario con el fin de dar correctamente la solicitud. ¿O depende de lo que tu usuario en realidad quiere renunciar al servidor. Así que usted puede tener muchos, muchos de estos nombres de campos de cabecera o que sólo podría tener una pareja. Como con tantas cosas Lo he dicho en esta sección, que realmente depende del contexto de cómo se está utilizando este. ¿Eso tiene sentido para todo el mundo? Esto es sólo un ejemplo de una 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 protocolo versión y, a continuación, el nombre del campo y el campo valorar como siempre. Así que nuestra versión del protocolo y 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 contenido type-- 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, dependiendo en los datos que está pidiendo, dependiendo de lo que el servidor quiere volver a usted, es posible que tenga más de estos campo nombres, es posible que tenga menos. Totalmente dependiente del contexto. Y en cuanto a este estatus código aquí, por supuesto, 200 no es el único usted podría tener, ¿no? Tenemos un montón de códigos de estado. ¿Alguien recuerda alguna de las otros 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 que eso significa que con chmods? AUDIENCIA: Significa que usted no tienen permiso para leerlo. ALLISON Buchholtz-AU: Exactamente. De alguna manera, usted no tiene permiso para acceder a ella, ¿verdad? Así 404, 403. Hay un muy divertido uno que siempre introducir todos los años que Me he puesto aquí arriba, como 413, que es que soy una tetera. Usted puede google esto. Es curioso como, que es el código 413 y es que soy una tetera. ¿Qué yo no sé por qué lo haría necesitará siempre que en el Internet, pero estoy divagando. AUDIENCIA: Tal vez usted es una tetera. ALLISON Buchholtz-AU: Tal vez el servidor es una tetera. Quién sabe? Muy bien, así que estamos a punto de la transición a la codificación real. Siento que ustedes van a salir de aquí con bastante rapidez. AUDIENCIA: ¿Por qué lo hace decir "servidor: dos veces? ALLISON Buchholtz-AU: Hm? Servidor de dos veces? Esa es una buena pregunta. No estoy seguro. Voy a averiguar y Todos ustedes voy a enviar por correo electrónico. Bien, cualquier otra pregunta, además de eso? Buena? Enfriar. HTML y CSS, y ahora nosotros llegar a todas las partes divertidas. Así que como he mencionado antes, HTML es 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 hago tener las diapositivas o nada preparados para ustedes con HTML. Se trata realmente de aprender la sintaxis. Y si usted estuviera en el MySpace día, usted tendría esto. Así que en realidad, lo más importante es sólo para practicar y experimentar. Uno de los grandes recursos que lo haría altamente recomiendo usar es W3Schools. Así que W, 3, y luego Escuelas. Tienen una gran cantidad de recursos sobre HTML, CSS en, y que en realidad tienen un pantalla 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 que en realidad hace a la página web. Así que recomiendo encarecidamente utilizar eso. Es muy bueno. Usted no recibirá los fallos seg aquí cuando las cosas van mal. Si te las arreglas para conseguir un fallo seg con HTML, hágamelo saber porque estoy va a ser real intrigado. Pero es realmente genial, porque usted puede cambiar las cosas, se puede ver en vivo actualizados. Y creo que usted obtendrá una gran parte comprensión más intuitiva de HTML si en realidad sólo pasa algún tiempo experimentando con ella. Así que por eso he dicho, la práctica y la experimentación. Google, a partir de ahora a 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 cosa só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 hacemos tener las cosas preparadas, nosotros tenemos clase de algunas de las mejores prácticas que queremos que los chicos a probar y permanecéis por-- o más bien, que debiera acatar 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á sentido cuando estamos de codificación de la página. Pero cerrar todas sus etiquetas. Así que si alguna vez tiene alguna encabezado que es el soporte, H1, soporte, asegúrese de que cada 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álido si se ejecuta a través de este validador. Así que cuando en doubt-- y especialmente en esta semana y la semana siguiente pset-- de la misma forma que pedimos usted utiliza el cheque 50 y el estilo 50, usted podría pensar en esto como 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 derecha Ahora, voy a atracar en usted. Así que asegúrese de que valida. No es difícil. Usted acaba de pegar en el código y que va a decir, ya sea buen trabajo o que se está perdiendo algo de la misma manera que el estilo 50 te dice donde usted está arruinando. Y a continuación, una última cosa es lo que quieres para separar su margen de beneficio, que es todo lo que HTML o el texto, y su estilo. Así que vamos a hacer un ejemplo de ese derecho después de esto. Así HTML y CSS deben estar separados. Y vamos a estar hablando de MVC, que es el Modelo Vista Controlador, la próxima semana. Ustedes deben, probablemente, aprender acerca de que en la conferencia mañana si tuvieras ya aprendido hoy. Y es sólo un poco de un paradigma que tendemos utilizar al crear web páginas para separar las cosas. Usted puede pensar en él de la misma manera que tendemos a funciones separadas en C donde hash para encontrar cosas. Es sólo una manera de hacer su vida más fácil. Se separa atributos o código que usted estaría utilizando una y otra vez, pero de esta manera, que tipo de lo mantiene agradable y limpio. Y si usted quiere cambiar una cosa, que lo cambie una vez y que ha cambiado en todas partes. Así que es más por su la facilidad y flexibilidad. Así que con CSS, que es muy similar a HTML, pero en lugar de etiquetas que acabo de mencionar, que utilizar lo que se llama selectores. Y, básicamente, sólo un poco de asociar una determinada etiqueta en HTML con diferentes atributos. Y cuando digo atributos, quiero decir cosas 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-- todo de estas cosas frescas. Cualquier cosas estilísticas lo que hacen para su texto, esto es lo que quiero decir con atributos. Y luego dos cosas principales que debe saber es que selectors-- 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 definimos en un archivo CSS, lo hará ser de hash ID y luego qué atributos que queremos. Te prometo que vamos a ir 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 su primer y tercer párrafo tener el mismo tipo de atributos si que ellos asocian con la misma clase. Y cuando definimos ellos en CSS, hacemos una clase de puntos, con ser cualquier clase usted desea que sea nombrada. Así que sé que esto es lo correcto ahora muy abstracto. Es por eso que vamos a código. Yo sé que ustedes amor eso, y todos ustedes son me va a ayudar porque esta es su página web. Esta es la página web de nuestra sección, chicos. Así que, ¿hay alguna pregunta antes de la Primera apagar el PowerPoint o nada quieres que desplazarse hacia atrás que antes de empezar a codificar? AUDIENCIA: Cuando usted dice etiquetas de los partidos, Qué quieres decir selectores o etiquetas? ALLISON Buchholtz-AU: Puede pensar 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 como efectivamente la misma cosa. Te prometo que va a hacer más sentido cuando codificamos. Cualquier cosa, desde la PowerPoint o cualquier pregunta en este momento antes de que realmente crear 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 un esqueleto página web aquí. Tenemos algo de HTML. Tenemos un poco de cabecera, que nos ver 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, vemos aquí esta cabeza soporte es su apertura etiqueta, y este soporte / Cabeza está cerrando él, ¿de acuerdo? Así que usted podría pensar en esto como sus 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 tiempo si 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 nosotros tengo 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 de mirando un poco aburrido. Yo no sé acerca de los chicos. Creo que queremos algo más aquí. Así que lo que podemos hacer es la cabecera es sólo allí. Vamos a hacer algún tipo de cuerpo. Así que tenemos un cuerpo aquí. Yo siempre hago abierta y cerrar 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 diferente opciones 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 quieren para levantar HTML de W3 School, puedes especie de mirar a su alrededor y si hay algo en particular que desea probar con 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á algo que es muy grande y en negrita. Y en este caso, lo que queremos para 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 el diferencias, vamos a hacer algo en H6. ¿Qué es lo que queremos aquí? Derecha? Aceptar, por lo que sólo lo que puede ver 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 que tiene diferentes secciones, tal vez usted quiera usar cabeceras en alguna parte. Enfriar. Así que vamos a añadir algunos más cosas en nuestro cuerpo. Veo que sería tipo de fresco si tuviéramos una imagen. Siento que todo el mundo podía utilizar tal vez un cuadro lindo conejito justo ahora, por lo que vamos a encontrar una imagen del conejito de primera. Yo no sé si ustedes tienen alguna preferencias 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 triste un lunes con esto? Así que sólo vamos para copiar la URL de la imagen. Y lo que queremos hacer es, vamos a decir que tenemos un poco de p para párrafo. Vamos a decir: "Mira mirar 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 dicen lo 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 nuestra Bunny 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 un imagen, así como así. Así que, básicamente, si hay alguna imagen que desea añadir a su página web, puedes añadir como este. Otra cosa sería si usted ha almacenado la imagen en la misma carpeta que este archivo, usted puede simplemente escribir lo que el nombre de esa imagen es en lugar de tener un enlace web. Todavía sería entre comillas. Sólo sería como si hubiéramos llamado esto-- si esta imagen se había salvado en la carpeta con el archivo HTML que estoy editando y fue llamado bunny.jpg. También podríamos hacer eso y que se presentaba. Sin embargo, no tengo este guarda en el 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 para Mira, 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ñadido algún texto aquí, ¿verdad? Si quisiéramos añadir otra textos, 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 otro párrafo aquí, ¿verdad? Así que tal vez usted quiere hacer algo un 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 los ordenadores a mano en frente de usted y dime cómo estás va 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, si lo quieren alineado a la izquierda, usted podría hacer iguales align izquierda, alineación es igual a la derecha. Totalmente de usted. Si lo hice aquí, entonces este deberían: ahora está alineado a la derecha. AUDIENCIA: Allison? Por origen de la imagen, ¿por qué no es hay cerca de la fuente img? ALLISON Buchholtz-AU: Lo sentimos. Éste debe ser Ahora hay ya está bueno. Ahora estamos bien. AUDIENCIA: ¿No tienes para cerrarla allí, o no? ALLISON Buchholtz-AU: Bueno, por lo img fuente, ésta se solo-- con la imagen, que sólo es visto como uno de los elementos, mientras que si nota para el resto de ellos, tenemos alguna etiqueta a continuación la información que que 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 un encabezado, usted sabe cómo introducir texto, usted sabe cómo poner una imagen ahora, puede alinear las cosas. Otra cosa que usted puede ser que desee ser capaz de hacer es crear una lista en CS-- estamos tipo de entrar en conjunto de procesadores de la próxima semana. Las cosas que nos típicamente enseñar esta semana va muy bien con conjunto 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 de lista, ¿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, que representa 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 pensaba que Jacob sería una de fiar. ALLISON Buchholtz-AU: Jacob? Jacob es comida de conejo. Si usted vio Jacob foto 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 supervisor tiene un conejo también. ALLISON Buchholtz-AU: Quiero un conejo. Aceptar, quien trae un verdadero conejo de la siguiente sección, brownie puntos totales. AUDIENCIA: [inaudible] AUDIENCIA: ¡Oh, no es real. Es un conejo de peluche. ALLISON Buchholtz-AU: Oh sí, 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 va a 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 vuelta todas las referencias de la vieja escuela de hoy, ¿no? A tan solo todas las viejas referencias escolares. Debería haber traído como Gogurts o algo para picar. AUDIENCIA: O Gushers. ALLISON Buchholtz-AU: Oh. Okay. Voy a ver si puedo rastrear abajo Gushers para la próxima semana. Creo que puedo hacer eso. Creo que podríamos tener algunos en la oficina. Aceptar, por lo que hemos cubierto una gran cantidad de diferentes cosas que usted puede hacer con HTML, ¿verdad? Y como usted probablemente puede ver, es nothing-- con suerte, no demasiado intim-- si lo es, no me refiero a menospreciar a nadie. Si usted está teniendo problemas, por favor, venir a hablar conmigo. Pero la mayor parte de ella es justo mirando a la sintaxis, ¿verdad? Si desea una lista desordenada, si quieres algún tipo de lista, si usted desea alinear algo o Formato de algo, todo se trata de sólo tipo de buscar el sintaxis para HTML, ¿verdad? Y una cosa que es muy bien hecho es si vas a-- vamos a ver, lo que es un buen sitio web que nos gusta? Alguien tiene alguna sitios web favoritos que 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 somos va a hacer la sección meta, chicos. No está sucediendo. Sería genial, pero no vamos a hacerlo. Entonces, ¿qué se podía hacer hacer si te gusta la forma esto funciona es que usted puede siempre tiene la razón haga 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 buena forma el estilo de su propia página web. Ir a una página Web que realmente te gusta y mirar el HTML y averiguar cómo lo hicieron. Y, literalmente, todo el tiempo como usted cita cosas, siempre y cuando usted no está solo robando a la gente, que está bien. Especialmente para CS50 [? financiamos?], estamos tipo de esperar que para llegar la inspiración de otro sitio web. Así que no dude. Mira a través de sitios web que crees que son realmente bastante y averiguar cómo utilizan HTML y CSS para hacer estas cosas. Así que como ves aquí, obviamente hay como enlaces y tenemos una clase aquí. Tenemos un enlace aquí. Tenemos una lista. Es probable que tengamos alguna fotos en alguna parte. Tenemos un poco de estilo fresco aquí. Esta es la próxima cosa que vamos a hacer. Así estilo, cada vez que vea estos soportes de estilo, que es básicamente CSS. Ben, ¿usted tiene una pregunta? AUDIENCIA: ¿Cuál es div? ALLISON Buchholtz-AU: div es justo lo que es A-- div? AUDIENCIA: División. ALLISON Buchholtz-AU: División. Sí, es como separar diferentes elementos. OK, así que aquí es lo que estamos va a entrar en la próxima. Así que este puede no ser el mejor estilo 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 es el PDF, por lo que tenemos style.css. Así que lo que podemos hacer aquí es estos son cosas interesantes como algunos se desvanecen y podríamos tratar de hacer eso, pero me siento como lo haría desastre que sobre la marcha, así que te animo a chicos ir 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 y la 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 realmente cosas interesantes con CSS y HTML. Así que con nuestro increíble página web del conejito aquí, vamos a hacer un poco de poco de estilo CSS con él. Así que si alguna vez tiene un estilo hoja, lo que tenemos aquí, usted puede llamar a style.css. Se le puede llamar lo que quieras. Lo que es importante es que vamos hacer referencia a ella en nuestra web.html aquí. Así que lo que vamos a hacer es nosotros-- así que no me meto esta up-- vamos a vincular estos dos archivos juntos. Así que en el mismo manera-- voy establecer una analogía a C aquí. De la misma manera que si tiene algunos library-- y tenemos cs50.h-- nuestro compilador lo vincula. Esto es sólo una explícita enlace de nuestra parte. Así que de la misma manera que lo hacemos hash de incluir algún archivo, lo que Estoy a punto de escribir es sólo el Equivalente HTML / CSS de eso. Sólo estamos diciendo, OK, esta página web se 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 puede pensar en esto como la misma cosa como un hash incluir. Obviamente se ve un poco más complicado, pero en todos los casos, es efectivamente lo mismo. Así que esto es sólo un poco de vinculación de un hoja de estilo, que es de tipo text / css, y el nombre de la misma es style.css. ¿Qué es importante saber es que la página web que estoy trabajando justo ahora-- web.html y 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éndola super sencillo y que va a estar aquí. Así que si hacemos eso, tengo un poco de las cosas ya se ponen en cola hasta aquí. Así que tenemos un cuerpo, que se va para que nuestro color de fondo, que en este momento es de color azul claro. Podemos cambiarlo si queremos, pero si recuerdo correctamente, sólo debe cambiarlo a azul claro. Y ahora tenemos un fondo azul claro. Y tuvimos aquí-- puede alguien recordar cuál es ID de hash o clase? AUDIENCIA: ID. ALLISON Buchholtz-AU: ID. Enfriar. Así que lo que queremos hacer es cuál de estas fuentes o las cuales: ¿queremos "Mira el 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 haces Identificació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, recuerde tiene que ser único, por lo que nunca debería estar usando este ID en cualquier otro lugar. Sin embargo, con clase, como lo hemos hecho aquí con un tipo de letra bonita, Yo debería ser capaz de utilizar que 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, tenemos este tipo de letra muy bien aquí. Así que tal vez quiero hacer las dos cosas. OK, yo realmente no sé si esto es ir a trabajar, pero quiero intentarlo. Y así es como se aprende CSS y HTML. Usted es como, ya sabes qué, quiero probar esto. No estoy seguro de si va a funcionar. Vamos a ver si funciona. Y mira eso. Ahora es de color morado y es un tipo de letra bonita. Aceptar, por lo que tiene todo esto diferentes cosas que puede hacer. ¿Tiene una pregunta? AUDIENCIA: Sí. Bueno, al igual que los colores que está usando son palabras. ¿Hay una manera de hacer colores con el hexadecimal RGB? ALLISON Buchholtz-AU: También puede hágalo con hexadecimal, creo. Sí. Pero es algo bueno si no quieren mirar hacia arriba. Usted sólo puede ser como, púrpura o azul. AUDIENCIA: Esperemos que saben 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 que puede cambiar las cosas como queramos. Si querías create-- digamos querí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 con esto en el último par de minutos. Porque he amable de su parte dieron una Curso acelerado en un montón de cosas interesantes que usted puede hacer. Pero al final, como ya he dicho, si só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, me fui a-- ¿qué hice? Hice la lista de fuentes CSS, y luego 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 que Lo copié a mi portapapeles. Y entonces yo estaba como, Aceptar, fresco, ahí vamos. Todo hecho. AUDIENCIA: Así que usted tiene que asegurarse de CSS 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é lo viene 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 fondo de 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 un bonito 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 es la 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 URL tiene que estar en las citas. ALLISON Buchholtz-AU: Tal vez. Y esta es la manera de aprender, chicos. AUDIENCIA: ¿Podemos tener fondo color 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 es obviously-- yo [inaudible] aquí. Así Aceptar. AUDIENCIA: apego Antecedentes. ALLISON Buchholtz-AU: Ah. AUDIENCIA: OK, yo no lo sé. ALLISON Buchholtz-AU: Se parece 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, ahora no podemos leer el texto. ALLISON Buchholtz-AU: Ahora no puedes leer el texto, pero tenemos la imagen de fondo. Mmhmm? AUDIENCIA: ¿El HTML apoyar el contenido dinámico? Al igual, ¿podría cambiar el tamaño de esa imagen dependiendo 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 interesados en el aprendizaje de CSS avanzado, Estoy co-enseñando una seminario sobre CSS en la séptima. Y te prometo que lo hará mucho más en profundidad y hacer mucho más fresco cosas en esta sección. Y mi compañero de maestro es como total de extremo frontal maestro dev web. Así que será muy bien si quieres para aprender acerca de todas las cosas interesantes CSS que puede hacer. Pero lo que tenemos aquí con su apego fondo fixed-- así que es un poco de size-- fijo pero en realidad se puede dynamically-- si alguna vez ver páginas web, como la mayoría de las buenas páginas web van a hacer, al ajustar la tamaño de su navegador, se ajusta el fondo o la cantidad está mostrando o reformatea las cosas, ¿no? Así que eso es lo que llamamos posicionamiento relativo. Y CSS realmente puede tomar el tamaño de su ancho del navegador es o qué tan alto es, y se puede colocar las cosas de acuerdo con los tamaños relativos frente tamaños absolutos. Y eso es, obviamente, más avanzado CSS, pero eso es algo que usted puede hacer. Si quieres aprender más, ven a mi seminario. Así que eso es algo que usted puede hacer. Y CSS puede en realidad hacer-- 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 que ellos recargar todo el tiempo. Y se llega a hacer algo cosas muy bien. Entonces, ¿hay otra cosa que ustedes podrían querer hacer o lo que quieras para explorar? Tenemos 10 minutos para el final. También podemos salir temprano, pero si usted quiere hacer algunos más cosas web, podemos, pero no estoy te va a obligar a. Pero podemos también acaba de comer dulces. AUDIENCIA: Resalta el texto blanco así que usted puede leer. ALLISON Buchholtz-AU: OK. Así que en este caso, queremos un poco de p. AUDIENCIA: ¿Hay que hacerlo en el cuerpo 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 usted Sabemos lo que debemos ser? No sé si podemos hacer el color del texto. Iba a tratar de crear otra clase aquí. AUDIENCIA: ¿Cómo se llega de modo que tiene las sugerencias? ALLISON Buchholtz-AU: Así si ustedes están interesados, este es otro texto editor llamado Sublime. Usted debe ser capaz de instalarlo 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 gedit que es impresionante, porque se puede compilarlo en la parte inferior, pero realmente como Sublime porque es bastante y que sí hace cosas como la función de autocompletar. Así que usted puede sin duda no dude en que me haga saber si usted quiere hacer eso. Si usted acaba de Google "Sublime texto, "por lo general tiene instrucciones sobre cómo instalar en diversos sistemas operativos. Es realmente genial, me pensar, en mi opinión. Así p. Creo que sólo puedo hacer texto-- o sólo podemos hacer el color es "blanco." Ya está. Así que lo que hice aquí es que yo no cambiar todo el texto. Pero p aquí es sólo un etiqueta que tenemos, ¿no? Esta etiqueta de párrafo. Así que acabo de crear un elemento de CSS que Dicho esto, bien, cualquier cosa con esta etiqueta p, hacen que el color blanco. Así que si te has dado cuenta, se hizo este blanco y este blanco. No tenía nuestra lista blanca porque que 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 en de 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ás gratificante que a veces porque usted no tiene que esperar para su programa para compilar. Usted sólo puede golpear Actualizar y usted es como, ¡oh, mira, funcionó, o oh, yo soy probablemente perdiendo algo. Y eso es algo que es realmente bueno de la siguiente parte de la clase, es sin duda, yo piense, más fácil de comprobar a medida que avanza en el camino frente a tener que escribir estos programas largos y deseando y rezando que funciona en el extremo. Así que con eso, creo que ustedes todo parece bueno. Si usted tiene alguna pregunta, como siempre, venir a hablar conmigo, ven que me haga saber. Seré justo fuera para los próximos 15 minutos si quieres charlar sobre cualquier cosa y todo. Así que espero que guys-- buena suerte con este conjunto de procesadores. La fecha límite es el viernes al mediodía ya que fue lanzado a finales. Así que probablemente van a ver un 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, que se 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 a ser las horas de oficina el viernes. Así que en realidad no tratar de lograr que se haga por Viernes, así que todos podemos celebrar Fin de semana de Halloween. Muy bien, voy a ver ustedes la próxima semana.