[Prehrávanie hudby] 

DAVID J Malan: To je CS50 a to je začiatok týždňa 7. Takže vitajte späť. A môžete pripomenúť, že v probléme set štyri, tam bol trochu lov pre niektoré atraktívne ceny, pričom Po obnoviť fotky Zamestnanci ako tu, tak v New Haven, ste boli vyzvaní, aby si čo najviac títo počítačoví odborníci, ako by ste mohli. A máme celý banda podanie. Myslel som, že by som zdieľať pár s vami dnes. 

A budeme písať všetky tieto online. Ale predovšetkým som chcel upozorniť to-- studne jeden, Sam bol v pomerne málo z nich všeobecne predstavujúce takhle. Zdá sa však, že od dnes ráno, víťaz bola určitá niekto menom Ken s 24 zamestnancov zachytil na kameru alebo málo viac, keď vezmete v predstavujú viac zamestnancov v obrázkoch. Na snímke je tu ďalšia Ken Márii v New Havene. 

Teraz, Ken, keď sa zmení out je trochu rohového prípadu že sa ešte nestalo skôr. Ukazuje sa, že nenastalo sa mi dať drobným písmom v probléme nastaviť štyri, ktoré hovorí, že zamestnanci sú nespôsobilé pre atraktívne ceny pretože Ken je, samozrejme, jeden z fotografi na našich zamestnancov. Teraz, s tým povedal, Pôvodne mi písal hovoriť Prosím, nevkladajte tieto fotografie online. Myslím si, že z veľkej časti pretože väčšina z fotografií že tento fotograf sa pozrieť trochu niečo také. A podobne. 

Ale Ken by som, aby som vás uistil že je to veľmi dobrý fotograf, on je profesionál, vezme fotky, ktoré nie sú rozmazané, že sú lepší v centre pozornosti, a on trvalo pomerne málo z našich vlastných zamestnancov. Ale skôr než len potvrdiť Ken, čo sme si mysleli by sme robiť sa prejsť zoznam Skutočné študenti, ktorí predložili. A ukázalo sa, že Lance sa 15 fotiek ako z dnešného rána bol náš víťaz. 

A tu snímky je s Lance Colton, s Skazi, sama so sebou a so Samom. Ale potom sa ukázalo, že od 11:46, takže pred len trochu, Vrátil som sa do svojho e-mailu a zistil, že sme mali ešte jeden podania študent menom Bonnie ktorých e-mail povedal len toto. Nebudem klamať, že som Pritom počas vyučovania. A potom pokračoval pripojiť len 14 fotografií, jeden plachý Lance je 15. 

Ale v Bonnie fotografiách, sa ukazuje, out boli viac zamestnancami, Sam medzi nimi, takže to, čo sme si mysleli, by sa urobiť, je uznať oboch týchto technológií. Takže okrem získania Dropbox priestor, ktorý každý, kto sa podieľali prijíma, budú aj tieto dve časti získať peknú zaistený obed pre nich a ich časť Mates tento nadchádzajúci týždeň. A tak budete počuť od nás, Lance a Bonnie, o tom. Tak veľké gratulácie k nim. A teraz, kto by ti z vás, rovnako ako obed všeobecnejšie vedieť, že CS50 obed v Cambridge a New Haven je tento piatok. Prejsť na CS50 web lomítko RSVP. A teraz pár slov o seminároch. Viac curricularly. Takže sme blíži bod semestra kde by ste mali začať premýšľať o záverečných prác. A v skutočnosti, len v trochu, bude takzvané predbežné návrhy je splatná. Takže predbežné návrhy sú určené pre byť dosť nízky vplyv a naozaj len príležitosť pre skladať krátku poznámku Váš kolega učenie zoznámiť ho alebo ju, čo si myslíš chcieť urobiť pre svoje finálne projekt. 

Teraz, veľa študentov končí robí webový záverečných prác. A samozrejme, sme len Teraz minulý týždeň v tejto a za potápanie do programovania webu. Takže nie sa báť, ak vás nemajú absolútne žiadnu predstavu, ako by ste stavať myšlienky, ktoré môžete mať vo svojej mysli. To je naozaj len nútiť funkcie aby vám premýšľať a hovoriť s TF o tom. Ale aby som vám pomôcť s tým, a s konečnými projektmi v konečnom dôsledku, vedia, že CS50 má tradíciu ponúkať semináre. 

A to sú voliteľné, ruky na, alebo prednášať na základe príležitosti sa dozvedieť viac o témach, ktoré sú trochu vedľajšej do kurzu je osnovy, ale napriek tomu nádherné Materiál riadiť záverečných prác. A tak to je zoznam, ktorý je Zamestnanci CS50 tu v New Haven prišli s pre v tomto roku o iOS programovanie, Android programovanie, vývoj hier, a zväzky viac nástrojov a jazykov a techniky. 

Takže pozor na internetových stránkach CS50 je. A do tej doby, ak chcete zaregistrujte ako záujemcovia o niektorý z nich, prejsť na CS50 je lomítko registra. A potom budeme sledovať, ako na dni a letové časy a miesta a všechno-- najviac všetko bude možné sledovať, a tiež k dispozícii na vyžiadanie po ak si nemôžete vlastne robiť to. Takže bez ďalších okolkov, my prestali minule s GET. 

A to bolo ako správu, ktorá bola vnútri virtuálneho obálky, pripomínajú, že sme míňali na routeru, aby router medzi webovým prehliadačom a web servera. A toto posolstvo vyzeral Trochu niečo také. To bolo viac tajomné posolstvo, ktoré bol vlastne vo vnútri obálky napísané na kuse papiera, ktorého Prvý riadok hovorí, že doslova, dostať lomítko. 

A rovnako ako kontrola sanitačného, čo ste lomítko naznačovať? Čo znamená, keď lomka žiada o webové stránky? Môžete požiadať o to celý čas. Väčšina kedykoľvek návšteve webovej stránky, budete nie sú v skutočnosti zadajte názov súboru. Pravdepodobne ste jednoducho ísť na Facebook.com, vstupovať, gmail.com, alebo podobne. A čo lomítko predstavuje? Jaky súbor? Alebo čo strana, konkrétne? 

Index, jo. Takže východiskové stránku. Takže ak nechcete určiť súbor menujeme začneme vidieť, ste vlastne len žiadajúci daj mi predvolenú stránku Facebook alebo mi môj e-mailovej schránky alebo dať me predvolená stránka noviniek na webových stránkach CNN alebo podobne. A server reaguje na že správa s niečím takto, hovoriť áno, hovoriť HTTP verzie 1.1. 

200, čo je stav kód, ktorý my, ľudia len zriedka niekedy vidieť, pretože je to dobré. Pretože to znamená, že OK, žiadosť bol prijatý a správne zaobchádzať. A typ obsahu zrejme v odpovedi je pomerne často, ale nie vždy, text. A konkrétne, HTML. A to je vlastne kde sa pozrieme na dnes. 

Takže v skutočnosti, ja idem vpred a otvoriť prehliadač. Budem používať Chrome, môžete použiť Najviac ľubovoľného prehliadača v najbližších týždňoch. Všeobecne odporúčame Chrome pretože je to obzvlášť dobré pre vývojárov softvéru. Je tu veľa postavená v roku nástroje, ktoré uľahčujú rozvíjať nielen HTML a CSS, veci, začneme hovoriť o dnes, ale aj iné jazyky tiež. 

A budem pokračovať a ísť to-- Budem Ovládanie tlačidlom alebo vpravo kliknite na ľubovoľné miesto na webovej stránke. A ja idem do Skontrolujte Element. A budem vyladiť moje Obrazovka len trochu sem. Dovoľte mi, aby som to presunúť na dno. Takže toto je to, čo sa hovorí Chrome inšpektor. Takže toto je ako ladenie Nástroj vstavaný do prehliadača Chrome. 

