[Speel van musiek] DAVID J MALAN: Alle reg, welkom terug. Dit is CS50. Dit is die einde van die week sewe. En dit is die einde van die aasdier jag van die probleem stel vier dat jy kan onthou. Na die herstel van al diegene JPEG van personeel, jy is uitgedaag, as jy wil, jouself te neem met soveel van dié mense as wat jy kan. Ons het 'n hele klomp van die voorleggings oor die afgelope paar weke, Trouens, 'n hele paar reg voor die middag vandag, waarvan sommige wat hier, gevang hier in-- lyk like-- Annenberg Hall by kantoorure, een hier in Lowell Huis met Nick. Hier is Ramon gevang op die selfoon. Dit was op 'n CS50 middagete. Dit was Jason Skyping met 'n meer kreatiewe klasmaat, wat hom gebel hierdie manier. Ons weet nie wat dit was. 

[Gelag] 

DAVID J MALAN: Maar dit is die moeite werd om 'n GB. Hier is Chang, wat letterlik gehardloop van die verhoog af om te verhoed dat gefotografeer een dag, maar is uiteindelik gevang. Hier is Nick. Hier is Nick. Hier is Nick. En hier is Alison deur die veld. En Zamyla selfs gevind 'n ballroom-kompetisie. So sal ons gaan deur hierdie foto's, uit te vind wat ingedien is die mees die vroegste, en beloning een fantastiese prys, soos belowe in die spec. En ons sal ook opvolg oor die ruimte wat betrokke was. 

'N Paar announcements-- so middagete is, weer, hierdie Vrydag by 13:15. As jy wil ons aan te sluit, RSVP by daardie URL hier. Jason verskyn weer hier van die een van die afdelings 'n paar jaar terug, wat gebeur om te val op Halloween. En inderdaad, hy geklee as 'n pampoen daardie spesifieke jaar. As jy kyk na hierdie artikel van sy vanaf 2011 artikel agt, as jy nuuskierig is, by CS50.tv, ek dink Dit was die jaar waarin sy lug pomp gewerk. 

As jy dan kyk na die soortgelyke artikel in 2012, jy sal sien hierdie Jason baie afgeblaas, sedert die pak nie meer gefunksioneer, wat net om te sê Vrydag, as jy wil graag 'n pampoen met Daven te kerf en Gabe en ander, RSVP aan die hoofde by cs50.harvard.edu adres. Dit beloof om groot pret te wees. Daven, is ons vertel, beklee pampoene al van sy lewe. Gabriel uit Brasilië het nooit uitgekap 'n pampoen vir Halloween. So is daar by hulle as hy leer. 

Seminare, meanwhile-- so jy sal gou leer oor wat ons verwagtinge is vir die finale projek, wat in wese sal neerkom op ontwerp en implementering van die meeste enige projek van belang is vir jy, al is dit onderhewig aan die goedkeuring en leiding van jou onderrig mede. Teen die einde van die semester, is daar 'n aantal seminare, wat is opsioneel klasse gelei deur die onderrig genote en Harvard personeel, vriende van die kursus oor kampus, oor verskillende onderwerpe wat is raaklynig aan die Natuurlik se onderliggende leerplan maar tog van toepassing, pret, en verskillende potensiële finale projekte. 

Byvoorbeeld, in die eerste, as jy wil te registreer, hoof aan daardie URL daar. En dit is die besetting vir hierdie jaar se seminare alleen. Maar besef ons het dosyne seminare van die afgelope jare, wat almal gekoppel in die Seminars spyskaart opsie van die kursus se webblad. So as jy dink oor verder gaan as jou gemaksone of pluk 'n paar nuwe vaardighede, byvoorbeeld, programmering iPhone programme met Swift, 'n nuwe taal Apple of Objective-C of Android-of ontwikkeling [? cue?] gloeilampe, of enige van die onderwerpe hier en meer, as gevolg tjek die registrasie bladsy. 

So het ons begin en gesluit Maandag met soek by http. So vinnig refresher-- HTTP, HyperText Transfer Protocol. Maar wat beteken dit werklik? Wat beteken dit werklik? Is dit 'n hand? Ek weet dat jy net krap jou kop. Maar jy wil te stel wat HTTP is? 

Publiek: Hoe rekenaars kommunikeer met [onhoorbaar]. DAVID J MALAN: Ek, die laaste deel gemis. Hoe rekenaars kommunikeer with-- 

Publiek: Internet bedieners. DAVID J Malan Good-- met internet bedieners, en spesifiek, web bedieners. Omdat Onthou, daar is 'n klomp van die dienste op die internet, waarvan sommige jy waarskynlik gebruik daagliks tussen chat en boodskap, chat, en web en e-pos, en dies meer. En HTTP is net die protokol wat webblaaiers praat wanneer met kommunikasie web bedieners, en omgekeerd. En die analoog in die menslike wêreld sou wees, Ek brei my hand 'n paar te skud ander menslike en hy of sy erken deur die uitbreiding sy of haar hand so goed. So dit is net 'n protokol, 'n stel konvensies. 

En wat inderdaad is dié konvensies? Wel, is dit net kom neer op die stuur van boodskappe heen en weer, soos ons hier uitgebeeld. En daar is 'n paar van die maniere wat jy kan hierdie boodskappe stuur nie. En miskien die mees gemeen het, is bekend as get. En ons sal 'n kontras te sien hierdie kort voor lank. 

Maar 'n get versoek van 'n leser aan die bediener net so lyk. Dit is 'n klomp van die teks wat dit sit binnekant van 'n virtuele koevert. Aan die buitekant van die koevert gaan 'n paar stukkies van die inligting. Wat moet om te gaan op die koevert, so te sê, ten einde 'n versoek soos te kry dit van my om 'n web bediener? Ja. 

Publiek: Jou IP adres. 

DAVID J MALAN: My IP adres in die veld, om so te praat, En natuurlik, die ontvanger se IP adres. Maar in die geval van 'n web pakkie, Ons moet 'n bietjie meer detail Dit is nie voldoende om net te stuur 'n koevert met 'n bediener, want dit bediener kan wees luister vir verskillende tipes van internet verkeer. So wat anders moet ons Behalwe die ontvanger se IP? Ja? 

Publiek: Is dit TCP? DAVID J MALAN: Goed. TCP-- 

Publiek: adres. 

DAVID J Malan-adres, of hawe, soos dit genoem word. Maak nie, maar 'n TCP-poort nommer. En daar is 'n klomp van hulle nie. Maar seker die mees vertroud moet uiteindelik 80, wat is die standaard een wat gebruik word vir die web verkeer. En 'n ander bekende een sal binnekort 443, wat gebruik word vir 'n veilige web verkeer, URL's wat begin met https. 

So dit is wat gaan binnekant van die koevert. En kry / net beteken, gee my die standaard web bladsy. Gee my die wortel van die harde ry op die web bediener. En hopelik die web bediener sal reageer met, OK en die getal 200, wat net 'n konvensie gesê, ja, al inderdaad OK. Hier is die bladsy. Die tipe van die webblad gaan wees teks, maar meer spesifiek, HTML, wat ons oor om weer in te duik. En die dot dot dot net middel, hier is die HTML. En dit is waar ons haal die storie vandag, eintlik skryf HTML, HyperText Markup Language, wat is die taal waarin webblaaie word geskryf. Dit is nie 'n programmeertaal. Daar is geen funksies of lusse of voorwaardes. Dit is 'n opmaak taal, sowel vandag sien weer, wat jy kan spesifiseer hoe om die struktuur en stileer esteties 'n webblad. 

