[Prehrávanie hudby] DAVID J Malan: Dobre, vitaj späť. To je CS50. To je koniec týždňa sedem. A to je koniec tohto živiacich sa zdochlinami lov z problému nastaviť štyri ktoré by vás mohli vyvolať. Po uzdravení všetkých tieto JPEG zamestnancov, si vyzval, ak by ste chceli, fotografovať sa s čo najviac z tých ľudí, ako môžete. Máme veľa príspevkov v posledných niekoľkých týždňoch, naozaj, celkom málo tesne pred poludním dnes, z ktorých niektoré sú tu, tu chytil in-- vyzerá like-- Annenberg Hall v úradných hodinách, jeden tu v Lowell dom s Nickom. Tu je Ramon bol chytený na telefóne. To bolo na CS50 obed. To bol Jason Skyping sa viac kreatívne spolužiak, ktorý mu volal týmto spôsobom. Nevieme, čo to je. 

[SMIECH] 

DAVID J Malan: Ale že to stojí za gigabyte. Tu je Chang, ktorý doslova utiekol javisko aby sa vyhli fotografoval jeden deň, ale bol nakoniec chytený. Tu je Nick. Tu je Nick. Tu je Nick. A tu je Alison podľa oblasti. A Zamyla dokonca bolo zistené, u tanečného sály súťaže. Tak sme sa prejsť tieto fotografie, prísť na to, ktorí podali najviac najskôr, a odmena jeden báječný cena, as sľúbil vo špec. A budeme tiež sledovať informácie o priestor, ktorý bol zapojený. 

Pár announcements-- tak obed je opäť tento piatok v 13:15. Ak by ste sa k nám pripojiť, Odpovedz na tejto adrese tu. Znovu sa objaví Jason tu z jedného sekcií pár rokov späť, čo sa stalo padnúť na Halloween. A skutočne, sa prezliekol za tekvica danom roku. Ak sa budete pozerať tejto sekcii jeho od roku 2011 sekcia osem, ak ste zvedaví, na CS50.tv, myslím, že to bol rok, v ktorom Jeho vzduchové čerpadlo pracoval. 

Ak máte teda sledovať podobný oddiel v roku 2012, uvidíte túto Jasona moc vypustená, pretože oblek už fungoval, čo je len povedať tento piatok, ak chcete chcel vyrezať tekvicu s Daven a Gabe a iní, RSVP k hlavám na cs50.harvard.edu adresu. To sľubuje, že bude skvelá zábava. Daven, nám bolo povedané, má vyrezávané Tekvica celý svoj život. Gabriel z Brazílie má nikdy vyrezávané tekvice na Halloween. Takže sa tam s nimi, ako sa učia. 

Semináre, meanwhile-- takže sa dozviete čoskoro o tom, čo naše očakávania sú záverečný projekt, ktorý v podstate sa redukuje na navrhovanie a implementáciu väčšina akýkoľvek projekt zaujímať vy, aj keď s výhradou schválenia a vedenie zo svojho učiteľského kolegami. Ku koncu semester, sme predstavili rad seminárov, ktoré sú nepovinné triedy pod vedením výučbových kolegami a Harvard zamestnanci, priatelia kurzu cez kampus, na rôzne témy, ktoré sú dotýkajúcej sa ihrisko je základná osnova však platí, zábava a iný potenciálny záverečných prác. 

Napríklad, prvý, ak budete chcieť zaregistrovať, zamierte do tamtej URL. A to je zostava pre Tohtoročné semináre sám. Ale vykonávame máme desiatky semináre z rokov minulých, z ktorých všetky sú spojené v menu semináre Možnosť webových stránok stránke kurzu je. Takže ak uvažujete o presahuje svoju zónu pohodlia alebo vyzdvihnúť nejaké nové zručnosti, Napríklad, programovanie iPhone aplikácie s Swift, nový jazyk od Apple alebo Objective-C alebo Android alebo programovania [? cue?] žiarovky, alebo na ktorúkoľvek tém tu a viac, vďaka kontrola z registračnej stránke. 

Tak sme začali, a dospel k záveru o Pondelok sa pri pohľade na HTTP. Tak rýchlo refresher-- HTTP, HyperText Transfer Protocol. Ale čo to vlastne znamená? Čo to vlastne znamená? Je to ruka? Viem, že ste práve poškriabaniu vašej hlave. Ale chcete navrhnúť, čo HTTP je? 

Divákov: Ako počítače komunikovať s [nepočuteľné]. DAVID J Malan: Cnelo sa mi posledná časť. Komunikáciu počítačov with-- 

Divákov: internetové servery. DAVID J Malan: Good-- s internetom servery, a najmä, webové servery. Vzhľadom k tomu, odvolanie, je tu banda služby na internete, z ktorých niektoré Používate pravdepodobne denne medzi chatu a správy, chat, a web a e-mail, a podobne. A HTTP je len Protokol, ktorý webové prehliadače hovorí pri komunikácii s webové servery, a vice versa. A analóg v Ľudský svet môže byť, Aj rozšíriť moju ruku sa triasť niektoré ďalší človek je, a on alebo ona berie na vedomie, rozšírením jeho alebo jej ruku rovnako. Tak to je len protokol, súbor konvencií. 

A čo vlastne sú tie konvencie? No, je to len scvrkáva na odosielanie správ tam a späť, ako vidíte na obrázku. A je tu niekoľko spôsobov, ako ktoré môžete posielať tieto správy. A snáď najviac spoločné je známy ako get. A uvidíme kontrast to netrvalo dlho. 

Ale požiadavka dostať z prehliadača na server len vyzerá takto. Je to banda textu, ktorý kladie vnútri virtuálneho obálky. Na vonkajšej strane tohto krytia ísť pár kúskov detailov. Čo je potrebné ísť ďalej obálka, aby som tak povedal, s cieľom získať žiadosť ako to odo mňa na webový server? Jo. 

Divákov: Vaša IP adresa. 

DAVID J Malan: Moja IP adresa V poli Od, aby som tak povedal, a samozrejme, IP adresa príjemcu. Avšak v prípade, že webové paketu, potrebujeme trochu viac detailov Nestačí len poslať obálku na server, pretože server môže byť počúvania pre rôzne typy internetového prevádzky. Tak čo ešte potrebujeme okrem príjemcu IP? Jo? 

Divákov: Je to TCP? DAVID J Malan: Dobrý. TCP-- 

Divákov: adresa. 

DAVID J Malan: Adresa, alebo port, ako sa to volá. Blízko, ale číslo portu TCP. A je tu veľa z nich. Ale určite najviac oboznámení by nakoniec 80, čo je predvolené nastavenie ktorý sa používa pre webového prevádzky. A ďalší povedomý brzo bude 443, ktorý sa používa pre bezpečné webu prevádzka, adresy URL, ktoré začínajú reťazcom https. 

Tak toto je, čo sa deje vnútri tejto obálky. A dostať sa / jednoducho znamená, dať me predvolené webové stránky. Daj mi koreň tvrdý pohon na tomto serveri. A dúfajme, web server odpovie, OK a číslo 200, ktorý je len konvencie hovorí, áno, všetky je naozaj OK. Tu je stránka. Typ webovej stránky, bude byť text, ale konkrétnejšie, HTML, ktoré sa chystáme potápať späť do. A dot dot dot len znamená, tu je HTML. A to je miesto, kde sme vyzdvihnúť príbeh dnes, vlastne písanie HTML, HyperText Markup Language, čo je jazyk, v ktorom Webové stránky sú písané. Nie je to programovací jazyk. Tam je žiadne funkcie alebo slučky alebo podmienok. Je to značkovací jazyk, rovnako zase vidím dnes, ktorý umožňuje určiť ako štruktúrovať a štylizovať esteticky webové stránky. 

