[REPRODUCCIÓ DE MÚSICA] ALLISON Buchholtz-AU: Molt bé, tothom. Benvingut de nou a la secció. Així que la nostra agenda d'avui va durant molt més web dev coses. No sé quants de vostè ha vist els seus conjunts de processadors des que va ser posat en llibertat a principis d'aquest matí. Jo ho faria com quants persones han llegit l'especificació, però veient que has tingut tot de, com, a set hores per el miren i és un dilluns i vostè probablement ha tingut classe, Vaig a assumir que la majoria de vostès no tenen. Si vostè té, felicitacions addicionals. Bàsicament, s'està ajudant implementar un senzill web servidor en C, que és un nou conjunt de processadors marca, perquè vostès arriben a ser els conillets d'índies. Serà una diversió, setmana salvatge, però crec que serà un munt de diversió i serà una realitat bona experiència en realitat. Així que per preparar-se per que, en la secció d'avui, anirem chmod, TCP / IP, i a continuació, una mica d'HTML i CSS. 

Al final, anem a realment codi una pàgina web senzilla junts per ajudar a nois tipus d'aconseguir més familiaritzat amb això. I llavors, si vostè no ha recollit les seves proves, que estan al front, però estic bastant segur que tots aquí té el seu concurs. I també en aquesta nota, Les solucions no són encara, però tan aviat com ens agrada finish--, la últimes persones que prenen el seu quizzes-- que serà en. Si vostè té alguna pregunta Mentrestant, no dubteu a enviar un correu electrònic personal. Vaig a respondre amb la seva persona preguntes, com sempre ho faig. 

Així que en aquesta nota, chmod. Així que, bàsicament, tot el que necessita saber sobre chmod és que s'utilitza per canviar els permisos d'arxius, oi? Així que és només alguns sistemes anomenen un canviar els permisos, com es diu aquí. I si alguna vegada vols veure els permisos que un arxiu té, en lloc de només fer ls, que podria fer ls -l. l significa molt. 

Així que va a fer llistes llargues de tot, i li donarà molt més detallada informació sobre cada un dels seus arxius. I veuràs alguna cosa-- estic passarà per davant d'un second-- però veuràs alguna cosa similar a que la línia superior hi ha per a cada arxiu. I anem a anar a través del que això significa. 

Així que, bàsicament, per canviar els seus permisos d'arxius, el que desitja és utilitzar chmod. Vostè pot pensar en ell com qualsevol altre UNIX cridar com ls o cd o el que sigui. És només una mica d'una altra anomenada similar. 

Així que fem chmod i després anem a de tenir tres dígits normalment. Hi ha un parell de maneres de fer ell, un dels quals anem a repassar. Però en general, tindrà tres dígits en el rang de 0 a 7 cada vegada. 

Així que una cosa és que hi ha 03:00 permisos diferents que podem donar a cada arxiu. I és llegible, que és representat per R, que tindrà sentit en una mica; w, que és es pot escriure; i executable, que és x. Sé que el correu un, executable, potser no el més sentit, però nosaltres representar-la amb x. 

I llavors el que passa és cada un d'ells També tenir la representació número. Així que tenim 1, 2 i 4. I, bàsicament, el que passa és cada un d'aquests tres nombres aquí correspon a una diferent conjunt d'usuaris que es refereixen a aquests permisos. 

Així que vostè pot pensar en aquest primer número correspon a l'usuari real o el propietari de l'arxiu, el segon nombre es correspon amb el grup, i l'últim es refereix al món, d'acord? Així que el que passa és recordar els numbers-- r és 4, w és 2, x és 1, no? Esto-- si vostè resumeix aquestes dalt, que li dóna aquest primer número que podríem entrada al nostre chmod. 

Així que en aquest cas, el que seria aquest número? Seria 4 més 2 més 1, que és un 7, no? I en aquest cas, aquests no tenen res, de manera que aquesta aquí ho faria traduir a chmod 700, d'acord? I el que fa és que atorga tot d'aquests permisos al teu usuari. 

Així que això significa que el nostre usuari poden fer el que vulguin. Poden llegir aquest fitxer. Poden executar aquest fitxer. Ells poden escriure en aquest fitxer. Però el grup i en el món, no permisos de cap tipus, d'acord? 

Així que una altra manera d'escriure que, podem fer chmod de tres dígits, cadascun dels quals correspon a qualsevol que sigui la suma o que grup específic és, subconjunt específic. O podem fer realitat una altra cosa. Espereu. Podem fer alguna cosa amb ells aquí. 

Quants de vostès van veure un exemple on va ser com a chmod un plus x? Has vist que en la conferència, que penso? Així que un sinònim de tot. Significa donar-li a tots els usuaris, que em vaig oblidar de posar aquí. 

Però un avantatge x, si notar aquí, si ho fem a chmod-- quin grup estem parlant més els permisos volem donar-los. Així que això pot ser un avantatge o un inconvenient. A més afegeix permís. Menys treu el permís. Bastant llest i crec. 

Així que un plus x significa chmod. Així que canviar els permisos de totes les persones Si això és un add permisos A--. I això vol dir que el x-- permís estem atorgant tot el món. Llegir, escriure, o executar? 

AUDIÈNCIA: Executar. 

ALLISON Buchholtz-AU: Executar. Així que estem donant a tots els usuaris permís per executar aquest arxiu, d'acord? ¿I què si el que volíem fer que amb la forma numèrica? Així que recordi amb numèric, volem tres nombres. 

AUDIÈNCIA: 4. ALLISON Buchholtz-AU: Què va ser això? AUDIÈNCIA: 4. ALLISON Buchholtz-AU: No abril. AUDIÈNCIA: 0, 0, 4. ALLISON Buchholtz-AU: Bé, volem per donar-li a tots els usuaris, no? Així que tindrem un número a cada ranura. Això serà el mateix nombre en cada ranura perquè només volem donar tots els permisos executables. Així executable és 1, però en el camí correcte. 

Així que si ho vam fer chmod 111 que faria ser l'equivalent d'chmod un plus x. Això té sentit per a tothom? Anem a anar a través de un parell d'exemples. 

Així que la gran menjar per emportar aquí és una no és d'aquí, però un només significa donar a tots els usuaris. o és si el que desitja per donar o treure un permís específic de l'usuari o el propietari. g és per al grup, de manera que dígit mitjà. I després els altres que es pugui imaginar com el món, que l'últim dígit. 

Així que amb això, anirem a un exemple, perquè em sento com a exemples sempre fer aquestes coses més fàcils d'entendre. Així que ens vam anar a través de rwx-- esto-- també podria ser representar com 700. Aquest és l'exemple que busquem en més de la imatge. Així chmod 444 en algun arxiu donaria el que els permisos? Estaves molt a prop. AUDIÈNCIA: llegible per a tothom. ALLISON Buchholtz-AU: lectura mecànica. Així llegible per a tothom, oi? I llavors el que és una altra manera de fer això? Si el que volem fer, ja sigui amb chmod de W de r o, més i els seus menys, ¿Quin seria aquest anomenat sembla? Seria chmod què? 

AUDIÈNCIA: un plus r. 

ALLISON Buchholtz-UA: una r més en el 5. Acceptar, de manera que aquest és el mateix que aquest, només dos diferents traduccions de la mateixa cosa. Així que amb això, tenim aquests. Així que vull que els nois a tractar d'escriure aquest tipus de en el seu camí oposat. 

Així que amb chmod 555, ¿Què seria com? Seria un plus ou plus o el que sigui? Per a més de u x, dóna'm els tres nombres. I després em diuen sobre el que els permisos estem en realitat la concessió i per a qui? 

Així que et vaig a donar dos nois minuts per a treballar en això. Siéntase lliure de parlar entre ells. Per a aquells de vostès que es va produir en un petit tarda, hi ha dolços i camises. Hem deixat tres camises, i tenim Kit Kats i Starbursts. Així que no dubti en venir gravar alguns en aquest petit interludi. 