So dit is die een en slegs bladsy ons regtig gekyk word, indien kortliks, gister gesê. En kennis van 'n paar uitstaande kenmerke. Daar is 'n baie oop skuins bracket en naby skuins bracket. In tussen die skuins hakies is woorde. En ons gaan om te begin roep hierdie woorde tags. So oop bracket kop en geslote bracket kop die oop en geslote etikette, of die begin en einde tags onderskeidelik, van 'n HTML element, soos ons dit sal noem, die sogenaamde kop. En dieselfde jargon toepassing om die liggaam in HTML en so meer. 

En wat is lekker is HTML-- en inderdaad, ons sal spandeer verskriklik min tyd op dit, want jy sal meestal net uit te vind watter eienskappe dit het wanneer jy eintlik 'n konkrete probleem te solve-- jy sal vind dat 'n leser is redelik dom. Dit is net gaan nie in teenstelling met do-- 'n computer-- wat jy vertel om dit te doen. En so wanneer jy 'n oop bracket HTML by die top daar, wat in wese net beteken, hey, die leser, hier kom 'n web bladsy geskryf in HTML. 

Wanneer dit sien oop bracket kop, wat net beteken, hey, die leser, hier kom die kop, of die boonste gedeelte van my webblad. Wanneer dit sien 'n geslote bracket kop, wat net beteken, hey, dit is dit vir die kop. Bystand vir iets anders. En dat daar iets anders is blykbaar gaan om die liggaam te wees nie. En as jy nie 'n etiket, soos jy het net hello, komma, wêreld, wat net gaan rou teks te wees dat uiteindelik in die skerm vertoon word. 

Nou, jy sal ook sien die inkeping hier. Jy kan waarskynlik lei hoe ons stylizing dit. Elke keer as ek 'n merker oopmaak, so te sê, ek keep. En elke keer as ek sluit 'n merker, ek un-streepje, soortgelyk in gees krullerige draadjies. En as dit nie, ek is soort van die gebruik van my reg. Let daarop dat ek het nie die moeite te slaan Tik binnekant van die titel tag. Hoekom? Wel, ek het net besluit dit lyk 'n bietjie skoner vir my, die mens, net nie die moeite om dit te doen. So weer, daar is 'n paar uitspraak noem net asof daar in C of enige taal. 

Maar let ook op dat hierdie inkeping leen hom tot 'n geestelike model, nie oor bemoeilik dit. Maar 'n boom, reg? As jy dink van 'n web bladsy, blykbaar geskryf soos hierdie, as mooi ingekeep dat die pad, jy kan amper dink aan die oop bracket HTML geslote bracket merker afbakening die wortel van 'n knoop, 'n familie boom styl knoop in die styl van die bome Ons kyk na verlede Vrydag. 

En inderdaad, ons het op die reg hier wat ons sal 'n DOM, D-O-M, dokument noem voorwerp model, 'n fancy manier om te sê 'n boom wat daardie HTML. En sien dat HTML het, sal ons sê, soos 'n stamboom, twee kinders. Aan die linkerkant is die hoof. Aan die regterkant is die liggaam. 

En net as 'n sinnelose gedagte oefening, kop, natuurlik, het hoeveel kinders volgens hierdie struktuur? Dus net een, title-- en dit is hoekom ons 'n die pyl gaan van kop tot die titel. Dus is dit asof daardie persoon in die stamboom het net een geslag. En dan titel self kan word gesê dat 'n kind te hê. 

Onthou dat die HTML gehad hello, komma, die wêreld daaronder. En ek het net getrek dit in 'n ovaal in plaas van 'n reghoek net te semanties dra dat selfs al dit is 'n knoop in die boom, so te sê, dit is soort van fundamenteel anders. Dit is nie 'n etiket. Of meer behoorlik, dit is nie 'n element. Dit is net 'n teks knoop, as jy wil. Maar dit is heeltemal arbitrêre menslike konvensies. Dit is nou net my manier van verteenwoordig wat ek sal so 'n totale noem die dokument. 

En as 'n eenkant, die ding op die super boonste linkerhoek, oop bracket uitroepteken doc tipe HTML, dit lyk soos 'n tag, maar dit is die dom hoek geval waar dit is net daar, gekopieer en geplak die blaaier om aan te dui Dit is HTML weergawe 5. Die wêreld hou die verandering wat die eerste reël van die kode in 'n bladsy moet wees. Dit beteken net weergawe 5. So is dit nie heeltemal lyk soos die ander. 

Alle reg, so met daardie gesê het, jy nou sal waardeer hierdie redelik hierdie stupid Een iemand het. 

[Gelag] 

DAVID J MALAN: Alle reg, En nou, laat se werklik duik in om iets te doen met hierdie. Jy sal die laaste keer onthou Ek het ook die CS50 toestel en ek het iets soos eenvoudig soos die opening van gedit. En ek het die lêer gestoor selfs op my desktop-- nêrens special-- as hello.html. 

So laat my dit doen again-- hello.html Enter. En nou in hierdie lêer, ek gaan gaan voort en herhaal wat ons nou net saw-- doc tipe html Toe ek gaan doen oop bracket html geslote bracket. En dan gaan ek preemptively oop en toe die etiket. Hoekom? Net sodat ek nie later nie vergeet nie. Dis net goeie praktyk, soos die opening en die sluiting van krulhakies alles op een slag. 

En dan wat het die volgende? Jy kan dink van die Een. 

Publiek: Die kop. 

DAVID J MALAN: Die kop. En dan in hier, ek het die titel, dink ek. En die titel was arbitrêr, hello, wêreld naby titel. En dan hier, die liggaam, van course-- dan sluit ons die liggaam tag. En dan net 'n bietjie kere, Ek het dieselfde ding hier. 

So ek beweer dat dit is 'n web bladsy. Dit is iets wat kon woon nou op die web, selfs al is dit natuurlik is letterlik wat op my lessenaar nou. Maar inderdaad, as ek minimaliseer gedit, Ek sien op my lessenaar sy ikoon. Selfs al is dit die toestel, jy dit kan doen op 'n Mac OS sonder Text Editor of Vensters met Notepad selfs. 

En as ek gaan voort en dubbel kliek dat selfs, en select-- goed, laat nie kies dat omdat Chrome is nie die opening. Kom ons gaan voort en maak Chrome. En dan doen Command-O vir 'n oop En gaan na my lessenaar en maak die lêer. Dit is hoe 'n leser interpreteer HTML, bo na onder, links na regs. Hey, die leser hier is HTML. Hier is die kop. Hier is die titel. Hier is die liggaam. En inderdaad, dit is hoe dit maak dat webblad. 

Maar kennis van die URL. Nie een van julle kan trek hierdie spesifieke bladsy op jou skootrekenaars nou, selfs binnekant van jou toestel via die URL, omdat lêer: // dui dit eintlik op my lêer stelsel, my hardeskyf, nie joune nie. So dit is nie al wat nuttig. 

Kom ons beweeg nou in die rigting van met behulp van 'n werklike webbediener. En dit blyk uit die CS50 toestel is meer as net 'n omgewing waar jy kan C-kode te skryf en saam te stel en dit loop soos jy gedoen het. Dit is ook reeds ingestel deur die personeel 'n tipiese web te verteenwoordig bediener wat is op die internet, een wat jy kan betaal vir of een wat in die sogenaamde wolk. 

En dit loop standaard gratis open source sagteware, byvoorbeeld, iets genoem Apache, wat miskien nog steeds die mees gewilde web bediener sagteware in die wêreld dat duisende van die webwerwe gebruik vandag. En dit het ook selfs ' sagteware soos MySQL, wat is 'n databasis bediener dat ons uiteindelik sal kry om, wat net om te sê Ek kan begin behandel my toestel as 'n volwaardige bediener dat ek nie betaal vir elders. Dit bly net op my eie laptop vir ontwikkeling en gerief doeleindes. 

