[Přehrávání hudby] 

DAVID J Malan: To je CS50 a to je začátek týdne 7. Takže vítejte zpátky. A můžete připomenout, že v problému set čtyři, tam byl trochu lov pro některé atraktivní ceny, přičemž Po obnovit fotky Zaměstnanci jak zde, tak v New Haven, jste byli vyzváni, aby si co nejvíce tito počítačoví odborníci, jak byste mohli. A máme celý banda podání. Myslel jsem, že bych sdílet pár s vámi dnes. 

A budeme psát všechny tyto online. Ale především jsem chtěl upozornit to-- studny jeden, Sam byl v poměrně málo z nich obecně představující takhle. Zdá se však, že od dnes ráno, vítěz byla určitá někdo jménem Ken s 24 zaměstnanců zachytil na kameru nebo málo více, když vezmete v představují více zaměstnanců v obrázcích. Na snímku je zde další Ken Marii v New Havenu. 

Nyní, Ken, když se změní out je trochu rohového případu že se ještě nestalo dřív. Ukazuje se, že nenastalo se mi dát drobným písmem v problému nastavit čtyři, které říká, že zaměstnanci jsou nezpůsobilé pro atraktivní ceny protože Ken je, samozřejmě, jeden z fotografové na našich zaměstnanců. Nyní, s tím řekl, Původně mi psal říkat Prosím, nevkládejte tyto fotografie online. Myslím si, že z velké části protože většina z fotografií že tento fotograf se podívat trochu něco takového. A podobně. 

Ale Ken bych, abych vás ujistil že je to velmi dobrý fotograf, on je profesionál, vezme fotky, které nejsou rozmazané, že jsou lepší v centru pozornosti, a on trvalo poměrně málo z našich vlastních zaměstnanců. Ale spíše než jen potvrdit Ken, co jsme si mysleli bychom dělat se projít seznam Skutečné studenti, kteří předložili. A ukázalo se, že Lance se 15 fotek jak z dnešního rána byl náš vítěz. 

A tady snímku je s Lance Colton, s Skaz, sama se sebou a se Samem. Ale pak se ukázalo, že od 11:46, takže před jen trochu, Vrátil jsem se do svého e-mailu a zjistil, že jsme měli ještě jeden podání student jménem Bonnie jejichž e-mail řekl pouze toto. Nebudu lhát, že jsem Přitom během vyučování. A pak pokračoval připojit jen 14 fotografií, jeden plachý Lance je 15. 

Ale v Bonnie fotografiích, se ukazuje, out byli více zaměstnanci, Sam mezi nimi, takže to, co jsme si mysleli, by se udělat, je uznat obou těchto technologií. Takže kromě získání Dropbox prostor, který každý, kdo se podíleli přijímá, budou i tyto dvě části získat hezkou zajištěný oběd pro ně a jejich část Mates tento nadcházející týden. A tak uslyšíte od nás, Lance a Bonnie, o tom. Tak velké gratulace k nim. A teď, kdo by ti z vás, stejně jako oběd obecněji vědět, že CS50 oběd v Cambridge a New Haven je tento pátek. Přejít na CS50 web lomítko RSVP. A nyní pár slov o seminářích. Více curricularly. Takže jsme blíží bod semestru kde byste měli začít přemýšlet o závěrečných prací. A ve skutečnosti, jen v trochu, bude takzvané předběžné návrhy je splatná. Takže předběžné návrhy jsou určeny pro být dost nízký dopad a opravdu jen příležitost pro skládat krátkou poznámku Váš kolega učení seznámit jej nebo ji, co si myslíš chtít udělat pro své finální projekt. 

Nyní, mnoho studentů končí dělá webový závěrečných prací. A samozřejmě, jsme jen Nyní minulý týden v této a za potápění do programování webu. Takže ne se bát, pokud vás nemají absolutně žádnou představu, jak byste stavět myšlenky, které můžete mít ve své mysli. To je opravdu jen nutit funkce aby vám přemýšlet a mluvit s TF o tom. Ale abych vám pomoci s tím, a s konečnými projekty v konečném důsledku, vědí, že CS50 má tradici nabízet semináře. 

A to jsou volitelné, ruce na, nebo přednášet na základě příležitosti se dozvědět více o tématech, která jsou trochu vedlejší do kurzu je osnovy, ale přesto nádherné Materiál řídit závěrečných prací. A tak to je seznam, který je Zaměstnanci CS50 tady v New Haven přišli s pro v letošním roce o iOS programování, Android programování, vývoj her, a svazky více nástrojů a jazyků a techniky. 

Takže pozor na internetových stránkách CS50 je. A do té doby, pokud chcete zaregistrujte jako zájemci o některý z nich, přejít na CS50 je lomítko rejstříku. A pak budeme sledovat, jak na dny a letové časy a místa a všechno-- nejvíce všechno bude možno sledovat, a také k dispozici na vyžádání po pokud si nemůžete vlastně dělat to. Takže bez dalších okolků, my přestali minule s GET. 

A to bylo jako zprávu, která byla uvnitř virtuálního obálky, připomínají, že jsme míjeli na routeru, aby router mezi webovým prohlížečem a web serveru. A toto poselství vypadal Trochu něco takového. To bylo více tajemné poselství, které byl vlastně uvnitř obálky napsané na kusu papíru, jehož První řádek říká, že doslova, dostat lomítko. 

A stejně jako kontrola sanitačního, co jste lomítko naznačovat? Co znamená, když lomítko žádá o webové stránky? Můžete požádat o to celou dobu. Většina kdykoliv návštěvě webové stránky, budete nejsou ve skutečnosti zadejte název souboru. Pravděpodobně jste prostě jít na Facebook.com, vstupovat, gmail.com, nebo podobně. A co lomítko představuje? Jaky soubor? Nebo co strana, konkrétně? 

Index, jo. Takže výchozí stránku. Takže pokud nechcete určit soubor jmenujeme začneme vidět, jste vlastně jen žádající dej mi výchozí stránku Facebook nebo mi můj e-mailové schránky nebo dát me výchozí stránka novinek na webových stránkách CNN nebo podobně. A server reaguje na že zpráva s něčím takhle, říkat ano, mluvit HTTP verze 1.1. 

200, což je stav kód, který my, lidé jen zřídka někdy vidět, protože je to dobré. Protože to znamená, že OK, žádost byl přijat a správně zacházet. A typ obsahu zřejmě v odpovědi je poměrně často, ale ne vždy, text. A konkrétně, HTML. A to je vlastně kde se podíváme na dnes. 

Takže ve skutečnosti, já jdu vpřed a otevřít prohlížeč. Budu používat Chrome, můžete použít Nejvíce libovolného prohlížeče v příštích týdnech. Obecně doporučujeme Chrome protože je to obzvláště dobré pro vývojáře softwaru. Je tu hodně postavena v roce nástroje, které usnadňují rozvíjet nejen HTML a CSS, věci, začneme mluvit o dnes, ale i jiné jazyky také. 

A budu pokračovat a jít to-- Budu Ovládání tlačítkem nebo vpravo klepněte na libovolné místo na webové stránce. A já jdu do Zkontrolujte Element. A budu vyladit moje Obrazovka jen trochu sem. Dovolte mi, abych to přesunout na dno. Takže tohle je to, co se říká Chrome inspektor. Takže tohle je jako ladění Nástroj vestavěný do prohlížeče Chrome. 