Tak toto bol ten, a len stránky naozaj Pozrel sa na, ak je krátko, v pondelok. A všimnite si pár charakteristickými črtami. Je tu veľa otvorených uhlový držiak a zatvorte uhlový držiak. Medzi tými, uhlový držiaky sú slová. A ideme na začiatok volá tieto slová tagy. Tak otvorený držiak hlavice a uzavretý držiak hlavice sú otvorené a uzavreté tagy, alebo počiatočné a koncové značky respektíve elementu HTML, ako budeme hovoriť, volal hlavu. A platí rovnaký žargón k telu v HTML a tak ďalej. 

A čo je pekné je HTML-- a naozaj, budeme stráviť strašne málo času na to, pretože budete väčšinou len prísť na to, aké funkcie to má, keď vás vlastne mať konkrétny problém na solve-- zistíte, že prehliadač je dosť hlúpe. Je to len tak do-- nie je na rozdiel od computer--, čo poviete, že to urobiť. A tak, keď máte otvorené držiak HTML na samom vrchole tam, že v podstate jednoducho znamená, hej, prehliadač, Tu je webová stránka napísaná v HTML. 

Keď to vidia otvorený držiak hlava, to len znamená, hey, prehliadač, tu je hlava, alebo najvyššia časť mojej webovej stránky. Keď to vidia uzavretý držiak hlava, to len znamená, hej, to je na hlavu. Pohotovostný režim na niečo iné. A to niečo je zrejme bude telo. A keď nemáte značku, ako je máte len ahoj, čiarka, svet, to je len bude raw text nakoniec sa zobrazí na obrazovke. 

Teraz si možno všimnete, príliš odsadenie tu. Môžete si asi odvodiť ako sme to štylizácia. Zakaždým, keď otvoríte záznam, aby som tak povedal, som odsadiť. A zakaždým, keď zavriem tag som un-zarážka, svojim duchom podobať zložených zátvoriek. A za to, že som typ použitie môj úsudok. Všimnite si, že som sa neobťažoval biť Zadajte vnútri tohto názvu značky. Prečo? No, proste som sa rozhodol, že to vyzeralo malý vysávač pre mňa, človeka, len neobťažoval robiť, že. Takže znovu, je tu nejaký rozsudok zavolala ako je v C alebo akomkoľvek jazyku. 

Ale všimnite si tiež, že tento zárez požičiava seba k duševnej modelu, , Aby sa príliš komplikovať. Ale strom, nie? Ak si myslíte, že na webe Stránka zrejme písaný takto, ako pekne členité, že tak, môžete takmer myslieť na otvorenom držiaku HTML uzavretý držiak tag je vymedzenie koreň uzla, rodokmeň štýl uzol v štýle stromov sme sa pozreli na minulý piatok. 

A skutočne, máme na tu čo zavoláme DOM, D-O-M, dokument objektový model, ozdobný spôsob, ako hovoriť strom, ktorý prehlasuje, že HTML. A všimnite si, že HTML má, budeme hovoriť, ako rodokmeň, má dve deti. Na ľavej strane je hlava. Na pravej strane je telo. 

A rovnako ako bezduché myšlienky cvičenie, hlava, má samozrejme, koľko detí Podľa tejto štruktúry? Takže len jeden, title-- a to je dôvod, prečo máme šípkou od hlavy až k titulu. Takže je to ako by táto osoba vo rodokmeň mal len jednu potomkov. A potom samotný názov môže sa povedať, že mať dieťa taky. 

Pripomeňme, že HTML mala Dobrý deň, čiarka, svet pod ním. A ja som proste čerpané v rámci oválny miesto obdĺžnika práve sprostredkovať sémanticky, že aj keď je to uzol v strome, aby som tak povedal, je to niečo zásadne líši. Nie je to tag. Alebo presnejšie povedané, nie je to prvok. Je to len textový uzol, ak chcete. Ale to sú úplne ľubovoľnej ľudskej konvencie. To je teraz môj spôsob, ako predstavuje, čo budem ako súhrn zavolajte dokument. 

A ako stranou, veci na Super ľavom hornom rohu, otvorený držiak výkričník doc typ HTML, toto vyzerá ako značku, ale je to hlúpe roh prípad, kedy to je len tam, skopírovať a vložiť ukázať prehliadačov toto je HTML verzia 5. Svet sa neustále mení, čo sa Prvý riadok kódu do stránky by mali byť. To jednoducho znamená, verzia 5. Takže to nie je úplne vyzerajú ako ostatné. 

Dobre, tak s tým povedal, budete teraz oceniť to celkom to hlúpy tetovanie niekto dostal. 

[SMIECH] 

DAVID J Malan: Tak jo, a teraz sa to vlastne skok aby robili niečo s tým. Spomeňte si, že naposledy Otvoril som hore CS50 Appliance a ja som niečo ako jednoduché, ako otvára gedit. A zachránil som súbor, aj na môj desktop-- nikde special-- ako hello.html. 

Takže dovoľte mi, aby som to urobil again-- hello.html Enter. A teraz v tomto súbore, budem pokračovať a opakovať to, čo sme práve saw-- doc typu html Potom idem robiť otvorený držiak html uzavretý držiak. A potom budem preventívne otvoriť a zatvoriť tag. Prečo? Len tak som sa nezabudnite neskôr. Je to proste dobré praxe, ako je otvorenie a pravú zloženú zátvorkou naraz. 

A čo potom prišiel ďalší? Môžete myslieť na tetovanie. 

Divákov: hlava. 

DAVID J Malan: hlava. A potom tu, som mal titul, myslím. A titul bol svojvoľne, ahoj, svet blízko titulu. A potom tu dole, telo, z course-- potom zatvorte značku tela. A potom už len trochu redundantné, Mal som to isté tu dole. 

Tak som sa tvrdí, že sa jedná o webové stránky. To je niečo, čo by teraz naživo na webe, aj keď samozrejme, je to doslova žiť na mojom desktope práve teraz. Ale naozaj, keď som minimalizovať gedit, Pozriem sa na mojom desktope jeho ikonu. Aj napriek tomu, že sa jedná o zariadenie, toto mohol robiť na Mac OS bez TextEdit alebo Windows Poznámkový blok i. 

A keď som do toho pustite a dvakrát kliknite že dokonca aj vyberte-- dobre, poďme nemožno vybrať, ktoré z dôvodu Chrome nie je otvorenie. Poďme ďalej a otvorte Chrome. A potom to Command-O pre otvorené A prejdite na mojom desktope a tento súbor otvoriť. To je, ako prehliadač interpretuje HTML, zhora nadol, zľava doprava. Hele, tu je HTML prehliadač. Tu je hlava. Tu je titul. Tu je telo. A skutočne, to je ako to robí, že webové stránky. 

Ale všimnite si URL. Nikto z vás by mohol vytiahnuť tomto konkrétnom strana na svoje notebooky práve teraz, dokonca aj vnútri vašich zariadení prostredníctvom tejto adresy URL, pretože súbor: // ukáže, že to je v skutočnosti na mojom súborovom systéme, môj pevný disk, nie je vaša. Takže to nie je všetko, že užitočné. 

Poďme sa teraz presunúť k použitím skutočnej webový server. A ukázalo sa, na CS50 Appliance je viac než len prostredie, kde môžete písať kód v C a zostaviť a spustite ho, ako si robil. To tiež bol konfigurovaný Zamestnanci predstavujú typickú web server, ktorý je na internete, ten, ktorý by ste mohli platiť za alebo ten, ktorý je v tzv cloude. 

A je to beh štandardná open source Softvér, napríklad, niečo s názvom Apache, čo je možno stále najpopulárnejší web Server softvér na svete že tisíce webových stránok, používajú aj dnes. A tiež má dokonca softvér, ako je MySQL, čo je databázový server že budeme nakoniec dostať, čo je len povedať Môžem začať liečbu Môj spotrebič ako plnohodnotného servera že nie som platiť za inde. Je to jednoducho žije na svojom vlastnom notebooku pre vývoj a pohodlie účely. 