So laat ons gaan voort en neem voordeel van hierdie. Ek gaan om voort te gaan en maak 'n terminale venster. En ek gaan om voort te gaan en move-- eintlik eers ek gaan om na my lessenaar. As ek dit doen LS, daar is hello.html. En ek gaan om te gaan voor en begin met 'n nuwe gids wat ons het nie gebruik voor vandag. 

hello.html-- ek gaan om te beweeg te ../vhosts vir virtuele hosts-- meer op wat in die future-- en dan in 'n gids genaamd localhost, wat is die bynaam gegee tot byna enige rekenaar, of dit nou 'n Mac, PC, of Linux rekenaar, en dan spesifiek in 'n gids wat ons, die personeel reeds vir jou geskep wanneer jy die toestel genoem afgelaai publiek. En soos sy naam suggereer, enigiets Ek het in hierdie gids, in teorie, gaan nou publiek, ten minste vir mense wat 'n direkte hê verbinding met my rekenaar. 

So nou laat my voort te gaan en doen CD wat dieselfde gids sodat ek kan sien wat aangaan en die tipe LS. En inderdaad, dit is die enigste ding wat daar in. Ek het nou dat omdat ek het hierdie eis lêer hello.html binnekant van 'n gids genoem openbare binnekant van 'n gids genoem localhost binnekant van 'n gids genoem vhosts, wat danksy CS50 personeel het reeds ingestel te wees die wortel van jou web bediener Ek kan nou hopelik doen. 

Ek gaan om oop te maak 'n nuwe blad. En ek gaan om te gaan nie na 'n lêer: //. Ek gaan om te gebruik werklike http / localhost, wat weer, is die bynaam vir my eie bediener. En dan gaan ek om te gaan na wat lêer naam, net om duidelik te wees? Waar is hierdie storie waarskynlik gaan? hello.html. 

So met ander woorde, ek wil nou hierdie is my eie rekenaar, my eie toestel, asof dit 'n werklike bediener. Sy bynaam is local host. Maar dink localhost as soos Facebook.com google.com, wat ook al. Dis net my plaaslike naam. En dan is die finale ek wil hê, is in die wortel van die hardeskyf, so te sê, of die wortel van die web bediener, ergolitiese slash en dan die naam hello.html. 

Laat my zoom uit en druk Enter. En inderdaad, daar is nou my webblad. Dus is dit effens anders. En dit is net so underwhelming. Dit is die ou weergawe. Laat my krimp die lettergrootte terug. Dit is die ou. Dit is die nuwe. Maar wat gebeur fundamenteel nou is dat HTTP word gebruik. 

Kom ons maak dit 'n bietjie meer duidelik of, as jy wil, 'n bietjie meer ingewikkeld. Laat my gaan na die onderste regterkantste hoek van my toestel. En agterkom dat al hierdie tyd, is daar 'n aantal. Dit is die unieke adres jou CS50 toestel. Dit is 'n private-adres, soos geïmpliseer deur die 172,16, wat beteken maar net jy fisies kan toegang tot hierdie webbediener. Alles is firewalled en mooi beskerm teen die res van die wêreld as gevolg van hierdie aanspreek. 

En nou sien maar as ek gaan na hierdie adres nie in my toestel, maar in Mac OS-- ek gaan om terug te gaan oor hier. Dit is my Mac nou. En nou gaan ek om oop te maak hierdie weergawe van Chrome hier. En ek gaan om te gaan na http: //172.16.25 / En ek vergeet van die rest-- 133. 

So ek gaan besoek uit my Mac dat die IP-adres /hello.html Enter. En nou sien ek uit my Mac dat my CS50 Appliance, wie se IP adres is dat nommer, wel optree soos 'n web bediener op die internet. Dit hoef nie 'n lekker maklik om te Onthou naam soos Facebook.com, maar dit is met behulp van HTTP glo, selfs al Chrome is 'n soort van die vereenvoudiging van die wêreld vir ons, maar ons nie vertoon HTTP. Maar dit is inderdaad presies dit. Chrome is net 'n paar spaar toetsaanslagen hierdie dae. En dit is wat ons nou sien. 

So dit is alles goed en wel. Maar dit is 'n mooi underwhelming bladsy. Laat my gaan in en doen iets 'n bietjie anders nou. So laat my terug te gaan na gedit. En in plaas van hello, wêreld, laat ons 'n beeld. En ek beweer van before-- laat my gaan in my localhost gids publiek. En laat my gaan voort en kopieer 'n hele klomp van lêers van vandag uit my Dropbox gids tot hier. 

Nou as ek tik LS, kyk na al hierdie lêers wat ek versprei deur die Natuurlik se webwerf in die opmars van vandag, waarvan een is nog steeds hello.html. So daar is dat 'n mens. En onthou hierdie dom een van verlede time-- cat.jpg. So laat ek probeer om in te sluit cat.jpg binnekant van my webblad. 

Ek gaan om voort te gaan en doen cat.jpg, red. Laat my terug te gaan na Chrome. En laat my zoom in die font en nou herlaai. Oeps, waar ek dit? Standby-- Ek het nog steeds die ou weergawe van my lessenaar oop. So laat my gaan na my vhost, my localhost, my openbare en hello.html. So nou laat my voort te gaan en sê cat.jpg binnekant van die liggaam waar ek wil hê dit moet wees vertoon en herlaai. Natuurlik, dit is nie korrek nie. 

So ek moet die leser 'n bietjie te vertel meer doelbewus wat ek wil om dit te doen. Eenvoudig te tik die naam is natuurlik nie voldoende nie. So onthou dat daar 'n ander tag, beeld, img vir kort. Dit is net omdat die mens hou nie van die tipe vol woorde. En dan kan ons bron doen = "cat.jpg". 

En nou is ek gaan doen een ding anders hier. Selfs al is al ons etikette dusver het het hierdie idee van 'n begin tag en 'n einde tag, wat nie regtig nie sin vir 'n beeld, reg? 'N beeld is daar of nie daar nie. En so het die mens het gekom met 'n eenvoudiger konvensie. Wanneer jy 'n etiket wat kan beide begin en eindig op dieselfde time-- dit leeg kan wees, so net speak-- sit slash binnekant van die etiket aan die einde. Laat my terug te gaan na my leser nou. Getref herlaai Damn, iets is verkeerd. Jy het waarskynlik gesien dat hierdie soms op die web, selfs al is dit nie jou skuld nie. Dit is die web-bediener se skuld nie. Wat odes hierdie blyk aan te dui? Dit is gebreek. Dit is waar die beeld behoort. Ja? 

Publiek: Maar dit maak nie het toegang tot die beeld. 

DAVID J MALAN: Dit maak nie het toegang tot die beeld. Dit is, of nog erger, miskien dit nie eens bestaan ​​nie. Kom ons kyk of ons nie kan diagnoseer nie. Onthou van verlede tyd dat indien in Chrome, in die toestel, of selfs op jou Mac of PC, jy gaan na die ontwikkelaar spyskaart en gaan na die ontwikkelaar gereedskap opsie, wat jy waarskynlik het nie veel of ooit gebruik het. En as ek gaan om te netwerk en herlaai die bladsy, laat ons eintlik kyk na die HTTP versoeke wat gemaak word. 

