[Přehrávání hudby] ALLISON Buchholtz-AU: Dobře, všichni. Vítejte zpět na části. Takže náš program na dnešek se děje přes mnohem webových dev věci. Nevím, kolik z jste viděli své psets protože to bylo propuštěno dnes ráno. Já bych za kolik lidé číst spec, ale když viděl, jak jste měli všichni z, stejně jako sedm hodin na to podívat a to v pondělí a ve pravděpodobně jste měl třídu, Budu předpokládat, že většina z vás ne. Pokud máte další slávu. Ty v podstatě pomáhá implementovat jednoduchý web server C, což je zbrusu nový pset, tak vy si být morčat. To bude legrace, divoký týden ale myslím, že to bude hodně legrace a to bude opravdu dobrá zkušenost ve skutečnosti. Tak, aby vás připraví na že, v části dnes máme jít chmod, TCP / IP, a pak trochu HTML a CSS. 

Na konci, budete vlastně kód up jednoduché webové stránky spolu které vám pomohou kluci trochu dostat více seznámen s tím. A pak, pokud jste zvedl vaše kvízy, jsou v přední části, ale jsem si jistý, že všichni zde má svůj kvíz. A také v takovém případě, řešení nejsou až dosud, ale jakmile jsme finish-- líbí, Posledních pár lidí, kteří se svou quizzes-- budou up. Pokud máte nějaké otázky do té doby, neváhejte a napište mi osobně. Budu reagovat s jednotlivcem otázky, jak jsem vždycky dělat. 

Takže v takovém případě, chmod. Takže v podstatě všechno vám potřebujete vědět o chmod je, že to slouží ke změně oprávnění k souborům, že jo? Takže je to jen některé systémy to nazvat změnit oprávnění, jak se zde říká. A pokud jste někdy chtěli vidět jaká oprávnění soubor má, místo toho jen to, ls, jsi to mohl udělat ls -l. l stojí na dlouho. 

Takže budete dělat dlouhé seznamy všeho, a to vám poskytne mnohem podrobnější informace o každé z vašich souborů. A uvidíte, something-- jsem chystá přeskočit na second-- ale uvidíte něco podobného že horní linie se pro každý soubor. A budeme pokračovat tím, co to znamená. 

Takže v podstatě, změnit Vaše oprávnění k souborům, si jen chcete použít chmod. Můžete si ji představit jako každý jiný UNIX volání jako ls nebo CD, nebo kdoví co ještě. Je to jen trochu jiné, jako je volání. 

Takže děláme chmod a pak budeme tři číslice typicky. Existuje několik způsobů, jak to, z nichž jedna půjdeme pryč. Ale obvykle, budete mít tři Číslice v rozsahu 0-7 pokaždé. 

Takže jedna věc je, že existují tři různé oprávnění že můžeme dát každý soubor. A je to čitelné, což je zastoupená r, který bude mít smysl v trochu; W, což je zapisovat; a spustitelný, což je x. Vím, že e jeden spustitelný, možná ne největší smysl, ale my představují ji x. 

A co se stane, potom je každý z těchto mají také zastoupení číslo. Máme tedy 1, 2, a 4. A v podstatě to, co se stane, je každý z těchto tří čísel zde odpovídá jiný soubor uživatelů že tato oprávnění se týkají. 

Takže si můžete myslet, že první číslo odpovídá skutečnému uživateli nebo vlastník souboru, druhý počet bude odpovídat skupinu, a poslední se týká do světa, OK? Takže to, co se stane, je pamatovat ty numbers-- R je 4, w je 2, x je 1, ne? Tohle-- pokud součet těchto plánů, které vám umožní, že první číslo že bychom mohli vstupu v našem chmod. 

Takže v tomto případě, co by toto číslo být? To by bylo 4 a 2 plus 1, což je 7, ne? A v tomto případě, tyto nemají nic, takže tady by přeložit chmod 700, OK? A co to dělá, je, že poskytuje všechny z těchto oprávnění na vaše uživatele. 

Takže to znamená, že náš uživatele mohou dělat, co chtějí. Mohou číst tento soubor. Mohou tento soubor spustit. Mohou zapisovat do tohoto souboru. Ale skupina a svět, ne oprávnění vůbec, OK? 

Tak další způsob, jak napsat, že můžeme dělat chmod ze tří číslic, z nichž každá odpovídá to bez ohledu na částku, nebo že specifická skupina, specifická podmnožina. Nebo můžeme udělat opravdu něco jiného. Vydrž. Můžeme udělat něco s nimi tady. 

Jak mnozí z vás viděli příklad kde to je, chmod a Plus X? Viděli jste, že v přednášce, myslím, že? Tak znamená všechny. To znamená, že jej pro všechny uživatele, kterou jsem zapomněl dát sem. 

Ale navíc x, kdybychom Všimněte si zde, pokud děláme na chmod-- co skupina jsme mluví o plus oprávnění chceme dát. Takže to může být plus nebo mínus. Plus dodává svolení. Minus odnímá povolení. Docela intuitivní, myslím. 

Tak a x znamená chmod. Takže změnit oprávnění všech lidí Pokud je to je-- přidat oprávnění. A x-- to znamená, co povolení jsme udělení každého. Číst, psát, nebo spustit? 

Diváků: Spustit. 

ALLISON Buchholtz-AU: Spustit. Takže dáváme všem uživatelům povolení ke spuštění tohoto souboru, OK? Takže co kdybychom chtěli udělat že se číselné podobě? Takže pamatujte na numerické, chceme tři čísla. 

Diváků: 4. ALLISON Buchholtz-AU: Co to bylo? Diváků: 4. ALLISON Buchholtz-AU: Ne 4. Publikum: 0, 0, 4. ALLISON Buchholtz-AU: No, chceme dát to všem uživatelům, že jo? Takže budeme mít počet v každé pozici. To bude Stejný počet v každém slotu protože my prostě chceme dát everyone spustitelné oprávnění. Takže spustitelný soubor je 1, ale na správné cestě. 

Takže když jsme se chmod 111, které by jako ekvivalent chmod plus x. Znamená to, že smysl pro každého? Chystáme se projít pár příkladů. 

Tak velký stánek s jídlem tady je to tady, ale znamená jen to dát všem uživatelům. u je, pokud si jen chcete dát nebo vzít zvláštní povolení od uživatele nebo vlastníka. g je pro skupinu, tak, že prostřední číslice. A pak další si můžete myslet jako svět, že poslední číslice. 

Takže s tím, půjdeme na příkladu, protože mám pocit, že příklady vždy aby tyto věci srozumitelnější. Takže rwx-- jsme prošli tohle-- může být také představovat jako 700. To je příklad jsme se dívali na více obrazu. Tak chmod 444 na nějakém souboru by se dát to, co oprávnění? Byli jste opravdu blízko. Diváků: Čitelný pro všechny. ALLISON Buchholtz-AU: čitelný. Tak čitelný pro všechny, ne? A co pak je to jiný způsob, jak to udělat? Pokud chceme dělat chmod buď r je nebo w je plus a mínusy, co by to výzva vypadat? Bylo by chmod, co? 

Diváků: a r. 

ALLISON Buchholtz-AU: a r na 5. OK, takže to je stejné jako to, jen dva různé překlady o stejnou věc. Takže s tím, máme to. Takže chci, vy vyzkoušet a psát Tento druh v jejich opačným způsobem. 

Tak s chmod 555, co by to bylo? Bude to plus nebo u a nebo kdoví co ještě? Pro u Plus X, dej mi tři čísla. A pak mi řekni, o čem oprávnění jsme vlastně přiznání, a kdo? 

