[MUSIC Playing] DAVID J Malan: Të gjithë të drejtë, të mirëpritur mbrapa. Kjo është CS50. Ky është fundi i javës shtatë. Dhe kjo është fundi i atij pastrues gjueti nga problemi vendosur katër që ju të mund të të kujtojnë. Pas shërimit të gjithë ato JPEGs të stafit, ju u sfiduar, në qoftë se ju dëshironi, për të fotografuar veten me sa më shumë e këtyre folks si ju mund. Ne morëm një bandë e tërë e parashtresave gjatë disa javëve të fundit, në të vërtetë, mjaft e drejtë pak para mesditës sot, disa prej të cilave janë ata këtu, kapur këtu in-- duket like-- Annenberg Hall në orët e zyrës, një here në Lowell House me Nick. Ja Ramon duke u kapur në telefon. Kjo ishte në një drekë CS50. Kjo ishte Jason Skyping me një shok klase më kreative, i cili i telefonoi atij në këtë mënyrë. Ne nuk e dimë se çfarë kjo ishte. 

[Qeshura] 

DAVID J Malan: Po kjo është me vlerë një Gigabyte. Këtu është Chang, i cili fjalë për fjalë u off fazë për të shmangur duke u fotografuar një ditë, por u kapën. Këtu është Nick. Këtu është Nick. Këtu është Nick. Dhe këtu është Alison poshtë nga fusha. Dhe Zamyla edhe u gjet në një konkurs ballroom. Pra, ne do të shkojnë nëpër këto foto, gjej që e ka paraqitur më hershme, dhe shpërblimi një çmim të pabesueshëm, si premtuar në spekulim. Dhe ne do të ndjekin deri në lidhje me hapësira që është përfshirë. 

Një çift i announcements-- kështu drekë është, përsëri, këtë të premte në 13:15. Nëse ju dëshironi të bashkohet me ne, RSVP në atë URL këtu. Jason shfaqet përsëri këtu nga një e seksioneve nja dy vjet mbrapa, e cila ka ndodhur të bjerë në Halloween. Dhe në të vërtetë, ai i veshur si një kungull atë vit të veçantë. Nëse ju shihni këtë seksion të vitit 2011 seksionit të tij nga tetë, nëse ju jeni kurioz, në CS50.tv, unë mendoj se ky ishte viti në të cilin pompë e ajrit e tij ishte duke punuar. 

Nëse ju pastaj të shikojnë seksion të ngjashme në vitin 2012, ju do të shihni këtë Jasonin shumë shfry, pasi padia nuk funksionoi, e cila është vetëm për të thënë kjo e premte, në qoftë se ju do të pëlqen të ndërtoj një kungull me Daven dhe Gabe dhe të tjerët, RSVP krerëve në adresën cs50.harvard.edu. Ajo premton të jetë kënaqësi e madhe. Daven, ne jemi duke u tha, ka gdhendur Pumpkins gjithë jetës së tij. Gabriel nga Brazili nuk ka gdhendur një kungull për Halloween. Pra, të jetë atje me ta si ai mëson. 

Seminare, meanwhile-- kështu që ju do të mësoni së shpejti për atë që pritjet tona janë për Projekti final, i cili në thelb do të valoj poshtë për hartimin dhe zbatimin e më çdo projekt me interes për ju, edhe pse subjekt i miratimit dhe udhëzime nga shokët tuaj të mësimdhënies. Nga fundi i semester, ne kemi prezantuar një numër i seminareve, të cilat janë klasa fakultative udhëhequr nga miqtë mësimdhënies dhe Harvard Stafi, miqtë e kursit të gjithë kampus, mbi tema të ndryshme që janë tangenciale në Planprogrami themelor KURS s por megjithatë zbatueshme, fun, dhe të ndryshme për projekte të mundshme të fundit. 

Për shembull, së pari, në qoftë se ju dëshironi për të regjistruar, kokën në atë URL atje. Dhe kjo është rresht për seminare vetëm këtij viti. Por kuptojnë ne kemi dhjetra e seminare nga vitet e kaluara, të cilat janë të lidhur në menynë Seminare Mundësia e internetit kursit së. Pra, nëse ju jeni duke menduar në lidhje me shkon përtej zonës tuaj rehati ose picking up disa aftësi të reja, për shembull, programimin e iPhone Apps me Swift, një gjuhë të re nga Apple apo Objektivi-C ose Android Apps, ose programimi [? sugjerim?] poqat, apo ndonjë prej temave deri këtu dhe më shumë, kontrolloni për shkak out faqen e regjistrimit. 

Pra, kemi filluar dhe përfundoi në Të hënën me kërkim në HTTP. Pra HTTP shpejtë refresher--, HyperText Transfer Protocol. Por çfarë do që me të vërtetë do të thotë? Çfarë do që me të vërtetë do të thotë? A është kjo një dorë? Unë e di që ju jeni vetëm kruarje kokën tuaj. Por ju doni të propozojë çfarë HTTP është? 

Audienca e: Sa kompjutera komunikuar me [padëgjueshme]. DAVID J Malan: I humbur pjesën e fundit. Sa kompjutera të komunikojnë with-- 

Servers Internet: AUDIENCA. DAVID J Malan: Good-- me internet servers, dhe në veçanti, web servers. Sepse kujtohet, ka një bandë e Shërbimet në internet, disa prej të cilave ju përdorni ndoshta përditshme mes chat dhe mesazh, chat, dhe web, dhe email, dhe si. Dhe HTTP është vetëm protokoll që shfletues web flasin kur komunikojnë me servers web, dhe anasjelltas. Dhe analog në bota njerëzore mund të jetë, I zgjasë dorën time për të shkundur disa njerëzore e të tjera dhe ai ose ajo pranon duke i zgjeruar tij apo dorën e saj si. Pra, kjo është vetëm një protokoll, një grup i konventave. 

Dhe çfarë me të vërtetë janë këto konventa? E pra, ajo vetëm vlon poshtë për dërgimin e mesazheve mbrapa dhe me radhë, si ne përshkruar këtu. Dhe ka disa mënyra në të cilat ju mund të dërgoni këto mesazhe. Dhe ndoshta më e zakonshme është i njohur si të merrni. Dhe ne do të shohim një dallim për këtë para se të gjatë. 

Por një kërkesë get nga një shfletues për server ashtu duket si ky. Kjo është një bandë e tekstit që i vë brenda një zarf virtuale. Në pjesën e jashtme të kësaj oferte të shko një pjesë nja dy detaje. Çfarë duhet të shkoni në zarf, në mënyrë që të flasin, në mënyrë që të marrë një kërkesë të tillë këtë nga unë për një web server? Po. 

AUDIENCA: Adresa IP e juaj. 

DAVID J Malan: IP Adresa ime në Nga fushë, në mënyrë që të flasin, dhe natyrisht, Adresa marrësit IP. Por në rastin e një pako të internetit, ne kemi nevojë për një shumë detaje të vogël Kjo nuk është e mjaftueshme vetëm për të dërgoni një zarf me një server, sepse kjo server mund të jetë dëgjuar për lloje të ndryshme e trafikut të internetit. Pra, çfarë tjetër nuk kemi nevojë për Përveç marrësit IP? Vërtet? 

AUDIENCA: A është TCP? DAVID J Malan: Mirë. TCP-- 

AUDIENCA: Adresa. 

DAVID J Malan: Adresa, ose port, siç është quajtur. Mbylle, por një numër port TCP. Dhe ka një bandë e tyre. Por me siguri më njohur duhet përfundimisht jetë 80, e cila është paracaktuar një përdorur për trafikun web. Dhe një tjetër të njohur ai së shpejti do të jetë 443, e cila është përdorur për të sigurt web trafikut, URL që fillojnë me https. 

Pra, kjo është ajo që shkon brenda kësaj zarf. Dhe për të marrë / thjesht do të thotë, të japë me web faqja default. Më jep rrënjët e vështirë makinë në këtë web server. Dhe shpresojmë se, web server do të përgjigjet me, OK dhe numri 200, e cila është vetëm një konventë thënë, po, të gjithë është me të vërtetë OK. Ja faqja. Lloji i web faqes do të të jetë teksti, por më konkretisht, HTML, të cilat ne jemi gati për të zhyten përsëri në. Dhe dot dot dot vetëm do të thotë, këtu është HTML. Dhe kjo është ajo ku ne marr histori sot, në të vërtetë shkrim HTML, HyperText Markup Language, e cila është gjuha në të cilën web faqet janë të shkruara. Kjo nuk është një gjuhë programimi. Nuk ka funksione ose sythe apo kushte. Kjo është një gjuhë markup, si edhe herë të parë sot, që ju lejon të specifikoni se si të strukturës dhe të stilizoj aesthetically një faqe web. 