A més, l'últim és complicat. Es tracta de dos chmods per a l'últim. En realitat, deixin-me tanco aquesta porta mentre que vostès estan treballant en això. Caramel sempre és necessari en un dilluns a la tarda. 

OK, així chmod 555. Quin és una altra manera podríem escriure això? Alguna idea? Sí. 

AUDIÈNCIA: una radiografia Plus. 

ALLISON Buchholtz-AU: r més rx. Vols explicar per què estaria rx? 

AUDIÈNCIA: Perquè tens 5, així que això és 4 més 1, pel que ha llegit més executable, i és per a tots. ALLISON Buchholtz-AU: Dret. Així que reiterar, 5 aquí que coneixem com la suma de 4 i 1, pel fet que cada nombre en el nostre trio és la suma dels permisos per a aquest subconjunt, Oi? O bé l'usuari, la grup, o el món. Així que en aquest cas, sabem que 5 ha de ser format per 4 i 1. 

I 4 i 1 corresponen a llegible i executable. Estem donant a tot el món, perquè puguem fer un chmod rx més. I, òbviament, ens vam anar a través de les preguntes allà, de manera que ara aquest fitxer és executable i llegible per a tothom. 

Així que què passa amb el segon? Quin podria ser el número u perquè? Alguna idea? Seguir endavant. 

AUDIÈNCIA: 100 [inaudible]. 

ALLISON Buchholtz-AU: 100. Exactament. Així que és el que vols per a explicar per què 100? AUDIÈNCIA: Perquè és pel usuari, pel que és en la primera posició. I llavors x executable és 1. ALLISON Buchholtz-AU: Exactament. Així que estem atorgant executable permisos a només l'usuari. Així que en aquest cas, seria de 100. I jo tinc totes les respostes amunt a la següent diapositiva en el cas vostè està escrivint un munt de coses. 

Acceptar, de manera que aquest proper un es fa realitat amb dos chmods, vostè podria fer-ho. Així que algú té alguna idea del que et poden obtenir chmod 640 reescrita a l'altra banda? Vostè pot canviar l'usuari i després vostè pot canviar el grup és el meu suggeriment. 

Així que si ens estàvem canviant la usuari, que és aquesta primera un aquí, el que podria ser la nostra trucada? Així usuari és o, no? Així chmod o més què? Mmhmm? 

AUDIÈNCIA: rw. ALLISON Buchholtz-AU: rw. Dreta, per llegir i escriure, perquè de lectura és 4, w és 2, els suma junts com 6. Així obtenim chmod o més RW, i vam aconseguir el nostre primer 6 allà. 

Així que per obtenir la 4, ara volem per canviar els nostres ambients de grup. Així que anem a fer chmod g més què? Què és un 4? 

AUDIÈNCIA: r. ALLISON Buchholtz-AU: r. Precisament. Així que estem donant al propietari permisos de lectura i escriptura i li estem donant la lectura de grup permisos, que tenim tots aquí. Mmhmm? 

AUDIÈNCIA: Si vostè pot escriure alguna cosa, tampoc implica que vostè pot executar? 

ALLISON Buchholtz-AU: Vostè pot escriure en alguna cosa-- Jo no crec que implica que vostè pot executar. Refredar. Així que això és tot el que ens vam anar a través. Així que en aquest següent, que és casos només tipus de comuns que vol mantenir en ment per fixar el seu problema. Aquests són en general els permisos que ens agrada que utilitzeu. 

Així que per a l'any 711, que dóna nosaltres, per descomptat, l'usuari tots els permisos, que tendeix a tenir sentit. I llavors és executable pel grup en el món, la qual cosa té sentit si vostè té algun directori, vull ser capaç de travessar en ell. Les persones necessiten tenir accés. 

Per a qualsevol arxiu que no sigui PHP, vas utilitzar 644, el que fer què? Què implica això, o el que permisos que fa que donen? Així que l'amo pugui què? AUDIÈNCIA: Llegir i escriure. ALLISON Buchholtz-AU: Llegir i escriure. I a continuació, el grup i els altres s'acaba de llegir, no? I després chmod 600 per a qualsevol Arxius PHP que s'utilitzen, el seu propietari, un cop més, pot llegir i escriure-hi però tothom és només una mica bloquejat. 

Així que això ho farà realitat ser més útil quan que arribi al seu problema establir la setmana que ve, on en realitat estàs construint un lloc web. Així que si alguna vegada es troba amb qualsevol problema estrany on no està carregant correctament, potser vostè que hagi de afegir un arxiu executable permís, o potser vostè necessita una lectura o permís d'escriptura. Les petites coses que tendeixen a ensopegar persones dalt, però això és una cosa així com el go-to en iniciar conjunt de processadors de la propera setmana. I jo li donaria més indirectes en conjunt de processadors d'aquesta setmana, però encara he de mirar-lo des que va ser posat en llibertat aquest matí. Però vostè m'envia per correu electrònic, hauré mirat en que de moment em responc demà. 

Així que ara, tothom és bo amb chmod? Per a qualsevol dubte persistent? Bastant senzill. Només tipus de fer el seguiment del que llegir, escriure, i executar els números són és probablement la part més difícil. 

Així que amb TCP / IP, tots aquests protocols, alguna cosa així com amb les seves estructures de dades la setmana passada, és molt més important tipus d'aconseguir una intuïció major nivell d'ells. Això no és CS143 on anem per demanar-li que implementar una xarxa, per la qual cosa estarà bé si vostè no entén el quid de la qüestió de tots els protocols. El que és important entendre és alguna cosa així com el que representen i per què són importants. 

Així TCP / IP, per descomptat, és el Transmission Control Protocol o Protocol d'Internet, que és bàsicament un conjunt de lleis, bàsicament, o normes que diuen les dades com ha de ser manejat, com ha de ser empaquetades, transmesa i rebuda. Per tant, bàsicament, tal i com Aquí diu, augmenta les possibilitats que les dades porta a on vostè ho vol arribar a. 

Estic segur que si vostès van anar a conferència o el va veure en línia, ell has-- No sé si ho va fer aquest any, però sé que l'any passat, va tenir un demostració on tenia una foto de Rob i ell va partir cap amunt en quatre i posar-lo en sobres i va tractar d'aconseguir a través de Sanders. I vostè pot tipus de pensar d'aquesta manera. És només un conjunt de regles que comptar les dades com arribar a algun lloc i li permet saber si es troba a faltar de dades, de la mateixa manera que si vostè és tenint diverses pàgines de notes i vostè els etiqueta amb la pàgina 104, pàgina 204, i que es remunten a estudiar més tard i es troba a faltar alguna cosa-- vostè no pot trobar la pàgina 304-- saps alguna cosa està malament, per la qual cosa pot mirar a través de les seves notes de nou o demanar a algú que tornarem a enviar la conferència pren nota d'aquest dia. De la mateixa manera amb les dades a l'Internet. Si jo estic demanant una mica d'algun servidor i necessita enviar en múltiples paquets, probablement va a nombre d'alguna manera, deixa Vull saber quants hauria d'haver rebut, i em diuen, oh, aquest és octubre 1 o aquest és un 10.000. D'aquesta manera, quan vaig a tornar a muntar totes les peces juntes, Com sé si falta alguna cosa i jo puc demanar que una altra vegada. Això té sentit? Només un conjunt de regles. A la seva base, un conjunt de regles, d'acord? 

Així també vam parlar una poc sobre els ports. Això és en realitat una norma que li permet saber quin tipus de dades està sent transmesa en aquests paquets. Si anem amb el nostre exemple sobre, no ho fem sé que és una imatge de Rob allà llevat que ho escrivim a l'exterior de la nostra sobre. Així que els ports són bàsicament la mateixa cosa. És només una manera d'esbrinar el que tipus de dades que es transmeten. 

