[Predvajanje glasbe] DAVID J Malan: Dobro, dobrodošel nazaj. To je CS50. To je konec sedem tedna. In to je konec tega odstranjevalca hunt od problema nastaviti štiri da boste morda spomni. Po okrevanju vse te datoteke JPEG osebja, ste bili sporni, če želite, da se fotografira s toliko od teh ljudi, kot lahko. Imamo cel kup vlog v zadnjih nekaj tednih, res, kar nekaj tik pred poldnevom danes, od katerih so nekateri tistih tod ujete tukaj in-- izgleda like-- Annenberg Dvorana ob uradnih urah, ena tukaj V Lowell House z Nickom. Tukaj je pa Ramon ujeli na telefonu. To je bilo na CS50 kosilo. To je bil Jason Skyping z bolj ustvarjalni sošolec, ki mu je poklical na ta način. Ne vemo, kaj je to bilo. 

[Smeh] 

DAVID J Malan: A da je vredno GB. Tukaj je Chang, ki dobesedno pobegnila oder da ne bi fotografirali eno dan, vendar je bil na koncu ujeli. Tukaj je Nick. Tukaj je Nick. Tukaj je Nick. In tukaj je Alison, ki jih določijo področjih. In Zamyla še bilo ugotovljeno, na tekmovanju dvorano. Torej bomo šli skozi Te fotografije, ugotovimo, ki je predložil najbolj prej, in nagrada eno čudovito nagrado, kot je obljubljali v spec. In bomo tudi nadaljnje ukrepanje glede Prostor, ki je bil vpleten. 

Nekaj ​​announcements-- tako kosilo je, še enkrat, ta petek ob 13:15. Če želite, da se nam pridružite, RSVP na tem URL tukaj. Jason se pojavi spet tukaj od enega odsekov nekaj let nazaj, kar se je zgodilo pade na noč čarovnic. In res je oblečen kot buče, da posamezno leto. Če gledaš to poglavje njegovega od 2.011 oddelku osem, če ste radovedni, na CS50.tv, mislim, To je bilo leto, v katerem njegova zračna črpalka delala. 

Če ste, potem gledal Podobno oddelek v letu 2012, boste videli to Jason precej zmanjšano, saj obleka ni več deloval, ki je samo reči ta petek, če bi rad bi si buče z Daven in Gabe in drugi, RSVP glavami na cs50.harvard.edu naslov. Obljublja, da bo zelo zabavno. Daven, smo povedali, je vklesan Buče vse življenje. Gabriel iz Brazilije še nikoli izrezljane buče za noč čarovnic. Zato se tam z njimi, kot se uči. 

Seminarji, meanwhile-- tako da se bomo kmalu naučili o tem, kaj so naša pričakovanja so za končni projekt, ki je v bistvu se omejijo na oblikovanju in izvajanju Najbolj kakršen koli projekt v interesu si, čeprav na podlagi odobritve in smernice iz vašega asistent. Proti koncu semester, uvajamo številne seminarjev, ki so fakultativni pouk jih učnih štipendistov in Harvardu pod vodstvom Osebje, prijatelji seveda po vsej campus, o različnih temah, ki so tangencialna Seveda je osnovni učni načrt vendar je kljub temu primerno, zabavno in razlikuje za možne končne projekte. 

Na primer, prvič, če želite, registrirati, glavo, da ta URL tam. In to je postava za Samo letos je seminarji. Vendar zavedaš imamo na desetine seminarji iz preteklih let, ki so vse so povezani v meniju seminarji Možnost spletni strani seveda je. Torej, če razmišljate o presegajo vašega območja udobja ali pobral nekaj novih znanj in spretnosti, na primer, programiranje iPhone apps z Swift, novega jezika Apple ali Objective-C ali Android aplikacije ali programiranje [? nakažete?] žarnice, ali kateri koli od teme tu in še več, zaradi prijava iz strani za registracijo. 

Tako smo začeli in zaključila Ponedeljek z gledaš HTTP. Tako hitro refresher-- HTTP, HyperText Transfer Protocol. Toda kaj to v resnici pomeni? Kaj to v resnici pomeni? Je, da z roko? Vem, da ste samo praskanje svojo glavo. Vendar želite, da predlaga kaj je HTTP? 

Publika: Kako računalniki komunicirati z [neslišno]. DAVID J Malan: Zamudil sem zadnji del. Kako računalniki komunicirajo with-- 

OBČINSTVO: Internet strežniki. DAVID J Malan: Good-- z internetom strežniki, in posebej, spletni strežniki. Zaradi odpoklica, tam je kup storitve na internetu, od katerih so nekatere Uporabljate verjetno vsak dan med klepetom in sporočila, klepet in spletne in e-pošta, in podobno. In HTTP je le protokol, spletni brskalniki govorimo pri komuniciranju z spletnih strežnikov, in obratno. In Analog Človeški svet je lahko, Iztegnil sem roko, da se pretrese nekaj drugi človek je in on ali ona priznava, z razširitvijo njegovo roko kot dobro. Torej, to je samo protokol, niz konvencij. 

In kaj v resnici so ti dogovori? No, to ravno ne začne vreti navzdol pošiljanje sporočil in nazaj, kot smo je prikazano tukaj. In tam je nekaj načinov, na ki jih lahko ta sporočila. In kar je morda najbolj Skupno je znan kot get. In bomo videli, kontrast to kmalu. 

Vendar zahteva get iz brskalnika s strežnikom samo izgleda takole. To je kup besedila, ki jih postavlja znotraj virtualnega ovoja. Na zunanji strani tega ovoja iti par kosov podrobnosti. Kaj je potrebno, da gredo na ovojnica, tako rekoč, da bi dobili zahtevo, kot je to od mene na spletni strežnik? Ja. 

OBČINSTVO: Vaš IP naslov. 

DAVID J Malan: Moj IP naslov V polje, tako rekoč, in seveda, IP naslov prejemnika. Toda v primeru spletnega paketa, potrebujemo malo več podrobnosti To ni dovolj, samo da bi pošlji kuverto s strežnikom ker bi to lahko strežnik poslušanje za različne vrste internetnega prometa. Torej, kaj še potrebujemo poleg prejemnika OP? Ja? 

OBČINSTVO: Ali je TCP? DAVID J Malan: Dobro. TCP-- 

OBČINSTVO: Naslov. 

DAVID J Malan: Naslov, ali pristanišče, kot je pozval. Blizu, toda številka vrat TCP. In tam je kup teh. Vendar zagotovo najbolj seznanjeni naj bi sčasoma 80, ki je privzeto ena se uporablja za spletni promet. In še ena pozna Kmalu bo ena 443, ki se uporablja za varni splet prometa, URL-ji, ki se začnejo s https. 

Torej, to je, kaj se dogaja znotraj tega okvira. In dobili / samo pomeni, daje me spletna stran privzeta. Daj mi koren težko voziti na tej spletni strežnik. In upajmo, web server se bo odzvala z, OK in številka 200, ki je prav Konvencija rekel, ja, vse je res OK. Tukaj je stran. Vrsta spletne strani, se bo je besedilo, ampak bolj specifično, HTML, ki smo na tem, da se potopite nazaj v. In dot dot dot samo sredstvo, tukaj je HTML. In to je, če smo poberem zgodbo danes dejansko pisanje HTML, HyperText Markup Language, ki je jezik, v katerem Spletne strani so napisane. To ni programski jezik. Tukaj ni funkcije ali zank ali pogojev. To je označevalni jezik, pa je spet videti danes ki vam omogoča, da določite kako strukturirati in Stilizovati estetsko spletno stran. 