Takže budu vám kluci dva minut, aby se na tom pracovat. Neváhejte a mluvit s každým jiný. Pro ty z vás, kteří přišli v malém pozdě, je cukroví a košile. Nechali jsme tři košile, a máme Kit Kats a kytic. Takže neváhejte přijít drapák někteří v tomto malém mezihra. 

Také poslední z nich je složité. Je to dva chmods za poslední jeden. Ve skutečnosti, dovolte mi, abych zavřete ty dveře zatímco vy jste na tom pracujeme. Candy je vždy nutné v pondělí odpoledne. 

OK, tak chmod 555. Jaký je další způsob, jak bychom mohli napsat, že? Nějaké nápady? Ano. 

Diváků: a RX. 

ALLISON Buchholtz-AU: r a RX. Přejete si vysvětlit, proč bych se rx? 

Diváků: Protože máte 5, tak to je 4 plus 1, tak, aby četl a spustitelný soubor, a to pro všechny. ALLISON Buchholtz-AU: Správně. Takže jen zopakovat, 5 zde známe jako součet 4 a 1, protože každé číslo v naší trojice je Součet oprávnění pro tuto podmnožinu, že jo? Buď uživatel, skupina, nebo svět. Takže v tomto případě, my víme, že 5 musí být vytvořeny 4 a 1. 

A 4 a 1 odpovídají čitelné a spustitelné. Dáváme ho všem, takže můžeme udělat chmod a navíc RX. A samozřejmě, šli jsme tudy otázky, takže teď je tento soubor spustitelný a čitelný pro všechny. 

Takže to, co o druhé? Co by mohlo číslo, že jeden bude? Nějaké nápady? Jděte do toho. 

Diváků: 100 [neslyšitelné]. 

ALLISON Buchholtz-AU: 100. Přesně tak. Takže chceš vysvětlit, proč 100? Diváků: Vzhledem k tomu, že je to pro uživatel, takže je to na prvním místě. A pak x spustitelného je 1. ALLISON Buchholtz-AU: Přesně tak. Tak jsme se udělení spustitelný oprávnění jen pro uživatele. Takže v tomto případě, by bylo 100. A já mám všechny odpovědi se na další snímek v případě, píšete spoustu věcí dolů. 

OK, takže to další je ve skutečnosti provádí se dvěma chmods, jsi to mohl udělat. Takže má někdo nějaký nápad, jak by mohl získat chmod 640 přepsána v jinak? Můžete si a pak změnit uživatele můžete změnit skupina je moje rada. 

Takže když jsme byli jen změnou Uživatel, který je to první zde, co by mohlo náš hovor bude? Takže uživatel u, že jo? Takže chmod u a co? Mmhmm? 

Diváků: rw. ALLISON Buchholtz-AU: rw. Pravdu, protože číst a psát, protože přečtené je 4, w je 2, ty, které společně jako suma 6. Tak jsme si chmod u plus RW, a dostaneme náš první 6 tam. 

Takže dostat 4, chceme nyní změnit své nastavení skupiny. Takže budeme dělat chmod g navíc, co? Co je to 4? 

Diváků: r. ALLISON Buchholtz-AU: r. Přesně tak. Takže dáváme majitele číst a psát oprávnění a dáváme skupině Číst oprávnění, které máme všichni tady. Mmhmm? 

Diváků: Pokud můžete něco napsat, z toho nevyplývá, můžete ji provést? 

ALLISON Buchholtz-AU: Vy Můžete psát na something-- Nevěřím, že to znamená, můžete ji provést. V pohodě. Tak to je vše, co jsme právě prošli. Takže na tento další, je to tak nějak běžné případy které chcete mít na mysl nastavit váš problém. Jedná se typicky o oprávnění že chceme použít. 

Takže pro 711, který dává nás, samozřejmě, uživatel všechna oprávnění, která má tendenci dávat smysl. A pak je to proveditelné skupinou na světě, který dává smysl pokud máte nějaké adresáře, chtějí mít možnost procházet do něj. Lidé potřebují mít přístup. 

Pro každý soubor non-PHP, budete používat 644, které by dělat to, co? Co to znamenalo, nebo co oprávnění se to dá? Takže majitel může co? Diváků: číst a psát. ALLISON Buchholtz-AU: číst a psát. A pak skupina a další můžete jen číst, že jo? A pak chmod 600 pro jakýkoli PHP soubory, které používají, váš majitel, znovu, může číst a zapisovat do ní ale všichni ostatní jsou tak nějak zaslepit. 

Takže to bude ve skutečnosti být užitečné, když se dostanete do problému nastavit příští týden, kdy jste vlastně budování internetové stránky. Takže pokud jste se někdy dostanete do nějaké divné chování kde to není načítání správně, možná vás je třeba přidat spustitelný soubor povolení, nebo možná budete potřebovat číst nebo pište svolení. Maličkosti, které mají tendenci k vypnutí lidí up, ale je to něco jako go- při spuštění příští týden pset. A já bych vám dát víc tipy na tento týden pset, ale ještě jsem se na to podívat, protože to bylo propuštěno dnes ráno. Ale vy jste mě e-mail, budu se podíval na to v době, kdy jsem se reagovat zítra. 

Takže teď, je každý dobrý s chmod? Jakékoliv přetrvávající otázky? Docela jednoduché. Tak nějak sledování toho, co číst, psát a spouštět čísla je asi ta nejtěžší část. 

Tak s TCP / IP, všechny tyto protokoly, něco jako se svými datovými strukturami minulý týden, je to mnohem víc důležité, aby druh dostat vyšší úroveň intuice z nich. To není CS143, kam jedeme vás požádat, abyste realizovat síť, takže budete mít v pořádku, pokud ty to nechápeš natvrdlý kostrbatý všech protokolů. Co je důležité pochopit, něco jako to, co představují a proč jsou důležité. 

Takže TCP / IP, samozřejmě, že je Transmission Control Protocol nebo Internet Protocol, což je v podstatě jen o soubor zákonů v podstatě nebo normy, které sdělit údaje jak by měly být řešeny, jak by mělo být paketizovaný, přenášeny a přijímány. Takže to v podstatě, stejně jako Píše se tu, zvyšuje šance že údaje získává, kde Chcete se dostat do. 

Jsem si jistý, jestli vy šel do přednáška nebo sledoval on-line, on has-- nevím kdyby to udělal v letošním roce, ale vím, že v loňském roce, měl demo, kde měl obraz Rob a rozdělil ji do čtyři a vložte jej do obálky a snažil se ho přes Sanders. A můžete druh myslet na to takhle. Je to jen soubor pravidel, která řekněte údaje, jak se dostat někam a umožňuje zjistit, zda vám chybí údaje, stejným způsobem, že pokud jste přičemž více stránek poznámek a označit je s straně 104, strana 204, a jdete zpátky studovat později a že vám něco chybí something-- nemůžete najít stránku 304-- víte něco není v pořádku, tak vás můžete prohlédnout své poznámky znovu, nebo požádejte někoho, aby vám znovu odeslat skripta od tohoto dne. Stejně jako s údaji na internetu. Pokud se ptám na něco z nějakého serveru a je třeba odeslat to v množství paketů, pravděpodobně bude číslo je nějakým způsobem, ať mi vědět, kolik bych měl obdržet, a řekni mi, oh, to je jedna z 10 nebo se jedná o jeden z 10.000. Tímto způsobem, když jdu k sestavení všechny kousky dohromady, Vím, že když se něco chybí a já jsem se zeptat na to znovu. Dává to smysl? Jen soubor pravidel. Na jeho základě nastavení pravidel, OK? 

Tak jsme také mluvili Něco málo o porty. To je opravdu jen standard, který umožňuje zjistit, jaký typ dat je přenášen v těchto paketech. Pokud půjdeme s naší obálka příklad, my ne vím, že je to obrázek Rob tam, pokud se nám to napsat na vnější straně našeho obálky. Takže porty jsou v podstatě totéž. Je to jen způsob, jak zjistit, co typ dat je přenášen. 