Així que tenim tota la la majoria dels més comuns aquí. Així 21-- aquests també són amables que les coses bones de saber. És una espècie d'una pregunta de qüestionari fàcil. Sigui com, ¿quin port 80 fer? O, ¿quin port 443 ho fan? Així que les coses bones que saben. 

Així que tenim aquí, és 21 arxiu protocol de transferència, de manera que només les regles que governen la transferència d'arxius. 25, cosa que tots utilitzar massa, és de correu electrònic. 53 és el nom de domini sistema, que és bàsicament només una mica d'una recerca per al Adreça IP d'un nom de domini. 

Així que estic bastant segur que era esmentat en la conferència, si anar a una cosa així com google.com, té una adreça IP que està associada amb ell. No és en realitat google.com. I així 53 és el port que realment té cura de tipus de traduir- en aquesta direcció IP per a vostè. I a continuació, 80 i 443 són molt comuns. O tens la teva pàgina web o vostè té la seva pàgina web segura, que una gran quantitat de pàgines web són transferir a ara. 

Així que és una espècie d'alt nivell visió general de protocol de transferència. No veig molt més en profunditat. És una mena de coses interessants si vostè està interessat. Hi ha un munt de recursos. Wikipedia és en realitat una molt bona pàgina. Així que jo estava buscant-hi Fa només una mica de temps, així que recomano encaridament mirar si t'interessa o prendre 143 en dos anys, perquè Crec que és cada dos anys. 

Així que en el final d'això, estem parlant de les pàgines web i HTTP, que en realitat és el nostre proper tema per avui abans d'entrar en HTML i CSS i en realitat es pot codificar una pàgina web. Serà divertit. Tindrem imatges de conillets i serà genial. 

Així HTTP, com es pot veure aquí, és una de les encantadores acrònims per aquesta setmana, que és Protocol de transferència d'hipertext. Així que de nou, és només un altre conjunt de regles que governa hipertext transferir, en aquest cas. Així que millor manera d'aprendre sobre això és només una mica de a dividir-lo en aquestes paraules individuals perquè hi ha una gran quantitat de paraules a la pantalla allà. 

Així que anem a començar amb l'hipertext. Així que "hiper", que es pugui imaginar "Per sobre de", com de tipus súper cosa. Així que és realment només text portat a la següent nivell, així que és com súper text, com el següent text. Així que és bàsicament només text que ens dóna més informació que text normal fa, d'acord? 

Així que en aquest cas aquí, aquest és l'hipertext. Això ens diu que hem algun vincle que anem a, que és cs50.net, que és ara cs50.harvard.edu. Aquestes diapositives són una mica vell. I es mostrarà com aquest, com un enllaç, i després una pàgina web realment genial. 

Així que és de text, que és una mica poc de coses molt interessants en allà. Així que vostè pot vincular les coses i que pugui inserir imatges i vostè pot estil de coses. I la cosa més familiar que nois probablement tenen amb hipertext és HyperText Markup Language, HTML, que per descomptat és tot del web que veiem al nostre voltant, assegut amb una mica d'estil CSS tirat. 

Però si hi havia algú molt gran amb MySpace, Estic segur que tot usat HTML tot el temps per crear aquests perfils perfectes, no? Em sento com que podria ser un referència obsoleta ara, però el que sigui. Només un poc-- vostès no són que molt més jove. Alguns de vostès són més grans que jo. MySpace era encara un cosa quan jo era jove. No sóc tan vell. 

De tota manera, HTML només una forma d'hipertext. Així que l'hipertext és només text amb característiques afegides. Així protocol de transferència és probablement la cosa més dubtós d'explicar. Òbviament, transfer-- només la transferència de dades. Així que, o entre el client, de la mateixa manera que el seu germà web, i un servidor. Així que, bàsicament, només el manera en què Internet funciona. 

Així la sol·licitud exacta de com funcionen, estem en realitat va a mirar un exemple de sol·licitud i resposta. Però, ¿com se sol·licita informació d'un servidor i com el servidor respon a nosaltres és el que regeix aquest protocol de transferència. Així la sol·licitud i la resposta tenen seguir aquest conjunt específic de regles. Es va estandarditzar de manera que no importa on s'està utilitzant l'Internet, que sempre funciona de la mateixa, d'acord? 

Una vegada més, el protocol, un conjunt de regles. És només una normal, la interacció de la mateixa manera que el professor parla de Malan si algú estén la seva mà, vostè sap que és cortesia comú arribar a la seva i estrènyer la seva mà. Això és un protocol, no? 

Així que li dono una mica de sol·licitud normalitzat, que és que vull donar-te la mà, i li dónes algun estandarditzada resposta, que és ja sigui no, gràcies o vostè podria tractar de sacsejar la meva mà o potser vostè va a tractar i el puny em pegui. I no tenim un protocol per això. Es degrada. Però si tothom segueix el mateix protocol, per descomptat, va molt més a la perfecció. La gent arriba a conèixer. Tothom està feliç. 

Així que en el món de la web, tothom segueix el mateix rules-- una mica millor que els estàndards socials. Però amb això, anem a veure en una sol·licitud d'exemple aquí. Així que hi ha aquesta petita clau a la part inferior que et diu els diferents colors, el que se suposa que vol dir. 

Així que és blanc igual que el seu mètode sol·licitud i protocol versió-- així ho sol·licitin mètode, versió. I llavors això és una nom del camp i el valor d'aquest camp, que ho farem entrar en molt, molt poc. Així que aquest és un exemple de petició. Això és com jo que s'estén cap a fora, volent presentar-me. 

Això és el que el client o el que el navegador web s'envia al seu servidor. Així que aquesta és una petició GET, per la qual cosa és demanar alguna cosa des del servidor. I és, per descomptat, HTTP i és la versió 1.1. 

Així que la resta d'aquest aquí és el que anomenem la capçalera, i la seva informació addicional que ens dóna una millor idea de el que en realitat estem demanant, o informació que es vol donar el servidor que podrien ser pertinents. Així User-Agent li dóna una mica més Descripció en-- per exemple, aquí, ris / 7.24.0 és en realitat dirà el servidor que estem fent servir Google Chrome com el nostre navegador. Així que si alguna vegada escolta sobre les persones que parlen sobre la fabricació d'una aplicació de resposta per a múltiples navegadors, això és una cosa que faria servir perquè si no sé quin navegador la sol·licitud està venint, no es pot adaptar les dades a això. Així doncs, en aquest cas, l'usuari s'acaba de donar aquest tipus d'informació d'identificació sobre quin navegador l'usuari està utilitzant actualment, d'acord? 

Així que també hem amfitrió, que és on en realitat estem amb ganes d'anar. En aquest cas, volem anar a apple.com, comprar alguns nous iPads fresc o alguna cosa així, potser valent llums en els nostres dormitoris. I el valor de nom al final és només una càrrega, només una cosa en general perquè vostès puguin veure. En realitat, no correspondre a qualsevol cosa aquí. 

Així que vostè pot tenir tant o tan poc com vulgui en cada cas. La majoria de les vegades, aquests són opcionals. Només depèn del que el que necessita des del navegador, del seu usuari per tal de donar correctament la sol·licitud. O depèn del que el teu usuari en realitat vol renunciar al servidor. Així que vostè pot tenir molts, molts d'aquests noms de camps de capçalera o que només podria tenir una parella. Com amb tantes coses Ho he dit en aquesta secció, que realment depèn del context de com s'està utilitzant aquest. 

Això té sentit per a tothom? Això és només un exemple de una sol·licitud, capçaleres, què sé jo. OK, així que amb això, tenim algun tipus de resposta. 

