[Glazbom] ALLISON BUCHHOLTZ-AU: U redu, svatko. Dobro došli natrag u odjeljak. Dakle, naš plan za danas ide preko mnogo više web dev stvari. Ne znam koliko ste vidjeli svoje psets budući da je izdan ranije jutros. Ja bih kao i koliko ljudi su pročitali spec, ali vidim i kako ste imali sve o, kao što su, sedam sati gledati na to i to je ponedjeljak i vjerojatno ste imali klasu, Ja ću pretpostaviti da većina vas nisu. Ako imate, dodatne pohvale. Vi ste zapravo pomaže provesti jednostavnu web poslužitelj u C, što je potpuno novi pset, pa vi doći do biti zamorci. To će biti zabavno, divlja tjedna, ali mislim da će biti puno zabave i to će biti jako dobro iskustvo zapravo. Tako da se pripremite za da, u odjeljku danas, ćemo ići chmod, TCP / IP, i onda malo HTML i CSS. 

Na kraju, mi ćemo zapravo broj do jednostavne web stranice zajedno kako bi vam pomogli dečki vrsta dobiti više upoznati s tim. A onda, ako niste pokupili Vaši kvizovi, oni su ispred, ali ja sam prilično siguran svatko Ovdje ima svoj kviz. A i na toj bilješci, rješenja nisu se još, ali čim smo finish-- sviđa, Posljednjih nekoliko ljudi koji uzimaju svoje quizzes-- oni će biti gore. Ako imate bilo kakvih pitanja U međuvremenu, slobodno me osobno e-mail. Ja ću odgovoriti sa svojim pojedinca pitanja, kao što sam uvijek. 

Dakle, na toj bilješci, chmod. Tako je u osnovi sve vas trebate znati o chmod je da se koristi za promjenu Dozvole datoteka, zar ne? Dakle, to je samo neki sustavi ga je nazvati promijeniti ovlasti, kao što se ovdje piše. A ako ste ikada željeli vidjeti dozvolama datoteku ima, umjesto da samo radi Je li, možete učiniti ls -l. l stoji za dugo. 

Tako ćete napraviti duge liste svega, i to će vam dati mnogo detaljnije informacije o svakoj od vaših datoteka. I vidjet ćete something-- sam će preskočiti naprijed za second-- ali vidjet ćete nešto slično da gornji red ima za svaku datoteku. A mi ćemo proći kroz što to znači. 

Tako je u osnovi, za promjenu Vaši datoteka dozvole, samo želite koristiti chmod. Možete misliti da je to kao i svaki drugi UNIX nazvati poput ls ili CD-u ili sitnica. To je samo neka vrsta drugog poput poziva. 

Dakle, radimo chmod a onda ćemo imaju tri znamenke tipično. Postoji nekoliko načina za napraviti da, od kojih je jedan ćemo ići preko. Ali obično, imat ćete tri znamenki u rasponu 0-7 svaki put. 

Dakle, jedna stvar je da postoje tri različite dozvole da mi može dati svaku datoteku. I to je čitljiva, što je zastupa r, koji će smisla u malo; w, koji je moguće pisati; i izvršna, što je x. Znam da e on, izvršna, možda ne najviše smisla, ali mi to predstavlja s x. 

I što se događa onda je svaki od njih također imaju zastupljenost broj. Dakle, imamo 1, 2 i 4. A u osnovi ono što se događa svaki od ova tri broja Ovdje odgovara drugačiji set korisnika da ti dozvole odnose se. 

Tako možete misliti da je prvi broj odgovara stvarnim korisnika odnosno vlasnik datoteke, drugi Broj će odgovarati skupini, a posljednja se odnosi na svijetu, u redu? Dakle, što se događa je zapamtiti oni numbers-- r je 4, m je 2, x 1, zar ne? This-- ako zaključimo ovih gore, koji vam daje taj prvi broj da mi ulaz u našoj chmod. 

Dakle, u ovom slučaju, ono što će taj broj biti? Bilo bi 4 plus 2 plus 1, što je 7, zar ne? I u ovom slučaju, to nemaju ništa, pa to upravo ovdje bi prevesti na chmod 700, u redu? A što da radi je da daje sve tih dozvole za vašu korisnika. 

Dakle, to znači da naš korisnik mogu raditi što god žele. Oni mogu čitati ovu sliku. Oni mogu izvršiti ovu datoteku. Oni mogu pisati na ovu datoteku. No, grupa i svijet, nema Dozvole god, u redu? 

Dakle, još jedan način da se napisati da, možemo ne Chmod tri znamenke, od kojih je svaki odgovara bilo zbroju ili da specifična skupina, specifičan podskup. Ili možemo učiniti zapravo još jedna stvar. Držite se. Mi možemo učiniti nešto s njima ovdje. 

Kako mnogi od vas vidio primjer gdje je bilo kao da chmod plus x? Jeste li vidjeli da je u predavanju, mislim? Tako stoji za sve. To znači dati svim korisnicima, što sam zaboravio staviti ovdje. 

No, plus x, ako mi primijetiti ovdje, ako radimo da chmod-- ono skupinu smo govori o plus dozvole želimo im dati. Dakle, to može biti plus ili minus. Plus dodaje dozvolu. Minus oduzima dozvolu. Prilično intuitivno, mislim. 

Dakle, plus x znači chmod. Dakle, mijenjati dozvole svih ljudi ako je to A- dodati dozvole. A x-- to znači što dopuštenje smo davanje svima. Čitati, pisati, ili izvršiti? 

PUBLIKA: Izvršite. 

ALLISON BUCHHOLTZ-AU: Izvršite. Dakle dajemo sve korisnike dopuštenje za izvršavanje ove datoteke, OK? Pa što ako smo htjeli napraviti da s numeričkom obliku? Pa sjetite se s numeričkom, želimo tri broja. 

PUBLIKA: 4. ALLISON BUCHHOLTZ-AU: Što je to bilo? PUBLIKA: 4. ALLISON BUCHHOLTZ-AU: Nije 4. PUBLIKA: 0, 0, 4. ALLISON BUCHHOLTZ-AU: Pa, želimo to dati svim korisnicima, zar ne? Tako ćemo imati broj u svaki utor. To će biti Isti broj u svakom utor jer mi samo želimo dati svatko izvršne dozvole. Dakle, izvršna je 1, ali na pravom putu. 

Dakle, ako nismo chmod 111 kako bi biti ekvivalent chmod plus x. Je li to smisla svima? Idemo proći par primjera. 

Tako veliki takeaway ovdje nije ovdje, ali samo znači dati svim korisnicima. u je, ako baš želite dati ili oduzeti posebno dopuštenje od korisnik ili vlasnik. g je za skupinu, tako da je srednja znamenka. I onda drugi možete sjetiti kao što je svijet, tu posljednju znamenku. 

Dakle s tim, mi ćemo ići na primjer, jer se osjećam kao primjere i uvijek bi te stvari lakše razumjeti. Tako rwx-- smo prošli kroz this-- mogao biti predstavlja kao 700. To je primjer smo pogledali na više od slike. Tako chmod 444 na nekoj datoteci će dati ono dozvole? Bili ste jako bliski. PUBLIKA: čitljiv svima. ALLISON BUCHHOLTZ-AU: čitljiv. Dakle čitljiv svima, zar ne? A što je onda još jedan način za to? Ako želimo napraviti chmod s bilo r-a ili W-a, plus i minusa, što bi taj poziv izgledati? To će biti chmod što? 

PUBLIKA: plus r. 

ALLISON BUCHHOLTZ-AU: plus r na 5. U redu, tako da je to isto kao i ovaj, samo dva različita prijevodi na istu stvar. Dakle s tim, imamo ovo. Dakle, želim ti dečki pokušati i pisati ove vrste u suprotno. 

Tako je s chmod 555, što bi to bilo? Bi li to biti plus ili u plus ili sitnica? Za u plus x, daj mi tri broja. I onda mi reci o čemu dozvolama mi zapravo davanje i tko? 

Dakle, ja ću ti dati dva dečki minuta da rade na tome. Slobodno razgovaraju jedni s drugima. Za one od vas koji je došao u malo kasno, nema slatkiša i košulje. Mi smo tri košulje lijevo, i imamo Kit Kats i zvjezdana prašina. Dakle, slobodno se zgrabiti neki u ovom malom interludij. 