Dit lyk soos hello.html is inderdaad OK, vandaar die 200. Maar cat.jpg is 'n 403. So dit is nie 'n 404. Lêer bestaan ​​waarskynlik. 403 beteken verbode. So, dit is 'n bietjie verwarrend. Ek gaan om terug te gaan na my terminale venster. Laat my zoom in hier. En laat my doen 'n LS. Daar is diegene wat dieselfde lêers. 

Laat my dit doen 'n LS-l nou, wat jy het waarskynlik gebruik voor te kyk na lêer groottes miskien of tyd tempel. En ons sien 'n hele klomp van die oorweldigende inligting. Maar let op 'n paar besonderhede. Hier is hello.html in hierdie ry hier en hier is cat.jpg. En dit is net die toestel om use deur te wys JPEG in pers soos hierdie. Maar wat anders is anders langs die grootte van die lêer en die lêer naam? 

Publiek: [onhoorbaar]. DAVID J MALAN: Ja, daar is twee R se hier. Let op wat hello.html het aan die gang. So dit blyk dat die naam van hierdie gids publiek is belangrik. Enigiets in hierdie gids is bedoel om die publiek te wees. Maar dit is nie voldoende net lêers te laai in daar. Jy moet ook verander die modus van die lêers, verander die regte van die lêer om proaktief nie die verstek, en dit is dat ek net kan lees en skryf dit, ek die eienaar. Ek wil die hele wêreld om almal te in staat wees om my lêer te lees, om so te praat. Lees net beteken dit sien. 

En inderdaad, soos jy sal sien in probleem die sewe, dit is wat hierdie R se gemiddelde. Hierdie twee R se gemiddelde laat almal anders in die wêreld ook lees dit, veral nou dat dit is in hierdie gids. So die maklikste manier om dit op te los, is om gaan na my spoedige en chmod vir verandering af en dan doen 'n + r, geheel en al, almal, almal, plus r vir lees, en dan cat.jpg Enter. Dit lyk asof niks gebeur, wat beteken gewoonlik 'n goeie ding. So LS-l again-- nou Kom ons kyk na cat.jpg. En hierdie toestemming lyk te verander. As 'n eenkant, as jy 'n fout en jy, byvoorbeeld, net gemaak your-- Ek know-- nie opstel toeganklik vir die publiek deur 'n ongeluk, jy kan die teenoorgestelde doen, chmod a-r. Hoewel eerlik, moet dit nie in die openbare gids in elk geval as dit is die bron van kommer. 

So nou, laat ons gaan terug na my leser en herlaai. En ek gaan om te klik die klein Ghostbusters simbool wat deel van die skoon te maak skerm sodat ons kan sien nuwe versoeke. En inderdaad, hier is Grump Kat voor. Maar meer belangrik, tegnies, is daar die aantal 200, wat beteken ons het dit OK. Alle reg, so dit is alles goed en wel. Maar ons is nie die maak die beste van webtuistes, of gaan ons te hard te probeer maak die fanciest webtuistes vandag. Maar laat ons ten minste iets doen super bekende voor huppelend af 'n paar ander tags. So dink ek wil net nie 'n kat hier. Dink ek wil eintlik hierdie kat te skakel na iets. 

Ek kan, byvoorbeeld doen iets soos hierdie. 'n anker vir href vir Hyper verwysing equals-- en laat ons net iets doen soos www.google.com naby haal naby bracket. En nou soek vir katte. Close anker tag. So dit het net een soort van fundamentele nuwe detail. Die etiket van die kursus, is anders. Dit is die naam van 'n for anker href of hiper verwysing. 

Maar meer belangrik is, is daar hierdie sintaktiese funksie hier. Dit is wat ons sal begin roep nie 'n etiket nie, maar 'n kenmerk. En 'n kenmerk is iets wat verander die gedrag van 'n tag. En dit kenmerk, href, middel die gedrag van hierdie anker verander sodat wanneer dit gekliek word, dit gaan na hierdie URL hier. En natuurlik, dat URL is Google. 

Intussen, wat is dit teks hier gaan wees? Wel, dit gaan wees wat die menslike eintlik sien as die onderstreepte skakel, so eenvoudig soos dit. So laat ons probeer om hierdie. Laat my dit red. Ek is nog steeds in hello.html. Maar in die weergawes aanlyn, sal jy sien die werklike lêer name wat ons vooraf voorberei. Laat my voort te gaan en te herlaai. En nou is dit 'n baie underwhelming bladsy steeds. Maar as ek hover oor there-- en dit is 'n bietjie klein, but-- jy kan sien in die onderste linkerhoek van die skerm, dit is inderdaad gaan google.com. En as ek op dat dit sal klits my manier om die werklike Google. 

Maar let hier 'n geleentheid vir uitbuiting, net soos 'n eenkant. En ons sal terug te kom na die ander kwessies van sekuriteit voor lank. Want daar is hierdie digotomie tussen waar jy gaan en wat jy sê, jy kan iets doen, soos this-- http://www.google.com. OK, en nou as ek herlaai na besparing wat die bladsy, dit lyk asof ek gaan om te gaan na Google. Maar daar is geen rede waarom ek het om te gaan na Google, reg? Ek kan eintlik gaan iets soos badguy.com, herlaai die bladsy hier. En kennis, is dit nog steeds lyk soos Google. En net as ek skerp genoeg om te hang in die lug hier sien ek dit nog gaan gaan na 'n ander plek. 

So as jy ooit gekry 'n e-pos, veral een van Paypal, of skynbaar uit Paypal jy vra om aan te meld tot jou rekening, hierdie Daarom moet jy nooit ooit kliek skakels in e-pos, eerlik, enige skakels in e-pos. As jy weet jy het die werklike geld in Paypal of Bank van Amerika of Fidelity of enige webwerf, tik dit met die hand in. Omdat kyk hoe maklik dit is om te mislei iemand in die aanbieding wat lyk soos 'n skakel. Maar dit kan eintlik gaan absoluut oral. 

En daar is veel groter dreigemente as dit. Trouens, dit is 'n bietjie van 'n raaklyn nou nie, maar een van die beste wat ek nog ooit gesien het wat sedertdien gesluit is, is iemand daartoe gelei dat mense aan- so dit kan sê, Klik hier om aan te meld in jou rekening, 'n bankrekening. En dit was Bank van die Weste. 

So iemand het hierdie. En dit is 'n bietjie makliker om te sien dit in 'n mono gespasieer font ingezoomd op 'n 30-voet projektor. Maar wanneer dit klein skrif in 'n e-pos wat jy ontvang, dit lyk soos bankofthewest.com, nie bankofthevvest.com, wat iemand betaal $ 10 te koop. En dan is dit hulle gelei het na die ekwivalent van 'n paar slegte webwerf. 

En jy sal sien too-- eintlik wat ons kan doen this-- as ek gaan na die werklike webwerf, bankofthewest.com, weer, Onthou van verlede tyd dat as dit is hul webblad en jy nuuskierig oor hoe dit werk, kan jy beslis gaan Chrome se ontwikkelaar gereedskap. En jy kan sien al die HTML mooi geformateer daar. 

Maar meer tot die punt, jy cam-- laat sluit this-- jy kan gaan na View Ontwikkelaar View Bron. Hoekom het ek nie net kopieer alles En dan het ek kan gaan in my klein gedit venster hier en maak my eie webblad. Slaan dit in hello.html. En waarskynlik dit gaan om te breek, want dit is nie so maklik nie gewoonlik. Maar nou as ek herlaai my eie bladsy op my eie CS50 toestel en druk herlaai, OK, 'n paar dinge gebreek. Maar ek is redelik naby aan wat my eie bank webwerf, reg? Al hierdie HTML-- 

[Gelag] 