Pra, kjo ishte një dhe vetëm faqja ne me të vërtetë shikuar, nëse shkurtimisht, të hënën. Dhe vini re disa karakteristikat e spikatur. Ka shumë të hapur angled kllapa dhe kllapa ngushtë angled. Në mes atyre që angled kllapa janë fjalët. Dhe ne jemi duke shkuar për të filluar duke e quajtur këto fjalë tags. Kreu kllapa kështu hapur dhe kreu kllapa mbyllura janë tags hapura dhe të mbyllura, ose të fillojë dhe në fund tags të përkatësisht, të një elementi HTML, si ne do të thërrasë atë, i quajtur kokë. Dhe e njëjta vlen edhe zhargoni me trupin në HTML dhe kështu me radhë. 

Dhe çfarë është e bukur është HTML-- dhe në të vërtetë, ne do të kalojnë tmerrësisht pak kohë në të, sepse ju do të kryesisht vetëm kuptoj çfarë përmban ajo ka, kur ju në fakt kanë një problem konkret për solve-- ju do të gjeni se një shfletues është shumë e memec. Është vetëm do të do-- jo ndryshe a computer-- atë që ju them se për të bërë. Dhe kështu që kur ju keni të hapur HTML kllapa në krye atje, që në thelb thjesht do të thotë, hej, browser, këtu vjen një faqe web shkruar në HTML. 

Kur sheh parantezë të hapur kreu, që vetëm do të thotë, hey, browser, këtu vjen kokën, ose të pjesa larti i web faqen time. Kur sheh një parantezë mbyllur kreu, që vetëm do të thotë, hej, kjo është ajo për kokë. Koha e pritjes për diçka tjetër. Dhe kjo është diçka tjetër me sa duket do të jetë trupi. Dhe kur ju nuk keni një tag, si ju keni vetëm tungjatjeta, presje, bota, kjo është vetëm do të jetë teksti para se në fund të fundit është shfaqur në ekran. 

Tani, ju do të vëreni shumë gjurmë këtu. Ju ndoshta mund të konkludoj si ne jemi stylizing atë. Çdo herë që unë të hapur një tag, në mënyrë që të flasin, unë porosis. Dhe çdo herë që unë të mbyllur një tag, I un-indent, ngjashme në frymë të formatimin e teksteve kaçurrel. Dhe përtej kësaj, unë jam natyrë e përdorur gjykimin tim. Vini re se unë nuk u mërzit goditur Shkruani brenda këtij tag titullin. Pse? E pra, unë vetëm vendosa dukej a pak të pastër për mua, njeriut, jo vetëm të shqetësojë duke bërë atë. Pra, përsëri, ka disa Gjykimi quan vetëm si ka në C apo ndonjë gjuhë. 

Por vini re gjithashtu se kjo vulë jep veten për një model mendor, të mos i mbi komplikojë atë. Por një pemë, e drejtë? Nëse ju mendoni për një web faqe, shkruar me sa duket si kjo, si bukur prerë në këtë mënyrë, ju mund të pothuajse të mendoni kllapa hapur HTML tag kllapa e mbyllur është e demarkacionit rrënja e një nyje, një pemë familjare Nyja style në stilin e pemëve ne kemi shikuar në të premten e kaluar. 

Dhe vërtet, ne kemi më të drejtë këtu atë që ne do të thërrasë një DOM, D-O-M, dokument Modeli objekt, një mënyrë e sofistikuar për të thënë një pemë që përfaqëson atë HTML. Dhe vini re se HTML ka, ne do të themi, si një pemë familjare, dy fëmijë. Në të majtë është kokë. Në të djathtë është trupi. 

Dhe vetëm si një ushtrim pamend mendimit, kreu, natyrisht, ka si shumë fëmijë sipas kësaj strukture? Pra, vetëm një, title-- dhe kjo është arsyeja pse ne kemi shigjeta shkuar nga koka deri te titulli. Pra, kjo është sikur ai person në pemë familje kishte vetëm një pasardhës. Dhe pastaj vetë titulli mund të të thuhet se kanë një fëmijë shumë. 

Kujtojnë se kishte HTML hello, presje, bota nën atë. Dhe unë e kam tërhequr thjesht brenda një ovale në vend të një drejtkëndësh vetëm të përcjellë semantike se edhe pse kjo është një nyje në pemë, në mënyrë që të flasin, kjo është lloj krejtësisht të ndryshme. Kjo nuk është një tag. Ose më mirë, kjo nuk është një element. Kjo është vetëm një nyje tekst, nëse ju do. Por këto janë krejtësisht Konventat arbitrare të njeriut. Kjo është vetëm tani rruga ime përfaqëson atë që unë do të si një agregat telefononi dokumentin. 

Dhe, si një mënjanë, gjë në këndi super të lartë të majtë, kllapa hapur pikë thirrje doc lloji HTML, kjo duket si një tag, por kjo është rasti budalla qoshe ku kjo është vetëm atje, kopjohet dhe të ngjit të tregojë shfletuesit ky është version HTML 5. Bota mban ndryshuar atë në Linja e parë e kodit në një faqe duhet të jetë. Kjo thjesht do të thotë versionin 5. Pra, kjo nuk ka fare duken si të tjerët. 

Të gjithë të drejtë, kështu që me atë tha, tani ju do të vlerësojmë ky mjaft ky budalla tatuazh dikush mori. 

[Qeshura] 

DAVID J Malan: Në rregull, dhe tani le të vërtetë bixhozi në bërë diçka me këtë. Ju do të kujtojnë se herën e fundit I hapur deri Appliance CS50 dhe kam bërë diçka si thjeshtë si hapjes up gedit. Dhe unë ruajtur fotografi edhe në desktop-- im askund special-- si hello.html. 

Pra më lejoni të bëjë këtë again-- hello.html Enter. Dhe tani në këtë fotografi, unë jam duke shkuar për të shkojnë përpara dhe të përsëris atë që sapo saw-- lloji doc html Atëherë unë jam duke shkuar për bëni html hapur kllapa kllapa mbyllur. Dhe atëherë unë jam duke shkuar për të preemptively të hapur dhe të mbyllur tag. Pse? Vetëm kështu që unë nuk e harroj më vonë. Kjo është vetëm praktikë e mirë, ashtu si hapja dhe mbylljen e formatimin e teksteve kaçurrel të gjitha përnjëherë. 

Dhe pastaj çfarë erdhi më pas? Ju mund të mendoni se e tatuazh. 

AUDIENCA: kokë. 

DAVID J Malan: kokë. Dhe pastaj këtu, unë kishte titullin, unë mendoj. Dhe titulli ishte arbitrare, hello, titulli afër botës. Dhe pastaj këtu poshtë, trupi, i course-- atëherë ne mbyllim tag trupit. Dhe pastaj vetëm disi redundantly, I kishte të njëjtën gjë këtu poshtë. 

Kështu që unë pretendojnë se kjo është një faqe web. Kjo është diçka që tani mund të jetojnë në web, edhe pse natyrisht, kjo është fjalë për fjalë jetojnë në tavolinën e punës time tani. Por në të vërtetë, në qoftë se unë minimizuar Gedit, Unë do të shoh në tavolinën e punës time icon saj. Edhe pse kjo është aplikim, ju mund të bëni këtë për Mac OS pa TextEdit ose Dritaret me Notepad edhe. 

Dhe kur të shkoj përpara dhe double klik se edhe, dhe select-- mirë, le të Mos zgjidhni se për shkak Chrome nuk është hapur. Le të shkojnë përpara dhe të hapur Chrome. Dhe pastaj të bëjë Command-O për të hapur Dhe për të lundruar në desktop e mia dhe të hapur këtë dosje. Kjo është se si një shfletues interpreton HTML, top në fund, e majta në të djathtë. Hej, browser këtu është HTML. Ja kokë. Këtu është titulli. Këtu është trupi. Dhe në të vërtetë, kjo është se si ajo e bën këtë web faqe. 

Por vini re URL. Askush nga ju nuk mund të tërheqë këtë specifikë faqe në laptopë tuaj tani, edhe brenda tuaj aplikim nëpërmjet këtë URL, sepse skedarit: // tregon është e vërtetë në sistemin tim fotografi, hard drive time, jo tuajat. Pra, kjo nuk është e gjitha që e dobishme. 

Le tani të shkojë drejt duke përdorur një web server aktuale. Dhe kjo rezulton nga CS50 Appliance është më shumë se vetëm një mjedis ku ju mund të shkruani kodin C dhe përpilojnë dhe drejtuar atë si ju keni qenë duke bërë. Ajo gjithashtu është konfiguruar nga stafi për të përfaqësuar një web tipike server që është në internet, një që ju mund të paguani për ose një që është në të ashtuquajturin re. 

Dhe kjo është duke burim standarde lirë të hapur software, për shembull, diçka quajtur Apache, e cila është ndoshta ende më popullore web software server në botë se mijëra e faqeve përdorim sot. Dhe ai gjithashtu ka edhe software si MySQL, cila është një server bazës se ne do të merrni në fund të, e cila është vetëm për të thënë Unë mund të fillojnë trajtimin aplikim ime si një server të drejta të plota se unë nuk jam duke paguar për diku tjetër. Ajo thjesht jeton në laptop tim për qëllime të zhvillimit dhe komoditet. 