Tak poďme do toho a využiť tohto. Chystám sa ísť dopredu a otvoriť okno terminálu. A ja idem ďalej a move-- vlastne prvýkrát som bude navigovať na mojom desktope. Ak sa mi ls, je tu hello.html. A ja idem dopredu a začať používať nový adresár máme nepoužíval pred dnes. 

hello.html-- budem pohybovať na ../vhosts pre virtuálne hosts-- o tom viac v future-- a potom do adresára s názvom localhost, čo je prezývka daná takmer akýkoľvek počítač, či už je to Mac, PC, alebo Linux počítač, a potom konkrétne do adresára, ktorý sme my, Zamestnanci už vytvorili pre vás, keď ste si prístroj s názvom verejná. A ako už názov napovedá, čokoľvek Dal som v tejto zložke, v teórii, bude teraz verejnosti, aspoň pre ľudí ktorí majú priamy pripojenie k počítaču. 

Takže teraz nechaj ma ísť dopredu a robiť cd toho istého adresára tak vidím, čo je deje a typu ls. A vskutku, to je Jediné, čo tam je. Tvrdím teraz, že preto, že som si toto súbor hello.html vnútri adresára nazýva verejná vnútri adresára s názvom localhost vnútri adresára tzv vhosts, ktoré vďaka zamestnancom CS50 bol pre-nakonfigurovaný tak, aby ich koreň webového servera, Teraz môžem snáď urobiť. 

Idem otvoriť novú kartu. A ja idem nie file: //. Chystám sa použiť skutočný http / localhost, čo znova, je prezývka pre moju vlastnú server. A potom som ísť s tým, čo názov súboru, len aby bolo jasno? Ak je tento príbeh asi bude? hello.html. 

Takže inými slovami, chcem teraz toto je môj vlastný počítač, moje vlastné zariadenie, ako by ich to skutočné servera. Jeho prezývka je localhost. Ale myslieť na localhost ako ako Facebook.com google.com, čokoľvek. Je to len môj miestny názov. A potom finále chcem, je v koreň pevného disku, aby som tak povedal, alebo koreň webového servera, ergo lomítko a potom názov súboru hello.html. 

Dovoľte mi, aby som oddialiť a stlačte Enter. A naozaj, tam je teraz moje webové stránky. Takže je to trochu inak. A to je len ako nezaujatý. Toto je stará verzia. Dovoľte mi, aby som zmenšiť písmo späť. To je starý. To je nová. Ale čo je v podstate deje teraz je, že HTTP je používaný. 

Urobme to trochu jasnejšie, alebo ak chcete, trochu komplikovanejšia. Nechaj ma ísť na pravom dolnom rohu v pravom hornom rohu môjho zariadenia. A všimnite si, že to všetko čas, tam bolo veľa. To je jedinečná adresa vášho CS50 Appliance. Je to súkromná adresa, Ako vyplýva z 172,16, čo jednoducho znamená len fyzicky prístup k tejto webový server. Všetko je firewallom a pekne chránený od zvyšku sveta pretože toto riešenie. 

A teraz si všimnúť ale keď pôjdem do táto adresa nie je v mojom zariadení, ale Mac OS-- idem vrátiť sa sem. To je môj Mac teraz. A teraz idem otvoriť táto verzia Chrome tu. A ja idem na http: //172.16.25 / A som zabudnúť na rest-- 133. 

Takže idem na návštevu z môjho počítača Mac že IP adresa /hello.html Enter. A teraz vidím z môjho počítača Mac že moje CS50 Appliance, ktorý je IP adresa je, že číslo, skutočne chová ako webový server na internete. Nemá pekný ľahké zapamätateľný názov ako Facebook.com, ale je to pomocou HTTP Zdá sa, že aj keď chróm je druh zjednodušenie svet pre nás, ale nám to ukazuje HTTP. Ale je to naozaj presne to. Chrome je len ukladanie niektorých úderov v týchto dňoch. A to je to, čo vidíme. 

Tak to je všetko v poriadku a dobré. Ale je to celkom nezaujatý stránku. Nechaj ma ísť a niečo urobiť dnes trochu inak. Tak nechaj ma ísť späť do gedit. A namiesto toho, ahoj, svet, poďme dať obrázok. A ja som tvrdil, zo before-- nechaj ma ísť do mojej localhost adresára verejnosti. A nechaj ma ísť napred a kopírovanie celá partia súborov od dnešného dňa z môjho Dropbox zložky na tu. 

Teraz, keď som typ LS, pozrite sa na všetkých týchto súboroch že som distribuované Webová stránka ihrisko je v predstihu dnes, z ktorých jeden je ešte hello.html. Takže tam je to jedno. A pripomínajú túto hlúpu jeden z minulého time-- cat.jpg. Tak skúsim vložiť cat.jpg vnútri mojej webovej stránky. 

Chystám sa ísť dopredu a to cat.jpg, zachrániť. Nechaj ma ísť späť do prehliadača Chrome. A dovoľte mi priblížiť písmo a teraz znovu. Jejda, kde som si to? Standby-- stále mám ten starý verzia z môjho stolného Open. Tak nechaj ma ísť do môjho VHOST, môj localhost, môj verejný a hello.html. Takže teraz nechaj ma ísť dopredu a hovoria cat.jpg vnútri tela tam, kde chcem, aby to bolo Zobrazí sa a znova. Samozrejme, že to nie je správne. 

Tak musím povedať, prehliadača malý viac zámerne, čo chcem, aby to robiť. Jednoducho napísaním názov samozrejme nie je dostačujúca. Tak pripomenúť, že tam bol ďalší tag, obraz, img krátkosti. Je to len preto, že ľudia nepáči typu Plný slová. A potom môžeme urobiť zdroj = "cat.jpg". 

A teraz budem robiť Jedna vec tu iný. Aj keď všetky Naše značky, doteraz mal tento pojem začať tag a koncový tag, že nie je naozaj zmysel pre obrázok, nie? Obraz je buď tam, alebo tam nie je. A tak ľudia prišli s jednoduchšie dohovoru. Ak máte značku, ktorá môže ako začínať a končiť v rovnakom time-- to môže byť prázdny, tak sa speak-- len vložiť lomítko vnútri tagu na samom konci. Teraz mi dovoľte vrátiť sa k môjmu prehliadači. Hit Reload Sakra, niečo je zle. Pravdepodobne ste videl občas na webe, aj keď to nie je tvoja vina. Je to chyba webového servera. Čo ódy to naznačujú? Je to rozbité. To je miesto, kde sa obraz patrí. Jo? 

Divákov: Ale to nie je majú prístup k obrazu. 

DAVID J Malan: Nezáleží majú prístup k obrazu. Že, alebo ešte horšie, možno nie je ani neexistuje. Uvidíme, či sa nemôžeme diagnostikovať, že. Pripomeňme si z poslednej doby, že ak Chrome, v zariadení, alebo dokonca aj na vašom počítači Mac alebo PC, idete do menu pre vývojárov a prejdite na Nástroje pre vývojárov možnosť, ktorá pravdepodobne nemáš moc nepoužíva, alebo vôbec. A keď pôjdem k sieti a znova načítajte stránku, poďme sa vlastne pozrieť na HTTP požiadavky, ktoré sú vyrobené. 

Vyzerá to, že je hello.html naozaj v poriadku, teda 200. Ale cat.jpg je 403. Takže to nie je 404. Súbor pravdepodobne existuje. 403 znamená zakázané. Tak to je trochu mätúce. Chystám sa vrátiť k môjmu terminálovom okne. Dovoľte mi, aby som priblíženie tu. A dovoľte mi urobiť ls. Je tu tie isté súbory. 