Također, posljednji je lukav. To je dva chmods za posljednje. Zapravo, dopustite mi zatvoriti vrata dok su ti dečki rade na tome. Candy je uvijek potrebno u ponedjeljak poslijepodne. 

U redu, tako da chmod 555. Ono što je još jedan način na koji smo mogli napisati to? Bilo koji ideja? Da. 

PUBLIKA: plus RX. 

ALLISON BUCHHOLTZ-AU: r plus RX. Želite li objasniti zašto bi se RX? 

PUBLIKA: Zato što imate 5, tako da je 4 i 1, tako da je pročitao plus izvršnu, i to je za sve. ALLISON BUCHHOLTZ-AU: Točno. Dakle samo da ponovim, 5 ovdje znamo kao zbroj 4 i 1, jer svaki broj u našoj trio je Zbroj dozvole za taj podskup, zar ne? Ili korisnik, skupina, odnosno svijet. Dakle, u ovom slučaju, znamo da 5 mora formirati i 4: 1. 

A 4 i 1 odgovaraju čitljiv i izvršna. Mi smo ga daju svima, tako da možemo napraviti chmod plus RX. I očito, samo smo otišli kroz pitanja tamo, tako da sada ova datoteka izvršna i čitljiv svima. 

Pa što je s drugom? Što bi broj za taj jedan biti? Bilo koji ideja? Samo naprijed. 

PUBLIKA: 100 [nečujan]. 

ALLISON BUCHHOLTZ-AU: 100. Točno. Dakle, želiš objasniti zašto 100? PUBLIKA: Zato što je za korisnik, tako da je na prvom mjestu. A onda x izvršne 1. ALLISON BUCHHOLTZ-AU: Točno. Dakle, mi smo izvršna odobravanje dozvole za samo korisnika. Dakle, u ovom slučaju, to bi bilo 100. I imam sve odgovore se na sljedeći slajd u slučaju pišete puno stvari dolje. 

U redu, tako da je ovo sljedeći zapravo učinio s dva chmods, možete to učiniti. Dakle, bilo tko imati bilo koji ideja kako možete dobili chmod 640 prepisivati na drugi način? Možete promijeniti korisnika, a zatim možete promijeniti skupina je moj savjet. 

Dakle, ako smo bili samo mijenjaju korisnik, što je ovo prvi ovdje, što bi naš poziv biti? Tako je korisnik u, zar ne? Dakle chmod polukružno plus što? Mmhmm? 

PUBLIKA: RW. ALLISON BUCHHOLTZ-AU: RW. Pravo, za čitanje i pisanje, jer pročitano 4, w je 2, koji zajedno kao zbroj 6. Tako smo dobili chmod u plus RW, i mi dobili naš prvi 6 tamo. 

Pa onda bi dobili 4, mi sada žele promijeniti svoje postavke grupe. Tako ćemo napraviti chmod g plus što? Što je 4? 

PUBLIKA: r. ALLISON BUCHHOLTZ-AU: r. Upravo. Tako smo daje vlasniku čitati i pisati dozvole a mi dajete čitanje grupe dozvole, što smo svi ovdje. Mmhmm? 

PUBLIKA: Ako možete napisati nešto, to podrazumijeva da ga možete izvršiti? 

ALLISON BUCHHOLTZ-AU: Vi Možete pisati something-- Ne vjerujem da je to znači li to može izvršiti. Cool. Dakle, to je sve što smo upravo prošli kroz. Dakle, na ovaj sljedeći, to je samo vrsta zajedničke slučajevi koje želite zadržati u pamet za postavljanje tvoj problem. To su obično dozvole da smo željeli da koristite. 

Tako je za 711, koji daje nas, naravno, korisnik sve dozvole, koji sklon smisla. A onda je izvršna skupina u svijetu, što ima smisla ako imate neki katalog, možete želite biti u mogućnosti da biste prošli u nju. Ljudi trebaju pristup. 

Za bilo non-PHP datoteke, idete koristiti 644, koji će učiniti što? Što to podrazumijeva, ili što Dozvole za to dati? Dakle, vlasnik može što? PUBLIKA: Čitati i pisati. ALLISON BUCHHOLTZ-AU: Čitati i pisati. A onda skupina i drugih mogu samo čitati, zar ne? A onda chmod 600 za bilo PHP datoteka koje koristite, Vaš vlasnik, opet, mogu čitati i pisati na njega ali svi drugi samo vrsta blokiran. 

Dakle, to će zapravo biti korisno kada da dođete do problema postaviti sljedeći tjedan u kojem ti si zapravo izgradnju web stranice. Dakle, ako ste ikada naiđete na bilo čudno problemi gdje se ne učitava dobro, možda vam treba dodati izvršnu dopuštenje, ili možda trebate pročitati ili pisati dozvolu. Male stvari koje imaju tendenciju da putovanje ljudi gore, ali to je vrsta kao go-to kada početi idući tjedan pset. I ja bih vam dati više savjeti o ovotjednom pset, ali ja još uvijek gledati na to jer to je bio objavljen jutros. Ali ti me e-mail, ja ću sam gledao na to kad sam odgovoriti sutra. 

Dakle, sada je sve dobro s chmod? Bilo zadržavali pitanja? Prilično jednostavan. Samo vrsta praćenje onoga čitati, pisati i izvršavati brojevi su je vjerojatno najteži dio. 

Tako je s TCP / IP, svih tih protokola, vrsta kao što su sa svojim podatkovnim strukturama prošli tjedan, to je mnogo više važno vrsta dobili viša razina intuicije od njih. Ovo nije CS143 kamo idemo vas pitati za provedbu mrežu, tako da ćete biti u redu ako se ne razumijem gnjidama istrajan svih protokola. Ono što je važno je da shvatite vrsta kao što oni predstavljaju i zašto su važne. 

Dakle, TCP / IP, naravno, da je Transmission Control Protocol ili Internet Protocol, koji je zapravo samo skup zakona osnovi ili standardi koji govore podataka kako treba postupati, kako to treba biti paketiziranog, prenose, i dobio. Tako je u osnovi, kao što je to kaže ovdje, povećava šanse da su podaci dobiva gdje ga želite doći do. 

Siguran sam da ako ti dečki otišli u Predavanje ili ga gledao na internetu, On has-- Ne znam ako on to učinio ove godine, ali znam da je prošle godine, imao je Demo gdje je imao sliku Rob i on ga dijeli na četiri i stavite ga u kuverti i pokušao ga dobiti preko Sandersa. A možete vrsta mislim o tome na taj način. To je samo skup pravila koja reci podatke kako doći negdje i omogućuje vam znati ako što nedostaju podaci, na isti način na koji ako ste uzimanje više stranica bilješki a možete ih označiti sa stranice 104, str 204, a ti se vratiti na studij kasnije a ti nedostaju something-- ne možete naći stranicu 304-- znate nešto nije u redu, pa vas možete pogledati kroz svoje bilješke ponovo ili zamolite nekoga da vas ponovo poslati Predavanja iz tog dana. Isti način s podacima na internetu. Ako ja tražim nešto od nekog poslužitelja i to treba poslati je u više paketa, Vjerojatno će se broj to na neki način, neka ja znam koliko sam trebala primili, i reci mi, oh, ovo je jedna od 10 ili je to jedan od 10.000. Na taj način, kada idem ponovno sastaviti svi dijelovi zajedno, Znam da ako nešto nedostaje i ja mogu tražiti da se ponovno. Znači li to smisla? Samo skup pravila. U svojoj osnovi, postaviti pravila, u redu? 

Tako smo i razgovarali malo o lukama. To je zapravo samo standard koji vam omogućuje da znate što tip podataka se prenosi u tim paketima. Ako ćemo ići s našim omotnice primjer, mi ne znam da je slika Rob tamo, osim ako mi to napisati na vanjskoj strani omotnice našeg. Dakle priključci su u osnovi ista stvar. To je samo način da se shvatiti što Vrsta prijenosa podataka. 