Pra, le të shkojnë përpara dhe të të përfitojnë nga kjo. Unë jam duke shkuar për të shkuar përpara dhe të hapur një dritare terminali. Dhe unë jam duke shkuar për të shkuar përpara dhe të move-- të vërtetë, së pari unë jam do të lundruar në tavolinën e punës time. Nëse unë bëj ls, ka hello.html. Dhe unë jam duke shkuar për të shkuar përpara dhe të fillojnë duke përdorur një directory të re ne kemi nuk përdoret më parë sot. 

hello.html-- Unë jam duke shkuar për të lëvizur të ../vhosts për hosts-- virtuale më shumë se në future-- dhe pastaj në një direktori të quajtur localhost, cila është nickname dhënë pothuajse çdo kompjuter, nëse kjo është një Mac, PC, ose kompjuter Linux, dhe pastaj veçanërisht në një directory që ne, Stafi krijuar tashmë për ju kur ju shkarkuar pajisjen e quajtur publike. Dhe, si emrin e saj sugjeron, asgjë I vënë në këtë dosje, në teori, do të jetë tani publik, të paktën për njerëzit të cilët kanë një të drejtpërdrejtë lidhja në kompjuterin tim. 

Deri tani më lejoni të shkoj përpara dhe të bëni cd me të njëjtën directory kështu që unë mund të shoh se çfarë është në vazhdim e sipër dhe ls lloji. Dhe me të vërtetë, kjo është vetmja gjë në atje. Unë pretendojnë tani se për shkak se unë kam vënë këtë paraqesë hello.html brenda një directory quajtur brenda publik i një directory quajtur localhost brenda një directory quajtur vhosts, të cilat në sajë të stafit CS50 ka qenë e para-konfiguruar që të jetë rrënja e web serverin tuaj, Unë tani mund të shpresojmë të bëjmë këtë. 

Unë jam duke shkuar për të hapur një skedë të re. Dhe unë jam duke shkuar për të shkuar për të mos paraqesë: //. Unë jam duke shkuar për të përdorur aktuale http / localhost, e cila përsëri, është nofka për serverin tim. Dhe atëherë unë jam duke shkuar për të shkuar në atë të paraqesë emrin, vetëm që të jetë i qartë? Ku është kjo histori ndoshta do? hello.html. 

Pra, me fjalë të tjera, unë dua të tani kjo Është kompjuterin tim, aplikim tim, sikur kjo është një server aktual. Pseudonimi i tij është localhost. Por mendoj se për localhost si si Facebook.com google.com, çfarëdo. Është vetëm emri im lokale. Dhe pastaj e fundit që unë dua është në Rrënja e hard drive, kështu që të flasin, ose rrënja e web server, prandaj me plagë përpara dhe pas Emri i skedarit hello.html. 

Më lejoni të zoom out dhe hit Enter. Dhe me të vërtetë, tani ka faqen time web. Pra, kjo është pak më ndryshe. Dhe kjo është po aq e underwhelming. Ky është versioni i vjetër. Më lejoni të tkurret font mbrapa. Kjo është e vjetër. Kjo është e re. Por çfarë po ndodh krejtësisht tani është se HTTP është duke u përdorur. 

Le të bëjmë këtë një pak më të qartë, ose, në qoftë se ju do të, pak më e komplikuar. Më lejoni të shkoj në fund të drejtën në këndin e majtë të pajisjes tim. Dhe vini re se e gjithë kjo kohë, ka pasur një numër. Kjo është adresa unike i pajisjes tuaj CS50. Kjo është një adresë private, siç nënkuptohet nga 172,16, e cila thjesht do të thotë vetëm që ju fizikisht mund të hyni në këtë web server. Çdo gjë është firewall dhe mbrojtur mirë nga pjesa tjetër e botës për shkak të kësaj adresimit. 

Dhe tani vini re edhe pse nëse unë shkoj në kjo adresë, jo në aplikim e mia, por në Mac OS-- unë jam duke shkuar për të shkuar përsëri mbi këtu. Ky është Mac im tani. Dhe tani unë jam duke shkuar për të hapur ky version i Chrome këtu. Dhe unë jam duke shkuar për të shkuar në http: //172.16.25 / Dhe unë harroj rest-- 133. 

Kështu që unë jam duke shkuar për të vizituar nga Mac tim që adresa IP /hello.html Enter. Dhe tani unë shoh nga Mac tim që Appliance CS50 tim, i cili është Adresa IP është se numri, është me të vërtetë sillet si një web server në internet. Ajo nuk ka një të lehtë e mirë për të mend emrin si Facebook.com, por kjo është duke përdorur HTTP me sa duket, edhe pse Chrome është lloj i thjeshtimi botën për ne por nuk na tregon HTTP. Por kjo është me të vërtetë pikërisht këtë. Chrome është vetëm kursyer disa tasteve këto ditë. Dhe kjo është ajo që ne tani shohim. 

Pra, kjo është e gjitha mirë dhe të mirë. Por kjo është një faqe mjaft underwhelming. Më lejoni të shkoj në dhe të bëjë diçka pak më ndryshe tani. Pra më lejoni të shkoj përsëri në gedit. Dhe në vend të hello, botë, le të vënë një imazh. Dhe unë pretendohet nga before-- më lejoni të shkoj në time publikun directory localhost. Dhe më lejoni të shkoj përpara dhe të kopjoni një tërë bandë e dosjeve nga sot nga dosja ime Dropbox në këtu. 

Tani, nëse unë lloji ls, shikoni në të gjitha këto fotografi që unë kam shpërndarë nga website Sigurisht në para sot, një nga të cilat është ende hello.html. Pra, nuk është se një. Dhe kujtojnë këtë silly nga cat.jpg kaluar time--. Pra më lejoni të përpiqen për të embed cat.jpg brenda web faqen time. 

Unë jam duke shkuar për të shkuar përpara dhe të bëjë cat.jpg, të shpëtuar. Më lejoni të kthehem në Chrome. Dhe më lejoni të zoom në font dhe tani reload. Oops, ku kam vënë këtë? Standby-- Unë ende kam të vjetër version nga Open tim desktop. Pra më lejoni të shkoj në vhost time, im localhost, publiku im, dhe hello.html. Deri tani më lejoni të shkoj përpara dhe të thonë cat.jpg brenda trupit ku unë dua që ajo të jetë shfaqet dhe reload. Sigurisht, kjo nuk është e saktë. 

Kështu që unë duhet të them shfletuesit pak më qëllim atë që unë dua që ajo të bëjë. Thjesht shtypni emri është natyrisht jo të mjaftueshme. Pra, kujtojnë se nuk ishte një tjetër tag, image, img për të shkurtër. Kjo është vetëm për shkak se njerëzit nuk i pëlqen fjalët lloji plotë. Dhe atëherë ne mund të bëjmë burim = "cat.jpg". 

Dhe tani unë jam duke shkuar për të bërë një gjë tjetër këtu. Edhe pse të gjithë tags tona deri tani kanë pasur këtë nocion të a të fillojë tag dhe një tag fund, që nuk ka të vërtetë të bëjë ndjenjë për një imazh, e drejtë? Një imazh është ose nuk ekziston apo jo. Dhe kështu që njerëzit kanë ardhur me një konventë të thjeshtë. Kur ju keni një tag që mund të të dyja të fillojë dhe të përfundojë në të njëjtën time-- ajo mund të jetë bosh, në mënyrë që të speak-- drejtë vënë plagë përpara në brendësi të tag në fund. Tani më lejoni të kthehem në shfletuesin tim. Hit Rifresko Damn, diçka është e gabuar. Ju ndoshta keni parë këtë herë pas here në web, edhe në qoftë se ajo nuk ka qenë faji juaj. Është faji web server-it. Çfarë oda kjo duket për të treguar? Është thyer. Kjo është ku imazhi i takon. Vërtet? 

AUDIENCA: Por kjo nuk ka të kenë qasje në imazhin. 

DAVID J Malan: Nuk ka të kenë qasje në imazhin. Kjo, ose edhe më keq, ndoshta ajo nuk ekzistojnë edhe. Le të shohim nëse ne nuk mund të diagnostikojnë atë. Recall nga hera e fundit se në qoftë se në Chrome, në aplikim, apo edhe në Mac apo PC, ju shkoni në menynë për Zhvilluesa dhe të shkojnë në Developer Tools opsion, e cila ndoshta ju keni nuk përdoren më ose kurrë. Dhe në qoftë se unë shkoj tek Rrjeti dhe ringarkoni faqe, le të vërtetë të shohim në HTTP Kërkesat që janë duke u bërë. 

Ajo duket si hello.html është vërtetë OK, pra 200. Por cat.jpg është 403. Pra, kjo nuk është një 404. File ndoshta ekziston. 403 do të thotë ndaluar. Pra, kjo është pak konfuze. Unë jam duke shkuar për të shkuar mbrapa në dritaren time terminal. Më lejoni të zoom në deri këtu. Dhe më lejoni të bëj një ls. Ka ato të njëjta fotografi. 

