1 00:00:00,000 --> 00:00:03,486 >> [Přehrávání hudby] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J Malan: To je CS50 a to je začátek týdne 7. 4 00:00:14,250 --> 00:00:15,060 Takže vítejte zpátky. 5 00:00:15,060 --> 00:00:17,540 A můžete připomenout, že v problému set čtyři, 6 00:00:17,540 --> 00:00:21,510 tam byl trochu lov pro některé atraktivní ceny, přičemž 7 00:00:21,510 --> 00:00:24,219 Po obnovit fotky Zaměstnanci jak zde, tak v New Haven, 8 00:00:24,219 --> 00:00:27,468 jste byli vyzváni, aby si co nejvíce tito počítačoví odborníci, jak byste mohli. 9 00:00:27,468 --> 00:00:29,550 A máme celý banda podání. 10 00:00:29,550 --> 00:00:31,930 Myslel jsem, že bych sdílet pár s vámi dnes. 11 00:00:31,930 --> 00:00:35,100 >> A budeme psát všechny tyto online. 12 00:00:35,100 --> 00:00:39,310 Ale především jsem chtěl upozornit to-- studny jeden, 13 00:00:39,310 --> 00:00:42,670 Sam byl v poměrně málo z nich obecně představující takhle. 14 00:00:42,670 --> 00:00:45,750 Zdá se však, že od dnes ráno, vítěz 15 00:00:45,750 --> 00:00:51,170 byla určitá někdo jménem Ken s 24 zaměstnanců zachytil na kameru 16 00:00:51,170 --> 00:00:54,600 nebo málo více, když vezmete v představují více zaměstnanců v obrázcích. 17 00:00:54,600 --> 00:00:58,300 Na snímku je zde další Ken Marii v New Havenu. 18 00:00:58,300 --> 00:01:01,300 >> Nyní, Ken, když se změní out je trochu rohového případu 19 00:01:01,300 --> 00:01:02,880 že se ještě nestalo dřív. 20 00:01:02,880 --> 00:01:05,713 Ukazuje se, že nenastalo se mi dát drobným písmem v problému 21 00:01:05,713 --> 00:01:09,710 nastavit čtyři, které říká, že zaměstnanci jsou nezpůsobilé pro atraktivní ceny 22 00:01:09,710 --> 00:01:13,130 protože Ken je, samozřejmě, jeden z fotografové na našich zaměstnanců. 23 00:01:13,130 --> 00:01:16,820 Nyní, s tím řekl, Původně mi psal říkat 24 00:01:16,820 --> 00:01:19,180 Prosím, nevkládejte tyto fotografie online. 25 00:01:19,180 --> 00:01:21,630 Myslím si, že z velké části protože většina z fotografií 26 00:01:21,630 --> 00:01:24,499 že tento fotograf se podívat trochu něco takového. 27 00:01:24,499 --> 00:01:25,040 A podobně. 28 00:01:25,040 --> 00:01:28,990 >> Ale Ken bych, abych vás ujistil že je to velmi dobrý fotograf, 29 00:01:28,990 --> 00:01:33,190 on je profesionál, vezme fotky, které nejsou rozmazané, 30 00:01:33,190 --> 00:01:37,270 že jsou lepší v centru pozornosti, a on trvalo poměrně málo z našich vlastních zaměstnanců. 31 00:01:37,270 --> 00:01:40,370 Ale spíše než jen potvrdit Ken, co jsme si mysleli bychom dělat 32 00:01:40,370 --> 00:01:43,390 se projít seznam Skutečné studenti, kteří předložili. 33 00:01:43,390 --> 00:01:48,640 A ukázalo se, že Lance se 15 fotek jak z dnešního rána 34 00:01:48,640 --> 00:01:50,030 byl náš vítěz. 35 00:01:50,030 --> 00:01:55,730 >> A tady snímku je s Lance Colton, s Skaz, sama se sebou a se Samem. 36 00:01:55,730 --> 00:02:00,230 Ale pak se ukázalo, že od 11:46, takže před jen trochu, 37 00:02:00,230 --> 00:02:04,380 Vrátil jsem se do svého e-mailu a zjistil, že jsme měli ještě jeden podání 38 00:02:04,380 --> 00:02:08,300 student jménem Bonnie jejichž e-mail řekl pouze toto. 39 00:02:08,300 --> 00:02:10,800 Nebudu lhát, že jsem Přitom během vyučování. 40 00:02:10,800 --> 00:02:17,620 A pak pokračoval připojit jen 14 fotografií, jeden plachý Lance je 15. 41 00:02:17,620 --> 00:02:22,690 >> Ale v Bonnie fotografiích, se ukazuje, out byli více zaměstnanci, Sam 42 00:02:22,690 --> 00:02:25,960 mezi nimi, takže to, co jsme si mysleli, by se udělat, je uznat obou těchto technologií. 43 00:02:25,960 --> 00:02:29,240 Takže kromě získání Dropbox prostor, který každý, kdo se podíleli 44 00:02:29,240 --> 00:02:33,900 přijímá, budou i tyto dvě části získat hezkou zajištěný oběd pro ně 45 00:02:33,900 --> 00:02:36,100 a jejich část Mates tento nadcházející týden. 46 00:02:36,100 --> 00:02:38,970 A tak uslyšíte od nás, Lance a Bonnie, o tom. 47 00:02:38,970 --> 00:02:40,002 Tak velké gratulace k nim. 48 00:02:40,002 --> 00:02:42,210 A teď, kdo by ti z vás, stejně jako oběd obecněji 49 00:02:42,210 --> 00:02:45,320 vědět, že CS50 oběd v Cambridge a New Haven je tento pátek. 50 00:02:45,320 --> 00:02:48,510 Přejít na CS50 web lomítko RSVP. 51 00:02:48,510 --> 00:02:49,800 A nyní pár slov o seminářích. 52 00:02:49,800 --> 00:02:50,730 Více curricularly. 53 00:02:50,730 --> 00:02:52,490 Takže jsme blíží bod semestru 54 00:02:52,490 --> 00:02:55,200 kde byste měli začít přemýšlet o závěrečných prací. 55 00:02:55,200 --> 00:02:59,309 A ve skutečnosti, jen v trochu, bude takzvané předběžné návrhy je splatná. 56 00:02:59,309 --> 00:03:01,850 Takže předběžné návrhy jsou určeny pro být dost nízký dopad a opravdu 57 00:03:01,850 --> 00:03:04,109 jen příležitost pro skládat krátkou poznámku 58 00:03:04,109 --> 00:03:06,900 Váš kolega učení seznámit jej nebo ji, co si myslíš 59 00:03:06,900 --> 00:03:09,140 chtít udělat pro své finální projekt. 60 00:03:09,140 --> 00:03:11,730 >> Nyní, mnoho studentů končí dělá webový závěrečných prací. 61 00:03:11,730 --> 00:03:13,800 A samozřejmě, jsme jen Nyní minulý týden v této 62 00:03:13,800 --> 00:03:15,890 a za potápění do programování webu. 63 00:03:15,890 --> 00:03:18,200 Takže ne se bát, pokud vás nemají absolutně žádnou představu, jak 64 00:03:18,200 --> 00:03:21,594 byste stavět myšlenky, které můžete mít ve své mysli. 65 00:03:21,594 --> 00:03:24,510 To je opravdu jen nutit funkce aby vám přemýšlet a mluvit 66 00:03:24,510 --> 00:03:25,650 s TF o tom. 67 00:03:25,650 --> 00:03:28,810 Ale abych vám pomoci s tím, a s konečnými projekty v konečném důsledku, 68 00:03:28,810 --> 00:03:31,750 vědí, že CS50 má tradici nabízet semináře. 69 00:03:31,750 --> 00:03:36,084 >> A to jsou volitelné, ruce na, nebo přednášet na základě příležitosti 70 00:03:36,084 --> 00:03:39,000 se dozvědět více o tématech, která jsou trochu vedlejší do kurzu je 71 00:03:39,000 --> 00:03:43,310 osnovy, ale přesto nádherné Materiál řídit závěrečných prací. 72 00:03:43,310 --> 00:03:46,840 A tak to je seznam, který je Zaměstnanci CS50 tady v New Haven 73 00:03:46,840 --> 00:03:48,600 přišli s pro v letošním roce o iOS 74 00:03:48,600 --> 00:03:50,730 programování, Android programování, vývoj her, 75 00:03:50,730 --> 00:03:54,480 a svazky více nástrojů a jazyků a techniky. 76 00:03:54,480 --> 00:03:56,780 >> Takže pozor na internetových stránkách CS50 je. 77 00:03:56,780 --> 00:04:00,110 A do té doby, pokud chcete zaregistrujte jako zájemci o některý z nich, 78 00:04:00,110 --> 00:04:02,510 přejít na CS50 je lomítko rejstříku. 79 00:04:02,510 --> 00:04:05,770 A pak budeme sledovat, jak na dny a letové časy a místa 80 00:04:05,770 --> 00:04:09,090 a všechno-- nejvíce všechno bude možno sledovat, a také k dispozici na vyžádání 81 00:04:09,090 --> 00:04:11,750 po pokud si nemůžete vlastně dělat to. 82 00:04:11,750 --> 00:04:15,800 Takže bez dalších okolků, my přestali minule s GET. 83 00:04:15,800 --> 00:04:19,610 >> A to bylo jako zprávu, která byla uvnitř virtuálního obálky, připomínají, 84 00:04:19,610 --> 00:04:23,960 že jsme míjeli na routeru, aby router mezi webovým prohlížečem a web 85 00:04:23,960 --> 00:04:24,487 serveru. 86 00:04:24,487 --> 00:04:26,695 A toto poselství vypadal Trochu něco takového. 87 00:04:26,695 --> 00:04:29,700 To bylo více tajemné poselství, které byl vlastně uvnitř obálky 88 00:04:29,700 --> 00:04:34,440 napsané na kusu papíru, jehož První řádek říká, že doslova, dostat lomítko. 89 00:04:34,440 --> 00:04:37,830 >> A stejně jako kontrola sanitačního, co jste lomítko naznačovat? 90 00:04:37,830 --> 00:04:40,455 Co znamená, když lomítko žádá o webové stránky? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Můžete požádat o to celou dobu. 93 00:04:44,250 --> 00:04:47,333 Většina kdykoliv návštěvě webové stránky, budete nejsou ve skutečnosti zadejte název souboru. 94 00:04:47,333 --> 00:04:50,960 Pravděpodobně jste prostě jít na Facebook.com, vstupovat, gmail.com, nebo podobně. 95 00:04:50,960 --> 00:04:52,260 A co lomítko představuje? 96 00:04:52,260 --> 00:04:53,506 Jaky soubor? 97 00:04:53,506 --> 00:04:54,630 Nebo co strana, konkrétně? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Index, jo. 100 00:05:00,720 --> 00:05:01,810 Takže výchozí stránku. 101 00:05:01,810 --> 00:05:04,810 Takže pokud nechcete určit soubor jmenujeme začneme vidět, 102 00:05:04,810 --> 00:05:07,750 jste vlastně jen žádající dej mi výchozí stránku Facebook 103 00:05:07,750 --> 00:05:10,800 nebo mi můj e-mailové schránky nebo dát me výchozí stránka novinek 104 00:05:10,800 --> 00:05:12,510 na webových stránkách CNN nebo podobně. 105 00:05:12,510 --> 00:05:15,220 A server reaguje na že zpráva s něčím 106 00:05:15,220 --> 00:05:18,420 takhle, říkat ano, mluvit HTTP verze 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, což je stav kód, který my, lidé jen zřídka 108 00:05:21,130 --> 00:05:22,790 někdy vidět, protože je to dobré. 109 00:05:22,790 --> 00:05:26,640 Protože to znamená, že OK, žádost byl přijat a správně zacházet. 110 00:05:26,640 --> 00:05:28,960 A typ obsahu zřejmě v odpovědi 111 00:05:28,960 --> 00:05:31,170 je poměrně často, ale ne vždy, text. 112 00:05:31,170 --> 00:05:32,580 A konkrétně, HTML. 113 00:05:32,580 --> 00:05:34,760 A to je vlastně kde se podíváme na dnes. 114 00:05:34,760 --> 00:05:37,140 >> Takže ve skutečnosti, já jdu vpřed a otevřít prohlížeč. 115 00:05:37,140 --> 00:05:40,410 Budu používat Chrome, můžete použít Nejvíce libovolného prohlížeče v příštích týdnech. 116 00:05:40,410 --> 00:05:42,410 Obecně doporučujeme Chrome protože je to obzvláště 117 00:05:42,410 --> 00:05:43,750 dobré pro vývojáře softwaru. 118 00:05:43,750 --> 00:05:46,070 Je tu hodně postavena v roce nástroje, které usnadňují 119 00:05:46,070 --> 00:05:49,800 rozvíjet nejen HTML a CSS, věci, začneme mluvit o dnes, 120 00:05:49,800 --> 00:05:51,530 ale i jiné jazyky také. 121 00:05:51,530 --> 00:05:55,530 >> A budu pokračovat a jít to-- Budu Ovládání tlačítkem nebo vpravo 122 00:05:55,530 --> 00:05:57,210 klepněte na libovolné místo na webové stránce. 123 00:05:57,210 --> 00:05:59,070 A já jdu do Zkontrolujte Element. 124 00:05:59,070 --> 00:06:03,850 A budu vyladit moje Obrazovka jen trochu sem. 125 00:06:03,850 --> 00:06:05,790 Dovolte mi, abych to přesunout na dno. 126 00:06:05,790 --> 00:06:08,140 Takže tohle je to, co se říká Chrome inspektor. 127 00:06:08,140 --> 00:06:11,010 Takže tohle je jako ladění Nástroj vestavěný do prohlížeče Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Všichni z vás již tento Pokud jste pomocí prohlížeče Chrome. 129 00:06:13,520 --> 00:06:17,169 A to vám umožní vidět, co se děje Na pod pokličku nějaké webové stránky. 130 00:06:17,169 --> 00:06:19,210 Takže pojďme vlastně trvat Podívej se na to takto. 131 00:06:19,210 --> 00:06:21,251 Má cesta více funkcí a staráme se o dnes. 132 00:06:21,251 --> 00:06:22,760 Ale je tu tyto karty sem. 133 00:06:22,760 --> 00:06:25,890 Prvky, sítě, zdroje, časová osa, a některé další věci. 134 00:06:25,890 --> 00:06:27,800 Budu klikněte na Sítě na chvíli. 135 00:06:27,800 --> 00:06:30,500 >> A je to trochu ohromující na první pohled zde. 136 00:06:30,500 --> 00:06:34,190 Ale to, co budu dělat, je nechat mě to trochu zjednodušit. 137 00:06:34,190 --> 00:06:37,560 Budu zapnout záznam světla, takže se to červené. 138 00:06:37,560 --> 00:06:39,140 A já jsem chtěl říct zachovat log. 139 00:06:39,140 --> 00:06:41,015 A to je jen trochu věc, kterou jsem přišel na to, 140 00:06:41,015 --> 00:06:44,120 v průběhu času, že to bude šetřit Vše, co se děje v prohlížeči. 141 00:06:44,120 --> 00:06:50,030 A teď jdu na http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Ve skutečnosti, pojďme udělat www pro jistotu, lomítko. 143 00:06:52,690 --> 00:06:53,643 Enter. 144 00:06:53,643 --> 00:06:56,180 Takže URL, že mnoho z jste mohli navštívili. 145 00:06:56,180 --> 00:06:58,830 A nyní Facebook je web strana přichází v horní části. 146 00:06:58,830 --> 00:07:02,350 A pak celá parta věci letěl na dně. 147 00:07:02,350 --> 00:07:04,830 A ve skutečnosti, se ukazuje, že při návštěvě Facebook.com, 148 00:07:04,830 --> 00:07:09,320 jste nejen dělat jednu prosbu HTTP, Ukazuje se, že jít na Facebook.com 149 00:07:09,320 --> 00:07:14,320 pošle 41 z těchto obálek, každý s jeho vlastní žádost get, 150 00:07:14,320 --> 00:07:18,360 jak je uvedeno, i když za obrazovkou zde, v dolní části obrazovky, 151 00:07:18,360 --> 00:07:24,040 znamená to, že opravdu, my browser udělal 41 žádostí. 152 00:07:24,040 --> 00:07:29,689 >> A celkem, to převedeno 861 kB a trvalo nějakého důvodu 153 00:07:29,689 --> 00:07:31,730 tolik jako osm sekunda ke stažení všechno. 154 00:07:31,730 --> 00:07:33,790 Takže je to vlastně trochu divný že stránky Facebook by vzít 155 00:07:33,790 --> 00:07:35,600 dlouho, ale budiž v tomto případě. 156 00:07:35,600 --> 00:07:39,520 A teď, to všechno mi to jedno o s výjimkou nejvrchnější požadavek. 157 00:07:39,520 --> 00:07:46,440 Tak pojďme k tomuhle tady a dovolte mi, abych oddálit jen na chvíli. 158 00:07:46,440 --> 00:07:47,754 >> A dovolte mi přiblížit na toto téma. 159 00:07:47,754 --> 00:07:50,670 Takže to, co jsem udělal v vlevo, přestože je tu spousta děje tady 160 00:07:50,670 --> 00:07:53,360 Je jsem zvýrazní Facebook.com a poté 161 00:07:53,360 --> 00:07:56,540 Všimněte si, že jsem rolování dolů, rolování dolů, rolování dolů, 162 00:07:56,540 --> 00:07:58,330 požádat o záhlaví. 163 00:07:58,330 --> 00:08:01,720 A uvidíte, že Chrome je zobrazeno me podstatě vnitřní obsah 164 00:08:01,720 --> 00:08:02,810 žádosti I vyrobena. 165 00:08:02,810 --> 00:08:06,130 Není to formátování v úplně stejné cesta, ale všimnete, je tam zmínka o získání, 166 00:08:06,130 --> 00:08:09,481 Všimněte si, že je zmínka o hostitele, Facebook.com, cesta, nebo lomítko, 167 00:08:09,481 --> 00:08:10,730 což je soubor jsem požádal. 168 00:08:10,730 --> 00:08:12,930 >> A pak, když jsem se procházet zálohovat, budeme vlastně 169 00:08:12,930 --> 00:08:17,270 vidět, že to, co se vrátil Facebook pro mě je všechny tyto záhlaví. 170 00:08:17,270 --> 00:08:21,040 Takže v této virtuální obálky opravdu mnoho klíčových párů hodnot. 171 00:08:21,040 --> 00:08:23,130 Slovo, dvojtečka, a pak hodnota. 172 00:08:23,130 --> 00:08:25,050 Slovo, dvojtečka, a hodnota. 173 00:08:25,050 --> 00:08:26,160 Jedná se o tzv záhlaví. 174 00:08:26,160 --> 00:08:31,860 A je tu mnohem víc, než detail zde jsme vlastně záleží právě teď. 175 00:08:31,860 --> 00:08:33,750 >> Ale to je druhý poslední tam dole, 176 00:08:33,750 --> 00:08:38,809 Všimněte si, že serveru facebook.com je, opravdu tady řekl, přijde nějaký textu HTML. 177 00:08:38,809 --> 00:08:41,409 Takže všechno je to, říci, že při požadavku web 178 00:08:41,409 --> 00:08:44,300 Stránka z prohlížeče na Server, který server odpoví 179 00:08:44,300 --> 00:08:47,630 s obálkou jeho vlastní uvnitř kterého je textu. 180 00:08:47,630 --> 00:08:49,020 Jinými slovy, HTML. 181 00:08:49,020 --> 00:08:50,590 Hyper Text Markup Language. 182 00:08:50,590 --> 00:08:53,200 Což je jiný jazyk že jsme zavedli dnes 183 00:08:53,200 --> 00:08:57,740 že lidé nebo počítače generovat , za účelem provádění webové stránky. 184 00:08:57,740 --> 00:08:59,580 >> Konkrétně, pojďme se podívat na to. 185 00:08:59,580 --> 00:09:03,277 Chystám se teď vrátit na webových stránkách Facebook. 186 00:09:03,277 --> 00:09:05,360 A já jen Ovládání kliknutím nebo klikněte pravým tlačítkem myši 187 00:09:05,360 --> 00:09:07,634 a klikněte na tlačítko Zobrazit zdrojový kód stránky. 188 00:09:07,634 --> 00:09:10,550 A i když nechcete používat Chrome, IE to udělat, Firefox může to udělat, 189 00:09:10,550 --> 00:09:14,060 Safari můžete to udělat, i když v nabídce Možnosti může vypadat trochu jinak. 190 00:09:14,060 --> 00:09:18,990 A to je HTML, že Mark a Firma na Facebooku psali. 191 00:09:18,990 --> 00:09:24,640 >> A společně, tento jazyk zde implementuje modrá a bílá stránka 192 00:09:24,640 --> 00:09:26,370 že jsme viděli před chvílí. 193 00:09:26,370 --> 00:09:28,030 Nyní, to je trošku složitější. 194 00:09:28,030 --> 00:09:31,400 Ale když se podíváme se na levém horním rohu, jsme začnou se podívat na nějaké vzory. 195 00:09:31,400 --> 00:09:34,140 Vypadá to, že je tu spousta z těchto otevírací značce 196 00:09:34,140 --> 00:09:35,970 a pak je tu toto klíčové slovo HTML. 197 00:09:35,970 --> 00:09:38,330 Zde je další open úhel rameno a hlava. 198 00:09:38,330 --> 00:09:41,560 >> Tady je, pokud budeme posouvat dolů a dolů a dolů, já jsem 199 00:09:41,560 --> 00:09:43,820 jít do toho a zkuste něco hledat. 200 00:09:43,820 --> 00:09:48,510 Existuje způsob, jak přes vpravo Zde je otevřený držák tělo. 201 00:09:48,510 --> 00:09:50,800 A vzpomínám z poslední čas, který jsme navrhli 202 00:09:50,800 --> 00:09:53,364 že nejjednodušší webové stránky že člověk může napsat 203 00:09:53,364 --> 00:09:55,030 by mohl vypadat trochu něco takového. 204 00:09:55,030 --> 00:09:58,430 Otevřeno HTML tag, otevřená hlava tag, otevřený název značky, 205 00:09:58,430 --> 00:10:03,230 poté uzavře titul, uzavřené hlava, otevřený tělo tag, nějaký text, uzavřená karoserie, 206 00:10:03,230 --> 00:10:04,720 uzavřený HTML. 207 00:10:04,720 --> 00:10:06,290 >> Ale pauza tu jen na chvíli. 208 00:10:06,290 --> 00:10:09,030 Tento kód, i když jste Nikdy napsal předtím 209 00:10:09,030 --> 00:10:11,864 ale stále ne zcela pochopit co se děje, vypadá docela dobře. 210 00:10:11,864 --> 00:10:12,821 Dobře, to je velmi čisté. 211 00:10:12,821 --> 00:10:14,120 Je to velmi pěkné stylisticky. 212 00:10:14,120 --> 00:10:16,190 Hodně odražení a bílé místo. 213 00:10:16,190 --> 00:10:18,020 Facebook není. 214 00:10:18,020 --> 00:10:23,190 Tak proč je Facebook tolik horší, než jsem se na psaní HTML? 215 00:10:23,190 --> 00:10:24,310 Zřejmě. 216 00:10:24,310 --> 00:10:26,899 >> Jasně, to je jako jeden z pěti pro styl. 217 00:10:26,899 --> 00:10:29,315 Existuje pádný důvod pro ně snížit tyto rohy. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 No dobře, tak oni nechtějí aby to pro vás jednodušší si ho přečíst. 220 00:10:33,860 --> 00:10:36,940 Takže v nějakém smyslu, že jsou plést to, tak nějak to zakódování 221 00:10:36,940 --> 00:10:40,260 alespoň tak esteticky že je to těžší pro Myspace 222 00:10:40,260 --> 00:10:42,705 jít a odpárat jejich Domovskou a HTML pro ni. 223 00:10:42,705 --> 00:10:45,080 Ukazuje se, že programy i když, včetně Chrome, 224 00:10:45,080 --> 00:10:47,020 můžeme vyčistit toto nahoru výborný snadno. 225 00:10:47,020 --> 00:10:49,420 Takže to není tak jako důvod. 226 00:10:49,420 --> 00:10:51,290 Co jiného by mohlo být příčinou. 227 00:10:51,290 --> 00:10:51,790 To jo. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Jo, bílé náklady datového prostoru. 230 00:10:55,890 --> 00:10:56,598 Co myslíš? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Jo, přesně tak. 233 00:11:02,979 --> 00:11:06,020 Pokud stisknete klávesy TAB hodně, nebo mezerník, zvážit důsledky. 234 00:11:06,020 --> 00:11:10,060 Takže každá klávesa na vaší klávesnici je [Neslyšitelný] reprezentován jako jeden bajt. 235 00:11:10,060 --> 00:11:14,560 >> Takže předpokládám, že Mark nebo některý z vývojářů v těchto dnech zasáhne mezerník jen jednou 236 00:11:14,560 --> 00:11:17,899 V této HTML stránce, která reprezentuje Facebook domovskou stránku. 237 00:11:17,899 --> 00:11:19,690 A Facebook má hodně uživatelů v těchto dnech. 238 00:11:19,690 --> 00:11:24,030 Takže předpokládám, že Facebook je homepage dnes je navštěvován miliardy lidí. 239 00:11:24,030 --> 00:11:27,020 A někdo na Facebooku má hit mezerníku jen jednou. 240 00:11:27,020 --> 00:11:29,890 >> Takže jeden další bajt, miliarda žádostí, 241 00:11:29,890 --> 00:11:32,790 kolik více dat je Facebook přenos přes internet 242 00:11:32,790 --> 00:11:37,160 proto, že někdo hit mezerníku na jeho klávesnici? 243 00:11:37,160 --> 00:11:41,660 A miliarda bytů, nebo jeden gigabajt odesílání dat z Facebooku serverů 244 00:11:41,660 --> 00:11:43,626 lidem po celém Svět bez dobrého důvodu. 245 00:11:43,626 --> 00:11:44,750 Nyní, to je jen jeden prostor. 246 00:11:44,750 --> 00:11:48,866 >> Představte si, že jsme vlastně čistit to věc a členité a doplnil 247 00:11:48,866 --> 00:11:50,990 hodně prázdného místa a znaky tabulátoru a mezery, 248 00:11:50,990 --> 00:11:53,656 můžete skončit výdajů gigabajtů, ne-li terra bajty více prostoru. 249 00:11:53,656 --> 00:11:56,640 A tak výborný obyčejný v Skutečný svět vývoj webových aplikací 250 00:11:56,640 --> 00:11:58,950 je minify váš kód. 251 00:11:58,950 --> 00:12:01,280 A budeme nakonec vidět jak byste mohli udělat. 252 00:12:01,280 --> 00:12:04,630 >> Ale dnes, začneme psát kód to je vlastně čitelný pro nás lidi. 253 00:12:04,630 --> 00:12:10,120 Ukazuje se, i když, pokud jdete zpět do tohoto nástroje v Chrome Zkontrolovat prvek, 254 00:12:10,120 --> 00:12:12,030 Dříve jsme byli na záložce Network. 255 00:12:12,030 --> 00:12:15,430 Ukazuje se, že pokud jdete do Záložka prvky, co je skutečně vidět 256 00:12:15,430 --> 00:12:19,230 je Chrome je docela tištěný verze téhož HTML. 257 00:12:19,230 --> 00:12:20,640 Takže jsme deobfuscated to. 258 00:12:20,640 --> 00:12:22,472 Takže je to žádným soupeřem pro počítač. 259 00:12:22,472 --> 00:12:24,430 A teď můžete skutečně klikněte kolem a začít 260 00:12:24,430 --> 00:12:27,630 vidět hierarchii, která je webová stránka. 261 00:12:27,630 --> 00:12:28,780 Takže pojďme to vlastně dělat. 262 00:12:28,780 --> 00:12:32,120 Chystám se jít dopředu a otevřít na můj Mac program s názvem úpravu textu. 263 00:12:32,120 --> 00:12:35,490 A připomínají, že to je jen super jednoduchý textový programu. 264 00:12:35,490 --> 00:12:37,490 Windows má Notepad.exe. 265 00:12:37,490 --> 00:12:39,820 A já jdu na Verbatim zadejte následující. 266 00:12:39,820 --> 00:12:44,650 Doc typu HTML, otevřený držák HTML, uzavřený konzola HTML, 267 00:12:44,650 --> 00:12:49,000 máme hlavu stránky zde, konec záhlaví stránky zde, 268 00:12:49,000 --> 00:12:52,310 titul bude jako, hello world. 269 00:12:52,310 --> 00:12:56,660 >> A pak tady dole, my potřebujeme Tělo webové stránky. 270 00:12:56,660 --> 00:12:58,050 Uzavřená karoserie. 271 00:12:58,050 --> 00:13:00,700 A pak tady, hello world. 272 00:13:00,700 --> 00:13:01,270 Dobře. 273 00:13:01,270 --> 00:13:03,350 Takže psali jsme super rychlý webovou stránku. 274 00:13:03,350 --> 00:13:06,675 Budu jej uložit jako hello.html na mém desktopu. 275 00:13:06,675 --> 00:13:09,050 My Mac děje stěžovat, myslet si, že, počkejte chvíli, 276 00:13:09,050 --> 00:13:11,091 to je textový soubor, proveďte Chcete-li volat to .txt? 277 00:13:11,091 --> 00:13:13,300 Ale ne, chci použít dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> A co potom je to hezké, kdybych stačí dvakrát na tento soubor, 279 00:13:16,140 --> 00:13:18,600 hello.html, tady je moje webové stránky. 280 00:13:18,600 --> 00:13:22,564 Bohužel, já jsem jediný člověk na světě, 281 00:13:22,564 --> 00:13:23,980 kteří mohou navštívit tuto stránku právě teď. 282 00:13:23,980 --> 00:13:26,734 Vzhledem k tomu, kde to žije zdánlivě? 283 00:13:26,734 --> 00:13:27,650 Je to na mém Macu, že jo? 284 00:13:27,650 --> 00:13:28,470 Což je k ničemu. 285 00:13:28,470 --> 00:13:30,390 Stejně jako nikdo v této místnosti natož na internetu 286 00:13:30,390 --> 00:13:31,598 může skutečně navštívit tuto stránku. 287 00:13:31,598 --> 00:13:33,820 Takže dnes, musíme zavádět další prvek. 288 00:13:33,820 --> 00:13:36,720 >> A jak to udělat, budu jděte do toho a otevřít Cloud 9. 289 00:13:36,720 --> 00:13:40,090 Takže Cloud 9 je samozřejmě cloud založené service-- CS50 290 00:13:40,090 --> 00:13:44,890 IDE--, který má všechny naše pracovní prostory běží někde na internetu. 291 00:13:44,890 --> 00:13:48,330 A to znamená, že všechny naše soubory jsou již veřejně přístupné. 292 00:13:48,330 --> 00:13:49,830 Tak pojďme do toho a to udělat. 293 00:13:49,830 --> 00:13:53,670 Chystám se jít dopředu a vytvoření nového souboru NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Budu jej uložit jako předtím as hello.html a klikněte na tlačítko Uložit. 295 00:13:58,819 --> 00:14:01,860 A teď jen proto, aby ušetřili čas, jdu jít dopředu a zkopírujte vložit tento kód 296 00:14:01,860 --> 00:14:03,470 spíše než ji přepište. 297 00:14:03,470 --> 00:14:04,550 A uložte jej. 298 00:14:04,550 --> 00:14:07,550 A tak teď mám soubor s názvem hello.html. 299 00:14:07,550 --> 00:14:09,710 Ale jak to mám vlastně otevřít jako webovou stránku? 300 00:14:09,710 --> 00:14:14,120 No, to dopadá vestavěný do CS50 IDE není jen překladač, jako kovový zvuk 301 00:14:14,120 --> 00:14:16,670 a debugger, jako GDB a svazky jiných programů, 302 00:14:16,670 --> 00:14:21,140 je to vlastně plnohodnotným webový server běží v CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Všichni z vás, to znamená, mít svůj vlastní webový server. 304 00:14:23,900 --> 00:14:26,850 A webový server je jen kus o software, jehož smysl života 305 00:14:26,850 --> 00:14:28,220 má sloužit až webových stránek. 306 00:14:28,220 --> 00:14:32,490 Chcete-li poslouchat na požadavek od prohlížeče a reagovat s malými virtuálními obálkami 307 00:14:32,490 --> 00:14:35,290 uvnitř které je obsah, který jsem napsal. 308 00:14:35,290 --> 00:14:38,372 Takže to web server skutečně zdarma a open source. 309 00:14:38,372 --> 00:14:40,830 V případě, open source jen znamená, software, který někdo jiný 310 00:14:40,830 --> 00:14:43,480 napsal, že každý z nás může skutečně vidět a stáhnout a dokonce 311 00:14:43,480 --> 00:14:44,780 změnit zdrojový kód. 312 00:14:44,780 --> 00:14:46,150 A je to jen Apache. 313 00:14:46,150 --> 00:14:51,450 >> A udělali jsme to trochu jednodušší použití v CS50IDE tím, že volá jej Apache 50. 314 00:14:51,450 --> 00:14:53,780 Tak, že to může vlastně pochopit následující. 315 00:14:53,780 --> 00:14:56,560 Budu říkat Apache 50 start. 316 00:14:56,560 --> 00:14:58,910 A pak jsem jen chtěl říct tečku. 317 00:14:58,910 --> 00:15:01,080 A vidíme některé poněkud Arcane zpráva říká, 318 00:15:01,080 --> 00:15:04,640 Nastavení Apache dokumentu [? Skupina?] domů, ubuntu, co to je, 319 00:15:04,640 --> 00:15:05,770 lomítko pracovní prostor. 320 00:15:05,770 --> 00:15:08,280 Spuštění web server Apache 2 úspěšně. 321 00:15:08,280 --> 00:15:11,330 >> Tak dlouhý příběh krátký, já právě stiskl tlačítko 322 00:15:11,330 --> 00:15:18,000 a obrátil se na webovém serveru, který je nyní poslouchá na Internetu na TCP portu 323 00:15:18,000 --> 00:15:20,587 80 na konkrétní adresu. 324 00:15:20,587 --> 00:15:22,420 A říká, že tady, a to se bude měnit v závislosti 325 00:15:22,420 --> 00:15:26,550 na své uživatelské jméno a dalších faktorech, nevšimnout teď, když jsem klikněte na to, 326 00:15:26,550 --> 00:15:30,211 IDE50 tečka jharvard a tak i tak si všimněte, že celou tu dobu 327 00:15:30,211 --> 00:15:31,960 Za posledních několik týdny, můžete mít 328 00:15:31,960 --> 00:15:35,200 si všiml, že vaše vlastní uživatelské jméno je zakotven v horní pravé ruce 329 00:15:35,200 --> 00:15:37,130 roh CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> A to vlastně bylo to všechno načasovat adresu, na které si můžete 331 00:15:41,050 --> 00:15:43,574 navštívit všechny soubory přes web. 332 00:15:43,574 --> 00:15:45,990 Až do teď, to není záleželo, protože v C, je obvykle 333 00:15:45,990 --> 00:15:48,073 chtějí věci běží v terminál, nikoli na webu. 334 00:15:48,073 --> 00:15:50,800 Ale dnes, začneme psaní webovým kódu 335 00:15:50,800 --> 00:15:53,350 že my chceme přístupné na veřejných URL. 336 00:15:53,350 --> 00:15:56,100 Takže to, co budu udělat, je klikněte na tuto adresu URL. 337 00:15:56,100 --> 00:16:00,880 >> A všimněte si, že vidím poměrně ošklivý index, je výpis adresáře, 338 00:16:00,880 --> 00:16:04,090 ale to, co soubor vyskočí na vás asi? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 To proto, že jsem ušetřil soubor ve svém pracovním prostoru. 341 00:16:07,870 --> 00:16:12,310 A to, co jsem řekl, Apache já webový server je hledat v Davidově pracovního prostoru adresáře. 342 00:16:12,310 --> 00:16:15,300 A ať někdo na svět vidět ty soubory. 343 00:16:15,300 --> 00:16:19,050 >> A skutečně, pokud teď klikněte na hello.html, 344 00:16:19,050 --> 00:16:22,180 Vidím v rámci této kartě přesně v tomto souboru. 345 00:16:22,180 --> 00:16:26,430 Nyní si všimnout, Cloud 9 to učinil něco trochu užitečné pro nás. 346 00:16:26,430 --> 00:16:29,480 V rámci CS50 IDE, Všimněte si, že je Najednou adresa bar. 347 00:16:29,480 --> 00:16:33,690 To proto, že i když jsme Chrome používáte k návštěvě CS50IDE, 348 00:16:33,690 --> 00:16:37,940 uvnitř CS50IDE je vlastní verze webového prohlížeče právě teď. 349 00:16:37,940 --> 00:16:40,820 A tak spíše než komplikovat věci jako takové, 350 00:16:40,820 --> 00:16:42,955 Chystám se pokračovat a stačí zkopírovat tuto adresu URL. 351 00:16:42,955 --> 00:16:45,330 Chystám se jít dopředu a jen otevřít své vlastní okno Chrome. 352 00:16:45,330 --> 00:16:47,800 Takže tam žádná kouzla tady, ne CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Já jsem prostě jít doslova vložit můj J Harvard URL a stiskněte klávesu Enter. 354 00:16:51,800 --> 00:16:54,750 A voila, teď jsem, a teoreticky, všichni 355 00:16:54,750 --> 00:16:57,700 na internetu, jestli jsem nakonfigurován oprávnění přiměřeně, 356 00:16:57,700 --> 00:16:58,720 mohou navštívit tento soubor. 357 00:16:58,720 --> 00:17:03,230 A tak teď, když jsem řekl, hello.html, voila, tam 358 00:17:03,230 --> 00:17:06,366 je můj neuvěřitelně nezaujatý webové stránky. 359 00:17:06,366 --> 00:17:07,740 Takže pojďme udělat rychlou kontrolu zdravý rozum. 360 00:17:07,740 --> 00:17:09,710 Vzhledem k tomu, to vše je koncepční nastavit. 361 00:17:09,710 --> 00:17:13,180 A my jsme ve skutečnosti opravdu naučil, jak psát HTML sám o sobě. 362 00:17:13,180 --> 00:17:16,084 Jakékoliv dotazy tak daleko o tom, co se stalo? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Ano. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Má CS50 vlastní tyto webové stránky? 367 00:17:25,800 --> 00:17:26,460 V jakém smyslu? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Dobrá otázka. 370 00:17:29,530 --> 00:17:32,429 Takže CS50 je vlastníkem CS50.io. 371 00:17:32,429 --> 00:17:33,970 Jsme opravdu koupil tento název domény. 372 00:17:33,970 --> 00:17:37,240 A od přírody z vás přihlášení do CS50IDE, 373 00:17:37,240 --> 00:17:39,270 vy všichni dostanete to, co se říká subdoménu. 374 00:17:39,270 --> 00:17:46,840 >> Takže IDE50-Malan, nebo IDE50-Rob.CS50.io, to je vaše jedinečná adresa v 375 00:17:46,840 --> 00:17:47,730 naše jméno domény. 376 00:17:47,730 --> 00:17:50,850 Takže pro účely kurzu, máte svůj vlastní unikátní adresu. 377 00:17:50,850 --> 00:17:55,150 Ale my jsme zjednodušený věci podle nákup domény nejvyšší úrovně, CS50 tečka 378 00:17:55,150 --> 00:17:58,050 I / O a pak všichni ostatní Uvnitř toho, abych tak řekl. 379 00:17:58,050 --> 00:17:59,890 A vrátíme se k tomu za pár týdnů pravděpodobně, 380 00:17:59,890 --> 00:18:01,930 zejména na závěrečný projekt Doba, kdy někteří z vás 381 00:18:01,930 --> 00:18:03,596 chtít, aby si své vlastní názvy domén. 382 00:18:03,596 --> 00:18:06,270 Je to vlastně poměrně přímočaré. 383 00:18:06,270 --> 00:18:06,770 Dobře. 384 00:18:06,770 --> 00:18:07,880 Takže pojďme teď tohle udělat. 385 00:18:07,880 --> 00:18:11,910 Chystám se vrátit do CS50IDE, kde můj soubor právě teď, 386 00:18:11,910 --> 00:18:14,710 hello.html, není všechno tak zajímavé. 387 00:18:14,710 --> 00:18:17,130 Chtěl bych udělat něco trochu hezčí než to. 388 00:18:17,130 --> 00:18:19,440 Takže já budu dělat něco takového. 389 00:18:19,440 --> 00:18:21,510 Dovolte mi, abych otevřené paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 Tak to je soubor, jsem napsal v předstihu. 391 00:18:23,560 --> 00:18:26,480 V jeho horní části, jako je vždy máme připomínky. 392 00:18:26,480 --> 00:18:28,730 Ale v HTML, komentáře vypadat trochu jinak. 393 00:18:28,730 --> 00:18:33,270 On line a tři linky 14, vy zobrazit syntaxi pro spuštění komentář 394 00:18:33,270 --> 00:18:34,020 a končí komentář. 395 00:18:34,020 --> 00:18:36,820 >> Ale nic z věcí v Mezi záležitosti funkčně. 396 00:18:36,820 --> 00:18:40,250 Je to jen poznámku do člověk, co se tady děje. 397 00:18:40,250 --> 00:18:43,040 A stejně jako rychlý zdravého rozumu zkontrolujte, jestli jsem posunout dolů, 398 00:18:43,040 --> 00:18:46,820 co je jasné nový tag, že jsme zavedli? 399 00:18:46,820 --> 00:18:52,130 Tagy dosud jsme viděli, jsou otevřeny držák HTML, hlava, titul, a tělo. 400 00:18:52,130 --> 00:18:54,400 Ale to, co je teď zřejmě nového? 401 00:18:54,400 --> 00:18:55,200 >> Jo, s. 402 00:18:55,200 --> 00:18:57,320 P tag nebo odstavec tag. 403 00:18:57,320 --> 00:19:01,182 A pak jsem jen půjčil nějaké default Latinský text představovat své odstavců. 404 00:19:01,182 --> 00:19:03,390 Protože to, co jsem chtěl ukazují, je, jak byste mohli 405 00:19:03,390 --> 00:19:05,859 představují odstavců textu ve formátu HTML. 406 00:19:05,859 --> 00:19:08,400 A tak to, co se začíná dít Zde je to, že tam je již 407 00:19:08,400 --> 00:19:09,657 vzor vyvíjí. 408 00:19:09,657 --> 00:19:10,990 A nech mě jít dál a udělat. 409 00:19:10,990 --> 00:19:12,760 Dovolte mi, abych nejprve vypnout Apache. 410 00:19:12,760 --> 00:19:17,340 A budu se říct, že začít sám opět v dnešní zdroje sedmi 411 00:19:17,340 --> 00:19:18,420 m adresář. 412 00:19:18,420 --> 00:19:20,100 Tak, že mám přístup ke všemu. 413 00:19:20,100 --> 00:19:22,230 >> A teď, když jsem se vrátit do Tento výpis adresáře, 414 00:19:22,230 --> 00:19:24,846 Všiml jsem si, vidět každý soubor z dnes. 415 00:19:24,846 --> 00:19:26,720 A uvidíte v Dalším problémem set, budeme 416 00:19:26,720 --> 00:19:28,594 poskytne pokyny pro dělání přesně tohle. 417 00:19:28,594 --> 00:19:35,210 Pokud otevřu paragraphs.html, by to mohlo stejně vypadají jako programovací jazyk 418 00:19:35,210 --> 00:19:36,970 pro vás, pokud nechcete mluvit nebo číst latinsky. 419 00:19:36,970 --> 00:19:40,525 Ale to je jen tři body z textu, které jsou označeny v HTML. 420 00:19:40,525 --> 00:19:43,100 >> A všimněte si odstavce přestávky mezi nimi. 421 00:19:43,100 --> 00:19:46,400 Protože se ukázalo, ai když vás 422 00:19:46,400 --> 00:19:49,210 může mít sklon k tomu, zatímco v reálném světě, 423 00:19:49,210 --> 00:19:51,370 pokud chcete, aby řádek přestávky mezi věcmi, 424 00:19:51,370 --> 00:19:55,680 byste mohli jednoduše to a hit Uložit. 425 00:19:55,680 --> 00:19:59,460 A teď, když jsem znovu tady, oznámení že všechno, co jen stírá spolu 426 00:19:59,460 --> 00:20:01,100 pouze v jednom kaňka textu. 427 00:20:01,100 --> 00:20:03,570 Vzhledem k tomu, HTML je trochu hloupý jazyka. 428 00:20:03,570 --> 00:20:07,230 >> Je určen pro použití v takovém způsobem, že prohlížeč bude jen 429 00:20:07,230 --> 00:20:09,920 dělat explicitně, co si to říct dělat. 430 00:20:09,920 --> 00:20:12,890 Takže pokud nechcete to říct dej mi nový odstavec, 431 00:20:12,890 --> 00:20:14,569 vy nebudete vidět nový odstavec. 432 00:20:14,569 --> 00:20:16,360 A ve skutečnosti, co Prohlížeč bude dělat 433 00:20:16,360 --> 00:20:20,020 je iv případě, že stisknete klávesu Enter, řekněme, že znovu a znovu 434 00:20:20,020 --> 00:20:23,190 a znovu, pohybující se tento textový způsobem dolů na obrazovce a pak uložit 435 00:20:23,190 --> 00:20:26,610 a pak znovu načíst, prohlížeč se děje ke zhroucení všechny ty bílé místo 436 00:20:26,610 --> 00:20:29,021 do jen jediné viditelné mezery. 437 00:20:29,021 --> 00:20:29,520 Dobře. 438 00:20:29,520 --> 00:20:30,869 Tak to je značka odstavce. 439 00:20:30,869 --> 00:20:32,910 A tak to, co je vzor že rozvíjející se tady? 440 00:20:32,910 --> 00:20:37,450 No, zdá se, že v případě, že HTML je především o zahájení značku 441 00:20:37,450 --> 00:20:38,460 a končí tag. 442 00:20:38,460 --> 00:20:39,300 A co je to značka? 443 00:20:39,300 --> 00:20:41,160 No, je to jen kus syntaxe. 444 00:20:41,160 --> 00:20:44,400 Otevřete držák, klíčové slovo, uzavřený držák, je značka. 445 00:20:44,400 --> 00:20:45,510 Nebo počáteční značka. 446 00:20:45,510 --> 00:20:48,590 A pak, když jste udělal vyjádření sebe sama, 447 00:20:48,590 --> 00:20:52,300 stejně jako v budete hotovi s odstavcem, učiníte tak říkajíc opak. 448 00:20:52,300 --> 00:20:55,480 Ale opak není úplně dozadu. 449 00:20:55,480 --> 00:21:00,630 >> Prostě prefix stejná značka je jméno s lomítkem, jako je tento. 450 00:21:00,630 --> 00:21:01,130 Dobře. 451 00:21:01,130 --> 00:21:02,570 Takže není vše, co vzrušující. 452 00:21:02,570 --> 00:21:05,270 A ve skutečnosti, nejsme učinit web všechno zajímavější. 453 00:21:05,270 --> 00:21:07,630 Co když chci, aby se věci větší a odvážné? 454 00:21:07,630 --> 00:21:11,780 Tak to dopadá, že tady je příklad v headings.html, kde se v mém těle, 455 00:21:11,780 --> 00:21:17,280 Mám tag H1, H2, H3, čtyři, pět, nebo šest, z nichž všechny 456 00:21:17,280 --> 00:21:18,310 Zdá se docela Arcane. 457 00:21:18,310 --> 00:21:21,010 Ale když jdu otevřít tento příklad, pojďme se podívat. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Takže prohlížečů ve výchozím nastavení vám může dát textu to je velký a odvážný nesourodých velikostí. 460 00:21:27,030 --> 00:21:28,070 H1 je velký. 461 00:21:28,070 --> 00:21:31,240 H6 je menší a poté všechno ostatní mezi tím. 462 00:21:31,240 --> 00:21:34,170 Tak to je zajímavé, ale stále není opravdu web vím. 463 00:21:34,170 --> 00:21:36,870 Co když chceme mám něco jako seznam. , 464 00:21:36,870 --> 00:21:40,190 Takže tady je seznam s odrážkami tři z Harvardu domů. 465 00:21:40,190 --> 00:21:41,600 >> Jak jste jít o dělá? 466 00:21:41,600 --> 00:21:45,410 No, podívejte se na list.html. 467 00:21:45,410 --> 00:21:47,870 A tady vidíme trochu funkiness 468 00:21:47,870 --> 00:21:49,630 ale uvažujme, co se děje. 469 00:21:49,630 --> 00:21:56,182 Takže na základě toho, co jste právě viděli, UL je zkratka pro výčtu. 470 00:21:56,182 --> 00:21:57,640 Nečíslovaný seznam prostě znamená odrážkami. 471 00:21:57,640 --> 00:21:58,431 Neexistuje žádná čísla. 472 00:21:58,431 --> 00:22:01,850 K dispozici je také něco, co nazývá objednat seznam, který je OL na značku. 473 00:22:01,850 --> 00:22:05,350 Potom LI, seznam položek je vše, co znamená. 474 00:22:05,350 --> 00:22:07,790 >> A automaticky, takže jej Čísla vše za vás. 475 00:22:07,790 --> 00:22:11,270 Ale opět, všechny mé odsazení a bílý prostor je jen kvůli mně. 476 00:22:11,270 --> 00:22:13,050 Prohlížeč není vlastně bude starat. 477 00:22:13,050 --> 00:22:16,670 Takže i když jste nemohli to udělat, jen aby bylo jasno, 478 00:22:16,670 --> 00:22:19,880 byste neměli, přestože prohlížeč bude stále 479 00:22:19,880 --> 00:22:22,130 být schopen pochopit, že v pohodě. 480 00:22:22,130 --> 00:22:24,590 Jsem bít znovu načíst v mém prohlížeč, já klepnutím znovu načíst 481 00:22:24,590 --> 00:22:26,760 a žádná změna se děje protože prohlížeč stále 482 00:22:26,760 --> 00:22:29,550 dělá přesně to, co ti řeknu to udělat. 483 00:22:29,550 --> 00:22:30,050 >> Dobře. 484 00:22:30,050 --> 00:22:31,340 Tak to je všechno jen textu. 485 00:22:31,340 --> 00:22:33,730 Nyní pojďme dělat něco zajímavějšího. 486 00:22:33,730 --> 00:22:36,660 Chystám se jít dopředu a půjčovat si některé z těchto HTML. 487 00:22:36,660 --> 00:22:40,910 Chystám se jít dopředu a vytvoření nového souboru zde. 488 00:22:40,910 --> 00:22:43,370 A budeme nazývat rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Máme neúměrně Použité něco 491 00:22:48,916 --> 00:22:51,290 volal válec rick v tomto třídy v tomto roce, já nevím, 492 00:22:51,290 --> 00:22:53,880 prostě se to stalo organicky. 493 00:22:53,880 --> 00:22:55,397 >> A teď se to vymkne z rukou. 494 00:22:55,397 --> 00:22:56,730 Takže jsem prostě jít s ním. 495 00:22:56,730 --> 00:22:59,700 A když půjdu do Google Obrazy a Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Pokud nevíte, proč děláme to, jen přečíst na Wikipedii. 498 00:23:06,170 --> 00:23:11,520 Pokaždé, když jste klikli na odkaz, někdo smál někde. 499 00:23:11,520 --> 00:23:14,860 A nech mě jít tam ahead-- jdeme, pojďme zobrazit tento obrázek. 500 00:23:14,860 --> 00:23:16,750 >> Takže zde máme obraz v Google Images. 501 00:23:16,750 --> 00:23:19,390 A předpokládejme, že je to rozumně všude na internetu. 502 00:23:19,390 --> 00:23:22,570 Takže budu předpokládat, že je to v pořádku pro mě aby skutečně dát to do mé webové stránky. 503 00:23:22,570 --> 00:23:24,820 Chystám se pokračovat a zkopírujte adresu URL obrázku. 504 00:23:24,820 --> 00:23:28,600 A teď, když jsem se vrátit do Cloud 9, pojďme se podívat, co se dá dělat. 505 00:23:28,600 --> 00:23:30,630 Tak tady je jen webové stránky. 506 00:23:30,630 --> 00:23:39,020 To je Rick Astley, haha, Chystám se teď vrátit 507 00:23:39,020 --> 00:23:43,510 do svého prohlížeče, znovu, a zajímavé. 508 00:23:43,510 --> 00:23:44,530 >> Kde je Rick? 509 00:23:44,530 --> 00:23:46,050 Tak se ukažte, co se stalo. 510 00:23:46,050 --> 00:23:49,114 Vlastně, budu předstírat, že jsem to neudělal. 511 00:23:49,114 --> 00:23:50,280 [Neslyšitelný] ho sem. 512 00:23:50,280 --> 00:23:52,520 Vrátíme k tomu za chvíli. 513 00:23:52,520 --> 00:23:54,200 Tak tady je rick.html. 514 00:23:54,200 --> 00:23:56,070 Takže to není Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Tak to dopadá v našich silách ve skutečnosti ho přidat sem. 516 00:23:59,680 --> 00:24:00,830 To je Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Chystám se říct, aby mi snímek, jehož Zdroj je URL jsem kopírovány, který 518 00:24:06,680 --> 00:24:09,110 zřejmě je šťastný narozeniny něco nebo jiný. 519 00:24:09,110 --> 00:24:13,280 >> A teď budu zavřít značku, jako je tento. 520 00:24:13,280 --> 00:24:15,170 Tak to je super dlouhé balení. 521 00:24:15,170 --> 00:24:17,740 Ale všimněte si, že všechno, co jsem udělal, je otevřený držák image, 522 00:24:17,740 --> 00:24:20,270 zdroj s atributem tohoto. 523 00:24:20,270 --> 00:24:21,530 A je to opravdu dlouhá URL. 524 00:24:21,530 --> 00:24:23,720 A na samém konci, nevšiml. 525 00:24:23,720 --> 00:24:29,530 Proč jsem udělal lomítko úhlový držák místo, jako každý jiný tag, 526 00:24:29,530 --> 00:24:33,590 mající otevřený držák, IMG, uzavřený držák? 527 00:24:33,590 --> 00:24:37,040 Jen se hádat, i když jste nemají znalosti vůbec 528 00:24:37,040 --> 00:24:40,410 HTML předtím. 529 00:24:40,410 --> 00:24:42,710 >> Tak to je, jak se zavře příkaz, ale proč 530 00:24:42,710 --> 00:24:45,850 to není opravdu dělat intuitivní smysl udělat něco trochu více 531 00:24:45,850 --> 00:24:48,820 upovídaném jako úzké image? 532 00:24:48,820 --> 00:24:51,400 To jo. 533 00:24:51,400 --> 00:24:52,000 To jo. 534 00:24:52,000 --> 00:24:55,620 Jen sémanticky, neexistuje žádný smysl zahájením obraz a konče obraz, 535 00:24:55,620 --> 00:24:56,870 je to buď tam, nebo to není. 536 00:24:56,870 --> 00:25:00,960 Takže to nemá smysl nechat mezeru pro nic jiného uvnitř obrazu. 537 00:25:00,960 --> 00:25:02,010 Ty prostě nemůže udělat. 538 00:25:02,010 --> 00:25:03,720 A tak se syntaxe by obecně být jen 539 00:25:03,720 --> 00:25:07,910 udělat lomítko uvnitř otevřeného tagu nebo počáteční značkou 540 00:25:07,910 --> 00:25:09,020 a pak kliknout na Uložit. 541 00:25:09,020 --> 00:25:13,350 >> Takže když jsem se teď znovu načíst tento soubor, nyní Mám dobrý web stránek kuchyni sem. 542 00:25:13,350 --> 00:25:15,100 A mohli bychom jistě opravdu obtěžují lidi 543 00:25:15,100 --> 00:25:17,010 vložením místo jako odkaz na YouTube. 544 00:25:17,010 --> 00:25:19,350 A ve skutečnosti, kdykoliv jste někdy šel na YouTube, 545 00:25:19,350 --> 00:25:22,190 a dovolte mi, abych vlastně náhodou rick role jsem tady. 546 00:25:22,190 --> 00:25:25,770 Takže Rick role. 547 00:25:25,770 --> 00:25:29,592 Takže Rick roll-- já jdu sem. 548 00:25:29,592 --> 00:25:31,900 >> [Přehrávání hudby] 549 00:25:31,900 --> 00:25:33,730 >> OK, jeden člověk se to líbilo. 550 00:25:33,730 --> 00:25:37,270 Takže si všimnout celou tu dobu, pokud vás klepněte na odkaz Sdílet, vás samozřejmě 551 00:25:37,270 --> 00:25:41,390 získat adresu URL, které můžete ve skutečnosti vložit do e-mailu nebo forenzní image 552 00:25:41,390 --> 00:25:43,730 nebo ve problém nastavit nebo ve snímku. 553 00:25:43,730 --> 00:25:49,055 A teď, když jsem místo toho klikněte na embed, Všimněte si, že celou tu dobu, tohle 554 00:25:49,055 --> 00:25:49,680 byl tam. 555 00:25:49,680 --> 00:25:50,910 Chystám se jít dopředu a kopírovat to. 556 00:25:50,910 --> 00:25:54,000 >> A jen tak můžeme lépe vidět, že jsem chystá vložit ho do textového editoru. 557 00:25:54,000 --> 00:25:55,860 Všimněte si, že tohle YouTube byl říkám. 558 00:25:55,860 --> 00:25:57,693 Pokaždé, když navštívíte YouTube video, pokud jste 559 00:25:57,693 --> 00:26:00,410 chcete vložit video na webové stránky, jednoduše uchopit toto. 560 00:26:00,410 --> 00:26:03,350 Takže tohle je další HTML tag nazvaný iframe. 561 00:26:03,350 --> 00:26:04,590 Nebo in line rámu. 562 00:26:04,590 --> 00:26:08,680 Tak to také vypadá trochu víc složitější než všechny ostatní. 563 00:26:08,680 --> 00:26:11,950 Tak to dopadá, že obraz tag a zřejmě tag iframe 564 00:26:11,950 --> 00:26:13,370 vzít, co se nazývá atributy. 565 00:26:13,370 --> 00:26:15,710 >> A to je další kus syntaxi v HTML. 566 00:26:15,710 --> 00:26:19,240 Kromě tagu název, otevřený držák jmenovka, 567 00:26:19,240 --> 00:26:23,780 můžete ovládat chování tagu tím, že má spoustu atributu 568 00:26:23,780 --> 00:26:24,860 se rovná hodnotě. 569 00:26:24,860 --> 00:26:26,290 Atribut se rovná hodnotě. 570 00:26:26,290 --> 00:26:28,100 A tak například, YouTube nám říká, 571 00:26:28,100 --> 00:26:31,990 pokud chcete, šířku tohoto videa být 420 pixelů a výška 572 00:26:31,990 --> 00:26:35,470 být 315 pixelů, to je jak to vyjádřit ve formátu HTML. 573 00:26:35,470 --> 00:26:38,480 >> Zdrojem videa se děje se, že dlouhé YouTube URL 574 00:26:38,480 --> 00:26:40,830 a pak některé další věci jako rám hranice je nula, 575 00:26:40,830 --> 00:26:43,500 takže pravděpodobně znamená, že je bez ohraničení kolem věci. 576 00:26:43,500 --> 00:26:45,450 Umožnit celou obrazovku pravděpodobně Znamená to, že uživatel 577 00:26:45,450 --> 00:26:47,840 můžete kliknout na tlačítko a vlastně celé obrazovce video. 578 00:26:47,840 --> 00:26:52,870 Takže jestli opravdu chci být působivý tady v Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 spíše než použít značku obrazu, ať me odstranit, že místo toho vložit tento. 580 00:26:58,490 --> 00:27:00,810 A teď znovu. 581 00:27:00,810 --> 00:27:02,500 A teď je to tady zase. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Dobře, to stačí. 584 00:27:06,020 --> 00:27:08,970 Dobře, takže se budu snažit těžké to udělat znovu. 585 00:27:08,970 --> 00:27:11,400 Takže jaké jsou některé z takeaways tady? 586 00:27:11,400 --> 00:27:15,130 Takže HTML, tak ošklivá, jak těchto webových stránkách jsou, je vlastně docela jednoduchý. 587 00:27:15,130 --> 00:27:16,467 Není to programovací jazyk. 588 00:27:16,467 --> 00:27:17,550 Nemá funkce. 589 00:27:17,550 --> 00:27:18,410 Nemá smyčky. 590 00:27:18,410 --> 00:27:19,535 Nemá podmínky. 591 00:27:19,535 --> 00:27:22,900 Vše, co to má, je desítky různé značky, z nichž každá 592 00:27:22,900 --> 00:27:24,620 má nulovou nebo více atributů. 593 00:27:24,620 --> 00:27:27,320 A ve skutečnosti to, co je zábavné o HTML jak začnete ponořit do 594 00:27:27,320 --> 00:27:29,560 je, že je velmi sebe učenlivý. 595 00:27:29,560 --> 00:27:32,880 >> Vše, co to vyžaduje, je pochopení obecného rámce HTML. 596 00:27:32,880 --> 00:27:36,510 Co je to značka, jaká je atributem, jak si vlastně nakonfigurovat webovou stránku 597 00:27:36,510 --> 00:27:37,250 jak následuje. 598 00:27:37,250 --> 00:27:40,720 A všechno ostatní je opravdu výsledek dívat se v on-line reference 599 00:27:40,720 --> 00:27:43,080 nebo googling jak udělat nějaké techniky nebo jak jsme viděli, 600 00:27:43,080 --> 00:27:45,371 při pohledu na Facebook zdroje kódu, při pohledu na webové stránky 601 00:27:45,371 --> 00:27:48,710 že se vám líbí na to je zdrojový kód a pochopení toho, jak vývojáři tam 602 00:27:48,710 --> 00:27:50,550 vlastně položil věci. 603 00:27:50,550 --> 00:27:52,180 >> Takže můžeme dělat obrazy stejně. 604 00:27:52,180 --> 00:27:53,994 A ve skutečnosti, to udělali jsme před chvílí. 605 00:27:53,994 --> 00:27:55,410 Nech mě jít napřed a jen ukázat vám. 606 00:27:55,410 --> 00:27:56,770 Zde je několik ukázkový kód. 607 00:27:56,770 --> 00:27:58,380 Pokud jste někdy chtěli vidět nevrlý kočku. 608 00:27:58,380 --> 00:28:00,620 Tak si všimněte, že mohu mají značku obrázku zde. 609 00:28:00,620 --> 00:28:02,090 A já mám poznámku nad ní. 610 00:28:02,090 --> 00:28:04,490 Mám alternativu text pro přístupnost. 611 00:28:04,490 --> 00:28:07,250 Takže někdo, kdo je pomocí obrazovky čtenář z důvodů pohled 612 00:28:07,250 --> 00:28:10,172 mohou ve skutečnosti pak mají své Čtečka obrazovky říkají nevrlý kočku. 613 00:28:10,172 --> 00:28:11,880 Protože pokud to není možné viz obrázek, oni 614 00:28:11,880 --> 00:28:14,504 mohou mít alespoň jejich počítač řekněte jim, ústně, co to je. 615 00:28:14,504 --> 00:28:18,020 A zdrojem tohoto souboru je cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Takže ve skutečnosti, když jsem chtěl dostat chytrý, co jsem mohl mít done-- 617 00:28:22,472 --> 00:28:25,680 Slibuji, že nebudu jít do Rick Astley, tak Budu google pro kočku místo. 618 00:28:25,680 --> 00:28:28,290 A když jsem se jít na Google Images tady, a my předpokládáme, 619 00:28:28,290 --> 00:28:30,040 že se jedná o obraz mého kocoura. 620 00:28:30,040 --> 00:28:35,070 >> Předpokládejme, že mám kontrola klikl nebo vpravo klikli na to, náhodně 621 00:28:35,070 --> 00:28:35,630 strašidelný. 622 00:28:35,630 --> 00:28:40,320 A cat.jpeg Jdu ušetřit na mém desktopu. 623 00:28:40,320 --> 00:28:44,700 Dovolte mi, abych se vrátit k Cloud 9. 624 00:28:44,700 --> 00:28:48,150 Všimněte si, že tady můžu jít nahrát místní soubory. 625 00:28:48,150 --> 00:28:51,530 A když jsem to chytit Soubor, cat.jpeg, oznámení 626 00:28:51,530 --> 00:28:54,674 že mohu přetáhnout a hodit ho do Cloud 9 627 00:28:54,674 --> 00:28:56,090 a to bude křičet na mě tady. 628 00:28:56,090 --> 00:28:59,000 >> Protože jsme již vám dal soubor cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 ale je to super snadno urvat fotografii, kterou jste si 630 00:29:01,430 --> 00:29:03,220 převzato z Facebooku nebo Flickr nebo podobně 631 00:29:03,220 --> 00:29:05,678 a vlastně jej přetáhněte do Cloud 9 a pak se to 632 00:29:05,678 --> 00:29:07,970 součástí vašeho vlastního osobního webové stránky nebo problém 633 00:29:07,970 --> 00:29:10,442 nastavit sedm nebo osm, jak budeme brzy vidět. 634 00:29:10,442 --> 00:29:12,150 A pak, když vás konečně navštívit tu kočku, 635 00:29:12,150 --> 00:29:16,610 za předpokladu, Stáhnul jsem si, že stejné kočku, Oznámení that-- že byl rozkošný. 636 00:29:16,610 --> 00:29:19,160 >> Co byste vidět, je něco takového obličej zde. 637 00:29:19,160 --> 00:29:21,810 Takže soubory, které jste Odkaz na webové stránky 638 00:29:21,810 --> 00:29:26,050 mohou být buď lokální ve své vlastní účet nebo vzdálené na jiném serveru 639 00:29:26,050 --> 00:29:29,670 jako je tomu v případě Rick Astley fotografie před chvílí. 640 00:29:29,670 --> 00:29:32,990 Tak kde to, co else-- jinak můžeme dělat? 641 00:29:32,990 --> 00:29:34,890 Takže pojďme se podívat na následující. 642 00:29:34,890 --> 00:29:36,160 Víte, co je trochu cool? 643 00:29:36,160 --> 00:29:39,330 >> Dosud jsme dělali velmi statické webové stránky. 644 00:29:39,330 --> 00:29:41,830 Chci okořenit věci takto. 645 00:29:41,830 --> 00:29:44,344 Chci, aby mé vlastní vyhledávač. 646 00:29:44,344 --> 00:29:47,010 Tak, aby se vyhledávače, pojďme jděte do toho a začít dělat to. 647 00:29:47,010 --> 00:29:52,570 Chystám se jít dopředu a vytvořit nový soubor s názvem search.html. 648 00:29:52,570 --> 00:29:54,890 A my jsme prefabed verze on-line. 649 00:29:54,890 --> 00:29:56,027 Jejda. 650 00:29:56,027 --> 00:29:57,610 Nepoužívejte vložit do okna vašeho terminálu. 651 00:29:57,610 --> 00:29:58,744 Montované verze on-line. 652 00:29:58,744 --> 00:30:00,160 A já začnu následovně. 653 00:30:00,160 --> 00:30:04,490 Tak tady je to začátek soubor s názvem search.html. 654 00:30:04,490 --> 00:30:07,510 Budu uložit jej do dnešní zdrojový adresář. 655 00:30:07,510 --> 00:30:09,079 Budu volat tuto Hledat. 656 00:30:09,079 --> 00:30:10,370 Vlastně, budeme dělat to lépe. 657 00:30:10,370 --> 00:30:13,600 CS50 Search a vlastně to značka. 658 00:30:13,600 --> 00:30:17,500 A teď, budu říkat něco jako H1 CS50 Search. 659 00:30:17,500 --> 00:30:20,930 A pak tady dole, H2 brzy. 660 00:30:20,930 --> 00:30:23,230 A jen shrnout, H1 a H2 mysli to, co v tomto pořadí? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Jo, tak velké a odvážné, a není tak velký, ale stále tučně. 663 00:30:30,320 --> 00:30:37,375 Takže když jsem se zachránit to a jít sem, podívejme se soubor search.html. 664 00:30:37,375 --> 00:30:42,560 Dobře, a ten je right-- [neslyšitelný]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Připravit. 667 00:30:49,110 --> 00:30:49,945 David je zmatený. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, je to přímo tam. 670 00:30:54,080 --> 00:30:54,860 David je idiot. 671 00:30:54,860 --> 00:30:55,420 DOBŘE. 672 00:30:55,420 --> 00:30:56,660 Tak tady to je. 673 00:30:56,660 --> 00:30:58,350 Takže CS50 hledání brzy. 674 00:30:58,350 --> 00:31:00,370 Takže teď, pojďme syntetizovat to, co jsme dělali minulý týden. 675 00:31:00,370 --> 00:31:03,400 >> Tam, kde jsme hovořili o nižší mechanika HTTP úrovni. 676 00:31:03,400 --> 00:31:05,780 A tyto nové nápady HTML, který je jen 677 00:31:05,780 --> 00:31:08,890 to značkovací jazyk kde na vás řekněte prohlížeč přesně, co dělat 678 00:31:08,890 --> 00:31:10,740 a realizovat naše vlastní vyhledávač. 679 00:31:10,740 --> 00:31:12,520 Takže místo toho jen řka brzy, já jsem 680 00:31:12,520 --> 00:31:14,810 chystá zavést něco, co nazývá tag formuláře. 681 00:31:14,810 --> 00:31:19,610 A v této podobě, budu mít něco jako vstupní pole. 682 00:31:19,610 --> 00:31:22,450 >> A jméno tohoto vstupu pole, budu to říkat Q. 683 00:31:22,450 --> 00:31:26,240 A typ tomto vstupním poli Chystám se říct, je jen "text". 684 00:31:26,240 --> 00:31:29,130 A textové pole, jak jsme to vidět, je jen textové pole. 685 00:31:29,130 --> 00:31:32,830 A tak to není smysl tady mít něco uvnitř ní na tomto místě. 686 00:31:32,830 --> 00:31:35,320 A tak jsem prostě jít zavřít tag s tím 687 00:31:35,320 --> 00:31:38,099 lomítko přímo v tagu sám. 688 00:31:38,099 --> 00:31:39,890 A pak budu jeden jiný vstup. 689 00:31:39,890 --> 00:31:43,480 Typ vstupu rovná odeslat. 690 00:31:43,480 --> 00:31:45,320 A pak budu zavřít tenhle taky. 691 00:31:45,320 --> 00:31:46,840 >> A teď já jdu zpátky. 692 00:31:46,840 --> 00:31:49,520 A už vidíme, i když docela ošklivý, jsem 693 00:31:49,520 --> 00:31:52,460 dostal začátky moje vlastní vyhledávací stránku zde. 694 00:31:52,460 --> 00:31:55,150 Ve skutečnosti, dovolte mi, abych se snaží vyčistit to se trochu. 695 00:31:55,150 --> 00:31:57,330 Ukazuje se, že na vstup tady, můžu mít 696 00:31:57,330 --> 00:31:59,910 další atribut s názvem zástupný symbol. 697 00:31:59,910 --> 00:32:05,165 A já jsem mohl vidět něco jako klíčová slova, nebo více specificky, dotaz pro q. 698 00:32:05,165 --> 00:32:07,820 >> A všimněte si, teď, mám tento druh šedé textu 699 00:32:07,820 --> 00:32:10,440 že zmizí as Jakmile začnu psát, 700 00:32:10,440 --> 00:32:12,930 ale je to asi něco jste viděli v jiných webových stránkách. 701 00:32:12,930 --> 00:32:14,650 Nemám opravdu rád na tlačítko Odeslat. 702 00:32:14,650 --> 00:32:18,320 Takže jsem vlastně bude dát Tlačítko pro odeslání hodnotu vyhledávání. 703 00:32:18,320 --> 00:32:21,680 A teď, když jsem znovu, všimněte si, že můj Tlačítko stane jmenoval vyhledávání. 704 00:32:21,680 --> 00:32:24,140 Víte, já opravdu nemám stejně jako logo zde. 705 00:32:24,140 --> 00:32:27,140 Takže generátor Google Font. 706 00:32:27,140 --> 00:32:28,820 >> Chci okořenit to ještě výš. 707 00:32:28,820 --> 00:32:30,660 Takže CS50 vyhledávání. 708 00:32:30,660 --> 00:32:31,870 Dovolte mi, abych vytvořit vlastní logo. 709 00:32:31,870 --> 00:32:33,080 To vypadá hezky. 710 00:32:33,080 --> 00:32:36,945 Takže teď mi dovolte zachránit tento as-- pojď. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Tam, kde to jde? 713 00:32:43,120 --> 00:32:43,620 Tam. 714 00:32:43,620 --> 00:32:44,160 DOBŘE. 715 00:32:44,160 --> 00:32:44,980 Minul. 716 00:32:44,980 --> 00:32:47,740 Uložit jako. 717 00:32:47,740 --> 00:32:49,470 Hloupý prohlížečů. 718 00:32:49,470 --> 00:32:51,700 Stand by, budeme opravit jednou provždy. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Tam jedeme. 721 00:32:58,590 --> 00:32:59,090 Dobře. 722 00:32:59,090 --> 00:32:59,600 Litovat. 723 00:32:59,600 --> 00:33:00,750 Den volna. 724 00:33:00,750 --> 00:33:02,310 Nyní je to funky. 725 00:33:02,310 --> 00:33:03,160 Ukončete celou obrazovku. 726 00:33:03,160 --> 00:33:04,150 Dobře. 727 00:33:04,150 --> 00:33:06,870 >> Nyní, jako normální osoba, uložit obrázek jako. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Teď jdu do CS50IDE a Chystám se prostě chytit loga, 730 00:33:13,194 --> 00:33:15,360 Chystám se přetáhnout do Můj zdroj sedmi adresář, 731 00:33:15,360 --> 00:33:17,002 Soubor již existuje, já jsem s tím OK. 732 00:33:17,002 --> 00:33:19,210 Takže budu jej přepsat proto, že už jsem ho měl. 733 00:33:19,210 --> 00:33:20,630 A teď jak to mám zbavit tohoto? 734 00:33:20,630 --> 00:33:24,670 >> Pojďme napřed sem a dělat obrázek zdroj rovná logo.gif. 735 00:33:24,670 --> 00:33:25,490 Zavřete to. 736 00:33:25,490 --> 00:33:26,050 Ušetřete. 737 00:33:26,050 --> 00:33:30,560 A teď, když jsem se vrátit do svého vyhledávání strana, teď vypadá to docela dobře. 738 00:33:30,560 --> 00:33:33,610 Dobře, tak to nemá docela udělal něco užitečného. 739 00:33:33,610 --> 00:33:37,000 Ve skutečnosti, dovolte mi, abych zkusit vyhledávání pro kočku a uvidíme, co se stane. 740 00:33:37,000 --> 00:33:38,890 Kočky. 741 00:33:38,890 --> 00:33:39,420 Sakra. 742 00:33:39,420 --> 00:33:41,400 To není jen práce, zřejmě. 743 00:33:41,400 --> 00:33:43,760 Takže to, co je klíč kus že je tu chybí? 744 00:33:43,760 --> 00:33:49,100 >> Dobře, i když neznáte žádné HTML, Začal jsem označení, který formulář telefonu 745 00:33:49,100 --> 00:33:54,130 a já jsem řekl, to, jak se dostat vstupů, dej mi textové pole a tlačítko pro odeslání, 746 00:33:54,130 --> 00:33:55,730 co kus zjevně chybí? 747 00:33:55,730 --> 00:33:58,975 Předpokládejme, že chceme, aby skutečně dostat tahle věc pracuje správně. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Co musíme udělat? 750 00:34:05,360 --> 00:34:08,860 Máme potřebu zavést zadní konec databázi nebo vyhledávač sám, 751 00:34:08,860 --> 00:34:11,210 a že to bude trvat spoustu času, upřímně. 752 00:34:11,210 --> 00:34:13,380 >> Takže pamatujte, co jsme dělali minule. 753 00:34:13,380 --> 00:34:18,230 Takže pokud hledáte něco na Googlu a vy jste v předstihu vypnutý, 754 00:34:18,230 --> 00:34:20,355 Připomeňme, okamžité vyhledávání. 755 00:34:20,355 --> 00:34:22,230 Dovolte mi tedy vypni to tak, že toto ve skutečnosti 756 00:34:22,230 --> 00:34:26,650 se chová jako starší školní prohlížeče, když jsem teď hledat něco jako kočky, 757 00:34:26,650 --> 00:34:28,190 vzpomenout, co URL vypadá. 758 00:34:28,190 --> 00:34:29,449 Je to docela tajemný. 759 00:34:29,449 --> 00:34:33,000 Ale vložené tam, Připomeňme, je lomítko vyhledávání. 760 00:34:33,000 --> 00:34:35,100 Otazník q se rovná kočky. 761 00:34:35,100 --> 00:34:37,760 >> A to se zdá, aby mi celá parta výsledků vyhledávání. 762 00:34:37,760 --> 00:34:39,134 Takže víte, co budu dělat? 763 00:34:39,134 --> 00:34:41,650 Jdu si půjčit Google na chvilku. 764 00:34:41,650 --> 00:34:43,670 Chystám se jít přes tady a budu říkat 765 00:34:43,670 --> 00:34:47,850 že tato tvoří opatření nebo cíl, abych tak řekl, 766 00:34:47,850 --> 00:34:49,330 by měla být doslova Google. 767 00:34:49,330 --> 00:34:52,590 A metoda jsem chtěl po použití bude mít. 768 00:34:52,590 --> 00:34:53,560 >> Takže to, co je akce? 769 00:34:53,560 --> 00:34:55,760 Akce je podivně pojmenovaný, ale to jen znamená, 770 00:34:55,760 --> 00:34:58,120 kdo bude zpracovávat akce tohoto formuláře? 771 00:34:58,120 --> 00:35:00,820 Když jsem klepněte na tlačítko Hledat, kde by měl výsledek jít? 772 00:35:00,820 --> 00:35:05,300 A když jsem se teď vrátit k mé podobě tady a obnovte mé webové stránky 773 00:35:05,300 --> 00:35:09,000 a teď něco hledat jako pes, všimněte si nyní 774 00:35:09,000 --> 00:35:10,850 Jsem znovu zavedena Google. 775 00:35:10,850 --> 00:35:11,350 Je to tak? 776 00:35:11,350 --> 00:35:14,141 >> Pokud chci něco hledat jinak, to funguje u nejen psy, 777 00:35:14,141 --> 00:35:16,400 funguje i pro kočky. 778 00:35:16,400 --> 00:35:21,930 Funguje také na CS50. 779 00:35:21,930 --> 00:35:24,310 A OK, je to jen pod zdrcující, není to? 780 00:35:24,310 --> 00:35:25,920 Dobře, ale to vlastně funguje. 781 00:35:25,920 --> 00:35:27,360 Tak co se skutečně děje? 782 00:35:27,360 --> 00:35:31,340 Takže jsem učil můj prohlížeč, pomocí HTML, aby se vstup od uživatele 783 00:35:31,340 --> 00:35:35,810 a vlastně poslat ten vstup ke vzdálenému serveru pomocí protokolu HTTP. 784 00:35:35,810 --> 00:35:39,120 >> A protože mém prohlížeči chápe HTTP, to vlastně 785 00:35:39,120 --> 00:35:43,500 konstruovat tak, aby to, co URL Skončím přes v mém prohlížeči, 786 00:35:43,500 --> 00:35:45,660 Všimněte si, co se stane, když jsem hledal psa. 787 00:35:45,660 --> 00:35:49,270 Kdybych klepněte na tlačítko Hledat, Všimněte si, že URL se mění, jak jsem zamýšlel 788 00:35:49,270 --> 00:35:52,770 na google.com/search~~V dotaz rovná psa. 789 00:35:52,770 --> 00:35:56,020 A to proto, že formě ví, protože metoda je získat, 790 00:35:56,020 --> 00:35:59,560 jednoduše připojit ji k této tam URL. 791 00:35:59,560 --> 00:36:01,730 >> Nyní, tyto webové stránky jsou stále ošklivé. 792 00:36:01,730 --> 00:36:04,890 Takže pojďme představit jeden další kus syntaxe pokud můžeme dnes. 793 00:36:04,890 --> 00:36:07,640 A to je něco, známý jako kaskádových stylů. 794 00:36:07,640 --> 00:36:10,720 Dovolte mi tedy se podívat na Tento příklad tady a vidět 795 00:36:10,720 --> 00:36:12,380 pokud můžeme odvodit, co se děje. 796 00:36:12,380 --> 00:36:14,520 To je CSS0.html. 797 00:36:14,520 --> 00:36:16,532 A to je místo, kde se věci trochu ošklivé. 798 00:36:16,532 --> 00:36:18,490 Vzhledem k tomu, bohužel, ve světě internetu, 799 00:36:18,490 --> 00:36:20,920 HTML sám o sobě nemůže dělat všechno. 800 00:36:20,920 --> 00:36:22,920 A tak pokud chcete stylizovat své webové stránky, 801 00:36:22,920 --> 00:36:28,370 je skutečně třeba se zaměřit na estetika v odlišným způsobem. 802 00:36:28,370 --> 00:36:33,090 Tak tady, mám tělo mém webu strana, jehož vnitřek je velký div. 803 00:36:33,090 --> 00:36:34,700 A div prostě znamená rozdělení. 804 00:36:34,700 --> 00:36:38,060 Takže je to jako bod, ale to nemá stejnou sémantiku 805 00:36:38,060 --> 00:36:39,180 z odstavce textu. 806 00:36:39,180 --> 00:36:40,940 >> To jen znamená, že k prohlížeče, přichází 807 00:36:40,940 --> 00:36:45,210 velký obdélníkový oblast mém webu strana, chci s ní zacházet zvlášť. 808 00:36:45,210 --> 00:36:47,420 Nyní, linka 21 je místo, kde začíná, že div. 809 00:36:47,420 --> 00:36:48,770 A stačí se hádat. 810 00:36:48,770 --> 00:36:53,080 Jaký je vliv řádku 21 na Zbytek obsahu stránky? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Středící to. 813 00:36:56,311 --> 00:36:56,810 To je vše. 814 00:36:56,810 --> 00:36:58,830 Takže jsme neviděli způsob ve skutečnosti centrování textu. 815 00:36:58,830 --> 00:37:00,996 >> Ve skutečnosti, moje vyhledávače, na rozdíl od skutečného Google, 816 00:37:00,996 --> 00:37:03,040 všechno bylo odůvodněno směrem doleva. 817 00:37:03,040 --> 00:37:07,430 A tak nyní v řádku 21, říkám, hej browser, vytvořte rozdělení stránky. 818 00:37:07,430 --> 00:37:09,450 Jen mi dejte velký, neviditelný obdélník. 819 00:37:09,450 --> 00:37:11,490 To je to, jak chci myslet na webové stránky. 820 00:37:11,490 --> 00:37:13,870 A pak to stylizace takto. 821 00:37:13,870 --> 00:37:16,900 Uvnitř těchto citací, Nyní, je druhý jazyk 822 00:37:16,900 --> 00:37:19,969 že jsme zavedli dnes tzv kaskádové styly. 823 00:37:19,969 --> 00:37:22,010 Naštěstí, to taky není programovací jazyk, 824 00:37:22,010 --> 00:37:26,470 tak je to velmi omezený v jeho syntaxi, ale také velmi omezen ve své funkčnosti 825 00:37:26,470 --> 00:37:30,670 vzhledem k tomu, HTML je vše kolem značkování data webové stránky 826 00:37:30,670 --> 00:37:32,130 a struktura webové stránky. 827 00:37:32,130 --> 00:37:35,320 CSS je obecně o poslední míle, estetika, 828 00:37:35,320 --> 00:37:40,160 jak velikost a barvu a umístění přesně přímo na webové stránce. 829 00:37:40,160 --> 00:37:43,000 A skutečně, to je tvořeno s klíče a hodnoty. 830 00:37:43,000 --> 00:37:46,290 >> Nemovitost jako je tento, textu sladit, následované dvojtečkou, 831 00:37:46,290 --> 00:37:49,720 následované hodnotou, která majetek, který je v tomto případě je centrem. 832 00:37:49,720 --> 00:37:51,910 A teď všimnete může hnízdo tyto věci. 833 00:37:51,910 --> 00:37:56,780 Kdybych chtěl všechno v tom, že Já jsem zvýrazní se na střed, 834 00:37:56,780 --> 00:38:00,270 to je důvod, proč mám linku 21 a odpovídající řádek 31. 835 00:38:00,270 --> 00:38:04,820 Ale co teď chci říci, John Harvard, vítejte na mé domovské stránce. 836 00:38:04,820 --> 00:38:06,530 >> Copyright symbol John Harvard. 837 00:38:06,530 --> 00:38:09,180 A předpokládám, že chci, aby první tyto řádky být docela velký. 838 00:38:09,180 --> 00:38:10,450 36 pixelů. 839 00:38:10,450 --> 00:38:11,530 Tak to je slušná velikost. 840 00:38:11,530 --> 00:38:13,240 A chtěl jsem jeho váhu být odvážní. 841 00:38:13,240 --> 00:38:15,450 Ale pak pod tím, Chci menší text. 842 00:38:15,450 --> 00:38:19,980 A pod tím, chci ještě menší textu. 843 00:38:19,980 --> 00:38:20,480 Litovat. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Dnes se cítí jako off den. 846 00:38:26,940 --> 00:38:29,840 >> Takže teď, co vlastně dělám to vyjádřit? 847 00:38:29,840 --> 00:38:34,580 Tady na lince 22 je vložený div nebo vnořené div, chcete-li. 848 00:38:34,580 --> 00:38:36,190 To má svůj vlastní styl značky taky. 849 00:38:36,190 --> 00:38:38,160 I specifikovat velikost písma 36. 850 00:38:38,160 --> 00:38:40,460 I specifikovat váhu písma tučně. 851 00:38:40,460 --> 00:38:43,360 Tady dole, já jen zadat 24 pixelů. 852 00:38:43,360 --> 00:38:45,960 A konečně, v řadě 28, I 12 specifikovat. 853 00:38:45,960 --> 00:38:49,070 Takže stejně jako rychlou kontrolu sanitačního a jako lidské čtení to, 854 00:38:49,070 --> 00:38:52,545 která slova na obrazovce, ve skutečnosti bude tučný? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Které linky jsou vlastně bold? 857 00:38:58,760 --> 00:38:59,570 >> Jen John Harvard. 858 00:38:59,570 --> 00:39:00,070 Je to tak? 859 00:39:00,070 --> 00:39:05,940 Vzhledem k tomu, stejně jako linka 22 říká, že hej browser, tady je rozdělení stránky. 860 00:39:05,940 --> 00:39:07,920 Ať je to velikost písma 36 bodu. 861 00:39:07,920 --> 00:39:09,460 Make hmotnost písmo tučně. 862 00:39:09,460 --> 00:39:11,920 Jakmile dosáhnete odpovídající koncová značka 863 00:39:11,920 --> 00:39:15,340 nebo uzavřený tag na lince 24, to znamená, hej prohlížeč, 864 00:39:15,340 --> 00:39:17,640 přestat dělat, co to je, co děláte. 865 00:39:17,640 --> 00:39:21,020 A upozornění, aby bylo jasné, přestože potrubí 22 má všechny tyto atributy 866 00:39:21,020 --> 00:39:24,430 jako je styl, když vás zavřít značku v řadě 24, 867 00:39:24,430 --> 00:39:25,940 si jen zmínil název tagu. 868 00:39:25,940 --> 00:39:29,990 >> Nemusíte opakovat styl slovo, nebo vše, co je uvnitř těchto uvozovek. 869 00:39:29,990 --> 00:39:32,860 A tak, když se podívám na tohle teď ve svém prohlížeči, pojďme 870 00:39:32,860 --> 00:39:38,060 Podívejte se na konečný výsledek. Nech mě jít vpřed na tento soubor, který je CSS 0. 871 00:39:38,060 --> 00:39:41,814 A to je ještě docela obyčejný, ale stále dost zajímavé. 872 00:39:41,814 --> 00:39:43,980 Ale ukazuje se, že je další věci, mohu dělat tady, 873 00:39:43,980 --> 00:39:46,490 a na riziko tvorby Tento zcela odporný, 874 00:39:46,490 --> 00:39:48,630 Všimněte si, že v mém Tělo mé webové stránky, 875 00:39:48,630 --> 00:39:53,930 Můžu udělat něco vtipného jako bg nebo barvy pozadí. 876 00:39:53,930 --> 00:39:56,670 >> A rychle, jaký je vaše oblíbená barva? 877 00:39:56,670 --> 00:39:57,720 Green Slyšel jsem. 878 00:39:57,720 --> 00:39:58,750 Dobře. 879 00:39:58,750 --> 00:40:02,920 Takže teď, když jsem trefil znovu načíst teď, máme zelenou webovou stránku. 880 00:40:02,920 --> 00:40:04,710 Dobře, takže to není špatné. 881 00:40:04,710 --> 00:40:08,350 A teď, když chci, aby to opravdu pohodě, mohu barvu mého textu 882 00:40:08,350 --> 00:40:09,360 i červené. 883 00:40:09,360 --> 00:40:10,870 Takže pojďme se podívat, jak to vypadá. 884 00:40:10,870 --> 00:40:12,230 Teď vypadá to docela dobře. 885 00:40:12,230 --> 00:40:15,460 A tady dole, pokud jste opravdu chci si s někým 886 00:40:15,460 --> 00:40:17,487 nebo chcete-li být jeden z těch lidí, kteří 887 00:40:17,487 --> 00:40:20,570 se snaží přimět vás k návštěvě web strana proto, že jsem napálil Google 888 00:40:20,570 --> 00:40:27,610 do myšlení je tu celá parta klíčových slov jako-- podívejme se, reload. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Kde to šlo? 891 00:40:30,680 --> 00:40:31,530 A tam nás to. 892 00:40:31,530 --> 00:40:32,030 Dobře. 893 00:40:32,030 --> 00:40:34,905 Takže říkám to jako stranou, budeme mluvit o této věci za pár týdnů 894 00:40:34,905 --> 00:40:36,740 když hovoříme o bezpečnost, pokud jste ve skutečnosti 895 00:40:36,740 --> 00:40:38,852 embed celé svazky klíčová slova na webové stránce, 896 00:40:38,852 --> 00:40:41,810 i když nejsou viditelné pro lidský, někdo jako Google, samozřejmě, 897 00:40:41,810 --> 00:40:43,250 stále můžete skutečně najít to. 898 00:40:43,250 --> 00:40:45,820 Dobře, takže to je docela příšerná docela rychle. 899 00:40:45,820 --> 00:40:48,420 >> A ve skutečnosti, to není všechno že hodně na rozdíl od mé vlastní web 900 00:40:48,420 --> 00:40:51,480 Strana jako vysokoškolák, který Začal jsem googling kolem najít 901 00:40:51,480 --> 00:40:53,690 minulé verze mých starých webových stránek. 902 00:40:53,690 --> 00:40:54,500 Bylo to dost špatné. 903 00:40:54,500 --> 00:40:56,650 Ve skutečnosti, jsem si jedné těsně před třídy. 904 00:40:56,650 --> 00:40:58,620 Ale je tu ještě horší tam venku. 905 00:40:58,620 --> 00:41:01,534 Toto zřejmě byla moje Domovská stránka již v roce 1996. 906 00:41:01,534 --> 00:41:04,200 Zřejmě jsem si myslel, že to vhodné ptát lidí, jejich jména 907 00:41:04,200 --> 00:41:05,991 před tím, než mohl skutečně vidět mé webové stránky. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> A pak jsem jim ukázal něco hloupý, pravděpodobně. 910 00:41:11,920 --> 00:41:13,450 Budu vykopat víc pro příště. 911 00:41:13,450 --> 00:41:16,220 Ale teď, pojďme zvážit trochu designu. 912 00:41:16,220 --> 00:41:17,444 Už jsme mluvili o stylu. 913 00:41:17,444 --> 00:41:19,735 A tuto stránku tak daleko většina všechno, co jsem napsal 914 00:41:19,735 --> 00:41:21,890 je velmi čistý stylisticky. 915 00:41:21,890 --> 00:41:23,320 Ale co o designu? 916 00:41:23,320 --> 00:41:25,990 No, je tu spousta nadbytečnosti v tom, co jsem dělal tady. 917 00:41:25,990 --> 00:41:28,156 >> Zmínil jsem se o slovo barva v několika místech. 918 00:41:28,156 --> 00:41:31,630 Zmínil jsem se o velikost písma v páru místa a odvážný v několika místech. 919 00:41:31,630 --> 00:41:34,870 A v podstatě, já jsem co mísily dva jazyky. 920 00:41:34,870 --> 00:41:38,100 Mám HTML se svými značkami a my atributy a pak najednou, 921 00:41:38,100 --> 00:41:40,100 mezi uvozovkách, mám druhý jazyk dnes 922 00:41:40,100 --> 00:41:43,830 s názvem CSS, což je opět jen ty klíče a hodnoty, nebo tyto vlastnosti 923 00:41:43,830 --> 00:41:45,280 odděleny dvojtečkou. 924 00:41:45,280 --> 00:41:47,700 >> Ukazuje se, že hodně stejně jako v C, kde jsme 925 00:41:47,700 --> 00:41:50,550 můžete začít vytknout nějaký kód do hlavičkových souborů, 926 00:41:50,550 --> 00:41:53,520 takže můžeme udělat totéž v HTML. 927 00:41:53,520 --> 00:41:56,030 A krok k, který je následující. 928 00:41:56,030 --> 00:42:02,230 Všimněte si, že tato verze, je CSS1.html Strukturálně přesně stejnou webovou stránku. 929 00:42:02,230 --> 00:42:05,250 Tak jsem dostal spoustu z divs, ale tentokrát jsem 930 00:42:05,250 --> 00:42:07,220 zbavili obalu div jak uvidíte. 931 00:42:07,220 --> 00:42:12,390 >> A já jsem dal ty tři divy horní, střední a dolní, jedinečné ID. 932 00:42:12,390 --> 00:42:14,760 To je pěkné, protože by dávat ty divize 933 00:42:14,760 --> 00:42:18,715 ze stránky jedinečných identifikátorů, I na ně odkazovat jinde. 934 00:42:18,715 --> 00:42:19,215 Kde? 935 00:42:19,215 --> 00:42:21,070 No, dovolte mi, abych posouvat nahoru. 936 00:42:21,070 --> 00:42:24,070 A tak daleko, kdykoliv jsme se podíval v čele webové stránky, co je 937 00:42:24,070 --> 00:42:28,560 štítek pouze jsme měli v hlava webové stránky? 938 00:42:28,560 --> 00:42:29,740 Trochu hlasitěji. 939 00:42:29,740 --> 00:42:30,799 Jen titul doposud. 940 00:42:30,799 --> 00:42:32,590 Ale ukazuje se, že je několik dalších věcí, 941 00:42:32,590 --> 00:42:35,840 si můžete dát tam, jeden z které se to nazývá tag styl. 942 00:42:35,840 --> 00:42:37,850 Takže před chvílí jsme se podívali v atributu stylu. 943 00:42:37,850 --> 00:42:39,150 Ukázalo se, že je tu značka styl. 944 00:42:39,150 --> 00:42:41,200 Patří uvnitř hlava webové stránky. 945 00:42:41,200 --> 00:42:42,840 A teď si všimnout, co dělám. 946 00:42:42,840 --> 00:42:46,540 Mám uvnitř tohoto style tag následující. 947 00:42:46,540 --> 00:42:51,190 Jsem doslova za zmínku na řádku 20 se název tagu, který chci stylizovat. 948 00:42:51,190 --> 00:42:53,489 >> Pak mám otevřenou složenou závorkou a uzavřené kudrnaté ortézu. 949 00:42:53,489 --> 00:42:56,030 Takže svým duchem podobat C, ale opět, to není funkce, 950 00:42:56,030 --> 00:42:57,796 to je jen detail syntaktická zde. 951 00:42:57,796 --> 00:43:00,170 A pak samozřejmě, říkám prohlížeč, hej prohlížeč, 952 00:43:00,170 --> 00:43:05,210 aby celé tělo stránky mají zarovnání textu z centra. 953 00:43:05,210 --> 00:43:06,930 A pak se to říká následující. 954 00:43:06,930 --> 00:43:12,600 Hele prohlížeč, když vidíte HTML prvek nebo značku na stránce, která 955 00:43:12,600 --> 00:43:17,040 má jedinečný identifikátor vrcholu, takže symbol hash tady prostě znamená, 956 00:43:17,040 --> 00:43:21,010 Unikátní myšlenka nahoře, jděte do toho a aby jeho velikost písma 36 957 00:43:21,010 --> 00:43:22,490 a jeho váha písmo tučně. 958 00:43:22,490 --> 00:43:26,840 >> Hej prohlížeč, prvek, jehož ID je střední, aby bylo 24 pixelů. 959 00:43:26,840 --> 00:43:31,070 A hele prohlížeč, pokud vidíte Myšlenka na dně, aby bylo 12 pixelů. 960 00:43:31,070 --> 00:43:33,540 Účinek na konci je přesně sam. 961 00:43:33,540 --> 00:43:36,500 Pokud bych jít do CSS 1, Stránka vypadá stejně. 962 00:43:36,500 --> 00:43:39,810 Ale my jsme o krok směrem k o něco lepší návrh. 963 00:43:39,810 --> 00:43:44,850 Dovolte mi, abych se vrátit sem do CSS2 a uvidíte, co ještě jsem udělal. 964 00:43:44,850 --> 00:43:48,030 >> Nyní je strana je opravdu, ale opravdu čistý. 965 00:43:48,030 --> 00:43:50,730 Ve skutečnosti, mohu se vešly všechny obsah na stránce zde. 966 00:43:50,730 --> 00:43:54,270 Ale to, co nová značka jsem představil, samozřejmě? 967 00:43:54,270 --> 00:43:54,770 Internetový odkaz. 968 00:43:54,770 --> 00:43:57,853 A není to nejlepší jméno pro značku, protože to není odkaz v tom smyslu, 969 00:43:57,853 --> 00:44:00,780 že ho známe, ale to znamená, odkaz v nějakém jiném souboru. 970 00:44:00,780 --> 00:44:02,890 To je něco jako ostré patří v C. 971 00:44:02,890 --> 00:44:06,280 >> To je způsob, jak v HTML říkat hej prohlížeč, 972 00:44:06,280 --> 00:44:10,240 jdi obsah Soubor s názvem css2.css. 973 00:44:10,240 --> 00:44:12,880 Vztah pro mě, je, že je to stylů. 974 00:44:12,880 --> 00:44:17,980 A opravdu, že to, co jedna z S je v kaskádových stylů prostředků. 975 00:44:17,980 --> 00:44:20,350 To je styl list. 976 00:44:20,350 --> 00:44:23,120 Je to jen textový soubor obsahující celá parta majetku. 977 00:44:23,120 --> 00:44:25,940 Je to celá řada stylů které chcete použít na stránku. 978 00:44:25,940 --> 00:44:28,860 >> A tak to prý je s odkazem na druhého souboru. 979 00:44:28,860 --> 00:44:32,970 A když otevřu ten, CSS2.css, Všimněte si, že všechno, co jsem udělal 980 00:44:32,970 --> 00:44:35,900 je zkopírovat a vložit všechny z toho do tohoto souboru. 981 00:44:35,900 --> 00:44:38,220 A teď, i když jste nikdy Před kódované této věci, 982 00:44:38,220 --> 00:44:40,700 zvaž s příslovečná inženýrství klobouk 983 00:44:40,700 --> 00:44:44,220 o, proč je tohle lepší konstrukce asi? 984 00:44:44,220 --> 00:44:48,910 Vytknutí tyto vlastnosti CSS, jejich uvedení do vlastního souboru. 985 00:44:48,910 --> 00:44:51,330 I přesto, že jsme vyřešili tento před problém jako pět minut 986 00:44:51,330 --> 00:44:52,600 hned v první verzi. 987 00:44:52,600 --> 00:44:55,730 >> Jsme nezlepšila strana stylisticky, 988 00:44:55,730 --> 00:44:57,520 To je prostě lepší design v nějakém smyslu. 989 00:44:57,520 --> 00:44:58,990 Proč myslíš? 990 00:44:58,990 --> 00:45:01,510 To jo. 991 00:45:01,510 --> 00:45:02,260 Pružnější jak? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 To jo. 994 00:45:05,540 --> 00:45:07,373 Takže pokud chcete jít zpět a změnit věci, 995 00:45:07,373 --> 00:45:09,540 Nyní máte na jednom místě kde si můžete něco změnit. 996 00:45:09,540 --> 00:45:11,622 A ve skutečnosti, po něčem jako problém set sedm, 997 00:45:11,622 --> 00:45:13,690 kde budeme implementovat webové stránky obchodování na burze, 998 00:45:13,690 --> 00:45:15,523 že to bude mít celá řada stránek. 999 00:45:15,523 --> 00:45:17,620 A to by bylo opravdu nepříjemné, pokud se rozhodnete, hm, 1000 00:45:17,620 --> 00:45:21,630 Nemám opravdu rád 24 pixelů, chci aby to bylo 28 pixelů nebo o něco větší. 1001 00:45:21,630 --> 00:45:23,550 A pak budou muset udělat globální najít a nahradit 1002 00:45:23,550 --> 00:45:27,560 nebo otevřít všechny soubory vašich webových stránek prostě skutečně změnit jednu hodnotu. 1003 00:45:27,560 --> 00:45:31,290 Vytknutím tyto styly na jednom centrálním místě, 1004 00:45:31,290 --> 00:45:34,720 Nyní můžete otevřít jeden textový soubor v CS50IDE do jakéhokoli programu, 1005 00:45:34,720 --> 00:45:36,479 změňte ji, uložit, a hotovo. 1006 00:45:36,479 --> 00:45:38,270 Vy jste šíří ti, změny všude. 1007 00:45:38,270 --> 00:45:42,450 A že by bylo stejné v dot h souboru stejně. 1008 00:45:42,450 --> 00:45:46,697 Takže nějaké otázky tak daleko na tuto syntaxi? 1009 00:45:46,697 --> 00:45:48,530 Dobře, takže máme udělal všechno zdá 1010 00:45:48,530 --> 00:45:51,170 s výjimkou skutečně realizovat hypertextové odkazy. 1011 00:45:51,170 --> 00:45:52,740 A tak pojďme do toho a to udělat. 1012 00:45:52,740 --> 00:45:54,830 Nech mě jít dopředu a vytvoření nového souboru zde. 1013 00:45:54,830 --> 00:45:59,970 Chystám se to nazvat link.html, dal v dnešním kódu. 1014 00:45:59,970 --> 00:46:03,000 >> A já budu dělat open držák typu doc ​​html. 1015 00:46:03,000 --> 00:46:05,970 Jako stranou, tohle na top, tento typ deklarace doc, 1016 00:46:05,970 --> 00:46:08,420 to je jediná, která je divný s vykřičníkem. 1017 00:46:08,420 --> 00:46:12,100 Musíte jen na to tam, a to znamená, že jsme pomocí HTML verze 5. 1018 00:46:12,100 --> 00:46:14,460 Starší verze jazyka měli mnohem déle 1019 00:46:14,460 --> 00:46:16,400 řetězce, které jste potřebovali dát tam. 1020 00:46:16,400 --> 00:46:18,620 Takže zde je příklad tzv odkaz. 1021 00:46:18,620 --> 00:46:20,950 >> Potřebuji tělo mé webové stránky zde. 1022 00:46:20,950 --> 00:46:29,770 A sem, a href rovná řekněme HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 a můj oblíbený webové stránky, budeme říkat. 1024 00:46:35,420 --> 00:46:38,550 Dobře, tak velmi neškodný, uživatelsky přívětivé stránky. 1025 00:46:38,550 --> 00:46:42,950 Pokud bych teď jít do mého adresáře výpis sem a otevřít link.html, 1026 00:46:42,950 --> 00:46:44,780 máme hyper text. 1027 00:46:44,780 --> 00:46:47,410 >> A skutečně, to je místo, kde H v HTTP pochází. 1028 00:46:47,410 --> 00:46:51,580 Hypertext Transfer Protocol je o přenos textu 1029 00:46:51,580 --> 00:46:53,840 že má hypertextové odkazy na jiné zdroje. 1030 00:46:53,840 --> 00:46:58,210 A skutečně, tady je obeznámen, pokud retro, modrý odkaz, který v případě klepnutí 1031 00:46:58,210 --> 00:47:02,607 mě skutečně vést k Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Teď, ach, to je vyjde brzy. 1033 00:47:03,940 --> 00:47:08,970 Dobře, takže teď, jaké jsou některé důsledků to? 1034 00:47:08,970 --> 00:47:11,610 >> A upřímně řečeno, začíná svět se trochu známější 1035 00:47:11,610 --> 00:47:15,090 a také trochu děsivější ale také o něco více 1036 00:47:15,090 --> 00:47:17,840 já obhajitelný jakmile začnete pochopit tyto věci. 1037 00:47:17,840 --> 00:47:21,610 Vzhledem k tomu, šance jsou, že někteří z vás, když jdete prostřednictvím vaší složce se spamem Gmail, nebo dokonce 1038 00:47:21,610 --> 00:47:23,990 Váš e-mailové schránky, pravděpodobně jste dostal nějaký e-mail 1039 00:47:23,990 --> 00:47:26,980 který je po vás Chcete-li změnit Heslo možná nebo možná ověřit 1040 00:47:26,980 --> 00:47:28,910 PayPal pověření nebo kdoví co ještě. 1041 00:47:28,910 --> 00:47:34,510 >> A ve skutečnosti, možná jste obdrželi něco, co říká, že podobně klikněte zde 1042 00:47:34,510 --> 00:47:42,260 resetovat PayPal heslo. 1043 00:47:42,260 --> 00:47:44,130 A teď, všimněte si, pokud to není Disney.com 1044 00:47:44,130 --> 00:47:51,600 ale jako badplace.com a reload, že text zde 1045 00:47:51,600 --> 00:47:53,710 Dalo by se říct něco vůbec. 1046 00:47:53,710 --> 00:47:55,260 A ve skutečnosti je to jen slova. 1047 00:47:55,260 --> 00:48:04,610 Proč bych vlastně být super škodlivý a říkají http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Klikněte zde resetovat PayPal heslo a teď znovu. 1049 00:48:14,090 --> 00:48:16,220 To vypadá docela legitimní, že jo? 1050 00:48:16,220 --> 00:48:20,470 Chci říct, že by to, klikněte na e-mail, který právě říká, že tento. 1051 00:48:20,470 --> 00:48:22,450 Nevšimnout zde dichotomie. 1052 00:48:22,450 --> 00:48:26,880 Říká www.paypal.com, a ve skutečnosti, počkejte chvíli, 1053 00:48:26,880 --> 00:48:29,210 Víme, že chcete S pro bezpečnost. 1054 00:48:29,210 --> 00:48:35,450 Takže teď, jděte na www.paypal.com HTTPS, ale pokud jste nikdy nedělal, 1055 00:48:35,450 --> 00:48:38,182 se dostat do zvyk vznášející se nad malé odkazy zde. 1056 00:48:38,182 --> 00:48:39,890 A je těžké vidět, tam na obrazovce, 1057 00:48:39,890 --> 00:48:41,340 a je to tady není tak jednodušší. 1058 00:48:41,340 --> 00:48:43,615 Ale tady cesta dolů malý nepatrný roh 1059 00:48:43,615 --> 00:48:45,740 dělá prohlížeč skutečně vám říct, že jedeme 1060 00:48:45,740 --> 00:48:48,850 na badplace.com místo Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 A teď, kam jdeme s tím? 1062 00:48:51,620 --> 00:48:54,859 Všechny příklady jsme dnes udělali, jsme tvrdě kódované a zadali ručně. 1063 00:48:54,859 --> 00:48:56,900 Web je neuvěřitelně nezajímavé, když budete tvrdě 1064 00:48:56,900 --> 00:48:59,844 kódovat vaše webové stránky tak, aby obsah je statická a nikdy se nemění. 1065 00:48:59,844 --> 00:49:01,760 Samozřejmě, že všechny naše oblíbené stránky dnes, 1066 00:49:01,760 --> 00:49:04,470 ať už je to Gmail či Twitter nebo Facebook nebo libovolný počet dalších 1067 00:49:04,470 --> 00:49:05,290 jsou dynamické. 1068 00:49:05,290 --> 00:49:07,340 Jsou měnící se v Reakce na vstup uživatele 1069 00:49:07,340 --> 00:49:08,840 stejně jako výsledky vyhledávání Google. 1070 00:49:08,840 --> 00:49:12,415 >> A tak ve středu, co děláme, je odjíždíme HTML a CSS úvod 1071 00:49:12,415 --> 00:49:14,290 za námi a my se za samozřejmé, že nyní 1072 00:49:14,290 --> 00:49:16,640 vědět a my představit nový programovací jazyk 1073 00:49:16,640 --> 00:49:19,050 volal PHP, který rád C, se chystá dát nám 1074 00:49:19,050 --> 00:49:22,450 pravomoc skutečně vytvořit programy , že samy o sobě vytvářejí výstup. 1075 00:49:22,450 --> 00:49:25,900 V tomto případě budeme používat PHP generovat dynamicky web 1076 00:49:25,900 --> 00:49:27,340 stránek pomocí tohoto nového jazyka. 1077 00:49:27,340 --> 00:49:28,989 Tak o tom až ve středu. 1078 00:49:28,989 --> 00:49:29,530 Uvidíme se potom. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [Přehrávání hudby] 1081 00:49:37,380 --> 00:52:38,864