1 00:00:00,000 --> 00:00:01,390 2 00:00:01,390 --> 00:00:04,890 >> [Музички] 3 00:00:04,890 --> 00:00:10,955 4 00:00:10,955 --> 00:00:12,580 Дејвид Ј MALAN: Во ред, добредојде назад. 5 00:00:12,580 --> 00:00:13,600 Ова е CS50. 6 00:00:13,600 --> 00:00:15,540 Ова е крајот на недела седум. 7 00:00:15,540 --> 00:00:18,180 И тоа е крајот на тој чистач лов од проблемот постави четири 8 00:00:18,180 --> 00:00:19,220 кои може да се сети. 9 00:00:19,220 --> 00:00:21,650 По се опоравува сите оние JPEG слики на персоналот, 10 00:00:21,650 --> 00:00:24,820 сте биле оспорени, ако сакате, да се фотографира со толку многу 11 00:00:24,820 --> 00:00:25,981 на оние луѓе што можеш. 12 00:00:25,981 --> 00:00:28,480 Добивме целиот куп на поднесоци во текот на изминатите неколку недели, 13 00:00:28,480 --> 00:00:32,980 Навистина, неколку право пред пладне денес, од кои некои се оние тука, 14 00:00:32,980 --> 00:00:37,670 фатени тука in-- изгледа like-- Annenberg Сала во работното време, овде 15 00:00:37,670 --> 00:00:39,530 во Ловел хаус со Ник. 16 00:00:39,530 --> 00:00:41,750 Еве Рамон бидат фатени на телефонот. 17 00:00:41,750 --> 00:00:43,870 Ова беше на CS50 ручек. 18 00:00:43,870 --> 00:00:46,840 Ова беше Џејсон skyping со покреативен соученик, 19 00:00:46,840 --> 00:00:48,280 кој му телефонирал на овој начин. 20 00:00:48,280 --> 00:00:49,690 Ние не знаеме што е ова беше. 21 00:00:49,690 --> 00:00:51,940 >> [Смеа] 22 00:00:51,940 --> 00:00:54,570 >> Дејвид Ј MALAN: Но, тоа е вреди да се гигабајт. 23 00:00:54,570 --> 00:00:56,960 Тука е Чанг, кој буквално истрча на сцената 24 00:00:56,960 --> 00:01:00,480 да избегнат да бидат фотографирани еден ден, но на крајот беше фатен. 25 00:01:00,480 --> 00:01:02,050 Тука е Ник. 26 00:01:02,050 --> 00:01:03,480 Тука е Ник. 27 00:01:03,480 --> 00:01:04,080 Тука е Ник. 28 00:01:04,080 --> 00:01:05,090 29 00:01:05,090 --> 00:01:07,670 И тука е Алисон од страна на полиња. 30 00:01:07,670 --> 00:01:11,840 И Zamyla дури и се најде на сала за танц конкуренција. 31 00:01:11,840 --> 00:01:14,100 Па ние ќе одиме преку овие фотографии, дознаам 32 00:01:14,100 --> 00:01:16,690 кои поднеле најмногу најрано и награда 33 00:01:16,690 --> 00:01:20,662 еден прекрасен награда, како вети во спецификации. 34 00:01:20,662 --> 00:01:23,120 И ние, исто така, ќе го следат околу просторот што се работи. 35 00:01:23,120 --> 00:01:26,860 >> Неколку announcements-- па ручек е, пак, овој петок во 13:15. 36 00:01:26,860 --> 00:01:30,420 Ако сакате да ни се придружите, RSVP во тоа URL тука. 37 00:01:30,420 --> 00:01:33,730 Џејсон се појавува повторно тука од една од деловите неколку години 38 00:01:33,730 --> 00:01:35,510 назад, што се случи да падне на Ноќта на вештерките. 39 00:01:35,510 --> 00:01:38,950 И навистина, тој облечен како тиква таа година. 40 00:01:38,950 --> 00:01:42,700 Ако се види овој дел на неговото од 2011 секција 41 00:01:42,700 --> 00:01:46,480 осум, ако сте љубопитни, на CS50.tv, мислам дека 42 00:01:46,480 --> 00:01:49,730 ова беше година во која својата воздушна пумпа работеше. 43 00:01:49,730 --> 00:01:52,490 >> Ако тогаш ќе се види на слични делот во 2012 година, 44 00:01:52,490 --> 00:01:55,620 ќе видите ова Џејсон многу отпушта, бидејќи тужбата веќе не функционираше, 45 00:01:55,620 --> 00:01:58,060 што е само да се каже овој петок, ако сакате 46 00:01:58,060 --> 00:02:02,720 сакале да издлаби од тиква со Daven и Габе и други, RSVP на глави 47 00:02:02,720 --> 00:02:04,480 на cs50.harvard.edu адреса. 48 00:02:04,480 --> 00:02:06,200 Тој ветува дека ќе биде голема забава. 49 00:02:06,200 --> 00:02:08,660 Daven, ние сме изјави, е врежан тикви сите од неговиот живот. 50 00:02:08,660 --> 00:02:11,930 Габриел од Бразил никогаш не врежало тиква за Ноќта на вештерките. 51 00:02:11,930 --> 00:02:14,700 Значи да се биде таму со нив, како што учи. 52 00:02:14,700 --> 00:02:16,830 >> Семинари, meanwhile-- така ќе дознаете наскоро 53 00:02:16,830 --> 00:02:20,650 за тоа што нашите очекувања се за завршниот проект, што во суштина 54 00:02:20,650 --> 00:02:23,150 ќе се сведуваат на дизајнирање и имплементирање на 55 00:02:23,150 --> 00:02:26,440 повеќето секој проект од интерес за вас, иако се предмет на одобрување 56 00:02:26,440 --> 00:02:28,490 и насоки од вашата настава колеги. 57 00:02:28,490 --> 00:02:32,110 Кон крајот на семестар, ќе се воведат број 58 00:02:32,110 --> 00:02:35,610 семинари, која се опционални класи предводени од наставата соработници и Харвард 59 00:02:35,610 --> 00:02:38,570 персонал, пријатели на курсот низ кампусот, на различни теми кои 60 00:02:38,570 --> 00:02:41,470 се тангентна на основната програма Курсеви 61 00:02:41,470 --> 00:02:45,590 но сепак се применуваат, забава, и различни за потенцијални крајни проекти. 62 00:02:45,590 --> 00:02:49,530 >> На пример, прво, ако сакате да се регистрираат, шеф на тоа рачно таму. 63 00:02:49,530 --> 00:02:53,010 И ова е постава за семинари за оваа година сам. 64 00:02:53,010 --> 00:02:56,060 Но сфати имаме десетици семинари од изминатите години, од кои сите 65 00:02:56,060 --> 00:02:59,774 се поврзани во менито Семинари опција на веб-сајтот на курсот. 66 00:02:59,774 --> 00:03:02,190 Значи, ако сте размислување за случува надвор од вашата удобност зона 67 00:03:02,190 --> 00:03:05,060 или подигање на нови вештини, на пример, програмирање на iPhone 68 00:03:05,060 --> 00:03:08,100 апликации со Свифт, нов јазик од Apple или Objective-C 69 00:03:08,100 --> 00:03:11,230 или Андроид апликации или програмирање [? знак?] светилки, или било која од темите 70 00:03:11,230 --> 00:03:15,490 тука и повеќе, поради проверка надвор од регистрација страница. 71 00:03:15,490 --> 00:03:19,730 >> Така почнавме и склучен на Понеделник со гледање на HTTP. 72 00:03:19,730 --> 00:03:22,675 Толку брзо refresher-- HTTP, HyperText Протокол за пренос. 73 00:03:22,675 --> 00:03:24,045 Но, она што го прави тоа навистина значи? 74 00:03:24,045 --> 00:03:26,805 75 00:03:26,805 --> 00:03:27,930 Што значи тоа навистина значи? 76 00:03:27,930 --> 00:03:30,665 77 00:03:30,665 --> 00:03:31,290 Дали е тоа рака? 78 00:03:31,290 --> 00:03:33,074 79 00:03:33,074 --> 00:03:34,740 Знам дека си само си ја почеша главата. 80 00:03:34,740 --> 00:03:36,400 Но сакате да предложи она HTTP е? 81 00:03:36,400 --> 00:03:37,792 82 00:03:37,792 --> 00:03:40,576 >> ПУБЛИКАТА: Како компјутери комуницира со [нечујни]. 83 00:03:40,576 --> 00:03:41,517 84 00:03:41,517 --> 00:03:43,100 Дејвид Ј MALAN: Јас го пропуштив последниот дел. 85 00:03:43,100 --> 00:03:45,774 Како компјутерите комуницираат with-- 86 00:03:45,774 --> 00:03:47,325 >> ПУБЛИКАТА: Интернет сервери. 87 00:03:47,325 --> 00:03:50,450 Дејвид Ј MALAN: Good-- со интернет сервери, и конкретно, веб сервери. 88 00:03:50,450 --> 00:03:53,533 Затоа што се потсетиме, има еден куп на услуги на интернет, од кои некои 89 00:03:53,533 --> 00:03:57,349 го користите веројатно дневно меѓу разговор и порака, за разговор и веб и е-мејл, 90 00:03:57,349 --> 00:03:57,890 и слично. 91 00:03:57,890 --> 00:04:00,900 И HTTP е само протокол кој веб прелистувачи 92 00:04:00,900 --> 00:04:03,750 зборуваат при комуникација со веб сервери, и обратно. 93 00:04:03,750 --> 00:04:05,580 И аналогни во човечкиот свет може да биде, 94 00:04:05,580 --> 00:04:08,730 Јас се прошири мојата рака да се ослободи некои други човечки и тој или таа 95 00:04:08,730 --> 00:04:11,970 признава преку проширување неговата или нејзината рака, како и. 96 00:04:11,970 --> 00:04:13,970 Па тоа е само протокол, збир на конвенции. 97 00:04:13,970 --> 00:04:15,630 >> И она што навистина се оние конвенции? 98 00:04:15,630 --> 00:04:18,640 Па, тоа само се сведува на испраќање на пораки и назад, 99 00:04:18,640 --> 00:04:19,770 како што е прикажано тука. 100 00:04:19,770 --> 00:04:22,520 И има неколку начини на кои може да се испрати овие пораки. 101 00:04:22,520 --> 00:04:24,360 А можеби и повеќето заеднички е познат како добие. 102 00:04:24,360 --> 00:04:26,510 И ние ќе го види контрастот на оваа пред долго. 103 00:04:26,510 --> 00:04:30,010 >> Туку добие барање од пребарувачот на серверот само изгледа вака. 104 00:04:30,010 --> 00:04:32,960 Тоа е еден куп на текст кој го става во внатрешноста на виртуелна плик. 105 00:04:32,960 --> 00:04:35,854 На надворешната страна од пликот кој одат неколку парчиња детали. 106 00:04:35,854 --> 00:04:37,770 Она што треба да одат на коверт, така да се каже, 107 00:04:37,770 --> 00:04:41,820 со цел да се добие барање како ова од мене на веб сервер? 108 00:04:41,820 --> 00:04:42,320 Да. 109 00:04:42,320 --> 00:04:43,270 >> ПУБЛИКАТА: Вашата IP адреса. 110 00:04:43,270 --> 00:04:45,890 >> Дејвид Ј MALAN: Мојата IP адреса во Од поле, така да се каже, 111 00:04:45,890 --> 00:04:49,490 и се разбира, IP адреса на примачот. 112 00:04:49,490 --> 00:04:52,710 Но, во случај на веб пакет, ние треба малку повеќе детали 113 00:04:52,710 --> 00:04:55,254 Тоа не е доволно да се испрати плик на сервер, 114 00:04:55,254 --> 00:04:57,670 поради што серверот може да биде слушање за различни видови 115 00:04:57,670 --> 00:04:59,180 на интернет сообраќај. 116 00:04:59,180 --> 00:05:01,370 Па што друго не ни треба Покрај IP адреса на примачот? 117 00:05:01,370 --> 00:05:02,723 118 00:05:02,723 --> 00:05:03,222 Да? 119 00:05:03,222 --> 00:05:04,241 >> ПУБЛИКАТА: Дали е TCP? 120 00:05:04,241 --> 00:05:05,074 Дејвид Ј MALAN: Добро. 121 00:05:05,074 --> 00:05:06,470 TCP-- 122 00:05:06,470 --> 00:05:07,340 >> ПУБЛИКАТА: адреса. 123 00:05:07,340 --> 00:05:09,340 >> Дејвид Ј MALAN: Адреса, или порт, како што се вика. 124 00:05:09,340 --> 00:05:11,010 Блиски, но голем број на TCP порта. 125 00:05:11,010 --> 00:05:12,220 И има еден куп од нив. 126 00:05:12,220 --> 00:05:14,310 Но сигурно на повеќето запознаени треба на крајот 127 00:05:14,310 --> 00:05:17,590 биде 80, која е стандардна оној што се користи за веб сообраќај. 128 00:05:17,590 --> 00:05:20,040 И уште запознаени еден наскоро ќе биде 443, 129 00:05:20,040 --> 00:05:24,280 кој се користи за безбедна веб- сообраќај, адреси кои почнуваат со https. 130 00:05:24,280 --> 00:05:26,650 >> Значи ова е она што се случува внатре во тоа плик. 131 00:05:26,650 --> 00:05:29,780 И да добијат / само значи, им даде на ме на стандардниот веб страница. 132 00:05:29,780 --> 00:05:32,700 Дај ми коренот на хард вози на оваа веб сервер. 133 00:05:32,700 --> 00:05:36,050 И се надевам дека, на веб- серверот ќе одговори со, во ред 134 00:05:36,050 --> 00:05:39,630 и бројот 200, што е само конвенција велејќи дека, да, сите 135 00:05:39,630 --> 00:05:40,470 е навистина во ред. 136 00:05:40,470 --> 00:05:41,680 Тука е страница. 137 00:05:41,680 --> 00:05:45,510 Од типот на веб страница ќе се биде текстот, но поконкретно, HTML, 138 00:05:45,510 --> 00:05:47,010 кои ние сме за да се нурне назад во. 139 00:05:47,010 --> 00:05:49,877 И точка точка точка само средства, тука е HTML. 140 00:05:49,877 --> 00:05:51,710 И тоа е каде што ги собереш на приказната и денес, 141 00:05:51,710 --> 00:05:55,740 всушност пишување на HTML, HyperText Markup Language, кој 142 00:05:55,740 --> 00:05:57,727 е јазикот на кој веб-страници се напишани. 143 00:05:57,727 --> 00:05:59,060 Тоа не е програмски јазик. 144 00:05:59,060 --> 00:06:01,270 Нема функции или јамки или услови. 145 00:06:01,270 --> 00:06:03,800 Тоа е маркап јазик, како и повторно гледаме денес, 146 00:06:03,800 --> 00:06:07,240 кој ви овозможува да ги одредите како да структура и стилизирам 147 00:06:07,240 --> 00:06:09,300 естетски веб-страница. 148 00:06:09,300 --> 00:06:11,470 >> Значи ова беше еден и само страница што навистина 149 00:06:11,470 --> 00:06:13,930 погледна, ако на кратко, во понеделникот. 150 00:06:13,930 --> 00:06:16,250 И ќе забележите неколку истакнатите карактеристики. 151 00:06:16,250 --> 00:06:20,170 Има многу на отворен аголни заградата и блиски аголни заграда. 152 00:06:20,170 --> 00:06:23,160 Помеѓу оние аголни заградите се зборови. 153 00:06:23,160 --> 00:06:25,660 И ние си оди за да започнете повикувајќи оние зборови тагови. 154 00:06:25,660 --> 00:06:28,800 Толку отворен заградата глава и затворени заградата глава 155 00:06:28,800 --> 00:06:33,620 се отворени и затворени тагови, или на почетокот и крајот тагови 156 00:06:33,620 --> 00:06:37,660 односно на HTML елемент, како ние ќе го наречеме, наречен главата. 157 00:06:37,660 --> 00:06:41,760 И го применува истиот жаргон на телото во HTML и така натаму. 158 00:06:41,760 --> 00:06:43,970 >> И она што е убаво е HTML-- и навистина, ние ќе 159 00:06:43,970 --> 00:06:47,187 поминуваат ужасно малку време за тоа, бидејќи ќе најчесто само дознаам 160 00:06:47,187 --> 00:06:49,770 што карактеристики има, кога ќе всушност имаат конкретен проблем 161 00:06:49,770 --> 00:06:52,820 да solve-- ќе најдете дека прелистувачот е прилично глупава. 162 00:06:52,820 --> 00:06:56,450 Тоа е само случува да do-- не за разлика од на computer-- она ​​што ви го кажам да се направи. 163 00:06:56,450 --> 00:06:59,279 И така, кога имате отворена заградата на HTML во самиот врв 164 00:06:59,279 --> 00:07:01,320 таму, дека во суштина се само значи, еј, интернет пребарувач, 165 00:07:01,320 --> 00:07:04,090 тука доаѓа веб страница напишан во HTML. 166 00:07:04,090 --> 00:07:06,130 >> Кога гледа отворен заградата главата, тоа само значи, 167 00:07:06,130 --> 00:07:10,350 еј, интернет пребарувач, тука доаѓа на главата, или врвниот дел од мојата веб-страница. 168 00:07:10,350 --> 00:07:14,192 Кога гледа затворен држач главата, тоа само значи, еј, 169 00:07:14,192 --> 00:07:15,150 тоа е тоа за главата. 170 00:07:15,150 --> 00:07:16,420 Чекање за нешто друго. 171 00:07:16,420 --> 00:07:18,878 И дека нешто друго е очигледно ќе биде телото. 172 00:07:18,878 --> 00:07:22,630 И кога ќе немаат ознака, како имате само здраво, запирка, свет, 173 00:07:22,630 --> 00:07:26,610 тоа е само случува да бидат сурови текст кој во крајна линија се прикажува на екранот. 174 00:07:26,610 --> 00:07:29,220 >> Сега, ќе забележите премногу вовлекувањето тука. 175 00:07:29,220 --> 00:07:32,160 Што веројатно може да заклучиме како ние сме го stylizing. 176 00:07:32,160 --> 00:07:34,850 Секој пат кога ќе се отвори ознака, така да се каже, јас алинеја. 177 00:07:34,850 --> 00:07:38,540 И секој пат кога затвори таг, јас не-алинеја, 178 00:07:38,540 --> 00:07:40,690 слични во духот со големи загради. 179 00:07:40,690 --> 00:07:43,470 И подалеку од тоа, јас сум вид на користење на мојот пресудата. 180 00:07:43,470 --> 00:07:48,380 Забележете дека јас не се мачат удирајќи Внесете внатре во тоа насловот таг. 181 00:07:48,380 --> 00:07:48,990 Зошто? 182 00:07:48,990 --> 00:07:51,920 Па, јас само одлучи изгледаше малку почиста за мене, човечките, 183 00:07:51,920 --> 00:07:53,181 само да не се мачи тоа го прават. 184 00:07:53,181 --> 00:07:54,930 Значи, повторно, има некои пресуда повици само 185 00:07:54,930 --> 00:07:57,670 како таму е во C или било кој јазик. 186 00:07:57,670 --> 00:08:04,110 >> Но забележите дека премногу ова вовлекување е подложна на ментална модел, 187 00:08:04,110 --> 00:08:05,670 да не се над комплицира тоа. 188 00:08:05,670 --> 00:08:07,020 Но дрво, нели? 189 00:08:07,020 --> 00:08:09,290 Ако мислите дека на веб- страница, очигледно напишани 190 00:08:09,290 --> 00:08:12,050 вака, како да бидат убаво вовлечен тој начин, 191 00:08:12,050 --> 00:08:17,390 речиси може да се мисли на отворен заградата HTML затворени заградата таг е демаркацијата 192 00:08:17,390 --> 00:08:21,380 во коренот на јазол, семејно стебло стил јазол во стилот на дрва 193 00:08:21,380 --> 00:08:22,900 ние погледна во петокот минатата недела. 194 00:08:22,900 --> 00:08:27,630 >> И навистина, имаме на десната тука она што ќе го наречеме ДОМ, Д-О-М, документ 195 00:08:27,630 --> 00:08:31,680 објект модел, фенси начин да се каже дрво, што претставува дека HTML. 196 00:08:31,680 --> 00:08:36,140 И ќе забележите дека HTML има, ќе речеме, како семејство дрво, две деца. 197 00:08:36,140 --> 00:08:37,659 Лево е главата. 198 00:08:37,659 --> 00:08:39,179 На десната е тело. 199 00:08:39,179 --> 00:08:44,220 >> И како безумна мисла вежба, главата, се разбира, има колку деца 200 00:08:44,220 --> 00:08:46,070 според оваа структура? 201 00:08:46,070 --> 00:08:48,200 Па само една, title-- и тоа е причината зошто имаме 202 00:08:48,200 --> 00:08:50,580 на стрелката оди од глава до титулата. 203 00:08:50,580 --> 00:08:55,110 Па тоа е како тоа лице во семејно дрво имаше само еден потомство. 204 00:08:55,110 --> 00:08:58,230 А потоа самиот наслов може да се каже дека имаат дете премногу. 205 00:08:58,230 --> 00:09:01,780 >> Потсетиме дека HTML имаше Здраво, запирка, светот под него. 206 00:09:01,780 --> 00:09:06,090 И јас сум едноставно подготвени во рамките на една овална, наместо на правоаголник само 207 00:09:06,090 --> 00:09:10,559 да се пренесе семантички дека иако тоа е еден јазол во стеблото, така да се каже, 208 00:09:10,559 --> 00:09:12,100 тоа е вид на фундаментално различни. 209 00:09:12,100 --> 00:09:12,800 Тоа не е таг. 210 00:09:12,800 --> 00:09:14,780 Или повеќе правилно, тоа не е елемент. 211 00:09:14,780 --> 00:09:16,590 Тоа е само текст јазол, ако сакате. 212 00:09:16,590 --> 00:09:18,990 Но, овие се сосема произволни човечки конвенции. 213 00:09:18,990 --> 00:09:23,180 Ова е само сега мојот начин на претставува она што јас ќе како агрегат 214 00:09:23,180 --> 00:09:24,340 јавете се на документот. 215 00:09:24,340 --> 00:09:27,750 >> И како настрана, работа во супер горниот лев агол, 216 00:09:27,750 --> 00:09:32,080 отворена заграда извичник doc тип HTML, ова изгледа како ознака, 217 00:09:32,080 --> 00:09:35,560 но тоа е глупаво агол случај кога тоа е само таму, копирани и атипичен 218 00:09:35,560 --> 00:09:38,460 за да се покаже на пребарувачи ова е HTML верзија 5. 219 00:09:38,460 --> 00:09:41,540 Светот постојано се менува она што првата линија на код во една страница треба да биде. 220 00:09:41,540 --> 00:09:43,820 Ова само значи верзија 5. 221 00:09:43,820 --> 00:09:45,950 Значи тоа не е доста изгледа како и другите. 222 00:09:45,950 --> 00:09:48,120 >> Сите во право, па со тоа рече, сега ќе го цениме 223 00:09:48,120 --> 00:09:50,767 оваа прилично овој глупав тетоважа некој доби. 224 00:09:50,767 --> 00:09:51,990 >> [Смеа] 225 00:09:51,990 --> 00:09:54,210 >> Дејвид Ј MALAN: Сите во право, и сега ајде всушност нурне 226 00:09:54,210 --> 00:09:55,710 во прави нешто со ова. 227 00:09:55,710 --> 00:09:58,610 Ќе потсетиме дека последен пат Јас го отвори CS50 апарати 228 00:09:58,610 --> 00:10:01,650 и јас не нешто како едноставно како отворање gedit. 229 00:10:01,650 --> 00:10:05,190 И јас зачувани во датотеката дури и на мојата desktop-- никаде special-- 230 00:10:05,190 --> 00:10:05,870 како hello.html. 231 00:10:05,870 --> 00:10:07,100 232 00:10:07,100 --> 00:10:10,984 >> Значи, дозволете ми да го направи тоа again-- hello.html Enter. 233 00:10:10,984 --> 00:10:13,900 И сега во оваа датотека, јас ќе одам да оди напред и да се реплицираат она што ние само 234 00:10:13,900 --> 00:10:18,850 saw-- doc тип HTML Потоа јас ќе одам да направи отворен заградата HTML затворени заграда. 235 00:10:18,850 --> 00:10:21,890 А потоа јас ќе одам да се превентивно отворање или затворање на тагот. 236 00:10:21,890 --> 00:10:22,390 Зошто? 237 00:10:22,390 --> 00:10:23,598 Само така не го заборавам подоцна. 238 00:10:23,598 --> 00:10:26,850 Тоа е само добра пракса, како и отворање и затворање на големи загради сите одеднаш. 239 00:10:26,850 --> 00:10:28,900 >> А потоа она што се случило следно? 240 00:10:28,900 --> 00:10:30,582 Можете да мислам на тетоважа. 241 00:10:30,582 --> 00:10:31,450 >> ПУБЛИКАТА: На главата. 242 00:10:31,450 --> 00:10:32,500 >> Дејвид Ј MALAN: На главата. 243 00:10:32,500 --> 00:10:36,020 А потоа во тука, јас имаше насловот, си мислам. 244 00:10:36,020 --> 00:10:39,886 А насловот беше произволно, Здраво, свет во близина на титулата. 245 00:10:39,886 --> 00:10:42,760 А потоа надолу тука, телото, на course-- тогаш ние затвори телото таг. 246 00:10:42,760 --> 00:10:45,660 А потоа само малку redundantly, Имав истото овде долу. 247 00:10:45,660 --> 00:10:47,150 >> Така тврдам дека ова е веб-страница. 248 00:10:47,150 --> 00:10:49,050 Ова е нешто што сега може да живее на интернет, 249 00:10:49,050 --> 00:10:51,925 иако се разбира, тоа е буквално кои живеат на мојот десктоп во моментов. 250 00:10:51,925 --> 00:10:55,837 Но, навистина, ако јас се минимизираат gedit, Ќе видите на мојот десктоп неговата икона. 251 00:10:55,837 --> 00:10:58,420 Иако ова е апаратот, можете да го направите тоа на Mac OS 252 00:10:58,420 --> 00:11:01,580 без TextEdit или Прозорци со Notepad дури. 253 00:11:01,580 --> 00:11:06,115 >> И ако одам напред и двоен клик дека дури и select-- добро, ајде да 254 00:11:06,115 --> 00:11:07,990 Не избирајте дека поради Хром не е отворање. 255 00:11:07,990 --> 00:11:09,281 Ајде да одиме напред и да се отвори Хром. 256 00:11:09,281 --> 00:11:10,160 257 00:11:10,160 --> 00:11:14,040 А потоа направи команда-О за отворен И да стигнете до мојот десктоп 258 00:11:14,040 --> 00:11:15,320 и да се отвори таа датотека. 259 00:11:15,320 --> 00:11:20,120 Тоа е како интернет пребарувач толкува HTML, врвот до дното, лево кон десно. 260 00:11:20,120 --> 00:11:21,314 Еј, прелистувачот еве на HTML. 261 00:11:21,314 --> 00:11:21,980 Тука е главата. 262 00:11:21,980 --> 00:11:23,250 Еве титулата. 263 00:11:23,250 --> 00:11:24,090 Еве телото. 264 00:11:24,090 --> 00:11:26,620 И навистина, ова е како тоа го прави оваа веб страница. 265 00:11:26,620 --> 00:11:27,800 >> Но забележите на URL-то. 266 00:11:27,800 --> 00:11:32,430 Никој од вас не може да се повлече до овој специфичен страница на вашиот лап-топ компјутери, токму сега, 267 00:11:32,430 --> 00:11:34,910 дури и во внатрешноста на вашиот апаратот преку дека URL-то, 268 00:11:34,910 --> 00:11:40,130 затоа што датотеката: // покажува тоа е всушност на мојот датотечниот систем, мојот хард диск, 269 00:11:40,130 --> 00:11:40,990 а не твое. 270 00:11:40,990 --> 00:11:42,440 Значи ова не е сето тоа корисно. 271 00:11:42,440 --> 00:11:44,940 >> Ајде сега се движи кон користење на вистинските веб серверот. 272 00:11:44,940 --> 00:11:48,309 И излегува на CS50 апарати е повеќе од само средина каде 273 00:11:48,309 --> 00:11:51,100 можете да го напишете C код и ги собира и тоа работи како што сте правеле. 274 00:11:51,100 --> 00:11:55,500 Таа, исто така е конфигуриран од страна на вработените да претставуваат типичен веб- 275 00:11:55,500 --> 00:11:58,290 сервер кој е на интернет, која може да се плати за 276 00:11:58,290 --> 00:12:00,210 или оној кој е во т.н. облак. 277 00:12:00,210 --> 00:12:02,600 >> И тоа е водење стандард слободен софтвер со отворен код 278 00:12:02,600 --> 00:12:06,160 софтвер, на пример, нешто наречен Апачи, што е можеби 279 00:12:06,160 --> 00:12:08,700 уште од најпопуларните веб- сервер софтвер во светот 280 00:12:08,700 --> 00:12:11,030 дека илјадници веб-сајтови користат денес. 281 00:12:11,030 --> 00:12:13,420 И тоа, исто така, дури има и софтвер како MySQL, 282 00:12:13,420 --> 00:12:16,240 кој е база на податоци на серверот дека ние на крајот ќе дојдеме до, 283 00:12:16,240 --> 00:12:18,330 што е само да се каже Јас може да започне лекување 284 00:12:18,330 --> 00:12:22,040 мојот апарат како полноправно сервер дека јас не плаќам за на друго место. 285 00:12:22,040 --> 00:12:25,980 Тоа само живее на моето лаптоп за развој и погодности цели. 286 00:12:25,980 --> 00:12:27,870 >> Па ајде да одиме напред и ги искористат предностите на ова. 287 00:12:27,870 --> 00:12:30,120 Одам да се оди напред и да отвори терминален прозорец. 288 00:12:30,120 --> 00:12:33,030 А јас ќе одам да се оди напред и да move-- всушност, прво јас сум 289 00:12:33,030 --> 00:12:34,860 ќе стигнете до мојот десктоп. 290 00:12:34,860 --> 00:12:36,400 Ако го направам ls, има hello.html. 291 00:12:36,400 --> 00:12:37,022 292 00:12:37,022 --> 00:12:38,730 И јас одам да се оди напред и да почне со користење на 293 00:12:38,730 --> 00:12:40,800 нов директориум ние сме не се користи пред денес. 294 00:12:40,800 --> 00:12:46,840 >> hello.html-- Одам да се движат да ../vhosts за виртуелни hosts-- 295 00:12:46,840 --> 00:12:50,940 повеќе за тоа во future-- и потоа во директориумот наречен локалниот компјутер, 296 00:12:50,940 --> 00:12:54,420 што е прекар даден на речиси било кој компјутер, без разлика дали тоа е Mac, PC, 297 00:12:54,420 --> 00:12:57,560 или Linux компјутер, а потоа посебно во директориумот дека ние, 298 00:12:57,560 --> 00:13:01,260 вработените веќе создадена за вас кога сте ја превзеле на апаратот наречен 299 00:13:01,260 --> 00:13:01,760 јавноста. 300 00:13:01,760 --> 00:13:04,551 И како што сугерира името, нешто Го ставам во оваа папка, во теорија, 301 00:13:04,551 --> 00:13:07,790 се случува да сега биде јавноста, барем за луѓето 302 00:13:07,790 --> 00:13:10,030 кои имаат директно конекција на мојот компјутер. 303 00:13:10,030 --> 00:13:13,160 >> Па сега дозволете ми да оди напред и да направи ЦД на истата директориум 304 00:13:13,160 --> 00:13:15,490 па јас може да се види она што е случува и тип LS. 305 00:13:15,490 --> 00:13:17,630 И навистина, тоа е Единственото нешто таму. 306 00:13:17,630 --> 00:13:23,250 Тврдам дека сега, бидејќи јас се стави ова поднесе hello.html внатрешноста на директориум 307 00:13:23,250 --> 00:13:26,940 наречен јавноста внатрешноста на директориум наречен локалниот компјутер внатрешноста на директориум 308 00:13:26,940 --> 00:13:29,810 наречен vhosts, што благодарение на CS50 персонал 309 00:13:29,810 --> 00:13:34,390 е пре-конфигуриран да биде коренот на вашиот веб сервер, 310 00:13:34,390 --> 00:13:36,900 Сега можам да се надевам го направите тоа. 311 00:13:36,900 --> 00:13:38,390 >> Одам да се отвори нов таб. 312 00:13:38,390 --> 00:13:40,090 И јас одам да се оди да не поднесуваат: //. 313 00:13:40,090 --> 00:13:44,520 Одам да се користи вистински HTTP / локалниот компјутер, кој 314 00:13:44,520 --> 00:13:47,470 повторно, е прекар за мојата сопствен сервер. 315 00:13:47,470 --> 00:13:51,085 А потоа јас ќе одам да се оди на она што името на датотеката, само за да биде јасно? 316 00:13:51,085 --> 00:13:52,680 317 00:13:52,680 --> 00:13:54,320 Каде е оваа приказна веројатно нема? 318 00:13:54,320 --> 00:13:56,066 319 00:13:56,066 --> 00:13:56,565 hello.html. 320 00:13:56,565 --> 00:13:58,350 321 00:13:58,350 --> 00:14:04,270 >> Значи со други зборови, сакам да сега ова е мојот компјутер, мојата апаратот, 322 00:14:04,270 --> 00:14:05,660 како да е вистински сервер. 323 00:14:05,660 --> 00:14:07,490 Нејзиниот прекар е локалниот компјутер. 324 00:14:07,490 --> 00:14:10,210 Но мислам дека на локалниот компјутер како што е како Facebook.com google.com, сеедно. 325 00:14:10,210 --> 00:14:11,600 Тоа е само мојата локална име. 326 00:14:11,600 --> 00:14:14,810 А потоа конечниот сакам е во коренот на хард дискот, така да се каже, 327 00:14:14,810 --> 00:14:17,729 или коренот на веб серверот, ergo напред коса црта, а потоа 328 00:14:17,729 --> 00:14:18,770 на hello.html името на датотеката. 329 00:14:18,770 --> 00:14:19,880 330 00:14:19,880 --> 00:14:21,930 >> Дозволете ми да одзумирате и притиснете ентер. 331 00:14:21,930 --> 00:14:24,266 И навистина, е сега мојот веб-страница. 332 00:14:24,266 --> 00:14:25,390 Така, тоа е малку поинаква. 333 00:14:25,390 --> 00:14:26,880 И тоа е само како underwhelming. 334 00:14:26,880 --> 00:14:27,904 Ова е старата верзија. 335 00:14:27,904 --> 00:14:29,070 Дозволете ми да се намали на фонтот назад. 336 00:14:29,070 --> 00:14:29,745 Ова е стар. 337 00:14:29,745 --> 00:14:30,890 Ова е нова. 338 00:14:30,890 --> 00:14:35,430 Но, она што е фундаментално се случува сега е дека HTTP се користи. 339 00:14:35,430 --> 00:14:39,344 >> Да се ​​направи ова малку повеќе јасно или, ако сакате, малку посложена. 340 00:14:39,344 --> 00:14:41,760 Дозволете ми да одат во долниот десен агол на мојот апарат. 341 00:14:41,760 --> 00:14:44,000 И ќе забележите дека сето ова време, има е број. 342 00:14:44,000 --> 00:14:47,330 Тоа е уникатната адреса на вашиот CS50 апаратот. 343 00:14:47,330 --> 00:14:50,800 Тоа е приватна адреса, Како што наведува од страна на 172,16, 344 00:14:50,800 --> 00:14:53,860 што само значи само физички да пристапите до оваа веб сервер. 345 00:14:53,860 --> 00:14:56,340 Сè што е огнен ѕид, и убаво заштитена од останатите 346 00:14:56,340 --> 00:14:58,130 на светот, бидејќи на овој адресирање. 347 00:14:58,130 --> 00:15:01,920 >> И сега се забележи иако ако одам во оваа адреса, а не во мојот апарат, 348 00:15:01,920 --> 00:15:04,340 но во Mac OS-- Одам да се вратам овде. 349 00:15:04,340 --> 00:15:05,930 Ова е мојот Mac сега. 350 00:15:05,930 --> 00:15:08,460 И сега ќе одам да се отвори оваа верзија на Хром тука. 351 00:15:08,460 --> 00:15:17,370 А јас ќе одам да одат на http: //172.16.25 / И заборавам на rest-- 133. 352 00:15:17,370 --> 00:15:25,210 >> Па ќе одам да го посетите од мојот Mac дека IP адресата /hello.html Enter. 353 00:15:25,210 --> 00:15:29,850 И сега гледам од мојот Mac дека мојот CS50 апарати, кој е 354 00:15:29,850 --> 00:15:32,600 IP адресата е дека број, навистина се однесуваме 355 00:15:32,600 --> 00:15:34,320 како веб сервер на интернет. 356 00:15:34,320 --> 00:15:36,944 Тоа не мора убав лесно да се се сетам на името како Facebook.com, 357 00:15:36,944 --> 00:15:40,370 но тоа е со користење на HTTP очигледно, иако Хром 358 00:15:40,370 --> 00:15:43,560 е вид на поедноставување на светот за нас, но не ни покажува за HTTP. 359 00:15:43,560 --> 00:15:46,210 Но, ова е навистина точно тоа. 360 00:15:46,210 --> 00:15:48,470 Chrome е само заштеда на некои тастатурата овие денови. 361 00:15:48,470 --> 00:15:50,530 И тоа е она што ние сега го видите. 362 00:15:50,530 --> 00:15:51,890 >> Значи тоа е сите фини и добри. 363 00:15:51,890 --> 00:15:53,740 Но, тоа е прилично underwhelming страница. 364 00:15:53,740 --> 00:15:56,230 Дозволете ми да одат во и направи нешто малку различни сега. 365 00:15:56,230 --> 00:15:57,910 Значи, дозволете ми да се врати на gedit. 366 00:15:57,910 --> 00:16:00,580 И наместо здраво, свет, ајде да се стави слика. 367 00:16:00,580 --> 00:16:05,880 И јас тврдеше дека од before-- да си одам во мојот localhost директориум јавноста. 368 00:16:05,880 --> 00:16:10,580 И дозволете ми да оди напред и да се копира целиот куп на датотеки од денес 369 00:16:10,580 --> 00:16:15,633 од мојот Dropbox папка во тука. 370 00:16:15,633 --> 00:16:19,470 371 00:16:19,470 --> 00:16:21,680 >> Сега, ако сум тип LS, погледнете на сите овие датотеки 372 00:16:21,680 --> 00:16:24,940 дека јас сум дистрибуиран од страна на веб-страница разбира однапред од денес, 373 00:16:24,940 --> 00:16:26,830 од кои една е уште hello.html. 374 00:16:26,830 --> 00:16:27,830 Па таму е дека еден. 375 00:16:27,830 --> 00:16:30,730 И се сеќавам овој глупав еден од минатата time-- cat.jpg. 376 00:16:30,730 --> 00:16:34,550 Значи, дозволете ми се обиде да го вградите cat.jpg внатрешноста на мојата веб-страница. 377 00:16:34,550 --> 00:16:37,690 >> Одам да се оди напред и не cat.jpg, спаси. 378 00:16:37,690 --> 00:16:38,950 Дозволете ми да се вратам на Хром. 379 00:16:38,950 --> 00:16:41,140 И дозволете ми да зумирате во фонт и сега ја превчитате. 380 00:16:41,140 --> 00:16:43,090 381 00:16:43,090 --> 00:16:45,030 Упс, каде да го ставам ова? 382 00:16:45,030 --> 00:16:48,210 383 00:16:48,210 --> 00:16:51,520 Standby-- јас се уште имаат стари верзија од мојот десктоп отворени. 384 00:16:51,520 --> 00:16:56,020 Значи, дозволете ми да одат во мојот vhost, мојата localhost, мојата јавноста и hello.html. 385 00:16:56,020 --> 00:16:57,320 386 00:16:57,320 --> 00:17:00,670 Па сега дозволете ми да оди напред и да велат cat.jpg внатрешноста на телото 387 00:17:00,670 --> 00:17:02,830 каде што сакате да биде прикажани и повторно. 388 00:17:02,830 --> 00:17:04,560 Се разбира, тоа не е точно. 389 00:17:04,560 --> 00:17:08,050 >> Па јас треба да се каже на прелистувачот малку повеќе намерно она што сакам тоа да се направи. 390 00:17:08,050 --> 00:17:10,210 Едноставно со пишување на името е очигледно не е доволен. 391 00:17:10,210 --> 00:17:15,134 Така се потсетиме дека има уште еден ознака, слика, img за кратко. 392 00:17:15,134 --> 00:17:17,550 Тоа е само затоа што луѓето не ми се допаѓа тип целосна зборови. 393 00:17:17,550 --> 00:17:19,050 И потоа можеме да направиме извор = "cat.jpg". 394 00:17:19,050 --> 00:17:21,470 395 00:17:21,470 --> 00:17:23,550 >> И сега јас ќе одам да направите едно нешто различно тука. 396 00:17:23,550 --> 00:17:25,390 Иако сите нашите тагови досега имаат 397 00:17:25,390 --> 00:17:28,086 имал овој поим на почетниот таг и крај ознака, 398 00:17:28,086 --> 00:17:30,210 која не навистина да се направи чувство за слика, нели? 399 00:17:30,210 --> 00:17:32,430 Слика е или постои или не постои. 400 00:17:32,430 --> 00:17:36,650 И така луѓето доаѓаат со поедноставен конвенција. 401 00:17:36,650 --> 00:17:40,310 Кога ќе имаат ознака што може да и започнете и завршите во исто time-- 402 00:17:40,310 --> 00:17:43,790 тоа може да биде празен, така да speak-- само стави напред коса црта во внатрешноста на етикетата 403 00:17:43,790 --> 00:17:44,710 на самиот крај. 404 00:17:44,710 --> 00:17:45,776 405 00:17:45,776 --> 00:17:47,150 Сега дозволете ми да се вратам на мојот интернет пребарувач. 406 00:17:47,150 --> 00:17:50,377 Хит Освежи ја ѓаволите, нешто не е во ред. 407 00:17:50,377 --> 00:17:52,460 Веројатно сте виделе ова повремено на интернет, 408 00:17:52,460 --> 00:17:53,600 дури и ако тоа не е е вашата вина. 409 00:17:53,600 --> 00:17:54,766 Тоа е грешка на веб-серверот. 410 00:17:54,766 --> 00:17:56,240 Што оди ова изгледа да се покаже? 411 00:17:56,240 --> 00:17:57,450 412 00:17:57,450 --> 00:17:58,009 Тоа е скршен. 413 00:17:58,009 --> 00:17:59,300 Тоа е каде што на сликата припаѓа. 414 00:17:59,300 --> 00:17:59,700 Да? 415 00:17:59,700 --> 00:18:01,560 >> ПУБЛИКАТА: Но, тоа не го прави тоа имаат пристап до сликата. 416 00:18:01,560 --> 00:18:03,070 >> Дејвид Ј MALAN: не имаат пристап до сликата. 417 00:18:03,070 --> 00:18:05,230 Тоа, или уште полошо, можеби тоа дури и не постои. 418 00:18:05,230 --> 00:18:06,729 Ајде да видиме ако не можеме да се дијагностицира тоа. 419 00:18:06,729 --> 00:18:09,390 Потсетиме од последен пат дека ако во Хром, во апаратот, 420 00:18:09,390 --> 00:18:11,870 или дури и на вашиот Mac или PC, одите во менито програмери 421 00:18:11,870 --> 00:18:14,650 и да одат во развојни алатки опција, која, најверојатно, сте 422 00:18:14,650 --> 00:18:16,850 не се користат толку, или било кога. 423 00:18:16,850 --> 00:18:20,780 И ако одам да се поврзат и вчитување на страната, 424 00:18:20,780 --> 00:18:24,110 ајде да всушност се погледне на HTTP барања кои се направени. 425 00:18:24,110 --> 00:18:28,400 >> Тоа изгледа како hello.html е навистина во ред, па оттука и 200. 426 00:18:28,400 --> 00:18:30,630 Но cat.jpg е 403. 427 00:18:30,630 --> 00:18:31,650 Па тоа не е 404. 428 00:18:31,650 --> 00:18:33,490 Датотека веројатно постои. 429 00:18:33,490 --> 00:18:35,250 403 значи забрането. 430 00:18:35,250 --> 00:18:37,790 Значи ова е малку збунувачки. 431 00:18:37,790 --> 00:18:42,340 Одам да се врати на мојот терминален прозорец. 432 00:18:42,340 --> 00:18:43,700 Дозволете ми да зумирате до тука. 433 00:18:43,700 --> 00:18:44,750 И дозволете ми да се направи една ls. 434 00:18:44,750 --> 00:18:46,430 Има истите тие датотеки. 435 00:18:46,430 --> 00:18:49,410 >> Сега дозволете ми да се направи ls-l, што сте веројатно 436 00:18:49,410 --> 00:18:53,350 користат пред да се погледне во датотеката големини можеби или маркерите за времето. 437 00:18:53,350 --> 00:18:55,590 И можеме да видиме еден куп на огромна информации. 438 00:18:55,590 --> 00:18:57,040 Но забележите неколку детали. 439 00:18:57,040 --> 00:19:01,660 Еве hello.html во оваа ред тука и тука е cat.jpg. 440 00:19:01,660 --> 00:19:02,934 441 00:19:02,934 --> 00:19:05,850 И тоа е само апаратот се корисник пријателски, преку истакнување на JPEG е 442 00:19:05,850 --> 00:19:07,380 во пурпурно вака. 443 00:19:07,380 --> 00:19:11,470 Но, што друго е различна покрај големината на датотеката и името на датотеката? 444 00:19:11,470 --> 00:19:13,438 445 00:19:13,438 --> 00:19:14,754 >> ПУБЛИКАТА: [нечујни]. 446 00:19:14,754 --> 00:19:16,920 Дејвид Ј MALAN: Да, има уште два Р овде. 447 00:19:16,920 --> 00:19:20,170 Информации што hello.html има случува. 448 00:19:20,170 --> 00:19:24,050 Значи излегува дека името на овој директориум јавноста е важно. 449 00:19:24,050 --> 00:19:26,400 Ништо во овој директориум е замислена да биде јавна. 450 00:19:26,400 --> 00:19:28,790 Но тоа не е доволно само да се откажат од датотеки во таму. 451 00:19:28,790 --> 00:19:31,480 Исто така ќе треба да се промени начинот на датотеки, 452 00:19:31,480 --> 00:19:35,180 промена на дозволи за на датотеката за проактивно не 453 00:19:35,180 --> 00:19:37,650 биде стандардно поставување, а тоа е дека само јас може да се прочита 454 00:19:37,650 --> 00:19:39,220 и тоа пишувам, да биде сопственик. 455 00:19:39,220 --> 00:19:43,540 Сакам целиот свет на сите да да биде во можност да го прочитате мојот датотека, така да се каже. 456 00:19:43,540 --> 00:19:44,950 Читаат само значи ја видите. 457 00:19:44,950 --> 00:19:49,780 >> И навистина, како што ќе видите во проблемот постави седум, тоа е она што значи овие Р. 458 00:19:49,780 --> 00:19:53,160 Средната овие два Р споделите со сите друго место во светот, исто така, го прочита, 459 00:19:53,160 --> 00:19:55,300 особено сега кога тоа е во овој директориум. 460 00:19:55,300 --> 00:19:59,620 Значи наједноставниот начин да се поправи ова е да се одат на мојот брза и не подржуваат за промена 461 00:19:59,620 --> 00:20:05,580 на владата, а потоа направи + R, целосно, сите, сите, плус r за читање, 462 00:20:05,580 --> 00:20:07,944 а потоа cat.jpg Enter. 463 00:20:07,944 --> 00:20:10,360 Ништо не чини да се случи, што обично значи добра работа. 464 00:20:10,360 --> 00:20:13,850 Така ls-l again-- сега ајде да погледнеме cat.jpg. 465 00:20:13,850 --> 00:20:15,750 И оваа дозвола чини дека се променети. 466 00:20:15,750 --> 00:20:18,670 Како настрана, ако се направи грешка и вас, на пример, 467 00:20:18,670 --> 00:20:23,210 само направи your-- Не know-- есеј јавно достапни преку незгода, 468 00:20:23,210 --> 00:20:25,480 можете да го направите спротивното, chmod а-р. 469 00:20:25,480 --> 00:20:25,909 470 00:20:25,909 --> 00:20:28,200 Иако, искрено, тоа не треба да биде во јавниот именик 471 00:20:28,200 --> 00:20:29,760 во секој случај ако тоа е загриженост. 472 00:20:29,760 --> 00:20:32,475 >> Па сега ајде да се вратиме на мојот интернет пребарувач и повторно. 473 00:20:32,475 --> 00:20:32,904 474 00:20:32,904 --> 00:20:34,820 И јас одам да кликнете малку Ghostbusters 475 00:20:34,820 --> 00:20:38,030 симбол да го исчистите дека дел од екран, така што можеме да видиме нови барања. 476 00:20:38,030 --> 00:20:40,630 И навистина, тука е Намќор Кат од порано. 477 00:20:40,630 --> 00:20:43,010 Но, уште поважно, технички, постои 478 00:20:43,010 --> 00:20:45,565 број 200, која значи добивме во ред. 479 00:20:45,565 --> 00:20:47,190 Сите во право, па тоа е се во ред и е добро. 480 00:20:47,190 --> 00:20:48,940 Но, ние не сме прави најдоброто од веб-сајтови, 481 00:20:48,940 --> 00:20:51,967 ниту сме случува да се обидат премногу тешко да се направи fanciest на веб-сајтови денес. 482 00:20:51,967 --> 00:20:54,550 Но, ајде барем направи нешто супер запознаени пред растреперува 483 00:20:54,550 --> 00:20:56,030 исклучување на неколку други етикети. 484 00:20:56,030 --> 00:20:58,470 Па претпоставувам дека не само сакаат мачка тука. 485 00:20:58,470 --> 00:21:02,530 Претпоставувам дека всушност сакаат ова мачка да се поврзе со нешто. 486 00:21:02,530 --> 00:21:07,210 >> Јас би можеле, на пример, направи нешто како ова. 487 00:21:07,210 --> 00:21:08,580 488 00:21:08,580 --> 00:21:12,890 еден за сидро href за хипер референца equals-- 489 00:21:12,890 --> 00:21:17,440 и ајде да се направи нешто како www.google.com блиску 490 00:21:17,440 --> 00:21:19,540 Цитат блиску заграда. 491 00:21:19,540 --> 00:21:22,000 И сега барате мачки. 492 00:21:22,000 --> 00:21:23,520 Затвори сидро таг. 493 00:21:23,520 --> 00:21:26,760 Значи ова е само еден вид на фундаментално нови детали. 494 00:21:26,760 --> 00:21:28,190 Таг се разбира, е поинаква. 495 00:21:28,190 --> 00:21:31,770 Тоа е името на за сидро href или хипер референца. 496 00:21:31,770 --> 00:21:35,269 >> Но, уште поважно, има ова синтаксичка функција овде. 497 00:21:35,269 --> 00:21:37,810 Тоа е она што ние ќе почне повикувајќи не таг, но атрибут. 498 00:21:37,810 --> 00:21:40,830 И атрибут е нешто што модифицира однесувањето на таг. 499 00:21:40,830 --> 00:21:45,400 И овој атрибут, href средства, промени однесувањето на ова сидро 500 00:21:45,400 --> 00:21:48,430 така што кога е кликнато, тоа оди на овој URL тука. 501 00:21:48,430 --> 00:21:50,330 И, се разбира, дека URL е Google. 502 00:21:50,330 --> 00:21:53,951 >> Во меѓувреме, што е ова текст тука ќе биде? 503 00:21:53,951 --> 00:21:55,950 Па, тоа се случува да биде она што човечкото всушност 504 00:21:55,950 --> 00:21:58,470 гледа како на подвлечениот линк, толку едноставно како што. 505 00:21:58,470 --> 00:21:59,220 Па ајде да се обидеме ова. 506 00:21:59,220 --> 00:21:59,980 Дозволете ми да го спаси. 507 00:21:59,980 --> 00:22:01,650 Јас сум сеуште во hello.html. 508 00:22:01,650 --> 00:22:05,360 Но во верзиите на интернет, ќе видите вистинските имиња на датотеки што претходно подготвени. 509 00:22:05,360 --> 00:22:06,805 Дозволете ми да оди напред и да ја превчитате. 510 00:22:06,805 --> 00:22:08,680 И сега тоа е многу underwhelming страница уште. 511 00:22:08,680 --> 00:22:10,910 Но, ако јас лебдат над there-- и тоа е малку мала, 512 00:22:10,910 --> 00:22:13,576 but-- можете да видите во долниот лев агол на вашиот екран, 513 00:22:13,576 --> 00:22:15,242 тоа е навистина се случува на google.com. 514 00:22:15,242 --> 00:22:19,280 И ако јас кликнете на тоа, тоа ќе размахване мене начин на вистинската Google. 515 00:22:19,280 --> 00:22:22,610 >> Но забележите можност за тука експлоатација, како настрана. 516 00:22:22,610 --> 00:22:25,150 А ние ќе се вратам на други прашањата на безбедноста пред долго. 517 00:22:25,150 --> 00:22:29,290 Затоа што таму е ова дихотомија помеѓу каде и да одите и што ќе кажеш, 518 00:22:29,290 --> 00:22:34,722 можете да направите нешто како this-- http://www.google.com. 519 00:22:34,722 --> 00:22:37,134 Добро, а сега ако јас ја превчитате по спасување таа страница, 520 00:22:37,134 --> 00:22:38,800 тоа изгледа како јас ќе одам да отидете на Google. 521 00:22:38,800 --> 00:22:40,966 Но, нема причина јас мора да одат на Google, нели? 522 00:22:40,966 --> 00:22:47,460 Јас всушност би можеле да одат на нешто како badguy.com, вчитување на страница овде. 523 00:22:47,460 --> 00:22:49,750 И информации, се уште изгледа како Google. 524 00:22:49,750 --> 00:22:52,020 И само ако јас сум остар доволно за да лебдиш овде 525 00:22:52,020 --> 00:22:54,770 гледам тоа дури и ќе оди на друга локација. 526 00:22:54,770 --> 00:22:57,400 >> Значи, ако некогаш сте добиле е-маил, особено 527 00:22:57,400 --> 00:22:59,610 еден од Paypal, или навидум од Paypal 528 00:22:59,610 --> 00:23:01,830 со барање да се најавите во вашиот профил, овој 529 00:23:01,830 --> 00:23:06,380 Затоа никогаш не треба да некогаш кликнете на линкот во пораки, 530 00:23:06,380 --> 00:23:07,930 искрено, сите линкови во пораки. 531 00:23:07,930 --> 00:23:10,380 Ако знаете дека имаат вистински пари во PayPal или банка 532 00:23:10,380 --> 00:23:14,250 на Америка или Фиделити или било која веб-сајт, рачно да го внесете. 533 00:23:14,250 --> 00:23:17,530 Бидејќи гледам колку е лесно е да се трик некој во презентирање на она што 534 00:23:17,530 --> 00:23:18,526 изгледа како линк. 535 00:23:18,526 --> 00:23:20,400 Но, тоа всушност би можеле да одат апсолутно насекаде. 536 00:23:20,400 --> 00:23:23,301 >> И има многу поголема заканите од ова. 537 00:23:23,301 --> 00:23:25,300 Всушност, ова е малку на тангента сега, но еден 538 00:23:25,300 --> 00:23:28,430 од најдобрите што некогаш сум го видел која оттогаш е затворена, 539 00:23:28,430 --> 00:23:34,060 е некој доведе луѓето to-- така што ова може да се каже, 540 00:23:34,060 --> 00:23:37,660 кликнете овде за да влезете во вашиот сметка, сметка во банка. 541 00:23:37,660 --> 00:23:40,985 И тоа беше банка на Западот. 542 00:23:40,985 --> 00:23:43,030 543 00:23:43,030 --> 00:23:44,250 >> Па некој купи ова. 544 00:23:44,250 --> 00:23:47,090 И тоа е малку полесно да се види тоа во моно распоредени фонт zoomed 545 00:23:47,090 --> 00:23:49,190 во на 30-метарски проектор. 546 00:23:49,190 --> 00:23:51,720 Но, кога тоа е мал фонт во е-пошта што сте примање, 547 00:23:51,720 --> 00:23:54,690 ова изгледа како bankofthewest.com, не bankofthevvest.com, 548 00:23:54,690 --> 00:23:58,230 што некој платил 10 $ да се купи. 549 00:23:58,230 --> 00:24:00,840 И тогаш тоа ги доведе до еквивалент на некои лоши веб-сајт. 550 00:24:00,840 --> 00:24:05,540 >> И ќе видите too-- всушност можеме да направиме this-- ако одам до вистинските веб-сајт, 551 00:24:05,540 --> 00:24:10,335 bankofthewest.com, повторно, потсетиме од минатиот пат 552 00:24:10,335 --> 00:24:13,210 дека ако ова е нивната веб-страница и сте љубопитни за тоа како тоа функционира, 553 00:24:13,210 --> 00:24:15,610 сигурно може да оди на Chrome е инвеститорот алатки. 554 00:24:15,610 --> 00:24:18,890 И можете да ги видиш сите од HTML убаво форматирана таму. 555 00:24:18,890 --> 00:24:20,890 >> Но, повеќе до точка, можете cam-- ајде да се затвори 556 00:24:20,890 --> 00:24:24,760 this-- можете да одат на Прикажи Инвеститорот Види Извор. 557 00:24:24,760 --> 00:24:25,770 558 00:24:25,770 --> 00:24:28,350 Зошто не можам само копија сето тоа И тогаш 559 00:24:28,350 --> 00:24:31,630 може да оди во моето мало gedit прозорец тука и да создавам своја веб-страница. 560 00:24:31,630 --> 00:24:33,210 Зачувај ова во hello.html. 561 00:24:33,210 --> 00:24:36,770 И веројатно ова ќе се скрши, бидејќи тоа не е толку едноставно обично. 562 00:24:36,770 --> 00:24:41,590 Но, сега, ако јас ја превчитате мојата страница на моето CS50 апарати и погоди Вчитај ја страната повторно, 563 00:24:41,590 --> 00:24:42,990 Добро, некои работи се скрши. 564 00:24:42,990 --> 00:24:45,750 Но, јас сум прилично блиску до тоа моето банкарски веб-сајт, нели? 565 00:24:45,750 --> 00:24:46,570 Сето ова HTML-- 566 00:24:46,570 --> 00:24:47,370 >> [Смеа] 567 00:24:47,370 --> 00:24:49,210 >> Дејвид Ј MALAN: --I не actually-- и вие 568 00:24:49,210 --> 00:24:52,210 знаат дека има некој таму кој всушност ќе кликнете на овие линкови премногу. 569 00:24:52,210 --> 00:24:54,864 Па јасно, некои работи се скрши. 570 00:24:54,864 --> 00:24:56,780 Но, тоа се случува да ја води ни во дискусија, 571 00:24:56,780 --> 00:25:00,810 непотребно токму сега, за тоа што CSS, Cascading Style Sheets, се, 572 00:25:00,810 --> 00:25:03,410 и како всушност преземете други HTML датотеки 573 00:25:03,410 --> 00:25:06,140 и JPEG датотеки GIF датотеки што на веб-сајтот може да се користат. 574 00:25:06,140 --> 00:25:07,960 Но, сето тоа е остварливо. 575 00:25:07,960 --> 00:25:11,110 Но, тоа навистина се сведува на овие многу едноставна хеуристичко. 576 00:25:11,110 --> 00:25:14,450 >> Па сега ајде да обезмаслен преку неколку други примери на HTML 577 00:25:14,450 --> 00:25:16,680 само за да ви даде чувство на што друго можете да направите. 578 00:25:16,680 --> 00:25:18,670 На пример, ова е list.html. 579 00:25:18,670 --> 00:25:23,240 Претпоставувам дека сака да се направи веб страница со листа на куќи во четири. 580 00:25:23,240 --> 00:25:28,960 Јас би можеле да го користат ул таг за неподреден листа, а потоа на елемент во листата дете 581 00:25:28,960 --> 00:25:33,760 а потоа iterate over-- или листа, rather-- куќите во прашање. 582 00:25:33,760 --> 00:25:36,080 >> И ако го отворам овој горе, ајде да го направите тоа. 583 00:25:36,080 --> 00:25:40,670 Ајде да одиме да не hello.html, но да list.html. 584 00:25:40,670 --> 00:25:42,160 По ѓаволите. 585 00:25:42,160 --> 00:25:43,000 Како можам да го надминете овој? 586 00:25:43,000 --> 00:25:45,679 587 00:25:45,679 --> 00:25:47,220 Тоа е истото прашање како и досега, нели? 588 00:25:47,220 --> 00:25:52,510 Значи, дозволете ми направи chmod-- oops-- chmod a + r на list.html. 589 00:25:52,510 --> 00:25:54,610 590 00:25:54,610 --> 00:25:59,610 И сега, ако јас се вратиме на мојот интернет пребарувач и кликнете Освежи ја, не е тоа. 591 00:25:59,610 --> 00:26:02,360 Значи, ако некогаш сте сакале да се направи нумерирани листа, можете да го направите тоа. 592 00:26:02,360 --> 00:26:06,210 Ако сакате да се биде супер фенси и да се направи подредена листа, не неподреден список, 593 00:26:06,210 --> 00:26:10,170 промени оние на ол, вчитување на страница, и сега прелистувач ќе го бројот за вас. 594 00:26:10,170 --> 00:26:11,241 >> Што друго да правиме? 595 00:26:11,241 --> 00:26:13,990 Па, неколку others-- ако имаш долги ставовите на text-- 596 00:26:13,990 --> 00:26:15,698 на пример, некои Латински текст како this-- 597 00:26:15,698 --> 00:26:20,730 и што сакате во одделни ставови, отворен стр, во близина стр за став таг. 598 00:26:20,730 --> 00:26:22,010 И го направи тоа повторно и повторно. 599 00:26:22,010 --> 00:26:26,600 И ако јас сега се отвори оваа датотека, paragraphs.html, добро, ова 600 00:26:26,600 --> 00:26:27,570 е добивање досадно. 601 00:26:27,570 --> 00:26:34,320 Па сега ајде да се вратиме на мојот брза, chmod a + r r ѕвезда .html-- 602 00:26:34,320 --> 00:26:36,099 убаво малку вајлд карта, така да зборува. 603 00:26:36,099 --> 00:26:37,890 Тоа треба да се утврдат сите овие проблеми за мене. 604 00:26:37,890 --> 00:26:38,990 Ајде да ја превчитате. 605 00:26:38,990 --> 00:26:40,500 Има три параграфи. 606 00:26:40,500 --> 00:26:42,930 >> И сега ајде да одиме напред и се отвори еден друг. 607 00:26:42,930 --> 00:26:44,310 Како за на маса? 608 00:26:44,310 --> 00:26:46,440 Ќе забележите маса изглед малку посложена. 609 00:26:46,440 --> 00:26:49,110 Но, тоа е исто idea-- отворен таг, отворен таг, 610 00:26:49,110 --> 00:26:51,360 отворен, отворен, отворени, блиски таг, отворен таг. 611 00:26:51,360 --> 00:26:54,410 И овие се случи да се кандидира за маса, чија граница е очигледно 612 00:26:54,410 --> 00:26:58,500 ќе биде со дебелина 1-- што дека means-- табелата, маса 613 00:26:58,500 --> 00:27:00,320 податоци, што значи клетка. 614 00:27:00,320 --> 00:27:03,840 И ако се вратиме на мојот интернет пребарувач тука и да одат во table.html, 615 00:27:03,840 --> 00:27:05,840 може да се види нешто вака, одбивни. 616 00:27:05,840 --> 00:27:07,840 Но, ние ќе дојдеме до точка каде што можеме, всушност, 617 00:27:07,840 --> 00:27:09,260 се направат работите поубава од тоа. 618 00:27:09,260 --> 00:27:10,530 >> Значи, дозволете ми пропише за сега. 619 00:27:10,530 --> 00:27:11,870 Има гроздовете на повеќе тагови. 620 00:27:11,870 --> 00:27:15,225 И HTML е прекрасно да ги собереш затоа што, искрено, сите што треба да направите 621 00:27:15,225 --> 00:27:17,600 е се погледне во постоечките веб страници со кои сте запознаени. 622 00:27:17,600 --> 00:27:20,340 И сте како, ох, тоа е како тие го направија овој естетски. 623 00:27:20,340 --> 00:27:23,159 >> Или може да се погледне до било кој онлајн ресурс за тоа како HTML работи, 624 00:27:23,159 --> 00:27:25,700 и ќе видите дека има целиот речник на други ознаки. 625 00:27:25,700 --> 00:27:30,110 Но, со едноставна ментална модел сам дека речиси секој таг ќе ја отворите 626 00:27:30,110 --> 00:27:33,620 мора да биде затворена, тој навистина е доволно да се себеси учат 627 00:27:33,620 --> 00:27:36,950 HTML откако се разбере овие основни идеи на картичките 628 00:27:36,950 --> 00:27:40,520 и атрибути и добро formedness дека ние сме зборуваше за, 629 00:27:40,520 --> 00:27:44,697 затворање нешто што ние може да се отвори така што ние не се збуни пребарувач. 630 00:27:44,697 --> 00:27:46,780 Значи, да се земе тоа да повеќе интересно ниво 631 00:27:46,780 --> 00:27:48,100 со одење на вистинскиот. 632 00:27:48,100 --> 00:27:51,095 И ајде да одиме на мојот Mac тука, на google.com. 633 00:27:51,095 --> 00:27:52,280 634 00:27:52,280 --> 00:27:54,020 И сега notice-- ајде да го направите тоа. 635 00:27:54,020 --> 00:27:57,280 Јас сум гонг да одат на Подесувања, Барај Settings. 636 00:27:57,280 --> 00:28:01,070 Сакам да го исклучите оваа досадни инстант Резултатите нешто каде што веднаш 637 00:28:01,070 --> 00:28:02,450 почнува да одговори на вашиот пишување. 638 00:28:02,450 --> 00:28:05,300 Ајде да го направите тоа постара училиште, па ние, всушност, да видиме што се случува. 639 00:28:05,300 --> 00:28:08,260 >> Па ќе одам да го спаси мојот Гугл поставувања тука. 640 00:28:08,260 --> 00:28:11,160 И сега notice-- Одам да барате нешто како мачки. 641 00:28:11,160 --> 00:28:14,500 И тоа е уште прави авто комплетна тука, но врз основа на работи 642 00:28:14,500 --> 00:28:15,970 луѓе ги внеле во минатото. 643 00:28:15,970 --> 00:28:17,490 Но, забележи она што се случува да се случи. 644 00:28:17,490 --> 00:28:20,272 >> Во URL-то во моментов е ова, само google.com. 645 00:28:20,272 --> 00:28:22,650 И технички, тоа е коса црта. 646 00:28:22,650 --> 00:28:25,910 Google е само заштеда на карактер и не ни што покажува. 647 00:28:25,910 --> 00:28:30,400 Тие се ни покажува https, само да биде супер смирувачко дека ние сме 648 00:28:30,400 --> 00:28:32,850 на безбедна или шифрирана страница. 649 00:28:32,850 --> 00:28:35,690 >> Значи, дозволете ми да оди напред и да пребарувате за мачки. 650 00:28:35,690 --> 00:28:37,670 Сега тоа доби навистина огромно брзо. 651 00:28:37,670 --> 00:28:39,470 Погледне во должината на овој URL-то. 652 00:28:39,470 --> 00:28:43,070 Но излегува дека повеќето од овој материјал во URL-то е всушност прилично бескорисни. 653 00:28:43,070 --> 00:28:45,320 Одам да се започне бришење работите што не го разбираат. 654 00:28:45,320 --> 00:28:46,560 655 00:28:46,560 --> 00:28:47,360 Гледам мачки. 656 00:28:47,360 --> 00:28:48,470 Јас разбирам мачки. 657 00:28:48,470 --> 00:28:50,380 Не знам зошто мачките се повторно таму. 658 00:28:50,380 --> 00:28:52,620 Јас навистина не знам што е ова глупост е. 659 00:28:52,620 --> 00:28:56,030 Па јас сум само ќе да се задржи истакнување и бришење нешта 660 00:28:56,030 --> 00:28:59,905 дека јас не ги разбирам, дестилација на URL во токму тоа. 661 00:28:59,905 --> 00:29:00,920 662 00:29:00,920 --> 00:29:02,270 >> Сега дозволете ми да се влезе повторно. 663 00:29:02,270 --> 00:29:03,814 Тоа изгледа како Google се уште работи. 664 00:29:03,814 --> 00:29:06,980 Па поради некоја причина, тие се додавање на многу нешта да се стандардно на нивните URL-то. 665 00:29:06,980 --> 00:29:09,000 Но, тоа не е задолжително. 666 00:29:09,000 --> 00:29:10,340 Значи она што е убаво во врска со ова? 667 00:29:10,340 --> 00:29:13,630 Па, дозволете ми да оди напред и да отвори инспектор Хром. 668 00:29:13,630 --> 00:29:15,960 Има малку брз пристап со глувче за тоа. 669 00:29:15,960 --> 00:29:17,360 >> Оди на табот мрежа. 670 00:29:17,360 --> 00:29:19,340 И сега дозволете ми да ја превчитате оваа страница уште еднаш. 671 00:29:19,340 --> 00:29:20,280 И јас сум држи Shift. 672 00:29:20,280 --> 00:29:22,520 Како настрана, прелистувачи имаат тенденција да кешот или да го зачувате 673 00:29:22,520 --> 00:29:24,697 информации само за доброто на ефикасноста е. 674 00:29:24,697 --> 00:29:27,280 Но обично, држење Shift и претовар ќе ги принуди што 675 00:29:27,280 --> 00:29:28,994 да започне од почеток. 676 00:29:28,994 --> 00:29:30,410 И тоа е она што сакам да го направите тука. 677 00:29:30,410 --> 00:29:33,550 >> И ќе забележите сите овие редови само се појави. 678 00:29:33,550 --> 00:29:37,920 Излегува дека во секој даден веб страница, може да има само една датотека 679 00:29:37,920 --> 00:29:43,500 involved-- hello.html-- или има може да биде 52, како и во овој случај. 680 00:29:43,500 --> 00:29:45,820 Кога ќе го посетам google.com, очигледно, мојот интернет пребарувач 681 00:29:45,820 --> 00:29:49,650 започнува 52 одделни HTTP барања. 682 00:29:49,650 --> 00:29:50,520 Зошто е тоа така? 683 00:29:50,520 --> 00:29:53,380 >> Па, погледнете во она што е внатре на оваа веб-страница до врвот. 684 00:29:53,380 --> 00:29:55,620 Таму не е само текст, но има вистински слики 685 00:29:55,620 --> 00:29:57,130 на мачки во текот на десно. 686 00:29:57,130 --> 00:29:59,110 Има шарени логото тука на лево. 687 00:29:59,110 --> 00:30:01,750 Има сите овие икони за микрофон и така натаму. 688 00:30:01,750 --> 00:30:05,130 Има многу на парчиња, градење блокови, нула парчиња, ако сакате, 689 00:30:05,130 --> 00:30:06,250 на оваа веб-страница. 690 00:30:06,250 --> 00:30:10,310 И она што на пребарувачот прави врз добивање на првиот фајл, кој 691 00:30:10,310 --> 00:30:16,180 е овој ред тука, тоа е во суштина процесирањето на врвот на HTML 692 00:30:16,180 --> 00:30:19,880 до дното, лево кон десно, во потрага по работи како сликата тагови или други ознаки 693 00:30:19,880 --> 00:30:23,160 кои се спомене други датотеки и кога ги гледа, оди и достигнува нив 694 00:30:23,160 --> 00:30:26,050 преку HTTP, одржлива целина плик метафора, 695 00:30:26,050 --> 00:30:29,670 и потоа да ги прикажува во соодветна локација во веб-страница. 696 00:30:29,670 --> 00:30:33,370 >> Но информации тука ако јас се фокусираат на првиот фрлање, пребарување мачки, 697 00:30:33,370 --> 00:30:37,090 забележи дека, навистина тоа е користење на HTTP 1.1. 698 00:30:37,090 --> 00:30:41,690 И, за жал, Гугл Хром во моментов во верзија 39 699 00:30:41,690 --> 00:30:45,110 е вид на dumbing работи надолу и не ни покажува вистинската заглавија. 700 00:30:45,110 --> 00:30:49,680 Но, она што е навистина испрати е барање за да не намали, но / пребарување? q = мачки. 701 00:30:49,680 --> 00:30:52,830 702 00:30:52,830 --> 00:30:54,340 >> Сега, зошто е тоа важно? 703 00:30:54,340 --> 00:30:57,110 Па, јас ќе одам да заклучиме од овој дека ако на Google 704 00:30:57,110 --> 00:31:01,520 поддржува прашања на оваа форма, зошто не можам спроведување моето пребарување 705 00:31:01,520 --> 00:31:06,420 мотор за CS50, но само пред крајот, само на графички кориснички интерфејс. 706 00:31:06,420 --> 00:31:09,610 И ние ќе нарачува услуги на задниот крај, вистинските резултати од пребарувањето на Google. 707 00:31:09,610 --> 00:31:10,510 >> Па како можам да го направите ова? 708 00:31:10,510 --> 00:31:13,820 Па, дозволете ми да одат во gedit овде. 709 00:31:13,820 --> 00:31:19,180 И дозволете ми да оди напред и да се отвори до, да речеме, нова датотека. 710 00:31:19,180 --> 00:31:22,280 И јас одам да се спаси ова привремено како пребарување 0.html. 711 00:31:22,280 --> 00:31:25,111 712 00:31:25,111 --> 00:31:27,860 А потоа на крајот, ние ќе брзо напред кон оној што претходно подготвени. 713 00:31:27,860 --> 00:31:30,190 >> А јас ќе одам да се брзо разбивам doc тип 714 00:31:30,190 --> 00:31:33,840 HTML отворена заграда HTML блиску заграда HTML. 715 00:31:33,840 --> 00:31:38,390 Тогаш јас ќе одам да направите глава во близина на главата опен CS50 716 00:31:38,390 --> 00:31:40,150 Барај наместо пребарување на Google. 717 00:31:40,150 --> 00:31:43,480 Овде јас ќе одам да имаат телото, овде долу блиску тело. 718 00:31:43,480 --> 00:31:45,835 И сега јас треба CS50 пребарување. 719 00:31:45,835 --> 00:31:47,710 И всушност, ајде да изгради оваа надградба. 720 00:31:47,710 --> 00:31:51,043 Одам да се оди напред и да се затвори ова и всушност го стави во мојот јавниот именик. 721 00:31:51,043 --> 00:31:52,730 Значи ми го даде само еден момент. 722 00:31:52,730 --> 00:31:55,390 пребарување 0.html-- Одам да привремено да го наречеме search.html. 723 00:31:55,390 --> 00:31:56,600 724 00:31:56,600 --> 00:31:59,750 Одам да го chmod a + R search.html. 725 00:31:59,750 --> 00:32:01,072 726 00:32:01,072 --> 00:32:02,280 И сега ќе одам да го отворите. 727 00:32:02,280 --> 00:32:03,224 728 00:32:03,224 --> 00:32:04,390 Добро, така што беше брзо. 729 00:32:04,390 --> 00:32:06,800 Но целта едноставно беше да ни се дојде до точка 730 00:32:06,800 --> 00:32:09,630 на постоење на овој текст фајл наречен search.html. 731 00:32:09,630 --> 00:32:10,940 732 00:32:10,940 --> 00:32:12,790 Затоа, не многу да се погледне уште. 733 00:32:12,790 --> 00:32:16,970 Навистина, ако одам во мојот интернет пребарувач, и одат на search.html, тоа е се што е. 734 00:32:16,970 --> 00:32:17,720 Но знаеш што? 735 00:32:17,720 --> 00:32:19,000 Јас може да биде малку познавач. 736 00:32:19,000 --> 00:32:22,710 Јас го прочитав во една книга што има наслов таг наречен Н1. 737 00:32:22,710 --> 00:32:26,100 А јас ќе одам да се оди напред и да ја користат таа отворен h1 и блиски Н1. 738 00:32:26,100 --> 00:32:27,220 Вчитување на страната. 739 00:32:27,220 --> 00:32:29,600 И сега е поголем и похрабри, не сите, кои интересно, 740 00:32:29,600 --> 00:32:32,399 но барем тоа структурно повеќе интересно. 741 00:32:32,399 --> 00:32:33,940 Но, сега дозволете ми да се воведе уште еден таг. 742 00:32:33,940 --> 00:32:36,500 Излегува има форма таг. 743 00:32:36,500 --> 00:32:38,400 И дозволете ми да се затвори таа таг. 744 00:32:38,400 --> 00:32:40,830 И излегува дека е влез таг што 745 00:32:40,830 --> 00:32:44,600 има атрибут наречен тип, кој е податочен тип на поле, 746 00:32:44,600 --> 00:32:45,200 ако сакате. 747 00:32:45,200 --> 00:32:47,050 И ќе биде од типот текст. 748 00:32:47,050 --> 00:32:52,200 И неговата вредност ќе да се CS50 пребарување. 749 00:32:52,200 --> 00:32:53,850 Затвори таг. 750 00:32:53,850 --> 00:32:57,100 И таму се случува да биде без поимот отворање и затворање со посебни тагови. 751 00:32:57,100 --> 00:33:00,300 >> Дозволете ми да се вратам овде и да видиме што се случува, ја превчитате. 752 00:33:00,300 --> 00:33:01,380 Прв интересно. 753 00:33:01,380 --> 00:33:02,950 Тоа изгледа како тоа е во полето за текст. 754 00:33:02,950 --> 00:33:04,080 755 00:33:04,080 --> 00:33:06,999 И всушност, јас не сакам да се стави вредност таму. 756 00:33:06,999 --> 00:33:10,040 Дозволете ми да се вратам тука и всушност се ослободи од оваа вредност да биде едноставно. 757 00:33:10,040 --> 00:33:12,939 Наместо на вредност, она што сакав да им даде на оваа работа е името. 758 00:33:12,939 --> 00:33:15,230 И јас не знам што е тоа, па јас ќе се вратам на тоа. 759 00:33:15,230 --> 00:33:18,270 >> Но под тоа, сакам да се направи влез тип = достават. 760 00:33:18,270 --> 00:33:19,840 761 00:33:19,840 --> 00:33:22,120 И оваа вредност ќе биде CS50 пребарување. 762 00:33:22,120 --> 00:33:24,850 И ќе видиме зошто јас се пресели на вредноста на ова. 763 00:33:24,850 --> 00:33:28,900 Кога јас ја превчитате, јас се чини дека сега имаат почетоците на мојот сопствен пребарување 764 00:33:28,900 --> 00:33:30,820 моторот, супер грозен, иако искрено, тоа е 765 00:33:30,820 --> 00:33:34,260 не е далеку фрли од она што Стандардно страница на Google изгледа како. 766 00:33:34,260 --> 00:33:37,950 >> Ако одам тука сега, јас да напишете во мачки и се надевам кликнете Search. 767 00:33:37,950 --> 00:33:40,380 Но, јас не сум уште доста направено, бидејќи јас не имаат имплементирано, 768 00:33:40,380 --> 00:33:41,045 очигледно, база на податоци. 769 00:33:41,045 --> 00:33:42,940 Не сум запиша во интернет за резултатите од пребарувањето. 770 00:33:42,940 --> 00:33:44,840 Па јас треба да нарачува услуги кои на Google. 771 00:33:44,840 --> 00:33:46,290 Па, како да го направам тоа? 772 00:33:46,290 --> 00:33:49,170 >> Па, прво на сите јас треба да се додаде и акција 773 00:33:49,170 --> 00:33:58,460 припишуваат на мојата форма ознака што е http://www.google.com/search. 774 00:33:58,460 --> 00:34:01,180 И знам дека само од тоа да имаат заклучи од страна гледајќи внимателно 775 00:34:01,180 --> 00:34:02,505 во нивните URL-то. 776 00:34:02,505 --> 00:34:03,380 И сега ги погоди. 777 00:34:03,380 --> 00:34:09,090 Што треба овој текст поле, најверојатно, да се нарече, врз основа на од каде сме дошле 778 00:34:09,090 --> 00:34:09,754 од пред тоа? 779 00:34:09,754 --> 00:34:11,896 780 00:34:11,896 --> 00:34:13,290 >> ПУБЛИКАТА: q. 781 00:34:13,290 --> 00:34:14,370 >> Дејвид Ј MALAN: q. 782 00:34:14,370 --> 00:34:17,800 А ние не, всушност треба прашање одбележување што се испоставува, но q е навистина тоа, 783 00:34:17,800 --> 00:34:20,489 Q за пребарување веројатно со Стандардно, само затоа што тоа е 784 00:34:20,489 --> 00:34:23,060 што Лари и Сергеј излезе со години. 785 00:34:23,060 --> 00:34:24,739 Па сега дозволете ми повторно пробајте. 786 00:34:24,739 --> 00:34:26,409 Тоа не изгледа сите што се разликува. 787 00:34:26,409 --> 00:34:28,120 Но, сега се види што се случува. 788 00:34:28,120 --> 00:34:32,360 >> Ако сум тип во мачки и клик CS50 пребарување и нека оди, 789 00:34:32,360 --> 00:34:35,770 забележите јас се однесен далеку за да вистински Google. 790 00:34:35,770 --> 00:34:38,150 Сега, Google е да се биде малку досадни во кои тие се 791 00:34:38,150 --> 00:34:41,877 додавање дополнителен параметар, ако сакате, до URL-то. 792 00:34:41,877 --> 00:34:43,960 Тоа е се што се случува автоматски на Google страна. 793 00:34:43,960 --> 00:34:48,730 >> Значаен дел е тоа што јас се чини дека да имаат генерирана ова барање тука. 794 00:34:48,730 --> 00:34:50,179 И навистина, тоа е она што се случува. 795 00:34:50,179 --> 00:34:53,040 Кога имате HTML што изгледа вака, ова 796 00:34:53,040 --> 00:34:57,620 е вид на веб програмери нотација за велејќи, оди напред и да се создаде форма 797 00:34:57,620 --> 00:34:59,990 дека кога тоа е доставен, тоа се случува да одат на овој URL-то. 798 00:34:59,990 --> 00:35:03,430 И кога рачно се предвидени вредности за нешта како q, 799 00:35:03,430 --> 00:35:05,440 не одат само за да овој URL. 800 00:35:05,440 --> 00:35:08,210 Всушност, оди во прашање знак и тогаш q = мачки. 801 00:35:08,210 --> 00:35:09,590 802 00:35:09,590 --> 00:35:13,060 Додаваат параметар, HTTP параметар како тоа. 803 00:35:13,060 --> 00:35:15,590 >> И само за да биде супер прецизни, она што се заклучи here-- 804 00:35:15,590 --> 00:35:18,130 но јас ќе биде повеќе explicit-- е дека методот што сакате да го користите 805 00:35:18,130 --> 00:35:22,270 е да се добие, наместо нешто како пост, кој на крајот ќе видиме. 806 00:35:22,270 --> 00:35:27,710 Значи во кратки, едноставно со разбирање HTML и користење на некои прилично едноставни ознаки, 807 00:35:27,710 --> 00:35:30,610 сега ние може да почнат да се создаде нашите сопствени пред крајниот корисник 808 00:35:30,610 --> 00:35:32,850 интерфејс со пребарување моторот зад неа. 809 00:35:32,850 --> 00:35:34,800 >> Но, ова, се разбира, е прилично одвратен. 810 00:35:34,800 --> 00:35:37,259 Значи, дозволете ми, всушност, се отвори малку подобра верзија. 811 00:35:37,259 --> 00:35:39,800 Ова е еден јас подготвени во однапред дека има некои коментари. 812 00:35:39,800 --> 00:35:41,900 Но ќе видите дека јас доста го пресоздава. 813 00:35:41,900 --> 00:35:44,150 Значи ова е веќе достапни на интернет. 814 00:35:44,150 --> 00:35:48,050 И јас се случи да се превентивно одат на https само за да биде едноставно. 815 00:35:48,050 --> 00:35:50,610 >> И сега ајде да се отвори следниот повторување на ова. 816 00:35:50,610 --> 00:35:52,510 Е верзија 1, наместо на 0. 817 00:35:52,510 --> 00:35:55,315 Што скокови на тебе како малку различни во овој пример? 818 00:35:55,315 --> 00:35:59,480 819 00:35:59,480 --> 00:36:00,440 >> ПУБЛИКАТА: [нечујни]. 820 00:36:00,440 --> 00:36:03,020 >> Да, има овој текст усогласување центар. 821 00:36:03,020 --> 00:36:04,590 Ова е малку чудно тука. 822 00:36:04,590 --> 00:36:06,150 Но, ова е навистина ново. 823 00:36:06,150 --> 00:36:07,800 А можеби и се погоди она што се случува да се случи. 824 00:36:07,800 --> 00:36:11,730 Ако одам во мојот интернет пребарувач сега и посета на пребарување 1.html, 825 00:36:11,730 --> 00:36:13,090 тоа е речиси истото. 826 00:36:13,090 --> 00:36:15,705 Но, тоа е еден чекор поблиску до да се биде малку повеќе убава. 827 00:36:15,705 --> 00:36:19,150 Тоа е уште грдо, но поубава во таа најмалку што е сега во центарот. 828 00:36:19,150 --> 00:36:23,470 >> Значи излегува дека она што јас сум користење е друг јазик заедно наречени 829 00:36:23,470 --> 00:36:25,680 CSS, каскадни стилски листови. 830 00:36:25,680 --> 00:36:28,310 И CSS, искрено, е вид на, во мое лично мислење, 831 00:36:28,310 --> 00:36:29,775 на atrociously дизајниран јазик. 832 00:36:29,775 --> 00:36:33,110 Тоа е многу досадно да се запамети сите различни детали. 833 00:36:33,110 --> 00:36:38,479 Но, тоа е она што stylizes на целиот свет интернет денес. 834 00:36:38,479 --> 00:36:39,270 Јас навреди некого. 835 00:36:39,270 --> 00:36:39,769 Сите во право. 836 00:36:39,769 --> 00:36:43,180 Значи, да се вратиме овде и види колку сме всушност користење на овој. 837 00:36:43,180 --> 00:36:45,940 И што се испоставува, барем тоа е всушност прилично едноставен јазик. 838 00:36:45,940 --> 00:36:49,470 Тоа е само клучните вредност парови, својства и вредности, својства и вредности. 839 00:36:49,470 --> 00:36:52,080 Всушност, тука е една тој имот и вредност. 840 00:36:52,080 --> 00:36:55,890 >> Едноставно со користење на стилот припишуваат на моето тело таг 841 00:36:55,890 --> 00:37:00,360 и тоа даваат вредност на Зборот дебелото црево и друг збор, 842 00:37:00,360 --> 00:37:03,730 или имотот и вредност, Јас може да влијае на естетиката 843 00:37:03,730 --> 00:37:06,210 на веб страница, не нужно структура сепак, 844 00:37:06,210 --> 00:37:07,550 но естетиката на неа. 845 00:37:07,550 --> 00:37:10,960 И само со Googling наоколу, сфаќам дека, CSS, Cascading Style Sheets, 846 00:37:10,960 --> 00:37:14,170 поддржува имот наречен текст-align, чија вредност може да 847 00:37:14,170 --> 00:37:16,980 се лево, десно, или центар, на пример. 848 00:37:16,980 --> 00:37:19,990 >> Па сега кога јас ја превчитате оваа страница, она што јас го добие 849 00:37:19,990 --> 00:37:22,730 беше центриран страница, но сепак прилично грда. 850 00:37:22,730 --> 00:37:25,770 Ајде да одиме напред и да се отвори верзијата 2 од пребарувањето. 851 00:37:25,770 --> 00:37:28,570 И сега забележите Јас го направив малку повеќе. 852 00:37:28,570 --> 00:37:33,760 Забележите дека тука во внатрешноста на главата таг, не може да биде повеќе од насловот. 853 00:37:33,760 --> 00:37:35,400 Всушност, има стил таг. 854 00:37:35,400 --> 00:37:38,630 И ова е местото каде што тоа само добива малку неуредна разглед на CSS понекогаш. 855 00:37:38,630 --> 00:37:41,971 >> Забележете дека јас изгледа дека имаат нешто што структурно изгледа многу различно. 856 00:37:41,971 --> 00:37:44,095 Но, тука е името на таг Сакам да стилизирани. 857 00:37:44,095 --> 00:37:47,570 Тука се нашите стари пријатели кадрава загради и затворени кадрава голема заграда. 858 00:37:47,570 --> 00:37:50,290 А потоа тука е тоа што сопственост и нејзината вредност. 859 00:37:50,290 --> 00:37:56,300 >> Ако јас се вчита оваа датотека, search2.html, крајниот резултат е идентична. 860 00:37:56,300 --> 00:37:59,300 Но, тоа е чекор кон подобро дизајн. 861 00:37:59,300 --> 00:38:04,560 Од страна на факторинг оваа CSS, јас сум не го commingled со мојот HTML. 862 00:38:04,560 --> 00:38:07,560 И навистина, како што ќе видиме, би можел повторна употреба на овие својства и вредности. 863 00:38:07,560 --> 00:38:10,420 Ако сакав да се направи гроздовете на делови од мојата веб страница центрирани, 864 00:38:10,420 --> 00:38:13,630 Јас не треба да напишете стил = текст-align центар насекаде. 865 00:38:13,630 --> 00:38:16,580 Јас може да се стави на едно место можеби, како на врвот. 866 00:38:16,580 --> 00:38:18,210 >> Но, дури и тоа не е најдобар дизајн. 867 00:38:18,210 --> 00:38:21,720 Всушност, една од работите што ќе учат како што трошат повеќе и повеќе време со 868 00:38:21,720 --> 00:38:25,730 веб програмирање е дека повеќе може да се modularize работи и фактор работи надвор 869 00:38:25,730 --> 00:38:30,610 како .h датотеки нека фактор работи надвор, сакале helpers.c нека фактор работи надвор 870 00:38:30,610 --> 00:38:31,880 пред неколку psets. 871 00:38:31,880 --> 00:38:34,200 Слично на тоа, можеби ние сакате да се постигне ова. 872 00:38:34,200 --> 00:38:37,920 >> Па известување во верзија три search.html сум 873 00:38:37,920 --> 00:38:40,610 исчистени шефот на страницата и само стави 874 00:38:40,610 --> 00:38:43,320 во тоа, линк таг, кој спротивно на име, 875 00:38:43,320 --> 00:38:44,700 не ви даде хиперврска. 876 00:38:44,700 --> 00:38:49,150 Таа поврзува во друга датотека по пат на на href чија вредност во овој случај, 877 00:38:49,150 --> 00:38:51,586 е пребарување 3.css 878 00:38:51,586 --> 00:38:52,960 Така сфаќам ние ќе брзо. 879 00:38:52,960 --> 00:38:54,600 Но, сите го правам е вид на движат работите околу. 880 00:38:54,600 --> 00:38:55,760 Дозволете ми отворен пребарување 3.css. 881 00:38:55,760 --> 00:38:57,114 882 00:38:57,114 --> 00:38:58,530 Ете го, ништо на него. 883 00:38:58,530 --> 00:39:02,270 Јас само копирани и атипичен во ново поднесе, слично како што констатирано работи надвор 884 00:39:02,270 --> 00:39:03,509 во други датотеки порано. 885 00:39:03,509 --> 00:39:05,300 И result-- целосно underwhelming-- 886 00:39:05,300 --> 00:39:06,730 ќе биде иста. 887 00:39:06,730 --> 00:39:10,490 Но, ние сме се движат toward-- не, тоа не е. 888 00:39:10,490 --> 00:39:11,930 О, јас знам зошто. 889 00:39:11,930 --> 00:39:13,790 >> Па се чини дека се работи за грешка. 890 00:39:13,790 --> 00:39:15,010 И тоа е во некоја смисла. 891 00:39:15,010 --> 00:39:17,730 Но, дозволете ми да се отвори својата мрежа на табот. 892 00:39:17,730 --> 00:39:19,660 Дозволете ми да ја превчитате страната. 893 00:39:19,660 --> 00:39:23,315 Ах, зошто е CSS не се применува? 894 00:39:23,315 --> 00:39:26,920 Па, CSS фајл, слично на тоа, има да биде светски читливи, така да се каже. 895 00:39:26,920 --> 00:39:28,440 И тоа не е премногу во моментов забрането. 896 00:39:28,440 --> 00:39:33,760 Значи, дозволете ми направи chmod a + R на ѕвезда точка CSS-- whoops-- 897 00:39:33,760 --> 00:39:37,067 ние сме дот CSS е само наставката на датотеката за CSS датотеки. 898 00:39:37,067 --> 00:39:38,900 Сега дозволете ми да се врати на мојот интернет пребарувач и повторно. 899 00:39:38,900 --> 00:39:40,910 Добро, малку подобро. 900 00:39:40,910 --> 00:39:42,282 >> Сега дозволете ми да го направи едно последно нешто. 901 00:39:42,282 --> 00:39:42,990 Во потрага-4.html. 902 00:39:42,990 --> 00:39:44,550 903 00:39:44,550 --> 00:39:48,220 Имам верзија која јас само мислев беше начин кулер, иако начинот на кој повеќе 904 00:39:48,220 --> 00:39:48,980 комплицирано. 905 00:39:48,980 --> 00:39:50,690 Ајде да погледнеме во резултатот во прв план. 906 00:39:50,690 --> 00:39:52,290 Затвори ова да ни даде повеќе простор. 907 00:39:52,290 --> 00:39:54,275 Промените ова пребарување-4, Enter. 908 00:39:54,275 --> 00:39:55,430 909 00:39:55,430 --> 00:39:57,200 >> А сега еден куп работи се скршени. 910 00:39:57,200 --> 00:39:59,910 Одам да се врати во мојот именик тука. 911 00:39:59,910 --> 00:40:04,190 И сега јас сум само ќе да се направи односно chmod на + r на file-- 912 00:40:04,190 --> 00:40:07,450 затоа што знам дека тоа exists-- наречен logo.gif, кој е на сликата. 913 00:40:07,450 --> 00:40:08,590 И сега ја превчитате. 914 00:40:08,590 --> 00:40:11,040 И wow-- па сега јас сум прилично блиску, искрено, 915 00:40:11,040 --> 00:40:15,860 им се допаѓа верзија на Google во 1999 година, и искрено, 2014 верзија на Google, 916 00:40:15,860 --> 00:40:16,360 нели? 917 00:40:16,360 --> 00:40:21,920 >> Така, тоа е сега се случува на нивниот веб-сајт, во крајна линија, ако јас пребарување за мачки. 918 00:40:21,920 --> 00:40:23,900 И навистина е. 919 00:40:23,900 --> 00:40:26,410 Но, она што го правам поинаку во оваа верзија 4? 920 00:40:26,410 --> 00:40:28,020 Па ние не ќе се задржиме премногу на тоа тука. 921 00:40:28,020 --> 00:40:30,100 Ќе видите ова во проблемот постави седум крајот. 922 00:40:30,100 --> 00:40:31,350 Но, забележи го направив неколку работи. 923 00:40:31,350 --> 00:40:33,690 >> Јас воведе div ознака, што е поделба, 924 00:40:33,690 --> 00:40:35,450 слични во духот со став таг. 925 00:40:35,450 --> 00:40:38,220 Но, поделбата е исто како, еве правоаголна невидливи регионот 926 00:40:38,220 --> 00:40:39,150 на екранот. 927 00:40:39,150 --> 00:40:41,680 Ајде да го даде уникатна идентификатор, подножје, само 928 00:40:41,680 --> 00:40:44,700 така што можеме да зборуваме за тоа во нашиот HTML на друго место. 929 00:40:44,700 --> 00:40:47,952 Еве уште еден div на страницата чиј проект ќе бидат задоволни. 930 00:40:47,952 --> 00:40:49,160 Тоа е содржината на страната. 931 00:40:49,160 --> 00:40:51,090 И тука е насловот на страницата. 932 00:40:51,090 --> 00:40:54,960 >> Со други зборови, јас сум во суштина во HTML сум ментално 933 00:40:54,960 --> 00:40:57,700 гледаат оваа веб страница, како три компоненти, со глава 934 00:40:57,700 --> 00:41:01,200 до тука со овој невидлив правоаголник, содржината во средината, а потоа 935 00:41:01,200 --> 00:41:04,800 подножјето долу, дури и иако ние не ги гледаме тие работи. 936 00:41:04,800 --> 00:41:09,940 Затоа што сакам во мојата глава на страница тука, или во .css датотека, 937 00:41:09,940 --> 00:41:11,460 Можам да користам оваа синтакса. 938 00:41:11,460 --> 00:41:13,070 >> Насловот не е таг. 939 00:41:13,070 --> 00:41:17,060 Тоа е проект така што се претвора дека со тоа #header, 940 00:41:17,060 --> 00:41:20,840 Сега можам да се примени еден или повеќе својства на насловот. 941 00:41:20,840 --> 00:41:24,130 Што можам да направам иста содржина, исти за содржината тука. 942 00:41:24,130 --> 00:41:27,230 >> Така на пример, во подножјето, известување сите овие својства Јас сум додавање. 943 00:41:27,230 --> 00:41:30,660 И знам дека тие постојат само со читање врз документација за CSS. 944 00:41:30,660 --> 00:41:33,450 Големина на фонт ќе биде smaller-- па некои релативната големина на фонтот. 945 00:41:33,450 --> 00:41:34,741 Тежината ќе биде со задебелени букви. 946 00:41:34,741 --> 00:41:37,340 Margin-- колку пиксели околу it-- е 20 пиксели. 947 00:41:37,340 --> 00:41:38,590 И тоа се случува да биде центрирана. 948 00:41:38,590 --> 00:41:40,256 >> Но, токму сега, на страница изгледа вака. 949 00:41:40,256 --> 00:41:42,840 Ако јас не сум задоволен со мојата копија право таму, 950 00:41:42,840 --> 00:41:46,560 Јас би можеле да се направи нешто како црвената боја. 951 00:41:46,560 --> 00:41:50,570 А потоа можам да се спаси оваа, вчитување, и сега сум стилизирани подножјето. 952 00:41:50,570 --> 00:41:54,130 Така што ова е само алудирајќи на власта на она што можете да направите во веб-страница 953 00:41:54,130 --> 00:41:55,510 да се променат работите околу. 954 00:41:55,510 --> 00:41:59,080 >> Па дури и поладна од ова, ако сакате да ѕиркаат наоколу со реалните веб-сајтови, 955 00:41:59,080 --> 00:42:00,810 не може трајно да ги промени. 956 00:42:00,810 --> 00:42:03,640 Но, ако јас се отворат Повторно инспектор Хром 957 00:42:03,640 --> 00:42:07,610 и јас не одам на левата страна тука, што покажува HTML Фејсбук, 958 00:42:07,610 --> 00:42:11,380 туку се покажува на десната страна на сите нејзини CSS, 959 00:42:11,380 --> 00:42:13,789 Можете или да го и се променат работите во лет. 960 00:42:13,789 --> 00:42:15,080 Значи, дозволете ми да оди напред и да го направите тоа. 961 00:42:15,080 --> 00:42:18,670 >> Дозволете ми да оди напред и контрола кликнете на овој случаен збор тука, 962 00:42:18,670 --> 00:42:21,230 потпише, и кликнете Увид Елемент. 963 00:42:21,230 --> 00:42:25,130 Хром многу погодно скока на Н1 таг дека Фејсбук е користење. 964 00:42:25,130 --> 00:42:27,290 И ќе забележите тука Фејсбук има вид на мрзеливо 965 00:42:27,290 --> 00:42:29,960 хард кодирани големина на фонт како имот тука. 966 00:42:29,960 --> 00:42:33,530 >> Толку кул работа иако е дека ако јас всушност одат во тука 967 00:42:33,530 --> 00:42:39,560 и велат, ох, Фејсбук, не ми се допаѓа што 64 пиксели, ние сега може да се промени на Фејсбук. 968 00:42:39,560 --> 00:42:42,590 Се разбира, ние сме само тоа се менува за мене лично во моментот. 969 00:42:42,590 --> 00:42:45,150 Но, ова е само уште еден алатка во нашата алатка комплет 970 00:42:45,150 --> 00:42:48,360 тоа ќе ни овозможи да tweak и да дознаам, а исто така се дијагностицира 971 00:42:48,360 --> 00:42:49,729 прашања во нашите сопствени веб-страници. 972 00:42:49,729 --> 00:42:52,270 И ние слично би можеле да одат над тука, што е иста работа. 973 00:42:52,270 --> 00:42:55,830 Ако навистина сакате да се фенси, јас значи, сега навистина може да мутира страницата 974 00:42:55,830 --> 00:42:57,380 и го прават луди работи. 975 00:42:57,380 --> 00:42:59,870 >> Значи, зошто е сето тоа корисно? 976 00:42:59,870 --> 00:43:02,330 И, во крајна линија, ние сме ќе сакаат да бидат 977 00:43:02,330 --> 00:43:07,110 можност да се создаде веб-страници кои се водени од нашите сопствени назад завршува, 978 00:43:07,110 --> 00:43:10,520 не само со Google и аутсорсинг на задниот крај таму. 979 00:43:10,520 --> 00:43:13,510 Ние всушност сакаме вредност, на пример, 980 00:43:13,510 --> 00:43:18,830 на дејствување на нашите пребарувач атрибут за да не се оди на некој друг, 981 00:43:18,830 --> 00:43:24,270 но со нешто како search.php, каде search.php е на наша сопствен сервер, 982 00:43:24,270 --> 00:43:25,670 а не на некој друг. 983 00:43:25,670 --> 00:43:30,316 >> И така да одам таму, ние, всушност, треба да се воведе нов јазик. 984 00:43:30,316 --> 00:43:33,190 Значи ние веќе гледаме еден нов јазик тука, или две, навистина, HTML 985 00:43:33,190 --> 00:43:33,700 и CSS. 986 00:43:33,700 --> 00:43:36,330 Но тие навистина се само структурни и естетски јазици. 987 00:43:36,330 --> 00:43:38,360 Тие не се програмирање јазици по себе. 988 00:43:38,360 --> 00:43:41,160 И тоа е за колку формално време како што ќе го потрошиме на нив. 989 00:43:41,160 --> 00:43:44,910 Затоа што ќе почне сега да транзиција во PHP. 990 00:43:44,910 --> 00:43:48,160 >> Па PHP е вистински програмски јазик. 991 00:43:48,160 --> 00:43:50,750 Тоа е јазик за скриптирање во смисла дека тоа е 992 00:43:50,750 --> 00:43:52,855 замислена да биде полесна тежина од нешто како В. 993 00:43:52,855 --> 00:43:56,082 И тоа е препознаена јазик, што значи дека не е составена. 994 00:43:56,082 --> 00:43:58,790 Значи во мало, она што не го мислиш кога ние се користи јазик како C 995 00:43:58,790 --> 00:44:00,290 и моравме да го компајлирате? 996 00:44:00,290 --> 00:44:02,120 Што значи тоа да се компајлирате C код? 997 00:44:02,120 --> 00:44:03,864 998 00:44:03,864 --> 00:44:04,780 ПУБЛИКАТА: [нечујни]. 999 00:44:04,780 --> 00:44:06,184 Дејвид Ј MALAN: го кажам уште еднаш? 1000 00:44:06,184 --> 00:44:07,100 ПУБЛИКАТА: [нечујни]. 1001 00:44:07,100 --> 00:44:07,962 1002 00:44:07,962 --> 00:44:08,920 Дејвид Ј MALAN: Совршена. 1003 00:44:08,920 --> 00:44:10,180 Тоа се претвора во бинарни. 1004 00:44:10,180 --> 00:44:14,200 Тоа се претвора во нули и оние од реалните на англиски како изворниот код. 1005 00:44:14,200 --> 00:44:16,424 А потоа ние всушност може да се кандидира оние нули и оние 1006 00:44:16,424 --> 00:44:18,840 со полагање нив преку Процесорот со двојно кликнување на иконата 1007 00:44:18,840 --> 00:44:19,980 или водење на команда. 1008 00:44:19,980 --> 00:44:23,770 >> PHP и Python и Ruby и Perl и JavaScript 1009 00:44:23,770 --> 00:44:26,250 и гроздовете на други јазици се толкува 1010 00:44:26,250 --> 00:44:29,290 јазици, кој е да се каже не ги компајлирате. 1011 00:44:29,290 --> 00:44:34,220 Наместо тоа, можете да ги хранат како влез за програма наречена преведувач. 1012 00:44:34,220 --> 00:44:36,640 И дека преведувач, што некој друг напишал, 1013 00:44:36,640 --> 00:44:40,930 чита вашиот изворен код врвот до дното, лево кон десно и само толкува 1014 00:44:40,930 --> 00:44:43,000 оние линии и прави она што го велат. 1015 00:44:43,000 --> 00:44:45,360 >> Значи, ако се сретне со линија која вели печатење, 1016 00:44:45,360 --> 00:44:48,660 тоа не мора да го конвертирате печатење на соодветните нули и единици. 1017 00:44:48,660 --> 00:44:51,910 Тоа само ја има оваа преведувач како голема, ако состојбата во која се вели, 1018 00:44:51,910 --> 00:44:56,110 ако настава програмерот е печати, а потоа го направите следново. 1019 00:44:56,110 --> 00:44:58,170 Па тоа го толкува само според начинот на размислување 1020 00:44:58,170 --> 00:44:59,800 преку она што сте го кажува да се направи. 1021 00:44:59,800 --> 00:45:01,320 >> И PHP е еден од овие јазици. 1022 00:45:01,320 --> 00:45:05,310 И пред PHP години е дизајниран токму за веб програмирање. 1023 00:45:05,310 --> 00:45:08,160 И тоа беше првично многу невешт неуредна јазик. 1024 00:45:08,160 --> 00:45:10,940 И навистина, има огромен износ на лоши PHP код таму. 1025 00:45:10,940 --> 00:45:13,520 Но, самиот јазик е најзаслужен во текот на годините, 1026 00:45:13,520 --> 00:45:16,200 толку многу што сега е всушност прекрасен следниот чекор 1027 00:45:16,200 --> 00:45:19,970 педагогичен од C, бидејќи тоа е толку плетен запознаен со сè 1028 00:45:19,970 --> 00:45:22,380 сте само гледа во изминатите неколку недели. 1029 00:45:22,380 --> 00:45:25,724 >> Една почетна разлика ќе видиме е нема Главната функција повеќе. 1030 00:45:25,724 --> 00:45:28,890 Кога ќе почнете да пишување код, тоа е само ќе се извршуваат без оглед на тоа, 1031 00:45:28,890 --> 00:45:30,220 како што ќе видиме во еден момент. 1032 00:45:30,220 --> 00:45:33,320 Во меѓувреме, тука е она што променлива изгледа во PHP. 1033 00:45:33,320 --> 00:45:35,840 Тоа е малку поинаква, но само едвај. 1034 00:45:35,840 --> 00:45:39,380 >> Во PHP, таму не е силна пишување. 1035 00:45:39,380 --> 00:45:41,430 Има недела пишување, што само значи дека има 1036 00:45:41,430 --> 00:45:44,030 се типови на податоци како и стринговите и броеви и други работи. 1037 00:45:44,030 --> 00:45:47,030 Но вие не се мачат специфицирање она што тие се повеќе. 1038 00:45:47,030 --> 00:45:48,980 PHP тоа, фигурира за вас. 1039 00:45:48,980 --> 00:45:52,030 На доларот знак е само одлука дека PHP луѓе направија години 1040 00:45:52,030 --> 00:45:54,890 пред како што било променлива во PHP само започнува со знакот за долар. 1041 00:45:54,890 --> 00:45:58,130 Тоа е всушност вид на корисни во таа што скока на тебе малку повеќе. 1042 00:45:58,130 --> 00:46:01,315 >> Но после тоа, овој е состојба во PHP. 1043 00:46:01,315 --> 00:46:03,140 1044 00:46:03,140 --> 00:46:04,730 Она што е различно наспроти Ц? 1045 00:46:04,730 --> 00:46:07,180 1046 00:46:07,180 --> 00:46:09,600 Трик question-- ништо, кој е всушност навистина убаво. 1047 00:46:09,600 --> 00:46:12,140 Булова изрази во PHP-- истото. 1048 00:46:12,140 --> 00:46:19,354 Булова изрази со и наспроти или, прекинувачи, петелки, петелки, loops-- ред, 1049 00:46:19,354 --> 00:46:20,270 овој е различен. 1050 00:46:20,270 --> 00:46:22,660 >> Значи излегува постои неколку други функции во PHP. 1051 00:46:22,660 --> 00:46:25,243 Еден од нив е всушност ова, што е прекрасно удобен. 1052 00:46:25,243 --> 00:46:29,250 Ако $ броеви е низа кои сте прогласи претходно во програмата, 1053 00:46:29,250 --> 00:46:33,350 имаш овој фенси за секоја конструкција дека наместо за правење на сето тоа 1054 00:46:33,350 --> 00:46:37,020 досадни јас еднаква на 0, јас е помалку од ова, [? Јас ++?] 1055 00:46:37,020 --> 00:46:40,320 за секој броеви како број, каде што секој на оние долар знак вредности е само 1056 00:46:40,320 --> 00:46:42,790 променлива, а вториот можете да замислите како И. 1057 00:46:42,790 --> 00:46:44,290 Вие би можеле да го наречеме нешто што сакате. 1058 00:46:44,290 --> 00:46:45,770 Јас го нарече број. 1059 00:46:45,770 --> 00:46:48,825 Ова се случува да iterate во текот на низата повикуваните броеви. 1060 00:46:48,825 --> 00:46:51,200 И на секој повторување, тоа е ќе се ажурира автоматски 1061 00:46:51,200 --> 00:46:54,340 за вас на знакот за долар број променлива, така што вие постојано 1062 00:46:54,340 --> 00:46:58,210 имаат пристап до променливата сакате без да се направи било квадратни загради 1063 00:46:58,210 --> 00:47:00,980 нотација или индексирање во низа. 1064 00:47:00,980 --> 00:47:04,950 >> Покрај тоа, ние дури и да работи како низи, кои изгледаат речиси исто, 1065 00:47:04,950 --> 00:47:08,210 освен тоа е многу честа појава, како што ќе види, како во PHP и го вклучите Javascript- 1066 00:47:08,210 --> 00:47:10,750 да се пре иницијализира низа користење квадратни загради. 1067 00:47:10,750 --> 00:47:12,040 С користи кадрави загради. 1068 00:47:12,040 --> 00:47:15,330 Така, тоа е малку поинаква, иако ние навистина не ја користат таа трик многу. 1069 00:47:15,330 --> 00:47:20,090 >> Но, дури и повеќе моќно, PHP има асоцијативни низи, 1070 00:47:20,090 --> 00:47:23,100 која е фенси начин на велејќи хаш маси. 1071 00:47:23,100 --> 00:47:31,610 Всушност, ако сакате да го прогласи хаш маса во PHP, за разлика од C-- колку 1072 00:47:31,610 --> 00:47:34,775 линии на код не е потребно да се всушност спроведување на хаш табелата во Ц? 1073 00:47:34,775 --> 00:47:38,310 Или колку линии на код е земајќи за спроведување на хаш табелата во Ц? 1074 00:47:38,310 --> 00:47:39,820 Така, тоа е веројатно многу, нели? 1075 00:47:39,820 --> 00:47:41,680 Тоа е неколку десетици, можеби 100 или 200. 1076 00:47:41,680 --> 00:47:42,980 Тоа е nontrivial. 1077 00:47:42,980 --> 00:47:45,420 Или тоа е за да се биде, како наскоро ќе се види, nontrivial 1078 00:47:45,420 --> 00:47:48,080 за спроведување на хаш табелата [Нечујни] и, исто така, се обиде. 1079 00:47:48,080 --> 00:47:50,580 Но, во PHP-- и искрено, веројатно не треба да ти кажам 1080 00:47:50,580 --> 00:47:53,630 до Monday-- во PHP, ако сакате маса, направено. 1081 00:47:53,630 --> 00:47:56,431 Тоа е хаш table-- така со една линија код. 1082 00:47:56,431 --> 00:47:56,930 И 1083 00:47:56,930 --> 00:47:58,810 >> А многу јазици го направите тоа. 1084 00:47:58,810 --> 00:48:00,190 Да се ​​забавуваат со pset пет. 1085 00:48:00,190 --> 00:48:01,980 Толку многу јазици го направите тоа. 1086 00:48:01,980 --> 00:48:03,050 1087 00:48:03,050 --> 00:48:06,140 Тие ви даде овие апстракции дека другите луѓе, други програмери, 1088 00:48:06,140 --> 00:48:09,870 направивме за вас, така што можете да застане на свои плеќи 1089 00:48:09,870 --> 00:48:13,290 и да почне со користење на идеи кои се супер релевантни, како хаш маси и дрвја 1090 00:48:13,290 --> 00:48:14,140 и се обидува. 1091 00:48:14,140 --> 00:48:17,790 Но, вие не мора нужно да спроведување на овие работи себе. 1092 00:48:17,790 --> 00:48:20,850 >> И така на крајот, она што ние ќе го користите PHP за 1093 00:48:20,850 --> 00:48:23,580 е потенцијално пишување програми на т.н. командната линија. 1094 00:48:23,580 --> 00:48:26,600 Ние би можеле да се рекреираат на секоја програма ние го напишав овој семестар досега, 1095 00:48:26,600 --> 00:48:30,410 освен можеби Збег кој користи SPL, кој е специфичен за Ц во моментот. 1096 00:48:30,410 --> 00:48:33,100 Но, секој друг проблем во собата, сигурно Марио и Цезар 1097 00:48:33,100 --> 00:48:35,300 и Vigenere и [? Попуштат?] И наваму, ние 1098 00:48:35,300 --> 00:48:39,520 може повторно да се имплементираат во PHP, и веројатно малку полесно. 1099 00:48:39,520 --> 00:48:43,050 >> Но, она што ние сме во крајна линија ќе да го користите PHP за е веб програмирање. 1100 00:48:43,050 --> 00:48:46,420 И ние ќе се воведе следната недела ментална модел, парадигма наречена 1101 00:48:46,420 --> 00:48:49,610 MVC, модел поглед контролор, кои, ако сте го направиле програмирање 1102 00:48:49,610 --> 00:48:51,610 пред во Python или Рубин или на друго место, 1103 00:48:51,610 --> 00:48:54,112 би можеле да знаат на овој тим со Шини и Џанго и слично. 1104 00:48:54,112 --> 00:48:55,820 Но, ако сте нови на тоа исто така, ќе видите 1105 00:48:55,820 --> 00:48:59,652 дека ова е всушност многу природни продолжување на факторизација 1106 00:48:59,652 --> 00:49:01,360 и вид на дизајн на кодот кој ние сме 1107 00:49:01,360 --> 00:49:04,670 се прави во C. Ние ќе сега се применуваат некои од тие лекции во PHP 1108 00:49:04,670 --> 00:49:07,190 така што во крајна линија, ние сме спроведување на нашите сопствени веб-сајтови. 1109 00:49:07,190 --> 00:49:09,080 И ако сте вид на маѓепсаа или зачуден 1110 00:49:09,080 --> 00:49:10,954 дека ние сме случува да се направи сите толку брзо, 1111 00:49:10,954 --> 00:49:13,410 сфаќаат дека речиси секој семестар, речиси 90% 1112 00:49:13,410 --> 00:49:16,560 од учениците CS50, вклучувајќи ги и оние кои никогаш не програмиран пред, 1113 00:49:16,560 --> 00:49:20,329 заврши прави последните проекти кои се базираат на веб програмирање. 1114 00:49:20,329 --> 00:49:23,120 И така ќе видите дека се враќа се високи во неделите што доаѓаат. 1115 00:49:23,120 --> 00:49:24,965 Па ние ќе се видиме тогаш во понеделникот. 1116 00:49:24,965 --> 00:49:27,260 1117 00:49:27,260 --> 00:49:30,120 >> ЗВУЧНИЦИ 1: А сега, длабоко Мисли од Daven Farnham. 1118 00:49:30,120 --> 00:49:34,055 1119 00:49:34,055 --> 00:49:34,780 Хаш маси. 1120 00:49:34,780 --> 00:49:37,180 1121 00:49:37,180 --> 00:49:38,402 >> [Смеа] 1122 00:49:38,402 --> 00:49:38,902