Tani, më lejoni të bëj një ls-l, të cilat ju keni ndoshta përdorur më parë për të shikoni në fotografi Madhësive ndoshta apo timestamps. Dhe ne shohim një bandë e tërë e Informacioni madhe. Por vini re disa detaje. Ja hello.html në këtë rresht këtu dhe këtu është cat.jpg. Dhe kjo është vetëm pajisja qenit user friendly duke theksuar JPEG e në vjollcë si kjo. Por, çfarë tjetër është e ndryshme veç madhësia e skedës dhe emri i file? 

Audienca: [padëgjueshme]. DAVID J Malan: Po, ka dy më shumë R këtu. Vini re se çfarë hello.html ka ndodh. Pra, rezulton se në emër të ky publik directory është e rëndësishme. Çdo gjë në këtë directory është menduar të jetë publik. Por kjo nuk është e mjaftueshme vetëm për të drop fotografi në atje. Ju gjithashtu duhet të ndryshojë mënyra e dosjeve, të ndryshojë lejet e fotografi në aktive jo të jetë vendosjen e parazgjedhur, e cila është se vetëm unë mund të lexoni dhe e shkruajnë atë, unë duke qenë pronar. Unë dua të gjithë të gjithë botën për të jetë në gjendje për të lexuar dosjen time, kështu që të flasin. Lexoni thjesht do të thotë të parë atë. 

Dhe me të vërtetë, si ju do të shihni në problemin vendosur shtatë, kjo është ajo që do të thotë këto r-së. Thotë Këto dy R le të gjithë tjetër në botë lexoni edhe atë, sidomos tani që kjo është në këtë directory. Pra, mënyra më e thjeshtë për të rregulluar këtë është që të shkoni në prompt time dhe të bëjë chmod për ndryshim Mënyra dhe pastaj të bëjë një r +, krejt, të gjithë, të gjithë, plus r për të lexuar, dhe pastaj cat.jpg Enter. Asgjë nuk duket të ndodhë, e cila zakonisht do të thotë një gjë e mirë. Pra ls-l again-- tani le të shohim në cat.jpg. Dhe kjo leje duket se kanë ndryshuar. Si një mënjanë, në qoftë se ju bëni një gabim dhe ju, për shembull, bërë vetëm your-- unë nuk know-- ese publikisht të arritshme nga aksident, ju mund të bëni të kundërtën, chmod a-r. Edhe pse sinqerisht, ajo nuk duhet të jenë në directory publik gjithsesi nëse kjo është shqetësimi. 

Pra, tani le të kthehemi në shfletuesi im dhe reload. Dhe unë jam duke shkuar për të klikoni Ghostbusters pak simbol të qartë se një pjesë e ekran kështu që ne mund të shohim kërkesat e reja. Dhe me të vërtetë, këtu është Cat Grump para. Por më e rëndësishmja, teknikisht, nuk ka numri 200, i cili do të thotë që kemi marrë është OK. Në rregull, kështu që kjo është e gjitha mirë dhe të mirë. Por ne nuk jemi duke e bërë më të mirë të faqeve, as nuk jemi duke shkuar për të përpiqen shumë të vështirë për të bëjnë fanciest e faqeve sot. Por le të paktën të bëjë diçka super njohur më parë kërcitës off disa tags disa të tjera. Kështu që mendoj se nuk duan vetëm një mace ketu. Mendoj unë në fakt duan këtë cat për të lidhur për diçka. 

Unë mund, për shembull bëni diçka si kjo. një për të ankorohen href për equals-- reference hiper dhe le të vetëm të bëjë diçka si www.google.com ngushtë citoj kllapa ngushtë. Dhe tani kërkoni për macet. Mbylle spirancë tag. Pra, kjo është vetëm një lloj detaje të krejtësisht të reja. Tag sigurisht, është e ndryshme. Kjo është emri i një spirancë referencë href ose hiper. 

Por më e rëndësishmja, nuk ka kjo veçori sintaksore këtu. Kjo është ajo që ne do të fillojnë duke e quajtur nuk është një tag, por një atribut. Dhe një atribut është diçka që modifikon sjelljen e një tag. Dhe kjo atribut, href, mjetet modifikojë sjelljen e këtij spirancë në mënyrë që kur ajo është klikuar, ajo shkon në këtë URL këtu. Dhe sigurisht, kjo URL është Google. 

Ndërkohë, çfarë është ky tekst këtu do të jetë? E pra, kjo do të jetë çfarë njeriut të vërtetë sheh si të nënvizuar Lidhje, aq e thjeshtë sa se. Pra, le të provoni këtë. Më lejoni të shpëtuar atë. Unë jam ende në hello.html. Por në versionet online, ju do të shihni emrat e file aktuale ne para-përgatitur. Më lejoni të shkoj përpara dhe të reload. Dhe tani kjo është një shumë Faqja underwhelming ende. Por në qoftë se unë rri pezull mbi there-- dhe kjo është një pak më të vogël, but-- ju mund të shihni në fund këndin e majtë dora e ekranit tuaj, ajo me të vërtetë do të google.com. Dhe në qoftë se unë klikoni atë, ajo do të lëvizje më rrugën për aktuale Google. 

Por vini re këtu një mundësi për shfrytëzimit, ashtu si një mënjanë. Dhe ne do të kthehemi në tjetrin Çështjet e sigurisë para se të gjatë. Sepse ka kjo dikotomi mes ku ju shkoni dhe çfarë ju thoni, ju mund të bëni diçka si this-- http://www.google.com. OK, dhe tani, nëse unë reload pas kursimit këtë faqe, kjo duket si unë jam duke shkuar për të shkuar në Google. Por nuk ka asnjë arsye që unë duhet të shkoni në Google, apo jo? Unë në fakt mund të shkoni në diçka si badguy.com, ringarkoni faqen mbi këtu. Dhe njoftimi, ajo ende duket si Google. Dhe vetëm në qoftë se unë jam i mprehtë të mjaftueshme për të rri pezull mbi këtu nuk kam shoh ajo edhe do të shkoni në një vend tjetër. 

Pra, nëse ju keni marrë ndonjëherë një email, sidomos një nga Paypal, ose me sa duket nga Paypal duke i kërkuar që ju të hyni në në llogarinë tuaj, ky është arsyeja pse ju nuk duhet të ndonjëherë klikoni lidhjet në email, sinqerisht, çdo lidhje në email. Nëse ju e dini që ju keni aktuale paratë në Paypal ose Bankën e Amerikës apo Fidelity ose ndonjë website, shkruani atë në dorë. Sepse shikoni se sa e lehtë është për të gënjejnë dikë në paraqitjen e asaj që duket si një lidhje. Por në fakt ajo mund të shkoni absolutisht kudo. 

Dhe ka shumë më e madhe Kërcënimet se kjo. Në fakt, kjo është pak e i një tangente tani, por një nga ato më të mirë që kam parë i cili ka qenë që nga viti mbyllur, është dikush udhëhequr njerëzit to-- kështu që kjo mund të thotë, klikoni këtu për të hyrë brënda në tuaj llogari, një llogari bankare. Dhe kjo ishte Banka e Perëndimit. 

Pra, dikush bleu këtë. Dhe kjo është pak më e lehtë për të parë atë në një mono spaced font zoomed në në një projektor 30-këmbë. Por kur ajo është font vogël në një email që ju jeni duke marrë, kjo duket si bankofthewest.com, jo bankofthevvest.com, të cilat dikush kishte paguar 10 $ për të blerë. Dhe pastaj kjo çoi ata në ekuivalent i një website të këqija. 

Dhe ju do të shihni too-- të vërtetë ne mund të bëjmë this-- nëse unë shkoj në faqen e internetit aktuale, bankofthewest.com, përsëri, kujtojnë nga hera e fundit se në qoftë se kjo është faqja e tyre web dhe ju jeni kurioz se si punon, ju me siguri mund të shkoni në Zhvilluesi mjetet Chrome. Dhe ju mund të shihni të gjitha HTML formatuar bukur atje. 

Por më shumë për pikë, ju cam-- le të mbyllet this-- ju mund të shkoni për të Shiko Developer View Source. Pse nuk mundem thjesht kopje të gjithë që Dhe pastaj unë mund të shkoni në dritaren time të vogël gedit këtu dhe të bëni vetë web faqen time. Ruaj këtë hello.html. Dhe ndoshta kjo do të thyer, sepse kjo nuk është kaq e lehtë zakonisht. Por tani në qoftë se unë rifreskoni faqen time në mi CS50 Appliance dhe reload goditi, OK, disa sende thyen. Por unë jam shumë afër për të pasur vetë web faqen time bankare, e drejtë? E gjithë kjo HTML-- 

[Qeshura] 

DAVID J Malan: --I nuk actually-- dhe ju e di se ka dikush atje të cilët në fakt do të klikoni këto lidhje too. Pra në mënyrë të qartë, disa sende thyen. Por kjo do të çojë na në një diskutim, panevojshme tani, për çfarë CSS, fletët Cascading Style, janë, dhe si ju në të vërtetë shkarko tjera fotografi HTML dhe JPEG fotografi GIF fotografi që faqen e internetit mund të jetë duke përdorur. Por të gjithë që është e accomplishable. Por me të vërtetë boils poshtë për këto heuristics shumë të thjeshta. 