Takže máme všechny nejběžnější zde. Takže 21-- jsou to také druh jako se dobré věci vědět. Je to druh snadno kvíz otázku. Buď rád, co port 80 dělat? Nebo, co port 443 dělat? Tak dobré věci vědět. 

Takže máme tady, 21 souborů transfer protocol, tak jen pravidla, kterými se řídí přenos souborů. 25, něco, co my všichni používat příliš mnoho, je e-mail. 53 je název domény systém, který je v podstatě jen druh vyhledávání pro IP adresa doménového jména. 

Tak jsem si docela jistý, že to bylo jsou uvedeny v přednášce, pokud máte přejít na něco jako google.com, má IP adresu že je s ním spojené. Není to vlastně google.com. A tak 53 je port že ve skutečnosti se péče o druhu jeho překlad do té IP adresu pro vás. A pak 80 a 443 jsou velmi časté. Buď máte své webové stránky, nebo máte zabezpečené webové stránky, které hodně webových stránkách jsou přenos přes dodnes. 

Tak to je docela na vysoké úrovni přehled přenosu protokolu. Nevidím mnohem víc do hloubky. Je to druh super věci pokud máte zájem. Je tu spousta zdrojů. Wikipedia je ve skutečnosti docela dobrá stránka. Tak jsem se na to dívat před chvílí, tak bych vřele doporučuji při pohledu na to, pokud máte zájem nebo vzít 143 do dvou let, protože Myslím, že je každý druhý rok. 

Takže na konci tohoto, jsme mluví o webových stránkách a HTTP, což je vlastně naše další téma dnes, než půjdeme do HTML a CSS a můžete skutečně kód do webové stránky. Bude to zábava. Budeme mít fotky zajíčci a to bude skvělé. 

Takže HTTP, jak můžete vidět zde, je jedním z krásných zkratky pro tento týden, což je Hypertext Transfer Protocol. Takže znovu, je to jen další sada pravidel, která určuje, hypertext převést, v tomto případě. Takže nejlepší způsob, jak zjistit o to je jen druh rozebrat to do tato jednotlivá slova protože tam je spousta slova na obrazovce tam. 

Takže budeme začínat hypertextu. Takže "hyper", si můžete myslet "Nad", stejně jako super-typ věc. Takže je to opravdu jen Text převzat do další úroveň, takže je to jako super textu, jako dalším textu. Takže je to v podstatě jen text, který nám dává více informací, než normální text dělá, OK? 

Takže v tomto případě tady, to je hypertext. To nám říká, že máme nějaký odkaz, který budeme, který je cs50.net, který Nyní je cs50.harvard.edu. Tyto snímky jsou trochu starý. A to bude zobrazovat to, protože to, jako hypertextový odkaz, a pak opravdu cool webové stránky. 

Takže je to text, který je trochu bit opravdu skvělých věcí tam. Takže můžete spojit věci a můžete vkládání obrázků a můžete styl věci. A nejznámější věc, která vás kluci mají pravděpodobně s hypertextu je HyperText Markup Language, HTML, což je samozřejmě všechno webu které vidíme kolem nás, udělil s nějakým stylem CSS házet. 

Ale pokud byl někdo opravdu velký s MySpace, Jsem si jistý, že všichni používali HTML po celou dobu k vytvoření ty perfektní profily, ne? Mám pocit, že by mohl být zastaralé reference teď, ale co. Jen little-- vy nejsou tak mnohem mladší. Někteří z vás jsou starší než já. MySpace je stále věc, když jsem byl mladý. Nejsem tak starý. 

Tak jako tak, HTML jen forma hypertextu. Takže hypertext je jen Text s přidanými funkcemi. Takže transfer protocol je pravděpodobně více ošemetný věc vysvětlit. Je zřejmé, transfer-- jen přenos dat. Takže buď mezi klientem, jako Váš web bratr a server. Takže v podstatě jen způsob, jak internet funguje. 

Tak přesné žádost jak tyto práce jsme ve skutečnosti bude vypadat na například požadavek i odpověď. Ale jak jsme se požádat Informace ze serveru a jak server reaguje na nás co tento přenosový protokol upravuje. Takže požadavek a odpověď má sledovat tyto konkrétní soubor pravidel. Je standardizován, takže bez ohledu na to kam pomocí internetu, vždy funguje stejně, OK? 

Opět platí, že protokol, soubor pravidel. Je to prostě normální interakce stejným způsobem že profesor Malan hovoří o tom, pokud někdo rozšiřuje svou ruku, víte, že je to běžné zdvořilosti oslovit vaše ven a protřepejte ruce. Je to protokol, ne? 

Tak jsem dát nějaké standardizované žádosti, který chci potřást rukou, a dáš nějaké standardizované odpověď, která je buď ne, díky nebo můžete zkusit a zavrtím ruční nebo možná budete snažit a pěst bump mě. A my nemáme protokol za to. To se porouchá. Ale pokud každý následující Stejný protokol, samozřejmě, to jde mnohem víc problémů. Lidé se navzájem poznat. Všichni jsou šťastní. 

Tak ve světě internetu, všichni se řídí stejnými rules-- o něco lepší než sociální normy. Ale s tím se podíváme za žádost zde např. Takže tam je to málo Klíčem je zde na dně které vám řekne, různé barvy, to, co má na mysli. 

Takže bílá je stejně jako metodu Žádost a protokol version-- to požádají metoda verze. A pak je nějaký název pole a hodnota z této oblasti, které bude jít do velmi, velmi brzy. Takže tento požadavek je příkladem. To je jako já rozšíření ven, chce, abych se představil. 

To je to, co klient nebo to, co váš webový prohlížeč bude odeslání na server. Tak to je požadavek GET, takže je to žádat o něco, co ze serveru. A to je, samozřejmě, HTTP a to je verze 1.1. 

Takže zbytek tohle je to, co nazýváme záhlaví, a jeho další informace které nám dává lepší představu o tom, to, co jsme vlastně žádají, nebo informace, které chceme dát server, které by mohly být relevantní. Takže User-Agent dává víc Popis on-- například zde, curl / 7.24.0 je vlastně řekne server, který jsme pomocí Google Chrome jako náš prohlížeči. Takže pokud jste někdy slyšel o lidech, kteří mluví o to, aby aplikace reagovat na více prohlížečů, To je něco, co by se proto použít, pokud Nevím, co prohlížeč požadavek přichází z, nemůžete přizpůsobit data na to. Takže v tomto případě uživatel právě dává tento druh z identifikačních údajů o tom, co prohlížeč Vaše uživatelské právě používá, OK? 

Takže máme spoustu, což je kde jsme vlastně chtějí jít. V tomto případě, chceme jít do apple.com, koupit nějaké cool nové iPady nebo tak něco, možná roztomilý světla na našich koleji pokoje. A název hodnoty na konci je jen plnivo, jen obecně věc pro vás vidět. To není ve skutečnosti odpovídají na cokoliv zde. 

Takže můžete mít tolik, nebo jako málo, jak chcete, v každém případě. Většinu času, to jsou nepovinné. Záleží jen na tom, co musíte v prohlížeči, od uživatele, aby se správně dát požadavek. Nebo to závisí na tom, jaké jsou vaše uživatele ve skutečnosti se chce, aby se na server. Takže budete mít mnoho, mnoho tyto názvy polí záhlaví nebo můžete mít jen pár. Stejně jako u mnoha věcí Řekl jsem v této části, to opravdu záleží na kontextu o tom, jak používáte tuto. 

Takže to má smysl pro každého? To je jen příklad žádost, záhlaví, kdoví co ještě. OK, takže s tím máme nějaké odpovědi. 