Torej, to je bila ena in samo stran res pogledal, če na kratko, v ponedeljek. In opazili nekaj glavne značilnosti poslovanja. Tam je veliko odprtih kotno nosilec in blizu nagnjen nosilec. Med tistimi, kotno nosilci so besede. In bomo začeli kliče te besede oznake. Torej odprt oklepaj glava in zaprti oklepaj glava so odprti in zaprti oznake, ali začetka in konca oznake zaporedju, HTML elementa, saj ga bomo klic, ki se imenuje glavo. In uporablja enak žargon organu v HTML in tako naprej. 

In tisto, kar je lepo, je HTML-- in seveda, da bomo preživeti strašno malo časa na njem, saj boste večinoma le ugotovimo, kaj jo ima je, ko vas dejansko imajo konkretnega problema da solve-- boste ugotovili, da Brskalnik je precej neumno. To je le, da bo do-- niso v nasprotju computer-- tisto, kar je povedal, da storiti. In tako, ko imate odprto Nosilec HTML na samem vrhu tam, da v bistvu pomeni samo, hej, brskalnik, tukaj prihaja spletna stran napisana v HTML. 

Ko pa vidi odprto konzolo glavo, da samo pomeni, hej, brskalnik, tukaj prihaja glavo, ali vrhunskih del moje spletne strani. Ko vidi zaprto nosilec glavo, da samo pomeni, hej, to je to za glavo. Pripravljenosti za nekaj drugega. In to je nekaj drugega, je očitno bo telo. In ko nimate oznako, kot imate le Pozdravljeni, vejicami, svet, to je samo bo surovo besedilo, ki na koncu se prikaže na zaslonu. 

Zdaj, boste opazili tudi zareza tukaj. Si verjetno lahko sklepamo, kako smo ga stylizing. Vsakič, ko odprem oznako, tako rekoč, sem zamakniti. In vsakič, ko zaprem tag, I un-alinea, pisane v duhu zavitimi oklepaji. In po tem, da sem nekako uporabe mojo presojo. Obvestilo, da nisem moti tepe Vnesite znotraj tega naslova tag. Zakaj? No, sem se odločil, da je pogledal malo čistilo za mano, človek, samo ne trudim s tem. Torej še enkrat, obstaja nekaj sodba zahteva samo kakršna je v C ali kateremkoli jeziku. 

Toda opazil tudi, da je zareza dovzetni za duševne modelu da ne bo nad njim zaplete. Ampak drevo, kajne? Če menite, da je splet Stran, očitno pisno kot je ta, kot lepo zamaknjen na ta način, lahko skoraj razmišljati odprte konzole HTML zaprti oklepaj tag je razmejitev koren vozlišče, družinsko drevo slog vozlišče v stilu dreves smo pogledal na zadnji petek. 

In res, imamo na tukaj kar pokličem DOM, D-O-M, dokument objektni model, fancy način rekel Drevo, ki pomeni, da je HTML. In opazili, da je HTML, bomo rekli, kot družinsko drevo, dva otroka. Na levi je glava. Na desni je telo. 

In prav tako kot nespametnega misli vadbo, glava, seveda, ima, koliko otrok Glede na to strukturo? Torej samo eden, title-- in zato imamo Puščica bo od glave do naslova. Torej, to je, kot da bi te osebe v družinsko drevo je imela samo eno potomcev. In potem sam naslov lahko je dejal, da imajo otroka preveč. 

Spomnimo se, da je HTML Pozdravljeni, vejica, svet pod njo. In sem ga preprosto sestaviti v ovalne namesto pravokotnika pravkar za pomensko sporočilo, da čeprav to je vozlišče v drevesu, tako rekoč, to je nekako bistveno drugačna. To ni tag. Ali bolj pravilno, to ni element. To je samo besedilo vozlišče, če hočete. Vendar so v celoti samovoljnih človeških konvencij. To je šele zdaj moj način predstavlja, kaj bom kot agregat pokličite dokument. 

In kot igralcev, stvar na super top corner levo roko, odprti oklepaj klicaj doc tipa HTML, to izgleda kot oznako, ampak to je primer neumen kotiček, kjer da je samo tam, kopirali in prilepili navesti brskalnikov To je različica HTML 5. Svet se spreminja, kaj se Prva vrstica kode na strani, mora biti. To samo pomeni, različica 5. Tako da ne povsem izgledajo kot drugi. 

Vse je v redu, tako da s tem je rekel, da boste zdaj cenili to dokaj neumen tattoo nekdo. 

[Smeh] 

DAVID J Malan: Dobro, in zdaj pa je dejansko dive v delaš nekaj s tem. Boste opozarjajo, da je zadnji čas Sem odprla CS50 Appliance in sem naredil nekaj tako enostavno, kot odpiranje gedit. In sem shranil datoteko tudi na moj desktop-- nikjer special-- kot hello.html. 

Torej, kaj naj storim, da again-- hello.html Enter. In zdaj v tej datoteki, bom iti naprej in ponoviti, kar smo pravkar saw-- doc tipa html Potem bom naredi odprti oklepaj html zaprt nosilec. In potem bom preemptively Odpiranje in zapiranje oznako. Zakaj? Samo, da mi ne pozabite kasneje. To je samo dobra praksa, kot odpiranja in zapiranje zavitimi oklepaji naenkrat. 

In kaj potem je prišel zraven? Si lahko zamislite tatoo. 

OBČINSTVO: glava. 

DAVID J Malan: glava. In potem je tukaj, jaz imel naslov, mislim. In naslov je samovoljno, Hello, world blizu naslov. In potem sem dol, telo, od course-- potem zaprite telesne oznako. In potem samo nekoliko redundantly, Sem imel isto stvar tukaj. 

Zato trdim, da je ta spletna stran. To je nekaj, kar lahko sedaj v živo na spletu, čeprav seveda, to je dobesedno živi na mojem namizju zdaj. Ampak res, če sem zmanjšati gedit, Bom videl na mojem namizju ikono. Čeprav je ta aparat, bi lahko to storite na Mac OS brez TextEdit ali Windows Beležnica s celo. 

In če grem naprej in dvojni klik da tudi, in select-- No, Ne izberite, da zato, ker Chrome se ne odpirajo. Pojdimo naprej in odprite Chrome. In naredite Command-O za odprto In pojdite na namizje in odprite datoteko. To je, kako brskalnik interpretira HTML, od zgoraj navzdol, od leve proti desni. Hej, tukaj je brskalnik HTML. Tukaj je glava. Tukaj je naslov. Tu je telo. In res, to je, kako da postane to spletno stran. 

Ampak obvestilo URL. Nihče od vas lahko dvigni to specifično stran od vaših prenosnih računalnikov, prav zdaj, celo znotraj vašega aparat preko tega URL-ja, ker datoteke: // kaže, da je dejansko na moji datotečnem sistemu, mojega trdega diska, ne tvoja. Tako da to ni vse, kar koristno. 

Poglejmo zdaj premik v smeri uporabo dejanske spletnega strežnika. In se izkaže, da CS50 Appliance je več kot le okolju, kjer je lahko pišete C kodo in pripravijo in prost dostop, kot ste delali. Ugotovljeno je bilo tudi konfiguriran z osebje, da predstavlja tipičen spletu strežnik, ki je na internetu, tisti, ki boste morda plačali za ali tista, ki je v tako imenovanem oblaka. 

