[Muusika mängimine] DAVID J Humala: Olgu, tere tulemast tagasi. See on CS50. See on nädala lõpuks seitse. Ja see on lõpuks, et tänavapühkija hunt alates probleemi, neli et sa võiksid meelde tuletada. Pärast taastumas kõik need JPEG personali, sa olid vaidlustanud, kui soovite, pildistada ennast nii palju need inimesed, kui suudad. Meil on terve hulk ettepanekuid Viimase paari nädala jooksul, tõepoolest üsna vähe vahetult enne keskpäeva Täna, millest mõned on need siin püütud siin in-- välja like-- Annenberg Hall tööaega, üks siin Lowell House koos Nick. Siin on Ramon püütud telefon. See oli CS50 lõunasöök. See oli Jason Skyping koos loovam klassivend, kes helistas talle sel viisil. Me ei tea, mis see oli. 

[NAER] 

DAVID J Humala: Aga mis on väärt GB. Siin on Chang, kes sõna otseses mõttes jooksis lavalt vältida pildistatud üks päevas, kuid lõpuks püütud. Siin on Nick. Siin on Nick. Siin on Nick. Ja siin on Alison nähtud väljad. Ja Zamyla isegi leiti kell ballisaal konkurentsi. Nii et me läheme läbi need pildid, nuputada kes esitasid kõige esimesel ja tasu üks vapustav auhinna, kui lubas spec. Ja me ka järelmeetmete kohta ruumi, mis oli seotud. 

Paar announcements-- nii lõuna- on taas sellel reedel kell 13:15. Kui soovite meiega liituda, RSVP sel URL siia. Jason ilmub jälle siin ühest Need osad, paar aastat tagasi, mis juhtus sattuda Halloween. Ja tõepoolest, ta riietunud kõrvits kõnealusel aastal. Kui vaadata käesoleva paragrahvi tema alates 2011. lõik kaheksa, kui teil on uudishimulik, kell CS50.tv, ma arvan See oli aasta, mil tema õhupump töötas. 

Kui seejärel vaadata sarnane lõik 2012. aastal näete seda Jason palju tühjendatakse kuna ülikond enam toiminud, mis on ainult öelda sel reedel, kui soovite meeldib kitsenduse kõrvits koos Daven ja Gabe ja teised, RSVP juhtidele kell cs50.harvard.edu aadress. See tõotab tulla väga lõbus. Daven, me rääkinud, on nikerdatud kõrvitsad kõik oma elu. Gabriel Brasiilia on kunagi nikerdatud kõrvitsa jaoks Halloween. Nii et seal koos nendega, kui ta õpib. 

Seminarid, meanwhile-- nii õpite kiiresti mida meie oodatav lõplik projekt, mis sisuliselt mis taanduvad kavandamisel ja rakendamisel kõige tahes projekt huvi pakkuda sa, kuigi heaks kiitma ja juhiseid oma õpetusega mehe. Lõpupoole semester, tutvustame number Seminaride, mis on vabatahtlik klasside juhitud õpetamise stipendiaatide ja Harvard töötajad, sõbrad kursuse üle campus, erinevatel teemadel, mis on tangentsiaalne Muidugi on aluseks õppekava kuid siiski kohaldatav, lõbus ja erinevate võimalike lõplik projekte. 

Näiteks esimene, kui soovid registreerida, pea et URL seal. Ja see on tootevalik Tänavuse seminari üksi. Aga siis on meil kümneid seminaride aastaid varem, mis kõik on omavahel seotud Seminarid menüü võimalus käigus kodulehel. Nii et kui sa mõtled läheb kaugemale oma mugavuse tsoonist või pealevõtmine mõned uued oskused, Näiteks programmeerimine iPhone rakendusi Swift, uus keel Apple või Objective-C või Android apps või programmi [? kii?] lambid, või mis tahes teemadel siin ja rohkem, sest kontroll välja registreerimise leht. 

Nii me alustasime ja sõlmiti Esmaspäeval vaadates HTTP. Nii kiire refresher-- HTTP, HyperText Transfer Protocol. Aga mida see tegelikult tähendab? Mida see tegelikult tähendab? Kas see käsi? Ma tean, et sa oled lihtsalt kriimustada oma peaga. Kuid sa tahad teha ettepanekuid, mida HTTP on? 

Sihtrühm: Kuidas arvutid suhelda [kuuldamatu]. DAVID J Humala: Ma igatsesin viimane osa. Kuidas arvuteid suhelda with-- 

Sihtrühm: Internet servereid. DAVID J Humala: Good-- Internet serverite ja konkreetselt, veebiserverid. Kuna turult, seal on kamp teenuseid internetis, millest mõned kasutate ilmselt iga päev vahel chat ja sõnumi, vestelda, ja veebi ja e-posti, ja teised sarnased. Ja HTTP on alles protokoll, mis brausereid rääkida suhtlemisel veebiserverite, ja vastupidi. Ja analoog inimese maailm võib olla, Ma laiendada mu kätt raputada mõned teiste inimese ja ta tunnistab, laiendades tema käsi samuti. Nii et see on just see protokoll, komplekt konventsioonidega. 

Ja mis tõepoolest on need konventsioonid? Noh, see lihtsalt taandub Saates sõnumeid edasi-tagasi, nagu me siin on kujutatud. Ja seal on paar võimalust sisse mis saab saata need sõnumid. Ja võib-olla kõige ühine tuntakse saada. Ja me näeme kontrasti sellele enne pikk. 

Aga get taotluse brauseris et server lihtsalt näeb välja selline. See on hunnik teksti, et see paneb sees virtuaalne ümbrikus. On väljaspool ümbrik minna paar tükki üksikasju. Mida on vaja minna ümbrik, niiöelda, selleks, et saada taotluse nagu see minult veebiserver? Jah. 

Sihtrühm: Sinu IP-aadress. 

DAVID J Humala: Minu IP aadress From valdkonnas, nii et rääkida, ja muidugi saaja IP-aadress. Aga kui tegemist on web paketi vajame veidi täpsemalt See ei ole piisav lihtsalt Kirjuta ümbrik serverisse sest see server võib olla kuulates erinevaid Interneti liiklus. Mis siis veel tegema peame Peale saaja IP? Jah? 

Sihtrühm: Kas see TCP? DAVID J Humala: Hea. TCP-- 

Sihtrühm: Aadress. 

DAVID J Humala: Aadress, või sadamast, seda nimetatakse. Sulge, kuid TCP pordi number. Ja seal on hunnik neid. Aga kindlasti kõige tuttav peaks lõpuks 80, mis on vaikimisi ühe kasutatud kodulehekülg liiklust. Ja teine ​​tuttav üks peagi 443 mida kasutatakse turvalise web liiklus, URL, mis algavad https. 

Nii et see on see, mis läheb sees ümbrik. Ja saada / lihtsalt tähendab, anna mulle vaikimisi veebilehele. Anna mulle just raske sõita, et veebiserver. Ja loodetavasti veebis server reageerib, OK ja number 200, mis on vaid konventsioon ütleb jah, kõik on tõesti OK. Siin lehel. Tüüpi veebileht läheb olla teksti, kuid täpsemalt, HTML, mis me parasjagu sukelduda tagasi. Ja dot dot dot lihtsalt vahendeid, siin on HTML. Ja see, kui me kiirenemist lugu täna tegelikult kirjalikult HTML, HyperText Markup Language, mis on keel, milles veebilehti on kirjutatud. See ei ole programmeerimise keel. Ei ole mingit funktsiooni ega silmuseid ega tingimusi. See on märgistuskeel, samuti jälle näeme täna, mis võimaldab määrata kuidas ehitada ja Stilisoida esteetiliselt veebilehele. 