Teraz mi dovoľte urobiť ls-l, ktoré ste pravdepodobne používa pred pozrieť sa na súbor Veľkosti možná alebo časové pečiatky. A vidíme veľa zdrvujúcu informácie. Ale všimnite si, že pár detailov. Tu je hello.html v tomto riadku tu a tu je cat.jpg. A to je práve spotrebičom užívateľsky prívetivý zvýraznením JPEG je vo fialovej takhle. Ale čo iného sa líši u veľkosť súboru a názov súboru? 

Divákov: [nepočuteľné]. DAVID J Malan: Jo, je tu viac dve R je tu. Všimnite si, čo hello.html sa deje. Tak to dopadá, že mená tento adresár verejnosť je dôležité. Všetko, čo v tomto adresári má byť verejná. Ale to nestačí len presúvať súbory tam. Tiež je potrebné zmeniť spôsob súborov, zmeniť povolenia súbor, ktorý chcete aktívne nie je predvolené nastavenie, čo je to, že len viem čítať a písať, ja ako vlastník. Chcem celý svet všetky v môcť prečítať môj súbor, aby som tak povedal. Prečítajte si jednoducho znamená zobrazenie. 

A skutočne, ako uvidíte v probléme nastaviť sedem, to je to, čo znamenajú, že takýto R je. Tieto dve R je priemerná nechať všetky inde vo svete aj prečítať, zvlášť teraz, je to v tomto adresári. Takže najjednoduchší spôsob, ako to napraviť, je ísť do môjho riadku a to chmod k zmene Režim a potom vykonajte + R, dohromady, všetci, všetci, a r pre čítanie, a potom cat.jpg Enter. Sa zdanlivo nič nedeje, čo obvykle znamená dobrú vec. Takže ls-l again-- teraz Poďme sa pozrieť na cat.jpg. A toto oprávnenie Zdá sa, že sa zmenili. Mimochodom, ak urobíte chyba a vy, napríklad, práve urobil your-- nemám víš-- esej verejne prístupné náhodou, môžete robiť pravý opak, chmod a-R. Aj keď úprimne povedané, to by nemalo vo verejnom zozname rovnako, či je to problém. 

Takže teraz sa vráťme do môj prehliadač a Obnoviť. A ja idem na tlačidlo malý Ghostbusters symbol jasné, že časť obrazovky, takže môžeme vidieť nové požiadavky. A skutočne, tu je Priadka Cat pred rokom. Ale oveľa dôležitejšie je, technicky, je číslo 200, ktorá znamená, že to mám v poriadku. Dobre, tak to je všetko v poriadku a dobré. Ale my nie robiť to najlepšie z webových stránok, ani sa budeme snažiť príliš ťažké aby najmódnejšie webových stránok dnes. Ale poďme aspoň niečo Super zoznámiť pred hrkajúce okrem niekoľkých ďalších značiek. Takže predpokladám, že nemám len chcete mačku tu. Dajme tomu, že vlastne chcem to mačka odkazy na niečo. 

By som mohol, napríklad niečo také. pre kotevné preklad pre hyper referencie equals-- a povedzme niečo ako www.google.com konci citovať zatvoriť držiak. A teraz hľadať pre mačky. Close kotva tag. Takže to má len jeden druh z úplne novej detail. Tag samozrejme, je iný. Je to názov pre kotvu href alebo hyper referencie. 

Ale oveľa dôležitejšie je, že je tento syntaktický funkcie tu. To je to, čo začneme volať nie tag, ale atribút. A atribút je niečo, čo mení správanie značky. A tento atribút href, prostriedky zmeniť správanie tohto kotvy tak, že keď je to klikli, to ide na túto adresu URL tu. A samozrejme, že URL je Google. 

Medzitým, čo je to text tu bude? No, že to bude čo vlastne ľudské vidí ako podčiarknutý odkaz, tak jednoduché, ako to. Takže skúsme to. Dovoľte mi, aby som ho uložíte. Som stále v hello.html. Ale vo verziách pre on-line, uvidíte skutočné názvy súborov sme vopred pripravených. Nechaj ma ísť dopredu a znova. A teraz je to veľmi nezaujatý strana stále. Ale keď som sa vznášať sa nad there-- a je to trochu malé, ale- môžete vidieť na spodnej časti ľavom rohu obrazovky, to naozaj bude google.com. A keď som kliknite na to, že to bude metla mi cestu k vlastnému Google. 

Ale všimnite tu príležitosť pre vykorisťovania, rovnako ako stranou. A vrátime sa k iným otázky bezpečnosti pred dlho. Vzhľadom k tomu, že je táto dichotómia medzi, kam ísť, a to, čo hovoríte, by ste mohli urobiť niečo ako tohle-- http://www.google.com. OK, a teraz keď som znova po uložení túto stránku, to vyzerá, že pôjdem na Google. Ale neexistuje žiadny dôvod, prečo som ísť na Google, nie? Mohol by som naozaj ísť do niečoho, ako je badguy.com, znova načítajte stránku sem. A oznámenia, stále vyzerá ako Google. A iba v prípade, že som ostrý dosť vznášať sa nad tu Nevidím to dokonca ísť ísť na iné miesto. 

Takže ak ste niekedy dostali e-mail, a to najmä jeden z Paypal, alebo zdanlivo z Paypal s výzvou na prihlásenie na váš účet, to je dôvod, prečo by ste mali nikdy niekedy na odkazy v e-mailoch, úprimne povedané, všetky odkazy v e-mailoch. Ak viete, že máte skutočný peniaze na Paypal alebo bankou Ameriky alebo Fidelity alebo na ktorúkoľvek webové stránky, ručne zadajte ju. Vzhľadom k tomu, pozrite sa, ako ľahké je prinútiť niekoho do prezentovať to, čo vyzerá ako odkaz. Ale v skutočnosti išlo ísť absolútne kdekoľvek. 

A je tu oveľa väčšia hrozby, ako toto. V skutočnosti, je to trochu dotyčnice teraz, ale jeden z tých najlepších, čo som kedy videl ktorá od tej doby bola uzavretá, je niekto viedol ľudia to-- tak to by mohol povedať, Kliknite tu pre prihlásenie do vášho účet, bankový účet. A to bola Bank of the West. 

Takže niekto kúpil toto. A je to trochu lepšie vidieť je v mono rozložené písmo zväčšovať v na 30 stôp projektorom. Ale keď je to malé písmo e-mail, že ste príjem, to vyzerá ako bankofthewest.com, nie bankofthevvest.com, ktoré niekto zaplatil 10 dolárov kúpiť. A potom to viedlo je, aby ekvivalent nejaké zlé webové stránky. 

A uvidíte too-- vlastne môžeme urobiť tohle-- keď pôjdem na aktuálnej webovej stránky, bankofthewest.com, opäť, stiahnutie z poslednej doby že ak je to ich webové stránky a ste zvedaví, ako to funguje, môžete samozrejme ísť do Vývojárske nástroje Chrome. A môžete vidieť všetky HTML tam pekne formátovaný. 

Ale viac k veci, ste cam-- poďme uzavrieť tohle-- môžete ísť Zobraziť Developer Zobraziť zdrojový kód. Prečo som len kopírovať to všetko a potom som môže ísť do môjho malého gedit okne tu a vytvoriť svoj vlastný webové stránky. Uložte na túto hello.html. A pravdepodobne to bude zlomiť, pretože to nie je tak jednoduché zvyčajne. Ale teraz, keď znovu načítať svoju vlastnú stránku na moje vlastné CS50 Appliance a stlačte Restore, OK, niektoré veci zlomil. Ale som dosť blízko, aby s moje vlastné bankové webové stránky, nie? To všetko HTML-- 

[SMIECH] 