Všetci z vás už tento Ak ste pomocou prehliadača Chrome. A to vám umožní vidieť, čo sa deje Na pod pokrievku nejaké webové stránky. Takže poďme vlastne trvať Pozri sa na to takto. Má cesta viac funkcií a staráme sa o dnes. Ale je tu tieto karty sem. Prvky, siete, zdroje, časová os, a niektoré ďalšie veci. Budem kliknite na Siete na chvíľu. 

A je to trochu ohromujúci na prvý pohľad tu. Ale to, čo budem robiť, je nechať ma to trochu zjednodušiť. Budem zapnúť záznam svetla, takže sa to červené. A ja som chcel povedať zachovať log. A to je len trochu vec, ktorú som prišiel na to, v priebehu času, že to bude šetriť Všetko, čo sa deje v prehliadači. A teraz idem na http://facebook.com. 

V skutočnosti, poďme urobiť www pre istotu, lomítko. Enter. Takže URL, že mnoho z ste mohli navštívili. A teraz Facebook je web strana prichádza v hornej časti. A potom celá partia veci letel na dne. A v skutočnosti, sa ukazuje, že pri návšteve Facebook.com, ste nielen robiť jednu prosbu HTTP, Ukazuje sa, že ísť na Facebook.com pošle 41 z týchto obálok, každý s jeho vlastnú žiadosť get, ako je uvedené, aj keď za obrazovkou tu, v dolnej časti obrazovky, znamená to, že naozaj, my browser urobil 41 žiadostí. 

A celkom, to previedlo 861 kB a trvalo nejakého dôvodu toľko ako osem sekunda k stiahnutiu všetko. Takže je to vlastne trochu divný že stránky Facebook by vziať dlho, ale budiž v tomto prípade. A teraz, to všetko mi to jedno o s výnimkou najvrchnejšiu požiadavku. Tak poďme k tomuto tady a dovoľte mi, aby som oddialiť len na chvíľu. 

A dovoľte mi priblížiť na túto tému. Takže to, čo som urobil v vľavo, hoci je tu veľa deje tu Je som zvýrazní Facebook.com a potom Všimnite si, že som rolovanie dole, rolovanie dole, rolovanie dole, požiadať o hlavičky. A uvidíte, že Chrome je zobrazené me podstate vnútorný obsah žiadosti Aj vyrobená. Nie je to formátovanie v úplne rovnaké cesta, ale všimnete, je tam zmienka o získanie, Všimnite si, že je zmienka o hostiteľa, Facebook.com, cesta, alebo lomka, čo je súbor som požiadal. 

A potom, keď som sa prechádzať zálohovať, budeme vlastne vidieť, že to, čo sa vrátil Facebook pre mňa je všetky tieto hlavičky. Takže v tejto virtuálnej obálky naozaj veľa kľúčových párov hodnôt. Slovo, dvojbodka, a potom hodnota. Slovo, dvojbodka, a hodnota. Jedná sa o tzv hlavičky. A je tu oveľa viac, než detail tu sme vlastne záleží práve teraz. 

Ale to je druhý posledná tam dole, Všimnite si, že serveru facebook.com je, naozaj tu povedal, príde nejaký textu HTML. Takže všetko je to, povedať, že pri požiadavke web Stránka z prehliadača na Server, ktorý server odpovie s obálkou jeho vlastné vnútri ktorého je textu. Inými slovami, HTML. HyperText Markup Language. Čo je iný jazyk že sme zaviedli dnes že ľudia alebo počítača generovať , Na vykonávanie webové stránky. 

Konkrétne, poďme sa pozrieť na to. Chystám sa teraz vrátiť na webových stránkach Facebook. A ja len Ovládanie kliknutím alebo kliknite pravým tlačidlom myši a kliknite na tlačidlo Zobraziť zdrojový kód stránky. A aj keď nechcete používať Chrome, IE to urobiť, Firefox môže to urobiť, Safari môžete to urobiť, aj keď v ponuke Možnosti môže vyzerať trochu inak. A to je HTML, že Mark a Firma na Facebooku písali. 

A spoločne, tento jazyk tu implementuje modrá a biela stránka že sme videli pred chvíľou. Teraz, to je trošku zložitejšie. Ale keď sa pozrieme sa na ľavom hornom rohu, sme začnú sa pozrieť na nejaké vzory. Vyzerá to, že je tu veľa z týchto otváracia značke a potom je tu toto kľúčové slovo HTML. Tu je ďalší open uhol rameno a hlava. 

Tu je, ak budeme posúvať dole a dole a dole, ja som ísť do toho a skúste niečo hľadať. Existuje spôsob, ako cez vpravo Tu je otvorený držiak telo. A spomínam z poslednej čas, ktorý sme navrhli že najjednoduchšie webové stránky že človek môže napísať by mohol vyzerať trochu niečo také. Otvorené HTML tag, otvorená hlava tag, otvorený názov značky, potom uzavrie titul, uzavreté hlava, otvorený telo tag, nejaký text, uzavretá karoséria, uzavretý HTML. 

Ale pauza tu len na chvíľu. Tento kód, aj keď ste Nikdy napísal predtým ale stále nie celkom pochopiť čo sa deje, vyzerá celkom dobre. Dobre, to je veľmi čisté. Je to veľmi pekné štylisticky. Veľa odrazenie a biele miesto. Facebook nie je. Tak prečo je Facebook toľko horšie, než som sa na písanie HTML? Zrejme. 

Jasné, to je ako jeden z piatich pre štýl. Existuje pádny dôvod pre nich znížiť tieto rohy. No dobre, tak oni nechcú aby to pre vás jednoduchšie si ho prečítať. Takže v nejakom zmysle, že sú pliesť to, tak nejako to zakódovanie aspoň tak esteticky že je to ťažšie pre Myspace ísť a odparené ich Domovskú a HTML pre ňu. Ukazuje sa, že programy aj keď, vrátane Chrome, môžeme vyčistiť toto hore výborný ľahko. Takže to nie je tak ako dôvod. Čo iné by mohlo byť príčinou. Jo. Jo, biele náklady dátového priestoru. Čo tým myslíte? Jo, presne tak. Ak stlačíte klávesy TAB veľa, alebo medzerník, zvážiť dôsledky. Takže každý kláves na vašej klávesnici je [Nepočuteľný] reprezentovaný ako jeden bajt. 

Takže predpokladám, že Mark alebo niektorý z vývojárov v týchto dňoch zasiahne medzerník len raz V tejto HTML stránke, ktorá reprezentuje Facebook domovskú stránku. A Facebook má veľa užívateľov v týchto dňoch. Takže predpokladám, že Facebook je homepage dnes je navštevovaný miliardy ľudí. A niekto na Facebooku má hit medzerníka len raz. 

Takže jeden ďalší bajt, miliarda žiadostí, koľko viac dát je Facebook prenos cez internet preto, že niekto hit medzerníka na jeho klávesnici? A miliarda bytov, alebo jeden gigabajt odosielanie dát z Facebooku serverov ľuďom po celom Svet bez dobrého dôvodu. Teraz, to je len jeden priestor. 

Predstavte si, že sme vlastne čistiť to vec a členité a doplnil veľa prázdneho miesta a znaky tabulátora a medzery, môžete skončiť výdavkov gigabajtov, ak nie terra bajty viac priestoru. A tak výborný obyčajný v Skutočný svet vývoj webových aplikácií je minify váš kód. A budeme nakoniec vidieť ako by ste mohli urobiť. 