In to je tekmovanje v teku Standard brezplačno open source programska oprema, na primer, nekaj imenovana Apache, ki je morda še vedno najbolj priljubljen spletni strežniške programske opreme na svetu da se na tisoče spletnih strani uporabljajo danes. In ima tudi še programske opreme, kot so MySQL, ki je podatkovni strežnik da bomo na koncu dobili, ki je samo reči Jaz se lahko začne zdravljenje moj aparat kot popolne strežniku da ne bom plačal drugje. Samo živi na svojem prenosniku za razvoj in udobje namene. 

Torej, gremo naprej in izkoristiti to. Bom, da gredo naprej in odpreti terminalsko okno. In bom, da gredo naprej in move-- pravzaprav, najprej sem dogaja se pomaknite na mojem namizju. Če naredim ls, tam je hello.html. In sem šel naprej in začnite uporabljati nov imenik smo jih ne uporablja pred današnjim dnem. 

hello.html-- bom, da se premaknete da ../vhosts za virtualno hosts-- več o tem v future-- in nato v imeniku, imenovanem localhost, kar je vzdevek dati skoraj vsak računalnik, pa naj gre za Mac, PC, ali Linux računalnik, nato pa posebej v imeniku, da smo, Osebje že ustvarili za vas, ko ste prenesli napravo, imenovano javno. In kot že ime pove, kaj Sem dal v to mapo, v teoriji, se bo zdaj javne, vsaj ljudem ki imajo neposreden Povezava na moj računalnik. 

Torej, zdaj pa grem naprej in naredite cd v ta isti imenik tako da vidim, kaj je dogaja in ls tipa. In res, da je Edina stvar tam. Trdim, da je zdaj, ker sem dal to vložiti hello.html znotraj imenik imenovano javno notranjost imenik imenuje localhost znotraj imenik imenovane vhosts, ki hvala za osebje CS50 ki je bil predhodno nastavljen tako, da je koren vašega spletnega strežnika, Zdaj lahko upamo to storiti. 

Bom odprla nov zavihek. In sem šel, da ne file: //. Grem uporabiti dejanski http / localhost, ki še enkrat, je vzdevek za moj lasten strežnik. In potem bom šel s tem, kar ime datoteke, tako da bo jasno? Kadar je ta zgodba verjetno dogaja? hello.html. 

Torej, z drugimi besedami, želim, da zdaj to je moja lastna računalnik, moja naprava, kot da je dejanski strežnik. Njen vzdevek je localhost. Ampak mislim localhost podobna Facebook.com google.com, karkoli. To je samo moje pravo ime. In potem končno želim v koren trdem disku, tako rekoč, ali koren spletni strežnik, ergo poševnico in nato ime datoteke hello.html. 

Dovolite mi, pomanjšanje in pritisnite tipko Enter. In res, da je zdaj moja spletna stran. Tako da je nekoliko drugačen. In to je samo kot underwhelming. To je stara različica. Dovolite mi, da skrči pisavo nazaj. To je stara. To je nova. Ampak, kaj se v bistvu dogaja Zdaj je, da se HTTP uporablja. 

Naj bo to malo bolj jasno, ali če hočete, malo bolj zapletena. Naj grem do spodaj desno kotu mojega aparata. In opazili, da se vse to Tokrat pa je bilo število. To je edinstven naslov vašega CS50 Appliance. To je zasebni naslov, kot je razvidna iz 172,16, ki samo pomeni samo, da fizično lahko dostop do tega spletnega strežnika. Vse je firewalled in lepo zaščitena od ostalega svet zaradi tega naslavljanje. 

In zdaj opazil, čeprav, če sem šel v ta naslov, ne na mojem aparatu, ampak v Mac OS-- bom iti nazaj tja. To je moj Mac zdaj. In zdaj bom odprla ta različica Chroma tukaj. In sem šel na http: //172.16.25 / In sem pozabil rest-- 133. 

Torej grem na obisk iz mojega Mac da IP naslov /hello.html Enter. In zdaj vidim iz mojega Mac da moj CS50 Appliance, ki je IP naslov, ki Številka je res obnaša kot spletni strežnik na spletu. To ni lepo, enostavno zapomniti imena kot Facebook.com, vendar pa je z uporabo HTTP očitno, čeprav Chrome je vrsta poenostavitev svet za nas, ne pa da nam kaže HTTP. Ampak to je res točno to. Chrome je samo varčevanje nekaj keystrokes teh dneh. In to je tisto, kar smo zdaj videli. 

Tako, da je vse lepo in prav. Ampak to je precej underwhelming stran. Dovolite mi, da gredo v in narediti nekaj malo drugačen zdaj. Torej, naj grem nazaj v gedit. In namesto da bi zdravo, svet, kaj je dal sliko. In jaz trdil od before-- pustite me v mojem localhost imenika javnosti. In mi gremo naprej in kopiranje cel kup datotek, od danes iz moje Dropbox mape v tukaj. 

Zdaj, če sem tip ls, poglej na vseh teh datotek da sem ga razdelijo Spletna stran je seveda vnaprej danes, ena, ki je še vedno hello.html. Tako da je to ena. In opozarjajo na to neumno eno od zadnjega time-- cat.jpg. Zato mi dovolite, poskusite, da bi vgradili cat.jpg znotraj moje spletne strani. 

Bom, da gredo naprej in ne cat.jpg, shranite. Naj grem nazaj na Chrome. In mi povečavo pisave in zdaj osvežite. Ups, kjer sem dal to? Standby-- sem še vedno stara Različica iz mojega namizja odprt. Torej, naj grem v mojo vhost, my localhost, moj javni in hello.html. Torej, zdaj pa grem naprej in pravijo cat.jpg notranjosti telesa kjer želim, da bi bilo prikaže in osvežite. Seveda ta ni pravilna. 

Tako da moram povedati, da brskalnik malo bolj premišljeno, kar želim storiti. Preprosto vtipkate ime očitno ne zadostuje. Tako opozarjajo, da je bil drugi tag, image, img na kratko. To je samo zato, ker so ljudje Ne maram tipa polne besede. In potem lahko naredimo vir = "cat.jpg". 

In zdaj bom naredil ena stvar drugačna tukaj. Čeprav vse naši oznake imajo doslej imel ta pojem začetek tag in konec tag, da ne res, da Občutek za sliko, kajne? Slika je bodisi obstaja ali ne obstaja. In tako so prišli so ljudje z enostavnejšo konvencije. Ko imate tablico, da lahko tako začeti in končati na isti time-- je lahko prazna, tako da le speak-- postaviti poševnico v notranjosti značke na samem koncu. Zdaj pa grem nazaj v mojem brskalniku. Hit Reload Prekleto, kaj je narobe. Verjetno ste že videli ta občasno na spletu, tudi če je ni tvoja krivda. To je napaka web strežnika. Kaj Ode to lahko pomenilo? To je pokvarjen. To je, kjer je slika pripada. Ja? 

OBČINSTVO: Ampak to ne imajo dostop do slike. 

DAVID J Malan: To ne imajo dostop do slike. To, ali še huje, morda sploh ne obstaja. Poglejmo, če ne moremo diagnosticirati, da. Spomnimo, od zadnjič, da če v Chromu v napravi, ali celo na vašem Mac ali PC, greš v meni za razvijalce in pojdite na Orodja za razvijalce opcija, ki verjetno ste ne uporabljajo veliko ali kdaj. In če grem Network in ponovno naložite stran, kaj je dejansko videti na HTTP zahteva, da so v teku. 