DAVID J Malan --I nie actually-- en jy weet daar is iemand daar buite wat sou eintlik kliek hierdie skakels ook. So duidelik, 'n paar dinge gebreek. Maar wat gaan lei ons in 'n bespreking, onnodig nou, soos wat CSS, Cascading Style Sheets, is, en hoe jy eintlik laai die ander HTML-lêers en JPEG-lêers GIF lêers wat die webwerf kan gebruik. Maar dit alles is accomplishable. Maar dit is werklik kom neer op hierdie baie eenvoudige heuristiek. 

So nou laat ons net vlugtig deur 'n paar ander voorbeelde van HTML net om te gee jou 'n gevoel van wat anders wat jy kan doen. Byvoorbeeld, dit is list.html. Dink ek wou 'n webblad te maak met 'n lys van huise in die quad. Ek kan die ul tag gebruik vir geordende lys en dan die lys item kind en dan Itereer over-- of lys rather-- die huise in die vraag. 

En as ek oop om dit op, laat ons dit doen. Kom ons gaan nie te hello.html, maar list.html. Damn dit. Hoe kan ek dit regmaak? Dit is dieselfde probleem as voorheen, reg? So laat my doen chmod-- oops-- chmod 'n + r van list.html. En nou as ek gaan terug na my leser en klik Reload, daar is dit. So as jy ooit wou te maak 'n opsomming lys, kan jy dit doen. As jy wil wees super fancy en maak 'n geordende lys, nie 'n geordende lys verander diegene te ol, herlaai die bladsy, en Nou is die leser sal dit tel vir jou. 

Wat anders kan ons doen? Wel, 'n paar van die others-- indien jy het 'n lang paragrawe van text-- byvoorbeeld, 'n paar Latynse teks soos this-- en jy wil dit in aparte paragrawe, oop p, naby p vir die paragraaf tag. En doen dit weer en weer. En as ek nou oopmaak hierdie lêer, paragraphs.html, wel, hierdie is om irriterende. So laat ons nou net terug te gaan na my vinnige, chmod 'n + R r ster .html-- 'n mooi klein wild card om so te praat. Dit moet al los hierdie probleme vir my. Kom ons laai. Daar is drie paragrawe. 

En nou, laat ons gaan voort en maak 'n ander. Hoe gaan tafel? Jy tafel lyk sien 'n bietjie meer kompleks. Maar dit is dieselfde idea-- oop tag, oop tag, oop, oop, oop, naby tag, oop tag. En dit gebeur te staan ​​vir tafel, wie se grens is glo gaan 'n dik te wees 1-- wat dat means-- ry in die tabel, tafel data, wat beteken 'n sel. En as ek gaan terug na my leser hier en gaan na table.html, jy iets kan sien soos hierdie, afskuwelike. Maar ons sal kry om die punt waar ons kan eintlik dinge mooier as dit. 

So laat my neerlê vir nou. Daar is trosse van meer etikette. En HTML is wonderlik om te haal want eerlik, al wat jy hoef te doen, word gekyk na bestaande webblaaie waarmee jy vertroud is. En jy wil, o, dit is hoe hulle het dit esteties. 

Of jy kan kyk op enige aanlyn hulpbron hoe HTML werk, en jy sal sien dat daar 'n hele woordeskat van ander etikette. Maar met die eenvoudige geestelike model alleen wat byna enige etiket wat jy maak het gesluit word, is dit regtig nie voldoende om jouself te leer HTML na verstaan hierdie basiese idees van etikette en eienskappe en die goed welgevormdheid dat ons het gepraat oor, sluiting enigiets wat ons kan oopmaak sodat ons nie verwar nie 'n leser. So laat ons nou om dit te 'n meer interessante vlak deur te gaan na die werklike. En laat ons gaan na my Mac hier, te google.com. En nou notice-- laat doen. Ek is gong te gaan Instellings, Soek instellings. Ek wil om te draai af die irriterende direkte resultate ding waar dit onmiddellik begin reageer op jou tik. Kom ons doen dit ouer skool so ons eintlik sien wat aangaan. 

So ek gaan red my Google instellings hier. En nou notice-- ek gaan soek vir iets soos katte. En dit is nog steeds besig motor volledige hier nie, maar op grond van dinge mense het in die afgelope getik. Maar let op wat gaan gebeur. 

In die URL op die oomblik is dit net google.com. En tegnies, dit is streep. Google is net spaar 'n karakter en nie vir ons te wys dat. Hulle wys ons https, net wees super bemoedigend dat ons op 'n veilige of geïnkripteer bladsy. 

So laat my gaan voort en soek vir katte. En dit het regtig oorweldigende vinnig. Kyk na die lengte van die URL. Maar dit blyk dat die meeste van hierdie dinge in die URL is eintlik redelik nutteloos. Ek gaan om te begin die verwydering van dinge wat ek nie verstaan ​​nie. Ek sien katte. Ek verstaan ​​katte. Ek weet nie hoekom katte is daar weer. Ek weet nie regtig wat hierdie nonsens is. So ek gaan net te hou beklemtoon en die verwydering van dinge dat ek nie verstaan ​​nie, distilleerwyn die URL in net hierdie. 

Nou kan ek weer raak tik. Dit lyk soos Google nog steeds werk. So vir een of ander rede, is dit die byvoeging van 'n baie goed na hul URL's by verstek. Maar dit is nie streng nodig. So, wat is lekker oor hierdie? Wel, laat ek gaan voort en oop Chrome se inspekteur. Daar is 'n klein muis kortpad vir dit. 

Gaan na die blad Network. En nou, laat my herlaai hierdie bladsy weer. En ek hou van die Shift. As 'n eenkant, implementeer geneig om te kas of red inligting net ter wille van doeltreffendheid's. Maar gewoonlik, hou die Shift en herlaai sal alles dwing om oor te begin van die begin af. En dit is wat ek wil hê om hier te doen. 

En kennis van al hierdie rye wat pas verskyn. Dit blyk dat in enige gegewe web bladsy, kan daar net een lêer involved-- hello.html-- of daar mag wees 52, soos in hierdie geval. Toe ek na google.com, glo, my leser skop af 52 afsonderlike HTTP versoeke. Hoekom is dit? 

Wel, kyk na wat binne van hierdie webblad tot bo. Daar is nie net die teks, maar daar is werklike beelde katte oor aan die regterkant. Daar is 'n kleurvolle logo hier aan die linkerkant. Daar is al hierdie ikone vir 'n mikrofoon en so meer. Daar is 'n baie van die stukke, die bou blokke, kras stukke, as jy wil, hierdie webblad. En wat die leser doen op om die heel eerste lêer, wat is hierdie ry hier, dit is in wese iterating oor die HTML top na onder, links na regs, op soek na dinge soos die beeld tags of ander etikette wat noem ander lêers en wanneer dit hulle sien, gaan en haal hulle via HTTP, lewensvatbare hele koevert metafoor, en dan laat hulle in die toepaslike plek in die webblad. 

Maar let hier as ek fokus op die eerste gooi, soek katte, sien dat, wel dit is met behulp van HTTP 1.1. En ongelukkig, Google Chrome nou in weergawe 39 is 'n soort van dumbing dinge af en nie wys ons die werklike kop. Maar wat is inderdaad gestuur is om 'n versoek vir nie streep, maar / search? q = katte. 

Nou, hoekom is dit belangrik? Wel, ek gaan om af te lei Van hierdie dat as jy Google ondersteun navrae van hierdie vorm, hoekom nie ek implementeer my eie soektog enjin vir CS50, maar net die voorkant einde nie, net die grafiese gebruikerskoppelvlak. En ons sal die agterkant uitkontrakteer, die werklike resultate te Google. 