Un cop més, tenim el nostre codi d'estat, el protocol versió i, a continuació, el nom del camp i el camp valorar com sempre. Així que la nostra versió del protocol i el nostre codi d'estat és 200. Acceptar, per la qual cosa, sí, tot ha anat bé. Això és el que vol. 

El tipus de servidor, el contingut type-- ens diu, bé, tu estàs va a aconseguir alguna cosa d'HTML text. Aquí és la longitud de la mateixa i aquí està el que ha de fer amb la connexió. OK, així que de nou, depenent en les dades que està demanant, depenent del que el servidor vol tornar a vostè, és possible que tingui més d'aquests camp noms, és possible que tingui menys. Totalment dependent del context. 

I pel que fa a aquest estatus codi aquí, per descomptat, 200 no és l'únic vostè podria tenir, no? Tenim un munt de codis d'estat. Algú recorda alguna de les altres que hem esmentat en la conferència? Molts d'ells comencen amb 4. 

AUDIÈNCIA: 404. 

ALLISON Buchholtz-AU: 404, el que és? 

AUDIÈNCIA: No s'ha trobat el? 

ALLISON Buchholtz-AU: No s'ha trobat. Exactament. Llavors, què sobre 403? AUDIÈNCIA: Prohibida. ALLISON Buchholtz-AU: Prohibida. Llavors, ¿què creu vostè que això vol dir que amb chmods? 

AUDIÈNCIA: Vol dir que vostè no tenen permís per llegir-lo. 

ALLISON Buchholtz-AU: Exactament. D'alguna manera, vostè no té permís per accedir-hi, oi? Així 404, 403. Hi ha un molt divertit un que sempre introduir tots els anys que M'he posat aquí dalt, com 413, que és que sóc una tetera. Vostè pot google això. És curiós com, que és el codi 413 i és que sóc una tetera. Què jo no sé per què ho faria necessitarà sempre que en l'Internet, però estic divagant. AUDIÈNCIA: Potser vostè és una tetera. ALLISON Buchholtz-AU: Potser el servidor és una tetera. Qui sap? Molt bé, així que estem a punt de la transició a la codificació real. Sento que vostès van a sortir d'aquí amb força rapidesa. 

AUDIÈNCIA: Per què ho fa dir "servidor: dues vegades? 

ALLISON Buchholtz-AU: Hm? Servidor de dues vegades? Aquesta és una bona pregunta. No estic segur. Vaig a esbrinar i Tots vostès vaig a enviar per correu electrònic. 

Bé, qualsevol altra pregunta, a més d'això? Bona? Refredar. 

HTML i CSS, i ara nosaltres arribar a totes les parts divertides. Així que com he esmentat abans, HTML és probablement una de les coses vostès estan més familiaritzats. Així que tenim HyperText Markup Language. 

La millor manera d'aprendre esto-- no ho faig tenir les diapositives o gens preparats per a vostès amb HTML. Es tracta realment d'aprendre la sintaxi. I si vostè fos al MySpace dia, vostè hauria això. 

Així que en realitat, el més important és només per practicar i experimentar. Un dels grans recursos que ho faria altament recomano usar és W3Schools. Així que W, 3, i després Escoles. Tenen una gran quantitat de recursos sobre HTML, CSS a, i que en realitat tenen un pantalla dividida tipus de coses on et donaran exemple de codi. Vostè pot jugar amb ell, canviar, i premeu Update, i et vaig a mostrar el que en realitat fa a la pàgina web. 

Així que recomano encaridament utilitzar això. És molt bo. No rebrà els errors seg aquí quan les coses van malament. Si t'ho fas per aconseguir una fallada seg amb HTML, m'ho saber perquè estic serà real intrigat. Però és realment genial, perquè vostè pot canviar les coses, es pot veure en viu actualitzats. I crec que vostè obtindrà una gran part comprensió més intuïtiva d'HTML si en realitat només passa algun temps experimentant amb ella. Així que per això he dit, la pràctica i l'experimentació. 

Google, a partir d'ara a terme, probablement serà un dels seus millors recursos i amics. O Bing-- estic treballant en Microsoft, així que potser hauria de dir Bing. Però gairebé qualsevol cosa només serà la sintaxi, de manera que la comprensió del que les etiquetes són, understanding-- almenys amb CSS-- com canviar certs atributs. Serà molt útil. 

Així que, encara que no ho fem tenir les coses preparades, nosaltres tenim classe d'algunes de les millors pràctiques que volem que els nois a provar i esteu por-- o més aviat, que hauria acatar fins a nou avís. Així que tanca totes les seves etiquetes. Esperem que tot el món has-- saps què, si això no té sentit en aquest moment, Et prometo que tindrà sentit quan estem de codificació de la pàgina. Però tancar totes les seves etiquetes. Així que si alguna vegada té alguna encapçalament que és el suport, H1, suport, assegureu-vos que cada vegada que hagi acabat amb això, tancar aquesta capçalera. Valida la teva pàgina amb W3 Validador. Si no tanca les seves etiquetes, vostè pot aconseguir un comportament inesperat. Es dirà que la seva pàgina no és vàlid si s'executa a través d'aquest validador. Així que quan en doubt-- i especialment en aquesta setmana i la setmana següent pset-- de la mateixa manera que demanem utilitzeu el xec 50 i l'estil 50, vostè podria pensar en això com un dels seus xecs, d'acord? 

Així que si no passa el validador W3. Això és una cosa que anem a atracar a vostè. O que et dic la dreta Ara, vaig a atracar a vostè. Així que assegureu-vos que valida. No és difícil. Vostè acaba d'enganxar en el codi i que dirà, ja sigui bona feina o que s'està perdent una mica de la mateixa manera que l'estil 50 et diu on vostè està arruïnant. 

I a continuació, una última cosa és el que vols per separar el seu marge de benefici, que és tot el que HTML o el text, i el seu estil. Així que farem un exemple d'aquest dret després d'això. Així HTML i CSS han d'estar separats. I estarem parlant de MVC, que és el Model Vista Controlador, la setmana que ve. Vostès deuen, probablement, aprendre sobre que en la conferència demà si tinguessis ja après avui. 

I és només una mica de un paradigma que tendim utilitzar en crear web pàgines per a separar les coses. Vostè pot pensar-hi de la mateixa manera que tendim a funcions separades en C on hash per trobar coses. És només una manera de fer la seva vida més fàcil. Es separa atributs o codi que vostè estaria utilitzant una i una altra vegada, però d'aquesta manera, quin tipus del que manté agradable i net. I si vostè vol canviar una cosa, que el canviï una vegada i que ha canviat a tot arreu. Així que és més per la seva la facilitat i flexibilitat. 

Així que amb CSS, que és molt similar a HTML, però en lloc d'etiquetes que acabo d'esmentar, que utilitzar el que s'anomena selectors. I, bàsicament, només una mica d'associar una determinada etiqueta en HTML amb diferents atributs. I quan dic atributs, vull dir coses com el color de la font, estil de font, el color del fons, el color del teu text. Aquest tipus de coses. De la mateixa manera que si es centra, si és a la dreta, si és inverted-- tot d'aquestes coses fresques. Qualsevol coses estilístiques el que fan per a la seva text, això és el que vull dir amb atributs. 

I després dues coses principals que ha de saber és que selectors-- dues de la factors-- principal són ID, que és únic. Només es pot usar aquesta per una cosa. En cas contrari, va a cridar a vostè. I quan el definim en un arxiu CSS, ho farà ser de hash ID i després quins atributs que volem. Et prometo que anem a anar a través d'un exemple. Es va a fer molt més sentit. 

Classe pot referir-se a diversos blocs. Així que vostè pot tenir el seu primer i tercer paràgraf tenir el mateix tipus d'atributs si que ells associen amb la mateixa classe. I quan definim ells en CSS, fem una classe de punts, amb ser qualsevol classe vol que sigui nomenada. 