Dakle, imamo sve najčešće one ovdje. Dakle 21-- su također vrsta poput dobrih stvari koje treba znati. To je vrsta jednostavan kviz pitanje. Budite kao, što to port 80 učiniti? Ili, što se luka 443 učiniti? Dakle, dobre stvari znati. 

Tako imamo ovdje, 21 je datoteka protokol za prijenos, pa samo pravila koja reguliraju prijenos datoteka. 25, nešto što sve to koristiti previše, je e-mail. 53 je naziv domene Sustav, koji je u osnovi Upravo vrsta pretraživanja za IP adresa naziva domene. 

Dakle, ja sam prilično siguran da je spominje u predavanju, ako vas ići na nešto slično google.com, ima IP adresu koji je povezan s njim. To nije zapravo google.com. I tako je 53 luka koji zapravo traje briga o vrsti prevođenju u tu IP adresu za vas. A onda 80 i 443 su vrlo česte. Ili ste vašu web stranicu ili imate svoj sigurne web stranice, koji je mnogo web stranicama prijenos preko sada. 

Dakle, to je vrsta visoka razina Pregled protokol prijenosa. Ne vidim puno više u dubinu. To je vrsta cool stvari ako ste zainteresirani. Postoji mnogo resursa. Wikipedija je zapravo vrlo dobar stranica. Tako sam se gledajući ga samo malo prije, pa bih visoko preporučiti gleda na to, ako ste zainteresirani ili uzeti 143 u dvije godine, jer Mislim da je svake druge godine. 

Tako se na kraju toga, mi smo govorimo o web stranicama i HTTP, što je zapravo naša sljedeća tema Danas prije nego što idemo u HTML i CSS i zapravo možete kodirati do web stranice. To će biti zabavno. Imat ćemo slike zeko i to će biti sjajno. 

Dakle HTTP, kao što možete vidjeti ovdje, je jedna od lijepih akronima za ovaj tjedan, što je Hypertext Transfer Protocol. Pa opet, to je samo jedan set pravila koja upravlja hipertekst prijenos, u ovom slučaju. Dakle, najbolji način da saznate o tome je samo vrsta da ga razbiti u ove pojedinačne riječi jer ima puno riječi na zaslonu tamo. 

Tako ćemo početi s hiperteksta. Dakle, "hiper", možete misliti "Gore", kao što je super tipa stvar. Dakle, to je zapravo samo Tekst poduzeti kako bi se sljedeći nivo, pa to je kao super tekst, kao i sljedeći tekst. Dakle, to je u osnovi samo tekst koji nam daje više podataka nego normalno tekst ne, u redu? 

Dakle, u ovom slučaju ovdje, ovo je hipertekst. To nam govori da imamo neki link koji ćemo, koja je cs50.net, koji Sada je cs50.harvard.edu. Ovi slajdovi su malo stara. I to će se prikazati to što je to, kao hipervezu, a onda stvarno cool web stranice. 

Tako da je tekst, što je malo Malo stvarno cool stvari u tamo. Na taj način možete povezati stvari i možete umetanje slike, a možete stil stvari. A najviše poznati stvar koja vas Dečki vjerojatno s hiperteksta je HyperText Markup Language, HTML, što je naravno sve webu da vidimo oko nas, odobrena s nekim CSS stilom bačen u. 

Ali ako je itko bio stvarno velik sa MySpace, Siguran sam da ste svi koriste HTML cijelo vrijeme stvoriti oni savršeni profili, zar ne? Osjećam se kao da bi moglo biti zastarjela referentni sada, ali bez obzira. Samo little-- vi nisu toliko mlađi. Neki od vas su stariji od mene. MySpace je još uvijek stvar kada sam bio mlad. Nisam toliko star. 

Uglavnom, HTML samo oblik hiperteksta. Dakle, hipertekst je samo tekst s dodano značajke. Dakle protokol za prijenos je vjerojatno više sumnjiv stvar za objasniti. Očito, transfer-- Samo prijenos podataka. Dakle, ili između klijenta, kao i Vaše web brat i poslužitelja. Tako je u osnovi jednostavno način internet funkcionira. 

Dakle, točno zahtjev Kako to rade, mi smo zapravo ide pogledati Primjer zahtjeva i odgovora. No, kako smo zatražili Informacije s poslužitelja i kako poslužitelja reagira na nas što je to protokol za prijenos upravlja. Dakle, zahtjev i odgovor imaju slijediti ove određeni skup pravila. To je standardizirana, tako da bez obzira na gdje ste putem interneta, to uvijek radi isto, u redu? 

Opet, protokol, postavite pravila. To je samo normalna interakcija na isti način da je profesor Malan govori o ako netko proteže svoje ruke, znate da je osnovna pristojnost do tvoje van i tresti svoju ruku. To je protokol, zar ne? 

Tako sam dati neki standardizirani zahtjev, što želim tresti svoju ruku, a ti dati neke standardizirane odgovor, koji je ili nije zahvaljujući ili možete probati i tresti moje ručno ili možda idete pokušati i šakom naletjeti me. I nemamo protokol za to. Ona razbija. No, ako svatko slijedi isti protokol, naravno, to ide puno više neprimjetno. Ljudi upoznaju jedni druge. Svatko je sretan. 

Tako je u svijetu interneta, svatko slijedi isti rules-- nešto bolje od društvenih normi. Ali s tim, mi ćemo tražiti na primjer zahtjev ovdje. Dakle, postoji taj mali ključ ovdje na dnu koji vam govori različite boje, ono što bi trebalo značiti. 

Dakle, bijelo je baš kao i vaše metode Zahtjev i protokol version-- tako Zahtjev metoda, verzija. A onda je to neki naziv polja i vrijednosti tog područja, koje ćemo ići u vrlo, vrlo kratko. Dakle, ovo je primjer zahtjev. To je poput mene se širi van, želeći da se predstavim. 

To je ono što klijent ili što vaš web preglednik će biti poslane na poslužitelj. Dakle, ovo je GET zahtjev, tako da je tražeći nešto od poslužitelja. I to je, naravno, HTTP i to je verzija 1.1. 

Dakle ostatak ovo ovdje je ono što mi zovemo zaglavlja, a dodatne informacije to nam daje bolju ideju ono što smo zapravo traži, ili informacije koje želimo dati poslužitelja koji bi mogli biti mjerodavne. Dakle Korisnički agent daje nešto više Opis on-- primjerice, ovdje, uvijenost / 7.24.0 zapravo događa reći poslužitelj koji smo pomoću Googlea Chrome kao naš pregledniku. Dakle, ako ste ikada čuli o ljudima koji govore o izradi aplikacija reagiraju na više preglednicima, to je nešto što se će koristiti, jer ako ne znam što preglednik Zahtjev dolazi, ne možete prilagoditi podatke za to. Dakle, u ovom slučaju, korisnik je samo davanje ovakvu identificiranja informacija o onome preglednik Vaš korisnički trenutno koristi, u redu? 

Pa onda imamo i domaćin, koji je gdje smo zapravo žele ići. U ovom slučaju, želimo ići apple.com, kupiti neke cool novih iPada ili tako nešto, možda slatka svjetla na našim spavaonica sobe. A naziv vrijednost na kraju je samo punila, samo opći stvar za vi vidjeti. To zapravo ne odgovaraju bilo ovdje. 

Tako možete imati onoliko puno ili onoliko malo koliko želite u svakom slučaju. Većinu vremena, to su izborni. To samo ovisi o tome trebate iz preglednika, iz svog korisnika u cilju ispravno dati zahtjev. Ili to ovisi o tome što vaš korisnika zapravo želi odustati na poslužitelj. Dakle, možda ćete imati mnogo, mnogo od tih imena zaglavlja polja ili možda samo imati par. Kao i kod mnogih stvari Ja sam rekao u ovom poglavlju, to stvarno ovisi o kontekstu kako ste koristeći ovaj. 

Dakle, ne da ima smisla za sve? Ovo je samo primjer zahtjev, zaglavlja, sitnica. U redu, tako da s tim, imamo neki odgovor. 

Opet, imamo status kod, protokol verziju, a zatim naziv polja i polja vrijednost kao i uvijek. Dakle, naš protokol verzija i naš status kod 200. U redu, što znači da, Da, sve je dobro prošlo. Evo što želite. 