Všichni z vás již tento Pokud jste pomocí prohlížeče Chrome. A to vám umožní vidět, co se děje Na pod pokličku nějaké webové stránky. Takže pojďme vlastně trvat Podívej se na to takto. Má cesta více funkcí a staráme se o dnes. Ale je tu tyto karty sem. Prvky, sítě, zdroje, časová osa, a některé další věci. Budu klikněte na Sítě na chvíli. 

A je to trochu ohromující na první pohled zde. Ale to, co budu dělat, je nechat mě to trochu zjednodušit. Budu zapnout záznam světla, takže se to červené. A já jsem chtěl říct zachovat log. A to je jen trochu věc, kterou jsem přišel na to, v průběhu času, že to bude šetřit Vše, co se děje v prohlížeči. A teď jdu na http://facebook.com. 

Ve skutečnosti, pojďme udělat www pro jistotu, lomítko. Enter. Takže URL, že mnoho z jste mohli navštívili. A nyní Facebook je web strana přichází v horní části. A pak celá parta věci letěl na dně. A ve skutečnosti, se ukazuje, že při návštěvě Facebook.com, jste nejen dělat jednu prosbu HTTP, Ukazuje se, že jít na Facebook.com pošle 41 z těchto obálek, každý s jeho vlastní žádost get, jak je uvedeno, i když za obrazovkou zde, v dolní části obrazovky, znamená to, že opravdu, my browser udělal 41 žádostí. 

A celkem, to převedeno 861 kB a trvalo nějakého důvodu tolik jako osm sekunda ke stažení všechno. Takže je to vlastně trochu divný že stránky Facebook by vzít dlouho, ale budiž v tomto případě. A teď, to všechno mi to jedno o s výjimkou nejvrchnější požadavek. Tak pojďme k tomuhle tady a dovolte mi, abych oddálit jen na chvíli. 

A dovolte mi přiblížit na toto téma. Takže to, co jsem udělal v vlevo, přestože je tu spousta děje tady Je jsem zvýrazní Facebook.com a poté Všimněte si, že jsem rolování dolů, rolování dolů, rolování dolů, požádat o záhlaví. A uvidíte, že Chrome je zobrazeno me podstatě vnitřní obsah žádosti I vyrobena. Není to formátování v úplně stejné cesta, ale všimnete, je tam zmínka o získání, Všimněte si, že je zmínka o hostitele, Facebook.com, cesta, nebo lomítko, což je soubor jsem požádal. 

A pak, když jsem se procházet zálohovat, budeme vlastně vidět, že to, co se vrátil Facebook pro mě je všechny tyto záhlaví. Takže v této virtuální obálky opravdu mnoho klíčových párů hodnot. Slovo, dvojtečka, a pak hodnota. Slovo, dvojtečka, a hodnota. Jedná se o tzv záhlaví. A je tu mnohem víc, než detail zde jsme vlastně záleží právě teď. 

Ale to je druhý poslední tam dole, Všimněte si, že serveru facebook.com je, opravdu tady řekl, přijde nějaký textu HTML. Takže všechno je to, říci, že při požadavku web Stránka z prohlížeče na Server, který server odpoví s obálkou jeho vlastní uvnitř kterého je textu. Jinými slovy, HTML. Hyper Text Markup Language. Což je jiný jazyk že jsme zavedli dnes že lidé nebo počítače generovat , za účelem provádění webové stránky. 

Konkrétně, pojďme se podívat na to. Chystám se teď vrátit na webových stránkách Facebook. A já jen Ovládání kliknutím nebo klikněte pravým tlačítkem myši a klikněte na tlačítko Zobrazit zdrojový kód stránky. A i když nechcete používat Chrome, IE to udělat, Firefox může to udělat, Safari můžete to udělat, i když v nabídce Možnosti může vypadat trochu jinak. A to je HTML, že Mark a Firma na Facebooku psali. 

A společně, tento jazyk zde implementuje modrá a bílá stránka že jsme viděli před chvílí. Nyní, to je trošku složitější. Ale když se podíváme se na levém horním rohu, jsme začnou se podívat na nějaké vzory. Vypadá to, že je tu spousta z těchto otevírací značce a pak je tu toto klíčové slovo HTML. Zde je další open úhel rameno a hlava. 

Tady je, pokud budeme posouvat dolů a dolů a dolů, já jsem jít do toho a zkuste něco hledat. Existuje způsob, jak přes vpravo Zde je otevřený držák tělo. A vzpomínám z poslední čas, který jsme navrhli že nejjednodušší webové stránky že člověk může napsat by mohl vypadat trochu něco takového. Otevřeno HTML tag, otevřená hlava tag, otevřený název značky, poté uzavře titul, uzavřené hlava, otevřený tělo tag, nějaký text, uzavřená karoserie, uzavřený HTML. 

Ale pauza tu jen na chvíli. Tento kód, i když jste Nikdy napsal předtím ale stále ne zcela pochopit co se děje, vypadá docela dobře. Dobře, to je velmi čisté. Je to velmi pěkné stylisticky. Hodně odražení a bílé místo. Facebook není. Tak proč je Facebook tolik horší, než jsem se na psaní HTML? Zřejmě. 

Jasně, to je jako jeden z pěti pro styl. Existuje pádný důvod pro ně snížit tyto rohy. No dobře, tak oni nechtějí aby to pro vás jednodušší si ho přečíst. Takže v nějakém smyslu, že jsou plést to, tak nějak to zakódování alespoň tak esteticky že je to těžší pro Myspace jít a odpárat jejich Domovskou a HTML pro ni. Ukazuje se, že programy i když, včetně Chrome, můžeme vyčistit toto nahoru výborný snadno. Takže to není tak jako důvod. Co jiného by mohlo být příčinou. To jo. Jo, bílé náklady datového prostoru. Co myslíš? Jo, přesně tak. Pokud stisknete klávesy TAB hodně, nebo mezerník, zvážit důsledky. Takže každá klávesa na vaší klávesnici je [Neslyšitelný] reprezentován jako jeden bajt. 

Takže předpokládám, že Mark nebo některý z vývojářů v těchto dnech zasáhne mezerník jen jednou V této HTML stránce, která reprezentuje Facebook domovskou stránku. A Facebook má hodně uživatelů v těchto dnech. Takže předpokládám, že Facebook je homepage dnes je navštěvován miliardy lidí. A někdo na Facebooku má hit mezerníku jen jednou. 

Takže jeden další bajt, miliarda žádostí, kolik více dat je Facebook přenos přes internet proto, že někdo hit mezerníku na jeho klávesnici? A miliarda bytů, nebo jeden gigabajt odesílání dat z Facebooku serverů lidem po celém Svět bez dobrého důvodu. Nyní, to je jen jeden prostor. 

Představte si, že jsme vlastně čistit to věc a členité a doplnil hodně prázdného místa a znaky tabulátoru a mezery, můžete skončit výdajů gigabajtů, ne-li terra bajty více prostoru. A tak výborný obyčejný v Skutečný svět vývoj webových aplikací je minify váš kód. A budeme nakonec vidět jak byste mohli udělat. 