Així que sé que això és el correcte ara molt abstracte. És per això que anem a codi. Jo sé que vostès amor això, i tots vostès són em va a ajudar perquè aquesta és la seva pàgina web. Aquesta és la pàgina web de la nostra secció, nois. Així que, hi ha alguna pregunta abans de la Primera apagar el PowerPoint o gens vols que desplaçar-se cap enrere que abans de començar a codificar? 

AUDIÈNCIA: Quan vostè diu etiquetes dels partits, Què vols dir selectors o etiquetes? ALLISON Buchholtz-AU: Pot pensar en ells com la mateixa cosa. És només diferents paraules. Vull dir, com a selectors. Però selectors també s'assignen a etiquetes. Així que vostè pot pensar en ells com efectivament la mateixa cosa. Et prometo que farà més sentit quan codifiquem. Qualsevol cosa, des de la PowerPoint o qualsevol pregunta en aquest moment abans que realment crear la pàgina de la secció? Tothom a punt? Refredar. 

Així que en tinc un començar. Permetin-me augmentar el tipus de lletra per a vostès. Acceptar, pel que en aquest moment, només tenim un esquelet pàgina web aquí. 

Tenim una mica d'HTML. Tenim una mica de capçalera, que ens veure aquí com a exemple la pàgina web. Alguns títol, alguns font. Aquestes són les etiquetes, d'acord? Així que quan em refereixo a tancar les seves etiquetes, veiem aquí aquest cap suport és la seva obertura etiqueta, i aquest suport / Cap està tancant ell, d'acord? 

Així que vostè podria pensar en això com seus suports en les seves condicions si o el dels bucles. Si vostè té un al principi, vols un al final. És encara funcionarà la majoria del temps si vostè no té una etiqueta de tancat, però millor és tancar les seves etiquetes. 

Així que en aquest cas, anem a canviar això. Anem a tenir una secció de set. "Secció pàgina web." Així que només vaig a canviar això. 

I si ens anem d'aquí i nosaltres tinc reload-- guardar i reload-- ens adonem que fins aquí va canviar, no? Refredar. Així que això canvia el títol. Això és el que hi hagi en la seva fitxa. 

Així que això és una espècie de mirant una mica avorrit. Jo no sé sobre els nois. Crec que volem alguna cosa més aquí. 

Així que el que podem fer és la capçalera és només allà. Anem a fer algun tipus de cos. Així que tenim un cos aquí. Jo sempre faig oberta i tancar els meus etiquetes per començar, de la mateixa manera que ho faig claus. Ah. Espera, què? 

AUDIÈNCIA: [inaudible]. ALLISON Buchholtz-AU: Ah. Vostès em van donar. Bon treball. Estrella d'or. 

Acceptar, de manera que tenim un cos aquí. I ara anem a començar afegint una mica de text. Així que tens una parella diferent opcions per afegir text. Tenim coses com les capçaleres. Tenim només text normal. Així que anem a començar amb un cop de cap. En realitat, si vostès volen per aixecar HTML de W3 School, pots espècie de mirar al seu voltant i si hi ha alguna cosa en particular que voleu provar amb aquesta pàgina web, podem fer això. Així que en aquest cas, farem una mica de h1. Així h1 és com la capçalera més alta. Li donarà alguna cosa que és molt gran i en negreta. 

I en aquest cas, el que volem per al primer text en la nostra pàgina web? Qualsevol cosa. Vostès crearan això. Jo només vaig a escriure. AUDIÈNCIA: Benvingut. 

ALLISON Buchholtz-AU: Benvingut. Acceptar, de manera que si ho guardem i recarreguem, tenim una gran gran benvinguda. Així que perquè pugui veure el diferències, farem alguna cosa en H6. Què és el que volem aquí? Dreta? 

Acceptar, de manera que només el que pot veure la diferència. Sí, Sublim. Així que si et fixes, h1, molt, molt gran. h6, com negreta, però molt més petit, i vostè té tota la resta. Així que vostè podria tenir h2, h3, h4. I aquests són només els encapçalats, així que si vostè està tractant de per crear una pàgina web que té diferents seccions, potser intenteu emprar capçaleres en algun lloc. 

Refredar. Així que anem a afegir alguns més coses en el nostre cos. Veig que seria tipus de fresc si tinguéssim una imatge. Sento que tothom podia utilitzar potser un quadre bonic conillet just ara, per la qual cosa trobarem una imatge del conillet de primera. 

Jo no sé si vostès tenen alguna preferències sobre quin volem. Té alguna preferència? Aquest d'aquí? A baix. Okay. Que un és. Bones opcions. 

OK, així que anem a veure la nostra imatge. Mira això. Mira que cosa adorable. Com pots estar trist un dilluns amb això? 

Així que només anem per copiar la URL de la imatge. I el que volem fer és, anem a dir que tenim una mica de p per paràgraf. Anem a dir: "Mira mirar el conillet valent. d'awwww ". Estimo els meus conillets. Tinc un conill a casa. Trobo a faltar la meva conillet. Llavors, ¿què hem de fer-- No sé si vostès volen to google esto-- però amb HTML, Com podria incloure una imatge? Literalment, si google "Incloure la imatge HTML" Per què no vostès em diuen el que aquesta etiqueta ha de ser? 

AUDIÈNCIA: img source-- 

ALLISON Buchholtz-AU: img source-- AUDIÈNCIA: --equals-- ALLISON Buchholtz-AU: --equals-- AUDIÈNCIA: --quote-- sí. ALLISON Buchholtz-AU: Perfecte. Preciós. Vegi, la generació MySpace, oi? Audiència: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Guau. Ha estat una bogeria. Okay. 

Així que assegureu-vos que tinc aquest dret. Refredar. Així que això hauria d'estar aquí. I després, si recarreguem, tenim la nostra Bunny a la pàgina No és això adorable? 

Això és tan bonic. Vas triar un gran, gran foto. Estic cavant ella. 

OK, així que tenim aquest conillet adorable ara. Hem estat capaços d'afegir un imatge, així com així. Així que, bàsicament, si hi ha alguna imatge que vol afegir a la seva pàgina web, pots afegir com aquest. Una altra cosa seria si vostè ha emmagatzemat la imatge en la mateixa carpeta que aquest fitxer, vostè pot simplement escriure el que el nom d'aquesta imatge és en lloc de tenir un enllaç web. 

Encara seria entre cometes. Només seria com si haguéssim anomenat esto-- si aquesta imatge s'havia salvat a la carpeta amb l'arxiu HTML que estic editant i va ser cridat bunny.jpg. També podríem fer això i que es presentava. No obstant això, no tinc aquest guarda en l'arxiu i vull mantenir el conillet, així que anem a seguir l'enllaç. 

AUDIÈNCIA: Quin és rabbit.org? 

ALLISON Buchholtz-AU: rabbit.org. És un oportunes per Mira, pots adoptar-lo. Adopció. bunny.jpg. Vull adoptar aquest conillet. Oh, déu, és tan bonic. 

Acceptar, pel que hem afegit les capçaleres. Hem afegit una imatge. Òbviament, hem afegit algun text aquí, oi? Si volguéssim afegir una altra textos, ens tornaríem a anar d'aquesta manera. Així que aquest és un altre paràgraf. 

I diem "aquest és un altre paràgraf." A més, jo sóc un corrector ortogràfic horrible, així que pot escriure malament les coses. Només per la teva informació. 

Així que tenim un altre paràgraf aquí, oi? Així que potser vostè vol fer alguna cosa una mica més interessant que un simple tenir tot el text, com alineat a la dreta. Potser vostè vol centrar el text, d'acord? 

Així que si algú vol utilitzar els ordinadors a mà al davant de vostè i digues-me com estàs centrarà aquest text, 

AUDIÈNCIA: p align. 