Opět máme stavový kód, protokol verze, a pak název pole a pole cení jako vždy. Takže náš protokol verze a náš stavový kód 200. OK, což znamená, že, Ano, všechno šlo dobře. Zde je to, co chcete. 

Typ serveru, obsah type-- nám říká, OK, ty jsi dostane nějaký text HTML. Zde je délka a to zde je Co byste měli udělat s připojením. OK, tak ještě jednou, v závislosti na data, která jsou žádá, v závislosti na tom, co Server se chce vrátit k vám, můžete mít více těchto pole jména, můžete mít méně. Závisí zcela kontext. 

A pokud jde o tento status kód zde, samozřejmě, 200 není jediný byste mohli mít, ne? Máme spoustu stavových kódů. Pamatuje si někdo některý z jiní, že jsme se zmínili v přednášce? Mnoho z nich začínají 4. 

Diváků: 404. 

ALLISON Buchholtz-AU: 404, který je? 

Diváků: Soubor nebyl nalezen? 

ALLISON Buchholtz-AU: Soubor nenalezen. Přesně tak. A co 403? Diváků: Forbidden. ALLISON Buchholtz-AU: Forbidden. Tak co si myslíte to znamená, že s chmods? 

Diváků: To znamená, že vás Nemáte oprávnění si ho přečíst. 

ALLISON Buchholtz-AU: Přesně tak. Nějakým způsobem, že nemáte povolení k přístupu k nim, ne? Takže 404, 403. Tam je opravdu k smíchu ten, který vždy představit každý rok, Měl jsem dát sem, jako 413, což je, že jsem konvice. Můžete google to. Je to legrační, jako, že je kód 413 a to, že jsem konvice. Což nevím, proč byste kdy je třeba, aby na internetu, ale to jsem odbočil. Diváků: Možná, že jste konvice na čaj. ALLISON Buchholtz-AU: Možná server je konvice na čaj. Kdo ví? Dobře, tak se chystáme přechod do reálného kódování. Mám pocit, že vy se chystáte odsud pěkně rychle. 

Diváků: Proč to dělá říkat "server: dvakrát? 

ALLISON Buchholtz-AU: Hm? Server dvakrát? To je dobrá otázka. Nejsem si jistý. Zjistím, a Já vám e-mail všem. 

OK, jakékoliv další otázky, které vedle? Dobré? V pohodě. 

HTML a CSS, a teď jsme dostat do všech zábavných částí. Tak jak jsem se zmínil dříve, HTML je pravděpodobně jedna z věcí, vy jste nejvíce obeznámeni s. Takže máme HyperText Markup Language. 

Nejlepší způsob, jak se dozvědět tohle-- vůbec se mi nelíbí nějaké připravené snímky nebo tak něco pro vás s HTML. Je to opravdu o učení syntaxe. A pokud jste byli na MySpace den, měli byste to dolů. 

Takže opravdu, největší věc je jen cvičit a experimentovat. Jeden z největších zdrojů bych Důrazně doporučujeme používat je W3Schools. Takže jen W, 3 a pak školy. Mají hodně zdroje na HTML, CSS na, a oni vlastně mají split screen něco takového kde vám dám příklad kódu. Můžete si hrát s tím, ji změnit, a stiskněte tlačítko Aktualizovat, a ukážu ti, co ji vlastně dělá na webovou stránku. 

Takže bych velmi doporučujeme používat to. Je to docela v pohodě. Nebudete mít seg chyby tady, když se něco pokazí. Pokud se vám podaří dostat chyba seg s HTML, dejte mi vědět, protože jsem bude skutečný zaujalo. Ale je to proto, že opravdu cool můžete změnit věci, můžete vidět, jak aktualizovat žít. A myslím, že budete mít hodně více intuitivní pochopení HTML pokud jste skutečně jen strávit nějaký čas s ním experimentovat. Takže to je důvod, proč jsem řekl, praxe a experiment. 

Google, odtud na out, bude pravděpodobně jeden z vašich nejlepších zdrojů a přáteli. Nebo Bing-- Pracuji ve společnosti Microsoft, takže možná bych měl říct Bing. Ale cokoliv Je jen bude syntax, tak pochopení toho, co jsou tagy, understanding-- alespoň CSS-- jak změnit některé atributy. Bude to mimořádně užitečné. 

Takže i když jsme ne nějaké připravené věci, Máme takovou některých osvědčených postupů že chceme vy vyzkoušet a řídit by-- nebo spíše, měli byste dodržovat až do dalšího oznámení. Takže uzavřít všechny své značky. Doufejme, že všichni has-- víte, co, pokud to nemá smysl teď, Slibuji, že to bude mít smysl když jsme kódování na stránku. Ale zavřít všechny své značky. Takže pokud budete mít nějaké záhlaví, které je držák, H1, držák, ujistěte se, že vždy, když budete hotovi s tím, zavřete toto záhlaví. Ověření stránku s W3 Validator. Pokud nechcete ukončit své značky, můžete dostat neočekávané chování. Bude tvrdit, že vaše stránka je neplatná pokud se jej spustit prostřednictvím tohoto validátoru. Takže když v doubt-- a zejména na tento týden a příští týden je pset-- stejným způsobem, že se ptáme použít zkontrolovat 50 a typ 50, byste mohli myslet na to, jako jeden z vašich kontrol, OK? 

Takže pokud to neprojde W3 Validator. To je něco, co jsme se zajet vás. Nebo Říkám vám pravdu teď budu ukotvit vás. Takže ujistěte se, že potvrzuje. Není to těžké. Jen vložíte do kódu a bude to buď říci dobrou práci nebo vám chybí něco stejným způsobem že styl 50 vám řekne, kam popletl. 

A pak poslední věc je chcete oddělit Váš značení, což je vše, co HTML nebo text, a váš styl. Takže uděláme příklad tohoto práva po tomto. Tak HTML a CSS by měly být odděleny. A budeme mluvit o MVC, který je Model View Controller, příští týden. Vy byste asi dozvědět se o tom v přednášce Zítra, pokud jste měli to už dnes naučila. 

A je to jen trochu paradigma, které máme tendenci pro použití při tvorbě webu Stránky oddělit věci. Můžete si ji stejným způsobem že máme tendenci jednotlivých funkcí v jazyce C kde hash najít věci. Je to jen způsob, jak aby váš život jednodušší. To odděluje atributy nebo kód byste používat znovu a znovu, ale tímto způsobem, je to trochu z udržuje ji hezky a upraveně. A chcete-li změnit jedna věc, co si jen jednou změnit a to změnilo všude jinde. Takže je to víc pro vaše jednoduchost a flexibilita. 

Tak s CSS, je to velmi podobné HTML, ale místo značek že teď už jsem se zmínil jen jsme použít to, co se nazývá selektorů. A v podstatě tak nějak z spojují určité značky ve formátu HTML s různými atributy. A když říkám atributy, mám na mysli věci jako barvu písma, styl písma, barva pozadí, barva textu. Tyto druhy věcí. Stejně jako když je to na střed, jestli je to napravo, pokud je to inverted-- vše těchto vychytávek. Jakékoliv stylistické věci že děláte do textu, To je to, co mám na mysli s atributy. 

A pak dvě hlavní věci, které byste měli vědět, je, že selectors-- dva hlavní factors-- jsou ID, který je jedinečný. Můžete použít jen to, že na jednu věc. V opačném případě to bude řvát na vás. A když jsme ho definovat v souboru CSS, že bude být hash ID a pak jaké atributy chceme. Slibuji, že budeme projít příklad. Bude to mnohem větší smysl. 

Třída se může vztahovat na více blocích. Takže můžete mít svůj první a třetí pododstavec mají stejný druh atributů pokud můžete přiřadit jim stejné třídy. A když jsme je definovat CSS, děláme třídu bodů, s třídou je co Chcete, aby byl jmenován. 