Ale dnes, začneme písať kód to je vlastne čitateľný pre nás ľudí. Ukazuje sa, aj keď, ak idete späť do tohto nástroja v Chrome Preskúmať prvok, Predtým sme boli na záložke Network. Ukazuje sa, že ak idete do Záložka prvky, čo je skutočne vidieť je Chrome je celkom tlačený verzie toho istého HTML. Takže sme deobfuscated to. Takže je to žiadnym súperom pre počítač. A teraz môžete skutočne kliknite okolo a začať vidieť hierarchiu, ktorá je webová stránka. Takže poďme to vlastne robiť. Chystám sa ísť dopredu a otvoriť na môj Mac program s názvom úpravu textu. A pripomínajú, že to je len super jednoduchý textový programu. Windows má notepad.exe. A ja idem na Verbatim zadajte nasledovné. Doc typu HTML, otvorený držiak HTML, uzavretý konzola HTML, máme hlavu stránky tu, koniec záhlaví stránky tu, titul bude ako, hello world. 

A potom tu dole, my potrebujeme Telo webové stránky. Uzavretá karoséria. A potom tu, hello world. Dobre. Takže písali sme super rýchly webovú stránku. Budem ho uložiť ako hello.html na mojom desktope. My Mac deje sťažovať, myslieť si, že, počkajte chvíľu, to je textový súbor, vykonajte Ak chcete volať to .txt? Ale nie, chcem použiť dot HTML. 

A čo potom je to pekné, keby som stačí dvakrát na tento súbor, hello.html, tu je moje webové stránky. Bohužiaľ, ja som jediný človek na svete, ktorí môžu navštíviť túto stránku práve teraz. Vzhľadom k tomu, kde to žije zdanlivo? Je to na mojom Macu, že jo? Čo je k ničomu. Rovnako ako nikto v tejto miestnosti nieto na internete môže skutočne navštíviť túto stránku. Takže dnes, musíme zavádzať ďalší prvok. 

A ako to urobiť, budem choďte do toho a otvoriť Cloud 9. Takže Cloud 9 je samozrejme cloud založené service-- CS50 IDE--, ktorý má všetky naše pracovné priestory beží niekde na internete. A to znamená, že všetky naše súbory sú už verejne prístupné. Tak poďme do toho a to urobiť. Chystám sa ísť dopredu a vytvorenie nového súboru NCS50IDE. Budem ho uložiť ako predtým as hello.html a kliknite na tlačidlo Uložiť. A teraz len preto, aby ušetrili čas, idem ísť dopredu a skopírujte vložiť tento kód skôr než ju prepíšte. A uložte ho. A tak teraz mám súbor s názvom hello.html. Ale ako to mám vlastne otvoriť ako webovú stránku? No, to dopadá vstavaný do CS50 IDE nie je len prekladač, ako kovový zvuk a debugger, ako GDB a zväzky iných programov, je to vlastne plnohodnotným webový server beží v CS50 IDE. 

Všetci z vás, to znamená, mať svoj vlastný webový server. A webový server je len kus o softvér, ktorého zmysel života má slúžiť až webových stránok. Ak chcete počúvať na požiadavku od prehliadača a reagovať s malými virtuálnymi obálkami vnútri ktorej je obsah, ktorý som napísal. Takže to web server skutočne zadarmo a open source. V prípade, open source len znamená, softvér, ktorý niekto iný napísal, že každý z nás môže skutočne vidieť a stiahnuť a dokonca zmeniť zdrojový kód. A je to len Apache. 

A urobili sme to trochu jednoduchšie použitie v CS50IDE tým, že volá ho Apache 50. Tak, že to môže vlastne pochopiť nasledujúce. Budem hovoriť Apache 50 štart. A potom som len chcel povedať bodku. A vidíme niektoré trochu Arcane správa hovorí, Nastavenie Apache dokumentu [? Skupina?] domov, ubuntu, čo to je, lomítko pracovný priestor. Spustenie web server Apache 2 úspešne. 

Tak dlhý príbeh krátky, ja práve stlačil tlačidlo a obrátil sa na webovom serveri, ktorý je teraz počúva na Internete na TCP porte 80 na konkrétnu adresu. A hovorí, že tu, a to sa bude meniť v závislosti na svoje používateľské meno a ďalších faktoroch, nevšimnúť teraz, keď som kliknite na to, IDE50 bodka jharvard a tak aj tak si všimnite, že celú tú dobu Za posledných niekoľko týždne, môžete mať si všimol, že vaše vlastné užívateľské meno je zakotvený v hornej pravej ruke roh CS50IDE. 

A to vlastne bolo to všetko načasovať adresu, na ktorej si môžete navštíviť všetky súbory cez web. Až do teraz, to nie je záležalo, pretože v C, je zvyčajne chcú veci beží v terminál, nie na webe. Ale dnes, začneme písanie webovým kódu že my chceme prístupné na verejných URL. Takže to, čo budem urobiť, je kliknite na túto adresu URL. 

A všimnite si, že vidím pomerne škaredý index, je výpis adresára, ale to, čo súbor vyskočí na vás asi? Hello.html. To preto, že som ušetril súbor vo svojom pracovnom priestore. A to, čo som povedal, Apache ja webový server je hľadať v Dávidovom pracovného priestoru adresára. A nech niekto na svet vidieť tie súbory. 

A skutočne, ak teraz kliknite na hello.html, Vidím v rámci tejto karte presne v tomto súbore. Teraz si všimnúť, Cloud 9 to urobil niečo trochu užitočné pre nás. V rámci CS50 IDE, Všimnite si, že je Zrazu adresa bar. To preto, že aj keď sme Chrome používate k návšteve CS50IDE, vnútri CS50IDE je vlastný verzia webového prehliadača práve teraz. A tak skôr než komplikovať veci ako také, Chystám sa pokračovať a stačí skopírovať túto adresu URL. Chystám sa ísť dopredu a len otvoriť svoje vlastné okno Chrome. Takže tam žiadna kúzla tu, nie CS50IDE. Ja som jednoducho ísť doslova vložiť môj J Harvard URL a stlačte Enter. A voila, teraz som, a teoreticky, všetci na internete, či som nakonfigurovaný oprávnenie primerane, môžu navštíviť tento súbor. A tak teraz, keď som povedal, hello.html, voila, tam je môj neuveriteľne nezaujatý webové stránky. Takže poďme urobiť rýchlu kontrolu zdravý rozum. Vzhľadom k tomu, to všetko je koncepčný nastaviť. A my sme v skutočnosti naozaj naučil, ako písať HTML sám o sebe. Akékoľvek otázky tak ďaleko o tom, čo sa stalo? Áno. Má CS50 vlastné tieto webové stránky? V akom zmysle? Dobrá otázka. Takže CS50 je vlastníkom CS50.io. Sme naozaj kúpil tento názov domény. A od prírody z vás prihlásenie do CS50IDE, vy všetci dostanete to, čo sa hovorí subdoménu. 

Takže IDE50-Malan, alebo IDE50-Rob.CS50.io, to je vaša jedinečná adresa v naše meno domény. Takže na účely kurzu, máte svoj vlastný unikátny adresu. Ale my sme zjednodušený veci podľa nákup domény najvyššej úrovne, CS50 bodka I / O a potom všetci ostatní Vnútri toho, aby som tak povedal. A vrátime sa k tomu za pár týždňov pravdepodobne, najmä na záverečný projekt Doba, kedy niektorí z vás chcieť, aby si svoje vlastné názvy domén. Je to vlastne pomerne priamočiare. Dobre. Takže poďme teraz toto urobiť. Chystám sa vrátiť do CS50IDE, kde môj súbor práve teraz, hello.html, nie je všetko tak zaujímavé. Chcel by som urobiť niečo trochu krajší ako to. Takže ja budem robiť niečo také. Dovoľte mi, aby som otvorené paragraphs.html. Tak to je súbor, som napísal v predstihu. V jeho hornej časti, ako je vždy máme pripomienky. Ale v HTML, komentáre vyzerať trochu inak. On line a tri linky 14, vy zobraziť syntax pre spustenie komentár a končí komentár. 

