[MUSIC JOC] ALLISON Buchholtz-AU: În regulă, toată lumea. Bine ați revenit la pct. Deci, agenda noastră pentru ziua de azi se întâmplă peste mult mai multe lucruri dev web. Nu știu câți dintre te-am văzut psets dvs. de cand a fost lansat mai devreme în această dimineață. Mi-ar fi cat de multi oameni au citit spec, dar văzând cât de ai avut tot de, cum ar fi șapte ore pentru a se uite la ea și este o zi de luni și probabil ai avut de clasă, Am de gând să se presupună că cele mai multe dintre voi nu aveți. Dacă aveți, kudos suplimentare. Ești practic de ajutor să pună în aplicare un simplu web server din C, care este un nou PSET de brand, așa voi ajunge să fie cobai. O să fie o distracție, saptamana sălbatice, dar eu cred că va fi o mulțime de distracție și acesta va fi un adevărat experiență bună în realitate. Deci, pentru a vă pregăti pentru că, în secțiunea astăzi, vom merge chmod, TCP / IP, și apoi un pic de HTML și CSS. 

La sfârșitul anului, vom fapt cod o pagină web simplu împreună pentru a vă ajuta baieti fel de a obține mai familiarizați cu asta. Și apoi, dacă nu ai luat chestionare tale, ele sunt în bară, dar eu sunt destul de sigur că toată lumea aici are test lor. Și, de asemenea, pe această notă, soluții nu sunt încă în sus, dar de îndată ce ne-am finish-- place, ultimele persoane care iau quizzes-- lor acestea vor fi de până. Dacă aveți orice întrebări în același timp, nu ezitați să-mi e-mail personal. Voi răspunde cu individuală ta întrebări, așa cum fac mereu. 

Deci, pe această notă, chmod. Deci, practic tot ce aveti trebuie să știți despre chmod este că acesta este folosit pentru a schimba permisiunile de fișiere, nu? Deci e doar unele sisteme un apel modifica permisiunile, cum se spune aici. Și dacă vrei vreodată să vadă permisiunile unui fișier are, în loc de a face doar ls, ai putea face ls -l. l reprezintă pentru mult timp. 

Deci, vei face liste lungi de tot, și-l vă va oferi mult mai detaliate informații despre fiecare dintre fișierele. Și veți vedea something-- eu sunt O să treceți la un second-- dar veți vedea ceva asemănător cu că linia de sus acolo pentru fiecare dosar. Și vom trece prin ceea ce înseamnă că. 

Deci, practic, să se schimbe permisiunile de fișiere, vrei doar să utilizați chmod. Vă puteți gândi la ea ca orice alt UNIX suna ca ls sau cd sau fleacuri. E doar un fel de alt apel cum ar fi. 

Deci, ce facem chmod și apoi vom au trei cifre de obicei. Există câteva modalități de a face ea, dintre care unul, vom trece peste. Dar de obicei, veți avea trei cifre variind de la 0 la 7 de fiecare dată. 

Deci, un lucru este că există trei permisiuni diferite care ne putem da fiecare fișier. Și este ușor de citit, care este reprezentată de r, care va face sens într-un pic; w, care este inscriptibil; și executabil, care este x. Știu că e unul, executabil, poate nu cel mai mult sens, dar noi reprezintă o cu de x. 

Și apoi ce se întâmplă este fiecare dintre acestea au, de asemenea, reprezentarea număr. Deci avem 1, 2, și 4. Și de fapt ceea ce se întâmplă este fiecare dintre aceste trei numere aici corespunde unei set diferit de utilizatori că aceste permisiuni se referă la. 

Deci, vă puteți gândi că în primul rând număr corespunde utilizator real sau proprietarul fișierului, al doilea Numărul va corespunde grupului, iar ultima se referă în lume, OK? Deci, ceea ce se întâmplă este amintesc cei Numere r este 4, w este 2, x este 1, nu? Asta: daca te rezuma astea, care vă oferă acest prim număr pe care le-ar putea de intrare în chmod nostru. 

Deci, în acest caz, ceea ce ar fi acest număr? Ar fi de 4 plus 2, plus 1, care este un 7, nu? Și în acest caz, acestea nu au nimic, astfel încât acest drept aici ar fi traduce la chmod 700, OK? Și ce că nu este o acordă tot din aceste permisiuni de utilizator ta. 

Deci, acest lucru înseamnă utilizatorul nostru pot face ce vor. Ele pot citi acest fișier. Ei pot executa acest fișier. Ei pot scrie la acest dosar. Dar de grup și în lume, nu permisiuni fel, OK? 

Deci, un alt mod de a scrie că, putem face chmod de trei cifre, fiecare dintre care corespunde indiferent de suma sau că grup specific este, subset specific. Sau putem face de fapt un alt lucru. Stai. Putem face ceva cu astea aici. 

Câți dintre voi a văzut un exemplu în cazul în care a fost ca la chmod un plus x? Ai văzut că în curs, cred? Deci, o reprezintă pentru toți. Aceasta înseamnă dau la toți utilizatorii, pe care am uitat să pun aici. 

Dar un plus x, dacă ne-am observa aici, dacă facem a chmod-- ce grup suntem vorbim despre plus permisiunile vrem să le dea. Deci, acest lucru poate fi un plus sau un minus. Plus adaugă permisiune. Minus ia departe permisiune. Destul de intuitiv, cred. 

Deci, un plus x înseamnă chmod. Deci, schimbați permisiunile tuturor oamenilor în cazul în care acest lucru este un un-- permisiuni add. Și X- asta înseamnă ceea ce permisiune suntem de acordare toată lumea. Citi, scrie, sau executa? 

Audiența: Executare. 

ALLISON Buchholtz-AU: Executare. Deci, suntem avertizat toți utilizatorii permisiunea de a executa acest fișier, OK? Și ce dacă am vrut să facem că cu forma numerică? Deci, amintiți-vă cu numeric, vrem trei numere. 

Audiența: 4. ALLISON Buchholtz-AU: Ce-a fost asta? Audiența: 4. ALLISON Buchholtz-AU: Nu 4. Audiența: 0, 0, 4. ALLISON Buchholtz-AU: Ei bine, ne-o dorim să-l dea la toți utilizatorii, nu? Deci, vom avea un număr în fiecare slot. Care va fi același număr în fiecare slot pentru că vrem doar să dea Toată lumea permisiuni executabile. Deci, executabil este 1, dar pe drumul cel bun. 

Deci, dacă ne-am chmod 111 care ar să fie echivalentul a chmod un plus de x. Asta face sens pentru toată lumea? Ne vom trece prin câteva exemple. 

Deci, Takeaway mare aici este o nu e pe aici, dar o înseamnă doar da-l la toți utilizatorii. u este dacă doriți doar pentru a da sau de a lua departe o permisiune specifică din utilizatorul sau proprietarul. g este pentru grup, astfel încât cifră de mijloc. Și apoi puteti gândi ca lumea, că ultima cifră. 

Deci, cu asta, vom merge la un exemplu, pentru că mă simt ca exemple mereu face aceste lucruri mai ușor de înțeles. Deci, rwx-- am trecut prin asta: ar putea fi, de asemenea, reprezenta ca 700. Asta e un exemplu ne-am uitat la mai mult din imagine. Deci, chmod 444 pe unele dosar ar da ce permisiuni? Ai fost foarte aproape. Audiența: poate fi citită la toate. ALLISON Buchholtz-AU: poate fi citită. Deci, poate fi citit de toată lumea, nu? Și atunci ce e un alt mod de a face asta? Dacă vrem să facem chmod fie cu r sau w, plus și minusuri, ceea ce ar arăta că apel ca? Ar fi chmod ce? 

Audiența: un plus r. 

ALLISON Buchholtz-AU: un r plus pe 5. OK, deci acest lucru este la fel ca aceasta, doar două traduceri diferite de același lucru. Deci, cu asta, avem astea. Așa că vreau ca voi să încercați și a scrie aceste tipuri de la calea lor opus. 

Deci, cu chmod 555, ceea ce ar fi? Ar fi un plus sau u plus sau fleacuri? Pentru u plus x, da-mi trei cifre. Și apoi spune-mi despre ce permisiuni suntem de fapt acordare și de la cine? 