Vrsta poslužitelja, sadržaj type-- da nam kaže, ok, ti ​​si događa da se neki tekst HTML. Ovdje je duljina njega i evo ono što bi trebalo učiniti s vezom. U redu, pa opet, ovisno na podacima koje ćete traži, ovisno o tome što poslužitelja želi vratiti k vama, možda ćete imati više od tih područja imena, možda imate manje. Totalno kontekst ovisni. 

A što se tiče tog statusa kod ovdje, naravno, 200 nije samo jedan možete imati, zar ne? Imamo puno statusnih kodova. Se bilo tko sjećati drugi koji smo spomenuli u predavanju? Mnogi od njih početi s 4. 

PUBLIKA: 404. 

ALLISON BUCHHOLTZ-AU: 404, što je? 

PUBLIKA: Datoteka nije pronađena? 

ALLISON BUCHHOLTZ-AU: Datoteka nije pronađena. Točno. Dakle, što je 403? PUBLIKA: Zabranjeni. ALLISON BUCHHOLTZ-AU: Zabranjeni. Pa što mislite to znači s chmods? 

PUBLIKA: To znači da vas nemaju dozvolu za čitanje. 

ALLISON BUCHHOLTZ-AU: Točno. Na neki način, ne morate dopuštenje za pristup, zar ne? Dakle, 404, 403. Tu je stvarno smiješno onaj koji uvijek uvesti svake godine da Trebao sam staviti ovdje, kao što je 413, što je sam čajnik. Možete google to. To je smiješno kao što je, kako je broj 413 i to sam čajnik. Koji Ne znam zašto bi ikada trebati da se na internetu, ali sam odstupiti. PUBLIKA: Možda ste čajnik. ALLISON BUCHHOLTZ-AU: Možda poslužitelj je čajnik. Tko zna? U redu, tako da smo o prijelaz u realnom kodiranje. Osjećam se kao da dečki idu odavde prilično brzo. 

PUBLIKA: Zašto to radi kažu "poslužitelj: dva puta? 

ALLISON BUCHHOLTZ-AU: Hm? Server dva puta? To je dobro pitanje. Nisam siguran. Ja ću saznati i Ja ću vas sve e-mail. 

U redu, bilo koja druga pitanja osim toga? Dobro? Cool. 

HTML i CSS, a sada smo doći do svih zabavnih dijelova. Dakle, kao što sam spomenuo prije, HTML je vjerojatno jedna od stvari ti dečki su najviše upoznati. Dakle, imamo Hypertext Markup Language. 

Najbolji način da saznate this-- Ne znam Za sva pripremljene slajdove ili ništa za vas dečki s HTML. To je zapravo o učenju sintaksu. A ako ste bili na MySpace dan, što bi ovaj dolje. 

Pa stvarno, najveća stvar je Samo u praksi i eksperiment. Jedan od velikih resursa bih Preporučujemo koristite W3Schools. Dakle, samo W, 3, a zatim Škole. Oni imaju puno resursi na HTML, CSS na, a oni zapravo imaju Split screen takve stvari gdje ću vam dati primjer koda. Možete gusle s njim, promijeniti i pritisnite Update, i to će vam pokazati što ga zapravo radi na web stranici. 

Dakle, ja bih visoko preporučiti pomoću toga. To je prilično cool. Nećete SEG greške ovdje kad stvari krenu po zlu. Ako ste uspjeli dobiti seg pogreške i HTML, dopustite mi da znam, jer sam ide se u realnom zaintrigiralo. Ali, to je stvarno cool, jer možete mijenjati stvari, možete ih vidjeti ažurirani uživo. I mislim da ćete dobiti puno više intuitivno razumijevanje HTML ako zapravo samo provesti neke Vrijeme eksperimentiranje s njom. Dakle, to je razlog zašto sam rekao, praksu i eksperiment. 

Google, iz ovdje na van, vjerojatno će biti jedan od vaših najboljih resursa i prijateljima. Ili Bing-- radim u Microsoftu, pa možda bih trebao reći Bing. No, prilično mnogo bilo što je samo će biti sintakse, tako da razumijevanje onoga što su oznake, understanding-- barem CSS-- kako promijeniti određene atribute. To će biti super korisna. 

Dakle, iako mi ne Za sva pripremljene stvari, mi imamo takve neke najbolje prakse da želimo ti dečki probati i pridržavati by-- odnosno, trebali pridržavati se do daljnjega. Dakle zatvoriti sve svoje oznake. Nadam se da su svi has-- znate što, ako se to nema smisla sada, Obećavam da će smisla kad smo kodiranja gore stranicu. No, zatvoriti sve svoje oznake. Dakle, ako ste ikada imati neki naslov koji je nosač, H1, nosač, pazite da Kad završiš s tim, zatvorite tu glavom. Potvrdi svoju stranicu s W3 Validator. Ako ne zatvoriti svoje oznake, možete dobiti neočekivano ponašanje. To će reći da je vaša stranica nije važeći ako ga pokrenuti kroz ovaj validator. Dakle, kada je u doubt-- a posebno na ovotjednom i sljedeći tjedan a pset-- na isti način na koji smo pitati da koristite provjeru 50 i stil 50, možete misliti o tome kao jedan od svojih čekova, u redu? 

Dakle, ako to ne prođe W3 Validator. To je nešto što će vas pristati na. Ili ti govorim pravu Sada, ja ću vas pristati na. Dakle, pobrinite se potvrđuje. To nije teško. Vi samo zalijepiti u kodu a to će reći bilo dobar posao ili ste nedostaje nešto na isti način koji stil 50 vam govori gdje ste zabrljati gore. 

I onda zadnja stvar se želite odvojiti Vaš označavanje, što je sve to HTML ili tekst, i vaš styling. Tako ćemo napraviti primjer to pravo nakon toga. Dakle, HTML i CSS trebao biti odvojeni. A mi ćemo se govori o MVC, što je model View Controller, sljedeći tjedan. Vi bi trebali vjerojatno naučiti o tome u predavanju Sutra, ako ste imali već naučili danas. 

I to je samo vrsta paradigma koja smo skloni koristiti prilikom izrade web Stranice odvojiti stvari. Možete misliti na isti način da smo skloni odvojene funkcije u C gdje smo razmotrili pronaći stvari. To je samo način da se učiniti vaš život lakšim. On odvaja iz atribute ili kod koji što bi se pomoću iznova i iznova, ali na taj način, da vrsta više čuva to lijepo i uredno. A ako želite promijeniti jedna stvar, možete ga promijeniti nakon i to se promijenilo svugdje drugdje. Dakle, to je više za svoj jednostavnost i fleksibilnost. 

Tako je s CSS, to je vrlo slično HTML, ali umjesto oznake da sam spomenuo upravo sada, mi koristiti ono što se zove selektora. A oni zapravo samo vrsta više povezati određenu oznaku u HTML s različitim atributima. A kad kažem atribute, mislim stvari kao što su boja fonta, font stil, boja pozadine, Boja vašeg teksta. Ti svašta. Kao i ako je usmjeren, ako je na desnoj strani, ako je inverted-- sve od tih dobrih stvari. Bilo stilske stvari što činite na svoj tekst, to je ono što mislim s atributima. 

A onda dvije glavne stvari koje trebate znati je da selectors-- dvije glavne factors-- su ID, koji je jedinstven. Možete koristiti samo to za jednu stvar. Inače, to će vikati na vas. A kad smo ga definirati u CSS datoteke, to će biti hash ID, a zatim ono atribute želimo. Obećavam da ćemo proći kroz primjer. To će napraviti puno više smisla. 

Klasa može odnositi na više blokova. Dakle, možete imati svoje Prvi i treći stavak imaju istu vrstu atributa ukoliko ih povezati s istom razredu. A kad smo ih definirati U CSS, radimo dot klasu, s klase što god Želite da bude imenovan. 

Dakle, znam da je ovo pravo sada vrlo apstraktno. Zato ćemo koda. Znam da dečki vole da, i svi ste vi će mi pomoći, jer ovo je vaša web stranica. To je naš odjeljak je web stranica, dečki. Dakle, postoje li bilo kakvih pitanja prije nego što sam isključite PowerPoint, ili bilo što želiš da pomicanje natrag prije nego što počnete kodiranja? 