So, hoe kan ek dit doen? Wel, laat ek gaan in gedit hier. En laat my gaan voort en oop op, laat ons sê, 'n nuwe lêer. En ek gaan om dit te red tydelik as soek-0.html. En dan uiteindelik, sal ons vinnig uit na die een wat ek vooraf voorberei. 

En ek gaan vinnig sweep doc tipe html oop bracket html naby bracket html. Toe ek gaan kop te doen naby kop oop titel CS50 Soek in plaas van Google soek. Hier gaan ek het die liggaam, hier naby liggaam. En nou, ek moet CS50 Search. En eintlik, laat ons bou hierdie geleidelik. Ek gaan om voort te gaan en maak dit en eintlik sit dit in my openbare gids. So gee my net 'n oomblik. soek-0.html-- ek gaan tydelik noem dit search.html. Ek gaan om dit te chmod 'n + r search.html. En nou gaan ek dit oop te maak. Alle reg, sodat dit was vinnig. Maar die doel was eenvoudig om ons te kry tot op die punt van 'hierdie teks lêer genaamd search.html. So nie veel om na te kyk nie. Trouens, as ek gaan na my leser, en gaan na search.html, dit is al wat dit is. Maar jy weet wat? Ek kan 'n bietjie liefhebber. Ek lees in 'n boek wat daar is 'n opskrif tag genoem H1. En ek gaan om voort te gaan en gebruik wat oop H1 en naby H1. Herlaai die bladsy. En nou is dit groter en vetter, nie al wat interessant is, maar ten minste is dit struktureel meer interessant. Maar nou laat ek 'n ander etiket. Dit blyk daar is 'n vorm tag. En laat my naby dat tag. En dit blyk daar is insette tag wat het 'n kenmerk genaamd tipe, wat is die data tipe van die veld, as jy wil. En gaan wees van die tipe teks. En die waarde daarvan gaan wees CS50 Search. Close tag. En daar gaan geen idee van te wees opening en sluiting met aparte tags. 

Laat my terug te gaan oor hier en sien wat gaan aan, herlaai. Kry interessant. Dit lyk soos dit is 'n teks veld. En eintlik, ek wou nie 'n waarde daar te vestig nie. Laat my terug te gaan hier en eintlik kry ontslae te raak van hierdie waarde om dit eenvoudig te hou. In plaas van 'n waarde, wat ek wou hierdie saak te gee was 'n naam. En ek weet nie wat dit is, so ek sal terug kom. 

Maar onder dit, ek wil insette tipe te doen = voorlê. En hierdie waarde sal wees CS50 Search. En ons sal sien hoekom ek verskuif die waarde van hierdie. Toe ek herlaai, dit lyk asof ek nou die begin van my eie soeke enjin, super afskuwelike, hoewel eerlik, dit is nie 'n ver gooi uit wat Standaard bladsy Google se lyk. 

As ek gaan nou hier is, kan ek tik in katte en hopelik kliek Soek. Maar ek is nie heeltemal klaar nie, want ek het nie geïmplementeer nie, natuurlik, 'n databasis. Ek het nie gekruip die web vir die resultate. So ek nodig het dat uit te kontrakteer aan Google. So, hoe doen ek dit? 

Wel, die eerste van alles wat ek nodig om by te voeg en aksie skryf aan my vorm tag wat is http://www.google.com/search. En ek weet dat slegs uit met afgelei deur te kyk nou op hul URL's. En nou 'n raaiskoot. Wat moet hierdie teks veld waarskynlik genoem word, wat gebaseer is op waar ons vandaan kom voor? 

GEHOOR: q. 

DAVID J Malan? Q. En ons nie eintlik vraag moet merk dit blyk, maar Q is dit inderdaad, Q vir navraag waarskynlik deur standaard, net omdat dit is wat Larry en Sergey vorendag gekom met 'n jaar gelede. So nou laat my herlaai die bladsy. Dit lyk nie al wat verskil. Maar nou kyk wat gebeur. 

As ek tik in katte en kliek CS50 Soek en laat gaan, sien ek raak geklits weg met die werklike Google. Nou, is Google 'n bietjie irriterende in dat hulle aanbring 'n addisionele parameter, as jy wil, met die URL. Dit is al wat gebeur outomaties op Google kant. 

Die belangrike deel is dat dit lyk asof ek het hierdie versoek gegenereer hier. En inderdaad, dit is wat gebeur. Wanneer jy HTML wat lyk soos hierdie, hierdie is 'n soort van die web ontwikkelaars notasie om te sê, gaan voort en die skep van 'n vorm dat wanneer dit ingedien is, dit gaan om te gaan na hierdie skakel. En toe die URL verskaf waardes vir dinge soos q, gaan nie net om die URL. Eintlik, gaan na vraag merk en dan q = katte. Voeg die parameter, die HTTP parameter soos dit. 

En net om te wees super akkurate, wat daar afgelei here-- maar ek sal meer explicit-- is dat die metode wat ek wil gebruik is jy, in plaas van iets soos pos, wat ons sal uiteindelik sien. So in kort, eenvoudig deur die begrip HTML en met behulp van 'n paar redelik eenvoudige etikette, Ons kan nou begin om te skep ons eie voor eindgebruiker koppelvlak met 'n soektog enjin agter dit. 

Maar dit is natuurlik mooi afskuwelike. So laat my eintlik oop 'n effens beter weergawe. Dit is die een wat ek voorberei bevorder wat 'n paar opmerkings. Maar jy sal wat ek sien pretty much herskep dit. So, dit is online reeds beskikbaar. En ek het gebeur met preemptively gaan na https net om dit eenvoudig te hou. 

En nou, laat ons maak 'n volgende iterasie van hierdie. Is weergawe 1 in plaas van 0. Wat spring uit by jou as effens anders in hierdie voorbeeld? 

Publiek: [onhoorbaar]. 

Ja, daar is hierdie teks align sentrum. Dit is 'n bietjie vreemd hier. Maar dit is wel nuut. En dalk raai wat gaan gebeur. As ek na my leser nou en besoek soek-1.html, dit is amper dieselfde ding. Maar dit is 'n stap nader aan 'n bietjie meer mooi. Dit is nog steeds lelik, maar mooier in daardie ten minste alles is nou gesentreer. 

So dit blyk dat dit wat ek gebruik is 'n ander taal heeltemal genoem CSS, Cascading Style Sheets. En CSS, eerlik, is 'n soort van, in my persoonlike mening, 'n afgrijselijk ontwerp taal. Dit is baie irriterende om te onthou al die verskillende besonderhede. Maar dit is wat stylizes die hele wêreldwye web vandag. Ek aanstoot iemand. Alle regte. So laat ons gaan terug hier en sien hoe ons dit eintlik die gebruik van hierdie. En dit blyk, ten minste is dit eintlik 'n redelik eenvoudige taal. Dis net die sleutel waarde pare, eienskappe en waardes, eienskappe en waardes. Trouens, hier is een sodanige eiendom en waarde. 

Bloot deur die gebruik van die styl skryf op my liggaam tag en gee dit 'n waarde van 'n woord kolon en ander woord, of 'n eiendom en 'n waarde, Ek kan beïnvloed die estetika van die webblad, nie noodwendig die struktuur nie, maar die estetika van dit. En net deur Googlen rond, besef ek dat CSS, Cascading Style Sheets, ondersteun 'n eiendom genoem teks-align, waarvan die waarde kan word links, regs, of sentrum, byvoorbeeld. 