Ale nič z vecí v Medzi záležitosti funkčne. Je to len poznámku do človek, čo sa tu deje. A rovnako ako rýchly zdravého rozumu skontrolujte, či som posunúť nadol, čo je jasné nový tag, že sme zaviedli? Tagy doteraz sme videli, sú otvorené držiak HTML, hlava, titul, a telo. Ale to, čo je teraz zrejme nové? 

Jo, s. P tag alebo odsek tag. A potom som len požičal nejaké default Latinský text predstavovať svoje odsekov. Pretože to, čo som chcel ukazujú, je, ako by ste mohli predstavujú odsekov textu vo formáte HTML. A tak to, čo sa začína diať Tu je to, že tam je už vzor vyvíja. A nechaj ma ísť ďalej a urobiť. Dovoľte mi, aby som najprv vypnúť Apache. A budem sa povedať, že začať sám opäť v dnešnej zdroje siedmich m adresár. Tak, že mám prístup ku všetkému. 

A teraz, keď som sa vrátiť do Tento výpis adresáre, Všimol som si, vidieť každý súbor z dnes. A uvidíte v Ďalším problémom set, budeme poskytne usmernenia pre robenie presne toto. Ak otvorím paragraphs.html, by to mohlo rovnako vyzerajú ako programovací jazyk pre vás, ak nechcete hovoriť alebo čítať latinsky. Ale to je len tri body z textu, ktoré sú označené v HTML. 

A všimnite si odseku prestávky medzi nimi. Pretože sa ukázalo, a aj keď vás môže mať sklon k tomu, zatiaľ čo v reálnom svete, ak chcete, aby riadok prestávky medzi vecami, by ste mohli jednoducho to a hit Uložiť. A teraz, keď som znovu tu, oznámenia že všetko, čo len stiera spolu len v jednom machuľa texte. Vzhľadom k tomu, HTML je trochu hlúpy jazyka. 

Je určený pre použitie v takom spôsobom, že prehliadač bude len robiť explicitne, čo si to povedať robiť. Takže ak nechcete to povedať daj mi nový odsek, vy nebudete vidieť nový odsek. A v skutočnosti, čo Prehliadač bude robiť je aj v prípade, že stlačíte klávesu Enter, povedzme, že znovu a znovu a znovu, pohybujúce sa tento textový spôsobom nadol na obrazovke a potom uložiť a potom znova načítať, prehliadač sa deje k zrúteniu všetky tie biele miesto do len jediné viditeľné medzery. Dobre. Tak to je značka odseku. A tak to, čo je vzor že rozvíjajúce sa tu? No, zdá sa, že v prípade, že HTML je predovšetkým o začatí značku a končí tag. A čo je to značka? No, je to len kus syntaxe. Otvorte držiak, kľúčové slovo, uzavretý držiak, je značka. Alebo počiatočný značka. A potom, keď ste urobil vyjadrenie seba samého, rovnako ako v budete hotoví s odsekom, urobíte tak povediac opak. Ale opak nie je úplne dozadu. 

Proste prefix rovnaká značka je meno s lomkou, ako je tento. Dobre. Takže nie je všetko, čo vzrušujúce. A v skutočnosti, nie sme urobiť web všetko zaujímavejšie. Čo keď chcem, aby sa veci väčšie a odvážne? Tak to dopadá, že tu je príklad v headings.html, kde sa v mojom tele, Mám tag H1, H2, H3, štyri, päť, alebo šesť, z ktorých všetky Zdá sa celkom Arcana. Ale keď idem otvoriť tento príklad, poďme sa pozrieť. Headings.html. 

Takže prehliadačov v predvolenom nastavení vám môže dať textu to je veľký a odvážny nesúrodých veľkostí. H1 je veľký. H6 je menší a potom všetko ostatné medzi tým. Tak to je zaujímavé, ale stále nie je naozaj web viem. Čo ak chceme mám niečo ako zoznam. , Takže tu je zoznam s odrážkami tri z Harvardu domov. 

Ako ste ísť o robí? No, pozrite sa na list.html. A tu vidíme trochu funkiness ale uvažujme, čo sa deje. Takže na základe toho, čo ste práve videli, UL je skratka pre zoznamu. Nečíslovaný zoznam jednoducho znamená odrážkami. Neexistuje žiadne čísla. K dispozícii je tiež niečo, čo nazýva objednať zoznam, ktorý je OL na značku. Potom LI, zoznam položiek je všetko, čo znamená. 

A automaticky, takže ho Čísla všetko za vás. Ale opäť, všetky moje odsadenie a biely priestor je len kvôli mne. Prehliadač nie je vlastne bude starať. Takže aj keď ste nemohli to urobiť, len aby bolo jasno, by ste nemali, hoci prehliadač bude stále byť schopný pochopiť, že v pohode. Som biť znovu načítať v mojom prehliadač, ja kliknutím znovu načítať a žiadna zmena sa deje pretože prehliadač stále robí presne to, čo ti poviem to urobiť. 

Dobre. Tak to je všetko len textu. Teraz poďme robiť niečo zaujímavejšie. Chystám sa ísť dopredu a požičiavať si niektoré z týchto HTML. Chystám sa ísť dopredu a vytvorenie nového súboru tu. A budeme nazývať rick.html. Máme neúmerne Použité niečo volal valec rick v tomto triedy v tomto roku, ja neviem, proste sa to stalo organicky. 

A teraz sa to vymkne z rúk. Takže som jednoducho ísť s ním. A keď pôjdem do Google Obrazy a Rick Astley. Ak neviete, prečo robíme to, len prečítať na Wikipédii. Zakaždým, keď ste klikli na odkaz, niekto smial niekde. A nechaj ma ísť tam ahead-- ideme, poďme zobraziť tento obrázok. 

Takže tu máme obraz v Google Images. A predpokladajme, že je to rozumne všade na internete. Takže budem predpokladať, že je to v poriadku pre mňa aby skutočne dať to do mojej webovej stránky. Chystám sa pokračovať a skopírujte adresu URL obrázku. A teraz, keď som sa vrátiť do Cloud 9, poďme sa pozrieť, čo sa dá robiť. Tak tu je len webové stránky. To je Rick Astley, haha, Chystám sa teraz vrátiť do svojho prehliadača, znova, a zaujímavé. 

Kde je Rick? Tak sa ukážte, čo sa stalo. Vlastne, budem predstierať, že som to neurobil. [Nepočuteľný] ho sem. Vrátime k tomu za chvíľu. Tak tu je rick.html. Takže to nie je Rick Astley. Tak to dopadá v našich silách v skutočnosti ho pridať sem. To je Rick Astley. Chystám sa povedať, aby mi snímku, ktorého Zdroj je URL som kopírované, ktorý zrejme je šťastný narodeniny niečo alebo iný. 

A teraz budem zatvoriť značku, ako je tento. Tak to je super dlhé balenie. Ale všimnite si, že všetko, čo som urobil, je otvorený držiak imidž, zdroj s atribútom tohto. A je to naozaj dlhá URL. A na samom konci, nevšimol. Prečo som urobil lomítko uhlový držiak miesto, ako každý iný tag, majúci otvorený držiak, IMG, uzavretý držiak? Len sa hádať, aj keď ste nemajú znalosti vôbec HTML predtým. 