Izgleda, da je hello.html res OK, torej 200. Vendar cat.jpg je 403. Tako da to ni 404. Datoteka verjetno obstaja. 403 pomeni prepovedano. Tako da je to malo zmedeno. Jaz bom šel nazaj na moj terminala okno. Dovolite mi, da povečate tukaj. In mi naredil ls. Tam te iste datoteke. 

Zdaj pa mi naredil ls-l, ki ste verjetno uporablja pred pogledati datoteko Velikosti morda ali žige. In vidimo cel kup ogromno informacij. Vendar pa opazili nekaj podrobnosti. Tukaj je hello.html v tem veslati tukaj in tukaj je cat.jpg. In to je samo aparat pa uporabniku prijazen s poudarjanjem JPEG je v vijolični, kot je ta. Ampak kaj je drugače zraven velikost datoteke in ime datoteke? 

OBČINSTVO: [neslišno]. DAVID Malan J: Ja, tam je dva R je tukaj. Opažati hello.html se je dogajalo. Tako se izkaže, da ime ta imenik javnost je pomembno. Kaj v tem imeniku je mišljeno, da bo javno. Ampak to ni dovolj, samo da spustite datoteke tam. Prav tako je treba spremeniti Način datotek, spreminjanje dovoljenj Datoteka proaktivno ne je privzeta nastavitev, ki je, da bi le lahko preberete in napisati, da sem lastnik. Hočem ves svet vsakogar do lahko prebrali mojo kartoteko, tako rekoč. Preberite samo pomeni, da si jo ogledate. 

In res, kot boste videli v problemu nastavite sedem, to je tisto, srednja teh romov. Sredina teh dveh R je pustil vse drugje na svetu lahko preberete tudi, zlasti sedaj, to je v tem imeniku. Torej najpreprostejši način za odpravo tega je, da pojdi na moj poziv in ne chmod za spremembe Način in naredite + R, v celoti, vsi, vsi, plus r za branje, in nato cat.jpg Enter. Nič ne zdi, da se zgodi, kar ponavadi pomeni nekaj dobrega. Torej ls-l again-- zdaj oglejmo cat.jpg. In to dovoljenje Zdi se, da so se spremenile. Kot prahi, če bi napaka in si, na primer, pravkar your-- ne know-- esej dostopni javnosti po nesreči, lahko storite nasprotno, chmod a-r. Čeprav odkrito povedano, ne bi smeli biti v javni imenik vseeno, če je to problem. 

Torej, zdaj gremo nazaj moj brskalnik in osveži. In bom, da kliknete malo Ghostbusters Simbol za brisanje tisti del zaslon tako da bomo lahko videli nove zahteve. In res, tu je Grump Cat od prej. Toda še bolj pomembno, tehnično, obstaja Številka 200, ki pomeni, da imamo v redu. Vse je v redu, tako da je vse lepo in prav. Vendar mi ne bi Najboljši spletnih strani, niti ne bomo poskušali pretežko bi fanciest spletnih strani danes. Vendar pa vsaj nekaj narediti Pred rožljanje super pozna off nekaj drugih oznak. Torej domnevam, da ne samo želim mačko tukaj. Recimo, pravzaprav hočem to cat povezavo do nečesa. 

Sem lahko, na primer, narediti kaj takega. za sidro href za hiper reference equals-- in kaj je samo nekaj kot www.google.com blizu citiram tesno nosilec. In zdaj iščejo mačke. Zapri sidro tag. Torej, to ima samo eno vrsto v temelju nov podatek. Oznaka je seveda drugačna. To je ime za sidro href ali hiper reference. 

Vendar je še pomembneje, tam je to skladenjsko funkcijo tukaj. To je tisto, kar bomo začeli kliče Ne tag, vendar atribut. In atribut je nekaj, modificira obnašanje etiketo. In ta atribut, href, sredstva spremeniti obnašanje tega sidra tako da, ko je to kliknil, gre na ta URL tukaj. In seveda, da URL je Google. 

Medtem, kaj je to besedilo tukaj bo? No, to se dogaja, da se kaj človek dejansko vidi kot podčrtano povezave, tako enostavno, kot da. Torej poskusimo to. Dovolite mi, da jo shranite. Še vedno sem v hello.html. Toda v različicah spletnih, boste videli, dejanska imena datotek bomo vnaprej pripravljenih. Dovolite mi, da gredo naprej in osvežite. In zdaj je zelo underwhelming stran vedno. Ampak, če sem hover nad there-- in to je malo majhen, ampak-- si lahko ogledate na dnu levem kotu zaslona, to je v resnici dogaja, da google.com. In če sem kliknite, da se bo ta stepemo mi pot do dejanske Google. 

Ampak obvestilo, tu priložnost za izkoriščanje, tako kot stran. In se bomo vrnili na drugo Vprašanja varnosti pred dolgo. Zato, ker je ta dihotomija med, kam greš in kaj pravite, ki jo lahko naredite nekaj podobnega this-- http://www.google.com. OK, zdaj pa, če sem osvežite Po shranjevanju to stran, izgleda, da bom šel na Google. Vendar ni razloga, da sem morali iti na Google, kajne? Jaz bi dejansko šel za nekaj podobnega badguy.com, osvežite stran tukaj. In obvestilo, da še vedno izgleda kot Google. In le če sem oster Dovolj, da veje nad tukaj storiti vidim, da je celo dogaja, da pojdi na drugo mesto. 

Torej, če ste kdaj gotten email, še posebej, eden od Paypal, ali Predvsem iz Paypala vas prosim, da se prijavite na svoj račun, to Zato bi smeli nikoli kdaj klikajo na povezave v e-pošto, odkrito povedano, vse povezave v e-pošto. Če veste, da imate dejansko Denar na Paypal ali banke Amerike ali Fidelity ali katerokoli Spletna stran, ročno vnesite v. Ker je videti, kako enostavno je, da trik nekoga v predstavitvi kaj Izgleda povezavo. Ampak to dejansko lahko iti absolutno nikamor. 

In tam je veliko večja grožnje, kot je ta. V bistvu, to je malo dne tangenta zdaj, ampak ena najboljših, ki sem jih kdaj videla ki je bil zato ustavljen, je nekdo vodil ljudi to-- tako da to bi lahko rekli, Kliknite tukaj, da se prijavite v svoj račun, bančni račun. In to je bila Bank of West. 

Torej, kdo je to kupil. In to je malo lažje videti je v pisavi mono razporejene povečani na na 30-foot projektorjem. Toda, ko je majhna pisava e-poštni naslov, ki ste prejemali, to izgleda bankofthewest.com, ne bankofthevvest.com, nekdo, ki je plačal 10 evrov kupiti. In potem je ta jih je pripeljala do ekvivalent nekaj slabih strani. 

In videli boste, too-- pravzaprav ne moremo storiti this-- če grem na sami strani, bankofthewest.com, še enkrat, odpoklic od zadnjega obiska da, če je to njihova spletna stran in ste radovedni, kako deluje, lahko zagotovo iti Orodja za razvijalce Chromu. In si lahko ogledate vse HTML je lepo oblikovana. 

Temveč bolj do točke, ste cam-- dajmo zapreti this-- lahko greš na View Developer View Source. Zakaj ne samo kopirati vse to In potem sem Lahko greš v mojo malo okno gedit tu in da bi svoj lasten spletni strani. Shrani to v hello.html. In verjetno, da bo to prekinil, ker to ni tako enostavno ponavadi. Ampak zdaj, če sem osvežite svojo stran na moje CS50 Appliance in hit reload, OK, nekaj stvari zlomil. Ampak jaz sem zelo blizu, da imajo moje bančne spletne strani, kajne? Vse to HTML-- 