Deci, eu voi da băieți doua minute pentru a lucra la asta. Simțiți-vă liber pentru a vorbi unul cu celălalt. Pentru cei dintre voi care au venit într-o mică târziu, există bomboane și tricouri. Am trei tricouri stânga, și avem Kit Kats și starbursts. Deci, nu ezitați să vină apuca unele în acest mic interludiu. 

De asemenea, ultima este complicat. E două chmods pentru ultima. De fapt, lasă-mă să închid ușa aia în timp ce voi lucrează la asta. Candy este întotdeauna necesar pe o după-amiază luni. 

OK, deci chmod 555. Ce e un alt fel, am putea scrie asta? Orice idei? Da. 

Audiența: un rx plus. 

ALLISON Buchholtz-AU: r plus rx. Vrei să explice de ce ar fi rx? 

Audiența: Pentru că aveți 5, astfel încât este de 4 plus 1, astfel încât se citește plus executabil, și este pentru toți. ALLISON Buchholtz-AU: Corect. Deci, doar pentru a reitera, 5 aici stim ca suma intre 4 și 1, pentru că fiecare număr din trio-ul nostru este suma permisiunile pentru care subset, dreapta? Fie utilizator, grup, sau lumea. Deci, în acest caz, știm că 5 trebuie să fie formată de 4 și 1. 

Și 4 și 1 corespund lizibil și executabil. Suntem o da la toată lumea, astfel încât să putem face chmod o rx plus. Și, evident, doar ne-am dus prin întrebările de acolo, asa ca acum si acest fisier este executabil și poate fi citit de toată lumea. 

Deci, ce despre al doilea? Care ar putea fi numărul de asta? Orice idei? Dă-i drumul. 

Audiența: 100 [inaudibil]. 

ALLISON Buchholtz-AU: 100. Exact. Deci, vrei să explici de ce 100? Audiența: Pentru că este pentru utilizator, așa că este pe prima pozitie. Și apoi x executabil este 1. ALLISON Buchholtz-AU: Exact. Deci, suntem de acordare a executabil permisiuni doar utilizatorul. Deci, în acest caz, ar fi de 100. Și am toate răspunsurile pe urmatorul diapozitiv în cazul în care sunteți scris o mulțime de lucruri în jos. 

OK, deci acesta următor este, de fapt face cu două chmods, ai putea-o face. Deci, nu oricine are orice idee cum s-ar putea obține chmod 640 rescrise în alt mod? Puteți schimba utilizatorul întâi și apoi puteți schimba grupul este indiciu mea. 

Deci, dacă am fost doar schimbarea utilizator, ceea ce este această primă de aici, ceea ce ar putea fi apelul nostru? Deci, de folosire este u, nu? Deci, chmod u plus ce? Mmhmm? 

Audiența: rw. ALLISON Buchholtz-AU: rw. Dreapta, pentru a citi și a scrie, pentru că de citire este 4, w este 2, cei sumă împreună ca 6. Deci, avem chmod u plus RW, si ajungem primul nostru 6 acolo. 

Deci, apoi pentru a obține 4, acum vrem pentru a modifica setările noastre de grup. Așa că am de gând să faci chmod g plus ce? Ce este un 4? 

Audiența: r. ALLISON Buchholtz-AU: r. Exact. Deci, vom oferi proprietarului citește și scrie permisiunile și vom da citire grup permisiuni, pe care le avem toți aici. Mmhmm? 

Audiența: Dacă se poate scrie ceva, nu implică puteti executa? 

ALLISON Buchholtz-AU: Aveți poate scrie la something-- Nu cred că-l presupune puteți să-l execute. Rece. Deci, asta e tot ce tocmai am trecut prin. Deci, de data asta următor, este cazuri doar un fel de comune pe care doriți să le păstrați în minte pentru a seta problema ta. Acestea sunt de obicei permisiunile pe care ne place să utilizați. 

Deci, pentru 711, care oferă ne, desigur, de folosire toate permisiunile, care tinde să facă sens. Și atunci este executabil de grup în lume, ceea ce face sens dacă aveți unele director, ai doresc să fie în măsură să traverseze în ea. Oamenii au nevoie de acces. 

Pentru orice fișier de bază non-PHP, ai de gând de a utiliza 644 de, ceea ce ar face ce? Ce implică acest lucru, sau ceea ce permisiuni nu asta da? Deci, proprietarul poate ce? Audiența: Citește și scrie. ALLISON Buchholtz-AU: Citește și scrie. Și apoi de grup și alții poate citi doar, nu? Și apoi chmod 600 pentru orice Fișierele PHP pe care le utilizați, proprietar ta, din nou, poate citească și să scrie pentru el dar toată lumea este doar un fel de blocat. 

Deci, aceasta va fi de fapt fi mai util atunci când vei ajunge la problema ta stabilit săptămâna viitoare în cazul în care esti de fapt, construirea unui site web. Deci, dacă aveți vreodată în orice probleme ciudate în cazul în care aceasta nu încarcă în mod corespunzător, poate că Trebuie să adăugați un executabil permisiune, sau poate ai nevoie de o citire sau scrie permisiune. Little lucruri care tind să excursie oameni up, dar asta e un fel de du-te-la atunci când începe PSET de săptămâna viitoare. Și v-aș da mai mult informatii de pe PSET din această săptămână, dar am încă să se uite la ea, deoarece a fost lansat în această dimineață. Dar mi-e-mail, eu voi fi uitat la ea de când am răspuns mâine. 

Deci, acum, toată lumea este bun cu chmod? Orice întrebări persistent? Destul de simplu. Doar un fel de a ține evidența a ceea ce citi, scrie, și să execute numere sunt este, probabil, partea cea mai grea. 

Deci, cu TCP / IP, toate aceste protocoale, un fel de cu structuri de date saptamana trecuta, este mult mai important pentru un fel de a obține o intuiție nivel mai ridicat de ele. Acest lucru nu este CS143 unde mergem să vă rog să pună în aplicare o rețea, astfel încât veți fi bine dacă tu nu înțelegi curajos nitty de toate protocoalele. Ceea ce este important este să se înțeleagă un fel de ceea ce reprezinta și de ce sunt importante. 

Deci TCP / IP, desigur, este Transmission Control Protocol sau Internet Protocol, care este de fapt doar un set de legi, practic, sau a bunelor că spuneți de date cum ar trebui să fie manipulate, cum ar trebui să fie împachetate, transmise și primite. Deci, practic, la fel ca spune aici, crește șansele că datele devine în cazul în care doriți să-l pentru a ajunge la. 

Sunt sigur că dacă voi sa dus la prelegere sau vizionat on-line, el has-- Nu știu dacă el a făcut-o în acest an, dar știu că anul trecut, el a avut o demo-ul unde a avut o imagine de Rob și el împărțit în patru și pune-l în plicuri și a încercat să-l peste Sanders. Și puteți fel de cred că de ea în acest fel. E doar un set de reguli care spune-date cum să obțineți un loc și vă permite să știu dacă vă lipsesc date, în același mod în care, dacă sunteți luând mai multe pagini de note și le eticheta cu pagina 104, pagina 204, și tu du-te înapoi pentru a studia mai târziu și vă lipsesc something-- nu puteți găsi pagina 304-- știi ceva e în neregulă, așa că sa te uiti prin note din nou sau rugați pe cineva să vă retrimiteți prelegerea constată din acea zi. La fel ca datele de pe internet. Dacă eu cer ceva de la un server și de care are nevoie pentru a trimite se în mai multe pachete, probabil de gând să număr se într-un fel, să mă știu câți aș ​​fi primit, și spune-mi, oh, aceasta este una din 10 sau acesta este unul din 10.000. În acest fel, atunci când mă duc la reasambla toate piesele împreună, Știu că dacă ceva lipsește și pot cere asta din nou. Asta face sens? Doar un set de reguli. La baza sa, un set de reguli, OK? 

Așa că am vorbit, de asemenea, o pic despre porturi. Aceasta este de fapt doar un standard care vă permite să știți ce tip de date se transmit în aceste pachete. Dacă vom merge cu nostru exemplu plic, noi nu facem știu că este o imagine a Rob acolo dacă nu l-am scrie pe partea exterioară a anvelopei noastre. Deci, porturile sunt în esență același lucru. E doar un mod de a da seama ce tip de date sunt transmise. 

