[MUSIC nagpe-play] 

DAVID J MALAN: Ito ang CS50 at ito ay ang simula ng linggo 7. Kaya welcome back. At maaari mong isipin na sa hanay ng problema sa apat, nagkaroon ng isang piraso ng isang hunt basura para sa ilang mga hindi kapani-paniwala na premyo kung saan matapos mong makuha ang mga larawan ng staff parehong dito at sa New Haven, ikaw ay hinamon upang makahanap ng maraming ng mga siyentipiko computer na maaari mong. At mayroon ka namin ng isang buong grupo ng mga submissions. Naisip Gusto kong ibahagi ang ilang kasama mo dito ngayon. 

At Magpo-post kami ng lahat ng mga online. Ngunit sa partikular, nais ko na gumuhit ng iyong pansin to-- well isa, Sam ay sa lubos ng ilang sa mga ito pangkalahatan pagpapanggap tulad nito. Ngunit ito ay lilitaw na ang bilang ng mga ito umaga, ang nagwagi ay isang tiyak na tao na nagngangalang Ken sa 24 ng mga tauhan na nakunan sa camera o ng ilang higit pa kapag magdadala sa iyo sa account ng maramihang mga staff sa mga larawan. Nakalarawan dito ay Ken susunod kay Maria sa New Haven. 

Ngayon, Ken, bagaman, lumiliko out ay piraso ng isang sulok kaso na hindi pa nangyari bago. Lumalabas na hindi ito nangyari sa akin upang ilagay ang fine print sa problema itakda ang apat na nagsasabing na kawani ay hindi karapat-dapat para sa kapani-paniwala premyo dahil Ken ay, of course, isa sa ang photographer sa aming mga kawani. Ngayon, may sinabi na, siya orihinal na isinulat sa akin upang sabihin mangyaring huwag mag-post ang mga larawan online. Sa tingin ko sa malaking bahagi dahil karamihan ng mga larawan na ito photographer kinuha hitsura isang maliit na bagay tulad nito. At ang gusto. 

Ngunit Ken ay nais sa akin upang tiyakin sa iyo na siya ay isang napakahusay na photographer, siya ay isang propesyonal, siya ay tumatagal ng mga larawan na hindi malabo, na mas mahusay sa focus, at siya kinuha lubos ng ilang ng aming sariling mga kawani. Ngunit sa halip na lamang kilalanin Ken, kung ano ang naisip naming gawin ay pumunta sa pamamagitan ng listahan ng mga aktwal na mag-aaral na isinumite. At ito ay lumiliko out na Lance na may 15 mga larawan bilang ng umaga ay ang aming winner. 

At nakalarawan dito ay Lance sa Colton, may Skaz, sa sarili ko, at sa Sam. Ngunit pagkatapos ito ay lumiliko out na ang bilang ng mga 11:46, kaya lang nang kaunti ang nakaraan, Bumalik ako sa aking email at natagpuan na nagkaroon kami pa ng isa pang submission sa pamamagitan ng isang mag-aaral na may pangalang Bonnie sinabi lamang na ito na ang email. Hindi pagpunta sa kasinungalingan, ako ginagawa ito sa panahon ng klase. At pagkatapos ay pumunta upang i-attach na lang 14 mga larawan, isa mahiyain ng Lance 15. 

Ngunit sa mga larawan ni Bonnie, ito ay lumiliko out ay ang maramihang mga miyembro ng kawani, Sam kasama ng mga ito, kaya kung ano ang naisip namin kami ay gawin ay kilalanin pareho sa mga ito. Kaya sa karagdagan sa pagkuha ng Dropbox space na lahat na lumahok natatanggap, ang dalawang mga seksyon ay magkakaroon din ng makatanggap ng isang magandang catered tanghalian para sa kanila at ang kanilang mga seksyon mates na ito darating na linggo. At kaya ay maririnig mo mula sa amin, Lance at Bonnie, tungkol na. Kaya big congrats sa kanila. Ngayon, sa mga mo na gagawin tulad ng tanghalian sa mas pangkalahatang malaman na CS50 tanghalian sa Cambridge at New Haven ay ito Biyernes. Pumunta sa slash website RSVP CS50. At ngayon ang isang salita sa seminar. Iba pa curricularly. Kaya na papalapit sa point ng semestre kung saan dapat mong simulan ang iisip tungkol sa huling proyekto. At sa katunayan, sa isang bit lamang, ay tinatawag na pre panukala ay maaaring dahil. Kaya pre panukala ay sinadya upang maging medyo mababa ang epekto at talagang lamang ng pagkakataon para sa iyo upang bumuo ng isang maikling tala iyong pagtuturo kapwa upang magbigay-alam sa kanya kung ano ang iyong iniisip mo baka gusto mong gawin para sa iyong huling proyekto. 

Ngayon, maraming mga mag-aaral end up paggawa ng mga web based na huling proyekto. At siyempre, hindi namin lamang huling ngayong linggo na ito sa at sa kabila ng diving sa web programming. Kaya huwag mag-alala kung ikaw mayroon talagang walang ideya kung paano Gusto mong bumuo ng mga ideya na maaaring mayroon ka sa iyong isip. Ito ay talagang lamang ng isang pilitin ang function upang makakuha ka-iisip at pakikipag-usap sa iyong TF tungkol dito. Ngunit upang makatulong sa iyo na iyon, at sa huling proyekto sa huli, malaman na CS50 ay may tradisyon ng aalok seminar. 

At ang mga ito ay opsyonal, sa kamay, o magbigay ng panayam batay sa mga pagkakataon upang malaman ang higit pa tungkol sa mga paksa na isang maliit na mababa sa kurso ni syllabus, ngunit gayunman kahanga-hangang materyal sa drive huling proyekto. At kaya ito ay ang listahan na CS50 staff dito sa New Haven may magkaroon ng para sa sa taong ito ang tungkol sa iOS programming, Android programming, pag-unlad ng laro, at mga kumpol ng higit pang mga tool at mga wika at mga diskarte. 

Kaya abangan sa website ng CS50. At sa ngayon, kung gusto mo upang irehistro ang iyong interes sa alinman sa mga ito, pumunta sa slash rehistro CS50. At pagkatapos ay sundin up bilang sa araw at oras ng flight at mga lokasyon at everything-- karamihan lahat ng bagay ay maging stream at magagamit din on demand pagkatapos kung hindi mo aktwal na maaaring gawin itong. Kaya nang walang karagdagang linggal, namin tumigil huling beses na may GET. 

At ito ay gaya ng mensahe na sa loob ng virtual sobre, pagpapabalik, na namin ang lumipas mula sa router sa router sa router sa pagitan ng isang web browser at isang web server. At mensahe na tumingin ng isang maliit na bagay tulad nito. Ito ay ang mas arcane mensahe na ay sa loob ng isang sobre talagang nakasulat sa isang piraso ng papel na sabi unang linya literal, kumuha slash. 

At tulad ng isang katinuan check, ano ang ginawa slash magpakilala? Ano ang ibig sabihin kapag slash humihiling ng isang website? Humiling ka sa lahat ng oras. Karamihan sa anumang oras na bisitahin mo ang isang website, ikaw ay hindi talaga type ng isang pangalan ng file. Ikaw ay malamang na pumunta lamang sa Facebook.com, ipasok, gmail.com, o mga katulad. At kung ano ang kinakatawan slash? Ano ang file? O kung ano ang pahina, partikular na? 

Ang index, oo. Kaya ang default na pahina. Kaya kung hindi mo tukuyin ang isang file pangalanan dahil kakailanganin namin simulan upang makita, ang tunay na ikaw lamang humihiling bigyan ako ang default na pahina ng Facebook o bigyan ako ng aking inbox o magbigay sa akin ang default na pahina ng balita sa website ng CNN o mga katulad. At isang server at pagkatapos ay tumugon sa mensahe na may isang bagay na tulad nito, na sinasabi oo, ako magsalita HTTP na bersyon 1.1. 

200, na kung saan ay isang katayuan code na bihira kawani na tao namin kailanman makikita dahil ito ay mabuti. Dahil ito ay nangangahulugan OK, ang kahilingan natanggap at hawakan ng maayos. At ang uri ng nilalaman Lumilitaw sa mga tugon ay lubos na madalas, ngunit hindi laging, text. At partikular, HTML. At iyan ay talagang kung saan tayo ay tumingin sa araw na ito. 

Kaya sa katunayan, Pupunta ako upang pumunta magpatuloy at buksan up ng isang browser. Pupunta ako upang gamitin ang Chrome, maaari mong gamitin ang karamihan sa anumang browser sa linggo na dumating. Karaniwan naming inirerekumenda Chrome dahil ito ay lalo na mabuti para sa mga software developers. Ito ay nakuha ng isang pulutong ng mga built in mga kasangkapan na gumawa ng mas madali upang bumuo ng hindi lamang ng HTML at CSS, mga bagay na namin simulan ang pakikipag-usap tungkol sa ngayon, kundi pati na rin sa iba pang mga wika pati na rin. 

At ako pagpunta sa sige at pumunta to-- Pupunta ako sa Control click o pakanan i-click kahit saan sa isang web page. At ako pagpunta sa pumunta sa Siyasatin ang Elemento. At ako pagpunta upang mag-tweak ang aking screen lang nang kaunti dito. Hayaan akong ilipat ito sa ibaba. Kaya ito ay kung ano ang tawag dito Inspektor ng Chrome. Kaya ito ay tulad ng isang pag-debug tool na binuo sa Chrome. 