DAVID J Malan: --I ani actually-- a viem, že je to niekto, kto by v skutočnosti kliknite na tieto odkazy tiež. Tak jasne, niektoré veci zlomil. Ale to povedie nám do diskusie, zbytočne práve teraz, na to, čo CSS, kaskádové štýly, sú, a ako ste vlastne stiahnuť ďalšie súbory HTML a JPEG súbory GIF súbory, ktoré Webové stránky by mohli byť pomocou. Ale to všetko je uskutočniteľný. Ale je to naozaj scvrkáva Tieto veľmi jednoduché heuristiky. 

Takže teraz poďme len prelistovať Niekoľko ďalších príkladov HTML len aby vám pocit čo iného môžete robiť. Napríklad, to je list.html. Dajme tomu, že som chcel, aby sa webové stránky so zoznamom domov v quad. Mohol by som použiť tag ul pre neusporiadaný zoznam a potom položka zoznamu dieťa a potom opakovať over-- alebo zoznamu, rather-- domy v otázke. 

A keď som to otvoriť sa, ideme na to. Poďme nie hello.html, ale list.html. Sakra. Ako môžem tento problém vyriešiť? Je to rovnaký problém ako predtým, nie? Tak ma nechaj robiť chmod-- oops-- chmod + r list.html. A teraz keď som sa vrátiť do svojho prehliadača a kliknite na tlačidlo Načítať znovu, tu to je. Takže ak ste niekedy chceli, aby zoznam s odrážkami, môžete to urobiť. Ak chcete byť super fantázie a vytvoriť usporiadaného zoznamu, nie je neusporiadaný zoznam, zmeniť tie, ol, znova načítajte stránku, a Teraz prehliadač bude počítať za vás. 

Čo iného môžeme robiť? No, pár others-- ak máte dlhé odsekov text-- Napríklad, niektoré Latinský text ako tohle-- a budete chcieť v samostatných odsekoch, open p, v blízkosti p tagu odseku. A to znova a znova. A keď som teraz otvoriť tento súbor, paragraphs.html, dobre, to je stále nepríjemné. Takže teraz poďme sa vrátiť k môjmu výzva, chmod a + r r hviezda .html-- pekný malý divoká karta, aby som tak povedal. To by mali stanoviť všetky tieto problémy pre mňa. Poďme znova. K dispozícii sú tri body. 

A teraz poďme do toho a otvoriť jednu ďalšiu. Ako sa o stôl? Určite ste si všimli stolný vzhľad trochu zložitejšie. Ale je to rovnaké idea-- open tag, open tag, open, open, open, close tag, open tag. A to sa stalo, stať stôl, ktorého hranice je zrejme Bude hrúbku 1-- čokoľvek že means-- riadok tabuľky, tabuľka dát, čo znamená bunku. A keď som sa vrátiť do svojho prehliadača tu a ísť do table.html, môžete vidieť niečo takto, odporná. Ale dostaneme do bodu, kde môžeme skutočne robiť veci krajšie než to. 

Dovoľte mi teda stanoviť teraz. Je tu zväzky viac značiek. A HTML je úžasné vyzdvihnúť pretože úprimne povedané, všetko, čo potrebujete urobiť, sa pozrieť na existujúcich webových stránok s ktorými ste sa zoznámili. A ty si ako, oh, to je ako robili to esteticky. 

Alebo sa môžete pozrieť na všetky on-line zdroje o tom, ako funguje HTML, a uvidíte, že tam je Celý slovník ďalších značiek. Ale s jednoduchým mentálnym modelu sám, že takmer akýkoľvek štítok otvorení musia byť uzavreté, je to naozaj sa stačí naučiť sám HTML po porozumieť tieto základné myšlienky značiek a atribúty a dobre formedness že sme hovorili o tom, zavrieť niečo, čo by sme mohli otvoriť takže nemáme pliesť prehliadač. Takže poďme sa teraz to zaujímavejšie úrovne tým, že pôjdete na aktuálnu. A poďme na mojom Macu tu, na google.com. A teraz notice-- poďme to urobiť. Som gong ísť Nastavenie, Nastavenie hľadania. Chcem vypnúť tento nepríjemný okamih Výsledky vec, okamžite tam, kde začne reagovať na vaše písanie. Poďme to urobiť staršie školu tak sme skutočne vidieť, čo sa deje. 

Takže ja idem, aby som si zachránil Nastavenie tu Google. A teraz notice-- budem hľadať niečo ako mačky. A je to stále robí auto Kompletné tu, ale na základe vecí, ľudia zadali v minulosti. Povšimnime si ale, čo sa bude diať. 

V URL v okamihu, keď je to len google.com. A technicky je to lomítko. Google práve ukladanie znak a nie je nám to ukazuje. Sú nám ukazuje https, len byť super upokojujúce, že sme v zabezpečenom alebo šifrované stránky. 

Tak nechaj ma ísť dopredu a hľadať pre mačky. Teraz to bol naozaj ohromujúci rýchlo. Pozrite sa na dĺžke tejto adresy URL. Ale ukazuje sa, že väčšina z týchto vecí v URL je vlastne k ničomu. Chystám sa začať mazať veci nerozumiem. Vidím mačky. Chápem mačky. Neviem, prečo mačky sú tam znova. Ja naozaj neviem, čo to nezmysel je. Tak som len tak, aby zvýraznenie a mazanie veci že nechápem, destilácie URL do práve tento. 

Teraz mi dovoľte si znovu zadávať. Vyzerá to, že Google stále pracuje. Takže z nejakého dôvodu, že pridávate veľa vecí na ich adresy URL v predvolenom nastavení. Ale to nie je nevyhnutne nutné. Takže to, čo je pekné o tom? No, nechaj ma ísť dopredu a otvoriť Chrome Inspector. Tam je to trochu skratka myš pre neho. 

Prejdite na kartu Sieť. A teraz mi dovoľte znova Táto stránka ešte raz. A ja stlačeným klávesom Shift. Mimochodom, prehliadačov majú tendenciu do medzipamäte alebo uložiť informácie len kvôli účinnosti je. Ale obvykle, držanie Shift a prekládka donúti všetko začať znovu od začiatku. A to je to, čo chcem robiť. 

A všimnite si všetky tieto riadky, ktoré práve objavil. Ukazuje sa, že v danom web strana, môže tam byť len jeden súbor involved-- hello.html-- alebo tam môže byť 52, ako v tomto prípade. Keď som sa navštíviť google.com, zdá sa, že môj prehliadač začína 52 jednotlivé HTTP požiadavky. Prečo tomu tak je? 

No, pozrite sa na to, čo je vo vnútri tejto webovej stránky do hornej časti. K dispozícii je nielen text, ale je tu skutočné obrazy mačiek viac ako na pravej strane. K dispozícii je farebné logo tu na ľavej strane. Je tu všetko z týchto ikon pre mikrofón a tak ďalej. Je tu veľa kusov, stavebné bloky, stieracie kúsky, ak chcete, na tejto webovej stránke. A čo je na tom prehliadač na dostať úplne prvý súbor, ktorý je tento riadok tu, ako sa v podstate iterácia cez vrchol HTML nadol, zľava doprava, hľadá veci, ako je imidž značky alebo iné značky ktoré sa spomenúť ďalšie súbory a keď to vidí, ide a načíta ich cez HTTP, životaschopný celok obálka metafora, a potom sa zobrazí v vhodné umiestnenie na webovej stránke. 

Ale všimnite tu, ak sa zameriam na Prvý hod, vyhľadávanie mačiek, Všimnite si, že v skutočnosti je to pomocou protokolu HTTP 1.1. A bohužiaľ, Google Chrome práve teraz vo verzii 39 je druh dumbing veci dole a Nie je nám ukazuje skutočné hlavičky. Ale to, čo sa skutočne poslal, je požiadavka za to, lomítko, ale / search? q = mačky. 