Deci avem toate a celor mai comune aici. Deci, 21-- acestea sunt, de asemenea, un fel de ca lucruri bune să știu. E un fel de întrebare ușoară test. Fie ca, ceea ce face portul 80 face? Sau, ce portul 443 face? Deci, lucruri bune să știu. 

Deci avem aici, 21 este fișier protocol de transfer, asa ca regulile care guvernează transfer de fișiere. 25, ceva ce noi toți utilizați prea mult, este de e-mail. 53 este numele de domeniu sistem, care este de fapt doar un fel de căutare pentru Adresa IP a unui nume de domeniu. 

Așa că eu sunt destul de sigur că a fost menționat în curs, dacă du-te la ceva de genul google.com, are o adresă IP care este asociat cu ea. Nu e de fapt google.com. Și astfel 53 este portul care de fapt ia grijă de acest gen de traducerea în care adresa IP pentru tine. Și apoi 80 și 443 sunt foarte frecvente. Fie aveți pagina web sau Ai pagina web securizată, care o mulțime de pagini web sunt transferul de pe acum. 

Deci, asta e un fel de nivel înalt imagine de ansamblu a protocolului de transfer. Nu văd mult mai mult în profunzime. Este un fel de chestii misto daca esti interesat. Exista o multime de resurse. Wikipedia este de fapt o pagina destul de bine. Așa că m-am uitat la ea în urmă doar un pic de timp, așa Mi-ar recomanda foarte se uită la ea, dacă sunteți interesat sau de a lua 143 în doi ani, deoarece Cred că e în fiecare an. 

Deci, pe la sfârșitul acestui suntem vorbim despre pagini web și HTTP, care este de fapt următorul nostru subiect de astăzi înainte de a intra în HTML și CSS si puteti codul de fapt, o pagină web. Va fi distractiv. Vom avea poze iepurași și că va fi grozav. 

Deci, HTTP, după cum puteți vedea aici, este unul dintre acronime frumoase pentru această săptămână, care este Hypertext transfer protocol. Deci, din nou, e doar un alt set de reguli care reglementează hipertext transfera, în acest caz. Deci, cel mai bun mod de a învăța despre acest lucru este doar un fel de să-l rupe în jos, în aceste cuvinte individuale pentru că există o mulțime de Cuvinte pe ecran acolo. 

Deci, vom începe cu hipertext. Deci, "hiper", vă puteți gândi "Sus", cum ar fi de tip super-lucru. Deci, este într-adevăr doar un text dus la următorul nivel, deci e ca super-text, cum ar fi textul următor. Deci, este practic doar text care ne dă mai multe informații decât text normal nu, OK? 

Deci, în acest caz aici, aceasta este hypertext. Acest lucru ne spune ca avem unele link-ul pe care am de gând să, care este cs50.net, care este acum cs50.harvard.edu. Aceste slide-uri sunt un pic vechi. Și se va afișa l ca acest lucru, ca un hyperlink, și apoi un site web foarte cool. 

Deci e de text, care este un pic bit de lucruri foarte cool acolo. Astfel încât să puteți lega lucrurile și puteți insera imagini și vă puteți aranja lucrurile. Și cel mai familiar pe care le baieti, probabil, au cu hipertext este HyperText Markup Language, HTML, care, desigur, este tot de pe web pe care o vedem în jurul nostru, a acordat cu unele stil CSS aruncat în. 

Dar dacă cineva a fost într-adevăr mare cu MySpace, Sunt sigur că toți second hand HTML tot timpul pentru a crea aceste profiluri perfecte, nu? Mă simt ca și cum asta ar putea fi o referință depășite acum, dar orice. Voi doar o little-- nu sunt atât de mult mai tineri. Unii dintre voi sunt mai în vârstă decât mine. MySpace a fost încă o lucru când eram tânăr. Nu sunt așa de vechi. 

Oricum, HTML doar o formă de hipertext. Deci, hipertext este doar text cu caracteristici adăugată. Deci, protocolul de transfer este, probabil, un lucru mai iffy pentru a explica. Evident, transfer-- doar transferul de date. Deci, fie între client, cum ar fi fratele tău web, și un server. Deci, practic doar modul în care internetul funcționează. 

Deci, cererea exact de cum aceste lucru, suntem de fapt de gând să se uite la un exemplu cerere și răspuns. Dar cum am cere informații de pe un server si se pare ca serverul raspunde la noi este ce reglementează acest protocol de transfer. Deci, cererea și răspunsul au să urmeze aceste set specific de norme. Este standardizat, astfel încât nu contează în cazul în care sunteți utilizarea internetului, funcționează întotdeauna la fel, OK? 

Din nou, protocol, un set de reguli. E doar un obișnuit interacțiune în același mod că profesorul Malan vorbește despre dacă cineva întinde mâna lor, Știi că e curtoazie comun pentru ajunge la al tău afară și se agită mâna lor. Asta e un protocol, nu? 

Asa ca am da unele cerere standardizat, care este vreau să dau mâna cu dumneavoastră, și vă va oferi unele standardizate de răspuns, care este fie nu, mulțumesc sau ai putea încerca și se agită meu manual sau poate ai de gând să încercați și pumnul ciocni mine. Și nu avem un protocol pentru asta. Se strică. Dar dacă toată lumea urmatoare același protocol, desigur, merge mult mai perfect. Oamenii să se cunoască unii pe alții. Toată lumea e fericită. 

Deci, în lumea de web, toată lumea urmează aceeași rules-- ceva mai bine decât standardele sociale. Dar cu asta, ne vom uita la o cerere de exemplu aici. Deci, nu există acest mic cheie aici pe jos care vă spune diferite culori, ceea ce ei ar trebui să însemne. 

Deci, alb este la fel ca metoda dvs. cerere și protocol version-- solicită acest lucru metodă, versiune. Și atunci acest lucru este ceva numele câmp și valoarea din acest domeniu, pe care vom du-te în foarte, foarte scurt timp. Deci, aceasta este o solicitare de exemplu. Acest lucru este la fel ca mine extinderea afară, doresc să mă prezint. 

Aceasta este ceea ce clientul sau ce browser-ul web va trimite la server. Deci, aceasta este o cerere GET, așa că este cere ceva de la server. Și este, desigur, HTTP și e versiunea 1.1. 

Deci, restul acestui aici este ceea ce noi numim antetul, iar informațiile sale suplimentare care ne dă o idee mai bună de ceea ce suntem de fapt cere, sau informații pe care ne-o dorim pentru a se obține serverul care ar putea fi pertinente. Deci, User-Agent ofera unele mai multe descriere on-- de exemplu, aici, curl / 7.24.0 se intampla de fapt să-i spuneți serverul pe care îl utilizăm Google Chrome ca browser-ul nostru. Deci, dacă ai auzit vreodată despre oameni care vorbesc despre a face o aplicație receptiv pentru mai multe browsere, acest lucru este ceva ce ei ar folosi pentru că dacă Nu știu ce browser cererea vine de la, nu se poate adapta datele la care. Deci, în acest caz, utilizator este doar avertizat de acest tip de informații de identificare despre ce browser dvs. de utilizator este utilizată în prezent, OK? 

Deci, atunci avem, de asemenea, gazda, care este unde suntem de fapt doresc să meargă la. În acest caz, vrem să mergem la apple.com, cumpara unele noi iPad-uri misto sau ceva, poate drăguț lumini de la camerele noastre de cămin. Și nume valoare la final este doar un material de umplutură, doar un lucru generală pentru voi sa vedeti. Ea nu are de fapt corespund nimic aici. 

Astfel încât să puteți avea la fel de mult sau cât de de puțin doriți în fiecare caz. Cele mai multe ori, acestea sunt opționale. Este doar depinde de ceea ce aveți nevoie de browser-ul, de la utilizator în scopul de a da corect cererea. Sau depinde de ceea ce dvs. de utilizator de fapt, vrea să renunțe la server. Deci, este posibil să aveți multe, multe din aceste nume de câmp în afara sau s-ar putea avea doar o pereche. Ca și în atât de multe lucruri Am spus în această secțiune, într-adevăr depinde contextul de modul în care îl utilizați asta. 