Tak to je, ako sa zavrie príkaz, ale prečo to nie je naozaj robiť intuitívne zmysel urobiť niečo trochu viac ukecaný ako úzke image? Jo. Jo. Len sémanticky, neexistuje žiadny zmysel začatím obraz a končiac obraz, je to buď tam, alebo to nie je. Takže to nemá zmysel nechať medzeru pre nič iné vnútri obrazu. Ty jednoducho nemôže urobiť. A tak sa syntaxe by vo všeobecnosti byť len urobiť lomítko vnútri otvoreného tagu alebo počiatočné značkou a potom kliknúť na Uložiť. 

Takže keď som sa teraz znovu načítať tento súbor, teraz Mám dobrý web stránok kuchyni sem. A mohli by sme iste naozaj obťažujú ľudí vložením miesto ako odkaz na YouTube. A v skutočnosti, kedykoľvek ste niekedy išiel na YouTube, a dovoľte mi, aby som vlastne náhodou rick role som tu. Takže Rick role. Takže Rick roll-- ja idem sem. 

[Prehrávanie hudby] 

OK, jeden človek sa to páčilo. Takže si všimnúť celú tú dobu, ak vás kliknite na odkaz Zdieľať, vás samozrejme získať adresu URL, ktoré môžete v skutočnosti vložiť do e-mailu alebo forenznú image alebo vo problém nastaviť alebo v snímke. A teraz, keď som namiesto toho kliknite na embed, Všimnite si, že celú tú dobu, tohle bol tam. Chystám sa ísť dopredu a kopírovať to. 

A len tak môžeme lepšie vidieť, že som chystá vložiť ho do textového editora. Všimnite si, že toto YouTube bol hovorím. Zakaždým, keď navštívite YouTube video, ak ste chcete vložiť video na webové stránky, jednoducho uchopiť toto. Takže toto je ďalší HTML tag nazvaný iframe. Alebo in line rámu. Tak to aj vyzerá trochu viac zložitejšie než všetky ostatné. Tak to dopadá, že obraz tag a zrejme tag iframe vziať, čo sa nazýva atribúty. 

A to je ďalší kus syntax v HTML. Okrem tagu názov, otvorený držiak menovka, môžete ovládať správanie tagu tým, že má veľa atribútu sa rovná hodnote. Atribút sa rovná hodnote. A tak napríklad, YouTube nám hovorí, ak chcete, šírku tohto videa byť 420 pixelov a výška byť 315 pixelov, to je ako to vyjadriť vo formáte HTML. 

Zdrojom videa sa deje sa, že dlhé YouTube URL a potom niektoré ďalšie veci ako rám hranica je nula, takže pravdepodobne znamená, že je bez ohraničenia okolo veci. Umožniť celú obrazovku pravdepodobne Znamená to, že užívateľ môžete kliknúť na tlačidlo a vlastne celej obrazovke video. Takže či naozaj chcem byť pôsobivý tu v Rick dot HTML, skôr než použiť značku obrazu, nech me odstrániť, že namiesto toho vložiť tento. A teraz znovu. A teraz je to tu zase. Dobre, to stačí. Dobre, takže sa budem snažiť ťažké to urobiť znovu. Takže aké sú niektoré z takeaways tu? Takže HTML, tak škaredá, ako týchto webových stránkach sú, je vlastne celkom jednoduchý. Nie je to programovací jazyk. Nemá funkcie. Nemá slučky. Nemá podmienky. Všetko, čo to má, je desiatky rôzne značky, z ktorých každá má nulovú alebo viac atribútov. A v skutočnosti to, čo je zábavné o HTML ako začnete ponoriť do je, že je veľmi seba učenlivý. 

Všetko, čo to vyžaduje, je pochopenie všeobecného rámca HTML. Čo je to značka, aká je atribútom, ako si vlastne nakonfigurovať webovú stránku nasledovne. A všetko ostatné je naozaj výsledok pozerať sa v on-line referencie alebo googling ako urobiť nejaké techniky alebo ako sme videli, pri pohľade na Facebook zdroje kódu, pri pohľade na webové stránky že sa vám páči na to je zdrojový kód a pochopenie toho, ako vývojári tam vlastne položil veci. 

Takže môžeme robiť obrazy rovnako. A v skutočnosti, to urobili sme pred chvíľou. Nechaj ma ísť napred a len ukázať vám. Tu je niekoľko ukážkový kód. Ak ste niekedy chceli vidieť nevrlý mačku. Tak si všimnite, že môžem majú značku obrázku tu. A ja mám poznámku nad ňou. Mám alternatívu text pre prístupnosť. Takže niekto, kto je pomocou obrazovky čitateľ z dôvodov pohľad môžu v skutočnosti potom majú svoje Čítačka obrazovky hovoria nevrlý mačku. Pretože ak to nie je možné viď obrázok, oni môžu mať aspoň ich počítač povedzte im, ústne, čo to je. A zdrojom tohto súboru je cat.jpeg. Takže v skutočnosti, keď som chcel dostať šikovný, čo som mohol mať done-- Sľubujem, že nebudem ísť do Rick Astley, tak Budem google pre mačku miesto. A keď som sa ísť na Google Images tu, a my predpokladáme, že sa jedná o obraz môjho kocúra. 

Predpokladajme, že mám kontrola klikol alebo vpravo klikli na to, náhodne strašidelný. A cat.jpeg Idem ušetriť na mojom desktope. Dovoľte mi, aby som sa vrátiť k Cloud 9. Všimnite si, že tu môžem ísť nahrať miestne súbory. A keď som to chytiť Súbor, cat.jpeg, oznámenie že môžem pretiahnuť a hodiť ho do Cloud 9 a to bude kričať na mňa tu. 

Pretože sme už vám dal súbor cat.jpeg, ale je to super ľahko urvat fotografiu, ktorú ste si prevzaté z Facebooku alebo Flickr alebo podobne a vlastne ho pretiahnite do Cloud 9 a potom sa to súčasťou vášho vlastného osobného webové stránky alebo problém nastaviť sedem alebo osem, ako budeme čoskoro vidieť. A potom, keď vás konečne navštíviť tú mačku, za predpokladu, Stiahol som si, že rovnaké mačku, Oznámenia that-- že bol rozkošný. 

Čo by ste vidieť, je niečo také tvár tu. Takže súbory, ktoré ste Odkaz na webové stránky môžu byť buď lokálne vo svojej vlastnej účet alebo vzdialené na inom serveri ako je tomu v prípade Rick Astley fotografie pred chvíľou. Tak kde to, čo else-- inak môžeme robiť? Takže poďme sa pozrieť na nasledujúce. Viete, čo je trochu cool? 

Doteraz sme robili veľmi statické webové stránky. Chcem okoreniť veci takto. Chcem, aby moje vlastné vyhľadávač. Tak, aby sa vyhľadávače, poďme choďte do toho a začať robiť to. Chystám sa ísť dopredu a vytvoriť nový súbor s názvom search.html. A my sme prefabed verzie on-line. Jejda. Nepoužívajte vložiť do okna vášho terminálu. Montované verzie on-line. A ja začnem nasledovne. Tak tu je to začiatok súbor s názvom search.html. Budem uložiť ho do dnešné zdrojový adresár. Budem volať túto Hľadať. Vlastne, budeme robiť to lepšie. CS50 Search a vlastne to značka. A teraz, budem hovoriť niečo ako H1 CS50 Search. A potom tu dole, H2 čoskoro. A len zhrnúť, H1 a H2 mysli to, čo v tomto poradí? 