Lahat ng sa iyo ay mayroon na ito kung kayo ay gumagamit ng Chrome. At ito ay nagpapahintulot sa iyo na makita kung ano ang nangyayari sa ilalim ng hood ng ilang mga web page. Kaya sabihin aktwal na tumagal ng isang tingnan ang mga ito tulad ng sumusunod. Ito ay may paraan higit pang mga tampok at pinapahalagahan namin ang tungkol sa ngayon. Ngunit may mga tabs sa paglipas dito. Elements, network, mga pinagkukunan, timeline, at ilang iba pang mga bagay-bagay. Pupunta ako sa mag-click sa Network para sa isang sandali. 

At ito ay isang maliit na napakalaki sa unang tingin dito. Ngunit kung ano ako pagpunta sa gawin ay ipaalam akin pasimplehin ito nang kaunti. Pupunta ako sa i-on ang pagtatala ng liwanag upang ito ay pula. At ako pagpunta sa sabihin mapanatili log. At ito ay lamang ng isang maliit na bagay ko korte out sa paglipas ng panahon na ang pagpunta sa i-save ang ang lahat ng bagay na mangyayari sa browser. At ngayon ako pagpunta sa pumunta upang http://facebook.com. 

Sa totoo lang, sabihin gawin www ipaalam para sa mabuting panukala, slash. Enter. Kaya ang isang URL na marami sa maaari mong binisita. At ngayon sa Facebook ni web pahina ay dumating sa itaas. At pagkatapos ng buong bungkos ng stuff nagsakay sa pamamagitan ng sa ilalim. At sa katunayan, ito ay lumiliko out na kapag binisita mo ang Facebook.com, ikaw ay hindi lamang ang paggawa ng isang HTTP kahilingan, ito ay lumiliko out na ang pagpunta sa Facebook.com nagpapadala 41 ng mga sobre, bawat isa ay may sarili nitong mga kahilingan get, gaya ng ipinahiwatig, kahit na sa likod ng screen dito, sa ibaba ng screen, ito ay nagpapahiwatig na, sa katunayan, ang aking ginawa 41 ang mga kahilingan browser. 

At sa kabuuan, inilipat ito ng 861 kilobytes at ito kinuha para sa ilang kadahilanan tulad ng maraming bilang walong segundo upang i-download ang lahat ng iyon. Kaya na talagang isang maliit na kakaiba na site ng Facebook ay tumagal na mahaba, ngunit kaya ito sa kasong ito. Ngayon, ang lahat ng mga ito hindi ko talaga pag-aalaga tungkol maliban para sa pinakamataas na kahilingan. Kaya sabihin pumunta sa isang ito dito mismo at hayaan mo akong mag-zoom out para sa sandali lamang. 

At hayaan mo akong mag-zoom in sa mga ito. Kaya kung ano ang nagawa ko sa kaliwa kahit na may isang pulutong pagpunta sa paglipas dito ay nai-highlight ko Facebook.com at pagkatapos ay paunawa na ako ng scroll down, scroll down, scroll down, upang humiling ng header. At makikita mo na nagpapakita ng Chrome akin mahalagang ang panloob na nilalaman ng kahilingan ko ginawa. Hindi ito ang pag-format sa lubos sa parehong paraan, ngunit napansin may banggitin ng kumuha, mapansin mayroong banggitin ng host, Facebook.com, path, o slash, kung saan ay ang file na aking hiniling. 

At pagkatapos ay kung mag-scroll ko i-back up, bibigyan namin ng aktwal makita na kung ano ang ibinalik Facebook sa akin ay ang lahat ng mga header. Kaya sa loob ng na virtual sobre sa katunayan ay isang pulutong ng mga pangunahing mga pares ng halaga. Ang isang salita, ang isang colon, at pagkatapos ay isang halaga. Ang isang salita, ang isang colon, at isang halaga. Ang mga ito ay tinatawag na mga header. At may paraan mas detalyado dito kaysa talagang nagmamalasakit tayo sa ngayon. 

Ngunit ito ay pangalawa sa huling isa down doon, paunawa, na ang server Facebook.com ni, Tunay na sinabi dito ay ilang mga text HTML. Kaya lahat ng ito ay upang sabihin na kapag humiling ka ng isang web pahina mula sa isang browser sa isang server, tumugon server na may isang sobre ng kanyang sariling loob ng na text. Sa ibang salita, HTML. Hyper Text Markup Language. Alin ang isa pang wika na ipakilala kami ngayon na ang mga tao o mga computer makabuo upang ipatupad ang mga pahina ng web. 

Partikular, tingnan natin ito ipaalam. Pupunta ako sa ngayon bumalik sa website ng Facebook. At ako pagpunta sa makatarungan control-click o i-right click at mag-click sa View Page Source. At kahit na hindi ka gumagamit ng Chrome, IE ay maaaring gawin ito, Firefox ay maaaring gawin ito, Safari maaaring gawin ito, kahit na ang mga menu maaaring tumingin ng isang maliit na iba't ibang mga pagpipilian. At ito ay ang HTML na Mark at kumpanya sa Facebook isinulat. 

At sa sama-sama, ang wikang ito dito nagpapatupad ng mga kulay asul at ang puting pahina na nakita natin sa isang sandali ang nakalipas. Ngayon, ito ay isang bit napakalaki. Ngunit kung titingnan up kami sa kaliwang tuktok, hindi namin pagpunta sa simulan na makita ang ilang mga pattern. Mukhang may isang pulutong sa mga open angle bracket at pagkatapos ay may mga keyword na ito HTML. Narito ang isa pang bukas angle bracket at ulo. 

Narito ang, kung mag-scroll namin down at pababa at pababa, ako pagpunta sa sige, at subukan sa paghahanap para sa isang bagay. May paraan sa ibabaw sa kanan dito ay bukas body bracket. At isipin mula sa huling time na namin ipinanukalang na ang pinakasimpleng web page na ang isang tao ay maaaring sumulat maaaring tumingin ng isang maliit na bagay tulad nito. Open tag na HTML, bukas head tag, buksan ang tag na pamagat, pagkatapos ay sarado pamagat, closed ulo, bukas body tag, ilang teksto, sarado ang katawan, closed HTML. 

Ngunit isang i-pause dito para sa isang sandali lamang. Ang code na ito, kahit na kung ikaw na Hindi nakasulat na ito bago ngunit hindi lubos na maunawaan pa rin kung ano ang nangyayari, mukhang medyo magandang. Right, ito ay masyadong malinis. Ito ay napaka-stylistically nice. Ang isang pulutong ng indentation and white space. Facebook ay hindi. Kaya bakit Facebook kaya magkano mas masahol pa kaysa sa ako sa pagsulat ng HTML? Malas. 

Right, ito ay tulad ng isang sa labas ng limang para sa estilo. May isang nag-uudyok na dahilan para sa kanila upang kunin ang mga sulok. Lahat ng karapatan, kaya sila ay hindi nais na gawing mas madali para sa iyo na basahin ito. Kaya sa ilang mga kahulugan, ang mga ito obfuscating ito, uri ng scrambling ito hindi bababa sa aesthetically kaya na ito ay mas mahirap para sa MySpace upang pumunta at mag-rip off ang kanilang homepage at ang HTML para sa mga ito. Lumalabas na may mga programa bagaman, kabilang ang Chrome, maaari naming linisin ito up super madali. Kaya ito ay hindi lubos na bilang ang dahilan. Ano pa ang maaaring maging sanhi. Oo. Oo, data white space gastos. Ano ang ibig mong sabihin? Oo, eksakto. Kung ikaw pindutin ang Tab key ng maraming o ang space bar, isaalang-alang ang mga implikasyon. Kaya ang bawat key sa iyong keyboard ay isang Kinakatawan [hindi marinig] bilang isang byte. 

Kaya ipagpalagay na Mark o alinman sa mga devs mga araw na ito ay pinindot niya ang spacebar beses lang sa HTML na pahina na kumakatawan homepage ng Facebook. At Facebook ay may maraming ng mga gumagamit ng mga araw na ito. Kaya ipagpalagay na homepage ng Facebook ay binisita ng isang bilyong mga tao ngayon. At ang isang tao sa Facebook ay pindutin ang space bar isang beses lang. 

Kaya isa sa mga karagdagang byte, isang bilyong mga kahilingan, kung magkano ang mas maraming data ay Facebook paglilipat ng higit sa internet dahil ang isang tao ay pindutin ang spacebar sa kanyang keyboard? Isang bilyong bytes, o isang gigabyte ng ang data ay ipinadala mula sa mga server ng Facebook sa mga tao sa paligid ng mundo para sa walang magandang dahilan. Ngayon, na ang isang space lang. 

Isipin kung talagang malinis namin ito bagay up at naka-indent ito at idinagdag isang pulutong ng mga puting espasyo at tab na mga character at mga puwang, napupunta sa iyo gigabytes paggastos, kung hindi terra bytes pa ng space. At kaya super karaniwan sa mga aktwal na mundo ng web development ay upang magpaliit iyong code. At kami ay makakita kung paano mo maaaring gawin ito. 