Ale dnes, začneme psát kód to je vlastně čitelný pro nás lidi. Ukazuje se, i když, pokud jdete zpět do tohoto nástroje v Chrome Zkontrolovat prvek, Dříve jsme byli na záložce Network. Ukazuje se, že pokud jdete do Záložka prvky, co je skutečně vidět je Chrome je docela tištěný verze téhož HTML. Takže jsme deobfuscated to. Takže je to žádným soupeřem pro počítač. A teď můžete skutečně klikněte kolem a začít vidět hierarchii, která je webová stránka. Takže pojďme to vlastně dělat. Chystám se jít dopředu a otevřít na můj Mac program s názvem úpravu textu. A připomínají, že to je jen super jednoduchý textový programu. Windows má Notepad.exe. A já jdu na Verbatim zadejte následující. Doc typu HTML, otevřený držák HTML, uzavřený konzola HTML, máme hlavu stránky zde, konec záhlaví stránky zde, titul bude jako, hello world. 

A pak tady dole, my potřebujeme Tělo webové stránky. Uzavřená karoserie. A pak tady, hello world. Dobře. Takže psali jsme super rychlý webovou stránku. Budu jej uložit jako hello.html na mém desktopu. My Mac děje stěžovat, myslet si, že, počkejte chvíli, to je textový soubor, proveďte Chcete-li volat to .txt? Ale ne, chci použít dot HTML. 

A co potom je to hezké, kdybych stačí dvakrát na tento soubor, hello.html, tady je moje webové stránky. Bohužel, já jsem jediný člověk na světě, kteří mohou navštívit tuto stránku právě teď. Vzhledem k tomu, kde to žije zdánlivě? Je to na mém Macu, že jo? Což je k ničemu. Stejně jako nikdo v této místnosti natož na internetu může skutečně navštívit tuto stránku. Takže dnes, musíme zavádět další prvek. 

A jak to udělat, budu jděte do toho a otevřít Cloud 9. Takže Cloud 9 je samozřejmě cloud založené service-- CS50 IDE--, který má všechny naše pracovní prostory běží někde na internetu. A to znamená, že všechny naše soubory jsou již veřejně přístupné. Tak pojďme do toho a to udělat. Chystám se jít dopředu a vytvoření nového souboru NCS50IDE. Budu jej uložit jako předtím as hello.html a klikněte na tlačítko Uložit. A teď jen proto, aby ušetřili čas, jdu jít dopředu a zkopírujte vložit tento kód spíše než ji přepište. A uložte jej. A tak teď mám soubor s názvem hello.html. Ale jak to mám vlastně otevřít jako webovou stránku? No, to dopadá vestavěný do CS50 IDE není jen překladač, jako kovový zvuk a debugger, jako GDB a svazky jiných programů, je to vlastně plnohodnotným webový server běží v CS50 IDE. 

Všichni z vás, to znamená, mít svůj vlastní webový server. A webový server je jen kus o software, jehož smysl života má sloužit až webových stránek. Chcete-li poslouchat na požadavek od prohlížeče a reagovat s malými virtuálními obálkami uvnitř které je obsah, který jsem napsal. Takže to web server skutečně zdarma a open source. V případě, open source jen znamená, software, který někdo jiný napsal, že každý z nás může skutečně vidět a stáhnout a dokonce změnit zdrojový kód. A je to jen Apache. 

A udělali jsme to trochu jednodušší použití v CS50IDE tím, že volá jej Apache 50. Tak, že to může vlastně pochopit následující. Budu říkat Apache 50 start. A pak jsem jen chtěl říct tečku. A vidíme některé poněkud Arcane zpráva říká, Nastavení Apache dokumentu [? Skupina?] domů, ubuntu, co to je, lomítko pracovní prostor. Spuštění web server Apache 2 úspěšně. 

Tak dlouhý příběh krátký, já právě stiskl tlačítko a obrátil se na webovém serveru, který je nyní poslouchá na Internetu na TCP portu 80 na konkrétní adresu. A říká, že tady, a to se bude měnit v závislosti na své uživatelské jméno a dalších faktorech, nevšimnout teď, když jsem klikněte na to, IDE50 tečka jharvard a tak i tak si všimněte, že celou tu dobu Za posledních několik týdny, můžete mít si všiml, že vaše vlastní uživatelské jméno je zakotven v horní pravé ruce roh CS50IDE. 

A to vlastně bylo to všechno načasovat adresu, na které si můžete navštívit všechny soubory přes web. Až do teď, to není záleželo, protože v C, je obvykle chtějí věci běží v terminál, nikoli na webu. Ale dnes, začneme psaní webovým kódu že my chceme přístupné na veřejných URL. Takže to, co budu udělat, je klikněte na tuto adresu URL. 

A všimněte si, že vidím poměrně ošklivý index, je výpis adresáře, ale to, co soubor vyskočí na vás asi? Hello.html. To proto, že jsem ušetřil soubor ve svém pracovním prostoru. A to, co jsem řekl, Apache já webový server je hledat v Davidově pracovního prostoru adresáře. A ať někdo na svět vidět ty soubory. 

A skutečně, pokud teď klikněte na hello.html, Vidím v rámci této kartě přesně v tomto souboru. Nyní si všimnout, Cloud 9 to učinil něco trochu užitečné pro nás. V rámci CS50 IDE, Všimněte si, že je Najednou adresa bar. To proto, že i když jsme Chrome používáte k návštěvě CS50IDE, uvnitř CS50IDE je vlastní verze webového prohlížeče právě teď. A tak spíše než komplikovat věci jako takové, Chystám se pokračovat a stačí zkopírovat tuto adresu URL. Chystám se jít dopředu a jen otevřít své vlastní okno Chrome. Takže tam žádná kouzla tady, ne CS50IDE. Já jsem prostě jít doslova vložit můj J Harvard URL a stiskněte klávesu Enter. A voila, teď jsem, a teoreticky, všichni na internetu, jestli jsem nakonfigurován oprávnění přiměřeně, mohou navštívit tento soubor. A tak teď, když jsem řekl, hello.html, voila, tam je můj neuvěřitelně nezaujatý webové stránky. Takže pojďme udělat rychlou kontrolu zdravý rozum. Vzhledem k tomu, to vše je koncepční nastavit. A my jsme ve skutečnosti opravdu naučil, jak psát HTML sám o sobě. Jakékoliv dotazy tak daleko o tom, co se stalo? Ano. Má CS50 vlastní tyto webové stránky? V jakém smyslu? Dobrá otázka. Takže CS50 je vlastníkem CS50.io. Jsme opravdu koupil tento název domény. A od přírody z vás přihlášení do CS50IDE, vy všichni dostanete to, co se říká subdoménu. 