Jo, tak veľké a odvážne, a nie je tak veľký, ale stále tučne. Takže keď som sa zachrániť to a ísť sem, pozrime sa súbor search.html. Dobre, a ten je right-- [nepočuteľný]. Pripraviť. David je zmätený. Oh, je to priamo tam. David je idiot. OK. Tak tu to je. Takže CS50 hľadanie čoskoro. Takže teraz, poďme syntetizovať to, čo sme robili minulý týždeň. 

Tam, kde sme hovorili o nižšej mechanika HTTP úrovni. A tieto nové nápady HTML, ktorý je len to značkovací jazyk kde na vás povedzte prehliadač presne, čo robiť a realizovať naše vlastné vyhľadávač. Takže namiesto toho len povediac skoro, ja som chystá zaviesť niečo, čo nazýva tag formulára. A v tejto podobe, budem mať niečo ako vstupné pole. 

A meno tohto vstupu pole, budem to hovoriť Q. A typ tomto vstupnom poli Chystám sa povedať, je len "text". A textové pole, ako sme to vidieť, je len textové pole. A tak to nie je zmysel tu mať niečo vnútri nej na tomto mieste. A tak som jednoducho ísť zavrieť tag s tým lomítko priamo v tagu sám. A potom budem jeden iný vstup. Typ vstupu rovná odoslať. A potom budem zatvoriť tento taky. 

A teraz ja idem späť. A už vidíme, aj keď celkom škaredý, som dostal začiatky moje vlastné vyhľadávacie stránku tu. V skutočnosti, dovoľte mi, aby som sa snaží vyčistiť to sa trochu. Ukazuje sa, že na vstup tu, môžem mať ďalší atribút s názvom zástupný symbol. A ja som mohol vidieť niečo ako kľúčové slová, alebo viac špecificky, otázka pre q. 

A všimnite si, teraz, mám tento druh šedej texte že zmizne as Akonáhle začnem písať, ale je to asi niečo ste videli v iných webových stránkach. Nemám naozaj rád na tlačidlo Odoslať. Takže som vlastne bude dať Tlačidlo pre odoslanie hodnotu vyhľadávanie. A teraz, keď som znovu, všimnite si, že môj Tlačidlo stane menoval vyhľadávania. Viete, ja naozaj nemám rovnako ako logo tu. Takže generátor Google Font. 

Chcem okoreniť to ešte vyššie. Takže CS50 vyhľadávania. Dovoľte mi, aby som vytvoriť vlastné logo. To vyzerá pekne. Takže teraz mi dovoľte zachrániť tento as-- poď. Tam, kde to ide? Tam. OK. Minul. Uložiť ako. Hlúpy prehliadačov. Stand by, budeme opraviť raz navždy. Tam sme ísť. Dobre. Prepáčte. Off deň. Teraz je to funky. Ukončite celú obrazovku. Dobre. 

Teraz, ako normálny osoba, uložiť obrázok ako. Logo.gif. Teraz idem do CS50IDE a Chystám sa jednoducho chytiť logá, Chystám sa pretiahnuť do Môj zdroj siedmich adresár, Súbor už existuje, ja som s tým OK. Takže budem ho prepísať preto, že už som ho mal. A teraz ako to mám zbaviť tohto? 

Poďme napred sem a robiť obrázok zdroj rovná logo.gif. Zatvorte to. Ušetrite. A teraz, keď som sa vrátiť do svojho vyhľadávania strana, teraz vyzerá to celkom dobre. Dobre, tak to nemá docela urobil niečo užitočné. V skutočnosti, dovoľte mi, aby som skúsiť vyhľadávanie pre mačku a uvidíme, čo sa stane. Mačky. Dočerta. To nie je len práca, zrejme. Takže to, čo je kľúč kus že je tu chýba? 

Dobre, aj keď nepoznáte žiadne HTML, Začal som označenie, ktorý formulár telefónu a ja som povedal, to, ako sa dostať vstupov, daj mi textové pole a tlačidlo pre odoslanie, čo kus zjavne chýba? Predpokladajme, že chceme, aby skutočne dostať táto vec pracuje správne. Čo musíme urobiť? Máme potrebu zaviesť zadný koniec databázu alebo vyhľadávač sám, a že to bude trvať veľa času, úprimne. 

Takže pamätajte, čo sme robili minule. Takže ak hľadáte niečo na Googli a vy ste v predstihu vypnutý, Pripomeňme, okamžité vyhľadávanie. Dovoľte mi teda vypni to tak, že toto v skutočnosti sa chová ako starší školský prehliadača, keď som teraz hľadať niečo ako mačky, spomenúť, čo URL vyzerá. Je to celkom tajomný. Ale vložené tam, Pripomeňme, je lomítko vyhľadávanie. Otáznik q sa rovná mačky. 

A to sa zdá, aby mi celá partia výsledkov vyhľadávania. Takže viete, čo budem robiť? Idem si požičať Google na chvíľku. Chystám sa ísť cez tu a budem hovoriť že tieto tvoria opatrenia alebo cieľ, aby som tak povedal, by mala byť doslova Google. A metóda som chcel po použití bude mať. 

Takže to, čo je akcia? Akcia je podivne pomenovaný, ale to len znamená, kto bude spracovávať akcie tohto formulára? Keď som kliknite na tlačidlo Hľadať, kde by mal výsledok ísť? A keď som sa teraz vrátiť k mojej podobe tu a obnovte mojej webovej stránky a teraz niečo hľadať ako pes, všimnite si teraz Som znovu zavedená Google. Je to tak? 

Ak chcem niečo hľadať inak, to funguje u nielen psy, funguje aj pre mačky. Funguje tiež na CS50. A OK, je to len pod zdrvujúcu, nie je to? Dobre, ale to vlastne funguje. Tak čo sa skutočne deje? Takže som učil môj prehliadač, pomocou HTML, aby sa vstup od užívateľa a vlastne poslať ten vstup k vzdialenému serveru pomocou protokolu HTTP. 

A pretože mojom prehliadači chápe HTTP, to vlastne konštruovať tak, aby to, čo URL Skončím cez v mojom prehliadači, Všimnite si, čo sa stane, keď som hľadal psa. Keby som kliknite na tlačidlo Hľadať, Všimnite si, že URL sa mení, ako som zamýšľal na google.com/search~~V dotaz rovná psa. A to preto, že forme vie, pretože metóda je získať, jednoducho pripojiť ju k tejto tam URL. 

Teraz, tieto webové stránky sú stále škaredé. Takže poďme predstaviť jeden ďalší kus syntaxe ak môžeme dnes. A to je niečo, známy ako kaskádových štýlov. Dovoľte mi teda sa pozrieť na Tento príklad tu a vidieť ak môžeme odvodiť, čo sa deje. To je CSS0.html. A to je miesto, kde sa veci trochu škaredé. Vzhľadom k tomu, bohužiaľ, vo svete internetu, HTML sám o sebe nemôže robiť všetko. A tak ak chcete štylizovať svoje webové stránky, je skutočne potrebné sa zamerať na estetika v odlišným spôsobom. Tak tu, mám telo mojom webe strana, ktorého vnútrajšok je veľký div. A div jednoducho znamená rozdelenie. Takže je to ako bod, ale to nemá rovnakú sémantiku z odseku textu. 

To len znamená, že k prehliadača, prichádza veľký obdĺžnikový oblasť mojom webe strana, chcem s ňou zaobchádzať zvlášť. Teraz, linka 21 je miesto, kde začína, že div. A stačí sa hádať. Aký je vplyv riadku 21 na Zvyšok obsahu stránky? Centrovacie to. To je všetko. Takže sme nevideli spôsob v skutočnosti centrovanie textu. 