Ngunit ngayon, makikita namin simulan ang pagsusulat ng code na ang tunay na nababasa ng tao sa amin. Ito ay lumiliko out, bagaman, kung ikaw ay bumalik sa tool na ito sa Chrome Siyasatin Element, dati, kami ay sa tab na Network. Ito ay lumiliko out na kung pumunta ka sa tab elemento, kung ano ang iyong aktwal na makita ay Chrome ni pretty nakalimbag bersyon ng na parehong HTML. Kaya mo deobfuscated namin ito. Kaya ito ay hindi tugma para sa isang computer. At ngayon ay maaari mo talagang i-click sa paligid at simulan upang makita ang hierarchy na ay isang web page. Kaya sabihin aktwal na gawin ito. Pupunta ako sa sige at buksan up on aking Mac isang programa na tinatawag text edit. At isipin na ito ay lamang isang napaka-simpleng programa text. Windows ay may notepad.exe. At ako pagpunta sa verbatim i-type ang mga sumusunod. Doc type HTML, bukas bracket HTML, sarado bracket HTML, kami ay ang pinuno ng pahina dito, sa dulo ng ulo ng pahina dito, isang pamagat ay magiging tulad ng, hello mundo. 

At pagkatapos ay down na dito, kailangan namin katawan ng web page. Katawan Closed. At pagkatapos in dito, hello mundo. Lahat tama. Kaya namin ang nakasulat sa isang napakabilis na web page. Pupunta ako upang i-save ito bilang hello.html sa aking desktop. Aking Mac ay pagpunta sa magreklamo, pag-iisip na, maghintay ng isang minuto, ito ay isang tekstong file, gagawin na nais mong tawagan ito txt? Subalit hindi, gusto kong gamitin ang dot HTML. 

At pagkatapos ay kung ano ang magaling kung ako double click lang ang file na ito, hello.html, narito ang aking web page. Sa kasamaang palad, ako ang tanging tao sa mundo na maaaring bisitahin ang pahinang ito ngayon. Dahil kung saan ito nakatira tila? Ito ay sa aking Mac, tama? Aling ay walang kasaysayan. Tulad ng walang isa sa kuwartong ito pabayaan mag-isa sa internet aktwal na maaaring bisitahin ang pahinang iyon. Kaya ngayon, kailangan nating ipakilala ang isa pang element. 

At upang gawin ito, ako pagpunta sa sige at buksan up cloud 9. Kaya cloud 9 ay kurso ng isang ulap batay service-- CS50 IDE-- Iyon ay ang lahat ng aming mga workspaces tumatakbo sa tabi-tabi sa internet. At na nangangahulugan na ang lahat ng aming mga file ay naa-access sa publiko na. Kaya sabihin magpatuloy at gawin ito. Pupunta ako sa sige at lumikha ng isang bagong file NCS50IDE. Pupunta ako sa i-save ito bilang bago bilang hello.html at i-click ang i-save. At ngayon lamang upang makatipid ng oras, pupuntahan ko sige at kopyahin i-paste ang code na ito sa halip na i-type muli ito. At i-save ito. At kaya ngayon mayroon akong isang tinatawag hello.html file. Ngunit kung paano talaga ang gagawin ko buksan ito bilang isang web page? Well, ito ay lumiliko ang built-in sa CS50 IDE ay hindi lamang isang compiler tulad kalatungin at isang debugger tulad GDB at kumpol na ibang mga programa, may tunay na isang buong nasimulan web server na tumatakbo sa loob ng CS50 IDE. 

Lahat ng sa iyo, na ang ibig sabihin, magkaroon ng iyong sariling web server. At isang web server ay isang piraso lamang ng software na ang layunin sa buhay ay upang maglingkod up ng mga pahina ng web. Upang makinig sa mga kahilingan mula sa mga browser at tumugon na may maliit na virtual sobre sa loob ng kung saan ay ang nilalaman na iyong isinulat ko. Kaya web server na ito ay talagang libre at open source. Saan open source ay nangangahulugan lamang software na may ibang tao ay nakasulat na lahat tayo ay maaaring aktwal na makita at i-download at kahit baguhin ang source code. At ito ay tinatawag na Apache. 

At ginawa naming ng isang maliit na mas madaling gamitin sa CS50IDE pamamagitan ng pagtawag ito Apache 50. Kaya na ito ay maaaring aktwal na maunawaan ang mga sumusunod. Pupunta ako sa sabihin Apache 50 simula. At pagkatapos ay ako lamang ang pagpunta sabihin tuldok. At nakita namin ang ilang mga medyo arcane mensahe na nagsasabi pagtatakda Apache ni dokumento [? group?] sa bahay, Ubuntu, kahit na ano na, slash workspace. Simula ng web server Apache matagumpay 2. 

Kaya mahaba kuwento maikli, ako may lamang itinulak ng isang pindutan at naka-on ng isang web server na ay ngayon pakikinig sa internet sa TCP port 80 sa isang tiyak na address. At sinasabi nito dito, at ito ay magbabago batay sa iyong username at iba pang mga kadahilanan, ngunit ngayon mapansin kung na-click ko na ito, IDE50 dot jharvard at iba at kaya, mapapansin na ang lahat ng oras na ito para sa nakaraang ilang linggo, maaari kang magkaroon ng napansin na ang iyong sariling username ay naka-embed sa kanang tuktok ng kamay sulok ng CS50IDE. 

At na aktwal na ito ay ang lahat ng ito minsan, ang mga address kung saan maaari mong bisitahin ang lahat ng iyong mga file sa pamamagitan ng web. Hanggang ngayon, hindi pa ito ang mahalaga dahil sa C, ikaw ay karaniwang gusto ang mga bagay na tumatakbo sa isang terminal, hindi sa web. Ngunit ngayon, sisimulan namin pagsulat ng code ng web based na nais namin naa-access sa mga pampublikong URL. Kaya kung ano ang ako pagpunta sa gawin ay i-click ang URL na ito. 

At mapansin na makita ko ang isang walang kinikilingan pangit index, isang listahan ng direktoryo, ngunit kung ano ang file jumps out sa iyo marahil? Hello.html. Iyon ay dahil sa naka-save na ako ang file sa aking workspace. At kung ano ang sinabi ko sa Apache web server ay tumingin sa direktoryo workspace na si David. At ang sinumang sa mundo makita ang mga file. 

At sa katunayan, kung ako ngayon mag-click sa hello.html, Nakikita ko ito sa loob ng file na tab eksakto. Ngayon pansinin, ginagawa cloud 9 ni isang bagay na medyo kapaki-pakinabang para sa amin. Sa loob ng CS50 IDE, mapansin mayroong biglang isang address bar. Ito ay dahil kahit na hindi namin gamit ang Chrome upang bisitahin CS50IDE, sa loob ng CS50IDE ay kanyang sariling bersyon ng isang web browser ngayon. At kaya sa halip na kumplikado ang mga bagay na tulad, Pupunta ako sa sige at kopyahin lamang ang URL na ito. Pupunta ako sa sige at lamang buksan ang aking sariling Chrome window. Kaya walang magic dito, walang CS50IDE. Lamang ako ng pagpunta sa literal i-paste pindutin ang aking Harvard URL J at ang Enter. At voila, ngayon ko, at sa teorya, lahat ng tao sa internet, kung na-configure ko pahintulot naaangkop, maaaring bisitahin ang file na ito. At kaya ngayon, kung sinabi ko hello.html, voila, may ay ang aking hindi kapani-paniwalang underwhelming web page. Kaya sabihin gawin ang isang mabilis katinuan suriin. Dahil ang lahat ng mga na ay haka-haka set up. At hindi namin aktwal na hindi talaga nagturo sa iyo kung paano sumulat ng HTML per se. Ang anumang mga katanungan sa gayon ay malayo sa kung ano lang ang nangyari? Oo. Ba CS50 sariling mga pahina ng web? Sa anong diwa? Magandang tanong. Kaya nagmamay-ari ng CS50 CS50.io. Katunayan na binili namin na ang domain name. At sa pamamagitan ng likas na katangian ng sa iyo guys pag-log sa CS50IDE, sa iyo ang lahat ng kung ano ang tinatawag na isang subdomain. 

Kaya IDE50-malan, o IDE50-Rob.CS50.io, iyon ang iyong natatanging address sa loob ng aming pangalan ng domain. Kaya para sa mga layunin ng kurso, mayroon ka ng iyong sariling natatanging address. Ngunit pinasimple namin ang mga bagay-bagay sa pamamagitan ng pagbili ng mga domain sa nangungunang antas, CS50 dot I / O at pagkatapos ay sa lahat ng iba pa ay sa loob ng na, kaya na magsalita. At kami ay bumalik sa na sa loob ng ilang linggo marahil, lalo na sa huling proyekto panahon kung kailan ang ilan, sa inyo maaaring nais na makakuha ng iyong sariling domain name. Ito ay talagang medyo tapat. Lahat tama. Kaya sabihin ngayon gawin ito. Pupunta ako sa bumalik sa CS50IDE, kung saan ang aking file sa ngayon, hello.html, ay hindi lahat na kawili-wili. Gusto kong gawin ang isang bagay isang maliit na nicer kaysa. Kaya ako pagpunta sa gawin ang isang bagay tulad nito. Hayaan akong open paragraphs.html. Kaya ito ay isang file na sinulat ko in advance. Sa tuktok ng mga ito, tulad ng lagi, kami ay may mga komento. Ngunit sa HTML, ang mga komento tumingin ng isang maliit na naiiba. Sa tatlong 14 line line at, ikaw ay makita ang syntax para simulan ang isang komento at tapusin ang isang komento. 