Nii see oli üks ja ainult lehe tõesti vaadeldi, kui lühidalt, esmaspäeval. Ja teate mõne olulisemad omadused. Seal on palju avatud nurgaga sulg ja lähedal nurga külge. Vahel need angled Sulgudes on sõnad. Ja me ei kavatse hakata kutsudes neid sõnu sildid. Nii avatud sulg juht ja suletud sulg juht on avatud ja suletud silte või alguse ja lõpu sildid eestvaates, HTML element, nagu me nimetame seda, mida nimetatakse pea. Ja sama kõnepruuki kehtib keha HTML ja nii edasi. 

Ja mis kena on HTML-- ja tõepoolest jagame kulutada kohutavalt vähe aega peal, sest sa oled enamasti lihtsalt aru saada, milliseid funktsioone see on, kui sa tegelikult on konkreetne probleem et solve-- leiad, et brauser on päris loll. See lihtsalt läheb do-- ole erinevalt computer-- mida sa öelda tahad. Ja kui teil on avatud sulg HTML tipus seal, et sisuliselt tähendab lihtsalt, hei, brauser, siin on veebileht kirjutatud HTML. 

Kui ta näeb avatud sulg pea, see tähendab lihtsalt, hei, brauser, siin on head või tähtsaim osa minu veebilehele. Kui ta näeb suletud sulg pea, see tähendab lihtsalt, hei, Ongi pea. Ooterežiim midagi muud. Ja et midagi on ilmselt saab olema keha. Ja kui sul ei ole tag, nagu sa pead lihtsalt tere, koma maailmas See on lihtsalt saab olema toores tekst lõpuks kuvatakse ekraanile. 

Nüüd märkad liiga taandus siin. Saate ilmselt järeldada, kuidas me stylizing ta. Iga kord, kui ma avan tag nii rääkida, ma taandega. Ja iga kord, kui ma sulen silt, ma taanduse, sarnase sisuga lokkis traksid. Ja pärast seda, ma olen selline kasutades minu otsus. Pange tähele, et ma ei viitsinud pihta Sisesta sees, et pealkiri tag. Miks? Noh, ma lihtsalt otsustasin, et see tundus vähe puhtamaks mulle inimene, lihtsalt ei viitsinud seda tehes. Nii et jällegi, seal on mõned otsus nõuab ainult nagu seal on C või mistahes keeles. 

Aga teate ka seda, et kõnealused kumerus sobiv vaimne mudel, mitte üle keeruliseks. Aga puu, eks? Kui te arvate, web lehekülg, ilmselt kirjutatud niimoodi, nagu oleks kenasti liigestatud niimoodi, saab peaaegu mõtle avatud sulg HTML suletud sulg tag piiritlemise juur sõlme, sugupuu stiili sõlme stiilis puud me vaatasime eelmisel reedel. 

Ja tõepoolest, meil on siin mida me kutsume DOM, D-O-M, dokument objekti mudeli, fancy viis öelda puu, mis kinnitab, et HTML. Ja teate, et HTML on, ütleme, nagu sugupuu, kaks last. Vasakul on peas. Paremal on keha. 

Ja nagu meeletu mõtte liikumine, pea, on muidugi, kui palju lapsi vastavalt sellele struktuur? Nii lihtsalt üks, title-- ja sellepärast on meil nool läheb peast pealkiri. Nii et see on, nagu oleks see isik sugupuu oli ainult üks järglastele. Ja siis pealkiri ise ei öelda, et on laps ka. 

Tuletame meelde, et HTML tuli tere, koma maailma selle all. Ja ma olen lihtsalt joonistatud jooksul ovaalne asemel ristkülik lihtsalt edasi semantiliselt et kuigi see on sõlme puu, niiöelda see on omamoodi täiesti erinev. See ei ole tag. Või õigemini, see ei ole element. See on lihtsalt tekst tipp, kui soovite. Aga need on täiesti suvalise inimese konventsioonidega. See on just minu viis esindavate mida ma agregaadina helistage dokument. 

Ja kui kõrvale, asi on super üleval vasakus nurgas, avatud sulg hüüumärk doc tüüp HTML, see näeb välja nagu tag aga see on loll nurgas juhul, kui mis on just seal, kopeerida ja kleepida näidata brauserid see on HTML versioon 5. Maailma pidevalt muutub, mida esimene rida koodi lehel peaks olema. See tähendab lihtsalt, versioon 5. Nii et see ei ole päris nägema teistega. 

Olgu, nii selle ütles, oled nüüd hindan Selle üsna loll tätoveering keegi sai. 

[NAER] 

DAVID J Humala: Olgu, ja nüüd lähme tegelikult sukelduda arvesse midagi sellega. Sul on tuletada meelde, et viimane aeg Ma avanud CS50 Appliance ja ma tegin midagi nii lihtne avamise gedit. Ja ma salvestatud faili isegi minu desktop-- kuhugi special-- kui hello.html. 

Nii et lubage mul seda teha again-- hello.html Enter. Ja nüüd see fail, ma lähen minna ja korrata, mida me lihtsalt saw-- doc tüüp html Siis ma lähen teha avatud sulg html suletud sulg. Ja siis ma lähen preemptively avada ja sulgeda tag. Miks? Just nii ma ei unusta hiljem. See on lihtsalt hea tava, nagu avamine ja sulgemise looksulg korraga. 

Ja mis siis tuli järgmine? Sa ei mõtle tätoveering. 

Sihtrühm: peas. 

DAVID J Humala: peas. Ja siis siin, ma oli pealkiri, ma arvan. Ja pealkiri oli omavoliliselt, hello, world lähedal pealkiri. Ja siis siin, keha, ning course-- siis me lõpetame body. Ja siis lihtsalt mõnevõrra liigselt, Mul oli sama asi siin. 

Nii et ma väita, et see on veebilehele. See on midagi, nüüd võimalus elada veebis kuigi muidugi, see on sõna otseses mõttes elab minu töölaual kohe. Aga tõesti, kui ma minimeerida gedit, Ma vaatan minu töölaual selle ikoonil. Kuigi see on seade, sa võiksid seda teha Mac OS ilma TextEdit või Windows Notepad isegi. 

Ja kui ma minna ja topeltklõps et isegi, ja select-- noh, olgem ei vali, et kuna Chrome on avamata. Lähme edasi ja avage Chrome. Ja siis teha Command-O avatud Ja navigeerida minu töölaual ja seda faili avada. See, kuidas brauser tõlgendab HTML, ülevalt alla, vasakult paremale. Hei, brauser siin on HTML. Siin on head. Siin on pealkiri. Siin on keha. Ja tõepoolest, see on, kuidas see muudab selle veebilehe. 

Aga teate URL. Ükski võid tõmba selle konkreetse lehel oma sülearvutid just nüüd, isegi sees oma seadme kaudu, et URL, sest file: // näitab, et ta on tegelikult minu failisüsteemi, mu kõvaketas, mitte sinu. Nii et see ei ole nii kasulik. 

Olgem nüüd liigud kasutades tegelikku veebiserver. Ja selgub CS50 Appliance on rohkem kui lihtsalt keskkonnas, kus võite kirjutada C ja kompileerida ja kasutada seda nagu sa oled teinud. Samuti on konfigureeritud töötajate esindamiseks tüüpiline web server, mis on internetis, üks, et võite maksma või üks, mis on ka nn pilve. 