Pra, tani le të vetëm të cek nëpërmjet një disa shembuj të tjerë të HTML vetëm për të ju jap një kuptim për çfarë tjetër që ju mund të bëni. Për shembull, kjo është list.html. Mendoj unë të kërkuar për të bërë një faqe interneti me një listë të shtëpive në kuadrat. Unë mund të përdorni tag ul për të parenditur lista dhe pastaj fëmija pika lista dhe pastaj iterate over-- apo listë, rather-- shtëpitë në fjalë. 

Dhe në qoftë se kam hapur këtë ide, le ta bëjmë këtë. Le të mos shkojnë në hello.html, por për list.html. Damn atë. Si mund ta fix this? Është e njëjta çështje si më parë, e drejtë? Pra, më lejoni të bëj oops-- chmod-- chmod a + r të list.html. Dhe tani, nëse unë kthehem në shfletuesin tim dhe klikoni Rifresko, nuk është. Pra, nëse ju keni kërkuar ndonjëherë për të bërë një listë bulleted, ju mund të bëni atë. Nëse ju doni të jenë të super dashuroj dhe të bëjë një listë urdhëruar, jo një listë parenditur, ndryshojë atyre që ol, rifreskoni faqen, dhe tani shfletuesi do të numërojë atë për ju. 

Çfarë tjetër mund të bëjmë? E pra, një çift i others-- nëse ju keni marrë paragrafëve të gjatë e text-- për shembull, disa Teksti latin si this-- dhe ju doni atë në paragrafët veçanta, p hapur, p ngushtë për paragrafi tag. Dhe të bëjë atë përsëri dhe përsëri. Dhe në qoftë se unë tashmë e hapur deri në këtë fotografi, paragraphs.html, mirë, kjo po bëhet i bezdisshëm. Pra, tani le të vetëm të kthehemi tim shpejtë, chmod a + yll r r .html-- një kartë e bukur pak e egër në mënyrë që të flasin. Kjo duhet të rregullojmë të gjitha këto probleme për mua. Le të reload. Ka tre paragrafe. 

Dhe tani le të shkojë përpara dhe të hapur një tjetër. Si për tryezë? Ju do të vëreni duket tryezë pak më komplekse. Por është e njëjta idea-- tag hapur, tag hapur, të hapur, të hapur, të hapur, të ngushtë tag, tag hapur. Dhe këto ndodhin të qëndrojë për tavolinë, kufiri i të cilit është me sa duket do të jetë një trashësi 1-- çfarëdo se rresht tryezë means--, tavolinë dhënave, që do të thotë një qelizë. Dhe në qoftë se unë kthehem në shfletuesin tim këtu dhe të shkojnë në table.html, ju mund të shihni diçka si kjo, e shëmtuar. Por ne do të merrni deri në pikën ku ne mund të vërtetë bëjë gjëra prettier se kaq. 

Pra më lejoni të përcaktojë tani për tani. Ka bunches e më tags. Dhe HTML është i mrekullueshëm për të marr sepse, sinqerisht, të gjithë ju duhet të bëni po shikoni në faqet ekzistuese web me të cilën ju jeni të njohur. Dhe ju jeni si, oh, kjo është se si ata e bënë këtë aesthetically. 

Ose ju mund të kërkoni ndonjë internet burimeve se si punon HTML, dhe ju do të shihni se ka një tërë fjalorin e etiketave të tjera. Por me model të thjeshtë mendor vetëm se pothuajse çdo tag keni hapur ka për t'u mbyllur, me të vërtetë nuk mjafton për të mësuar veten HTML pas kuptojnë këto ide themelore e etiketave dhe atributet dhe mirë-formedness që ne kemi biseduar rreth, mbyllur çdo gjë që ne mund të hapur në mënyrë që të mos e ngatërruar një shfletues. Pra, tani le të marrin këtë një nivel më interesante duke shkuar në aktuale. Dhe le të shkojë në Mac tim këtu, në google.com. Dhe tani notice-- le ta bëjmë këtë. Unë jam gong për të shkuar në Settings, Kërko Cilësimet. Unë dua ta fikur këtë çast bezdisshëm Rezultatet gjë ku menjëherë fillon duke iu përgjigjur shtypur tuaj. Le të bëjmë në këtë shkollë të vjetër në mënyrë ne fakt shohim se çfarë po ndodh. 

Kështu që unë jam duke shkuar për të shpëtuar tim Settings Google këtu. Dhe tani notice-- unë jam duke shkuar për kërkoni për diçka si macet. Dhe kjo është ende e bën auto të plotë këtu, por në bazë të gjërave njerëzit kanë shtypur në të kaluarën. Por vini re se çfarë do të ndodhë. 

Në URL në këtë moment është kjo, vetëm google.com. Dhe teknikisht, kjo është plagë. Google është vetëm ruajtjen e një karakter dhe mos na treguar atë. Ata janë duke na treguar https, vetëm të jetë super siguruar që ne jemi në një faqe të sigurt apo të koduar. 

Pra më lejoni të shkoj përpara dhe të kërkoni për macet. Tani kjo mori me të vërtetë madhe shpejt. Shikoni në kohëzgjatjen e këtij URL. Por kjo rezulton se shumica e këtij stuff në URL është në të vërtetë shumë e padobishme. Unë jam duke shkuar për të filluar fshirjes gjëra që unë nuk e kuptoj. Unë po të shoh macet. Unë e kuptoj macet. Unë nuk e di pse macet janë atje përsëri. Unë me të vërtetë nuk e di çfarë është kjo marrëzi është. Kështu që unë jam vetëm duke shkuar për të mbajtur evidentimin dhe fshirjes sende se unë nuk e kuptoj, distilimi URL në vetëm këtë. 

Tani më lejoni të merrni të hyjë përsëri. Ajo duket si Google ende punon. Pra, për disa arsye, ata janë duke shtuar a shumë gjëra të anëtarit by default URL tyre. Por kjo nuk është e nevojshme në mënyrë rigoroze. Pra, çfarë është e mirë në lidhje me këtë? E pra, më lejoni të shkoj përpara dhe të hapur deri Inspector Chrome. Ka një shkurtore pak miut për të. 

Go to tab Rrjetit. Dhe tani më lejoni të reload këtë faqe herë më shumë. Dhe unë jam duke mbajtur Shift. Si një mënjanë, shfletues kanë tendencë për të cache ose të shpëtuar informacion vetëm për hir efikasitetin e. Por zakonisht, duke mbajtur Shift dhe reloading do të detyrojë çdo gjë të fillojë përsëri nga fillimi. Dhe kjo është ajo që unë dua të bëj këtu. 

Dhe vini re të gjitha këto Rreshtat që vetëm shfaq. Ajo rezulton se në çdo web caktuar faqe, nuk mund të jetë vetëm një fotografi involved-- hello.html-- apo atje mund të jetë 52, si në këtë rast. Kur kam vizituar google.com, me sa duket, shfletuesi im nis 52 të ndara HTTP kërkesave. Pse është kjo? 

E pra, shikoni se çfarë ka brenda të kësaj faqe web deri krye. Nuk është vetëm tekst, por ka imazhe aktuale e macet mbi të djathtë. Ka një logo gjallë deri këtu në të majtë. Ka të gjitha këto ikona për një mikrofon dhe kështu me radhë. Ka shumë pjesë, ndërtimin e blloqe, copa rimbushëse, në qoftë se ju do, në këtë web faqe. Dhe çfarë shfletuesi është duke bërë mbi duke marrë dosjen e parë, e cila është ky rresht këtu, ajo është në thelb iterating mbi krye HTML në fund, e majta në të djathtë, duke kërkuar për gjëra të tilla si tags imazhit apo etiketave të tjera që përmendet fotografi të tjera dhe kur i sheh ata, shkon dhe i lexon ato nëpërmjet HTTP, tërë praktike metaforë zarf, dhe pastaj tregon ato në Vendndodhja përshtatshme në web faqe. 

Por vini re këtu në qoftë se unë të përqëndrohet në macet e para hedhin, kërko, vini re se, në të vërtetë ai është duke përdorur HTTP 1.1. Dhe për fat të keq, Google Chrome tani në versionin 39 është lloj i dumbing gjëra poshtë dhe nuk na treguar headers aktuale. Por ajo që u është dërguar me të vërtetë është një kërkesë për të mos çaj, por / kërko? q = macet. 

Tani, pse është kjo e rëndësishme? E pra, unë jam duke shkuar për të dëshmoj nga kjo se në qoftë se ju Google mbështet pyetje të kësaj forme, pse A nuk e zbatojnë kërkimin tim motor për CS50, por vetëm para në fund, vetëm grafik user interface. Dhe ne do të transferojmë në fund mbrapa, kërko aktuale rezulton në Google. 