Ngunit wala sa mga bagay-bagay sa pagitan ng mga bagay na sa pagtakbo. Ito ay isang tala lamang sa isang ng tao kung ano ang nangyayari sa dito. At tulad ng isang mabilis na kaliwanagan ng isip suriin, kung mag-scroll ko pababa, ano ang halatang bagong tag na ipinakilala namin? Ang mga tag kaya ngayon nasaksihan namin ay bukas bracket HTML, ulo, pamagat, at katawan. Ngunit kung ano ang malinaw naman bagong ngayon? 

Oo, kaya p. Ang p tag o talata na tag. At pagkatapos lamang hiniram ilang mga default na ko Latin text na bumubuo ng aking mga talata. Dahil kung ano ang nais kong ipakita ang kung paano mo maaaring kumakatawan talata ng teksto sa HTML. At kaya kung ano ang simula mangyari dito ay na mayroon na isang pattern pagbuo. At hayaan mo akong magpatuloy at gawin ito. Hayaan buksan muna akong off Apache. At ako pagpunta sa sabihin ito upang simulan ang sarili nito muli sa loob ng source ngayon ng pitong directory m. Kaya na mayroon akong access sa lahat ng bagay. 

At ngayon, kung pumunta ako pabalik sa ito listahan ng direktoryo, paunawa nakikita ang lahat na file mula sa araw na ito. At makikita mo sa susunod na set ng problema, bibigyan namin ng magbibigay sa iyo ng mga tagubilin para sa paggawa ng eksakto ito. Kung bukas ko paragraphs.html, maaaring ito pati na rin ang hitsura ng isang programming language sa iyo kung hindi ka nagsasalita o basahin Latin. Ngunit ito ay talata lamang ng tatlong ng teksto na ito ay minarkahan up sa HTML. 

At mapansin ang talata break sa pagitan ng mga ito. Dahil ito ay lumiliko out, at kahit na kayo ay maaaring maging hilig upang gawin ito, samantalang sa tunay na mundo, kung nais mong ilagay ang linya break sa pagitan ng mga bagay, maaari ka ganap lamang gawin ito at pindutin ang I-save. At ngayon, kung i-reload ko dito, notice na lahat ng bagay lamang blurs magkasama sa patak lamang ng isa sa text. Dahil HTML ay uri ng isang pipi wika. 

Ito ay sinadya upang gamitin sa naturang isang paraan na hindi lamang ang mga browser gawin malinaw kung ano sabihin mo ito upang gawin. Kaya kung hindi mo sabihin dito bigyan ako ng isang bagong talata, hindi ka pagpunta upang makita ang isang bagong talata. At sa katunayan, kung ano ang pupuntahan browser na gawin ay kahit na kung ikaw ay pindutin ang Enter, sabihin nating muli at muli at muli, ang paglipat na ito text na paraan pababa sa screen at pagkatapos ay i-save ang at pagkatapos ay i-reload, ang browser ay pagpunta upang tiklupin ang lahat ng na white space sa lamang ng isang solong, nakikita whitespace. Lahat tama. Kaya na ang mga tag ng talata. At kaya kung ano ang pattern na pagbuo rito? Well, ito ay anyong ang kaso na HTML ay ang lahat ng tungkol sa pagsisimula ng isang tag at nagtatapos sa isang tag. At kung ano ang isang tag? Well, ito lamang ay isang tipak ng syntax. Open bracket, ang isang keyword, closed bracket, ay isang tag. O simulan tag. At pagkatapos ay kapag ikaw ay tapos pagpapahayag ng iyong sarili, tulad ng sa tapos ka na sa talata, gagawin mo ito upang makipag-usap sa tapat. Ngunit ang kabaligtaran ay hindi lubos na paurong. 

Prefix Ikaw lamang ang parehong tag ni pangalan sa isang pasulong na slash tulad nito. Lahat tama. Kaya hindi lahat na kapana-panabik. At sa katunayan, hindi kami sa paggawa ng mga web lahat na mas interesante. Paano kung gusto kong gumawa mga bagay na mas malaki at naka-bold? Kaya ito ay lumiliko out na narito ang isang halimbawa sa headings.html, kung saan sa aking katawan, Mayroon akong isang H1 tag, H2, H3, apat, lima, o anim na, ang lahat ay tila medyo arcane. Ngunit kung pumunta ako bukas na ito Halimbawa, sabihin kumuha ng isang hitsura. Headings.html. 

Kaya maaaring magbigay sa mga browser sa pamamagitan ng default mong text na malaki at naka-bold ng disparate sukat. H1 ay malaki. H6 ay mas maliit at pagkatapos ay lahat ng iba pa sa pagitan. Kaya na kagiliw-giliw na ngunit hindi pa rin hindi tunay ang web alam ko. Paano kung gusto naming magkaroon ako isang bagay tulad ng isang listahan. . Kaya narito ang isang bullet na listahan ng tatlong ng mga bahay Harvard. 

Paano mo pumunta tungkol sa paggawa nito? Well, tingnan ang list.html. At dito, nakita namin ang isang maliit na piraso ng funkiness ngunit isaalang-alang ang kung ano ang nangyayari ipaalam. Kaya batay sa kung ano lang nakita mo, Ul nakatayo para unordered listahan. Unordered listahan lamang ay nangangahulugan na bullet. Walang mga numero. Mayroon din ng isang bagay na tinatawag na isang iniutos listahan, na kung saan ay isang ol sa tag. Pagkatapos li, mga item sa listahan ay ang lahat ng ibig sabihin nito. 

At awtomatikong ito kaya numero ng lahat ng bagay para sa iyo. Subalit muli, ang lahat ng aking mga indentation and white space ay lamang dahil sa akin. Ang browser ay hindi tunay na pagpunta sa pag-aalaga. Kaya kahit na hindi mo maaaring gawin ito, upang maging malinaw, hindi ka dapat kahit na ang browser ay pa rin ay magagawang maintindihan ito lamang fine. Ako pagpindot reload sa aking browser, ako ng pag-click reload at walang pagbabago ang nangyayari dahil ang mga browser pa rin paggawa ng eksakto kung ano ang aking sasabihin ito upang gawin. 

Lahat tama. Kaya ito ay ang lahat ng lamang text. Ngayon sabihin gawin ang isang bagay na mas kawili-wiling ipaalam. Pupunta ako sa sige at humiram ng ilang mga ito ng HTML. Pupunta ako sa sige at lumikha ng isang bagong file dito. At kami ay tumawag ito rick.html. Mayroon kaming disproportionately ginagamit ng isang bagay tinatawag na isang rick roll sa ito klase ng taong ito, hindi ko alam, ito lamang ang nangyari samahang. 

At ngayon ito ay nakuha sa labas ng kontrol. Kaya lang ako pagpunta sa pumunta sa mga ito. At kung pumunta ako sa Google Mga imahe at Rick Astley. Kung hindi mo alam kung bakit ginagawa namin na ito, basahin lamang hanggang sa Wikipedia. Sa bawat oras na-click mo sa link, ng isang tao ay tumatawa sa isang lugar. At hayaan mo akong pumunta ahead-- doon pumunta kami, tingnan ang imahe na ito hayaan. 

Kaya dito kami ay may isang imahe sa Google Images. At sabihin ipinapalagay na ito ay ipaalam makatwirang sa lahat ng dako sa internet. Kaya ako pagpunta sa ipagpalagay na ito ay OK para sa akin upang aktwal na ilagay ito sa aking mga web page. Pupunta ako sa sige at kopyahin ang URL ng imahe. At ngayon, kung pumunta ako pabalik sa Cloud 9, tingnan natin kung ano ang maaari kong gawin dito. Kaya dito ay lamang ng isang web page. Ito ang Rick Astley, haha, Pupunta ako sa ngayon bumalik sa aking browser, i-reload, at kawili-wili. 

Nasaan Rick? Kaya hayaan mo akong makita kung ano ang nangyari. Sa totoo lang, pupuntahan ko magpanggap tulad ng hindi ko gawin iyon. [Hindi marinig] inilagay siya sa dito. Susubukan naming bumalik sa na sa isang sandali. Kaya dito ang rick.html. Kaya na hindi Rick Astley. Kaya ito ay lumiliko out ng aming makakaya tunay na idagdag siya sa dito. Ito ang Rick Astley. Pupunta ako sa sabihin ninyo akong bigyan ng isang imahe na pinagmulan ay ang URL na lang kinopya ko, na wari ay isang masaya birthday ng isang bagay o iba pang. 

At ngayon ako pagpunta sa isara ang tag na tulad nito. Kaya ito ay wrapping sobrang haba. Ngunit mapansin na na ang lahat ko tapos ay bukas bracket ng imahe, source na may isang katangian ng mga ito. At ito ay isang tunay na mahabang URL. At sa dulo, mapapansin na ito. Bakit wala akong ginawang slash angled bracket sa halip na, tulad ng lahat ng iba pang mga tag, pagkakaroon ng isang bukas bracket, Img, sarado bracket? Tumagal lamang ng isang hulaan kahit na kayo walang pagpapalagayang kahit ano pa man sa HTML bago. 