Takže IDE50-Malan, nebo IDE50-Rob.CS50.io, to je vaše jedinečná adresa v naše jméno domény. Takže pro účely kurzu, máte svůj vlastní unikátní adresu. Ale my jsme zjednodušený věci podle nákup domény nejvyšší úrovně, CS50 tečka I / O a pak všichni ostatní Uvnitř toho, abych tak řekl. A vrátíme se k tomu za pár týdnů pravděpodobně, zejména na závěrečný projekt Doba, kdy někteří z vás chtít, aby si své vlastní názvy domén. Je to vlastně poměrně přímočaré. Dobře. Takže pojďme teď tohle udělat. Chystám se vrátit do CS50IDE, kde můj soubor právě teď, hello.html, není všechno tak zajímavé. Chtěl bych udělat něco trochu hezčí než to. Takže já budu dělat něco takového. Dovolte mi, abych otevřené paragraphs.html. Tak to je soubor, jsem napsal v předstihu. V jeho horní části, jako je vždy máme připomínky. Ale v HTML, komentáře vypadat trochu jinak. On line a tři linky 14, vy zobrazit syntaxi pro spuštění komentář a končí komentář. 

Ale nic z věcí v Mezi záležitosti funkčně. Je to jen poznámku do člověk, co se tady děje. A stejně jako rychlý zdravého rozumu zkontrolujte, jestli jsem posunout dolů, co je jasné nový tag, že jsme zavedli? Tagy dosud jsme viděli, jsou otevřeny držák HTML, hlava, titul, a tělo. Ale to, co je teď zřejmě nového? 

Jo, s. P tag nebo odstavec tag. A pak jsem jen půjčil nějaké default Latinský text představovat své odstavců. Protože to, co jsem chtěl ukazují, je, jak byste mohli představují odstavců textu ve formátu HTML. A tak to, co se začíná dít Zde je to, že tam je již vzor vyvíjí. A nech mě jít dál a udělat. Dovolte mi, abych nejprve vypnout Apache. A budu se říct, že začít sám opět v dnešní zdroje sedmi m adresář. Tak, že mám přístup ke všemu. 

A teď, když jsem se vrátit do Tento výpis adresáře, Všiml jsem si, vidět každý soubor z dnes. A uvidíte v Dalším problémem set, budeme poskytne pokyny pro dělání přesně tohle. Pokud otevřu paragraphs.html, by to mohlo stejně vypadají jako programovací jazyk pro vás, pokud nechcete mluvit nebo číst latinsky. Ale to je jen tři body z textu, které jsou označeny v HTML. 

A všimněte si odstavce přestávky mezi nimi. Protože se ukázalo, ai když vás může mít sklon k tomu, zatímco v reálném světě, pokud chcete, aby řádek přestávky mezi věcmi, byste mohli jednoduše to a hit Uložit. A teď, když jsem znovu tady, oznámení že všechno, co jen stírá spolu pouze v jednom kaňka textu. Vzhledem k tomu, HTML je trochu hloupý jazyka. 

Je určen pro použití v takovém způsobem, že prohlížeč bude jen dělat explicitně, co si to říct dělat. Takže pokud nechcete to říct dej mi nový odstavec, vy nebudete vidět nový odstavec. A ve skutečnosti, co Prohlížeč bude dělat je iv případě, že stisknete klávesu Enter, řekněme, že znovu a znovu a znovu, pohybující se tento textový způsobem dolů na obrazovce a pak uložit a pak znovu načíst, prohlížeč se děje ke zhroucení všechny ty bílé místo do jen jediné viditelné mezery. Dobře. Tak to je značka odstavce. A tak to, co je vzor že rozvíjející se tady? No, zdá se, že v případě, že HTML je především o zahájení značku a končí tag. A co je to značka? No, je to jen kus syntaxe. Otevřete držák, klíčové slovo, uzavřený držák, je značka. Nebo počáteční značka. A pak, když jste udělal vyjádření sebe sama, stejně jako v budete hotovi s odstavcem, učiníte tak říkajíc opak. Ale opak není úplně dozadu. 

Prostě prefix stejná značka je jméno s lomítkem, jako je tento. Dobře. Takže není vše, co vzrušující. A ve skutečnosti, nejsme učinit web všechno zajímavější. Co když chci, aby se věci větší a odvážné? Tak to dopadá, že tady je příklad v headings.html, kde se v mém těle, Mám tag H1, H2, H3, čtyři, pět, nebo šest, z nichž všechny Zdá se docela Arcane. Ale když jdu otevřít tento příklad, pojďme se podívat. Headings.html. 

Takže prohlížečů ve výchozím nastavení vám může dát textu to je velký a odvážný nesourodých velikostí. H1 je velký. H6 je menší a poté všechno ostatní mezi tím. Tak to je zajímavé, ale stále není opravdu web vím. Co když chceme mám něco jako seznam. , Takže tady je seznam s odrážkami tři z Harvardu domů. 

Jak jste jít o dělá? No, podívejte se na list.html. A tady vidíme trochu funkiness ale uvažujme, co se děje. Takže na základě toho, co jste právě viděli, UL je zkratka pro výčtu. Nečíslovaný seznam prostě znamená odrážkami. Neexistuje žádná čísla. K dispozici je také něco, co nazývá objednat seznam, který je OL na značku. Potom LI, seznam položek je vše, co znamená. 

A automaticky, takže jej Čísla vše za vás. Ale opět, všechny mé odsazení a bílý prostor je jen kvůli mně. Prohlížeč není vlastně bude starat. Takže i když jste nemohli to udělat, jen aby bylo jasno, byste neměli, přestože prohlížeč bude stále být schopen pochopit, že v pohodě. Jsem bít znovu načíst v mém prohlížeč, já klepnutím znovu načíst a žádná změna se děje protože prohlížeč stále dělá přesně to, co ti řeknu to udělat. 

Dobře. Tak to je všechno jen textu. Nyní pojďme dělat něco zajímavějšího. Chystám se jít dopředu a půjčovat si některé z těchto HTML. Chystám se jít dopředu a vytvoření nového souboru zde. A budeme nazývat rick.html. Máme neúměrně Použité něco volal válec rick v tomto třídy v tomto roce, já nevím, prostě se to stalo organicky. 

A teď se to vymkne z rukou. Takže jsem prostě jít s ním. A když půjdu do Google Obrazy a Rick Astley. Pokud nevíte, proč děláme to, jen přečíst na Wikipedii. Pokaždé, když jste klikli na odkaz, někdo smál někde. A nech mě jít tam ahead-- jdeme, pojďme zobrazit tento obrázek. 

Takže zde máme obraz v Google Images. A předpokládejme, že je to rozumně všude na internetu. Takže budu předpokládat, že je to v pořádku pro mě aby skutečně dát to do mé webové stránky. Chystám se pokračovat a zkopírujte adresu URL obrázku. A teď, když jsem se vrátit do Cloud 9, pojďme se podívat, co se dá dělat. Tak tady je jen webové stránky. To je Rick Astley, haha, Chystám se teď vrátit do svého prohlížeče, znovu, a zajímavé. 

Kde je Rick? Tak se ukažte, co se stalo. Vlastně, budu předstírat, že jsem to neudělal. [Neslyšitelný] ho sem. Vrátíme k tomu za chvíli. Tak tady je rick.html. Takže to není Rick Astley. Tak to dopadá v našich silách ve skutečnosti ho přidat sem. To je Rick Astley. Chystám se říct, aby mi snímek, jehož Zdroj je URL jsem kopírovány, který zřejmě je šťastný narozeniny něco nebo jiný. 