Deci, nu că are sens pentru toată lumea? Acesta este doar un exemplu de o cerere, antete, fleacuri. OK, deci cu asta, avem unele măsuri. 

Din nou, avem cod de stare noastră, protocol versiune, și apoi numele teren și teren valoare ca întotdeauna. Deci, versiunea de protocol și codul nostru de stare este de 200. OK, ceea ce înseamnă că, da, totul a mers bine. Aici e ceea ce vrei. 

Tipul de server, conținutul type-- ne spune, OK, tu ești mergi la a lua un text HTML. Aici este lungimea de ea și aici e ceea ce ar trebui să faci cu conexiunea. OK, deci din nou, în funcție pe baza datelor esti solicitând, în funcție de ceea ce serverul vrea să se întoarcă la tine, este posibil să aveți mai mulți dintre aceștia câmp nume, s-ar putea avea mai putin. Total dependente de context. 

Și, în măsura în care acest statut cod aici, desigur, 200 nu este singurul ai putea avea, nu? Avem o mulțime de coduri de stare. Are cineva amintesc nimic alții că am menționat în curs? O mulțime de ei au inceput cu 4. 

Audiența: 404. 

ALLISON Buchholtz-AU: 404, ceea ce este? 

Audiența: Fișierul nu a fost găsit? 

ALLISON Buchholtz-AU: File nu a fost găsit. Exact. Deci, ce despre 403? Audiența: Interzis. ALLISON Buchholtz-AU: Interzis. Deci, ce crezi ceea ce înseamnă cu chmods? 

Audiența: Aceasta înseamnă că Nu aveți permisiunea să-l citiți. 

ALLISON Buchholtz-AU: Exact. Într-un fel, nu aveți permisiunea de a accesa, nu? Deci, 404, 403. Nu e un adevărat amuzant unul care ne mereu să introducă în fiecare an că Ar fi trebuit pus aici, cum ar fi 413, care este eu sunt un ceainic. Puteți Google acest lucru. E amuzant cum ar fi, asta este codul 413 și este eu sunt un ceainic. Ceea ce eu nu știu de ce v-ar vreodată nevoie de pe internet, dar am face o digresiune. Audiența: Poate ești o oală de ceai. ALLISON Buchholtz-AU: Poate serverul este o oală de ceai. Cine știe? În regulă, deci suntem pe cale de a tranziție în codificare reală. Mă simt ca și cum voi de gând să plecăm de aici destul de repede. 

Audiența: De ce o face spune "server: de două ori? 

ALLISON Buchholtz-AU: Hm? Server de două ori? Aceasta este o întrebare bună. Nu sunt sigur. Voi afla și Te totul va trimite un email. 

OK, orice alte întrebări în afară de asta? Bun? Rece. 

HTML și CSS, iar acum ne ajunge la toate părțile amuzante. Deci, după cum am menționat mai înainte, HTML este, probabil, unul dintre lucrurile voi sunteți mai familiarizați cu. Deci avem HyperText Markup Language. 

Cel mai bun mod de a învăța asta: eu nu nici diapozitive preparate sau ceva pentru voi cu HTML. Este într-adevăr despre a învăța sintaxa. Și dacă ai fost în MySpace zi, va avea aceasta în jos. 

Deci, într-adevăr, cel mai important lucru este doar pentru a practica și experiment. Una dintre cele mai mari resurse aș face- Recomand folosirea este W3Schools. Deci, doar W, 3, și apoi școli. Ei au o multime de resurse pe HTML, CSS pe, și ei au de fapt o tip split screen de lucru în cazul în care să-ți dau exemplu de cod. Puteți juca cu ea, schimba-l, și apăsați Update, și-l voi arăta ce-l de fapt, nu la pagina de web. 

Deci, aș recomanda foarte, folosind asta. E destul de cool. Tu nu va primi defecte SEG aici când lucrurile nu merg bine. Dacă ați reușit să obțineți o defecțiune SEG cu HTML, nu să-mi spuneți că eu sunt O să fie adevărat intrigat. Dar e foarte misto, deoarece poti schimba lucrurile, le poti vedea actualizate live. Și cred că veți obține o mult înțelegere mai intuitivă a HTML dacă tu de fapt doar petrece ceva timp experimente cu ea. Deci, de aceea am spus, practică și experiment. 

Google, de aici pe out, va fi, probabil, una dintre cele mai bune resurse si prietenii dumneavoastra. Sau Bing-- Lucrez la Microsoft, asa ca poate ar trebui să spun Bing. Dar ceva destul de mult este doar de gând să fie sintaxă, astfel înțelegerea a ceea ce tag-urile sunt, understanding-- cel puțin cu CSS-- cum de a schimba anumite atribute. Va fi foarte util. 

Deci, chiar dacă noi nu facem nici lucrurile pregătite, noi avem un fel de unele mai bune practici pe care ne-o dorim voi să încercați și să respecte by-- sau, mai degrabă, ar trebui să să respecte până la o notificare ulterioară. Deci, închideți toate etichetele. Sperăm că toată lumea has-- știi ce, în cazul în care acest lucru nu are sens acum, Îți promit că va face sens când suntem codificare sus a paginii. Dar închideți toate etichetele. Deci, dacă aveți vreodată ceva în afara e placuta, H1, suport, asigurați-vă că ori de câte ori ai terminat cu asta, închideți asta afara. Validează pagina cu W3 Validator. În cazul în care nu se închid etichetele, puteți obține un comportament neașteptat. Va spune că pagina dvs. este nevalid dacă îl rulați prin acest validator. Deci, atunci când în doubt-- și mai ales pe această săptămână și săptămâna viitoare pset-- în același mod în care cerem vă să utilizați verifica 50 si stil 50, ați putea gândi la acest lucru ca unul dintre cecurile, OK? 

Deci, dacă aceasta nu trece W3 validatorului. Asta este ceva ce te va andoca pe. Sau îți spun drept acum, eu vă va andoca pe. Deci, asigurați-vă că validează. Nu e greu. Trebuie doar inserați codul dvs. și-l voi spune nici loc de muncă bun sau ai pierdut ceva în același mod că stilul de 50 iti spune unde te încurc. 

Și apoi un ultim lucru este de dorit să se separe markup-ul, care este tot ceea ce HTML sau textul, și styling dumneavoastră. Deci, vom face un exemplu de faptul că imediat după aceasta. Deci, HTML și CSS trebuie să fie separate. Și vom vorbi despre MVC, care este Model View Controller, săptămâna viitoare. Voi ar trebui, probabil, afla despre asta în curs mâine dacă ați avut deja învățat astăzi. 

Și e doar un fel de o paradigmă care tindem de utilizat la crearea web pagini pentru a separa lucrurile. Vă puteți gândi la ea în același fel că avem tendința de a funcții separate în C în cazul în care ne-am hash pentru a găsi lucruri. E doar un mod de a face viața mai ușoară. Se separă atribute sau cod care v-ar fi utilizați de peste si peste din nou, dar în acest fel, este un fel din păstrează frumos și elegant. Și dacă doriți să modificați un singur lucru, voi schimba dată și sa schimbat peste tot. Deci e mai mult pentru dvs. ușura și flexibilitate. 

Deci, cu CSS, e foarte asemănător la HTML, dar în loc de tag-uri pe care am menționat chiar acum, ne-am folosi ceea ce se numește selectoare. Și ei practic doar un fel a asocia un anumit etichetă în HTML cu atribute diferite. Și când spun atribute, vreau sa spun lucruri cum ar fi culoarea fontului, stilul fontului, culoarea de fundal, culoarea textului. Aceste felul de lucruri. Ca și în cazul în care este centrat, dacă e de pe la dreapta, dacă e inverted-- tot aceste lucruri se răcească. Orice lucruri stilistice pe care le face în text, acest lucru este ceea ce vreau să spun cu atribute. 

Și apoi două lucruri principale să știți este că selectors-- două din factors-- principal sunt ID-ul, care este unic. Puteți utiliza numai că pentru un singur lucru. În caz contrar, o să țipe la tine. Și când l-am defini într-un fișier CSS, se va fi ID-ul hash și apoi ceea ce atribute ne dorim. Îți promit că vom du-te printr-un exemplu. Va face mult mai mult sens. 