Kaya ito ay kung paano ito magsasara ang mga utos, ngunit bakit ay hindi ito talagang gumawa intuitive kahulugan na gawin ng kaunti pa sa isang bagay masyadong masalita tulad ng malapit na imahe? Oo. Oo. Semantically lang, walang kahulugan ng simula ng isang imahe at nagtatapos ng isang imahe, ito ay alinman doon o ito ay hindi. Kaya ito ay hindi magkaroon ng kahulugan na mag-iwan ng isang puwang para sa anumang bagay sa loob ng isang imahe. Ikaw lamang ay hindi maaaring gawin na. At upang ang mga syntax nais lamang ay sa pangkalahatan upang gawin ang forward slash sa loob ng bukas na tag o ang pambukas na tag at pagkatapos ay pindutin ang I-save. 

Kaya kung ngayon ko i-reload ang file na ito, na ngayon Mayroon akong isang magandang pahina sa pagluluto web dito. At maaari namin tiyak talagang inisin ang mga tao sa pamamagitan ng sa halip ng pag-embed tulad ng isang link YouTube. At sa katunayan, anumang oras nakatanggap ka na wala na sa YouTube, at ipaalam sa akin talagang sinasadyang rick roll ang aking sarili dito. Kaya Rick roll. Kaya rick roll-- ako pagpunta sa pumunta dito. 

[MUSIC nagpe-play] 

OK, ang isang tao na nagustuhan iyon. Kaya mapansin ang lahat ng mga oras na ito, kung ikaw i-click ang link Share, ka ng kurso makuha ang URL na maaari mong aktwal na i-embed sa isang email o ng isang forensic imahe o sa isang hanay ng problema o sa isang slide. At ngayon, kung ako sa halip ay i-click embed, mapapansin na ang lahat ng oras na ito, ito bagay-bagay ay doon. Pupunta ako sa sige at kopyahin ito. 

At lamang upang maaari naming makita ang mga ito ng mas mahusay, Ako pagpunta sa ilagay ito sa aking text editor. Pansinin na ang kung ano ang Ay nagsasabi sa YouTube ay sa iyo. Sa bawat oras na bisitahin mo ang isang Video sa YouTube, kung ikaw nais na i-embed ang video sa iyong web page, grab lamang ito. Kaya isa pang ito ay HTML tag na tinatawag na isang iframe. O isang sa linya frame. Kaya masyadong kamukha ito ng kaunti pa complex kaysa sa lahat ng iba. Kaya ito ay lumiliko out na ang imahe tag at tila ang tag iframe kumuha ng kung ano ang tinatawag na mga katangian. 

At ito ay isa pang piraso ng syntax sa HTML. Bilang karagdagan sa mga tag ng pangalan, open name bracket tag, maaari mong kontrolin ang pag-uugali ng mga tag sa pamamagitan ng pagkakaroon ng isang buong grupo ng mga attribute ay katumbas ng halaga. Attribute ay katumbas ng halaga. At kaya halimbawa, Ay nagsasabi sa YouTube sa amin kung nais mo ang lapad ng video na ito upang maging 420 pixels at ang taas upang maging 315 pixels, na ang kung paano mo ipahayag ang mga ito sa HTML. 

Ang pinagmulan ng mga video ay pagpunta upang maging na long URL YouTube at pagkatapos ng ilang iba pang mga bagay-bagay tulad ng border frame ay zero, sa gayon ay marahil nangangahulugan na walang border sa paligid ng mga bagay. Payagan ang full screen marahil ay nangangahulugan na ang gumagamit Maaaring mag-click sa isang pindutan at talagang full screen ang video. Kaya kung talagang gusto kong maging impressive dito sa Rick dot HTML, sa halip na gamitin ang mga tag ng imahe, hayaan akong tanggalin iyon, sa halip i-paste ito. At ngayon i-reload. At ngayon dito na naman tayo. Sige, tama na iyan. Lahat ng mga karapatan kaya ako ay subukan mahirap hindi upang gawin iyon muli. Kaya kung ano ang ilan sa mga takeaways dito? Kaya HTML, bilang pangit bilang ng mga pahina ng web ay, ay talagang pretty simple. Ito ay hindi isang programming language. Hindi nito ay may mga pag-andar. Hindi nito ay may loop. Hindi nito ay may kondisyon. Lahat ng ito ay ay dose-dosenang mga iba't ibang mga tag, ang bawat isa ay may zero o higit pang mga katangian. At sa katunayan, kung ano ang masaya tungkol sa HTML simulan mo na sumisid sa ay na ito ay napaka-self madaling ituro. 

Lahat ng mga kinakailangan ay isang pag-unawa ng pangkalahatang balangkas ng HTML. Ano ang isang tag, kung ano ang isang katangian, paano mo talagang i-configure ang isang pahina ng web tulad ng sumusunod. At lahat ng iba pa ay talagang ang resulta ng mga naghahanap up sa isang online na reference o Pag-Google kung paano gawin ang ilang mga pamamaraan o bilang namin nakita, pagtingin sa source Facebook code, na naghahanap sa isang website na gusto mo at ito ay source code at unawa kung paano ang mga developer ay may talagang inilatag bagay out. 

Kaya maaari naming gawin mga imahe pati na rin. At sa katunayan, ginawa namin ito ng isang sandali ang nakalipas. Hayaan akong magpatuloy at ipakita lamang sa iyo. Narito ang ilang sample code. Kung gusto mo mang makita mainit ang ulo ng pusa. Kaya mapapansin na makakaya ko Mayroon dito ng isang tag ng imahe. At Mayroon akong isang komento sa itaas nito. Mayroon akong isang alternatibo teksto para sa accessibility. Kaya ang isang tao kung sino ang gumagamit ng isang screen reader para sa mga kadahilanan ng paningin maaaring aktwal na pagkatapos ay ang kanilang screen reader sabihin mainit ang ulo ng pusa. Dahil kung hindi sila maaari makita ang mga imahe, sila maaaring hindi bababa sa kung ang kanilang mga computer sabihin sa kanila sa salita kung ano ito. At ang pinagmulan ng file na ay cat.jpeg. Kaya sa katunayan, kung ako ay talagang nais na makakuha ng matalino, kung ano ang maaari kong magkaroon ng done-- Pangako ko na hindi pumunta sa Rick Astley, kaya Pupunta ako sa halip sa google para sa isang cat. At kung pumunta ako sa Google Images dito, at kami ay ipinapalagay na ito ay isang larawan ng aking pusa. 

Ipagpalagay na mayroon ako nag-click control o pakanan nag-click sa ito, hindi sinasadyang katakut-takot. At cat.jpeg pupuntahan ko upang i-save sa aking desktop. Hayaan akong ngayon bumalik sa cloud 9. Pansinin na dito, maaari kong pumunta upang mag-upload ng lokal na mga file. At kung sunggaban ko na ito file, cat.jpeg, pansinin na maaari ko ba itong i-drag at drop ito sa cloud 9 at ito ay pagpunta sa sumigaw sa akin dito. 

Dahil hindi namin nai bibigyan ka ng isang cat.jpeg file, ngunit ito ay napakadaling upang grab ang isang larawan na na sa iyo kinuha mula sa Facebook o Flickr o mga katulad at talagang i-drag at i-drop ito sa cloud 9 at pagkatapos ay gawin itong bahagi ng iyong sariling mga personal na website o problema itakda pitong o walong tulad ng makikita sa lalong madaling panahon kami ay makita. At pagkatapos ay kapag ikaw ay sa wakas bisitahin na cat, sa pag-aakala na-download ko na ang parehong cat, notice na- na kaibig-ibig. 

Ano ang gusto mong makita ay bagay na tulad nito ang mukha dito. Kaya ang mga file na iyong reference sa loob ng isang web page maaaring maging alinman sa mga lokal na sa iyong sariling account o remote sa ilang iba pang mga server tulad ng sa kaso ng Rick Astley photo nang kaunti ang nakalipas. Kaya kung saan else-- ano pa ang maaari naming gawin dito? Kaya sabihin kumuha ng isang pagtingin sa mga sumusunod. Alam mo kung ano ang uri ng cool? 

Kami ay kaya malayo pa sa paggawa ng napaka static web pahina. Gusto ko na pagandahin ang mga bagay up ang mga sumusunod. Gusto kong gumawa ng aking sariling mga search engine. Kaya gumawa ng isang search engine, sabihin sige at simulan ang paggawa nito. Pupunta ako sa magpatuloy at lumikha ng isang bagong file na tinatawag na search.html. At kami ay prefabed bersyon online. Oops. Huwag i-paste sa iyong terminal na window. Prefab bersyon online. At ako pagpunta upang simulan ang mga sumusunod. Kaya narito ang simula ng isang file na tinatawag search.html. Pupunta ako upang i-save ang mga ito sa direktoryo ng pinagmulan ngayon. Pupunta ako sa tawag na ito Search. Sa totoo lang, kami ay gumawa ng mas mahusay na ito. CS50 Search at talagang tatak sa mga ito. At ngayon, ako pagpunta sa sabihin isang bagay tulad ng H1 CS50 Search. At pagkatapos ay down na dito, pagdating H2 lalong madaling panahon. At lamang sa pagbabalik-tanaw, H1 at H2 ibig sabihin kung ano pagkakabanggit? 