PUBLIKA: Kad kažete utakmica oznake, misliš selektora ili oznake? ALLISON BUCHHOLTZ-AU: Možete misliti na njih kao na istu stvar. To je samo različite riječi. Mislim, kao i selektora. No, selektora i kartu za tagova. Dakle, možete misliti kako je njima učinkovito ista stvar. Obećavam da će to napraviti više smisla kad smo kodirati. Sve iz PowerPoint ili bilo kakva pitanja upravo sada, prije nego što je zapravo pravljenje stranice našeg odjeljka? Svi spremni? Cool. 

Dakle, imam jedan počeo. Dopustite mi da se poveća font za vas dečki. U redu, tako da sada, upravo smo gole kosti web stranici ovdje. 

Imamo neke HTML. Imamo neke zaglavlje, koje smo vidim ovdje kao primjer web stranice. Neki naslov, neki font. To su oznake, u redu? Pa kad mislim zatvoriti svoje oznake, vidimo ovdje ovaj nosač Glava je tvoja otvaranja tag, i to nosač / Glava zatvaranja, u redu? 

Tako da bi mogao misliti na to kako je Vaši aparatić u vašim ukoliko uvjetima ili vašem računu za petlje. Ako imate jedan na početku, Želite on na kraju. To će i dalje raditi većinu vremena Ako nemate zatvorenu oznaku, ali najbolja praksa je zatvoriti svoje oznake. 

Dakle, u ovom slučaju, neka je to promijenio. Mi ćemo imati odjeljak sedam. "Članak Web." Dakle, Samo ću da se to promijeni. 

A ako idemo ovamo, a mi reload-- moraš spasiti i reload-- možemo primijetiti da se ovdje to promijenilo, zar ne? Cool. Dakle, ovo mijenja naslov. To je sve što je na kartici. 

Dakle, ovo je vrsta potrazi vrsta dosadno. Ne znam o dečkima. Mislim da želimo nešto drugo ovdje. 

Dakle, ono što možemo učiniti je zaglavlje je upravo tamo. Idemo napraviti nekakvu tijela. Dakle, imamo neku tijelo ovdje. Uvijek sam to otvoreno i Zatvorim oznake za početak, na isti način na koji ja radim aparatić. Ah. Čekaj, što? 

PUBLIKA: [nečujan]. ALLISON BUCHHOLTZ-AU: Ah. Vi me nema. Dobar posao. Zlato zvijezda. 

U redu, tako da imamo malo tijelo ovdje. A sada počnimo dodajući neki tekst. Dakle, imate par drugačije opcije za dodavanje teksta. Imamo stvari kao što su zaglavlja. Imamo samo normalan tekst. Pa neka je samo početak glavom. Zapravo, ako vi želite podići W3 School HTML, možete vrsta pogledati oko sebe a ako postoji išta Posebno koje želite isprobati s ovim web stranice, možemo to učiniti. Dakle, u ovom slučaju, neka je samo napraviti neke H1. Dakle, H1 je kao najvišeg napadača. To će vam dati nešto to je vrlo velik i hrabar. 

I u ovom slučaju, ono što želimo Prvi tekst na našoj web stranici? Bilo što. Vi će stvoriti to. Samo ću upisati. PUBLIKA: Dobrodošli. 

ALLISON BUCHHOLTZ-AU: Dobrodošli. U redu, pa ako mi ga spasiti, a mi ponovno, imamo veliku veliku dobrodošlicu. Dakle, samo tako možete vidjeti razlike, neka je učiniti nešto na H6. Što želimo ovdje? Pravo? 

U redu, tako da samo tako možete vidjeti razliku. Da, Sublime. Dakle, ako primijetite, H1, vrlo, vrlo velika. H6, kao i bold, ali puno manji, a vi ste sve između. Tako da bi mogao imati H2, H3, H4. A to su samo zaglavlja, pa ako pokušavate izraditi web stranicu koja ima različite dijelove, Možda želite koristiti zaglavlja u tu negdje. 

Cool. Tako ćemo dodati još malo stvari u našem tijelu. Vidim da bi bilo kakav cool ako smo imali sliku. Osjećam se kao da svatko može koristiti, možda slatka kunić slika pravo o sada, tako da ćemo naći zeko slika na prvom mjestu. 

Ja ne znam da li vi imati bilo postavke na koje želimo. Imate li kakve postavke? Ovaj ovdje? Dolje. U redu. Taj jedan je. Dobar izbor. 

U redu, tako da ćemo pogledati našu sliku. Pogledajte kako. Pogledajte taj divan stvar. Kako si mogao biti tužan u ponedjeljak s tim? 

Dakle, samo ćemo kopirati URL slike. A ono što želimo učiniti je, neka je samo kažu imamo neku str za stavku. Idemo reći "Gledaj pogledajte slatka zeko. d'awwww. " Volim moje zeko. Imam zeko kod kuće. Nedostaje mi moj zeko. Pa što ćemo do-- Ja ne znam da li vi želite google this-- ali s HTML, kako se možda uključiti sliku? Doslovno, ako google "Su slike HTML" Zašto ne vi mi recite Što to tag bi trebao biti? 

PUBLIKA: img source-- 

ALLISON BUCHHOLTZ-AU: img source-- PUBLIKA: --equals-- ALLISON BUCHHOLTZ-AU: --equals-- PUBLIKA: --quote-- da. ALLISON BUCHHOLTZ-AU: Perfect. Lijepa. Vidi, MySpace generacije, zar ne? Publika: Neopets. ALLISON BUCHHOLTZ-AU: Neopets. Oh, u redu. Wow. Bilo je ludo. U redu. 

Tako bi bili sigurni da biste dobili to pravo. Cool. Dakle, ovo bi trebao biti ovdje. A onda, ako smo ponovno, mi imamo Zeka na stranici Nije li to divan? 

To je tako slatko. Odabrali ste veliku, veliku sliku. Ja sam ga kopati. 

U redu, tako da imamo ovaj divan zeka sada. Mi smo bili u mogućnosti dodavati sliku, baš kao što je to. Tako je u osnovi, ako postoji bilo koju sliku želite dodati na svoju web stranicu, možete ga dodati baš kao što je ovaj. Još jedna stvar koju bi, ako imate slike pohranjene u istoj mapi kao Na ovu sliku, možete jednostavno pisati bez obzira na ime tog slike je umjesto web link. 

To će i dalje biti u navodnike. Bilo bi to kao ako smo nazvali this-- ako je ta slika bila spremljena u mapu s ovim HTML datoteke da sam uređivanje i to zvao bunny.jpg. Također smo mogli učiniti i to bi se pojaviti. Međutim, nemam to sprema u datoteka i želim zadržati zeca, tako da ćemo zadržati vezu. 

PUBLIKA: Što je rabbit.org? 

ALLISON BUCHHOLTZ-AU: rabbit.org. To je appropriate-- izgleda, možete ga usvojiti. Usvajanje. bunny.jpg. Želim da usvoji ovaj zeko. Oh, Bože, to je tako slatko. 

U redu, tako da smo dodao zaglavlja. Dodali smo sliku. Očito, dodali smo neki tekst ovdje, zar ne? Ako smo htjeli dodati drugima tekstovi, mi bismo ići ovako. Dakle, ovo je još jedna stavka. 

A mi kažemo "ovo je još jedan odlomak." Isto tako, ja sam strašno bukvar, tako da sam se krivo stvari. Samo FYI. 

Dakle, imamo još jedan stavak ovdje, zar ne? Dakle, možda želite učiniti nešto malo zanimljiviji nego samo ima sve svoje tekst, kao i pravo usklađen. Možda želite središte tekst, u redu? 

Dakle, ako netko želi koristiti onima zgodan računala u ispred vas i recite mi kako ste će središte ovog teksta, 

PUBLIKA: p align. 

ALLISON BUCHHOLTZ-AU: Tako p align jednak "centar". On je to ubojstvo, momci. Svi vi morati pojačati. I mi imamo "Ovo je usmjeren." I sad smo nešto centered. 

Na isti način, ako vas Želite da poravnani lijevo, što mogu učiniti align jednakima lijevo, poravnanje jednako pravo. Totalno do vas. Ako sam upravo ovdje, onda je to should-- sada je pravo poravnati. 