So nou as ek herlaai hierdie bladsy, wat ek gedoen het kry was 'n gesentreerde bladsy maar nog steeds mooi lelik. Kom ons gaan voort en oop up weergawe 2 van Search. En nou sien ek gedoen het 'n bietjie meer. Let daarop dat hier binnekant van die kop tag, kan daar meer as titel. Trouens, daar is 'n styl tag. En dit is waar dit net kry 'n bietjie slordig sien CSS soms. 

Let daarop dat dit lyk asof ek iets het wat struktureel lyk baie anders. Maar hier is die naam van die etiket Ek wil gestileer. Hier is ons ou vriende krullerige draadjies en geslote krullerige stut. En dan is hier is dat eiendom en die waarde daarvan. 

As ek laai hierdie lêer, search2.html, die eindresultaat is identies. Maar dit is 'n stap in die rigting beter ontwerp. Deur factoring uit hierdie CSS, ek het nie die institutionele dit met my HTML. En inderdaad, soos ons sal sien, ek kon onthou hierdie eienskappe en waardes. As ek wou trosse te maak dele van my webblad gesentreer, Ek het nie style = text-align te tik sentrum oor die hele plek. Ek kan in een plek miskien, hou by die top. 

Maar selfs dit is nie die beste ontwerp. Trouens, een van die dinge wat jy sal leer as jy meer en meer tyd saam met spandeer web ontwikkeling is dat die meer wat jy kan modularize dinge en faktor dinge uit soos .H lêers laat ons faktor dinge uit, hou helpers.c laat ons faktor dinge uit 'n paar psets gelede. Net so, kan ons wil om dit te bereik. 

So kennis weergawe drie van search.html Ek het skoongemaak die hoof van die bladsy en net sit in hierdie, 'n skakel tag, wat strydig met die naam, gee jou nie 'n skakel. Dit skakel na 'n ander lêer by wyse van 'n href waarvan die waarde in hierdie geval, is soek-3.css So het ek besef ons is vinnig gaan. Maar al wat ek doen is 'n soort beweeg dinge rondom. Laat my oop search-3.css. Daar is dit, niks werklik om dit te. Ek het net gekopieer en geplak in 'n nuwe lêer, baie soos ons faktor dinge uit in ander lêers voor. En die result-- heeltemal underwhelming-- gaan presies dieselfde te wees. Maar ons beweeg toward-- nee, dit is nie. O ja, ek weet hoekom. 

So lyk dit 'n fout wees. En dit is in 'n sekere sin. Maar laat my oop te stel my blad Network. Laat my die bladsy te herlaai. Ag, hoekom is die CSS nie toegepas? Wel, die CSS-lêer, insgelyks, het aan die wêreld leesbaar wees, om so te praat. En dit word ook tans verbode. So laat my doen 'n chmod 'n + r ster dot CSS-- whoops-- ons is dot CSS is net die lêer uitbreiding vir CSS lêers. Nou laat my terug te gaan na my leser en herlaai. OK, 'n bietjie beter. 

Nou kan ek nie een laaste ding. Op soek-4.html. Ek het 'n weergawe wat ek het net gedink was weg koeler, al manier om meer ingewikkeld. Kom ons kyk na die resultaat eerste. Sluit hierdie te gee vir ons meer ruimte. Verander om dit te soek-4, Tik. 

En nou 'n klomp van die dinge is gebreek. Ek gaan om terug te gaan in my gids hier. En nou is ek net gaan om te doen 'n chmod 'n + r op 'n file-- want ek weet dit exists-- genoem logo.gif, wat 'n beeld. En nou laai. En wow-- so nou is ek redelik naby, eerlik, die 1999-weergawe van Google te hou, en eerlik, die 2014-weergawe van Google, reg? 

So dit is nou van plan om hul webwerf, Uiteindelik, as ek soek vir katte. En inderdaad is dit. Maar wat het ek anders doen in hierdie weergawe 4? So sal ons nie te veel bewoners van dit hier. Jy sal sien dit in die probleem die sewe uiteindelik. Maar let op wat ek gedoen het 'n paar dinge. 

Ek het 'n div tag, wat afdeling, soortgelyk in die gees van 'n paragraaf tag. Maar 'n afdeling is net soos, hier is 'n vierkantige onsigbare streek van die skerm. Kom ons gee dit 'n unieke identifikasie, 'n voet, net sodat ons kan praat oor dit in ons HTML elders. Hier is nog 'n div van die bladsy wie se ID gaan inhoud. Dit is die inhoud van die bladsy. En hier is die kop van die bladsy. 

Met ander woorde, ek het wese in HTML is verstandelik die lees van hierdie webblad as drie komponente, 'n kop- hier met hierdie onsigbare reghoek, Die inhoud in die middel, en dan die voet benede, selfs al het ons nie sien nie die dinge. Want ek wil in my kop van bladsy hier, of in 'n Css lêer, Ek kan hierdie sintaksis gebruik. 

Kop is nie 'n tag. Dit is 'n ID, sodat dit blyk dat deur dit te doen #header, Ek kan nou aansoek doen om een ​​of meer eienskappe aan die kop. Ek kan dieselfde inhoud te doen, dieselfde vir die inhoud hier. 

So byvoorbeeld, in die voet, kennisgewing al hierdie eienskappe Ek voeg. En ek weet hulle bestaan ​​net deur die lees op die dokumentasie vir CSS. Lettergrootte gaan smaller-- wees so 'n relatiewe lettergrootte. Die gewig gaan dapper wees. Margin-- hoeveel pixels rondom it-- is 20 pixels. En dit gaan gesentreer word. 

Maar nou, die bladsy lyk. As ek nie tevrede met my kopie reg daar, Ek kon iets soos kleur rooi doen. En dan kan ek dit red, laai, en nou het ek gestileer die voet. So dit is net sinspeel op die krag wat jy kan doen in 'n web bladsy om dinge te verander rond. 

En selfs koeler as dit nie, as jy wil te steek om met die werklike webwerwe, jy kan nie permanent verander. Maar as ek oopmaak Chrome se Inspekteur weer en ek gaan nie na die linkerkant hier, wat toon Facebook se HTML, maar toon op die regte kant al sy CSS, jy kan nie en dinge verander op die vlieg. So laat my gaan voort en doen dit. 

Laat my voor en beheer gaan Klik op hierdie ewekansige woord hier, teken, en kliek Ondersoek element. Chrome baie gerieflik spring na die H1 tag wat Facebook gebruik. En let hier Facebook het soort van lui hard gekodeer lettergrootte as 'n eiendom hier. 

So het die cool ding is egter dat as ek eintlik gaan in hier en sê: o, Facebook, ek hou nie van wat 64 pixels, ons kan nou verander Facebook. Natuurlik, ons is net om dit te verander vir my persoonlik op die oomblik. Maar dit is net nog 'n instrument in ons gereedskapskis wat gaan ons toelaat om te verander en uit te vind en ook te diagnoseer kwessies in ons eie webblaaie. En ons kan insgelyks gaan oor hier, wat is die dieselfde ding. As jy regtig wil fancy te kry, het ek bedoel, nou kan jy regtig muteer die bladsy en doen mal dinge. 

So hoekom is dit nuttig? Wel, uiteindelik, ons gaan om te wil wees staat om webblaaie te skep wat word gedryf deur ons eie terug eindig, nie deur net Google en uitkontraktering van die agterkant is daar. Ons wil eintlik die waarde, byvoorbeeld, van ons soekenjin se optrede skryf aan nie anders gaan na iemand, maar om iets soos search.php, waar search.php is op ons eie bediener nie op iemand anders se. 

En so om daar te kom, het ons eintlik nodig om 'n nuwe taal te stel. So het ons reeds gekyk na die een nuwe taal, of twee werklik, HTML en CSS. Maar hulle is regtig net strukturele en estetiese tale. Hulle is nie die programmering tale per se. En dit is omtrent so veel formele tyd as ons sal spandeer op hulle. Omdat ons sal nou begin oorgang na PHP. 