Clasă se poate referi la mai multe blocuri. Astfel încât să puteți avea dvs. primul și al treilea paragraf au același tip de atribute dacă le asociază cu aceeași clasă. Și când le definim în CSS, facem o clasă punct, cu clasa de a fi indiferent vrei sa fie numit. 

Deci, eu știu acest lucru este corect acum foarte abstract. De aceea mergem cu codul. Știu că voi iubi că, și toate sunt O să mă ajute pentru că aceasta este pagina ta web. Aceasta este pagina web secțiune nostru, băieți. Deci, sunt acolo orice întrebări înainte de a I opriți PowerPoint, sau nimic Vrei pentru a derula înapoi pentru înainte de a începe de codificare? 

Audiența: Când spui tag-uri de meci, vrei sa spui selectoare sau tag-uri? ALLISON Buchholtz-AU: Aveți posibilitatea să cred că de ei ca același lucru. E doar cuvinte diferite. Adică, cum ar fi selectoare. Dar, de asemenea, selectoare harta de tag-uri. Astfel încât să puteți gândi la ele ca efectiv același lucru. Îți promit că va face mai mult sens atunci când am cod. Ceva de la PowerPoint sau orice întrebări chiar acum înainte suntem de fapt a crea pagina secțiune nostru? Jucătorii gata? Rece. 

Așa că am început o. Permiteți-mi să crească fontul pentru voi. OK, deci chiar acum, doar avem o oasele goale pagina web chiar aici. 

Avem unele HTML. Avem niște afara, pe care noi vezi aici ca pagina web exemplu. Unele din titlu, unele font. Acestea sunt tag-uri, OK? Așa că atunci când am să spun închideți tag-urile tale, vom vedea aici acest cap de suport este de deschidere ta tag-ul, și această categorie / Social este o închide, bine? 

Deci, ați putea gândi la acest lucru ca bretele dvs. în cazul în care condițiile dvs. sau pentru bucle. Dacă aveți o de la început, vrei o la sfârșitul anului. Acesta va funcționa în continuare cele mai multe ori dacă nu aveți o etichetă închis, dar cele mai bune practici este aproape etichetele. 

Deci, în acest caz, să schimbe acest lucru. Vom avea secțiune șapte. "Secțiunea pagină de web." Deci, eu sunt doar de gând să schimbe acest lucru. 

Și dacă mergem pe aici și ne-am Trebuie să reload-- salva și reload-- observăm că aici a schimbat, nu? Rece. Deci, aceasta schimbă titlul. Aceasta este ceea ce e de pe fila. 

Deci, aceasta este un fel de Cautati un fel de plictisitor. Nu știu despre voi. Cred că ne dorim altceva aici. 

Deci, ce putem face este în afara este doar acolo. Să facem un fel de corp. Deci, avem unele organism aici. Intotdeauna mi-am făcut deschis și închide Tag-urile mele pentru a începe, în același fel în care eu fac bretele. Ah. Stai, ce? 

Audiența: [inaudibil]. ALLISON Buchholtz-AU: Ah. Voi m-ai prins. Bun loc de muncă. Stea de aur. 

OK, deci avem unele organism aici. Și acum să începem adăugând un text. Astfel încât să aibă un cuplu diferit opțiuni pentru adăugarea de text. Avem lucruri, cum ar fi antetele. Avem doar text normal. Așa că hai să începem cu o lovitură de cap. De fapt, dacă vreți pentru a trage HTML W3 Școala lui, poti fel de te uiti in jur și dacă e ceva mai ales că doriți să încercați cu această pagină web, putem face asta. Deci, în acest caz, hai să facem niște h1. Deci, h1 este ca cea mai mare antet. Acesta vă va oferi ceva care este foarte mare și îndrăzneț. 

Și în acest caz, ceea ce ne dorim pentru primul text de pe pagina noastră web? Orice. Voi o să creeze acest lucru. Mă duc să tastați. Audiența: Bine ai venit. 

ALLISON Buchholtz-AU: Bine ai venit. OK, așa că, dacă am salva și reîncărcați noi, avem o mare bun venit mare. Deci, doar astfel încât să puteți vedea diferențe, hai sa facem ceva pe H6. Ce ne dorim chiar aici? Dreapta? 

OK, deci doar astfel încât să puteți a se vedea diferența. Da, Sublime. Deci, dacă observați, h1, foarte, foarte mare. h6, cum ar fi îndrăzneț, dar mult mai mic, și ai totul în între. Deci, ai putea avea H2, H3, H4. Iar acestea sunt doar antetele, așa că, dacă sunteți încercarea pentru a crea o pagină web care are diferite secțiuni, poate doriți să utilizați anteturile acolo pe undeva. 

Rece. Deci, vom adăuga unele mai multe lucruri în corpul nostru. Văd că ar fi un fel de rece dacă am avea o imagine. Mă simt ca și cum toată lumea ar putea folosi, poate, o imagine iepuras dragut chiar acum, așa că vom găsi o primă imagine de iepuras. 

Nu știu dacă voi avea nici preferințele pe care o dorim. Nu aveți preferințe? Asta aici? Down. OK. Că unul este. Cele mai bune alegeri. 

OK, deci vom vedea imaginea noastră. Uită-te la asta. Uită-te la chestia aia adorabil. Cum ar putea să fii trist pe o luni cu asta? 

Deci, noi suntem doar de gând pentru a copia URL-ul imaginii. Și ceea ce vrem să facem este, hai să spune ca avem unele p pentru alineat. Mergem să spunem "Uită-te uita-te la iepurașul drăguț. d'awwww. " Îmi place iepurași mele. Am un iepuras la domiciliu. Mi-e dor iepuras mea. Deci, ce vom do-- Nu știu dacă voi dori to google asta: dar cu HTML, cum s-ar putea să includeți o imagine? Literalmente, dacă Google "Includ imagine HTML," De ce nu voi spune-mi ceea ce ar trebui să fie această etichetă? 

Audiența: img source-- 

ALLISON Buchholtz-AU: img source-- Audiența: --equals-- ALLISON Buchholtz-AU: --equals-- Audiența: --quote-- da. ALLISON Buchholtz-AU: Perfect. Lovely. A se vedea, generarea de MySpace, nu? Audiența: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. A fost o nebunie. OK. 

Deci, asigurați-vă că primesc acest drept. Rece. Deci, acest lucru ar trebui să fie aici. Și apoi, dacă vom reîncărca, ne-am nostru iepuras pe pagina Nu este adorabil? 

Acest lucru este atât de drăguț. Ati ales un mare, mare fotografie,. Eu l săpat. 

OK, deci avem acest iepuras adorabil acum. Noi am fost capabil de a adăuga un imagine, la fel ca asta. Deci, practic, dacă nu există nici o imagine pe care doriți să le adăugați la pagina dvs. de web, puteti adauga la fel ca aceasta. Un alt lucru ar fi dacă ați salvat imaginea în același folder ca și acest fișier, puteți pur și simplu scrie indiferent de numele pe care imaginii este loc de a avea un link web. 

Ar fi încă în ghilimele. Ar fi la fel ca dacă am fi numit asta: în cazul în care această imagine a fost salvată în folderul cu acest fisier HTML că eu sunt editarea și-l a fost numit bunny.jpg. Am putea face, de asemenea, că și ar apărea. Cu toate acestea, nu am această salvate în fișierul și vreau să păstreze iepurașul, așa că vom păstra legătura. 

Audiența: Ce este rabbit.org? 

ALLISON Buchholtz-AU: rabbit.org. E o appropriate-- uite, puteți să-l adopte. Adoptare. bunny.jpg. Vreau să adopte acest iepuras. Oh, Doamne, e așa de drăguț. 

OK, deci am adăugat antete. Am adăugat o imagine. Evident, am adaugat un text aici, nu? Dacă am vrut să adăugați alte texte, ne-ar merge așa. Deci, acesta este un alt alineat. 

Și noi spunem "acest lucru este un alt alineat." De asemenea, eu sunt un abecedar oribil, așa că am putea misspell lucruri. Doar FYI. 