ALLISON Buchholtz-AU: Així p align és igual a "centre". Ell està matant, nois. Vostès necessiten fer un pas cap amunt. I tenim "Això està centrat." I ara ens hem centrat en alguna cosa. 

De la mateixa manera, si el volen alineat a l'esquerra, vostè podria fer iguals align esquerra, alineació és igual a la dreta. Totalment de vostè. Si ho vaig fer aquí, llavors aquest haurien de: ara està alineat a la dreta. 

AUDIÈNCIA: Allison? Per origen de la imatge, ¿per què no és hi ha prop de la font img? ALLISON Buchholtz-AU: Ho sentim. Aquest ha de ser Ara hi ha ja està bo. Ara estem bé. AUDIÈNCIA: No tens per tancar-hi, o no? ALLISON Buchholtz-AU: Bé, per la qual img font, aquesta es sol-- amb la imatge, que només és vist com un dels elements, mentre que si nota per a la resta d'ells, tenim alguna etiqueta a continuació la informació que que es refereix a continuació, i una etiqueta de tancament. Però amb la imatge, tot està només una espècie d'acte-continguda. Refredar. Així que vostès saben com crear un encapçalat, vostè sap com introduir text, vostè sap com posar una imatge ara, pot alinear les coses. 

Una altra cosa que vostè pot ser que vulgui ser capaç de fer és crear una llista en CS-- estem tipus d'entrar en conjunt de processadors de la setmana que ve. Les coses que ens típicament ensenyar aquesta setmana va molt bé amb conjunt de processadors de la setmana que ve, així que estem tipus de mescla, la superposició de les coses aquí. Però serà útil per a la setmana. 

Així que si volíem crear una mica de llista, com podem fer això? No es pot respondre a aquesta hora. Algú ho ha de fer. No és difícil, nois, ho prometo. Google "llista desordenada HTML." Què va ser això? 

AUDIÈNCIA: [inaudible]. ALLISON Buchholtz-AU: Dret. Així que és el que volem demanem o desordenada? Anem a fer una desordenada. Així que tenim alguns ul, que representa llista desordenada. I què és el que tenim per a cada element? Què es necessita la seva pròpia etiqueta? Podem començar a escriure les coses? 

AUDIÈNCIA: li. 

ALLISON Buchholtz-AU: li. Llavors, ¿quina és la nostra llista serà? Què és el que volem aquí? Acabem de fer noms. Només fer Jacob. 

Aliments Conill: audiència. 

ALLISON Buchholtz-AU: aliments de conill. Acceptar que m'agrada això. Aliments de conill. 

Acceptar, pel que tenim pastanagues. M'agrada aquest tema de conill. Estic cavant molt. AUDIÈNCIA: En realitat, jo pensava que Jacob seria una de fiar. ALLISON Buchholtz-AU: Jacob? Jacob és menjar de conill. Si vostè va veure Jacob foto de les hores d'oficina, vostè podria haver pensat que ell va aconseguir atacat per un conill assassí. 

AUDIÈNCIA: Tinc un conill ara. Tinc un conill assassí ara. 

ALLISON Buchholtz-AU: M'estàs prenent el pèl? 

AUDIÈNCIA: Vaig a portar la propera secció. Ho tinc. 

ALLISON Buchholtz-AU: Això és ridícul. De totes maneres. 

AUDIÈNCIA: [inaudible] 

AUDIÈNCIA: Sí, el meu supervisor té un conill també. 

ALLISON Buchholtz-AU: Vull un conill. Acceptar, qui porta un veritable conill de la següent secció, brownie punts totals. AUDIÈNCIA: [inaudible] AUDIÈNCIA: Oh, no és real. És un conill de peluix. 

ALLISON Buchholtz-AU: Oh sí, podem tancar aquests. Sembla rad. AUDIÈNCIA: Realment importa? ALLISON Buchholtz-AU: No ho fa. Amb la majoria d'aquestes coses, no tanca l'etiqueta, El 99% del temps res dolent a succeir, però és un bon estil, també. Així que Jacob. I tenim l'enciam. AUDIÈNCIA: Per als enllaços, que és realment important. ALLISON Buchholtz-AU: Hm? AUDIÈNCIA: Per hipervincles. ALLISON Buchholtz-AU: Per hipervincles. Sí, hipervincles ho necessiten. OK, així que anem a veure aquí. I tenim el tancament de la nostra llista. I ens fixem en això. Hem tots- Jacob, just aquí. Dinar de conill. Em recorda a Bunnicula. 

AUDIÈNCIA: [inaudible] ALLISON Buchholtz-AU: Estic portant de tornada totes les referències de la vella escola d'avui, ¿No? A tan sols totes les velles referències escolars. Hi hauria d'haver portat com Gogurts o alguna cosa per picar. 

AUDIÈNCIA: O Gushers. ALLISON Buchholtz-AU: Oh. Okay. Vaig a veure si puc rastrejar baix Gushers per a la setmana. Crec que puc fer això. Crec que podríem tenir alguns a l'oficina. 

Acceptar, pel que hem cobert una gran quantitat de diferents coses que vostè pot fer amb HTML, oi? I com vostè probablement pot veure, és nothing-- amb sort, no massa intim-- si ho és, no em refereixo a menysprear a ningú. Si vostè està tenint problemes, si us plau, venir a parlar amb mi. 

Però la major part d'ella és just mirant a la sintaxi, oi? Per obtenir una llista desordenada, si vols algun tipus de llista, si vol alinear alguna cosa o Format d'alguna cosa, tot es tracta de només tipus de cercar el sintaxi per a HTML, oi? I una cosa que és molt ben fet és si vas A-- anem a veure, el que és un bon lloc web que ens agrada? Algú té alguna llocs web favorits que estan bé perquè aparegui en línia? Saps què, farem CS50. Això és bonic i segur, no? 

OK, així que aquí CS50. Oh, mira, hi ha una secció en aquest moment. Si t'agrada la forma en què es veu. 

AUDIÈNCIA: [inaudible]. ALLISON Buchholtz-AU: No som va a fer la secció meta, nois. No està succeint. Seria genial, però no ho farem. 

Llavors, ¿què es podia fer fer si t'agrada la forma això funciona és que vostè pot sempre té la raó feu clic a qualsevol pàgina web que t'agrada i vostè pot fer Veure origen de pàgina. Portarà tot l'HTML. I això és en realitat una molt bona forma l'estil de la seva pròpia pàgina web. Anar a una pàgina web que realment t'agrada i mirar el HTML i esbrinar com ho van fer. 

I, literalment, tot el temps com vostè cita coses, sempre que vostè no està sol robant a la gent, que està bé. Especialment per CS50 [? financem?], estem tipus d'esperar que per arribar la inspiració d'un altre lloc web. Així que no dubti. Mira a través de llocs web que creus que són realment bastant i esbrinar com utilitzen HTML i CSS per fer aquestes coses. 

Així que com veus aquí, òbviament hi ha com enllaços i tenim una classe aquí. Tenim un enllaç aquí. Tenim una llista. És probable que tinguem alguna fotos en algun lloc. 

Tenim una mica d'estil fresc aquí. Aquesta és la propera cosa que farem. Així estil, cada vegada que vegi aquests suports d'estil, que és bàsicament CSS. Ben, ¿vostè té una pregunta? 

AUDIÈNCIA: Quin és div? 

ALLISON Buchholtz-AU: div és just el que és A-- div? AUDIÈNCIA: Divisió. ALLISON Buchholtz-AU: Divisió. Sí, és com separar diferents elements. OK, així que aquí és el que estem entrarà en la pròxima. Així que aquest pot no ser el millor estil perquè, si vostè nota tenim HTML i estil en la mateixa pàgina, i que en realitat volem separar els, D'acord? I, de fet, em va deixar obrir el meu dret perquè això se suposa que és el PDF, de manera que tenim style.css. 