Takže vím, že to je správné nyní velmi abstraktní. To je důvod, proč jedeme do kódu. Vím, že vy milujete že, a všichni jsou mi pomůžeš, protože je to vaše webové stránky. To je naše sekce je webová stránka, kluci. Takže existují nějaké otázky, než jsem vypněte aplikaci PowerPoint nebo cokoliv Chcete, abych posouvat zpět aby předtím, než začneme kódování? 

Diváků: Když se řekne zápas tagy, máš na mysli voliče nebo značky? ALLISON Buchholtz-AU: Můžete uvažovat o nich jako o stejnou věc. Je to jen různá slova. Myslím, že jako selektory. Ale selektory také mapovat tagy. Takže si můžete uvažovat o nich jako efektivně totéž. Slibuji, že to bude dělat větší smysl, když kód. Cokoliv od PowerPoint nebo jakékoliv otázky teď než jsme ve skutečnosti vytvořit stránku naší sekce? Všichni připraveni? V pohodě. 

Tak jsem si jeden začal. Dovolte mi, abych zvýšit písmo pro vás. OK, tak teď jen musíme holé kosti webové stránky tady. 

Máme nějaké HTML. Máme nějakou hlavičku, kterou jsme viz zde například webové stránky. Některé titul, některé písmo. Jedná se o značky, OK? Takže když jsem na mysli zavřete své značky, vidíme, zde tento držák hlava je váš otevření tag, a to držák / Hlava zavření, OK? 

Takže byste mohli myslet na to, jak Vaše šle ve vašich pokud to podmínky nebo vaše za smyček. Pokud máte jeden na začátku, Chcete-jeden na konci. To bude i nadále pracovat většinu času v případě, že nemáte uzavřenou značku, ale nejlepší je zavřít tagy. 

Takže v tomto případě, pojďme to změnit. Budeme mít oddíl sedm. "Část webových stránek." Tak jsem jen tak změnit. 

A pokud půjdeme sem a my reload-- musím uložit a reload-- jsme si všimli, že se zde to změnilo, že? V pohodě. Takže to změní název. To je bez ohledu na to na kartě. 

Tak to je druh hledá druh vrtání. Nevím, o kluky. Myslím si, že chceme něco jiného tady. 

Takže to, co můžeme udělat, je záhlaví je právě tam. Pojďme udělat nějaké tělo. Takže máme nějaké tělo zde. To dělám vždycky otevřené a zavřu tagy na start, stejným způsobem, že mám rovnátka. Ah. Počkej, co? 

Diváků: [neslyšitelné]. ALLISON Buchholtz-AU: Ah. Vy jste mě dostal. Dobrá práce. Zlatá hvězda. 

OK, takže máme nějaké tělo zde. A teď pojďme začít přidávat nějaký text. Takže máte několik různých Možnosti pro přidání textu. Máme věci jako záhlaví. Máme jen normální text. Takže řekněme, začít s hlavičkou. Ve skutečnosti, pokud vy chcete vytáhnout W3 School HTML, můžete trochu se porozhlédnout a pokud existuje něco, co zejména, že chcete vyzkoušet této webové stránky, můžeme to udělat. Takže v tomto případě, ať to prostě udělat nějaké h1. Takže h1 je jako nejvyšší záhlaví. To vám dá něco že je velmi velký a odvážný. 

A v tomto případě to, co chceme, první text na našich stránkách? Cokoliv. Vy se chystáte vytvořit to. Já jsem prostě jít psát. Diváků: Welcome. 

ALLISON Buchholtz-AU: Welcome. OK, takže pokud ji uložit a my znovu, máme velký velký přivítání. Takže jen tak můžete vidět, rozdíly, pojďme něco udělat na H6. Co chceme tady? Je to tak? 

OK, takže jen tak si můžete vidět rozdíl. Jo, Sublime. Takže, pokud si všimnete, h1, velmi, velmi velký. h6, jako odvážný, ale mnohem menší, a máte vše mezi tím. Takže byste mohli mít H2, H3, H4. A to jsou jen hlavičky, takže pokud se snažíte vytvořit webovou stránku, která má různé části, Možná budete chtít použít záhlaví tam někde. 

V pohodě. Tak přidáme ještě víc věci v našem těle. Vidím, že to bude trochu fajn, kdybychom měli obrázek. Mám pocit, že každý by se použít třeba roztomilý zajíček obrázek právě teď, takže budeme hledat zajíček obrázek jako první. 

Já nevím, jestli vy máte nějaké preference na který chceme. Máte nějaké preference? Tenhle tady? Dolů. OK. Že jeden je. Dobrá volba. 

OK, takže budeme-li zobrazit naše image. Podívejte se na to. Podívej se na ten rozkošný věc. Jak jsi mohl být smutný v pondělí s tím? 

Takže jsme jen tak kopírovat adresu URL obrázku. A to, co chceme udělat, je, řekněme, že máme nějakou p pro odstavec. Budeme říkat: "Podívejte podívejte se na roztomilý králíček. d'awwww. " Miluji své králíčky. Mám králíčka doma. Stýská se mi králíček. Takže to, co budeme do-- Já nevím, jestli vy chcete na google tohle-- ale s HTML, Jak můžete vložit obrázek? Doslova, pokud google "Zahrnují obrazu HTML," Proč ne vy mi co tato značka by měla být? 

Diváků: img source-- 

ALLISON Buchholtz-AU: img source-- Diváků: --equals-- ALLISON Buchholtz-AU: --equals-- Diváků: --quote-- jo. ALLISON Buchholtz-AU: Perfect. Lovely. Viz MySpace generace, ne? Diváků: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. Bylo to šílené. OK. 

Takže se ujistěte, jsem si toto právo. V pohodě. Takže by to mělo být. A pak když jsme znovu načíst, máme zajíček na stránce Není to rozkošné? 

To je tak roztomilý. Vybrali jste skvělý, skvělý snímek. Já jsem kopat ji. 

OK, takže máme tento roztomilý králíček teď. Byli jsme schopni dodat image, stejně jako to. Takže v podstatě pokud je nějaká image Chcete-li přidat na své webové stránky, můžete jej přidat, stejně jako to. Další věc, kterou by bylo, kdyby máte obrázek uložen ve stejné složce jako tento soubor, můžete jen psát, co název tohoto obrázku je místo toho, aby webový odkaz. 

To by ještě bylo v uvozovkách. Bylo by to jako kdybychom jmenoval tohle-- pokud by byl tento obrázek uložen ve složce s touto HTML souboru že jsem editaci a to byl nazýván bunny.jpg. Mohli bychom také udělat, že a to by se ukázal. Nicméně, nemám to uloženo v soubor a chci, aby se zajíček, takže budeme držet odkaz. 

Diváků: Co je rabbit.org? 

ALLISON Buchholtz-AU: rabbit.org. Je to appropriate-- vypadají, můžete jej přijmout. Přijetí. bunny.jpg. Chci, aby tento králíček. Oh, bože, to je tak roztomilý. 

OK, takže jsme přidali záhlaví. Přidali jsme obraz. Je zřejmé, jsme přidali nějaký text tady, že jo? Pokud bychom chtěli přidat další texty, měli bychom jít takhle. Takže to je další bod. 

A my říkáme "je to další bod." Také jsem hrozný pravopisu, tak jsem se může chybně věci. Jen FYI. 

Takže máme další odstavec tady, že jo? Takže možná budete chtít něco trochu zajímavější, než jen mají všechny své texty, jako se zarovnáním vpravo. Možná, že vy je chcete vystředit text, OK? 

Takže pokud někdo chce používat ty příruční počítače před vámi a řekni mi, jak jsi jít na střed tento text, 

Diváků: p align. 