V skutočnosti, moja vyhľadávače, na rozdiel od skutočného Google, všetko bolo odôvodnené smerom doľava. A tak teraz v riadku 21, hovorím, hej browser, vytvorte rozdelenie stránky. Len mi dajte veľký, neviditeľný obdĺžnik. To je to, ako chcem myslieť na webové stránky. A potom to štylizácia takto. Vo vnútri týchto citácií, Teraz, je druhý jazyk že sme zaviedli dnes tzv kaskádové štýly. Našťastie, to tiež nie je programovací jazyk, tak je to veľmi obmedzený v jeho syntaxi, ale tiež veľmi obmedzený vo svojej funkčnosti vzhľadom k tomu, HTML je všetko okolo značkovanie dáta webové stránky a štruktúra webovej stránky. CSS je všeobecne o poslednej míle, estetika, ako veľkosť a farbu a umiestnenie presne priamo na webovej stránke. A skutočne, to je tvorené s kľúče a hodnoty. 

Nehnuteľnosť ako je tento, textu zladiť, nasledované dvojbodkou, nasledované hodnotou, ktorá majetok, ktorý je v tomto prípade je centrom. A teraz všimnete môže hniezdo tieto veci. Keby som chcel všetko v tom, že Ja som zvýrazní sa na stred, to je dôvod, prečo mám linku 21 a zodpovedajúci riadok 31. Ale čo teraz chcem povedať, John Harvard, vitajte na mojej domovskej stránke. 

Copyright symbol John Harvard. A predpokladám, že chcem, aby prvý tieto riadky byť docela veľký. 36 pixelov. Tak to je slušná veľkosť. A chcel som jeho váhu byť odvážni. Ale potom pod tým, Chcem menšie text. A pod tým, chcem ešte menšie textu. Prepáčte. Dnes sa cíti ako off deň. 

Takže teraz, čo vlastne robím to vyjadriť? Tu na linke 22 je vložený div alebo vnorené div, ak chcete. To má svoj vlastný štýl značky taky. Aj špecifikovať veľkosť písma 36. Aj špecifikovať váhu písma tučne. Tu dole, ja len zadať 24 pixelov. A konečne, v rade 28, I 12 špecifikovať. Takže rovnako ako rýchlu kontrolu sanitačného a ako ľudské čítanie to, ktoré slová na obrazovke, v skutočnosti bude tučný? Ktoré linky sú vlastne bold? 

Len John Harvard. Je to tak? Vzhľadom k tomu, rovnako ako linka 22 hovorí, že hej browser, tu je rozdelenie stránky. Nech je to veľkosť písma 36 bodu. Make hmotnosť písmo tučne. Akonáhle dosiahnete zodpovedajúce koncová značka alebo uzavretý tag na linke 24, to znamená, hej prehliadač, prestať robiť, čo to je, čo robíte. A upozornenie, aby bolo jasné, hoci potrubie 22 má všetky tieto atribúty ako je štýl, keď vás zatvoriť značku v rade 24, si len spomenul názov tagu. 

Nemusíte opakovať štýl slovo, alebo všetko, čo je vo vnútri týchto úvodzoviek. A tak, keď sa pozriem na toto teraz vo svojom prehliadači, poďme Pozrite sa na konečný výsledok. Nechaj ma ísť vpred na tento súbor, ktorý je CSS 0. A to je ešte celkom obyčajný, ale stále dosť zaujímavé. Ale ukazuje sa, že je ďalšie veci, môžem robiť tu, a na riziko tvorby Tento úplne odporný, Všimnite si, že v mojom Telo mojej webovej stránky, Môžem urobiť niečo vtipné ako bg alebo farby pozadia. 

A rýchlo, aký je vaša obľúbená farba? Green Počul som. Dobre. Takže teraz, keď som trafil znovu načítať teraz, máme zelenú webovú stránku. Dobre, takže to nie je zlé. A teraz, keď chcem, aby to naozaj pohode, môžem farbu môjho textu i červené. Takže poďme sa pozrieť, ako to vyzerá. Teraz vyzerá to celkom dobre. A tu dole, ak ste naozaj chcem si s niekým alebo ak chcete byť jeden z tých ľudí, ktorí sa snaží prinútiť vás k návšteve web strana preto, že som napálil Google do myslenia je tu celá partia kľúčových slov jako-- pozrime sa, reload. Kde to šlo? A tam nás to. Dobre. Takže hovorím to ako stranou, budeme hovoriť o tejto veci za pár týždňov keď hovoríme o bezpečnosť, ak ste v skutočnosti embed celé zväzky kľúčové slová na webovej stránke, aj keď nie sú viditeľné pre ľudský, niekto ako Google, samozrejme, stále môžete skutočne nájsť to. Dobre, takže to je celkom príšerná celkom rýchlo. 

A v skutočnosti, to nie je všetko že veľa na rozdiel od mojej vlastnej web Strana ako vysokoškolák, ktorý Začal som googling okolo nájsť minulej verzie mojich starých webových stránok. Bolo to dosť zlé. V skutočnosti, som si jednej tesne pred triedy. Ale je tu ešte horšie tam vonku. Toto zrejme bola moja Domovská stránka už v roku 1996. Zrejme som si myslel, že to vhodné pýtať ľudí, ich mená pred tým, než mohol skutočne vidieť mojej webovej stránky. 

A potom som im ukázal niečo hlúpy, pravdepodobne. Budem vykopať viac pre nabudúce. Ale teraz, poďme zvážiť trochu dizajnu. Už sme hovorili o štýle. A túto stránku tak ďaleko väčšina všetko, čo som napísal je veľmi čistý štylisticky. Ale čo o dizajne? No, je tu veľa nadbytočnosti v tom, čo som robil tu. 

Zmienil som sa o slovo farba v niekoľkých miestach. Zmienil som sa o veľkosť písma v páre miesta a odvážny v niekoľkých miestach. A v podstate, ja som čo miešali dva jazyky. Mám HTML so svojimi značkami a my atribúty a potom naraz, medzi úvodzovkách, mám druhý jazyk dnes s názvom CSS, čo je opäť len tie kľúče a hodnoty, alebo tieto vlastnosti oddelené dvojbodkou. 

Ukazuje sa, že veľa rovnako ako v C, kde sme môžete začať vytknúť nejaký kód do hlavičkových súborov, takže môžeme urobiť to isté v HTML. A krok k, ktorý je nasledujúci. Všimnite si, že táto verzia, je CSS1.html Štrukturálne presne rovnakú webovú stránku. Tak som dostal veľa z divs, ale tentoraz som zbavili obalu div ako uvidíte. 

A ja som dal tie tri divy hornej, strednej a dolnej, jedinečné ID. To je pekné, pretože by dávať tie divízie zo stránky jedinečných identifikátorov, Aj na ne odkazovať inde. Kde? No, dovoľte mi, aby som posúvať nahor. A tak ďaleko, kedykoľvek sme sa pozrel v čele webové stránky, čo je štítok iba sme mali v hlava webové stránky? Trochu hlasnejšie. Len titul doteraz. Ale ukazuje sa, že je niekoľko ďalších vecí, si môžete dať tam, jeden z ktoré sa to nazýva tag štýl. Takže pred chvíľou sme sa pozreli v atribútu štýle. Ukázalo sa, že je tu značka štýl. Patrí vnútri hlava webové stránky. A teraz si všimnúť, čo robím. Mám vnútri tohto style tag nasledujúce. Som doslova za zmienku na riadku 20 sa názov tagu, ktorý chcem štylizovať. 