Teraz, prečo je to tak dôležité? No, ja idem na odvodenie z toho, že ak Google podporuje otázky tohto formulára, prečo nie mám implementovať svoje vlastné hľadanie motor CS50, ale len predné koniec, len grafické užívateľské rozhranie. A budeme zadávať zadná časť, výsledky skutočné hľadanie na Google. 

Tak ako to mám urobiť? No, nechaj ma ísť do gedit sem. A nechaj ma ísť napred a otvoriť up, povedzme, nový súbor. A ja idem zachrániť tento dočasne ako hľadanie-0.html. A nakoniec, budeme rýchlo vpred na ktorú som vopred pripravených. 

A ja idem rýchlo vybičovať typu doc html otvorený držiak html v blízkosti držiak html. Potom budem robiť hlavu v blízkosti hlavy otvorené titul CS50 Hľadať miesto vyhľadávania Google. Tu budem mať telo, tu blízko tela. A teraz musím CS50 hľadania. A vlastne, poďme stavať to postupne. Chystám sa ísť dopredu a zavrite to a skutočne dať to v mojom verejnom zozname. Tak mi daj len jeden okamih. search-0.html-- Chystám sa časovo hovoria search.html. Chystám sa chmod to + r search.html. A teraz idem otvoriť. V poriadku, takže to bolo rýchlo. Ale cieľom jednoducho bolo aby sme sa dostali do bodu, mať tento text Súbor s názvom search.html. Takže nie je moc na pohľad, ale. V skutočnosti, keď pôjdem do svojho prehliadača, a prejsť na search.html, to je všetko, čo je. Ale viete čo? Aj môže byť trochu milovník. Čítal som v knihe, že je tu tag záhlavie s názvom h1. A ja idem ďalej a používať túto open H1 a zavrieť h1. Znovu načítate stránku. A teraz je to väčšie a odvážnejšie, nie je tak zaujímavé, ale aspon štrukturálne zaujímavejšie. Ale teraz mi dovoľte predstaviť inú značku. Ukazuje sa, že je to tag formulára. A dovoľte mi ukončiť tento tag. A ukázalo sa, je tu vstupné tag, ktorý má atribút s názvom typu, ktorý je dátový typ poľa, ak chcete. A bude typu textu. A jeho hodnota sa deje byť CS50 hľadanie. Close tag. A tam to bude bez pojem otváranie a zatváranie s oddelenými tagy. 

Dovoľte mi, aby som sa vrátiť sem a zistiť, čo sa deje, znova. Začína byť zaujímavé. Vyzerá to, že je to textové pole. A vlastne, ja som nechcel dať hodnotu tam ešte. Nechaj ma ísť späť a skutočne dostať zbaviť tejto hodnoty, aby to jednoduché. Namiesto toho, aby hodnoty, čo som chcel aby túto vec bol názov. A ja neviem, čo to je, tak sa vrátim k tomu. 

Ale pod tým chcem robiť input type = odoslať. A táto hodnota bude CS50 hľadanie. A uvidíme, prečo som presunul hodnotu tohto. Keď som sa znova, sa mi zdá teraz Počiatky mojej vlastnej vyhľadávanie motor, super odporná, ale úprimne povedané, je to nie ďaleko dohodil od toho, čo Predvolená stránka Google vyzerá. 

Ak idem teraz tu, môžem zadať mačky a dúfajme, kliknite na tlačidlo Hľadať. Ale ja nie som úplne neskončil, preto, že som nevykonal, Je zrejmé, že databáza. Nemám liezol web na výsledky vyhľadávania. Tak som potrebné zadávať, že pre Google. Tak ako to mám urobiť? 

No, v prvom rade by som je potrebné pridať a akcie pripisovať mojej forme tagu, ktorý je http://www.google.com/search. A viem, že len z nutnosti vyvodiť bližšom pohľade v ich URL. A teraz hádajte. Čo by mal tento text poľa pravdepodobne nazvať, podľa toho, kde sme prišli pred rokom? 

Divákov :? Q. 

DAVID J Malan :? Q. A už vôbec sa skutočne potrebujú otázku označiť to dopadá, ale q je skutočne to, q na dotaz, pravdepodobne default, len preto, že to je čo Larry a Sergey prišiel s rokmi. Takže teraz mi dovoľte znova načítajte túto stránku. Nevyzerá to tak odlišné. Ale teraz sledujte, čo sa stane. 

Keby som zadajte mačiek a kliknite na tlačidlo CS50 Hľadanie a pustiť, Všimol som si bleskurýchlo od skutočnej Google. Teraz Google je, že je trochu nepríjemné v tom, že sú pripojí ďalší parameter, ak chcete, na adresu URL. To je všetko deje automaticky na strane Google. 

Dôležitou súčasťou je, že sa zdá aby priniesli túto žiadosť tu. A naozaj, to, čo sa stane. Ak máte HTML, ktoré vyzerá to, toto je druh webové vývojárov zápisu že to hovorím, choďte do toho a vytvoriť formulár že keď je predložený, to bude ísť na túto adresu URL. A keď URL poskytol hodnoty pre veci, ako je Q, nechodia len na túto adresu URL. Vlastne, prejdite na otázku značka a potom q = mačky. Pripojiť parameter, Parameter HTTP takhle. 

A práve byť super presné, to, čo je odvodiť here-- ale budem viac explicit-- je že metóda, ktorú chcete použiť je dostať, miesto niečoho ako príspevok, ktorý budeme nakoniec vidieť. Takže v skratke, jednoducho tým, že pochopenie HTML a používať niektoré celkom jednoduché tagy, teraz môžeme začať vytvárať naše predný koncový užívateľ rozhranie s vyhľadávania Motor za ním. 

Ale to je samozrejme celkom odporná. Dovoľte mi teda vlastne otvárajú o niečo lepšia verzia. To je ten, Aj pripravené v vopred, že má nejaké pripomienky. Ale uvidíte, že ja do značnej miery znovu ju. Tak to je on-line už k dispozícii. A ja som náhodou preventívne ísť na https len, aby to jednoduché. 

A teraz poďme otvoriť ďalšie iterácie tohto. Je verzia 1 miesto 0. Čo vyskočí na vás ako mierne rôzne v tomto príklade? 

Divákov: [nepočuteľné]. 

Jo, je tu tento text align centrum. To je trochu divný tu. Ale toto je naozaj nový. A možno hádajte, čo sa bude diať. Ak idem do svojho prehliadača teraz a navštíviť search-1.html, je to skoro to isté. Ale je to krok bližšie je trochu krajší. Je to stále škaredá, ale krajšie v tom, že aspoň všetko je teraz v stredu. 

Tak sa ukáže, že to, čo som pomocou je iný jazyk úplne volal CSS, kaskádové štýly. A CSS, úprimne povedané, je druh na, podľa môjho osobného názoru, otrasne navrhnutý jazyk. To je veľmi nepríjemné na pamäti všetky rôzne detaily. Ale to je to, čo štylizuje Celý celosvetovo web dnes. Som urazil niekoho. Dobrá. Takže poďme späť a vidieť ako sme vlastne používať to. A ukázalo sa, aspoň, že je to vlastne celkom jednoduchý jazyk. Je to len dvojica kľúčov hodnota, vlastnosti a hodnoty, vlastnosti a hodnoty. Naozaj, tu je jeden taký majetok a hodnotu. 

Jednoducho pomocou štýlu atribút môjho tela tagu a dávať to hodnotu Slovo hrubého čreva a ďalšie slovo, alebo vlastnosť a hodnotu, Môžem ovplyvniť estetiku webové stránky, nie ešte nutne štruktúra, ale estetika nej. A práve Googling okolo, som si uvedomil, že CSS, kaskádové štýly, podporuje vlastnosť nazvanú text-align, ktorého hodnota môže sa doľava, doprava alebo na stred, napríklad. 