Deci, avem un alt alineatul aici, nu? Deci, poate că vrei să faci ceva un pic mai interesant decât au tot textul dumneavoastră, cum ar fi aliniat la dreapta. Poate vrei pana in centru text, OK? 

Deci, dacă cineva vrea să folosească cele calculatoare la îndemână în fața ta și spune-mi cum te merge pana in centru acestui text, 

Audiența: p alin. 

ALLISON Buchholtz-AU: Deci, p align este egal cu "centru". A făcut o ucidere, băieți. Voi toți trebuie să-și intensifice. Si ne-am "Acest lucru este centrat." Iar acum ne-am axat ceva. 

În același mod, dacă vreau aliniat stânga, ai putea face egali align stânga, align este egal cu dreapta. În totalitate până la tine. Dacă am făcut aici, atunci aceasta should-- acum e corect aliniate. 

Audiența: Allison? De sursa imaginii, de ce nu este acolo aproape de sursa img? ALLISON Buchholtz-AU: Îmi pare rău. Aceasta ar trebui să fie acolo Acum ești bun. Acum suntem bine. Audiența: Nu ai pentru a închide acolo, sau nu? ALLISON Buchholtz-AU: Ei bine, așa img sursă, acesta este doar-- cu imagine, e doar văzută ca un element, în timp ce dacă observați pentru restul dintre acestea, avem unele tag apoi informații care se referă la și apoi o etichetă de închidere. Dar cu imagine, totul e doar un fel de-sine stătător. Rece. Deci, voi știți cum să creați o antet, știi cum să introducere a textului, Știi cum se pune o imagine acum, poti alinia lucrurile. 

Un alt lucru pe care îl ar putea dori să fie capabil să facă este de a crea o listă în CS-- suntem fel de a intra în PSET de săptămâna viitoare. Lucrurile care ne preda de obicei, în această săptămână merge foarte bine cu PSET de săptămâna viitoare, așa că suntem un fel de amestec, se suprapun lucrurile aici. Dar aceasta va fi util pentru săptămâna viitoare. 

Deci, dacă am vrut să creeze ceva listă, cum am putea face asta? Nu puteți răspunde la această dată. Altcineva trebuie să. Nu e greu, băieți, promit. Google "lista neordonata HTML." Ce-a fost asta? 

Audiența: [inaudibil]. ALLISON Buchholtz-AU: Corect. Deci, vrem comandat sau neordonate? Să facem un neordonate. Deci, avem unele ul, care standuri pentru neordonată Listă. Și ce avem pentru fiecare element? Are are nevoie de propria sa etichetă? Putem începe să scrie lucruri? 

Audiența: Li. 

ALLISON Buchholtz-AU: li. Deci, ce este pe lista noastră de gând să fie? Ce vrem aici? Tocmai am făcut nume. Fă Jacob. 

Alimente Rabbit: audienta. 

ALLISON Buchholtz-AU: produse alimentare Rabbit. OK Îmi place asta. Alimente iepure. 

OK, deci avem morcovi. Îmi place această temă iepure. Am foarte mult săpat. Audiența: De fapt, m-am gândit că Jacob ar fi un legit. ALLISON Buchholtz-AU: Jacob? Jacob este mancarea de iepure. Dacă ați văzut lui Jacob fotografie de ore de birou, s-ar putea fi crezut el a luat atacat de un iepure ucigaș. 

Audiența: Eu am un iepure acum. Eu am un iepure ucigaș acum. 

ALLISON Buchholtz-AU: Glumești? 

Audiența: Voi secțiunea următoare aduce. Am avea. 

ALLISON Buchholtz-AU: Acest lucru este ridicol. Oricum. 

Audiența: [inaudibil] 

Audiența: Da, Proctor meu are un iepure la fel de bine. 

ALLISON Buchholtz-AU: Vreau un iepure. OK, cine aduce un adevărat iepure la secțiunea următoare, numărul total de puncte spiridus. Audiența: [inaudibil] Audiența: Oh, asta nu e adevărat. E un iepure împăiat. 

ALLISON Buchholtz-AU: Oh Da, putem închide acestea. Pare rad. Audiența: Contează de fapt? ALLISON Buchholtz-AU: nu. Cu cele mai multe dintre aceste lucruri, tu nu închideți tag-ul, 99% din nimic moment prost se întâmplă să se întâmple, dar este stil bun, de asemenea. Iacov. Și avem salata verde. Audiența: Pentru link-uri, este foarte important. ALLISON Buchholtz-AU: Hm? Audiența: Pentru hyperlink-uri. ALLISON Buchholtz-AU: Pentru hyperlink-uri. Da, hyperlink-uri au nevoie de ea. OK, deci rămâne să vedem aici. Și avem la încheierea lista noastră. Și ne uităm la asta. Am all-- Jacob, chiar acolo. Alimente iepure. Îmi amintește de Bunnicula. 

Audiența: [inaudibil] ALLISON Buchholtz-AU: Aduc înapoi toate referințele vechi de școală astăzi, Nu sunt eu? Doar toate trimiterile vechi școală. În cazul în care au adus ca Gogurts sau ceva de snacks-uri. 

Audiența: Or Gushers. ALLISON Buchholtz-AU: Oh. OK. O să văd dacă pot urmări jos Gushers pentru săptămâna viitoare. Cred că pot face asta. Cred că am putea avea unele în birou. 

OK, deci ne-am acoperit o mulțime de diferite lucruri pe care le puteți face cu HTML, nu? Și, după cum puteți vedea, probabil, e nothing-- sperăm, nu prea intim-- dacă este, nu mă refer la să diminueze oricine. Dacă întâmpinați probleme, vă rugăm să vin să vorbești cu mine. 

Dar cea mai mare parte este doar uita la sintaxa, nu? Dacă doriți o lista neordonata, daca vrei un fel de listă, dacă doriți să se alinieze ceva sau format ceva, e vorba doar fel de a privi în sus sintaxa pentru HTML, nu? Și un lucru care e destul de rece, de fapt este dacă te duci sa-- să vedem, ceea ce este un site web frumos, care ne place? Oricine are orice site-uri favorite care sunt OK pentru a aduce on-line? Știi ce, hai să facem CS50. Asta e frumos și în condiții de siguranță, nu? 

OK, deci CS50 aici. Oh, uite, există o secțiune chiar acum. Daca iti place felul in care arata. 

Audiența: [inaudibil]. ALLISON Buchholtz-AU: Noi nu suntem de gând să faci sectiunea meta, băieți. Aceasta nu se întâmplă. Ar fi misto, dar noi nu o să o fac. 

Deci, ce părere aveți putut faceți dacă vă place modul în care aceasta funcționează este posibil întotdeauna dreptate faceți clic pe orice pagină web care vă place și poți să faci View Page Source. Acesta va aduce tot HTML. Și aceasta este de fapt un foarte bun mod de a stilul pagina web proprie. Du-te la o pagină web pe care le place foarte mult si uita-te la HTML și dau seama cum au făcut-o. 

Și literalmente, atâta timp în timp ce cita lucruri, atâta timp cât tu nu ești doar fura de la oameni, e OK. Mai ales pentru CS50 [? finanța?], suntem un fel de voi aștepta pentru a obține inspirație de la alte site-ul. Deci, nu ezitați. Uita-te prin site-uri care credeți că sunt într-adevăr destul de și dau seama cum se folosesc HTML și CSS pentru a face aceste lucruri. 

Deci, după cum vedeți aici, nu e evident cum ar fi link-uri și avem o clasă aici. Avem un link aici. Avem o listă. Probabil că au unele poze pe aici pe undeva. 

Avem unele stil misto aici. Acesta este urmatorul lucru am de gând să faci. Deci, stil, ori de câte ori veți vedea aceste paranteze de stil, e CSS practic. Ben, ai avea o întrebare? 

Audiența: Ce este div? 

ALLISON Buchholtz-AU: div este doar un-- ceea ce este div? Audiența: Divizia. ALLISON Buchholtz-AU: Division. Da, e la fel ca separarea elemente diferite. OK, deci aici este ceea ce suntem de gând să meargă în viitor. Deci, acest lucru nu poate fi cel mai bun Stilul că, dacă observați avem HTML și stil în aceeași pagină, și ne-am dori de fapt să se separe cele, OK? Și, de fapt, lasă-mă să deschide o dreaptă pentru că aceasta ar trebui să fie PDF, așa că avem style.css. 