Ja see töötab standard vabavaraline tarkvara, näiteks midagi nimega Apache, mis on võib-olla veel populaarsemaid web server tarkvara maailmas et tuhanded veebisaidid kasutavad täna. Ja see ka on isegi tarkvara nagu MySQL, mis on andmebaasi server et me lõpuks saada, mis on ainult öelda Saan alustada ravivad minu seade nagu küps server et ma ei maksa mujal. See lihtsalt elab oma sülearvuti arengut ja heaolu eesmärgil. 

Nii et lähme edasi ja seda ära. Ma lähen edasi minna ja avada terminali aknas. Ja ma lähen edasi minna ja move-- tegelikult esimene Ma olen läheb navigeerida minu töölaual. Kui ma ls, seal on hello.html. Ja ma lähen minna ja hakata kasutama uus kataloog me oleme ei ole kasutatud enne täna. 

hello.html-- ma lähen liikuda et ../vhosts virtuaalse hosts-- rohkem, et future-- ja seejärel arvesse kataloog nimega localhost, mis on hüüdnime pöörata peaaegu mis tahes arvuti, kas see on Mac, PC, või Linuxi arvuti ja seejärel spetsiifiliselt arvesse kataloog, et me personali juba loodud teile, kui sa alla laadida seadet nimega avalik. Ja nagu nimigi ütleb, midagi Panin selle kausta, teoreetiliselt läheb nüüd avalik, vähemalt inimesed kellel on otsene Seoses minu arvuti. 

Nüüd lubage mul minna ja teha cd Sama kataloog et ma saaks näha, mis on toimub ja tüüp ls. Ja tõepoolest, see on Ainuke asi seal. Väidan, et nüüd, sest ma olen panna see esitada hello.html sees kataloog nimetatakse avaliku sees kataloog nimetatakse localhost sees kataloog nimetatakse vhosts, mis tänu CS50 töötajad on eelnevalt konfigureeritud just oma veebiserver, Nüüd saan loodetavasti teha. 

Ma lähen avada uus sakk. Ja ma lähen ei file: //. Ma lähen, et kasutada tegelikke http / localhost, mis jällegi hüüdnime minu enda server. Ja siis ma lähen, mida faili nimi, lihtsalt et oleks selge? Kus on see lugu ilmselt läheb? hello.html. 

Nii et teiste sõnadega, ma tahan nüüd seda on minu arvuti, minu aparaat, nagu ta on tegelik server. Tema hüüdnimi on localhost. Aga mõtle localhost samasuguste Facebook.com google.com, mis iganes. See on lihtsalt minu koha nimi. Ja siis lõpliku tahan on Juur kõvaketas, niiöelda või root veebiserver, Ergo kaldkriipsuga ja seejärel faili nimi hello.html. 

Lubage mul välja suumida ja vajuta Enter. Ja tõepoolest, nüüd on minu veebilehele. Nii et see on veidi erinevad. Ja see on lihtsalt nii underwhelming. See on vana versioon. Lubage mul kahaneb font tagasi. See on vana. See on uus. Aga mis on põhimõtteliselt juhtub Nüüd on see HTTP kasutatakse. 

Teeme seda veidi selgemaks või kui soovite, veidi keerulisem. Lubage mul minna põhja õigus nurgas minu aparaat. Ja teate, et see kõik aeg, seal on olnud mitmeid. See on unikaalne aadress Teie CS50 Appliance. See on era-aadressi, Nagu võib järeldada 172,16, mis tähendab lihtsalt, ainult sa füüsiliselt pääseb see veebiserver. Kõik on tulemüüri ja kenasti kaitstud ülejäänu maailma, sest see on suunatud. 

Ja nüüd teate küll, kui ma lähen see aadress, mitte minu aparaat, kuid Mac OS-- ma lähen minna tagasi siia. See on minu Mac nüüd. Ja nüüd ma lähen avama Selle versiooni Chrome siin. Ja ma lähen http: //172.16.25 / Ja ma unustan rest-- 133. 

Ma lähen külastama minu Mac et IP aadress /hello.html Enter. Ja nüüd ma näen, minu Mac et minu CS50 Appliance, kes on IP-aadress on see, et number, on tõepoolest käituvad nagu web server internetis. See ei ole kena lihtne mäletan nime nagu Facebook.com, aga see on HTTP ilmselt, kuigi Chrome on selline lihtsustamine maailma meil aga ei näita meile HTTP. Aga see on tõesti just nii. Chrome on lihtsalt säästa mõned klahvivajutused nendel päevadel. Ja see, mida me praegu näeme. 

Nii et kõik on hästi ja hea. Aga see on päris underwhelming lehel. Lubage mul minna ja teha midagi veidi teistsugune nüüd. Nii et lubage mul minna tagasi gedit. Ja selle asemel, hello, maailmas, paneme pildi. Ja ma nõuda before-- lase mul minna minu localhost kataloog avalik. Ja lubage mul minna ja kopeerida terve hunnik faile täna minu Dropbox kaust siin. 

Nüüd, kui ma tüüpi ls, vaata kõiki neid faile et olen jaotatavast Muidugi veebilehel enne täna millest üks on ikka hello.html. Nii et see on üks. Ja meenutada seda rumal üks Eelmise AEG_ cat.jpg. Nii et lubage mul proovida kinnistada cat.jpg sees minu veebilehele. 

Ma lähen edasi minna ja teha cat.jpg salvestada. Lubage mul minna tagasi Chrome. Ja las ma suumida font ja nüüd uuesti laadida. Vabandust, kui ma panen selle? Standby-- mul on veel vana versioon minu töölaua avatud. Nii et lubage mul minna minu vhost, minu localhost, minu avalik ja hello.html. Nüüd lubage mul minna ja öelda cat.jpg korpuse sees kui ma tahan, et see oleks kuvatakse ja uuesti laadida. Muidugi, see ei ole õige. 

Nii et ma pean ütlema brauseri vähe rohkem teadlikult, mida ma tahan seda teha. Lihtsalt kirjutades nimi on ilmselt ei piisa. Nii et tuletada meelde, et seal oli veel tag, pilt, img lühikeseks. See on lihtsalt sellepärast, et inimestel ei meeldi tüüp täis sõnu. Ja siis me saame teha, source = "cat.jpg". 

Ja nüüd ma lähen tegema üks asi erinev siin. Kuigi kõik Meie silte siiani on oli see mõiste start tag ja end tag, et tegelikult ei tee mõistlik pilt, eks? Pilt on kas seal on olemas või mitte. Ja nii inimestel tulnud üles lihtsama konventsioon. Kui teil on silt, et saab nii alustamine ja lõpetamine samal AEG_ see võib olla tühi, nii et speak-- lihtsalt pane kaldkriipsuga sees tag päris lõpus. Nüüd lubage mul minna tagasi oma brauserit. Tulemus Reload Kurat, midagi on valesti. Te olete ilmselt näinud seda aeg-ajalt veebis isegi kui see ei ole sinu süü. See on veebiserver süü. Mida oodid see ei näi? See on katki. See, kui pilt kuulub. Jah? 

Sihtrühm: Aga see ei ole juurdepääs pilt. 

DAVID J Humala: See ei ole juurdepääs pilt. See, või veel hullem, võib-olla ta isegi ei eksisteeri. Vaatame, kas me ei saa diagnoosida seda. Meenuta viimast korda, et kui Kroomitud, et seadme või isegi oma Mac või PC, lähete Arendaja menüü ja minna Developer Tools variant, mis ilmselt olete ei kasutata palju või kunagi varem. Ja kui ma lähen Võrk ja laadige leht uuesti, olgem tegelikult vaadata HTTP nõuab, et tehakse. 