A teď budu zavřít značku, jako je tento. Tak to je super dlouhé balení. Ale všimněte si, že všechno, co jsem udělal, je otevřený držák image, zdroj s atributem tohoto. A je to opravdu dlouhá URL. A na samém konci, nevšiml. Proč jsem udělal lomítko úhlový držák místo, jako každý jiný tag, mající otevřený držák, IMG, uzavřený držák? Jen se hádat, i když jste nemají znalosti vůbec HTML předtím. 

Tak to je, jak se zavře příkaz, ale proč to není opravdu dělat intuitivní smysl udělat něco trochu více upovídaném jako úzké image? To jo. To jo. Jen sémanticky, neexistuje žádný smysl zahájením obraz a konče obraz, je to buď tam, nebo to není. Takže to nemá smysl nechat mezeru pro nic jiného uvnitř obrazu. Ty prostě nemůže udělat. A tak se syntaxe by obecně být jen udělat lomítko uvnitř otevřeného tagu nebo počáteční značkou a pak kliknout na Uložit. 

Takže když jsem se teď znovu načíst tento soubor, nyní Mám dobrý web stránek kuchyni sem. A mohli bychom jistě opravdu obtěžují lidi vložením místo jako odkaz na YouTube. A ve skutečnosti, kdykoliv jste někdy šel na YouTube, a dovolte mi, abych vlastně náhodou rick role jsem tady. Takže Rick role. Takže Rick roll-- já jdu sem. 

[Přehrávání hudby] 

OK, jeden člověk se to líbilo. Takže si všimnout celou tu dobu, pokud vás klepněte na odkaz Sdílet, vás samozřejmě získat adresu URL, které můžete ve skutečnosti vložit do e-mailu nebo forenzní image nebo ve problém nastavit nebo ve snímku. A teď, když jsem místo toho klikněte na embed, Všimněte si, že celou tu dobu, tohle byl tam. Chystám se jít dopředu a kopírovat to. 

A jen tak můžeme lépe vidět, že jsem chystá vložit ho do textového editoru. Všimněte si, že tohle YouTube byl říkám. Pokaždé, když navštívíte YouTube video, pokud jste chcete vložit video na webové stránky, jednoduše uchopit toto. Takže tohle je další HTML tag nazvaný iframe. Nebo in line rámu. Tak to také vypadá trochu víc složitější než všechny ostatní. Tak to dopadá, že obraz tag a zřejmě tag iframe vzít, co se nazývá atributy. 

A to je další kus syntaxi v HTML. Kromě tagu název, otevřený držák jmenovka, můžete ovládat chování tagu tím, že má spoustu atributu se rovná hodnotě. Atribut se rovná hodnotě. A tak například, YouTube nám říká, pokud chcete, šířku tohoto videa být 420 pixelů a výška být 315 pixelů, to je jak to vyjádřit ve formátu HTML. 

Zdrojem videa se děje se, že dlouhé YouTube URL a pak některé další věci jako rám hranice je nula, takže pravděpodobně znamená, že je bez ohraničení kolem věci. Umožnit celou obrazovku pravděpodobně Znamená to, že uživatel můžete kliknout na tlačítko a vlastně celé obrazovce video. Takže jestli opravdu chci být působivý tady v Rick dot HTML, spíše než použít značku obrazu, ať me odstranit, že místo toho vložit tento. A teď znovu. A teď je to tady zase. Dobře, to stačí. Dobře, takže se budu snažit těžké to udělat znovu. Takže jaké jsou některé z takeaways tady? Takže HTML, tak ošklivá, jak těchto webových stránkách jsou, je vlastně docela jednoduchý. Není to programovací jazyk. Nemá funkce. Nemá smyčky. Nemá podmínky. Vše, co to má, je desítky různé značky, z nichž každá má nulovou nebo více atributů. A ve skutečnosti to, co je zábavné o HTML jak začnete ponořit do je, že je velmi sebe učenlivý. 

Vše, co to vyžaduje, je pochopení obecného rámce HTML. Co je to značka, jaká je atributem, jak si vlastně nakonfigurovat webovou stránku jak následuje. A všechno ostatní je opravdu výsledek dívat se v on-line reference nebo googling jak udělat nějaké techniky nebo jak jsme viděli, při pohledu na Facebook zdroje kódu, při pohledu na webové stránky že se vám líbí na to je zdrojový kód a pochopení toho, jak vývojáři tam vlastně položil věci. 

Takže můžeme dělat obrazy stejně. A ve skutečnosti, to udělali jsme před chvílí. Nech mě jít napřed a jen ukázat vám. Zde je několik ukázkový kód. Pokud jste někdy chtěli vidět nevrlý kočku. Tak si všimněte, že mohu mají značku obrázku zde. A já mám poznámku nad ní. Mám alternativu text pro přístupnost. Takže někdo, kdo je pomocí obrazovky čtenář z důvodů pohled mohou ve skutečnosti pak mají své Čtečka obrazovky říkají nevrlý kočku. Protože pokud to není možné viz obrázek, oni mohou mít alespoň jejich počítač řekněte jim, ústně, co to je. A zdrojem tohoto souboru je cat.jpeg. Takže ve skutečnosti, když jsem chtěl dostat chytrý, co jsem mohl mít done-- Slibuji, že nebudu jít do Rick Astley, tak Budu google pro kočku místo. A když jsem se jít na Google Images tady, a my předpokládáme, že se jedná o obraz mého kocoura. 

Předpokládejme, že mám kontrola klikl nebo vpravo klikli na to, náhodně strašidelný. A cat.jpeg Jdu ušetřit na mém desktopu. Dovolte mi, abych se vrátit k Cloud 9. Všimněte si, že tady můžu jít nahrát místní soubory. A když jsem to chytit Soubor, cat.jpeg, oznámení že mohu přetáhnout a hodit ho do Cloud 9 a to bude křičet na mě tady. 

Protože jsme již vám dal soubor cat.jpeg, ale je to super snadno urvat fotografii, kterou jste si převzato z Facebooku nebo Flickr nebo podobně a vlastně jej přetáhněte do Cloud 9 a pak se to součástí vašeho vlastního osobního webové stránky nebo problém nastavit sedm nebo osm, jak budeme brzy vidět. A pak, když vás konečně navštívit tu kočku, za předpokladu, Stáhnul jsem si, že stejné kočku, Oznámení that-- že byl rozkošný. 

Co byste vidět, je něco takového obličej zde. Takže soubory, které jste Odkaz na webové stránky mohou být buď lokální ve své vlastní účet nebo vzdálené na jiném serveru jako je tomu v případě Rick Astley fotografie před chvílí. Tak kde to, co else-- jinak můžeme dělat? Takže pojďme se podívat na následující. Víte, co je trochu cool? 

Dosud jsme dělali velmi statické webové stránky. Chci okořenit věci takto. Chci, aby mé vlastní vyhledávač. Tak, aby se vyhledávače, pojďme jděte do toho a začít dělat to. Chystám se jít dopředu a vytvořit nový soubor s názvem search.html. A my jsme prefabed verze on-line. Jejda. Nepoužívejte vložit do okna vašeho terminálu. Montované verze on-line. A já začnu následovně. Tak tady je to začátek soubor s názvem search.html. Budu uložit jej do dnešní zdrojový adresář. Budu volat tuto Hledat. Vlastně, budeme dělat to lépe. CS50 Search a vlastně to značka. A teď, budu říkat něco jako H1 CS50 Search. A pak tady dole, H2 brzy. A jen shrnout, H1 a H2 mysli to, co v tomto pořadí? 