Deci, ce putem face aici este acestea sunt lucruri interesante, ca unii se estompeze și am putea încerca și de a face asta, dar mă simt ca și cum mi-ar mizerie ca pe zbor, așa că, va incurajam băieți la du-te încercați asta pe cont propriu, dar eu nu am de gând să o fac chiar acum. Deci, dacă voi, amintiți-vă, dacă te-a lovit vreodată set problemă, ceva coboară de pe partea. Ea are de a face cu estompeze și tranziția și fleacuri. 

Audiența: Și asta e tot CSS și HTML? 

ALLISON Buchholtz-AU: Toate CSS și HTML. Da. Astfel încât să puteți face o mulțime de foarte lucruri interesante cu CSS și HTML. Deci, cu minunat nostru Pagina web iepuras aici, ne-am sunt de gând să facă un pic bit de stil CSS cu ea. 

Deci, dacă aveți vreodată un stil foaie, pe care o avem aici, puteți apela doar style.css. Se poate numi cum vrei. Ceea ce este important este că vom pentru a face referire la ea în web.html aici. 

Deci, ce vom face este we-- așa că nu fac mizerie acest up-- vom lega aceste două fișiere împreună. Deci, în același way-- am de gând să elaboreze o analogie cu C aici. În același mod în care, dacă aveți unele library-- și ne-am cs50.h-- compilator nostru se leagă. Aceasta este doar o explicit link-ul din partea noastră. Deci, în același mod în care o facem distribuire includ unele fișiere, ceea ce Sunt pe cale de a scrie este doar HTML / CSS echivalent de asta. 

Suntem doar spun, OK, aceasta pagina web se va folosi această foaie de stil, OK? Deci avem link rel egală cu foaie de stil. Și apoi ne-am tip, css. Și apoi href egal. 

OK. Deci, toate acestea au făcut aici este să cred că de acest lucru ca acelasi lucru ca un hash includ. Evident, pare un pic mai mult complicat, dar în toate cazurile, este de fapt același lucru. Deci, aceasta este doar o legătură de o foaie de stil, e de tip text / css, și numele lui este style.css. 

Ceea ce este important să știți este faptul că pagina de web care lucrez chiar now-- web.html și style.css-- sunt în același folder. Pentru că în dosare diferite, aveți nevoie pentru a da rădăcină reală să-l sau calea spre ea. Dar, în acest caz, suntem o ține super-simplu și o să fie aici. Deci, dacă am face asta, am ceva lucrurile deja coada de așteptare până aici. 

Deci, avem unele organism, care se întâmplă să aibă culoare noastră de fundal, care acum este albastru deschis. Ne poate schimba dacă vrem, dar dacă îmi amintesc corect acest lucru, aceasta ar trebui să-l schimbe la albastru deschis. Și acum avem un fond albastru deschis. Și am avut here-- poate cineva aminti care unul este ID-ul de dispersie sau de clasă? 

Audiența: ID. 

ALLISON Buchholtz-AU: ID. Rece. Deci, ceea ce vrem să facem este care dintre aceste fonturi sau which-- vrem "Uită-te la bunny drăguț "a fi violet? Cred că vrea ca să fie purpuriu. Sunt destul de jos cu faptul că a fi violet. 

Deci, ceea ce faci este să faci ID-ul equals-- în acest caz I-am spus, ceea ce, destul de culoare aici. Am reîncărca. Dintr-o dată, e violet. OK, deci cu ID-ul, amintiți-vă aceasta trebuie să fie unic, așa că nu ar trebui să fie utilizați acest ID oriunde în altă parte. Dar cu clasă, așa cum ne-am aici cu un font destul de, Eu ar trebui să poată utiliza că oriunde vreau. 

Deci, hai sa facem asta aici. Deci, putem spune clasă este egal cu destul de font. Și dacă ne uităm acum, avem acest font misto destul de aici. Deci, poate că vreau să fac pe amândouă. OK, eu de fapt nu știu dacă acest lucru este de gând să lucreze, dar vreau să-l încercați. Și acest lucru este modul în care învăța CSS și HTML. Ești ca, stii ceea ce, vreau să încerc asta. Nu sunt sigur dacă se va lucra. Să vedem dacă funcționează. 

Și uită-te la asta. Acum e în purpuriu și este un font destul de. OK, deci aveți toate aceste diferite lucruri pe care le puteți face. Ai o intrebare? 

Audiența: Da. Ei bine, la fel ca culorile pe care îl utilizați sunt cuvinte. Există o modalitate de a face culorile cu hexazecimal RGB? ALLISON Buchholtz-AU: Puteți, de asemenea fă-o cu hexidecimal, cred. Da. Dar e un fel de frumos dacă Nu vreau să-i privi în sus. Puteți fi la fel ca, violet sau albastru. Audiența: Să sperăm că ei Știi ce înseamnă asta. ALLISON Buchholtz-AU: Corect. Așa că haideți să facem această citire sau Chartreuse. De ce ati alege vreodată Chartreuse? Este o culoare interesanta. 

OK, deci, evident, ne putem vedea se pot schimba lucrurile, dar ne-o dorim. Dacă ați fi dorit să create-- să zicem am vrut să creăm o altă clasă. Ce s-ar putea vreți să schimbați? În cazul în care trage W3Schools " Documentație CSS, Las cuvântul voi. Putem încerca și de a face ceva rece cu acest lucru în ultimele două minute. Pentru că am un fel de dat un Crash Course pe o mulțime de lucruri interesante pe care le puteți face. Dar, în cele din urmă, așa cum am spus, dacă doar experiment, veți învăța o mulțime. 

Audiența: Te-ai uitat în sus ca font? 

ALLISON Buchholtz-AU: Da, M-am uitat acel font. Deci, cum ar fi literalmente, m-am a mers sa-- ce am făcut? Am făcut listă de fonturi CSS, și apoi am făcut-o stivă font, iar apoi am fost ca, uite, aici sunt toate fonturile interesante pe care le puteți face. Și acolo a fost asta, așa L-am copiat în clipboard mea. Și apoi am fost ca, OK, rece, acolo mergem. Toate făcut. 

Audiența: Deci, tu nu trebuie să vă asigurați că că CSS știe despre ce font este. 

ALLISON Buchholtz-AU: Da. 

Audiența: Ce spune la sfârșitul anului? Cursiv? 

ALLISON Buchholtz-AU: cursiv. Da. 

Audiența: imagine de fundal. 

ALLISON Buchholtz-AU: imagine de fundal. OK. Deci, vrei să-mi spui cum se face acest lucru. Las asta. Eu doar tastând aici acum. Roata este în mâinile tale. 

Audiența: OK 

ALLISON Buchholtz-AU: OK. Ce fac? 

Audiența: Doing-- știu ce vine după acoladă. ALLISON Buchholtz-AU: OK. Deci, probabil in corp, am ar presupune, pentru că suntem a face cu imaginea de fundal. 

Audiența: Da, hai să facem asta. 

ALLISON Buchholtz-AU: OK. Audiența: OK, deci fundal colon, iar apoi ne-am au nevoie de o adresă URL de acea imagine. Poate pseudo-cod, care, pentru moment, poate. 

ALLISON Buchholtz-AU: Ce ai vrea sa-- Audiența: Mă gândesc ca un GIF. ALLISON Buchholtz-AU: A GIF? Asta va fi interesant. OK, la ce mă googling aici? 

Audiența: Nu, asta e alegerea ta. 

ALLISON Buchholtz-AU: De ce Nu we-- dacă e un iepuraș, Mă simt de parcă ar trebui să avem o gazon ierburi frumos sau ceva. 

Audiența: Meadow. O pajiște. 

ALLISON Buchholtz-AU: O pajiște? OK. Audiența: Or Rachel Maddow. ALLISON Buchholtz-AU: Aceasta o arata destul. Oh, e mic, totuși. Avem nevoie de o imagine de dimensiune buna. Să vedem. Oh, uite. Asta-i o pajiște frumoasă. Știi ce, îmi place asta. Să copiați asta. 

