[Prehrávanie hudby] ALLISON Buchholtz-AU: Dobre, všetci. Vitajte späť na časti. Takže náš program na dnešok sa deje cez oveľa webových dev veci. Neviem, koľko z ste videli svoje psets pretože to bol prepustený dnes ráno. Ja by som za koľko ľudia čítať spec, ale keď videl, ako ste mali všetci z, rovnako ako sedem hodín na to pozrieť a to v pondelok a vo pravdepodobne ste mal triedu, Budem predpokladať, že väčšina z vás nie. Ak máte ďalšie slávu. Tie v podstate pomáha implementovať jednoduchý web server C, čo je zbrusu nový pset, tak vy si byť morčiat. To bude sranda, divoký týždeň ale myslím, že to bude veľa zábavy a to bude naozaj dobrá skúsenosť v skutočnosti. Tak, aby vás pripraví na že, v časti dnes máme ísť chmod, TCP / IP, a potom trochu HTML a CSS. Na konci, budete vlastne kód up jednoduché webové stránky spolu ktoré vám pomôžu chlapci trochu dostať viac zoznámený s tým. A potom, ak ste zdvihol vaše kvízy, sú v prednej časti, ale som si istý, že všetci tu má svoj kvíz. A tiež v takom prípade, riešenia nie sú až doteraz, ale akonáhle sme finish-- páči, Posledných pár ľudí, ktorí sa svojou quizzes-- budú up. Ak máte nejaké otázky do tej doby, neváhajte a napíšte mi osobne. Budem reagovať s jednotlivcom otázky, ako som vždy robiť. Takže v takom prípade, chmod. Takže v podstate všetko vám potrebujete vedieť o chmod je, že to slúži na zmenu oprávnenie k súborom, že jo? Takže je to len niektoré systémy to nazvať zmeniť povolenia, ako sa tu hovorí. A ak ste niekedy chceli vidieť aká oprávnenie súbor má, namiesto toho len to, ls, si to mohol urobiť ls -l. l stojí na dlho. Takže budete robiť dlhé zoznamy všetkého, a to vám poskytne oveľa podrobnejšie informácie o každej z vašich súborov. A uvidíte, something-- som chystá preskočiť na second-- ale uvidíte niečo podobné že horná línia sa pre každý súbor. A budeme pokračovať tým, čo to znamená. Takže v podstate, zmeniť Vaše oprávnenie k súborom, si len chcete použiť chmod. Môžete si ju predstaviť ako každý iný UNIX volanie ako ls alebo CD, alebo ktovie čo ešte. Je to len trochu iné, ako je volanie. Takže robíme chmod a potom budeme tri číslice typicky. Existuje niekoľko spôsobov, ako to, z ktorých jedna pôjdeme preč. Ale zvyčajne, budete mať tri Číslice v rozsahu 0-7 zakaždým. Takže jedna vec je, že existujú tri rôzne oprávnenia že môžeme dať každý súbor. A je to čitateľné, čo je zastúpená r, ktorý bude mať zmysel v trochu; W, čo je zapisovať; a spustiteľný, čo je x. Viem, že e jeden spustiteľný, možno nie najväčší zmysel, ale my predstavujú ju x. A čo sa stane, potom je každý z týchto majú tiež zastúpenie číslo. Máme teda 1, 2, a 4. A v podstate to, čo sa stane, je každý z týchto troch čísel tu zodpovedá iný súbor užívateľov že tieto oprávnenia sa týkajú. Takže si môžete myslieť, že prvý číslo zodpovedá skutočnému užívateľovi alebo vlastník súboru, druhý počet bude zodpovedať skupinu, a posledná sa týka do sveta, OK? Takže to, čo sa stane, je pamätať tie numbers-- R je 4, w je 2, x je 1, nie? Tohle-- ak súčet týchto plánov, ktoré vám umožní, že prvé číslo že by sme mohli vstupu v našom chmod. Takže v tomto prípade, čo by toto číslo malo byť? To by bolo 4 a 2 plus 1, čo je 7, nie? A v tomto prípade, tieto nemajú nič, takže tu by preložiť chmod 700, OK? A čo to robí, je, že poskytuje všetky z týchto oprávnení na vaše používateľa. Takže to znamená, že náš užívateľa môžu robiť, čo chcú. Môžu čítať tento súbor. Môžu tento súbor spustiť. Môžu zapisovať do tohto súboru. Ale skupina a svet, nie oprávnenie vôbec, OK? Tak ďalší spôsob, ako napísať, že môžeme robiť chmod z troch číslic, z ktorých každá zodpovedá to bez ohľadu na sumu, alebo že špecifická skupina, špecifická podmnožina. Alebo môžeme urobiť naozaj niečo iné. Vydrž. Môžeme urobiť niečo s nimi tu. Ako mnohí z vás videli príklad kde to je, chmod a Plus X? Videli ste, že v prednáške, myslím, že? Tak znamená všetky. To znamená, že ho pre všetkých užívateľov, ktorú som zabudol dať sem. Ale navyše x, keby sme Všimnite si tu, ak robíme na chmod-- čo skupina sme hovorí o plus oprávnenia chceme dať. Takže to môže byť plus alebo mínus. Plus dodáva dovolenia. Mínus odníma povolenie. Celkom intuitívne, myslím. Tak a x znamená chmod. Takže zmeniť povolenia všetkých ľudí Ak je to je-- pridať oprávnenie. A x-- to znamená, čo povolenie sme udelenie každého. Čítať, písať, alebo spustiť? Divákov: Spustiť. ALLISON Buchholtz-AU: Spustiť. Takže dávame všetkým užívateľom povolenie na spustenie tohto súboru, OK? Takže čo keby sme chceli urobiť že sa číselnej podobe? Takže pamätajte na numerickej, chceme tri čísla. Divákov: 4. ALLISON Buchholtz-AU: Čo to bolo? Divákov: 4. ALLISON Buchholtz-AU: Nie 4. Publikum: 0, 0, 4. ALLISON Buchholtz-AU: No, chceme dať to všetkým užívateľom, že jo? Takže budeme mať počet v každej pozícii. To bude Rovnaký počet v každom slote pretože my jednoducho chceme dať everyone spustiteľné oprávnenie. Takže spustiteľný súbor je 1, ale na správnej ceste. Takže keď sme sa chmod 111, ktoré by ako ekvivalent chmod plus x. Znamená to, že zmysel pre každého? Chystáme sa prejsť pár príkladov. Tak veľký stánok s jedlom tu je to tu, ale znamená len to dať všetkým užívateľom. u je, ak si len chcete dať alebo vziať zvláštne povolenie od užívateľa alebo vlastníka. g je pre skupinu, tak, že prostredný číslice. A potom ďalšie si môžete myslieť ako svet, že posledná číslica. Takže s tým, pôjdeme na príklade, pretože mám pocit, že príklady vždy aby tieto veci zrozumiteľnejšie. Takže rwx-- sme prešli tohle-- môže byť tiež predstavovať ako 700. To je príklad sme sa pozerali na viac obrazu. Tak chmod 444 na nejakom súboru by sa dať to, čo oprávnenie? Boli ste naozaj blízko. Divákov: Čitateľný pre všetky. ALLISON Buchholtz-AU: čitateľný. Tak čitateľný pre všetkých, nie? A čo potom je to iný spôsob, ako to urobiť? Ak chceme robiť chmod buď r je alebo w je plus a mínusy, čo by to výzva vyzerať? Bolo by chmod, čo? Divákov: a r. ALLISON Buchholtz-AU: a r na 5. OK, takže to je rovnaké ako to, len dva rôzne preklady o rovnakú vec. Takže s tým, máme to. Takže chcem, vy vyskúšať a písať Tento druh v ich opačným spôsobom. Tak s chmod 555, čo by to bolo? Bude to plus alebo u a alebo ktovie čo ešte? Pre u Plus X, daj mi tri čísla. A potom mi povedz, o čom oprávnenia sme vlastne priznanie, a kto? Takže budem vám chalani dva minút, aby sa na tom pracovať. Neváhajte a hovoriť s každým iný. Pre tých z vás, ktorí prišli v malom neskoro, je cukrovinky a košele. Nechali sme tri košele, a máme Kit Kats a kytíc. Takže neváhajte prísť drapák niektorí v tomto malom medzihra. Tiež posledný z nich je zložité. Je to dva chmods za posledný jeden. V skutočnosti, dovoľte mi, aby som zavrite tie dvere zatiaľ čo vy ste na tom pracujeme. Candy je vždy nutné v pondelok popoludní. OK, tak chmod 555. Aký je ďalší spôsob, ako by sme mohli napísať, že? Nejaké nápady? Áno. Divákov: a RX. ALLISON Buchholtz-AU: r a RX. Prajete si vysvetliť, prečo by som sa rx? Divákov: Pretože máte 5, tak to je 4 plus 1, tak, aby čítal a spustiteľný súbor, a to pre všetky. ALLISON Buchholtz-AU: Správne. Takže len zopakovať, 5 tu poznáme ako súčet 4 a 1, pretože každé číslo v našej trojice je Súčet oprávnenie pre túto podmnožinu, že jo? Buď užívateľ, skupina, alebo svet. Takže v tomto prípade, my vieme, že 5 musí byť vytvorené 4 a 1. A 4 a 1 zodpovedajú čitateľné a spustiteľné. Dávame ho všetkým, takže môžeme urobiť chmod a navyše RX. A samozrejme, išli sme tadiaľ otázky, takže teraz je tento súbor spustiteľný a čitateľný pre všetkých. Takže to, čo o druhej? Čo by mohlo číslo, že jeden bude? Nejaké nápady? Choďte do toho. Divákov: 100 [nepočuteľné]. ALLISON Buchholtz-AU: 100. Presne tak. Takže chceš vysvetliť, prečo 100? Divákov: Vzhľadom k tomu, že je to pre používateľ, takže je to na prvom mieste. A potom x spustiteľného je 1. ALLISON Buchholtz-AU: Presne tak. Tak sme sa udelenia spustiteľný oprávnenia len pre používateľa. Takže v tomto prípade, by bolo 100. A ja mám všetky odpovede sa na ďalšiu snímku v prípade, píšete veľa vecí dole. OK, takže to ďalšie je v skutočnosti vykonáva s dvoma chmods, si to mohol urobiť. Takže má niekto nejaký nápad, ako by mohol získať chmod 640 prepísaná v inak? Môžete si a potom zmeniť užívateľa môžete zmeniť skupina je moja rada. Takže keď sme boli len zmenou Užívateľ, ktorý je to prvý tu, čo by mohlo náš hovor bude? Takže užívateľ u, že jo? Takže chmod u a čo? Mmhmm? Divákov: rw. ALLISON Buchholtz-AU: rw. Pravdu, pretože čítať a písať, pretože prečítané je 4, w je 2, tie, ktoré spoločne ako suma 6. Tak sme si chmod u plus RW, a dostaneme náš prvý 6 tam. Takže dostať 4, chceme teraz zmeniť svoje nastavenia skupiny. Takže budeme robiť chmod g navyše, čo? Čo je to 4? Divákov: r. ALLISON Buchholtz-AU: r. Presne tak. Takže dávame majiteľa čítať a písať oprávnenia a dávame skupine Čítať oprávnenie, ktoré máme všetci tu. Mmhmm? Divákov: Ak môžete niečo napísať, z toho nevyplýva, môžete ju vykonať? ALLISON Buchholtz-AU: Vy Môžete písať na something-- Neverím, že to znamená, môžete ju vykonať. V pohode. Tak to je všetko, čo sme práve prešli. Takže na tento ďalší, je to tak nejako bežné prípady ktoré chcete mať na myseľ nastaviť váš problém. Jedná sa typicky o oprávnení že chceme použiť. Takže pre 711, ktorý dáva nás, samozrejme, užívateľ všetky oprávnenia, ktoré má tendenciu dávať zmysel. A potom je to uskutočniteľné skupinou na svete, ktorý dáva zmysel ak máte nejaké adresáre, chcú mať možnosť prechádzať do neho. Ľudia potrebujú mať prístup. Pre každý súbor non-PHP, budete používať 644, ktoré by robiť to, čo? Čo to znamenalo, alebo čo oprávnenie sa to dá? Takže majiteľ môže čo? Divákov: čítať a písať. ALLISON Buchholtz-AU: čítať a písať. A potom skupina a ďalšie môžete len čítať, že jo? A potom chmod 600 pre akýkoľvek PHP súbory, ktoré používajú, váš majiteľ, znova, môže čítať a zapisovať do nej ale všetci ostatní sú tak nejako zaslepiť. Takže to bude v skutočnosti byť užitočné, keď sa dostanete do problému nastaviť budúci týždeň, kedy ste vlastne budovanie internetové stránky. Takže ak ste sa niekedy dostanete do nejaké divné správanie kde to nie je načítanie správne, možno vás je potrebné pridať spustiteľný súbor povolenie, alebo možno budete potrebovať čítať alebo píšte dovolenia. Maličkosti, ktoré majú tendenciu k vypnutiu ľudí up, ale je to niečo ako GO- pri spustení budúci týždeň pset. A ja by som vám dať viac tipy na tento týždeň pset, ale ešte som sa na to pozrieť, pretože to bol prepustený dnes ráno. Ale vy ste ma e-mail, budem sa pozrel na to v čase, keď som sa reagovať zajtra. Takže teraz, je každý dobrý s chmod? Akékoľvek pretrvávajúce otázky? Celkom jednoduché. Tak nejako sledovanie toho, čo čítať, písať a spúšťať čísla je asi tá najťažšia časť. Tak s TCP / IP, všetky tieto protokoly, niečo ako so svojimi dátovými štruktúrami minulý týždeň, je to oveľa viac dôležité, aby druh dostať vyššiu úroveň intuície z nich. To nie je CS143, kam ideme vás požiadať, aby ste realizovať sieť, takže budete mať v poriadku, ak ty to nechápeš natvrdlý kostrbata všetkých protokolov. Čo je dôležité pochopiť, niečo ako to, čo predstavujú a prečo sú dôležité. Takže TCP / IP, samozrejme, že je Transmission Control Protocol alebo Internet Protocol, čo je v podstate len o súbor zákonov v podstate alebo normy, ktoré oznámiť údaje ako by mali byť riešené, ako by malo byť paketizovaný, prenášané a prijímané. Takže to v podstate, rovnako ako Píše sa tu, zvyšuje šanca že údaje získava, kde Chcete sa dostať do. Som si istý, či vy išiel do prednáška alebo sledoval on-line, on has-- neviem keby to urobil v tomto roku, ale viem, že v minulom roku, mal demo, kde mal obraz Rob a rozdelil ju do štyri a vložte ho do obálky a snažil sa ho cez Sanders. A môžete druh myslieť na to takto. Je to len súbor pravidiel, ktoré povedzte údaje, ako sa dostať niekam a umožňuje zistiť, či vám chýbajú údaje, rovnakým spôsobom, že ak ste pričom viac stránok poznámok a označiť ich s strane 104, strana 204, a idete späť študovať neskôr a že vám niečo chýba something-- nemôžete nájsť stránku 304-- viete niečo nie je v poriadku, tak vás môžete prezrieť svoje poznámky znova, alebo požiadajte niekoho, aby vám znovu odoslať skriptá od tohto dňa. Rovnako ako s údajmi na internete. Ak sa pýtam na niečo z nejakého servera a je potrebné odoslať to v množstve paketov, pravdepodobne bude číslo je nejakým spôsobom, či mi vedieť, koľko by som mal dostať, a povedz mi, oh, to je jedna z 10 alebo sa jedná o jeden z 10.000. Týmto spôsobom, keď idem k zostaveniu všetky kúsky dohromady, Viem, že keď sa niečo chýba a ja som sa spýtať na to znova. Dáva to zmysel? Len súbor pravidiel. Na jeho základe nastavenia pravidiel, OK? Tak sme tiež hovorili Niečo málo o porty. To je naozaj len štandard, ktorý umožňuje zistiť, aký typ dát je prenášaný v týchto paketoch. Ak pôjdeme s našou obálka príklad, my nie viem, že je to obrázok Rob tam, ak sa nám to napísať na vonkajšej strane nášho obálky. Takže porty sú v podstate to isté. Je to len spôsob, ako zistiť, čo typ dát je prenášaný. Takže máme všetky najbežnejšie tu. Takže 21-- sú to tiež druh ako sa dobré veci vedieť. Je to druh ľahko kvíz otázku. Buď rád, čo port 80 robiť? Alebo, čo port 443 robiť? Tak dobré veci vedieť. Takže máme tu, 21 súborov transfer protocol, tak len pravidlá, ktorými sa riadi prenos súborov. 25, niečo, čo my všetci používať príliš veľa, je e-mail. 53 je názov domény systém, ktorý je v podstate len druh vyhľadávania pre IP adresa doménového mena. Tak som si celkom istý, že to bolo sú uvedené v prednáške, ak máte prejsť na niečo ako google.com, má IP adresu že je s ním spojené. Nie je to vlastne google.com. A tak 53 je port že v skutočnosti sa starostlivosť o druhu jeho preklad do tej IP adresu pre vás. A potom 80 a 443 sú veľmi časté. Buď máte svoje webové stránky, alebo máte zabezpečené webové stránky, ktoré veľa webových stránkach sú prenos cez dodnes. Tak to je celkom na vysokej úrovni prehľad prenosu protokolu. Nevidím oveľa viac do hĺbky. Je to druh super veci ak máte záujem. Je tu veľa zdrojov. Wikipedia je v skutočnosti celkom dobrá stránka. Tak som sa na to pozerať pred chvíľou, tak by som vrelo odporúčam pri pohľade na to, ak máte záujem alebo vziať 143 do dvoch rokov, pretože Myslím, že je každý druhý rok. Takže na konci tohto, sme hovorí o webových stránkach a HTTP, čo je vlastne naša ďalšia téma dnes, než pôjdeme do HTML a CSS a môžete skutočne kód do webovej stránky. Bude to zábava. Budeme mať fotky zajačikovia a to bude skvelé. Takže HTTP, ako môžete vidieť tu, je jedným z krásnych skratky pre tento týždeň, čo je Hypertext Transfer Protocol. Takže znovu, je to len ďalšia sada pravidiel, ktoré určuje, hypertext previesť, v tomto prípade. Takže najlepší spôsob, ako zistiť o to je len druh rozobrať to do táto jednotlivé slová pretože tam je veľa slová na obrazovke tam. Takže budeme začínať hypertextu. Takže "hyper", si môžete myslieť "Nad", rovnako ako super-typ vec. Takže je to naozaj len Text prevzatý do ďalšiu úroveň, takže je to ako super textu, ako ďalšom texte. Takže je to v podstate len text, ktorý nám dáva viac informácií, než normálny text robí, OK? Takže v tomto prípade tu, to je hypertext. To nám hovorí, že máme nejaký odkaz, ktorý budeme, ktorý je cs50.net, ktorý Teraz je cs50.harvard.edu. Tieto snímky sú trochu starý. A to bude zobrazovať to, pretože to, ako hypertextový odkaz, a potom naozaj cool webové stránky. Takže je to text, ktorý je trochu bit naozaj skvelých vecí tam. Takže môžete spojiť veci a môžete vkladanie obrázkov a môžete štýl veci. A najznámejší vec, ktorá vás chlapci majú pravdepodobne s hypertextu je HyperText Markup Language, HTML, čo je samozrejme všetko webe ktoré vidíme okolo nás, udelil s nejakým štýlom CSS hádzať. Ale ak bol niekto naozaj veľký s MySpace, Som si istý, že všetci používali HTML po celú dobu k vytvoreniu tie perfektné profily, nie? Mám pocit, že by mohol byť zastarané referencie teraz, ale čo. Len little-- vy nie sú tak oveľa mladšie. Niektorí z vás sú starší ako ja. MySpace je stále vec, keď som bol mladý. Nie som tak starý. Tak ako tak, HTML len forma hypertextu. Takže hypertext je len Text s pridanými funkciami. Takže transfer protocol je pravdepodobne viac ošemetná vec vysvetliť. Je zrejmé, transfer-- len prenos dát. Takže buď medzi klientom, ako Váš web brat a server. Takže v podstate len spôsob, ako internet funguje. Tak presné žiadosť ako tieto práce sme v skutočnosti bude vyzerať na napríklad požiadavka i odpoveď. Ale ako sme sa požiadať Informácie zo servera a ako server reaguje na nás čo tento prenosový protokol upravuje. Takže požiadavka a odpoveď má sledovať tieto konkrétny súbor pravidiel. Je štandardizovaný, takže bez ohľadu na to kam pomocou internetu, vždy funguje rovnako, OK? Opäť platí, že protokol, súbor pravidiel. Je to proste normálne interakcie rovnakým spôsobom že profesor Malan hovorí o tom, ak niekto rozširuje svoju ruku, viete, že je to bežné zdvorilosti osloviť vaše von a pretrepte ruky. Je to protokol, nie? Tak som dať nejaké štandardizované žiadosti, ktorý chcem potriasť rukou, a dáš nejaké štandardizované odpoveď, ktorá je buď nie, vďaka alebo môžete skúsiť a zavrtím ručné alebo možno budete snažiť a päsť bump ma. A my nemáme protokol za to. To sa pokazí. Ale ak každý nasledujúci Rovnaký protokol, samozrejme, to ide oveľa viac problémov. Ľudia sa navzájom spoznať. Všetci sú šťastní. Tak vo svete internetu, všetci sa riadi rovnakými rules-- o niečo lepšie ako sociálne normy. Ale s tým sa pozrieme za žiadosť tu napr. Takže tam je to málo Kľúčom je tu na dne ktoré vám povie, rôzne farby, to, čo má na mysli. Takže biela je rovnako ako metódu Žiadosť a protokol version-- to požiadajú metóda verzie. A potom je nejaký názov poľa a hodnota z tejto oblasti, ktoré bude ísť do veľmi, veľmi skoro. Takže táto požiadavka je príkladom. To je ako ja rozšírenie von, chce, aby som sa predstavil. To je to, čo klient alebo to, čo váš webový prehliadač bude odoslanie na server. Tak to je požiadavka GET, takže je to žiadať o niečo, čo zo servera. A to je, samozrejme, HTTP a to je verzia 1.1. Takže zvyšok toto je to, čo nazývame hlavičky, a jeho ďalšie informácie ktoré nám dáva lepšiu predstavu o tom, to, čo sme vlastne žiadajú, alebo informácie, ktoré chceme dať server, ktoré by mohli byť relevantné. Takže User-Agent dáva viac Popis on-- napríklad tu, curl / 7.24.0 je vlastne povie server, ktorý sme pomocou Google Chrome ako náš prehliadači. Takže ak ste niekedy počul o ľuďoch, ktorí hovoria o to, aby aplikácia reagovať na viac prehliadačov, To je niečo, čo by sa preto použiť, ak Neviem, čo prehliadač požiadavka prichádza z, nemôžete prispôsobiť dáta na to. Takže v tomto prípade užívateľ práve dáva tento druh z identifikačných údajov o tom, čo prehliadač Vaše užívateľské práve používa, OK? Takže máme veľa, čo je kde sme vlastne chcú ísť. V tomto prípade, chceme ísť do apple.com, kúpiť nejaké cool nové iPady alebo tak niečo, možno roztomilý svetla na našich koľaji izby. A názov hodnoty na konci je len plnivo, len všeobecne vec pre vás vidieť. To nie je v skutočnosti odpovedajú na čokoľvek tu. Takže môžete mať toľko, alebo ako málo, ako chcete, v každom prípade. Väčšinu času, to sú nepovinné. Záleží len na tom, čo musíte v prehliadači, od užívateľa, aby sa správne dať požiadavku. Alebo to závisí na tom, aké sú vaše užívateľa v skutočnosti sa chce, aby sa na server. Takže budete mať veľa, veľa tieto názvy polí hlavičky alebo môžete mať len pár. Rovnako ako u mnohých vecí Povedal som v tejto časti, to naozaj záleží na kontextu o tom, ako používate túto. Takže to má zmysel pre každého? To je len príklad žiadosť, hlavičky, ktovie čo ešte. OK, takže s tým máme nejaké odpovede. Opäť máme stavový kód, protokol verzie, a potom názov poľa a poľa cení ako vždy. Takže náš protokol verzie a náš stavový kód 200. OK, čo znamená, že, Áno, všetko išlo dobre. Tu je to, čo chcete. Typ servera, obsah type-- nám hovorí, OK, ty si dostane nejaký text HTML. Tu je dĺžka a to tu je Čo by ste mali urobiť s pripojením. OK, tak ešte raz, v závislosti na dáta, ktoré sú žiada, v závislosti na tom, čo Server sa chce vrátiť k vám, môžete mať viacero pole mená, môžete mať menej. Závisí úplne kontext. A pokiaľ ide o tento štatút kód tu, samozrejme, 200 nie je jediný by ste mohli mať, nie? Máme veľa stavových kódov. Pamätá si niekto niektorý z iní, že sme sa zmienili v prednáške? Mnoho z nich začínajú 4. Divákov: 404. ALLISON Buchholtz-AU: 404, ktorý je? Divákov: Súbor nebol nájdený? ALLISON Buchholtz-AU: Súbor nenájdený. Presne tak. A čo 403? Divákov: Forbidden. ALLISON Buchholtz-AU: Forbidden. Tak čo si myslíte to znamená, že s chmods? Divákov: To znamená, že vás Nemáte oprávnenie si ho prečítať. ALLISON Buchholtz-AU: Presne tak. Nejakým spôsobom, že nemáte povolenie na prístup k nim, nie? Takže 404, 403. Tam je naozaj na smiech ten, ktorý vždy predstaviť každý rok, Mal som dať sem, ako 413, čo je, že som kanvice. Môžete google to. Je to smiešne, ako, že je kód 413 a to, že som kanvice. Čo neviem, prečo by ste kedy je potrebné, aby na internete, ale to som odbočil. Divákov: Možno, že ste kanvica na čaj. ALLISON Buchholtz-AU: Možno server je kanvica na čaj. Kto vie? Dobre, tak sa chystáme prechod do reálneho kódovania. Mám pocit, že vy sa chystáte odtiaľto pekne rýchlo. Divákov: Prečo to robí hovoriť "server: dvakrát? ALLISON Buchholtz-AU: Hm? Server dvakrát? To je dobrá otázka. Nie som si istý. Zistím, a Ja vám e-mail všetkým. OK, akékoľvek ďalšie otázky, ktoré vedľa? Dobré? V pohode. HTML a CSS, a teraz sme dostať do všetkých zábavných častí. Tak ako som sa zmienil predtým, HTML je pravdepodobne jedna z vecí, vy ste najviac oboznámení s. Takže máme HyperText Markup Language. Najlepší spôsob, ako sa dozvedieť tohle-- vôbec sa mi nepáči nejaké pripravené zábery alebo tak niečo pre vás s HTML. Je to naozaj o učenie syntaxe. A ak ste boli na MySpace deň, mali by ste to dole. Takže naozaj, najväčšia vec je len cvičiť a experimentovať. Jeden z najväčších zdrojov by som Dôrazne odporúčame používať ich W3Schools. Takže len W, 3 a potom školy. Majú veľa zdroje na HTML, CSS na, a oni vlastne majú split screen niečo také kde vám dám príklad kódu. Môžete si hrať s tým, ju zmeniť, a stlačte tlačidlo Aktualizovať, a ukážem ti, čo ju vlastne robí na webovú stránku. Takže by som veľmi odporúčame používať to. Je to celkom v pohode. Nebudete mať seg chyby tu, keď sa niečo pokazí. Ak sa vám podarí dostať chyba seg s HTML, dajte mi vedieť, pretože som bude skutočný zaujalo. Ale je to preto, že naozaj cool môžete zmeniť veci, môžete vidieť, ako aktualizovať žiť. A myslím, že budete mať veľa viac intuitívne pochopenie HTML ak ste skutočne len stráviť nejaký čas s ním experimentovať. Takže to je dôvod, prečo som povedal, praxe a experiment. Google, odtiaľ na out, bude pravdepodobne jeden z vašich najlepších zdrojov a priateľmi. Alebo Bing-- Pracujem v spoločnosti Microsoft, takže možno by som mal povedať Bing. Ale čokoľvek Je len bude syntax, tak pochopenie toho, čo sú tagy, understanding-- aspoň CSS-- ako zmeniť niektoré atribúty. Bude to mimoriadne užitočné. Takže aj keď sme nie nejaké pripravené veci, Máme takú niektorých osvedčených postupov že chceme vy vyskúšať a riadiť by-- alebo skôr, mali by ste dodržiavať až do ďalšieho oznámenia. Takže uzavrieť všetky svoje značky. Dúfajme, že všetci has-- viete, čo, ak to nemá zmysel teraz, Sľubujem, že to bude mať zmysel keď sme kódovanie na stránku. Ale zatvoriť všetky svoje značky. Takže ak budete mať nejaké záhlavie, ktoré je držiak, H1, držiak, uistite sa, že vždy, keď budete hotoví s tým, zatvorte tento nadpis. Overenie stránku W3 Validator. Ak nechcete ukončiť svoje značky, môžete dostať neočakávané správanie. Bude tvrdiť, že vaša stránka je neplatná ak sa ho spustiť prostredníctvom tohto validátoru. Takže keď v doubt-- a najmä na tento týždeň a budúci týždeň je pset-- rovnakým spôsobom, že sa pýtame použiť skontrolovať 50 a typ 50, by ste mohli myslieť na to, ako jeden z vašich kontrol, OK? Takže ak to neprejde W3 Validator. To je niečo, čo sme sa zájsť vás. Alebo Hovorím vám pravdu teraz budem ukotviť vás. Takže uistite sa, že potvrdzuje. Nie je to ťažké. Len vložíte do kódu a bude to buď povedať dobrú prácu alebo vám chýba niečo rovnakým spôsobom že štýl 50 vám povie, kam poplietol. A potom posledná vec ich chcete oddeliť Váš značenie, čo je všetko, čo HTML alebo text, a váš štýl. Takže urobíme príklad tohto práva po tomto. Tak HTML a CSS by mali byť oddelené. A budeme hovoriť o MVC, ktorý je Model View Controller, budúci týždeň. Vy by ste asi dozvedieť sa o tom v prednáške Zajtra, ak ste mali to už dnes naučila. A je to len trochu paradigma, ktoré máme tendenciu pre použitie pri tvorbe webu Stránky oddeliť veci. Môžete si ju rovnakým spôsobom že máme tendenciu jednotlivých funkcií v jazyku C kde hash nájsť veci. Je to len spôsob, ako aby váš život jednoduchší. To oddeľuje atribúty alebo kód by ste používať znovu a znovu, ale týmto spôsobom, je to trochu z udržuje ju pekne a upravene. A ak chcete zmeniť jedna vec, čo si len raz zmeniť a to zmenilo všade inde. Takže je to viac pre vaše jednoduchosť a flexibilita. Tak s CSS, je to veľmi podobné HTML, ale namiesto značiek že teraz už som sa zmienil len sme použiť to, čo sa nazýva selektorov. A v podstate tak nejako z spájajú určité značky vo formáte HTML s rôznymi atribútmi. A keď hovorím atribúty, mám na mysli veci ako farbu písma, štýl písma, farba pozadia, farba textu. Tieto druhy vecí. Rovnako ako keď je to na stred, či je to napravo, ak je to inverted-- všetko týchto vychytávok. Akékoľvek štylistické veci že robíte do textu, To je to, čo mám na mysli s atribútmi. A potom dve hlavné veci, ktoré by ste mali vedieť, je, že selectors-- dva hlavné factors-- sú ID, ktorý je jedinečný. Môžete použiť len to, že na jednu vec. V opačnom prípade to bude revať na vás. A keď sme ho definovať v súbore CSS, že bude byť hash ID a potom aké atribúty chceme. Sľubujem, že budeme prejsť príklad. Bude to oveľa väčší zmysel. Trieda sa môže vzťahovať na viac blokoch. Takže môžete mať svoj prvý a tretí odsek majú rovnaký typ atribútov pokiaľ môžete priradiť im rovnakej triedy. A keď sme ich definovať CSS, robíme triedu bodov, s triedou je čo Chcete, aby bol vymenovaný. Takže viem, že to je správne teraz veľmi abstraktné. To je dôvod, prečo ideme do kódu. Viem, že vy milujete že, a všetci sú mi pomôžeš, pretože je to vaše webové stránky. To je naša sekcia je webová stránka, chlapci. Takže existujú nejaké otázky, než som vypnite aplikácii PowerPoint alebo čokoľvek Chcete, aby som posúvať späť aby predtým, než začneme kódovanie? Divákov: Keď sa povie zápas tagy, máš na mysli voliča alebo značky? ALLISON Buchholtz-AU: Môžete uvažovať o nich ako o rovnakú vec. Je to len rôzne slová. Myslím, že ako selektory. Ale selektory tiež mapovať tagy. Takže si môžete uvažovať o nich ako efektívne to isté. Sľubujem, že to bude robiť väčší zmysel, keď kód. Čokoľvek od PowerPoint alebo akékoľvek otázky teraz než sme v skutočnosti vytvoriť stránku našej sekcie? Všetci pripravení? V pohode. Tak som si jeden začal. Dovoľte mi, aby som zvýšiť písmo pre vás. OK, tak teraz len musíme holé kosti webové stránky tu. Máme nejaké HTML. Máme nejakú hlavičku, ktorú sme pozri tu napríklad webové stránky. Niektoré titul, niektoré písmo. Jedná sa o značky, OK? Takže keď som na mysli zatvorte svojej značky, vidíme, tu tento držiak hlava je váš otvorenie tag, a to držiak / Hlava zatvorenie, OK? Takže by ste mohli myslieť na to, ako Vaše traky vo vašich pokiaľ to podmienky alebo vaše za slučiek. Ak máte jeden na začiatku, Ak jeden na konci. To bude aj naďalej pracovať väčšinu času v prípade, že nemáte uzavretú značku, ale najlepšie je zatvoriť tagy. Takže v tomto prípade, poďme to zmeniť. Budeme mať oddiel sedem. "Časť webových stránok." Tak som len tak zmeniť. A ak pôjdeme sem a my reload-- musím uložiť a reload-- sme si všimli, že sa tu to zmenilo, že? V pohode. Takže to zmení názov. To je bez ohľadu na to na karte. Tak to je druh hľadá druh vŕtania. Neviem, o chlapcov. Myslím si, že chceme niečo iné tu. Takže to, čo môžeme urobiť, je záhlavie je práve tam. Poďme urobiť nejaké telo. Takže máme nejaké telo tu. To robím vždy otvorené a zavriem tagy na štart, rovnakým spôsobom, že mám rovnátka. Ah. Počkaj, čo? Divákov: [nepočuteľné]. ALLISON Buchholtz-AU: Ah. Vy ste ma dostal. Dobrá práca. Zlatá hviezda. OK, takže máme nejaké telo tu. A teraz poďme začať pridávať nejaký text. Takže máte niekoľko rôznych Možnosti pre pridanie textu. Máme veci ako hlavičky. Máme len normálny text. Takže povedzme, začať s hlavičkou. V skutočnosti, ak vy chcete vytiahnuť W3 School HTML, môžete trochu sa porozhliadnuť a ak existuje niečo, čo najmä, že chcete vyskúšať tejto webovej stránky, môžeme to urobiť. Takže v tomto prípade, nech to jednoducho urobiť nejaké h1. Takže h1 je ako najvyšší hlavičky. To vám dá niečo že je veľmi veľký a odvážny. A v tomto prípade to, čo chceme, prvý text na našich stránkach? Čokoľvek. Vy sa chystáte vytvoriť to. Ja som jednoducho ísť písať. Divákov: Welcome. ALLISON Buchholtz-AU: Welcome. OK, takže ak ju uložiť a my znova, máme veľký veľký privítanie. Takže len tak môžete vidieť, rozdiely, poďme niečo urobiť na H6. Čo chceme tu? Je to tak? OK, takže len tak si môžete vidieť rozdiel. Jo, Sublime. Takže, ak si všimnete, h1, veľmi, veľmi veľký. h6, ako odvážny, ale oveľa menšie, a máte všetko medzi tým. Takže by ste mohli mať H2, H3, H4. A to sú len hlavičky, takže ak sa snažíte vytvoriť webovú stránku, ktorá má rôzne časti, Možno budete chcieť použiť hlavičky tam niekde. V pohode. Tak pridáme ešte viac veci v našom tele. Vidím, že to bude trochu fajn, keby sme mali obrázok. Mám pocit, že každý by sa použiť napríklad roztomilý zajačik obrázok práve teraz, takže budeme hľadať zajačik obrázok ako prvý. Ja neviem, či vy máte nejaké preferencie na ktorý chceme. Máte nejaké preferencie? Tento tu? Dole. OK. Že jeden je. Dobrá voľba. OK, takže ak budeme zobraziť naše image. Pozrite sa na to. Pozri sa na ten rozkošný vec. Ako si mohol byť smutný v pondelok s tým? Takže sme len tak kopírovať adresu URL obrázka. A to, čo chceme urobiť, je, povedzme, že máme nejakú p pre odsek. Budeme hovoriť: "Pozrite pozrite sa na roztomilý zajačik. d'Awwww. " Milujem svoje králiky. Mám zajačika doma. Cnie sa mi králiček. Takže to, čo budeme do-- Ja neviem, či vy chcete na google tohle-- ale s HTML, Ako môžete vložiť obrázok? Doslova, ak google "Zahŕňajú obrazu HTML," Prečo nie vy mi čo táto značka by mala byť? Divákov: img source-- ALLISON Buchholtz-AU: img source-- Divákov: --equals-- ALLISON Buchholtz-AU: --equals-- Divákov: --quote-- jo. ALLISON Buchholtz-AU: Perfect. Lovely. Pozri MySpace generácie, nie? Divákov: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. Bolo to šialené. OK. Takže sa uistite, som si toto právo. V pohode. Takže by to malo byť. A potom keď sme znovu načítať, máme zajačik na stránke Nie je to rozkošné? To je tak roztomilý. Vybrali ste skvelý, skvelý snímku. Ja som kopať ju. OK, takže máme tento roztomilý zajačik teraz. Boli sme schopní dodať image, rovnako ako to. Takže v podstate ak je nejaká image Ak chcete pridať na svoje webové stránky, môžete ho pridať, rovnako ako to. Ďalšia vec, ktorú by bolo, keby máte obrázok uložený v rovnakom priečinku ako tento súbor, môžete len písať, čo názov tohto obrázku je miesto toho, aby webový odkaz. To by ešte bolo v úvodzovkách. Bolo by to ako keby sme menoval tohle-- ak by bol tento obrázok uložený v zložke s touto HTML súboru že som editáciu a to bol nazývaný bunny.jpg. Mohli by sme tiež urobiť, že a to by sa ukázal. Avšak, nemám to uložené v súbor a chcem, aby sa zajačik, takže budeme držať odkaz. Divákov: Čo je rabbit.org? ALLISON Buchholtz-AU: rabbit.org. Je to appropriate-- vyzerajú, môžete ho prijať. Prijatie. bunny.jpg. Chcem, aby tento zajačik. Oh, bože, to je tak roztomilý. OK, takže sme pridali hlavičky. Pridali sme obraz. Je zrejmé, sme pridali nejaký text tu, že jo? Ak by sme chceli pridať ďalšie texty, mali by sme ísť takhle. Takže to je ďalší bod. A my hovoríme "je to ďalší bod." Tiež som hrozný pravopisu, tak som sa môže chybne veci. Len FYI. Takže máme ďalší odsek tu, že jo? Takže možno budete chcieť niečo trochu zaujímavejšie, než len majú všetky svoje texty, ako so zarovnaním vpravo. Možno, že vy ich chcete vycentrovať text, OK? Takže ak niekto chce používať tie príručné počítače pred vami a povedz mi, ako si ísť na stred tento text, Divákov: p align. ALLISON Buchholtz-AU: Tak p align rovná sa "centrum". Zabíja to, chlapci. Vy všetci musia zvýšiť. A máme "To je na stred." A teraz sme niečo na stred. Rovnako tak, ak máte Chcete so zarovnaním vľavo, by ste mohli urobiť zarovnanie rovná vľavo, vpravo align rovná. Úplne na vás. Keby som to urobil tu, potom to should-- teraz je to so zarovnaním vpravo. Divákov: Allison? Podľa zdroja obrazu, prečo nie je tam v blízkosti zdroja img? ALLISON Buchholtz-AU: Sorry. Ten by mal byť tam Teraz si dobrý. Teraz sme dobrí. Divákov: Ešte nemáte zatvorte ho tam, alebo nie? ALLISON Buchholtz-AU: No, tak img zdroj, ten je prostě-- s obrazom, je to práve videl, ako jeden prvok, zatiaľ čo ak si všimnete po zvyšok z nich, máme nejaký záznam potom informácie, ktoré sa to týka, a potom uzatvárací tag. Ale s obrazom, všetko je len trochu sebestačný. V pohode. Takže vy viete, ako vytvoriť záhlavie, viete, ako zadávať text, Viete, ako dať obrázok V túto chvíľu môžete zarovnať veci. Ďalšia vec, ktorá vás chcieť byť schopní robiť je vytvoriť zoznam v CS-- sme druh ísť do budúci týždeň pset. Veci, ktoré sme typicky učiť tento týždeň ide naozaj dobre s budúci týždeň pset, takže sme druh miešanie, tu prekrývajú veci. Ale to bude užitočné pre budúci týždeň. Takže ak sme chceli vytvoriť nejaký zoznam, ako by sme mohli urobiť, že? Nemôžete odpovedať na túto dobu. Niekto musí. Nie je to ťažké, ľudí, sľubujem. Google "Jednoduchý zoznam HTML." Čo to bolo? Divákov: [nepočuteľné]. ALLISON Buchholtz-AU: Správne. Takže chceme objednať alebo neusporiadaný? Poďme robiť neusporiadané. Takže máme nejaký UL, ktoré znamená zoznamu. A čo máme pre každý prvok? Má potrebuje svoju vlastnú značku? Môžeme len začať písať, čo? Divákov: ak. ALLISON Buchholtz-AU: ak. Takže to, čo je náš zoznam bude? Čo tu chceš? Robíme mená. Len to Jacob. Divákov: Králik potraviny. ALLISON Buchholtz-AU: Rabbit potraviny. OK Páči sa mi to. Králik potraviny. OK, takže máme mrkvu. Páči sa mi tento králičie tému. Ja som kopať to veľa. Publikum: Vlastne som si myslel, že Jacob by dôveryhodne. ALLISON Buchholtz-AU: Jacob? Jacob je králičie potravy. Ak ste videli Jákobov foto z úradných hodinách, možno ste si myslel, že má zaútočil vrah králika. Divákov: Mám králika teraz. Mám vrah králika teraz. ALLISON Buchholtz-AU: Robíš si srandu? Divákov: Vezmem to ďalšia časť. Mám to. ALLISON Buchholtz-AU: To je smiešne. Tak ako tak. Divákov: [nepočuteľné] Publikum: Jo, môj Proctor má králika rovnako. ALLISON Buchholtz-AU: Chcem králika. OK, kto prináša skutočnú králik ďalšia časť, celkom šotek bodov. Divákov: [nepočuteľné] Publikum: Oh, to nie je pravda. Je to plnené králik. ALLISON Buchholtz-AU: Oh jo, môžeme uzavrieť tieto. Vyzerá to rád. Divákov: Má to vlastne jedno? ALLISON Buchholtz-AU: To nie je. U väčšiny z týchto vecí, nezatvoríte značku, 99% času nič zlého sa deje sa tak stalo, ale je to dobrý spôsob, taky. Jakob. A máme šalát. Obecenstvo: pre odkazy, je to naozaj dôležité. ALLISON Buchholtz-AU: Hm? Obecenstvo: pre hypertextové odkazy. ALLISON Buchholtz-AU: pre hypertextové odkazy. Áno, odkazy potrebovať. OK, tak sa poďme pozrieť tu. A my máme na záver nášho zoznamu. A pozrieme sa na to. Máme all-- Jákoba, práve tam. Králik jedlo. Pripomína mi Bunnicula. Divákov: [nepočuteľné] ALLISON Buchholtz-AU: Som dobývať všetky staré školy referencie dnes, nie? Len všetky staré školy odkazy. Mal som priniesol ako Gogurts alebo niečo na občerstvenie. Divákov: Or Gushers. ALLISON Buchholtz-AU: Oh. OK. Uvidím, či môžem sledovať dole Gushers na budúci týždeň. Myslím, že to môžem urobiť. Myslím si, že by sme mohli mať niektorí v kancelárii. OK, tak sme prebrali veľa rôznych veci, ktoré môžete robiť s HTML, nie? A ako môžete pravdepodobne vidieť, že je to nothing-- dúfajme, že nie príliš intim-- ak je, nemám na mysli znevažovať kohokoľvek. Ak máte problémy, príďte so mnou hovoriť. Ale väčšina z nich je práve pri pohľade na syntax, nie? Ak chcete zoznamu, Ak chcete nejaký zoznam, Ak chcete zarovnať alebo niečo Formát niečo, je to všetko len o druh vyhľadávania syntaxe pre HTML, nie? A ešte jedna vec, ktorá je celkom v pohode v skutočnosti je, ak idete to-- pozrime, čo je pekné webové stránky, ktoré sa nám páčia? Každý, kto má nejaké obľúbené webové stránky že sú v poriadku, aby sa on-line? Vieš čo, poďme jednoducho CS50. To je pekné a bezpečné, nie? OK, tak CS50 tu. A hele, je tu sekcia práve teraz. Ak sa vám páči, ako to vyzerá. Divákov: [nepočuteľné]. ALLISON Buchholtz-AU: Nie sme robiť meta časť, chlapci. Nie je to pravda. To by bolo v pohode, ale nebudeme robiť. Tak čo by ste mohli robiť, ak sa vám páči, ako to funguje, je môžete vždy pravdu kliknite na ľubovoľnej webovej stránky, ktoré sa vám páčia a vy môžete urobiť Zobraziť zdrojový kód stránky. To prinesie až všetky HTML. A to je vlastne veľmi dobrý spôsob, ako štýl svoje vlastné webové stránky. Prejdite na webové stránky, ktoré vám naozaj rád, a pozrite sa na HTML a zistiť, ako to urobili. A doslova, ak ako citovať veci, ak nie ste len kradnúť od ľudí, je to OK. Najmä pre CS50 [? financovať?] sme druh očakával, aby ste si inšpirácie z iných webových stránok. Tak neváhajte. Pozrite sa na svojich internetových stránkach, že si myslíte, že sú naozaj dosť a zistiť, ako sa používajú HTML a CSS robiť tieto veci. Takže ako vidíte tu, je tu samozrejme ako odkazy a máme triedu tu. Máme odkaz tu. Máme zoznam. Máme niektoré pravdepodobne obrázky niekde tu. Máme nejaké cool štýl tu. To je ďalšia vec, budeme robiť. Takže štýl, kedykoľvek vidíte tieto štýl konzola, je to v podstate CSS. Bene, si nejakú otázku? Divákov: Čo je to div? ALLISON Buchholtz-AU: div je len je-- to, čo je div? Divákov: Division. ALLISON Buchholtz-AU: Division. Jo, je to len ako oddeľovanie rôznych prvkov. OK, takže tu je to, čo sme ísť na ďalšie. Takže to nemusí byť najlepšia štýl, pretože ak si všimnete máme HTML a štýl na rovnakej stránke, a vlastne chceme oddeliť tie, OK? A v skutočnosti, dovoľte mi, aby som otvoriť môj pravý pretože to má byť PDF, takže máme style.css. Takže to, čo môžeme urobiť, tu je to sú chladné veci ako nejaké fade a tak by sme mohli skúsiť a urobiť to, ale mám pocit, ako by som neporiadok, že až za behu, tak som povzbudiť vás chlapci ísť to skúsiť na vlastnú päsť, ale nebudem to robiť práve teraz. Takže ak vy, pamätajte, ak ste niekedy hit problém set, niečo znášanie z boku. To má čo do činenia s fade a prechod a ktovie čo ešte. Divákov: A to je všetko, CSS a HTML? ALLISON Buchholtz-AU: Všetky CSS a HTML. Jo. Takže si môžete urobiť veľa naozaj studenej veci s CSS a HTML. A tak sa naše úžasné zajačik webové stránky tu sme budú robiť niečo trochu CSS štýl s ním. Takže ak budete mať štýl list, ktorý tu máme, stačí zavolať style.css. Môžete hovoriť, čo chcete. Čo je dôležité, je, že budeme odkazovať v našom web.html tu. Takže to, čo budeme robiť, je we-- takže nemám bordel tento up-- budeme odkazovať tieto dva súbory dohromady. Takže v rovnakom way-- idem k tomu analógiu C tu. Rovnakým spôsobom, že ak máte niektoré library-- a máme cs50.h-- náš prekladač to odkazy. To je len explicitné odkaz na našej strane. Takže rovnakým spôsobom, že robíme hash obsahuje niektoré súbory, čo Chystám sa napísať, je len HTML / CSS ekvivalent to. Sme len hovorím, OK, túto webovú stránku bude používať túto štýlov, OK? Takže máme link rel rovná štýlov. A potom tu máme typ, CSS. A potom href rovná. OK. Takže všetko to urobil tu je môžete myslieť na to, ako rovnakú vec ako hash patrí. Zrejme to vyzerá trochu viac zložité, ale vo všetkých prípadoch, je to skutočne to isté. Tak to je len niektoré prepojenie štýlov, to je typu text / css, a meno jeho je style.css. Čo je dôležité vedieť, je to, že na webovej stránke že som v práci tam, now-- web.html a style.css-- sú v rovnakom priečinku. Vzhľadom k tomu, v rôznych zložkách, musíte dať skutočný koreň na to, alebo cesta k nemu. Ale v tomto prípade, už sme to udržať super jednoduché a je to tu bude. Takže ak budeme robiť, že mám nejaký veci už vo fronte sem. Takže máme nejaké telo, ktoré sa deje majú naši farbu pozadia, ktorá teraz je svetlo modrá. Môžeme ju zmeniť, ak chceme, ale ak si dobre pamätám to správne, to by len zmeniť ju na svetlo modrou. A teraz máme svetlo modré pozadie. A mali sme here-- niekto môže pamätať ktorý z nich je hash ID alebo trieda? Divákov: ID. ALLISON Buchholtz-AU: ID. V pohode. Takže to, čo chceme robiť je, ktorá z týchto písiem alebo which-- chceme "Pozrite sa na roztomilý zajačik "byť fialové? Myslím si, že chceme, že je to fialová. Som celkom sa s tým je fialová. Takže to, čo robíte, je to, ID equals-- v tomto prípade Povedal som, čo, pekný farby tu. Sme znova. Naraz, to je fialová. OK, tak s ID, nezabudnite to musí byť jedinečné, tak som nikdy by nemali byť pomocou toto číslo nikde inde. Ale s triedou, ako sme tu s peknou písma, Mal by som byť schopný používať že kamkoľvek chcem. Tak poďme to urobiť jeden tady. Takže môžeme povedať trieda rovná pekný písmo. A ak sa pozrieme teraz, máme to v pohode celkom font tu. Takže možno chcem robiť oboje. OK, ja vlastne neviem, či je to chodiť do práce, ale chcem to skúsiť. A to je to, ako sa naučiť CSS a HTML. Si ako, viete, čo, chcem to skúsiť. Nie som si istý, či to bude fungovať. Uvidíme, či to funguje. A pozrite sa na to. Teraz je vo fialovej a je to celkom písmo. OK, takže budete mať všetky tieto rôzne veci, ktoré môžete urobiť. Máte otázku? Divákov: Jo. No, rovnako ako farby používate sú slová. Existuje spôsob, ako to urobiť farby s hexadecimálne RGB? ALLISON Buchholtz-AU: Môžete tiež to s hexadecimálnom, verím. Jo. Ale je to celkom fajn, keby vás nechcem ich vyhľadať. Môžete byť rovnako ako, fialové alebo modré. Divákov: Dúfajme, že Viete, čo to znamená. ALLISON Buchholtz-AU: Správne. Takže poďme túto čítať alebo Chartreuse. Prečo by ste niekedy vybrať Chartreuse? Je to zaujímavá farba. OK, tak samozrejme môžeme vidíme môže zmeniť veci však chceme. Ak by ste chceli, aby create-- povedzme Chceli sme vytvoriť ďalšiu triedu. Čo by mohlo vy chcete zmeniť? Ak máte vytiahnuť W3Schools " CSS dokumentácie, Nechám slovo vami. Môžeme to skúsiť a urobiť niečo zaujímavého sa to v posledných niekoľkých minút. Pretože som trochu dal rýchlokurz na veľa skvelých vecí že si môžete robiť. Ale nakoniec, ako som povedal, ak máte len experiment, budete veľa naučiť. Divákov: Díval ste sa na tento font? ALLISON Buchholtz-AU: Jo, Pozrel som sa, že písmo. Tak ako doslova, ja šiel to-- čo som urobil? Urobil som CSS zoznamu písiem a Potom som robil stack písmo, a potom som bol rád, pozrite sa tu sú všetky v pohode fonty, ktoré môžete urobiť. A bol tam jeden, tak Skopírovaný som ho do môjho schránky. A potom som bol rád, OK, v pohode, tam ideme. Všetko je hotové. Divákov: Takže vy sa uistiť, že CSS vie, čo to je písmo. ALLISON Buchholtz-AU: Áno. Divákov: Čo to povedať na záver? Cursive? ALLISON Buchholtz-AU: Cursive. Jo. Divákov: Obrázok na pozadí. ALLISON Buchholtz-AU: Obrázok na pozadí. OK. Takže mi chceš povedať, ako to urobiť. Nechám to na vás. Ja som len písať tu teraz. Bicykel je vo vašich rukách. Divákov: OK ALLISON Buchholtz-AU: OK. Čo to robím? Divákov: Doing-- viem, čo prichádza potom, čo zloženou zátvorkou. ALLISON Buchholtz-AU: OK. Tak pravdepodobne v tele, som by sa predpokladať, pretože sme robí s obrázkom na pozadí. Publikum: Jo, poďme to urobiť. ALLISON Buchholtz-AU: OK. Publikum: OK, takže pozadia hrubého čreva, a potom sme Potrebujete URL adresu tohto obrázku. Možno, že pseudo-kód, ktorý teraz, možno. ALLISON Buchholtz-AU: Čo by ste mi páči to-- Divákov: Rozmýšľam ako GIF. ALLISON Buchholtz-AU: GIF? To bude zaujímavé. OK, čo mám googling tu? Publikum: Nie, to je vaša voľba. ALLISON Buchholtz-AU: Prečo nie we--, či je to zajačik, Mám pocit, že by sme mali mať pekný trávnatý trávnik alebo tak niečo. Divákov: Meadow. Lúka. ALLISON Buchholtz-AU: lúka? OK. Divákov: Alebo Rachel Maddow. ALLISON Buchholtz-AU: To vyzerá pekne. Oh, to je malý, hoci. Potrebujeme dobré veľkosti obrázka. Poďme sa pozrieť. Oh, pozri. To je dosť lúka. Vieš, čo sa mi páči tento. Poďme skopírujte tento jeden. Publikum: OK, takže si myslím, že je to URL, otvorené zátvorky. ALLISON Buchholtz-AU: OK, URL. Divákov: Potom adresa. ALLISON Buchholtz-AU: OK. Je to, že všetko, čo potrebujeme? Divákov: Close zátvorky bodkočiarka, a priestor, pozadia pomlčka príloha hrubého čreva pevné a zložená zátvorka. ALLISON Buchholtz-AU: OK. Uvidíme, či to funguje. To bude celkom v pohode, ak to robí. Som naozaj nadšený tu. Nefungovalo to. Zaujímalo by ma, prečo. Divákov: Možno URL musí byť v citáciách. ALLISON Buchholtz-AU: Možno. A to je to, ako sa učíme, chlapci. Divákov: Môžeme mať pozadie farby a obrázok na pozadí? Divákov: Nie Jeden nahrádza druhej. ALLISON Buchholtz-AU: Ja neviem. Poďme sa pozrieť. Poďme sa na to pozrieť a uvidíte. Publikum: No, možno áno. [Vradiť hlasy] ALLISON Buchholtz-AU: OK, to je obviously-- Aj [nepočuteľné] tu. Tak OK. Divákov: nadstavec na pozadí. ALLISON Buchholtz-AU: Ah. Publikum: OK, ja neviem. ALLISON Buchholtz-AU: Je to Vyzerá to, že by malo fungovať. Ste si istý, že je hrubé črevo po URL? Publikum: Nie, to je bodkočiarkou. ALLISON Buchholtz-AU: To je bodkočiarka. Divákov: Povedal som hrubého čreva? ALLISON Buchholtz-AU: Hovoril ste, že dvojbodku. Divákov: Ale nie. ALLISON Buchholtz-AU: Tu to je. Publikum: Oh, počkaj, teraz nemôžeme čítať text. ALLISON Buchholtz-AU: Teraz nemôžete prečítať text, ale máme obrázok na pozadí. Mmhmm? Divákov: Má HTML podporovať dynamický obsah? Rovnako ako môžete zmeniť veľkosť ten obrázok v závislosti na veľkosti okna, alebo je to v CSS-- ALLISON Buchholtz-AU: Takže CSS musí robiť, že. Takže ak vy ste záujem v učení pokročilé CSS, Som spolupracovať výučby seminár o CSS na siedmej. A sľubujem, že to bude oveľa viac do hĺbky a oveľa viac v pohode veci v tejto sekcii. A môj čo-učiteľ je ako Celková front end web dev master. Takže to bude celkom v pohode, ak chcete dozvedieť o všetkých skvelých vecí že CSS sa dá robiť. Ale to, čo tu máme s jeho pozadie nadstavec fixed-- tak je to nejaký pevný size-- ale môžete skutočne dynamically-- ak ste niekedy webové stránky, ako Väčšina dobrých webové stránky bude robiť, pri nastavovaní veľkosť vášho prehliadača, upravuje pozadie alebo koľko ukazuje alebo preformátuje veci, že jo? Takže to je to, čo nazývame relatívna umiestnenie. A CSS môže skutočne chytiť, aká veľká je vaša šírka prehliadač, alebo, ako vysoká je, a môžete umiestniť veci podľa relatívnej veľkosti proti absolútnej veľkosti. A to je samozrejme vyspelejší CSS, ale to je niečo, čo môžete urobiť. Ak sa chcete dozvedieť viac, poď do môjho seminára. Tak to je niečo, čo môžete urobiť. A CSS môže v skutočnosti do-- CSS a JavaScript, ktorý dostaneme do ďalšej week-- vám umožní dynamicky meniť stránky, bez toho aby ste museli znovu im po celú dobu. A máte na to nejaký celkom v pohode veci. Takže je tam ešte jedna vec že vy chcieť robiť alebo niečo, čo si budete chcieť prezrieť? Máme 10 minút pred. Môžeme tiež odísť skôr, ale ak Ak chcete vykonať nejaké ďalšie webové veci, môžeme, ale nie som ťa nútiť. Ale môžeme tiež len jesť sladkosti. Divákov: Zvýraznenie textu biele, takže môžete prečítať. ALLISON Buchholtz-AU: OK. Takže v tomto prípade, chceme nejakú str. Divákov: Mali by sme to urobiť telo tak, že sa vzťahuje na celú stranu? ALLISON Buchholtz-AU: Áno, môžeme v skutočnosti. To je dobrý nápad. Tak sme sa vám have-- vieme, čo by malo byť? Ja neviem, či môžeme urobiť farbu textu. Chcel som, aby sa pokúsila vytvoriť ďalšiu triedu tu. Divákov: Ako sa vám to že má návrhy? ALLISON Buchholtz-AU: Tak ak vy ste záujem, to je ďalší textové editor s názvom Sublime. Mali by ste byť schopní nainštalujte ju do Vášho prístroja. Niekedy to je trochu zložitejšie. Ak chcete pomôcť s tým, Som super radi pomôžu s ním, pretože gedit je skvelý a je to úžasné, pretože si môžete skompilovať na dne, ale ja naozaj ako Sublime, pretože je to celkom a to sa robiť veci ako je auto-kompletné. Takže si môžete určite neváhajte dajte mi vedieť, ak chcete urobiť. Ak ste práve google "Sublime text, "typicky má návod, ako nainštalovať na rôznych operačných systémoch. Je to naozaj cool, I si, podľa môjho názoru. Tak str. Myslím, že si to jednoducho urobiť text-- alebo môžeme proste farba je "biela". Tam. Takže to, čo tu robil som, že som nezmenil celý text. Ale p je tu len tag, ktorý máme, nie? Tento odsek tag. Tak som práve vytvorili CSS prvok, ktorý povedal: OK, niečo s týmto štítkom p, aby biela farba. Takže ak ste si všimli, to robilo tento biely a to biele. To nedávalo náš zoznam biele, pretože to nie je spojené s tým. Dalo by sa prejsť a tie by mohli say-- Divákov: Do farbu pozadia. ALLISON Buchholtz-AU: Farba pozadia? Divákov: Pozadie do potrubia v farba kam dať značku str. ALLISON Buchholtz-AU: OK. Chceš to biele? Divákov: Mmhmm. ALLISON Buchholtz-AU: OK. Tu to je. Divákov: To je divný. ALLISON Buchholtz-AU: Celkom v pohode, nie? Takže ak sa vám proste flákať, budete veľa naučiť. A to môže byť celkom v pohode. Myslím si, že je to určite viac potešujúce ako niekedy pretože nemusíte čakať pre váš program skompilovať. Môžete len hit Refresh a ty si ako, oh, pozri, to fungovalo, alebo oh, ja som asi niečo chýba. A to je niečo, čo je naozaj v pohode o tejto ďalšej časti triedy, je to určite, ja si myslí, ľahšie kontrolovať ako idete po ceste proti museli písať tieto dlhé programy a ktorý si želá a modlí sa že to funguje na konci. Takže s tým, myslím, že vy všetci sa zdajú dobré. Ak máte nejaké otázky, ako vždy, prišiel so mnou hovoriť, príde, dajte mi vedieť. Budem priamo pred hotelom pre najbližších 15 minút ak si len chcete porozprávať o čokoľvek a všetko. Takže dúfam, že vás guys-- veľa šťastia s týmto pset. Uzávierka prihlášok je v piatok napoludnie preto, že bol prepustený neskoro. Tak som pravdepodobne bude vidieť Mnoho z vás vo štvrtok, ale dúfajme, že nie. Možno, že budete mať to urobiť do tej doby. Ja by som byť super pyšný. Ale ak nie, budem ťa vidím vo štvrtok. Môžete tiež použiť neskorý dátum, ktoré rozširuje na sobotu napoludnie. Ale ja ne-- čo? Divákov: Halloween. ALLISON Buchholtz-AU: Je Halloween, a, a, b, Nemyslím si, že tam bude byť úradné hodiny v piatok. Takže naozaj sa pokúsiť to urobiť tým, Piatok, takže sa všetci môžeme oslavovať Blahoslaviť víkend. Tak jo, uvidíme sa chalani budúci týždeň.