Pra, si mund ta bëj këtë? E pra, më lejoni të shkoj në gedit këtu. Dhe më lejoni të shkoj përpara dhe të hapur up, le të themi, një skedë të re. Dhe unë jam duke shkuar për të shpëtuar këtë përkohësisht si kërkim-0.html. Dhe pastaj në fund, ne do të fast përpara atij I para-përgatitur. 

Dhe unë jam duke shkuar për shpejt nxit lloji doc html kllapa hapur html html afër kllapa. Atëherë unë jam duke shkuar për të bërë kokën Kreu i afërt Titulli hapur CS50 Kërko në vend të Google search. Poshtë këtu unë jam duke shkuar të ketë trupi, trupi poshtë këtu afër. Dhe tani kam nevojë për CS50 Kërko. Dhe në fakt, le të ndërtuar këtë incrementally. Unë jam duke shkuar për të shkuar përpara dhe të mbyllë këtë dhe në të vërtetë vënë atë në directory time publike. Pra, më jepni vetëm një moment. search-0.html-- Unë jam duke shkuar për përkohësisht quajnë atë search.html. Unë jam duke shkuar për chmod atë një search.html + r. Dhe tani unë jam duke shkuar për të hapur atë. Të gjitha të drejtat, në mënyrë që të ishte e shpejtë. Por qëllimi ishte thjesht për të na marrë në pikën e ka këtë tekst paraqesë quajtur search.html. Pra, jo shumë për të parë në ende. Në të vërtetë, në qoftë se unë shkoj në shfletuesin tim, dhe shkojnë në search.html, se e gjitha kjo është e. Por ju e dini se çfarë? Unë mund të jetë një pak njohës. Kam lexuar në një libër që ka a tag titull të quajtur H1. Dhe unë jam duke shkuar për të shkuar përpara dhe të përdorin atë H1 hapur dhe H1 ngushtë. Ringarkoni faqen. Dhe tani ajo është më e madhe dhe më të guximshme, jo të gjithë atë interesante, por të paktën ajo strukturore shumë interesante. Por tani më lejoni të prezantoj një tag. Ajo rezulton se ka një tag formë. Dhe më lejoni të mbyllur këtë tag. Dhe kjo rezulton se nuk ka një tag input se ka një atribut të quajtur lloji, e cila është lloji i të dhënave të fushës, nëse ju do. Dhe do të jetë e tekstit tipit. Dhe vlera e saj është duke shkuar të CS50 Kërko. Mbylle tag. Dhe nuk do të ketë asnjë nocioni i hapjes dhe mbylljes me tags veçanta. 

Më lejoni të kthehem këtu dhe të shohim se çfarë po ndodh, reload. Getting interesante. Ajo duket si ajo është një fushë teksti. Dhe në të vërtetë, unë nuk dua për të vënë një vlerë ende atje. Më lejoni të kthehem këtu dhe në fakt të marrë shpëtoj i kësaj vlere për ta mbajtur atë të thjeshtë. Në vend të një vlere, atë që kam kërkuar për të dhënë këtë gjë ishte një emër. Dhe unë nuk e di se çfarë është, kështu që unë do të kthehem në atë. 

Por më poshtë se, unë dua për të bërë lloj e zbritshme = paraqesë. Dhe kjo vlerë do të jetë CS50 Kërko. Dhe ne do të shohim se pse unë lëvizur vlerë për këtë. Kur unë reload, unë duket se tani kanë fillimet e kërkimit tim motor, super e shëmtuar, edhe pse sinqerisht, kjo është jo larg hedhin nga ajo Faqja e Google parazgjedhur duket si. 

Nëse unë shkoj këtu, unë mund të shtypni në macet dhe shpresojmë klikoni Kërko. Por unë nuk jam bërë ende mjaft, sepse unë nuk e kam zbatuar, padyshim, një bazë të dhënash. Unë nuk kam crawled web për rezultatet e kërkimit. Kështu që kam nevojë për të transferojmë atë në Google. Pra, si mund ta bëni këtë? 

E pra, para së gjithash I duhet të shtoni dhe të veprimit atribuojnë formë tag tim se është http://www.google.com/search. Dhe unë e di se vetëm nga të pasurit nxirret duke shikuar nga afër në URL-të e tyre. Dhe tani të marrë një guess. Çfarë duhet kjo fushë teksti ndoshta të quhet, në bazë të ku kemi ardhur para? 

AUDIENCA:? Q. 

DAVID J Malan:? Q. Dhe ne nuk mund të vërtetë nevojë për pyetje shënuar kjo rezulton, por q është me të vërtetë ajo, q për pyetje ndoshta nga parazgjedhur, vetëm për shkak se kjo është çfarë Larry dhe Sergey doli me vite më parë. Pra, tani më lejoni të rifreskoni këtë faqe. Ajo nuk duket e gjitha që të ndryshme. Por tani të shikojnë se çfarë ndodh. 

Nëse unë lloji në macet dhe klikoni CS50 Kërkoni dhe le të shkojë, njoftim shkoj whisked larg të vërtetë Google. Tani, Google ka qenë pak bezdisshëm në se ata janë bashkëngjitur një parametër shtesë, në qoftë se ju do të, në URL. Kjo është e gjitha ndodh automatikisht në anën e Google. 

Pjesë e rëndësishme është se unë duket kanë gjeneruar këtë kërkesë këtu. Dhe me të vërtetë, kjo është ajo që ndodh. Kur ju keni HTML se duket si kjo, kjo është lloj i web developers simbol për të thënë, të shkojnë përpara dhe për të krijuar një formë se kur është paraqitur, ajo do të shkojë në këtë URL. Dhe kur URL ka dhënë Vlerat për gjëra të tilla si q, nuk shkojnë vetëm për këtë URL. Në fakt, shkoni tek pyetja mark dhe pastaj q = macet. Append parametër, HTTP parametër si kjo. 

Dhe vetëm të jenë super të saktë, çfarë është duke u nxirret here-- por unë do të jetë më i explicit-- është se metoda që unë dua të përdorni është marrë, në vend të diçka si pas, të cilat ne do të shohim përfundimisht. Pra me pak fjalë, thjesht nga të kuptuarit HTML dhe duke përdorur disa tags mjaft të thjeshta, ne tani mund të fillojnë për të krijuar vet përdoruesit tonë përpara në fund ndërfaqe me një kërkim të motor pas saj. 

Por kjo sigurisht, është shumë e shëmtuar. Pra më lejoni të vërtetë të hapur një version pak më të mirë. Ky është ai I përgatitur në të avancuar që ka disa komente. Por ju do të shihni se unë pretty much rikrijuar atë. Pra, kjo është tashmë në dispozicion në internet. Dhe unë ndodhi të preemptively shkojnë në https vetëm për të mbajtur atë të thjeshtë. 

Dhe tani le të hapur një Përsëritje e ardhshme të kësaj. Është versioni 1 vend të 0. Çfarë në hedhje nga ju si pak ndryshe në këtë shembull? 

Audienca: [padëgjueshme]. 

Po, nuk ka kjo qendër align tekst. Kjo është pak i çuditshëm këtu. Por kjo është me të vërtetë e re. Dhe ndoshta me mend se çfarë do të ndodhë. Nëse unë shkoj në shfletuesin tim tani dhe për të vizituar të kërkimit-1.html, kjo është pothuajse e njëjta gjë. Por kjo është një hap më pranë duke qenë pak më i bukur. Është ende e shëmtuar, por prettier në atë të paktën gjithçka është përqëndruar tani. 

Pra, rezulton se çfarë unë jam duke përdorur është një gjuhë tjetër quhet krejt CSS, fletët Cascading Style. Dhe CSS, sinqerisht, është lloji e, sipas mendimit tim personal, një gjuhë të dizajnuar atrociously. Është shumë i bezdisshëm për të kujtuar të gjitha detajet e ndryshme. Por kjo është ajo që stylizes tërë web mbarë botën sot. I ofenduar dikë. Dakord. Pra, le të kthehemi këtu dhe të shohim se si ne jemi të vërtetë duke përdorur këtë. Dhe kjo rezulton, të paktën kjo është në të vërtetë një gjuhë mjaft të thjeshtë. Kjo është vetëm palë kryesore me vlerë, pronat dhe vlerat, pronat dhe vlerat. Në të vërtetë, këtu është një prona të tilla dhe vlera. 

Thjesht duke përdorur stilin atribut për tag trupit tim dhe duke i dhënë asaj një vlerë të a zorrës së trashë fjalë dhe një tjetër fjalë, apo një pronë dhe vlerë, Unë mund të ndikojnë në estetikë të web faqes, jo domosdoshmërisht struktura akoma, por estetikë e saj. Dhe vetëm nga Googling rreth, unë të kuptojë që fletë CSS, stil Cascading, mbështet një pronë të quajtur text-align, vlera e të cilave mund të të lihet, të drejtë, apo qendër, për shembull. 

Deri tani, kur unë reload Kjo faqe, çfarë unë kam marrë ishte një faqe në qendër, por ende mjaft të shëmtuar. Le të shkojnë përpara dhe të hapur up version 2 të Kërko. Dhe tani vini re unë kam bërë një pak më shumë. Vini re se deri këtu brenda kokës tag, nuk mund të jetë më shumë se titullit. Në fakt, ka një tag stil. Dhe ky është vendi ku ajo merr vetëm një pak CSS çrregullt shihnin ndonjëherë. 