Oo, kaya malaki at bold, at hindi bilang malaki, ngunit pa rin bold. Kaya kung ako i-save ito at pumunta sa paglipas dito, sabihin makita ang file search.html. Lahat ng karapatan, at ang isang ito ay right-- [hindi marinig]. Tumayo ka sa tabi. David ay nalilito. Oh, ito ay may karapatan. David ay isang tulala. SIGE. Kaya may ito ay. Kaya pagdating CS50 paghahanap sa lalong madaling panahon. Kaya ngayon, ni synthesize ipaalam ano ang ginawa namin noong nakaraang linggo. 

Saan usapan natin ang tungkol sa mga mas mababang antas mechanics ng HTTP. At ang mga bagong ideya ng HTML, na kung saan ay lamang ito markup language na kung saan kayo sabihin sa isang browser kung ano ang gagawin at ipatupad ang aming sariling mga search engine. Kaya sa halip na lamang sinasabi paparating, ako pagpunta sa kitang ipakilala bagay na tinatawag na isang form na tag. At sa ganitong anyo, ako pagpunta sa may isang bagay tulad ng isang patlang ng input. 

At ang pangalan ng input na ito field, ako pagpunta sa tumawag ito Q. At ang uri na ito ng patlang ng input Pupunta ako sa sabihin ay "text" lamang. At isang patlang ng teksto, tulad ng ipapakita namin makita, ay isang text box lang. At kaya ito ay hindi na-unawa dito upang magkaroon ng anumang bagay sa loob ng mga ito sa puntong ito. At kaya lang ako pupunta upang isara ang tag na iyon forward slash karapatan sa tag mismo. At pagkatapos ay ako pagpunta sa magkaroon ng isa sa iba pang mga input. Katumbas type Input isumite. At pagkatapos ay ako pagpunta sa isara ang isang ito masyadong. 

At ngayon ako pagpunta sa bumalik dito. At kami na makita, kahit na medyo mainit ang ulo, na ako Nakakuha ang mga simulain ng dito ang aking sariling mga pahina ng paghahanap. Sa katunayan, hayaan mo akong subukan na linisin ito up ng isang maliit na bit. Ito ay lumiliko out na sa input dito, maaari akong magkaroon ng isa pang katangian na tinatawag na placeholder. At upang makita ko ang isang bagay tulad ng mga keyword, o mas partikular, i-query para sa q. 

At pansinin, ngayon, mayroon akong ang ganitong uri ng kulay-abo na teksto na mawala bilang Sa sandaling simulan kong mag-type, ngunit ito ay marahil isang bagay mo na makikita sa iba pang mga pahina ng web. Hindi ko talagang gusto ang pindutan ng Isumite. Kaya ako tunay na pagpunta upang bigyan ang Isumite ang pindutan ng ang halaga ng mga paghahanap. At ngayon, kung i-reload ko, mapapansin na aking button nagiging pinangalanan paghahanap. Alam mo, hindi ko talaga tulad ng mga logo dito. Kaya Google Font generator. 

Gusto ko upang pagandahin ito up pa. Kaya CS50 paghahanap. Hayaan akong lumikha ng aking sariling logo. Na mukhang nice. Kaya natin ngayon akong i-save ito as-- dumating sa. Saan naman? May. SIGE. Hindi nasagot na ito. I-save bilang. Tangang browser. Stand sa pamamagitan ng, kami ay pagpunta sa ayusin ito minsan at para sa lahat. Mayroon kaming pumunta. Lahat tama. Sorry. Off-araw. Ngayon na ito ay funky. Lumabas sa full screen. Lahat tama. 

Ngayon, tulad ng isang normal tao, i-save ang imahe bilang. Logo.gif. Ngayon ako pagpunta sa pumunta sa CS50IDE at Pupunta ako sa simpleng grab ang mga logo, Pupunta ako upang i-drag ito sa aking source pitong direktoryo, Umiiral na ang file, ako ok na. Kaya ako pagpunta upang i-override ito dahil ako ay nagkaroon na ito. At ngayon paano ko mapupuksa ang mga ito? 

Sabihin sige dito at gawin pinagmulan ng imahe ay katumbas logo.gif. Isara ang. I-save. At ngayon, kung pumunta ako pabalik sa aking paghahanap page, ngayon ito ay naghahanap ng mahusay. Lahat ng mga karapatan, sa gayon ito ay hindi lubos na nagawa ang anumang bagay na kapaki-pakinabang. Sa katunayan, hayaan mo akong subukan na maghanap para sa isang pusa at tingnan kung ano ang mangyayari. Cats. Mapapahamak ang mga ito. Ito lamang ay hindi gumagana, tila. Kaya kung ano ang key na piraso na nawawala dito? 

Right, kahit na hindi mo alam ang anumang HTML, Sinimulan ko ang pagmamarka up ang form phone at sinabi ko na ito kung paano makakuha ng input, bigyan ako ng isang text box at magsumite ng isang pindutan, kung ano ang piraso ay tila nawawala? Ipagpalagay na gusto namin upang aktwal na makakuha ang bagay na ito gumagana nang tama. Ano ang dapat nating gawin? Kami ay may isang kailangan upang ipatupad ang likod dulo database o search engine mismo, at na ang pagpunta sa kumuha ng isang buong pulutong ng mga oras, lantaran. 

Kaya tandaan kung ano ang ginawa namin huling oras. Kaya kung naghahanap ka para sa isang bagay sa Google at ikaw ay in advance naka-off, pagpapabalik, instant search. Kaya hayaan mo akong i-na-off upang ang mga ito ang tunay na behaves tulad ng isang mas lumang browser paaralan, kung ngayon ako sa paghahanap para sa isang bagay tulad ng mga pusa, isipin kung ano ang hitsura ng URL tulad ng. Ito ay medyo cryptic. Ngunit nakapaloob doon, pagpapabalik, ay slash paghahanap. Tandang pananong q katumbas cats. 

At iyon ay tila upang bigyan ako isang buong grupo ng mga resulta ng paghahanap. Kaya alam mo kung ano ang ako pagpunta sa gawin? Pupunta ako upang humiram Google para sa isang minuto lamang. Pupunta ako sa pumunta sa paglipas ng dito at pupuntahan ko sabihin na ito ay bumubuo ng pagkilos o destination, kaya na magsalita, dapat maging literal Google. At ang paraan Nais kong sa paggamit ay magiging makuha. 

Kaya kung ano ang action? Action ay weirdly pinangalanan, ngunit na lamang ay nangangahulugan sino ang pagpunta sa hawakan ang pagkilos ng form na ito? Kapag nag-click ako Search, kung saan dapat pumunta ang mga resulta? At kung pumunta ako ngayon bumalik sa aking form dito at i-reload ang aking mga web page at ngayon sa paghahanap para sa isang bagay tulad ng aso, ngayon mapansin Ako ay muling ipinatupad Google. Right? 

Kung gusto ko upang maghanap para sa isang bagay ibang tao, ito ay gumagana para sa hindi lamang ang mga aso, ito rin ay gumagana para sa pusa. Ito rin ay gumagana para sa CS50. At OK, ito ay lamang sa ilalim whelming, ay hindi ito? Lahat ng mga karapatan, ngunit ito ay talagang gumagana. Kaya kung ano ang aktwal na nangyayari? Kaya tinuruan ko na ang aking browser, gamit HTML, na kumuha ng input mula sa user at talagang magpadala ng input na sa isang remote server gamit ang HTTP. 

At dahil ang aking browser nauunawaan HTTP, ito ang tunay bumuo ng mga URL upang ang kung ano ang End up ako sa ibabaw sa aking browser, paunawa kung ano ang mangyayari kapag ako ay naghanap para sa mga aso. Kung ako mag-click Search, mapapansin na ang mga pagbabago sa URL tulad ng nilayon ko upang google.com/search~~V katumbas query aso. At iyon ay dahil sa anyo Malay mo, dahil ang paraan na ito ay makakakuha ng, upang isama lamang ito sa URL na iyon doon. 

Ngayon, ang mga pahina ng web ay pangit pa rin. Kaya sabihin ipakilala ang isa sa iba pang mga piraso ng syntax kung kaya namin ngayon. At ito ay isang bagay na kilala ng cascading style sheet. Kaya hayaan mo akong tingnan ang ito halimbawa dito at tingnan kung maaari naming ipahiwatig kung ano ang nangyayari sa. Ito ang CSS0.html. At ito ay kung saan bagay makakuha ng isang maliit na pangit. Dahil sa kasamaang palad, sa mundo ng web, HTML lamang ay hindi maaaring gawin ang lahat. At kaya kung nais mong stylize iyong web page, ang tunay na kailangan upang tumutok sa mga aesthetics sa ibang paraan. Kaya dito, ako ang katawan ng aking web pahina sa loob ng kung saan ay isang malaking div. At isang div ay nangangahulugan lamang division. Kaya ito ay tulad ng isang talata ngunit ito ay hindi magkakaroon ng parehong semantics ng isang talata ng teksto. 

Ito ay nangangahulugan lamang na ang browser, dito pagdating isang malaking hugis-parihaba rehiyon ng aking web page, gusto kong hawakan ito lalo. Ngayon, 21 na linya ay kung saan na ang div magsisimula. At tumagal lamang ng isang hulaan. Ano ang epekto ng 21 na linya sa magpahinga ng ang mga nilalaman ng pahina? Pagsasentro ito. Iyan na ang lahat. Kaya hindi namin nakita ang isang paraan ng talagang nakasentro ang teksto. 