PUBLIKA: Allison? Po izvoru slike, zašto ne tu u blizini izvora img? ALLISON BUCHHOLTZ-AU: Žao mi je. To bi trebao biti Sada ste dobri. Sada smo dobri. PUBLIKA: Ne morate ga zatvoriti tamo, ili ne? ALLISON BUCHHOLTZ-AU: Pa, tako img Izvor, ovo je just-- sa slikom, to je samo vidio kao jedan element, dok je ako primijetite za ostatak ove, imamo neku oznaku zatim informacije koje što se odnosi na te zatvaranje oznaku. Ali sa slike, sve je samo vrsta self-sadržane. Cool. Dakle, ti dečki znaju kako stvoriti zaglavlja, znate kako unos teksta, znate kako staviti sliku Sada, možete poravnati stvari. 

Još jedna stvar koja vas Možda želite biti u mogućnosti to učiniti je stvoriti popis u CS-- smo vrsta ide u sljedećeg tjedna pset. Stvari koje smo obično naučiti ovaj tjedan ide jako dobro s Idući tjedan je pset, tako da smo vrsta miješanja, preklapaju stvari ovdje. No, to će biti korisno za sljedeći tjedan. 

Dakle, ako smo htjeli napraviti neke Lista, kako bismo mogli to učiniti? Ne možete odgovoriti na ovaj put. Netko drugi mora. To nije teško, dečki, obećavam. Google "neuređen popis HTML." Što je to bilo? 

PUBLIKA: [nečujan]. ALLISON BUCHHOLTZ-AU: Točno. Dakle, želimo naredio ili neuređen? Učinimo neuređen. Dakle, imamo neku ul, koji zalaže za neuređen popis. I što imamo za svaki element? Da li to treba vlastiti oznaku? Možemo samo početi pisati stvari? 

PUBLIKA: li. 

ALLISON BUCHHOLTZ-AU: li. Dakle, ono što je naš popis će biti? Što želimo ovdje? Mi samo učiniti imena. Samo to Jakova. 

PUBLIKA: Rabbit hranu. 

ALLISON BUCHHOLTZ-AU: Rabbit hrana. U redu sam ovo sviđa. Rabbit hranu. 

U redu, tako da imamo mrkve. Sviđa mi se ova zeca temu. Ja sam to puno kopanja. PUBLIKA: Zapravo, mislio sam da će Jakov biti čitljiv. ALLISON BUCHHOLTZ-AU: Jakov? Jakov je zec hrane. Ako ste vidjeli Jakova fotografija iz radnog vremena, možda ste mislili da je dobio napadnut od strane ubojica zeca. 

PUBLIKA: Imam zeca sada. Imam ubojica zeca sada. 

ALLISON BUCHHOLTZ-AU: Jeste li me šalite? 

PUBLIKA: Ja ću se iduće poglavlje donijeti. Ja ga imam. 

ALLISON BUCHHOLTZ-AU: To je smiješno. U svakom slučaju. 

PUBLIKA: [nečujan] 

PUBLIKA: Da, moj Proctor ima zeca kao dobro. 

ALLISON BUCHHOLTZ-AU: Želim zeca. U redu, tko donosi pravi zeca na sljedećem poglavlju, ukupni pčelica bodova. PUBLIKA: [nečujan] PUBLIKA: Oh, to nije pravi. To je punjena zec. 

ALLISON BUCHHOLTZ-AU: Oh Da, možemo zatvoriti to. Izgleda Rad. PUBLIKA: Da li je to zapravo važno? ALLISON BUCHHOLTZ-AU: To ne. Uz većinu tih stvari, ne zatvoriti oznaku, 99% od vremena ništa loše događa dogoditi, ali to je dobar stil, previše. Tako Jakova. I mi imamo salatu. PUBLIKA: Za veze, to je jako važno. ALLISON BUCHHOLTZ-AU: Hm? PUBLIKA: Za linkova. ALLISON BUCHHOLTZ-AU: Za linkova. Da, hiperveza je to potrebno. U redu, da vidimo ovdje. I imamo blizu našeg popisa. I mi gledamo na to. Mi smo all-- Jakova, upravo tamo. Rabbit hranu. Podsjeća me na Bunnicula. 

PUBLIKA: [nečujan] ALLISON BUCHHOLTZ-AU: Ja sam vraćaju Sve stare škole reference i danas, zar ne? Samo su sve stare školske reference. Ukoliko su donijeli kao Gogurts ili za grickalice nešto. 

PUBLIKA: Ili Gushers. ALLISON BUCHHOLTZ-AU: Oh. U redu. Ja ću vidjeti ako ja mogu pratiti dolje Gushers za sljedeći tjedan. Mislim da to mogu učiniti. Mislim da bismo mogli imati neki u uredu. 

U redu, tako da smo pokriveni puno drugačije stvari koje možete učiniti s HTML, zar ne? I kao što vjerojatno možete vidjeti, to je nothing-- nadamo se, ne previše intim-- ako je, ne mislim omalovažiti nikoga. Ako imate problema, molim te dođi sa mnom razgovarati. 

No, većina od toga je samo gleda na sintaksi, zar ne? Ako želite neuređen popis, ako želite nekakav popis, ako želite nešto poravnati ili Format nešto, to je sve o samo vrsta gleda gore sintaksa za HTML, zar ne? I jedna stvar koja je prilično cool stvari je, ako idete to-- ćemo vidjeti, što je lijepa web stranica koja nam se sviđa? Bilo tko imati bilo kakvih omiljene web stranice da su u redu da bi se on-line? Znaš što, neka je samo to CS50. To je lijepo i sigurno, zar ne? 

U redu, tako da CS50 ovdje. Ma gledaj, postoji poglavlje upravo sada. Ako vam se sviđa način na koji to izgleda. 

PUBLIKA: [nečujan]. ALLISON BUCHHOLTZ-AU: Nismo će učiniti meta dio, dečki. To se ne događa. To bi bilo super, ali nećemo to učiniti. 

Pa što da li vi mogli učiniti ako vam se sviđa način to radi je možete uvijek u pravu kliknite na bilo koju web stranicu koja vam se sviđa a vi možete učiniti View Page Source. To će dovesti do sve HTML. A to je zapravo jako dobar način da stil vlastitu web stranicu. Idite na web-stranicu koja vas Stvarno mi se sviđa i pogledajte HTML i shvatiti kako su to učinili. 

I doslovno, dokle kao što ste naveli stvari, dok si ne samo krade od ljudi, to je u redu. Pogotovo za CS50 [? financirati?], mi smo vrsta Vas očekivali da će dobiti Inspiracija iz druge web stranice. Dakle, slobodno. Pogledajte kroz web stranice koje mislite da su jako lijepe i shvatiti kako oni koriste HTML i CSS raditi te stvari. 

Dakle, kao što vidite ovdje, tu je očito kao i linkove i imamo klasu ovdje. Imamo vezu. Imamo popis. Mi vjerojatno imaju neke slika u tu negdje. 

Imamo neke cool stil ovdje. To je sljedeća stvar idemo raditi. Dakle stilu, kad god vidim njih stil zagrade, to je CSS osnovi. Ben, jeste li pitanje? 

PUBLIKA: Što je div? 

ALLISON BUCHHOLTZ-AU: div je samo A- ono što je div? PUBLIKA: Division. ALLISON BUCHHOLTZ-AU: Division. Da, to je baš kao i odvajanje različitih elemenata. U redu, pa ovdje je ono što smo ići na sljedeću. Dakle, to ne može biti najbolji stil, jer, ako primijetite imamo HTML i stil u istoj stranici, a mi zapravo žele odvojiti one, OK? I zapravo, neka me otvaraju svoje pravo jedan jer ovo je trebala biti PDF, tako da imamo style.css. 

Dakle, ono što možemo učiniti je da se ovdje to su cool stvari kao neki blijedi i mi mogli pokušati to učiniti, ali osjećam kao da bi nered koji se u letu, pa Ohrabrujem vas dečki u ići probati da na svoju ruku, ali neću to učiniti upravo sada. Dakle, ako ti dečki, zapamtite, Ako ste ikada pogodila problema set, nešto swoops sa strane. To ima veze s blijede i tranzicija i sitnica. 