[Smeh] 

DAVID J Malan: --I ni actually-- in si vem, da je nekdo tam zunaj, ki bi dejansko kliknite te povezave tudi. Torej je jasno, nekatere stvari zlomil. Ampak to se dogaja, da vodijo nam v razpravo, nepotrebnem zdaj, o tem, kaj CSS, kaskadnih slogov, so, in kako ti dejansko prenos drugih datotek HTML in JPEG datoteke GIF datoteke, da Spletna stran se lahko uporablja. Ampak vse to je accomplishable. Ampak res izvira na te zelo preproste tolči. 

Torej, zdaj naj samo površno preletite Nekaj ​​drugih primerov HTML samo da vam občutek kaj še lahko storite. Na primer, to je list.html. Recimo, da sem želel, da bi spletno stran s seznamom hiš v quad. Jaz lahko uporabite ul oznako za Neurejen seznam in nato element seznama otrok nato pa ponovitev over-- ali seznam, rather-- hiše v vprašanju. 

In če sem to odprla, naredimo to. Pojdimo, da ne hello.html, ampak list.html. Prekleto. Kako naj to popravim? To je isto vprašanje kot prej, kajne? Torej, kaj naj storim chmod-- oops-- chmod + r list.html. In zdaj, če grem nazaj v mojem brskalniku in kliknite Reload, tam je. Torej, če ste kdaj želeli, da bi označen seznam, lahko to storite. Če želite biti super fancy in da urejen seznam, ne Neurejen seznam, spremeniti tiste, ol, osvežite stran, in Zdaj bo brskalnik številka za vas. 

Kaj še lahko storimo? No, nekaj others-- če imaš dolge odstavke text-- na primer, nekatere Latinsko besedilo kot this-- in si ga želijo v ločenih točkah, odprt p, blizu p za odstavkom oznako. In to znova in znova. In če sem zdaj odprla to datoteko, paragraphs.html, no, to postaja nadležno. Zdaj pa pojdi nazaj v moje poziv, chmod a + r r zvezdo .html-- lepo wild card tako rekoč. To bi bilo treba določiti vse ti problemi za mano. Oglejmo osvežite. Tam je tri odstavke. 

In zdaj gremo naprej in odprla eno drugo. Kaj pa mizo? Opazili boste, namizne videz malo bolj zapletena. Ampak to je isto idea-- odprti tag, odprti tag, open, open, open, close tag, tag odprta. In to se zgodi, da stoji miza, katere meja je očitno bo debelina 1-- karkoli da means-- vrstica tabele, tabela Podatki, ki pomeni celico. In če se vrnem k mojim brskalnikom tukaj in pojdite na table.html, si lahko ogledate nekaj kot je ta, grd. Ampak bomo prišli do točke kjer bomo lahko dejansko postavil lepši od tega. 

Zato mi dovolite, določajo, za zdaj. Tam je šopki za več oznak. In HTML je čudovito, da poberem ker, odkrito povedano, vse, kar morate storiti, je pogled na obstoječih spletnih straneh s katerimi ste seznanjeni. In ste kot, oh, to je, kako so to storili estetsko. 

Ali si lahko pogledate vsako spletu vir, kako HTML deluje, in videli boste, da obstaja Celoten besednjak drugih oznak. Ampak s preprostim duševno modelu samo, da je skoraj vsaka tag odprete je treba zapreti, je res ne zadostuje, da samega sebe naučiti HTML po razumem te osnovne ideje oznak in atributi in dobro formed da smo se pogovarjali o tem, zapiranje karkoli, da bi se nam odpre tako da se ne mešajo brskalnik. Torej, kaj je sedaj sprejeti, da je to bolj zanimivo ravni ki ga bo dejansko. In pojdimo na moj Mac Tukaj, na google.com. In zdaj notice-- naredimo to. Jaz sem gong iti Nastavitve, Nastavitve iskanja. Želim, da izključite to siten trenutek Rezultati stvar, kjer je takoj začne odgovor na vaše tipkanje. Naredimo to starejšo šolo, tako smo dejansko videli, kaj se dogaja. 

Tako da bom rešiti moj Google nastavitve tukaj. In zdaj notice-- jaz grem na poiskati nekaj podobnega mačke. In to še vedno počne avto popolna tod temveč temelji na stvari ljudje so se vnesli v preteklosti. Ampak obvestilo, kaj se bo zgodilo. 

V URL v trenutku je to, samo google.com. In tehnično, to je poševnica. Google je samo varčevanje znak in ne nas, ki prikazuje. So nam kaže https, samo da je super prepričala, da smo na varnem ali šifrirano stran. 

Zato naj gredo naprej in iskanje za mačke. Zdaj je to res dobil velika hitro. Poglej dolžini ta URL. Vendar se je izkazalo, da je večina teh stvari V URL-ju je pravzaprav precej neuporabna. Jaz bom za začetek brisanje stvari, ki jih ne razumem. Vidim mačke. Razumem mačke. Ne vem, zakaj so mačke spet tam. Res ne vem, kaj je to nesmisel je. Tako da sem le, da bo naprej poudarjanje in brisanje stvari da ne razumem, destilacijo URL v samo to. 

Zdaj pa mi se enkrat začne. Izgleda, da Google še vedno deluje. Torej, iz neznanega razloga, oni dodajanje Veliko stvari za privzeto svojega URL. Vendar pa to ni nujno potrebno. Torej, kaj je lepo, o tem? No, naj gredo naprej in odpirajo inšpektor Chrome. Tam je malo bližnjica miška za to. 

Pojdite na jeziček Network. In zdaj naj mi osvežite ta stran še enkrat. In držim Shift. Naj omenim, da brskalniki ponavadi predpomnilnik ali shranite informacije samo zavoljo učinkovitost je. Ampak ponavadi, držite Shift in prekladanja bo prisilila vse začeti znova od začetka. In to je tisto, kar želim storiti tukaj. 

In opazil, vsi ti vrstice, ki so pravkar pojavil. Izkazalo se je, da je v danem spletu stran, lahko pride samo ena datoteka involved-- hello.html-- ali obstaja morda 52, kot v tem primeru. Ko sem obiskal google.com, očitno je, da moj brskalnik začenja 52 ločenih zahteve HTTP. Zakaj je tako? 

No, poglej, kaj je notri ta spletna stran, do vrha. Tam ni le besedilo, vendar pa dejanske slike mačk več kot v desno. Tam je barvita logo tu gor na levi strani. Tam je vse od teh ikon za mikrofon in tako naprej. Obstaja veliko kosov, ki gradi bloki, scratch kosov, če hočete, na tej spletni strani. In kaj brskalnik je delal na dobili zelo prvo datoteko, ki je ta vrstica tod je v bistvu ponavljanjem preko HTML vrh navzdol, levo in desno, ki išče stvari, kot so slikovne oznake ali druge oznake da se omenjajo druge datoteke in ko jih vidi, gre in jih puščati preko HTTP, uspešna celota envelope metafora, in jih nato prikaže v primerno mesto v spletni strani. 

Toda opazil sem, če sem se osredotočil na Prvi met, iskanje mačke opazili, da je res, da je z uporabo HTTP 1.1. In na žalost, Google Chrome zdaj v različici 39 je nekako dumbing stvari navzdol in nam ne prikazuje dejanske glave. Toda kaj se je dejansko poslal, je prošnja da ni drastično, ampak / search? q = mačke. 