Vini re se unë duket të ketë diçka se strukturalisht duket shumë ndryshe. Por këtu është emri i tag Unë dua të stilizuar. Këtu janë miqtë tanë të vjetër kaçurrel formatimin e teksteve dhe mbajtëse mbyllur kaçurrel. Dhe atëherë këtu është se prona dhe vlera e saj. 

Nëse unë ngarkesës këtë fotografi, search2.html, Rezultati përfundimtar është i njëjtë. Por kjo është një hap drejt dizajn më të mirë. Nga factoring këtë CSS, unë kam jo të përziera me HTML tim. Dhe me të vërtetë, siç do të shohim, unë mund të ripërdorimin këto prona dhe vlera. Në qoftë se unë të kërkuar për të bërë bunches e pjesët e web faqen time në qendër, Unë nuk duhet të tipit style = text-align qendra në të gjithë vendin. Unë mund të vënë në një vend ndoshta, si deri në krye. 

Por edhe kjo nuk është dizajn të mirë. Në fakt, një nga gjërat që ju do të mësoni si keni shpenzuar më shumë kohë me të programimit web është se sa më shumë që ju mund të modularize gjërat dhe faktor gjëra jashtë si fotografi .h le faktor gjëra jashtë, doja helpers.c Le faktor gjëra jashtë një psets më parë. Në mënyrë të ngjashme, mund ne duan për të arritur këtë. 

Pra njoftim version tre search.html I kam pastruar kreu i faqja dhe vetëm vënë Në këtë, një tag link, i cili në kundërshtim me emrin, nuk ju jap një hyperlink. Ajo lidhet me një tjetër fotografi me anë të një href vlera e të cilit në këtë rast, është search-3.css Kështu që unë e kuptojnë që ne jemi duke shkuar shpejt. Por të gjitha unë jam duke bërë është lloj të lëvizin gjërat rreth. Më lejoni të hapur search-3.css. Nuk është, asgjë të vërtetë në të. Unë vetëm të kopjohet dhe të ngjit atë në një të ri paraqesë, ashtu si ne faktorizohen stuff nga në fotografi të tjera para. Dhe result-- plotësisht underwhelming-- do të jetë e njëjtë. Por ne jemi duke lëvizur toward-- jo, kjo nuk është. Oh, unë e di pse. 

Pra, kjo duket të jetë një bug. Dhe kjo është në një farë mënyre. Por më lejoni të hapur Rrjeti tab tim. Më lejoni të ringarkoni faqen. Ah, pse CSS nuk po zbatohet? Well, fotografi CSS, në mënyrë të ngjashme, ka të jetë i lexueshëm në botë, kështu që të flasin. Dhe kjo shumë është e ndaluar aktualisht. Pra, më lejoni të bëj një chmod a + r yll dot CSS-- whoops-- ne jemi dot CSS është vetëm file extension për fotografi CSS. Tani më lejoni të kthehem tek shfletuesi im dhe reload. OK, pak më të mirë. 

Tani, më lejoni të bëj një gjë të fundit. Në kërkim-4.html. Unë kam një version që unë vetëm menduar ishte mënyra pije freskuese, megjithëse mënyrë më komplikuar. Le të shikojmë në rezultat të parë. Mbyllë këtë për të na japë më shumë hapësirë. Ndrysho këtë kërkim-4, Enter. 

Dhe tani një bandë e gjëra janë thyer. Unë jam duke shkuar për të shkuar mbrapa në directory time këtu. Dhe tani unë jam vetëm duke shkuar për të bërë a chmod i një R + mbi një file-- sepse unë e di se exists-- quajtur logo.gif, e cila eshte nje imazh. Dhe tani reload. Dhe wow-- kështu që tani unë jam mjaft të ngushtë, sinqerisht, të pëlqen versionin e Google 1999, dhe sinqerisht, versioni 2014 i Google, e drejtë? 

Pra, ajo tani do të faqen e internetit e tyre, në fund të fundit, në qoftë se unë të kërkuar për macet. Dhe në të vërtetë është. Por ajo që ka të bëj ndryshe në këtë version 4? Pra, ne nuk do të ndalem shumë në atë këtu. Ju do të shihni këtë në problemin vendosur shtatë përfundimisht. Por vini re kam bërë disa gjëra. 

I futur një div tag, i cili është ndarja, ngjashme në frymë të një paragrafi tag. Por një ndarje është vetëm si, këtu është një rajon drejtkëndëshe padukshëm e ekranit. Le t'i jepte një të veçantë identifikues, një futboll, vetëm në mënyrë që ne mund të flasim për atë në HTML tonë diku tjetër. Këtu është një div e faqes të cilit ID do të jetë i kënaqur. Kjo është përmbajtja e faqes. Dhe këtu është header e faqes. 

Me fjalë të tjera, unë kam në thelb në HTML jam mendërisht shikojnë këtë faqe interneti si tre komponente, a header deri këtu me këtë drejtkëndësh padukshme, Përmbajtja në mes, dhe pastaj futboll poshtë poshtë, madje edhe edhe pse ne nuk i shohim këto gjëra. Sepse unë dua të në kokën time e faqe këtu, ose në një skedar .css, Unë mund të përdorni këtë sintaksë. 

Header nuk është një tag. Kjo është një ID kështu që kthehet se duke bërë #header, Unë tani mund të aplikojnë një ose më shumë Pronat në kokë. Unë mund të bëjë të njëjtën përmbajtje, njëjtë për përmbajtje këtu. 

Kështu për shembull, në futboll, njoftimin të gjitha këto prona që unë jam duke shtuar. Dhe unë e di se ata ekzistojnë vetëm nga leximi deri në dokumentacionin për CSS. Font size do të jetë smaller-- kështu që disa madhësinë relative font. Pesha do të jetë e guximshme. Margin-- si shumë piksele rreth it-- është 20 pixels. Dhe kjo do të jetë në qendër. 

Por tani, faqja duket si ky. Nëse unë nuk jam i kënaqur me kopje e mia të drejtë atje, Unë mund të bëjë diçka si ngjyra e kuqe. Dhe atëherë unë mund të shpëtojë këtë, ringarkoni, dhe tani unë kam stilizuar futboll. Pra, kjo është vetëm nënkuptuar në pushtet të asaj që ju mund të bëni në një faqe interneti për të ndryshuar gjërat. 

Dhe madje edhe pije freskuese se këtë, në qoftë se ju dëshironi të thes rreth me faqet e internetit aktuale, ju nuk mund të ndryshojë përgjithmonë ato. Por në qoftë se unë të hapur Inspektori Chrome përsëri dhe unë nuk shkoj në anën e majtë këtu, e cila tregon HTML Facebook, por tregon në të djathtë hand side gjithë CSS saj, ju ose mund të dhe ndryshojnë gjërat në fluturojnë. Pra më lejoni të shkoj përpara dhe të bëjë këtë. 

Më lejoni të shkoj përpara dhe të kontrollit klikoni në këtë fjalë të rastit këtu, nënshkruajë, dhe klikoni Inspect Element. Chrome shumë të përshtatshme për hedhje tag h1 që Facebook është duke përdorur. Dhe vini re këtu Facebook ka lloj lazily vështirë koduar madhësinë e shkronjave, si një pronë këtu. 

Pra, gjëja e ftohtë edhe pse është e se në qoftë se unë në fakt shkojnë këtu dhe thonë, oh, Facebook, unë nuk e pëlqen atë 64 pixels, ne tani mund të ndryshojë në Facebook. Natyrisht, ne jemi vetëm duke ndryshuar atë për mua personalisht në këtë moment. Por kjo është vetëm një tjetër mjet në kit tonë mjet që do të na lejojë që të shkulje dhe të kuptoj se si dhe diagnozë Çështjet në faqet tona web. Dhe ne mund të shkojnë mbi të ngjashme këtu, e cila është e njëjta gjë. Nëse jeni të vërtetë doni të merrni dashuroj, unë do të thotë, tani ju mund të vërtetë të shndrrohet faqe dhe të bëjë gjëra të çmendur. 

Pra, pse është e gjithë kjo e dobishme? E pra, në fund të fundit, ne jemi do të duan të jenë të në gjendje për të krijuar faqe web që janë të shtyrë nga skajet tona mbrapa, jo vetëm nga Google dhe outsourcing në fund mbrapa atje. Ne fakt duam vlera, për shembull, i veprimit motorit tonë search atribut për të mos shkuar dikujt tjetër, por për diçka si search.php, ku search.php është në serverin tonë, jo dikush tjetër. 

Dhe kështu që të merrni atje, ne fakt nevojë për të futur një gjuhë të re. Pra, ne kemi shikuar tashmë në një të ri Gjuha këtu, ose dy të vërtetë, HTML dhe CSS. Por ata me të vërtetë janë vetëm Gjuhët strukturore dhe estetike. Ata nuk po e programimit Gjuhët në vetvete. Dhe kjo është në lidhje me sa më shumë formal Ora si ne do të kalojnë mbi ta. Sepse ne do të fillojmë tani të kalojnë në PHP. 