ALLISON Buchholtz-AU: Tak p align rovná se "centrum". Zabíjí to, kluci. Vy všichni musí zvýšit. A máme "To je na střed." A teď jsme něco na střed. 

Stejně tak, pokud máte Chcete se zarovnáním vlevo, byste mohli udělat zarovnání rovná vlevo, vpravo align rovná. Zcela na vás. Kdybych to udělal tady, pak to should-- teď je to se zarovnáním vpravo. 

Diváků: Allison? Podle zdroje obrazu, proč není tam v blízkosti zdroje img? ALLISON Buchholtz-AU: Sorry. Ten by měl být tam Teď jsi dobrý. Teď jsme dobří. Diváků: Ještě nemáte zavřete jej tam, nebo ne? ALLISON Buchholtz-AU: No, tak img zdroj, ten je prostě-- s obrazem, je to právě viděl, jak jeden prvek, zatímco pokud si všimnete po zbytek z nich, máme nějaký záznam pak informace, které se to týká, a pak uzavírací tag. Ale s obrazem, všechno je jen trochu soběstačný. V pohodě. Takže vy víte, jak vytvořit záhlaví, víte, jak zadávat text, Víte, jak dát obrázek V tuto chvíli můžete zarovnat věci. 

Další věc, která vás chtít být schopni dělat je vytvořit seznam v CS-- jsme druh jít do příští týden pset. Věci, které jsme typicky učit tento týden jde opravdu dobře s příští týden pset, takže jsme druh míchání, zde překrývají věci. Ale to bude užitečné pro příští týden. 

Takže pokud jsme chtěli vytvořit nějaký seznam, jak bychom mohli udělat, že? Nemůžete odpovědět na tuto dobu. Někdo musí. Není to těžké, lidi, slibuju. Google "Jednoduchý seznam HTML." Co to bylo? 

Diváků: [neslyšitelné]. ALLISON Buchholtz-AU: Správně. Takže chceme objednat nebo neuspořádaný? Pojďme dělat neuspořádané. Takže máme nějaký UL, které znamená výčtu. A co máme pro každý prvek? Má potřebuje svou vlastní značku? Můžeme jen začít psát, co? 

Diváků: li. 

ALLISON Buchholtz-AU: li. Takže to, co je náš seznam bude? Co tady chceš? Děláme jména. Jen to Jacob. 

Diváků: Králík potraviny. 

ALLISON Buchholtz-AU: Rabbit potraviny. OK Líbí se mi to. Králík potraviny. 

OK, takže máme mrkev. Líbí se mi tento králičí téma. Já jsem kopat to hodně. Publikum: Vlastně jsem si myslel, že Jacob by důvěryhodně. ALLISON Buchholtz-AU: Jacob? Jacob je králičí potravy. Pokud jste viděli Jákobův foto z úředních hodinách, možná jste si myslel, že má zaútočil vrah králíka. 

Diváků: Mám králíka teď. Mám vrah králíka teď. 

ALLISON Buchholtz-AU: Děláš si srandu? 

Diváků: Vezmu to další část. Mám to. 

ALLISON Buchholtz-AU: To je směšné. Tak jako tak. 

Diváků: [neslyšitelné] 

Publikum: Jo, můj Proctor má králíka stejně. 

ALLISON Buchholtz-AU: Chci králíka. OK, kdo přináší skutečnou králík další část, celkem šotek bodů. Diváků: [neslyšitelné] Publikum: Oh, to není pravda. Je to plněné králík. 

ALLISON Buchholtz-AU: Oh jo, můžeme uzavřít tyto. Vypadá to rad. Diváků: Má to vlastně jedno? ALLISON Buchholtz-AU: To není. U většiny z těchto věcí, nezavřete značku, 99% času nic špatného se děje se tak stalo, ale je to dobrý způsob, taky. Jákob. A máme salát. Obecenstvo: pro odkazy, je to opravdu důležité. ALLISON Buchholtz-AU: Hm? Obecenstvo: pro hypertextové odkazy. ALLISON Buchholtz-AU: pro hypertextové odkazy. Ano, odkazy potřebovat. OK, tak se pojďme podívat zde. A my máme na závěr našeho seznamu. A podíváme se na to. Máme all-- Jákoba, právě tam. Králík jídlo. Připomíná mi Bunnicula. 

Diváků: [neslyšitelné] ALLISON Buchholtz-AU: Jsem dobývat všechny staré školy reference dnes, ne? Jen všechny staré školy odkazy. Měl jsem přinesl jako Gogurts nebo něco k občerstvení. 

Diváků: Or Gushers. ALLISON Buchholtz-AU: Oh. OK. Uvidím, jestli můžu sledovat dolů Gushers na příští týden. Myslím, že to můžu udělat. Myslím si, že bychom mohli mít někteří v kanceláři. 

OK, tak jsme probrali spoustu různých věci, které můžete dělat s HTML, ne? A jak můžete pravděpodobně vidět, že je to nothing-- doufejme, že ne příliš intim-- pokud je, nemám na mysli znevažovat kohokoliv. Pokud máte potíže, přijďte se mnou mluvit. 

Ale většina z nich je právě při pohledu na syntaxi, ne? Pokud chcete výčtu, Chcete-li nějaký seznam, Chcete-li zarovnat nebo něco Formát něco, je to všechno jen o druh vyhledávání syntaxe pro HTML, ne? A ještě jedna věc, která je docela v pohodě ve skutečnosti je, pokud jdete to-- podívejme, co je pěkné webové stránky, které se nám líbí? Každý, kdo má nějaké oblíbené webové stránky že jsou v pořádku, aby se on-line? Víš co, pojďme prostě CS50. To je pěkné a bezpečné, ne? 

OK, tak CS50 zde. A hele, je tu sekce právě teď. Pokud se vám líbí, jak to vypadá. 

Diváků: [neslyšitelné]. ALLISON Buchholtz-AU: Nejsme dělat meta část, kluci. Není to pravda. To by bylo v pohodě, ale nebudeme dělat. 

Tak co byste mohli dělat, pokud se vám líbí, jak to funguje, je můžete vždycky pravdu klikněte na libovolné webové stránky, které se vám líbí a vy můžete udělat Zobrazit zdrojový kód stránky. To přinese až všechny HTML. A to je vlastně velmi dobrý způsob, jak styl své vlastní webové stránky. Přejděte na webové stránky, které vám opravdu rád, a podívejte se na HTML a zjistit, jak to udělali. 

A doslova, pokud jak citovat věci, pokud nejste jen krást od lidí, je to OK. Zejména pro CS50 [? financovat?] jsme druh očekával, abyste si inspirace z jiných webových stránek. Tak neváhejte. Podívejte se na svých internetových stránkách, že si myslíte, že jsou opravdu dost a zjistit, jak se používají HTML a CSS dělat tyto věci. 

Takže jak vidíte tady, je tu samozřejmě jako odkazy a máme třídu zde. Máme odkaz zde. Máme seznam. Máme některé pravděpodobně obrázky někde tady. 

Máme nějaké cool styl zde. To je další věc, budeme dělat. Takže styl, kdykoliv vidíte tyto styl konzole, je to v podstatě CSS. Bene, jsi nějakou otázku? 

Diváků: Co je to div? 

ALLISON Buchholtz-AU: div je jen je-- to, co je div? Diváků: Division. ALLISON Buchholtz-AU: Division. Jo, je to jen jako oddělování různých prvků. OK, takže tady je to, co jsme jít na další. Takže to nemusí být nejlepší styl, protože pokud si všimnete máme HTML a styl na stejné stránce, a vlastně chceme oddělit ty, OK? A ve skutečnosti, dovolte mi, abych otevřít můj pravý protože to má být PDF, takže máme style.css. 