Jo, tak velké a odvážné, a není tak velký, ale stále tučně. Takže když jsem se zachránit to a jít sem, podívejme se soubor search.html. Dobře, a ten je right-- [neslyšitelný]. Připravit. David je zmatený. Oh, je to přímo tam. David je idiot. DOBŘE. Tak tady to je. Takže CS50 hledání brzy. Takže teď, pojďme syntetizovat to, co jsme dělali minulý týden. 

Tam, kde jsme hovořili o nižší mechanika HTTP úrovni. A tyto nové nápady HTML, který je jen to značkovací jazyk kde na vás řekněte prohlížeč přesně, co dělat a realizovat naše vlastní vyhledávač. Takže místo toho jen řka brzy, já jsem chystá zavést něco, co nazývá tag formuláře. A v této podobě, budu mít něco jako vstupní pole. 

A jméno tohoto vstupu pole, budu to říkat Q. A typ tomto vstupním poli Chystám se říct, je jen "text". A textové pole, jak jsme to vidět, je jen textové pole. A tak to není smysl tady mít něco uvnitř ní na tomto místě. A tak jsem prostě jít zavřít tag s tím lomítko přímo v tagu sám. A pak budu jeden jiný vstup. Typ vstupu rovná odeslat. A pak budu zavřít tenhle taky. 

A teď já jdu zpátky. A už vidíme, i když docela ošklivý, jsem dostal začátky moje vlastní vyhledávací stránku zde. Ve skutečnosti, dovolte mi, abych se snaží vyčistit to se trochu. Ukazuje se, že na vstup tady, můžu mít další atribut s názvem zástupný symbol. A já jsem mohl vidět něco jako klíčová slova, nebo více specificky, dotaz pro q. 

A všimněte si, teď, mám tento druh šedé textu že zmizí as Jakmile začnu psát, ale je to asi něco jste viděli v jiných webových stránkách. Nemám opravdu rád na tlačítko Odeslat. Takže jsem vlastně bude dát Tlačítko pro odeslání hodnotu vyhledávání. A teď, když jsem znovu, všimněte si, že můj Tlačítko stane jmenoval vyhledávání. Víte, já opravdu nemám stejně jako logo zde. Takže generátor Google Font. 

Chci okořenit to ještě výš. Takže CS50 vyhledávání. Dovolte mi, abych vytvořit vlastní logo. To vypadá hezky. Takže teď mi dovolte zachránit tento as-- pojď. Tam, kde to jde? Tam. DOBŘE. Minul. Uložit jako. Hloupý prohlížečů. Stand by, budeme opravit jednou provždy. Tam jedeme. Dobře. Litovat. Den volna. Nyní je to funky. Ukončete celou obrazovku. Dobře. 

Nyní, jako normální osoba, uložit obrázek jako. Logo.gif. Teď jdu do CS50IDE a Chystám se prostě chytit loga, Chystám se přetáhnout do Můj zdroj sedmi adresář, Soubor již existuje, já jsem s tím OK. Takže budu jej přepsat proto, že už jsem ho měl. A teď jak to mám zbavit tohoto? 

Pojďme napřed sem a dělat obrázek zdroj rovná logo.gif. Zavřete to. Ušetřete. A teď, když jsem se vrátit do svého vyhledávání strana, teď vypadá to docela dobře. Dobře, tak to nemá docela udělal něco užitečného. Ve skutečnosti, dovolte mi, abych zkusit vyhledávání pro kočku a uvidíme, co se stane. Kočky. Sakra. To není jen práce, zřejmě. Takže to, co je klíč kus že je tu chybí? 

Dobře, i když neznáte žádné HTML, Začal jsem označení, který formulář telefonu a já jsem řekl, to, jak se dostat vstupů, dej mi textové pole a tlačítko pro odeslání, co kus zjevně chybí? Předpokládejme, že chceme, aby skutečně dostat tahle věc pracuje správně. Co musíme udělat? Máme potřebu zavést zadní konec databázi nebo vyhledávač sám, a že to bude trvat spoustu času, upřímně. 

Takže pamatujte, co jsme dělali minule. Takže pokud hledáte něco na Googlu a vy jste v předstihu vypnutý, Připomeňme, okamžité vyhledávání. Dovolte mi tedy vypni to tak, že toto ve skutečnosti se chová jako starší školní prohlížeče, když jsem teď hledat něco jako kočky, vzpomenout, co URL vypadá. Je to docela tajemný. Ale vložené tam, Připomeňme, je lomítko vyhledávání. Otazník q se rovná kočky. 

A to se zdá, aby mi celá parta výsledků vyhledávání. Takže víte, co budu dělat? Jdu si půjčit Google na chvilku. Chystám se jít přes tady a budu říkat že tato tvoří opatření nebo cíl, abych tak řekl, by měla být doslova Google. A metoda jsem chtěl po použití bude mít. 

Takže to, co je akce? Akce je podivně pojmenovaný, ale to jen znamená, kdo bude zpracovávat akce tohoto formuláře? Když jsem klepněte na tlačítko Hledat, kde by měl výsledek jít? A když jsem se teď vrátit k mé podobě tady a obnovte mé webové stránky a teď něco hledat jako pes, všimněte si nyní Jsem znovu zavedena Google. Je to tak? 

Pokud chci něco hledat jinak, to funguje u nejen psy, funguje i pro kočky. Funguje také na CS50. A OK, je to jen pod zdrcující, není to? Dobře, ale to vlastně funguje. Tak co se skutečně děje? Takže jsem učil můj prohlížeč, pomocí HTML, aby se vstup od uživatele a vlastně poslat ten vstup ke vzdálenému serveru pomocí protokolu HTTP. 

A protože mém prohlížeči chápe HTTP, to vlastně konstruovat tak, aby to, co URL Skončím přes v mém prohlížeči, Všimněte si, co se stane, když jsem hledal psa. Kdybych klepněte na tlačítko Hledat, Všimněte si, že URL se mění, jak jsem zamýšlel na google.com/search~~V dotaz rovná psa. A to proto, že formě ví, protože metoda je získat, jednoduše připojit ji k této tam URL. 

Nyní, tyto webové stránky jsou stále ošklivé. Takže pojďme představit jeden další kus syntaxe pokud můžeme dnes. A to je něco, známý jako kaskádových stylů. Dovolte mi tedy se podívat na Tento příklad tady a vidět pokud můžeme odvodit, co se děje. To je CSS0.html. A to je místo, kde se věci trochu ošklivé. Vzhledem k tomu, bohužel, ve světě internetu, HTML sám o sobě nemůže dělat všechno. A tak pokud chcete stylizovat své webové stránky, je skutečně třeba se zaměřit na estetika v odlišným způsobem. Tak tady, mám tělo mém webu strana, jehož vnitřek je velký div. A div prostě znamená rozdělení. Takže je to jako bod, ale to nemá stejnou sémantiku z odstavce textu. 

To jen znamená, že k prohlížeče, přichází velký obdélníkový oblast mém webu strana, chci s ní zacházet zvlášť. Nyní, linka 21 je místo, kde začíná, že div. A stačí se hádat. Jaký je vliv řádku 21 na Zbytek obsahu stránky? Středící to. To je vše. Takže jsme neviděli způsob ve skutečnosti centrování textu. 