Sa katunayan, ang aking mga search engine, hindi katulad ng aktwal na Google, ay ang lahat ng mga inaring-ganap sa sa kaliwa. At kaya ngayon sa 21 na linya, ang sinasabi ko, hey browser, lumikha ng isang division ng pahina. Basta bigyan mo ako ng isang malaki, invisible na parihaba. Iyon ay kung paano gusto kong isip tungkol sa mga web page. At pagkatapos stylize ito tulad ng sumusunod. Inside ng mga quotes, ngayon, ay pangalawang wika na ipinakilala namin ngayon tinatawag na cascading style sheet. Sa kabutihang palad, masyadong ito ay hindi isang programming language, kaya napaka ito ay limitado sa syntax nito ngunit din tunay limitado sa kanyang pag-andar samantalang HTML ay tungkol sa lahat pagmamarka up ang data ng isang pahina ng web at ang istraktura ng isang web page. CSS ay karaniwang tungkol sa huling milya, ang aesthetics, pagkuha ng mga sukat at ang mga kulay at ang placement akmang-akma sa isang web page. At sa katunayan, ito ay binuo ng sa pangunahing mga pares ng halaga. 

Ang isang ari-arian na tulad nito, text ihanay, na sinusundan ng isang colon, kasunod ang halaga ng mga na ari-arian, na sa kasong ito ay center. At ngayon mapansin mo Maaari nest ng mga bagay. Kung gusto ko lahat ng bagay na Nai-highlight ko na nakasentro, na ang dahilan kung bakit mayroon akong 21 na linya at ang katumbas na line 31. Ngunit ipagpalagay ngayon ay nais na sabihin John Harvard, maligayang pagdating sa aking home page. 

Simbolo Copyright John Harvard. At ipagpalagay na gusto ko ang una sa ang mga linya na maging medyo malaki. 36 pixels. Kaya na ang isang disenteng laki. At gusto ko ang kanyang timbang na naka-bold. Ngunit pagkatapos ay sa ibaba na, Gusto ko ng mas maliit na teksto. At sa ibaba na, gusto ko kahit na mas maliit na teksto. Sorry. Ngayon nararamdaman ng isang off araw. 

Kaya ngayon, kung ano ang ginagawa ko para ipahayag ang mga ito? Narito sa linya 22 ay isang naka-embed div o nested div, kung ikaw ay. Ito masyadong ay may sariling estilo tag. Ako tukuyin ang isang laki ng font ng 36. Ako tukuyin ang isang font bigat ng bold. Down dito, tukuyin ko lamang ng 24 pixels. At sa wakas, sa 28 na linya, tukuyin ko 12. Kaya lang bilang isang mabilis katinuan suriin at bilang isang tao sa pagbabasa na ito, kung aling mga salita sa screen ay talagang magiging bold? Aling mga linya ay talagang bold? 

Just John Harvard. Right? Dahil lamang bilang 22 line sabi hey browser, narito ang isang division ng pahina. Gawin itong laki ng font 36 point. Gawin ang bigat ng font na naka-bold. Sa sandaling maabot mo ang kaukulang end tag o sarado na tag sa 24 na linya, ang ibig sabihin, hey browser, ihinto ang paggawa ng anumang mga ito ay ang iyong ginagawa. At pansinin na maging malinaw, kahit na 22 linya ay may lahat ng mga katangian tulad ng estilo, kapag kayo isara ang tag sa loob ng 24 na linya, banggitin mo lamang pangalan ng tag. 

Hindi mo na ulitin ang mga salita estilo o anumang bagay na nasa loob ng mga panipi. At kaya kung ako ay tumingin sa ito ngayon sa aking browser, sabihin isang tumingin sa ang huling resulta. Hayaan akong pumunta mauna na ang file na ito, na kung saan ay CSS 0. At ito ay medyo plain pa rin, ngunit nakakakuha ng medyo interesting. Ngunit ito ay lumiliko out doon ni iba pang mga bagay ang maaari kong gawin dito, at sa panganib ng paggawa ng ito ganap na kahindik-hindik, mapapansin dito na sa aking katawan ng aking web page, Maaari kong gawin ang isang bagay na nakakatawa tulad bg o kulay ng background. 

At mabilis, kung ano ang iyong paboritong kulay? Green aking narinig. Lahat tama. Kaya ngayon, kung ako pindutin reload ngayon, kami ay may isang green web page. Lahat ng mga karapatan, sa gayon ay hindi masama. At ngayon, kung gusto kong gumawa ito talaga cool, maaari kong gawin ang mga kulay ng aking text kahit red. Kaya sabihin makita kung ano ito mukhang. Ngayon ito ay naghahanap ng mahusay. At sa dako rito, kung ikaw talaga nais na gulo sa isang tao o kung gusto mong maging isa sa mga tao na sumusubok upang linlangin ka sa pagbisita sa isang web pahina dahil na-hangang mawalan sila Google sa pag-iisip may isang buong grupo ng like-- ipaalam key salita makita, i-reload. Saan ito pumunta? At doon ito sa amin. Lahat tama. Kaya sinasabi ko ito bilang isang bukod, bibigyan namin ng makipag-usap tungkol sa mga bagay na ito sa loob ng ilang linggo kapag kami makipag-usap tungkol sa seguridad, kung talagang i-embed buong kumpol na mga keyword sa isang pahina ng web, kahit na sila ay hindi makikita sa isang ng tao, ang isang tao ay tulad ng Google, siyempre, maaari pa rin mahanap ang tunay na ito. Lahat ng karapatan, kaya na medyo napakapangit medyo mabilis. 

At sa katunayan, ito ay hindi lahat na marami hindi katulad ng aking sariling web page bilang isang undergraduate, na Nagsimula ako sa Pag-Google sa paligid upang makahanap ng nakaraang mga bersyon ng aking mga lumang mga website. Ito ay medyo masama. Sa katunayan, ako ay hindi mahanap isa lamang bago class. Ngunit mayroong mas masahol pa doon. Tila ito ay aking bahay pabalik sa 1996 page. Tila Akala ko ito ay naaangkop upang hilingin sa mga tao ang kanilang mga pangalan bago maaari nilang aktwal na makita ang aking mga web page. 

At pagkatapos ay ipinakita ko sa kanila isang bagay bobo, marahil. Kukunin ko maghukay up ng higit pa para sa susunod na pagkakataon. Ngunit sa ngayon, sabihin isaalang-alang ang isang piraso ng disenyo. Pinag-usapan natin ang tungkol sa estilo. At ang pahinang ito kaya malayo at karamihan sa lahat ng iyong isinulat ko ay medyo malinis stylistically. Ngunit ano ang tungkol sa disenyo? Well, may isang pulutong ng mga kalabisan sa kung ano ang iyong na-paggawa ko dito. 

Nabanggit ko na ang salita kulay sa loob ng ilang mga lugar. Nabanggit ko na laki ng font sa isang pares ng mga lugar at naka-bold sa loob ng ilang mga lugar. At sa panimula, ako co humahalo dalawang wika. Mayroon akong HTML sa aking mga tag at ang aking mga katangian at pagkatapos ang lahat ng isang biglaang, pagitan ng mga panipi, mayroon akong ang pangalawang wika ngayon tinatawag na CSS, na muli, ay lamang ang mga key na mga pares ng halaga o mga pag-aari pinaghiwalay ng tutuldok. 

Ito ay lumiliko out na marami tulad ng sa C kung saan kami maaaring magsimula sa kadahilanan out ang ilang mga code sa header na file, upang maaari naming gawin ang parehong sa HTML. At isang hakbang patungo sa na ay ang mga sumusunod. Pansinin na ang bersyon na ito, CSS1.html ay structurally ang eksaktong parehong web page. Kaya Mayroon akong isang buong grupo ng divs, ngunit oras na ito, hindi ko na nakuha mapupuksa ng wrapper div bilang makikita mo. 

At ko na ibinigay sa mga tatlong divs itaas, gitna, at ibaba, natatanging mga ID. Ito ay maganda, dahil sa pamamagitan ng pagbibigay ng mga dibisyon ng pahina natatanging identifier, Maaari ko bang isangguni ang mga ito sa ibang lugar. Saan? Well, hayaan mo akong mag-scroll up. At kaya sa ngayon, anumang oras kami ay tumingin sa ulo ng isang pahina ng web, kung ano ang ang tanging tag namin ay sa ulo ng isang web page? Ang isang maliit na louder. Ang pamagat lamang sa ngayon. Ngunit ito ay lumiliko out doon ni ang ilang iba pang mga bagay-bagay maaari mong ilagay doon, isa sa na kung saan ito ay tinatawag na isang tag ng estilo. Kaya ilang sandali ang nakalipas, kami ay tumingin sa isang attribute style. Ino-out may isang tag ng estilo. Ito ay nabibilang sa loob ng ulo ng isang web page. At ngayon mapansin kung ano ako ng paggawa. Mayroon akong sa loob ng mga ito estilo ng tag ang mga sumusunod. Literal ako pagbanggit sa 20 linya pangalan ng tag na gusto kong stylize. 