Així que el que podem fer aquí és aquests són coses interessants com alguns s'esvaeixen i podríem tractar de fer això, però em sento com ho faria desastre que sobre la marxa, així que t'animo a nois anar intentar pel seu compte, però jo no ho faré ara mateix. Així que si vostès, recordin, si mai va colpejar conjunt de problemes, alguna cosa s'abalança des del costat. Té a veure amb la fosa i la transició i altres coses. 

AUDIÈNCIA: I això és tot CSS i HTML? 

ALLISON Buchholtz-AU: Tot CSS i HTML. Sí. Així que vostè pot fer un munt de realment coses interessants amb CSS i HTML. Així que amb el nostre increïble pàgina web del conillet aquí, farem una mica de mica d'estil CSS amb ell. 

Així que si alguna vegada té un estil fulla, el que tenim aquí, vostè pot trucar a style.css. Es pot dir el que vulguis. El que és important és que anem fer referència a ella en la nostra web.html aquí. 

Així que el que farem és nosaltres-- així que no em fico aquesta up-- anem a vincular aquests dos arxius junts. Així que en el mateix manera- vaig establir una analogia a C aquí. De la mateixa manera que si té alguns library-- i tenim cs50.h-- nostre compilador ho vincula. Això és només una explícita enllaç de la nostra part. Així que de la mateixa manera que ho fem hash d'incloure algun arxiu, el que Estic a punt d'escriure és només el Equivalent HTML / CSS d'això. 

Només estem dient, OK, aquesta pàgina web es va a utilitzar aquest full d'estil, d'acord? Així que tenim link rel igual a full d'estil. I després tenim el tipus, css. I llavors és igual a href. 

Okay. Així que tot això ho va fer aquí és pot pensar en això com la mateixa cosa com un hash incloure. Òbviament es veu una mica més complicat, però en tots els casos, és efectivament el mateix. Així que això és només una mica de vinculació d'un full d'estil, que és de tipus text / css, i el nom de la mateixa és style.css. 

Què és important saber és que la pàgina web que estic treballant just ara-- web.html i style.css-- estan en la mateixa carpeta. A causa de que en diferents carpetes, vostè necessita donar a l'arrel real a ella o la ruta d'accés a la mateixa. Però en aquest cas, estem mantenint super senzill i que va a ser aquí. Així que si fem això, tinc una mica de les coses ja es posen en cua fins aquí. 

Així que tenim un cos, que es va perquè el nostre color de fons, que en aquest moment és de color blau clar. Podem canviar si volem, però si recordo correctament, només haurà de canviar a blau clar. I ara tenim un fons blau clar. I vam tenir aquí-- pot algú recordar quin és ID de hash o classe? 

AUDIÈNCIA: ID. 

ALLISON Buchholtz-AU: ID. Refredar. Així que el que volem fer és quina d'aquestes fonts o les quals: volem "Mira el conillet valent "ser porpra? Crec que volem que per ser porpra. Estic bastant d'acord amb això de ser porpra. 

Així que el que fa és que fas Identificació equals-- en aquest cas Jo vaig dir, ¿què, de color bastant aquí. Ens recarreguem. Tot d'una, és porpra. OK, així que amb la identificació, recordi ha de ser únic, de manera que mai hauria d'estar utilitzant aquest ID en qualsevol altre lloc. No obstant això, amb classe, com ho hem fet aquí amb un tipus de lletra bonica, Jo hauria de ser capaç d'utilitzar que en qualsevol lloc que vull. 

Així que anem a fer això d'aquí. Així que podem dir que la classe és igual a la font bonica. I si mirem ara, tenim aquest tipus de lletra molt bé aquí. Així que potser vull fer les dues coses. OK, jo realment no sé si això és anar a treballar, però vull intentar-ho. I així és com s'aprèn CSS i HTML. Vostè és com, ja saps què, vull provar això. No estic segur de si funcionarà. Anem a veure si funciona. 

I mira això. Ara és de color morat i és un tipus de lletra bonica. Acceptar, pel que té tot això diferents coses que pot fer. Té una pregunta? 

AUDIÈNCIA: Sí. Bé, igual que els colors que està usant són paraules. Hi ha una manera de fer colors amb l'hexadecimal RGB? ALLISON Buchholtz-AU: També pot faci-ho amb hexadecimal, crec. Sí. Però és una cosa bona si no volen mirar cap amunt. Vostè només pot ser com, porpra o blau. AUDIÈNCIA: Esperem que saben el que això significa. ALLISON Buchholtz-AU: Dret. Així que anem a fer aquesta lectura o chartreuse. Per què mai escollir chartreuse? És un color interessant. 

Acceptar, per la qual cosa, òbviament, podem veure que pot canviar les coses com vulguem. Si volies create-- diguem volíem crear una altra classe. Què pot ser que vostès volen canviar? Si acabes d'arribar W3Schools ' Documentació CSS, Deixo la paraula a vostès. Podem intentar fer alguna cosa fresc amb això en l'últim parell de minuts. Perquè he amable de la seva part van donar una Curs accelerat en un munt de coses interessants que vostè pot fer. Però al final, com ja he dit, si només experiment, vostè aprendrà molt. 

AUDIÈNCIA: Sabia vostè mira cap amunt aquesta font? 

ALLISON Buchholtz-AU: Sí, Vaig mirar cap amunt aquesta font. Així com, literalment, em vaig anar A-- ¿què vaig fer? Vaig fer la llista de fonts CSS, i després vaig fer pica de la font, i llavors jo estava com, mira, aquí són totes les fonts fresques que vostè pot fer. I allí estava aquest, per la qual cosa El vaig copiar al meu porta-retalls. I llavors jo estava com, Acceptar, fresc, aquí anem. Tot fet. 

AUDIÈNCIA: Així que vostè ha de assegurar- CSS que sap el que és la font. 

ALLISON Buchholtz-AU: Sí. 

AUDIÈNCIA: Què és el que diu al final? Cursiva? 

ALLISON Buchholtz-AU: cursiva. Sí. 

AUDIÈNCIA: Imatge de fons. 

ALLISON Buchholtz-AU: Imatge de fons. Okay. Així que vostè vol dir-me com fer-ho. Deixo això a vostè. Només estic escrivint aquí ara. La roda és a les teves mans. 

AUDIÈNCIA: Acceptar 

ALLISON Buchholtz-AU: OK. Què estic fent? 

AUDIÈNCIA: Doing-- Sé el ve després del claudàtor. ALLISON Buchholtz-AU: OK. Així que, probablement, en el cos, assumiria, perquè som fent la imatge de fons. 

AUDIÈNCIA: Sí, farem això. 

ALLISON Buchholtz-AU: OK. AUDIÈNCIA: OK, llavors fons de còlon, i després necessita una adreça URL d'aquesta imatge. Potser pseudo-codi que, per ara, potser. 

ALLISON Buchholtz-AU: Què ¿M'agradaria A-- AUDIÈNCIA: Estic pensant com un GIF. ALLISON Buchholtz-UA: Un GIF? Això serà interessant. Bé, ¿què estic buscant a Google aquí? 

AUDIÈNCIA: No, això és la seva elecció. 

ALLISON Buchholtz-AU: Per què no nosaltres-- si és un conillet, Sento que hauríem de tenir un bonic gespa o alguna cosa d'herba. 

AUDIÈNCIA: Prat. Un prat. 

ALLISON Buchholtz-UA: Un prat? Okay. AUDIÈNCIA: O Rachel Maddow. ALLISON Buchholtz-AU: Aquest es veu bastant. Oh, això és molt petita, però. Necessitem una imatge de bona mida. Anem a veure. Oh, mira. Això és un prat bastant. Saps què m'agrada aquesta. Anem a copiar aquest. 

AUDIÈNCIA: OK, així que crec que és la URL, els parèntesis oberts. 