Zdaj, zakaj je to pomembno? No, bom sklepati iz tega, da če vam Google podpira poizvedbe tega obrazca, zakaj jaz ne izvajajo svojo lastno iskanje motor za CS50, ampak samo spredaj konec, samo grafični uporabniški vmesnik. In bomo oddajajo zadnji konec, Rezultati iskanja dejanski Googlu. 

Torej, kako lahko to storim? No, naj gredo v gedit tukaj. In mi gredo naprej in odprite do, recimo, novo datoteko. In bom, da shranite to začasno kot iskalna 0.html. In potem na koncu, bomo hitro pričakuje, da tisti, ki sem pre pripravljeni. 

In bom hitro bič gor vrsto doc html odprti oklepaj html blizu nosilec html. Potem bom naredil glavo blizu glave open naslov CS50 Iskanje namesto iskanja Google. Tukaj bom imel telo, tukaj blizu telesa. In zdaj moram CS50 iskanje. In pravzaprav, kaj je graditi to postopoma. Bom, da gredo naprej in zaprite to in pravzaprav ga dal v mojem javnem imeniku. Torej daj mi samo en trenutek. iskanje-0.html-- bom časovno ga pokličete search.html. Jaz bom to chmod a + r search.html. In zdaj grem, da ga odprete. Vse je v redu, tako da je bilo hitro. Vendar je bil cilj zgolj da nas pridete do točke da ima to besedilo datoteko imenovano search.html. Torej ni veliko na pogled še. Pravzaprav, če sem šel v mojem brskalniku, in pojdite na search.html, da je vse, kar je. Ampak veš kaj? Lahko sem malo Ljubitelj. Sem bral v knjigi, da obstaja Naslov tag imenovano H1. In bom, da gredo naprej in uporabi to odprto H1 in tesno H1. Naložite stran. In zdaj je večji in drznejši, ni vse tako zanimivo, ampak vsaj to strukturno bolj zanimivo. Zdaj pa naj vam predstavim še eno oznako. Izkazalo se je, da je oblika tag. In mi zapre to oznako. In se izkaže, tam je input tag, ki ima lastnost, imenovano tipa, ki je podatkovni tip polja, če hočete. In se bo od tipa besedila. In njegova vrednost se dogaja biti CS50 iskanje. Zapri tag. In tam se dogaja, da ne pojem odpiranje in zapiranje s posebnimi oznakami. 

Naj grem nazaj tja in glej, kaj se dogaja, osvežite. Postaja zanimivo. Izgleda, da je to polje besedila. In v resnici, nisem hotel postaviti vrednost še tam. Naj grem nazaj in dejansko dobili znebili te vrednosti, da bo enostavno. Namesto vrednosti, kar sem hotel da bi to stvar bilo ime. In ne vem, kaj je to, tako da bom prišel nazaj na to. 

Ampak spodaj, da hočem storiti vrste vhoda = predložiti. In ta vrednost bo CS50 iskanje. In bomo videli, zakaj sem preselil vrednost na to. Ko sem se osvežite, sem se zdi, da imajo zdaj Začetki moje iskanje motor, super ostudno, čeprav odkrito povedano, to je Ne daleč od tega, kar met Googlov privzeta stran izgleda. 

Če grem zdaj tukaj, lahko vnesete mačke in upajmo kliknite Najdi. Ampak nisem še čisto končali, ker nisem izvajal, očitno, baze podatkov. Nisem obiskal web za rezultate iskanja. Tako da moram za oddajanje, ki Googlu. Torej, kako naj to storim? 

No, najprej I morali dodati in ukrepanje pripisovati mojo obliko oznake, ki je http://www.google.com/search. In vem, da samo z njihovo sklepati z natančno videti na njihov URL-jev. In zdaj si ugibati. Kaj naj bi to besedilo polje verjetno se imenuje, na podlagi, kjer smo prišli od prej? 

OBČINSTVO: q. 

DAVID J Malan: q. In pravzaprav ne potrebujemo vprašanje označi se izkaže, ampak q je res to, q za poizvedbo verjetno s privzeto, samo zato, ker je to kaj Larry in Sergey prišel z leti. Torej, zdaj mi dovolite osvežite stran. Ni videti vse te različne. Zdaj pa gledam, kaj se dogaja. 

Če sem tipa pri mačkah in klik CS50 Iskanje in izpustil, opazil sem dobil stepena proč, da dejansko Googlu. Zdaj, Google je pa malo siten, da oni dodajo dodaten parameter, če hočete, na URL. To je vse dogaja samodejno na Google strani. 

Pomemben del je, da sem se zdi, da so ustvarili to prošnjo tukaj. In res je, da je tisto, kar se zgodi. Ko imate HTML, ki izgleda takole, ta je neke vrste spletnih razvijalcev zapisa Za rekel, pojdi naprej in ustvarite obrazec da, ko je predložen, to se dogaja, da gredo na ta URL. In ko je URL, če Vrednosti za stvari, kot so q, ne gre samo za ta URL. Pravzaprav, pojdite na vprašanje znamka in je q = mačke. Dodajte parameter, HTTP parameter, kot je ta. 

In samo, da je super natančen, kaj je bilo sklepati here-- ampak bom bolj explicit-- je da metoda želim uporabljati je dobil, namesto da bi nekaj podobnega delovno mesto, ki ga bomo na koncu videli. Torej, na kratko, preprosto z razumevanjem HTML in uporabo nekaterih dokaj enostavne oznake, zdaj lahko začeli ustvarjati naše front end uporabnik vmesnik z iskanjem motor za njim. 

Toda to je seveda precej grd. Torej, kaj me pravzaprav odpirajo nekoliko boljša verzija. To je ena sem pripravljen v napredovati, da ima nekaj pripomb. Vendar pa boste videli, da sem zal je veliko poustvarili. Torej, to je na spletu že na voljo. In nisem se zgodi, da preemptively pojdite na https samo, da ga bo enostavno. 

In zdaj pa odpirajo Naslednja ponovitev tega. Je različica 1 namesto 0. Kaj skoči ven na vas, kot nekoliko razlikuje v tem primeru? 

OBČINSTVO: [neslišno]. 

Ja, tam je to besedilo align center. To je malo čudno sem gor. Ampak to je res novo. In morda veš kaj se bo zgodilo. Če grem k mojim brskalnikom zdaj in obiščite iskanje-1.html, to je skoraj isto stvar. Ampak to je korak bližje pa malo bolj lepa. Še vedno je grd, ampak lepša, da vsaj vse, kar je zdaj na sredini. 

Tako se izkaže, da kaj sem s pomočjo je še en jezik, v celoti imenuje CSS, kaskadnih slogov. In CSS, odkrito povedano, je nekako po mojem osebnem mnenju, atrociously oblikovan jezik. To je zelo nadležno, da se spomnimo vsi različni podatki. Ampak to je tisto, kar stylizes Celotna svetovnem spletu danes. Sem užalil nekoga. Vse je v redu. Torej, pojdimo nazaj in videti kako smo dejansko uporabo tega. In se izkaže, vsaj to pravzaprav zelo preprost jezik. To je le nekaj parov vrednosti ključev, lastnosti in vrednote, lastnosti in vrednosti. Dejansko, tukaj je ena to premoženje in vrednost. 

Preprosto z uporabo slog atribut na mojem telesu tag in mu daje vrednost Beseda debelega črevesa in drugo besedo, ali premoženje in vrednost, Lahko vplivajo na estetiko spletne strani, ne nujno struktura še, ampak estetika njej. In samo Googling okoli, se zavedam da CSS, padajočih listov s slogi, Podpira lastnost imenovano text-align, katerega vrednost se lahko se levo, desno ali center, na primer. 