So PHP is 'n werklike programmeertaal. Dit is 'n script taal in die sin dat dit bedoel ligter gewig te wees as iets soos C. En dit is 'n geïnterpreteer taal, wat beteken dit is nie saamgestel. So in 'n neutedop, het wat dit beteken wanneer ons 'n taal soos C gebruik en ons het dit saam te stel? Wat beteken dit om te stel C bron-kode? Publiek: [onhoorbaar]. DAVID J MALAN: Sê dit weer doen? Publiek: [onhoorbaar]. DAVID J Malan Perfect. Dit blyk dit in binêre. Dit blyk dit in nulle en ene van werklike Engels-agtige bron-kode. En dan kan ons eintlik loop die nulle en ene deur verby hulle deur die CPU deur dubbel te kliek 'n ikoon of bestuur van 'n opdrag. 

PHP en Python en Ruby en Perl en JavaScript en trosse van ander tale geïnterpreteer tale, wat is om te sê jy stel hulle nie. Inteendeel, jy hulle as insette te voed 'n program genaamd 'n tolk. En dat tolk, wat iemand anders geskryf het, lees jou bron-kode van bo na onder, links na regs en net interpreteer die lyne en doen wat jy sê. 

So as jy 'n ontmoeting lyn wat sê die gedrukte media, dit nie noodwendig sit druk na die ooreenstemmende nulle en ene. Dit het net hierdie tolk soos 'n groot indien toestand wat sê, As programmeerder se opdrag is druk, doen dan die volgende. So dit interpreteer dit net deur soort van redenasie deur wat jy vertel om dit te doen. 

En PHP is een van hierdie tale. En PHP jaar gelede is ontwerp juis vir die web ontwikkeling. En dit was aanvanklik 'n baie slordig deurmekaar taal. En inderdaad, daar is 'n groot bedrag van slegte PHP-kode wat daar is. Maar die taal self het oor die jare gegroei, soveel so dat dit nou eintlik 'n wonderlike volgende stap pedagogies van C, want dit is so darned vertroud met alles jy het net gesien in die afgelope paar weke. 

Die een aanvanklike verskil ons sal sien is daar geen belangrikste funksie nie. Wanneer jy skryf kode begin, is dit net gaan kry uitgevoer nie saak wat, soos ons sal sien in 'n oomblik. Intussen, hier is wat 'n veranderlike lyk soos in PHP. Dit is 'n bietjie anders, maar net-net. 

In PHP, is daar nie 'n sterk tik. Daar is week tik, wat beteken net daar is data tipes soos snare en nommers en ander dinge. Maar jy nie die moeite te spesifiseer wat hulle is nie. PHP figure dit uit vir jou. Die dollar teken is net 'n besluit dat die PHP mense gemaak jaar gelede sodanig dat enige veranderlike in PHP net begin met 'n dollar-teken. Dit is eintlik soort van nuttige in daardie dit spring uit by jou 'n bietjie meer. 

Maar daarna het hierdie is 'n toestand in PHP. Wat is die verskillende versus C? Mislei question-- niks, wat eintlik baie mooi. Boolse uitdrukkings in PHP-- dieselfde. Boolse uitdrukkings met en teenoor of, skakelaars, loops, loops, loops-- OK, hierdie een is anders. 

So dit blyk daar is 'n paar ander funksies in PHP. Een van hulle is eintlik nie, wat is wonderlik gerieflik. As $ getalle is 'n skikking wat jy het voorheen verklaar in 'n program, jy het hierdie fancy vir elke konstruk dat in plaas van om dit alles irriterende ek gelyk 0, ek is minder as dit, [? Ek ++?] vir elke getalle as nommer, waar elke van die dollar teken waardes is net 'n veranderlike, en die laasgenoemde jy kan dink soos ek Jy kan dit noem wat jy wil. Ek het dit nommer. Dit gaan Itereer oor die skikking met die naam getalle. En op elke iterasie, dit is gaan outomaties opgedateer vir jou die dollar teken getal veranderlike sodat jy voortdurend het toegang tot die veranderlike wat jy wil sonder enige vierkante bracket te doen notasie of kruip in 'n skikking. 

Behalwe dat ons selfs dinge soos skikkings, wat lyk byna dieselfde, behalwe dit is baie algemeen, soos ons sal sien, beide in PHP en JavaScript na die pre inisialiseer 'n skikking met behulp van vierkantige hakies. C gebruik krullerige draadjies. Dus is dit effens anders, selfs al Ons het nie regtig gebruik wat truuk veel. 

Maar selfs meer kragtig, PHP het assosiatiewe skikkings, Dit is 'n fancy manier sê hash tabelle. In werklikheid, as jy wil 'n gemors te verklaar tafel in PHP, anders as in C-- hoeveel reëls van die kode het dit tot eintlik implementeer 'n gemors tafel in C? Of hoeveel reëls van die kode is dit neem van 'n hash tafel in C te implementeer? So is dit waarskynlik 'n baie, reg? Dit is 'n paar dosyn, miskien 100 of 200. Dit is triviaal. Of dit is om te wees, soos jy sal gou sien, nontrivial 'n gemors tafel te implementeer [Onhoorbaar] en ook 'n drie gedruk. Maar in PHP-- en eerlik, ek waarskynlik nie vertel hierdie totdat Monday-- in PHP, indien jy wil 'n tafel, gedoen. Dit is 'n gemors so table-- met 'n reël van die kode. En 

Baie van die tale doen. Om pret te hê met pset vyf. So 'n baie tale doen. Hulle gee jou hierdie abstraksies dat ander mense, ander programmeerders, geskep het vir jou sodat jy kan staan ​​op hul skouers en begin met behulp van idees wat super dwingende, soos hash tabelle en bome en probeer. Maar jy hoef nie noodwendig te daardie dinge self te implementeer. 

En so uiteindelik, wat ons gaan PHP te gebruik vir potensieel die skryf van programme van die sogenaamde opdrag lyn. Ons kan elke program herskep ons hierdie semester geskryf het tot dusver, behalwe miskien tempo wat gebruik SPL, wat spesifiek vir C op die oomblik. Maar elke ander probleem stel, beslis Mario en Caesar en Vigenere en [? Kraak?] En verder, het ons kon weer te implementeer in PHP, en waarskynlik 'n bietjie makliker. 

Maar wat ons uiteindelik gaan PHP te gebruik vir die web ontwikkeling. En ons gaan stel volgende week 'n geestelike model, 'n paradigma genoem MVC, model oog kontroleerder, wat as jy dit gedoen programmering voor in Python of Ruby of elders, moet jy kan weet van hierdie span met Relings en Django en dies meer. Maar as jy nuut is tot Dit ook, sal jy sien dat dit eintlik 'n baie natuurlike uitbreiding van die faktorisering en die soort van ontwerp van die kode wat ons het doen in C. Ons gaan nou pas sommige van daardie lesse PHP sodat uiteindelik, ons is die implementering van ons eie webtuistes. En as jy soort betower of verbaas dat ons gaan om te doen al die so vinnig, besef dat byna elke semester, byna 90% studente CS50, insluitend dié wat nog nooit geprogrammeer voor, uiteindelik 'n finale projekte wat is gebaseer op die web ontwikkeling. En so sal jy sien dat die opbrengste hoog in die komende weke. So sal ons sien jy dan op Maandag. 

Spreker 1: En nou, diep Gedagtes deur Daven Farnham. Hash tabelle. 

[Gelag]