Audiența: OK, deci cred că e URL-ul, paranteze deschise. 

ALLISON Buchholtz-AU: OK, URL. 

Audiența: Atunci adresa. 

ALLISON Buchholtz-AU: OK. Este că tot ce avem nevoie? 

Audiența: Închide paranteze punct și virgulă, și apoi spațiu, cratimă fundal atașament colon fixă, și acoladă. 

ALLISON Buchholtz-AU: OK. Să vedem dacă asta funcționează. O să fie destul de rece în cazul în care o face. Sunt foarte emoționat chiar aici. Ea nu a funcționat. Mă întreb de ce. Audiența: Poate URL-ul trebuie să fie în citate. ALLISON Buchholtz-AU: Poate. Și acest lucru este modul în care învățăm, băieți. 

Audiența: Putem avea fundal culoare și imagine de fundal? 

Audiența: Nu. O înlocuiește pe celălalt. 

ALLISON Buchholtz-AU: Nu știu. Să vedem. Să-l verifica afară și a vedea. 

Audiența: Oh, poate, da. [Interpunerea VOCI] 

ALLISON Buchholtz-AU: OK, aceasta este obviously-- I [neauzit] aici. Deci, OK. Audiența: atașament fundal. ALLISON Buchholtz-AU: Ah. 

Audiența: OK, eu nu știu. ALLISON Buchholtz-AU: A Se pare ca aceasta ar trebui să funcționeze. Ești sigur că e de colon după URL-ul? 

Audiența: Nu, e punct și virgulă. ALLISON Buchholtz-AU: E punct și virgulă. Audiența: Am spus de colon? ALLISON Buchholtz-AU: Ai spus-o de colon. Audiența: Oh, nu. ALLISON Buchholtz-AU: Nu te duci. Audiența: Oh, stai, acum nu putem citi textul. ALLISON Buchholtz-AU: Acum nu puteți citi textul, dar avem imaginea de fundal. Mmhmm? 

Audiența: Are HTML sprijini conținut dinamic? Cum ar fi, ai putea redimensiona poza în funcție de dimensiunea ferestrei, sau este ca un CSS-- 

ALLISON Buchholtz-AU: Deci, CSS are de a face asta. Deci, dacă voi sunteți interesat în procesul de învățare avansate de CSS, Sunt co-predare a seminar pe CSS pe data de 7. Și promit că va fi mult mai în profunzime și face mult mai mult rece lucrurile din această secțiune. Și-mi co-profesor este ca numărul total de front-end maestru dev web. Asa ca va fi destul de rece, dacă doriți pentru a afla despre toate lucrurile reci care CSS pot face. 

Dar ceea ce avem aici cu atașamentul său de fundal fixed-- asa ca este ceva size-- fix dar puteți dynamically-- de fapt dacă ați văzut vreodată pagini web, ca cele mai multe pagini web bune vor face, atunci când reglați dimensiunea de browser-ul dvs., se ajustează fundalul sau cât de mult dă dovadă sau reformatată lucrurile, nu? Deci, asta e ceea ce noi numim poziționare relativă. 

Și CSS poate apuca de fapt, cât de mare dvs. lățimea browser-ul este sau cat de inalt este, și puteți poziționa lucruri în funcție de dimensiunile relative față de dimensiunile absolute. Și asta e evident mai avansat CSS, dar că este ceva ce se poate face. Dacă doriți să învățați mai mult, vin la seminarul meu. 

Astfel că este ceva ce se poate face. Și CSS poate de fapt do-- CSS și JavaScript, pe care o vom face în viitor week-- vă poate permite să modifica dinamic pagini fără a fi nevoie să le reincarca tot timpul. Și veți obține pentru a face unele chestii destul de cool. 

Deci, există un alt lucru că voi putea să doriți să faceți sau orice altceva doriți să explorați? Avem 10 minute ramase. De asemenea, putem pleca mai devreme, dar în cazul în care vrei sa faci ceva mai multe lucruri de web, putem, dar nu sunt O să te oblige să. Dar, de asemenea, putem mânca doar bomboane. Audiența: Selectați textul alb, astfel încât să puteți citi. ALLISON Buchholtz-AU: OK. Deci, în acest caz, ne dorim ceva p. Audiența: Ar trebui să o facem în corp așa că se aplică la întreaga pagină? ALLISON Buchholtz-AU: Da, putem, de fapt. Asta-i o idee bună. Deci, noi have-- faci Știi ce ar trebui să fim? Nu știu dacă putem face Culoarea textului. Am fost de gând să încerc și a crea o altă clasă aici. 

Audiența: Cum puteți obține astfel că aceasta are sugestii? ALLISON Buchholtz-AU: Deci, dacă voi sunteți interesat, acesta este un alt text editor numit Sublime. Tu ar trebui să poată instalați-l pe aparatul dumneavoastră. Uneori, aceasta devine un pic complicat. Dacă doriți ajuta cu asta, Sunt foarte fericit să vă ajute cu ea, pentru că gedit este mare și e minunat pentru că puteți să-l compilați în partea de jos, dar eu chiar ca Sublime pentru că e destul de și-l face lucruri cum ar fi auto-complete. 

Astfel încât să puteți simți cu siguranță liber la lasă-mă să știu dacă vrei să faci asta. Dacă tocmai ați google "Sublime text, "el de obicei are instrucțiuni despre cum să instalați pe diferite sisteme de operare. Este foarte cool, am cred că, în opinia mea. Deci, p. Cred că pot face doar text-- sau putem face doar de culoare este "alb". Acolo. 

Deci, ce am făcut aici este că am nu a schimbat tot textul. Dar p aici este doar un etichetă pe care o avem, nu? Această etichetă alineat. Așa că am creat doar un element de CSS care a spus, OK, nimic cu această etichetă p, face culoarea albă. 

Deci, dacă ai observat, a făcut acest alb și acest alb. Ea nu a făcut lista noastră de alb pentru că nu este asociată cu asta. Ai putea trece prin și ați putea say-- 

Audiența: Nu culoare de fundal. 

ALLISON Buchholtz-AU: Culoarea de fundal? 

Audiența: Contextul țeavă în culoare în cazul în care ați pus eticheta p. 

ALLISON Buchholtz-AU: OK. Tu o vrei alb? Audiența: Mmhmm. ALLISON Buchholtz-AU: OK. Acolo te duci. Audiența: Asta e ciudat. ALLISON Buchholtz-AU: Destul de rece, nu? Deci, dacă doar mizerie în jurul valorii de, ai de gând să învețe foarte mult. Și poate fi destul de rece. Cred că e cu siguranta mai mult plăcut decât, uneori, pentru că nu trebuie să așteptați pentru programul dvs. de a compila. Doar tu poate lovi Actualizează si tu esti ca, oh, uite, ea a lucrat, sau oh, eu sunt Probabil lipseste ceva. Și asta e ceva care este cu adevarat misto despre acest viitor o parte a clasei, este cu siguranță, eu cred, mai ușor de a verifica ca te duci de-a lungul calea față de a fi nevoie să scrie aceste programe lungi și care doresc și rugându- care funcționează la sfârșitul anului. 

Deci, cu asta, cred că voi toate par bune. Dacă aveți orice întrebări, ca întotdeauna, veni să vorbești cu mine, vino să-mi spuneți. Eu voi fi afară pentru următoarele 15 minute dacă doriți să discute despre nimic și totul. 

Așa că sper că guys-- noroc cu acest PSET. Termenul limită este vineri la prânz pentru că a fost lansat târziu. Așa că va fi, probabil, văzând o mulțime de voi, joi, dar sperăm că nu. Poate că va trebui făcut-o până atunci. Aș fi foarte mândru. 

Dar dacă nu, voi vedea joi. Puteți utiliza, de asemenea, o dată cu întârziere, care extinde aceasta până sâmbătă la prânz. Dar eu don't-- nu-i asa? 

Audiența: Halloween. 

ALLISON Buchholtz-AU: E Halloween, un, și b, Nu cred că va exista fie orelor de vineri. Deci, într-adevăr nu încercați și-l face de către Vineri, astfel încât să putem sărbători toți Week-end Hallow. Bine, am să vă văd săptămâna viitoare.