1 00:00:00,000 --> 00:00:03,486 >> [Glazbom] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J Malan: Ovo je CS50 i ovo je početak tjedna 7. 4 00:00:14,250 --> 00:00:15,060 Dakle, dobrodošli natrag. 5 00:00:15,060 --> 00:00:17,540 A možda podsjetiti da u problemu postavite četiri, 6 00:00:17,540 --> 00:00:21,510 bilo je malo smetlar lov za neke fenomenalne nagrade propisivala 7 00:00:21,510 --> 00:00:24,219 Nakon što se oporavi fotografije Osoblje ovdje iu New Havenu, 8 00:00:24,219 --> 00:00:27,468 si izazov pronaći što mnogi od oni računalni znanstvenici kao što ste mogli. 9 00:00:27,468 --> 00:00:29,550 I imamo cijeli hrpa podnesaka. 10 00:00:29,550 --> 00:00:31,930 Mislio sam da bih podijeliti nekoliko s vama danas ovdje. 11 00:00:31,930 --> 00:00:35,100 >> A mi ćemo objaviti sve to online. 12 00:00:35,100 --> 00:00:39,310 No posebno, ja sam htjela privući vašu pozornost to-- Pa jedan, 13 00:00:39,310 --> 00:00:42,670 Sam bio u dosta njih općenito pozira ovako. 14 00:00:42,670 --> 00:00:45,750 No, čini se da je od Jutros, pobjednik 15 00:00:45,750 --> 00:00:51,170 je određeni netko zove Ken s 24 djelatnika zarobljeni na kameru 16 00:00:51,170 --> 00:00:54,600 ili malo više kada se uzme u račun višestruko osoblje u slikama. 17 00:00:54,600 --> 00:00:58,300 FOTO Ovdje je Ken sljedeći Mariji u New Havenu. 18 00:00:58,300 --> 00:01:01,300 >> Sada, Ken, ipak, okreće van je malo kutak slučaja 19 00:01:01,300 --> 00:01:02,880 što se još nije dogodilo prije. 20 00:01:02,880 --> 00:01:05,713 Ispada da nije došlo mi staviti fine print u problemu 21 00:01:05,713 --> 00:01:09,710 postavite četiri koja kaže da je osoblje ne ispunjava uvjete za fenomenalne nagrade 22 00:01:09,710 --> 00:01:13,130 Ken jer je, naravno, jedan fotografi na našeg osoblja. 23 00:01:13,130 --> 00:01:16,820 Sada, s tim je rekao, on je izvorno napisao mi reći 24 00:01:16,820 --> 00:01:19,180 nemojte postavljati ove fotografije online. 25 00:01:19,180 --> 00:01:21,630 Mislim da je u velikom dijelu jer je većina fotografija 26 00:01:21,630 --> 00:01:24,499 da je ovaj fotograf je izgleda malo nešto ovako. 27 00:01:24,499 --> 00:01:25,040 I slično. 28 00:01:25,040 --> 00:01:28,990 >> Ali Ken bih ja vas uvjeriti da je on jako dobar fotograf, 29 00:01:28,990 --> 00:01:33,190 On je profesionalni, on uzima Fotografije koje nisu mutne, 30 00:01:33,190 --> 00:01:37,270 da su bolji u fokusu, a on je je dosta našeg osoblja. 31 00:01:37,270 --> 00:01:40,370 No umjesto da samo prizna Ken, što smo mislili da ćemo napraviti 32 00:01:40,370 --> 00:01:43,390 je proći kroz popis Stvarni studenti koji su podnijeli. 33 00:01:43,390 --> 00:01:48,640 I ispada da je Koplje s 15 fotografije od jutros 34 00:01:48,640 --> 00:01:50,030 bio naš pobjednik. 35 00:01:50,030 --> 00:01:55,730 >> I ovdje na slici je Lance s Colton, sa SKAZ, sa sobom i sa Samom. 36 00:01:55,730 --> 00:02:00,230 Ali onda ispada da su od 11:46, tako da samo malo prije, 37 00:02:00,230 --> 00:02:04,380 Vratio sam se na moj e-mail i pronašao da smo imali još jedan više podnesak 38 00:02:04,380 --> 00:02:08,300 student po imenu Bonnie čiji e-mail, rekao je samo to. 39 00:02:08,300 --> 00:02:10,800 Ne lagati, ja sam to tijekom nastave. 40 00:02:10,800 --> 00:02:17,620 A onda je nastavio da priložite samo 14 fotografije, jedan sramežljivi Lance je 15. 41 00:02:17,620 --> 00:02:22,690 >> No, u Bonnie je fotografija, ispada kako su više članova osoblja, Sam 42 00:02:22,690 --> 00:02:25,960 među njima, tako da ono što smo mislili će učiniti je priznati obje ove. 43 00:02:25,960 --> 00:02:29,240 Dakle, osim dobivanje Dropbox prostor da svatko tko je sudjelovao 44 00:02:29,240 --> 00:02:33,900 prima, ove dvije sekcije će također dobivaju lijep catered ručak za njih 45 00:02:33,900 --> 00:02:36,100 a njihov odjeljak pari ovaj dolazak tjedan. 46 00:02:36,100 --> 00:02:38,970 I tako ćete čuti od nas, Lance i Bonnie, o tome. 47 00:02:38,970 --> 00:02:40,002 Tako veliki Čestitke na njih. 48 00:02:40,002 --> 00:02:42,210 Sada, oni od vas koji bi kao ručak općenito 49 00:02:42,210 --> 00:02:45,320 znam da CS50 ručak u Cambridgeu i New Haven je ovog petka. 50 00:02:45,320 --> 00:02:48,510 Idi na CS50 web stranicu slash RSVP. 51 00:02:48,510 --> 00:02:49,800 A sada riječ o seminarima. 52 00:02:49,800 --> 00:02:50,730 Više curricularly. 53 00:02:50,730 --> 00:02:52,490 Tako smo bliži točka semestra 54 00:02:52,490 --> 00:02:55,200 gdje bi trebali početi razmišljam o završnim projektima. 55 00:02:55,200 --> 00:02:59,309 A u stvari, u samo malo, će Takozvani pre prijedlozi biti posljedica. 56 00:02:59,309 --> 00:03:01,850 Dakle, pre prijedlozi su trebali biti prilično nizak utjecaj i stvarno 57 00:03:01,850 --> 00:03:04,109 samo prilika za da sastavite kratku poruku 58 00:03:04,109 --> 00:03:06,900 poučavanje kolega da obavijestiti mu ili joj ono što ste mislili 59 00:03:06,900 --> 00:03:09,140 možda želite učiniti za svoj konačni projekt. 60 00:03:09,140 --> 00:03:11,730 >> Sada, mnogi studenti završiti radiš web završne projekte. 61 00:03:11,730 --> 00:03:13,800 I naravno, mi smo samo sad prošli tjedan u to 62 00:03:13,800 --> 00:03:15,890 i dalje ronjenje u web programiranje. 63 00:03:15,890 --> 00:03:18,200 Dakle, ne brinite, ako vas apsolutno nema pojma kako 64 00:03:18,200 --> 00:03:21,594 ti bi graditi ideje koje možete imati u svom umu. 65 00:03:21,594 --> 00:03:24,510 To je zapravo samo tjera funkcija da bi vam razmišljanje i razgovor 66 00:03:24,510 --> 00:03:25,650 s TF o tome. 67 00:03:25,650 --> 00:03:28,810 No, kako bi vam pomoći u tome, i sa završnim projektima konačnici, 68 00:03:28,810 --> 00:03:31,750 znam da CS50 ima tradiciju ponuditi seminare. 69 00:03:31,750 --> 00:03:36,084 >> A to su izborni, ruke na, ili predavanje na temelju mogućnosti 70 00:03:36,084 --> 00:03:39,000 kako bi saznali više o temama koje su malo pomoćna za tečaj a 71 00:03:39,000 --> 00:03:43,310 nastavni plan i program, ali ipak divno Materijal voziti završne projekte. 72 00:03:43,310 --> 00:03:46,840 I tako je to popis koji je CS50 osoblje ovdje u New Havenu 73 00:03:46,840 --> 00:03:48,600 su došli do za ove godine o iOS 74 00:03:48,600 --> 00:03:50,730 programiranje, Android programiranje, razvoj igre, 75 00:03:50,730 --> 00:03:54,480 i grozdova više alata i jezika i tehnike. 76 00:03:54,480 --> 00:03:56,780 >> Dakle, držati na oku CS50 web stranici. 77 00:03:56,780 --> 00:04:00,110 A u međuvremenu, ako želite Registrirajte svoj interes za bilo koji od ovih, 78 00:04:00,110 --> 00:04:02,510 ići CS50 je slash registar. 79 00:04:02,510 --> 00:04:05,770 A onda ćemo pratiti kao na dani i vrijeme leta i mjesta 80 00:04:05,770 --> 00:04:09,090 i everything-- većina sve će biti streamed i također dostupan na zahtjev 81 00:04:09,090 --> 00:04:11,750 Nakon ako ne možete zapravo učiniti. 82 00:04:11,750 --> 00:04:15,800 Dakle, bez dodatnih teškoća, mi stali zadnji put s dobiti. 83 00:04:15,800 --> 00:04:19,610 >> A to je kao poruku da je unutar virtualnog omotnici, podsjećamo, 84 00:04:19,610 --> 00:04:23,960 da smo prešli iz usmjerivač usmjerivač usmjerivač između web preglednika i web 85 00:04:23,960 --> 00:04:24,487 poslužitelja. 86 00:04:24,487 --> 00:04:26,695 I to poruka izgledala Malo nešto ovako. 87 00:04:26,695 --> 00:04:29,700 To je bio više Arcane poruka koja je zapravo unutar koverti 88 00:04:29,700 --> 00:04:34,440 napisan na komadu papira čija prvi red, kaže doslovno, dobiti udarac. 89 00:04:34,440 --> 00:04:37,830 >> I baš kao provjera razum, što je Slash označavaju? 90 00:04:37,830 --> 00:04:40,455 Što znači kada Slash traži web stranice? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Možete zatražiti ga cijelo vrijeme. 93 00:04:44,250 --> 00:04:47,333 Većina svaki put kada posjetite web stranicu, zapravo ne upisati naziv datoteke. 94 00:04:47,333 --> 00:04:50,960 Vjerojatno samo ići na Facebook.com, ući, gmail.com, ili slično. 95 00:04:50,960 --> 00:04:52,260 A što slash predstavlja? 96 00:04:52,260 --> 00:04:53,506 Što datoteku? 97 00:04:53,506 --> 00:04:54,630 Ili što stranica, konkretno? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Indeks, da. 100 00:05:00,720 --> 00:05:01,810 Dakle zadanu stranicu. 101 00:05:01,810 --> 00:05:04,810 Dakle, ako ne odredite datoteku ime kao što ćete početi vidjeti, 102 00:05:04,810 --> 00:05:07,750 ti si zapravo samo traži daj mi zadanu stranicu Facebook 103 00:05:07,750 --> 00:05:10,800 ili mi dati svoj inbox ili dati ja zadana stranica vijesti 104 00:05:10,800 --> 00:05:12,510 na CNN-stranicama ili slično. 105 00:05:12,510 --> 00:05:15,220 A poslužitelj tada reagira na da poruka s nečim 106 00:05:15,220 --> 00:05:18,420 ovako, rekavši da, govoriti HTTP verziju 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, što je status kod koje mi ljudi rijetko 108 00:05:21,130 --> 00:05:22,790 ikada vidjeti, jer to je dobro. 109 00:05:22,790 --> 00:05:26,640 Jer to znači OK, zahtjev je primljeno i rukujete ispravno. 110 00:05:26,640 --> 00:05:28,960 A tip sadržaj očito u odgovor 111 00:05:28,960 --> 00:05:31,170 je vrlo često, ali ne uvijek, tekst. 112 00:05:31,170 --> 00:05:32,580 A posebno, HTML. 113 00:05:32,580 --> 00:05:34,760 I to je zapravo gdje gledamo danas. 114 00:05:34,760 --> 00:05:37,140 >> Dakle, u stvari, ja ću otići naprijed i otvoriti preglednik. 115 00:05:37,140 --> 00:05:40,410 Idem koristiti Chrome, možete koristiti najviše bilo koji preglednik u tjednima koji dolaze. 116 00:05:40,410 --> 00:05:42,410 Obično preporučujemo Chrome zato što je osobito 117 00:05:42,410 --> 00:05:43,750 dobro za softver programere. 118 00:05:43,750 --> 00:05:46,070 Ima puno izgrađen u alati koji olakšavaju 119 00:05:46,070 --> 00:05:49,800 razvijati ne samo HTML i CSS, stvari ćemo početi govoriti o danas, 120 00:05:49,800 --> 00:05:51,530 ali i drugim jezicima. 121 00:05:51,530 --> 00:05:55,530 >> I ja ću ići naprijed i ići to-- Idem kontrolu klik ili pravo 122 00:05:55,530 --> 00:05:57,210 kliknite bilo gdje na web stranici. 123 00:05:57,210 --> 00:05:59,070 I ja ću ići na Pregledajte element. 124 00:05:59,070 --> 00:06:03,850 I ja ću štipanje moje Zaslon samo malo ovdje. 125 00:06:03,850 --> 00:06:05,790 Dopustite mi da se presele to na dno. 126 00:06:05,790 --> 00:06:08,140 Dakle, to je ono što se zove Inspektor Chromea. 127 00:06:08,140 --> 00:06:11,010 Dakle, to je kao za ispravljanje pogrešaka alat izgrađen na Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Svi vi već imate ovaj Ako ste bili koristite Chrome. 129 00:06:13,520 --> 00:06:17,169 I to vam omogućuje da vidite što se događa na ispod haube neke web stranice. 130 00:06:17,169 --> 00:06:19,210 Tako ćemo zapravo uzeti pogledajte ovo što slijedi. 131 00:06:19,210 --> 00:06:21,251 To je način više značajki a mi je stalo danas. 132 00:06:21,251 --> 00:06:22,760 No, tu je ta kartica ovdje. 133 00:06:22,760 --> 00:06:25,890 Elementi, mreže, izvora, vremenska crta, a neke druge stvari. 134 00:06:25,890 --> 00:06:27,800 Idem kliknite na Mreža za trenutak. 135 00:06:27,800 --> 00:06:30,500 >> I to je malo neodoljiv na prvi pogled ovdje. 136 00:06:30,500 --> 00:06:34,190 No, ono što ću učiniti je pustiti mi to malo pojednostavio. 137 00:06:34,190 --> 00:06:37,560 Idem za uključivanje snimanje svjetlo, tako da je crveno. 138 00:06:37,560 --> 00:06:39,140 A ja ću reći sačuva zapisnik. 139 00:06:39,140 --> 00:06:41,015 A to je samo malo što sam shvatio 140 00:06:41,015 --> 00:06:44,120 tijekom vremena koje će spasiti sve što se događa u pregledniku. 141 00:06:44,120 --> 00:06:50,030 A sada ću ići da http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Zapravo, neka je učiniti www za dobru mjeru, slash. 143 00:06:52,690 --> 00:06:53,643 Unesite. 144 00:06:53,643 --> 00:06:56,180 Tako URL da su mnogi od možda ste posjetili. 145 00:06:56,180 --> 00:06:58,830 A sada Facebook je web Stranica dolazi na vrhu. 146 00:06:58,830 --> 00:07:02,350 A onda cijela hrpa stvari letio na dnu. 147 00:07:02,350 --> 00:07:04,830 A u stvari, ispada da kada posjetite facebook.com, 148 00:07:04,830 --> 00:07:09,320 niste samo to da jedan HTTP zahtjev, ispada da će Facebook.com 149 00:07:09,320 --> 00:07:14,320 šalje 41 tih kuverti, svaki sa svojom GET zahtjev, 150 00:07:14,320 --> 00:07:18,360 kao što je prikazano, iako iza ekrana Ovdje, na dnu ekrana, 151 00:07:18,360 --> 00:07:24,040 to znači da je, doista, moj Preglednik je napravio 41 zahtjeva. 152 00:07:24,040 --> 00:07:29,689 >> A ukupno, to prenose 861 kilobajta i to je zbog nekog razloga 153 00:07:29,689 --> 00:07:31,730 čak osam sekundi preuzeti sve to. 154 00:07:31,730 --> 00:07:33,790 Dakle, to je zapravo malo čudno da je Facebook je stranica koja će potrajati 155 00:07:33,790 --> 00:07:35,600 dugo, ali neka bude tako u ovom slučaju. 156 00:07:35,600 --> 00:07:39,520 Sada, sve to ja stvarno ne briga O osim za najviši zahtjev. 157 00:07:39,520 --> 00:07:46,440 Tako ćemo ići na ovom jednom ovdje i neka mi smanjili samo na trenutak. 158 00:07:46,440 --> 00:07:47,754 >> I neka mi uvećanje na to. 159 00:07:47,754 --> 00:07:50,670 Dakle, ono što sam učinio, na lijevo, iako postoji mnogo događa ovdje 160 00:07:50,670 --> 00:07:53,360 je sam istaknuo Facebook.com, a zatim 161 00:07:53,360 --> 00:07:56,540 primijetiti da sam pomicanjem prema dolje, pomicanje prema dolje, pomicanje prema dolje, 162 00:07:56,540 --> 00:07:58,330 zatražiti zaglavlja. 163 00:07:58,330 --> 00:08:01,720 I vidjet ćete da je Chrome prikazuje me u biti unutarnji sadržaj 164 00:08:01,720 --> 00:08:02,810 zahtjeva sam napravio. 165 00:08:02,810 --> 00:08:06,130 Nije formatiranja u sasvim isti način, ali primijetiti tu spominjanje dobiti, 166 00:08:06,130 --> 00:08:09,481 primijetiti da postoji spomen domaćina, Facebook.com, put ili Slash, 167 00:08:09,481 --> 00:08:10,730 što je file sam zatražio. 168 00:08:10,730 --> 00:08:12,930 >> A onda, ako sam pomicanje back up, mi ćemo zapravo 169 00:08:12,930 --> 00:08:17,270 vidjeti da je ono Facebook vratio da mi je sve ove zaglavlja. 170 00:08:17,270 --> 00:08:21,040 Dakle, unutar tog virtualnog omotnice doista mnogo ključnih parova vrijednosti. 171 00:08:21,040 --> 00:08:23,130 Riječ, debelo crijevo, a zatim vrijednost. 172 00:08:23,130 --> 00:08:25,050 Riječ, debelog crijeva i vrijednost. 173 00:08:25,050 --> 00:08:26,160 One se nazivaju zaglavlja. 174 00:08:26,160 --> 00:08:31,860 I tu je način više detalja ovdje nego mi zapravo stalo upravo sada. 175 00:08:31,860 --> 00:08:33,750 >> No, to je drugi na Posljednji tamo dolje, 176 00:08:33,750 --> 00:08:38,809 primijetiti da facebook.com poslužitelj, Ovdje doista rekao pitanju neki tekst HTML. 177 00:08:38,809 --> 00:08:41,409 Dakle, sve je to za reći da kada zatražiti web 178 00:08:41,409 --> 00:08:44,300 Stranica od preglednik na poslužitelja, koji poslužitelj odgovara 179 00:08:44,300 --> 00:08:47,630 s omotnicu vlastite unutar kojih je tekst. 180 00:08:47,630 --> 00:08:49,020 Drugim riječima, HTML. 181 00:08:49,020 --> 00:08:50,590 Hypertext Markup Language. 182 00:08:50,590 --> 00:08:53,200 Što je još jedan jezik da uvodimo danas 183 00:08:53,200 --> 00:08:57,740 da su ljudi ili računala generiranje kako implementirati web stranice. 184 00:08:57,740 --> 00:08:59,580 >> Naime, pogledajmo ovo. 185 00:08:59,580 --> 00:09:03,277 Idem sad vratiti na facebook stranice. 186 00:09:03,277 --> 00:09:05,360 A ja ću samo Kontrola miša ili desni klik 187 00:09:05,360 --> 00:09:07,634 i kliknite na View Page Source. 188 00:09:07,634 --> 00:09:10,550 A čak i ako ne koristite Chrome, IE može učiniti, Firefox može učiniti, 189 00:09:10,550 --> 00:09:14,060 Safari možete to učiniti, iako izbornik Mogućnosti možda izgleda malo drugačije. 190 00:09:14,060 --> 00:09:18,990 A to je da su Mark i HTML Tvrtka na Facebooku napisali. 191 00:09:18,990 --> 00:09:24,640 >> I da kolektivno, taj jezik ovdje provodi plavi i bijeli stranicu 192 00:09:24,640 --> 00:09:26,370 kako smo vidjeli maloprije. 193 00:09:26,370 --> 00:09:28,030 Sad, ovo je malo neodoljiv. 194 00:09:28,030 --> 00:09:31,400 Ali, ako ćemo gledati na gornjem lijevom, mi smo će početi vidjeti neke uzorke. 195 00:09:31,400 --> 00:09:34,140 Izgleda da ima puno tih otvorenog kuta nosača 196 00:09:34,140 --> 00:09:35,970 a onda je ovo ključna HTML. 197 00:09:35,970 --> 00:09:38,330 Evo još jedan otvoreni kut nosača i glavu. 198 00:09:38,330 --> 00:09:41,560 >> Evo, ako mi se pomaknite prema dolje i dolje i dolje, ja sam 199 00:09:41,560 --> 00:09:43,820 ići naprijed i pokušajte u potrazi za nečim. 200 00:09:43,820 --> 00:09:48,510 Postoji put preko na desnoj Ovdje je otvorena zagrada tijelo. 201 00:09:48,510 --> 00:09:50,800 A sjećam od prošle Vrijeme je da se predloženi 202 00:09:50,800 --> 00:09:53,364 kako najjednostavnije web stranice da čovjek mogao napisati 203 00:09:53,364 --> 00:09:55,030 može izgledati malo nešto ovako. 204 00:09:55,030 --> 00:09:58,430 Otvoreno HTML oznake, otvorite glavu oznake, otvorite oznaka, 205 00:09:58,430 --> 00:10:03,230 zatim zatvorena naslov, zatvorena glava, otvorena Tijelo tag, neki tekst, zatvorena tijelo, 206 00:10:03,230 --> 00:10:04,720 zatvoreni HTML. 207 00:10:04,720 --> 00:10:06,290 >> No, pauza ovdje samo na trenutak. 208 00:10:06,290 --> 00:10:09,030 Ovaj kod, čak i ako ste Nikad ga prije pisao 209 00:10:09,030 --> 00:10:11,864 ali još uvijek ne razumijem što se događa, izgleda prilično dobro. 210 00:10:11,864 --> 00:10:12,821 Točno, to je vrlo čist. 211 00:10:12,821 --> 00:10:14,120 To je vrlo stilski lijepo. 212 00:10:14,120 --> 00:10:16,190 Puno razvedenosti i bijelog prostora. 213 00:10:16,190 --> 00:10:18,020 Facebook je nije. 214 00:10:18,020 --> 00:10:23,190 Pa zašto je Facebook toliko gora od mene na pisanje HTML-a? 215 00:10:23,190 --> 00:10:24,310 Očigledno. 216 00:10:24,310 --> 00:10:26,899 >> Dobro, ovo je kao jedan od pet za stil. 217 00:10:26,899 --> 00:10:29,315 Postoji uvjerljiv razlog za njih smanjiti ove ugla. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 U redu, tako da oni ne žele olakšavaju za vas da ga pročitate. 220 00:10:33,860 --> 00:10:36,940 Dakle, u nekom smislu, oni su to obfuscating, kakve to remećenje 221 00:10:36,940 --> 00:10:40,260 barem estetski, tako da je teže za MySpace 222 00:10:40,260 --> 00:10:42,705 ići i otkinuti njihovu stranica, a HTML za to. 223 00:10:42,705 --> 00:10:45,080 Ispada da je s programima iako, uključujući Chrome, 224 00:10:45,080 --> 00:10:47,020 možemo očistiti ovo gore super jednostavno. 225 00:10:47,020 --> 00:10:49,420 Tako da je nije dosta da kao razlog. 226 00:10:49,420 --> 00:10:51,290 Što bi drugo moglo biti uzrok. 227 00:10:51,290 --> 00:10:51,790 Da. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Da, podaci bijeli prostor troškovi. 230 00:10:55,890 --> 00:10:56,598 Kako to misliš? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Da, točno. 233 00:11:02,979 --> 00:11:06,020 Ako pritisnete tipku tab puno ili razmaknicu, razmotriti implikacije. 234 00:11:06,020 --> 00:11:10,060 Dakle, svaka tipka na tipkovnici je [Nečujan] predstavljao kao jedan bajt. 235 00:11:10,060 --> 00:11:14,560 >> Dakle, pretpostavimo da je Marko ili bilo koji od devs ovih dana pogađa razmaknicu samo jednom 236 00:11:14,560 --> 00:11:17,899 u ovoj HTML stranicu koja predstavlja Facebooka početnu stranicu. 237 00:11:17,899 --> 00:11:19,690 I Facebook ima puno korisnika ovih dana. 238 00:11:19,690 --> 00:11:24,030 Dakle, pretpostavimo da je Facebookov stranica posjeti milijardu ljudi danas. 239 00:11:24,030 --> 00:11:27,020 A netko na Facebooku ima hit razmaknicu samo jednom. 240 00:11:27,020 --> 00:11:29,890 >> Dakle, jedan dodatni bajt, milijardu zahtjeva, 241 00:11:29,890 --> 00:11:32,790 koliko podataka je Facebook prijenos preko interneta 242 00:11:32,790 --> 00:11:37,160 jer netko hit razmaknicu na svom tipkovnici? 243 00:11:37,160 --> 00:11:41,660 Milijarda bajtova, ili jedan gigabajt Podaci se šalju iz Facebooka poslužitelja 244 00:11:41,660 --> 00:11:43,626 da ljudi širom Svijet bez dobrog razloga. 245 00:11:43,626 --> 00:11:44,750 Sada, to je samo jedan prostor. 246 00:11:44,750 --> 00:11:48,866 >> Zamislite da smo zapravo očistiti ovo stvar se i razvedena i dodao 247 00:11:48,866 --> 00:11:50,990 puno bijelog prostora i kartica likovi i mjesta, 248 00:11:50,990 --> 00:11:53,656 ćete završiti trošenja gigabajta, ako ne i terra bajtova više prostora. 249 00:11:53,656 --> 00:11:56,640 I tako super uobičajeno u Stvarni svijet web razvoj 250 00:11:56,640 --> 00:11:58,950 je Umanjite svoj kôd. 251 00:11:58,950 --> 00:12:01,280 A mi ćemo na kraju vidjeti kako možete to učiniti. 252 00:12:01,280 --> 00:12:04,630 >> Ali danas, mi ćemo početi pisati kod to je zapravo čitati nas ljudi. 253 00:12:04,630 --> 00:12:10,120 Ispada, međutim, ako se vratite ovaj alat u Chrome Pregledajte Element, 254 00:12:10,120 --> 00:12:12,030 Prije toga, bili smo na kartici Network. 255 00:12:12,030 --> 00:12:15,430 Ispada da ako idete na Kartica elemente, što zapravo vidjeti 256 00:12:15,430 --> 00:12:19,230 je prilično Chrome tiskana verzija tog istog HTML. 257 00:12:19,230 --> 00:12:20,640 Tako smo ga deobfuscated. 258 00:12:20,640 --> 00:12:22,472 Dakle, to je ne odgovaraju za računalom. 259 00:12:22,472 --> 00:12:24,430 I sada možete zapravo kliknite okolo i početi 260 00:12:24,430 --> 00:12:27,630 vidjeti hijerarhiju koja je web stranica. 261 00:12:27,630 --> 00:12:28,780 Tako ćemo zapravo učiniti. 262 00:12:28,780 --> 00:12:32,120 Idem ići naprijed i otvoriti na moj Mac program koji se zove tekst uredi. 263 00:12:32,120 --> 00:12:35,490 I podsjetiti da je ovo samo super jednostavan tekst programa. 264 00:12:35,490 --> 00:12:37,490 Windows ima notepad.exe. 265 00:12:37,490 --> 00:12:39,820 I ja ću Verbatima upišite sljedeće. 266 00:12:39,820 --> 00:12:44,650 Doc tipa HTML, otvorena zagrada HTML, zatvorena zagrada HTML, 267 00:12:44,650 --> 00:12:49,000 imamo glavu stranice ovdje, kraj glave stranice ovdje, 268 00:12:49,000 --> 00:12:52,310 naslov će biti kao, Hello World. 269 00:12:52,310 --> 00:12:56,660 >> I onda ovdje, trebamo tijelo na web stranici. 270 00:12:56,660 --> 00:12:58,050 Zatvorena tijelo. 271 00:12:58,050 --> 00:13:00,700 I onda ovdje, Hello World. 272 00:13:00,700 --> 00:13:01,270 U redu. 273 00:13:01,270 --> 00:13:03,350 Tako smo napisali super brzi web stranicu. 274 00:13:03,350 --> 00:13:06,675 Idem ga spremiti kao hello.html na moj radna površina. 275 00:13:06,675 --> 00:13:09,050 Moj Mac će se žaliti, misleći da, pričekajte minutu, 276 00:13:09,050 --> 00:13:11,091 ovo je tekstualna datoteka, učinite Želite li ga nazvati txt? 277 00:13:11,091 --> 00:13:13,300 Ali ne, želim koristiti dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> I što onda lijepo ako sam Samo dvaput kliknite na ovu datoteku, 279 00:13:16,140 --> 00:13:18,600 hello.html, ovdje je moja web stranica. 280 00:13:18,600 --> 00:13:22,564 Nažalost, ja sam Jedina osoba na svijetu 281 00:13:22,564 --> 00:13:23,980 koji možete posjetiti ovu stranicu odmah. 282 00:13:23,980 --> 00:13:26,734 Jer gdje to živi naizgled? 283 00:13:26,734 --> 00:13:27,650 To je na mom Macu, zar ne? 284 00:13:27,650 --> 00:13:28,470 Koji je beskorisno. 285 00:13:28,470 --> 00:13:30,390 Kao nitko u ovoj sobi a kamoli na internetu 286 00:13:30,390 --> 00:13:31,598 zapravo možete posjetiti tu stranicu. 287 00:13:31,598 --> 00:13:33,820 Tako je danas, moramo uvesti još jedan element. 288 00:13:33,820 --> 00:13:36,720 >> A za to, idem ići naprijed i otvoriti Cloud 9. 289 00:13:36,720 --> 00:13:40,090 Dakle Cloud 9 je naravno oblak temelji service-- CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- To je sve naše radnih prostora radi negdje na internetu. 291 00:13:44,890 --> 00:13:48,330 A to znači da su sve naše datoteke javno dostupni već. 292 00:13:48,330 --> 00:13:49,830 Tako ćemo ići naprijed i učiniti. 293 00:13:49,830 --> 00:13:53,670 Ja ću ići naprijed i stvoriti novu datoteku NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Idem da ga spasi kao i prije kao hello.html i kliknite Spremi. 295 00:13:58,819 --> 00:14:01,860 A sada samo uštedjeti vrijeme, idem ići naprijed i kopirajte zalijepite ovaj kod 296 00:14:01,860 --> 00:14:03,470 umjesto da ponovite. 297 00:14:03,470 --> 00:14:04,550 I spremite ga. 298 00:14:04,550 --> 00:14:07,550 I tako sad imam Datoteka naziva hello.html. 299 00:14:07,550 --> 00:14:09,710 Ali kako ja to zapravo otvorite ga kao web stranicu? 300 00:14:09,710 --> 00:14:14,120 Pa, ispada izgrađen na CS50 IRO je ne samo prevodilac kao jeka 301 00:14:14,120 --> 00:14:16,670 i debugger poput GDB i grozdova drugih programa, 302 00:14:16,670 --> 00:14:21,140 tu je zapravo punopravnog web poslužitelj trčanje u CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Svi vi, to jest, imati vlastiti web poslužitelj. 304 00:14:23,900 --> 00:14:26,850 I web poslužitelj je samo komad softvera čija je svrha u životu 305 00:14:26,850 --> 00:14:28,220 je služiti se web stranice. 306 00:14:28,220 --> 00:14:32,490 Za slušanje za zahtjeve preglednike i odgovoriti s malo virtualnim omotnicama 307 00:14:32,490 --> 00:14:35,290 unutar kojih je sadržaj koji sam napisao. 308 00:14:35,290 --> 00:14:38,372 Dakle, ovo je web poslužitelj zapravo besplatan i open source. 309 00:14:38,372 --> 00:14:40,830 Gdje open source jednostavno znači softver koji netko drugi ima 310 00:14:40,830 --> 00:14:43,480 Zapisano je da svatko od nas može zapravo vidjeti i skinuti pa čak i 311 00:14:43,480 --> 00:14:44,780 mijenjati izvorni kod. 312 00:14:44,780 --> 00:14:46,150 I to se zove Apache. 313 00:14:46,150 --> 00:14:51,450 >> A mi smo napravili to malo lakše koristiti u CS50IDE pozivom ga Apache 50. 314 00:14:51,450 --> 00:14:53,780 Tako da zapravo može razumjeti sljedeće. 315 00:14:53,780 --> 00:14:56,560 Idem reći Apache 50 start. 316 00:14:56,560 --> 00:14:58,910 A onda sam samo ću reći točku. 317 00:14:58,910 --> 00:15:01,080 I vidimo neke pomalo Arcane poruku rekavši 318 00:15:01,080 --> 00:15:04,640 postavljanje Apache Document [? Skupina?] kuće, Ubuntu, što god da je, 319 00:15:04,640 --> 00:15:05,770 slash radni prostor. 320 00:15:05,770 --> 00:15:08,280 Pokretanje web poslužitelj Apache je uspješno 2. 321 00:15:08,280 --> 00:15:11,330 >> Dakle duljimo, sam Upravo gurnula gumb 322 00:15:11,330 --> 00:15:18,000 i okrenuo se na web poslužitelju tko je sad slušanje na internetu na TCP port 323 00:15:18,000 --> 00:15:20,587 80 na određenom adrese. 324 00:15:20,587 --> 00:15:22,420 I ovdje piše, a to će se promijeniti Like 325 00:15:22,420 --> 00:15:26,550 svoje korisničko ime i drugih čimbenika, ali primijetiti sad ako ja kliknite ovaj, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard pa i tako, primijetite da je sve ovo vrijeme 327 00:15:30,211 --> 00:15:31,960 U posljednjih nekoliko tjedana, možda imate 328 00:15:31,960 --> 00:15:35,200 primijetio da svoj vlastiti korisničko ime je ugrađen u gornjem desnom rukom 329 00:15:35,200 --> 00:15:37,130 kutak CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> I to je zapravo bio sve ovo Vrijeme adresu na kojoj možete 331 00:15:41,050 --> 00:15:43,574 posjetite sve svoje datoteke preko interneta. 332 00:15:43,574 --> 00:15:45,990 Do sada, nije važno, jer u C, općenito 333 00:15:45,990 --> 00:15:48,073 Želite stvari trčanje u terminala, a ne na webu. 334 00:15:48,073 --> 00:15:50,800 Ali danas, počinjemo pisanje web based kod 335 00:15:50,800 --> 00:15:53,350 da mi želimo dostupni na javnim URL-ova. 336 00:15:53,350 --> 00:15:56,100 Pa što ću učiniti je kliknuti ovaj URL. 337 00:15:56,100 --> 00:16:00,880 >> I primijetite da vidim prilično ružno indeks, u imeniku, 338 00:16:00,880 --> 00:16:04,090 ali ono datoteka skače se na vas, vjerojatno? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 To je zato što sam spasio datoteka u mom radnom prostoru. 341 00:16:07,870 --> 00:16:12,310 A ono što sam rekla Apache web poslužitelj se pogledati u Davidovu radni prostor imeniku. 342 00:16:12,310 --> 00:16:15,300 I neka netko u Svijet vidi te datoteke. 343 00:16:15,300 --> 00:16:19,050 >> I doista, ako ja sada kliknite na hello.html, 344 00:16:19,050 --> 00:16:22,180 Vidim u ovoj kartici točno tu datoteku. 345 00:16:22,180 --> 00:16:26,430 Sada primijetite, Cloud 9 radi nešto malo korisno za nas. 346 00:16:26,430 --> 00:16:29,480 Unutar CS50 IDE, primijetiti da postoji Odjednom adresa šipka. 347 00:16:29,480 --> 00:16:33,690 To je zato što, iako smo pomoću Chrome posjetiti CS50IDE, 348 00:16:33,690 --> 00:16:37,940 unutar CS50IDE je vlastitu verzija web pregledniku upravo sada. 349 00:16:37,940 --> 00:16:40,820 I tako, umjesto komplicirati stvari kao takve, 350 00:16:40,820 --> 00:16:42,955 Idem samo naprijed i samo kopirajte ovaj URL. 351 00:16:42,955 --> 00:16:45,330 Ja ću ići naprijed i jednostavno otvoriti vlastitu Chrome prozor. 352 00:16:45,330 --> 00:16:47,800 Dakle, nema magije ovdje, ne CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Samo ću se doslovno zalijepiti moj J Harvard URL i pritisnite Enter. 354 00:16:51,800 --> 00:16:54,750 I voila, sada i u teoriji, svatko 355 00:16:54,750 --> 00:16:57,700 na internetu, ako sam konfiguriran dozvole na odgovarajući način, 356 00:16:57,700 --> 00:16:58,720 možete posjetiti ovu datoteku. 357 00:16:58,720 --> 00:17:03,230 I tako sad, ako sam rekao hello.html, voila, postoji 358 00:17:03,230 --> 00:17:06,366 mi nevjerojatno underwhelming web stranica. 359 00:17:06,366 --> 00:17:07,740 Tako ćemo učiniti brzo provjeriti razum. 360 00:17:07,740 --> 00:17:09,710 Zbog svega toga je konceptualni postaviti. 361 00:17:09,710 --> 00:17:13,180 A mi smo zapravo nije stvarno ti učio kako pisati HTML po sebi. 362 00:17:13,180 --> 00:17:16,084 Bilo kakva pitanja do sada na što se upravo dogodilo? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Da. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Da li CS50 posjedujete ovih web stranica? 367 00:17:25,800 --> 00:17:26,460 U kojem smislu? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Dobro pitanje. 370 00:17:29,530 --> 00:17:32,429 Dakle, CS50 je vlasnik CS50.io. 371 00:17:32,429 --> 00:17:33,970 Mi doista smo kupili taj naziv domene. 372 00:17:33,970 --> 00:17:37,240 A po prirodi vama prijavom na CS50IDE, 373 00:17:37,240 --> 00:17:39,270 svi dobiti ono što se naziva poddomena. 374 00:17:39,270 --> 00:17:46,840 >> Dakle IDE50-Malan, ili IDE50-Rob.CS50.io, to je vaša jedinstvena adresa roku 375 00:17:46,840 --> 00:17:47,730 naše ime domene. 376 00:17:47,730 --> 00:17:50,850 Tako je za potrebe naravno, imate vlastitu jedinstvenu adresu. 377 00:17:50,850 --> 00:17:55,150 Ali smo pojednostaviti stvari koje kupnje top level domena, CS50 točka 378 00:17:55,150 --> 00:17:58,050 I / O, a zatim svi ostali unutar toga, da se tako izrazim. 379 00:17:58,050 --> 00:17:59,890 A mi ćemo se vratiti na to u nekoliko tjedana vjerojatno, 380 00:17:59,890 --> 00:18:01,930 posebno na konačni projekt vrijeme, kada su neki od vas 381 00:18:01,930 --> 00:18:03,596 možda želite da se vaše vlastite domene. 382 00:18:03,596 --> 00:18:06,270 To je zapravo relativno jednostavan. 383 00:18:06,270 --> 00:18:06,770 U redu. 384 00:18:06,770 --> 00:18:07,880 Tako ćemo sada učiniti. 385 00:18:07,880 --> 00:18:11,910 Ja ću ići natrag u CS50IDE, gdje je moj dosje sada, 386 00:18:11,910 --> 00:18:14,710 hello.html, nije sve što je zanimljivo. 387 00:18:14,710 --> 00:18:17,130 Želio bih učiniti nešto malo ljepše od toga. 388 00:18:17,130 --> 00:18:19,440 Tako ću učiniti ovako nešto. 389 00:18:19,440 --> 00:18:21,510 Neka me otvoren paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 Dakle, ovo je datoteka napisao sam unaprijed. 391 00:18:23,560 --> 00:18:26,480 Na vrhu toga, kao što je Uvijek imamo komentare. 392 00:18:26,480 --> 00:18:28,730 No, u HTML, komentari izgleda malo drugačije. 393 00:18:28,730 --> 00:18:33,270 On line tri i linija 14, što vidi sintaksu za početak komentar 394 00:18:33,270 --> 00:18:34,020 i na kraju komentar. 395 00:18:34,020 --> 00:18:36,820 >> No, nitko od stvari u između pitanjima funkcionalno. 396 00:18:36,820 --> 00:18:40,250 To je samo napomena do Ljudsko što se ovdje događa. 397 00:18:40,250 --> 00:18:43,040 I baš kao brzi razuma ček, ako sam se pomaknite prema dolje, 398 00:18:43,040 --> 00:18:46,820 što je očito novi oznake koje smo uveli? 399 00:18:46,820 --> 00:18:52,130 Oznake do sada smo vidjeli otvoreni Nosač HTML, glave, naslov i tijelo. 400 00:18:52,130 --> 00:18:54,400 No, ono što je očito novi sad? 401 00:18:54,400 --> 00:18:55,200 >> Da, tako str. 402 00:18:55,200 --> 00:18:57,320 P oznaka ili stavka oznaka. 403 00:18:57,320 --> 00:19:01,182 A onda sam posudio nešto zadano Latinski tekst predstavlja moje stavke. 404 00:19:01,182 --> 00:19:03,390 Jer ono što sam htjela pokazuju kako biste mogli 405 00:19:03,390 --> 00:19:05,859 predstavljaju odlomke teksta u HTML-u. 406 00:19:05,859 --> 00:19:08,400 I tako ono što se počinje događati Ovdje je da je već 407 00:19:08,400 --> 00:19:09,657 uzorak razvoja. 408 00:19:09,657 --> 00:19:10,990 I neka mi ići naprijed i učiniti. 409 00:19:10,990 --> 00:19:12,760 Dopustite mi da najprije isključite Apache. 410 00:19:12,760 --> 00:19:17,340 A ja ću reći da se početak opet unutar današnjeg izvora sedam 411 00:19:17,340 --> 00:19:18,420 m katalog. 412 00:19:18,420 --> 00:19:20,100 Tako da imam pristup svemu. 413 00:19:20,100 --> 00:19:22,230 >> A sada, ako sam se vratiti ovo imenika, 414 00:19:22,230 --> 00:19:24,846 Primijetit vidim svaku datoteku s danas. 415 00:19:24,846 --> 00:19:26,720 I vidjet ćete u Sljedeći problem set, mi ćemo 416 00:19:26,720 --> 00:19:28,594 vam dati upute za to upravo to. 417 00:19:28,594 --> 00:19:35,210 Ako otvorim paragraphs.html, to može kao i izgledaju kao programski jezik 418 00:19:35,210 --> 00:19:36,970 za vas ako ne govorite ili čitati latinski. 419 00:19:36,970 --> 00:19:40,525 No, to je samo tri stavci teksta koji su označeni u HTML-u. 420 00:19:40,525 --> 00:19:43,100 >> I primijetiti stavak pauze između njih. 421 00:19:43,100 --> 00:19:46,400 Jer ispada, i iako vas 422 00:19:46,400 --> 00:19:49,210 može biti sklon da to učinite, dok je u stvarnom svijetu, 423 00:19:49,210 --> 00:19:51,370 Ako želite staviti liniju pauze između stvari, 424 00:19:51,370 --> 00:19:55,680 Možda ćete vrlo jednostavno to učiniti i udario Spremi. 425 00:19:55,680 --> 00:19:59,460 A sada, ako sam ponovno učitati ovdje, obavijest da je sve samo zamagljuje zajedno 426 00:19:59,460 --> 00:20:01,100 u samo jedan blob teksta. 427 00:20:01,100 --> 00:20:03,570 Budući HTML je vrsta glupe jeziku. 428 00:20:03,570 --> 00:20:07,230 >> To je značilo da se koristi u takvom način da preglednik će samo 429 00:20:07,230 --> 00:20:09,920 to izrijekom što to kažem. 430 00:20:09,920 --> 00:20:12,890 Dakle, ako ne kažem dajte mi novi stavak, 431 00:20:12,890 --> 00:20:14,569 nećeš vidjeti novi odlomak. 432 00:20:14,569 --> 00:20:16,360 A u stvari, ono što je preglednik će raditi 433 00:20:16,360 --> 00:20:20,020 je čak i ako pritisnete Enter, recimo opet i opet 434 00:20:20,020 --> 00:20:23,190 i opet, kreće ovaj tekst put dolje na zaslonu, a zatim spremite 435 00:20:23,190 --> 00:20:26,610 a zatim ponovno, preglednik će kolaps sve to bijelog prostora 436 00:20:26,610 --> 00:20:29,021 u samo jednom, vidljivom razmakom. 437 00:20:29,021 --> 00:20:29,520 U redu. 438 00:20:29,520 --> 00:20:30,869 Dakle, to je stav oznaka. 439 00:20:30,869 --> 00:20:32,910 I tako ono što je obrazac koji je u razvoju ovdje? 440 00:20:32,910 --> 00:20:37,450 Pa, čini se da je slučaj da HTML je sve o pokretanju oznaku 441 00:20:37,450 --> 00:20:38,460 i završava oznaku. 442 00:20:38,460 --> 00:20:39,300 A što je oznaka? 443 00:20:39,300 --> 00:20:41,160 Pa, to je samo komad sintakse. 444 00:20:41,160 --> 00:20:44,400 Otvorite nosač, ključna riječ, zatvorena zagrada, je oznaka. 445 00:20:44,400 --> 00:20:45,510 Ili početi oznaku. 446 00:20:45,510 --> 00:20:48,590 I onda kad ste učinio izražavanje sebe, 447 00:20:48,590 --> 00:20:52,300 kao što ste učinili s stavkom, što učiniti da se tako izrazim suprotno. 448 00:20:52,300 --> 00:20:55,480 No, suprotno nije sasvim unatrag. 449 00:20:55,480 --> 00:21:00,630 >> Jednostavno prefiks isti tag-a ime kosu crtu kao što je ovaj. 450 00:21:00,630 --> 00:21:01,130 U redu. 451 00:21:01,130 --> 00:21:02,570 Dakle, nije sve što je uzbudljivo. 452 00:21:02,570 --> 00:21:05,270 A u stvari, nismo izradu Web sve više zanimljiv. 453 00:21:05,270 --> 00:21:07,630 Što ako želim napraviti stvari veći i odvažne? 454 00:21:07,630 --> 00:21:11,780 Tako ispada da je ovdje je primjer u headings.html, gdje je u mom tijelu, 455 00:21:11,780 --> 00:21:17,280 Imam H1 tag, H2, H3, četiri, pet, šest ili, od kojih su svi 456 00:21:17,280 --> 00:21:18,310 Čini se prilično Arcane. 457 00:21:18,310 --> 00:21:21,010 Ali ako idem otvoriti ovo Primjerice, neka je pogledati. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Dakle preglednici po defaultu može dati tekst To je veliki i hrabar raznorodnih veličinama. 460 00:21:27,030 --> 00:21:28,070 H1 velika. 461 00:21:28,070 --> 00:21:31,240 H6 je manji, a zatim sve ostalo između. 462 00:21:31,240 --> 00:21:34,170 Dakle, to je zanimljivo, ali još uvijek stvarno ne web znam. 463 00:21:34,170 --> 00:21:36,870 Što ako želimo imam nešto poput popisa. , 464 00:21:36,870 --> 00:21:40,190 Dakle, ovdje je popis s grafičkim oznakama od tri Harvard kuća. 465 00:21:40,190 --> 00:21:41,600 >> Kako idete o događaj ovaj? 466 00:21:41,600 --> 00:21:45,410 Pa, pogledajte list.html. 467 00:21:45,410 --> 00:21:47,870 I ovdje, vidimo Malo funkiness 468 00:21:47,870 --> 00:21:49,630 ali neka je razmotriti što se događa. 469 00:21:49,630 --> 00:21:56,182 Dakle, na temelju onoga što ste upravo vidjeli, UL zalaže za neuređen popis. 470 00:21:56,182 --> 00:21:57,640 Neuređen popis samo znači grafičkim oznakama. 471 00:21:57,640 --> 00:21:58,431 Nema brojeva. 472 00:21:58,431 --> 00:22:01,850 Tu je i nešto što se naziva naredio popis, što je OL na oznaku. 473 00:22:01,850 --> 00:22:05,350 Zatim LI točka popis je sve to znači. 474 00:22:05,350 --> 00:22:07,790 >> I tako ga automatski Brojevi sve za vas. 475 00:22:07,790 --> 00:22:11,270 Ali opet, sve moje uvlačenje bijeli prostor je samo zbog mene. 476 00:22:11,270 --> 00:22:13,050 Preglednik ne zapravo ide na skrb. 477 00:22:13,050 --> 00:22:16,670 Dakle, čak i ako ne mogu to učiniti, samo da bude jasno, 478 00:22:16,670 --> 00:22:19,880 da ne bi trebali, iako preglednik će i dalje 479 00:22:19,880 --> 00:22:22,130 moći razumjeti sasvim u redu. 480 00:22:22,130 --> 00:22:24,590 Ja sam udarajući Učitaj ponovno u mom preglednik, ja klikom reload 481 00:22:24,590 --> 00:22:26,760 i nema promjena se događa jer preglednik dalje 482 00:22:26,760 --> 00:22:29,550 radi upravo ono što sam to kažem. 483 00:22:29,550 --> 00:22:30,050 >> U redu. 484 00:22:30,050 --> 00:22:31,340 Dakle, ovo je sve samo tekst. 485 00:22:31,340 --> 00:22:33,730 Sada ćemo napraviti nešto zanimljivije. 486 00:22:33,730 --> 00:22:36,660 Ja ću ići naprijed i posuditi ove HTML. 487 00:22:36,660 --> 00:22:40,910 Ja ću ići naprijed i stvoriti novu datoteku ovdje. 488 00:22:40,910 --> 00:22:43,370 A mi ćemo nazvati ovu rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Imamo nerazmjerno Rabljeni nešto 491 00:22:48,916 --> 00:22:51,290 zove Rick uvaljajte u ovu klase ove godine, ne znam, 492 00:22:51,290 --> 00:22:53,880 jednostavno se dogodilo organski. 493 00:22:53,880 --> 00:22:55,397 >> A sada je dobio izvan kontrole. 494 00:22:55,397 --> 00:22:56,730 Pa ja sam samo ići s njim. 495 00:22:56,730 --> 00:22:59,700 A ako idem na Googleu Slike i Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Ako ne znate zašto radimo to, samo pročitajte na Wikipediji. 498 00:23:06,170 --> 00:23:11,520 Svaki put kada ste kliknuli na link, netko je negdje smijeha. 499 00:23:11,520 --> 00:23:14,860 I neka mi ide ahead-- tamo idemo, idemo vidjeti ovu sliku. 500 00:23:14,860 --> 00:23:16,750 >> Dakle ovdje imamo Slika u Google Images. 501 00:23:16,750 --> 00:23:19,390 I pretpostavimo da je to razumno svugdje na internetu. 502 00:23:19,390 --> 00:23:22,570 Tako ću pretpostaviti da je u redu za mene zapravo stavi ovo u mojoj web stranici. 503 00:23:22,570 --> 00:23:24,820 Idem samo naprijed i kopirajte URL slike. 504 00:23:24,820 --> 00:23:28,600 A sada, ako sam se vratiti u oblaku 9, neka je vidjeti što mogu učiniti ovdje. 505 00:23:28,600 --> 00:23:30,630 Dakle, ovdje je samo web stranica. 506 00:23:30,630 --> 00:23:39,020 To je Rick Astley, haha, Idem sad vratiti 507 00:23:39,020 --> 00:23:43,510 na moj e, reload, i zanimljivo. 508 00:23:43,510 --> 00:23:44,530 >> Gdje je Rick? 509 00:23:44,530 --> 00:23:46,050 Pa da vidim što se dogodilo. 510 00:23:46,050 --> 00:23:49,114 Zapravo, idem pretvarati se kao da to nije učinio. 511 00:23:49,114 --> 00:23:50,280 [Nečujan] staviti ga ovdje. 512 00:23:50,280 --> 00:23:52,520 Mi ćemo se vratiti da je u trenutku. 513 00:23:52,520 --> 00:23:54,200 Dakle, ovdje je rick.html. 514 00:23:54,200 --> 00:23:56,070 Dakle, to nije Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Tako ispada možemo zapravo ga dodajte ovdje. 516 00:23:59,680 --> 00:24:00,830 To je Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Idem reći dajte mi neku sliku čija Izvor je URL Samo sam kopirao, što 518 00:24:06,680 --> 00:24:09,110 očito je sretna rođendan ili nešto drugo. 519 00:24:09,110 --> 00:24:13,280 >> A sada ću zatvorite oznaku ovako. 520 00:24:13,280 --> 00:24:15,170 Dakle, ovo je super omatanje dugo. 521 00:24:15,170 --> 00:24:17,740 Ali primijetite da sve sam učinio je slika otvorena zagrada, 522 00:24:17,740 --> 00:24:20,270 Izvor s atributom toga. 523 00:24:20,270 --> 00:24:21,530 I to je stvarno dugo URL. 524 00:24:21,530 --> 00:24:23,720 I na samom kraju, primijetiti. 525 00:24:23,720 --> 00:24:29,530 Zašto sam učinio udarac nagnuti nosač umjesto da, kao i svaki drugi tag, 526 00:24:29,530 --> 00:24:33,590 ima otvorenu nosač, IMG, zatvorena zagrada? 527 00:24:33,590 --> 00:24:37,040 Dovoljno je uzeti pogodak čak i ako nemaju prisnost god 528 00:24:37,040 --> 00:24:40,410 s HTML prije. 529 00:24:40,410 --> 00:24:42,710 >> Dakle, to je kako se zatvara naredba, ali zašto 530 00:24:42,710 --> 00:24:45,850 to stvarno ne bi intuitivno Osjećaj da nešto malo više 531 00:24:45,850 --> 00:24:48,820 preopširan kao bliske slike? 532 00:24:48,820 --> 00:24:51,400 Da. 533 00:24:51,400 --> 00:24:52,000 Da. 534 00:24:52,000 --> 00:24:55,620 Samo semantički, nema osjećaj počevši sliku i završio sliku, 535 00:24:55,620 --> 00:24:56,870 to je bilo tamo ili nije. 536 00:24:56,870 --> 00:25:00,960 Tako da nema smisla ostaviti prazninu za bilo što drugo unutar slike. 537 00:25:00,960 --> 00:25:02,010 Vi jednostavno ne možete učiniti. 538 00:25:02,010 --> 00:25:03,720 I tako sintaksa će općenito biti samo 539 00:25:03,720 --> 00:25:07,910 učiniti kosu crtu unutar otvorenog oznaku ili oznaku start 540 00:25:07,910 --> 00:25:09,020 a zatim pritisnite Spremi. 541 00:25:09,020 --> 00:25:13,350 >> Dakle, ako ja sada ponovo učitajte datoteku, sada Imam dobru stranicu za kuhanje web ovdje. 542 00:25:13,350 --> 00:25:15,100 I mi bi sigurno stvarno smetati ljudima 543 00:25:15,100 --> 00:25:17,010 ugradnjom umjesto poput YouTube link. 544 00:25:17,010 --> 00:25:19,350 A u stvari, bilo koje vrijeme ste ikada otišao na YouTube, 545 00:25:19,350 --> 00:25:22,190 i neka me zapravo slučajno Rick osobno uvaljati ovdje. 546 00:25:22,190 --> 00:25:25,770 Dakle, Rick roll. 547 00:25:25,770 --> 00:25:29,592 Dakle, Rick roll-- ću ići tamo. 548 00:25:29,592 --> 00:25:31,900 >> [Glazbom] 549 00:25:31,900 --> 00:25:33,730 >> OK, jedna osoba svidjelo. 550 00:25:33,730 --> 00:25:37,270 Dakle, primijetite sve ovo vrijeme, ako vas kliknite Share vezu, te naravno 551 00:25:37,270 --> 00:25:41,390 dobiti URL koji možete zapravo ugraditi u e-mail ili forenzičke sliku 552 00:25:41,390 --> 00:25:43,730 ili problem postaviti ili u slide. 553 00:25:43,730 --> 00:25:49,055 A sada, ako sam umjesto kliknite na ugraditi, primijetiti da je sve ovo vrijeme, ove stvari 554 00:25:49,055 --> 00:25:49,680 je bio tamo. 555 00:25:49,680 --> 00:25:50,910 Ja ću ići naprijed i kopirajte ovo. 556 00:25:50,910 --> 00:25:54,000 >> I samo tako da ga mogu bolje vidjeti, ja sam će ga zalijepiti u svoj tekst editor. 557 00:25:54,000 --> 00:25:55,860 Obavijest da je to ono što YouTube je vam govorim. 558 00:25:55,860 --> 00:25:57,693 Svaki put kada posjetite YouTube video, ako vas 559 00:25:57,693 --> 00:26:00,410 želite položiti video na vaše web stranica, jednostavno iskoristite ovo. 560 00:26:00,410 --> 00:26:03,350 Dakle, ovo je još jedan HTML tag zove iframe. 561 00:26:03,350 --> 00:26:04,590 Ili u liniji okvira. 562 00:26:04,590 --> 00:26:08,680 Dakle, i ona izgleda malo više Kompleks od svih ostalih. 563 00:26:08,680 --> 00:26:11,950 Tako ispada da je slika oznaku i očito iframe tag 564 00:26:11,950 --> 00:26:13,370 uzeti ono što se naziva atributa. 565 00:26:13,370 --> 00:26:15,710 >> I to je još jedan komad sintakse u HTML. 566 00:26:15,710 --> 00:26:19,240 Osim oznaka je Ime, otvorena zagrada oznaka ime, 567 00:26:19,240 --> 00:26:23,780 možete kontrolirati ponašanje oznake tako da cijela hrpa atribut 568 00:26:23,780 --> 00:26:24,860 jednaka vrijednost. 569 00:26:24,860 --> 00:26:26,290 Osobina jednaka vrijednosti. 570 00:26:26,290 --> 00:26:28,100 I tako, na primjer, YouTube nam govori 571 00:26:28,100 --> 00:26:31,990 Ako želite širinu ovom videu biti 420 piksela i visina 572 00:26:31,990 --> 00:26:35,470 biti 315 piksela, to je kako ga izraziti u HTML. 573 00:26:35,470 --> 00:26:38,480 >> Izvor videa ide se da dugo YouTube URL 574 00:26:38,480 --> 00:26:40,830 a zatim neke druge stvari kao okvir granica je nula, 575 00:26:40,830 --> 00:26:43,500 tako da vjerojatno znači da postoji bez obruba oko stvari. 576 00:26:43,500 --> 00:26:45,450 Dopustite puni zaslon vjerojatno znači da je korisnik 577 00:26:45,450 --> 00:26:47,840 Možete kliknuti na gumb i zapravo full screen video. 578 00:26:47,840 --> 00:26:52,870 Dakle, ako ja stvarno želim biti impresivno ovdje Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 umjesto da koristite oznaku slike, neka mi izbrisali, umjesto da zalijepite ovaj. 580 00:26:58,490 --> 00:27:00,810 A sada ponovno učitavanje. 581 00:27:00,810 --> 00:27:02,500 A sada idemo opet. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 U redu, to je dovoljno. 584 00:27:06,020 --> 00:27:08,970 U redu, tako pokušat ću Teško da više neće raditi. 585 00:27:08,970 --> 00:27:11,400 Pa što su neki od takeaways ovdje? 586 00:27:11,400 --> 00:27:15,130 Dakle HTML, ružna kao ovih web stranica su, je zapravo prilično jednostavna. 587 00:27:15,130 --> 00:27:16,467 To nije programski jezik. 588 00:27:16,467 --> 00:27:17,550 To nema funkciju. 589 00:27:17,550 --> 00:27:18,410 To nema petlje. 590 00:27:18,410 --> 00:27:19,535 To nema uvjete. 591 00:27:19,535 --> 00:27:22,900 Sve što ima je više desetaka različite oznake, od kojih svaki 592 00:27:22,900 --> 00:27:24,620 ima nula ili više atributa. 593 00:27:24,620 --> 00:27:27,320 A u stvari, ono što je zabavno oko HTML kao što počnete roniti u 594 00:27:27,320 --> 00:27:29,560 je da je vrlo self teachable. 595 00:27:29,560 --> 00:27:32,880 >> Sve što je potrebno je razumijevanje Općeg okvirnog HTML. 596 00:27:32,880 --> 00:27:36,510 Što je oznaka, što je atribut, kako ti zapravo konfigurirati web stranicu 597 00:27:36,510 --> 00:27:37,250 kako slijedi. 598 00:27:37,250 --> 00:27:40,720 A sve ostalo je stvarno rezultat gleda se u online referencu 599 00:27:40,720 --> 00:27:43,080 ili googling kako to učiniti neke tehnika ili kao što smo vidjeli, 600 00:27:43,080 --> 00:27:45,371 gledajući Facebooka izvora broj, gleda na web stranici 601 00:27:45,371 --> 00:27:48,710 koja vam se sviđa kod njega je izvorni kod i razumijevanje kako programeri tamo 602 00:27:48,710 --> 00:27:50,550 zapravo postavio stvari. 603 00:27:50,550 --> 00:27:52,180 >> Dakle, što možemo učiniti slike kao dobro. 604 00:27:52,180 --> 00:27:53,994 A u stvari, uspjeli smo maloprije. 605 00:27:53,994 --> 00:27:55,410 Dopustite mi ići naprijed i samo vam pokazati. 606 00:27:55,410 --> 00:27:56,770 Evo nekih primjera koda. 607 00:27:56,770 --> 00:27:58,380 Ako ste ikada željeli vidjeti prgav mačku. 608 00:27:58,380 --> 00:28:00,620 Dakle, primijetite da ja mogu imati oznaku slike ovdje. 609 00:28:00,620 --> 00:28:02,090 I ja sam dobio komentar iznad njega. 610 00:28:02,090 --> 00:28:04,490 Imam alternativu Tekst za pristupačnost. 611 00:28:04,490 --> 00:28:07,250 Dakle, netko tko je pomoću zaslona Čitatelj iz razloga vidiku 612 00:28:07,250 --> 00:28:10,172 može zapravo tada imati svoje čitač zaslona kažu prgav mačku. 613 00:28:10,172 --> 00:28:11,880 Jer ako ne mogu vidi sliku, oni 614 00:28:11,880 --> 00:28:14,504 mogu barem imati svoje računalo recite im verbalno što je to. 615 00:28:14,504 --> 00:28:18,020 A izvor tog spisa je cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Pa zapravo, ako sam stvarno htjela dobiti pametan, što bi moglo imati done-- 617 00:28:22,472 --> 00:28:25,680 Obećavam da ne ide u Rick Astley, tako Idem na google za mačka umjesto. 618 00:28:25,680 --> 00:28:28,290 Kad odem na Google Images ovdje, a mi ćemo pretpostaviti 619 00:28:28,290 --> 00:28:30,040 da je to slika moje mačke. 620 00:28:30,040 --> 00:28:35,070 >> Pretpostavimo da imam kontrola kliknuo ili desno kliknuli na to, slučajno 621 00:28:35,070 --> 00:28:35,630 jezivo. 622 00:28:35,630 --> 00:28:40,320 I cat.jpeg idem spremiti na moj radna površina. 623 00:28:40,320 --> 00:28:44,700 Dopustite mi sada vratiti na oblaku 9. 624 00:28:44,700 --> 00:28:48,150 Uočite da ovdje mogu ići prenositi datoteke. 625 00:28:48,150 --> 00:28:51,530 A ako zgrabite to datoteka, cat.jpeg, obavijest 626 00:28:51,530 --> 00:28:54,674 da ja to mogu povući i ispustite ga u oblak 9 627 00:28:54,674 --> 00:28:56,090 i to će vikati na mene ovdje. 628 00:28:56,090 --> 00:28:59,000 >> Jer smo već vam dati cat.jpeg datoteku, 629 00:28:59,000 --> 00:29:01,430 ali to je super jednostavno zgrabite fotografiju koju ste 630 00:29:01,430 --> 00:29:03,220 preuzet iz Facebook ili Flickr ili slično 631 00:29:03,220 --> 00:29:05,678 i zapravo povucite i ispustite ga u oblaku 9. i onda bi ga 632 00:29:05,678 --> 00:29:07,970 dio vašeg osobnog web stranice ili problema 633 00:29:07,970 --> 00:29:10,442 postaviti sedam ili osam, kao što ćete vidjeti uskoro. 634 00:29:10,442 --> 00:29:12,150 A onda kad vas konačno posjetiti tu mačku, 635 00:29:12,150 --> 00:29:16,610 uz pretpostavku sam skinuti tu istu mačku, Obavijest that-- da je sladak. 636 00:29:16,610 --> 00:29:19,160 >> Ono što će vidjeti je nešto poput ovog lice ovdje. 637 00:29:19,160 --> 00:29:21,810 Dakle, datoteke koje ste Referentna unutar web stranice 638 00:29:21,810 --> 00:29:26,050 može biti ili lokalno u svoj vlastiti računa ili daljinski na nekom drugom poslužitelju 639 00:29:26,050 --> 00:29:29,670 kao u slučaju Rick Astley slika malo prije. 640 00:29:29,670 --> 00:29:32,990 Pa gdje else-- što još možemo učiniti ovdje? 641 00:29:32,990 --> 00:29:34,890 Tako ćemo pogledati u nastavku. 642 00:29:34,890 --> 00:29:36,160 Znate li što je vrsta cool? 643 00:29:36,160 --> 00:29:39,330 >> Mi smo do sada bili izradu vrlo statične web stranice. 644 00:29:39,330 --> 00:29:41,830 Želim začiniti stvari kao što slijedi. 645 00:29:41,830 --> 00:29:44,344 Želim napraviti vlastitu tražilicu. 646 00:29:44,344 --> 00:29:47,010 Dakle, da bi tražilicu, neka je ići naprijed i početi raditi ovo. 647 00:29:47,010 --> 00:29:52,570 Ja ću ići naprijed i stvoriti novi file search.html. 648 00:29:52,570 --> 00:29:54,890 I mi smo prefabed verzije online. 649 00:29:54,890 --> 00:29:56,027 Ups. 650 00:29:56,027 --> 00:29:57,610 Ne zalijepiti u svoj prozor terminala. 651 00:29:57,610 --> 00:29:58,744 Prefab verzije online. 652 00:29:58,744 --> 00:30:00,160 A ja ću početi na sljedeći način. 653 00:30:00,160 --> 00:30:04,490 Dakle ovdje je početak datoteka zove search.html. 654 00:30:04,490 --> 00:30:07,510 Idem ga spremiti u danas izvor imenik. 655 00:30:07,510 --> 00:30:09,079 Idem nazvati ovu pretragu. 656 00:30:09,079 --> 00:30:10,370 Zapravo, mi ćemo učiniti bolje. 657 00:30:10,370 --> 00:30:13,600 CS50 Traži i zapravo brand. 658 00:30:13,600 --> 00:30:17,500 I sada, ja ću reći nešto poput H1 CS50 pretraživanje. 659 00:30:17,500 --> 00:30:20,930 I onda ovdje, H2 uskoro. 660 00:30:20,930 --> 00:30:23,230 I samo da recap, H1 i H2 znači ono respektivno? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Da, tako velik i hrabar, i nije velika, ali još uvijek podebljano. 663 00:30:30,320 --> 00:30:37,375 Dakle, ako sam spasiti ovaj i ide ovamo, neka je vidjeti datoteke search.html. 664 00:30:37,375 --> 00:30:42,560 U redu, i to je jedan je redu-[nečujan]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Pričekaj. 667 00:30:49,110 --> 00:30:49,945 David je zbunjeno. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, to je upravo tamo. 670 00:30:54,080 --> 00:30:54,860 David je idiot. 671 00:30:54,860 --> 00:30:55,420 U REDU. 672 00:30:55,420 --> 00:30:56,660 Tako je. 673 00:30:56,660 --> 00:30:58,350 Dakle CS50 potražite uskoro. 674 00:30:58,350 --> 00:31:00,370 Tako sada, neka je sintetizirati ono što smo učinili prošli tjedan. 675 00:31:00,370 --> 00:31:03,400 >> Gdje smo razgovarali o mehanika niža razina HTTP. 676 00:31:03,400 --> 00:31:05,780 I ove nove ideje HTML, što je samo 677 00:31:05,780 --> 00:31:08,890 ovo označni jezik na kojem vas reci preglednik točno što učiniti 678 00:31:08,890 --> 00:31:10,740 i provoditi vlastite tražilice. 679 00:31:10,740 --> 00:31:12,520 Dakle, umjesto da samo govoreći uskoro, ja sam 680 00:31:12,520 --> 00:31:14,810 će uvesti nešto što se zove obrazac oznaku. 681 00:31:14,810 --> 00:31:19,610 I u ovom obliku, idem imaju nešto poput polja za unos. 682 00:31:19,610 --> 00:31:22,450 >> A ime ovog unosa polje, ja ću ga zvati P 683 00:31:22,450 --> 00:31:26,240 A tip ovog polja za unos Ja ću reći samo "tekst". 684 00:31:26,240 --> 00:31:29,130 I riječi, kao što ćemo vidi, je samo tekstualni okvir. 685 00:31:29,130 --> 00:31:32,830 I tako se ne osjećam ovdje imati sve unutar njega u ovom trenutku. 686 00:31:32,830 --> 00:31:35,320 I tako sam jednostavno ide zatvoriti oznaku s tim 687 00:31:35,320 --> 00:31:38,099 naprijed udarac ravno u samoj oznaci. 688 00:31:38,099 --> 00:31:39,890 A onda ću ima jedan drugi ulaz. 689 00:31:39,890 --> 00:31:43,480 Vrsta Ulaz jednako podnijeti. 690 00:31:43,480 --> 00:31:45,320 A onda ću zatvorite ovaj jedan previše. 691 00:31:45,320 --> 00:31:46,840 >> I sada ću se vratiti ovdje. 692 00:31:46,840 --> 00:31:49,520 I već smo vidjeli, iako prilično ružna, imam 693 00:31:49,520 --> 00:31:52,460 dobio početke Moja potraga stranica ovdje. 694 00:31:52,460 --> 00:31:55,150 U stvari, neka mi pokušati očistiti ovo gore malo. 695 00:31:55,150 --> 00:31:57,330 Ispada da na ulazna ovdje, ja mogu imati 696 00:31:57,330 --> 00:31:59,910 drugi atribut zove rezervirano. 697 00:31:59,910 --> 00:32:05,165 I ja mogu vidjeti nešto poput riječi, točnije, za upit q. 698 00:32:05,165 --> 00:32:07,820 >> I primijetite, sada imam Ova vrsta sivog teksta 699 00:32:07,820 --> 00:32:10,440 koji nestaje kao Čim sam početi tipkati, 700 00:32:10,440 --> 00:32:12,930 ali to je vjerojatno nešto ste vidjeli u drugim web stranicama. 701 00:32:12,930 --> 00:32:14,650 Ja stvarno ne sviđa gumb Pošalji. 702 00:32:14,650 --> 00:32:18,320 Pa ja zapravo će dati Pošaljite gumb vrijednost pretraživanja. 703 00:32:18,320 --> 00:32:21,680 A sada, ako sam reload, primijetiti da moja gumb postaje zove pretraživanja. 704 00:32:21,680 --> 00:32:24,140 Znate, ja stvarno ne poput logotipa ovdje. 705 00:32:24,140 --> 00:32:27,140 Dakle, Google Font generatora. 706 00:32:27,140 --> 00:32:28,820 >> Želim začiniti ovaj gore dalje. 707 00:32:28,820 --> 00:32:30,660 Tako CS50 pretraživanja. 708 00:32:30,660 --> 00:32:31,870 Dopustite mi da stvorite svoj logotip. 709 00:32:31,870 --> 00:32:33,080 To izgleda lijepo. 710 00:32:33,080 --> 00:32:36,945 Pa sad neka mi spasiti ovu as-- hajde. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Gdje se događa? 713 00:32:43,120 --> 00:32:43,620 Tu. 714 00:32:43,620 --> 00:32:44,160 U REDU. 715 00:32:44,160 --> 00:32:44,980 Propustili. 716 00:32:44,980 --> 00:32:47,740 Spremi kao. 717 00:32:47,740 --> 00:32:49,470 Glupi preglednici. 718 00:32:49,470 --> 00:32:51,700 Stand by, idemo popraviti ovo jednom i za sve. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Idemo tamo. 721 00:32:58,590 --> 00:32:59,090 U redu. 722 00:32:59,090 --> 00:32:59,600 Oprostite. 723 00:32:59,600 --> 00:33:00,750 Slobodan dan. 724 00:33:00,750 --> 00:33:02,310 Sada je to funky. 725 00:33:02,310 --> 00:33:03,160 Izađite na cijelom zaslonu. 726 00:33:03,160 --> 00:33:04,150 U redu. 727 00:33:04,150 --> 00:33:06,870 >> Sada, kao što je normalno Osoba spremite sliku kao. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Sada ću ići u CS50IDE i Idem jednostavno zgrabite logotip, 730 00:33:13,194 --> 00:33:15,360 Idem ga povucite u moj izvor sedam katalog, 731 00:33:15,360 --> 00:33:17,002 datoteka već postoji, ja sam u redu s tim. 732 00:33:17,002 --> 00:33:19,210 Tako ću ga nadjačati jer već sam ga imao. 733 00:33:19,210 --> 00:33:20,630 A sada kako mogu dobiti osloboditi od ovoga? 734 00:33:20,630 --> 00:33:24,670 >> Idemo naprijed i ovdje napraviti izvor slike jednaka logo.gif. 735 00:33:24,670 --> 00:33:25,490 Zatvorite ovo. 736 00:33:25,490 --> 00:33:26,050 Spremi. 737 00:33:26,050 --> 00:33:30,560 A sada, ako sam se vratiti na moju pretraživanje stranica, sada je izgleda prilično dobro. 738 00:33:30,560 --> 00:33:33,610 U redu, tako da nema dosta učinio ništa korisno. 739 00:33:33,610 --> 00:33:37,000 U stvari, neka mi probati u potrazi za mačka i vidjeti što se događa. 740 00:33:37,000 --> 00:33:38,890 Mačke. 741 00:33:38,890 --> 00:33:39,420 Prokletstvo. 742 00:33:39,420 --> 00:33:41,400 To ne samo raditi, očito. 743 00:33:41,400 --> 00:33:43,760 Dakle, što je ključni dio koji je ovdje nedostaje? 744 00:33:43,760 --> 00:33:49,100 >> Točno, čak i ako ne znate bilo koji HTML, Počeo sam označavanje obrazac telefona 745 00:33:49,100 --> 00:33:54,130 i ja sam to rekao kako bi dobili ulaza, dajte mi tekstualni okvir i gumb submit, 746 00:33:54,130 --> 00:33:55,730 ono komad očito nedostaje? 747 00:33:55,730 --> 00:33:58,975 Pretpostavimo da želimo zapravo dobiti ova stvar radi ispravno. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Što trebamo učiniti? 750 00:34:05,360 --> 00:34:08,860 Imamo potrebu za provedbu stražnji kraj baze podataka ili traženje sama motora, 751 00:34:08,860 --> 00:34:11,210 i da će potrajati puno vremena, iskreno. 752 00:34:11,210 --> 00:34:13,380 >> Pa sjetite se što smo učinili prošli put. 753 00:34:13,380 --> 00:34:18,230 Dakle, ako tražite nešto na Googleu a vi ste unaprijed isključen, 754 00:34:18,230 --> 00:34:20,355 Podsjetimo, instant pretraživanja. 755 00:34:20,355 --> 00:34:22,230 Dakle, dopustite mi da se uključite isključivanje tako da se ovo zapravo 756 00:34:22,230 --> 00:34:26,650 ponaša kao starije školske pregledniku, ako sam sada tražiti nešto poput mačke, 757 00:34:26,650 --> 00:34:28,190 sjetiti što je URL izgleda. 758 00:34:28,190 --> 00:34:29,449 To je prilično zagonetan. 759 00:34:29,449 --> 00:34:33,000 No, ugrađen u tu, Podsjetimo, Slash je traži. 760 00:34:33,000 --> 00:34:35,100 Upitnik q jednak mačke. 761 00:34:35,100 --> 00:34:37,760 >> A to bi, čini mi dati cijela hrpa rezultata pretraživanja. 762 00:34:37,760 --> 00:34:39,134 Dakle, znate što ću učiniti? 763 00:34:39,134 --> 00:34:41,650 Idem posuditi Google za samo minutu. 764 00:34:41,650 --> 00:34:43,670 Ja ću ići preko i ovdje ću reći 765 00:34:43,670 --> 00:34:47,850 kako to čini radnju ili odredište, da se tako izrazim, 766 00:34:47,850 --> 00:34:49,330 Doslovno bi trebao biti Google. 767 00:34:49,330 --> 00:34:52,590 A metoda sam htjela za korištenje će biti dobiti. 768 00:34:52,590 --> 00:34:53,560 >> Dakle, ono što je akcija? 769 00:34:53,560 --> 00:34:55,760 Akcija neobično je imenovan, ali to samo znači 770 00:34:55,760 --> 00:34:58,120 tko će nositi djelovanje tog oblika? 771 00:34:58,120 --> 00:35:00,820 Kad sam kliknite na Search, gdje trebala rezultat ići? 772 00:35:00,820 --> 00:35:05,300 I ako ja sad vratiti na moj obliku ovdje i ponovno moju web stranicu 773 00:35:05,300 --> 00:35:09,000 a sada traži nešto poput psa, primijetit sada 774 00:35:09,000 --> 00:35:10,850 Ja sam ponovno provodi Google. 775 00:35:10,850 --> 00:35:11,350 Pravo? 776 00:35:11,350 --> 00:35:14,141 >> Ako želim tražiti nešto drugo, to radi za ne samo pse, 777 00:35:14,141 --> 00:35:16,400 ona također radi za mačke. 778 00:35:16,400 --> 00:35:21,930 Ona također radi za CS50. 779 00:35:21,930 --> 00:35:24,310 I ok, to je samo pod whelming, zar ne? 780 00:35:24,310 --> 00:35:25,920 U redu, ali to zapravo radi. 781 00:35:25,920 --> 00:35:27,360 Dakle, što se zapravo događa? 782 00:35:27,360 --> 00:35:31,340 Zato sam učio preglednik, pomoću HTML, da se ulaz od korisnika 783 00:35:31,340 --> 00:35:35,810 i zapravo poslati taj ulaz na udaljeni poslužitelj koristeći HTTP. 784 00:35:35,810 --> 00:35:39,120 >> I zato moj pregledniku razumije HTTP, to je zapravo 785 00:35:39,120 --> 00:35:43,500 izgraditi URL tako da ono Ja završiti više u svom pregledniku, 786 00:35:43,500 --> 00:35:45,660 primijetiti što se događa kad sam tražio psa. 787 00:35:45,660 --> 00:35:49,270 Ako sam kliknite Search, primijetiti da URL mijenja kao što sam namjeravao 788 00:35:49,270 --> 00:35:52,770 da google.com/search~~V upita jednak psa. 789 00:35:52,770 --> 00:35:56,020 A to je zato što obliku zna, jer metoda je dobiti, 790 00:35:56,020 --> 00:35:59,560 jednostavno ga dodati na taj URL tamo. 791 00:35:59,560 --> 00:36:01,730 >> Sada, ove web stranice su još uvijek ružna. 792 00:36:01,730 --> 00:36:04,890 Tako ćemo predstaviti još jedan komad sintakse, ako možemo i danas. 793 00:36:04,890 --> 00:36:07,640 A to je nešto poznato kao Cascading Style Sheets. 794 00:36:07,640 --> 00:36:10,720 Zato mi dopustite da pogledamo ovaj primjer ovdje i vidjeti 795 00:36:10,720 --> 00:36:12,380 ako mi može zaključiti što se događa. 796 00:36:12,380 --> 00:36:14,520 To je CSS0.html. 797 00:36:14,520 --> 00:36:16,532 I ovo je mjesto gdje stvari dobiti malo ružno. 798 00:36:16,532 --> 00:36:18,490 Jer, nažalost, u svijetu web, 799 00:36:18,490 --> 00:36:20,920 HTML sama ne može učiniti sve. 800 00:36:20,920 --> 00:36:22,920 I tako, ako želite stilizovati svoju web stranicu, 801 00:36:22,920 --> 00:36:28,370 što je zapravo potrebno da se usredotočite na estetika u drugačiji način. 802 00:36:28,370 --> 00:36:33,090 Dakle ovdje, imam tijelo moje web stranica unutar kojih je veliki div. 803 00:36:33,090 --> 00:36:34,700 I div samo znači podjelu. 804 00:36:34,700 --> 00:36:38,060 Dakle, to je kao stavka, ali to nema iste semantiku 805 00:36:38,060 --> 00:36:39,180 od stava teksta. 806 00:36:39,180 --> 00:36:40,940 >> To samo znači do preglednik, ovdje dolazi 807 00:36:40,940 --> 00:36:45,210 veliki pravokutni područje mog weba stranica, želim ga nositi posebno. 808 00:36:45,210 --> 00:36:47,420 Sada, linija 21 gdje je taj div počinje. 809 00:36:47,420 --> 00:36:48,770 I samo uzeti pogodak. 810 00:36:48,770 --> 00:36:53,080 Koji je učinak linije 21 na Ostatak sadržaja stranice? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 To centriranje. 813 00:36:56,311 --> 00:36:56,810 To je sve. 814 00:36:56,810 --> 00:36:58,830 Dakle, nismo vidjeli način zapravo centriranje teksta. 815 00:36:58,830 --> 00:37:00,996 >> U stvari, moj pretraživač, za razliku od stvarnog Google, 816 00:37:00,996 --> 00:37:03,040 Sve je opravdano preko lijeve strane. 817 00:37:03,040 --> 00:37:07,430 I tako je sada u redu 21, govorim, hej preglednik, stvoriti podjelu stranice. 818 00:37:07,430 --> 00:37:09,450 Daj mi veliki, nevidljivi pravokutnik. 819 00:37:09,450 --> 00:37:11,490 Tako želim mislite o web stranici. 820 00:37:11,490 --> 00:37:13,870 A onda ga stilizovati kako slijedi. 821 00:37:13,870 --> 00:37:16,900 Unutar tih citati, Sada je drugi jezik 822 00:37:16,900 --> 00:37:19,969 da smo uveli i danas nazivaju CSS. 823 00:37:19,969 --> 00:37:22,010 Srećom, to također nije programski jezik, 824 00:37:22,010 --> 00:37:26,470 tako da je vrlo je ograničena u svojoj sintaksi, ali Također je vrlo ograničen u svojoj funkcionalnosti 825 00:37:26,470 --> 00:37:30,670 dok HTML je sve o označavanje podatke na web-stranicu 826 00:37:30,670 --> 00:37:32,130 i struktura web stranice. 827 00:37:32,130 --> 00:37:35,320 CSS je općenito otprilike Posljednji milja, estetika, 828 00:37:35,320 --> 00:37:40,160 uzimajući veličinu i boju i Položaj upravo pravo na web stranici. 829 00:37:40,160 --> 00:37:43,000 I doista, ona je formirana s ključnim parova vrijednosti. 830 00:37:43,000 --> 00:37:46,290 >> Nekretnina kao što je ovaj, tekst uskladiti, nakon čega slijedi dvotočka, 831 00:37:46,290 --> 00:37:49,720 zatim vrijednosti koje imovine, što u ovom slučaju je središte. 832 00:37:49,720 --> 00:37:51,910 A sada vas primijetiti Možete gnijezdo te stvari. 833 00:37:51,910 --> 00:37:56,780 Da sam htio sve što je u to Ja sam istaknuo da se u središtu, 834 00:37:56,780 --> 00:38:00,270 to je razlog zašto sam liniju 21 i odgovarajući redak 31. 835 00:38:00,270 --> 00:38:04,820 Ali pretpostavimo sada žele reći Ivanu Harvard, dobrodošli na moju početnu stranicu. 836 00:38:04,820 --> 00:38:06,530 >> Copyright simbol John Harvard. 837 00:38:06,530 --> 00:38:09,180 I pretpostavimo Želim prvi te linije biti prilično velika. 838 00:38:09,180 --> 00:38:10,450 36 piksela. 839 00:38:10,450 --> 00:38:11,530 Dakle, to je pristojne veličine. 840 00:38:11,530 --> 00:38:13,240 I ja sam htjela svoju težinu biti hrabar. 841 00:38:13,240 --> 00:38:15,450 Ali onda ispod toga, Želim manji tekst. 842 00:38:15,450 --> 00:38:19,980 A ispod toga, želim još manji tekst. 843 00:38:19,980 --> 00:38:20,480 Oprostite. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Danas se osjeća kao prljavo dana. 846 00:38:26,940 --> 00:38:29,840 >> Pa sad, što ja radim izraziti ovo? 847 00:38:29,840 --> 00:38:34,580 Ovdje na liniji 22 je ugrađen div ili ugniježđena div, ako hoćete. 848 00:38:34,580 --> 00:38:36,190 Ona također ima svoj vlastiti stil oznake. 849 00:38:36,190 --> 00:38:38,160 Ja odrediti veličinu fonta 36. 850 00:38:38,160 --> 00:38:40,460 Ja odrediti težinu fonta podebljano. 851 00:38:40,460 --> 00:38:43,360 Ovdje dolje, samo sam odrediti 24 piksela. 852 00:38:43,360 --> 00:38:45,960 I na kraju, u redu 28, sam odrediti 12. 853 00:38:45,960 --> 00:38:49,070 Tako je samo kao brzi check razum i kao ljudsko ovo čitate, 854 00:38:49,070 --> 00:38:52,545 riječi koje na zaslonu se zapravo će biti hrabar? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Koje linije su zapravo hrabar? 857 00:38:58,760 --> 00:38:59,570 >> Samo John Harvard. 858 00:38:59,570 --> 00:39:00,070 Pravo? 859 00:39:00,070 --> 00:39:05,940 Jer baš kao što linija 22 kaže hej preglednik, ovdje je podjela na stranici. 860 00:39:05,940 --> 00:39:07,920 Učinite to veličina fonta 36 bod. 861 00:39:07,920 --> 00:39:09,460 Provjerite je težina fonta podebljano. 862 00:39:09,460 --> 00:39:11,920 Čim dođete do odgovarajući završna oznaka 863 00:39:11,920 --> 00:39:15,340 ili zatvorena oznake na liniji 24, to znači, hej preglednik, 864 00:39:15,340 --> 00:39:17,640 prestati raditi što god to je što radite. 865 00:39:17,640 --> 00:39:21,020 I obavijest da bude jasno, iako linija 22 ima sve ove atribute 866 00:39:21,020 --> 00:39:24,430 kao stil, kad vas zatvoriti oznaku u skladu 24, 867 00:39:24,430 --> 00:39:25,940 samo spomenuti ime TAG-a. 868 00:39:25,940 --> 00:39:29,990 >> Ne ponavljati riječ ili stil sve što je unutar tih citati. 869 00:39:29,990 --> 00:39:32,860 I tako, ako gledam ovo sada u svom pregledniku, uzmimo 870 00:39:32,860 --> 00:39:38,060 Pogled na krajnji rezultat. Pusti me naprijed na ovu sliku, što je CSS 0. 871 00:39:38,060 --> 00:39:41,814 I to je još uvijek prilično običan, ali uzimajući prilično zanimljiv. 872 00:39:41,814 --> 00:39:43,980 Ali ispada da postoji druge stvari mogu učiniti ovdje, 873 00:39:43,980 --> 00:39:46,490 i na rizik izrade to posve odvratan, 874 00:39:46,490 --> 00:39:48,630 primijetiti da se ovdje u mom Tijelo moje web stranice, 875 00:39:48,630 --> 00:39:53,930 Ja mogu učiniti nešto smiješno kao što su BG i boja pozadine. 876 00:39:53,930 --> 00:39:56,670 >> I brzo, što je tvoja najdraža boja? 877 00:39:56,670 --> 00:39:57,720 Zelena Čuo sam. 878 00:39:57,720 --> 00:39:58,750 U redu. 879 00:39:58,750 --> 00:40:02,920 Pa sad, ako sam pogodio reload sada, imamo zelenu web stranicu. 880 00:40:02,920 --> 00:40:04,710 U redu, tako da nije loše. 881 00:40:04,710 --> 00:40:08,350 A sada, ako želim da ovo stvarno super, ja mogu napraviti boju mog teksta 882 00:40:08,350 --> 00:40:09,360 čak crveno. 883 00:40:09,360 --> 00:40:10,870 Tako ćemo vidjeti kako to izgleda. 884 00:40:10,870 --> 00:40:12,230 Sada je izgleda prilično dobro. 885 00:40:12,230 --> 00:40:15,460 I ovdje, ako stvarno želim nered s nekim 886 00:40:15,460 --> 00:40:17,487 ili ako želite biti jedan od onih ljudi koji 887 00:40:17,487 --> 00:40:20,570 pokušava vam trik u posjeti web stranica jer ste izigrali Google 888 00:40:20,570 --> 00:40:27,610 u razmišljanju postoji cijela hrpa od ključnih riječi volimo-članovima da vidimo, ponovno učitati. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Gdje je otišao? 891 00:40:30,680 --> 00:40:31,530 I tu nas. 892 00:40:31,530 --> 00:40:32,030 U redu. 893 00:40:32,030 --> 00:40:34,905 Pa kažem to kao na stranu, mi ćemo razgovarati o ovoj stvari u nekoliko tjedana 894 00:40:34,905 --> 00:40:36,740 kada govorimo o sigurnost, ako stvarno 895 00:40:36,740 --> 00:40:38,852 položiti cijeli grozdova ključne riječi u web-stranice, 896 00:40:38,852 --> 00:40:41,810 čak i ako oni nisu vidljivi do čovjek, netko poput Googlea, naravno, 897 00:40:41,810 --> 00:40:43,250 može još zapravo pronaći ovo. 898 00:40:43,250 --> 00:40:45,820 U redu, tako da je prilično odvratan prilično brzo. 899 00:40:45,820 --> 00:40:48,420 >> A u stvari, to nije sve toliko za razliku od mog weba 900 00:40:48,420 --> 00:40:51,480 stranica kao dodiplomski, koji Počela sam googling oko pronaći 901 00:40:51,480 --> 00:40:53,690 prošlošću verzije mojih starih web stranice. 902 00:40:53,690 --> 00:40:54,500 Bilo je jako loše. 903 00:40:54,500 --> 00:40:56,650 Zapravo, sam pronaći jedan neposredno prije klasi. 904 00:40:56,650 --> 00:40:58,620 No, tu je još gore vani. 905 00:40:58,620 --> 00:41:01,534 To je očito bio moj početna stranica davne 1996. godine. 906 00:41:01,534 --> 00:41:04,200 Očito sam mislio da je prikladno pitati ljude svoje ime 907 00:41:04,200 --> 00:41:05,991 prije nego što su mogli zapravo vidjeti moju web stranicu. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> A onda sam ih pokazala nešto glupo, vjerojatno. 910 00:41:11,920 --> 00:41:13,450 Ja ću iskopati više za sljedeći put. 911 00:41:13,450 --> 00:41:16,220 No, za sada, neka je razmislite malo dizajna. 912 00:41:16,220 --> 00:41:17,444 Razgovarali smo o stilu. 913 00:41:17,444 --> 00:41:19,735 I ovu stranicu i do sada gotovo sve što sam napisao 914 00:41:19,735 --> 00:41:21,890 je prilično čisto stilski. 915 00:41:21,890 --> 00:41:23,320 Ali što je s dizajnom? 916 00:41:23,320 --> 00:41:25,990 Pa, postoji puno redundancije u ono što sam radio ovdje. 917 00:41:25,990 --> 00:41:28,156 >> Ja sam spomenuo riječ Boja u nekoliko mjesta. 918 00:41:28,156 --> 00:41:31,630 Ja sam spomenuo veličinu fonta u par mjesta i hrabar u nekoliko mjesta. 919 00:41:31,630 --> 00:41:34,870 I bitno, ja sam ko druženje dva jezika. 920 00:41:34,870 --> 00:41:38,100 Imam HTML sa svojim oznakama i moj atributa i onda odjednom, 921 00:41:38,100 --> 00:41:40,100 između navodnika, imam drugi jezik danas 922 00:41:40,100 --> 00:41:43,830 zove CSS, što opet, to je samo Ključni parova vrijednost ili ta svojstva 923 00:41:43,830 --> 00:41:45,280 odvojene dvotočke. 924 00:41:45,280 --> 00:41:47,700 >> Ispada da je mnogo kao u C gdje smo 925 00:41:47,700 --> 00:41:50,550 možete početi faktor iz neki kod u zaglavlje datoteke, 926 00:41:50,550 --> 00:41:53,520 tako da možemo učiniti isto u HTML-u. 927 00:41:53,520 --> 00:41:56,030 I korak prema koja je kao što slijedi. 928 00:41:56,030 --> 00:42:02,230 Obavijest da je ova verzija, CSS1.html je strukturno isti web stranicu. 929 00:42:02,230 --> 00:42:05,250 Dakle imam hrpu od elemente DIV, ali ovaj put, sam 930 00:42:05,250 --> 00:42:07,220 stečen osloboditi od omot div kao što ćete vidjeti. 931 00:42:07,220 --> 00:42:12,390 >> I ja sam dao one tri elemente DIV top, srednji i donji, jedinstveni ID. 932 00:42:12,390 --> 00:42:14,760 To je lijepo, jer po davanja te podjele 933 00:42:14,760 --> 00:42:18,715 stranice jedinstvenih identifikatora, Mogu ih referenca drugdje. 934 00:42:18,715 --> 00:42:19,215 Gdje? 935 00:42:19,215 --> 00:42:21,070 Pa, neka mi pomaknite se gore. 936 00:42:21,070 --> 00:42:24,070 I do sada, bilo kada smo gledao na čelu web stranice, što je 937 00:42:24,070 --> 00:42:28,560 jedina oznaka smo imali u glava web stranice? 938 00:42:28,560 --> 00:42:29,740 Malo glasnije. 939 00:42:29,740 --> 00:42:30,799 Samo naslov dosad. 940 00:42:30,799 --> 00:42:32,590 Ali ispada da postoji nekoliko drugih stvari 941 00:42:32,590 --> 00:42:35,840 možete staviti unutra, jedan od koji se zove stil oznaka. 942 00:42:35,840 --> 00:42:37,850 Dakle, prije nekoliko trenutaka, gledali smo na stil atribut. 943 00:42:37,850 --> 00:42:39,150 Ispalo je da postoji stil oznaka. 944 00:42:39,150 --> 00:42:41,200 Spada unutar glava web stranice. 945 00:42:41,200 --> 00:42:42,840 A sada primijetiti što radim. 946 00:42:42,840 --> 00:42:46,540 Imam unutar ove Stil tag slijedeće. 947 00:42:46,540 --> 00:42:51,190 Ja sam doslovno spomenuti na liniji 20 naziv za oznaku koja želim stilizovati. 948 00:42:51,190 --> 00:42:53,489 >> Onda sam otvoren kovrčavu braće i zatvorio kovrčavu braće. 949 00:42:53,489 --> 00:42:56,030 Tako slični u duhu do C, ali opet, to nije u funkciji, 950 00:42:56,030 --> 00:42:57,796 to je samo sintaktička detalj ovdje. 951 00:42:57,796 --> 00:43:00,170 I onda, naravno, govorim preglednik, hej preglednik, 952 00:43:00,170 --> 00:43:05,210 bi cijelo tijelo stranice ima tekst poravnanje centra. 953 00:43:05,210 --> 00:43:06,930 A onda je rekao sljedeće. 954 00:43:06,930 --> 00:43:12,600 Hej preglednik, ako vidite HTML element ili oznaka u stranicu koja 955 00:43:12,600 --> 00:43:17,040 ima jedinstveni identifikator vrhu, tako hash znak ovdje samo znači 956 00:43:17,040 --> 00:43:21,010 Jedinstvena ideja vrhu, samo naprijed i da njegova veličina fonta 36 957 00:43:21,010 --> 00:43:22,490 a njegova težina fonta podebljano. 958 00:43:22,490 --> 00:43:26,840 >> Hej preglednik, element čije ID je srednji, čine ga 24 piksela. 959 00:43:26,840 --> 00:43:31,070 I hej preglednik, ako vidite Ideja dna, čine ga 12 piksela. 960 00:43:31,070 --> 00:43:33,540 Učinak na kraju Upravo je Sam. 961 00:43:33,540 --> 00:43:36,500 Ako odem u CSS 1, stranica izgleda isto. 962 00:43:36,500 --> 00:43:39,810 No, mi smo korak prema malo bolji dizajn. 963 00:43:39,810 --> 00:43:44,850 Dopustite mi da se vrati ovdje da CSS2 i vidjeti što još sam učinio. 964 00:43:44,850 --> 00:43:48,030 >> Sada je stranica jako, jako čist. 965 00:43:48,030 --> 00:43:50,730 U stvari, ja mogu stati sve sadržaj na stranici ovdje. 966 00:43:50,730 --> 00:43:54,270 No, ono što sam nova oznaka uveden, očito? 967 00:43:54,270 --> 00:43:54,770 Veza. 968 00:43:54,770 --> 00:43:57,853 I to nije najbolji naziv za oznaku, jer to nije veza u smislu 969 00:43:57,853 --> 00:44:00,780 da mi to znamo, ali to znači link na neke druge datoteke. 970 00:44:00,780 --> 00:44:02,890 To je vrsta kao što su oštri su u C. 971 00:44:02,890 --> 00:44:06,280 >> To je način na HTML reći hej preglednik, 972 00:44:06,280 --> 00:44:10,240 idi na sadržaj file zove css2.css. 973 00:44:10,240 --> 00:44:12,880 Odnos, za mene, je da je stil list. 974 00:44:12,880 --> 00:44:17,980 I doista, to je ono što je jedan od S je u CSS sredstvima. 975 00:44:17,980 --> 00:44:20,350 To je stil list. 976 00:44:20,350 --> 00:44:23,120 To je samo tekstualnu datoteku koja sadrži cijela hrpa imovine. 977 00:44:23,120 --> 00:44:25,940 To je cijela hrpa stilova da želite prijaviti na stranicu. 978 00:44:25,940 --> 00:44:28,860 >> I tako to očito je se odnosi na drugu datoteku. 979 00:44:28,860 --> 00:44:32,970 I ako sam otvoriti tu, CSS2.css, primijetiti da je sve što sam učinio 980 00:44:32,970 --> 00:44:35,900 je kopirajte i zalijepite sve to u ovu datoteku. 981 00:44:35,900 --> 00:44:38,220 A sada, čak i ako ste nikada kodirano ove stvari prije, 982 00:44:38,220 --> 00:44:40,700 Samo razmislite s poslovični inženjering šešir 983 00:44:40,700 --> 00:44:44,220 o, zašto je to Bolje dizajn vjerojatno? 984 00:44:44,220 --> 00:44:48,910 Faktoring iz tih CSS svojstava, stavljajući ih u vlastitu datoteku. 985 00:44:48,910 --> 00:44:51,330 Iako smo riješiti ovaj Prije problem kao pet minuta 986 00:44:51,330 --> 00:44:52,600 u prvom verzijom. 987 00:44:52,600 --> 00:44:55,730 >> Nismo poboljšana Stranica stilski, 988 00:44:55,730 --> 00:44:57,520 ovo je samo bolje Dizajn u nekom smislu. 989 00:44:57,520 --> 00:44:58,990 Zašto misliš? 990 00:44:58,990 --> 00:45:01,510 Da. 991 00:45:01,510 --> 00:45:02,260 Fleksibilniji kako? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Da. 994 00:45:05,540 --> 00:45:07,373 Dakle, ako želite ići natrag i promijeniti stvari, 995 00:45:07,373 --> 00:45:09,540 Sada, imate jedno mjesto gdje možete mijenjati stvari. 996 00:45:09,540 --> 00:45:11,622 A u stvari, nešto kao što je problem postaviti sedam, 997 00:45:11,622 --> 00:45:13,690 gdje ćemo implementirati trgovanje dionicama web stranice, 998 00:45:13,690 --> 00:45:15,523 koji će imati cijela hrpa stranica. 999 00:45:15,523 --> 00:45:17,620 I to bi bilo stvarno neugodno ako se odlučite, hm, 1000 00:45:17,620 --> 00:45:21,630 Ja stvarno ne volim 24 piksela, želim da bude 28 piksela ili malo veći. 1001 00:45:21,630 --> 00:45:23,550 A onda morate učiniti Globalna pronaći i zamijeniti 1002 00:45:23,550 --> 00:45:27,560 ili otvoriti sve Vaše web datoteke jednostavno zapravo mijenjati jednu vrijednost. 1003 00:45:27,560 --> 00:45:31,290 Faktoring tih stilova na jednom središnjem mjestu, 1004 00:45:31,290 --> 00:45:34,720 sada možete otvoriti jednu tekstualnu datoteku u CS50IDE u bilo kojem programu, 1005 00:45:34,720 --> 00:45:36,479 to promijeniti, spasiti ga, i učinio. 1006 00:45:36,479 --> 00:45:38,270 Vi ste propagiraju one Promjene posvuda. 1007 00:45:38,270 --> 00:45:42,450 I to bi bilo isto u dot h datoteke kao dobro. 1008 00:45:42,450 --> 00:45:46,697 Tako da bilo pitanja na taj način daleko na ovoj sintaksi? 1009 00:45:46,697 --> 00:45:48,530 U redu, tako da smo učinili sve što čini 1010 00:45:48,530 --> 00:45:51,170 osim zapravo provesti hiperveze. 1011 00:45:51,170 --> 00:45:52,740 I tako idemo naprijed i učiniti. 1012 00:45:52,740 --> 00:45:54,830 Dopustite mi ići naprijed i stvoriti novu datoteku ovdje. 1013 00:45:54,830 --> 00:45:59,970 Idem ga nazvati link.html, staviti u današnjem koda. 1014 00:45:59,970 --> 00:46:03,000 >> I ja ću učiniti otvorena Nosač tipa doc HTML. 1015 00:46:03,000 --> 00:46:05,970 Kao na stranu, ove stvar u vrh, to doc tipa deklaracija, 1016 00:46:05,970 --> 00:46:08,420 to je jedini koji je čudno s uskličnika. 1017 00:46:08,420 --> 00:46:12,100 Vi samo morati to učiniti tamo i to znači da se pomoću HTML verziju 5. 1018 00:46:12,100 --> 00:46:14,460 Starije verzije Jezik je imao mnogo više 1019 00:46:14,460 --> 00:46:16,400 žice koje su potrebne da se stavi tamo. 1020 00:46:16,400 --> 00:46:18,620 Dakle ovdje je primjer zove veza. 1021 00:46:18,620 --> 00:46:20,950 >> Trebam tijelo moje web stranice ovdje. 1022 00:46:20,950 --> 00:46:29,770 I ovdje, a href jednaki recimo HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 i moja omiljena web stranice, mi ćemo reći. 1024 00:46:35,420 --> 00:46:38,550 U redu, tako da vrlo neškodljiv, user friendly stranica. 1025 00:46:38,550 --> 00:46:42,950 Ako ja sada ići u moj direktorij popis ovdje i otvoriti link.html, 1026 00:46:42,950 --> 00:46:44,780 imamo hiper teksta. 1027 00:46:44,780 --> 00:46:47,410 >> I doista, ovo je mjesto gdje H u HTTP dolazi. 1028 00:46:47,410 --> 00:46:51,580 Protokol za prijenos hiperteksta o prijenosu tekst 1029 00:46:51,580 --> 00:46:53,840 koji ima hiperlinkove na druge resurse. 1030 00:46:53,840 --> 00:46:58,210 I doista, ovdje je poznato, ako je retro, plavi link koji, ako se pritisne, 1031 00:46:58,210 --> 00:47:02,607 zapravo će me dovesti do Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Sada, oh, da dolazi uskoro. 1033 00:47:03,940 --> 00:47:08,970 U redu, tako da sada, što su neki implikacija ovo? 1034 00:47:08,970 --> 00:47:11,610 >> I iskreno, svijet počinje da se malo više upoznat 1035 00:47:11,610 --> 00:47:15,090 i malo strašnije ali i malo više 1036 00:47:15,090 --> 00:47:17,840 sebe braniti nakon što počnete razumjeti ove stvari. 1037 00:47:17,840 --> 00:47:21,610 Budući izgledi su, neki od vas, ako idete kroz svoj Gmail spam folder ili čak 1038 00:47:21,610 --> 00:47:23,990 Vaš inbox, vjerojatno ste dobivši nekakvu e-mail 1039 00:47:23,990 --> 00:47:26,980 da pita da promijenite Lozinka možda ili možda provjeriti 1040 00:47:26,980 --> 00:47:28,910 Vaš PayPal vjerodajnice ili sitnica. 1041 00:47:28,910 --> 00:47:34,510 >> A u stvari, možda ste primili nešto što govori poput klikom ovdje 1042 00:47:34,510 --> 00:47:42,260 resetirati vašu lozinku PayPal. 1043 00:47:42,260 --> 00:47:44,130 A sada, primijetiti, ako to nije Disney.com 1044 00:47:44,130 --> 00:47:51,600 ali kao i badplace.com reload, imajte na umu da tekst ovdje 1045 00:47:51,600 --> 00:47:53,710 Moglo bi se reći ništa god. 1046 00:47:53,710 --> 00:47:55,260 A u stvari, to je samo riječi. 1047 00:47:55,260 --> 00:48:04,610 Zašto ne ja zapravo biti super zlonamjerne i reći http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Kliknite ovdje resetirati vaš PayPal lozinkom i sada ponovno učitati. 1049 00:48:14,090 --> 00:48:16,220 To izgleda prilično legitimno, zar ne? 1050 00:48:16,220 --> 00:48:20,470 Mislim, ne bih kliknite na e-mail koji samo kaže. 1051 00:48:20,470 --> 00:48:22,450 Ali primijetite dihotomiju ovdje. 1052 00:48:22,450 --> 00:48:26,880 Ona kaže www.paypal.com, i zapravo, čekaj malo, 1053 00:48:26,880 --> 00:48:29,210 Znamo da želite S za sigurnost. 1054 00:48:29,210 --> 00:48:35,450 Tako sada, idite na www.paypal.com HTTPS, ali ako ste nikada nije to učinio prije, 1055 00:48:35,450 --> 00:48:38,182 ne dobiti u naviku lebdeći nad malim linkove ovdje. 1056 00:48:38,182 --> 00:48:39,890 I to je teško vidjeti na zaslonu tamo, 1057 00:48:39,890 --> 00:48:41,340 i to nije sve što jednostavnije ovdje. 1058 00:48:41,340 --> 00:48:43,615 Ali ovdje putu prema dolje u maleni kutak 1059 00:48:43,615 --> 00:48:45,740 čini preglednik zapravo te da idemo reći 1060 00:48:45,740 --> 00:48:48,850 da badplace.com umjesto paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Sada, gdje ćemo s tim? 1062 00:48:51,620 --> 00:48:54,859 Svi primjeri koje smo učinili danas, Teško mi smo kodirani i upisali ručno. 1063 00:48:54,859 --> 00:48:56,900 Web je nevjerojatno nezanimljivo kad vam je teško 1064 00:48:56,900 --> 00:48:59,844 kôd svoje web stranice, tako da sadržaj je statična i ne mijenja. 1065 00:48:59,844 --> 00:49:01,760 Naravno, svi naši omiljene web stranice danas, 1066 00:49:01,760 --> 00:49:04,470 da li je Gmail ili Twitter, ili Facebook ili bilo koji broj drugih 1067 00:49:04,470 --> 00:49:05,290 su dinamični. 1068 00:49:05,290 --> 00:49:07,340 Oni mijenjaju u odgovor na unos korisnika 1069 00:49:07,340 --> 00:49:08,840 baš kao i Google rezultata pretraživanja. 1070 00:49:08,840 --> 00:49:12,415 >> I tako je u srijedu, što radimo je napuštamo HTML i CSS uvod 1071 00:49:12,415 --> 00:49:14,290 iza nas i mi se zdravo za gotovo da se sada 1072 00:49:14,290 --> 00:49:16,640 to znaju i uvodimo novi programski jezik 1073 00:49:16,640 --> 00:49:19,050 zove PHP, koji vole C će nam dati 1074 00:49:19,050 --> 00:49:22,450 moć zapravo stvoriti programe da sami generiraju izlaz. 1075 00:49:22,450 --> 00:49:25,900 U ovom slučaju, mi ćemo se pomoću PHP generirati dinamički web 1076 00:49:25,900 --> 00:49:27,340 Stranice koje koriste ovaj novi jezik. 1077 00:49:27,340 --> 00:49:28,989 Dakle, više o tome u srijedu. 1078 00:49:28,989 --> 00:49:29,530 Vidimo se onda. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [Glazbom] 1081 00:49:37,380 --> 00:52:38,864