Torej, zdaj, ko sem ponovno naložiti to stran, kaj sem dobil bil osredotočen stran, vendar še vedno precej grdo. Pojdimo naprej in odprite up različice 2 Iskanje. In zdaj opazil sem naredil malo več. Opazili, da se tukaj v notranjosti glave tag, ne more biti več kot naziv. Dejstvo je, da je slog tag. In to je, če je le dobi malo grdo videnje CSS včasih. 

Obvestilo, da sem se zdi, da imajo nekaj da strukturno izgleda zelo različni. Ampak tukaj je ime tag želim stilizirani. Tukaj so naši stari prijatelji kodrasti oporniki in zaprta kodrasti naramnicami. In potem je tu, da Premoženje in njegova vrednost. 

Če sem naložiti te datoteke, search2.html, Končni rezultat je enak. Ampak to je korak k boljšemu načrtovanju. Tako da ta CSS, Sem ne pomešane z mojim HTML. In res, kot bomo videli, sem lahko ponovno uporabo te lastnosti in vrednote. Če bi želel, da bi šopke Deli mojo spletno stran na sredino, Nimam vnesti style = besedilno-align središče povsod. Lahko dam na enem mestu morda želeli na vrhu. 

Toda tudi to ni najboljši dizajn. V bistvu, ena od stvari, boste izvedeli, kot ste porabili več časa z spletno programiranje je, da bolj lahko modularize stvari in faktorja stvari kot .h datotek pustite nam faktorja stvari ven, rad helpers.c Dovolite nam faktorja stvari Pred nekaj psets. Podobno, morda smo želijo doseči. 

Tako obvestilo v različici tri search.html Sem očistiti glava stran in samo čaka v tem, povezava oznaka, ki v nasprotju z imenom, ne dam hiperpovezave. To se povezuje z drugo datoteko s pomočjo href, katerega vrednost je v tem primeru, je iskanje-3.css Zato se zavedam, da smo se hitro dogaja. Toda vse delam je nekako premikati stvari okoli. Naj mi odprto iskanje-3.css. Tam je, pravzaprav nič z njim. Pravkar sem prekopiral in ga prilepiti v novo datoteko, podobno kot smo vključeno stvari iz v druge datoteke pred. In result-- popolnoma underwhelming-- se bo popolnoma enako. Vendar pa se selimo toward-- ne, to ni. Oh, vem zakaj. 

Tako se zdi, da je to napaka. In to je v nekem smislu. Ampak naj odprejo svoj zavihek Omrežje. Dovolite mi, da naložite stran. Ah, zakaj CSS ne uporabljajo? No, datoteke CSS ima podobno da je svet berljivi, tako rekoč. In preveč je trenutno prepovedana. Torej, kaj me naredi chmod a + r Star dot CSS-- whoops-- smo dot CSS je le Končnica datoteke za CSS datoteke. Zdaj pa grem nazaj moj brskalnik in osveži. OK, malo bolje. 

Zdaj pa mi naredi še zadnjo stvar. V iskalno-4.html. Imam verzijo, ki sem mislil, je bil način, hladilnik, čeprav veliko bolj zapleteno. Poglejmo si rezultat prva. Zaprite to, da nam več prostora. Spremenite to iskanje-4, Enter. 

In zdaj kup stvari, ki so pokvarjeni. Jaz bom šel nazaj v mojem imeniku tukaj. In zdaj sem le, da bo naredil chmod za + r na file-- ker vem, da exists-- imenuje logo.gif, ki je podoba. In zdaj osvežite. In wow-- zdaj sem zelo blizu, odkrito povedano, všeč različico Googla 1999, in odkrito povedano, 2014 različica Google, kajne? 

Tako da je zdaj dogaja, da svoje spletne strani, v končni fazi, če iščem za mačke. In res je. Ampak, kaj sem storil drugače v tej različici 4? Tako smo na njej ne bo prebival preveč tukaj. Boste videli v problemu nastavite sedem sčasoma. Toda opazil sem nekaj stvari. 

Sem predstavil div tag, ki je delitev, pisane v duhu z odstavkom oznako. Ampak delitev je tako kot, tukaj je Pravokotni nevidno področje zaslona. Dajmo ji edinstven identifikator, noge, samo tako da lahko govorimo o v naši HTML drugje. Tu je še en div strani ID katerih se bo vsebina. To je vsebina strani. In tu je glava strani. 

Z drugimi besedami, Sem v bistvu v HTML am duševno ogled te spletne strani, kot je tri komponente, zbiralni tu gor s to nevidno pravokotnika, vsebnost v sredini, in nato Noga pod navzdol, celo čeprav ne vidimo te stvari. Ker želim v moji glavi stran tukaj, ali v .css datoteko Lahko uporabite to sintakso. 

Glava ni tag. To je ID, tako se je izkazalo , da s tem #header, Zdaj lahko uporabijo eno ali več lastnosti v glavi. Jaz lahko naredim enako vsebino, Enako za vsebino tukaj. 

Tako, na primer, v nogi, obvestila Vse te lastnosti sem dodajanje. In vem, da obstajajo samo z branjem up o dokumentaciji za CSS. Velikost pisave se bo smaller-- tako da nekateri relativna velikost pisave. Teža se bo krepko. Margin-- koliko pik okoli it-- je 20 pik. In to se dogaja, da se v sredini. 

Ampak zdaj, stran izgleda takole. Če nisem zadovoljen z moja kopija tam, Jaz lahko naredim nekaj podobnega rdeči barvi. In potem sem lahko s tem prihranili, osvežite, in zdaj sem stilizirani nogo. Torej, to je samo namigujejo na moč o tem, kaj lahko storite na spletni strani spremeniti stvari okoli. 

In še bolj kul kot to, če hočeš suniti okrog z dejanskimi spletnih strani, ste trajno ne more spremeniti. Ampak, če sem odprla Inšpektor Chrome znova in grem, ne na levi strani tukaj, kar kaže na Facebook HTML, ampak kaže na desno hand side vse svoje CSS, lahko bodisi in spremeniti stvari na letenje. Zato naj gredo naprej in to. 

Dovolite mi, da gredo naprej in nadzor kliknite na to naključno besedo tukaj, podpisati in kliknite Preglej element. Chrome zelo prikladno skoči h1 tag, da Facebook uporablja. In opazil sem Facebook ima nekako leno težko kodirane pisave kot nepremičnine tukaj. 

Tako kul stvar, čeprav je da če bom dejansko šel noter in reči, oh, Facebook, ne maram, da 64 točk, zdaj lahko spremenite Facebook. Seveda, smo le njegovi zamenjavi zame osebno v tem trenutku. Toda to je samo še en orodje v našem kompleta orodij da se dogaja, da nam omogočajo, da poteg in ugotoviti in tudi diagnosticirati vprašanja na naših spletnih straneh. In smo lahko podobno iti čez tu, ki je ista stvar. Če res želite, da bi dobili fancy, I Mislim, sedaj lahko res mutacijo stran in ne nore stvari. 

Torej, zakaj je vse to koristno? No, končno smo dogaja, da želijo biti sposobni ustvariti spletne strani, ki poganja naše nazaj koncih, ne samo Google in outsourcing zadnji konec tam. Dejansko želimo vrednost, na primer, delovanja našega iskalnika pripisovati ne gre za nekoga drugega, ampak nekaj podobnega search.php, kjer je search.php na našem strežniku, ne pa na nekoga drugega. 