ALLISON Buchholtz-AU: OK, URL. 

AUDIÈNCIA: A continuació, la direcció. 

ALLISON Buchholtz-AU: OK. És això tot el que necessitem? 

AUDIÈNCIA: Tancar parèntesi, punt i coma, i després l'espai, fons guió dos punts de fixació fix, i claudàtor. 

ALLISON Buchholtz-AU: OK. Anem a veure si funciona. Serà molt bé si ho fa. Estic molt emocionat aquí. No va funcionar. Em pregunto per què. AUDIÈNCIA: Potser la URL ha d'estar en les cites. ALLISON Buchholtz-AU: Potser. I aquesta és la manera d'aprendre, nois. 

AUDIÈNCIA: Podem tenir fons color i la imatge de fons? 

AUDIÈNCIA: No. Un substitueix a l'altre. 

ALLISON Buchholtz-AU: No ho sé. Anem a veure. Anem a fer-li un cop d'ull i veure. 

AUDIÈNCIA: Oh, potser, sí. [Interposant VEUS] 

ALLISON Buchholtz-AU: OK, això és obviously-- jo [inaudible] aquí. Així Acceptar. AUDIÈNCIA: afecció Antecedents. ALLISON Buchholtz-AU: Ah. 

AUDIÈNCIA: OK, jo no ho sé. ALLISON Buchholtz-AU: Es sembla que hauria de funcionar. Segur que és el còlon després de la URL? 

AUDIÈNCIA: No, és punt i coma. ALLISON Buchholtz-AU: És punt i coma. AUDIÈNCIA: He dit de còlon? ALLISON Buchholtz-AU: Vostè va dir que dos punts. AUDIÈNCIA: Oh, no. ALLISON Buchholtz-AU: Cal anar. AUDIÈNCIA: Oh, espera, ara no podem llegir el text. ALLISON Buchholtz-AU: Ara no pots llegir el text, però tenim la imatge de fons. Mmhmm? 

AUDIÈNCIA: L'HTML donar suport al contingut dinàmic? De la mateixa manera, podria canviar la mida d'aquesta imatge segons la mida de la finestra, o és que un CSS-- 

ALLISON Buchholtz-AU: Així que CSS ha de fer això. Així que si vostès estan interessats en l'aprenentatge de CSS avançat, Estic co-ensenyant una seminari sobre CSS a la setena. I et prometo que ho farà molt més en profunditat i fer molt més fresc coses en aquesta secció. I el meu company de mestre és com total d'extrem frontal mestre dev web. Així que serà molt bé si vols per aprendre sobre totes les coses interessants CSS que pot fer. 

Però el que tenim aquí amb la seva inclinació fons fixed-- així que és una mica de size-- fix però en realitat es pot dynamically-- si mai veure pàgines web, com la majoria de les bones pàgines web van a fer, en ajustar la mida del seu navegador, s'ajusta el fons o la quantitat està mostrant o reformatea les coses, no? Així que això és el que anomenem posicionament relatiu. 

I CSS realment pot prendre la mida de la seva ample del navegador és o què tan alt és, i es pot col·locar les coses d'acord amb les mides relatives front dimensions absolutes. I això és, òbviament, més avançat CSS, però això és una cosa que vostè pot fer. Si vols aprendre més, vine a la meva seminari. 

Així que això és una cosa que vostè pot fer. I CSS pot en realitat fer-- CSS i JavaScript, que entrarem en la pròxima week-- pot permetre que vostè canviï de forma dinàmica pàgines sense haver de ells recarregar tot el temps. I s'arriba a fer alguna cosa coses molt bé. 

Llavors, ¿hi ha una altra cosa que vostès podrien voler fer o el que vulguis per explorar? Tenim 10 minuts per al final. També podem sortir d'hora, però si vostè vol fer alguns més coses web, podem, però no estic et va a obligar. Però podem també acaba de menjar dolços. AUDIÈNCIA: Ressalta el text blanc així que vostè pot llegir. ALLISON Buchholtz-AU: OK. Així que en aquest cas, volem una mica de p. AUDIÈNCIA: Cal fer-ho al cos pel que s'aplica a tota la pàgina? ALLISON Buchholtz-AU: Sí, podem en realitat. Aquesta és una bona idea. Així que tener-- És vostè Sabem el que hem de ser? No sé si podem fer el color del text. Anava a tractar de crear una altra classe aquí. 

AUDIÈNCIA: Com s'arriba de manera que té els suggeriments? ALLISON Buchholtz-AU: Així si vostès estan interessats, aquest és un altre text editors: Sublim. Vostè ha de ser capaç de instal·lar en el seu aparell. A vegades es posa una mica complicat. Si voleu ajudar amb això, Estic súper feliç d'ajudar a amb ell, perquè és gran i gedit que és impressionant, perquè es pot compilar en la part inferior, però realment com Sublim perquè és bastant i que sí que fa coses com la funció d'autocompletar. 

Així que vostè pot sens dubte no dubti en que em faci saber si vostè vol fer això. Si vostè acaba de Google "Sublim text, "en general té instruccions sobre com instal·lar en diversos sistemes operatius. És realment genial, em pensar, al meu entendre. Així p. Crec que només puc fer text-- o només podem fer el color és "blanc." Ja està. 

Així que el que vaig fer aquí és que jo no canviar tot el text. Però p aquí és només un etiqueta que tenim, no? Aquest avís de paràgraf. Així que acabo de crear un element de CSS que Dit això, bé, qualsevol cosa amb aquesta etiqueta p, fan que el color blanc. 

Així que si t'has adonat, es va fer aquest blanc i aquest blanc. No tenia la nostra llista blanca perquè que no està associat amb això. Vostè podria anar a través i vostè podria dir-- 

AUDIÈNCIA: Feu color de fons. 

ALLISON Buchholtz-AU: El color de fons? 

AUDIÈNCIA: Antecedents de la canonada en de color on vostè posa l'etiqueta p. 

ALLISON Buchholtz-AU: OK. Ho vols blanc? AUDIÈNCIA: Mmhmm. ALLISON Buchholtz-AU: OK. Cal anar. AUDIÈNCIA: Això és estrany. ALLISON Buchholtz-AU: Bastant bé, oi? Així que si vostè acaba de perdre el temps, vostè va a aprendre molt. I pot ser bastant fresc. Crec que és definitivament més gratificant que de vegades perquè vostè no ha d'esperar per al seu programa per compilar. Vostè només pot colpejar Actualitzar i vostè és com, oh, mira, funcionar, o oh, jo sóc probablement perdent alguna cosa. I això és una cosa que és realment plau de la següent part de la classe, és sens dubte, jo pensi, més fàcil de comprovar a mesura que avança en el camí davant haver d'escriure aquests programes llargs i desitjant i resant que funciona a l'extrem. 

Així que amb això, crec que vostès tot sembla bo. Si vostè té alguna pregunta, com sempre, venir a parlar amb mi, veuen que em faci saber. Seré just fora per als pròxims 15 minuts si vols xerrar sobre qualsevol cosa i tot. 

Així que espero que guys-- bona sort amb aquest conjunt de processadors. La data límit és el divendres al migdia ja que va ser llançat a la fi. Així que probablement veuran un munt de vostès el dijous, però espero que no. Potser vostè haurà de fer per llavors. Jo estaria molt orgullós. 

Però si no, et veuré dijous. També pot utilitzar una data tardana, que s'estén a dissabte al migdia. Però jo no-- eh? 

AUDIÈNCIA: Halloween. 

ALLISON Buchholtz-AU: És Halloween, a, ib, Jo no crec que hagi de ser les hores d'oficina divendres. Així que en realitat no tractar d'aconseguir que es faci per Divendres, així que tots podem celebrar Cap de setmana de Halloween. Molt bé, vaig a veure vostès la setmana que ve.