Ve skutečnosti, moje vyhledávače, na rozdíl od skutečného Google, všechno bylo odůvodněno směrem doleva. A tak nyní v řádku 21, říkám, hej browser, vytvořte rozdělení stránky. Jen mi dejte velký, neviditelný obdélník. To je to, jak chci myslet na webové stránky. A pak to stylizace takto. Uvnitř těchto citací, Nyní, je druhý jazyk že jsme zavedli dnes tzv kaskádové styly. Naštěstí, to taky není programovací jazyk, tak je to velmi omezený v jeho syntaxi, ale také velmi omezen ve své funkčnosti vzhledem k tomu, HTML je vše kolem značkování data webové stránky a struktura webové stránky. CSS je obecně o poslední míle, estetika, jak velikost a barvu a umístění přesně přímo na webové stránce. A skutečně, to je tvořeno s klíče a hodnoty. 

Nemovitost jako je tento, textu sladit, následované dvojtečkou, následované hodnotou, která majetek, který je v tomto případě je centrem. A teď všimnete může hnízdo tyto věci. Kdybych chtěl všechno v tom, že Já jsem zvýrazní se na střed, to je důvod, proč mám linku 21 a odpovídající řádek 31. Ale co teď chci říci, John Harvard, vítejte na mé domovské stránce. 

Copyright symbol John Harvard. A předpokládám, že chci, aby první tyto řádky být docela velký. 36 pixelů. Tak to je slušná velikost. A chtěl jsem jeho váhu být odvážní. Ale pak pod tím, Chci menší text. A pod tím, chci ještě menší textu. Litovat. Dnes se cítí jako off den. 

Takže teď, co vlastně dělám to vyjádřit? Tady na lince 22 je vložený div nebo vnořené div, chcete-li. To má svůj vlastní styl značky taky. I specifikovat velikost písma 36. I specifikovat váhu písma tučně. Tady dole, já jen zadat 24 pixelů. A konečně, v řadě 28, I 12 specifikovat. Takže stejně jako rychlou kontrolu sanitačního a jako lidské čtení to, která slova na obrazovce, ve skutečnosti bude tučný? Které linky jsou vlastně bold? 

Jen John Harvard. Je to tak? Vzhledem k tomu, stejně jako linka 22 říká, že hej browser, tady je rozdělení stránky. Ať je to velikost písma 36 bodu. Make hmotnost písmo tučně. Jakmile dosáhnete odpovídající koncová značka nebo uzavřený tag na lince 24, to znamená, hej prohlížeč, přestat dělat, co to je, co děláte. A upozornění, aby bylo jasné, přestože potrubí 22 má všechny tyto atributy jako je styl, když vás zavřít značku v řadě 24, si jen zmínil název tagu. 

Nemusíte opakovat styl slovo, nebo vše, co je uvnitř těchto uvozovek. A tak, když se podívám na tohle teď ve svém prohlížeči, pojďme Podívejte se na konečný výsledek. Nech mě jít vpřed na tento soubor, který je CSS 0. A to je ještě docela obyčejný, ale stále dost zajímavé. Ale ukazuje se, že je další věci, mohu dělat tady, a na riziko tvorby Tento zcela odporný, Všimněte si, že v mém Tělo mé webové stránky, Můžu udělat něco vtipného jako bg nebo barvy pozadí. 

A rychle, jaký je vaše oblíbená barva? Green Slyšel jsem. Dobře. Takže teď, když jsem trefil znovu načíst teď, máme zelenou webovou stránku. Dobře, takže to není špatné. A teď, když chci, aby to opravdu pohodě, mohu barvu mého textu i červené. Takže pojďme se podívat, jak to vypadá. Teď vypadá to docela dobře. A tady dole, pokud jste opravdu chci si s někým nebo chcete-li být jeden z těch lidí, kteří se snaží přimět vás k návštěvě web strana proto, že jsem napálil Google do myšlení je tu celá parta klíčových slov jako-- podívejme se, reload. Kde to šlo? A tam nás to. Dobře. Takže říkám to jako stranou, budeme mluvit o této věci za pár týdnů když hovoříme o bezpečnost, pokud jste ve skutečnosti embed celé svazky klíčová slova na webové stránce, i když nejsou viditelné pro lidský, někdo jako Google, samozřejmě, stále můžete skutečně najít to. Dobře, takže to je docela příšerná docela rychle. 

A ve skutečnosti, to není všechno že hodně na rozdíl od mé vlastní web Strana jako vysokoškolák, který Začal jsem googling kolem najít minulé verze mých starých webových stránek. Bylo to dost špatné. Ve skutečnosti, jsem si jedné těsně před třídy. Ale je tu ještě horší tam venku. Toto zřejmě byla moje Domovská stránka již v roce 1996. Zřejmě jsem si myslel, že to vhodné ptát lidí, jejich jména před tím, než mohl skutečně vidět mé webové stránky. 

A pak jsem jim ukázal něco hloupý, pravděpodobně. Budu vykopat víc pro příště. Ale teď, pojďme zvážit trochu designu. Už jsme mluvili o stylu. A tuto stránku tak daleko většina všechno, co jsem napsal je velmi čistý stylisticky. Ale co o designu? No, je tu spousta nadbytečnosti v tom, co jsem dělal tady. 

Zmínil jsem se o slovo barva v několika místech. Zmínil jsem se o velikost písma v páru místa a odvážný v několika místech. A v podstatě, já jsem co mísily dva jazyky. Mám HTML se svými značkami a my atributy a pak najednou, mezi uvozovkách, mám druhý jazyk dnes s názvem CSS, což je opět jen ty klíče a hodnoty, nebo tyto vlastnosti odděleny dvojtečkou. 

Ukazuje se, že hodně stejně jako v C, kde jsme můžete začít vytknout nějaký kód do hlavičkových souborů, takže můžeme udělat totéž v HTML. A krok k, který je následující. Všimněte si, že tato verze, je CSS1.html Strukturálně přesně stejnou webovou stránku. Tak jsem dostal spoustu z divs, ale tentokrát jsem zbavili obalu div jak uvidíte. 

A já jsem dal ty tři divy horní, střední a dolní, jedinečné ID. To je pěkné, protože by dávat ty divize ze stránky jedinečných identifikátorů, I na ně odkazovat jinde. Kde? No, dovolte mi, abych posouvat nahoru. A tak daleko, kdykoliv jsme se podíval v čele webové stránky, co je štítek pouze jsme měli v hlava webové stránky? Trochu hlasitěji. Jen titul doposud. Ale ukazuje se, že je několik dalších věcí, si můžete dát tam, jeden z které se to nazývá tag styl. Takže před chvílí jsme se podívali v atributu stylu. Ukázalo se, že je tu značka styl. Patří uvnitř hlava webové stránky. A teď si všimnout, co dělám. Mám uvnitř tohoto style tag následující. Jsem doslova za zmínku na řádku 20 se název tagu, který chci stylizovat. 