Tundub hello.html on tõesti OK, seega 200. Aga cat.jpg on 403. Nii see ei ole 404. Faili ilmselt olemas. 403 tähendab keelatud. Nii et see on veidi segane. Ma lähen tagasi minu terminali aknas. Lubage mul suumimiseks siin. Ja las ma teen ls. Seal on need samad failid. 

Nüüd lubage mul teha ls-l, mis oled ilmselt kasutada enne vaadata faili suurused äkki või loomisaja. Ja me näeme terve hunnik Valdav teavet. Aga teate mõned detailid. Siin hello.html selles rida siin ja siin cat.jpg. Ja see on lihtsalt seade on kasutajasõbralikud, rõhutades JPEG lillaga niimoodi. Aga mida muud on erinev kõrval faili suurus ja faili nimi? 

Sihtrühm: [kuuldamatu]. DAVID J Humala: Jah, seal on kaks R on siin. Pane tähele, mida hello.html on pooleli. Nii selgub, et nimi Selles kataloogis Avalikkus on oluline. Midagi selle kataloogi on mõeldud avalikkusele. Aga see ei ole piisav lihtsalt tilk faile seal. Teil on vaja ka muuta ¾ faili, muuta lubade Faili ennetavalt ei olema Vaikeseadistusel mis on see, et ainult Saan aru ja kirjutada seda, ma ei ole laeva omanik. Ma tahan kogu maailm kõigil suutma lugeda minu faili, nii rääkida. Loe tähendab lihtsalt seda vaadata. 

Ja tõepoolest, nagu te näete probleemi pani seitse, see on, mida need Ri keskmine. Need kaks Ri keskmine lasta kõik mujal maailmas ka seda lugeda, eriti nüüd, see on selle kataloogi. Nii et lihtsaim viis seda parandada on mine minu kiire ja teha chmod muutusteks režiimi ja tehke + r, kokku, kõik, kõik, pluss r lugemiseks, ja siis cat.jpg Enter. Miski tundub juhtuda, mis Tavaliselt tähendab see hea asi. Nii ls-l again-- nüüd Vaatame cat.jpg. Ja see luba tundub, et on muutunud. Nagu kõrvale, kui teete viga ja sa näiteks just your-- Ma ei sead ühendit väljakirjutada essee avalikkusele kättesaadav õnnetus, saate teha vastupidine, chmod-r. Kuigi ausalt öeldes, ei tohiks olema avalik kataloog anyway, kui see on probleem. 

Nüüd lähme tagasi minu brauser ja uuesti laadida. Ja ma lähen kliki vähe Ghostbusters sümbol selge, et osa ekraan nii näeme uusi taotlusi. Ja tõepoolest, siin on Grump Kass oli enne. Kuid mis veel tähtsam, tehniliselt on number 200, mis tähendab, me saime ta OK. Olgu, nii et kõik on hästi ja hea. Aga me ei tee parim veebilehed, ega me siis proovige liiga raske teha uhkemad veebilehed täna. Kuid olgem vähemalt midagi teha super tuttav enne korisev välja mõned teised sildid. Nii et arvan, et ma lihtsalt ei taha kass siin. Oletame, et ma tegelikult tahan seda kass linkida midagi. 

Ma võiks näiteks midagi sellist teha. ankur href eest hüper viide equals-- ja olgem lihtsalt midagi teha nagu www.google.com lähedal tsiteerin lähedal sulg. Ja nüüd otsida kassid. Sulge ankrusildi. Nii et see on ainult üks sort on täiesti uus detail. Tag on muidugi erinevad. See on nimi, ankur href või hüper viitega. 

Kuid mis veel tähtsam, seal on see süntaktiline funktsioon siin. See on see, mida me alustada kutsudes ei tag, aga atribuut. Ja omadus on midagi, muudab käitumist tag. Ja seda omadust, href, vahendid muuta käitumist selle ankru nii et kui see on klõpsatud, see läheb see URL siia. Ja muidugi, et URL on Google. 

Vahepeal mis see on Kirjuta siia läheb? Noh, see saab olema mida inimene tegelikult näeb kui allajoonitud link, nii lihtne see ongi. Nii et proovime seda. Lubage mul salvestada. Ma olen ikka veel hello.html. Aga versioonid online, näete tegelik faili nimesid me ettevalmistatud. Lubage mul minna ja uuesti laadida. Ja nüüd on see väga underwhelming lehekülg ikka. Aga kui ma hover üle there-- ja see on natuke väike, Aga-- näete alt vasakus nurgas oma ekraan, see on tõepoolest kavatse google.com. Ja kui ma vajutan, et see sebima mind viis tegeliku Google. 

Aga teate siin võimalus kasutamine, just nagu kõrvale. Ja me tuleme tagasi teiste julgeolekuküsimused enne pikk. Sest seal on see kahestumine vahel, kuhu minna ja mida sa ütled, mida võiks teha midagi see-- http://www.google.com. OK, ja nüüd, kui ma uuesti laadida Pärast salvestamist, et lehel tundub, et ma lähen minema Google. Aga seal ei ole põhjus, miks ma pean minema Google, eks? Ma võiks tegelikult minna midagi badguy.com, laadige leht siin. Ja teate, see ikka näeb välja nagu Google. Ja ainult siis, kui ma olen terav piisavalt tiirutama üle siin ma näen on see isegi läheb minna teise kohta. 

Nii et kui te olete kunagi saanud talle, eriti üks Paypal või näiliselt Paypal palub teil sisse logida oma kontole, seda miks sa ei tohi kunagi kunagi kliki linke e-kirju, ausalt, kõik seosed kirju. Kui sa tead, teil on tegelik raha Paypal või Bank Ameerikas või Fidelity või veebilehel, käsitsi kirjuta see. Sest vaadake, kui lihtne on trikk kellegi esitades mida näeb välja nagu link. Aga tegelikult võiks minna absoluutselt kõikjal. 

Ja seal on palju suurem ohte kui see. Tegelikult on see natuke puutuja nüüd, kuid üks parim, mida ma kunagi näinud mis on vahepeal suletud on keegi viinud inimesed mina-- nii et see võiks öelda, kliki siia, et sisse logida konto, pangakonto. Ja see oli Bank of the West. 

Nii et kui keegi ostis selle. Ja see on natuke lihtsam vaadata see mono vahedega font suumitud aastal 30-foot projektor. Aga kui see on väike font Kirjuta, mis te saate, see näeb välja nagu bankofthewest.com, ei bankofthevvest.com, mis keegi oli maksnud 10 $ osta. Ja siis see viis nad samaväärne halbu veebilehel. 

Ja näete too-- tegelikult me ​​saame teha see-- kui ma lähen tegelik veebilehel, bankofthewest.com jällegi tagasikutsumise viimast korda et kui see on nende veebilehel ja sa oled uudishimulik, kuidas see töötab, saate kindlasti minna Chrome'i arendaja tööriistu. Ja näed kõiki HTML kenasti vormindatud seal. 

Aga rohkem punkti, sa cam-- olgem sulgeda see-- võite minna Vaata Arendaja View Source. Miks ma ei kopeeri kõik see Ja siis ma ei lähe mu väike gedit aknas siin ja teha oma veebilehel. Salvesta see sisse hello.html. Ja ilmselt see läheb katki, sest see ei ole nii lihtne tavaliselt. Aga nüüd, kui ma uuesti minu lehel minu CS50 Appliance ja vajuta reload, OK, mõned asjad murdis. Aga ma olen üsna lähedal, mille minu pangandus veebilehel, eks? Kõik see HTML-- 

[NAER] 

