1 00:00:00,000 --> 00:00:01,390 2 00:00:01,390 --> 00:00:04,890 >> [Glazbom] 3 00:00:04,890 --> 00:00:10,955 4 00:00:10,955 --> 00:00:12,580 DAVID J Malan: U redu, dobrodošao natrag. 5 00:00:12,580 --> 00:00:13,600 Ovo je CS50. 6 00:00:13,600 --> 00:00:15,540 To je kraj tjedna sedam. 7 00:00:15,540 --> 00:00:18,180 I to je kraj tog čistača lova od problema postaviti četiri 8 00:00:18,180 --> 00:00:19,220 da biste mogli sjetiti. 9 00:00:19,220 --> 00:00:21,650 Nakon oporavka sve ti JPEG osoblja, 10 00:00:21,650 --> 00:00:24,820 ste bili izazvani, ako želite, da se fotografirati sa što više 11 00:00:24,820 --> 00:00:25,981 od tih ljudi kao što možete. 12 00:00:25,981 --> 00:00:28,480 Imamo hrpu podnesaka tijekom posljednjih nekoliko tjedana, 13 00:00:28,480 --> 00:00:32,980 zapravo, dosta neposredno prije podne Danas, neki od kojih su oni ovdje 14 00:00:32,980 --> 00:00:37,670 uhvaćen ovdje in-- izgleda like-- Annenberg Dvorana na radnog vremena, jedan ovdje 15 00:00:37,670 --> 00:00:39,530 u Lowell House s Nickom. 16 00:00:39,530 --> 00:00:41,750 Evo Ramon što je uhvaćen na telefon. 17 00:00:41,750 --> 00:00:43,870 To je u CS50 ručak. 18 00:00:43,870 --> 00:00:46,840 To je bio Jason Skyping s više kreativni kolegica, 19 00:00:46,840 --> 00:00:48,280 koji ga je nazvao na ovaj način. 20 00:00:48,280 --> 00:00:49,690 Mi ne znamo što je to. 21 00:00:49,690 --> 00:00:51,940 >> [Smijeh] 22 00:00:51,940 --> 00:00:54,570 >> DAVID J Malan: Ali to je vrijedno gigabajt. 23 00:00:54,570 --> 00:00:56,960 Ovdje je Chang, koji je doslovno pobjegla s pozornice 24 00:00:56,960 --> 00:01:00,480 kako bi se izbjeglo se fotografirali jedno dan, ali na kraju je uhvaćen. 25 00:01:00,480 --> 00:01:02,050 Ovdje je Nick. 26 00:01:02,050 --> 00:01:03,480 Ovdje je Nick. 27 00:01:03,480 --> 00:01:04,080 Ovdje je Nick. 28 00:01:04,080 --> 00:01:05,090 29 00:01:05,090 --> 00:01:07,670 I ovdje je Alison dolje po poljima. 30 00:01:07,670 --> 00:01:11,840 I Zamyla čak je pronađena na ballroom natjecanju. 31 00:01:11,840 --> 00:01:14,100 Tako ćemo proći ove fotografije, shvatiti 32 00:01:14,100 --> 00:01:16,690 koji je podnio najviše Najraniji, i nagrada 33 00:01:16,690 --> 00:01:20,662 jedan nevjerojatan nagrada, kao što je obećao u spec. 34 00:01:20,662 --> 00:01:23,120 I također ćemo pratiti oko prostor koji je bio uključen. 35 00:01:23,120 --> 00:01:26,860 >> Par announcements-- tako ručka je, opet, ovog petka u 13:15. 36 00:01:26,860 --> 00:01:30,420 Ako želite da nam se pridružite, RSVP na toj URL ovdje. 37 00:01:30,420 --> 00:01:33,730 Jason ponovno pojavljuje ovdje iz jednog od sekcija par godina 38 00:01:33,730 --> 00:01:35,510 natrag, što se dogodilo pasti na Noć vještica. 39 00:01:35,510 --> 00:01:38,950 I doista, bio odjeven kao bundeve toj godini. 40 00:01:38,950 --> 00:01:42,700 Ako ste gledati ovaj odjeljak njegova od 2011. sekciji 41 00:01:42,700 --> 00:01:46,480 osam, ako ste znatiželjni, na CS50.tv, mislim 42 00:01:46,480 --> 00:01:49,730 ovo je godina u kojoj njegova pumpa za zrak radi. 43 00:01:49,730 --> 00:01:52,490 >> Ako zatim gledati Sličan poglavlje u 2012., 44 00:01:52,490 --> 00:01:55,620 ćete vidjeti ovaj Jasona mnogo deflacioniranog, budući odijelo više nije funkcionirao, 45 00:01:55,620 --> 00:01:58,060 što je samo reći ovog petka, ako bih 46 00:01:58,060 --> 00:02:02,720 vole da izgrade bundeva s Daven i Gabe i drugi, svoj dolazak na glavama 47 00:02:02,720 --> 00:02:04,480 na cs50.harvard.edu adresu. 48 00:02:04,480 --> 00:02:06,200 On obećava da će biti zabavno. 49 00:02:06,200 --> 00:02:08,660 Daven, mi smo rekli, je uklesan Bundeva cijeloga života. 50 00:02:08,660 --> 00:02:11,930 Gabriel iz Brazila nikada izrezbario bundevu za Noć vještica. 51 00:02:11,930 --> 00:02:14,700 Dakle, biti tamo s njima kao što je on uči. 52 00:02:14,700 --> 00:02:16,830 >> Seminari, meanwhile-- pa ćete brzo naučiti 53 00:02:16,830 --> 00:02:20,650 o tome što su naša očekivanja za konačni projekt, koji se u bitnome 54 00:02:20,650 --> 00:02:23,150 će se svode na osmišljavanju i provedbi 55 00:02:23,150 --> 00:02:26,440 većina bilo projekt od interesa za ti, iako uz suglasnost 56 00:02:26,440 --> 00:02:28,490 i smjernice iz svog nastavnog kolegama. 57 00:02:28,490 --> 00:02:32,110 Pred kraj semestar, uvodimo niz 58 00:02:32,110 --> 00:02:35,610 seminara, koji su izborni klase na čelu s nastavnim novaci i Harvardu 59 00:02:35,610 --> 00:02:38,570 osoblje, prijatelji i naravno diljem kampusa, na raznim temama koje 60 00:02:38,570 --> 00:02:41,470 se dodiruje temeljni plan i program TEČAJ-a 61 00:02:41,470 --> 00:02:45,590 ali ipak je moguće, zabavno, i različit za potencijalne krajnje projekte. 62 00:02:45,590 --> 00:02:49,530 >> Na primjer, prvo, ako želite registrirati, glavu na tom URL tamo. 63 00:02:49,530 --> 00:02:53,010 A to je postava za ovogodišnji seminari sama. 64 00:02:53,010 --> 00:02:56,060 No shvatili smo desetke seminari iz proteklih godina, od kojih svi 65 00:02:56,060 --> 00:02:59,774 povezani u izborniku Seminari Mogućnost stranicama tečaja je. 66 00:02:59,774 --> 00:03:02,190 Dakle, ako razmišljate o tome ide izvan vaše zone udobnosti 67 00:03:02,190 --> 00:03:05,060 ili branje gore neke nove vještine, primjerice, programiranje iPhone 68 00:03:05,060 --> 00:03:08,100 aplikacije s Swift, novi jezik Apple ili Objective-C 69 00:03:08,100 --> 00:03:11,230 ili Android aplikacije ili programiranje [? napomena?] žarulje, ili bilo koje od tema 70 00:03:11,230 --> 00:03:15,490 ovdje i više, zbog provjera iz stranice registraciju. 71 00:03:15,490 --> 00:03:19,730 >> Tako smo počeli i zaključio na Ponedjeljak uz gledajući HTTP. 72 00:03:19,730 --> 00:03:22,675 Tako brzo refresher-- HTTP, HyperText Transfer Protocol. 73 00:03:22,675 --> 00:03:24,045 No, što to zapravo znači? 74 00:03:24,045 --> 00:03:26,805 75 00:03:26,805 --> 00:03:27,930 Što to zapravo znači? 76 00:03:27,930 --> 00:03:30,665 77 00:03:30,665 --> 00:03:31,290 Je li to ruka? 78 00:03:31,290 --> 00:03:33,074 79 00:03:33,074 --> 00:03:34,740 Znam da ste samo grebanje glavu. 80 00:03:34,740 --> 00:03:36,400 No, želite predložiti ono što je HTTP? 81 00:03:36,400 --> 00:03:37,792 82 00:03:37,792 --> 00:03:40,576 >> PUBLIKA: Kako računala komunicirati s [nečujan]. 83 00:03:40,576 --> 00:03:41,517 84 00:03:41,517 --> 00:03:43,100 DAVID J Malan: Propustio sam zadnji dio. 85 00:03:43,100 --> 00:03:45,774 Kako računala komuniciraju with-- 86 00:03:45,774 --> 00:03:47,325 >> PUBLIKA: Internet poslužitelji. 87 00:03:47,325 --> 00:03:50,450 DAVID J Malan: Good-- s interneta poslužitelji, i posebno, web poslužitelja. 88 00:03:50,450 --> 00:03:53,533 Zbog povlačenja, postoji hrpa usluga na internetu, od kojih su neki 89 00:03:53,533 --> 00:03:57,349 Koristite vjerojatno svakodnevno između chat i poruka, chat i web i e-mail, 90 00:03:57,349 --> 00:03:57,890 i slično. 91 00:03:57,890 --> 00:04:00,900 I HTTP je samo protokol koji web preglednici 92 00:04:00,900 --> 00:04:03,750 govoriti kada komunikaciji s Web poslužitelji, i obrnuto. 93 00:04:03,750 --> 00:04:05,580 I u analogni ljudski svijet mogao biti, 94 00:04:05,580 --> 00:04:08,730 Izražavam svoju ruku tresti neke druga ljudska i on ili ona 95 00:04:08,730 --> 00:04:11,970 priznaje produljenjem njegov ili njezin ruku kao dobro. 96 00:04:11,970 --> 00:04:13,970 Dakle, to je samo protokol, skup konvencija. 97 00:04:13,970 --> 00:04:15,630 >> A što su oni doista konvencije? 98 00:04:15,630 --> 00:04:18,640 Pa, to samo svodi na slanje poruka natrag i naprijed, 99 00:04:18,640 --> 00:04:19,770 kao što je prikazano ovdje. 100 00:04:19,770 --> 00:04:22,520 A postoji nekoliko načina na koji možete poslati ove poruke. 101 00:04:22,520 --> 00:04:24,360 A možda najviše zajedničko je poznat kao get. 102 00:04:24,360 --> 00:04:26,510 A mi ćemo vidjeti kontrast to prije dugo. 103 00:04:26,510 --> 00:04:30,010 >> No GET zahtjev iz preglednika na poslužitelju samo izgleda ovako. 104 00:04:30,010 --> 00:04:32,960 To je hrpa teksta koji se stavlja unutar virtualnog omotnici. 105 00:04:32,960 --> 00:04:35,854 Na vanjskoj strani omotnice toga ići par komada detalje. 106 00:04:35,854 --> 00:04:37,770 Ono što treba ići na omotnicu, da tako kažemo, 107 00:04:37,770 --> 00:04:41,820 kako bi dobili zahtjev kao to od mene na web poslužitelju? 108 00:04:41,820 --> 00:04:42,320 Da. 109 00:04:42,320 --> 00:04:43,270 >> PUBLIKA: Vaša IP adresa. 110 00:04:43,270 --> 00:04:45,890 >> DAVID J Malan: Moja IP adresa u Od terenu, da tako kažemo, 111 00:04:45,890 --> 00:04:49,490 i naravno, primatelja IP adresa. 112 00:04:49,490 --> 00:04:52,710 No, u slučaju web paketa, trebamo malo više detalja 113 00:04:52,710 --> 00:04:55,254 Nije dovoljno samo pošaljite omotnicu na poslužitelj, 114 00:04:55,254 --> 00:04:57,670 jer to poslužitelj može biti slušanje za različite vrste 115 00:04:57,670 --> 00:04:59,180 internet prometa. 116 00:04:59,180 --> 00:05:01,370 Pa što još trebamo osim primatelja IP? 117 00:05:01,370 --> 00:05:02,723 118 00:05:02,723 --> 00:05:03,222 Da? 119 00:05:03,222 --> 00:05:04,241 >> PUBLIKA: Je li TCP? 120 00:05:04,241 --> 00:05:05,074 DAVID J Malan: Dobro. 121 00:05:05,074 --> 00:05:06,470 TCP-- 122 00:05:06,470 --> 00:05:07,340 >> PUBLIKA: Adresa. 123 00:05:07,340 --> 00:05:09,340 >> DAVID J Malan: Adresa, ili luka, kako se zove. 124 00:05:09,340 --> 00:05:11,010 Blizu, ali broj TCP priključak. 125 00:05:11,010 --> 00:05:12,220 A tu je hrpa tih. 126 00:05:12,220 --> 00:05:14,310 No, sigurno je većina upoznati trebali na kraju 127 00:05:14,310 --> 00:05:17,590 bilo 80, što je zadana on koristi za web prometa. 128 00:05:17,590 --> 00:05:20,040 I još jedna poznata on će uskoro biti 443, 129 00:05:20,040 --> 00:05:24,280 koji se koristi za sigurnu webu prometa, URL-ova koje počinju s https. 130 00:05:24,280 --> 00:05:26,650 >> Dakle, to je ono što se događa unutar tog okvira. 131 00:05:26,650 --> 00:05:29,780 I dobiti / samo znači, daju mi web stranica zadana. 132 00:05:29,780 --> 00:05:32,700 Daj mi korijen tvrdi voziti na toj web poslužitelju. 133 00:05:32,700 --> 00:05:36,050 I nadamo se, web poslužitelj će odgovoriti, OK 134 00:05:36,050 --> 00:05:39,630 a broj 200, što je samo Konvencija govoreći, da, sve 135 00:05:39,630 --> 00:05:40,470 je doista u redu. 136 00:05:40,470 --> 00:05:41,680 Evo stranica. 137 00:05:41,680 --> 00:05:45,510 Vrsta web stranice će se biti tekst, ali točnije, HTML, 138 00:05:45,510 --> 00:05:47,010 koji smo o tome roniti natrag u. 139 00:05:47,010 --> 00:05:49,877 I dot dot dot jednostavno znači, ovdje je HTML. 140 00:05:49,877 --> 00:05:51,710 A to je gdje smo pokupiti priču danas, 141 00:05:51,710 --> 00:05:55,740 zapravo pisanje HTML, HyperText Markup Language, što 142 00:05:55,740 --> 00:05:57,727 je jezik na kojem web stranice su napisane. 143 00:05:57,727 --> 00:05:59,060 To nije programski jezik. 144 00:05:59,060 --> 00:06:01,270 Nema funkcije ili petlje ili uvjeta. 145 00:06:01,270 --> 00:06:03,800 To je jezik za označavanje, kao i danas opet vidim, 146 00:06:03,800 --> 00:06:07,240 koji vam omogućuje da odredite kako strukturirati i stilizira 147 00:06:07,240 --> 00:06:09,300 estetski web stranica. 148 00:06:09,300 --> 00:06:11,470 >> Dakle, to je bio jedan a samo stranica mi stvarno 149 00:06:11,470 --> 00:06:13,930 pogledala, ako se nakratko, u ponedjeljak. 150 00:06:13,930 --> 00:06:16,250 I primijetite neke Istaknute značajke. 151 00:06:16,250 --> 00:06:20,170 Ima puno otvorenih nagnuti Nosač i zatvoriti kutnog držača. 152 00:06:20,170 --> 00:06:23,160 Između onih koji pod kutom nosači su riječi. 153 00:06:23,160 --> 00:06:25,660 A mi ćemo početi nazivajući te riječi oznake. 154 00:06:25,660 --> 00:06:28,800 Tako otvorene glavu nosač i zatvorena zagrada glavu 155 00:06:28,800 --> 00:06:33,620 su otvoreni i zatvoreni oznaka, ili početak i kraj oznake 156 00:06:33,620 --> 00:06:37,660 odnosno, od HTML elementa, kako ćemo ga nazvati, nazvao glavu. 157 00:06:37,660 --> 00:06:41,760 A isto vrijedi i žargona na tijelu u HTML i tako dalje. 158 00:06:41,760 --> 00:06:43,970 >> A ono što je lijepo je HTML-- i doista, mi ćemo 159 00:06:43,970 --> 00:06:47,187 potrošiti užasno malo vremena na njemu, zato što govore samo ćete shvatiti 160 00:06:47,187 --> 00:06:49,770 što ga ima ima kad vas zapravo imaju konkretnog problema 161 00:06:49,770 --> 00:06:52,820 da solve-- vidjet ćete da preglednik je prilično glupo. 162 00:06:52,820 --> 00:06:56,450 To samo će do-- ne za razliku computer-- što to kažem. 163 00:06:56,450 --> 00:06:59,279 I tako kad imate otvorene nosač HTML na samom vrhu 164 00:06:59,279 --> 00:07:01,320 postoji, da je bitno samo znači, hej, preglednik, 165 00:07:01,320 --> 00:07:04,090 ovdje dolazi web stranica napisana u HTML. 166 00:07:04,090 --> 00:07:06,130 >> Kad se vidi otvoren nosač glavu, to samo znači, 167 00:07:06,130 --> 00:07:10,350 hej, preglednik, ovdje dolazi glavu, ili najviši dio moje web stranice. 168 00:07:10,350 --> 00:07:14,192 Kada se vidi zatvorenu nosač glavu, to samo znači, hej, 169 00:07:14,192 --> 00:07:15,150 to je to za glavu. 170 00:07:15,150 --> 00:07:16,420 Stanje pripravnosti za nešto drugo. 171 00:07:16,420 --> 00:07:18,878 A to je nešto drugo očito će biti tijelo. 172 00:07:18,878 --> 00:07:22,630 A kad nemate oznaku, kao imate samo zdravo, zarez, svijet, 173 00:07:22,630 --> 00:07:26,610 samo da će biti sirovi tekst koji u konačnici se prikazuje na zaslonu. 174 00:07:26,610 --> 00:07:29,220 >> Sada, primijetit ćete previše otiska ovdje. 175 00:07:29,220 --> 00:07:32,160 Vjerojatno možete zaključiti kako ćemo ga stylizing. 176 00:07:32,160 --> 00:07:34,850 Svaki put kad otvorite oznaku, da tako kažem, ja uvukli. 177 00:07:34,850 --> 00:07:38,540 I svaki put sam zatvoriti oznaka, sam izvuci, 178 00:07:38,540 --> 00:07:40,690 slični u duhu do vitičastim zagradama. 179 00:07:40,690 --> 00:07:43,470 I dalje od toga, ja sam vrsta korištenja moju presudu. 180 00:07:43,470 --> 00:07:48,380 Obavijest da ja ne zamaram udaranje Unesite unutar tog oznaka. 181 00:07:48,380 --> 00:07:48,990 Zašto? 182 00:07:48,990 --> 00:07:51,920 Pa, upravo sam odlučio to izgledalo malo čišći mi, ljudski, 183 00:07:51,920 --> 00:07:53,181 samo ne smeta da radi. 184 00:07:53,181 --> 00:07:54,930 Pa opet, ima nekih Presuda poziva jednostavno 185 00:07:54,930 --> 00:07:57,670 kao da je u C ili bilo kojem jeziku. 186 00:07:57,670 --> 00:08:04,110 >> Ali primijetite da je to previše udubljenje posuđuje sama na mentalnom modelu, 187 00:08:04,110 --> 00:08:05,670 da ne pretjerate komplicirati ga. 188 00:08:05,670 --> 00:08:07,020 Ali stablo, zar ne? 189 00:08:07,020 --> 00:08:09,290 Ako mislite o web stranica, očito napisano 190 00:08:09,290 --> 00:08:12,050 ovako, kao lijepo razvedena na taj način, 191 00:08:12,050 --> 00:08:17,390 gotovo da možete misliti na otvorenom nosača HTML zatvorena zagrada oznaka u označavanju 192 00:08:17,390 --> 00:08:21,380 korijen čvor, obiteljsko stablo stil čvor u stilu stabala 193 00:08:21,380 --> 00:08:22,900 Gledali smo prošlog petka. 194 00:08:22,900 --> 00:08:27,630 >> I doista, mi smo na upravo ovdje ono što ćemo nazvati DOM, D-O-M, dokument 195 00:08:27,630 --> 00:08:31,680 objektni model, fancy način govoreći: stablo koje predstavlja taj HTML. 196 00:08:31,680 --> 00:08:36,140 I primijetiti da HTML ima, mi ćemo reći, kao obiteljsko stablo, dvoje djece. 197 00:08:36,140 --> 00:08:37,659 Na lijevoj strani je glava. 198 00:08:37,659 --> 00:08:39,179 Na desnoj strani je tijelo. 199 00:08:39,179 --> 00:08:44,220 >> I baš kao što bezumnom misli vježbe, Glava, naravno, ima koliko djece 200 00:08:44,220 --> 00:08:46,070 prema ovoj strukturi? 201 00:08:46,070 --> 00:08:48,200 Dakle, samo jedan, title-- i to je razlog zašto smo 202 00:08:48,200 --> 00:08:50,580 strelica ide od glave do naslova. 203 00:08:50,580 --> 00:08:55,110 Dakle, to je kao da toj osobi u Obiteljsko stablo je imao samo jednu potomstvo. 204 00:08:55,110 --> 00:08:58,230 A onda i sam naslov može se reći da imaju dijete previše. 205 00:08:58,230 --> 00:09:01,780 >> Sjetite se da je imao HTML Pozdrav, zarez, svijet ispod njega. 206 00:09:01,780 --> 00:09:06,090 A ja jednostavno nisam ga izvući u roku ovalni umjesto pravokutnika jednostavno 207 00:09:06,090 --> 00:09:10,559 prenijeti semantički da iako to je čvor u stablu, da tako kažemo, 208 00:09:10,559 --> 00:09:12,100 to je vrsta bitno razlikuju. 209 00:09:12,100 --> 00:09:12,800 To nije oznaka. 210 00:09:12,800 --> 00:09:14,780 Ili točnije, to nije elementa. 211 00:09:14,780 --> 00:09:16,590 To je samo tekst čvor, ako hoćete. 212 00:09:16,590 --> 00:09:18,990 No, to su posve proizvoljne ljudske konvencije. 213 00:09:18,990 --> 00:09:23,180 Ovo je samo sada moj način predstavlja ono što ću kao agregat 214 00:09:23,180 --> 00:09:24,340 nazvati dokument. 215 00:09:24,340 --> 00:09:27,750 >> I kao na stranu, stvar na super gornjem lijevom kutu, 216 00:09:27,750 --> 00:09:32,080 otvoreni nosač uskličnik doc tipa HTML, ovo izgleda kao krpa, 217 00:09:32,080 --> 00:09:35,560 ali to je glupo kutak slučaj gdje da je upravo tamo, kopirati i zalijepiti 218 00:09:35,560 --> 00:09:38,460 ukazati na preglednike ovo je HTML verzija 5. 219 00:09:38,460 --> 00:09:41,540 Svijet se mijenja, što je prva linija koda na stranici bi trebao biti. 220 00:09:41,540 --> 00:09:43,820 To samo znači verziju 5. 221 00:09:43,820 --> 00:09:45,950 Dakle, to ne sasvim izgleda kao i ostali. 222 00:09:45,950 --> 00:09:48,120 >> U redu, tako da s tim je rekao, sada ćete cijeniti 223 00:09:48,120 --> 00:09:50,767 to prilično glupo ovo tetovaža je netko dobio. 224 00:09:50,767 --> 00:09:51,990 >> [Smijeh] 225 00:09:51,990 --> 00:09:54,210 >> DAVID J Malan: U redu, i sad neka je zapravo roniti 226 00:09:54,210 --> 00:09:55,710 učini nešto s tim. 227 00:09:55,710 --> 00:09:58,610 Vi ćete se sjetiti da je zadnji put Ja otvorio CS50 Appliance 228 00:09:58,610 --> 00:10:01,650 i ja učinio nešto što je jednostavan kao otvaranje gedit. 229 00:10:01,650 --> 00:10:05,190 I ja spasio datoteku čak i na moj desktop-- nigdje special-- 230 00:10:05,190 --> 00:10:05,870 kao hello.html. 231 00:10:05,870 --> 00:10:07,100 232 00:10:07,100 --> 00:10:10,984 >> Pa neka mi to again-- hello.html Enter. 233 00:10:10,984 --> 00:10:13,900 A sada u ovoj datoteci, idem ići naprijed i ponoviti ono što smo upravo 234 00:10:13,900 --> 00:10:18,850 saw-- doc tipa HTML Onda ću to open bracket html zatvorena zagrada. 235 00:10:18,850 --> 00:10:21,890 A onda ću preventivno otvaranje i zatvaranje oznaku. 236 00:10:21,890 --> 00:10:22,390 Zašto? 237 00:10:22,390 --> 00:10:23,598 Samo da ne zaboravite kasnije. 238 00:10:23,598 --> 00:10:26,850 To je samo dobra praksa, kao što je otvaranje i zatvaranje vitičastim zagradama odjednom. 239 00:10:26,850 --> 00:10:28,900 >> I što onda je došao sljedeći? 240 00:10:28,900 --> 00:10:30,582 Možete misliti tetovaža. 241 00:10:30,582 --> 00:10:31,450 >> PUBLIKA: glava. 242 00:10:31,450 --> 00:10:32,500 >> DAVID J Malan: glava. 243 00:10:32,500 --> 00:10:36,020 A onda ovdje, ja imao naslov, mislim. 244 00:10:36,020 --> 00:10:39,886 A naslov je proizvoljno, Pozdrav, svijet blizu naslova. 245 00:10:39,886 --> 00:10:42,760 A onda ovdje, tijelo, course-- onda smo zatvorili tijelo oznaku. 246 00:10:42,760 --> 00:10:45,660 I onda samo nešto redundantly, Imao sam istu stvar ovdje. 247 00:10:45,660 --> 00:10:47,150 >> Dakle, tvrdim da je ovo web stranica. 248 00:10:47,150 --> 00:10:49,050 To je nešto što Sada bi mogao živjeti na webu, 249 00:10:49,050 --> 00:10:51,925 iako, naravno, to je doslovno žive na mojoj površini upravo sada. 250 00:10:51,925 --> 00:10:55,837 Ali doista, ako bi se smanjili gedit, Vidjet ću na moj desktop njegova ikona. 251 00:10:55,837 --> 00:10:58,420 Iako je to aparat, možete to učiniti na Mac OS 252 00:10:58,420 --> 00:11:01,580 bez TextEdit ili Windows Notepad s čak. 253 00:11:01,580 --> 00:11:06,115 >> I ako sam ići naprijed i dvaput kliknite da je čak i select-- dobro, neka je 254 00:11:06,115 --> 00:11:07,990 Ne odabir jer Chrome ne otvara. 255 00:11:07,990 --> 00:11:09,281 Idemo naprijed i otvoriti Chrome. 256 00:11:09,281 --> 00:11:10,160 257 00:11:10,160 --> 00:11:14,040 A onda Zapovjedno-O za otvorene A navigaciju na moj desktop 258 00:11:14,040 --> 00:11:15,320 i otvorite tu datoteku. 259 00:11:15,320 --> 00:11:20,120 Tako je preglednik interpretira HTML, od vrha do dna, s lijeva na desno. 260 00:11:20,120 --> 00:11:21,314 Hej, ovdje je HTML preglednik. 261 00:11:21,314 --> 00:11:21,980 Evo glava. 262 00:11:21,980 --> 00:11:23,250 Evo naslov. 263 00:11:23,250 --> 00:11:24,090 Evo tijela. 264 00:11:24,090 --> 00:11:26,620 I doista, to je kako to čini tu web-stranicu. 265 00:11:26,620 --> 00:11:27,800 >> Ali primijetiti URL. 266 00:11:27,800 --> 00:11:32,430 Nitko od vas mogao podići ovu specifičnu stranicu na svojim prijenosnim računalima upravo sada, 267 00:11:32,430 --> 00:11:34,910 čak i unutar svoje Uređaj se putem tog URL-a, 268 00:11:34,910 --> 00:11:40,130 jer datoteku: // ukazuje da je zapravo na moj datotečnom sustavu, moj hard disk, 269 00:11:40,130 --> 00:11:40,990 nije tvoje. 270 00:11:40,990 --> 00:11:42,440 Dakle, to nije sve što je korisno. 271 00:11:42,440 --> 00:11:44,940 >> Ajmo sad pomaknuti prema korištenjem stvarni web poslužitelja. 272 00:11:44,940 --> 00:11:48,309 I to ispada u CS50 Appliance je više nego samo okruženje u kojem 273 00:11:48,309 --> 00:11:51,100 možete pisati C koda i sastaviti i pokrenite ga kao što ste radili. 274 00:11:51,100 --> 00:11:55,500 Također je konfiguriran Osoblje da predstavljaju tipičnu web 275 00:11:55,500 --> 00:11:58,290 poslužitelj koji je na internetu, onaj koji možda platiti 276 00:11:58,290 --> 00:12:00,210 ili onaj koji je u tzv oblaku. 277 00:12:00,210 --> 00:12:02,600 >> I to je trčanje standardni besplatni open source 278 00:12:02,600 --> 00:12:06,160 softver, na primjer, nešto zove Apache, što je možda 279 00:12:06,160 --> 00:12:08,700 dalje najpopularniji web poslužiteljskog softvera u svijetu 280 00:12:08,700 --> 00:12:11,030 da tisuće web stranica danas koriste. 281 00:12:11,030 --> 00:12:13,420 I to je također još ima softver poput MySQL, 282 00:12:13,420 --> 00:12:16,240 što je poslužitelj baze podataka da smo na kraju ćete doći do, 283 00:12:16,240 --> 00:12:18,330 što je samo reći Mogu početi liječenje 284 00:12:18,330 --> 00:12:22,040 moj aparat kao punopravnog poslužitelju da ja ne plaćam negdje drugdje. 285 00:12:22,040 --> 00:12:25,980 To samo živi na mojoj laptop za razvoj i praktičnost svrhe. 286 00:12:25,980 --> 00:12:27,870 >> Dakle, idemo naprijed i iskoristite to. 287 00:12:27,870 --> 00:12:30,120 Ja ću ići naprijed i otvorite prozor terminala. 288 00:12:30,120 --> 00:12:33,030 I ja ću ići naprijed i move-- zapravo, prvo sam 289 00:12:33,030 --> 00:12:34,860 ide za navigaciju na moj desktop. 290 00:12:34,860 --> 00:12:36,400 Ako radim ls, postoji hello.html. 291 00:12:36,400 --> 00:12:37,022 292 00:12:37,022 --> 00:12:38,730 I ja ću otići naprijed i početi koristiti 293 00:12:38,730 --> 00:12:40,800 Novi katalog imamo Ne koristiti prije i danas. 294 00:12:40,800 --> 00:12:46,840 >> hello.html-- ću pomaknuti da ../vhosts za virtualni hosts-- 295 00:12:46,840 --> 00:12:50,940 više o tome u future-- a zatim u imenik pod nazivom localhost, 296 00:12:50,940 --> 00:12:54,420 što je nadimak koji je dobio gotovo bilo kojeg računala, bilo da je Mac, PC, 297 00:12:54,420 --> 00:12:57,560 ili Linux računalo, a zatim posebno u imenik da smo, 298 00:12:57,560 --> 00:13:01,260 Osoblje je već stvoren za vas kada ste preuzeli aparat zove 299 00:13:01,260 --> 00:13:01,760 javnosti. 300 00:13:01,760 --> 00:13:04,551 I kao što mu ime sugerira, ništa Stavio sam u ovoj mapi, u teoriji, 301 00:13:04,551 --> 00:13:07,790 će sada biti javnosti, barem za ljude 302 00:13:07,790 --> 00:13:10,030 koji imaju izravan priključak na računalu. 303 00:13:10,030 --> 00:13:13,160 >> Pa sad neka mi ići naprijed i napraviti cd toj istoj imenik 304 00:13:13,160 --> 00:13:15,490 tako da mogu vidjeti što je događa i tipa ls. 305 00:13:15,490 --> 00:13:17,630 I doista, to je Jedino tamo. 306 00:13:17,630 --> 00:13:23,250 Tvrdim da sada, jer sam stavio ovo podnijeti hello.html unutar imenik 307 00:13:23,250 --> 00:13:26,940 zove javnosti unutar imenik zove localhost unutar imenik 308 00:13:26,940 --> 00:13:29,810 nazivaju vhosts, koji zahvaljujući CS50 osoblja 309 00:13:29,810 --> 00:13:34,390 je pre-konfiguriran da bude korijen svoj web poslužitelj, 310 00:13:34,390 --> 00:13:36,900 Ja sada mogu nadamo se to učiniti. 311 00:13:36,900 --> 00:13:38,390 >> Idem otvoriti novu karticu. 312 00:13:38,390 --> 00:13:40,090 I ja ću otići da ne podnese: //. 313 00:13:40,090 --> 00:13:44,520 Ja ću koristiti stvarna http / localhost, koji 314 00:13:44,520 --> 00:13:47,470 Ponovno je nadimak za moj vlastiti server. 315 00:13:47,470 --> 00:13:51,085 A onda ću ići na ono što naziv datoteke, samo da bude jasno? 316 00:13:51,085 --> 00:13:52,680 317 00:13:52,680 --> 00:13:54,320 Gdje je ova priča vjerojatno ide? 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 >> Dakle, drugim riječima, želim sada ovo je moj računalo, moj vlastiti aparat, 322 00:14:04,270 --> 00:14:05,660 kao da je to stvarna poslužitelja. 323 00:14:05,660 --> 00:14:07,490 Njegov nadimak je localhost. 324 00:14:07,490 --> 00:14:10,210 Ali mislim da je localhost kao poput Facebook.com google.com, god. 325 00:14:10,210 --> 00:14:11,600 To je samo moj lokalni naziv. 326 00:14:11,600 --> 00:14:14,810 A onda konačni želim u Korijen tvrdom disku, da tako kažemo, 327 00:14:14,810 --> 00:14:17,729 ili korijen web poslužitelja, ergo kosu crtu, a zatim 328 00:14:17,729 --> 00:14:18,770 naziv datoteke hello.html. 329 00:14:18,770 --> 00:14:19,880 330 00:14:19,880 --> 00:14:21,930 >> Dopustite mi da smanjivanje i pritisnite Enter. 331 00:14:21,930 --> 00:14:24,266 I doista, tu je sada moja web stranica. 332 00:14:24,266 --> 00:14:25,390 Tako da je malo drugačiji. 333 00:14:25,390 --> 00:14:26,880 I to je samo kao underwhelming. 334 00:14:26,880 --> 00:14:27,904 Ovo je stara verzija. 335 00:14:27,904 --> 00:14:29,070 Dopustite mi ustuknuti font. 336 00:14:29,070 --> 00:14:29,745 To je stara. 337 00:14:29,745 --> 00:14:30,890 Ovo je nova. 338 00:14:30,890 --> 00:14:35,430 No, ono bitno što se događa Sada je da HTTP se koristi. 339 00:14:35,430 --> 00:14:39,344 >> Učinimo to malo jasnije, ili, ako hoćete, malo kompliciranije. 340 00:14:39,344 --> 00:14:41,760 Pusti me da u donjem desnom kutu mog aparata. 341 00:14:41,760 --> 00:14:44,000 I primijetiti da sve to Vrijeme, tu je bio broj. 342 00:14:44,000 --> 00:14:47,330 To je jedinstvena adresa Vaše CS50 Appliance. 343 00:14:47,330 --> 00:14:50,800 To je privatna adresa, što implicira 172,16, 344 00:14:50,800 --> 00:14:53,860 što samo znači samo da ste fizički mogu pristupiti ovoj web poslužitelja. 345 00:14:53,860 --> 00:14:56,340 Sve je firewallom i lijepo zaštićena od ostatka 346 00:14:56,340 --> 00:14:58,130 svijeta zbog toga adresiranje. 347 00:14:58,130 --> 00:15:01,920 >> A sada primijetiti ali ako idem ovu adresu, a ne u mom aparatu, 348 00:15:01,920 --> 00:15:04,340 ali Mac OS-- idem vratiti ovamo. 349 00:15:04,340 --> 00:15:05,930 Ovo je moj Mac sada. 350 00:15:05,930 --> 00:15:08,460 A sada ću otvoriti ova verzija Chrome ovdje. 351 00:15:08,460 --> 00:15:17,370 I ja ću ići na http: //172.16.25 / I ja zaboraviti rest-- 133. 352 00:15:17,370 --> 00:15:25,210 >> Zato ću posjetiti iz mog Mac da je IP adresa /hello.html Enter. 353 00:15:25,210 --> 00:15:29,850 I sada vidim iz mog Mac da je moj CS50 Appliance, koji je 354 00:15:29,850 --> 00:15:32,600 IP adresa je da broj, doista se ponaša 355 00:15:32,600 --> 00:15:34,320 kao web server na internetu. 356 00:15:34,320 --> 00:15:36,944 To ne mora lijepo lako zapamtite ime kao Facebook.com, 357 00:15:36,944 --> 00:15:40,370 ali je koristeći HTTP očito, iako Chrome 358 00:15:40,370 --> 00:15:43,560 je vrsta pojednostavljenje svijet za nas, ali nas ne pokazuje HTTP. 359 00:15:43,560 --> 00:15:46,210 No, to je doista upravo to. 360 00:15:46,210 --> 00:15:48,470 Chrome je samo štedi neke tipke ovih dana. 361 00:15:48,470 --> 00:15:50,530 I to je ono što sada vidimo. 362 00:15:50,530 --> 00:15:51,890 >> Tako da je sve u redu i dobro. 363 00:15:51,890 --> 00:15:53,740 Ali to je prilično underwhelming stranica. 364 00:15:53,740 --> 00:15:56,230 Pusti me otići i učiniti nešto malo drugačiji sada. 365 00:15:56,230 --> 00:15:57,910 Pa me pustiti natrag u gedit. 366 00:15:57,910 --> 00:16:00,580 I umjesto da pozdravi, Svijet, neka stavi sliku. 367 00:16:00,580 --> 00:16:05,880 I sam tvrdio od before-- me pusti u moj localhost imenik javnosti. 368 00:16:05,880 --> 00:16:10,580 I neka mi ići naprijed i kopirati cijela hrpa datoteka od danas 369 00:16:10,580 --> 00:16:15,633 iz mog Dropbox mape u ovdje. 370 00:16:15,633 --> 00:16:19,470 371 00:16:19,470 --> 00:16:21,680 >> Sad kad bih upisati ls, izgleda na svim tim datotekama 372 00:16:21,680 --> 00:16:24,940 da sam distribuiraju Naravno web je prije danas, 373 00:16:24,940 --> 00:16:26,830 jedan od kojih je i dalje hello.html. 374 00:16:26,830 --> 00:16:27,830 Dakle, postoji taj jedan. 375 00:16:27,830 --> 00:16:30,730 A sjećam ovo glupo jedan od prošle time-- cat.jpg. 376 00:16:30,730 --> 00:16:34,550 Pa neka mi pokušati položiti cat.jpg u mojoj web stranici. 377 00:16:34,550 --> 00:16:37,690 >> Ja ću ići naprijed i to cat.jpg, spasiti. 378 00:16:37,690 --> 00:16:38,950 Pusti me da se vratim na Chrome. 379 00:16:38,950 --> 00:16:41,140 I neka mi uvećanje font i sada ponovno. 380 00:16:41,140 --> 00:16:43,090 381 00:16:43,090 --> 00:16:45,030 Ups, gdje sam stavio ovo? 382 00:16:45,030 --> 00:16:48,210 383 00:16:48,210 --> 00:16:51,520 Standby-- sam još uvijek imaju stari Verzija iz mog desktop opena. 384 00:16:51,520 --> 00:16:56,020 Dakle, pustite me u moj vhost, moj localhost, moja javnosti i hello.html. 385 00:16:56,020 --> 00:16:57,320 386 00:16:57,320 --> 00:17:00,670 Pa sad neka mi ići naprijed i kažu cat.jpg unutar tijela 387 00:17:00,670 --> 00:17:02,830 gdje želim da bude Prikazuje i ponovno. 388 00:17:02,830 --> 00:17:04,560 Naravno, to nije točno. 389 00:17:04,560 --> 00:17:08,050 >> Dakle, moram reći pregledniku malo više namjerno što želim to učiniti. 390 00:17:08,050 --> 00:17:10,210 Jednostavno upišete ime očito nije dovoljno. 391 00:17:10,210 --> 00:17:15,134 Tako se sjetiti da je postojao još jedan oznaka, slika, img skraćeno. 392 00:17:15,134 --> 00:17:17,550 To je samo zato što ljudi ne kao tip pune riječi. 393 00:17:17,550 --> 00:17:19,050 A onda možemo učiniti izvor = "cat.jpg". 394 00:17:19,050 --> 00:17:21,470 395 00:17:21,470 --> 00:17:23,550 >> A sada ću učiniti jedna stvar drugačija. 396 00:17:23,550 --> 00:17:25,390 Iako sve naši oznake do sada imamo 397 00:17:25,390 --> 00:17:28,086 je ovaj pojam start tag i završna oznaka, 398 00:17:28,086 --> 00:17:30,210 da se zapravo ne bi Osjećaj za sliku, zar ne? 399 00:17:30,210 --> 00:17:32,430 Slika je ili postoji ili ne postoji. 400 00:17:32,430 --> 00:17:36,650 I tako su ljudi došli se s jednostavnijim konvenciji. 401 00:17:36,650 --> 00:17:40,310 Kada imate oznaku koja može i započeti i završiti na istom time-- 402 00:17:40,310 --> 00:17:43,790 to može biti prazna, tako da bi samo speak-- staviti kosu crtu unutar oznake 403 00:17:43,790 --> 00:17:44,710 na samom kraju. 404 00:17:44,710 --> 00:17:45,776 405 00:17:45,776 --> 00:17:47,150 Sada ću se vratiti na moju pregledniku. 406 00:17:47,150 --> 00:17:50,377 Hit Reload K vragu, nešto nije u redu. 407 00:17:50,377 --> 00:17:52,460 Vjerojatno ste vidjeli povremeno na webu, 408 00:17:52,460 --> 00:17:53,600 čak i ako to nije bila tvoja krivnja. 409 00:17:53,600 --> 00:17:54,766 To je na web poslužitelju kriv. 410 00:17:54,766 --> 00:17:56,240 Što Odes to čini za označavanje? 411 00:17:56,240 --> 00:17:57,450 412 00:17:57,450 --> 00:17:58,009 To je slomljena. 413 00:17:58,009 --> 00:17:59,300 To je mjesto gdje je slika pripada. 414 00:17:59,300 --> 00:17:59,700 Da? 415 00:17:59,700 --> 00:18:01,560 >> PUBLIKA: Ali to ne imati pristup na slici. 416 00:18:01,560 --> 00:18:03,070 >> DAVID J Malan: To ne imati pristup na slici. 417 00:18:03,070 --> 00:18:05,230 To, ili još gore, možda to uopće ne postoji. 418 00:18:05,230 --> 00:18:06,729 Idemo vidjeti ako mi se ne može dijagnosticirati to. 419 00:18:06,729 --> 00:18:09,390 Sjetite se od prošlog puta da ako u Chromeu, u aparat, 420 00:18:09,390 --> 00:18:11,870 ili čak na vašem Mac ili PC, idete na izbornik Developer 421 00:18:11,870 --> 00:18:14,650 i ići na Razvojni alati opcija koja vjerojatno ste 422 00:18:14,650 --> 00:18:16,850 ne koristi puno ili nikad. 423 00:18:16,850 --> 00:18:20,780 A ako odem Network i ponovno učitati stranicu, 424 00:18:20,780 --> 00:18:24,110 neka je zapravo pogled na HTTP zahtjeva da se napravi. 425 00:18:24,110 --> 00:18:28,400 >> Izgleda hello.html je Doista redu, pa 200. 426 00:18:28,400 --> 00:18:30,630 No cat.jpg je 403. 427 00:18:30,630 --> 00:18:31,650 Dakle, to nije 404. 428 00:18:31,650 --> 00:18:33,490 Datoteka vjerojatno postoji. 429 00:18:33,490 --> 00:18:35,250 403 znači zabranjeno. 430 00:18:35,250 --> 00:18:37,790 Dakle, ovo je malo zbunjujuće. 431 00:18:37,790 --> 00:18:42,340 Ja ću se vratiti na moj prozor terminala. 432 00:18:42,340 --> 00:18:43,700 Dopustite mi uvećanje ovdje. 433 00:18:43,700 --> 00:18:44,750 I neka mi to an ls. 434 00:18:44,750 --> 00:18:46,430 Tu je te iste datoteke. 435 00:18:46,430 --> 00:18:49,410 >> Sada neka mi učiniti LS-l, što ste vjerojatno 436 00:18:49,410 --> 00:18:53,350 koristiti prije pogledati datoteke Veličine možda i vremenske oznake. 437 00:18:53,350 --> 00:18:55,590 I vidimo cijela hrpa neodoljiv informacije. 438 00:18:55,590 --> 00:18:57,040 Ali primijetiti nekoliko detalja. 439 00:18:57,040 --> 00:19:01,660 Evo hello.html u tome red ovdje i ovdje je cat.jpg. 440 00:19:01,660 --> 00:19:02,934 441 00:19:02,934 --> 00:19:05,850 I to je samo aparat se user friendly naglašavajući JPEG-a 442 00:19:05,850 --> 00:19:07,380 U ljubičasta kao što je ovaj. 443 00:19:07,380 --> 00:19:11,470 No, što je još drugačije osim veličina datoteke i naziv datoteke? 444 00:19:11,470 --> 00:19:13,438 445 00:19:13,438 --> 00:19:14,754 >> PUBLIKA: [nečujan]. 446 00:19:14,754 --> 00:19:16,920 DAVID J Malan: Da, postoji još dva R-a ovamo. 447 00:19:16,920 --> 00:19:20,170 Obavijest ono hello.html se događa. 448 00:19:20,170 --> 00:19:24,050 Tako ispada da je ime ovaj katalog javnosti je važno. 449 00:19:24,050 --> 00:19:26,400 Sve što u ovom direktoriju je značilo da se javnosti. 450 00:19:26,400 --> 00:19:28,790 Ali to nije dovoljno Samo ispustiti datoteke tamo. 451 00:19:28,790 --> 00:19:31,480 Također je potrebno mijenjati Način datoteke, 452 00:19:31,480 --> 00:19:35,180 mijenjati dozvole file proaktivno ne 453 00:19:35,180 --> 00:19:37,650 biti zadana postavka, a to je da samo ja mogu čitati 454 00:19:37,650 --> 00:19:39,220 i to napisati, ja kao vlasnik. 455 00:19:39,220 --> 00:19:43,540 Želim cijeli svijet da svi moći pročitati moje datoteka, da se tako izrazim. 456 00:19:43,540 --> 00:19:44,950 Pročitajte samo znači da bi je vidjeli. 457 00:19:44,950 --> 00:19:49,780 >> I doista, kao što ćete vidjeti u problemu postaviti sedam, to je ono što znači ovo R-a. 458 00:19:49,780 --> 00:19:53,160 Ove dvije R-a srednja neka svatko drugdje u svijetu i to pročitati, 459 00:19:53,160 --> 00:19:55,300 pogotovo sada kada to je u ovom direktoriju. 460 00:19:55,300 --> 00:19:59,620 Dakle, najjednostavniji način kako bi riješili ovaj je ići na moj upit i napraviti chmod za promjene 461 00:19:59,620 --> 00:20:05,580 Način rada, a zatim napraviti + R, uopce, svi, svi, plus r za čitanje, 462 00:20:05,580 --> 00:20:07,944 a zatim cat.jpg Enter. 463 00:20:07,944 --> 00:20:10,360 Ništa čini se dogoditi, što obično znači dobru stvar. 464 00:20:10,360 --> 00:20:13,850 Dakle, LS-l again-- sada Pogledajmo cat.jpg. 465 00:20:13,850 --> 00:20:15,750 A to dopuštenje Čini se da su se promijenili. 466 00:20:15,750 --> 00:20:18,670 Kao na stranu, ako bi pogreška i što, na primjer, 467 00:20:18,670 --> 00:20:23,210 Upravo je napravio your-- Ne know-- esej javno dostupne slučajno, 468 00:20:23,210 --> 00:20:25,480 možete učiniti suprotno, chmod a-r. 469 00:20:25,480 --> 00:20:25,909 470 00:20:25,909 --> 00:20:28,200 Iako iskreno, to ne bi trebalo biti u javni imenik 471 00:20:28,200 --> 00:20:29,760 svejedno ako je to briga. 472 00:20:29,760 --> 00:20:32,475 >> Tako sada idemo natrag moja preglednik i reload. 473 00:20:32,475 --> 00:20:32,904 474 00:20:32,904 --> 00:20:34,820 A ja ću kliknuti Malo Ghostbusters 475 00:20:34,820 --> 00:20:38,030 Simbol očistiti taj dio zaslon tako da možemo vidjeti nove zahtjeve. 476 00:20:38,030 --> 00:20:40,630 I doista, ovdje je Grump Mačka od prije. 477 00:20:40,630 --> 00:20:43,010 Ali što je još važnije, Tehnički, postoji 478 00:20:43,010 --> 00:20:45,565 broj 200, koji je znači imamo to u redu. 479 00:20:45,565 --> 00:20:47,190 U redu, tako da je sve u redu i dobro. 480 00:20:47,190 --> 00:20:48,940 Ali mi ne čineći najbolje web stranice, 481 00:20:48,940 --> 00:20:51,967 niti ćemo pokušati previše teško čine fanciest web stranica danas. 482 00:20:51,967 --> 00:20:54,550 Ali neka je barem nešto učiniti super upoznati prije zveckanje 483 00:20:54,550 --> 00:20:56,030 off nekoliko drugih oznaka. 484 00:20:56,030 --> 00:20:58,470 Dakle, pretpostavimo Ne samo želim mačku ovdje. 485 00:20:58,470 --> 00:21:02,530 Pretpostavimo da sam zapravo želim to mačka povezati s nečim. 486 00:21:02,530 --> 00:21:07,210 >> Ja bi, na primjer učinite nešto ovako. 487 00:21:07,210 --> 00:21:08,580 488 00:21:08,580 --> 00:21:12,890 za sidro href za hiper referentni equals-- 489 00:21:12,890 --> 00:21:17,440 i neka je samo nešto učiniti poput www.google.com blizu 490 00:21:17,440 --> 00:21:19,540 citat zatvoriti nosač. 491 00:21:19,540 --> 00:21:22,000 A sada tražiti mačke. 492 00:21:22,000 --> 00:21:23,520 Zatvori sidro tag. 493 00:21:23,520 --> 00:21:26,760 Dakle, to ima samo jednu vrstu od temelja novi detalj. 494 00:21:26,760 --> 00:21:28,190 Tag naravno, razlikuje. 495 00:21:28,190 --> 00:21:31,770 To je naziv za sidro href ili hiper referenca. 496 00:21:31,770 --> 00:21:35,269 >> Ali što je još važnije, postoji ova sintaktička značajka ovdje. 497 00:21:35,269 --> 00:21:37,810 To je ono što ćemo početi zovete Ne tag, ali atribut. 498 00:21:37,810 --> 00:21:40,830 A atribut je nešto što mijenja ponašanje oznake. 499 00:21:40,830 --> 00:21:45,400 I ovaj atribut, href, sredstva mijenja ponašanje ovog sidra 500 00:21:45,400 --> 00:21:48,430 tako da kada se to pritisne, to ide na ovaj URL ovdje. 501 00:21:48,430 --> 00:21:50,330 I naravno, da je URL Google. 502 00:21:50,330 --> 00:21:53,951 >> U međuvremenu, što je ovo tekst ovdje će biti? 503 00:21:53,951 --> 00:21:55,950 Pa, što će biti ono ljudsko zapravo 504 00:21:55,950 --> 00:21:58,470 vidi kao podcrtani veza, kao jednostavan kao taj. 505 00:21:58,470 --> 00:21:59,220 Dakle, pokušajmo to. 506 00:21:59,220 --> 00:21:59,980 Dopustite mi da ga spasi. 507 00:21:59,980 --> 00:22:01,650 Ja sam još uvijek u hello.html. 508 00:22:01,650 --> 00:22:05,360 No, u verzijama online, vidjet ćete stvarna imena datoteka smo unaprijed pripremljena. 509 00:22:05,360 --> 00:22:06,805 Dopustite mi ići naprijed i ponovno. 510 00:22:06,805 --> 00:22:08,680 I sada je vrlo underwhelming stranica dalje. 511 00:22:08,680 --> 00:22:10,910 Ali ako sam pređite preko there-- i to je malo mali, 512 00:22:10,910 --> 00:22:13,576 but-- možete vidjeti na dnu lijevom kutu zaslona, 513 00:22:13,576 --> 00:22:15,242 to doista će google.com. 514 00:22:15,242 --> 00:22:19,280 A ako kliknem da, to će umutiti mi put do stvarne Googleu. 515 00:22:19,280 --> 00:22:22,610 >> Ali primijetite ovdje prilika za iskorištavanja, baš kao stranu. 516 00:22:22,610 --> 00:22:25,150 A mi ćemo se vratiti na drugom pitanja sigurnosti prije dugo. 517 00:22:25,150 --> 00:22:29,290 Budući da je ovo dihotomija između gdje idete i što reći, 518 00:22:29,290 --> 00:22:34,722 što bi mogao učiniti nešto slično this-- http://www.google.com. 519 00:22:34,722 --> 00:22:37,134 U redu, a sad kad bih ponovno Nakon spremanja tu stranicu, 520 00:22:37,134 --> 00:22:38,800 izgleda da ću ići na Googleu. 521 00:22:38,800 --> 00:22:40,966 Ali nema razloga da morati ići na Google, zar ne? 522 00:22:40,966 --> 00:22:47,460 Zapravo sam mogao ići na nešto slično badguy.com, ponovno učitati stranicu ovamo. 523 00:22:47,460 --> 00:22:49,750 I napomena, to još uvijek izgleda kao Google. 524 00:22:49,750 --> 00:22:52,020 I samo ako sam oštra dovoljno da lebde ovamo 525 00:22:52,020 --> 00:22:54,770 ne vidim ga još će ići na drugo mjesto. 526 00:22:54,770 --> 00:22:57,400 >> Dakle, ako ste ikada stečen e, a posebno 527 00:22:57,400 --> 00:22:59,610 jedan od Paypal, ili naizgled iz Paypal 528 00:22:59,610 --> 00:23:01,830 Vas traži da se prijavite na svoj račun, to 529 00:23:01,830 --> 00:23:06,380 Zato što ne bi smjeli ikada kliknite linkove u e-poštu, 530 00:23:06,380 --> 00:23:07,930 Iskreno, sve veze u e-pošti. 531 00:23:07,930 --> 00:23:10,380 Ako znate da imate stvarna Novac na Paypal ili banci 532 00:23:10,380 --> 00:23:14,250 Amerike ili vjernost ili bilo web stranice, ručno upisati. 533 00:23:14,250 --> 00:23:17,530 Jer pogledaj kako je lako trik nekoga u ono što predstavljanja 534 00:23:17,530 --> 00:23:18,526 izgleda kao link. 535 00:23:18,526 --> 00:23:20,400 Ali, to je zapravo mogla ići apsolutno nigdje. 536 00:23:20,400 --> 00:23:23,301 >> I tu je daleko veći prijetnje od toga. 537 00:23:23,301 --> 00:23:25,300 U stvari, to je malo od tangente sada, ali jedna 538 00:23:25,300 --> 00:23:28,430 od najboljih koje sam ikada vidio što je u međuvremenu zatvoren, 539 00:23:28,430 --> 00:23:34,060 Je li netko na čelu ljudi to-- tako da to može reći, 540 00:23:34,060 --> 00:23:37,660 kliknite ovdje za prijavu u svoj račun, bankovni račun. 541 00:23:37,660 --> 00:23:40,985 A to je banka na Zapadu. 542 00:23:40,985 --> 00:23:43,030 543 00:23:43,030 --> 00:23:44,250 >> Tako je netko kupio ovo. 544 00:23:44,250 --> 00:23:47,090 I to je malo lakše vidjeti to u mono razmaknute font zumirati 545 00:23:47,090 --> 00:23:49,190 u na 30 metara projektora. 546 00:23:49,190 --> 00:23:51,720 Ali, kad je mali font u e da primate, 547 00:23:51,720 --> 00:23:54,690 ovo izgleda kao bankofthewest.com, Ne bankofthevvest.com, 548 00:23:54,690 --> 00:23:58,230 koji je netko platio 10 dolara za kupnju. 549 00:23:58,230 --> 00:24:00,840 A onda ih je to dovelo do ekvivalent neke loše web stranice. 550 00:24:00,840 --> 00:24:05,540 >> I vidjet ćete too-- zapravo možemo učiniti this-- ako idem na stvarni website, 551 00:24:05,540 --> 00:24:10,335 bankofthewest.com, opet, Opoziv od zadnjeg puta 552 00:24:10,335 --> 00:24:13,210 da, ako je to njihova web stranica i ti si znatiželjan kako se to radi, 553 00:24:13,210 --> 00:24:15,610 sigurno možete ići Chrome razvojne alate. 554 00:24:15,610 --> 00:24:18,890 A možete vidjeti sve HTML lijepo oblikovane tamo. 555 00:24:18,890 --> 00:24:20,890 >> No, što je još važnije, što cam-- ćemo zatvoriti 556 00:24:20,890 --> 00:24:24,760 this-- možete ići Pogledaj Programer View Source. 557 00:24:24,760 --> 00:24:25,770 558 00:24:25,770 --> 00:24:28,350 Zašto ne bih jednostavno kopirati sve to i onda sam 559 00:24:28,350 --> 00:24:31,630 Možete ići u moj mali gedit prozoru ovdje i napraviti svoju web stranicu. 560 00:24:31,630 --> 00:24:33,210 Spremi u hello.html. 561 00:24:33,210 --> 00:24:36,770 I vjerojatno će se to slomiti, jer to nije to lako obično. 562 00:24:36,770 --> 00:24:41,590 Ali sada, ako sam ponovno svoju stranicu na moja CS50 aparati i udario reload, 563 00:24:41,590 --> 00:24:42,990 OK, neke stvari razbio. 564 00:24:42,990 --> 00:24:45,750 Ali ja sam vrlo blizu s moja bankarstva web stranice, zar ne? 565 00:24:45,750 --> 00:24:46,570 Sve to HTML-- 566 00:24:46,570 --> 00:24:47,370 >> [Smijeh] 567 00:24:47,370 --> 00:24:49,210 >> DAVID J Malan: --I nije actually-- i vi 568 00:24:49,210 --> 00:24:52,210 znati da postoji netko tamo tko bi zapravo kliknite ove linkove previše. 569 00:24:52,210 --> 00:24:54,864 Pa jasno, neke stvari razbio. 570 00:24:54,864 --> 00:24:56,780 No, što će dovesti nas u raspravu, 571 00:24:56,780 --> 00:25:00,810 nepotrebno upravo sada, što bi CSS, kaskadno stil listova, su, 572 00:25:00,810 --> 00:25:03,410 i koliko vas zapravo preuzeti ostale HTML datoteke 573 00:25:03,410 --> 00:25:06,140 i JPEG datoteka GIF datoteke Web stranice mogu se koristiti. 574 00:25:06,140 --> 00:25:07,960 No, sve to je accomplishable. 575 00:25:07,960 --> 00:25:11,110 Ali, to stvarno svodi na ove vrlo jednostavne heuristike. 576 00:25:11,110 --> 00:25:14,450 >> Pa sad neka je samo prelistati Nekoliko drugih primjera HTML 577 00:25:14,450 --> 00:25:16,680 samo da vam dati osjećaj onoga što još možete učiniti. 578 00:25:16,680 --> 00:25:18,670 Na primjer, to je list.html. 579 00:25:18,670 --> 00:25:23,240 Pretpostavimo da sam htio napraviti web stranicu s popisom kuća u quad. 580 00:25:23,240 --> 00:25:28,960 Možda ću koristiti ul oznaku za neuređen Popis, a zatim stavku popisa dijete 581 00:25:28,960 --> 00:25:33,760 a zatim ponoviti over-- ili popis, rather-- kuće u pitanju. 582 00:25:33,760 --> 00:25:36,080 >> I ako sam otvoriti ovaj gore, učinimo to. 583 00:25:36,080 --> 00:25:40,670 Idemo ne hello.html, ali list.html. 584 00:25:40,670 --> 00:25:42,160 Prokletstvo. 585 00:25:42,160 --> 00:25:43,000 Kako mogu popraviti ovo? 586 00:25:43,000 --> 00:25:45,679 587 00:25:45,679 --> 00:25:47,220 To je isto pitanje kao i prije, zar ne? 588 00:25:47,220 --> 00:25:52,510 Pa neka mi ne chmod-- oops-- chmod + r list.html. 589 00:25:52,510 --> 00:25:54,610 590 00:25:54,610 --> 00:25:59,610 I sad kad bih se vratiti na moju pregledniku i pritisnite Reload, tu je. 591 00:25:59,610 --> 00:26:02,360 Dakle, ako ste ikada htjeli napraviti Popis s grafičkim oznakama, možete to učiniti. 592 00:26:02,360 --> 00:26:06,210 Ako želite biti super fancy i napraviti naredio popis, ne neuređen popis, 593 00:26:06,210 --> 00:26:10,170 promijeniti one olu, učitajte stranicu, i Sada preglednik će ga prebrojiti za vas. 594 00:26:10,170 --> 00:26:11,241 >> Što još možemo učiniti? 595 00:26:11,241 --> 00:26:13,990 Pa, ako je par others-- imaš duge odlomke text-- 596 00:26:13,990 --> 00:26:15,698 na primjer, neki Latinski tekst kao this-- 597 00:26:15,698 --> 00:26:20,730 a vi ga želite u odvojenim točkama, otvoreni p, u blizini p za stav oznaku. 598 00:26:20,730 --> 00:26:22,010 I opet i opet učiniti. 599 00:26:22,010 --> 00:26:26,600 A ako ja sada otvoriti ovu datoteku, paragraphs.html, dobro, to 600 00:26:26,600 --> 00:26:27,570 postaje neugodno. 601 00:26:27,570 --> 00:26:34,320 Pa sad neka je samo vratiti na mom brz, chmod a + R r zvijezdu .html-- 602 00:26:34,320 --> 00:26:36,099 lijepo malo wild card da se tako izrazim. 603 00:26:36,099 --> 00:26:37,890 To bi trebao popraviti sve ti problemi za mene. 604 00:26:37,890 --> 00:26:38,990 Idemo ponovno. 605 00:26:38,990 --> 00:26:40,500 Ima tri stavke. 606 00:26:40,500 --> 00:26:42,930 >> A sada idemo naprijed i otvoriti jedno drugo. 607 00:26:42,930 --> 00:26:44,310 Kako o stol? 608 00:26:44,310 --> 00:26:46,440 Primijetit ćete tablica izgleda malo složeniji. 609 00:26:46,440 --> 00:26:49,110 Ali to je isto idea-- otvoreni tag, otvoreni oznaka, 610 00:26:49,110 --> 00:26:51,360 otvoreni, otvoreni, otvoreni, u neposrednoj blizini tag, otvoreni oznaka. 611 00:26:51,360 --> 00:26:54,410 A to se dogoditi da odstoji stol, čija granica je očito 612 00:26:54,410 --> 00:26:58,500 će biti debljine 1-- god da means-- stol red, stolni 613 00:26:58,500 --> 00:27:00,320 Podaci, što znači stanice. 614 00:27:00,320 --> 00:27:03,840 A ako idem natrag u svom pregledniku ovdje i ići na table.html, 615 00:27:03,840 --> 00:27:05,840 možete vidjeti nešto ovako, odvratan. 616 00:27:05,840 --> 00:27:07,840 No, mi ćemo doći do točke gdje smo zapravo može 617 00:27:07,840 --> 00:27:09,260 bi stvari ljepše od toga. 618 00:27:09,260 --> 00:27:10,530 >> Pa neka mi propisuje za sada. 619 00:27:10,530 --> 00:27:11,870 Postoji grozdovima od više oznaka. 620 00:27:11,870 --> 00:27:15,225 A HTML je divno pokupiti jer, iskreno, sve što trebate učiniti 621 00:27:15,225 --> 00:27:17,600 je pogled na postojećim web stranicama s kojima ste upoznati. 622 00:27:17,600 --> 00:27:20,340 A ti si kao, oh, to je kako napravili su to estetski. 623 00:27:20,340 --> 00:27:23,159 >> Ili možete pogledati bilo koji online resursa kako HTML radi, 624 00:27:23,159 --> 00:27:25,700 i vidjet ćete da postoji Cijeli vokabular druge oznake. 625 00:27:25,700 --> 00:27:30,110 No, s jednostavnom mentalnom modelu Samo da gotovo svaki tag otvorite 626 00:27:30,110 --> 00:27:33,620 mora biti zatvorena, to stvarno dovoljan da se čovjek uči 627 00:27:33,620 --> 00:27:36,950 HTML nakon razumiju ove osnovne ideje oznake 628 00:27:36,950 --> 00:27:40,520 i osobine i dobro formedness da smo razgovarali o tome, 629 00:27:40,520 --> 00:27:44,697 zatvaranja nešto što bismo mogli otvoriti tako da mi ne zbunjuju preglednika. 630 00:27:44,697 --> 00:27:46,780 Tako ćemo sada uzeti to više zanimljivih razini 631 00:27:46,780 --> 00:27:48,100 odlaskom na stvarna. 632 00:27:48,100 --> 00:27:51,095 I idemo na moj Mac Ovdje, na google.com. 633 00:27:51,095 --> 00:27:52,280 634 00:27:52,280 --> 00:27:54,020 A sada notice-- učinimo to. 635 00:27:54,020 --> 00:27:57,280 Ja sam gong ići na Postavke, Postavke pretraživanja. 636 00:27:57,280 --> 00:28:01,070 Želim isključiti ovu dosadne trenutak Rezultati stvar gdje se odmah 637 00:28:01,070 --> 00:28:02,450 počinje reagirati na tipkanja. 638 00:28:02,450 --> 00:28:05,300 Učinimo ovo stariju školu, tako mi zapravo vidimo što se događa. 639 00:28:05,300 --> 00:28:08,260 >> Zato ću spasiti moj Google Postavke ovdje. 640 00:28:08,260 --> 00:28:11,160 I sada notice-- ću tražiti nešto poput mačke. 641 00:28:11,160 --> 00:28:14,500 I to još uvijek radi auto potpuna ovdje, ali na temelju stvari 642 00:28:14,500 --> 00:28:15,970 Ljudi su se upisali u prošlosti. 643 00:28:15,970 --> 00:28:17,490 Ali primijetite što će se dogoditi. 644 00:28:17,490 --> 00:28:20,272 >> U URL u ovom trenutku je to, samo google.com. 645 00:28:20,272 --> 00:28:22,650 I tehnički, to je Slash. 646 00:28:22,650 --> 00:28:25,910 Google je upravo se štedi lik a ne nas tu pokazuje. 647 00:28:25,910 --> 00:28:30,400 Oni pokazuju nam https, samo biti super ohrabrujuća da smo 648 00:28:30,400 --> 00:28:32,850 na sigurno ili šifrirane stranice. 649 00:28:32,850 --> 00:28:35,690 >> Pa neka mi ići naprijed i tražiti mačke. 650 00:28:35,690 --> 00:28:37,670 Sada je to dobio stvarno neodoljiv brzo. 651 00:28:37,670 --> 00:28:39,470 Pogledajte duljini ovaj URL. 652 00:28:39,470 --> 00:28:43,070 No, ispada da je većina ovih stvari URL je zapravo prilično beskoristan. 653 00:28:43,070 --> 00:28:45,320 Ja ću početi brisanja stvari koje ja ne razumijem. 654 00:28:45,320 --> 00:28:46,560 655 00:28:46,560 --> 00:28:47,360 Vidim mačke. 656 00:28:47,360 --> 00:28:48,470 Razumijem mačke. 657 00:28:48,470 --> 00:28:50,380 Ne znam zašto se mačke su tamo opet. 658 00:28:50,380 --> 00:28:52,620 Ja stvarno ne znam što je to glupost je. 659 00:28:52,620 --> 00:28:56,030 Dakle Samo ću zadržati isticanje i brisanje stvari 660 00:28:56,030 --> 00:28:59,905 da ja ne razumijem, destilacijom URL u upravo to. 661 00:28:59,905 --> 00:29:00,920 662 00:29:00,920 --> 00:29:02,270 >> Sad neka mi se ponovo ući. 663 00:29:02,270 --> 00:29:03,814 Izgleda da Google i dalje radi. 664 00:29:03,814 --> 00:29:06,980 Dakle, iz nekog razloga, oni su dodavanjem Mnogo stvari na svoje URL-a po defaultu. 665 00:29:06,980 --> 00:29:09,000 No, to nije strogo potrebno. 666 00:29:09,000 --> 00:29:10,340 Dakle, ono što je lijepo o tome? 667 00:29:10,340 --> 00:29:13,630 Pa, neka mi ići naprijed i otvaraju inspektor Chrome. 668 00:29:13,630 --> 00:29:15,960 Tu je mali miš prečac za njega. 669 00:29:15,960 --> 00:29:17,360 >> Idite na karticu Network. 670 00:29:17,360 --> 00:29:19,340 I sad neka mi ponovno ovu stranicu još jednom. 671 00:29:19,340 --> 00:29:20,280 I držim Shift. 672 00:29:20,280 --> 00:29:22,520 Kao na stranu, preglednici skloni cache ili spremiti 673 00:29:22,520 --> 00:29:24,697 Informacije samo zbog učinkovitosti u. 674 00:29:24,697 --> 00:29:27,280 Ali obično, držeći Shift i pretovara će prisiliti sve 675 00:29:27,280 --> 00:29:28,994 početi ispočetka. 676 00:29:28,994 --> 00:29:30,410 I to je ono što želim učiniti ovdje. 677 00:29:30,410 --> 00:29:33,550 >> I primijetiti sve ove reci da je samo pojavile. 678 00:29:33,550 --> 00:29:37,920 Ispada da je u bilo kojem web stranica, tu bi moglo biti samo jedna datoteka 679 00:29:37,920 --> 00:29:43,500 involved-- hello.html-- ili postoji može biti 52, kao u ovom slučaju. 680 00:29:43,500 --> 00:29:45,820 Kad sam posjetiti google.com, očito, moja preglednik 681 00:29:45,820 --> 00:29:49,650 započinje 52 zasebnih HTTP zahtjeve. 682 00:29:49,650 --> 00:29:50,520 Zašto je to tako? 683 00:29:50,520 --> 00:29:53,380 >> Pa, pogledaj što je unutra ove web stranice do vrha. 684 00:29:53,380 --> 00:29:55,620 Postoji ne samo tekst, ali postoji stvarna slika 685 00:29:55,620 --> 00:29:57,130 mačaka više udesno. 686 00:29:57,130 --> 00:29:59,110 Postoji šareni logotip ovdje na lijevoj strani. 687 00:29:59,110 --> 00:30:01,750 Tu je sve ove ikone za mikrofon i tako dalje. 688 00:30:01,750 --> 00:30:05,130 Ima puno komada, izgradnju blokovi, scratch komada, ako hoćete, 689 00:30:05,130 --> 00:30:06,250 na ovoj web stranici. 690 00:30:06,250 --> 00:30:10,310 A što browser radi o dobivanje prvu datoteku koja 691 00:30:10,310 --> 00:30:16,180 je to red ovdje, to je u biti iterating preko HTML vrh 692 00:30:16,180 --> 00:30:19,880 do dna, s lijeva na desno, u potrazi za stvari kao što su slike oznake ili druge oznake 693 00:30:19,880 --> 00:30:23,160 da su spomenuti druge datoteke i kad ih vidi, ide te ih dohvaća 694 00:30:23,160 --> 00:30:26,050 putem HTTP, održiva cijeli omotnice metafora, 695 00:30:26,050 --> 00:30:29,670 a zatim ih prikazuje u Odgovarajuće mjesto na web stranici. 696 00:30:29,670 --> 00:30:33,370 >> Ali primijetite ovdje ako sam se usredotočiti na prvi bacanje, pretraživanje mačke, 697 00:30:33,370 --> 00:30:37,090 primijetiti da, doista je korištenjem HTTP 1.1. 698 00:30:37,090 --> 00:30:41,690 I na žalost, Google Chrome upravo sada u verziji 39 699 00:30:41,690 --> 00:30:45,110 je vrsta dumbing stvari dolje i nam ne prikazuje stvarni zaglavlja. 700 00:30:45,110 --> 00:30:49,680 Ali ono što je doista poslala je zahtjev Nije za udarac, ali / traži? q = mačke. 701 00:30:49,680 --> 00:30:52,830 702 00:30:52,830 --> 00:30:54,340 >> Sad, zašto je to važno? 703 00:30:54,340 --> 00:30:57,110 Pa, ja ću zaključiti Iz ovoga proizlazi da ako Google 704 00:30:57,110 --> 00:31:01,520 podržava upite ovog obrasca, zašto ja ne provoditi svoju pretragu 705 00:31:01,520 --> 00:31:06,420 motor za CS50, ali samo prednja kraj, samo grafičko korisničko sučelje. 706 00:31:06,420 --> 00:31:09,610 A mi ćemo outsource stražnji kraj, stvarne rezultate pretraživanja na Googleu. 707 00:31:09,610 --> 00:31:10,510 >> Pa kako mogu to učiniti? 708 00:31:10,510 --> 00:31:13,820 Pa, dopustite mi da odem u gedit ovamo. 709 00:31:13,820 --> 00:31:19,180 I neka mi ići naprijed i otvoriti do, recimo, novu datoteku. 710 00:31:19,180 --> 00:31:22,280 A ja ću spasiti ova privremeno kao pretraživanja-0.html. 711 00:31:22,280 --> 00:31:25,111 712 00:31:25,111 --> 00:31:27,860 I onda na kraju, mi ćemo brzo naprijed u jednom sam pre-pripremljen. 713 00:31:27,860 --> 00:31:30,190 >> A ja ću Brzo ščepati tip doc 714 00:31:30,190 --> 00:31:33,840 HTML otvorena zagrada HTML u blizini html nosač. 715 00:31:33,840 --> 00:31:38,390 Tada ću učiniti glavu u blizini glave otvorene naslov CS50 716 00:31:38,390 --> 00:31:40,150 Traži umjesto Google pretraživanja. 717 00:31:40,150 --> 00:31:43,480 Ovdje ću imati Tijelo, ovdje u blizini tijela. 718 00:31:43,480 --> 00:31:45,835 I sad moram CS50 Traži. 719 00:31:45,835 --> 00:31:47,710 I zapravo, neka je graditi to postupno. 720 00:31:47,710 --> 00:31:51,043 Ja ću ići naprijed i zatvoriti ovu i zapravo ga staviti u mojoj javni imenik. 721 00:31:51,043 --> 00:31:52,730 Pa daj mi samo jedan trenutak. 722 00:31:52,730 --> 00:31:55,390 potraga-0.html-- ću vremenski ga zovu search.html. 723 00:31:55,390 --> 00:31:56,600 724 00:31:56,600 --> 00:31:59,750 Ja ću ga chmod a + r search.html. 725 00:31:59,750 --> 00:32:01,072 726 00:32:01,072 --> 00:32:02,280 A sada ću ga otvoriti. 727 00:32:02,280 --> 00:32:03,224 728 00:32:03,224 --> 00:32:04,390 U redu, to je bilo brzo. 729 00:32:04,390 --> 00:32:06,800 No, cilj je bio jednostavno da nas doći do točke 730 00:32:06,800 --> 00:32:09,630 vlasništvo ovaj tekst podnijeti zove search.html. 731 00:32:09,630 --> 00:32:10,940 732 00:32:10,940 --> 00:32:12,790 Dakle, ne puno gledati još. 733 00:32:12,790 --> 00:32:16,970 Doista, ako idem na moj preglednik, i ići na search.html, to je sve što je. 734 00:32:16,970 --> 00:32:17,720 Ali, znate što? 735 00:32:17,720 --> 00:32:19,000 Mogu biti malo ljubitelj. 736 00:32:19,000 --> 00:32:22,710 Čitao sam u knjizi da postoji naslov tag pod nazivom H1. 737 00:32:22,710 --> 00:32:26,100 I ja ću ići naprijed i koristiti taj otvoreni H1 i bliski H1. 738 00:32:26,100 --> 00:32:27,220 Osvježi stranicu. 739 00:32:27,220 --> 00:32:29,600 A sada je veći i hrabriji, nije sve što je zanimljivo, 740 00:32:29,600 --> 00:32:32,399 ali barem strukturno više zanimljiv. 741 00:32:32,399 --> 00:32:33,940 Ali sada neka mi predstaviti još jednu oznaku. 742 00:32:33,940 --> 00:32:36,500 Ispada da postoji oblik oznaka. 743 00:32:36,500 --> 00:32:38,400 I neka mi zatvoriti tu oznaku. 744 00:32:38,400 --> 00:32:40,830 I ispada da postoji ulazna oznaka koja 745 00:32:40,830 --> 00:32:44,600 ima atribut zove tipa, koji je vrsta podataka na terenu, 746 00:32:44,600 --> 00:32:45,200 ako hoćete. 747 00:32:45,200 --> 00:32:47,050 A će biti tipa teksta. 748 00:32:47,050 --> 00:32:52,200 I njegova vrijednost se događa biti CS50 pretrage. 749 00:32:52,200 --> 00:32:53,850 Zatvori oznaka. 750 00:32:53,850 --> 00:32:57,100 I tu će biti pojam otvaranje i zatvaranje s posebnim oznakama. 751 00:32:57,100 --> 00:33:00,300 >> Pusti me da se vratim ovdje i vidjeti što se događa, ponovno. 752 00:33:00,300 --> 00:33:01,380 Dobivanje zanimljiva. 753 00:33:01,380 --> 00:33:02,950 To izgleda kao da je tekst polje. 754 00:33:02,950 --> 00:33:04,080 755 00:33:04,080 --> 00:33:06,999 A zapravo, nisam htio staviti vrijednost ima još. 756 00:33:06,999 --> 00:33:10,040 Pusti me da se vratim ovdje i zaista dobiti osloboditi ove vrijednosti i dalje ostane jednostavan. 757 00:33:10,040 --> 00:33:12,939 Umjesto vrijednosti, ono što sam htio dati ovu stvar je ime. 758 00:33:12,939 --> 00:33:15,230 A ja ne znam što je to, pa ću se vratiti na to. 759 00:33:15,230 --> 00:33:18,270 >> Ali ispod toga, želim učiniti vrstu unosa = podnijeti. 760 00:33:18,270 --> 00:33:19,840 761 00:33:19,840 --> 00:33:22,120 A ova vrijednost će biti CS50 pretrage. 762 00:33:22,120 --> 00:33:24,850 A vidjet ćemo zašto sam preselio vrijednost na to. 763 00:33:24,850 --> 00:33:28,900 Kad sam ponovno, čini mi se da sada imam počeci moje vlastite potrage 764 00:33:28,900 --> 00:33:30,820 motor, super strašan, iako iskreno, to je 765 00:33:30,820 --> 00:33:34,260 Nije daleko od onoga bacanje Google je zadana stranica izgleda. 766 00:33:34,260 --> 00:33:37,950 >> Ako odem sada ovdje, ja mogu upisati mačke i nadamo kliknite na Traži. 767 00:33:37,950 --> 00:33:40,380 Ali nisam baš učinio još, jer nisam provodi, 768 00:33:40,380 --> 00:33:41,045 Očito, baze podataka. 769 00:33:41,045 --> 00:33:42,940 Nisam indeksirati Web za rezultate pretraživanja. 770 00:33:42,940 --> 00:33:44,840 Dakle, trebam outsource da je Google. 771 00:33:44,840 --> 00:33:46,290 Pa kako mogu to učiniti? 772 00:33:46,290 --> 00:33:49,170 >> Pa, prije svega I. treba dodati i akcije 773 00:33:49,170 --> 00:33:58,460 pripisuju mom oblik oznaka je http://www.google.com/search. 774 00:33:58,460 --> 00:34:01,180 I znam da su samo iz potrebe zaključiti gledajući usko 775 00:34:01,180 --> 00:34:02,505 na njihove URL-a. 776 00:34:02,505 --> 00:34:03,380 A sada uzeti pogodak. 777 00:34:03,380 --> 00:34:09,090 Ono što bi trebao ovaj tekst polje Vjerojatno zvati, ovisno o tome gdje smo došli 778 00:34:09,090 --> 00:34:09,754 od prije? 779 00:34:09,754 --> 00:34:11,896 780 00:34:11,896 --> 00:34:13,290 >> PUBLIKA:? Q. 781 00:34:13,290 --> 00:34:14,370 >> DAVID J Malan:? Q. 782 00:34:14,370 --> 00:34:17,800 A mi zapravo ne treba pitanje obilježiti ispada, ali je q doista, 783 00:34:17,800 --> 00:34:20,489 q za upit vjerojatno po zadana, samo zato što je to 784 00:34:20,489 --> 00:34:23,060 ono Larry i Sergey smislio godina. 785 00:34:23,060 --> 00:34:24,739 Pa sad neka mi ponovno odaberete ovu stranicu. 786 00:34:24,739 --> 00:34:26,409 To ne izgleda sve što je drugačije. 787 00:34:26,409 --> 00:34:28,120 Ali sada gledati što se događa. 788 00:34:28,120 --> 00:34:32,360 >> Ako sam upisati mačke i miša CS50 Traži i pustiti, 789 00:34:32,360 --> 00:34:35,770 primijetiti da se tuče daleko da stvarni Googleu. 790 00:34:35,770 --> 00:34:38,150 Sada, Google je biti malo neugodno u da su oni 791 00:34:38,150 --> 00:34:41,877 dodavanjem dodatni parametar, ako hoćete, na URL. 792 00:34:41,877 --> 00:34:43,960 To je sve događa automatski na Google strani. 793 00:34:43,960 --> 00:34:48,730 >> Važan dio je da sam činiti da su generirani ovaj zahtjev ovdje. 794 00:34:48,730 --> 00:34:50,179 I doista, to je ono što se događa. 795 00:34:50,179 --> 00:34:53,040 Kada imate HTML da izgleda ovako, to 796 00:34:53,040 --> 00:34:57,620 je vrsta web programere zapis za govoreći, ići naprijed i stvoriti obrazac 797 00:34:57,620 --> 00:34:59,990 da kada je podnesen, to će ići na ovaj URL. 798 00:34:59,990 --> 00:35:03,430 A kad URL pružio Vrijednosti za stvari poput q, 799 00:35:03,430 --> 00:35:05,440 ne idu baš na ovaj URL. 800 00:35:05,440 --> 00:35:08,210 Zapravo, prijeđite na pitanje oznaka, a zatim q = mačke. 801 00:35:08,210 --> 00:35:09,590 802 00:35:09,590 --> 00:35:13,060 Priložena parametar, HTTP parametar kao što je to. 803 00:35:13,060 --> 00:35:15,590 >> I samo da se super precizna, ono što je zaključen here-- 804 00:35:15,590 --> 00:35:18,130 ali ja ću biti više explicit-- je da je metoda želim koristiti 805 00:35:18,130 --> 00:35:22,270 je dobiti, umjesto da nešto slično nakon što smo na kraju ćemo vidjeti. 806 00:35:22,270 --> 00:35:27,710 Tako je u kratko, jednostavno razumijevanje HTML i korištenje neke prilično jednostavne oznake, 807 00:35:27,710 --> 00:35:30,610 sada možemo početi stvarati naša vlastita prednji kraj korisnika 808 00:35:30,610 --> 00:35:32,850 sučelje uz pretraživanje motor iza njega. 809 00:35:32,850 --> 00:35:34,800 >> No to, naravno, prilično odvratan. 810 00:35:34,800 --> 00:35:37,259 Pa neka mi zapravo otvaraju nešto bolja verzija. 811 00:35:37,259 --> 00:35:39,800 To je jedan sam pripremio u unaprijed da ima neke komentare. 812 00:35:39,800 --> 00:35:41,900 No, vidjet ćete da ja uglavnom to ponovno. 813 00:35:41,900 --> 00:35:44,150 Dakle, ovo je već dostupan na internetu. 814 00:35:44,150 --> 00:35:48,050 A ja nisam slučajno preventivno ići na https samo da i dalje ostane jednostavan. 815 00:35:48,050 --> 00:35:50,610 >> A sada ćemo otvoriti Sljedeća iteracija toga. 816 00:35:50,610 --> 00:35:52,510 Je verzija 1 umjesto 0. 817 00:35:52,510 --> 00:35:55,315 Ono što skače na vas kao nešto različite u ovom primjeru? 818 00:35:55,315 --> 00:35:59,480 819 00:35:59,480 --> 00:36:00,440 >> PUBLIKA: [nečujan]. 820 00:36:00,440 --> 00:36:03,020 >> Da, tu je ovaj tekst align centar. 821 00:36:03,020 --> 00:36:04,590 To je malo čudno ovdje. 822 00:36:04,590 --> 00:36:06,150 Ali ovo je doista novo. 823 00:36:06,150 --> 00:36:07,800 A možda pogodite što će se dogoditi. 824 00:36:07,800 --> 00:36:11,730 Ako idem na moj e sada i posjetite search-1.html, 825 00:36:11,730 --> 00:36:13,090 to je gotovo ista stvar. 826 00:36:13,090 --> 00:36:15,705 No, to je korak bliže biti malo više lijepa. 827 00:36:15,705 --> 00:36:19,150 To je još uvijek ružna, ali ljepše da barem sada sve je usmjereno. 828 00:36:19,150 --> 00:36:23,470 >> Tako ispada da je ono što sam pomoću je drugi jezik uopce zove 829 00:36:23,470 --> 00:36:25,680 CSS, kaskadno style listova. 830 00:36:25,680 --> 00:36:28,310 I CSS, iskreno, je vrsta o, po mom osobnom mišljenju, 831 00:36:28,310 --> 00:36:29,775 atrociously dizajniran jezik. 832 00:36:29,775 --> 00:36:33,110 To je vrlo neugodno zapamtiti sve različite pojedinosti. 833 00:36:33,110 --> 00:36:38,479 Ali, to je ono što stilizira Cijeli svijetu web danas. 834 00:36:38,479 --> 00:36:39,270 Sam uvrijedio nekoga. 835 00:36:39,270 --> 00:36:39,769 U redu. 836 00:36:39,769 --> 00:36:43,180 Tako ćemo se vratiti ovdje i vidjeti kako mi zapravo koristimo ovu. 837 00:36:43,180 --> 00:36:45,940 I to ispada, barem je to zapravo prilično jednostavan jezik. 838 00:36:45,940 --> 00:36:49,470 To je samo ključne parova vrijednosti, svojstva i vrijednosti, svojstva i vrijednosti. 839 00:36:49,470 --> 00:36:52,080 Doista, ovdje je jedan kao i vrijednost nekretnina. 840 00:36:52,080 --> 00:36:55,890 >> Jednostavno pomoću stil atribut na mom tijelu oznaku 841 00:36:55,890 --> 00:37:00,360 i dajući joj vrijednost Riječ debelog crijeva i još jedna riječ, 842 00:37:00,360 --> 00:37:03,730 ili imovine i vrijednosti, Mogu utjecati na estetiku 843 00:37:03,730 --> 00:37:06,210 na web stranici, a ne nužno još struktura, 844 00:37:06,210 --> 00:37:07,550 ali estetika njega. 845 00:37:07,550 --> 00:37:10,960 I samo Googling okolo, shvaćam da CSS, kaskadno stil listova, 846 00:37:10,960 --> 00:37:14,170 podržava nekretninu zove text-align, čija se vrijednost može 847 00:37:14,170 --> 00:37:16,980 biti lijevo, desno ili centar, na primjer. 848 00:37:16,980 --> 00:37:19,990 >> Dakle, sada kada sam ponovno ovu stranicu, što nisam mogao 849 00:37:19,990 --> 00:37:22,730 bio usmjeren stranica, ali još uvijek prilično ružno. 850 00:37:22,730 --> 00:37:25,770 Idemo naprijed i otvoriti do verzije 2. Traži. 851 00:37:25,770 --> 00:37:28,570 A sada primijetiti da sam učinio nešto više. 852 00:37:28,570 --> 00:37:33,760 Uočite da je ovdje unutar glave oznaka, ne može biti više od naslova. 853 00:37:33,760 --> 00:37:35,400 Zapravo, tu je stil oznaka. 854 00:37:35,400 --> 00:37:38,630 I ovo je mjesto gdje to samo dobiva malo neuredan viđenje CSS ponekad. 855 00:37:38,630 --> 00:37:41,971 >> Obavijest da izgledaju kao da imaju nešto da je strukturalno izgleda vrlo različite. 856 00:37:41,971 --> 00:37:44,095 No, ovdje je naziv tag želim stilizirane. 857 00:37:44,095 --> 00:37:47,570 Ovdje su naši stari prijatelji kovrčava aparatić i zatvorena kovrčava braće. 858 00:37:47,570 --> 00:37:50,290 A onda ovdje je da vlasništvo i njegova vrijednost. 859 00:37:50,290 --> 00:37:56,300 >> Ako sam učitati ovu datoteku, search2.html, krajnji rezultat je identičan. 860 00:37:56,300 --> 00:37:59,300 No, to je korak prema boljem dizajnu. 861 00:37:59,300 --> 00:38:04,560 Po faktoring ovaj CSS, imam Nije ga pomiješanih s mojim HTML. 862 00:38:04,560 --> 00:38:07,560 I doista, kao što ćemo vidjeti, što sam mogao ponovno ta svojstva i vrijednosti. 863 00:38:07,560 --> 00:38:10,420 Ako sam htjela napraviti grozdove dijelovi moje web stranice u središtu, 864 00:38:10,420 --> 00:38:13,630 Ne moram upisati style = text-align Centar sve više mjesta. 865 00:38:13,630 --> 00:38:16,580 Ja mogu staviti na jednom mjestu možda, vole se na vrhu. 866 00:38:16,580 --> 00:38:18,210 >> No, ni to nije najbolji dizajn. 867 00:38:18,210 --> 00:38:21,720 U stvari, jedna od stvari koje ćete naučiti kao što ćete potrošiti više vremena s 868 00:38:21,720 --> 00:38:25,730 Web programiranje je da što više možete modularize stvari i faktora stvari 869 00:38:25,730 --> 00:38:30,610 kao .h datoteka neka nam faktor stvari van, sviđa helpers.c neka nam faktor stvari 870 00:38:30,610 --> 00:38:31,880 nekoliko psets prije. 871 00:38:31,880 --> 00:38:34,200 Isto tako, možda smo želim da se to postigne. 872 00:38:34,200 --> 00:38:37,920 >> Dakle, primijetite u verziji tri search.html Imam 873 00:38:37,920 --> 00:38:40,610 očistio glava stranicu i samo staviti 874 00:38:40,610 --> 00:38:43,320 u tome, veza oznaka, koji je suprotnosti s imenom, 875 00:38:43,320 --> 00:38:44,700 ne daje vam hipervezu. 876 00:38:44,700 --> 00:38:49,150 On povezuje na drugu datoteku putem href čija vrijednost u ovom slučaju, 877 00:38:49,150 --> 00:38:51,586 je potraga-3.css 878 00:38:51,586 --> 00:38:52,960 Tako shvaćam idemo brzo. 879 00:38:52,960 --> 00:38:54,600 No, sve što radim je vrsta pokretnih stvari okolo. 880 00:38:54,600 --> 00:38:55,760 Neka mi otvoreni za pretraživanje-3.css. 881 00:38:55,760 --> 00:38:57,114 882 00:38:57,114 --> 00:38:58,530 Tu je, ništa stvarno na njega. 883 00:38:58,530 --> 00:39:02,270 Upravo sam kopirati i zalijepiti u novi podnijeti, baš kao i mi uračunata stvari iz 884 00:39:02,270 --> 00:39:03,509 u druge datoteke prije. 885 00:39:03,509 --> 00:39:05,300 I result-- potpuno underwhelming-- 886 00:39:05,300 --> 00:39:06,730 će biti isti. 887 00:39:06,730 --> 00:39:10,490 No, mi smo se kreće toward-- ne, to nije. 888 00:39:10,490 --> 00:39:11,930 Oh, znam zašto. 889 00:39:11,930 --> 00:39:13,790 >> Dakle, čini se da je bug. 890 00:39:13,790 --> 00:39:15,010 I to je u nekom smislu. 891 00:39:15,010 --> 00:39:17,730 No, dopustite mi da otvori svoju karticu Network. 892 00:39:17,730 --> 00:39:19,660 Dopustite mi da ponovno učitati stranicu. 893 00:39:19,660 --> 00:39:23,315 Ah, zašto je CSS ne primjenjuje? 894 00:39:23,315 --> 00:39:26,920 Pa, CSS datoteku, isto tako, ima da se svijet može čitati, da se tako izrazim. 895 00:39:26,920 --> 00:39:28,440 A i ona je trenutno zabranjeno. 896 00:39:28,440 --> 00:39:33,760 Pa neka mi učiniti chmod a + r od zvijezde dot CSS-- whoops-- 897 00:39:33,760 --> 00:39:37,067 smo dot CSS je samo ekstenzija datoteke za CSS datoteke. 898 00:39:37,067 --> 00:39:38,900 Sada ću se vratiti moja preglednik i reload. 899 00:39:38,900 --> 00:39:40,910 OK, malo bolje. 900 00:39:40,910 --> 00:39:42,282 >> Sad neka mi učiniti jednu stvar. 901 00:39:42,282 --> 00:39:42,990 U potrazi-4.html. 902 00:39:42,990 --> 00:39:44,550 903 00:39:44,550 --> 00:39:48,220 Imam verziju da sam samo mislio je put hladnije, premda više puta 904 00:39:48,220 --> 00:39:48,980 komplicirano. 905 00:39:48,980 --> 00:39:50,690 Pogledajmo rezultat prvog. 906 00:39:50,690 --> 00:39:52,290 Zatvorite to nam dati više prostora. 907 00:39:52,290 --> 00:39:54,275 Promijenite to traži-4, Enter. 908 00:39:54,275 --> 00:39:55,430 909 00:39:55,430 --> 00:39:57,200 >> I sada hrpa stvari su razbijeni. 910 00:39:57,200 --> 00:39:59,910 Ja ću se vratiti u moj direktorij ovdje. 911 00:39:59,910 --> 00:40:04,190 A sad sam upravo ću to učiniti chmod o + r na file-- 912 00:40:04,190 --> 00:40:07,450 jer znam da exists-- zove logo.gif, što je slika. 913 00:40:07,450 --> 00:40:08,590 A sada ponovno. 914 00:40:08,590 --> 00:40:11,040 I wow-- pa sad sam prilično blizu, iskreno, 915 00:40:11,040 --> 00:40:15,860 sviđa verziju iz 1999. godine od Googlea, a iskreno, 2014 verzija Google, 916 00:40:15,860 --> 00:40:16,360 zar ne? 917 00:40:16,360 --> 00:40:21,920 >> Tako da se sada ide na svoje web stranice, u konačnici, ako sam tražiti mačke. 918 00:40:21,920 --> 00:40:23,900 I doista je. 919 00:40:23,900 --> 00:40:26,410 No, ono što sam uradio drugačije U ovoj verziji 4? 920 00:40:26,410 --> 00:40:28,020 Dakle, nećemo boraviti previše o tome ovdje. 921 00:40:28,020 --> 00:40:30,100 Vi ćete vidjeti u problemu postaviti sedam kraju. 922 00:40:30,100 --> 00:40:31,350 Ali primijetite sam nekoliko stvari. 923 00:40:31,350 --> 00:40:33,690 >> I uveo div tag, što je podjela, 924 00:40:33,690 --> 00:40:35,450 slični u duhu do stavka oznaku. 925 00:40:35,450 --> 00:40:38,220 No, podjela je baš kao i, evo pravokutna nevidljiva regija 926 00:40:38,220 --> 00:40:39,150 zaslona. 927 00:40:39,150 --> 00:40:41,680 Dajmo mu jedinstven identifikator, footer, samo 928 00:40:41,680 --> 00:40:44,700 tako da možemo govoriti o da u našem HTML drugdje. 929 00:40:44,700 --> 00:40:47,952 Ovdje je još jedan div stranice čiji ID će biti zadovoljan. 930 00:40:47,952 --> 00:40:49,160 To je sadržaj stranice. 931 00:40:49,160 --> 00:40:51,090 I ovdje je u zaglavlju stranice. 932 00:40:51,090 --> 00:40:54,960 >> Drugim riječima, sam uglavnom u HTML am psihički 933 00:40:54,960 --> 00:40:57,700 Gledate ovu web-stranicu kao tri komponente, zaglavlje 934 00:40:57,700 --> 00:41:01,200 ovdje s ovim nevidljivim pravokutnik, Sadržaj u sredini, a zatim 935 00:41:01,200 --> 00:41:04,800 podnožje dolje, čak iako mi ne vidimo te stvari. 936 00:41:04,800 --> 00:41:09,940 Zato želim da u mojoj glavi Stranica ovdje, ili u .css datoteku, 937 00:41:09,940 --> 00:41:11,460 Mogu koristiti ovaj sintaksu. 938 00:41:11,460 --> 00:41:13,070 >> Zaglavlja nije oznaka. 939 00:41:13,070 --> 00:41:17,060 To je ID, tako ispada da radeći #header, 940 00:41:17,060 --> 00:41:20,840 Ja sada mogu prijaviti jednu ili više svojstva zaglavlja. 941 00:41:20,840 --> 00:41:24,130 Ja mogu učiniti isti sadržaj, Isto za sadržaj ovdje. 942 00:41:24,130 --> 00:41:27,230 >> Tako na primjer, u podnožju, obavijesti svih tih svojstava sam dodavanje. 943 00:41:27,230 --> 00:41:30,660 I znam da oni postoje samo čitanje se na dokumentaciji za CSS. 944 00:41:30,660 --> 00:41:33,450 Veličina slova će biti smaller-- tako da neki relativna veličina slova. 945 00:41:33,450 --> 00:41:34,741 Težina će biti hrabar. 946 00:41:34,741 --> 00:41:37,340 Margin-- koliko piksela oko it-- je 20 piksela. 947 00:41:37,340 --> 00:41:38,590 I to će biti usmjeren. 948 00:41:38,590 --> 00:41:40,256 >> Ali upravo sada, stranica izgleda ovako. 949 00:41:40,256 --> 00:41:42,840 Ako nisam zadovoljan moj primjerak ima pravo, 950 00:41:42,840 --> 00:41:46,560 Mogao bih napraviti nešto poput crvene boje. 951 00:41:46,560 --> 00:41:50,570 I onda ja mogu spasiti ovo, ponovno, i sad sam stilizirane podnožje. 952 00:41:50,570 --> 00:41:54,130 Dakle, ovo je samo aludirati na snazi onoga što možete učiniti na web-stranici 953 00:41:54,130 --> 00:41:55,510 mijenjati stvari oko sebe. 954 00:41:55,510 --> 00:41:59,080 >> Pa čak i hladnije od toga, ako želite probiti okolo sa stvarnim web stranice, 955 00:41:59,080 --> 00:42:00,810 ne možete trajno ih mijenjati. 956 00:42:00,810 --> 00:42:03,640 Ali, ako sam otvoriti Ponovno inspektor Chrome 957 00:42:03,640 --> 00:42:07,610 i ja ići ne na lijevoj strani Ovdje, što pokazuje Facebooka HTML, 958 00:42:07,610 --> 00:42:11,380 ali prikazuje na desnoj strani Ruka strana sve svoje CSS, 959 00:42:11,380 --> 00:42:13,789 Možete i promijeniti stvari na letjeti. 960 00:42:13,789 --> 00:42:15,080 Pa neka mi ići naprijed i učiniti. 961 00:42:15,080 --> 00:42:18,670 >> Dopustite mi ići naprijed i kontrola kliknite na ovaj slučajnim riječi ovdje, 962 00:42:18,670 --> 00:42:21,230 potpisati i kliknite Pregledajte element. 963 00:42:21,230 --> 00:42:25,130 Chrome vrlo povoljno skokovima H1 tag da Facebook koristi. 964 00:42:25,130 --> 00:42:27,290 I ovdje primijetiti Facebook ima vrsta lijeno 965 00:42:27,290 --> 00:42:29,960 Teško kodirani veličinu fonta kao imovine ovdje. 966 00:42:29,960 --> 00:42:33,530 >> Dakle, super stvar, iako je da, ako sam zapravo ići ovdje 967 00:42:33,530 --> 00:42:39,560 i kažu, oh, Facebook, ne sviđa 64 piksela, sada možemo promijeniti Facebook. 968 00:42:39,560 --> 00:42:42,590 Naravno, mi samo smo ga mijenja za mene osobno u ovom trenutku. 969 00:42:42,590 --> 00:42:45,150 No, to je samo još jedan alat u našoj komplet alata 970 00:42:45,150 --> 00:42:48,360 što će nam omogućiti da ugađanje i shvatiti i dijagnosticirati 971 00:42:48,360 --> 00:42:49,729 problemi u našim vlastitim web stranicama. 972 00:42:49,729 --> 00:42:52,270 I mi isto tako mogli ići preko Ovdje, što je ista stvar. 973 00:42:52,270 --> 00:42:55,830 Ako stvarno želite dobiti fancy, ja znači, sada stvarno može mutirati stranicu 974 00:42:55,830 --> 00:42:57,380 i raditi lude stvari. 975 00:42:57,380 --> 00:42:59,870 >> Pa zašto je sve to korisno? 976 00:42:59,870 --> 00:43:02,330 Pa, u konačnici, mi smo će htjeti biti 977 00:43:02,330 --> 00:43:07,110 mogućnosti za stvaranje web stranice koje su vođeni vlastitim leđima krajevima, 978 00:43:07,110 --> 00:43:10,520 ne samo Google i outsourcing stražnji kraj tamo. 979 00:43:10,520 --> 00:43:13,510 Mi zapravo žele vrijednosti, na primjer, 980 00:43:13,510 --> 00:43:18,830 djelovanja naše tražilice atribut otići ne netko drugi, 981 00:43:18,830 --> 00:43:24,270 ali nešto poput search.php, search.php gdje je na vlastitom poslužitelju, 982 00:43:24,270 --> 00:43:25,670 ne na tuđe. 983 00:43:25,670 --> 00:43:30,316 >> I tako doći, mi zapravo potrebno uvesti novi jezik. 984 00:43:30,316 --> 00:43:33,190 Tako smo već gledali na jedan novi jezik ovdje, ili dva stvarno, HTML 985 00:43:33,190 --> 00:43:33,700 i CSS. 986 00:43:33,700 --> 00:43:36,330 Ali oni zapravo su samo strukturne i estetske jezika. 987 00:43:36,330 --> 00:43:38,360 Nisu programiranje jezik sam po sebi. 988 00:43:38,360 --> 00:43:41,160 I to je otprilike koliko formalno Vrijeme što ćemo potrošiti na njih. 989 00:43:41,160 --> 00:43:44,910 Zato ćemo započeti odmah za prijelaz na PHP. 990 00:43:44,910 --> 00:43:48,160 >> Dakle, PHP je stvarna programski jezik. 991 00:43:48,160 --> 00:43:50,750 To je skriptni jezik U smislu da 992 00:43:50,750 --> 00:43:52,855 trebao biti lakši težina nego nešto poput C. 993 00:43:52,855 --> 00:43:56,082 I to je tumačiti jezik, što znači da nije sastavljen. 994 00:43:56,082 --> 00:43:58,790 Tako je u Ukratko, što je to značilo kad smo koristili jezik poput C 995 00:43:58,790 --> 00:44:00,290 i morali smo ga sastaviti? 996 00:44:00,290 --> 00:44:02,120 Što to znači sastaviti C izvorni kod? 997 00:44:02,120 --> 00:44:03,864 998 00:44:03,864 --> 00:44:04,780 PUBLIKA: [nečujan]. 999 00:44:04,780 --> 00:44:06,184 DAVID J Malan: Ponovit? 1000 00:44:06,184 --> 00:44:07,100 PUBLIKA: [nečujan]. 1001 00:44:07,100 --> 00:44:07,962 1002 00:44:07,962 --> 00:44:08,920 DAVID J Malan: Savršeno. 1003 00:44:08,920 --> 00:44:10,180 To ga pretvara u binarnom. 1004 00:44:10,180 --> 00:44:14,200 To ga pretvara u nule i one iz stvarnog Engleski-poput izvornog koda. 1005 00:44:14,200 --> 00:44:16,424 A onda možemo zapravo pokrenuti one nule i one 1006 00:44:16,424 --> 00:44:18,840 ih prolazu CPU dvostrukim klikom ikona 1007 00:44:18,840 --> 00:44:19,980 ili trčanje naredbu. 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 a grozdovi drugi jezici su interpretirani 1010 00:44:26,250 --> 00:44:29,290 jezika, što je za reći ne ih sastaviti. 1011 00:44:29,290 --> 00:44:34,220 Umjesto toga, možete ih hraniti kao informacija Program se zove tumača. 1012 00:44:34,220 --> 00:44:36,640 I to tumač, koji je netko drugi napisao, 1013 00:44:36,640 --> 00:44:40,930 čita izvorni kod vrha do dna, lijeva na desno i samo interpretira 1014 00:44:40,930 --> 00:44:43,000 one linije i čini ono što ti kažeš. 1015 00:44:43,000 --> 00:44:45,360 >> Dakle, ako naiđete linija koja kaže ispisa, 1016 00:44:45,360 --> 00:44:48,660 to ne mora nužno pretvoriti ispis u odgovarajuće nula i jedinica. 1017 00:44:48,660 --> 00:44:51,910 To je upravo ovaj prevoditelj poput velika ako uvjet da kaže, 1018 00:44:51,910 --> 00:44:56,110 Ako poduka programer je ispisa, a zatim učinite sljedeće. 1019 00:44:56,110 --> 00:44:58,170 Tako da ga tumači samo po vrsti rasuđivanja 1020 00:44:58,170 --> 00:44:59,800 kroz ono što joj govore učiniti. 1021 00:44:59,800 --> 00:45:01,320 >> A PHP je jedan od tih jezika. 1022 00:45:01,320 --> 00:45:05,310 I prije PHP godina je osmišljen upravo za web programiranje. 1023 00:45:05,310 --> 00:45:08,160 I to je u početku vrlo neuredno neuredan jezik. 1024 00:45:08,160 --> 00:45:10,940 I doista, postoji ogromna Iznos loših PHP koda vani. 1025 00:45:10,940 --> 00:45:13,520 No, sama jezik sazrio tijekom godina, 1026 00:45:13,520 --> 00:45:16,200 i to toliko da je sada to zapravo divno sljedeći korak 1027 00:45:16,200 --> 00:45:19,970 pedagoški iz C jer je tako prokleto poznato sve 1028 00:45:19,970 --> 00:45:22,380 upravo ste vidjeli u posljednjih nekoliko tjedana. 1029 00:45:22,380 --> 00:45:25,724 >> Jedna inicijalna razlika vidjet ćemo je nema glavna funkcija više. 1030 00:45:25,724 --> 00:45:28,890 Kada počnete pisanje koda, to je samo će se izvršiti bez obzira na sve, 1031 00:45:28,890 --> 00:45:30,220 kao što ćemo vidjeti u jednom trenutku. 1032 00:45:30,220 --> 00:45:33,320 U međuvremenu, evo što varijabla izgleda u PHP. 1033 00:45:33,320 --> 00:45:35,840 To je malo drugačiji, ali samo jedva. 1034 00:45:35,840 --> 00:45:39,380 >> U PHP-u, ne postoji jaka tipkati. 1035 00:45:39,380 --> 00:45:41,430 Postoji tjedna tipkanje, što samo znači da postoji 1036 00:45:41,430 --> 00:45:44,030 su vrste podataka poput žice i brojevi i druge stvari. 1037 00:45:44,030 --> 00:45:47,030 Ali ne smetaju navodeći ono što su oni više. 1038 00:45:47,030 --> 00:45:48,980 PHP to figure out za vas. 1039 00:45:48,980 --> 00:45:52,030 Dolar znak je samo odluka da su ljudi napravili PHP godina 1040 00:45:52,030 --> 00:45:54,890 Prije takav da se bilo koja varijabla u PHP Upravo počinje s znak za dolar. 1041 00:45:54,890 --> 00:45:58,130 To je zapravo vrsta korisna u tome skače na vas malo više. 1042 00:45:58,130 --> 00:46:01,315 >> No, nakon toga, ova je stanje u PHP-u. 1043 00:46:01,315 --> 00:46:03,140 1044 00:46:03,140 --> 00:46:04,730 U čemu je razlika u odnosu na C? 1045 00:46:04,730 --> 00:46:07,180 1046 00:46:07,180 --> 00:46:09,600 Trik question-- ništa, što je zapravo jako lijepo. 1047 00:46:09,600 --> 00:46:12,140 Boolean izrazi u PHP-- isto. 1048 00:46:12,140 --> 00:46:19,354 Boolean izrazi sa i naspram ili, prekidači, petlje, petlje, loops-- redu, 1049 00:46:19,354 --> 00:46:20,270 ovo je drugačije. 1050 00:46:20,270 --> 00:46:22,660 >> Tako ispada da postoji nekoliko drugih značajki u PHP. 1051 00:46:22,660 --> 00:46:25,243 Jedan od njih je zapravo to, što je predivno zgodan. 1052 00:46:25,243 --> 00:46:29,250 Ako $ brojeva je niz koji ste ranije je izjavio u programu, 1053 00:46:29,250 --> 00:46:33,350 Imate li ovaj maštu za svaki konstrukt da, umjesto da radiš sve to 1054 00:46:33,350 --> 00:46:37,020 neugodno sam jednak 0, sam je manje od toga, [? Ja ++?] 1055 00:46:37,020 --> 00:46:40,320 za svaku brojevima kao broj, gdje je svaki od tih znakova vrijednosti dolar je samo 1056 00:46:40,320 --> 00:46:42,790 varijabla, a potonji možete misliti kako je I. 1057 00:46:42,790 --> 00:46:44,290 Ti bi mogao nazvati sve što želite. 1058 00:46:44,290 --> 00:46:45,770 Nazvao sam ga broj. 1059 00:46:45,770 --> 00:46:48,825 To će se ponoviti više Niz zove brojeve. 1060 00:46:48,825 --> 00:46:51,200 I na svakoj iteraciji, to je će se automatski ažurirati 1061 00:46:51,200 --> 00:46:54,340 za tebe dolar znak broj promjenjiva, tako da se stalno 1062 00:46:54,340 --> 00:46:58,210 imaju pristup varijable želite bez potrebe za napraviti bilo koji kvadrat nosač 1063 00:46:58,210 --> 00:47:00,980 zapis ili indeksiranje u nizu. 1064 00:47:00,980 --> 00:47:04,950 >> Osim toga, čak imamo stvari poput polja, koje izgledaju gotovo isto, 1065 00:47:04,950 --> 00:47:08,210 osim što je vrlo čest, kao što ćemo vidi, kako u PHP i JavaScript 1066 00:47:08,210 --> 00:47:10,750 pre inicijalizirati niz pomoću uglate zagrade. 1067 00:47:10,750 --> 00:47:12,040 C koristi vitičastim zagradama. 1068 00:47:12,040 --> 00:47:15,330 Dakle, to je malo drugačiji, iako mi stvarno nisu koristili taj trik puno. 1069 00:47:15,330 --> 00:47:20,090 >> No, još snažno, PHP ima asocijativne nizove, 1070 00:47:20,090 --> 00:47:23,100 što je fancy način govoreći hash tablice. 1071 00:47:23,100 --> 00:47:31,610 U stvari, ako želite proglasiti mljeveno meso stol u PHP-u, za razliku od C-- koliko 1072 00:47:31,610 --> 00:47:34,775 linija koda trebalo da se zapravo provesti hash tablicu u C? 1073 00:47:34,775 --> 00:47:38,310 Ili koliko linija koda je to uzimanje provesti hash tablicu u C? 1074 00:47:38,310 --> 00:47:39,820 Dakle, to je vjerojatno puno, zar ne? 1075 00:47:39,820 --> 00:47:41,680 To je nekoliko desetaka, možda i 100 ili 200. 1076 00:47:41,680 --> 00:47:42,980 To je svaki bitan. 1077 00:47:42,980 --> 00:47:45,420 Ili se radi o biti, kao što je ćete uskoro vidjeti, Netrivijalno 1078 00:47:45,420 --> 00:47:48,080 provesti hash tablicu [Nečujan] i probati. 1079 00:47:48,080 --> 00:47:50,580 No, u PHP-- i iskreno, ja Vjerojatno ne treba ti ovo 1080 00:47:50,580 --> 00:47:53,630 dok Monday-- u PHP, ako je želite stol, učinjeno. 1081 00:47:53,630 --> 00:47:56,431 To je mljeveno meso table-- tako s jedne linije koda. 1082 00:47:56,431 --> 00:47:56,930 A 1083 00:47:56,930 --> 00:47:58,810 >> Mnogo jezika učiniti. 1084 00:47:58,810 --> 00:48:00,190 Zabavite se s pset pet. 1085 00:48:00,190 --> 00:48:01,980 Dakle, puno jezika učiniti. 1086 00:48:01,980 --> 00:48:03,050 1087 00:48:03,050 --> 00:48:06,140 Oni vam dati ove apstrakcije da drugim ljudima, drugim programera, 1088 00:48:06,140 --> 00:48:09,870 stvorili za vas, tako da možete stajati na svojim ramenima 1089 00:48:09,870 --> 00:48:13,290 i početi koristiti ideje koje su super uvjerljiv, kao što su hash tablica i stabala 1090 00:48:13,290 --> 00:48:14,140 i pokuša. 1091 00:48:14,140 --> 00:48:17,790 Ali ne moraju nužno provedbu tih stvari sami. 1092 00:48:17,790 --> 00:48:20,850 >> I tako u konačnici, ono što ćemo koristiti za PHP 1093 00:48:20,850 --> 00:48:23,580 je potencijalno pisanje programa od tzv naredbenog retka. 1094 00:48:23,580 --> 00:48:26,600 Mogli smo stvoriti svaki program smo napisao ovaj semestar do sada, 1095 00:48:26,600 --> 00:48:30,410 osim možda Bijeg koji koristi SPL, koje je specifično za C u trenutku. 1096 00:48:30,410 --> 00:48:33,100 Ali svaki drugi problem postaviti, Sigurno Mario i Caesar 1097 00:48:33,100 --> 00:48:35,300 i Vigenere i [? Ispucati?] I dalje, mi 1098 00:48:35,300 --> 00:48:39,520 mogao ponovno provesti u PHP i Vjerojatno malo lakše. 1099 00:48:39,520 --> 00:48:43,050 >> Ali što ćemo u konačnici ćemo koristiti PHP za web programiranje. 1100 00:48:43,050 --> 00:48:46,420 A mi ćemo predstaviti sljedeći Tjedan mentalni model, paradigma zove 1101 00:48:46,420 --> 00:48:49,610 MVC, pogled Model kontroler, što ako ste učinili programiranje 1102 00:48:49,610 --> 00:48:51,610 ili prije u Pythonu Ruby ili negdje drugdje, što 1103 00:48:51,610 --> 00:48:54,112 Možda znate ovog tima s Šine i Django i slično. 1104 00:48:54,112 --> 00:48:55,820 Ali, ako ste novi u ovo previše, vidjet ćete 1105 00:48:55,820 --> 00:48:59,652 da je to zapravo vrlo prirodno proširenje faktorizaciju 1106 00:48:59,652 --> 00:49:01,360 i vrsta dizajna koda koji imamo 1107 00:49:01,360 --> 00:49:04,670 radili u C. ćemo sada primijeniti neke od tih lekcija u PHP 1108 00:49:04,670 --> 00:49:07,190 tako da se u konačnici, mi smo provedbi vlastite web stranice. 1109 00:49:07,190 --> 00:49:09,080 A ako ste vrsta hipnotiziran ili zaprepašteni 1110 00:49:09,080 --> 00:49:10,954 da ćemo učiniti sve tako brzo, 1111 00:49:10,954 --> 00:49:13,410 shvate da je gotovo svaka semestar, gotovo 90% 1112 00:49:13,410 --> 00:49:16,560 đačkog CS50, uključujući i one koji nikada nisu programirali prije, 1113 00:49:16,560 --> 00:49:20,329 završiti izradu konačne projekte koji temelje se na web programiranja. 1114 00:49:20,329 --> 00:49:23,120 I tako ćete vidjeti da se vraća su visoke u tjednima koji dolaze. 1115 00:49:23,120 --> 00:49:24,965 Zato ćemo vas vidjeti onda u ponedjeljak. 1116 00:49:24,965 --> 00:49:27,260 1117 00:49:27,260 --> 00:49:30,120 >> SPEAKER 1: A sada, duboko Misli po Daven Farnham. 1118 00:49:30,120 --> 00:49:34,055 1119 00:49:34,055 --> 00:49:34,780 Hash tablice. 1120 00:49:34,780 --> 00:49:37,180 1121 00:49:37,180 --> 00:49:38,402 >> [Smijeh] 1122 00:49:38,402 --> 00:49:38,902