1 00:00:00,000 --> 00:00:03,486 >> [MUSIC nagpe-play] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J MALAN: Ito ang CS50 at ito ay ang simula ng linggo 7. 4 00:00:14,250 --> 00:00:15,060 Kaya welcome back. 5 00:00:15,060 --> 00:00:17,540 At maaari mong isipin na sa hanay ng problema sa apat, 6 00:00:17,540 --> 00:00:21,510 nagkaroon ng isang piraso ng isang hunt basura para sa ilang mga hindi kapani-paniwala na premyo kung saan 7 00:00:21,510 --> 00:00:24,219 matapos mong makuha ang mga larawan ng staff parehong dito at sa New Haven, 8 00:00:24,219 --> 00:00:27,468 ikaw ay hinamon upang makahanap ng maraming ng mga siyentipiko computer na maaari mong. 9 00:00:27,468 --> 00:00:29,550 At mayroon ka namin ng isang buong grupo ng mga submissions. 10 00:00:29,550 --> 00:00:31,930 Naisip Gusto kong ibahagi ang ilang kasama mo dito ngayon. 11 00:00:31,930 --> 00:00:35,100 >> At Magpo-post kami ng lahat ng mga online. 12 00:00:35,100 --> 00:00:39,310 Ngunit sa partikular, nais ko na gumuhit ng iyong pansin to-- well isa, 13 00:00:39,310 --> 00:00:42,670 Sam ay sa lubos ng ilang sa mga ito pangkalahatan pagpapanggap tulad nito. 14 00:00:42,670 --> 00:00:45,750 Ngunit ito ay lilitaw na ang bilang ng mga ito umaga, ang nagwagi 15 00:00:45,750 --> 00:00:51,170 ay isang tiyak na tao na nagngangalang Ken sa 24 ng mga tauhan na nakunan sa camera 16 00:00:51,170 --> 00:00:54,600 o ng ilang higit pa kapag magdadala sa iyo sa account ng maramihang mga staff sa mga larawan. 17 00:00:54,600 --> 00:00:58,300 Nakalarawan dito ay Ken susunod kay Maria sa New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Ngayon, Ken, bagaman, lumiliko out ay piraso ng isang sulok kaso 19 00:01:01,300 --> 00:01:02,880 na hindi pa nangyari bago. 20 00:01:02,880 --> 00:01:05,713 Lumalabas na hindi ito nangyari sa akin upang ilagay ang fine print sa problema 21 00:01:05,713 --> 00:01:09,710 itakda ang apat na nagsasabing na kawani ay hindi karapat-dapat para sa kapani-paniwala premyo 22 00:01:09,710 --> 00:01:13,130 dahil Ken ay, of course, isa sa ang photographer sa aming mga kawani. 23 00:01:13,130 --> 00:01:16,820 Ngayon, may sinabi na, siya orihinal na isinulat sa akin upang sabihin 24 00:01:16,820 --> 00:01:19,180 mangyaring huwag mag-post ang mga larawan online. 25 00:01:19,180 --> 00:01:21,630 Sa tingin ko sa malaking bahagi dahil karamihan ng mga larawan 26 00:01:21,630 --> 00:01:24,499 na ito photographer kinuha hitsura isang maliit na bagay tulad nito. 27 00:01:24,499 --> 00:01:25,040 At ang gusto. 28 00:01:25,040 --> 00:01:28,990 >> Ngunit Ken ay nais sa akin upang tiyakin sa iyo na siya ay isang napakahusay na photographer, 29 00:01:28,990 --> 00:01:33,190 siya ay isang propesyonal, siya ay tumatagal ng mga larawan na hindi malabo, 30 00:01:33,190 --> 00:01:37,270 na mas mahusay sa focus, at siya kinuha lubos ng ilang ng aming sariling mga kawani. 31 00:01:37,270 --> 00:01:40,370 Ngunit sa halip na lamang kilalanin Ken, kung ano ang naisip naming gawin 32 00:01:40,370 --> 00:01:43,390 ay pumunta sa pamamagitan ng listahan ng mga aktwal na mag-aaral na isinumite. 33 00:01:43,390 --> 00:01:48,640 At ito ay lumiliko out na Lance na may 15 mga larawan bilang ng umaga 34 00:01:48,640 --> 00:01:50,030 ay ang aming winner. 35 00:01:50,030 --> 00:01:55,730 >> At nakalarawan dito ay Lance sa Colton, may Skaz, sa sarili ko, at sa Sam. 36 00:01:55,730 --> 00:02:00,230 Ngunit pagkatapos ito ay lumiliko out na ang bilang ng mga 11:46, kaya lang nang kaunti ang nakaraan, 37 00:02:00,230 --> 00:02:04,380 Bumalik ako sa aking email at natagpuan na nagkaroon kami pa ng isa pang submission 38 00:02:04,380 --> 00:02:08,300 sa pamamagitan ng isang mag-aaral na may pangalang Bonnie sinabi lamang na ito na ang email. 39 00:02:08,300 --> 00:02:10,800 Hindi pagpunta sa kasinungalingan, ako ginagawa ito sa panahon ng klase. 40 00:02:10,800 --> 00:02:17,620 At pagkatapos ay pumunta upang i-attach na lang 14 mga larawan, isa mahiyain ng Lance 15. 41 00:02:17,620 --> 00:02:22,690 >> Ngunit sa mga larawan ni Bonnie, ito ay lumiliko out ay ang maramihang mga miyembro ng kawani, Sam 42 00:02:22,690 --> 00:02:25,960 kasama ng mga ito, kaya kung ano ang naisip namin kami ay gawin ay kilalanin pareho sa mga ito. 43 00:02:25,960 --> 00:02:29,240 Kaya sa karagdagan sa pagkuha ng Dropbox space na lahat na lumahok 44 00:02:29,240 --> 00:02:33,900 natatanggap, ang dalawang mga seksyon ay magkakaroon din ng makatanggap ng isang magandang catered tanghalian para sa kanila 45 00:02:33,900 --> 00:02:36,100 at ang kanilang mga seksyon mates na ito darating na linggo. 46 00:02:36,100 --> 00:02:38,970 At kaya ay maririnig mo mula sa amin, Lance at Bonnie, tungkol na. 47 00:02:38,970 --> 00:02:40,002 Kaya big congrats sa kanila. 48 00:02:40,002 --> 00:02:42,210 Ngayon, sa mga mo na gagawin tulad ng tanghalian sa mas pangkalahatang 49 00:02:42,210 --> 00:02:45,320 malaman na CS50 tanghalian sa Cambridge at New Haven ay ito Biyernes. 50 00:02:45,320 --> 00:02:48,510 Pumunta sa slash website RSVP CS50. 51 00:02:48,510 --> 00:02:49,800 At ngayon ang isang salita sa seminar. 52 00:02:49,800 --> 00:02:50,730 Iba pa curricularly. 53 00:02:50,730 --> 00:02:52,490 Kaya na papalapit sa point ng semestre 54 00:02:52,490 --> 00:02:55,200 kung saan dapat mong simulan ang iisip tungkol sa huling proyekto. 55 00:02:55,200 --> 00:02:59,309 At sa katunayan, sa isang bit lamang, ay tinatawag na pre panukala ay maaaring dahil. 56 00:02:59,309 --> 00:03:01,850 Kaya pre panukala ay sinadya upang maging medyo mababa ang epekto at talagang 57 00:03:01,850 --> 00:03:04,109 lamang ng pagkakataon para sa iyo upang bumuo ng isang maikling tala 58 00:03:04,109 --> 00:03:06,900 iyong pagtuturo kapwa upang magbigay-alam sa kanya kung ano ang iyong iniisip mo 59 00:03:06,900 --> 00:03:09,140 baka gusto mong gawin para sa iyong huling proyekto. 60 00:03:09,140 --> 00:03:11,730 >> Ngayon, maraming mga mag-aaral end up paggawa ng mga web based na huling proyekto. 61 00:03:11,730 --> 00:03:13,800 At siyempre, hindi namin lamang huling ngayong linggo na ito sa 62 00:03:13,800 --> 00:03:15,890 at sa kabila ng diving sa web programming. 63 00:03:15,890 --> 00:03:18,200 Kaya huwag mag-alala kung ikaw mayroon talagang walang ideya kung paano 64 00:03:18,200 --> 00:03:21,594 Gusto mong bumuo ng mga ideya na maaaring mayroon ka sa iyong isip. 65 00:03:21,594 --> 00:03:24,510 Ito ay talagang lamang ng isang pilitin ang function upang makakuha ka-iisip at pakikipag-usap 66 00:03:24,510 --> 00:03:25,650 sa iyong TF tungkol dito. 67 00:03:25,650 --> 00:03:28,810 Ngunit upang makatulong sa iyo na iyon, at sa huling proyekto sa huli, 68 00:03:28,810 --> 00:03:31,750 malaman na CS50 ay may tradisyon ng aalok seminar. 69 00:03:31,750 --> 00:03:36,084 >> At ang mga ito ay opsyonal, sa kamay, o magbigay ng panayam batay sa mga pagkakataon 70 00:03:36,084 --> 00:03:39,000 upang malaman ang higit pa tungkol sa mga paksa na isang maliit na mababa sa kurso ni 71 00:03:39,000 --> 00:03:43,310 syllabus, ngunit gayunman kahanga-hangang materyal sa drive huling proyekto. 72 00:03:43,310 --> 00:03:46,840 At kaya ito ay ang listahan na CS50 staff dito sa New Haven 73 00:03:46,840 --> 00:03:48,600 may magkaroon ng para sa sa taong ito ang tungkol sa iOS 74 00:03:48,600 --> 00:03:50,730 programming, Android programming, pag-unlad ng laro, 75 00:03:50,730 --> 00:03:54,480 at mga kumpol ng higit pang mga tool at mga wika at mga diskarte. 76 00:03:54,480 --> 00:03:56,780 >> Kaya abangan sa website ng CS50. 77 00:03:56,780 --> 00:04:00,110 At sa ngayon, kung gusto mo upang irehistro ang iyong interes sa alinman sa mga ito, 78 00:04:00,110 --> 00:04:02,510 pumunta sa slash rehistro CS50. 79 00:04:02,510 --> 00:04:05,770 At pagkatapos ay sundin up bilang sa araw at oras ng flight at mga lokasyon 80 00:04:05,770 --> 00:04:09,090 at everything-- karamihan lahat ng bagay ay maging stream at magagamit din on demand 81 00:04:09,090 --> 00:04:11,750 pagkatapos kung hindi mo aktwal na maaaring gawin itong. 82 00:04:11,750 --> 00:04:15,800 Kaya nang walang karagdagang linggal, namin tumigil huling beses na may GET. 83 00:04:15,800 --> 00:04:19,610 >> At ito ay gaya ng mensahe na sa loob ng virtual sobre, pagpapabalik, 84 00:04:19,610 --> 00:04:23,960 na namin ang lumipas mula sa router sa router sa router sa pagitan ng isang web browser at isang web 85 00:04:23,960 --> 00:04:24,487 server. 86 00:04:24,487 --> 00:04:26,695 At mensahe na tumingin ng isang maliit na bagay tulad nito. 87 00:04:26,695 --> 00:04:29,700 Ito ay ang mas arcane mensahe na ay sa loob ng isang sobre talagang 88 00:04:29,700 --> 00:04:34,440 nakasulat sa isang piraso ng papel na sabi unang linya literal, kumuha slash. 89 00:04:34,440 --> 00:04:37,830 >> At tulad ng isang katinuan check, ano ang ginawa slash magpakilala? 90 00:04:37,830 --> 00:04:40,455 Ano ang ibig sabihin kapag slash humihiling ng isang website? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Humiling ka sa lahat ng oras. 93 00:04:44,250 --> 00:04:47,333 Karamihan sa anumang oras na bisitahin mo ang isang website, ikaw ay hindi talaga type ng isang pangalan ng file. 94 00:04:47,333 --> 00:04:50,960 Ikaw ay malamang na pumunta lamang sa Facebook.com, ipasok, gmail.com, o mga katulad. 95 00:04:50,960 --> 00:04:52,260 At kung ano ang kinakatawan slash? 96 00:04:52,260 --> 00:04:53,506 Ano ang file? 97 00:04:53,506 --> 00:04:54,630 O kung ano ang pahina, partikular na? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Ang index, oo. 100 00:05:00,720 --> 00:05:01,810 Kaya ang default na pahina. 101 00:05:01,810 --> 00:05:04,810 Kaya kung hindi mo tukuyin ang isang file pangalanan dahil kakailanganin namin simulan upang makita, 102 00:05:04,810 --> 00:05:07,750 ang tunay na ikaw lamang humihiling bigyan ako ang default na pahina ng Facebook 103 00:05:07,750 --> 00:05:10,800 o bigyan ako ng aking inbox o magbigay sa akin ang default na pahina ng balita 104 00:05:10,800 --> 00:05:12,510 sa website ng CNN o mga katulad. 105 00:05:12,510 --> 00:05:15,220 At isang server at pagkatapos ay tumugon sa mensahe na may isang bagay na 106 00:05:15,220 --> 00:05:18,420 tulad nito, na sinasabi oo, ako magsalita HTTP na bersyon 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, na kung saan ay isang katayuan code na bihira kawani na tao namin 108 00:05:21,130 --> 00:05:22,790 kailanman makikita dahil ito ay mabuti. 109 00:05:22,790 --> 00:05:26,640 Dahil ito ay nangangahulugan OK, ang kahilingan natanggap at hawakan ng maayos. 110 00:05:26,640 --> 00:05:28,960 At ang uri ng nilalaman Lumilitaw sa mga tugon 111 00:05:28,960 --> 00:05:31,170 ay lubos na madalas, ngunit hindi laging, text. 112 00:05:31,170 --> 00:05:32,580 At partikular, HTML. 113 00:05:32,580 --> 00:05:34,760 At iyan ay talagang kung saan tayo ay tumingin sa araw na ito. 114 00:05:34,760 --> 00:05:37,140 >> Kaya sa katunayan, Pupunta ako upang pumunta magpatuloy at buksan up ng isang browser. 115 00:05:37,140 --> 00:05:40,410 Pupunta ako upang gamitin ang Chrome, maaari mong gamitin ang karamihan sa anumang browser sa linggo na dumating. 116 00:05:40,410 --> 00:05:42,410 Karaniwan naming inirerekumenda Chrome dahil ito ay lalo na 117 00:05:42,410 --> 00:05:43,750 mabuti para sa mga software developers. 118 00:05:43,750 --> 00:05:46,070 Ito ay nakuha ng isang pulutong ng mga built in mga kasangkapan na gumawa ng mas madali 119 00:05:46,070 --> 00:05:49,800 upang bumuo ng hindi lamang ng HTML at CSS, mga bagay na namin simulan ang pakikipag-usap tungkol sa ngayon, 120 00:05:49,800 --> 00:05:51,530 kundi pati na rin sa iba pang mga wika pati na rin. 121 00:05:51,530 --> 00:05:55,530 >> At ako pagpunta sa sige at pumunta to-- Pupunta ako sa Control click o pakanan 122 00:05:55,530 --> 00:05:57,210 i-click kahit saan sa isang web page. 123 00:05:57,210 --> 00:05:59,070 At ako pagpunta sa pumunta sa Siyasatin ang Elemento. 124 00:05:59,070 --> 00:06:03,850 At ako pagpunta upang mag-tweak ang aking screen lang nang kaunti dito. 125 00:06:03,850 --> 00:06:05,790 Hayaan akong ilipat ito sa ibaba. 126 00:06:05,790 --> 00:06:08,140 Kaya ito ay kung ano ang tawag dito Inspektor ng Chrome. 127 00:06:08,140 --> 00:06:11,010 Kaya ito ay tulad ng isang pag-debug tool na binuo sa Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Lahat ng sa iyo ay mayroon na ito kung kayo ay gumagamit ng Chrome. 129 00:06:13,520 --> 00:06:17,169 At ito ay nagpapahintulot sa iyo na makita kung ano ang nangyayari sa ilalim ng hood ng ilang mga web page. 130 00:06:17,169 --> 00:06:19,210 Kaya sabihin aktwal na tumagal ng isang tingnan ang mga ito tulad ng sumusunod. 131 00:06:19,210 --> 00:06:21,251 Ito ay may paraan higit pang mga tampok at pinapahalagahan namin ang tungkol sa ngayon. 132 00:06:21,251 --> 00:06:22,760 Ngunit may mga tabs sa paglipas dito. 133 00:06:22,760 --> 00:06:25,890 Elements, network, mga pinagkukunan, timeline, at ilang iba pang mga bagay-bagay. 134 00:06:25,890 --> 00:06:27,800 Pupunta ako sa mag-click sa Network para sa isang sandali. 135 00:06:27,800 --> 00:06:30,500 >> At ito ay isang maliit na napakalaki sa unang tingin dito. 136 00:06:30,500 --> 00:06:34,190 Ngunit kung ano ako pagpunta sa gawin ay ipaalam akin pasimplehin ito nang kaunti. 137 00:06:34,190 --> 00:06:37,560 Pupunta ako sa i-on ang pagtatala ng liwanag upang ito ay pula. 138 00:06:37,560 --> 00:06:39,140 At ako pagpunta sa sabihin mapanatili log. 139 00:06:39,140 --> 00:06:41,015 At ito ay lamang ng isang maliit na bagay ko korte out 140 00:06:41,015 --> 00:06:44,120 sa paglipas ng panahon na ang pagpunta sa i-save ang ang lahat ng bagay na mangyayari sa browser. 141 00:06:44,120 --> 00:06:50,030 At ngayon ako pagpunta sa pumunta upang http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Sa totoo lang, sabihin gawin www ipaalam para sa mabuting panukala, slash. 143 00:06:52,690 --> 00:06:53,643 Enter. 144 00:06:53,643 --> 00:06:56,180 Kaya ang isang URL na marami sa maaari mong binisita. 145 00:06:56,180 --> 00:06:58,830 At ngayon sa Facebook ni web pahina ay dumating sa itaas. 146 00:06:58,830 --> 00:07:02,350 At pagkatapos ng buong bungkos ng stuff nagsakay sa pamamagitan ng sa ilalim. 147 00:07:02,350 --> 00:07:04,830 At sa katunayan, ito ay lumiliko out na kapag binisita mo ang Facebook.com, 148 00:07:04,830 --> 00:07:09,320 ikaw ay hindi lamang ang paggawa ng isang HTTP kahilingan, ito ay lumiliko out na ang pagpunta sa Facebook.com 149 00:07:09,320 --> 00:07:14,320 nagpapadala 41 ng mga sobre, bawat isa ay may sarili nitong mga kahilingan get, 150 00:07:14,320 --> 00:07:18,360 gaya ng ipinahiwatig, kahit na sa likod ng screen dito, sa ibaba ng screen, 151 00:07:18,360 --> 00:07:24,040 ito ay nagpapahiwatig na, sa katunayan, ang aking ginawa 41 ang mga kahilingan browser. 152 00:07:24,040 --> 00:07:29,689 >> At sa kabuuan, inilipat ito ng 861 kilobytes at ito kinuha para sa ilang kadahilanan 153 00:07:29,689 --> 00:07:31,730 tulad ng maraming bilang walong segundo upang i-download ang lahat ng iyon. 154 00:07:31,730 --> 00:07:33,790 Kaya na talagang isang maliit na kakaiba na site ng Facebook ay tumagal na 155 00:07:33,790 --> 00:07:35,600 mahaba, ngunit kaya ito sa kasong ito. 156 00:07:35,600 --> 00:07:39,520 Ngayon, ang lahat ng mga ito hindi ko talaga pag-aalaga tungkol maliban para sa pinakamataas na kahilingan. 157 00:07:39,520 --> 00:07:46,440 Kaya sabihin pumunta sa isang ito dito mismo at hayaan mo akong mag-zoom out para sa sandali lamang. 158 00:07:46,440 --> 00:07:47,754 >> At hayaan mo akong mag-zoom in sa mga ito. 159 00:07:47,754 --> 00:07:50,670 Kaya kung ano ang nagawa ko sa kaliwa kahit na may isang pulutong pagpunta sa paglipas dito 160 00:07:50,670 --> 00:07:53,360 ay nai-highlight ko Facebook.com at pagkatapos ay 161 00:07:53,360 --> 00:07:56,540 paunawa na ako ng scroll down, scroll down, scroll down, 162 00:07:56,540 --> 00:07:58,330 upang humiling ng header. 163 00:07:58,330 --> 00:08:01,720 At makikita mo na nagpapakita ng Chrome akin mahalagang ang panloob na nilalaman 164 00:08:01,720 --> 00:08:02,810 ng kahilingan ko ginawa. 165 00:08:02,810 --> 00:08:06,130 Hindi ito ang pag-format sa lubos sa parehong paraan, ngunit napansin may banggitin ng kumuha, 166 00:08:06,130 --> 00:08:09,481 mapansin mayroong banggitin ng host, Facebook.com, path, o slash, 167 00:08:09,481 --> 00:08:10,730 kung saan ay ang file na aking hiniling. 168 00:08:10,730 --> 00:08:12,930 >> At pagkatapos ay kung mag-scroll ko i-back up, bibigyan namin ng aktwal 169 00:08:12,930 --> 00:08:17,270 makita na kung ano ang ibinalik Facebook sa akin ay ang lahat ng mga header. 170 00:08:17,270 --> 00:08:21,040 Kaya sa loob ng na virtual sobre sa katunayan ay isang pulutong ng mga pangunahing mga pares ng halaga. 171 00:08:21,040 --> 00:08:23,130 Ang isang salita, ang isang colon, at pagkatapos ay isang halaga. 172 00:08:23,130 --> 00:08:25,050 Ang isang salita, ang isang colon, at isang halaga. 173 00:08:25,050 --> 00:08:26,160 Ang mga ito ay tinatawag na mga header. 174 00:08:26,160 --> 00:08:31,860 At may paraan mas detalyado dito kaysa talagang nagmamalasakit tayo sa ngayon. 175 00:08:31,860 --> 00:08:33,750 >> Ngunit ito ay pangalawa sa huling isa down doon, 176 00:08:33,750 --> 00:08:38,809 paunawa, na ang server Facebook.com ni, Tunay na sinabi dito ay ilang mga text HTML. 177 00:08:38,809 --> 00:08:41,409 Kaya lahat ng ito ay upang sabihin na kapag humiling ka ng isang web 178 00:08:41,409 --> 00:08:44,300 pahina mula sa isang browser sa isang server, tumugon server na 179 00:08:44,300 --> 00:08:47,630 may isang sobre ng kanyang sariling loob ng na text. 180 00:08:47,630 --> 00:08:49,020 Sa ibang salita, HTML. 181 00:08:49,020 --> 00:08:50,590 Hyper Text Markup Language. 182 00:08:50,590 --> 00:08:53,200 Alin ang isa pang wika na ipakilala kami ngayon 183 00:08:53,200 --> 00:08:57,740 na ang mga tao o mga computer makabuo upang ipatupad ang mga pahina ng web. 184 00:08:57,740 --> 00:08:59,580 >> Partikular, tingnan natin ito ipaalam. 185 00:08:59,580 --> 00:09:03,277 Pupunta ako sa ngayon bumalik sa website ng Facebook. 186 00:09:03,277 --> 00:09:05,360 At ako pagpunta sa makatarungan control-click o i-right click 187 00:09:05,360 --> 00:09:07,634 at mag-click sa View Page Source. 188 00:09:07,634 --> 00:09:10,550 At kahit na hindi ka gumagamit ng Chrome, IE ay maaaring gawin ito, Firefox ay maaaring gawin ito, 189 00:09:10,550 --> 00:09:14,060 Safari maaaring gawin ito, kahit na ang mga menu maaaring tumingin ng isang maliit na iba't ibang mga pagpipilian. 190 00:09:14,060 --> 00:09:18,990 At ito ay ang HTML na Mark at kumpanya sa Facebook isinulat. 191 00:09:18,990 --> 00:09:24,640 >> At sa sama-sama, ang wikang ito dito nagpapatupad ng mga kulay asul at ang puting pahina 192 00:09:24,640 --> 00:09:26,370 na nakita natin sa isang sandali ang nakalipas. 193 00:09:26,370 --> 00:09:28,030 Ngayon, ito ay isang bit napakalaki. 194 00:09:28,030 --> 00:09:31,400 Ngunit kung titingnan up kami sa kaliwang tuktok, hindi namin pagpunta sa simulan na makita ang ilang mga pattern. 195 00:09:31,400 --> 00:09:34,140 Mukhang may isang pulutong sa mga open angle bracket 196 00:09:34,140 --> 00:09:35,970 at pagkatapos ay may mga keyword na ito HTML. 197 00:09:35,970 --> 00:09:38,330 Narito ang isa pang bukas angle bracket at ulo. 198 00:09:38,330 --> 00:09:41,560 >> Narito ang, kung mag-scroll namin down at pababa at pababa, ako 199 00:09:41,560 --> 00:09:43,820 pagpunta sa sige, at subukan sa paghahanap para sa isang bagay. 200 00:09:43,820 --> 00:09:48,510 May paraan sa ibabaw sa kanan dito ay bukas body bracket. 201 00:09:48,510 --> 00:09:50,800 At isipin mula sa huling time na namin ipinanukalang 202 00:09:50,800 --> 00:09:53,364 na ang pinakasimpleng web page na ang isang tao ay maaaring sumulat 203 00:09:53,364 --> 00:09:55,030 maaaring tumingin ng isang maliit na bagay tulad nito. 204 00:09:55,030 --> 00:09:58,430 Open tag na HTML, bukas head tag, buksan ang tag na pamagat, 205 00:09:58,430 --> 00:10:03,230 pagkatapos ay sarado pamagat, closed ulo, bukas body tag, ilang teksto, sarado ang katawan, 206 00:10:03,230 --> 00:10:04,720 closed HTML. 207 00:10:04,720 --> 00:10:06,290 >> Ngunit isang i-pause dito para sa isang sandali lamang. 208 00:10:06,290 --> 00:10:09,030 Ang code na ito, kahit na kung ikaw na Hindi nakasulat na ito bago 209 00:10:09,030 --> 00:10:11,864 ngunit hindi lubos na maunawaan pa rin kung ano ang nangyayari, mukhang medyo magandang. 210 00:10:11,864 --> 00:10:12,821 Right, ito ay masyadong malinis. 211 00:10:12,821 --> 00:10:14,120 Ito ay napaka-stylistically nice. 212 00:10:14,120 --> 00:10:16,190 Ang isang pulutong ng indentation and white space. 213 00:10:16,190 --> 00:10:18,020 Facebook ay hindi. 214 00:10:18,020 --> 00:10:23,190 Kaya bakit Facebook kaya magkano mas masahol pa kaysa sa ako sa pagsulat ng HTML? 215 00:10:23,190 --> 00:10:24,310 Malas. 216 00:10:24,310 --> 00:10:26,899 >> Right, ito ay tulad ng isang sa labas ng limang para sa estilo. 217 00:10:26,899 --> 00:10:29,315 May isang nag-uudyok na dahilan para sa kanila upang kunin ang mga sulok. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Lahat ng karapatan, kaya sila ay hindi nais na gawing mas madali para sa iyo na basahin ito. 220 00:10:33,860 --> 00:10:36,940 Kaya sa ilang mga kahulugan, ang mga ito obfuscating ito, uri ng scrambling ito 221 00:10:36,940 --> 00:10:40,260 hindi bababa sa aesthetically kaya na ito ay mas mahirap para sa MySpace 222 00:10:40,260 --> 00:10:42,705 upang pumunta at mag-rip off ang kanilang homepage at ang HTML para sa mga ito. 223 00:10:42,705 --> 00:10:45,080 Lumalabas na may mga programa bagaman, kabilang ang Chrome, 224 00:10:45,080 --> 00:10:47,020 maaari naming linisin ito up super madali. 225 00:10:47,020 --> 00:10:49,420 Kaya ito ay hindi lubos na bilang ang dahilan. 226 00:10:49,420 --> 00:10:51,290 Ano pa ang maaaring maging sanhi. 227 00:10:51,290 --> 00:10:51,790 Oo. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Oo, data white space gastos. 230 00:10:55,890 --> 00:10:56,598 Ano ang ibig mong sabihin? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Oo, eksakto. 233 00:11:02,979 --> 00:11:06,020 Kung ikaw pindutin ang Tab key ng maraming o ang space bar, isaalang-alang ang mga implikasyon. 234 00:11:06,020 --> 00:11:10,060 Kaya ang bawat key sa iyong keyboard ay isang Kinakatawan [hindi marinig] bilang isang byte. 235 00:11:10,060 --> 00:11:14,560 >> Kaya ipagpalagay na Mark o alinman sa mga devs mga araw na ito ay pinindot niya ang spacebar beses lang 236 00:11:14,560 --> 00:11:17,899 sa HTML na pahina na kumakatawan homepage ng Facebook. 237 00:11:17,899 --> 00:11:19,690 At Facebook ay may maraming ng mga gumagamit ng mga araw na ito. 238 00:11:19,690 --> 00:11:24,030 Kaya ipagpalagay na homepage ng Facebook ay binisita ng isang bilyong mga tao ngayon. 239 00:11:24,030 --> 00:11:27,020 At ang isang tao sa Facebook ay pindutin ang space bar isang beses lang. 240 00:11:27,020 --> 00:11:29,890 >> Kaya isa sa mga karagdagang byte, isang bilyong mga kahilingan, 241 00:11:29,890 --> 00:11:32,790 kung magkano ang mas maraming data ay Facebook paglilipat ng higit sa internet 242 00:11:32,790 --> 00:11:37,160 dahil ang isang tao ay pindutin ang spacebar sa kanyang keyboard? 243 00:11:37,160 --> 00:11:41,660 Isang bilyong bytes, o isang gigabyte ng ang data ay ipinadala mula sa mga server ng Facebook 244 00:11:41,660 --> 00:11:43,626 sa mga tao sa paligid ng mundo para sa walang magandang dahilan. 245 00:11:43,626 --> 00:11:44,750 Ngayon, na ang isang space lang. 246 00:11:44,750 --> 00:11:48,866 >> Isipin kung talagang malinis namin ito bagay up at naka-indent ito at idinagdag 247 00:11:48,866 --> 00:11:50,990 isang pulutong ng mga puting espasyo at tab na mga character at mga puwang, 248 00:11:50,990 --> 00:11:53,656 napupunta sa iyo gigabytes paggastos, kung hindi terra bytes pa ng space. 249 00:11:53,656 --> 00:11:56,640 At kaya super karaniwan sa mga aktwal na mundo ng web development 250 00:11:56,640 --> 00:11:58,950 ay upang magpaliit iyong code. 251 00:11:58,950 --> 00:12:01,280 At kami ay makakita kung paano mo maaaring gawin ito. 252 00:12:01,280 --> 00:12:04,630 >> Ngunit ngayon, makikita namin simulan ang pagsusulat ng code na ang tunay na nababasa ng tao sa amin. 253 00:12:04,630 --> 00:12:10,120 Ito ay lumiliko out, bagaman, kung ikaw ay bumalik sa tool na ito sa Chrome Siyasatin Element, 254 00:12:10,120 --> 00:12:12,030 dati, kami ay sa tab na Network. 255 00:12:12,030 --> 00:12:15,430 Ito ay lumiliko out na kung pumunta ka sa tab elemento, kung ano ang iyong aktwal na makita 256 00:12:15,430 --> 00:12:19,230 ay Chrome ni pretty nakalimbag bersyon ng na parehong HTML. 257 00:12:19,230 --> 00:12:20,640 Kaya mo deobfuscated namin ito. 258 00:12:20,640 --> 00:12:22,472 Kaya ito ay hindi tugma para sa isang computer. 259 00:12:22,472 --> 00:12:24,430 At ngayon ay maaari mo talagang i-click sa paligid at simulan 260 00:12:24,430 --> 00:12:27,630 upang makita ang hierarchy na ay isang web page. 261 00:12:27,630 --> 00:12:28,780 Kaya sabihin aktwal na gawin ito. 262 00:12:28,780 --> 00:12:32,120 Pupunta ako sa sige at buksan up on aking Mac isang programa na tinatawag text edit. 263 00:12:32,120 --> 00:12:35,490 At isipin na ito ay lamang isang napaka-simpleng programa text. 264 00:12:35,490 --> 00:12:37,490 Windows ay may notepad.exe. 265 00:12:37,490 --> 00:12:39,820 At ako pagpunta sa verbatim i-type ang mga sumusunod. 266 00:12:39,820 --> 00:12:44,650 Doc type HTML, bukas bracket HTML, sarado bracket HTML, 267 00:12:44,650 --> 00:12:49,000 kami ay ang pinuno ng pahina dito, sa dulo ng ulo ng pahina dito, 268 00:12:49,000 --> 00:12:52,310 isang pamagat ay magiging tulad ng, hello mundo. 269 00:12:52,310 --> 00:12:56,660 >> At pagkatapos ay down na dito, kailangan namin katawan ng web page. 270 00:12:56,660 --> 00:12:58,050 Katawan Closed. 271 00:12:58,050 --> 00:13:00,700 At pagkatapos in dito, hello mundo. 272 00:13:00,700 --> 00:13:01,270 Lahat tama. 273 00:13:01,270 --> 00:13:03,350 Kaya namin ang nakasulat sa isang napakabilis na web page. 274 00:13:03,350 --> 00:13:06,675 Pupunta ako upang i-save ito bilang hello.html sa aking desktop. 275 00:13:06,675 --> 00:13:09,050 Aking Mac ay pagpunta sa magreklamo, pag-iisip na, maghintay ng isang minuto, 276 00:13:09,050 --> 00:13:11,091 ito ay isang tekstong file, gagawin na nais mong tawagan ito txt? 277 00:13:11,091 --> 00:13:13,300 Subalit hindi, gusto kong gamitin ang dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> At pagkatapos ay kung ano ang magaling kung ako double click lang ang file na ito, 279 00:13:16,140 --> 00:13:18,600 hello.html, narito ang aking web page. 280 00:13:18,600 --> 00:13:22,564 Sa kasamaang palad, ako ang tanging tao sa mundo 281 00:13:22,564 --> 00:13:23,980 na maaaring bisitahin ang pahinang ito ngayon. 282 00:13:23,980 --> 00:13:26,734 Dahil kung saan ito nakatira tila? 283 00:13:26,734 --> 00:13:27,650 Ito ay sa aking Mac, tama? 284 00:13:27,650 --> 00:13:28,470 Aling ay walang kasaysayan. 285 00:13:28,470 --> 00:13:30,390 Tulad ng walang isa sa kuwartong ito pabayaan mag-isa sa internet 286 00:13:30,390 --> 00:13:31,598 aktwal na maaaring bisitahin ang pahinang iyon. 287 00:13:31,598 --> 00:13:33,820 Kaya ngayon, kailangan nating ipakilala ang isa pang element. 288 00:13:33,820 --> 00:13:36,720 >> At upang gawin ito, ako pagpunta sa sige at buksan up cloud 9. 289 00:13:36,720 --> 00:13:40,090 Kaya cloud 9 ay kurso ng isang ulap batay service-- CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Iyon ay ang lahat ng aming mga workspaces tumatakbo sa tabi-tabi sa internet. 291 00:13:44,890 --> 00:13:48,330 At na nangangahulugan na ang lahat ng aming mga file ay naa-access sa publiko na. 292 00:13:48,330 --> 00:13:49,830 Kaya sabihin magpatuloy at gawin ito. 293 00:13:49,830 --> 00:13:53,670 Pupunta ako sa sige at lumikha ng isang bagong file NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Pupunta ako sa i-save ito bilang bago bilang hello.html at i-click ang i-save. 295 00:13:58,819 --> 00:14:01,860 At ngayon lamang upang makatipid ng oras, pupuntahan ko sige at kopyahin i-paste ang code na ito 296 00:14:01,860 --> 00:14:03,470 sa halip na i-type muli ito. 297 00:14:03,470 --> 00:14:04,550 At i-save ito. 298 00:14:04,550 --> 00:14:07,550 At kaya ngayon mayroon akong isang tinatawag hello.html file. 299 00:14:07,550 --> 00:14:09,710 Ngunit kung paano talaga ang gagawin ko buksan ito bilang isang web page? 300 00:14:09,710 --> 00:14:14,120 Well, ito ay lumiliko ang built-in sa CS50 IDE ay hindi lamang isang compiler tulad kalatungin 301 00:14:14,120 --> 00:14:16,670 at isang debugger tulad GDB at kumpol na ibang mga programa, 302 00:14:16,670 --> 00:14:21,140 may tunay na isang buong nasimulan web server na tumatakbo sa loob ng CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Lahat ng sa iyo, na ang ibig sabihin, magkaroon ng iyong sariling web server. 304 00:14:23,900 --> 00:14:26,850 At isang web server ay isang piraso lamang ng software na ang layunin sa buhay 305 00:14:26,850 --> 00:14:28,220 ay upang maglingkod up ng mga pahina ng web. 306 00:14:28,220 --> 00:14:32,490 Upang makinig sa mga kahilingan mula sa mga browser at tumugon na may maliit na virtual sobre 307 00:14:32,490 --> 00:14:35,290 sa loob ng kung saan ay ang nilalaman na iyong isinulat ko. 308 00:14:35,290 --> 00:14:38,372 Kaya web server na ito ay talagang libre at open source. 309 00:14:38,372 --> 00:14:40,830 Saan open source ay nangangahulugan lamang software na may ibang tao ay 310 00:14:40,830 --> 00:14:43,480 nakasulat na lahat tayo ay maaaring aktwal na makita at i-download at kahit 311 00:14:43,480 --> 00:14:44,780 baguhin ang source code. 312 00:14:44,780 --> 00:14:46,150 At ito ay tinatawag na Apache. 313 00:14:46,150 --> 00:14:51,450 >> At ginawa naming ng isang maliit na mas madaling gamitin sa CS50IDE pamamagitan ng pagtawag ito Apache 50. 314 00:14:51,450 --> 00:14:53,780 Kaya na ito ay maaaring aktwal na maunawaan ang mga sumusunod. 315 00:14:53,780 --> 00:14:56,560 Pupunta ako sa sabihin Apache 50 simula. 316 00:14:56,560 --> 00:14:58,910 At pagkatapos ay ako lamang ang pagpunta sabihin tuldok. 317 00:14:58,910 --> 00:15:01,080 At nakita namin ang ilang mga medyo arcane mensahe na nagsasabi 318 00:15:01,080 --> 00:15:04,640 pagtatakda Apache ni dokumento [? group?] sa bahay, Ubuntu, kahit na ano na, 319 00:15:04,640 --> 00:15:05,770 slash workspace. 320 00:15:05,770 --> 00:15:08,280 Simula ng web server Apache matagumpay 2. 321 00:15:08,280 --> 00:15:11,330 >> Kaya mahaba kuwento maikli, ako may lamang itinulak ng isang pindutan 322 00:15:11,330 --> 00:15:18,000 at naka-on ng isang web server na ay ngayon pakikinig sa internet sa TCP port 323 00:15:18,000 --> 00:15:20,587 80 sa isang tiyak na address. 324 00:15:20,587 --> 00:15:22,420 At sinasabi nito dito, at ito ay magbabago batay 325 00:15:22,420 --> 00:15:26,550 sa iyong username at iba pang mga kadahilanan, ngunit ngayon mapansin kung na-click ko na ito, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard at iba at kaya, mapapansin na ang lahat ng oras na ito 327 00:15:30,211 --> 00:15:31,960 para sa nakaraang ilang linggo, maaari kang magkaroon ng 328 00:15:31,960 --> 00:15:35,200 napansin na ang iyong sariling username ay naka-embed sa kanang tuktok ng kamay 329 00:15:35,200 --> 00:15:37,130 sulok ng CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> At na aktwal na ito ay ang lahat ng ito minsan, ang mga address kung saan maaari mong 331 00:15:41,050 --> 00:15:43,574 bisitahin ang lahat ng iyong mga file sa pamamagitan ng web. 332 00:15:43,574 --> 00:15:45,990 Hanggang ngayon, hindi pa ito ang mahalaga dahil sa C, ikaw ay karaniwang 333 00:15:45,990 --> 00:15:48,073 gusto ang mga bagay na tumatakbo sa isang terminal, hindi sa web. 334 00:15:48,073 --> 00:15:50,800 Ngunit ngayon, sisimulan namin pagsulat ng code ng web based 335 00:15:50,800 --> 00:15:53,350 na nais namin naa-access sa mga pampublikong URL. 336 00:15:53,350 --> 00:15:56,100 Kaya kung ano ang ako pagpunta sa gawin ay i-click ang URL na ito. 337 00:15:56,100 --> 00:16:00,880 >> At mapansin na makita ko ang isang walang kinikilingan pangit index, isang listahan ng direktoryo, 338 00:16:00,880 --> 00:16:04,090 ngunit kung ano ang file jumps out sa iyo marahil? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Iyon ay dahil sa naka-save na ako ang file sa aking workspace. 341 00:16:07,870 --> 00:16:12,310 At kung ano ang sinabi ko sa Apache web server ay tumingin sa direktoryo workspace na si David. 342 00:16:12,310 --> 00:16:15,300 At ang sinumang sa mundo makita ang mga file. 343 00:16:15,300 --> 00:16:19,050 >> At sa katunayan, kung ako ngayon mag-click sa hello.html, 344 00:16:19,050 --> 00:16:22,180 Nakikita ko ito sa loob ng file na tab eksakto. 345 00:16:22,180 --> 00:16:26,430 Ngayon pansinin, ginagawa cloud 9 ni isang bagay na medyo kapaki-pakinabang para sa amin. 346 00:16:26,430 --> 00:16:29,480 Sa loob ng CS50 IDE, mapansin mayroong biglang isang address bar. 347 00:16:29,480 --> 00:16:33,690 Ito ay dahil kahit na hindi namin gamit ang Chrome upang bisitahin CS50IDE, 348 00:16:33,690 --> 00:16:37,940 sa loob ng CS50IDE ay kanyang sariling bersyon ng isang web browser ngayon. 349 00:16:37,940 --> 00:16:40,820 At kaya sa halip na kumplikado ang mga bagay na tulad, 350 00:16:40,820 --> 00:16:42,955 Pupunta ako sa sige at kopyahin lamang ang URL na ito. 351 00:16:42,955 --> 00:16:45,330 Pupunta ako sa sige at lamang buksan ang aking sariling Chrome window. 352 00:16:45,330 --> 00:16:47,800 Kaya walang magic dito, walang CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Lamang ako ng pagpunta sa literal i-paste pindutin ang aking Harvard URL J at ang Enter. 354 00:16:51,800 --> 00:16:54,750 At voila, ngayon ko, at sa teorya, lahat ng tao 355 00:16:54,750 --> 00:16:57,700 sa internet, kung na-configure ko pahintulot naaangkop, 356 00:16:57,700 --> 00:16:58,720 maaaring bisitahin ang file na ito. 357 00:16:58,720 --> 00:17:03,230 At kaya ngayon, kung sinabi ko hello.html, voila, may 358 00:17:03,230 --> 00:17:06,366 ay ang aking hindi kapani-paniwalang underwhelming web page. 359 00:17:06,366 --> 00:17:07,740 Kaya sabihin gawin ang isang mabilis katinuan suriin. 360 00:17:07,740 --> 00:17:09,710 Dahil ang lahat ng mga na ay haka-haka set up. 361 00:17:09,710 --> 00:17:13,180 At hindi namin aktwal na hindi talaga nagturo sa iyo kung paano sumulat ng HTML per se. 362 00:17:13,180 --> 00:17:16,084 Ang anumang mga katanungan sa gayon ay malayo sa kung ano lang ang nangyari? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Oo. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Ba CS50 sariling mga pahina ng web? 367 00:17:25,800 --> 00:17:26,460 Sa anong diwa? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Magandang tanong. 370 00:17:29,530 --> 00:17:32,429 Kaya nagmamay-ari ng CS50 CS50.io. 371 00:17:32,429 --> 00:17:33,970 Katunayan na binili namin na ang domain name. 372 00:17:33,970 --> 00:17:37,240 At sa pamamagitan ng likas na katangian ng sa iyo guys pag-log sa CS50IDE, 373 00:17:37,240 --> 00:17:39,270 sa iyo ang lahat ng kung ano ang tinatawag na isang subdomain. 374 00:17:39,270 --> 00:17:46,840 >> Kaya IDE50-malan, o IDE50-Rob.CS50.io, iyon ang iyong natatanging address sa loob ng 375 00:17:46,840 --> 00:17:47,730 aming pangalan ng domain. 376 00:17:47,730 --> 00:17:50,850 Kaya para sa mga layunin ng kurso, mayroon ka ng iyong sariling natatanging address. 377 00:17:50,850 --> 00:17:55,150 Ngunit pinasimple namin ang mga bagay-bagay sa pamamagitan ng pagbili ng mga domain sa nangungunang antas, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O at pagkatapos ay sa lahat ng iba pa ay sa loob ng na, kaya na magsalita. 379 00:17:58,050 --> 00:17:59,890 At kami ay bumalik sa na sa loob ng ilang linggo marahil, 380 00:17:59,890 --> 00:18:01,930 lalo na sa huling proyekto panahon kung kailan ang ilan, sa inyo 381 00:18:01,930 --> 00:18:03,596 maaaring nais na makakuha ng iyong sariling domain name. 382 00:18:03,596 --> 00:18:06,270 Ito ay talagang medyo tapat. 383 00:18:06,270 --> 00:18:06,770 Lahat tama. 384 00:18:06,770 --> 00:18:07,880 Kaya sabihin ngayon gawin ito. 385 00:18:07,880 --> 00:18:11,910 Pupunta ako sa bumalik sa CS50IDE, kung saan ang aking file sa ngayon, 386 00:18:11,910 --> 00:18:14,710 hello.html, ay hindi lahat na kawili-wili. 387 00:18:14,710 --> 00:18:17,130 Gusto kong gawin ang isang bagay isang maliit na nicer kaysa. 388 00:18:17,130 --> 00:18:19,440 Kaya ako pagpunta sa gawin ang isang bagay tulad nito. 389 00:18:19,440 --> 00:18:21,510 Hayaan akong open paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 Kaya ito ay isang file na sinulat ko in advance. 391 00:18:23,560 --> 00:18:26,480 Sa tuktok ng mga ito, tulad ng lagi, kami ay may mga komento. 392 00:18:26,480 --> 00:18:28,730 Ngunit sa HTML, ang mga komento tumingin ng isang maliit na naiiba. 393 00:18:28,730 --> 00:18:33,270 Sa tatlong 14 line line at, ikaw ay makita ang syntax para simulan ang isang komento 394 00:18:33,270 --> 00:18:34,020 at tapusin ang isang komento. 395 00:18:34,020 --> 00:18:36,820 >> Ngunit wala sa mga bagay-bagay sa pagitan ng mga bagay na sa pagtakbo. 396 00:18:36,820 --> 00:18:40,250 Ito ay isang tala lamang sa isang ng tao kung ano ang nangyayari sa dito. 397 00:18:40,250 --> 00:18:43,040 At tulad ng isang mabilis na kaliwanagan ng isip suriin, kung mag-scroll ko pababa, 398 00:18:43,040 --> 00:18:46,820 ano ang halatang bagong tag na ipinakilala namin? 399 00:18:46,820 --> 00:18:52,130 Ang mga tag kaya ngayon nasaksihan namin ay bukas bracket HTML, ulo, pamagat, at katawan. 400 00:18:52,130 --> 00:18:54,400 Ngunit kung ano ang malinaw naman bagong ngayon? 401 00:18:54,400 --> 00:18:55,200 >> Oo, kaya p. 402 00:18:55,200 --> 00:18:57,320 Ang p tag o talata na tag. 403 00:18:57,320 --> 00:19:01,182 At pagkatapos lamang hiniram ilang mga default na ko Latin text na bumubuo ng aking mga talata. 404 00:19:01,182 --> 00:19:03,390 Dahil kung ano ang nais kong ipakita ang kung paano mo maaaring 405 00:19:03,390 --> 00:19:05,859 kumakatawan talata ng teksto sa HTML. 406 00:19:05,859 --> 00:19:08,400 At kaya kung ano ang simula mangyari dito ay na mayroon na 407 00:19:08,400 --> 00:19:09,657 isang pattern pagbuo. 408 00:19:09,657 --> 00:19:10,990 At hayaan mo akong magpatuloy at gawin ito. 409 00:19:10,990 --> 00:19:12,760 Hayaan buksan muna akong off Apache. 410 00:19:12,760 --> 00:19:17,340 At ako pagpunta sa sabihin ito upang simulan ang sarili nito muli sa loob ng source ngayon ng pitong 411 00:19:17,340 --> 00:19:18,420 directory m. 412 00:19:18,420 --> 00:19:20,100 Kaya na mayroon akong access sa lahat ng bagay. 413 00:19:20,100 --> 00:19:22,230 >> At ngayon, kung pumunta ako pabalik sa ito listahan ng direktoryo, 414 00:19:22,230 --> 00:19:24,846 paunawa nakikita ang lahat na file mula sa araw na ito. 415 00:19:24,846 --> 00:19:26,720 At makikita mo sa susunod na set ng problema, bibigyan namin ng 416 00:19:26,720 --> 00:19:28,594 magbibigay sa iyo ng mga tagubilin para sa paggawa ng eksakto ito. 417 00:19:28,594 --> 00:19:35,210 Kung bukas ko paragraphs.html, maaaring ito pati na rin ang hitsura ng isang programming language 418 00:19:35,210 --> 00:19:36,970 sa iyo kung hindi ka nagsasalita o basahin Latin. 419 00:19:36,970 --> 00:19:40,525 Ngunit ito ay talata lamang ng tatlong ng teksto na ito ay minarkahan up sa HTML. 420 00:19:40,525 --> 00:19:43,100 >> At mapansin ang talata break sa pagitan ng mga ito. 421 00:19:43,100 --> 00:19:46,400 Dahil ito ay lumiliko out, at kahit na kayo 422 00:19:46,400 --> 00:19:49,210 ay maaaring maging hilig upang gawin ito, samantalang sa tunay na mundo, 423 00:19:49,210 --> 00:19:51,370 kung nais mong ilagay ang linya break sa pagitan ng mga bagay, 424 00:19:51,370 --> 00:19:55,680 maaari ka ganap lamang gawin ito at pindutin ang I-save. 425 00:19:55,680 --> 00:19:59,460 At ngayon, kung i-reload ko dito, notice na lahat ng bagay lamang blurs magkasama 426 00:19:59,460 --> 00:20:01,100 sa patak lamang ng isa sa text. 427 00:20:01,100 --> 00:20:03,570 Dahil HTML ay uri ng isang pipi wika. 428 00:20:03,570 --> 00:20:07,230 >> Ito ay sinadya upang gamitin sa naturang isang paraan na hindi lamang ang mga browser 429 00:20:07,230 --> 00:20:09,920 gawin malinaw kung ano sabihin mo ito upang gawin. 430 00:20:09,920 --> 00:20:12,890 Kaya kung hindi mo sabihin dito bigyan ako ng isang bagong talata, 431 00:20:12,890 --> 00:20:14,569 hindi ka pagpunta upang makita ang isang bagong talata. 432 00:20:14,569 --> 00:20:16,360 At sa katunayan, kung ano ang pupuntahan browser na gawin 433 00:20:16,360 --> 00:20:20,020 ay kahit na kung ikaw ay pindutin ang Enter, sabihin nating muli at muli 434 00:20:20,020 --> 00:20:23,190 at muli, ang paglipat na ito text na paraan pababa sa screen at pagkatapos ay i-save ang 435 00:20:23,190 --> 00:20:26,610 at pagkatapos ay i-reload, ang browser ay pagpunta upang tiklupin ang lahat ng na white space 436 00:20:26,610 --> 00:20:29,021 sa lamang ng isang solong, nakikita whitespace. 437 00:20:29,021 --> 00:20:29,520 Lahat tama. 438 00:20:29,520 --> 00:20:30,869 Kaya na ang mga tag ng talata. 439 00:20:30,869 --> 00:20:32,910 At kaya kung ano ang pattern na pagbuo rito? 440 00:20:32,910 --> 00:20:37,450 Well, ito ay anyong ang kaso na HTML ay ang lahat ng tungkol sa pagsisimula ng isang tag 441 00:20:37,450 --> 00:20:38,460 at nagtatapos sa isang tag. 442 00:20:38,460 --> 00:20:39,300 At kung ano ang isang tag? 443 00:20:39,300 --> 00:20:41,160 Well, ito lamang ay isang tipak ng syntax. 444 00:20:41,160 --> 00:20:44,400 Open bracket, ang isang keyword, closed bracket, ay isang tag. 445 00:20:44,400 --> 00:20:45,510 O simulan tag. 446 00:20:45,510 --> 00:20:48,590 At pagkatapos ay kapag ikaw ay tapos pagpapahayag ng iyong sarili, 447 00:20:48,590 --> 00:20:52,300 tulad ng sa tapos ka na sa talata, gagawin mo ito upang makipag-usap sa tapat. 448 00:20:52,300 --> 00:20:55,480 Ngunit ang kabaligtaran ay hindi lubos na paurong. 449 00:20:55,480 --> 00:21:00,630 >> Prefix Ikaw lamang ang parehong tag ni pangalan sa isang pasulong na slash tulad nito. 450 00:21:00,630 --> 00:21:01,130 Lahat tama. 451 00:21:01,130 --> 00:21:02,570 Kaya hindi lahat na kapana-panabik. 452 00:21:02,570 --> 00:21:05,270 At sa katunayan, hindi kami sa paggawa ng mga web lahat na mas interesante. 453 00:21:05,270 --> 00:21:07,630 Paano kung gusto kong gumawa mga bagay na mas malaki at naka-bold? 454 00:21:07,630 --> 00:21:11,780 Kaya ito ay lumiliko out na narito ang isang halimbawa sa headings.html, kung saan sa aking katawan, 455 00:21:11,780 --> 00:21:17,280 Mayroon akong isang H1 tag, H2, H3, apat, lima, o anim na, ang lahat ay 456 00:21:17,280 --> 00:21:18,310 tila medyo arcane. 457 00:21:18,310 --> 00:21:21,010 Ngunit kung pumunta ako bukas na ito Halimbawa, sabihin kumuha ng isang hitsura. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Kaya maaaring magbigay sa mga browser sa pamamagitan ng default mong text na malaki at naka-bold ng disparate sukat. 460 00:21:27,030 --> 00:21:28,070 H1 ay malaki. 461 00:21:28,070 --> 00:21:31,240 H6 ay mas maliit at pagkatapos ay lahat ng iba pa sa pagitan. 462 00:21:31,240 --> 00:21:34,170 Kaya na kagiliw-giliw na ngunit hindi pa rin hindi tunay ang web alam ko. 463 00:21:34,170 --> 00:21:36,870 Paano kung gusto naming magkaroon ako isang bagay tulad ng isang listahan. . 464 00:21:36,870 --> 00:21:40,190 Kaya narito ang isang bullet na listahan ng tatlong ng mga bahay Harvard. 465 00:21:40,190 --> 00:21:41,600 >> Paano mo pumunta tungkol sa paggawa nito? 466 00:21:41,600 --> 00:21:45,410 Well, tingnan ang list.html. 467 00:21:45,410 --> 00:21:47,870 At dito, nakita namin ang isang maliit na piraso ng funkiness 468 00:21:47,870 --> 00:21:49,630 ngunit isaalang-alang ang kung ano ang nangyayari ipaalam. 469 00:21:49,630 --> 00:21:56,182 Kaya batay sa kung ano lang nakita mo, Ul nakatayo para unordered listahan. 470 00:21:56,182 --> 00:21:57,640 Unordered listahan lamang ay nangangahulugan na bullet. 471 00:21:57,640 --> 00:21:58,431 Walang mga numero. 472 00:21:58,431 --> 00:22:01,850 Mayroon din ng isang bagay na tinatawag na isang iniutos listahan, na kung saan ay isang ol sa tag. 473 00:22:01,850 --> 00:22:05,350 Pagkatapos li, mga item sa listahan ay ang lahat ng ibig sabihin nito. 474 00:22:05,350 --> 00:22:07,790 >> At awtomatikong ito kaya numero ng lahat ng bagay para sa iyo. 475 00:22:07,790 --> 00:22:11,270 Subalit muli, ang lahat ng aking mga indentation and white space ay lamang dahil sa akin. 476 00:22:11,270 --> 00:22:13,050 Ang browser ay hindi tunay na pagpunta sa pag-aalaga. 477 00:22:13,050 --> 00:22:16,670 Kaya kahit na hindi mo maaaring gawin ito, upang maging malinaw, 478 00:22:16,670 --> 00:22:19,880 hindi ka dapat kahit na ang browser ay pa rin 479 00:22:19,880 --> 00:22:22,130 ay magagawang maintindihan ito lamang fine. 480 00:22:22,130 --> 00:22:24,590 Ako pagpindot reload sa aking browser, ako ng pag-click reload 481 00:22:24,590 --> 00:22:26,760 at walang pagbabago ang nangyayari dahil ang mga browser pa rin 482 00:22:26,760 --> 00:22:29,550 paggawa ng eksakto kung ano ang aking sasabihin ito upang gawin. 483 00:22:29,550 --> 00:22:30,050 >> Lahat tama. 484 00:22:30,050 --> 00:22:31,340 Kaya ito ay ang lahat ng lamang text. 485 00:22:31,340 --> 00:22:33,730 Ngayon sabihin gawin ang isang bagay na mas kawili-wiling ipaalam. 486 00:22:33,730 --> 00:22:36,660 Pupunta ako sa sige at humiram ng ilang mga ito ng HTML. 487 00:22:36,660 --> 00:22:40,910 Pupunta ako sa sige at lumikha ng isang bagong file dito. 488 00:22:40,910 --> 00:22:43,370 At kami ay tumawag ito rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Mayroon kaming disproportionately ginagamit ng isang bagay 491 00:22:48,916 --> 00:22:51,290 tinatawag na isang rick roll sa ito klase ng taong ito, hindi ko alam, 492 00:22:51,290 --> 00:22:53,880 ito lamang ang nangyari samahang. 493 00:22:53,880 --> 00:22:55,397 >> At ngayon ito ay nakuha sa labas ng kontrol. 494 00:22:55,397 --> 00:22:56,730 Kaya lang ako pagpunta sa pumunta sa mga ito. 495 00:22:56,730 --> 00:22:59,700 At kung pumunta ako sa Google Mga imahe at Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Kung hindi mo alam kung bakit ginagawa namin na ito, basahin lamang hanggang sa Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Sa bawat oras na-click mo sa link, ng isang tao ay tumatawa sa isang lugar. 499 00:23:11,520 --> 00:23:14,860 At hayaan mo akong pumunta ahead-- doon pumunta kami, tingnan ang imahe na ito hayaan. 500 00:23:14,860 --> 00:23:16,750 >> Kaya dito kami ay may isang imahe sa Google Images. 501 00:23:16,750 --> 00:23:19,390 At sabihin ipinapalagay na ito ay ipaalam makatwirang sa lahat ng dako sa internet. 502 00:23:19,390 --> 00:23:22,570 Kaya ako pagpunta sa ipagpalagay na ito ay OK para sa akin upang aktwal na ilagay ito sa aking mga web page. 503 00:23:22,570 --> 00:23:24,820 Pupunta ako sa sige at kopyahin ang URL ng imahe. 504 00:23:24,820 --> 00:23:28,600 At ngayon, kung pumunta ako pabalik sa Cloud 9, tingnan natin kung ano ang maaari kong gawin dito. 505 00:23:28,600 --> 00:23:30,630 Kaya dito ay lamang ng isang web page. 506 00:23:30,630 --> 00:23:39,020 Ito ang Rick Astley, haha, Pupunta ako sa ngayon bumalik 507 00:23:39,020 --> 00:23:43,510 sa aking browser, i-reload, at kawili-wili. 508 00:23:43,510 --> 00:23:44,530 >> Nasaan Rick? 509 00:23:44,530 --> 00:23:46,050 Kaya hayaan mo akong makita kung ano ang nangyari. 510 00:23:46,050 --> 00:23:49,114 Sa totoo lang, pupuntahan ko magpanggap tulad ng hindi ko gawin iyon. 511 00:23:49,114 --> 00:23:50,280 [Hindi marinig] inilagay siya sa dito. 512 00:23:50,280 --> 00:23:52,520 Susubukan naming bumalik sa na sa isang sandali. 513 00:23:52,520 --> 00:23:54,200 Kaya dito ang rick.html. 514 00:23:54,200 --> 00:23:56,070 Kaya na hindi Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Kaya ito ay lumiliko out ng aming makakaya tunay na idagdag siya sa dito. 516 00:23:59,680 --> 00:24:00,830 Ito ang Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Pupunta ako sa sabihin ninyo akong bigyan ng isang imahe na pinagmulan ay ang URL na lang kinopya ko, na 518 00:24:06,680 --> 00:24:09,110 wari ay isang masaya birthday ng isang bagay o iba pang. 519 00:24:09,110 --> 00:24:13,280 >> At ngayon ako pagpunta sa isara ang tag na tulad nito. 520 00:24:13,280 --> 00:24:15,170 Kaya ito ay wrapping sobrang haba. 521 00:24:15,170 --> 00:24:17,740 Ngunit mapansin na na ang lahat ko tapos ay bukas bracket ng imahe, 522 00:24:17,740 --> 00:24:20,270 source na may isang katangian ng mga ito. 523 00:24:20,270 --> 00:24:21,530 At ito ay isang tunay na mahabang URL. 524 00:24:21,530 --> 00:24:23,720 At sa dulo, mapapansin na ito. 525 00:24:23,720 --> 00:24:29,530 Bakit wala akong ginawang slash angled bracket sa halip na, tulad ng lahat ng iba pang mga tag, 526 00:24:29,530 --> 00:24:33,590 pagkakaroon ng isang bukas bracket, Img, sarado bracket? 527 00:24:33,590 --> 00:24:37,040 Tumagal lamang ng isang hulaan kahit na kayo walang pagpapalagayang kahit ano pa man 528 00:24:37,040 --> 00:24:40,410 sa HTML bago. 529 00:24:40,410 --> 00:24:42,710 >> Kaya ito ay kung paano ito magsasara ang mga utos, ngunit bakit 530 00:24:42,710 --> 00:24:45,850 ay hindi ito talagang gumawa intuitive kahulugan na gawin ng kaunti pa sa isang bagay 531 00:24:45,850 --> 00:24:48,820 masyadong masalita tulad ng malapit na imahe? 532 00:24:48,820 --> 00:24:51,400 Oo. 533 00:24:51,400 --> 00:24:52,000 Oo. 534 00:24:52,000 --> 00:24:55,620 Semantically lang, walang kahulugan ng simula ng isang imahe at nagtatapos ng isang imahe, 535 00:24:55,620 --> 00:24:56,870 ito ay alinman doon o ito ay hindi. 536 00:24:56,870 --> 00:25:00,960 Kaya ito ay hindi magkaroon ng kahulugan na mag-iwan ng isang puwang para sa anumang bagay sa loob ng isang imahe. 537 00:25:00,960 --> 00:25:02,010 Ikaw lamang ay hindi maaaring gawin na. 538 00:25:02,010 --> 00:25:03,720 At upang ang mga syntax nais lamang ay sa pangkalahatan 539 00:25:03,720 --> 00:25:07,910 upang gawin ang forward slash sa loob ng bukas na tag o ang pambukas na tag 540 00:25:07,910 --> 00:25:09,020 at pagkatapos ay pindutin ang I-save. 541 00:25:09,020 --> 00:25:13,350 >> Kaya kung ngayon ko i-reload ang file na ito, na ngayon Mayroon akong isang magandang pahina sa pagluluto web dito. 542 00:25:13,350 --> 00:25:15,100 At maaari namin tiyak talagang inisin ang mga tao 543 00:25:15,100 --> 00:25:17,010 sa pamamagitan ng sa halip ng pag-embed tulad ng isang link YouTube. 544 00:25:17,010 --> 00:25:19,350 At sa katunayan, anumang oras nakatanggap ka na wala na sa YouTube, 545 00:25:19,350 --> 00:25:22,190 at ipaalam sa akin talagang sinasadyang rick roll ang aking sarili dito. 546 00:25:22,190 --> 00:25:25,770 Kaya Rick roll. 547 00:25:25,770 --> 00:25:29,592 Kaya rick roll-- ako pagpunta sa pumunta dito. 548 00:25:29,592 --> 00:25:31,900 >> [MUSIC nagpe-play] 549 00:25:31,900 --> 00:25:33,730 >> OK, ang isang tao na nagustuhan iyon. 550 00:25:33,730 --> 00:25:37,270 Kaya mapansin ang lahat ng mga oras na ito, kung ikaw i-click ang link Share, ka ng kurso 551 00:25:37,270 --> 00:25:41,390 makuha ang URL na maaari mong aktwal na i-embed sa isang email o ng isang forensic imahe 552 00:25:41,390 --> 00:25:43,730 o sa isang hanay ng problema o sa isang slide. 553 00:25:43,730 --> 00:25:49,055 At ngayon, kung ako sa halip ay i-click embed, mapapansin na ang lahat ng oras na ito, ito bagay-bagay 554 00:25:49,055 --> 00:25:49,680 ay doon. 555 00:25:49,680 --> 00:25:50,910 Pupunta ako sa sige at kopyahin ito. 556 00:25:50,910 --> 00:25:54,000 >> At lamang upang maaari naming makita ang mga ito ng mas mahusay, Ako pagpunta sa ilagay ito sa aking text editor. 557 00:25:54,000 --> 00:25:55,860 Pansinin na ang kung ano ang Ay nagsasabi sa YouTube ay sa iyo. 558 00:25:55,860 --> 00:25:57,693 Sa bawat oras na bisitahin mo ang isang Video sa YouTube, kung ikaw 559 00:25:57,693 --> 00:26:00,410 nais na i-embed ang video sa iyong web page, grab lamang ito. 560 00:26:00,410 --> 00:26:03,350 Kaya isa pang ito ay HTML tag na tinatawag na isang iframe. 561 00:26:03,350 --> 00:26:04,590 O isang sa linya frame. 562 00:26:04,590 --> 00:26:08,680 Kaya masyadong kamukha ito ng kaunti pa complex kaysa sa lahat ng iba. 563 00:26:08,680 --> 00:26:11,950 Kaya ito ay lumiliko out na ang imahe tag at tila ang tag iframe 564 00:26:11,950 --> 00:26:13,370 kumuha ng kung ano ang tinatawag na mga katangian. 565 00:26:13,370 --> 00:26:15,710 >> At ito ay isa pang piraso ng syntax sa HTML. 566 00:26:15,710 --> 00:26:19,240 Bilang karagdagan sa mga tag ng pangalan, open name bracket tag, 567 00:26:19,240 --> 00:26:23,780 maaari mong kontrolin ang pag-uugali ng mga tag sa pamamagitan ng pagkakaroon ng isang buong grupo ng mga attribute 568 00:26:23,780 --> 00:26:24,860 ay katumbas ng halaga. 569 00:26:24,860 --> 00:26:26,290 Attribute ay katumbas ng halaga. 570 00:26:26,290 --> 00:26:28,100 At kaya halimbawa, Ay nagsasabi sa YouTube sa amin 571 00:26:28,100 --> 00:26:31,990 kung nais mo ang lapad ng video na ito upang maging 420 pixels at ang taas 572 00:26:31,990 --> 00:26:35,470 upang maging 315 pixels, na ang kung paano mo ipahayag ang mga ito sa HTML. 573 00:26:35,470 --> 00:26:38,480 >> Ang pinagmulan ng mga video ay pagpunta upang maging na long URL YouTube 574 00:26:38,480 --> 00:26:40,830 at pagkatapos ng ilang iba pang mga bagay-bagay tulad ng border frame ay zero, 575 00:26:40,830 --> 00:26:43,500 sa gayon ay marahil nangangahulugan na walang border sa paligid ng mga bagay. 576 00:26:43,500 --> 00:26:45,450 Payagan ang full screen marahil ay nangangahulugan na ang gumagamit 577 00:26:45,450 --> 00:26:47,840 Maaaring mag-click sa isang pindutan at talagang full screen ang video. 578 00:26:47,840 --> 00:26:52,870 Kaya kung talagang gusto kong maging impressive dito sa Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 sa halip na gamitin ang mga tag ng imahe, hayaan akong tanggalin iyon, sa halip i-paste ito. 580 00:26:58,490 --> 00:27:00,810 At ngayon i-reload. 581 00:27:00,810 --> 00:27:02,500 At ngayon dito na naman tayo. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Sige, tama na iyan. 584 00:27:06,020 --> 00:27:08,970 Lahat ng mga karapatan kaya ako ay subukan mahirap hindi upang gawin iyon muli. 585 00:27:08,970 --> 00:27:11,400 Kaya kung ano ang ilan sa mga takeaways dito? 586 00:27:11,400 --> 00:27:15,130 Kaya HTML, bilang pangit bilang ng mga pahina ng web ay, ay talagang pretty simple. 587 00:27:15,130 --> 00:27:16,467 Ito ay hindi isang programming language. 588 00:27:16,467 --> 00:27:17,550 Hindi nito ay may mga pag-andar. 589 00:27:17,550 --> 00:27:18,410 Hindi nito ay may loop. 590 00:27:18,410 --> 00:27:19,535 Hindi nito ay may kondisyon. 591 00:27:19,535 --> 00:27:22,900 Lahat ng ito ay ay dose-dosenang mga iba't ibang mga tag, ang bawat isa 592 00:27:22,900 --> 00:27:24,620 ay may zero o higit pang mga katangian. 593 00:27:24,620 --> 00:27:27,320 At sa katunayan, kung ano ang masaya tungkol sa HTML simulan mo na sumisid sa 594 00:27:27,320 --> 00:27:29,560 ay na ito ay napaka-self madaling ituro. 595 00:27:29,560 --> 00:27:32,880 >> Lahat ng mga kinakailangan ay isang pag-unawa ng pangkalahatang balangkas ng HTML. 596 00:27:32,880 --> 00:27:36,510 Ano ang isang tag, kung ano ang isang katangian, paano mo talagang i-configure ang isang pahina ng web 597 00:27:36,510 --> 00:27:37,250 tulad ng sumusunod. 598 00:27:37,250 --> 00:27:40,720 At lahat ng iba pa ay talagang ang resulta ng mga naghahanap up sa isang online na reference 599 00:27:40,720 --> 00:27:43,080 o Pag-Google kung paano gawin ang ilang mga pamamaraan o bilang namin nakita, 600 00:27:43,080 --> 00:27:45,371 pagtingin sa source Facebook code, na naghahanap sa isang website 601 00:27:45,371 --> 00:27:48,710 na gusto mo at ito ay source code at unawa kung paano ang mga developer ay may 602 00:27:48,710 --> 00:27:50,550 talagang inilatag bagay out. 603 00:27:50,550 --> 00:27:52,180 >> Kaya maaari naming gawin mga imahe pati na rin. 604 00:27:52,180 --> 00:27:53,994 At sa katunayan, ginawa namin ito ng isang sandali ang nakalipas. 605 00:27:53,994 --> 00:27:55,410 Hayaan akong magpatuloy at ipakita lamang sa iyo. 606 00:27:55,410 --> 00:27:56,770 Narito ang ilang sample code. 607 00:27:56,770 --> 00:27:58,380 Kung gusto mo mang makita mainit ang ulo ng pusa. 608 00:27:58,380 --> 00:28:00,620 Kaya mapapansin na makakaya ko Mayroon dito ng isang tag ng imahe. 609 00:28:00,620 --> 00:28:02,090 At Mayroon akong isang komento sa itaas nito. 610 00:28:02,090 --> 00:28:04,490 Mayroon akong isang alternatibo teksto para sa accessibility. 611 00:28:04,490 --> 00:28:07,250 Kaya ang isang tao kung sino ang gumagamit ng isang screen reader para sa mga kadahilanan ng paningin 612 00:28:07,250 --> 00:28:10,172 maaaring aktwal na pagkatapos ay ang kanilang screen reader sabihin mainit ang ulo ng pusa. 613 00:28:10,172 --> 00:28:11,880 Dahil kung hindi sila maaari makita ang mga imahe, sila 614 00:28:11,880 --> 00:28:14,504 maaaring hindi bababa sa kung ang kanilang mga computer sabihin sa kanila sa salita kung ano ito. 615 00:28:14,504 --> 00:28:18,020 At ang pinagmulan ng file na ay cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Kaya sa katunayan, kung ako ay talagang nais na makakuha ng matalino, kung ano ang maaari kong magkaroon ng done-- 617 00:28:22,472 --> 00:28:25,680 Pangako ko na hindi pumunta sa Rick Astley, kaya Pupunta ako sa halip sa google para sa isang cat. 618 00:28:25,680 --> 00:28:28,290 At kung pumunta ako sa Google Images dito, at kami ay ipinapalagay 619 00:28:28,290 --> 00:28:30,040 na ito ay isang larawan ng aking pusa. 620 00:28:30,040 --> 00:28:35,070 >> Ipagpalagay na mayroon ako nag-click control o pakanan nag-click sa ito, hindi sinasadyang 621 00:28:35,070 --> 00:28:35,630 katakut-takot. 622 00:28:35,630 --> 00:28:40,320 At cat.jpeg pupuntahan ko upang i-save sa aking desktop. 623 00:28:40,320 --> 00:28:44,700 Hayaan akong ngayon bumalik sa cloud 9. 624 00:28:44,700 --> 00:28:48,150 Pansinin na dito, maaari kong pumunta upang mag-upload ng lokal na mga file. 625 00:28:48,150 --> 00:28:51,530 At kung sunggaban ko na ito file, cat.jpeg, pansinin 626 00:28:51,530 --> 00:28:54,674 na maaari ko ba itong i-drag at drop ito sa cloud 9 627 00:28:54,674 --> 00:28:56,090 at ito ay pagpunta sa sumigaw sa akin dito. 628 00:28:56,090 --> 00:28:59,000 >> Dahil hindi namin nai bibigyan ka ng isang cat.jpeg file, 629 00:28:59,000 --> 00:29:01,430 ngunit ito ay napakadaling upang grab ang isang larawan na na sa iyo 630 00:29:01,430 --> 00:29:03,220 kinuha mula sa Facebook o Flickr o mga katulad 631 00:29:03,220 --> 00:29:05,678 at talagang i-drag at i-drop ito sa cloud 9 at pagkatapos ay gawin itong 632 00:29:05,678 --> 00:29:07,970 bahagi ng iyong sariling mga personal na website o problema 633 00:29:07,970 --> 00:29:10,442 itakda pitong o walong tulad ng makikita sa lalong madaling panahon kami ay makita. 634 00:29:10,442 --> 00:29:12,150 At pagkatapos ay kapag ikaw ay sa wakas bisitahin na cat, 635 00:29:12,150 --> 00:29:16,610 sa pag-aakala na-download ko na ang parehong cat, notice na- na kaibig-ibig. 636 00:29:16,610 --> 00:29:19,160 >> Ano ang gusto mong makita ay bagay na tulad nito ang mukha dito. 637 00:29:19,160 --> 00:29:21,810 Kaya ang mga file na iyong reference sa loob ng isang web page 638 00:29:21,810 --> 00:29:26,050 maaaring maging alinman sa mga lokal na sa iyong sariling account o remote sa ilang iba pang mga server 639 00:29:26,050 --> 00:29:29,670 tulad ng sa kaso ng Rick Astley photo nang kaunti ang nakalipas. 640 00:29:29,670 --> 00:29:32,990 Kaya kung saan else-- ano pa ang maaari naming gawin dito? 641 00:29:32,990 --> 00:29:34,890 Kaya sabihin kumuha ng isang pagtingin sa mga sumusunod. 642 00:29:34,890 --> 00:29:36,160 Alam mo kung ano ang uri ng cool? 643 00:29:36,160 --> 00:29:39,330 >> Kami ay kaya malayo pa sa paggawa ng napaka static web pahina. 644 00:29:39,330 --> 00:29:41,830 Gusto ko na pagandahin ang mga bagay up ang mga sumusunod. 645 00:29:41,830 --> 00:29:44,344 Gusto kong gumawa ng aking sariling mga search engine. 646 00:29:44,344 --> 00:29:47,010 Kaya gumawa ng isang search engine, sabihin sige at simulan ang paggawa nito. 647 00:29:47,010 --> 00:29:52,570 Pupunta ako sa magpatuloy at lumikha ng isang bagong file na tinatawag na search.html. 648 00:29:52,570 --> 00:29:54,890 At kami ay prefabed bersyon online. 649 00:29:54,890 --> 00:29:56,027 Oops. 650 00:29:56,027 --> 00:29:57,610 Huwag i-paste sa iyong terminal na window. 651 00:29:57,610 --> 00:29:58,744 Prefab bersyon online. 652 00:29:58,744 --> 00:30:00,160 At ako pagpunta upang simulan ang mga sumusunod. 653 00:30:00,160 --> 00:30:04,490 Kaya narito ang simula ng isang file na tinatawag search.html. 654 00:30:04,490 --> 00:30:07,510 Pupunta ako upang i-save ang mga ito sa direktoryo ng pinagmulan ngayon. 655 00:30:07,510 --> 00:30:09,079 Pupunta ako sa tawag na ito Search. 656 00:30:09,079 --> 00:30:10,370 Sa totoo lang, kami ay gumawa ng mas mahusay na ito. 657 00:30:10,370 --> 00:30:13,600 CS50 Search at talagang tatak sa mga ito. 658 00:30:13,600 --> 00:30:17,500 At ngayon, ako pagpunta sa sabihin isang bagay tulad ng H1 CS50 Search. 659 00:30:17,500 --> 00:30:20,930 At pagkatapos ay down na dito, pagdating H2 lalong madaling panahon. 660 00:30:20,930 --> 00:30:23,230 At lamang sa pagbabalik-tanaw, H1 at H2 ibig sabihin kung ano pagkakabanggit? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Oo, kaya malaki at bold, at hindi bilang malaki, ngunit pa rin bold. 663 00:30:30,320 --> 00:30:37,375 Kaya kung ako i-save ito at pumunta sa paglipas dito, sabihin makita ang file search.html. 664 00:30:37,375 --> 00:30:42,560 Lahat ng karapatan, at ang isang ito ay right-- [hindi marinig]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Tumayo ka sa tabi. 667 00:30:49,110 --> 00:30:49,945 David ay nalilito. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, ito ay may karapatan. 670 00:30:54,080 --> 00:30:54,860 David ay isang tulala. 671 00:30:54,860 --> 00:30:55,420 SIGE. 672 00:30:55,420 --> 00:30:56,660 Kaya may ito ay. 673 00:30:56,660 --> 00:30:58,350 Kaya pagdating CS50 paghahanap sa lalong madaling panahon. 674 00:30:58,350 --> 00:31:00,370 Kaya ngayon, ni synthesize ipaalam ano ang ginawa namin noong nakaraang linggo. 675 00:31:00,370 --> 00:31:03,400 >> Saan usapan natin ang tungkol sa mga mas mababang antas mechanics ng HTTP. 676 00:31:03,400 --> 00:31:05,780 At ang mga bagong ideya ng HTML, na kung saan ay lamang 677 00:31:05,780 --> 00:31:08,890 ito markup language na kung saan kayo sabihin sa isang browser kung ano ang gagawin 678 00:31:08,890 --> 00:31:10,740 at ipatupad ang aming sariling mga search engine. 679 00:31:10,740 --> 00:31:12,520 Kaya sa halip na lamang sinasabi paparating, ako 680 00:31:12,520 --> 00:31:14,810 pagpunta sa kitang ipakilala bagay na tinatawag na isang form na tag. 681 00:31:14,810 --> 00:31:19,610 At sa ganitong anyo, ako pagpunta sa may isang bagay tulad ng isang patlang ng input. 682 00:31:19,610 --> 00:31:22,450 >> At ang pangalan ng input na ito field, ako pagpunta sa tumawag ito Q. 683 00:31:22,450 --> 00:31:26,240 At ang uri na ito ng patlang ng input Pupunta ako sa sabihin ay "text" lamang. 684 00:31:26,240 --> 00:31:29,130 At isang patlang ng teksto, tulad ng ipapakita namin makita, ay isang text box lang. 685 00:31:29,130 --> 00:31:32,830 At kaya ito ay hindi na-unawa dito upang magkaroon ng anumang bagay sa loob ng mga ito sa puntong ito. 686 00:31:32,830 --> 00:31:35,320 At kaya lang ako pupunta upang isara ang tag na iyon 687 00:31:35,320 --> 00:31:38,099 forward slash karapatan sa tag mismo. 688 00:31:38,099 --> 00:31:39,890 At pagkatapos ay ako pagpunta sa magkaroon ng isa sa iba pang mga input. 689 00:31:39,890 --> 00:31:43,480 Katumbas type Input isumite. 690 00:31:43,480 --> 00:31:45,320 At pagkatapos ay ako pagpunta sa isara ang isang ito masyadong. 691 00:31:45,320 --> 00:31:46,840 >> At ngayon ako pagpunta sa bumalik dito. 692 00:31:46,840 --> 00:31:49,520 At kami na makita, kahit na medyo mainit ang ulo, na ako 693 00:31:49,520 --> 00:31:52,460 Nakakuha ang mga simulain ng dito ang aking sariling mga pahina ng paghahanap. 694 00:31:52,460 --> 00:31:55,150 Sa katunayan, hayaan mo akong subukan na linisin ito up ng isang maliit na bit. 695 00:31:55,150 --> 00:31:57,330 Ito ay lumiliko out na sa input dito, maaari akong magkaroon ng 696 00:31:57,330 --> 00:31:59,910 isa pang katangian na tinatawag na placeholder. 697 00:31:59,910 --> 00:32:05,165 At upang makita ko ang isang bagay tulad ng mga keyword, o mas partikular, i-query para sa q. 698 00:32:05,165 --> 00:32:07,820 >> At pansinin, ngayon, mayroon akong ang ganitong uri ng kulay-abo na teksto 699 00:32:07,820 --> 00:32:10,440 na mawala bilang Sa sandaling simulan kong mag-type, 700 00:32:10,440 --> 00:32:12,930 ngunit ito ay marahil isang bagay mo na makikita sa iba pang mga pahina ng web. 701 00:32:12,930 --> 00:32:14,650 Hindi ko talagang gusto ang pindutan ng Isumite. 702 00:32:14,650 --> 00:32:18,320 Kaya ako tunay na pagpunta upang bigyan ang Isumite ang pindutan ng ang halaga ng mga paghahanap. 703 00:32:18,320 --> 00:32:21,680 At ngayon, kung i-reload ko, mapapansin na aking button nagiging pinangalanan paghahanap. 704 00:32:21,680 --> 00:32:24,140 Alam mo, hindi ko talaga tulad ng mga logo dito. 705 00:32:24,140 --> 00:32:27,140 Kaya Google Font generator. 706 00:32:27,140 --> 00:32:28,820 >> Gusto ko upang pagandahin ito up pa. 707 00:32:28,820 --> 00:32:30,660 Kaya CS50 paghahanap. 708 00:32:30,660 --> 00:32:31,870 Hayaan akong lumikha ng aking sariling logo. 709 00:32:31,870 --> 00:32:33,080 Na mukhang nice. 710 00:32:33,080 --> 00:32:36,945 Kaya natin ngayon akong i-save ito as-- dumating sa. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Saan naman? 713 00:32:43,120 --> 00:32:43,620 May. 714 00:32:43,620 --> 00:32:44,160 SIGE. 715 00:32:44,160 --> 00:32:44,980 Hindi nasagot na ito. 716 00:32:44,980 --> 00:32:47,740 I-save bilang. 717 00:32:47,740 --> 00:32:49,470 Tangang browser. 718 00:32:49,470 --> 00:32:51,700 Stand sa pamamagitan ng, kami ay pagpunta sa ayusin ito minsan at para sa lahat. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Mayroon kaming pumunta. 721 00:32:58,590 --> 00:32:59,090 Lahat tama. 722 00:32:59,090 --> 00:32:59,600 Sorry. 723 00:32:59,600 --> 00:33:00,750 Off-araw. 724 00:33:00,750 --> 00:33:02,310 Ngayon na ito ay funky. 725 00:33:02,310 --> 00:33:03,160 Lumabas sa full screen. 726 00:33:03,160 --> 00:33:04,150 Lahat tama. 727 00:33:04,150 --> 00:33:06,870 >> Ngayon, tulad ng isang normal tao, i-save ang imahe bilang. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Ngayon ako pagpunta sa pumunta sa CS50IDE at Pupunta ako sa simpleng grab ang mga logo, 730 00:33:13,194 --> 00:33:15,360 Pupunta ako upang i-drag ito sa aking source pitong direktoryo, 731 00:33:15,360 --> 00:33:17,002 Umiiral na ang file, ako ok na. 732 00:33:17,002 --> 00:33:19,210 Kaya ako pagpunta upang i-override ito dahil ako ay nagkaroon na ito. 733 00:33:19,210 --> 00:33:20,630 At ngayon paano ko mapupuksa ang mga ito? 734 00:33:20,630 --> 00:33:24,670 >> Sabihin sige dito at gawin pinagmulan ng imahe ay katumbas logo.gif. 735 00:33:24,670 --> 00:33:25,490 Isara ang. 736 00:33:25,490 --> 00:33:26,050 I-save. 737 00:33:26,050 --> 00:33:30,560 At ngayon, kung pumunta ako pabalik sa aking paghahanap page, ngayon ito ay naghahanap ng mahusay. 738 00:33:30,560 --> 00:33:33,610 Lahat ng mga karapatan, sa gayon ito ay hindi lubos na nagawa ang anumang bagay na kapaki-pakinabang. 739 00:33:33,610 --> 00:33:37,000 Sa katunayan, hayaan mo akong subukan na maghanap para sa isang pusa at tingnan kung ano ang mangyayari. 740 00:33:37,000 --> 00:33:38,890 Cats. 741 00:33:38,890 --> 00:33:39,420 Mapapahamak ang mga ito. 742 00:33:39,420 --> 00:33:41,400 Ito lamang ay hindi gumagana, tila. 743 00:33:41,400 --> 00:33:43,760 Kaya kung ano ang key na piraso na nawawala dito? 744 00:33:43,760 --> 00:33:49,100 >> Right, kahit na hindi mo alam ang anumang HTML, Sinimulan ko ang pagmamarka up ang form phone 745 00:33:49,100 --> 00:33:54,130 at sinabi ko na ito kung paano makakuha ng input, bigyan ako ng isang text box at magsumite ng isang pindutan, 746 00:33:54,130 --> 00:33:55,730 kung ano ang piraso ay tila nawawala? 747 00:33:55,730 --> 00:33:58,975 Ipagpalagay na gusto namin upang aktwal na makakuha ang bagay na ito gumagana nang tama. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Ano ang dapat nating gawin? 750 00:34:05,360 --> 00:34:08,860 Kami ay may isang kailangan upang ipatupad ang likod dulo database o search engine mismo, 751 00:34:08,860 --> 00:34:11,210 at na ang pagpunta sa kumuha ng isang buong pulutong ng mga oras, lantaran. 752 00:34:11,210 --> 00:34:13,380 >> Kaya tandaan kung ano ang ginawa namin huling oras. 753 00:34:13,380 --> 00:34:18,230 Kaya kung naghahanap ka para sa isang bagay sa Google at ikaw ay in advance naka-off, 754 00:34:18,230 --> 00:34:20,355 pagpapabalik, instant search. 755 00:34:20,355 --> 00:34:22,230 Kaya hayaan mo akong i-na-off upang ang mga ito ang tunay na 756 00:34:22,230 --> 00:34:26,650 behaves tulad ng isang mas lumang browser paaralan, kung ngayon ako sa paghahanap para sa isang bagay tulad ng mga pusa, 757 00:34:26,650 --> 00:34:28,190 isipin kung ano ang hitsura ng URL tulad ng. 758 00:34:28,190 --> 00:34:29,449 Ito ay medyo cryptic. 759 00:34:29,449 --> 00:34:33,000 Ngunit nakapaloob doon, pagpapabalik, ay slash paghahanap. 760 00:34:33,000 --> 00:34:35,100 Tandang pananong q katumbas cats. 761 00:34:35,100 --> 00:34:37,760 >> At iyon ay tila upang bigyan ako isang buong grupo ng mga resulta ng paghahanap. 762 00:34:37,760 --> 00:34:39,134 Kaya alam mo kung ano ang ako pagpunta sa gawin? 763 00:34:39,134 --> 00:34:41,650 Pupunta ako upang humiram Google para sa isang minuto lamang. 764 00:34:41,650 --> 00:34:43,670 Pupunta ako sa pumunta sa paglipas ng dito at pupuntahan ko sabihin 765 00:34:43,670 --> 00:34:47,850 na ito ay bumubuo ng pagkilos o destination, kaya na magsalita, 766 00:34:47,850 --> 00:34:49,330 dapat maging literal Google. 767 00:34:49,330 --> 00:34:52,590 At ang paraan Nais kong sa paggamit ay magiging makuha. 768 00:34:52,590 --> 00:34:53,560 >> Kaya kung ano ang action? 769 00:34:53,560 --> 00:34:55,760 Action ay weirdly pinangalanan, ngunit na lamang ay nangangahulugan 770 00:34:55,760 --> 00:34:58,120 sino ang pagpunta sa hawakan ang pagkilos ng form na ito? 771 00:34:58,120 --> 00:35:00,820 Kapag nag-click ako Search, kung saan dapat pumunta ang mga resulta? 772 00:35:00,820 --> 00:35:05,300 At kung pumunta ako ngayon bumalik sa aking form dito at i-reload ang aking mga web page 773 00:35:05,300 --> 00:35:09,000 at ngayon sa paghahanap para sa isang bagay tulad ng aso, ngayon mapansin 774 00:35:09,000 --> 00:35:10,850 Ako ay muling ipinatupad Google. 775 00:35:10,850 --> 00:35:11,350 Right? 776 00:35:11,350 --> 00:35:14,141 >> Kung gusto ko upang maghanap para sa isang bagay ibang tao, ito ay gumagana para sa hindi lamang ang mga aso, 777 00:35:14,141 --> 00:35:16,400 ito rin ay gumagana para sa pusa. 778 00:35:16,400 --> 00:35:21,930 Ito rin ay gumagana para sa CS50. 779 00:35:21,930 --> 00:35:24,310 At OK, ito ay lamang sa ilalim whelming, ay hindi ito? 780 00:35:24,310 --> 00:35:25,920 Lahat ng mga karapatan, ngunit ito ay talagang gumagana. 781 00:35:25,920 --> 00:35:27,360 Kaya kung ano ang aktwal na nangyayari? 782 00:35:27,360 --> 00:35:31,340 Kaya tinuruan ko na ang aking browser, gamit HTML, na kumuha ng input mula sa user 783 00:35:31,340 --> 00:35:35,810 at talagang magpadala ng input na sa isang remote server gamit ang HTTP. 784 00:35:35,810 --> 00:35:39,120 >> At dahil ang aking browser nauunawaan HTTP, ito ang tunay 785 00:35:39,120 --> 00:35:43,500 bumuo ng mga URL upang ang kung ano ang End up ako sa ibabaw sa aking browser, 786 00:35:43,500 --> 00:35:45,660 paunawa kung ano ang mangyayari kapag ako ay naghanap para sa mga aso. 787 00:35:45,660 --> 00:35:49,270 Kung ako mag-click Search, mapapansin na ang mga pagbabago sa URL tulad ng nilayon ko 788 00:35:49,270 --> 00:35:52,770 upang google.com/search~~V katumbas query aso. 789 00:35:52,770 --> 00:35:56,020 At iyon ay dahil sa anyo Malay mo, dahil ang paraan na ito ay makakakuha ng, 790 00:35:56,020 --> 00:35:59,560 upang isama lamang ito sa URL na iyon doon. 791 00:35:59,560 --> 00:36:01,730 >> Ngayon, ang mga pahina ng web ay pangit pa rin. 792 00:36:01,730 --> 00:36:04,890 Kaya sabihin ipakilala ang isa sa iba pang mga piraso ng syntax kung kaya namin ngayon. 793 00:36:04,890 --> 00:36:07,640 At ito ay isang bagay na kilala ng cascading style sheet. 794 00:36:07,640 --> 00:36:10,720 Kaya hayaan mo akong tingnan ang ito halimbawa dito at tingnan 795 00:36:10,720 --> 00:36:12,380 kung maaari naming ipahiwatig kung ano ang nangyayari sa. 796 00:36:12,380 --> 00:36:14,520 Ito ang CSS0.html. 797 00:36:14,520 --> 00:36:16,532 At ito ay kung saan bagay makakuha ng isang maliit na pangit. 798 00:36:16,532 --> 00:36:18,490 Dahil sa kasamaang palad, sa mundo ng web, 799 00:36:18,490 --> 00:36:20,920 HTML lamang ay hindi maaaring gawin ang lahat. 800 00:36:20,920 --> 00:36:22,920 At kaya kung nais mong stylize iyong web page, 801 00:36:22,920 --> 00:36:28,370 ang tunay na kailangan upang tumutok sa mga aesthetics sa ibang paraan. 802 00:36:28,370 --> 00:36:33,090 Kaya dito, ako ang katawan ng aking web pahina sa loob ng kung saan ay isang malaking div. 803 00:36:33,090 --> 00:36:34,700 At isang div ay nangangahulugan lamang division. 804 00:36:34,700 --> 00:36:38,060 Kaya ito ay tulad ng isang talata ngunit ito ay hindi magkakaroon ng parehong semantics 805 00:36:38,060 --> 00:36:39,180 ng isang talata ng teksto. 806 00:36:39,180 --> 00:36:40,940 >> Ito ay nangangahulugan lamang na ang browser, dito pagdating 807 00:36:40,940 --> 00:36:45,210 isang malaking hugis-parihaba rehiyon ng aking web page, gusto kong hawakan ito lalo. 808 00:36:45,210 --> 00:36:47,420 Ngayon, 21 na linya ay kung saan na ang div magsisimula. 809 00:36:47,420 --> 00:36:48,770 At tumagal lamang ng isang hulaan. 810 00:36:48,770 --> 00:36:53,080 Ano ang epekto ng 21 na linya sa magpahinga ng ang mga nilalaman ng pahina? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Pagsasentro ito. 813 00:36:56,311 --> 00:36:56,810 Iyan na ang lahat. 814 00:36:56,810 --> 00:36:58,830 Kaya hindi namin nakita ang isang paraan ng talagang nakasentro ang teksto. 815 00:36:58,830 --> 00:37:00,996 >> Sa katunayan, ang aking mga search engine, hindi katulad ng aktwal na Google, 816 00:37:00,996 --> 00:37:03,040 ay ang lahat ng mga inaring-ganap sa sa kaliwa. 817 00:37:03,040 --> 00:37:07,430 At kaya ngayon sa 21 na linya, ang sinasabi ko, hey browser, lumikha ng isang division ng pahina. 818 00:37:07,430 --> 00:37:09,450 Basta bigyan mo ako ng isang malaki, invisible na parihaba. 819 00:37:09,450 --> 00:37:11,490 Iyon ay kung paano gusto kong isip tungkol sa mga web page. 820 00:37:11,490 --> 00:37:13,870 At pagkatapos stylize ito tulad ng sumusunod. 821 00:37:13,870 --> 00:37:16,900 Inside ng mga quotes, ngayon, ay pangalawang wika 822 00:37:16,900 --> 00:37:19,969 na ipinakilala namin ngayon tinatawag na cascading style sheet. 823 00:37:19,969 --> 00:37:22,010 Sa kabutihang palad, masyadong ito ay hindi isang programming language, 824 00:37:22,010 --> 00:37:26,470 kaya napaka ito ay limitado sa syntax nito ngunit din tunay limitado sa kanyang pag-andar 825 00:37:26,470 --> 00:37:30,670 samantalang HTML ay tungkol sa lahat pagmamarka up ang data ng isang pahina ng web 826 00:37:30,670 --> 00:37:32,130 at ang istraktura ng isang web page. 827 00:37:32,130 --> 00:37:35,320 CSS ay karaniwang tungkol sa huling milya, ang aesthetics, 828 00:37:35,320 --> 00:37:40,160 pagkuha ng mga sukat at ang mga kulay at ang placement akmang-akma sa isang web page. 829 00:37:40,160 --> 00:37:43,000 At sa katunayan, ito ay binuo ng sa pangunahing mga pares ng halaga. 830 00:37:43,000 --> 00:37:46,290 >> Ang isang ari-arian na tulad nito, text ihanay, na sinusundan ng isang colon, 831 00:37:46,290 --> 00:37:49,720 kasunod ang halaga ng mga na ari-arian, na sa kasong ito ay center. 832 00:37:49,720 --> 00:37:51,910 At ngayon mapansin mo Maaari nest ng mga bagay. 833 00:37:51,910 --> 00:37:56,780 Kung gusto ko lahat ng bagay na Nai-highlight ko na nakasentro, 834 00:37:56,780 --> 00:38:00,270 na ang dahilan kung bakit mayroon akong 21 na linya at ang katumbas na line 31. 835 00:38:00,270 --> 00:38:04,820 Ngunit ipagpalagay ngayon ay nais na sabihin John Harvard, maligayang pagdating sa aking home page. 836 00:38:04,820 --> 00:38:06,530 >> Simbolo Copyright John Harvard. 837 00:38:06,530 --> 00:38:09,180 At ipagpalagay na gusto ko ang una sa ang mga linya na maging medyo malaki. 838 00:38:09,180 --> 00:38:10,450 36 pixels. 839 00:38:10,450 --> 00:38:11,530 Kaya na ang isang disenteng laki. 840 00:38:11,530 --> 00:38:13,240 At gusto ko ang kanyang timbang na naka-bold. 841 00:38:13,240 --> 00:38:15,450 Ngunit pagkatapos ay sa ibaba na, Gusto ko ng mas maliit na teksto. 842 00:38:15,450 --> 00:38:19,980 At sa ibaba na, gusto ko kahit na mas maliit na teksto. 843 00:38:19,980 --> 00:38:20,480 Sorry. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Ngayon nararamdaman ng isang off araw. 846 00:38:26,940 --> 00:38:29,840 >> Kaya ngayon, kung ano ang ginagawa ko para ipahayag ang mga ito? 847 00:38:29,840 --> 00:38:34,580 Narito sa linya 22 ay isang naka-embed div o nested div, kung ikaw ay. 848 00:38:34,580 --> 00:38:36,190 Ito masyadong ay may sariling estilo tag. 849 00:38:36,190 --> 00:38:38,160 Ako tukuyin ang isang laki ng font ng 36. 850 00:38:38,160 --> 00:38:40,460 Ako tukuyin ang isang font bigat ng bold. 851 00:38:40,460 --> 00:38:43,360 Down dito, tukuyin ko lamang ng 24 pixels. 852 00:38:43,360 --> 00:38:45,960 At sa wakas, sa 28 na linya, tukuyin ko 12. 853 00:38:45,960 --> 00:38:49,070 Kaya lang bilang isang mabilis katinuan suriin at bilang isang tao sa pagbabasa na ito, 854 00:38:49,070 --> 00:38:52,545 kung aling mga salita sa screen ay talagang magiging bold? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Aling mga linya ay talagang bold? 857 00:38:58,760 --> 00:38:59,570 >> Just John Harvard. 858 00:38:59,570 --> 00:39:00,070 Right? 859 00:39:00,070 --> 00:39:05,940 Dahil lamang bilang 22 line sabi hey browser, narito ang isang division ng pahina. 860 00:39:05,940 --> 00:39:07,920 Gawin itong laki ng font 36 point. 861 00:39:07,920 --> 00:39:09,460 Gawin ang bigat ng font na naka-bold. 862 00:39:09,460 --> 00:39:11,920 Sa sandaling maabot mo ang kaukulang end tag 863 00:39:11,920 --> 00:39:15,340 o sarado na tag sa 24 na linya, ang ibig sabihin, hey browser, 864 00:39:15,340 --> 00:39:17,640 ihinto ang paggawa ng anumang mga ito ay ang iyong ginagawa. 865 00:39:17,640 --> 00:39:21,020 At pansinin na maging malinaw, kahit na 22 linya ay may lahat ng mga katangian 866 00:39:21,020 --> 00:39:24,430 tulad ng estilo, kapag kayo isara ang tag sa loob ng 24 na linya, 867 00:39:24,430 --> 00:39:25,940 banggitin mo lamang pangalan ng tag. 868 00:39:25,940 --> 00:39:29,990 >> Hindi mo na ulitin ang mga salita estilo o anumang bagay na nasa loob ng mga panipi. 869 00:39:29,990 --> 00:39:32,860 At kaya kung ako ay tumingin sa ito ngayon sa aking browser, sabihin 870 00:39:32,860 --> 00:39:38,060 isang tumingin sa ang huling resulta. Hayaan akong pumunta mauna na ang file na ito, na kung saan ay CSS 0. 871 00:39:38,060 --> 00:39:41,814 At ito ay medyo plain pa rin, ngunit nakakakuha ng medyo interesting. 872 00:39:41,814 --> 00:39:43,980 Ngunit ito ay lumiliko out doon ni iba pang mga bagay ang maaari kong gawin dito, 873 00:39:43,980 --> 00:39:46,490 at sa panganib ng paggawa ng ito ganap na kahindik-hindik, 874 00:39:46,490 --> 00:39:48,630 mapapansin dito na sa aking katawan ng aking web page, 875 00:39:48,630 --> 00:39:53,930 Maaari kong gawin ang isang bagay na nakakatawa tulad bg o kulay ng background. 876 00:39:53,930 --> 00:39:56,670 >> At mabilis, kung ano ang iyong paboritong kulay? 877 00:39:56,670 --> 00:39:57,720 Green aking narinig. 878 00:39:57,720 --> 00:39:58,750 Lahat tama. 879 00:39:58,750 --> 00:40:02,920 Kaya ngayon, kung ako pindutin reload ngayon, kami ay may isang green web page. 880 00:40:02,920 --> 00:40:04,710 Lahat ng mga karapatan, sa gayon ay hindi masama. 881 00:40:04,710 --> 00:40:08,350 At ngayon, kung gusto kong gumawa ito talaga cool, maaari kong gawin ang mga kulay ng aking text 882 00:40:08,350 --> 00:40:09,360 kahit red. 883 00:40:09,360 --> 00:40:10,870 Kaya sabihin makita kung ano ito mukhang. 884 00:40:10,870 --> 00:40:12,230 Ngayon ito ay naghahanap ng mahusay. 885 00:40:12,230 --> 00:40:15,460 At sa dako rito, kung ikaw talaga nais na gulo sa isang tao 886 00:40:15,460 --> 00:40:17,487 o kung gusto mong maging isa sa mga tao na 887 00:40:17,487 --> 00:40:20,570 sumusubok upang linlangin ka sa pagbisita sa isang web pahina dahil na-hangang mawalan sila Google 888 00:40:20,570 --> 00:40:27,610 sa pag-iisip may isang buong grupo ng like-- ipaalam key salita makita, i-reload. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Saan ito pumunta? 891 00:40:30,680 --> 00:40:31,530 At doon ito sa amin. 892 00:40:31,530 --> 00:40:32,030 Lahat tama. 893 00:40:32,030 --> 00:40:34,905 Kaya sinasabi ko ito bilang isang bukod, bibigyan namin ng makipag-usap tungkol sa mga bagay na ito sa loob ng ilang linggo 894 00:40:34,905 --> 00:40:36,740 kapag kami makipag-usap tungkol sa seguridad, kung talagang 895 00:40:36,740 --> 00:40:38,852 i-embed buong kumpol na mga keyword sa isang pahina ng web, 896 00:40:38,852 --> 00:40:41,810 kahit na sila ay hindi makikita sa isang ng tao, ang isang tao ay tulad ng Google, siyempre, 897 00:40:41,810 --> 00:40:43,250 maaari pa rin mahanap ang tunay na ito. 898 00:40:43,250 --> 00:40:45,820 Lahat ng karapatan, kaya na medyo napakapangit medyo mabilis. 899 00:40:45,820 --> 00:40:48,420 >> At sa katunayan, ito ay hindi lahat na marami hindi katulad ng aking sariling web 900 00:40:48,420 --> 00:40:51,480 page bilang isang undergraduate, na Nagsimula ako sa Pag-Google sa paligid upang makahanap ng 901 00:40:51,480 --> 00:40:53,690 nakaraang mga bersyon ng aking mga lumang mga website. 902 00:40:53,690 --> 00:40:54,500 Ito ay medyo masama. 903 00:40:54,500 --> 00:40:56,650 Sa katunayan, ako ay hindi mahanap isa lamang bago class. 904 00:40:56,650 --> 00:40:58,620 Ngunit mayroong mas masahol pa doon. 905 00:40:58,620 --> 00:41:01,534 Tila ito ay aking bahay pabalik sa 1996 page. 906 00:41:01,534 --> 00:41:04,200 Tila Akala ko ito ay naaangkop upang hilingin sa mga tao ang kanilang mga pangalan 907 00:41:04,200 --> 00:41:05,991 bago maaari nilang aktwal na makita ang aking mga web page. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> At pagkatapos ay ipinakita ko sa kanila isang bagay bobo, marahil. 910 00:41:11,920 --> 00:41:13,450 Kukunin ko maghukay up ng higit pa para sa susunod na pagkakataon. 911 00:41:13,450 --> 00:41:16,220 Ngunit sa ngayon, sabihin isaalang-alang ang isang piraso ng disenyo. 912 00:41:16,220 --> 00:41:17,444 Pinag-usapan natin ang tungkol sa estilo. 913 00:41:17,444 --> 00:41:19,735 At ang pahinang ito kaya malayo at karamihan sa lahat ng iyong isinulat ko 914 00:41:19,735 --> 00:41:21,890 ay medyo malinis stylistically. 915 00:41:21,890 --> 00:41:23,320 Ngunit ano ang tungkol sa disenyo? 916 00:41:23,320 --> 00:41:25,990 Well, may isang pulutong ng mga kalabisan sa kung ano ang iyong na-paggawa ko dito. 917 00:41:25,990 --> 00:41:28,156 >> Nabanggit ko na ang salita kulay sa loob ng ilang mga lugar. 918 00:41:28,156 --> 00:41:31,630 Nabanggit ko na laki ng font sa isang pares ng mga lugar at naka-bold sa loob ng ilang mga lugar. 919 00:41:31,630 --> 00:41:34,870 At sa panimula, ako co humahalo dalawang wika. 920 00:41:34,870 --> 00:41:38,100 Mayroon akong HTML sa aking mga tag at ang aking mga katangian at pagkatapos ang lahat ng isang biglaang, 921 00:41:38,100 --> 00:41:40,100 pagitan ng mga panipi, mayroon akong ang pangalawang wika ngayon 922 00:41:40,100 --> 00:41:43,830 tinatawag na CSS, na muli, ay lamang ang mga key na mga pares ng halaga o mga pag-aari 923 00:41:43,830 --> 00:41:45,280 pinaghiwalay ng tutuldok. 924 00:41:45,280 --> 00:41:47,700 >> Ito ay lumiliko out na marami tulad ng sa C kung saan kami 925 00:41:47,700 --> 00:41:50,550 maaaring magsimula sa kadahilanan out ang ilang mga code sa header na file, 926 00:41:50,550 --> 00:41:53,520 upang maaari naming gawin ang parehong sa HTML. 927 00:41:53,520 --> 00:41:56,030 At isang hakbang patungo sa na ay ang mga sumusunod. 928 00:41:56,030 --> 00:42:02,230 Pansinin na ang bersyon na ito, CSS1.html ay structurally ang eksaktong parehong web page. 929 00:42:02,230 --> 00:42:05,250 Kaya Mayroon akong isang buong grupo ng divs, ngunit oras na ito, hindi ko na 930 00:42:05,250 --> 00:42:07,220 nakuha mapupuksa ng wrapper div bilang makikita mo. 931 00:42:07,220 --> 00:42:12,390 >> At ko na ibinigay sa mga tatlong divs itaas, gitna, at ibaba, natatanging mga ID. 932 00:42:12,390 --> 00:42:14,760 Ito ay maganda, dahil sa pamamagitan ng pagbibigay ng mga dibisyon 933 00:42:14,760 --> 00:42:18,715 ng pahina natatanging identifier, Maaari ko bang isangguni ang mga ito sa ibang lugar. 934 00:42:18,715 --> 00:42:19,215 Saan? 935 00:42:19,215 --> 00:42:21,070 Well, hayaan mo akong mag-scroll up. 936 00:42:21,070 --> 00:42:24,070 At kaya sa ngayon, anumang oras kami ay tumingin sa ulo ng isang pahina ng web, kung ano ang 937 00:42:24,070 --> 00:42:28,560 ang tanging tag namin ay sa ulo ng isang web page? 938 00:42:28,560 --> 00:42:29,740 Ang isang maliit na louder. 939 00:42:29,740 --> 00:42:30,799 Ang pamagat lamang sa ngayon. 940 00:42:30,799 --> 00:42:32,590 Ngunit ito ay lumiliko out doon ni ang ilang iba pang mga bagay-bagay 941 00:42:32,590 --> 00:42:35,840 maaari mong ilagay doon, isa sa na kung saan ito ay tinatawag na isang tag ng estilo. 942 00:42:35,840 --> 00:42:37,850 Kaya ilang sandali ang nakalipas, kami ay tumingin sa isang attribute style. 943 00:42:37,850 --> 00:42:39,150 Ino-out may isang tag ng estilo. 944 00:42:39,150 --> 00:42:41,200 Ito ay nabibilang sa loob ng ulo ng isang web page. 945 00:42:41,200 --> 00:42:42,840 At ngayon mapansin kung ano ako ng paggawa. 946 00:42:42,840 --> 00:42:46,540 Mayroon akong sa loob ng mga ito estilo ng tag ang mga sumusunod. 947 00:42:46,540 --> 00:42:51,190 Literal ako pagbanggit sa 20 linya pangalan ng tag na gusto kong stylize. 948 00:42:51,190 --> 00:42:53,489 >> Pagkatapos Mayroon akong bukas kulot suhay at sarado kulot suhay. 949 00:42:53,489 --> 00:42:56,030 Kaya katulad sa espiritu sa C, ngunit muli, ito ay hindi isang function, 950 00:42:56,030 --> 00:42:57,796 ito ay lamang ng isang syntactic detalye dito. 951 00:42:57,796 --> 00:43:00,170 At pagkatapos ng kurso, ako na nagsasabi sa ang browser, hey browser, 952 00:43:00,170 --> 00:43:05,210 gawin ang buong katawan ng pahina magkaroon ng isang pag-align ng teksto ng center. 953 00:43:05,210 --> 00:43:06,930 At pagkatapos na ito ay sinasabi ng mga sumusunod. 954 00:43:06,930 --> 00:43:12,600 Hey browser, kung makakita ka ng HTML elemento o tag sa pahinang iyon 955 00:43:12,600 --> 00:43:17,040 may isang natatanging identifier ng top, kaya ang simbolo hash dito ay nangangahulugan lamang 956 00:43:17,040 --> 00:43:21,010 natatanging ideya ng top, sige at gumawa ng laki ng font sa kanyang 36 957 00:43:21,010 --> 00:43:22,490 at naka-bold ang timbang font nito. 958 00:43:22,490 --> 00:43:26,840 >> Hey browser, isang elemento na ID ay gitna, gawin itong 24 pixels. 959 00:43:26,840 --> 00:43:31,070 At hey browser, kung makakita ka ng ideya ng ibaba, gawin itong 12 pixels. 960 00:43:31,070 --> 00:43:33,540 Ang epekto sa dulo ay eksakto ang sam. 961 00:43:33,540 --> 00:43:36,500 Kung pumunta ako sa CSS 1, ang Mukhang parehong pahina. 962 00:43:36,500 --> 00:43:39,810 Ngunit hindi namin ng isang hakbang patungo isang bahagyang mas mahusay na disenyo. 963 00:43:39,810 --> 00:43:44,850 Hayaan akong bumalik ngayon dito sa CSS2 at makita kung ano pa ang nagawa ko. 964 00:43:44,850 --> 00:43:48,030 >> Ngayon ang pahina ay tunay, tunay na malinis. 965 00:43:48,030 --> 00:43:50,730 Sa katunayan, ang maaari kong magkasya ang lahat ng ang mga nilalaman sa isang pahina dito. 966 00:43:50,730 --> 00:43:54,270 Ngunit ano ang bagong tag ako ipinakilala, malinaw naman? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 At ito ay hindi ang pinakamahusay na pangalan para sa isang tag, dahil ito ay hindi isang link sa kamalayan 969 00:43:57,853 --> 00:44:00,780 na alam namin ito, ngunit ito ay nangangahulugan na ng isang link sa ilang mga iba pang mga file. 970 00:44:00,780 --> 00:44:02,890 Ito ay uri ng tulad ng matutulis na isama sa C. 971 00:44:02,890 --> 00:44:06,280 >> Ito ang paraan sa HTML sabihin hey browser, 972 00:44:06,280 --> 00:44:10,240 pumunta makakuha ng mga nilalaman ng ang file na tinatawag css2.css. 973 00:44:10,240 --> 00:44:12,880 Ang relasyon, sa akin, ay na ito ay isang style sheet. 974 00:44:12,880 --> 00:44:17,980 At sa katunayan, na kung ano ang isa sa mga S sa cascading style sheet paraan. 975 00:44:17,980 --> 00:44:20,350 Ito ay isang style sheet. 976 00:44:20,350 --> 00:44:23,120 Ito lang ang text file na naglalaman ng ang maramihang mga ari-arian. 977 00:44:23,120 --> 00:44:25,940 Ito ay isang buong grupo ng mga estilo na nais mong mag-apply sa isang pahina. 978 00:44:25,940 --> 00:44:28,860 >> At kaya ito ay tila nagre-refer sa isang pangalawang file. 979 00:44:28,860 --> 00:44:32,970 At kung bubuksan ko na, CSS2.css, mapapansin na ang nagawa mo na ang lahat ko 980 00:44:32,970 --> 00:44:35,900 ay kopyahin at i-paste ang lahat ng mga ito sa ang file na ito. 981 00:44:35,900 --> 00:44:38,220 At ngayon, kahit na sa iyo na hindi kailanman coded ito bagay-bagay bago, 982 00:44:38,220 --> 00:44:40,700 isaalang-alang lamang sa mga kilalang-kilala sumbrero engineering 983 00:44:40,700 --> 00:44:44,220 on, kung bakit ito ang isang mas mahusay na disenyo ay marahil? 984 00:44:44,220 --> 00:44:48,910 Factoring out mga CSS properties, paglalagay sa kanila sa kanilang sariling mga file. 985 00:44:48,910 --> 00:44:51,330 Kahit na malulutas namin ito problema tulad ng limang minuto ang nakalipas 986 00:44:51,330 --> 00:44:52,600 sa pinakaunang bersyon. 987 00:44:52,600 --> 00:44:55,730 >> Hindi namin pinabuting na ang page stylistically, 988 00:44:55,730 --> 00:44:57,520 ito ay mas mahusay na lamang disenyo sa ilang mga kahulugan. 989 00:44:57,520 --> 00:44:58,990 Bakit sa palagay mo? 990 00:44:58,990 --> 00:45:01,510 Oo. 991 00:45:01,510 --> 00:45:02,260 Mas may kakayahang umangkop kung paano? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Oo. 994 00:45:05,540 --> 00:45:07,373 Kaya kung nais mong puntahan bumalik at baguhin ang mga bagay-bagay, 995 00:45:07,373 --> 00:45:09,540 ngayon, mayroon kang isang lugar kung saan maaari mong baguhin ang mga bagay-bagay. 996 00:45:09,540 --> 00:45:11,622 At sa katunayan, para sa isang bagay tulad ng problema set pitong, 997 00:45:11,622 --> 00:45:13,690 kung saan makikita namin ipatupad ang isang stock website kalakalan, 998 00:45:13,690 --> 00:45:15,523 na ang pagpunta sa magkaroon ng isang ang maramihang mga pahina. 999 00:45:15,523 --> 00:45:17,620 At ito ay talagang nakakainis kung magpasya ka, hm, 1000 00:45:17,620 --> 00:45:21,630 Hindi ko talagang gusto ang 24 pixels, gusto ko ito upang maging 28 pixels o bahagyang mas malaki. 1001 00:45:21,630 --> 00:45:23,550 At pagkatapos ay may sa gawin ang isang global hanapin at palitan 1002 00:45:23,550 --> 00:45:27,560 o buksan ang lahat ng mga file ng iyong website lang na talagang baguhin isang halaga. 1003 00:45:27,560 --> 00:45:31,290 Sa pamamagitan ng factoring out ang mga estilo sa isang sentral na lugar, 1004 00:45:31,290 --> 00:45:34,720 Maaari mo na ngayong buksan sa isang tekstong file sa CS50IDE sa anumang programa, 1005 00:45:34,720 --> 00:45:36,479 baguhin ito, i-save ito, at tapos na. 1006 00:45:36,479 --> 00:45:38,270 Propagated mo na ang mga mga pagbabago sa lahat ng dako. 1007 00:45:38,270 --> 00:45:42,450 At iyon ay ang parehong sa isang tuldok h file pati na rin. 1008 00:45:42,450 --> 00:45:46,697 Kaya ang anumang mga katanungan sa gayon ay malayo sa syntax na ito? 1009 00:45:46,697 --> 00:45:48,530 Lahat ng karapatan, kaya na namin tapos na ang lahat ng ito ay tila 1010 00:45:48,530 --> 00:45:51,170 maliban talagang ipatupad hyperlink. 1011 00:45:51,170 --> 00:45:52,740 At sige at gawin ito upang ipaalam. 1012 00:45:52,740 --> 00:45:54,830 Hayaan akong magpatuloy at lumikha ng isang bagong file dito. 1013 00:45:54,830 --> 00:45:59,970 Pupunta ako sa mga tawag na ito link.html, ilagay sa code ngayon. 1014 00:45:59,970 --> 00:46:03,000 >> At ako pagpunta sa gawin bukas bracket type doc html. 1015 00:46:03,000 --> 00:46:05,970 Bilang isang tabi, ang bagay na ito sa top, ito doc type deklarasyon, 1016 00:46:05,970 --> 00:46:08,420 ito ay ang isa lamang na ay kakaiba may exclamation point. 1017 00:46:08,420 --> 00:46:12,100 Ikaw lamang ang may sa gawin ito doon at ito nangangahulugan namin ay gumagamit ng HTML bersyon 5. 1018 00:46:12,100 --> 00:46:14,460 Mas lumang bersyon ng nagkaroon wika mas matagal 1019 00:46:14,460 --> 00:46:16,400 string na iyong kailangan upang ilagay doon. 1020 00:46:16,400 --> 00:46:18,620 Kaya dito ay isang halimbawa na tinatawag na link. 1021 00:46:18,620 --> 00:46:20,950 >> Kailangan ko ng isang katawan ng aking web page dito. 1022 00:46:20,950 --> 00:46:29,770 At sa dito, a href equals sabihin natin HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 at ang aking paboritong website, kami sabihin. 1024 00:46:35,420 --> 00:46:38,550 Lahat ng karapatan, kaya ng isang napaka hindi nakapipinsala, page friendly user. 1025 00:46:38,550 --> 00:46:42,950 Kung pupunta ako ngayon sa aking directory dito at magbukas ng mga link.html, 1026 00:46:42,950 --> 00:46:44,780 mayroon kaming hyper text. 1027 00:46:44,780 --> 00:46:47,410 >> At sa katunayan, ito ay kung saan ang H sa HTTP ay mula. 1028 00:46:47,410 --> 00:46:51,580 Hypertext transfer protocol ay tungkol sa paglilipat ng mga text 1029 00:46:51,580 --> 00:46:53,840 na may hyperlink sa iba pang mga mapagkukunan. 1030 00:46:53,840 --> 00:46:58,210 At sa katunayan, dito ay ang mga pamilyar na, kung retro, asul na link na kung nag-click, 1031 00:46:58,210 --> 00:47:02,607 ay tunay na humahantong sa akin na Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Ngayon, oh, na darating sa lalong madaling panahon. 1033 00:47:03,940 --> 00:47:08,970 Lahat ng karapatan, kaya ngayon, ano ang ilang ng mga implikasyon ng mga ito? 1034 00:47:08,970 --> 00:47:11,610 >> At lantaran, ay nagsisimula sa mundo upang makakuha ng isang maliit na mas pamilyar 1035 00:47:11,610 --> 00:47:15,090 at din ng isang maliit na scarier kundi pati na rin ng kaunti pa 1036 00:47:15,090 --> 00:47:17,840 sa sarili maipagtatanggol sa sandaling simulan mo upang maunawaan ang mga bagay-bagay. 1037 00:47:17,840 --> 00:47:21,610 Dahil magkaaway, ang ilan sa iyo, kung ikaw ay pupunta sa pamamagitan ng iyong spam folder Gmail o kahit na 1038 00:47:21,610 --> 00:47:23,990 iyong inbox, marahil mo tapat na paraan ng ilang mga uri ng mga email 1039 00:47:23,990 --> 00:47:26,980 na humihiling sa iyo na baguhin ang iyong mga password siguro o baka ma-verify 1040 00:47:26,980 --> 00:47:28,910 ang iyong mga kredensyal PayPal o watnat. 1041 00:47:28,910 --> 00:47:34,510 >> At sa katunayan, maaaring ikaw ay nakatanggap bagay na nagsasabing tulad click dito 1042 00:47:34,510 --> 00:47:42,260 upang i-reset ang iyong PayPal password. 1043 00:47:42,260 --> 00:47:44,130 At ngayon, paunawa, kung Hindi na ito ay Disney.com 1044 00:47:44,130 --> 00:47:51,600 ngunit tulad badplace.com at reload, tandaan na ang mga text dito 1045 00:47:51,600 --> 00:47:53,710 maaaring sabihin ang anumang bagay kung ano pa man. 1046 00:47:53,710 --> 00:47:55,260 At sa katunayan, ito lamang ang mga salita. 1047 00:47:55,260 --> 00:48:04,610 Bakit hindi ko talagang maging sobrang malisyosong at sabihin http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Mag-click dito i-reset ang iyong PayPal password at ngayon i-reload. 1049 00:48:14,090 --> 00:48:16,220 Mukhang ito pretty lehitimong, di ba? 1050 00:48:16,220 --> 00:48:20,470 Ibig sabihin ko, hindi ko na mag-click sa ng isang email na nagsasabing ito lamang. 1051 00:48:20,470 --> 00:48:22,450 Ngunit mapansin ang paghihiwalay sa dalawang bahagi dito. 1052 00:48:22,450 --> 00:48:26,880 Sinasabi nito www.paypal.com, at sa katunayan, maghintay ng isang minuto, 1053 00:48:26,880 --> 00:48:29,210 alam namin na gusto mong ang para sa seguridad. 1054 00:48:29,210 --> 00:48:35,450 Kaya ngayon, pumunta sa www.paypal.com HTTPS, ngunit kung hindi mo pa nagagawa ito bago, 1055 00:48:35,450 --> 00:48:38,182 makuha sa ugali ng pagpasada sa maliit na mga link dito. 1056 00:48:38,182 --> 00:48:39,890 At ito ay mahirap upang makita ang sa screen doon, 1057 00:48:39,890 --> 00:48:41,340 at ito ay hindi lahat na madali dito. 1058 00:48:41,340 --> 00:48:43,615 Ngunit paraan pababa dito sa ang maliit na maliit na maliit na sulok 1059 00:48:43,615 --> 00:48:45,740 gumagana ang browser talaga sabihin sa iyo na kami ay pagpunta 1060 00:48:45,740 --> 00:48:48,850 upang badplace.com halip ng Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Ngayon, kung saan kami makapupunta sa mga ito? 1062 00:48:51,620 --> 00:48:54,859 Lahat ng mga halimbawa tapos na namin ngayon, mahirap na namin ang naka-code at nag-type ang mano-mano. 1063 00:48:54,859 --> 00:48:56,900 Ang web ay hindi kapani-paniwalang hindi kawili-wili kapag ikaw ay nagsusumikap 1064 00:48:56,900 --> 00:48:59,844 code ng iyong mga pahina ng web upang ang mga nilalaman ay static at hindi nagbabago. 1065 00:48:59,844 --> 00:49:01,760 Syempre, ang lahat ng aming mga mga paboritong website sa araw na ito, 1066 00:49:01,760 --> 00:49:04,470 maging ito man ay sa Gmail o Twitter o Facebook o anumang bilang ng iba 1067 00:49:04,470 --> 00:49:05,290 ay dynamic. 1068 00:49:05,290 --> 00:49:07,340 Sila ay ang pagbabago sa Bilang tugon sa input ng user 1069 00:49:07,340 --> 00:49:08,840 tulad lamang ang mga resulta ng paghahanap ng Google. 1070 00:49:08,840 --> 00:49:12,415 >> At kaya sa Miyerkules, kung ano ang ginagawa namin ay umalis kami ng HTML at CSS pagpapakilala 1071 00:49:12,415 --> 00:49:14,290 sa likod sa amin at dalhin namin para sa ipinagkaloob na kami ngayon 1072 00:49:14,290 --> 00:49:16,640 malaman ito at ipakilala kami ng isang bagong wika programming 1073 00:49:16,640 --> 00:49:19,050 tinatawag na PHP, na kung saan ay nais C, ay pagpunta upang ibigay sa amin 1074 00:49:19,050 --> 00:49:22,450 ang kapangyarihan upang aktwal na gumawa ng mga programa na ang kanilang sarili bumuo ng output. 1075 00:49:22,450 --> 00:49:25,900 Sa kasong ito, kami ay gumagamit ng PHP upang bumuo ng mga dynamic na web 1076 00:49:25,900 --> 00:49:27,340 mga pahina gamit ang bagong wika. 1077 00:49:27,340 --> 00:49:28,989 Kaya higit pa sa na sa Miyerkules. 1078 00:49:28,989 --> 00:49:29,530 Tingnan mo pagkatapos. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [MUSIC nagpe-play] 1081 00:49:37,380 --> 00:52:38,864