Pagkatapos Mayroon akong bukas kulot suhay at sarado kulot suhay. Kaya katulad sa espiritu sa C, ngunit muli, ito ay hindi isang function, ito ay lamang ng isang syntactic detalye dito. At pagkatapos ng kurso, ako na nagsasabi sa ang browser, hey browser, gawin ang buong katawan ng pahina magkaroon ng isang pag-align ng teksto ng center. At pagkatapos na ito ay sinasabi ng mga sumusunod. Hey browser, kung makakita ka ng HTML elemento o tag sa pahinang iyon may isang natatanging identifier ng top, kaya ang simbolo hash dito ay nangangahulugan lamang natatanging ideya ng top, sige at gumawa ng laki ng font sa kanyang 36 at naka-bold ang timbang font nito. 

Hey browser, isang elemento na ID ay gitna, gawin itong 24 pixels. At hey browser, kung makakita ka ng ideya ng ibaba, gawin itong 12 pixels. Ang epekto sa dulo ay eksakto ang sam. Kung pumunta ako sa CSS 1, ang Mukhang parehong pahina. Ngunit hindi namin ng isang hakbang patungo isang bahagyang mas mahusay na disenyo. Hayaan akong bumalik ngayon dito sa CSS2 at makita kung ano pa ang nagawa ko. 

Ngayon ang pahina ay tunay, tunay na malinis. Sa katunayan, ang maaari kong magkasya ang lahat ng ang mga nilalaman sa isang pahina dito. Ngunit ano ang bagong tag ako ipinakilala, malinaw naman? Link. At ito ay hindi ang pinakamahusay na pangalan para sa isang tag, dahil ito ay hindi isang link sa kamalayan na alam namin ito, ngunit ito ay nangangahulugan na ng isang link sa ilang mga iba pang mga file. Ito ay uri ng tulad ng matutulis na isama sa C. 

Ito ang paraan sa HTML sabihin hey browser, pumunta makakuha ng mga nilalaman ng ang file na tinatawag css2.css. Ang relasyon, sa akin, ay na ito ay isang style sheet. At sa katunayan, na kung ano ang isa sa mga S sa cascading style sheet paraan. Ito ay isang style sheet. Ito lang ang text file na naglalaman ng ang maramihang mga ari-arian. Ito ay isang buong grupo ng mga estilo na nais mong mag-apply sa isang pahina. 

At kaya ito ay tila nagre-refer sa isang pangalawang file. At kung bubuksan ko na, CSS2.css, mapapansin na ang nagawa mo na ang lahat ko ay kopyahin at i-paste ang lahat ng mga ito sa ang file na ito. At ngayon, kahit na sa iyo na hindi kailanman coded ito bagay-bagay bago, isaalang-alang lamang sa mga kilalang-kilala sumbrero engineering on, kung bakit ito ang isang mas mahusay na disenyo ay marahil? Factoring out mga CSS properties, paglalagay sa kanila sa kanilang sariling mga file. Kahit na malulutas namin ito problema tulad ng limang minuto ang nakalipas sa pinakaunang bersyon. 

Hindi namin pinabuting na ang page stylistically, ito ay mas mahusay na lamang disenyo sa ilang mga kahulugan. Bakit sa palagay mo? Oo. Mas may kakayahang umangkop kung paano? Oo. Kaya kung nais mong puntahan bumalik at baguhin ang mga bagay-bagay, ngayon, mayroon kang isang lugar kung saan maaari mong baguhin ang mga bagay-bagay. At sa katunayan, para sa isang bagay tulad ng problema set pitong, kung saan makikita namin ipatupad ang isang stock website kalakalan, na ang pagpunta sa magkaroon ng isang ang maramihang mga pahina. At ito ay talagang nakakainis kung magpasya ka, hm, Hindi ko talagang gusto ang 24 pixels, gusto ko ito upang maging 28 pixels o bahagyang mas malaki. At pagkatapos ay may sa gawin ang isang global hanapin at palitan o buksan ang lahat ng mga file ng iyong website lang na talagang baguhin isang halaga. Sa pamamagitan ng factoring out ang mga estilo sa isang sentral na lugar, Maaari mo na ngayong buksan sa isang tekstong file sa CS50IDE sa anumang programa, baguhin ito, i-save ito, at tapos na. Propagated mo na ang mga mga pagbabago sa lahat ng dako. At iyon ay ang parehong sa isang tuldok h file pati na rin. Kaya ang anumang mga katanungan sa gayon ay malayo sa syntax na ito? Lahat ng karapatan, kaya na namin tapos na ang lahat ng ito ay tila maliban talagang ipatupad hyperlink. At sige at gawin ito upang ipaalam. Hayaan akong magpatuloy at lumikha ng isang bagong file dito. Pupunta ako sa mga tawag na ito link.html, ilagay sa code ngayon. 

At ako pagpunta sa gawin bukas bracket type doc html. Bilang isang tabi, ang bagay na ito sa top, ito doc type deklarasyon, ito ay ang isa lamang na ay kakaiba may exclamation point. Ikaw lamang ang may sa gawin ito doon at ito nangangahulugan namin ay gumagamit ng HTML bersyon 5. Mas lumang bersyon ng nagkaroon wika mas matagal string na iyong kailangan upang ilagay doon. Kaya dito ay isang halimbawa na tinatawag na link. 

Kailangan ko ng isang katawan ng aking web page dito. At sa dito, a href equals sabihin natin HTTP://www.disney.com at ang aking paboritong website, kami sabihin. Lahat ng karapatan, kaya ng isang napaka hindi nakapipinsala, page friendly user. Kung pupunta ako ngayon sa aking directory dito at magbukas ng mga link.html, mayroon kaming hyper text. 

At sa katunayan, ito ay kung saan ang H sa HTTP ay mula. Hypertext transfer protocol ay tungkol sa paglilipat ng mga text na may hyperlink sa iba pang mga mapagkukunan. At sa katunayan, dito ay ang mga pamilyar na, kung retro, asul na link na kung nag-click, ay tunay na humahantong sa akin na Disney.com. Ngayon, oh, na darating sa lalong madaling panahon. Lahat ng karapatan, kaya ngayon, ano ang ilang ng mga implikasyon ng mga ito? 

At lantaran, ay nagsisimula sa mundo upang makakuha ng isang maliit na mas pamilyar at din ng isang maliit na scarier kundi pati na rin ng kaunti pa sa sarili maipagtatanggol sa sandaling simulan mo upang maunawaan ang mga bagay-bagay. Dahil magkaaway, ang ilan sa iyo, kung ikaw ay pupunta sa pamamagitan ng iyong spam folder Gmail o kahit na iyong inbox, marahil mo tapat na paraan ng ilang mga uri ng mga email na humihiling sa iyo na baguhin ang iyong mga password siguro o baka ma-verify ang iyong mga kredensyal PayPal o watnat. 

At sa katunayan, maaaring ikaw ay nakatanggap bagay na nagsasabing tulad click dito upang i-reset ang iyong PayPal password. At ngayon, paunawa, kung Hindi na ito ay Disney.com ngunit tulad badplace.com at reload, tandaan na ang mga text dito maaaring sabihin ang anumang bagay kung ano pa man. At sa katunayan, ito lamang ang mga salita. Bakit hindi ko talagang maging sobrang malisyosong at sabihin http://www.paypal.com. 

Mag-click dito i-reset ang iyong PayPal password at ngayon i-reload. Mukhang ito pretty lehitimong, di ba? Ibig sabihin ko, hindi ko na mag-click sa ng isang email na nagsasabing ito lamang. Ngunit mapansin ang paghihiwalay sa dalawang bahagi dito. Sinasabi nito www.paypal.com, at sa katunayan, maghintay ng isang minuto, alam namin na gusto mong ang para sa seguridad. Kaya ngayon, pumunta sa www.paypal.com HTTPS, ngunit kung hindi mo pa nagagawa ito bago, makuha sa ugali ng pagpasada sa maliit na mga link dito. At ito ay mahirap upang makita ang sa screen doon, at ito ay hindi lahat na madali dito. Ngunit paraan pababa dito sa ang maliit na maliit na maliit na sulok gumagana ang browser talaga sabihin sa iyo na kami ay pagpunta upang badplace.com halip ng Paypal.com. Ngayon, kung saan kami makapupunta sa mga ito? Lahat ng mga halimbawa tapos na namin ngayon, mahirap na namin ang naka-code at nag-type ang mano-mano. Ang web ay hindi kapani-paniwalang hindi kawili-wili kapag ikaw ay nagsusumikap code ng iyong mga pahina ng web upang ang mga nilalaman ay static at hindi nagbabago. Syempre, ang lahat ng aming mga mga paboritong website sa araw na ito, maging ito man ay sa Gmail o Twitter o Facebook o anumang bilang ng iba ay dynamic. Sila ay ang pagbabago sa Bilang tugon sa input ng user tulad lamang ang mga resulta ng paghahanap ng Google. 

At kaya sa Miyerkules, kung ano ang ginagawa namin ay umalis kami ng HTML at CSS pagpapakilala sa likod sa amin at dalhin namin para sa ipinagkaloob na kami ngayon malaman ito at ipakilala kami ng isang bagong wika programming tinatawag na PHP, na kung saan ay nais C, ay pagpunta upang ibigay sa amin ang kapangyarihan upang aktwal na gumawa ng mga programa na ang kanilang sarili bumuo ng output. Sa kasong ito, kami ay gumagamit ng PHP upang bumuo ng mga dynamic na web mga pahina gamit ang bagong wika. Kaya higit pa sa na sa Miyerkules. Tingnan mo pagkatapos. 

[MUSIC nagpe-play]