DAVID J Humala: -I ei actually-- ja sa tean, et keegi seal, kes tegelikult kliki neid linke ka. Nii selgelt, mõned asjad murdis. Aga see läheb juhtima meid arutelu asjatult kohe, missugust CSS, kaskaadlaadistikke, on ja kuidas te tegelikult alla laadida teiste HTML faile ja JPEG-failid GIF failid Veebilehe võivad olla kasutades. Aga kõik see on teostatav. Aga see tõesti taandub Nende väga lihtne heuristika. 

Nüüd lähme lihtsalt sirvida Paar teisi näiteid HTML lihtsalt anda teile tunne mida veel saab teha. Näiteks on see list.html. Oletame, et ma tahtsin teha veebilehe nimekirja majade quad. Ma võiks kasutada ul silt järjestamata nimekirja ja siis loendiüksusele laps ja siis kinnitada, over-- või nimekirjast rather-- majade küsimus. 

Ja kui ma avan selle üles, teeme seda. Lähme mitte hello.html, vaid list.html. Kurat. Kuidas seda parandada? See on sama teema nagu varem, eks? Nii et lubage mul teha chmod-- oops-- chmod a + r list.html. Ja nüüd, kui ma lähen tagasi oma brauseris ja klõpsa Laadi uuesti, siin see on. Nii et kui sa oled kunagi tahtnud teha täpploendit, saate seda teha. Kui sa tahad olla super fancy ja teha järjestuses, ei ebakorrapärane nimekirja muuta neid, et ol, laadige leht uuesti ja nüüd brauser number seda sinu jaoks. 

Mida muud me teha saame? Noh, paar others-- kui sul on pikad lõiked text-- Näiteks mõned Ladina teksti nagu see-- ja sa tahad seda eraldi lõiked, avatud p tihe p lõikes tag. Ja seda ikka ja jälle. Ja kui ma nüüd avada seda faili paragraphs.html, noh, see muutub tüütu. Nüüd lähme lihtsalt minema tagasi oma kiire, chmod a + r r täht .html-- toreda metamärkidega nii rääkida. Tuleb määrata kõiki need probleemid minu jaoks. Olgem laadida. Seal on kolm lõiget. 

Ja nüüd lähme edasi ning avada veel ühe. Kuidas lauale? Märkad tabeli välimus natuke keerulisemaks. Aga see on sama idea-- avatud sildi, avatud sildi Avatud, avatud, avatud, lähedane sildi, avatud tag. Ja need juhtuvad seisma tabel, mille piir on ilmselt saab olema paksus 1-- iganes et means-- tabeli rida tabelis andmete, mis tähendab rakk. Ja kui ma lähen tagasi oma brauseris siin ja minna table.html, näete midagi meeldib see, kole. Aga me jõuame punkti, kus me saame tegelikult Et asi ilusam kui see. 

Nii et lubage mul ette näha nüüd. Seal kobarad rohkem silte. Ja HTML on imeline kiirenemist sest ausalt öeldes on kõik, mida vaja teha, on vaadata olemasolevaid veebilehti kellega te olete juba tuttav. Ja sa oled nagu, oh, see on, kuidas nad tegid seda esteetiliselt. 

Või saate otsida mis tahes online- ressurss, kuidas HTML toimib, ja sa näed, et seal on kogu sõnavara teiste siltidega. Aga lihtne vaimne mudel Ainult, et peaaegu iga tag avate on suletavad, see tõesti ei piisa, et õpetada ennast HTML pärast aru Nende põhilised ideed silte ning atribuutide ja trimmisuse et oleme rääkinud, sulgemise midagi, et me võiks avada nii et me ei segadusse brauserit. Nii et olgem nüüd seda, et huvitavam tasandil minnes tegelik. Ja lähme minu Mac siin, et google.com. Ja nüüd notice-- teeme seda. Ma gong minna Seaded Otsi Seaded. Ma tahan, et lülitada see tüütu instant Tulemused asi, kus ta kohe hakkab vastates oma kirjutades. Teeme ära vanemad koolis nii me tegelikult näha, mis toimub. 

Ma lähen, et päästa oma Google seadeid siin. Ja nüüd notice-- ma lähen otsi midagi kassidele. Ja see on ikka teeme auto täielik siin, kuid põhinevad asjad inimesed on kirjutatud ka varem. Aga teate, mis juhtub. 

URL hetkel on see lihtsalt google.com. Ja tehniliselt on see kaldkriips. Google lihtsalt säästa tegelane ja ei näita meile, et. Nad näitavad meile https, lihtsalt olema super rahustav, et me oleme on turvaline ja krüpteeritud lehel. 

Nii et lubage mul minna ja otsida kassid. Nüüd sain tõesti Valdav kiiresti. Vaata pikkus selle URL. Aga selgub, et kõige selle kraami URL on tegelikult üsna mõttetu. Ma lähen alustada kustutamist asju, mida ma ei mõista. Ma näen kassid. Ma saan aru, kassid. Ma ei tea, miks kassid on seal uuesti. Ma tõesti ei tea mida see jama on. Nii et ma lihtsalt hoida rõhutades ja kustutada kraami et ma ei saa aru, destilleerimise URL just seda. 

Nüüd lubage mul saada sisestage uuesti. Tundub, et Google töötab. Nii et mingil põhjusel nad lisades palju asju, et nende URL vaikimisi. Aga see ei ole tingimata vajalik. Mis on tore see on? Noh, lubage mul minna ja avada Chrome'i inspektor. Seal on väike hiir otsetee ta. 

Mine Network sakk. Ja nüüd lubage mul uuesti see leht veel kord. Ja ma hoian Shift. Nagu kõrvale, brauserid kipuvad vahemälu või salvestada teavet ainult efektiivsuse huvides. Aga tavaliselt, hoides Shift ja pealelaadimisel sunnib kõik alustada otsast peale. Ja see, mida ma tahan teha siin. 

Ja teate kõik need rida, et just ilmunud. Selgub, et mis tahes web lehekülg, seal võib olla ainult üks fail involved-- hello.html-- või seal võiks olla 52, nagu käesoleval juhul. Kui ma külastada google.com, ilmselt minu brauser avalöögi 52 eraldi HTTP päringuid. Miks see nii on? 

Noh, vaata, mis on sees Selle veebilehe up top. Seal ei ole ainult teksti, kuid seal on tegelik pilte koertest üle paremale. Seal on värvikas logo siin vasakul. Seal on kõik need ikoonid võtta mikrofoni ja nii edasi. Seal on palju tükki, hoone plokid, nullist tükki, kui soovite, sellele veebilehele. Ja mida brauser läheb peale saada kõige esimene fail, mis on see rida siin, see on sisuliselt iterating üle HTML top alla, vasakult paremale, otsin asju nagu pildi siltide või muude silte mis viitavad teistele failidele ja kui ta näeb neid läheb ja tõmbab need HTTP, elujõuline kogu ümbrik metafoor, ja siis kuvab need sobiv asukoht veebilehel. 

Aga teate siin, kui ma keskenduda esimese visata, otsing kassid, märkate, et tõepoolest see on HTTP 1.1. Ja kahjuks Google Chrome kohe versioonis 39 on selline dumbing asju ette ja ei näita meie tegelikku pealkirjad. Aga mis oli tegelikult saatnud on taotluse mitte kärpida, kuid / otsing? q = kassidele. 

Nüüd, miks on see oluline? Noh, ma lähen järeldavad sellest, et kui te Google toetab päringuid selle vormi, siis miks ma ei rakendada oma otsingut mootor CS50, vaid lihtsalt ees lõpuks, just graafilise kasutajaliidese. Ja me tellivad kolp, tegelik otsingutulemuste Google. 