Takže teraz, keď som sa znova Táto stránka, čo som si bol stred stránky, ale stále dosť škaredé. Poďme ďalej a otvorte up verzia 2 Hľadať. A teraz Všimol som si urobil trochu viac. Všimnite si, že sa tu vnútri hlavy tag, môže existovať viac ako titul. V skutočnosti, tam je tag štýl. A to je miesto, kde to len dostane Trochu chaotický videnie CSS niekedy. 

Všimnite si, že som sa zdá, že majú niečo že štrukturálne vyzerá úplne inak. Ale tu je názov tag chcem štylizované. Tu sú naše staré priateľov kučeravé traky a uzavreté zložená zátvorka. A potom je, že majetku a jeho hodnota. 

Keby som načítať tento súbor, search2.html, Konečný výsledok je rovnaký. Ale je to krok smerom k lepšiemu dizajnu. Vytknutím túto CSS, som nie pomiešané s mojím HTML. A skutočne, ako uvidíme, mohol by som znovu použiť tieto vlastnosti a hodnoty. Keby som chcel, aby sa kytice časti mojej webovej stránky na stred, Nemám písať style = text-align centrum všade. Môžem dať na jednom mieste Možno, rád sa hore. 

Ale ani to nie je najlepší návrh. V skutočnosti, jedna z vecí, sa dozviete ako budete tráviť viac a viac času s web programovania je, že čím viac si môžete modularizovat vecí a faktorov veci ako .h súbory dajte nám faktora veci von, Páči sa helpers.c dajte nám faktorov veci niekoľkých psets rokmi. Rovnako tak by sme mohli chcete dosiahnuť. 

Takže si všimnúť vo verzii tri search.html som vyčistiť hlavu stránky a len dať v tomto, tag link, ktorý na rozdiel od mena, nedáva hypertextový odkaz. To odkazuje na iný súbor prostredníctvom href, ktorého hodnota je v tomto prípade, je search-3.css Tak som si uvedomiť, že budeme rýchlo. Ale všetko, čo robím, je druh pohybujúcich sa veci okolo. Dovoľte mi, aby som otvoriť Search-3.css. Tu to je, naozaj nič k tomu. Len som skopírovať a vložiť ju do novej súboru, rovnako ako my zapracované veci z do iných súborov pred. A result-- úplne underwhelming-- bude úplne rovnaký. Ale ideme toward-- nie, to nie. Oh, ja viem prečo. 

Takže sa zdá, že sa túto chybu. A to je v nejakom zmysle. Ale dovoľte mi, aby som otvorila svoju kartu Sieť. Dovoľte mi, aby som znovu načítate stránku. Ach, prečo je CSS nepoužívajú? No, súbor CSS, podobne, má byť svet čitateľný, aby som tak povedal. A tiež je v súčasnosti zakázané. Dovoľte mi teda robiť chmod + R hviezdy dot CSS-- whoops-- sme bodka CSS je len Prípona súboru CSS súborov. Teraz mi dovoľte vrátiť sa môj prehliadač a Obnoviť. OK, trochu lepšie. 

Teraz mi dovoľte urobiť jednu poslednú vec. Vo vyhľadávaní-4.html. Mám verziu, že som si myslel, bola cesta chladnejšie, aj keď oveľa viac komplikované. Poďme sa pozrieť na výsledok ako prvý. Zavrite to nám viac priestoru. Zmeniť to hľadať-4, Enter. 

A teraz veľa vecí, sú rozbité. Chystám sa vrátiť do môjho zoznamu tu. A teraz som len robiť chmod o + r na file-- pretože viem, že exists-- nazýva logo.gif, čo je obraz. A teraz znova. A wow-- tak teraz som celkom blízko, úprimne povedané, rád verzii Google 1999, a úprimne povedané, verzia Google 2014 že jo? 

Takže to teraz bude na svoje webové stránky, nakoniec, keď som hľadať pre mačky. A skutočne je. Ale to, čo som urobil inak V tejto verzii 4? Takže nebudeme zaoberať príliš veľa na to tu. Uvidíte to v probléme nastaviť sedem nakoniec. Všimnime si ale urobil som si pár vecí. 

Predstavil som div tag, čo je divízia, svojim duchom podobať tagu odseku. Ale rozdelenie je, rovnako ako, tu je obdĺžnikový neviditeľný región obrazovky. Poďme dať jedinečný identifikátor, päty, len takže môžeme hovoriť o je v našom HTML inde. Tu je ďalší div stránky ktorého číslo bude spokojný. Je to obsah stránky. A tu je hlavička stránky. 

Inými slovami, som v podstate v HTML som mentálne prehliadanie tejto webovej stránky, ako tri zložky, hlavičkové sem s touto neviditeľnou obdĺžnik, obsah v stredu, a potom pätu dole, a to aj keď nevidíme tie veci. Pretože chcem, aby v mojej hlave strana tu, alebo v súbore CSS, Môžem použiť túto syntax. 

Header nie tag. Je to číslo, takže sa ukáže, na to, že tým, že robí #header, Teraz môžem použiť jeden alebo viac vlastnosti do hlavičky. Môžem robiť rovnaký obsah, rovnaký za obsah tu. 

Tak napríklad, v zápätí, oznámenia Všetky tieto vlastnosti som pridávanie. A ja viem, že existujú len tým, že čítanie sa na dokumentáciu pre CSS. Veľkosť písma bude smaller-- takže niektoré relatívna veľkosť písma. Hmotnosť bude tučne. Margin-- koľko pixelov okolo to-- je 20 pixelov. A to bude v stredu. 

Ale teraz, stránka vyzerá takto. Ak nie som spokojný s moja kópia práve tam, Mohol som urobiť niečo ako červenou farbou. A potom som si to uložiť, načítať, a teraz som štylizované pätu. Takže je to len naznačuje na napájanie o tom, čo môžete urobiť na webovej stránke zmeniť veci okolo. 

A dokonca chladnejšie než to, ak chcete tropit si s aktuálnej webovej stránky, nemožno ich trvalo zmeniť. Ale keď otvorím Znovu Chrome Inspector a idem nie na ľavej strane tú, ktorá ukazuje Facebooku HTML, ale ukazuje na pravej strane na pravej strane všetky svoje CSS, môžete buď a zmeniť veci v reálnom čase. Tak nechaj ma ísť dopredu a to. 

Nechaj ma ísť napred a kontrola Kliknutím na tejto náhodné slovo tu, podpísať, a kliknite na tlačidlo Skontrolovať prvok. Chrome veľmi výhodnú skočí na tag h1, že Facebook používa. A všimnite si tu Facebook má trochu lenivo pevne danej veľkosti písma ako vlastnosť tu. 

Takže super vec však je, že keď som vlastne ísť sem a hovoria, oh, Facebook, nepáči sa mi, že 64 pixelov, môžeme teraz zmeniť Facebook. Samozrejme, že sme len ho zmeniť pre mňa osobne v túto chvíľu. Ale to je len ďalší nástrojom v našom sade náradia , Čo sa deje, aby nám vylepšiť a prísť na to, a tiež diagnostikovať problémy v našich vlastných webových stránkach. A mohli by sme podobne prejsť tu, čo je to isté. Ak sa naozaj chcete dostať fantázie, som znamenať, teraz môžete skutočne mutovať stránku a robiť šialené veci. 

Tak prečo je to všetko užitočné? No, nakoniec sme bude chcieť byť schopný vytvoriť webové stránky, ktoré sú poháňané vlastnými zadných koncoch, nie len Google a outsourcing back-end tam. Vlastne chceme hodnoty, napríklad, akcie nášho vyhľadávača atribút ísť nie na niekoho iného, ale niečo ako search.php, kde search.php je na našom vlastnom serveri, nie na niekoho iného. 