Potom mám otvorenú zloženou zátvorkou a uzavreté kučeravé ortézu. Takže svojim duchom podobať C, ale opäť, to nie je funkcia, to je len detail syntaktická tu. A potom samozrejme, hovorím prehliadač, hej prehliadač, aby celé telo stránky majú zarovnanie textu z centra. A potom sa to hovorí nasledovné. Hele prehliadač, keď vidíte HTML prvok alebo značku na stránke, ktorá má jedinečný identifikátor vrchole, takže symbol hash tu jednoducho znamená, Unikátna myšlienka hore, choďte do toho a aby jeho veľkosť písma 36 a jeho váha písmo tučne. 

Hej prehliadač, prvok, ktorého ID je stredná, aby bolo 24 pixelov. A hele prehliadač, ak vidíte Myšlienka na dne, aby bolo 12 pixelov. Účinok na konci je presne sam. Ak by som ísť do CSS 1, Stránka vyzerá rovnako. Ale my sme o krok smerom k o niečo lepší návrh. Dovoľte mi, aby som sa vrátiť sem do CSS2 a uvidíte, čo ešte som urobil. 

Teraz je strana je naozaj, ale naozaj čistý. V skutočnosti, môžem sa zmestili všetky obsah na stránke tu. Ale to, čo nová značka som predstavil, samozrejme? Link. A nie je to najlepšie meno pre značku, pretože to nie je odkaz v tom zmysle, že ho poznáme, ale to znamená, odkaz v nejakom inom súbore. To je niečo ako ostré patrí v C. 

To je spôsob, ako v HTML hovoriť hej prehliadač, choď obsah Súbor s názvom css2.css. Vzťah pre mňa, je, že je to štýlov. A naozaj, že to, čo jedna z S je v kaskádových štýlov prostriedkov. To je štýl list. Je to len textový súbor obsahujúci celá partia majetku. Je to celý rad štýlov ktoré chcete použiť na stránku. 

A tak to vraj je s odkazom na druhého súboru. A keď otvorím ten, CSS2.css, Všimnite si, že všetko, čo som urobil je skopírovať a vložiť všetky z toho do tohto súboru. A teraz, aj keď ste nikdy Pred kódované tejto veci, zváž s príslovečná inžinierstva klobúk o, prečo je toto lepší konštrukcia asi? Vytknutie tieto vlastnosti CSS, ich uvedenie do vlastného súboru. Aj napriek tomu, že sme vyriešili tento pred problém ako päť minút hneď v prvej verzii. 

Sme nezlepšila strana štylisticky, To je proste lepšia dizajn v nejakom zmysle. Prečo myslíš, že? Jo. Pružnejšie ako? Jo. Takže ak chcete ísť späť a zmeniť veci, Teraz máte na jednom mieste kde si môžete niečo zmeniť. A v skutočnosti, po niečom ako problém set sedem, kde budeme implementovať webové stránky obchodovanie na burze, že to bude mať celá rada stránok. A to by bolo naozaj nepríjemné, ak sa rozhodnete, hm, Nemám naozaj rád 24 pixelov, chcem aby to bolo 28 pixelov alebo o niečo väčší. A potom budú musieť urobiť globálne nájsť a nahradiť alebo otvoriť všetky súbory vašich webových stránok proste skutočne zmeniť jednu hodnotu. Vytknutím tieto štýly na jednom centrálnom mieste, Teraz môžete otvoriť jeden textový súbor v CS50IDE do akéhokoľvek programu, zmeňte ju, uložiť, a hotovo. Vy ste šíri tí, zmeny všade. A že by bolo rovnaké v dot h súboru rovnako. Takže nejaké otázky tak ďaleko na túto syntax? Dobre, takže máme urobil všetko zdá s výnimkou skutočne realizovať hypertextové odkazy. A tak poďme do toho a to urobiť. Nechaj ma ísť dopredu a vytvorenie nového súboru tu. Chystám sa to nazvať link.html, dal v dnešnom kódu. 

A ja budem robiť open držiak typu doc ​​html. Ako stranou, toto na top, tento typ deklarácia doc, to je jediná, ktorá je divný s výkričníkom. Musíte len na to tam, a to znamená, že sme pomocou HTML verzie 5. Staršie verzie jazyka mali oveľa dlhšie reťazce, ktoré ste potrebovali dať tam. Takže tu je príklad tzv odkaz. 

Potrebujem telo mojej webovej stránky tu. A tu a href rovná povedzme HTTP://www.disney.com a môj obľúbený webové stránky, budeme hovoriť. Dobre, tak veľmi neškodný, užívateľsky prívetivé stránky. Ak by som teraz ísť do môjho adresára výpis sem a otvoriť link.html, máme hyper text. 

A skutočne, to je miesto, kde H v HTTP pochádza. Hypertext Transfer Protocol je o prenos textu že má hypertextové odkazy na iné zdroje. A skutočne, tu je oboznámený, ak retro, modrý odkaz, ktorý v prípade kliknutí ma skutočne viesť k Disney.com. Teraz, ach, to je vyjde čoskoro. Dobre, takže teraz, aké sú niektoré dôsledkov to? 

A úprimne povedané, začína svet sa trochu známejší a tiež trochu desivejšie ale tiež o niečo viac ja obhájiteľný akonáhle začnete pochopiť tieto veci. Vzhľadom k tomu, šance sú, že niektorí z vás, keď idete prostredníctvom vašej zložke so spamom Gmail, alebo dokonca Váš e-mailovej schránky, pravdepodobne ste dostal nejaký e-mail ktorý je po vás Ak chcete zmeniť Heslo možná alebo možno overiť PayPal poverenia alebo ktovie čo ešte. 

A v skutočnosti, možno ste dostali niečo, čo hovorí, že podobne kliknite sem resetovať PayPal heslo. A teraz, všimnite si, ak to nie je Disney.com ale ako badplace.com a reload, že text tu Dalo by sa povedať niečo vôbec. A v skutočnosti je to len slová. Prečo by som vlastne byť super škodlivý a hovoria http://www.paypal.com. 

Kliknite tu resetovať PayPal heslo a teraz znovu. To vyzerá celkom legitímne, že jo? Chcem povedať, že by to, kliknite na e-mail, ktorý práve hovorí, že tento. Nevšimnúť tu dichotómia. Hovorí www.paypal.com, a v skutočnosti, počkajte chvíľu, Vieme, že chcete S pre bezpečnosť. Takže teraz, choďte na www.paypal.com HTTPS, ale ak ste nikdy nerobil, sa dostať do zvyk vznášajúce sa nad malé odkazy tu. A je ťažké vidieť, tam na obrazovke, a je to tu nie je tak jednoduchšie. Ale tu cesta dole malý nepatrný roh robí prehliadač skutočne vám povedať, že ideme na badplace.com miesto Paypal.com. A teraz, kam ideme s tým? Všetky príklady sme dnes urobili, sme tvrdo kódované a zadali ručne. Web je neuveriteľne nezaujímavé, keď budete tvrdo kódovať vaše webové stránky tak, aby obsah je statická a nikdy sa nemení. Samozrejme, že všetky naše obľúbené stránky dnes, či už je to Gmail alebo Twitter alebo Facebook alebo ľubovoľný počet ďalších sú dynamické. Sú meniace sa v Reakcia na vstup užívateľa rovnako ako výsledky vyhľadávania Google. 

A tak v stredu, čo robíme, je odchádzame HTML a CSS úvod za nami a my sa za samozrejmé, že teraz vedieť a my predstaviť nový programovací jazyk volal PHP, ktorý rád C, sa chystá dať nám právomoc skutočne vytvoriť programy , Že samy o sebe vytvárajú výstup. V tomto prípade budeme používať PHP generovať dynamicky web stránok pomocou tohto nového jazyka. Tak o tom až v stredu. Vidíme sa potom. 

[Prehrávanie hudby]