Pra, PHP është një aktuale gjuhë programimi. Kjo është një gjuhë e shkruar në kuptimin që kjo është për qëllim të jetë pesha të lehta se diçka si C. Dhe kjo është një gjuhë interpretuar, që do të thotë se nuk është hartuar. Pra, me pak fjalë, çfarë e bëri atë të thotë kur kemi përdorur një gjuhë si C dhe ne kishim për të hartuar atë? Çfarë do të thotë të përpilojnë kodin burimor C? Audienca: [padëgjueshme]. DAVID J Malan: Thuaj atë përsëri? Audienca: [padëgjueshme]. DAVID J Malan: Perfect. Ajo e kthen atë në binar. Ajo e kthen atë në zero dhe ato nga kodi burimor angleze si aktuale. Dhe pastaj ne mund të vërtetë drejtuar ato zero dhe ato nëpërmjet kalimit CPU nga dyfishtë klikuar një ikonë ose drejtimin e një komandë. 

PHP dhe Python dhe Ruby dhe Perl dhe JavaScript dhe bunches e të tjera gjuhë janë interpretuar gjuhë, e cila është për të thënë ju nuk përpilojnë ato. Përkundrazi, ti ushqyer ato si input në një program të quajtur një përkthyes. Dhe kjo përkthyes, të cilat dikush tjetër shkroi, lexon kodin tuaj burim lartë deri në fund, majta në të djathtë dhe vetëm interpreton ato linja dhe bën atë që ju thoni. 

Pra, nëse ju hasni a linjë që thotë të shtypura, kjo nuk do të konvertohet shtypura me zero përkatëse dhe ato. Ajo vetëm ka këtë përkthyes si a nëse kusht i madh që thotë, nëse udhëzimi programues është shtypura, pastaj të bëjë të mëposhtme. Pra, ai e interpreton atë vetëm nga lloji e arsyetimit me atë që ju jeni duke thënë se për të bërë. 

Dhe PHP është një prej këtyre gjuhëve. Dhe PHP vjet më parë është projektuar pikërisht për programimin e web. Dhe kjo ishte fillimisht një gjuhë shumë të lëngshëm të çrregullt. Dhe me të vërtetë, ka një të madhe Shuma e kodit të këqija PHP atje. Por vetë gjuha ka pjekur gjatë viteve, aq shumë në mënyrë që tani është në fakt një hap tjetër i mrekullueshëm pedagogjike nga C për shkak se është kështu darned njohur për çdo gjë ju keni parë vetëm në javët e fundit. 

Një ndryshim fillestar ne do të shohim ka nuk ka asnjë funksion kryesor më. Kur ju filloni kodin shkrim, është vetëm do të merrni ekzekutuar pa marrë parasysh se çfarë, si ne do të shohim në një moment. Ndërkohë, këtu është ajo a ndryshueshme duket si në PHP. Kjo është pak më ndryshe, por vetëm mezi. 

Në PHP, nuk ka strong typing. Ka javë typing, e cila thjesht do të thotë se lloje të të dhënave si strings dhe numrat dhe gjëra të tjera. Por ju nuk e mërzit specifikuar atë që ata janë më. PHP shifrat atë për ju. Shenja dollari është vetëm një vendim që PHP populli bërë vjet më parë e tillë që çdo variabël në PHP vetëm fillon me një shenjë dollar. Kjo është në fakt lloj i dobishëm në atë ajo hedhje nga ju pak më shumë. 

Por pas kësaj, kjo është një kusht në PHP. Çfarë është e ndryshme në krahasim me C? Gënjejnë question-- asgjë, e cila është në të vërtetë me të vërtetë e bukur. Shprehje Boolean në PHP-- njëjtë. Shprehjet me Boolean dhe kundrejt ose, çelsin, unazore, sythe, loops-- OK, kjo është e ndryshme. 

Pra, ajo rezulton se ka a Disa karakteristika të tjera në PHP. Një prej tyre është në të vërtetë kjo, e cila është mrekullisht i përshtatshëm. Nëse $ numrave është një koleksion që ju keni deklaruar më parë në një program, ju e keni këtë zbukuruar për çdo konstrukt që në vend të bëjnë gjithë atë I bezdisshëm barabartë 0, I është më pak se kjo, [? I ++?], për çdo numrat si numër, ku çdo e këtyre vlerave shenjë të dollarit është vetëm a variable, dhe fundit ju mund të mendoni si I. Ju mund të telefononi atë gjë që ju dëshironi. Unë e quajti atë numër. Kjo do të iterate mbi array quajtur numra. Dhe në çdo përsëritje, është e do të update automatikisht për ju numrin shenja dollari ndryshueshme në mënyrë që ju vazhdimisht të kenë qasje në variablin që ju dëshironi pa pasur nevojë të bëni ndonjë parantezë katror simbol ose indeksimit në një rrjet. 

Përtej kësaj, ne kemi edhe gjëra të tilla si vargjeve, të cilat duken pothuajse të njëjtë, përveç se është shumë e zakonshme, pasi ne do të shih, si në PHP dhe JavaScript të para nisja një grup duke përdorur kllapa katrore. C përdor formatimin e teksteve kaçurrel. Pra, kjo është pak më ndryshe, edhe pse ne nuk të vërtetë e përdorin këtë mashtrim shumë. 

Por edhe më fuqishëm, PHP ka vargjeve associative, e cila është një mënyrë e sofistikuar të thënë tabelave hash. Në fakt, në qoftë se ju doni të shpallë një hash tavolinë në PHP, ndryshe nga C-- sa rreshta të kodit u desh të në fakt të zbatuar një tabelë hash në C? Ose sa rreshta të kodit është ajo duke marrë për të zbatuar një tabelë hash në C? Pra, kjo është ndoshta një shumë, e drejtë? Kjo është një duzinë pak, ndoshta 100 apo 200. Është jo banale. Apo është gati të jetë, si të ju së shpejti do të shihni, jo banale për të zbatuar një tabelë hash [Padëgjueshme] dhe gjithashtu një provoni. Por në PHP-- dhe sinqerisht, unë ndoshta nuk duhet të ju them këtë deri Monday-- në PHP, nëse ju doni një tryezë, bërë. Kjo është një hash table-- kështu me një linjë të kodit. Dhe 

Një shumë e gjuhëve të bëjë atë. Have fun me pset pesë. Pra, një shumë e gjuhëve të bëjë këtë. Ata ju japin këto abstraksionet se njerëzit e tjerë, programuesit e tjerë, kanë krijuar për ju në mënyrë që të ju mund të qëndrojnë mbi supet e tyre dhe të fillojnë duke përdorur idetë që janë super imponues, si tavolina hash dhe pemë dhe përpiqet. Por ju nuk domosdoshmërisht duhet të zbatojë këto gjëra vetes. 

Dhe kështu në fund të fundit, çfarë ne jemi duke shkuar për të përdorur PHP për është potencialisht shkruar programe i ashtu-quajtur command line. Ne mund të krijosh çdo program ne kemi shkruar këtë semestër deri tani, me përjashtim të ndoshta Breakout cili përdor SPL, cili eshte specifik të C momentin. Por çdo problem tjetër të vendosur, sigurisht Mario dhe Caesar dhe Vigenere dhe [? Crack?] Dhe në vazhdim, ne mund të ri-zbatuar në PHP, dhe ndoshta pak më të lehtë. 

Por ajo që ne jemi duke shkuar në fund të fundit për të përdorur PHP për të është programimit web. Dhe ne jemi duke shkuar për të prezantuar ardhshëm Javën e një model mendor, një paradigmë të quajtur MVC, view Modeli kontrollues, e cila në qoftë se ju keni bërë programimit para në Python ose Ruby ose diku tjetër, ju mund të dinë e këtij ekipi me Binarët dhe Django dhe si. Por në qoftë se ju jeni e re në këtë shumë, ju do të shihni se kjo është në fakt një shumë e natyrshme Zgjerimi i faktorizimi dhe lloj të dizajnit e kodit që ne kemi janë bërë në C. Ne jemi duke shkuar për tani të aplikoni disa nga këto mësime në PHP në mënyrë që në fund të fundit, ne jemi zbatimin e vet faqet tona. Dhe nëse ju jeni lloj mesmerized ose i habitur që ne jemi duke shkuar për të bërë të gjitha në mënyrë të shpejtë, kuptojnë se pothuajse çdo semester, gati 90% e studentëve CS50, duke përfshirë edhe ato të cilët kurrë nuk kanë programuar më parë, përfundojnë duke e bërë projektet përfundimtare që janë të bazuara në programimin e web. Dhe kështu që ju do të shihni se kthimet janë të larta në javët që do të vijnë. Pra, ne do të shihemi më pas të hënën. 

Gjuha 1: Dhe tani, Deep Mendime nga Daven Farnham. Tavolina hash. 

[Qeshura]