A tak sa tam dostať, sme vlastne je potrebné zaviesť nový jazyk. Tak už sme sa pozrel na jeden nový Jazyk tu, alebo dva naozaj, HTML a CSS. Ale v skutočnosti sú len konštrukčné a estetické jazyky. Nie sú to programovanie jazyky samy o sebe. A to je asi tak formálne čas ako budeme tráviť na nich. Vzhľadom k tomu, začneme teraz prejsť na PHP. 

PHP, takže je aktuálne programovací jazyk. Je to skriptovací jazyk v tom zmysle, že je to má byť ľahšia než niečo ako C A to je interpretovaný jazyk, čo znamená, že to nie je vybudovaný. Takže v skratke, čo to znamená, keď sme použili jazyk C a museli sme ho zostaviť? Čo to znamená kompilovať C zdrojový kód? Divákov: [nepočuteľné]. DAVID J Malan: Povedz to znova? Divákov: [nepočuteľné]. DAVID J Malan: Perfect. Ukazuje to na binárne. Ukazuje to do nuly a tie z aktuálnej anglicky ako zdrojový kód. A potom môžeme skutočne spustiť tieto nuly a tie priechodom CPU poklepaním na ikonu alebo spustením príkazu. 

PHP a Python a Ruby a Perl a JavaScript a kytice ostatné jazyky sú interpretované jazykmi, čo znamená, nemáte zostaví z nich. Skôr, kŕmiť ako vstup do program s názvom tlmočníka. A to interpret, ktorý niekto napísal, číta zdrojový kód zhora nadol, zľava doprava a len interpretov tieto riadky a robí to, čo hovoríte. 

Takže ak narazíte na riadok, ktorý hovorí, že tlač, nemusí to nutne previesť tlač so zodpovedajúcimi núl a jednotiek. Je to len má túto tlmočníka ako big Ak podmienka, ktorá hovorí, ak inštrukcie programátora je tlač, vykonajte nasledujúce kroky. Tak to interpretuje práve podľa druhu uvažovania tým, čo hovoríte to urobiť. 

A PHP je jedným z týchto jazykov. A pred PHP rokmi bol navrhnutý tak, Práve pre programovanie pre web. A to bolo spočiatku veľmi nedbalý chaotický jazyk. A naozaj, je tu obrovský Množstvo zlé PHP kódu tam. Ale jazyk sám dozrela v priebehu rokov, natoľko, že teraz je to v skutočnosti nádherný ďalší krok pedagogicky z C, pretože je to tak sakramentsky povedome všetko ste práve videli v posledných niekoľkých týždňoch. 

Jeden počiatočný rozdiel uvidíme je nie je hlavnou funkciou už. Keď začnete písať kód, je to len bude vykonaný bez ohľadu na to, ako uvidíme za chvíľu. Medzitým, tu je to, čo premenná vyzerá v PHP. Je to trochu inak, ale len ťažko. 

V PHP, že to nie je silný písanie. Je tu týždeň písanie, ktorá sa práve tu znamená, sú dátové typy, ako sú reťazce a čísla a ďalších vecí. Ale nemusíte sa obťažovať s uvedením to, čo oni sú už nie. PHP čísla je pre vás. Znak dolára je len rozhodnutie že PHP ľud rokov Pred tak, že všetky premenné v PHP práve začína znakom dolára. Je to vlastne trochu užitočný v tom, že vyskočí na vás trochu viac. 

Ale po tom, toto je stav, v PHP. To, čo je v porovnaní s C? Trick question-- nič, čo je v skutočnosti naozaj pekné. Booleovské výrazy v PHP-- rovnaké. Booleovské výrazy sa a oproti alebo prepínače, slučky, slučky, loops-- OK, to je iný. 

Tak to dopadá, že je pár ďalších funkcií v PHP. Jedným z nich je v skutočnosti to, ktorý je úžasne pohodlné. Ak je $ čísel je pole, ktoré ste deklarovaný predtým v programe, Máte tento chuť na každý konštrukt že namiesto toho, aby to všetko nepríjemné I = 0, I je menej než to, [? Aj ++?] pre každý čísel ako čísla, kde každý z týchto znamení hodnoty dolára je len variabilný, a druhý si môžete myslieť ako ja Dalo by sa to nazvať, čo chcete. Zavolal som to číslo. To bude iterovat cez pole volaných čísel. A v každej iterácii, je to bude automaticky aktualizovať pre teba číslo znak dolára variabilný, takže si neustále majú prístup k premennej, ktorú chcete aby bolo nutné robiť žiadne hranatú zátvorku notácie alebo indexovania do matice. 

Okrem toho, máme dokonca veci, ako je pole, ktoré vyzerajú takmer rovnako, okrem toho, že je to veľmi časté, ako sme to vidieť, ako v PHP a JavaScripte vykonať predbežnú inicializáciu poľa pomocou hranatých zátvoriek. C používa zložené zátvorky. Takže je to trochu odlišné, aj keď sme sa naozaj použiť ten trik moc. 

Ale ešte mocnejšie, PHP je asociatívne pole, čo je ozdobný spôsob, ako hovoriť hash tabuľky. V skutočnosti, ak chcete deklarovať hash Tabuľka v PHP, na rozdiel od C- koľko riadkov kódu trvalo skutočne realizovať hash tabuľky v C? Alebo koľko riadkov kódu je to z pri vykonávaní hash tabuľky v C? Takže je to asi veľa, že? Je to niekoľko desiatok, možno 100 alebo 200. To je netriviálne. Alebo je to o tom, že, ako budete čoskoro vidieť, netriviálne realizovať hash tabuľky [Nepočuteľné] a tiež vyskúšať. Ale v PHP-- a úprimne povedané, ja asi nemal ti to povedať, až Monday-- v PHP, ak chcete tabuľku, hotovo. To je hash table-- tak s jedným riadkom kódu. A 

Mnoho jazykov urobiť. Bavte sa s pset päť. Takže veľa jazykov urobiť. Dávajú vám tieto abstrakcie že iní ľudia, iné programátorov, vytvorili pre vás tak, že môžete postaviť na svojich pleciach a začať používať myšlienky, ktoré sú super presvedčivé, ako hash tabuľky a stromy a snaží sa. Ale nemusíte nutne vykonávať tie veci sami. 

A tak nakoniec to, čo budeme používať PHP pre je potenciálne písanie programov z tzv príkazového riadku. Mohli by sme sa znovu každý program sme napísal tento semester tak ďaleko, snáď s výnimkou Breakout, ktorý využíva SPL, ktorá je špecifická pre C v súčasnej dobe. Ale každý iný problém nastaviť, určite Mario a Caesar a Vigener a [? Crack?] A ďalej sme mohla opätovne zaviesť v PHP, a asi trochu ľahšie. 

Ale čo my nakoniec bude PHP používať ich web programovanie. A budeme zavádzať ďalšie týždeň mentálny model, vzor nazvaný MVC, pohľad modelu regulátor, ktoré, ak ste urobili programovania predtým v Pythone alebo Ruby alebo inom mieste, budete možno viete, tento tím sa Koľajnice a Django a podobne. Ale ak ste novým to taky, uvidíte že je to v skutočnosti veľmi prirodzený rozšírenie faktorizace a druh konštrukcie kódu, ktorý máme robil v C. Budeme teraz použiť niektoré z týchto lekcií do PHP takže nakoniec sme vykonávanie našich vlastných webových stránok. A ak ste trochu uchvátený alebo ohromený že budeme robiť všetky tak rýchlo, Uvedomujem si, že takmer každý semester, takmer 90% študentov CS50, vrátane tých, ktorí nikdy naprogramované, skončiť robiť záverečné projekty, ktoré sú založené na webovom programovaní. A tak uvidíte, že sa vráti sú vysoko v nasledujúcich týždňoch. Tak sme vás vidieť a potom v pondelok. 

SPEAKER 1: A teraz, Hlboká Myšlienky od Daven Farnham. Hash tabuľky. 

[SMIECH]