Pak mám otevřenou složenou závorkou a uzavřené kudrnaté ortézu. Takže svým duchem podobat C, ale opět, to není funkce, to je jen detail syntaktická zde. A pak samozřejmě, říkám prohlížeč, hej prohlížeč, aby celé tělo stránky mají zarovnání textu z centra. A pak se to říká následující. Hele prohlížeč, když vidíte HTML prvek nebo značku na stránce, která má jedinečný identifikátor vrcholu, takže symbol hash tady prostě znamená, Unikátní myšlenka nahoře, jděte do toho a aby jeho velikost písma 36 a jeho váha písmo tučně. 

Hej prohlížeč, prvek, jehož ID je střední, aby bylo 24 pixelů. A hele prohlížeč, pokud vidíte Myšlenka na dně, aby bylo 12 pixelů. Účinek na konci je přesně sam. Pokud bych jít do CSS 1, Stránka vypadá stejně. Ale my jsme o krok směrem k o něco lepší návrh. Dovolte mi, abych se vrátit sem do CSS2 a uvidíte, co ještě jsem udělal. 

Nyní je strana je opravdu, ale opravdu čistý. Ve skutečnosti, mohu se vešly všechny obsah na stránce zde. Ale to, co nová značka jsem představil, samozřejmě? Internetový odkaz. A není to nejlepší jméno pro značku, protože to není odkaz v tom smyslu, že ho známe, ale to znamená, odkaz v nějakém jiném souboru. To je něco jako ostré patří v C. 

To je způsob, jak v HTML říkat hej prohlížeč, jdi obsah Soubor s názvem css2.css. Vztah pro mě, je, že je to stylů. A opravdu, že to, co jedna z S je v kaskádových stylů prostředků. To je styl list. Je to jen textový soubor obsahující celá parta majetku. Je to celá řada stylů které chcete použít na stránku. 

A tak to prý je s odkazem na druhého souboru. A když otevřu ten, CSS2.css, Všimněte si, že všechno, co jsem udělal je zkopírovat a vložit všechny z toho do tohoto souboru. A teď, i když jste nikdy Před kódované této věci, zvaž s příslovečná inženýrství klobouk o, proč je tohle lepší konstrukce asi? Vytknutí tyto vlastnosti CSS, jejich uvedení do vlastního souboru. I přesto, že jsme vyřešili tento před problém jako pět minut hned v první verzi. 

Jsme nezlepšila strana stylisticky, To je prostě lepší design v nějakém smyslu. Proč myslíš? To jo. Pružnější jak? To jo. Takže pokud chcete jít zpět a změnit věci, Nyní máte na jednom místě kde si můžete něco změnit. A ve skutečnosti, po něčem jako problém set sedm, kde budeme implementovat webové stránky obchodování na burze, že to bude mít celá řada stránek. A to by bylo opravdu nepříjemné, pokud se rozhodnete, hm, Nemám opravdu rád 24 pixelů, chci aby to bylo 28 pixelů nebo o něco větší. A pak budou muset udělat globální najít a nahradit nebo otevřít všechny soubory vašich webových stránek prostě skutečně změnit jednu hodnotu. Vytknutím tyto styly na jednom centrálním místě, Nyní můžete otevřít jeden textový soubor v CS50IDE do jakéhokoli programu, změňte ji, uložit, a hotovo. Vy jste šíří ti, změny všude. A že by bylo stejné v dot h souboru stejně. Takže nějaké otázky tak daleko na tuto syntaxi? Dobře, takže máme udělal všechno zdá s výjimkou skutečně realizovat hypertextové odkazy. A tak pojďme do toho a to udělat. Nech mě jít dopředu a vytvoření nového souboru zde. Chystám se to nazvat link.html, dal v dnešním kódu. 

A já budu dělat open držák typu doc ​​html. Jako stranou, tohle na top, tento typ deklarace doc, to je jediná, která je divný s vykřičníkem. Musíte jen na to tam, a to znamená, že jsme pomocí HTML verze 5. Starší verze jazyka měli mnohem déle řetězce, které jste potřebovali dát tam. Takže zde je příklad tzv odkaz. 

Potřebuji tělo mé webové stránky zde. A sem, a href rovná řekněme HTTP://www.disney.com a můj oblíbený webové stránky, budeme říkat. Dobře, tak velmi neškodný, uživatelsky přívětivé stránky. Pokud bych teď jít do mého adresáře výpis sem a otevřít link.html, máme hyper text. 

A skutečně, to je místo, kde H v HTTP pochází. Hypertext Transfer Protocol je o přenos textu že má hypertextové odkazy na jiné zdroje. A skutečně, tady je obeznámen, pokud retro, modrý odkaz, který v případě klepnutí mě skutečně vést k Disney.com. Teď, ach, to je vyjde brzy. Dobře, takže teď, jaké jsou některé důsledků to? 

A upřímně řečeno, začíná svět se trochu známější a také trochu děsivější ale také o něco více já obhajitelný jakmile začnete pochopit tyto věci. Vzhledem k tomu, šance jsou, že někteří z vás, když jdete prostřednictvím vaší složce se spamem Gmail, nebo dokonce Váš e-mailové schránky, pravděpodobně jste dostal nějaký e-mail který je po vás Chcete-li změnit Heslo možná nebo možná ověřit PayPal pověření nebo kdoví co ještě. 

A ve skutečnosti, možná jste obdrželi něco, co říká, že podobně klikněte zde resetovat PayPal heslo. A teď, všimněte si, pokud to není Disney.com ale jako badplace.com a reload, že text zde Dalo by se říct něco vůbec. A ve skutečnosti je to jen slova. Proč bych vlastně být super škodlivý a říkají http://www.paypal.com. 

Klikněte zde resetovat PayPal heslo a teď znovu. To vypadá docela legitimní, že jo? Chci říct, že by to, klikněte na e-mail, který právě říká, že tento. Nevšimnout zde dichotomie. Říká www.paypal.com, a ve skutečnosti, počkejte chvíli, Víme, že chcete S pro bezpečnost. Takže teď, jděte na www.paypal.com HTTPS, ale pokud jste nikdy nedělal, se dostat do zvyk vznášející se nad malé odkazy zde. A je těžké vidět, tam na obrazovce, a je to tady není tak jednodušší. Ale tady cesta dolů malý nepatrný roh dělá prohlížeč skutečně vám říct, že jedeme na badplace.com místo Paypal.com. A teď, kam jdeme s tím? Všechny příklady jsme dnes udělali, jsme tvrdě kódované a zadali ručně. Web je neuvěřitelně nezajímavé, když budete tvrdě kódovat vaše webové stránky tak, aby obsah je statická a nikdy se nemění. Samozřejmě, že všechny naše oblíbené stránky dnes, ať už je to Gmail či Twitter nebo Facebook nebo libovolný počet dalších jsou dynamické. Jsou měnící se v Reakce na vstup uživatele stejně jako výsledky vyhledávání Google. 

A tak ve středu, co děláme, je odjíždíme HTML a CSS úvod za námi a my se za samozřejmé, že nyní vědět a my představit nový programovací jazyk volal PHP, který rád C, se chystá dát nám pravomoc skutečně vytvořit programy , že samy o sobě vytvářejí výstup. V tomto případě budeme používat PHP generovat dynamicky web stránek pomocí tohoto nového jazyka. Tak o tom až ve středu. Uvidíme se potom. 

[Přehrávání hudby]