PUBLIKA: I to je sve CSS i HTML? 

ALLISON BUCHHOLTZ-AU: Sve CSS i HTML. Da. Tako možete učiniti puno stvarno cool stvari s CSS i HTML. Dakle, s našim super zeko web stranica ovdje, mi će učiniti nešto Malo CSS stylinga s njom. 

Dakle, ako ste ikada imati stila List, koji imamo ovdje, možete samo nazvati style.css. Možete ga nazvati što god želite. Ono što je važno je da idemo to referenca u našem web.html ovdje. 

Pa što ćemo učiniti je we-- tako da ja ne nered ovu up-- ćemo povezati ove dvije datoteke zajedno. Tako je u istom way-- idem crtati analogiju u C ovdje. Na isti način, ako imate neki library-- i imamo cs50.h-- naš prevodilac povezuje. Ovo je samo eksplicitna Veza s naše strane. Dakle, na isti način na koji radimo mljeveno meso su neke datoteke, što Spremam se napisati je samo HTML / CSS ekvivalent toga. 

Upravo smo se govoreći: OK, ovo web-stranicu će koristiti ovu stila, u redu? Dakle, imamo vezu rel jednak stila. I onda imamo tipa, CSS. A onda href jednak. 

U redu. Dakle, sve je to učinio ovdje možete misliti na to kako je istu stvar kao mljeveno meso su. Očito to izgleda malo više komplicirano, ali u svim slučajevima, to je učinkovito ista stvar. Dakle, ovo je samo neki povezivanje style sheet, to je tipa text / css, i naziv toga je style.css. 

Ono što je važno znati je da je na web stranici da ja radim pravu now-- web.html i style.css-- su u istoj mapi. Budući da u različitim mapama, trebate dati stvarni korijen za ili put do njega. No, u ovom slučaju, mi smo ga držeći Super jednostavno i to će biti ovdje. Dakle, ako mi to učiniti, imam neke stvari već na čekanju ovdje. 

Dakle, imamo neku tijelo, koje se događa da imamo boju pozadine, koji sada je svijetlo plava. Mi to možemo promijeniti, ako želimo, ali ako se dobro sjećam to točno, to samo treba ga promijeniti svijetlo plava. I sad imamo svijetlo plavu pozadinu. A imali smo here-- itko može sjetiti koje je mljeveno meso ID ili klase? 

PUBLIKA: ID. 

ALLISON BUCHHOLTZ-AU: ID. Cool. Dakle, ono što želite učiniti je koji od tih fontova ili which-- želimo "Pogledajte slatka zec "biti ljubičasta? Mislim da želimo da se ljubičasta. Prilično sam dolje s tim da ljubičasta. 

Dakle, ono što trebate učiniti je što učiniti ID equals-- u ovom slučaju Rekao sam, ono, lijepa boja ovdje. Mi reload. Odjednom, to je ljubičasta. U redu, tako da s ID, zapamtite to treba biti jedinstven, tako da nikada ne bi trebao biti koristeći ovo ID bilo gdje drugdje. No, s klase, kao što smo ovdje s lijepom fontu, Ja bi trebao biti u mogućnosti koristiti kako bilo želim. 

Tako ćemo to učiniti ovdje. Tako možemo reći klase jednako lijep font. A ako pogledamo danas, imamo ovaj cool prilično font ovdje. Dakle, možda želim učiniti oboje. U redu, ja zapravo ne znam da li je to ide na posao, ali želim probati. A to je, kako ste saznali CSS i HTML. Ti si kao, znaš ono, želim probati ovaj. Nisam siguran je li to ide na posao. Idemo vidjeti ako to radi. 

I pogled na to. Sada je u grimiz i to je prilično font. U redu, tako da ćete imati sve to različite stvari koje možete učiniti. Imate li pitanje? 

PUBLIKA: Da. Pa, baš kao i boje budete koristili su riječi. Postoji li način da to učinite boje s heksadecimalnom RGB? ALLISON BUCHHOLTZ-AU: također možete to učiniti s heksadecimalni, vjerujem. Da. No, to je vrsta lijepo ako vas ne želim ih gledati. Vi samo može biti kao, ljubičaste ili plave. PUBLIKA: Idemo Nadaju znam što to znači. ALLISON BUCHHOLTZ-AU: Točno. Tako ćemo napraviti ovo čitati ili Chartreuse. Zašto bi li ikad odlučite Chartreuse? To je zanimljiva boja. 

U redu, tako da je očito da možemo vidjeti može promijeniti stvari ipak želimo. Ako ste htjeli create-- recimo htjeli smo stvoriti drugu klasu. Ono što možda vi želite promijeniti? Ako podići W3Schools ' CSS dokumentacije, Odem na pod kako bi vas dečki. Možemo pokušati i napraviti nešto cool s to je u posljednjih nekoliko minuta. Zato sam vrsta sam vam dao ubrzani tečaj o puno cool stvari što možete učiniti. Ali na kraju, kao što sam rekao, ako vas Samo eksperiment, saznat ćete puno. 

PUBLIKA: Jeste li pogledati taj font? 

ALLISON BUCHHOLTZ-AU: Da, Pogledao sam taj font. Dakle, kao što doslovno, ja otišao to-- što sam učinio? Ja sam CSS popis fonta, i onda sam slova stog, a onda sam bio kao, izgleda, ovdje Svi su cool fontova koje možete učiniti. A tu je bio i ovaj, tako Ja ga kopirati na moj prijenosnik. A onda sam bio kao, OK, super, tamo idemo. Sve učinjeno. 

PUBLIKA: Pa vi morate biti sigurni da je CSS zna što je to font. 

ALLISON BUCHHOLTZ-AU: Da. 

PUBLIKA: Što je to reći na kraju? Rukopisni? 

ALLISON BUCHHOLTZ-AU: rukopisni. Da. 

PUBLIKA: Pozadinska slika. 

ALLISON BUCHHOLTZ-AU: Pozadinska slika. U redu. Dakle, želite li mi reći kako to učiniti. Ja to prepustiti vama. Ja sam samo tipkati do sada ovdje. Kotača je u vašim rukama. 

PUBLIKA: OK 

ALLISON BUCHHOLTZ-AU: U redu. Što ja to radim? 

PUBLIKA: Doing-- Znam što dolazi nakon kovrčave braće. ALLISON BUCHHOLTZ-AU: U redu. Dakle, vjerojatno u tijelu, ja bi se pretpostaviti, jer smo radiš s pozadinsku sliku. 

PUBLIKA: Da, neka je to. 

ALLISON BUCHHOLTZ-AU: U redu. PUBLIKA: U redu, tako da u pozadini debelog crijeva, a onda smo potrebna URL adresu slike. Možda pseudo-koda koji za sada, možda. 

ALLISON BUCHHOLTZ-AU: Što bi li mi se sviđa to-- PUBLIKA: Razmišljam kao GIF. ALLISON BUCHHOLTZ-AU: GIF? To će biti zanimljivo. U redu, što ja googling ovdje? 

PUBLIKA: Ne, to je vaš izbor. 

ALLISON BUCHHOLTZ-AU: Zašto ne we-- ako je zec, Osjećam se kao da smo trebali imati Lijepo travnata travnjak ili nešto. 

PUBLIKA: Meadow. Livada. 

ALLISON BUCHHOLTZ-AU: livada? U redu. PUBLIKA: Ili Rachel Maddow. ALLISON BUCHHOLTZ-AU: Ovaj jedan izgleda lijepo. Oh, to je sićušna, ipak. Trebamo sliku dobre veličine. Da vidimo. Oh, izgleda. To je lijepa livada. Znate što, ja volim ovaj jedan. Idemo kopirati ovaj jedan. 

PUBLIKA: U redu, tako da mislim da je URL, otvorene zagrade. 

ALLISON BUCHHOLTZ-AU: OK, URL. 

PUBLIKA: Onda adresa. 

ALLISON BUCHHOLTZ-AU: U redu. Je li to sve što je potrebno? 

PUBLIKA: Zatvori zagrade zarezom, a zatim prostor, pozadina crtica vezanost kolona fiksne i kovrčava braće. 