Niisiis, kuidas ma seda teen? Noh, lubage mul minna gedit siin. Ja lubage mul minna ja avada up, oletame, uus fail. Ja ma lähen salvestada ajutiselt nagu search-0.html. Ja siis lõpuks, siis me kiiresti ootama üks I ettevalmistatud. 

Ja ma lähen kiiresti kokku klopsima doc tüüp html avatud sulg html lähedal sulg html. Siis ma lähen tegema head lähedal pea avatud pealkiri CS50 Otsing asemel Google otsing. Siin ma lähen on keha, siin lähedal keha. Ja nüüd ma pean CS50 otsing. Ja tegelikult, olgem ehitada see järk-järgult. Ma lähen edasi minna ja sulgege see ja tegelikult pane see minu avalik kataloog. Nii et anna mulle üks hetk. search-0.html-- ma lähen ajaliselt nimetame seda search.html. Ma lähen chmod see + r search.html. Ja nüüd ma lähen seda avada. Olgu, nii et oli kiire. Aga eesmärk lihtsalt oli et meid punktini võttes selle teksti fail nimega search.html. Nii et ei ole palju vaadata veel. Tõepoolest, kui ma lähen oma brauseri ja minna search.html, see on kõik see on. Aga tead mis? Ma võin olla natuke Kasvataja. Ma lugesin raamatut, mis seal on Pealkirja sildi h1. Ja ma lähen edasi minna ja kasutada, et avatud h1 ja tihe h1. Värskenda lehel. Ja nüüd see on suurem ja julgem, ei ole kõik nii huvitav, kuid vähemalt on struktuurilt põnevamaks. Aga nüüd lubage mul tutvustada teine ​​silt. Selgub, seal on vormi tag. Ja las ma sulgeda, et tag. Ja selgub, et tema sisend tag et omab atribuuti nimega tüüp, mis on andmete tüüpi väljale kui soovite. Ja läheb tüübiks on tekst. Ja selle raha läheb olema CS50 otsing. Sulge tag. Ja seal saab olema mingit mõistet avamise ja sulgemise eraldi sildid. 

Lubage mul minna tagasi siia ja näha, mis toimub, uuesti laadida. Kuidas huvitav. Tundub, et see tekstiväljale. Ja tegelikult, ma ei tahtnud panna raha sinna veel. Lubage mul minna siia tagasi ja tegelikult saada lahti seda väärtust hoida lihtsa. Selle asemel, et raha, mida ma tahtsin anda see asi oli nimi. Ja ma ei tea, mis see on, nii et ma tulen tagasi selle. 

Aga alla selle, ma tahan teha input type = submit. Ja see väärtus on CS50 otsing. Ja me näeme, miks ma kolis väärtus sellele. Kui ma uuesti, ma ilmselt nüüd alustab oma otsingut mootor, super kole, kuigi ausalt öeldes, see on mitte kaugele visata, mida Google'i vaikimisi lehe välja näeb. 

Kui ma lähen siin nüüd, ma ei kirjuta kassid ja loodetavasti valige Otsi. Aga ma ei ole see veel aga, sest ma ei ole rakendatud, Ilmselt andmebaasi. Ma ei ole roomas veebist otsingutulemustes. Nii et mul on vaja tellida, et Google'ile. Niisiis, kuidas ma seda teen? 

Noh, esiteks ma on vaja lisada ja tegevus omistada mu vorm tag et on http://www.google.com/search. Ja ma tean, et ainult omamast järeldada, vaadates tähelepanelikult oma URL. Ja nüüd võta vist. Mida peaks antud välja arvatavasti seda nimetatakse, lähtudes sellest, kuhu me tulime alates varem? 

Sihtrühm:? Q. 

DAVID J Humala:? Q. Ja me tegelikult ei vaja küsimus märgi selgub, aga q on tõepoolest see, q päringule arvatavasti Vaikimisi lihtsalt sellepärast, et see on mida Larry ja Sergey tulid aastat tagasi. Nüüd lubage mul laadige leht uuesti. See ei näe nii erinevad. Aga nüüd vaadata, mis juhtub. 

Kui ma kirjuta kasside ja kliki CS50 Otsi ja lase minna, teate ma saan pühitakse ära tegelik Google. Nüüd Google on vähe tüütu, et nad on lisades lisaparameetrist, kui soovite, et URL. Ongi kõik juhtub automaatselt Google'i poolelt. 

Oluline osa on see, et ma ilmselt et on tekkinud selle taotluse siin. Ja tõepoolest, see, mis juhtub. Kui teil on HTML, et näeb välja selline, see on omamoodi veebiarendajad märke ütlen, edasi minna ja luua vormi et kui see on esitatud, see läheb minema see URL. Ja kui URL on andnud väärtused asjad q, ei lähe just see URL. Tegelikult, jätkake küsimusega märk ja siis q = kassidele. Lisage parameeter, HTTP parameeter niimoodi. 

Ja lihtsalt olla super täpne, mis kuramuse järeldada siin-- aga ma tulen veel explicit-- on et meetod soovin kasutada on saada, selle asemel, et midagi post, mis me lõpuks näha. Lühidalt öeldes lihtsalt arusaam HTML ja kasutades mõned üsna lihtne silte saame hakata looma meie ees lõppkasutaja liides otsing mootori taga. 

Aga see on muidugi üsna kole. Nii et lubage mul tegelikult avada veidi parem versioon. See on üks I valmistati edasi, et on mõned kommentaarid. Aga näete, et ma päris palju taasloodi see. Nii et see on juba kättesaadavad Internetis. Ja ma juhtumisi preemptively minge https lihtsalt hoida lihtsa. 

Ja nüüd lähme avada Järgmise iteratsiooni see. Kas versioon 0 asemel 1. Mis hüppab välja ennast kergelt erinevad selles näites? 

Sihtrühm: [kuuldamatu]. 

Jah, seal on see tekst align center. See on natuke imelik siin. Aga see on tõesti uus. Ja võib-olla arvata, mis juhtuma hakkab. Kui ma lähen oma brauseri nüüd ja külastada search-1.html, see on peaaegu sama asi. Aga see on samm lähemale on natuke rohkem päris. See on ikka kole, kuid ilusam selles vähemalt kõik on nüüd keskel. 

Nii selgub, et see, mida ma kasutan on teises keeles kokku kutsutud CSS, kaskaadlaadistikke. Ja CSS, ausalt öeldes on selline on minu isiklik arvamus, atrociously mõeldud keelt. On väga tüütu meeles pidada kõiki erinevaid detaile. Aga see on see, mida stylizes kogu maailma veebis täna. Ma solvunud keegi. Hea küll. Nii et lähme tagasi siia ja vaata kuidas me tegelikult kasutab seda. Ja selgub, vähemalt see on tegelikult päris lihtne keel. See on lihtsalt põhiväärtus paari, omadused ja väärtusi, omadusi ja väärtusi. Tõepoolest, siin on üks sellise vara ja raha. 

Lihtsalt abil stiil atribuut mu keha tag ja annab talle väärtuse Sõna koolon ja teise sõna, või vara ja väärtus, Ma ei mõjuta esteetika veebilehe, ei tingimata struktuuri veel kuid esteetika ta. Ja just Google'i abil ümber, ma mõistan et CSS, kaskaadlaadistikke, toetab vara kutsus text-align, mille väärtus on tuleb vasakule, paremale või keskele, näiteks. 