Takže to, co můžeme udělat, zde je to jsou chladné věci jako nějaké fade a tak bychom mohli zkusit a udělat to, ale mám pocit, jako bych nepořádek, že až za běhu, tak jsem povzbudit vás kluci jít to zkusit na vlastní pěst, ale nebudu to dělat právě teď. Takže pokud vy, pamatujte, pokud jste někdy hit problém set, něco snášení z boku. To má co do činění s fade a přechod a kdoví co ještě. 

Diváků: A to je vše, CSS a HTML? 

ALLISON Buchholtz-AU: Všechny CSS a HTML. Jo. Takže si můžete udělat spoustu opravdu studené věci s CSS a HTML. A tak se naše úžasné zajíček webové stránky zde jsme budou dělat něco trochu CSS styl s ním. 

Takže pokud budete mít styl list, který tady máme, stačí zavolat style.css. Můžete říkat, co chcete. Co je důležité, je, že budeme odkazovat v našem web.html zde. 

Takže to, co budeme dělat, je we-- takže nemám bordel tento up-- budeme odkazovat tyto dva soubory dohromady. Takže ve stejném way-- jdu k tomu analogii C zde. Stejným způsobem, že pokud máte některé library-- a máme cs50.h-- náš překladač to odkazy. To je jen explicitní odkaz na naší straně. Takže stejným způsobem, že děláme hash obsahuje některé soubory, co Chystám se napsat, je jen HTML / CSS ekvivalent to. 

Jsme jen říkám, OK, tuto webovou stránku bude používat tuto stylů, OK? Takže máme link rel rovná stylů. A pak tu máme typ, CSS. A pak href rovná. 

OK. Takže všechno to udělal tady je můžete myslet na to, jak stejnou věc jako hash patří. Zřejmě to vypadá trochu víc složité, ale ve všech případech, je to skutečně totéž. Tak to je jen některé propojení stylů, to je typu text / css, a jméno jeho je style.css. 

Co je důležité vědět, je to, že na webové stránce že jsem v práci tam, now-- web.html a style.css-- jsou ve stejné složce. Vzhledem k tomu, v různých složkách, musíte dát skutečný kořen na to, nebo cesta k němu. Ale v tomto případě, už jsme to udržet super jednoduché a je to tu bude. Takže pokud budeme dělat, že mám nějaký věci již ve frontě sem. 

Takže máme nějaké tělo, které se děje mají naši barvu pozadí, která teď je světle modrá. Můžeme ji změnit, pokud chceme, ale pokud si dobře pamatuji to správně, to by jen změnit ji na světle modrou. A teď máme světle modré pozadí. A měli jsme here-- někdo může pamatovat který z nich je hash ID nebo třída? 

Diváků: ID. 

ALLISON Buchholtz-AU: ID. V pohodě. Takže to, co chceme dělat je, která z těchto písem nebo which-- chceme "Podívejte se na roztomilý králíček "být fialové? Myslím si, že chceme, že je to fialová. Jsem docela se s tím je fialová. 

Takže to, co děláte, je to, ID equals-- v tomto případě Řekl jsem, co, pěkný barvy zde. Jsme znovu. Najednou, to je fialová. OK, tak s ID, nezapomeňte to musí být jedinečné, tak jsem nikdy by neměly být pomocí toto číslo nikde jinde. Ale s třídou, jak jsme zde s hezkou písma, Měl bych být schopen používat že kamkoli chci. 

Tak pojďme to udělat jeden tady. Takže můžeme říci třída rovná pěkný písmo. A podíváme-li se nyní, máme to v pohodě docela font zde. Takže možná chci dělat obojí. OK, já vlastně nevím, jestli je to chodit do práce, ale chci to zkusit. A to je to, jak se naučit CSS a HTML. Jsi jako, víte, co, chci to zkusit. Nejsem si jistý, jestli to bude fungovat. Uvidíme, jestli to funguje. 

A podívejte se na to. Nyní je ve fialové a je to docela písmo. OK, takže budete mít všechny tyto různé věci, které můžete udělat. Máte dotaz? 

Diváků: Jo. No, stejně jako barvy používáte jsou slova. Existuje způsob, jak to udělat barvy s hexadecimální RGB? ALLISON Buchholtz-AU: Můžete také to s hexadecimálním, věřím. Jo. Ale je to docela fajn, kdyby vás nechci je vyhledat. Můžete být stejně jako, fialové nebo modré. Diváků: Doufejme, že Víte, co to znamená. ALLISON Buchholtz-AU: Správně. Takže pojďme tuto číst nebo Chartreuse. Proč byste někdy vybrat Chartreuse? Je to zajímavá barva. 

OK, tak samozřejmě můžeme vidíme může změnit věci však chceme. Pokud byste chtěli, aby create-- řekněme Chtěli jsme vytvořit další třídu. Co by mohlo vy chcete změnit? Máte-li vytáhnout W3Schools " CSS dokumentace, Nechám slovo vámi. Můžeme to zkusit a udělat něco zajímavého se to v posledních několika minut. Protože jsem trochu dal rychlokurz na spoustu skvělých věcí že si můžete dělat. Ale nakonec, jak jsem řekl, pokud máte jen experiment, budete hodně naučit. 

Diváků: Díval jste se na tento font? 

ALLISON Buchholtz-AU: Jo, Podíval jsem se, že písmo. Tak jako doslova, já šel to-- co jsem udělal? Udělal jsem CSS seznamu písem a Pak jsem dělal stack písmo, a pak jsem byl rád, podívejte se zde jsou všechny v pohodě fonty, které můžete udělat. A byl tam jeden, tak Zkopírován jsem ho do mého schránky. A pak jsem byl rád, OK, v pohodě, tam jdeme. Vše je hotovo. 

Diváků: Takže vy se ujistit, že CSS ví, co to je písmo. 

ALLISON Buchholtz-AU: Ano. 

Diváků: Co to říci na závěr? Cursive? 

ALLISON Buchholtz-AU: Cursive. Jo. 

Diváků: Obrázek na pozadí. 

ALLISON Buchholtz-AU: Obrázek na pozadí. OK. Takže mi chceš říct, jak to udělat. Nechám to na vás. Já jsem jen psát tady teď. Kolo je ve vašich rukou. 

Diváků: OK 

ALLISON Buchholtz-AU: OK. Co to dělám? 

Diváků: Doing-- vím, co přichází poté, co složenou závorkou. ALLISON Buchholtz-AU: OK. Tak pravděpodobně v těle, jsem by se předpokládat, protože jsme dělá s obrázkem na pozadí. 

Publikum: Jo, pojďme to udělat. 

ALLISON Buchholtz-AU: OK. Publikum: OK, takže pozadí tlustého střeva, a pak jsme Potřebujete URL adresu tohoto obrázku. Možná, že pseudo-kód, který teď, možná. 

ALLISON Buchholtz-AU: Co byste mi líbí to-- Diváků: Přemýšlím jako GIF. ALLISON Buchholtz-AU: GIF? To bude zajímavé. OK, co mám googling tady? 

Publikum: Ne, to je vaše volba. 

ALLISON Buchholtz-AU: Proč ne we--, jestli je to zajíček, Mám pocit, že bychom měli mít hezký travnatý trávník nebo tak něco. 

Diváků: Meadow. Louka. 

ALLISON Buchholtz-AU: louka? OK. Diváků: Nebo Rachel Maddow. ALLISON Buchholtz-AU: To vypadá pěkně. Oh, to je malý, ačkoli. Potřebujeme dobré velikosti obrázku. Pojďme se podívat. Oh, podívej. To je dost louka. Víš, co se mi líbí tenhle. Pojďme zkopírujte tento jeden. 

Publikum: OK, takže si myslím, že je to URL, otevřené závorky. 

ALLISON Buchholtz-AU: OK, URL. 

