1 00:00:00,000 --> 00:00:01,390 2 00:00:01,390 --> 00:00:04,890 >> [MUZYKA GRY] 3 00:00:04,890 --> 00:00:10,955 4 00:00:10,955 --> 00:00:12,580 DAVID J MALAN: Dobra, witamy z powrotem. 5 00:00:12,580 --> 00:00:13,600 To CS50. 6 00:00:13,600 --> 00:00:15,540 To jest koniec tygodnia siedem. 7 00:00:15,540 --> 00:00:18,180 I to jest koniec tego wymiatacza Polowanie z problemu ustawić cztery 8 00:00:18,180 --> 00:00:19,220 które można przywołać. 9 00:00:19,220 --> 00:00:21,650 Po odzyskaniu wszystkich tych pracowników, JPEG 10 00:00:21,650 --> 00:00:24,820 ty zostały zakwestionowane, jeśli chcesz, fotografować się z jak wielu 11 00:00:24,820 --> 00:00:25,981 z tych ludzi, jak to możliwe. 12 00:00:25,981 --> 00:00:28,480 Mamy całą masę zgłoszeń w ciągu ostatnich kilku tygodni, 13 00:00:28,480 --> 00:00:32,980 Rzeczywiście, sporo tuż przed południem Obecnie, z których niektóre są tymi tutaj 14 00:00:32,980 --> 00:00:37,670 złapać tutaj in-- wygląda like-- Annenberg Hall w godzinach pracy, jeden tutaj 15 00:00:37,670 --> 00:00:39,530 w Lowell House z Nickiem. 16 00:00:39,530 --> 00:00:41,750 Oto Ramon przyłapania na telefon. 17 00:00:41,750 --> 00:00:43,870 To było na lunchu CS50. 18 00:00:43,870 --> 00:00:46,840 To był Jason Skyping z bardziej kreatywne kolega, 19 00:00:46,840 --> 00:00:48,280 który zadzwonił do niego w ten sposób. 20 00:00:48,280 --> 00:00:49,690 Nie wiemy, co to było. 21 00:00:49,690 --> 00:00:51,940 >> [Śmiech] 22 00:00:51,940 --> 00:00:54,570 >> DAVID J MALAN: Ale że warto gigabajt. 23 00:00:54,570 --> 00:00:56,960 Oto Chang, który dosłownie uciekła ze sceny 24 00:00:56,960 --> 00:01:00,480 uniknąć sfotografowany jeden dzień, ale w końcu został złapany. 25 00:01:00,480 --> 00:01:02,050 Oto Nick. 26 00:01:02,050 --> 00:01:03,480 Oto Nick. 27 00:01:03,480 --> 00:01:04,080 Oto Nick. 28 00:01:04,080 --> 00:01:05,090 29 00:01:05,090 --> 00:01:07,670 I tu jest Alison dół przez pola. 30 00:01:07,670 --> 00:01:11,840 I Zamyla stwierdzono nawet w konkursie tańca towarzyskiego. 31 00:01:11,840 --> 00:01:14,100 Więc przechodzimy te zdjęcia, dowiedzieć się, 32 00:01:14,100 --> 00:01:16,690 który złożył najbardziej najwcześniej, a nagroda 33 00:01:16,690 --> 00:01:20,662 jeden wspaniałe nagrody, jak obiecał w spec. 34 00:01:20,662 --> 00:01:23,120 I my również śledzić temat miejsca, które był zaangażowany. 35 00:01:23,120 --> 00:01:26,860 >> Kilka announcements-- więc obiad jest, ponownie, w ten piątek na 13:15. 36 00:01:26,860 --> 00:01:30,420 Jeśli chcesz do nas dołączyć, RSVP w tym URL tutaj. 37 00:01:30,420 --> 00:01:33,730 Jason ponownie pojawi się tutaj z jednej odcinków kilka lat 38 00:01:33,730 --> 00:01:35,510 z powrotem, co się stało spadnie na Halloween. 39 00:01:35,510 --> 00:01:38,950 I rzeczywiście, jak się ubrać dynia na dany rok. 40 00:01:38,950 --> 00:01:42,700 Jeśli oglądasz ten rozdział jego z sekcji 2011 41 00:01:42,700 --> 00:01:46,480 osiem, jeśli jesteś ciekaw, w CS50.tv, myślę, 42 00:01:46,480 --> 00:01:49,730 to był rok, w którym Jego pompa powietrza działa. 43 00:01:49,730 --> 00:01:52,490 >> Jeśli następnie oglądać podobna sekcja w roku 2012, 44 00:01:52,490 --> 00:01:55,620 zobaczysz to Jason znacznie zaniżone, ponieważ nie funkcjonował garnitur, 45 00:01:55,620 --> 00:01:58,060 który jest tylko powiedzieć w ten piątek, gdybyś 46 00:01:58,060 --> 00:02:02,720 jak wyrzeźbić dyni z Daven i Gabe i inni, RSVP do głów 47 00:02:02,720 --> 00:02:04,480 w cs50.harvard.edu adres. 48 00:02:04,480 --> 00:02:06,200 Zapowiada się świetna zabawa. 49 00:02:06,200 --> 00:02:08,660 Daven, jesteśmy powiedział, rzeźbione dynie całe życie. 50 00:02:08,660 --> 00:02:11,930 Gabriel z Brazylii nie ma rzeźbione dyni na Halloween. 51 00:02:11,930 --> 00:02:14,700 Więc być tam z nimi, jak on uczy. 52 00:02:14,700 --> 00:02:16,830 >> Seminaria, meanwhile-- tak dowiesz się wkrótce 53 00:02:16,830 --> 00:02:20,650 o tym, co nasze oczekiwania są dla projekt końcowy, który zasadniczo 54 00:02:20,650 --> 00:02:23,150 będzie sprowadzać się do projektowanie i wdrażanie 55 00:02:23,150 --> 00:02:26,440 Najbardziej każdy projekt zainteresować Ci, choć podlega zatwierdzeniu 56 00:02:26,440 --> 00:02:28,490 i wskazówki od kolegów nauczycieli. 57 00:02:28,490 --> 00:02:32,110 Pod koniec semestr, wprowadzamy numer 58 00:02:32,110 --> 00:02:35,610 seminariów, które są fakultatywne zajęcia prowadzone przez kolegów nauczania i Harvard 59 00:02:35,610 --> 00:02:38,570 Pracownicy, przyjaciele trakcie całej Kampus, na różne tematy 60 00:02:38,570 --> 00:02:41,470 są styczne do Podstawowym zakresem szkolenia w 61 00:02:41,470 --> 00:02:45,590 niemniej jednak zastosowanie, zabawa, i różne dla potencjalnych projektów końcowych. 62 00:02:45,590 --> 00:02:49,530 >> Na przykład, po pierwsze, jeśli chcieliby do rejestracji, tam głowę do tego adresu URL. 63 00:02:49,530 --> 00:02:53,010 I to jest skład na tegoroczne seminaria sam. 64 00:02:53,010 --> 00:02:56,060 Ale sobie sprawę, mamy dziesiątki seminaria z dawnych lat, z których wszystkie 65 00:02:56,060 --> 00:02:59,774 są połączone z menu Seminars Opcja stronie kursu jest. 66 00:02:59,774 --> 00:03:02,190 Więc jeśli myślisz o wykraczające poza strefę komfortu 67 00:03:02,190 --> 00:03:05,060 lub zbierając kilka nowych umiejętności, na przykład programowanie iPhone 68 00:03:05,060 --> 00:03:08,100 aplikacje z Swift, nowy język z Apple lub Objective-C 69 00:03:08,100 --> 00:03:11,230 lub aplikacje Android lub programowania [? cue?] żarówki, lub którykolwiek z tematów 70 00:03:11,230 --> 00:03:15,490 tu i więcej, z powodu wyboru na stronie rejestracji. 71 00:03:15,490 --> 00:03:19,730 >> Więc zaczęliśmy i zostały zawarte na Poniedziałek z patrząc na HTTP. 72 00:03:19,730 --> 00:03:22,675 Tak szybkie refresher-- HTTP, Hypertext Transfer Protocol. 73 00:03:22,675 --> 00:03:24,045 Ale co to tak naprawdę oznacza? 74 00:03:24,045 --> 00:03:26,805 75 00:03:26,805 --> 00:03:27,930 Co to tak naprawdę oznacza? 76 00:03:27,930 --> 00:03:30,665 77 00:03:30,665 --> 00:03:31,290 Czy to ręka? 78 00:03:31,290 --> 00:03:33,074 79 00:03:33,074 --> 00:03:34,740 Wiem, że jesteś po prostu zarysowania głowę. 80 00:03:34,740 --> 00:03:36,400 Ale chcesz zaproponować co HTTP jest? 81 00:03:36,400 --> 00:03:37,792 82 00:03:37,792 --> 00:03:40,576 >> Komputery jak: Widownia komunikować się z [niesłyszalne]. 83 00:03:40,576 --> 00:03:41,517 84 00:03:41,517 --> 00:03:43,100 DAVID J MALAN: brakowało mi ostatnią część. 85 00:03:43,100 --> 00:03:45,774 Jak komputery komunikują with-- 86 00:03:45,774 --> 00:03:47,325 >> Serwery internetowe: publiczność. 87 00:03:47,325 --> 00:03:50,450 DAVID J MALAN: dobre-z internetu serwery, aw szczególności, serwery WWW. 88 00:03:50,450 --> 00:03:53,533 Z powodu wycofania, jest kilka usług w Internecie, z których niektóre 89 00:03:53,533 --> 00:03:57,349 Prawdopodobnie używasz codziennie między czacie i wiadomości, czat i www i e-mail, 90 00:03:57,349 --> 00:03:57,890 i podobne. 91 00:03:57,890 --> 00:04:00,900 I HTTP jest tylko Protokół przeglądarek internetowych 92 00:04:00,900 --> 00:04:03,750 mówić, gdy komunikuje się z serwery WWW, i vice versa. 93 00:04:03,750 --> 00:04:05,580 I analog ludzki świat może być, 94 00:04:05,580 --> 00:04:08,730 Kieruję moją rękę uścisnąć niektóre inne człowieka i on 95 00:04:08,730 --> 00:04:11,970 przyznaje, rozszerzając jego lub jej ręka również. 96 00:04:11,970 --> 00:04:13,970 Więc to tylko protokół, zestaw konwencji. 97 00:04:13,970 --> 00:04:15,630 >> A co w istocie są te konwencje? 98 00:04:15,630 --> 00:04:18,640 Cóż, to po prostu sprowadza się do wysyłanie wiadomości iz powrotem, 99 00:04:18,640 --> 00:04:19,770 jak pokazano tutaj. 100 00:04:19,770 --> 00:04:22,520 I jest kilka sposobów które można wysyłać takie wiadomości. 101 00:04:22,520 --> 00:04:24,360 I być może najbardziej powszechne jest znany jako get. 102 00:04:24,360 --> 00:04:26,510 I zobaczymy, kontrast to niedługo. 103 00:04:26,510 --> 00:04:30,010 >> Ale wniosek uzyskać z poziomu przeglądarki do serwera po prostu wygląda tak. 104 00:04:30,010 --> 00:04:32,960 To kilka tekstów, które stawia wewnątrz wirtualnej obwiedni. 105 00:04:32,960 --> 00:04:35,854 Na zewnętrznej kopercie przejść kilka kawałków szczegółów. 106 00:04:35,854 --> 00:04:37,770 Co musi się udać na koperta, że ​​tak powiem, 107 00:04:37,770 --> 00:04:41,820 W celu uzyskania takiego żądania to ode mnie na serwer WWW? 108 00:04:41,820 --> 00:04:42,320 Tak. 109 00:04:42,320 --> 00:04:43,270 >> Publiczność: Twój adres IP. 110 00:04:43,270 --> 00:04:45,890 >> DAVID J MALAN: Mój adres IP w polu Od, by tak rzec, 111 00:04:45,890 --> 00:04:49,490 i oczywiście, adres IP odbiorcy. 112 00:04:49,490 --> 00:04:52,710 Jednak w przypadku pakietu internetowej potrzebujemy trochę więcej szczegółów 113 00:04:52,710 --> 00:04:55,254 To nie wystarczy tylko wysłać kopertę do serwera, 114 00:04:55,254 --> 00:04:57,670 dlatego, że serwer może być nasłuchiwanie różnych typów 115 00:04:57,670 --> 00:04:59,180 ruchu internetowego. 116 00:04:59,180 --> 00:05:01,370 Więc co jeszcze musimy zrobić oprócz IP odbiorcy? 117 00:05:01,370 --> 00:05:02,723 118 00:05:02,723 --> 00:05:03,222 Tak? 119 00:05:03,222 --> 00:05:04,241 >> Publiczność: Czy TCP? 120 00:05:04,241 --> 00:05:05,074 DAVID J MALAN: Dobra. 121 00:05:05,074 --> 00:05:06,470 TCP-- 122 00:05:06,470 --> 00:05:07,340 >> Publiczność: Adres. 123 00:05:07,340 --> 00:05:09,340 >> DAVID J MALAN: Adres, lub port, jak to się nazywa. 124 00:05:09,340 --> 00:05:11,010 Blisko, ale numer portu TCP. 125 00:05:11,010 --> 00:05:12,220 I jest kilka z nich. 126 00:05:12,220 --> 00:05:14,310 Ale na pewno najbardziej Należy w końcu znajomy 127 00:05:14,310 --> 00:05:17,590 być 80, co jest domyślnym jeden wykorzystywane do ruchu w sieci. 128 00:05:17,590 --> 00:05:20,040 A inny znajomy Wkrótce będzie jeden 443, 129 00:05:20,040 --> 00:05:24,280 który stosuje się do bezpiecznej internetowej ruchu, adresy URL, które zaczynają się od https. 130 00:05:24,280 --> 00:05:26,650 >> Więc to, co się dzieje wewnątrz tej koperty. 131 00:05:26,650 --> 00:05:29,780 I uzyskać / po prostu oznacza, dać mi domyślna strona. 132 00:05:29,780 --> 00:05:32,700 Daj mi korzeń trudne jechać na tym serwerze. 133 00:05:32,700 --> 00:05:36,050 I miejmy nadzieję, www Serwer odpowie, OK 134 00:05:36,050 --> 00:05:39,630 i numer 200, który jest po prostu Konwencja mówi, tak, wszystkie 135 00:05:39,630 --> 00:05:40,470 jest rzeczywiście OK. 136 00:05:40,470 --> 00:05:41,680 Oto strona. 137 00:05:41,680 --> 00:05:45,510 Rodzaj strony internetowej będzie być tekst, ale bardziej konkretnie, HTML, 138 00:05:45,510 --> 00:05:47,010 które mamy zamiar nurkować z powrotem do. 139 00:05:47,010 --> 00:05:49,877 I kropka kropka kropka tylko środki, tutaj jest HTML. 140 00:05:49,877 --> 00:05:51,710 I to gdzie odebrać dziś historię, 141 00:05:51,710 --> 00:05:55,740 rzeczywiście pisanie kodu HTML, HyperText Markup Language, które 142 00:05:55,740 --> 00:05:57,727 jest język, w którym Strony internetowe są napisane. 143 00:05:57,727 --> 00:05:59,060 To nie jest język programowania. 144 00:05:59,060 --> 00:06:01,270 Nie ma funkcje lub pętle lub warunki. 145 00:06:01,270 --> 00:06:03,800 Jest to język znaczników, jak dobrze znów zobaczyć dzisiaj, 146 00:06:03,800 --> 00:06:07,240 że pozwala na określenie jak struktura i stylizować 147 00:06:07,240 --> 00:06:09,300 estetycznie strona. 148 00:06:09,300 --> 00:06:11,470 >> Więc to był jeden i tak naprawdę tylko strona 149 00:06:11,470 --> 00:06:13,930 spojrzał na razie krótko, w poniedziałek. 150 00:06:13,930 --> 00:06:16,250 I zauważyć kilka Najważniejsze charakterystyki. 151 00:06:16,250 --> 00:06:20,170 Istnieje wiele otwartych kątowe Uchwyt i blisko kątowy wspornik. 152 00:06:20,170 --> 00:06:23,160 W między tymi, kątowe Uchwyty są słowa. 153 00:06:23,160 --> 00:06:25,660 I mamy zamiar rozpocząć nazywając te słowa tagi. 154 00:06:25,660 --> 00:06:28,800 Więc głowa wspornik otwarty Uchwyt głowicy i zamknięte 155 00:06:28,800 --> 00:06:33,620 są otwarte i zamknięte znaczniki, lub rozpoczęcia i zakończenia tagi 156 00:06:33,620 --> 00:06:37,660 odpowiednio, elementu HTML, jak my to nazywamy, zwany głową. 157 00:06:37,660 --> 00:06:41,760 I stosuje ten sam żargon z ciałem HTML i tak dalej. 158 00:06:41,760 --> 00:06:43,970 >> A co miłe jest HTML-- i rzeczywiście, będziemy 159 00:06:43,970 --> 00:06:47,187 strasznie mało czasu spędzają na nim, ponieważ będziesz po prostu dowiedzieć się, w większości 160 00:06:47,187 --> 00:06:49,770 jakie funkcje ma, gdy faktycznie mają konkretny problem, 161 00:06:49,770 --> 00:06:52,820 do solve-- przekonasz się, że Przeglądarka jest bardzo głupi. 162 00:06:52,820 --> 00:06:56,450 To po prostu będzie do-- podobnie computer-- co powiedzieć to zrobić. 163 00:06:56,450 --> 00:06:59,279 I tak, gdy masz otwarte Uchwyt HTML na samej górze 164 00:06:59,279 --> 00:07:01,320 tam, że w istocie oznacza po prostu, hej, przeglądarka, 165 00:07:01,320 --> 00:07:04,090 tutaj jest strona, napisana w HTML. 166 00:07:04,090 --> 00:07:06,130 >> Kiedy widzi otwarty uchwyt głowy, że po prostu oznacza, 167 00:07:06,130 --> 00:07:10,350 hej, przeglądarka, tutaj jest szef, lub najwyższa część mojej stronie internetowej. 168 00:07:10,350 --> 00:07:14,192 Kiedy widzi wspornik zamknięty głowy, że po prostu oznacza, hej, 169 00:07:14,192 --> 00:07:15,150 to wszystko na głowie. 170 00:07:15,150 --> 00:07:16,420 Czuwanie na coś innego. 171 00:07:16,420 --> 00:07:18,878 I to jest coś innego podobno będzie ciało. 172 00:07:18,878 --> 00:07:22,630 A jeśli nie masz, jak tag masz tylko cześć, przecinek, świat, 173 00:07:22,630 --> 00:07:26,610 że po prostu będzie surowy, że tekst ostatecznie jest wyświetlany na ekranie. 174 00:07:26,610 --> 00:07:29,220 >> Teraz można zauważyć też wcięcie tutaj. 175 00:07:29,220 --> 00:07:32,160 Prawdopodobnie można wywnioskować, jak mamy stylizując go. 176 00:07:32,160 --> 00:07:34,850 Za każdym razem, gdy otwieram tag, że tak powiem, to wcięcie. 177 00:07:34,850 --> 00:07:38,540 I za każdym razem zamykam tag, ja nie-tiret, 178 00:07:38,540 --> 00:07:40,690 w duchu podobnym do klamrach. 179 00:07:40,690 --> 00:07:43,470 A poza tym, jestem miły korzystania mój osąd. 180 00:07:43,470 --> 00:07:48,380 Zauważ, że nie przeszkadza uderzenia Wprowadź wewnątrz tego tagu tytułu. 181 00:07:48,380 --> 00:07:48,990 Dlaczego? 182 00:07:48,990 --> 00:07:51,920 Cóż, po prostu zdecydował, że wyglądał trochę czystsze do mnie, człowieka, 183 00:07:51,920 --> 00:07:53,181 po prostu nie przeszkadza robić. 184 00:07:53,181 --> 00:07:54,930 Więc znowu, istnieje pewne Orzeczenie wymaga tylko 185 00:07:54,930 --> 00:07:57,670 jak jest w C lub dowolnym języku. 186 00:07:57,670 --> 00:08:04,110 >> Ale zauważmy też, że to wgłębienie nadaje się do modelu mentalnego, 187 00:08:04,110 --> 00:08:05,670 nie do ponad skomplikować. 188 00:08:05,670 --> 00:08:07,020 Ale drzewo, prawda? 189 00:08:07,020 --> 00:08:09,290 Jeśli myślisz o Internecie Strona, najwyraźniej napisane 190 00:08:09,290 --> 00:08:12,050 tak, jak jest ładnie wcięty w ten sposób, 191 00:08:12,050 --> 00:08:17,390 można prawie myśleć o otwartym uchwytem Uchwyt zamknięty tag HTML jest rozgraniczenia 192 00:08:17,390 --> 00:08:21,380 główny węzeł, drzewo genealogiczne węzeł styl w stylu drzewa 193 00:08:21,380 --> 00:08:22,900 patrzyliśmy na ostatni piątek. 194 00:08:22,900 --> 00:08:27,630 >> I rzeczywiście, mamy tu na co my nazywamy DOM, D-O-M, dokument 195 00:08:27,630 --> 00:08:31,680 model obiektowy, fantazyjny sposób na powiedzenie drzewo, które stanowi, że HTML. 196 00:08:31,680 --> 00:08:36,140 I zauważ, że HTML ma, to mówimy, jak drzewo rodziny, dwoje dzieci. 197 00:08:36,140 --> 00:08:37,659 Po lewej stronie jest głowa. 198 00:08:37,659 --> 00:08:39,179 Po prawej stronie jest ciało. 199 00:08:39,179 --> 00:08:44,220 >> I tak jak bezmyślnej myśli ćwiczenia, głowy, oczywiście, jak wiele dzieci ma 200 00:08:44,220 --> 00:08:46,070 Zgodnie z tą strukturą? 201 00:08:46,070 --> 00:08:48,200 Więc po prostu jeden, title-- i dlatego mamy 202 00:08:48,200 --> 00:08:50,580 strzałka będzie od głowy do tytułu. 203 00:08:50,580 --> 00:08:55,110 Więc to jest tak, jakby w tej osoby drzewo genealogiczne miał tylko jednego potomka. 204 00:08:55,110 --> 00:08:58,230 A potem sam tytuł może można powiedzieć, aby mieć dziecko też. 205 00:08:58,230 --> 00:09:01,780 >> Przypomnijmy, że miał HTML witam, przecinek, świat pod nią. 206 00:09:01,780 --> 00:09:06,090 A ja po prostu wyciągnąć go w owalny zamiast prostokąta tylko 207 00:09:06,090 --> 00:09:10,559 przekazać, że choć semantycznie to węzeł w drzewie, że tak powiem, 208 00:09:10,559 --> 00:09:12,100 To coś w rodzaju zasadniczo różne. 209 00:09:12,100 --> 00:09:12,800 To nie jest znacznik. 210 00:09:12,800 --> 00:09:14,780 Lub bardziej poprawnie, to nie jest elementem. 211 00:09:14,780 --> 00:09:16,590 To tylko węzeł tekstowy, jeśli będzie. 212 00:09:16,590 --> 00:09:18,990 Ale to są zupełnie arbitralne konwencje człowieka. 213 00:09:18,990 --> 00:09:23,180 To jest właśnie mój sposób reprezentujący co będę jako kruszywo 214 00:09:23,180 --> 00:09:24,340 nazwać dokument. 215 00:09:24,340 --> 00:09:27,750 >> A na marginesie, w rzeczy Super lewym górnym rogu, 216 00:09:27,750 --> 00:09:32,080 otwarty nawias wykrzyknik doc typu HTML, to wygląda jak znak, 217 00:09:32,080 --> 00:09:35,560 ale głupi przypadek rogu gdzie że to właśnie tam, kopiować i wklejać 218 00:09:35,560 --> 00:09:38,460 wskazanie przeglądarek to jest wersja HTML 5. 219 00:09:38,460 --> 00:09:41,540 Świat się zmienia, co Pierwsza linia kodu na stronie powinna być. 220 00:09:41,540 --> 00:09:43,820 To po prostu oznacza, wersja 5. 221 00:09:43,820 --> 00:09:45,950 Więc to nie dość wyglądać jak inni. 222 00:09:45,950 --> 00:09:48,120 >> Dobrze, że tak się powiedział, będziesz teraz doceniam 223 00:09:48,120 --> 00:09:50,767 to dość to głupie tatuaż ktoś dostał. 224 00:09:50,767 --> 00:09:51,990 >> [Śmiech] 225 00:09:51,990 --> 00:09:54,210 >> DAVID J MALAN: Dobra, A teraz faktycznie nurkowania 226 00:09:54,210 --> 00:09:55,710 do robienia czegoś z tym. 227 00:09:55,710 --> 00:09:58,610 Będziesz przypomnieć, że ostatni raz I otworzył Appliance CS50 228 00:09:58,610 --> 00:10:01,650 i zrobiłem coś tak proste, jak otwarcie gedit. 229 00:10:01,650 --> 00:10:05,190 I zapisaniu pliku, nawet na mój desktop-- nigdzie special-- 230 00:10:05,190 --> 00:10:05,870 jak hello.html. 231 00:10:05,870 --> 00:10:07,100 232 00:10:07,100 --> 00:10:10,984 >> Więc pozwól mi to zrobić again-- hello.html Enter. 233 00:10:10,984 --> 00:10:13,900 A teraz w tym pliku, będę śmiało i replikacji, co właśnie 234 00:10:13,900 --> 00:10:18,850 saw-- doc typu html Potem zamierzam Uchwyt HTML zrobić otwarty zamknięty uchwyt. 235 00:10:18,850 --> 00:10:21,890 A potem będę zapobiegawczo otworzyć i zamknąć znacznik. 236 00:10:21,890 --> 00:10:22,390 Dlaczego? 237 00:10:22,390 --> 00:10:23,598 Wystarczy więc nie zapomnij później. 238 00:10:23,598 --> 00:10:26,850 To po prostu dobra praktyka, jak otwarcie i zamykanie nawiasów klamrowych na raz. 239 00:10:26,850 --> 00:10:28,900 >> A potem, co było dalej? 240 00:10:28,900 --> 00:10:30,582 Można myśleć o tatuażu. 241 00:10:30,582 --> 00:10:31,450 >> Publiczność: głowa. 242 00:10:31,450 --> 00:10:32,500 >> DAVID J MALAN: głowa. 243 00:10:32,500 --> 00:10:36,020 A następnie w tutaj, miał tytuł, myślę. 244 00:10:36,020 --> 00:10:39,886 A tytuł był arbitralny, hello, world blisko tytułu. 245 00:10:39,886 --> 00:10:42,760 A potem na dół, ciało, z course-- następnie zamykamy znacznik ciała. 246 00:10:42,760 --> 00:10:45,660 A potem po prostu trochę niepotrzebnie, Miałem to samo tutaj. 247 00:10:45,660 --> 00:10:47,150 >> Tak więc twierdzenie, że jest to strona internetowa. 248 00:10:47,150 --> 00:10:49,050 To jest coś, mogą teraz żyć w Internecie, 249 00:10:49,050 --> 00:10:51,925 chociaż oczywiście to dosłownie życia na pulpicie teraz. 250 00:10:51,925 --> 00:10:55,837 Ale rzeczywiście, jeśli zminimalizować gedit, Do zobaczenia na pulpicie jej ikona. 251 00:10:55,837 --> 00:10:58,420 Mimo, że jest to urządzenie, można to zrobić w systemie Mac OS 252 00:10:58,420 --> 00:11:01,580 bez TextEdit lub Okna z Notatnika nawet. 253 00:11:01,580 --> 00:11:06,115 >> A jeśli pójdę dalej i kliknij dwukrotnie że nawet i wybrać-- dobrze, niech 254 00:11:06,115 --> 00:11:07,990 nie zaznaczyć, że ponieważ Chrome nie jest otwarcie. 255 00:11:07,990 --> 00:11:09,281 Idziemy do przodu i otworzyć Chrome. 256 00:11:09,281 --> 00:11:10,160 257 00:11:10,160 --> 00:11:14,040 A następnie wykonaj polecenia open-O dla I przejdź do mojego pulpitu 258 00:11:14,040 --> 00:11:15,320 i otwórz ten plik. 259 00:11:15,320 --> 00:11:20,120 W ten sposób przeglądarka interpretuje HTML, od góry do dołu, od lewej do prawej. 260 00:11:20,120 --> 00:11:21,314 Hej, tu jest przeglądarka HTML. 261 00:11:21,314 --> 00:11:21,980 Oto głowa. 262 00:11:21,980 --> 00:11:23,250 Oto tytuł. 263 00:11:23,250 --> 00:11:24,090 Oto ciało. 264 00:11:24,090 --> 00:11:26,620 I rzeczywiście, to jak to sprawia, że ​​stronę internetową. 265 00:11:26,620 --> 00:11:27,800 >> Ale zwróć uwagę na adres URL. 266 00:11:27,800 --> 00:11:32,430 Nikt z was nie może ciągnąć się tego specyficznego Strona na swoich laptopach w tej chwili, 267 00:11:32,430 --> 00:11:34,910 nawet wewnątrz Twojego Urządzenie za pośrednictwem tego adresu URL, 268 00:11:34,910 --> 00:11:40,130 ponieważ pliku: // oznacza to faktycznie w moim systemie plików, mój dysk twardy, 269 00:11:40,130 --> 00:11:40,990 nie twoje. 270 00:11:40,990 --> 00:11:42,440 Więc to nie jest tak użyteczne. 271 00:11:42,440 --> 00:11:44,940 >> Załóżmy teraz ruch w kierunku zastosowanie rzeczywistej serwera WWW. 272 00:11:44,940 --> 00:11:48,309 I okazuje się, że CS50 Appliance to więcej niż tylko środowisko, w którym 273 00:11:48,309 --> 00:11:51,100 można napisać kod w C i skompilować i uruchomić go jak już robi. 274 00:11:51,100 --> 00:11:55,500 To również zostało skonfigurowane przez Pracownicy reprezentować typowy internecie 275 00:11:55,500 --> 00:11:58,290 Serwer to w internecie, jeden, że może zapłacić za 276 00:11:58,290 --> 00:12:00,210 lub taki, który znajduje się w tak zwanym chmury. 277 00:12:00,210 --> 00:12:02,600 >> I to działa Standard darmo open source 278 00:12:02,600 --> 00:12:06,160 oprogramowanie, na przykład czegoś nazwie Apache, który jest być może 279 00:12:06,160 --> 00:12:08,700 nadal najpopularniejszym internetowej Oprogramowanie serwera na świecie 280 00:12:08,700 --> 00:12:11,030 że tysiące stron internetowych użyć dzisiaj. 281 00:12:11,030 --> 00:12:13,420 I to również ma nawet Oprogramowanie jak MySQL, 282 00:12:13,420 --> 00:12:16,240 który jest serwera bazy że uda nam się w końcu dostać się do, 283 00:12:16,240 --> 00:12:18,330 który jest tylko powiedzieć Mogę zacząć leczenie 284 00:12:18,330 --> 00:12:22,040 moje urządzenie jako pełnoprawny serwer rozwiniętego że nie będę płacić za gdzie indziej. 285 00:12:22,040 --> 00:12:25,980 To po prostu żyje własnym laptopem do cele rozwoju i wygody. 286 00:12:25,980 --> 00:12:27,870 >> Więc śmiało skorzystać z tego. 287 00:12:27,870 --> 00:12:30,120 Mam zamiar iść do przodu i otworzyć okno terminala. 288 00:12:30,120 --> 00:12:33,030 I mam zamiar iść do przodu i move-- rzeczywiście, pierwszy jestem 289 00:12:33,030 --> 00:12:34,860 zamierza przejść do mojego pulpitu. 290 00:12:34,860 --> 00:12:36,400 Jeśli zrobić ls, nie hello.html. 291 00:12:36,400 --> 00:12:37,022 292 00:12:37,022 --> 00:12:38,730 I zamierzam iść do przodu i zacząć używać 293 00:12:38,730 --> 00:12:40,800 mamy nowy katalog nie stosować przed dzisiaj. 294 00:12:40,800 --> 00:12:46,840 >> hello.html-- Zamierzam przenieść do ../vhosts dla wirtualnego hosts-- 295 00:12:46,840 --> 00:12:50,940 więcej na ten temat w future-- a następnie do katalogu o nazwie localhost, 296 00:12:50,940 --> 00:12:54,420 co jest podane do niemal pseudonim każdy komputer, czy jest to Mac, PC, 297 00:12:54,420 --> 00:12:57,560 Linux lub komputer, a następnie specjalnie do katalogu, że my, 298 00:12:57,560 --> 00:13:01,260 Pracownicy już stworzony dla ciebie, gdy Urządzenie zostało pobrane nazwie 299 00:13:01,260 --> 00:13:01,760 publicznego. 300 00:13:01,760 --> 00:13:04,551 I jak sama nazwa wskazuje, nic I umieścić w tym folderze, w teorii, 301 00:13:04,551 --> 00:13:07,790 będzie teraz publicznych, przynajmniej ludzi 302 00:13:07,790 --> 00:13:10,030 którzy mają bezpośredni Podłączenie do komputera. 303 00:13:10,030 --> 00:13:13,160 >> Więc teraz pozwól mi iść do przodu i wykonać cd do tego samego katalogu 304 00:13:13,160 --> 00:13:15,490 więc można zobaczyć, co jest dzieje i typu ls. 305 00:13:15,490 --> 00:13:17,630 I rzeczywiście, to Jedyne, co tam jest. 306 00:13:17,630 --> 00:13:23,250 I twierdzą, że teraz, bo mam umieścić to złożyć hello.html wewnątrz katalogu 307 00:13:23,250 --> 00:13:26,940 nazywa się wewnątrz katalogu publicznego nazwie localhost wewnątrz katalogu 308 00:13:26,940 --> 00:13:29,810 vhostów, które nazywane dzięki pracowników CS50 309 00:13:29,810 --> 00:13:34,390 zostały wstępnie skonfigurowany do główny serwer WWW, 310 00:13:34,390 --> 00:13:36,900 Teraz mam nadzieję, że mogę to zrobić. 311 00:13:36,900 --> 00:13:38,390 >> Mam zamiar otworzyć nową kartę. 312 00:13:38,390 --> 00:13:40,090 I zamierzam iść nie do file: //. 313 00:13:40,090 --> 00:13:44,520 Mam zamiar używać rzeczywisty http / localhost, które 314 00:13:44,520 --> 00:13:47,470 ponownie, to pseudonim na własnym serwerze. 315 00:13:47,470 --> 00:13:51,085 A potem mam zamiar udać się do tego, co nazwę pliku, po prostu być jasne? 316 00:13:51,085 --> 00:13:52,680 317 00:13:52,680 --> 00:13:54,320 Gdzie jest ta historia prawdopodobnie będzie? 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 >> Więc innymi słowy, chcę teraz tego jest mój własny komputer, moje własne urządzenie, 322 00:14:04,270 --> 00:14:05,660 jakby to rzeczywisty serwer. 323 00:14:05,660 --> 00:14:07,490 Jego pseudonim jest localhost. 324 00:14:07,490 --> 00:14:10,210 Ale myślę o localhost jak jak Facebook.com google.com, cokolwiek. 325 00:14:10,210 --> 00:14:11,600 To tylko moja lokalna nazwa. 326 00:14:11,600 --> 00:14:14,810 A następnie ostateczna chcę jest główny dysk twardy, by tak rzec, 327 00:14:14,810 --> 00:14:17,729 lub głównego serwera WWW, ergo ukośnik, a następnie 328 00:14:17,729 --> 00:14:18,770 hello.html nazwa pliku. 329 00:14:18,770 --> 00:14:19,880 330 00:14:19,880 --> 00:14:21,930 >> Pozwól, że oddalenie i naciśnij Enter. 331 00:14:21,930 --> 00:14:24,266 I rzeczywiście, nie jest teraz moja strona internetowa. 332 00:14:24,266 --> 00:14:25,390 Więc to jest nieco inna. 333 00:14:25,390 --> 00:14:26,880 I to jest tak rozczarowująca. 334 00:14:26,880 --> 00:14:27,904 To jest stara wersja. 335 00:14:27,904 --> 00:14:29,070 Pozwól mi zmniejszyć czcionkę powrotem. 336 00:14:29,070 --> 00:14:29,745 To życia. 337 00:14:29,745 --> 00:14:30,890 Jest to nowe. 338 00:14:30,890 --> 00:14:35,430 Ale co się dzieje fundamentalnie jest teraz, że HTTP jest używany. 339 00:14:35,430 --> 00:14:39,344 >> Zróbmy to trochę bardziej jasne lub, jeśli chcesz, trochę bardziej skomplikowane. 340 00:14:39,344 --> 00:14:41,760 Pozwólcie mi iść do prawej dolnej rogu mojego urządzenia. 341 00:14:41,760 --> 00:14:44,000 I zauważyć, że to wszystko czas, nie było wiele. 342 00:14:44,000 --> 00:14:47,330 Jest to unikalny adres Twojego CS50 Appliance. 343 00:14:47,330 --> 00:14:50,800 Jest to prywatny adres, implikowanych przez 172,16, 344 00:14:50,800 --> 00:14:53,860 co oznacza po prostu tylko fizycznie Można uzyskać dostęp do tego serwera WWW. 345 00:14:53,860 --> 00:14:56,340 Wszystko jest za firewallem i dobrze chronione przed resztą 346 00:14:56,340 --> 00:14:58,130 świata z tego powodu zajęcie. 347 00:14:58,130 --> 00:15:01,920 >> A teraz zauważyć, ale jeśli idę do ten adres, nie w moim urządzeniu, 348 00:15:01,920 --> 00:15:04,340 ale w Mac OS-- idę wrócić tutaj. 349 00:15:04,340 --> 00:15:05,930 To jest teraz mój Mac. 350 00:15:05,930 --> 00:15:08,460 A teraz mam zamiar otworzyć ta wersja Chrome tutaj. 351 00:15:08,460 --> 00:15:17,370 I mam zamiar iść do http: //172.16.25 / A ja zapomnę rest-- 133. 352 00:15:17,370 --> 00:15:25,210 >> Więc mam zamiar odwiedzić z moim Mac że adres IP /hello.html Enter. 353 00:15:25,210 --> 00:15:29,850 A teraz widzę z mojego Mac że moim CS50 Appliance, który jest 354 00:15:29,850 --> 00:15:32,600 Jest to, że adres IP liczba jest rzeczywiście zachowuje 355 00:15:32,600 --> 00:15:34,320 jak serwer WWW w Internecie. 356 00:15:34,320 --> 00:15:36,944 To nie ma miło łatwo pamiętam nazwy jak Facebook.com, 357 00:15:36,944 --> 00:15:40,370 ale jest za pomocą protokołu HTTP najwyraźniej, choć Chrome 358 00:15:40,370 --> 00:15:43,560 jest rodzajem uproszczenia świat dla nas, ale nie pokazuje nam HTTP. 359 00:15:43,560 --> 00:15:46,210 Ale to jest rzeczywiście dokładnie to. 360 00:15:46,210 --> 00:15:48,470 Chrome jest tylko oszczędność niektóre naciśnięcia klawiszy w tych dniach. 361 00:15:48,470 --> 00:15:50,530 A to, co teraz widzimy. 362 00:15:50,530 --> 00:15:51,890 >> Więc to wszystko jest w porządku i dobre. 363 00:15:51,890 --> 00:15:53,740 Ale to dość rozczarowująca strona. 364 00:15:53,740 --> 00:15:56,230 Pozwól mi iść i zrobić coś trochę inaczej teraz. 365 00:15:56,230 --> 00:15:57,910 Więc pozwól mi wrócić do gedit. 366 00:15:57,910 --> 00:16:00,580 I zamiast cześć, świat, postawmy obraz. 367 00:16:00,580 --> 00:16:05,880 I twierdził, ze before-- pozwól mi odejść do mojej publiczności katalogu localhost. 368 00:16:05,880 --> 00:16:10,580 I pozwól mi iść dalej i kopiowanie cała masa plików z dzisiaj 369 00:16:10,580 --> 00:16:15,633 z moim folderze Dropbox na tutaj. 370 00:16:15,633 --> 00:16:19,470 371 00:16:19,470 --> 00:16:21,680 >> Teraz gdybym wpisać ls, poszukaj na wszystkich tych plików 372 00:16:21,680 --> 00:16:24,940 że już dystrybuowane przez strona Kursu wcześniej dzisiaj, 373 00:16:24,940 --> 00:16:26,830 z których jeden jest wciąż hello.html. 374 00:16:26,830 --> 00:16:27,830 Więc nie, że jeden. 375 00:16:27,830 --> 00:16:30,730 I pamiętam ten głupi jeden z ostatniego time-- cat.jpg. 376 00:16:30,730 --> 00:16:34,550 Więc pozwól mi spróbować osadzić cat.jpg wewnątrz mojej stronie internetowej. 377 00:16:34,550 --> 00:16:37,690 >> Mam zamiar iść do przodu i zrobić cat.jpg zapisz. 378 00:16:37,690 --> 00:16:38,950 Pozwól mi wrócić do Chrome. 379 00:16:38,950 --> 00:16:41,140 I pozwól mi przybliżyć czcionki i teraz przeładować. 380 00:16:41,140 --> 00:16:43,090 381 00:16:43,090 --> 00:16:45,030 Ups, gdzie umieścić to? 382 00:16:45,030 --> 00:16:48,210 383 00:16:48,210 --> 00:16:51,520 Standby-- mam jeszcze stary wersja z mojego pulpitu Open. 384 00:16:51,520 --> 00:16:56,020 Więc pozwól mi iść do mojego vhost, mój localhost, mój publiczny i hello.html. 385 00:16:56,020 --> 00:16:57,320 386 00:16:57,320 --> 00:17:00,670 Więc teraz pozwól mi iść do przodu i powiedzieć cat.jpg wewnątrz ciała 387 00:17:00,670 --> 00:17:02,830 gdzie chcę być wyświetlane i przeładować. 388 00:17:02,830 --> 00:17:04,560 Oczywiście, nie jest to poprawne. 389 00:17:04,560 --> 00:17:08,050 >> Więc muszę powiedzieć trochę przeglądarce bardziej świadomie, co chcę robić. 390 00:17:08,050 --> 00:17:10,210 Po prostu wpisując imię oczywiście niewystarczająca. 391 00:17:10,210 --> 00:17:15,134 Więc pamiętam, że nie było innego tag, obraz, img za krótki. 392 00:17:15,134 --> 00:17:17,550 To tylko dlatego, że ludzie nie lubię typu pełne słowa. 393 00:17:17,550 --> 00:17:19,050 A potem możemy zrobić źródło = "cat.jpg". 394 00:17:19,050 --> 00:17:21,470 395 00:17:21,470 --> 00:17:23,550 >> A teraz mam zamiar zrobić jedna rzecz różni się tutaj. 396 00:17:23,550 --> 00:17:25,390 Nawet mimo wszystko nasze dotychczasowe mają tagów 397 00:17:25,390 --> 00:17:28,086 miał to pojęcie rozpocząć i tag tag końcowy, 398 00:17:28,086 --> 00:17:30,210 że tak naprawdę nie zrobić Poczucie na zdjęcie, prawda? 399 00:17:30,210 --> 00:17:32,430 Obraz jest albo czy nie istnieje. 400 00:17:32,430 --> 00:17:36,650 I tak ludzie się z prostszej konwencji. 401 00:17:36,650 --> 00:17:40,310 Gdy masz tag, który może zarówno rozpocząć i zakończyć w tym samym time-- 402 00:17:40,310 --> 00:17:43,790 to może być puste, po prostu tak speak-- umieścić ukośnik wewnątrz znacznika 403 00:17:43,790 --> 00:17:44,710 na samym końcu. 404 00:17:44,710 --> 00:17:45,776 405 00:17:45,776 --> 00:17:47,150 Teraz pozwól mi wrócić do mojej przeglądarki. 406 00:17:47,150 --> 00:17:50,377 Hit Odśwież Cholera, coś jest nie tak. 407 00:17:50,377 --> 00:17:52,460 Prawdopodobnie widziałeś to od czasu do czasu w internecie, 408 00:17:52,460 --> 00:17:53,600 nawet jeśli to nie jest twoja wina. 409 00:17:53,600 --> 00:17:54,766 To wina serwera WWW. 410 00:17:54,766 --> 00:17:56,240 Co ody to zdają się wskazywać? 411 00:17:56,240 --> 00:17:57,450 412 00:17:57,450 --> 00:17:58,009 To złamane. 413 00:17:58,009 --> 00:17:59,300 To miejsce, gdzie należy obraz. 414 00:17:59,300 --> 00:17:59,700 Tak? 415 00:17:59,700 --> 00:18:01,560 >> Publiczność: Ale to nie ma mają dostęp do obrazu. 416 00:18:01,560 --> 00:18:03,070 >> DAVID J MALAN: nie mają dostęp do obrazu. 417 00:18:03,070 --> 00:18:05,230 To, lub nawet gorzej, może to nawet nie istnieje. 418 00:18:05,230 --> 00:18:06,729 Zobaczymy, czy nie możemy rozpoznać, że. 419 00:18:06,729 --> 00:18:09,390 Przypomnijmy, od ostatniego razu, że jeśli w Chrome, w urządzeniu, 420 00:18:09,390 --> 00:18:11,870 lub nawet na komputerze Mac lub PC, przejść do menu Developer 421 00:18:11,870 --> 00:18:14,650 i przejdź do Narzędzia dla programistów opcja, która prawdopodobnie masz 422 00:18:14,650 --> 00:18:16,850 nie używane dużo lub kiedykolwiek. 423 00:18:16,850 --> 00:18:20,780 A jeśli pójdę do sieci i przeładuj stronę, 424 00:18:20,780 --> 00:18:24,110 niech spojrzy na HTTP wnioski, które są wykonane. 425 00:18:24,110 --> 00:18:28,400 >> Wygląda na to, hello.html jest rzeczywiście OK, więc 200. 426 00:18:28,400 --> 00:18:30,630 Ale cat.jpg jest 403. 427 00:18:30,630 --> 00:18:31,650 Więc to nie jest 404. 428 00:18:31,650 --> 00:18:33,490 Prawdopodobnie istnieje plik. 429 00:18:33,490 --> 00:18:35,250 403 oznacza zabronione. 430 00:18:35,250 --> 00:18:37,790 Więc to jest trochę mylące. 431 00:18:37,790 --> 00:18:42,340 Mam zamiar wrócić moim oknie terminala. 432 00:18:42,340 --> 00:18:43,700 Pozwól mi przybliżyć się tutaj. 433 00:18:43,700 --> 00:18:44,750 I pozwól mi zrobić ls. 434 00:18:44,750 --> 00:18:46,430 Nie ma te same pliki. 435 00:18:46,430 --> 00:18:49,410 >> Teraz pozwól mi zrobić ls-l, które prawdopodobnie masz 436 00:18:49,410 --> 00:18:53,350 stosowane przed patrzeć na pliku rozmiary może lub znaczniki czasu. 437 00:18:53,350 --> 00:18:55,590 I widzimy całą masę Zdecydowana informacji. 438 00:18:55,590 --> 00:18:57,040 Ale zauważyć kilka szczegółów. 439 00:18:57,040 --> 00:19:01,660 Oto hello.html w tym wiosłować tu i tu jest cat.jpg. 440 00:19:01,660 --> 00:19:02,934 441 00:19:02,934 --> 00:19:05,850 I to jest właśnie urządzenie jest przyjazny podkreślając JPEG na użytkownika 442 00:19:05,850 --> 00:19:07,380 w fioletowy tak. 443 00:19:07,380 --> 00:19:11,470 Ale co innego jest inaczej obok rozmiar pliku i nazwę pliku? 444 00:19:11,470 --> 00:19:13,438 445 00:19:13,438 --> 00:19:14,754 >> PUBLICZNOŚCI: [niesłyszalne]. 446 00:19:14,754 --> 00:19:16,920 DAVID J MALAN: Tak, istnieje dwa więcej R tutaj. 447 00:19:16,920 --> 00:19:20,170 Zauważ, co hello.html się dzieje. 448 00:19:20,170 --> 00:19:24,050 Tak więc okazuje się, że imię Katalog publiczny to jest ważne. 449 00:19:24,050 --> 00:19:26,400 Wszystko w tym katalogu ma być publiczna. 450 00:19:26,400 --> 00:19:28,790 Ale to nie wystarczy, po prostu upuść pliki tam. 451 00:19:28,790 --> 00:19:31,480 Należy również zmienić Tryb z plików 452 00:19:31,480 --> 00:19:35,180 zmienić uprawnienia Nie plik proaktywnie 453 00:19:35,180 --> 00:19:37,650 być ustawienie domyślne, co jest, że tylko ja mogę przeczytać 454 00:19:37,650 --> 00:19:39,220 i napisać, że jest się właścicielem. 455 00:19:39,220 --> 00:19:43,540 Chcę cały świat wszystkich do być w stanie przeczytać mój plik, że tak powiem. 456 00:19:43,540 --> 00:19:44,950 Przeczytaj po prostu oznacza, zobaczyć go. 457 00:19:44,950 --> 00:19:49,780 >> I rzeczywiście, jak zobaczysz w problemu zestaw siedmiu, to co oznaczają te R w. 458 00:19:49,780 --> 00:19:53,160 Średnia tych dwóch niech każdy R jest indziej na świecie również przeczytać, 459 00:19:53,160 --> 00:19:55,300 zwłaszcza teraz, to w tym katalogu. 460 00:19:55,300 --> 00:19:59,620 Tak więc najprostszym sposobem, aby to naprawić iść do mojego wiersza i zrobić chmod na zmiany 461 00:19:59,620 --> 00:20:05,580 Tryb, a następnie zrobić A + R, w ogóle, wszyscy, wszystko plus r do odczytu, 462 00:20:05,580 --> 00:20:07,944 a następnie cat.jpg Enter. 463 00:20:07,944 --> 00:20:10,360 Nic się nie dzieje, co zazwyczaj oznacza coś dobrego. 464 00:20:10,360 --> 00:20:13,850 Więc ls-l again-- teraz spójrzmy na cat.jpg. 465 00:20:13,850 --> 00:20:15,750 I to uprawnienie Wydaje się, że zmieniło. 466 00:20:15,750 --> 00:20:18,670 Tak na marginesie, jeśli się błędem i, na przykład, 467 00:20:18,670 --> 00:20:23,210 po prostu się your-- Nie know-- esej publicznie dostępne przez przypadek, 468 00:20:23,210 --> 00:20:25,480 można zrobić odwrotnie, chmod a-R. 469 00:20:25,480 --> 00:20:25,909 470 00:20:25,909 --> 00:20:28,200 Choć szczerze mówiąc, nie powinno znajdować się w katalogu publicznym 471 00:20:28,200 --> 00:20:29,760 w każdym razie, jeśli to jest problemem. 472 00:20:29,760 --> 00:20:32,475 >> Teraz wróćmy do moja przeglądarka i reload. 473 00:20:32,475 --> 00:20:32,904 474 00:20:32,904 --> 00:20:34,820 I mam zamiar kliknąć trochę Ghostbusters 475 00:20:34,820 --> 00:20:38,030 symbol, aby usunąć tę część ekran, dzięki czemu możemy zobaczyć nowe żądania. 476 00:20:38,030 --> 00:20:40,630 I rzeczywiście, jest tu Grump Kot z przed. 477 00:20:40,630 --> 00:20:43,010 Ale co ważniejsze, technicznie, nie ma 478 00:20:43,010 --> 00:20:45,565 Numer 200, który Oznacza mamy to OK. 479 00:20:45,565 --> 00:20:47,190 W porządku, więc to wszystko jest w porządku i dobre. 480 00:20:47,190 --> 00:20:48,940 Ale nie robisz najlepsze strony internetowe, 481 00:20:48,940 --> 00:20:51,967 nie będziemy próbować zbyt mocno do dokonać wyrafinowane stron internetowych dziś. 482 00:20:51,967 --> 00:20:54,550 Ale niech przynajmniej coś zrobić bardzo obeznany przed grzechotanie 483 00:20:54,550 --> 00:20:56,030 od kilku innych tagów. 484 00:20:56,030 --> 00:20:58,470 Więc przypuszczam, że nie tylko chce kota tutaj. 485 00:20:58,470 --> 00:21:02,530 Załóżmy, że rzeczywiście chcesz to kot podłączenia się do czegoś. 486 00:21:02,530 --> 00:21:07,210 >> I może, na przykład, coś jak to zrobić. 487 00:21:07,210 --> 00:21:08,580 488 00:21:08,580 --> 00:21:12,890 dla zakotwiczenia href dla hiper equals-- odniesienia 489 00:21:12,890 --> 00:21:17,440 i niech po prostu coś zrobić jak www.google.com końca 490 00:21:17,440 --> 00:21:19,540 Cytując blisko wspornika. 491 00:21:19,540 --> 00:21:22,000 A teraz szukać kotów. 492 00:21:22,000 --> 00:21:23,520 Blisko kotwica tag. 493 00:21:23,520 --> 00:21:26,760 Więc to ma tylko jeden rodzaj fundamentalnie nowy szczegół. 494 00:21:26,760 --> 00:21:28,190 Znacznik jest oczywiście inna. 495 00:21:28,190 --> 00:21:31,770 To imię do kotwicy href lub hiper odniesienia. 496 00:21:31,770 --> 00:21:35,269 >> Ale co ważniejsze, nie ma Funkcja syntaktyczna to tutaj. 497 00:21:35,269 --> 00:21:37,810 To jest to, co my zacząć dzwonić nie tag, ale atrybut. 498 00:21:37,810 --> 00:21:40,830 A jest coś, atrybut modyfikuje zachowanie etykiety. 499 00:21:40,830 --> 00:21:45,400 I tego atrybutu href, środki zmodyfikować zachowanie tej kotwicy 500 00:21:45,400 --> 00:21:48,430 tak, że kiedy jest kliknięty, to idzie do tego adresu tutaj. 501 00:21:48,430 --> 00:21:50,330 I oczywiście, że adres URL jest Google. 502 00:21:50,330 --> 00:21:53,951 >> W tym samym czasie, co to jest tekst tutaj będzie? 503 00:21:53,951 --> 00:21:55,950 Dobrze, że będzie co w rzeczywistości człowieka 504 00:21:55,950 --> 00:21:58,470 widzi jako podkreślony Link, takie proste. 505 00:21:58,470 --> 00:21:59,220 Warto więc spróbować. 506 00:21:59,220 --> 00:21:59,980 Pozwól mi go zapisać. 507 00:21:59,980 --> 00:22:01,650 Nadal jestem w hello.html. 508 00:22:01,650 --> 00:22:05,360 Ale w wersji online, zobaczysz rzeczywiste nazwy plików możemy pre-przygotowane. 509 00:22:05,360 --> 00:22:06,805 Pozwólcie mi iść do przodu i przeładować. 510 00:22:06,805 --> 00:22:08,680 A teraz jest to bardzo rozczarowująca strona nadal. 511 00:22:08,680 --> 00:22:10,910 Ale jeśli unoszą się nad there-- i to jest trochę małe, 512 00:22:10,910 --> 00:22:13,576 ale- widać w dole lewy rogu ekranu, 513 00:22:13,576 --> 00:22:15,242 to rzeczywiście będzie google.com. 514 00:22:15,242 --> 00:22:19,280 A jeśli kliknę, że to będzie trzepaczka mi drogę do rzeczywistego Google. 515 00:22:19,280 --> 00:22:22,610 >> Ale zauważmy tutaj szansa dla eksploatacji, jak na bok. 516 00:22:22,610 --> 00:22:25,150 I wrócimy do innych kwestie bezpieczeństwa przed długo. 517 00:22:25,150 --> 00:22:29,290 Bo nie ma to dychotomia pomiędzy, gdzie jesteś i co mówisz, 518 00:22:29,290 --> 00:22:34,722 można zrobić coś takiego this-- http://www.google.com. 519 00:22:34,722 --> 00:22:37,134 OK, a teraz jeśli przeładować po zapisaniu tej strony, 520 00:22:37,134 --> 00:22:38,800 wygląda na to, mam zamiar udać się do Google. 521 00:22:38,800 --> 00:22:40,966 Ale nie ma powodu, ja musisz przejść do Google, prawda? 522 00:22:40,966 --> 00:22:47,460 Mógłbym właściwie przejść do czegoś takiego badguy.com, odświeżyć stronę tutaj. 523 00:22:47,460 --> 00:22:49,750 I uwaga, to nadal wygląda jak Google. 524 00:22:49,750 --> 00:22:52,020 I tylko wtedy, gdy jestem ostry Wystarczy najechać kursorem nad tutaj 525 00:22:52,020 --> 00:22:54,770 widzę to nawet będzie przejść do innej lokalizacji. 526 00:22:54,770 --> 00:22:57,400 >> Więc jeśli kiedykolwiek dostał e-mail, zwłaszcza 527 00:22:57,400 --> 00:22:59,610 jeden z Paypal, lub pozornie z Paypal 528 00:22:59,610 --> 00:23:01,830 z prośbą, aby zalogować się na konto, to 529 00:23:01,830 --> 00:23:06,380 Dlatego nigdy nie należy kiedykolwiek kliknij linki w e-mailach, 530 00:23:06,380 --> 00:23:07,930 szczerze mówiąc, wszystkie linki w e-mailach. 531 00:23:07,930 --> 00:23:10,380 Jeśli wiesz, że masz rzeczywisty pieniądze na Paypal lub Banku 532 00:23:10,380 --> 00:23:14,250 Ameryki lub Fidelity lub którykolwiek Strona internetowa, ręcznie wpisz go w. 533 00:23:14,250 --> 00:23:17,530 Bo wygląda jak łatwo jest, aby nakłonić kogoś do przedstawienia co 534 00:23:17,530 --> 00:23:18,526 wygląda jak link. 535 00:23:18,526 --> 00:23:20,400 Ale faktycznie mógł go absolutnie wszędzie. 536 00:23:20,400 --> 00:23:23,301 >> I jest o wiele większa zagrożenia niż to. 537 00:23:23,301 --> 00:23:25,300 W rzeczywistości, to bit stycznej się, ale 538 00:23:25,300 --> 00:23:28,430 z najlepszych, jakie kiedykolwiek widziałem który został zamknięty, 539 00:23:28,430 --> 00:23:34,060 jest ktoś doprowadził ludzi to-- więc to może powiedzieć, 540 00:23:34,060 --> 00:23:37,660 kliknij tutaj, aby zalogować się na konto konto, konto bankowe. 541 00:23:37,660 --> 00:23:40,985 I to był Bank Zachodu. 542 00:23:40,985 --> 00:23:43,030 543 00:23:43,030 --> 00:23:44,250 >> Więc ktoś kupił to. 544 00:23:44,250 --> 00:23:47,090 I to jest trochę łatwiej zobaczyć to w czcionce mono rozmieszczone powiększony 545 00:23:47,090 --> 00:23:49,190 w na projektor 30 stóp. 546 00:23:49,190 --> 00:23:51,720 Ale kiedy jest mała czcionka w e-mail, że odbierany, 547 00:23:51,720 --> 00:23:54,690 to wygląda bankofthewest.com, nie bankofthevvest.com, 548 00:23:54,690 --> 00:23:58,230 które ktoś zapłacił 10 dolarów kupić. 549 00:23:58,230 --> 00:24:00,840 A potem to doprowadziło ich do odpowiednikiem jakiegoś złej stronie. 550 00:24:00,840 --> 00:24:05,540 >> A zobaczysz too-- rzeczywiście możemy zrobić this-- jeśli pójdę do rzeczywistej strony internetowej, 551 00:24:05,540 --> 00:24:10,335 bankofthewest.com znowu wycofanie z ostatniej chwili 552 00:24:10,335 --> 00:24:13,210 że jeśli to jest ich strona internetowa i jesteś ciekaw, jak to działa, 553 00:24:13,210 --> 00:24:15,610 z pewnością można przejść do Narzędzia deweloperskie Chrome. 554 00:24:15,610 --> 00:24:18,890 I można zobaczyć wszystkie HTML ładnie sformatowany tam. 555 00:24:18,890 --> 00:24:20,890 >> Ale bardziej na miejscu, cam-- ty niech zamknąć 556 00:24:20,890 --> 00:24:24,760 this-- można przejść do widoku Twórca View Source. 557 00:24:24,760 --> 00:24:25,770 558 00:24:25,770 --> 00:24:28,350 Dlaczego nie mogę po prostu skopiować wszystko to A potem 559 00:24:28,350 --> 00:24:31,630 może przejść w moim małym oknie gedit tu i zrobić swoją własną stronę internetową. 560 00:24:31,630 --> 00:24:33,210 Zapisz w hello.html. 561 00:24:33,210 --> 00:24:36,770 I pewnie to będzie złamać, bo to nie jest takie proste reguły. 562 00:24:36,770 --> 00:24:41,590 Ale teraz, jeśli ja odświeżyć własną stronę na moja CS50 Appliance i przeładować, 563 00:24:41,590 --> 00:24:42,990 OK, niektóre rzeczy się załamał. 564 00:24:42,990 --> 00:24:45,750 Ale jestem bardzo blisko o moja własna strona internetowa bankowość, prawo? 565 00:24:45,750 --> 00:24:46,570 Wszystko to HTML-- 566 00:24:46,570 --> 00:24:47,370 >> [Śmiech] 567 00:24:47,370 --> 00:24:49,210 >> DAVID J MALAN: --i nie actually-- i 568 00:24:49,210 --> 00:24:52,210 wiem, że jest ktoś, kto faktycznie kliknij te linki też. 569 00:24:52,210 --> 00:24:54,864 Tak wyraźnie, niektóre rzeczy się załamał. 570 00:24:54,864 --> 00:24:56,780 Ale, że zamierza prowadzić nas do dyskusji, 571 00:24:56,780 --> 00:25:00,810 niepotrzebnie teraz, jak do tego, co CSS, kaskadowych arkuszy stylów, są, 572 00:25:00,810 --> 00:25:03,410 i jak w rzeczywistości pobrać inne pliki HTML 573 00:25:03,410 --> 00:25:06,140 Pliki JPEG i pliki GIF Strona internetowa może być używana. 574 00:25:06,140 --> 00:25:07,960 Ale wszystko to jest osiągalny. 575 00:25:07,960 --> 00:25:11,110 Ale tak naprawdę sprowadza się do Te bardzo proste heurystyki. 576 00:25:11,110 --> 00:25:14,450 >> Więc teraz niech po prostu przejrzeć Kilka innych przykładów HTML 577 00:25:14,450 --> 00:25:16,680 tylko daje poczucie z tego, co jeszcze można zrobić. 578 00:25:16,680 --> 00:25:18,670 Na przykład, jest to list.html. 579 00:25:18,670 --> 00:25:23,240 Załóżmy, że chciałem zrobić stronę internetową z listą domów w quad. 580 00:25:23,240 --> 00:25:28,960 Mógłbym użyć tagu ul za nieuporządkowane Lista, a następnie dziecko element listy 581 00:25:28,960 --> 00:25:33,760 i następnie iteracyjne over-- lub lista, rather-- domy w pytaniu. 582 00:25:33,760 --> 00:25:36,080 >> A jeśli to się otworzę, zróbmy to. 583 00:25:36,080 --> 00:25:40,670 Chodźmy nie hello.html, ale list.html. 584 00:25:40,670 --> 00:25:42,160 Cholera. 585 00:25:42,160 --> 00:25:43,000 Jak mogę rozwiązać ten problem? 586 00:25:43,000 --> 00:25:45,679 587 00:25:45,679 --> 00:25:47,220 To jest ten sam problem, jak wcześniej, prawda? 588 00:25:47,220 --> 00:25:52,510 Więc pozwól mi zrobić chmod-- oops-- chmod a + r od list.html. 589 00:25:52,510 --> 00:25:54,610 590 00:25:54,610 --> 00:25:59,610 A teraz, jeśli wrócę do mojej przeglądarce i kliknij przycisk Odśwież, nie jest. 591 00:25:59,610 --> 00:26:02,360 Więc jeśli kiedykolwiek chciał zrobić wypunktowanie, możesz to zrobić. 592 00:26:02,360 --> 00:26:06,210 Jeśli chcesz być bardzo fantazyjne i zrobić uporządkowany, nie lista nieuporządkowana, 593 00:26:06,210 --> 00:26:10,170 zmiany te, ol, odświeżyć stronę, i teraz przeglądarka będzie liczyć to za Ciebie. 594 00:26:10,170 --> 00:26:11,241 >> Co jeszcze możemy zrobić? 595 00:26:11,241 --> 00:26:13,990 Cóż, kilka wiele innych, jeśli masz długie akapity text-- 596 00:26:13,990 --> 00:26:15,698 Na przykład, niektóre Tekstu łacińskiego jak this-- 597 00:26:15,698 --> 00:26:20,730 i chcesz go w osobnych akapitach, otwarte p, w pobliżu p dla tagu ust. 598 00:26:20,730 --> 00:26:22,010 I zrobić to jeszcze raz i jeszcze raz. 599 00:26:22,010 --> 00:26:26,600 I jeśli teraz otworzyć ten plik, paragraphs.html, dobrze, to 600 00:26:26,600 --> 00:26:27,570 staje się irytujące. 601 00:26:27,570 --> 00:26:34,320 Więc teraz niech po prostu wrócić do mojego szybka, chmod a + r r gwiazdę .html-- 602 00:26:34,320 --> 00:26:36,099 ładny mały karta dzika tak powiem. 603 00:26:36,099 --> 00:26:37,890 Należy naprawić wszystkie te problemy do mnie. 604 00:26:37,890 --> 00:26:38,990 Miejmy przeładować. 605 00:26:38,990 --> 00:26:40,500 Są trzy akapity. 606 00:26:40,500 --> 00:26:42,930 >> A teraz chodźmy do przodu i otworzyć jeden inny. 607 00:26:42,930 --> 00:26:44,310 Jak o stół? 608 00:26:44,310 --> 00:26:46,440 Zauważysz wygląd tabeli trochę bardziej skomplikowane. 609 00:26:46,440 --> 00:26:49,110 Ale to samo idea-- otwarte tag, otwarte tag, 610 00:26:49,110 --> 00:26:51,360 otwarte, otwarte, otwarty, blisko tag, otwarte tag. 611 00:26:51,360 --> 00:26:54,410 I to stało się na okres Stół, którego granica jest najwyraźniej 612 00:26:54,410 --> 00:26:58,500 będzie grubość 1-- cokolwiek że means-- wiersz tabeli, tabela 613 00:26:58,500 --> 00:27:00,320 Dane te, które oznacza komórkę. 614 00:27:00,320 --> 00:27:03,840 A jeśli wrócę do mojej przeglądarce tutaj i przejdź do table.html, 615 00:27:03,840 --> 00:27:05,840 można zobaczyć coś tak, ohydne. 616 00:27:05,840 --> 00:27:07,840 Ale my się do punktu gdzie możemy rzeczywiście 617 00:27:07,840 --> 00:27:09,260 dokonać rzeczy ładniejsza niż to. 618 00:27:09,260 --> 00:27:10,530 >> Więc pozwól mi stanowią teraz. 619 00:27:10,530 --> 00:27:11,870 Jest bukiety z większej ilości tagów. 620 00:27:11,870 --> 00:27:15,225 I HTML jest cudowny, aby podnieść bo, szczerze mówiąc, wszystko co musisz zrobić, 621 00:27:15,225 --> 00:27:17,600 jest patrzeć na istniejących stron internetowych z których znasz. 622 00:27:17,600 --> 00:27:20,340 I jesteś jak, och, to jak zrobili to estetycznie. 623 00:27:20,340 --> 00:27:23,159 >> Można też wyszukać dowolny internecie zasobów, jak działa HTML, 624 00:27:23,159 --> 00:27:25,700 i zobaczysz, że nie ma całe słownictwo z innych tagów. 625 00:27:25,700 --> 00:27:30,110 Ale z tego prostego modelu mentalnego sam, że prawie każdy tag otwarciu 626 00:27:30,110 --> 00:27:33,620 musi być zamknięty, to naprawdę nie wystarczy, aby nauczyć siebie 627 00:27:33,620 --> 00:27:36,950 HTML po zrozumieć te podstawowe idee tagów 628 00:27:36,950 --> 00:27:40,520 i atrybuty i sensowności że rozmawialiśmy o, 629 00:27:40,520 --> 00:27:44,697 zamykając wszystko, co możemy otworzyć tak, aby nie mylić przeglądarki. 630 00:27:44,697 --> 00:27:46,780 Więc teraz trzeba to bardziej interesujące poziom 631 00:27:46,780 --> 00:27:48,100 przechodząc do rzeczywistej. 632 00:27:48,100 --> 00:27:51,095 I chodźmy do mojego Mac tutaj, na google.com. 633 00:27:51,095 --> 00:27:52,280 634 00:27:52,280 --> 00:27:54,020 A teraz notice-- zróbmy to. 635 00:27:54,020 --> 00:27:57,280 Mam iść do gongu Ustawienia, Ustawienia wyszukiwania. 636 00:27:57,280 --> 00:28:01,070 Chcę, aby wyłączyć ten przykry moment Wyniki rzeczą, gdzie natychmiast 637 00:28:01,070 --> 00:28:02,450 zaczyna reagować do pisania. 638 00:28:02,450 --> 00:28:05,300 Zróbmy to tak starsza szkołę faktycznie zobaczyć, co się dzieje. 639 00:28:05,300 --> 00:28:08,260 >> Więc mam zamiar zapisać mój Ustawienia tutaj Google. 640 00:28:08,260 --> 00:28:11,160 A teraz notice-- zamierzam szukać czegoś jak koty. 641 00:28:11,160 --> 00:28:14,500 I to jeszcze robi auto Kompletny tutaj, ale w oparciu o rzeczy 642 00:28:14,500 --> 00:28:15,970 ludzie mają wpisane w przeszłości. 643 00:28:15,970 --> 00:28:17,490 Zauważmy jednak, co się stanie. 644 00:28:17,490 --> 00:28:20,272 >> W adresie URL w momencie Jest to, po prostu google.com. 645 00:28:20,272 --> 00:28:22,650 I technicznie, to ukośnik. 646 00:28:22,650 --> 00:28:25,910 Google po prostu zapisywanie znak i nie pokazuje nam tego. 647 00:28:25,910 --> 00:28:30,400 Oni pokazują nam https, tylko być bardzo pocieszające, że jesteśmy 648 00:28:30,400 --> 00:28:32,850 w bezpiecznej lub zaszyfrowanej stronie. 649 00:28:32,850 --> 00:28:35,690 >> Więc pozwól mi iść dalej i szukać kotów. 650 00:28:35,690 --> 00:28:37,670 Teraz to się naprawdę Zdecydowana szybko. 651 00:28:37,670 --> 00:28:39,470 Spójrz na długość tego adresu URL. 652 00:28:39,470 --> 00:28:43,070 Ale okazuje się, że większość z tych rzeczy w adresie URL jest właściwie bezużyteczny. 653 00:28:43,070 --> 00:28:45,320 Mam zamiar rozpocząć usuwanie rzeczy, których nie rozumiem. 654 00:28:45,320 --> 00:28:46,560 655 00:28:46,560 --> 00:28:47,360 Widzę koty. 656 00:28:47,360 --> 00:28:48,470 Rozumiem koty. 657 00:28:48,470 --> 00:28:50,380 Nie wiem, dlaczego koty są tam ponownie. 658 00:28:50,380 --> 00:28:52,620 I naprawdę nie wiem, co to jest nonsens. 659 00:28:52,620 --> 00:28:56,030 Więc jestem po prostu zamiar utrzymać podkreślając i usuwanie rzeczy 660 00:28:56,030 --> 00:28:59,905 że nie rozumiem, destylację URL do właśnie tego. 661 00:28:59,905 --> 00:29:00,920 662 00:29:00,920 --> 00:29:02,270 >> Teraz pozwól mi się wprowadzić ponownie. 663 00:29:02,270 --> 00:29:03,814 Wygląda na to, Google wciąż działa. 664 00:29:03,814 --> 00:29:06,980 Tak więc z jakiegoś powodu, to dodajemy Wiele rzeczy do domyślnie ich adresu URL. 665 00:29:06,980 --> 00:29:09,000 Ale nie jest to bezwzględnie konieczne. 666 00:29:09,000 --> 00:29:10,340 Tak więc to, co jest miłe o tym? 667 00:29:10,340 --> 00:29:13,630 Cóż, pozwól mi iść do przodu i otworzyć Chrome Inspector. 668 00:29:13,630 --> 00:29:15,960 Jest mały skrót mysz dla niego. 669 00:29:15,960 --> 00:29:17,360 >> Przejdź do karty sieciowej. 670 00:29:17,360 --> 00:29:19,340 A teraz pozwól mi odświeżyć ta strona jeszcze raz. 671 00:29:19,340 --> 00:29:20,280 A ja trzymam Shift. 672 00:29:20,280 --> 00:29:22,520 Tak na marginesie, przeglądarek często lub zapisać w pamięci podręcznej 673 00:29:22,520 --> 00:29:24,697 informacje tylko ze względu na sprawność jest. 674 00:29:24,697 --> 00:29:27,280 Ale zwykle, trzymając Shift i przeładunku zmusi wszystko 675 00:29:27,280 --> 00:29:28,994 zacząć od początku. 676 00:29:28,994 --> 00:29:30,410 I to jest to, co chcę zrobić. 677 00:29:30,410 --> 00:29:33,550 >> I zauważyć, wszystkie te wiersze, które właśnie pojawiły. 678 00:29:33,550 --> 00:29:37,920 Okazuje się, że w danej sieci strona nie może być tylko jeden plik 679 00:29:37,920 --> 00:29:43,500 involved-- hello.html-- lub nie może być 52, jak w tym przypadku. 680 00:29:43,500 --> 00:29:45,820 Kiedy odwiedzić google.com, najwyraźniej, moja przeglądarka 681 00:29:45,820 --> 00:29:49,650 rozpoczyna się 52 oddzielnych żądań HTTP. 682 00:29:49,650 --> 00:29:50,520 Dlaczego tak jest? 683 00:29:50,520 --> 00:29:53,380 >> Cóż, wygląda na to, co jest w środku z tej strony internetowej w górę szczycie. 684 00:29:53,380 --> 00:29:55,620 Nie tylko tekst, ale nie rzeczywiste obrazy 685 00:29:55,620 --> 00:29:57,130 kotów ponad prawo. 686 00:29:57,130 --> 00:29:59,110 Jest tu kolorowe logo na lewej stronie. 687 00:29:59,110 --> 00:30:01,750 Nie wszystko z tych ikon do mikrofonu i tak dalej. 688 00:30:01,750 --> 00:30:05,130 Jest wiele elementów, budowanie Bloki, kawałki podstaw, jeśli chcesz, 689 00:30:05,130 --> 00:30:06,250 do tej strony. 690 00:30:06,250 --> 00:30:10,310 A co robi na przeglądarkę uzyskanie bardzo pierwszy plik, który 691 00:30:10,310 --> 00:30:16,180 Jest to wiersz tutaj, to jest w zasadzie iteracji w górę HTML 692 00:30:16,180 --> 00:30:19,880 do dołu, w lewo w prawo, patrząc na rzeczy takie jak znaczniki obrazu lub innych znaczników 693 00:30:19,880 --> 00:30:23,160 wspomnieć, że są i inne pliki kiedy je widzi, idzie i pobiera je 694 00:30:23,160 --> 00:30:26,050 przez HTTP, realną całość koperta metafora, 695 00:30:26,050 --> 00:30:29,670 a następnie wyświetla je w odpowiednie miejsce na stronie internetowej. 696 00:30:29,670 --> 00:30:33,370 >> Ale zauważyć tutaj, jeśli skupię się na pierwsze koty rzut, wyszukiwania, 697 00:30:33,370 --> 00:30:37,090 zauważyć, że rzeczywiście jest za pomocą protokołu HTTP 1.1. 698 00:30:37,090 --> 00:30:41,690 I niestety, Google Chrome teraz w wersji 39 699 00:30:41,690 --> 00:30:45,110 jest rodzaj rzeczy dumbing dół i nie pokazuje nam aktualne nagłówki. 700 00:30:45,110 --> 00:30:49,680 Ale to, co jest rzeczywiście wysłał żądanie dla nie ciąć, ale / search? q = koty. 701 00:30:49,680 --> 00:30:52,830 702 00:30:52,830 --> 00:30:54,340 >> Teraz, dlaczego jest to takie ważne? 703 00:30:54,340 --> 00:30:57,110 Cóż, mam zamiar wnioskować z tego, że jeśli Google 704 00:30:57,110 --> 00:31:01,520 obsługuje zapytań z tej formy, dlaczego nie zaimplementować własną wyszukiwanie 705 00:31:01,520 --> 00:31:06,420 silnik dla CS50, ale tylko z przodu koniec, tylko graficzny interfejs użytkownika. 706 00:31:06,420 --> 00:31:09,610 A my outsourcingu tylny koniec, Wyniki wyszukiwania rzeczywista Google. 707 00:31:09,610 --> 00:31:10,510 >> Więc w jaki sposób mogę to zrobić? 708 00:31:10,510 --> 00:31:13,820 Cóż, pozwól mi iść do gedit tutaj. 709 00:31:13,820 --> 00:31:19,180 I pozwól mi iść do przodu i otworzyć się, powiedzmy, nowego pliku. 710 00:31:19,180 --> 00:31:22,280 I mam zamiar zapisać to tymczasowo jako wyszukiwania-0.html. 711 00:31:22,280 --> 00:31:25,111 712 00:31:25,111 --> 00:31:27,860 A potem w końcu, będziemy szybko naprzód do jednego I gotowych. 713 00:31:27,860 --> 00:31:30,190 >> I mam zamiar szybko wzbudzać typu doc 714 00:31:30,190 --> 00:31:33,840 Uchwyt html html otwarte blisko wspornik html. 715 00:31:33,840 --> 00:31:38,390 Potem mam zamiar zrobić głowę blisko głowy otwarty Tytuł CS50 716 00:31:38,390 --> 00:31:40,150 Szukaj zamiast wyszukiwania Google. 717 00:31:40,150 --> 00:31:43,480 Tutaj będę mieć ciała, tu blisko ciała. 718 00:31:43,480 --> 00:31:45,835 A teraz muszę CS50 Szukaj. 719 00:31:45,835 --> 00:31:47,710 I rzeczywiście, niech budować to stopniowo. 720 00:31:47,710 --> 00:31:51,043 Mam zamiar iść do przodu i zamknąć to i rzeczywiście umieścić go w moim katalogu publicznym. 721 00:31:51,043 --> 00:31:52,730 Więc daj mi tylko jedną chwilę. 722 00:31:52,730 --> 00:31:55,390 search-0.html-- zamierzam tymczasowo nazwać search.html. 723 00:31:55,390 --> 00:31:56,600 724 00:31:56,600 --> 00:31:59,750 Zamierzam chmod to A + R search.html. 725 00:31:59,750 --> 00:32:01,072 726 00:32:01,072 --> 00:32:02,280 A teraz idę, aby go otworzyć. 727 00:32:02,280 --> 00:32:03,224 728 00:32:03,224 --> 00:32:04,390 W porządku, więc to było szybko. 729 00:32:04,390 --> 00:32:06,800 Ale celem było po prostu się dostać do punktu 730 00:32:06,800 --> 00:32:09,630 posiadania tego tekstu plik o nazwie search.html. 731 00:32:09,630 --> 00:32:10,940 732 00:32:10,940 --> 00:32:12,790 Więc nie wiele do obejrzenia jeszcze. 733 00:32:12,790 --> 00:32:16,970 Rzeczywiście, jeśli pójdę do mojej przeglądarce i Do search.html, to wszystko jest. 734 00:32:16,970 --> 00:32:17,720 Ale wiesz co? 735 00:32:17,720 --> 00:32:19,000 Mogę być trochę bardziej wyszukane. 736 00:32:19,000 --> 00:32:22,710 Czytałam w książce, że jest tag nagłówek nazywa h1. 737 00:32:22,710 --> 00:32:26,100 I mam zamiar iść do przodu i wykorzystać tę otwartą i bliską h1 h1. 738 00:32:26,100 --> 00:32:27,220 Odśwież stronę. 739 00:32:27,220 --> 00:32:29,600 A teraz większe i bardziej wyraziste, Nie wszystko, co ciekawe, 740 00:32:29,600 --> 00:32:32,399 ale przynajmniej jest strukturalnie bardziej interesujące. 741 00:32:32,399 --> 00:32:33,940 Ale teraz pozwól mi przedstawić inny znacznik. 742 00:32:33,940 --> 00:32:36,500 Okazuje się, że to tag formularz. 743 00:32:36,500 --> 00:32:38,400 I pozwól mi zamknąć ten tag. 744 00:32:38,400 --> 00:32:40,830 I okazuje się, tam że wejście tag 745 00:32:40,830 --> 00:32:44,600 ma atrybut o nazwie typu, który jest typ danych pola, 746 00:32:44,600 --> 00:32:45,200 jeśli będzie. 747 00:32:45,200 --> 00:32:47,050 I będzie typu tekstu. 748 00:32:47,050 --> 00:32:52,200 A jego wartość będzie być CS50 Szukaj. 749 00:32:52,200 --> 00:32:53,850 Blisko znacznik. 750 00:32:53,850 --> 00:32:57,100 I nie będzie żadnego pojęcia otwieranie i zamykanie z oddzielnych znaczników. 751 00:32:57,100 --> 00:33:00,300 >> Pozwól mi wrócić tu i zobaczyć, co się dzieje, przeładować. 752 00:33:00,300 --> 00:33:01,380 Pierwsze interesujące. 753 00:33:01,380 --> 00:33:02,950 Wygląda na to, że to pole tekstowe. 754 00:33:02,950 --> 00:33:04,080 755 00:33:04,080 --> 00:33:06,999 I rzeczywiście, nie chcę umieścić wartość tam jeszcze. 756 00:33:06,999 --> 00:33:10,040 Pozwól mi wrócić tu i rzeczywiście dostać uwolnić się od tej wartości do keep it simple. 757 00:33:10,040 --> 00:33:12,939 Zamiast wartości, co chciałem dać tę rzecz była nazwa. 758 00:33:12,939 --> 00:33:15,230 I nie wiem, co to jest, więc wrócę do tego. 759 00:33:15,230 --> 00:33:18,270 >> Ale poniżej, chcę zrobić input type = submit. 760 00:33:18,270 --> 00:33:19,840 761 00:33:19,840 --> 00:33:22,120 I ta wartość będzie CS50 Szukaj. 762 00:33:22,120 --> 00:33:24,850 I zobaczymy, dlaczego przeniósł się do tej wartości. 763 00:33:24,850 --> 00:33:28,900 Kiedy przeładować, wydaje mi się teraz początki mojego wyszukiwania 764 00:33:28,900 --> 00:33:30,820 silnik, super ohydne, choć szczerze mówiąc, to 765 00:33:30,820 --> 00:33:34,260 nie daleko od tego, co rzut Domyślna strona Google wygląda. 766 00:33:34,260 --> 00:33:37,950 >> Jeśli pójdę teraz tutaj, mogę wpisać koty i mam nadzieję, kliknij przycisk Szukaj. 767 00:33:37,950 --> 00:33:40,380 Ale ja nie dość jeszcze zrobić, dlatego, że nie wdrożyło, 768 00:33:40,380 --> 00:33:41,045 oczywiście, w bazie. 769 00:33:41,045 --> 00:33:42,940 Nie indeksowane internetowej dla wyników wyszukiwania. 770 00:33:42,940 --> 00:33:44,840 Więc muszę zlecić, że do Google. 771 00:33:44,840 --> 00:33:46,290 Więc jak mam to zrobić? 772 00:33:46,290 --> 00:33:49,170 >> Cóż, przede wszystkim I Trzeba dodać, a działania 773 00:33:49,170 --> 00:33:58,460 przypisać do mojego tagu formularza, który jest http://www.google.com/search. 774 00:33:58,460 --> 00:34:01,180 I wiem, że tylko z konieczności wywnioskować patrząc uważnie 775 00:34:01,180 --> 00:34:02,505 na ich URL. 776 00:34:02,505 --> 00:34:03,380 A teraz zgadywać. 777 00:34:03,380 --> 00:34:09,090 Co powinno to pole tekst prawdopodobnie nazwać, na podstawie których doszliśmy 778 00:34:09,090 --> 00:34:09,754 z wcześniej? 779 00:34:09,754 --> 00:34:11,896 780 00:34:11,896 --> 00:34:13,290 >> PUBLICZNOŚCI: q. 781 00:34:13,290 --> 00:34:14,370 >> DAVID J MALAN: q. 782 00:34:14,370 --> 00:34:17,800 I w rzeczywistości nie potrzebują pytanie okazji okazuje się, ale Q jest rzeczywiście, 783 00:34:17,800 --> 00:34:20,489 q dla zapytania prawdopodobnie przez domyślne, po prostu dlatego, że to 784 00:34:20,489 --> 00:34:23,060 Larry i Sergey co wpadł lat temu. 785 00:34:23,060 --> 00:34:24,739 Więc teraz pozwól mi załadować tę stronę. 786 00:34:24,739 --> 00:34:26,409 Nie wygląda to wszystko, co różni. 787 00:34:26,409 --> 00:34:28,120 Ale teraz obserwować co się dzieje. 788 00:34:28,120 --> 00:34:32,360 >> Gdybym wpisać kotów i kliknięcia CS50 Szukaj i puścić, 789 00:34:32,360 --> 00:34:35,770 zauważysz, że się wymknąć się do rzeczywistej Google. 790 00:34:35,770 --> 00:34:38,150 Teraz Google jest trochę irytujące, że są one w 791 00:34:38,150 --> 00:34:41,877 dodanie dodatkowego parametru, jeśli chcesz, aby adres URL. 792 00:34:41,877 --> 00:34:43,960 To wszystko, co się dzieje automatycznie na stronie Google. 793 00:34:43,960 --> 00:34:48,730 >> Ważne jest to, że wydaje mi się, się, że generowany ten wniosek tutaj. 794 00:34:48,730 --> 00:34:50,179 I rzeczywiście, to, co się dzieje. 795 00:34:50,179 --> 00:34:53,040 Jeśli masz kod HTML wygląda to tak, to 796 00:34:53,040 --> 00:34:57,620 jest rodzaj notacji developerzy za stwierdzenie, iść do przodu i utworzyć formularz 797 00:34:57,620 --> 00:34:59,990 że kiedy jest złożone, to będzie, aby przejść do tego adresu URL. 798 00:34:59,990 --> 00:35:03,430 A kiedy URL dostarczył wartości rzeczy, jak q, 799 00:35:03,430 --> 00:35:05,440 nie idź po prostu do tego adresu URL. 800 00:35:05,440 --> 00:35:08,210 Właściwie, przejdź do pytania znak, a następnie q = koty. 801 00:35:08,210 --> 00:35:09,590 802 00:35:09,590 --> 00:35:13,060 Dodać parametr, Parametr HTTP tak. 803 00:35:13,060 --> 00:35:15,590 >> I po prostu być bardzo precyzyjne, co jest wywnioskować here-- 804 00:35:15,590 --> 00:35:18,130 ale będę bardziej explicit-- jest że metoda chcę używać 805 00:35:18,130 --> 00:35:22,270 jest uzyskać, a nie coś takiego Post, który my w końcu zobaczyć. 806 00:35:22,270 --> 00:35:27,710 Tak w skrócie, po prostu zrozumienia HTML i korzystania z niektórych dość proste znaczniki, 807 00:35:27,710 --> 00:35:30,610 teraz możemy przystąpić do tworzenia nasza przednia użytkownik 808 00:35:30,610 --> 00:35:32,850 Interfejs o poszukiwaniu Silnik za nim. 809 00:35:32,850 --> 00:35:34,800 >> Ale to oczywiście jest dość ohydne. 810 00:35:34,800 --> 00:35:37,259 Więc pozwól mi faktycznie otworzyć nieco lepsza wersja. 811 00:35:37,259 --> 00:35:39,800 Jest to jeden I wytworzono z góry, że ma kilka uwag. 812 00:35:39,800 --> 00:35:41,900 Ale zobaczysz, że ja prawie odtworzył go. 813 00:35:41,900 --> 00:35:44,150 Tak to jest już dostępne online. 814 00:35:44,150 --> 00:35:48,050 I stało się to, aby zapobiegawczo przejść do https tylko zachować to proste. 815 00:35:48,050 --> 00:35:50,610 >> A teraz otwórz następna iteracja tego. 816 00:35:50,610 --> 00:35:52,510 Jest w wersji 1, a nie 0. 817 00:35:52,510 --> 00:35:55,315 Co wyskakuje na ciebie nieco inny w tym przykładzie? 818 00:35:55,315 --> 00:35:59,480 819 00:35:59,480 --> 00:36:00,440 >> PUBLICZNOŚCI: [niesłyszalne]. 820 00:36:00,440 --> 00:36:03,020 >> Tak, nie ma ten tekst Centrum align. 821 00:36:03,020 --> 00:36:04,590 Jest to trochę dziwne się tutaj. 822 00:36:04,590 --> 00:36:06,150 Ale to faktycznie nowe. 823 00:36:06,150 --> 00:36:07,800 A może wiecie co się wydarzy. 824 00:36:07,800 --> 00:36:11,730 Jeśli pójdę do mojej przeglądarce teraz i odwiedzić search-1.html, 825 00:36:11,730 --> 00:36:13,090 to prawie to samo. 826 00:36:13,090 --> 00:36:15,705 Ale jest to krok bliżej jest trochę bardziej dość. 827 00:36:15,705 --> 00:36:19,150 To wciąż brzydki, ale w tym piękniejsza przynajmniej wszystko jest teraz wyśrodkowany. 828 00:36:19,150 --> 00:36:23,470 >> Tak więc okazuje się, że to, co używam jest zupełnie inny język nazywa 829 00:36:23,470 --> 00:36:25,680 CSS, kaskadowych arkuszy stylów. 830 00:36:25,680 --> 00:36:28,310 I CSS, szczerze mówiąc, jest trochę z moim osobistym zdaniem, 831 00:36:28,310 --> 00:36:29,775 potwornie zaprojektowany język. 832 00:36:29,775 --> 00:36:33,110 Jest to bardzo irytujące, aby pamiętać, wszystkie różne szczegóły. 833 00:36:33,110 --> 00:36:38,479 Ale to jest to, co stylizes Cały światowy internetowej dzisiaj. 834 00:36:38,479 --> 00:36:39,270 I obraził kogoś. 835 00:36:39,270 --> 00:36:39,769 Dobrze. 836 00:36:39,769 --> 00:36:43,180 Więc wróćmy tu i zobacz jak jesteśmy rzeczywiście przy tym. 837 00:36:43,180 --> 00:36:45,940 I okazuje się, że to co najmniej rzeczywiście bardzo prosty język. 838 00:36:45,940 --> 00:36:49,470 To tylko pary wartość klucza, właściwości i wartości, właściwości i wartości. 839 00:36:49,470 --> 00:36:52,080 Rzeczywiście, tutaj jest jeden mienie i wartość. 840 00:36:52,080 --> 00:36:55,890 >> Po prostu za pomocą stylu atrybutu na mojej znacznika body 841 00:36:55,890 --> 00:37:00,360 i nadanie jej wartości jelita grubego i inne słowo słowo, 842 00:37:00,360 --> 00:37:03,730 lub własność i wartość, Mogę mieć wpływ na estetykę 843 00:37:03,730 --> 00:37:06,210 na stronie internetowej, a nie niekoniecznie jednak struktura, 844 00:37:06,210 --> 00:37:07,550 ale estetyka to. 845 00:37:07,550 --> 00:37:10,960 I właśnie przez Googling wokół, zdaję sobie sprawę, że arkusze CSS kaskadowe style, 846 00:37:10,960 --> 00:37:14,170 obsługuje właściwość o nazwie text-align, którego wartość może 847 00:37:14,170 --> 00:37:16,980 być w lewo, w prawo, lub centrum, na przykład. 848 00:37:16,980 --> 00:37:19,990 >> Więc teraz, kiedy przeładować to strona, co ja dostałem 849 00:37:19,990 --> 00:37:22,730 był na środku strony, ale nadal dość brzydki. 850 00:37:22,730 --> 00:37:25,770 Idziemy do przodu i otworzyć do wersji 2 Szukaj. 851 00:37:25,770 --> 00:37:28,570 A teraz zauważyć, zrobiłem trochę więcej. 852 00:37:28,570 --> 00:37:33,760 Należy zauważyć, że tu wewnątrz głowicy tag, może być więcej niż tytule. 853 00:37:33,760 --> 00:37:35,400 W rzeczywistości, nie ma tagu styl. 854 00:37:35,400 --> 00:37:38,630 I to jest, gdy tylko staje się trochę bałagan widzenie CSS czasem. 855 00:37:38,630 --> 00:37:41,971 >> Zauważ, że wydaje mi się, że coś które strukturalnie wygląda zupełnie inaczej. 856 00:37:41,971 --> 00:37:44,095 Ale tutaj jest nazwa tag Chcę stylizowane. 857 00:37:44,095 --> 00:37:47,570 Oto nasi starzy przyjaciele kręcone szelki i zamknięty nawias klamrowy. 858 00:37:47,570 --> 00:37:50,290 I wtedy jest to, że Obiekt i jego wartość. 859 00:37:50,290 --> 00:37:56,300 >> Jeśli załadować ten plik, search2.html, Efekt końcowy jest taki sam. 860 00:37:56,300 --> 00:37:59,300 Ale jest to krok w kierunku lepszego designu. 861 00:37:59,300 --> 00:38:04,560 Przez ten faktoringu CSS mam nie zmieszane z moim HTML. 862 00:38:04,560 --> 00:38:07,560 I rzeczywiście, jak zobaczymy, mogłem ponowne wykorzystanie tych właściwości i wartości. 863 00:38:07,560 --> 00:38:10,420 Gdybym chciał zrobić bukiety części mojej stronie na środku, 864 00:38:10,420 --> 00:38:13,630 Nie mam wpisać style = text-align centrum w każdym miejscu. 865 00:38:13,630 --> 00:38:16,580 Można umieścić w jednym miejscu być może, jak się na górze. 866 00:38:16,580 --> 00:38:18,210 >> Ale nawet to nie jest najlepszy projekt. 867 00:38:18,210 --> 00:38:21,720 W rzeczywistości, jedną z rzeczy, dowiesz się, jak spędzać coraz więcej czasu z 868 00:38:21,720 --> 00:38:25,730 programowanie aplikacji internetowych jest to, że więcej można zmodularyzowanie rzeczy i rzeczy czynnik się 869 00:38:25,730 --> 00:38:30,610 jak pliki .h niech nam czynnik rzeczy na zewnątrz, czynnik jak helpers.c niech nam rzeczy 870 00:38:30,610 --> 00:38:31,880 kilka psets temu. 871 00:38:31,880 --> 00:38:34,200 Podobnie, możemy Aby osiągnąć ten cel. 872 00:38:34,200 --> 00:38:37,920 >> Więc zawiadomienia w wersji trzy search.html mam 873 00:38:37,920 --> 00:38:40,610 oczyścić głowy strona i po prostu umieścić 874 00:38:40,610 --> 00:38:43,320 w tym, tag Link, który wbrew nazwie, 875 00:38:43,320 --> 00:38:44,700 nie daje hiperłącze. 876 00:38:44,700 --> 00:38:49,150 To linki do innego pliku w drodze href, którego wartość w tym przypadku, 877 00:38:49,150 --> 00:38:51,586 jest wyszukiwarka-3.css 878 00:38:51,586 --> 00:38:52,960 Tak, zdaję sobie sprawę, jedziemy szybko. 879 00:38:52,960 --> 00:38:54,600 Ale wszystko robię to rodzaj ruchomych rzeczy wokół. 880 00:38:54,600 --> 00:38:55,760 Niech mi otwarty search-3.css. 881 00:38:55,760 --> 00:38:57,114 882 00:38:57,114 --> 00:38:58,530 Nie jest to, nic naprawdę do niego. 883 00:38:58,530 --> 00:39:02,270 Ja po prostu skopiować i wkleić go do nowego file, podobnie jak rzeczy się nam uwzględnić 884 00:39:02,270 --> 00:39:03,509 do innych plików przed. 885 00:39:03,509 --> 00:39:05,300 I result-- całkowicie underwhelming-- 886 00:39:05,300 --> 00:39:06,730 będzie dokładnie taka sama. 887 00:39:06,730 --> 00:39:10,490 Ale idziemy toward-- nie, to nie. 888 00:39:10,490 --> 00:39:11,930 Och, wiem, dlaczego. 889 00:39:11,930 --> 00:39:13,790 >> Tak więc wydaje się, że to błąd. 890 00:39:13,790 --> 00:39:15,010 I to jest w pewnym sensie. 891 00:39:15,010 --> 00:39:17,730 Ale pozwól mi otworzyć moje zakładki Network. 892 00:39:17,730 --> 00:39:19,660 Pozwól mi odświeżyć stronę. 893 00:39:19,660 --> 00:39:23,315 Ach, dlaczego CSS nie są stosowane? 894 00:39:23,315 --> 00:39:26,920 Cóż, plik CSS, podobnie, ma być czytelny dla świata, że ​​tak powiem. 895 00:39:26,920 --> 00:39:28,440 I to też jest obecnie zakazane. 896 00:39:28,440 --> 00:39:33,760 Więc pozwól mi zrobić chmod a + r gwiazdy dot CSS-- whoops-- 897 00:39:33,760 --> 00:39:37,067 jesteśmy kropka CSS jest tylko Rozszerzenie pliku dla plików CSS. 898 00:39:37,067 --> 00:39:38,900 Teraz pozwól mi wrócić do moja przeglądarka i reload. 899 00:39:38,900 --> 00:39:40,910 OK, trochę lepiej. 900 00:39:40,910 --> 00:39:42,282 >> Teraz pozwól mi zrobić jedną rzecz. 901 00:39:42,282 --> 00:39:42,990 W wyszukiwarce-4.html. 902 00:39:42,990 --> 00:39:44,550 903 00:39:44,550 --> 00:39:48,220 Mam wersję Pomyślałem był sposób chłodniej, choć o wiele bardziej 904 00:39:48,220 --> 00:39:48,980 skomplikowany. 905 00:39:48,980 --> 00:39:50,690 Spójrzmy na wynik pierwszego. 906 00:39:50,690 --> 00:39:52,290 Zamknij to, aby dać nam więcej miejsca. 907 00:39:52,290 --> 00:39:54,275 Zmień to szukać-4, Enter. 908 00:39:54,275 --> 00:39:55,430 909 00:39:55,430 --> 00:39:57,200 >> A teraz kilka rzeczy, są podzielone. 910 00:39:57,200 --> 00:39:59,910 Mam zamiar wrócić do mojego katalogu tutaj. 911 00:39:59,910 --> 00:40:04,190 A teraz jestem po prostu zrobić chmod o + r na file-- 912 00:40:04,190 --> 00:40:07,450 bo wiem, że exists-- nazwie logo.gif, która jest obraz. 913 00:40:07,450 --> 00:40:08,590 A teraz przeładować. 914 00:40:08,590 --> 00:40:11,040 I wow-- więc teraz jestem bardzo blisko, szczerze mówiąc, 915 00:40:11,040 --> 00:40:15,860 lubić wersję Google 1999, i szczerze mówiąc, wersja Google 2014 916 00:40:15,860 --> 00:40:16,360 prawda? 917 00:40:16,360 --> 00:40:21,920 >> Tak to się teraz dzieje na ich stronie internetowej, ostatecznie, jeśli szukać kotów. 918 00:40:21,920 --> 00:40:23,900 I rzeczywiście tak jest. 919 00:40:23,900 --> 00:40:26,410 Ale to, co ja zrobiłem inaczej w tej wersji 4? 920 00:40:26,410 --> 00:40:28,020 Więc nie będziemy się zbytnio rozwodzić na tym tutaj. 921 00:40:28,020 --> 00:40:30,100 Zobaczycie to w problemu zestaw siedmiu ostatecznie. 922 00:40:30,100 --> 00:40:31,350 Zauważmy jednak, zrobiłem kilka rzeczy. 923 00:40:31,350 --> 00:40:33,690 >> Przedstawiłem div znacznik, który jest podział, 924 00:40:33,690 --> 00:40:35,450 w duchu podobnym do znacznika akapitu. 925 00:40:35,450 --> 00:40:38,220 Ale podział jest tak jak tutaj jest prostokątny obszar niewidoczny 926 00:40:38,220 --> 00:40:39,150 ekranu. 927 00:40:39,150 --> 00:40:41,680 Dajmy mu wyjątkowy identyfikator, stopka, tylko 928 00:40:41,680 --> 00:40:44,700 tak, że można mówić o to w naszym HTML gdzie indziej. 929 00:40:44,700 --> 00:40:47,952 Oto kolejny div strony którego ID będzie zadowolony. 930 00:40:47,952 --> 00:40:49,160 To zawartość strony. 931 00:40:49,160 --> 00:40:51,090 I tu jest nagłówek strony. 932 00:40:51,090 --> 00:40:54,960 >> Innymi słowy, ve zasadniczo w HTML jestem psychicznie 933 00:40:54,960 --> 00:40:57,700 oglądania tej strony internetowej jako trzy elementy, header 934 00:40:57,700 --> 00:41:01,200 tutaj z tym niewidzialnym prostokąta, zawartość w środku, a następnie 935 00:41:01,200 --> 00:41:04,800 stopka na dole, nawet choć nie widzimy tych rzeczy. 936 00:41:04,800 --> 00:41:09,940 Bo chcę w mojej głowie strona tutaj, lub w pliku .css 937 00:41:09,940 --> 00:41:11,460 Można użyć tej składni. 938 00:41:11,460 --> 00:41:13,070 >> Nagłówek nie jest znacznik. 939 00:41:13,070 --> 00:41:17,060 To tak okazuje ID się, że w ten #header, 940 00:41:17,060 --> 00:41:20,840 Teraz mogę zastosować jeden lub więcej Właściwości do nagłówka. 941 00:41:20,840 --> 00:41:24,130 Mogę zrobić taką samą treść, same treści tutaj. 942 00:41:24,130 --> 00:41:27,230 >> Tak więc, na przykład, w stopce, uprzedzenia wszystkie te właściwości Dodaję. 943 00:41:27,230 --> 00:41:30,660 I wiem, że istnieją tylko przez czytanie się w dokumentacji CSS. 944 00:41:30,660 --> 00:41:33,450 Rozmiar czcionki będzie smaller-- więc niektóre względny rozmiar czcionki. 945 00:41:33,450 --> 00:41:34,741 Waga będzie pogrubiony. 946 00:41:34,741 --> 00:41:37,340 Margin-- ile pikseli wokół it-- jest 20 pikseli. 947 00:41:37,340 --> 00:41:38,590 A to będzie się koncentrować. 948 00:41:38,590 --> 00:41:40,256 >> Ale teraz, strona wygląda tak. 949 00:41:40,256 --> 00:41:42,840 Jeśli nie jestem zadowolony z mój egzemplarz tam, 950 00:41:42,840 --> 00:41:46,560 Mógłby zrobić coś jak kolor czerwony. 951 00:41:46,560 --> 00:41:50,570 I wtedy mogę zapisać to, przeładować, i teraz mam stylizowane stopkę. 952 00:41:50,570 --> 00:41:54,130 Więc jest to tylko podpowiedzi na mocy z tego, co można zrobić na stronie internetowej 953 00:41:54,130 --> 00:41:55,510 zmiany sytuacji. 954 00:41:55,510 --> 00:41:59,080 >> I jeszcze lepszy niż ten, jeśli chcesz poruszać się po stronach internetowych z rzeczywistych, 955 00:41:59,080 --> 00:42:00,810 nie można na stałe zmienić je. 956 00:42:00,810 --> 00:42:03,640 Ale jeśli otworzyć Inspektor ponownie Chrome 957 00:42:03,640 --> 00:42:07,610 i nie iść do lewej strony tu, który pokazuje Facebooka HTML, 958 00:42:07,610 --> 00:42:11,380 ale wskazuje na prawo hand side wszystkie jego CSS 959 00:42:11,380 --> 00:42:13,789 Możesz albo i zmiany sytuacji w locie. 960 00:42:13,789 --> 00:42:15,080 Więc pozwól mi iść dalej i to zrobić. 961 00:42:15,080 --> 00:42:18,670 >> Pozwólcie mi iść do przodu i kontrola kliknij na losowe słowa tutaj, 962 00:42:18,670 --> 00:42:21,230 podpisać, a następnie kliknij przycisk Sprawdź element. 963 00:42:21,230 --> 00:42:25,130 Chrome skacze do bardzo dogodnie tag h1, że Facebook korzysta. 964 00:42:25,130 --> 00:42:27,290 I tutaj odnotować Facebooka ma trochę leniwie 965 00:42:27,290 --> 00:42:29,960 na sztywno rozmiar czcionki jako właściwość tutaj. 966 00:42:29,960 --> 00:42:33,530 >> Tak fajne, choć jest że jeśli faktycznie go tutaj 967 00:42:33,530 --> 00:42:39,560 i powiedzieć, oh, Facebook, nie lubię, że 64 pikseli, możemy teraz zmienić Facebooka. 968 00:42:39,560 --> 00:42:42,590 Oczywiście, jesteśmy tylko zmieniając go dla mnie w tej chwili. 969 00:42:42,590 --> 00:42:45,150 Ale to jest po prostu inny narzędzie w naszym zestawie narzędzi 970 00:42:45,150 --> 00:42:48,360 że zamierza pozwalają nam dostosować i dowiedzieć się, jak również zdiagnozować 971 00:42:48,360 --> 00:42:49,729 problemy w naszych własnych stron internetowych. 972 00:42:49,729 --> 00:42:52,270 I moglibyśmy podobnie przejść tu, który jest tak samo. 973 00:42:52,270 --> 00:42:55,830 Jeśli naprawdę chcesz, aby uzyskać fantazyjny, ja myśli, teraz naprawdę można mutować stronę 974 00:42:55,830 --> 00:42:57,380 i robić szalone rzeczy. 975 00:42:57,380 --> 00:42:59,870 >> Więc dlaczego to wszystko jest przydatna? 976 00:42:59,870 --> 00:43:02,330 No cóż, w końcu jesteśmy będzie chciał być 977 00:43:02,330 --> 00:43:07,110 możliwość tworzenia stron internetowych, które są napędzane przez naszych tylnych końcach, 978 00:43:07,110 --> 00:43:10,520 nie tylko przez Google i outsourcing tylny koniec tam. 979 00:43:10,520 --> 00:43:13,510 My rzeczywiście chcą wartość, na przykład, 980 00:43:13,510 --> 00:43:18,830 działania naszej wyszukiwarce przypisać nie iść do kogoś innego, 981 00:43:18,830 --> 00:43:24,270 ale coś jak search.php, gdzie search.php jest na własnym serwerze, 982 00:43:24,270 --> 00:43:25,670 nie na kogoś innego. 983 00:43:25,670 --> 00:43:30,316 >> I tak, aby dostać się tam, faktycznie trzeba wprowadzić nowy język. 984 00:43:30,316 --> 00:43:33,190 Tak więc mamy już spojrzał na jeden nowy język tutaj, lub dwa naprawdę, HTML 985 00:43:33,190 --> 00:43:33,700 i CSS. 986 00:43:33,700 --> 00:43:36,330 Ale tak naprawdę, to tylko Języki strukturalne i estetyczne. 987 00:43:36,330 --> 00:43:38,360 Oni nie programowania Języki per se. 988 00:43:38,360 --> 00:43:41,160 I to jest o tyle formalny Czas, jak będziemy spędzać na nich. 989 00:43:41,160 --> 00:43:44,910 Bo zaczniemy teraz przejście do PHP. 990 00:43:44,910 --> 00:43:48,160 >> Więc PHP jest rzeczywista język programowania. 991 00:43:48,160 --> 00:43:50,750 Jest to język skryptowy w tym sensie, że jest to 992 00:43:50,750 --> 00:43:52,855 ma być lżejsze niż coś jak C 993 00:43:52,855 --> 00:43:56,082 I jest to język interpretowany, co oznacza, że ​​nie jest skompilowany. 994 00:43:56,082 --> 00:43:58,790 Tak w skrócie, co to znaczy gdy używany język jak C 995 00:43:58,790 --> 00:44:00,290 i musieliśmy go skompilować? 996 00:44:00,290 --> 00:44:02,120 Co to znaczy skompilować kod źródłowy C? 997 00:44:02,120 --> 00:44:03,864 998 00:44:03,864 --> 00:44:04,780 PUBLICZNOŚCI: [niesłyszalne]. 999 00:44:04,780 --> 00:44:06,184 DAVID J MALAN: Powiedz to jeszcze raz? 1000 00:44:06,184 --> 00:44:07,100 PUBLICZNOŚCI: [niesłyszalne]. 1001 00:44:07,100 --> 00:44:07,962 1002 00:44:07,962 --> 00:44:08,920 DAVID J MALAN: Idealny. 1003 00:44:08,920 --> 00:44:10,180 Okazuje go na binarny. 1004 00:44:10,180 --> 00:44:14,200 Okazuje ją do zer i jedynek od rzeczywistego kodu źródłowego angielsko-podobnego. 1005 00:44:14,200 --> 00:44:16,424 I wtedy rzeczywiście możemy uruchomienia tych zer i jedynek 1006 00:44:16,424 --> 00:44:18,840 przekazując je przez CPU poprzez dwukrotne kliknięcie ikony 1007 00:44:18,840 --> 00:44:19,980 lub uruchamiając polecenie. 1008 00:44:19,980 --> 00:44:23,770 >> PHP i Python i Ruby i Perl i JavaScript 1009 00:44:23,770 --> 00:44:26,250 i kiście inne języki są interpretowane 1010 00:44:26,250 --> 00:44:29,290 w językach, co jest do powiedzenia nie je skompilować. 1011 00:44:29,290 --> 00:44:34,220 Raczej, karmić je jako wkład do Program nazywa tłumacza. 1012 00:44:34,220 --> 00:44:36,640 I że tłumacz, które ktoś inny napisał, 1013 00:44:36,640 --> 00:44:40,930 odczytuje kod źródłowy od góry do dołu, od lewej do prawej i tylko interpretuje 1014 00:44:40,930 --> 00:44:43,000 te linie i robi to, co mówisz. 1015 00:44:43,000 --> 00:44:45,360 >> Więc jeśli pojawią linia, która mówi, druk, 1016 00:44:45,360 --> 00:44:48,660 nie musi konwertować drukiem do odpowiednich zer i jedynek. 1017 00:44:48,660 --> 00:44:51,910 To po prostu ma to jak tłumacz duży, jeśli warunek, który mówi, 1018 00:44:51,910 --> 00:44:56,110 jeśli instrukcja programisty jest druku, a następnie wykonaj następujące czynności. 1019 00:44:56,110 --> 00:44:58,170 Tak interpretuje go po prostu przez rodzaj rozumowania 1020 00:44:58,170 --> 00:44:59,800 przez to, co mówisz to zrobić. 1021 00:44:59,800 --> 00:45:01,320 >> I PHP jest jednym z tych języków. 1022 00:45:01,320 --> 00:45:05,310 I PHP lat temu został zaprojektowany właśnie do programowania stron internetowych. 1023 00:45:05,310 --> 00:45:08,160 I to było na początku bardzo niechlujny język niechlujny. 1024 00:45:08,160 --> 00:45:10,940 I rzeczywiście, jest ogromna ilość złego kodu PHP tam. 1025 00:45:10,940 --> 00:45:13,520 Ale sam język dojrzał w ciągu roku, 1026 00:45:13,520 --> 00:45:16,200 tak bardzo, że teraz jest naprawdę wspaniałe następny krok 1027 00:45:16,200 --> 00:45:19,970 pedagogicznie z C, bo to tak cholernie dobrze znane wszystkim 1028 00:45:19,970 --> 00:45:22,380 właśnie widziałem w ciągu ostatnich kilku tygodni. 1029 00:45:22,380 --> 00:45:25,724 >> Jedna początkowa różnica zobaczymy to nie ma już główną funkcją. 1030 00:45:25,724 --> 00:45:28,890 Po rozpoczęciu pisania kodu, to tylko dostanie wykonywane niezależnie, 1031 00:45:28,890 --> 00:45:30,220 jak zobaczymy za chwilę. 1032 00:45:30,220 --> 00:45:33,320 Tymczasem, oto co zmienna wygląda w PHP. 1033 00:45:33,320 --> 00:45:35,840 To jest trochę inna, ale ledwo. 1034 00:45:35,840 --> 00:45:39,380 >> W PHP, nie ma silnego typowania. 1035 00:45:39,380 --> 00:45:41,430 Jest tygodniu pisania, które po prostu oznacza, że ​​nie 1036 00:45:41,430 --> 00:45:44,030 są typy danych, takie jak struny i numery i inne rzeczy. 1037 00:45:44,030 --> 00:45:47,030 Ale nie przejmuj się, określając jakie są już. 1038 00:45:47,030 --> 00:45:48,980 PHP dane to dla ciebie. 1039 00:45:48,980 --> 00:45:52,030 Znak dolara jest tylko decyzja że ludzie PHP wykonane lat 1040 00:45:52,030 --> 00:45:54,890 temu taka, że ​​każda zmienna w PHP po prostu zaczyna się od znaku dolara. 1041 00:45:54,890 --> 00:45:58,130 To faktycznie niby przydatne, to wyskakuje na ciebie trochę więcej. 1042 00:45:58,130 --> 00:46:01,315 >> Jednak po tym, to Jest to stan, w PHP. 1043 00:46:01,315 --> 00:46:03,140 1044 00:46:03,140 --> 00:46:04,730 Czym różni w porównaniu z C? 1045 00:46:04,730 --> 00:46:07,180 1046 00:46:07,180 --> 00:46:09,600 Oszukać question-- nic, co jest rzeczywiście bardzo ładny. 1047 00:46:09,600 --> 00:46:12,140 Wyrażenia logiczne w PHP-- samym. 1048 00:46:12,140 --> 00:46:19,354 I wyrażenia logiczne w porównaniu z lub, przełączniki, pętle, pętle, loops-- OK 1049 00:46:19,354 --> 00:46:20,270 ten jest inny. 1050 00:46:20,270 --> 00:46:22,660 >> Tak więc okazuje się, że to Kilka innych funkcji w PHP. 1051 00:46:22,660 --> 00:46:25,243 Jednym z nich jest rzeczywiście tym który jest cudownie wygodne. 1052 00:46:25,243 --> 00:46:29,250 Jeśli $ liczb jest tablica, że ​​masz uznane uprzednio w programie, 1053 00:46:29,250 --> 00:46:33,350 masz na to ochotę każdego konstruktu że zamiast robić wszystko to 1054 00:46:33,350 --> 00:46:37,020 irytujące, że jest równa 0, to jest mniej niż to, [ I ++?] 1055 00:46:37,020 --> 00:46:40,320 dla każdej liczbie jak liczba, z których każda z tych wartości dolara jest po prostu 1056 00:46:40,320 --> 00:46:42,790 zmienna, a ostatni można myśleć jako I. 1057 00:46:42,790 --> 00:46:44,290 Można nazwać to cokolwiek chcesz. 1058 00:46:44,290 --> 00:46:45,770 Nazwałem to liczba. 1059 00:46:45,770 --> 00:46:48,825 To będzie iteracyjnego Tablica numerów. 1060 00:46:48,825 --> 00:46:51,200 I na każdej iteracji, to będzie automatycznie aktualizować 1061 00:46:51,200 --> 00:46:54,340 dla Ciebie numerem znak dolara zmienna, tak aby stale 1062 00:46:54,340 --> 00:46:58,210 mieć dostęp do zmiennej, którą chcesz bez konieczności wykonywania jakichkolwiek nawias kwadratowy 1063 00:46:58,210 --> 00:47:00,980 zapis lub indeksowanie do tablicy. 1064 00:47:00,980 --> 00:47:04,950 >> Poza tym, mamy nawet takie rzeczy jak tablice, które wyglądają prawie tak samo, 1065 00:47:04,950 --> 00:47:08,210 oprócz tego, że bardzo często, jak będziesz zobaczyć, jak w PHP i JavaScript 1066 00:47:08,210 --> 00:47:10,750 wstępnie zainicjować tablicę w nawiasach kwadratowych. 1067 00:47:10,750 --> 00:47:12,040 C wykorzystuje nawiasy klamrowe. 1068 00:47:12,040 --> 00:47:15,330 Więc to jest nieco inny, choć tak naprawdę nie korzystać z tej sztuczki dużo. 1069 00:47:15,330 --> 00:47:20,090 >> Ale nawet mocniej, PHP ma tablic asocjacyjnych, 1070 00:47:20,090 --> 00:47:23,100 który jest fantazyjny sposób mówić tabel mieszania. 1071 00:47:23,100 --> 00:47:31,610 W rzeczywistości, jeśli chcesz zadeklarować hash Stół w PHP, w przeciwieństwie C-- ile 1072 00:47:31,610 --> 00:47:34,775 linii kodu zajęło rzeczywiście wdrożyć tabeli mieszania w C? 1073 00:47:34,775 --> 00:47:38,310 Albo ile linii kodu jest to biorąc wdrożyć tabeli mieszania w C? 1074 00:47:38,310 --> 00:47:39,820 Więc to chyba dużo, prawda? 1075 00:47:39,820 --> 00:47:41,680 To kilkadziesiąt, może 100 lub 200. 1076 00:47:41,680 --> 00:47:42,980 To nietrywialne. 1077 00:47:42,980 --> 00:47:45,420 Albo o to, aby być, jak szybko przekonasz się, nieszablonowe 1078 00:47:45,420 --> 00:47:48,080 zaimplementować tabeli mieszania [Niesłyszalne], a także spróbować. 1079 00:47:48,080 --> 00:47:50,580 Ale w PHP-- i szczerze mówiąc, Prawdopodobnie nie powinno ci to powiedzieć 1080 00:47:50,580 --> 00:47:53,630 aż Monday-- w PHP, jeśli chcesz mieć stolik, zrobione. 1081 00:47:53,630 --> 00:47:56,431 To skrót table-- tak z jednej linii kodu. 1082 00:47:56,431 --> 00:47:56,930 I 1083 00:47:56,930 --> 00:47:58,810 >> Wiele języków zrobić. 1084 00:47:58,810 --> 00:48:00,190 Baw się z Pset pięć. 1085 00:48:00,190 --> 00:48:01,980 Tak wiele języków to zrobić. 1086 00:48:01,980 --> 00:48:03,050 1087 00:48:03,050 --> 00:48:06,140 Dają te abstrakcje że innych ludzi, innych programistów, 1088 00:48:06,140 --> 00:48:09,870 Stworzyliśmy dla Ciebie tak, że można stanąć na ramionach 1089 00:48:09,870 --> 00:48:13,290 i rozpocząć korzystanie z pomysłów, które są bardzo przekonujące, jak tabele z cebulą i drzew 1090 00:48:13,290 --> 00:48:14,140 i próbuje. 1091 00:48:14,140 --> 00:48:17,790 Ale nie koniecznie wdrożenie tych rzeczy samemu. 1092 00:48:17,790 --> 00:48:20,850 >> I tak w końcu, co będziemy używać PHP do 1093 00:48:20,850 --> 00:48:23,580 pisanie programów jest potencjalnie w tak zwanej linii polecenia. 1094 00:48:23,580 --> 00:48:26,600 Możemy odtworzyć każdy program pisaliśmy w tym semestrze do tej pory, 1095 00:48:26,600 --> 00:48:30,410 może z wyjątkiem Breakout, który wykorzystuje SPL, który jest specyficzny dla C, w tym momencie. 1096 00:48:30,410 --> 00:48:33,100 Ale każdy inny problem ustawić, oczywiście Mario i Cezar 1097 00:48:33,100 --> 00:48:35,300 i Vigenère i [? Złamać?] I dalej, my 1098 00:48:35,300 --> 00:48:39,520 może ponownie wprowadzić w PHP, i prawdopodobnie nieco łatwiej. 1099 00:48:39,520 --> 00:48:43,050 >> Ale co my ostatecznie będzie jest PHP jest programowania WWW. 1100 00:48:43,050 --> 00:48:46,420 I mamy zamiar wprowadzić w przyszłym Tydzień psychicznego model paradygmat nazywa 1101 00:48:46,420 --> 00:48:49,610 MVC, model widok kontroler, które, jeśli zrobiłeś programowania 1102 00:48:49,610 --> 00:48:51,610 przed lub w Pythonie Ruby, czy gdzie indziej, to 1103 00:48:51,610 --> 00:48:54,112 może wiedzieć z tego zespołu Rails i Django i jak. 1104 00:48:54,112 --> 00:48:55,820 Ale jeśli jesteś nowy to też, zobaczysz 1105 00:48:55,820 --> 00:48:59,652 że to jest rzeczywiście bardzo naturalne Rozszerzenie na czynniki 1106 00:48:59,652 --> 00:49:01,360 i rodzaju konstrukcji kodu, który mamy 1107 00:49:01,360 --> 00:49:04,670 robi w C Będziemy teraz zastosować niektóre z tych lekcji na PHP 1108 00:49:04,670 --> 00:49:07,190 sposób, że ostatecznie jesteśmy realizacji własnych stron internetowych. 1109 00:49:07,190 --> 00:49:09,080 A jeśli masz coś w rodzaju zahipnotyzowany lub zaskoczony 1110 00:49:09,080 --> 00:49:10,954 że mamy zamiar zrobić wszystko tak szybko, 1111 00:49:10,954 --> 00:49:13,410 sobie sprawę, że prawie każdy semestr, prawie 90% 1112 00:49:13,410 --> 00:49:16,560 od studentów CS50, w tym którzy nigdy nie zaprogramowane, 1113 00:49:16,560 --> 00:49:20,329 zakończyć, że projekty ostateczne, że opiera się na programowaniu stron internetowych. 1114 00:49:20,329 --> 00:49:23,120 I tak widać, że powraca są bogate w nadchodzących tygodniach. 1115 00:49:23,120 --> 00:49:24,965 Więc będziemy do zobaczenia w poniedziałek. 1116 00:49:24,965 --> 00:49:27,260 1117 00:49:27,260 --> 00:49:30,120 >> GŁOŚNIK 1: A teraz, Głębokie Myśli przez Daven Farnham. 1118 00:49:30,120 --> 00:49:34,055 1119 00:49:34,055 --> 00:49:34,780 Hash tabele. 1120 00:49:34,780 --> 00:49:37,180 1121 00:49:37,180 --> 00:49:38,402 >> [Śmiech] 1122 00:49:38,402 --> 00:49:38,902