Nüüd, kui ma uuesti laadida see leht, mida ma ei saa oli keskendunud lehel aga ikka päris kole. Lähme edasi ja avage kuni 2. versiooni Otsi. Ja nüüd teate ma olen teinud natuke rohkem. Pange tähele, et siin sees, pea tag, ei saa olla rohkem kui pealkiri. Tegelikult, seal on stiil tag. Ja see on koht, kus see lihtsalt muutub väike räpane nägemine CSS mõnikord. 

Pange tähele, et ma tundub, et on midagi mis struktuurilt tundub väga erinevad. Aga siin on nimi tag tahan stiliseeritud. Siin on meie vanad sõbrad lokkis traksid ja suletud lokkis traksidega. Ja siis siin on see, et vara ja selle väärtus. 

Kui ma laadida see fail, search2.html, lõpptulemus on sama. Aga see on samm parema disainiga. Autor faktooring välja see CSS, ma olen ei segata seda oma HTML. Ja tõepoolest, kui me näeme, suutsin taaskasutada neid omadusi ja väärtusi. Kui ma tahtsin teha kobarad osad mu veebilehe keskne, Ma ei pea sisestama style = text-align keskus kogu koht. Ma võin panna ühes kohas võibolla meeldib up ülaosas. 

Kuid isegi see ei ole parim disain. Tegelikult on üks neist asjadest, saate teada, kui sa kulutad rohkem aega koos veebi programmeerimine, et mida rohkem saad Modularize asju ja tegur asjad nagu .h failid olgem tegur kraami välja, meeldib helpers.c olgem tegur asjad paari psets tagasi. Samamoodi võiks me tahad saavutada. 

Nii teate versioon kolm search.html ma olen puhastada juht lehele ja lihtsalt panna selles, link tag, mis vastuolus nimi, ei anna teile hüperlingi. See ühendab teise faili teel href mille väärtus sel juhul on otsing-3.css Nii et ma mõistan, me ei kavatse kiiresti. Aga kõik, mida ma teen on selline liikuvaid asju ümber. Lubage mul avatud search-3.css. Siin see on, midagi tõesti ta. Ma lihtsalt kopeerida ja kleepida see uude esitada meelega me tegureid kraami välja teiste faile enne. Ja result-- täiesti underwhelming-- saab olema täpselt sama. Aga me liigume toward-- ei, see ei ole. Oh, ma tean, miks. 

Nii et see tundub olevat viga. Ja see on mõnes mõttes. Kuid lubage mul avada minu Network sakk. Lubage mul laadige leht uuesti. Ah, miks CSS kohaldamata jätmise? Noh, CSS faili, samamoodi on olla maailma loetav, nii rääkida. Ja seda ka praegu keelatud. Nii et lubage mul teha chmod a + r star dot CSS-- whoops-- me oleme dot CSS on lihtsalt faililaiend CSS faile. Nüüd lubage mul minna tagasi minu brauser ja uuesti laadida. OK, natuke parem. 

Nüüd lubage mul teha üks viimane asi. In search-4.html. Mul on versioon, et ma lihtsalt mõtlesin oli viis jahedamaks, kuigi nii rohkem keeruline. Vaatame tulemus esimesena. Sulge see annab meile rohkem ruumi. Muuda seda otsida-4, Enter. 

Ja nüüd hunnik asju on katki. Ma lähen tagasi minu kataloog siin. Ja nüüd ma olen lihtsalt kavatse teha chmod kohta + r on file-- sest ma tean, et see exists-- nimetatakse logo.gif, mis on pilt. Ja nüüd uuesti. Ja wow-- nii nüüd olen päris lähedal, öeldes, meeldima 1999. aasta versioon Google, ja ausalt, 2014 versioon Google, õige? 

Nii et see on nüüd oma veebilehel, lõpuks, kui ma otsin kassi. Ja tõepoolest on. Aga mida ma teha teistmoodi selles versioonis 4? Nii et me ei ela liiga palju siin. Näete seda probleemi pani seitse lõpuks. Aga teate ma tegin mõned asjad. 

I tutvustas div tag, mis on jaotus, sarnase sisuga lõik tag. Aga jaotus on nagu, siin ristkülikukujulise nähtamatu piirkonna ekraani. Anname talle kordumatu tunnus, jalus, vaid nii et me võime rääkida see meie HTML mujal. Siin on veel üks div lehel kelle ID saab olema sisu. See on lehe sisu. Ja siin on päises lehel. 

Teisisõnu, ma olen sisuliselt HTML olen vaimselt vaatavad veebilehe kolme komponendi kaudu siin selle nähtamatu ristkülik, sisu keskel ja siis jalus allapoole, isegi kuigi me ei näe neid asju. Sest ma tahan minu juht leht siin või .css faili Võin seda süntaksit. 

Päise ei ole tag. See ID nii selgub välja, et seda tehes #header, Nüüd saan taotleda ühe või mitme omadused päises. Ma võin teha sama sisu, sama sisu siin. 

Nii näiteks jalus, teade kõik need omadused, ma olen lisades. Ja ma tean, et nad on olemas lihtsalt lugemine üles dokumentatsiooni CSS. Fondi suurus saab olema smaller-- nii et mõned fondi suhteline suurus. Kaal saab olema julge. Margin-- mitu pikslit umbes it-- on 20 pikslit. Ja see saab olema keskne. 

Aga praegu, leht näeb välja selline. Kui ma ei ole rahul minu koopia seal, Ma võiks teha midagi punast värvi. Ja siis ma võib päästa see, reload, ja nüüd ma olen stiliseeritud jalus. Nii et see on lihtsalt vihjab võimu mida saate teha veebilehe seisu muutmiseks. 

Ja isegi lahedam kui see, kui sa tahad tuhnima tegelike veebilehed, sa ei saa jäädavalt muuta. Aga kui ma avada Chrome'i inspektor uuesti ja ma lähen mitte vasakul pool siin, mis näitab Facebooki HTML, kuid näitab paremal pool kõik oma CSS, saate kas ja asju muuta lennult. Nii et lubage mul minna ja seda teha. 

Lubage mul minna ja kontroll siis see juhuslik sõna siin, kirjutada, ja klõpsake nuppu Kontrolli Element. Chrome väga mugavalt hüppab H1 tag et Facebook kasutab. Ja teate siin Facebook on omamoodi laisalt kõva kodeeritud kirja suurust kui vara siin. 

Nii lahe asi, kuigi on et kui ma tegelikult minna siin ja öelda, oh, Facebook, mulle ei meeldi, et 64 pikslit, saame muuta Facebook. Muidugi, me ainult selle muutmist mulle isiklikult hetkel. Aga see on lihtsalt üks vahendiks meie tööriistakomplekt mis toimub, mis võimaldab meil näpistama ja aru saada ja ka diagnoosida küsimusi oma veebilehekülgedele. Ja me võiksime samamoodi minna üle siin, mis on sama asi. Kui sa tõesti tahad saada väljamõeldud, ma Tähendab, nüüd saab tõesti muteeruda lehekülg ja teha hullud asjad. 

Miks see kõik kasulik? Noh, lõpuks, me oleme kavatse soovite olla võimalik luua veebilehti, mis on ajendatud meie endi tagasi otsad, mitte ainult Google ja allhanke kolp seal. Me tegelikult tahavad väärtus, näiteks Meie otsingumootori tegevus atribuut minna mitte keegi teine, kuid midagi search.php, kus search.php on meie enda server, mitte kellegi teise. 

Ja nii, et sinna jõuda, me tegelikult on vaja kehtestada uus keel. Nii et me oleme juba uurinud ühte uus keelt siin või kaks tõesti, HTML ja CSS. Aga nad tegelikult on lihtsalt struktuuri- ja esteetiline keeles. Nad ei programmeerimine keelte per se. Ja see on umbes sama palju ametlikke ajal, kui me kulutame nende kohta. Kuna hakkame nüüd üleminek PHP. 