ALLISON BUCHHOLTZ-AU: U redu. Da vidimo je li to radi. To će biti prilično cool, ako to radi. Ja sam pravi uzbuđen ovdje. To nije uspjelo. Pitam se zašto. PUBLIKA: Možda URL mora biti u kotacijama. ALLISON BUCHHOLTZ-AU: Možda. A to je, kako doznajemo, dečki. 

PUBLIKA: Možemo li pozadinu Boja i pozadinsku sliku? 

PUBLIKA: Ne. Jedan zamjenjuje druge. 

ALLISON BUCHHOLTZ-AU: Nemam pojma. Da vidimo. Ajmo to provjeriti i vidjeti. 

PUBLIKA: Oh, možda, da. [Ubacivanjem GLAS] 

ALLISON BUCHHOLTZ-AU: OK, ovo je obviously-- sam [nečujan] ovdje. Dakle, u redu. PUBLIKA: Pozadina privitak. ALLISON BUCHHOLTZ-AU: Ah. 

PUBLIKA: U redu, ne znam. ALLISON BUCHHOLTZ-AU: Ona Izgleda da bi trebalo raditi. Jeste li sigurni da je debelo nakon što je URL? 

PUBLIKA: Ne, to je zarezom. ALLISON BUCHHOLTZ-AU: To je točka i zarez. PUBLIKA: Jesam li rekao debelo crijevo? ALLISON BUCHHOLTZ-AU: Rekli ste da je debelo crijevo. PUBLIKA: Oh ne. ALLISON BUCHHOLTZ-AU: Postoji li ići. PUBLIKA: Oh, čekaj, sad ne možemo pročitati tekst. ALLISON BUCHHOLTZ-AU: Sada ne možete pročitati tekst, ali imamo pozadinsku sliku. Mmhmm? 

PUBLIKA: Da li HTML podržavaju dinamički sadržaj? Kao, možeš li promijeniti veličinu tu sliku ovisno o veličini prozora, ili je i to jedan CSS-- 

ALLISON BUCHHOLTZ-AU: Dakle CSS mora učiniti. Dakle, ako ti dečki su zainteresirani u učenju napredne CSS, Ja sam co-nastavna seminar o CSS na 7.. A ja obećavam da će biti puno više u dubinu i učiniti mnogo više cool stvari u ovom poglavlju. A moja ko-učitelj je kao Ukupno prednji kraj web dev gospodar. Dakle, to će biti prilično cool ako želite kako bi naučili o svim cool stvari da CSS može učiniti. 

No, ono što imamo ovdje njegovo podrijetlo privitak fixed-- tako da je to neka fiksna size-- ali zapravo možete dynamically-- Ako ste ikada vidjeli web stranice, što većina dobre web stranice će učiniti, pri podešavanju Veličina vašem pregledniku, prilagođava pozadinu ili koliko prikazuje ili reformats stvari, zar ne? Dakle, to je ono što mi zovemo relativna pozicioniranje. 

I CSS zapravo može zgrabiti koliko je velik vaš Širina preglednik ili kako visok je, a možete postaviti stvari u skladu s relativnim veličinama u odnosu na apsolutnim veličinama. I to je očito napredniji CSS, ali to je nešto što možete učiniti. Ako želite naučiti više, dolaze u moju seminara. 

Dakle, to je nešto što možete učiniti. I CSS zapravo može do-- CSS i JavaScript, što ćemo dobiti u sljedećoj week-- može vam omogućiti da dinamički mijenjati Stranice bez potrebe za ponovno ih cijelo vrijeme. A vi ćete učiniti neke prilično cool stvari. 

Dakle, postoji još jedna stvar da ti dečki možda želite učiniti ili bilo što želite istražiti? Imamo 10 minuta preostalo. Također možete ostaviti rano, ali ako Želite li napraviti nešto više web stvari, možemo, ali ja nisam će vas prisiliti da. Ali, mi također može samo jesti slatkiše. PUBLIKA: Označite tekst bijeli tako da možete ga pročitati. ALLISON BUCHHOLTZ-AU: U redu. Dakle, u ovom slučaju, želimo neku str. PUBLIKA: Hoćemo li to učiniti u Tijelo tako da se odnosi na cijelu stranicu? ALLISON BUCHHOLTZ-AU: Da, zapravo možemo. To je dobra ideja. Tako smo have-- vi znam što bismo trebali biti? Ne znam možemo li napraviti boju teksta. Htjela sam probati i stvoriti drugu klasu ovdje. 

PUBLIKA: Kako ste dobili tako da ima prijedloge? ALLISON BUCHHOLTZ-AU: Tako ako ti dečki su zainteresirani, ovo je još jedan tekst Urednik zove uzvišen. Trebali biste biti u mogućnosti instalirati ga na vaš uređaj. Ponekad se dobiva malo lukav. Ako želite pomoći u tome, Ja sam super sretan da vam pomogne s njim, jer je gedit je velik i to je strašan, jer ga možete sastaviti na dnu, ali ja stvarno kao sublimnog zato što je lijepa i to ne činiti stvari kao što su auto-kompletna. 

Dakle, svakako možete slobodno javite mi ako želite to učiniti. Ako ste upravo google "Sublime tekst, "to obično ima upute o tome kako instalirati na različitim operativnim sustavima. To je stvarno cool, ja mislim, po mom mišljenju. Dakle, str. Mislim da ja mogu samo napraviti text-- ili mi samo možemo učiniti boja je "bijela". Tu. 

Dakle, ono što sam učinio je da sam nije promijenio cijeli tekst. No, ovdje je samo p oznaku da imamo, zar ne? Ova stavka oznaka. Pa upravo sam stvorio CSS element koji rekao, u redu, ništa s tom oznakom p, napraviti bijelu boju. 

Dakle, ako ste primijetili, to je napravio to bijelo i to bijeli. To ne čini naš popis bijeli jer to nije povezano s tim. Ti bi mogao proći i ti mogao say-- 

PUBLIKA: Da li boju pozadine. 

ALLISON BUCHHOLTZ-AU: Boja pozadine? 

PUBLIKA: Pozadina cijevi u Boja gdje ste stavili oznaku str. 

ALLISON BUCHHOLTZ-AU: U redu. Vi to želite bijeli? PUBLIKA: Mmhmm. ALLISON BUCHHOLTZ-AU: U redu. Tu idete. PUBLIKA: To je čudno. ALLISON BUCHHOLTZ-AU: Prilično kul, zar ne? Dakle, ako vas samo nered okolo, ti ćeš puno naučiti. I to može biti prilično cool. Mislim da je to definitivno više zadovoljavajuće nego ponekad jer ne morate čekati za vaš program za prikupljanje. Možete samo pogoditi Osvježi a ti si kao, oh, izgleda, to je radio, ili oh, ja sam Vjerojatno nešto nedostaje. I to je nešto što je stvarno kul o ovom sljedećem dijelu klase, je to je definitivno, ja mislim, lakše provjeriti kao što ide uz put u odnosu na pisati ove duge programe i želeći i moleći da se radi na kraju. 

Dakle s tim, mislim vi svi izgledaju dobro. Ako imate bilo kakvih pitanja, kao i uvijek, dolaze razgovarati sa mnom, došao javite mi. Ja ću biti u redu ispred za sljedećih 15 minuta Ako želite razgovarati o ništa i sve. 

Dakle, nadam se da guys-- Sretno s ovim pset. Rok je petak u podne zato što je pušten kasno. Tako sam, vjerojatno će se vidjeti Mnogi od vas u četvrtak, ali nadamo se ne. Možda ćete morati to napraviti do tada. Ja bih biti super ponosni. 

Ali ako ne, ja ću vas vidjeti u četvrtak. Također možete koristiti kasni datum, koji je to se proteže do subote u podne. Ali ja don't-- ha? 

PUBLIKA: Halloween. 

ALLISON BUCHHOLTZ-AU: To je noć vještica, A i B, Ja ne mislim da će se se radno vrijeme u petak. Pa stvarno ne probati i dobiti to učinio Petak, tako da svi možemo slaviti Posveti vikend. U redu, ja ću vas vidjeti dečki sljedeći tjedan.