Diváků: Pak adresa. 

ALLISON Buchholtz-AU: OK. Je to, že vše, co potřebujeme? 

Diváků: Close závorky středník, a prostor, pozadí pomlčka příloha tlustého střeva pevné a složená závorka. 

ALLISON Buchholtz-AU: OK. Uvidíme, jestli to funguje. To bude docela v pohodě, pokud to dělá. Jsem opravdu nadšený tady. Nefungovalo to. Zajímalo by mě, proč. Diváků: Možná URL musí být v citacích. ALLISON Buchholtz-AU: Možná. A to je to, jak se učíme, kluci. 

Diváků: Můžeme mít pozadí barvy a obrázek na pozadí? 

Diváků: Ne Jeden nahrazuje druhé. 

ALLISON Buchholtz-AU: Já nevím. Pojďme se podívat. Pojďme se na to podívat a uvidíte. 

Publikum: No, možná jo. [Vřadit hlasy] 

ALLISON Buchholtz-AU: OK, to je obviously-- I [neslyšitelné] zde. Tak OK. Diváků: nástavec na pozadí. ALLISON Buchholtz-AU: Ah. 

Publikum: OK, já nevím. ALLISON Buchholtz-AU: Je to Vypadá to, že by mělo fungovat. Jste si jistý, že je tlusté střevo po URL? 

Publikum: Ne, to je středníkem. ALLISON Buchholtz-AU: To je středník. Diváků: Řekl jsem tlustého střeva? ALLISON Buchholtz-AU: Říkal jste, že dvojtečku. Diváků: Ale ne. ALLISON Buchholtz-AU: Tady to je. Publikum: Oh, počkej, teď nemůžeme číst text. ALLISON Buchholtz-AU: Nyní nemůžete přečíst text, ale máme obrázek na pozadí. Mmhmm? 

Diváků: Má HTML podporovat dynamický obsah? Stejně jako můžete změnit velikost ten obrázek v závislosti na velikosti okna, nebo je to v CSS-- 

ALLISON Buchholtz-AU: Takže CSS musí dělat, že. Takže pokud vy jste zájem v učení pokročilé CSS, Jsem spolupracovat výuky seminář o CSS na sedmé. A slibuji, že to bude mnohem více do hloubky a mnohem víc v pohodě věci v této sekci. A můj co-učitel je jako Celková front end web dev master. Takže to bude docela v pohodě, pokud chcete dozvědět o všech skvělých věcí že CSS se dá dělat. 

Ale to, co tu máme s jeho pozadí nástavec fixed-- tak je to nějaký pevný size-- ale můžete skutečně dynamically-- pokud jste někdy webové stránky, jako Většina dobrých webové stránky bude dělat, při nastavování velikost vašeho prohlížeče, upravuje pozadí nebo kolik ukazuje nebo přeformátuje věci, že jo? Takže to je to, co nazýváme relativní umístění. 

A CSS může skutečně chytit, jak velká je vaše šířka prohlížeč, nebo, jak vysoká je, a můžete umístit věci podle relativní velikosti proti absolutní velikosti. A to je samozřejmě vyspělejší CSS, ale to je něco, co můžete udělat. Pokud se chcete dozvědět více, pojď do mého semináře. 

Tak to je něco, co můžete udělat. A CSS může ve skutečnosti do-- CSS a JavaScript, který dostaneme do další week-- vám umožní dynamicky měnit stránky, aniž byste museli znovu jim po celou dobu. A máte k tomu nějaký docela v pohodě věci. 

Takže je tam ještě jedna věc že vy chtít dělat nebo něco, co si budete chtít prohlédnout? Máme 10 minut před. Můžeme také odejít dřív, ale pokud Chcete-li provést nějaké další webové věci, můžeme, ale nejsem tě nutit. Ale můžeme také jen jíst sladkosti. Diváků: Zvýraznění textu bílé, takže můžete přečíst. ALLISON Buchholtz-AU: OK. Takže v tomto případě, chceme nějakou str. Diváků: Měli bychom to udělat tělo tak, že se vztahuje na celou stránku? ALLISON Buchholtz-AU: Ano, můžeme ve skutečnosti. To je dobrý nápad. Tak jsme se vám have-- víme, co by mělo být? Já nevím, jestli můžeme udělat barvu textu. Chtěl jsem, aby se pokusila vytvořit další třídu zde. 

Diváků: Jak se vám to že má návrhy? ALLISON Buchholtz-AU: Tak pokud vy jste zájem, to je další textové editor s názvem Sublime. Měli byste být schopni nainstalujte ji do Vašeho přístroje. Někdy to je trochu složitější. Pokud chcete pomoci s tím, Jsem super rádi pomohou s ním, protože gedit je skvělý a je to úžasné, protože si můžete zkompilovat na dně, ale já opravdu jako Sublime, protože je to docela a to se dělat věci jako je auto-kompletní. 

Takže si můžete určitě neváhejte dejte mi vědět, pokud chcete udělat. Pokud jste právě google "Sublime text, "typicky má návod, jak nainstalovat na různých operačních systémech. Je to opravdu cool, I si, podle mého názoru. Tak str. Myslím, že si to prostě udělat text-- nebo můžeme prostě barva je "bílá". Tam. 

Takže to, co tady dělal jsem, že jsem nezměnil celý text. Ale p je zde jen tag, který máme, ne? Tento odstavec tag. Tak jsem právě vytvořili CSS prvek, který řekl: OK, něco s tímto štítkem p, aby bílá barva. 

Takže jestli jste si všimli, to dělalo tento bílý a to bílé. To nedávalo náš seznam bílé, protože to není spojené s tím. Dalo by se projít a ty by mohly say-- 

Diváků: Do barvu pozadí. 

ALLISON Buchholtz-AU: Barva pozadí? 

Diváků: Pozadí do potrubí v barva kam dát značku str. 

ALLISON Buchholtz-AU: OK. Chceš to bílé? Diváků: Mmhmm. ALLISON Buchholtz-AU: OK. Tady to je. Diváků: To je divný. ALLISON Buchholtz-AU: Docela v pohodě, ne? Takže pokud se vám prostě flákat, budete hodně naučit. A to může být docela v pohodě. Myslím si, že je to určitě více potěšující než někdy protože nemusíte čekat pro váš program zkompilovat. Můžete jen hit Refresh a ty jsi jako, oh, podívej, to fungovalo, nebo oh, já jsem asi něco chybí. A to je něco, co je opravdu v pohodě o této další části třídy, je to určitě, já si myslí, snazší kontrolovat jak jdete po cestě proti museli psát tyto dlouhé programy a který si přeje a modlí se že to funguje na konci. 

Takže s tím, myslím, že vy všichni se zdají dobré. Máte-li nějaké otázky, jako vždy, přišel se mnou mluvit, přijde, dejte mi vědět. Budu přímo před hotelem pro příštích 15 minut pokud si jen chcete popovídat o cokoliv a všechno. 

Takže doufám, že vás guys-- hodně štěstí s tímto pset. Uzávěrka přihlášek je v pátek v poledne proto, že byl propuštěn pozdě. Tak jsem pravděpodobně bude vidět Mnoho z vás ve čtvrtek, ale doufejme, že ne. Možná, že budete mít to udělat do té doby. Já bych být super pyšný. 

Ale pokud ne, budu tě vidím ve čtvrtek. Můžete také použít pozdní datum, které rozšiřuje na sobotu v poledne. Ale já ne-- co? 

Diváků: Halloween. 

ALLISON Buchholtz-AU: Je Halloween, a, a, b, Nemyslím si, že tam bude být úřední hodiny v pátek. Takže opravdu se pokusit to udělat tím, Pátek, takže se všichni můžeme slavit Blahoslavit víkend. Tak jo, uvidíme se kluci příští týden.