Nii et PHP on tegelik programmeerimiskeelt. See on skript keel selles mõttes, et see on pidi olema kergem kaal kui midagi C. Ja see on tõlgendanud keeles mis tähendab, et see ei ole koostatud. Nii et lühidalt öeldes, mida see tähendas kui me kasutasime keelt nagu c ja me pidime kompileerida? Mis see tähendab, et koostama C lähtekoodi? Sihtrühm: [kuuldamatu]. DAVID J Humala: Ütle seda uuesti? Sihtrühm: [kuuldamatu]. DAVID J Humala: Perfect. Selgub see binaarne. Selgub see nullidega ja need tegelikest inglise moodi lähtekoodi. Ja siis me saame tegelikult käivitada need nullidega ja need lastes neid läbi CPU topeltklõpsuga ikooni või töötab käsk. 

PHP ja Python ja Ruby ja Perl ja JavaScript ja kobarad muu keeli tõlgendada keeles, mis tähendab, sa ei koguma neid. Pigem sa toita neid sisendina programmi nimega tõlk. Ja et tõlk mis keegi kirjutas, loeb oma lähtekoodi ülalt alla, vasakult paremale ja siis tõlgendab need liinid ja teeb seda, mida sa ütled. 

Nii et kui sul tekib rida, mis ütleb, print, see ei pruugi teisendada print vastavaks nullid ja ones. See lihtsalt on see tõlk nagu suur kui tingimus, mis ütleb: kui programmeerija õpe printida, siis tehke järgmist. Seega tõlgendab seda lihtsalt poolt loogikat läbi, mida sa räägid seda teha. 

Ja PHP on üks nendest keeltest. Ja PHP aastat tagasi oli kavandatud just veebi programmeerimine. Ja see oli algselt väga lohakas räpane keel. Ja tõepoolest, seal on suur summa halb PHP kood seal. Aga keel ise on küpsenud aastate jooksul nii palju, et nüüd on see tegelikult imeline järgmine samm pedagoogiliselt C, sest see on nii darned tuttavad kõik sa oled näinud viimase paari nädala jooksul. 

Üks esialgsest vahest me näha kas on olemas mingit põhiülesanne enam. Kui hakkate kirjalikult koodi, see on lihtsalt hakka täide ükskõik mida, nagu me näeme ühel hetkel. Vahepeal siin on, mida muutuja näeb PHP. See on veidi erinev, vaid vaevu. 

PHP, ei ole tugev kirjutades. Seal on nädal kirjutama, mis tähendab lihtsalt seal on andmetüübid nagu stringid ja numbreid ja muid asju. Aga sa ei viitsinud täpsustades mida nad on enam. PHP ise selle peale teile. Dollari märk on lihtsalt otsuse et PHP inimesed teinud aastaid tagasi nii, et iga muutuja PHP lihtsalt algab dollari märk. See on tegelikult omamoodi kasulik, ta hüppab välja ennast natuke rohkem. 

Kuid pärast seda, selle Tingimuseks on, PHP. Mis on erinev võrreldes C? Komm question-- midagi, mis on tegelikult väga kena. Loogiline väljendeid PHP-- sama. Loogiline väljendeid ja vastu või lülitid, silmad, silmad, loops-- OK, see üks on erinev. 

Nii selgub seal paar muud funktsioonid PHP. Üks neist on tegelikult selles, mis on imeliselt mugav. Kui $ numbrid on massiiv, et olete deklareeritud varem programmi teil on see väljamõeldud iga konstrukt selle asemel, et teeme kõik, et tüütu I võrdub 0, I alla selle, [? Ma ++?] iga numbrite arvu, kus iga Nende dollari märk väärtused on lihtsalt varieeruv ja viimane sa ei mõtle nagu I. Sa võid nimetada seda kõike, mida sa tahad. Ma kutsusin ta number. See läheb itereerima üle massiivi nimetatakse numbrid. Ja iga iteratsiooni, see on läheb automaatselt uuendada Teile dollari märk number muutuv, nii et sa pidevalt juurdepääs muutuja soovid ilma teha mis tahes nurksulg märke või indekseerimise massiivi. 

Peale selle, meil on isegi asjad massiivid, mis näevad välja peaaegu sama, välja arvatud see on väga tavaline, kui jagame vaata nii PHP ja JavaScript eelnevalt initsialiseerida massiivi kasutades nurksulgudes. C kasutab lokkis traksid. Nii et see on veidi erinev, kuigi me tegelikult ei kasuta, et trikk palju. 

Kuid veelgi võimsamalt, PHP on assotsiatiivne massiivid mis on fancy viis öelda hash tabeleid. Tegelikult, kui sa tahad kuulutada hash tabeli PHP erinevalt C-, kui palju rida koodi kulus kuni tegelikult ellu hash tabeli C? Või kui palju ridu koodi on see võttes rakendama hash tabeli C? Nii et see on ilmselt palju, eks? See on mõnikümmend, võib-olla 100 või 200. See on nontrivial. Või on see umbes olla, kui saate kohe näha, nontrivial rakendada hash tabelit [Kuuldamatu] ja ka proovida. Aga PHP-- ja ausalt öeldes, ma ilmselt ei tohiks seda sulle öelda kuni Monday-- PHP, kui soovite tabeli teha. See on hash table-- nii ühe rida koodi. Ning 

Palju keeli teha. Nautige pset viis. Nii palju keeli teha. Nad annavad teile need veevõtu et teised inimesed, teised programmeerijad loonud teid nii, et te ei saa seista oma õlgadele ja hakata kasutama ideid, mis on super kaalukad, nagu hash tabelid ja puud ning püüab. Aga sa ei pea rakendada neid asju ise. 

Ja nii lõpuks, mida me ei kavatse kasutada PHP jaoks potentsiaalselt kirjalikult programmid selle nn käsurealt. Me võiksime uuesti iga programmi oleme kirjutanud selle semestri seni välja arvatud ehk Breakout mis kasutab SPL, mis on spetsiifiline C hetkel. Kuid iga muu probleem määrata, kindlasti Mario ja Caesar ja Vigenere ja [? Crack?] Ja edasi oleme võib uuesti rakendada PHP, ja ilmselt vähe kergemini. 

Aga mida me lõpuks läheb kasutada PHP on veebi programmeerimine. Ja me ei kavatse kehtestada järgmise nädal vaimne mudel, paradigma nimetatakse MVC mudel vaade kontroller, mis siis, kui sa oled teinud programmeerimine enne Python või Ruby või mujal, siis võiksid teada selle meeskond Rails ja Django jms. Aga kui sa oled uus ka see, näete et see on tegelikult väga loomulik pikendamine teguriteks ja omamoodi disain kood, mis me oleme teinud C. Me läheme nüüd kehtivad mõned neist lugu PHP nii et lõpuks oleme rakendades oma veebilehed. Ja kui sa oled omamoodi mesmerized või üllatunud et me ei kavatse teha kõik nii kiiresti, mõistma, et peaaegu iga semester, ligi 90% õpilased CS50, sealhulgas kes ei ole kunagi programmeeritud enne, lõpuks teha lõplik projekte, mis põhinevad veebi programmeerimine. Ja nii sa näed, et naaseb on kõrge lähinädalatel. Nii et me näeme siis esmaspäeval. 

SPEAKER 1: Ja nüüd, Deep Mõtted, mida Daven Farnham. Hash tabelites. 

[NAER]