In tako priti do tja, smo dejansko treba uvesti nov jezik. Zato smo že pogledal eno novo jezik tukaj, ali pa dva res, HTML in CSS. Vendar so v resnici samo strukturne in estetske jeziku. Oni ne programiranje jeziki per se. In to je približno toliko formalna čas, saj bomo porabili za njih. Ker bomo začeli zdaj za prehod v PHP. 

Torej PHP je dejanska programski jezik. To je skriptni jezik v smislu, da je mišljeno, da bo tanjši kot nekaj podobnega C. In to je razlaga jezik, kar pomeni, da se niso pripravljeni. Torej, na kratko, kaj je to pomenilo Ko smo uporabili jezik kot so: C in imeli smo ga prevedite? Kaj to pomeni, da zbere C izvorne kode? OBČINSTVO: [neslišno]. DAVID J Malan: Povej še enkrat? OBČINSTVO: [neslišno]. DAVID J Malan: Popolna. Jo pretvori v binarno. Jo spremeni v ničel in enic od dejanske angleščina podobnega izvorne kode. In potem bomo lahko dejansko teči tistih ničel in enic s tem, da potujejo skozi CPU z dvojnim klikom ikone ali teče ukaz. 

PHP in Python in Ruby in Perl in JavaScript in šopki drugo jeziki so interpretirane jezikov, ki je pravi jih ne zbira. Namesto tega ste jih hraniti, kot prispevek k Program se imenuje tolmača. In da je tolmač, ki je nekdo drug napisal, bere svojo izvorno kodo vrha do dna, od leve proti desni in samo interpretira te linije in naredi tisto, kar ste rekli. 

Torej, če naletite vrstica, ki pravi, print, ni pa nujno spremeniti tisk na ustrezne ničlami ​​in narave. Treba ga je le ta tolmača, kot je velik če pogoj, ki pravi, če navodila programer je tiskanje, naredite naslednje. Tako da ga razume samo po načinu sklepanja skozi kaj ste to povedali storiti. 

In PHP je ena od teh jezikov. In je bil pred leti zasnovan PHP Ravno za spletno programiranje. In to je bilo na začetku zelo površen grdo jezik. In res, tam je ogromen znesek slabega PHP kodo tam. Ampak jezik sam je dozorela v preteklih letih, tako zelo, da zdaj je pravzaprav čudovito naslednji korak pedagoško iz C, ker je tako darned seznanjeni z vsem, kar ste pravkar videli v zadnjih nekaj tednih. 

Ena začetna razlika bomo videli je ni glavna funkcija več. Ko začnete pisati kodo, to je samo dogaja se, da izvede ne glede na to, kaj, kot bomo videli v trenutku. Medtem, tukaj je, kaj spremenljivka izgleda v PHP. To je malo drugačna, vendar le komaj. 

V PHP, tam ni močna tipkanje. Tam je teden tipkanje, ki pomeni le tam so vrste podatkov, kot so strune in številke in druge stvari. Vendar ga ne moti opredeljuje kaj so anymore. PHP je številke za vas. Znak za dolar je samo odločitev da PHP ljudje na let nazaj tako, da se katerakoli spremenljivka v PHP Samo začne z znak za dolar. Pravzaprav je nekako koristni, skoči ven na vas malo več. 

Toda po tem, ta je stanje v PHP. Kaj je drugačen v primerjavi s C? Trik question-- ničesar, kar je pravzaprav res lepo. Boolove izrazi v PHP-- isti. Boolove izrazi z in v primerjavi z ali, stikala, zanke, zanke, loops-- OK, ta je drugačna. 

Tako se izkaže, da je nekaj drugih funkcij v PHP. Eden od njih je pravzaprav to, kar je nadvse priročno. Če $ številk je matrika, ki ste prej prijavljene v program, imate to fancy za vsak konstrukt da je, namesto da bi vse to siten sem enak 0, I je manj kot to, [? I ++?] za vsako številkami kot številka, kjer se vsak teh vrednot znak dolar je samo spremenljivka, in slednji si lahko zamislite kot I. Lahko ga pokličete karkoli želite. Poklical sem jo številko. To bo ponovitev čez matrika se imenuje številk. In na vsaki ponovitvi, je bo samodejno posodablja za vas številka znak za dolar spremenljivka, tako da boste neprestano imajo dostop do spremenljivke, ki jo želite ne da narediti vsako kvadratno nosilec Zapis ali indeksiranje v array. 

Beyond, da imamo tudi stvari, kot so nizi, ki izgledajo skoraj enako, razen, da je zelo pogost, saj bomo glej, tako v PHP in JavaScript vnaprej inicializirati array z oglatimi oklepaji. C uporablja zavitimi oklepaji. Tako da je nekoliko drugačen, čeprav Nismo res ni uporabil ta trik veliko. 

Ampak še bolj močno, PHP ima asociativne nize, ki je fancy način rekel hash tabele. V bistvu, če želite, da razglasi hash miza v PHP, za razliko od C- koliko vrstic kode je trajalo, da dejansko izvajati razpršene tabele v C? Ali pa, koliko vrstic je koda ga ob izvajati razpršene tabele v C? Tako da je verjetno veliko, kajne? To je nekaj deset, morda 100 ali 200. To je enostavna. Ali pa je na tem, da se, kot je kmalu boste videli, enostavna za izvajanje razpršene tabele [Neslišno] in tudi poskusiti. Toda v PHP-- in odkrito povedano, sem Verjetno vam ne bi smel povedati tega dokler Monday-- v PHP, če želite tabelo, storjeno. To je hash tako table-- z eno vrstico kode. In 

Veliko jezikov storiti. Zabavajte se z pset pet. Torej, veliko jezikov to. So vam te abstrakcije da drugih ljudi, drugih programerjev, so ustvarili za vas, tako da lahko stoji na svojih ramenih in začeti uporabljati ideje, ki so super prepričljiv, kot je hash tabel in drevesa in poskuša. Vendar vam ni nujno, da izvajanje te stvari sami. 

In tako na koncu, kaj bomo uporabljati PHP za se lahko pisanje programov takoimenovanega-ukazno vrstico. Mi lahko znova vsak program, Tako daleč smo že napisal ta semester, razen morda Breakout, ki uporablja SPL, ki je specifičen za C v trenutku. Ampak vsak drugi problem določiti, vsekakor Mario in Caesar in Vigenere in [? Tresk?] In naprej, mi lahko ponovno izvajati v PHP, in verjetno malo bolj enostavno. 

Ampak kaj bomo na koncu dogaja uporabljati PHP za web programiranje. In bomo uvesti naslednjo teden mentalni model, ki se imenuje paradigma MVC, model, pogled krmilnik, ki bi, če ste naredili programiranje preden v Python ali Ruby ali drugje, boste Morda veš te ekipe z Tračnice in Django in podobno. Ampak, če ste novi na tudi to, boste videli da je to dejansko zelo naraven Podaljšanje razcepa in vrste oblikovanja kode, ki smo jih počel v C. bomo zdaj uporabljati nekatere od teh lekcij za PHP tako da na koncu smo izvajanje lastne spletne strani. In če ste nekako Hipnotiziran ali čudil da bomo storili tako hitro vse, zavedaš, da skoraj vsak semester, kar je skoraj 90% študentov CS50, vključno s tistimi, ki niso nikoli programirana prej, na koncu kar končne projekte, ki temeljijo na spletni programiranja. In tako boste videli, da se vrne so visoko v tednih, ki prihajajo. Tako vas bomo videli potem v ponedeljek. 

SPEAKER 1: In zdaj, Deep Misli, ki jih Daven Farnham. Razpršene tabele. 

[Smeh]