1 00:00:00,000 --> 00:00:03,486 >> [REPRODUCCIÓ DE MÚSICA] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J Malan: Aquest és CS50 i aquest és el començament de la setmana 7. 4 00:00:14,250 --> 00:00:15,060 Així que benvinguda. 5 00:00:15,060 --> 00:00:17,540 I vostè pot recordar que en el problema en quatre sets, 6 00:00:17,540 --> 00:00:21,510 hi havia una mica d'una recerca del tresor per a alguns fabulosos premis pel qual 7 00:00:21,510 --> 00:00:24,219 després de recuperar les fotos el personal, tant aquí com a New Haven, 8 00:00:24,219 --> 00:00:27,468 que hi ha el repte de trobar, ja que molts els científics de la computació com poguessis. 9 00:00:27,468 --> 00:00:29,550 I tenim un tot munt de presentacions. 10 00:00:29,550 --> 00:00:31,930 Vaig pensar en compartir alguns amb vostès aquí avui. 11 00:00:31,930 --> 00:00:35,100 >> I posarem tot això en línia. 12 00:00:35,100 --> 00:00:39,310 Però, en particular, volia cridar la seva atenció A-- bé un, 13 00:00:39,310 --> 00:00:42,670 Sam estava en un bon nombre d'ells en general, posant com aquest. 14 00:00:42,670 --> 00:00:45,750 Sembla, però, que a partir d' Aquest matí, el guanyador 15 00:00:45,750 --> 00:00:51,170 ser un cert algú anomenat Ken amb 24 del personal capturat en càmera 16 00:00:51,170 --> 00:00:54,600 o una mica més si es té en compte personal múltiple en les imatges. 17 00:00:54,600 --> 00:00:58,300 A la foto és Ken proper a Maria a New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Ara, Ken, però, resulta fora és una cosa d'un cas cantonada 19 00:01:01,300 --> 00:01:02,880 que encara no ha passat abans. 20 00:01:02,880 --> 00:01:05,713 Resulta que no se li va ocórrer per a mi per posar lletra petita en el problema 21 00:01:05,713 --> 00:01:09,710 en quatre sets que diu que el personal són inelegibles per als fabulosos premis 22 00:01:09,710 --> 00:01:13,130 perquè Ken és, per descomptat, un els fotògrafs en el nostre personal. 23 00:01:13,130 --> 00:01:16,820 Ara, dit això, ell originalment em va escriure per dir 24 00:01:16,820 --> 00:01:19,180 si us plau no publicar aquestes fotos en línia. 25 00:01:19,180 --> 00:01:21,630 Crec que en gran part perquè la majoria de les fotos 26 00:01:21,630 --> 00:01:24,499 que aquest fotògraf va prendre miri una mica d'alguna cosa com això. 27 00:01:24,499 --> 00:01:25,040 I similars. 28 00:01:25,040 --> 00:01:28,990 >> Però Ken li agradaria que jo asseguro que que és un molt bon fotògraf, 29 00:01:28,990 --> 00:01:33,190 Ell és un professional, ell pren fotos que no són borroses, 30 00:01:33,190 --> 00:01:37,270 que són millors en el focus, i ell va prendre un bon nombre del nostre propi personal. 31 00:01:37,270 --> 00:01:40,370 Però en lloc de solament reconèixer Ken, el que pensem que ens agradaria fer 32 00:01:40,370 --> 00:01:43,390 és anar a través de la llista de estudiants reals que van presentar. 33 00:01:43,390 --> 00:01:48,640 I resulta que Lance amb 15 fotos a partir d'aquest matí 34 00:01:48,640 --> 00:01:50,030 va ser el nostre guanyador. 35 00:01:50,030 --> 00:01:55,730 >> I representa aquí és Llança amb Colton, amb Skaz, amb mi mateix i amb Sam. 36 00:01:55,730 --> 00:02:00,230 Però després resulta que a partir d' 11:46, pel que fa tan sols una mica, 37 00:02:00,230 --> 00:02:04,380 Vaig tornar al meu correu electrònic i vaig trobar que teníem però, una presentació més 38 00:02:04,380 --> 00:02:08,300 per un estudiant anomenat Bonnie el correu electrònic es va limitar a dir això. 39 00:02:08,300 --> 00:02:10,800 No vaig a mentir, estic fent això durant la classe. 40 00:02:10,800 --> 00:02:17,620 I després va procedir a col·locar just 14 fotos, un menys que la llança de 15. 41 00:02:17,620 --> 00:02:22,690 >> Però en les fotos de Bonnie, resulta terme eren diversos membres del personal, Sam 42 00:02:22,690 --> 00:02:25,960 entre ells, de manera que el que crèiem de fer és reconèixer les dues coses. 43 00:02:25,960 --> 00:02:29,240 Així que a més d'aconseguir el Dropbox espai que tots els que van participar 44 00:02:29,240 --> 00:02:33,900 rep, aquestes dues seccions també rebre un bon esmorzar atès per ells 45 00:02:33,900 --> 00:02:36,100 i la seva secció S'acobla la setmana que ve. 46 00:02:36,100 --> 00:02:38,970 I pel que tindrà notícies nostres, Lance i Bonnie, per això. 47 00:02:38,970 --> 00:02:40,002 Així que les grans felicitats a ells. 48 00:02:40,002 --> 00:02:42,210 Ara, aquells de vostès que faria igual que el dinar més general 49 00:02:42,210 --> 00:02:45,320 saber que el dinar CS50 a Cambridge i New Haven és aquest divendres. 50 00:02:45,320 --> 00:02:48,510 Anar a la pàgina web barra de RSVP del CS50. 51 00:02:48,510 --> 00:02:49,800 I ara una paraula sobre els seminaris. 52 00:02:49,800 --> 00:02:50,730 Més curricularly. 53 00:02:50,730 --> 00:02:52,490 Així que estem a punt de la punt del semestre 54 00:02:52,490 --> 00:02:55,200 on ha de començar pensant en els projectes finals. 55 00:02:55,200 --> 00:02:59,309 I de fet, en només una mica, la voluntat els anomenats propostes pre deure. 56 00:02:59,309 --> 00:03:01,850 Així pre propostes estan destinades a ser molt baix impacte i realment 57 00:03:01,850 --> 00:03:04,109 només una oportunitat per compondre una nota curta 58 00:03:04,109 --> 00:03:06,900 el seu company d'ensenyament per informar ell o ella el que vostè està pensant 59 00:03:06,900 --> 00:03:09,140 pot ser que vulgui fer per al seu projecte final. 60 00:03:09,140 --> 00:03:11,730 >> Ara, molts estudiants acaben fent web basa projectes finals. 61 00:03:11,730 --> 00:03:13,800 I, per descomptat, només som setmana passada en aquest moment 62 00:03:13,800 --> 00:03:15,890 i més enllà de capbussar-se en la programació web. 63 00:03:15,890 --> 00:03:18,200 Així que no us preocupeu si vostè no tenen absolutament cap idea de com 64 00:03:18,200 --> 00:03:21,594 vostè construir les idees que que pugui tenir en la seva ment. 65 00:03:21,594 --> 00:03:24,510 Això és en realitat una funció de força per fer-li pensar i parlar 66 00:03:24,510 --> 00:03:25,650 amb el seu TF respecte. 67 00:03:25,650 --> 00:03:28,810 Però per ajudar amb això, i amb projectes fi de carrera, en última instància, 68 00:03:28,810 --> 00:03:31,750 saber que CS50 té una tradició d'oferir seminaris. 69 00:03:31,750 --> 00:03:36,084 >> I aquests són opcionals, mans, o donar una conferència sobre la base de les oportunitats 70 00:03:36,084 --> 00:03:39,000 per aprendre més sobre els temes que són una mica d'auxiliar el curs de 71 00:03:39,000 --> 00:03:43,310 pla d'estudis, però tot i això meravellosa materials per impulsar projectes finals. 72 00:03:43,310 --> 00:03:46,840 I el que aquesta és la llista que és Personal CS50 aquí a New Haven 73 00:03:46,840 --> 00:03:48,600 han arribat amb de aquest any sobre iOS 74 00:03:48,600 --> 00:03:50,730 programació, Android programació, desenvolupament de jocs, 75 00:03:50,730 --> 00:03:54,480 i raïms de més eines i els llenguatges i tècniques. 76 00:03:54,480 --> 00:03:56,780 >> Així que mantenir un ull en el lloc web del CS50. 77 00:03:56,780 --> 00:04:00,110 I mentrestant, si voleu Si està interessat en algun d'ells, 78 00:04:00,110 --> 00:04:02,510 anar al registre slash del CS50. 79 00:04:02,510 --> 00:04:05,770 I llavors ens donarem seguiment pel que fa a la dies i horaris de vol i la localització 80 00:04:05,770 --> 00:04:09,090 i tot-- gairebé tot ho farà ser escoltats i també està disponible a comanda 81 00:04:09,090 --> 00:04:11,750 després si vostè no pot realment fer-ho. 82 00:04:11,750 --> 00:04:15,800 Així que sense més preàmbuls, deixat l'última vegada amb GET. 83 00:04:15,800 --> 00:04:19,610 >> I això era com el missatge que era a l'interior de l'envolupant virtual, recordar, 84 00:04:19,610 --> 00:04:23,960 que passem de router a router encaminador entre un navegador web i una xarxa 85 00:04:23,960 --> 00:04:24,487 servidor. 86 00:04:24,487 --> 00:04:26,695 I aquest missatge semblava un mica alguna cosa com això. 87 00:04:26,695 --> 00:04:29,700 Aquest va ser el missatge més arcana que era en realitat dins d'un sobre 88 00:04:29,700 --> 00:04:34,440 escrita en un tros de paper el primera línia diu, literalment, arribar barra. 89 00:04:34,440 --> 00:04:37,830 >> I així com una comprovació de validesa, ¿Què denoten barra? 90 00:04:37,830 --> 00:04:40,455 Què significa la barra quan sol·licitant una pàgina web? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Vostè sol·licita que tot el temps. 93 00:04:44,250 --> 00:04:47,333 La majoria cada vegada que visita un lloc web, en realitat no escrigui un nom d'arxiu. 94 00:04:47,333 --> 00:04:50,960 És probable que només ha d'anar a Facebook.com, entrar, gmail.com, o similars. 95 00:04:50,960 --> 00:04:52,260 I què representa barra? 96 00:04:52,260 --> 00:04:53,506 Què arxiu? 97 00:04:53,506 --> 00:04:54,630 O quina pàgina, específicament? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> L'índex, si. 100 00:05:00,720 --> 00:05:01,810 Així que la pàgina per defecte. 101 00:05:01,810 --> 00:05:04,810 Així que si no s'especifica un arxiu nom que començarem a veure, 102 00:05:04,810 --> 00:05:07,750 en realitat estàs simplement sol·licitant dóna'm la pàgina per defecte de Facebook 103 00:05:07,750 --> 00:05:10,800 o donar-me la meva safata d'entrada o donar Me la pàgina per defecte de notícies 104 00:05:10,800 --> 00:05:12,510 a la pàgina web de la CNN o similars. 105 00:05:12,510 --> 00:05:15,220 I un servidor llavors respon a aquest missatge amb una mica 106 00:05:15,220 --> 00:05:18,420 així, dir que sí, jo parlar HTTP versió 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, que és un estat de codi que els éssers humans rarament 108 00:05:21,130 --> 00:05:22,790 a veure perquè és bo. 109 00:05:22,790 --> 00:05:26,640 Perquè vol dir OK, la sol·licitud va ser rebut i es manegen adequadament. 110 00:05:26,640 --> 00:05:28,960 I el tipus de contingut aparentment en la resposta 111 00:05:28,960 --> 00:05:31,170 és molt sovint, però no sempre, text. 112 00:05:31,170 --> 00:05:32,580 I específicament, HTML. 113 00:05:32,580 --> 00:05:34,760 I això és en realitat quan ens fixem en l'actualitat. 114 00:05:34,760 --> 00:05:37,140 >> Així que, de fet, em vaig a anar per davant i obrir un navegador. 115 00:05:37,140 --> 00:05:40,410 Vaig a utilitzar Chrome, vostè pot utilitzar més qualsevol navegador en les setmanes per venir. 116 00:05:40,410 --> 00:05:42,410 Generalment recomanem Crom perquè és particular 117 00:05:42,410 --> 00:05:43,750 bo per als desenvolupadors de programari. 118 00:05:43,750 --> 00:05:46,070 Té un munt de construït en eines que fan més fàcil 119 00:05:46,070 --> 00:05:49,800 per desenvolupar no només HTML i CSS, les coses que començarem a parlar de l'actualitat, 120 00:05:49,800 --> 00:05:51,530 sinó també altres idiomes. 121 00:05:51,530 --> 00:05:55,530 >> I jo seguiré endavant i anar A-- Vaig a Controlar clic o dreta 122 00:05:55,530 --> 00:05:57,210 feu clic a qualsevol part d'una pàgina web. 123 00:05:57,210 --> 00:05:59,070 I jo vaig a anar a Inspeccionar Element. 124 00:05:59,070 --> 00:06:03,850 I jo vaig a modificar la meva pantalla de només una mica aquí. 125 00:06:03,850 --> 00:06:05,790 Permetin-me passar això a la part inferior. 126 00:06:05,790 --> 00:06:08,140 Així que això és el que s'anomena Inspector de Chrome. 127 00:06:08,140 --> 00:06:11,010 Així que això és com una depuració eina integrada a Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Tots vostès ja tenen aquest si has estat utilitzant Chrome. 129 00:06:13,520 --> 00:06:17,169 I li permet veure el que està passant de sota el capó d'alguna pàgina web. 130 00:06:17,169 --> 00:06:19,210 Així que anem a fer un fet mirar això de la següent manera. 131 00:06:19,210 --> 00:06:21,251 Té forma més característiques i ens preocupem per avui. 132 00:06:21,251 --> 00:06:22,760 Però hi ha aquestes fitxes per aquí. 133 00:06:22,760 --> 00:06:25,890 Elements, xarxa, fonts, línia de temps, i algunes altres coses. 134 00:06:25,890 --> 00:06:27,800 Vaig a fer clic a Xarxa per un moment. 135 00:06:27,800 --> 00:06:30,500 >> I és una mica aclaparador a primera vista aquí. 136 00:06:30,500 --> 00:06:34,190 Però, ¿què faré és deixar em simplifico una mica. 137 00:06:34,190 --> 00:06:37,560 Vaig a encendre la gravació de la llum perquè sigui vermell. 138 00:06:37,560 --> 00:06:39,140 I jo vaig a dir a preservar registre. 139 00:06:39,140 --> 00:06:41,015 I això és només una mica El que em vaig adonar 140 00:06:41,015 --> 00:06:44,120 en el temps que va a estalviar tot el que succeeix en el navegador. 141 00:06:44,120 --> 00:06:50,030 I ara em vaig a anar a http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> En realitat, farem www per si de cas, retallar. 143 00:06:52,690 --> 00:06:53,643 Retorn. 144 00:06:53,643 --> 00:06:56,180 Així que un URL que molts és possible que hagi visitat. 145 00:06:56,180 --> 00:06:58,830 I ara la web de Facebook pàgina apareix a la part superior. 146 00:06:58,830 --> 00:07:02,350 I llavors un munt de coses va passar volant a la part inferior. 147 00:07:02,350 --> 00:07:04,830 I de fet, resulta que quan vostè visita Facebook.com, 148 00:07:04,830 --> 00:07:09,320 que no només hi ha la fabricació d'una petició HTTP, resulta que va a Facebook.com 149 00:07:09,320 --> 00:07:14,320 envia 41 d'aquests sobres, cadascun amb la seva pròpia petició GET, 150 00:07:14,320 --> 00:07:18,360 com s'ha indicat, tot i que darrere de la pantalla aquí, a la part inferior de la pantalla, 151 00:07:18,360 --> 00:07:24,040 indica que, de fet, el meu navegador va fer 41 les sol·licituds. 152 00:07:24,040 --> 00:07:29,689 >> I en total, es va transferir 861 kilobytes i va prendre per alguna raó 153 00:07:29,689 --> 00:07:31,730 tant com vuit segons descarregar tot això. 154 00:07:31,730 --> 00:07:33,790 Així que en realitat és una mica estrany que el lloc de Facebook hauria de 155 00:07:33,790 --> 00:07:35,600 llarg, però que així sigui en aquest cas. 156 00:07:35,600 --> 00:07:39,520 Ara, tot això jo no m'importa sobre excepte per la sol·licitud més alta. 157 00:07:39,520 --> 00:07:46,440 Així que anirem a aquesta d'aquí i m'ho dius a mi Allunyar per un moment. 158 00:07:46,440 --> 00:07:47,754 >> I permetin-me zoom en això. 159 00:07:47,754 --> 00:07:50,670 Així que el que he fet en l'esquerra tot i que no hi ha molt a fer per aquí 160 00:07:50,670 --> 00:07:53,360 és que m'he destacat Facebook.com i després 161 00:07:53,360 --> 00:07:56,540 Noto que estic desplaçar-se cap avall, desplaçament cap avall, el desplaçament cap avall, 162 00:07:56,540 --> 00:07:58,330 per sol·licitar capçaleres. 163 00:07:58,330 --> 00:08:01,720 I veuràs que Chrome està mostrant em essencialment el contingut intern 164 00:08:01,720 --> 00:08:02,810 de la sol·licitud que vaig fer. 165 00:08:02,810 --> 00:08:06,130 No és el format en el mateix manera, però noten que hi ha esment d'aconseguir, 166 00:08:06,130 --> 00:08:09,481 noti que hi ha esment de la hoste, Facebook.com, el camí, o barra, 167 00:08:09,481 --> 00:08:10,730 que és l'arxiu que vaig sol·licitar. 168 00:08:10,730 --> 00:08:12,930 >> I després, si em desplaço una còpia de seguretat, anem a realitat 169 00:08:12,930 --> 00:08:17,270 veure que el va tornar Facebook per a mi és totes aquestes capçaleres. 170 00:08:17,270 --> 00:08:21,040 Així que dins d'aquest sobre virtual de fet són un munt de parells de valors clau. 171 00:08:21,040 --> 00:08:23,130 Una paraula, una coma, i després un valor. 172 00:08:23,130 --> 00:08:25,050 Una paraula, una coma i un valor. 173 00:08:25,050 --> 00:08:26,160 Aquests són anomenats capçaleres. 174 00:08:26,160 --> 00:08:31,860 I no hi ha manera més detall aquí que que realment importa en aquest moment. 175 00:08:31,860 --> 00:08:33,750 >> Però això no té rival últim allà baix, 176 00:08:33,750 --> 00:08:38,809 notar, que el servidor de Facebook.com, de fet dit aquí ve una mica d'HTML text. 177 00:08:38,809 --> 00:08:41,409 Així que tot això és dir que quan vostè sol · licita una web 178 00:08:41,409 --> 00:08:44,300 pàgina d'un navegador a un servidor, aquest servidor respon 179 00:08:44,300 --> 00:08:47,630 amb un sobre del seu propi dins dels quals és de text. 180 00:08:47,630 --> 00:08:49,020 En altres paraules, HTML. 181 00:08:49,020 --> 00:08:50,590 HyperText Markup Language. 182 00:08:50,590 --> 00:08:53,200 La qual cosa és una altra llengua que introduïm avui 183 00:08:53,200 --> 00:08:57,740 que els éssers humans o els ordinadors generen per tal de posar en pràctica pàgines web. 184 00:08:57,740 --> 00:08:59,580 >> Específicament, donem una ullada a això. 185 00:08:59,580 --> 00:09:03,277 Vaig ara a tornar el lloc web de Facebook. 186 00:09:03,277 --> 00:09:05,360 I vaig a poc control de clic o clic dret 187 00:09:05,360 --> 00:09:07,634 i feu clic a Edita. 188 00:09:07,634 --> 00:09:10,550 I fins i tot si vostè no utilitza Chrome, IE pot fer això, el Firefox pot fer això, 189 00:09:10,550 --> 00:09:14,060 Safari pot fer això, encara que el menú opcions podrien semblar una mica diferent. 190 00:09:14,060 --> 00:09:18,990 I aquest és l'HTML que Mark i companyia a Facebook haver escrit. 191 00:09:18,990 --> 00:09:24,640 >> I col·lectivament, aquest llenguatge aquí implementa el blau i la pàgina en blanc 192 00:09:24,640 --> 00:09:26,370 que vam veure fa un moment. 193 00:09:26,370 --> 00:09:28,030 Ara, això és una mica aclaparador. 194 00:09:28,030 --> 00:09:31,400 Però si mirem cap a dalt a l'esquerra, estem va començar a veure alguns patrons. 195 00:09:31,400 --> 00:09:34,140 Sembla que hi ha molt d'aquests el suport d'angle obert 196 00:09:34,140 --> 00:09:35,970 i després hi ha aquest codi HTML paraula clau. 197 00:09:35,970 --> 00:09:38,330 Hi ha un altre obert suport angular i el cap. 198 00:09:38,330 --> 00:09:41,560 >> Aquí està, si desplaceu-vos cap avall i cap avall i cap avall, jo sóc 199 00:09:41,560 --> 00:09:43,820 seguirà endavant i tractar per buscar alguna cosa. 200 00:09:43,820 --> 00:09:48,510 Hi ha molt per sobre a la dreta aquí és el cos parèntesi obert. 201 00:09:48,510 --> 00:09:50,800 I recordar de passada temps que vam proposar 202 00:09:50,800 --> 00:09:53,364 que la pàgina web més senzilla que un humà podria escriure 203 00:09:53,364 --> 00:09:55,030 podria semblar una mica alguna cosa com això. 204 00:09:55,030 --> 00:09:58,430 Obrir etiqueta HTML, cap obert etiqueta, etiqueta del títol obert, 205 00:09:58,430 --> 00:10:03,230 a continuació el títol de tancament, cap tancat, oberta etiqueta del cos, una mica de text, cos tancat, 206 00:10:03,230 --> 00:10:04,720 HTML tancat. 207 00:10:04,720 --> 00:10:06,290 >> Però una pausa aquí per un moment. 208 00:10:06,290 --> 00:10:09,030 Aquest codi, fins i tot si vostè té Mai escrit abans 209 00:10:09,030 --> 00:10:11,864 però encara no entenc molt bé el que està passant, es veu molt bé. 210 00:10:11,864 --> 00:10:12,821 Dret, és molt net. 211 00:10:12,821 --> 00:10:14,120 És molt estilísticament agradable. 212 00:10:14,120 --> 00:10:16,190 Una gran quantitat de sagnat i l'espai blanc. 213 00:10:16,190 --> 00:10:18,020 Facebook és no és. 214 00:10:18,020 --> 00:10:23,190 Per què és Facebook tant pitjor del que en l'escriptura d'HTML? 215 00:10:23,190 --> 00:10:24,310 Pel que sembla. 216 00:10:24,310 --> 00:10:26,899 >> Dret, això és com un sol de cada cinc per l'estil. 217 00:10:26,899 --> 00:10:29,315 Hi ha una raó de pes per a ells per tallar aquestes cantonades. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Molt bé, així que no vull fer més fàcil perquè el llegeixis. 220 00:10:33,860 --> 00:10:36,940 Així que, en un sentit, són ofuscar ella, tipus de codificació que 221 00:10:36,940 --> 00:10:40,260 almenys estèticament pel que és més difícil per Myspace 222 00:10:40,260 --> 00:10:42,705 anar i estafar la seva pàgina web i l'HTML per a ell. 223 00:10:42,705 --> 00:10:45,080 Resulta que amb els programes però, incloent Chrome, 224 00:10:45,080 --> 00:10:47,020 podem netejar això molt fàcilment. 225 00:10:47,020 --> 00:10:49,420 Per tant, no és que és com la raó. 226 00:10:49,420 --> 00:10:51,290 Quina altra cosa podria ser la causa. 227 00:10:51,290 --> 00:10:51,790 Sí. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Sí, les dades dels costos d'espai en blanc. 230 00:10:55,890 --> 00:10:56,598 Què vols dir? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Sí, exactament. 233 00:11:02,979 --> 00:11:06,020 Si vostè xoca amb la tecla Tab molt o la barra d'espai, consideri les implicacions. 234 00:11:06,020 --> 00:11:10,060 Així que cada tecla del teclat és un [Inaudible] representat com un byte. 235 00:11:10,060 --> 00:11:14,560 >> Així que suposo que Marc o qualsevol dels desenvolupadors aquests dies colpeja la barra d'espai un cop 236 00:11:14,560 --> 00:11:17,899 en aquesta pàgina HTML que representa la pàgina principal de Facebook. 237 00:11:17,899 --> 00:11:19,690 I Facebook té molt dels usuaris d'aquests dies. 238 00:11:19,690 --> 00:11:24,030 Així que suposo que la pàgina d'inici de Facebook és visitat per milions de persones en l'actualitat. 239 00:11:24,030 --> 00:11:27,020 I algú a Facebook té colpejar la barra d'espai una vegada. 240 00:11:27,020 --> 00:11:29,890 >> Així que un byte addicional, MIL MILIONS de sol·licituds, 241 00:11:29,890 --> 00:11:32,790 quant més dades Facebook transferir a internet 242 00:11:32,790 --> 00:11:37,160 perquè algú va colpejar la barra d'espai en el seu teclat? 243 00:11:37,160 --> 00:11:41,660 Mil milions de bytes, o un giga de s'estan enviant dades des dels servidors de Facebook 244 00:11:41,660 --> 00:11:43,626 a persones de tot el món sense una bona raó. 245 00:11:43,626 --> 00:11:44,750 Ara, això és només un espai. 246 00:11:44,750 --> 00:11:48,866 >> Imagineu si en realitat ens netegem això cosa i sangria i va afegir 247 00:11:48,866 --> 00:11:50,990 una gran quantitat d'espai en blanc i caràcters de tabulació i espais, 248 00:11:50,990 --> 00:11:53,656 acabes gigabytes de despesa, si no terra bytes més l'espai. 249 00:11:53,656 --> 00:11:56,640 I tan super comú en el món real de desenvolupament web 250 00:11:56,640 --> 00:11:58,950 és minify seu codi. 251 00:11:58,950 --> 00:12:01,280 I, finalment, veurem com es pot fer això. 252 00:12:01,280 --> 00:12:04,630 >> Però avui en dia, anem a començar a escriure codi que en realitat és llegible per nosaltres els éssers humans. 253 00:12:04,630 --> 00:12:10,120 Resulta, però, si ens remuntem a aquesta eina en Chrome Inspeccionar Element, 254 00:12:10,120 --> 00:12:12,030 anteriorment, estàvem a la fitxa Xarxa. 255 00:12:12,030 --> 00:12:15,430 Resulta que si vas a la pestanya elements, el que es veu 256 00:12:15,430 --> 00:12:19,230 és Chrome de prou impresa versió d'aquesta mateixa HTML. 257 00:12:19,230 --> 00:12:20,640 Per a això hem deobfuscated ella. 258 00:12:20,640 --> 00:12:22,472 Així que no és rival per a un ordinador. 259 00:12:22,472 --> 00:12:24,430 I ara pot fer-ho realitat clic i començar 260 00:12:24,430 --> 00:12:27,630 per veure la jerarquia que és una pàgina web. 261 00:12:27,630 --> 00:12:28,780 Així que anem a fer això realitat. 262 00:12:28,780 --> 00:12:32,120 Vaig a seguir endavant i obrir el el meu Mac un programa anomenat d'edició de text. 263 00:12:32,120 --> 00:12:35,490 I recordeu que això és només un programa de text super simple. 264 00:12:35,490 --> 00:12:37,490 Windows té notepad.exe. 265 00:12:37,490 --> 00:12:39,820 I em vaig a peu de la lletra escrigui el següent. 266 00:12:39,820 --> 00:12:44,650 Doc tipus HTML, suport obert HTML, HTML tancat suport, 267 00:12:44,650 --> 00:12:49,000 tenim la capçalera de la pàgina d'aquí, Al final de la capçalera de la pàgina d'aquí, 268 00:12:49,000 --> 00:12:52,310 un títol serà, hola món. 269 00:12:52,310 --> 00:12:56,660 >> I després aquí baix, necessitem el cos de la pàgina web. 270 00:12:56,660 --> 00:12:58,050 Cos tancat. 271 00:12:58,050 --> 00:13:00,700 I després aquí, hola món. 272 00:13:00,700 --> 00:13:01,270 Tot bé. 273 00:13:01,270 --> 00:13:03,350 Així que hem escrit una pàgina web molt ràpid. 274 00:13:03,350 --> 00:13:06,675 Vaig a guardar-lo com hello.html en el meu escriptori. 275 00:13:06,675 --> 00:13:09,050 El meu Mac va a queixar-se, pensant que, espera un minut, 276 00:13:09,050 --> 00:13:11,091 aquest és un fitxer de text, fer vols dir-.txt? 277 00:13:11,091 --> 00:13:13,300 Però no, jo vull utilitzar HTML punt. 278 00:13:13,300 --> 00:13:16,140 >> I llavors el que és bo si simplement feu doble clic en aquest arxiu, 279 00:13:16,140 --> 00:13:18,600 hello.html, aquí està la meva pàgina web. 280 00:13:18,600 --> 00:13:22,564 Per desgràcia, jo sóc el única persona al món 281 00:13:22,564 --> 00:13:23,980 ¿Qui pot visitar aquesta pàgina en aquest moment. 282 00:13:23,980 --> 00:13:26,734 Perquè ¿d'on viuen semblar? 283 00:13:26,734 --> 00:13:27,650 És en el meu Mac, oi? 284 00:13:27,650 --> 00:13:28,470 La qual cosa és inútil. 285 00:13:28,470 --> 00:13:30,390 Igual que ningú en aquesta sala i molt menys a l'Internet 286 00:13:30,390 --> 00:13:31,598 en realitat pot visitar aquesta pàgina. 287 00:13:31,598 --> 00:13:33,820 Així que avui, hem de introduir un altre element. 288 00:13:33,820 --> 00:13:36,720 >> I per fer això, vaig a seguir endavant i obrir el núvol setembre. 289 00:13:36,720 --> 00:13:40,090 Així núvol 9 és per suposat una núvol clients-- basada CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Això té tots els nostres espais de treball corrent en algun lloc d'internet. 291 00:13:44,890 --> 00:13:48,330 I això vol dir que tots els nostres fitxers són d'accés públic ja. 292 00:13:48,330 --> 00:13:49,830 Així que seguirem endavant i fer això. 293 00:13:49,830 --> 00:13:53,670 Vaig a seguir endavant i crear un nou arxiu NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Vaig a guardar-lo com abans com hello.html i feu clic a Desa. 295 00:13:58,819 --> 00:14:01,860 I ara només per estalviar temps, em vaig seguir endavant i copiar enganxar el codi 296 00:14:01,860 --> 00:14:03,470 en lloc de escriure-la. 297 00:14:03,470 --> 00:14:04,550 I guardar-lo. 298 00:14:04,550 --> 00:14:07,550 I pel que ara tinc una arxiu anomenat hello.html. 299 00:14:07,550 --> 00:14:09,710 Però, com fer que en realitat obrir-la com una pàgina web? 300 00:14:09,710 --> 00:14:14,120 Bé, resulta que l'integrat en CS50 IDE no només és un compilador com Clang 301 00:14:14,120 --> 00:14:16,670 i un depurador com GDB i raïms d'altres programes, 302 00:14:16,670 --> 00:14:21,140 hi ha realment una de ple dret servidor web funcionant a CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Tots vostès, és a dir, tenir el seu propi servidor web. 304 00:14:23,900 --> 00:14:26,850 I un servidor web és només una peça de programari el propòsit a la vida 305 00:14:26,850 --> 00:14:28,220 és per servir pàgines web. 306 00:14:28,220 --> 00:14:32,490 Per escoltar les peticions dels navegadors i respondre amb petits sobres virtuals 307 00:14:32,490 --> 00:14:35,290 dins dels quals és el contingut que he escrit. 308 00:14:35,290 --> 00:14:38,372 Així que aquest servidor web és font realment lliure i obert. 309 00:14:38,372 --> 00:14:40,830 On codi obert només significa programari que algú més té 310 00:14:40,830 --> 00:14:43,480 escrit que tots nosaltres podem realment veure i descarregar i fins i tot 311 00:14:43,480 --> 00:14:44,780 canviar el codi font. 312 00:14:44,780 --> 00:14:46,150 I es diu Apache. 313 00:14:46,150 --> 00:14:51,450 >> I ho hem fet una mica més fàcil utilitzar en CS50IDE cridant Apache 50. 314 00:14:51,450 --> 00:14:53,780 Així que en realitat pot entendre el següent. 315 00:14:53,780 --> 00:14:56,560 Vaig a dir Apache 50 inici. 316 00:14:56,560 --> 00:14:58,910 I llavors jo només vaig a dir de punts. 317 00:14:58,910 --> 00:15:01,080 I veiem alguns una mica missatge arcana dient 318 00:15:01,080 --> 00:15:04,640 l'establiment d'Apache document [? grup?] de casa, ubuntu, sigui el que sigui, 319 00:15:04,640 --> 00:15:05,770 reduir espai de treball. 320 00:15:05,770 --> 00:15:08,280 A partir servidor web Apache 2 amb èxit. 321 00:15:08,280 --> 00:15:11,330 >> Així que conte llarg, em simplement han empès un botó 322 00:15:11,330 --> 00:15:18,000 i es va convertir en un servidor web que ara és escoltar a Internet en el port TCP 323 00:15:18,000 --> 00:15:20,587 80 en una direcció específica. 324 00:15:20,587 --> 00:15:22,420 I diu aquí, i això canviarà en funció 325 00:15:22,420 --> 00:15:26,550 en el seu nom d'usuari i altres factors, notar ara si faig clic en això, 326 00:15:26,550 --> 00:15:30,211 IDE50 punt jharvard i tal així, notar que tot aquest temps 327 00:15:30,211 --> 00:15:31,960 Durant els últims setmana, és possible que tingui 328 00:15:31,960 --> 00:15:35,200 notat que el seu propi nom d'usuari està incrustat a la part superior dreta 329 00:15:35,200 --> 00:15:37,130 cantonada de CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> I que en realitat ha estat tot això temps de la direcció a la qual es pot 331 00:15:41,050 --> 00:15:43,574 visitar tots els seus arxius a través del web. 332 00:15:43,574 --> 00:15:45,990 Fins ara, no ha importat, perquè en C, en general, 333 00:15:45,990 --> 00:15:48,073 volen que les coses s'executen en un terminal, no a la web. 334 00:15:48,073 --> 00:15:50,800 Però avui, comencem l'escriptura de codi basat en la web 335 00:15:50,800 --> 00:15:53,350 que nosaltres volem accessible a les adreces URL públiques. 336 00:15:53,350 --> 00:15:56,100 Així que el que vaig a fer és feu clic en aquest URL. 337 00:15:56,100 --> 00:16:00,880 >> I noto que veig bastant Índex lleig, un llistat de directori, 338 00:16:00,880 --> 00:16:04,090 però ¿quin arxiu salta a la vista és probable? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Això es deu al fet que vaig salvar l'arxiu en el meu espai de treball. 341 00:16:07,870 --> 00:16:12,310 I el que jo he dit Apache servidor web es buscarà en el directori de l'espai de treball de David. 342 00:16:12,310 --> 00:16:15,300 I que a ningú al món vegi aquests arxius. 343 00:16:15,300 --> 00:16:19,050 >> I de fet, si ara feu clic a hello.html, 344 00:16:19,050 --> 00:16:22,180 Veig dins d'aquesta pestanya exactament aquest arxiu. 345 00:16:22,180 --> 00:16:26,430 Ara noti, núvol obra del 9 una cosa una mica d'ajuda per a nosaltres. 346 00:16:26,430 --> 00:16:29,480 Dins IDE CS50, observi que hi ha Tot d'una una barra de direccions. 347 00:16:29,480 --> 00:16:33,690 Això és perquè tot i que estem utilitzant Chrome per visitar CS50IDE, 348 00:16:33,690 --> 00:16:37,940 interior de CS50IDE és la seva pròpia versió d'un navegador web en aquest moment. 349 00:16:37,940 --> 00:16:40,820 I així, en lloc de complicar les coses, com a tal, 350 00:16:40,820 --> 00:16:42,955 Vaig a seguir endavant i simplement copiar aquest URL. 351 00:16:42,955 --> 00:16:45,330 Vaig a seguir endavant i just obrir la meva pròpia finestra Chrome. 352 00:16:45,330 --> 00:16:47,800 Així que no hi ha màgia aquí, no hi ha CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Jo només vaig a pegar literalment la meva J Harvard URL i premeu Enter. 354 00:16:51,800 --> 00:16:54,750 I voilà, ara i En teoria, tots 355 00:16:54,750 --> 00:16:57,700 a Internet, si he configurat Apropiadament, permisos 356 00:16:57,700 --> 00:16:58,720 pot visitar aquest arxiu. 357 00:16:58,720 --> 00:17:03,230 I ara, si em va dir: hello.html, voilà, aquí 358 00:17:03,230 --> 00:17:06,366 és la meva pàgina web increïblement decebedor. 359 00:17:06,366 --> 00:17:07,740 Així que farem una comprovació de validesa ràpid. 360 00:17:07,740 --> 00:17:09,710 Perquè tot això és conceptual configuració. 361 00:17:09,710 --> 00:17:13,180 I en realitat no he realment et va ensenyar com escriure HTML en si. 362 00:17:13,180 --> 00:17:16,084 Per tant qualsevol dubte ara en el que acaba de succeir? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Sí. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Té CS50 posseeixen aquestes pàgines web? 367 00:17:25,800 --> 00:17:26,460 En quin sentit? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Bona pregunta. 370 00:17:29,530 --> 00:17:32,429 Així CS50 de propietària CS50.io. 371 00:17:32,429 --> 00:17:33,970 De fet hem comprat aquest nom de domini. 372 00:17:33,970 --> 00:17:37,240 I per la naturalesa dels nois ingressant a CS50IDE, 373 00:17:37,240 --> 00:17:39,270 tots vostès obté el que es diu un subdomini. 374 00:17:39,270 --> 00:17:46,840 >> So-IDE50 Malan o IDE50-Rob.CS50.io, aquesta és la seva adreça única dins 375 00:17:46,840 --> 00:17:47,730 nostre nom de domini. 376 00:17:47,730 --> 00:17:50,850 Així que per als propòsits de la descomptat, vostè té la seva pròpia adreça única. 377 00:17:50,850 --> 00:17:55,150 Però hem simplificat les coses per comprar el domini de nivell superior, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O i després tots els altres estan dins d'això, per així dir-ho. 379 00:17:58,050 --> 00:17:59,890 I tornarem a això en un parell de setmanes, probablement, 380 00:17:59,890 --> 00:18:01,930 especialment al projecte final temps, quan alguns de vostès 381 00:18:01,930 --> 00:18:03,596 pot ser que desitgi per obtenir els seus propis noms de domini. 382 00:18:03,596 --> 00:18:06,270 En realitat és relativament senzill. 383 00:18:06,270 --> 00:18:06,770 Tot bé. 384 00:18:06,770 --> 00:18:07,880 Així que ara farem això. 385 00:18:07,880 --> 00:18:11,910 Vaig a tornar a CS50IDE, on el meu arxiu en aquest moment, 386 00:18:11,910 --> 00:18:14,710 hello.html, no és tan interessant. 387 00:18:14,710 --> 00:18:17,130 M'agradaria fer alguna cosa una mica millor que això. 388 00:18:17,130 --> 00:18:19,440 Així que vaig a fer alguna cosa com això. 389 00:18:19,440 --> 00:18:21,510 Déjame paragraphs.html oberta. 390 00:18:21,510 --> 00:18:23,560 Així que aquest és un arxiu que vaig escriure amb antelació. 391 00:18:23,560 --> 00:18:26,480 A la part superior de la mateixa, igual que sempre, tenim observacions. 392 00:18:26,480 --> 00:18:28,730 Però en HTML, comentaris mirar una mica diferent. 393 00:18:28,730 --> 00:18:33,270 En la línia de tres i la línia 14, que veure la sintaxi per iniciar un comentari 394 00:18:33,270 --> 00:18:34,020 i acabar un comentari. 395 00:18:34,020 --> 00:18:36,820 >> Però cap de les coses en entre els assumptes funcionalment. 396 00:18:36,820 --> 00:18:40,250 És només una nota a un humana el que està passant aquí. 397 00:18:40,250 --> 00:18:43,040 I igual que un seny ràpida comprovar, si em desplaço cap avall, 398 00:18:43,040 --> 00:18:46,820 ¿Quina és la nova òbvia etiqueta que hem introduït? 399 00:18:46,820 --> 00:18:52,130 Les etiquetes fins ara que hem vist estan obertes HTML suport, cap, títol, i el cos. 400 00:18:52,130 --> 00:18:54,400 Però el que és evidentment nou ara? 401 00:18:54,400 --> 00:18:55,200 >> Sí, així pàg. 402 00:18:55,200 --> 00:18:57,320 L'etiqueta po etiqueta de paràgraf. 403 00:18:57,320 --> 00:19:01,182 I llavors jo només prestat algun incompliment Text llatí per constituir meus paràgrafs. 404 00:19:01,182 --> 00:19:03,390 Perquè el que volia demostrar és com vostè pot ser 405 00:19:03,390 --> 00:19:05,859 representar paràgrafs de text en HTML. 406 00:19:05,859 --> 00:19:08,400 I així el que està començant a succeir aquí és que ja hi ha 407 00:19:08,400 --> 00:19:09,657 un patró de desenvolupament. 408 00:19:09,657 --> 00:19:10,990 I me n'aniré endavant i fer això. 409 00:19:10,990 --> 00:19:12,760 Permetin-me primer apago Apache. 410 00:19:12,760 --> 00:19:17,340 I jo vaig a dir perquè s'iniciï en si de nou a l'interior de la font actual de set 411 00:19:17,340 --> 00:19:18,420 m directori. 412 00:19:18,420 --> 00:19:20,100 Així que no tinc accés a tot. 413 00:19:20,100 --> 00:19:22,230 >> I ara, si em vaig de nou a aquest anunci en el directori, 414 00:19:22,230 --> 00:19:24,846 noto que veig tots els arxius a partir d'avui. 415 00:19:24,846 --> 00:19:26,720 I veuràs al següent conjunt de problemes, anem a 416 00:19:26,720 --> 00:19:28,594 donarà instruccions per fer exactament això. 417 00:19:28,594 --> 00:19:35,210 Si obro paragraphs.html, això podria així semblar-se a un llenguatge de programació 418 00:19:35,210 --> 00:19:36,970 a vostè si vostè no parla o llegeix Amèrica. 419 00:19:36,970 --> 00:19:40,525 Però això és només tres paràgrafs de text que es marquen en HTML. 420 00:19:40,525 --> 00:19:43,100 >> I notar el paràgraf pauses entre ells. 421 00:19:43,100 --> 00:19:46,400 Perquè resulta que, i encara 422 00:19:46,400 --> 00:19:49,210 podria estar inclinat a fer això, mentre que en el món real, 423 00:19:49,210 --> 00:19:51,370 si vostè vol posar línia descansos entre coses, 424 00:19:51,370 --> 00:19:55,680 vostè pot ser, senzillament, fer això i prem a Desa. 425 00:19:55,680 --> 00:19:59,460 I ara, si torno a carregar aquí, previ avís que tot acaba desdibuixa junts 426 00:19:59,460 --> 00:20:01,100 en una sola bombolla de text. 427 00:20:01,100 --> 00:20:03,570 A causa d'HTML és una espècie de llenguatge mut. 428 00:20:03,570 --> 00:20:07,230 >> Està destinat a ser utilitzat en tals de manera que el navegador només es 429 00:20:07,230 --> 00:20:09,920 fer explícitament el que vostè li diu que faci. 430 00:20:09,920 --> 00:20:12,890 Així que si vostè no diu que dóna'm un nou paràgraf, 431 00:20:12,890 --> 00:20:14,569 no vas a veure un nou paràgraf. 432 00:20:14,569 --> 00:20:16,360 I de fet, el que el navegador va a fer 433 00:20:16,360 --> 00:20:20,020 és encara si prem enter, diguem que una i altra vegada 434 00:20:20,020 --> 00:20:23,190 i de nou, movent d'aquesta manera text avall a la pantalla i després guardar 435 00:20:23,190 --> 00:20:26,610 i després torneu a carregar, el navegador va a col·lapsar tot aquest espai en blanc 436 00:20:26,610 --> 00:20:29,021 en una sola, espais en blanc visible. 437 00:20:29,021 --> 00:20:29,520 Tot bé. 438 00:20:29,520 --> 00:20:30,869 Així que aquesta és l'etiqueta de paràgraf. 439 00:20:30,869 --> 00:20:32,910 I així, el que és el patró això és el desenvolupament d'aquí? 440 00:20:32,910 --> 00:20:37,450 Doncs bé, sembla ser el cas que HTML és tot sobre com iniciar una etiqueta 441 00:20:37,450 --> 00:20:38,460 i acabant una etiqueta. 442 00:20:38,460 --> 00:20:39,300 ¿I què és una etiqueta? 443 00:20:39,300 --> 00:20:41,160 Bé, és només una part de la sintaxi. 444 00:20:41,160 --> 00:20:44,400 Suport Open, una paraula clau, suport tancat, és una etiqueta. 445 00:20:44,400 --> 00:20:45,510 O començar etiqueta. 446 00:20:45,510 --> 00:20:48,590 I després quan estàs fet expressar-se, 447 00:20:48,590 --> 00:20:52,300 com en què hagi acabat amb el paràgraf, ho fa per dir-ho contrari. 448 00:20:52,300 --> 00:20:55,480 Però el contrari no és exactament a l'inrevés. 449 00:20:55,480 --> 00:21:00,630 >> Només ha de anteposi la mateixa etiqueta de nomenar amb una barra diagonal com aquest. 450 00:21:00,630 --> 00:21:01,130 Tot bé. 451 00:21:01,130 --> 00:21:02,570 Així que no tot el que emocionant. 452 00:21:02,570 --> 00:21:05,270 I, de fet, no estem fent el web tot el que sigui més interessant. 453 00:21:05,270 --> 00:21:07,630 Què passa si vull fer coses més grans i en negreta? 454 00:21:07,630 --> 00:21:11,780 Així resulta que aquí està un exemple en headings.html, on en el meu cos, 455 00:21:11,780 --> 00:21:17,280 Tinc una etiqueta H1, H2, H3, quatre, cinc, o sis, tots els quals 456 00:21:17,280 --> 00:21:18,310 semblar bastant arcà. 457 00:21:18,310 --> 00:21:21,010 Però si vaig a obrir aquest exemple, anem a fer una ullada. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Així navegadors per defecte pot donar vostè text això és gran i en negreta de grandàries dispars. 460 00:21:27,030 --> 00:21:28,070 H1 és gran. 461 00:21:28,070 --> 00:21:31,240 H6 és menor i després tota la resta en el medi. 462 00:21:31,240 --> 00:21:34,170 Així que això és interessant, però encara no és realment la web que conec. 463 00:21:34,170 --> 00:21:36,870 Què passa si volem que tinc una mena de llista. . 464 00:21:36,870 --> 00:21:40,190 Així que aquí està una llista amb vinyetes de tres de les cases de Harvard. 465 00:21:40,190 --> 00:21:41,600 >> Com va ser el procés de fer això? 466 00:21:41,600 --> 00:21:45,410 Bé, mireu list.html. 467 00:21:45,410 --> 00:21:47,870 I aquí, veiem una mica de funk 468 00:21:47,870 --> 00:21:49,630 però anem a considerar el que està succeint. 469 00:21:49,630 --> 00:21:56,182 Així que basat en el que acabes de veure, UL significa llista desordenada. 470 00:21:56,182 --> 00:21:57,640 Llista sense endreçar simplement vol dir vinyetes. 471 00:21:57,640 --> 00:21:58,431 No hi ha números. 472 00:21:58,431 --> 00:22:01,850 També hi ha una cosa anomenada 1 llista, que és un OL a l'etiqueta ordenada. 473 00:22:01,850 --> 00:22:05,350 Llavors LI, element de la llista és tot el que significa. 474 00:22:05,350 --> 00:22:07,790 >> I així de forma automàtica números de tot per a vostè. 475 00:22:07,790 --> 00:22:11,270 Però, de nou, tots els de la meva esquerda i l'espai en blanc és només per mi. 476 00:22:11,270 --> 00:22:13,050 El navegador no és en realitat cuidarà. 477 00:22:13,050 --> 00:22:16,670 Així que tot i que no podia fer això, només per ser clars, 478 00:22:16,670 --> 00:22:19,880 no es deu a tot i que El navegador segueix 479 00:22:19,880 --> 00:22:22,130 ser capaç d'entendre molt bé. 480 00:22:22,130 --> 00:22:24,590 Estic colpejant recàrrega en el meu navegador, estic fent clic recàrrega 481 00:22:24,590 --> 00:22:26,760 i cap canvi està passant perquè el navegador encara 482 00:22:26,760 --> 00:22:29,550 fent exactament el que et dic que fer. 483 00:22:29,550 --> 00:22:30,050 >> Tot bé. 484 00:22:30,050 --> 00:22:31,340 Així que tot això és només text. 485 00:22:31,340 --> 00:22:33,730 Ara farem alguna cosa més interessant. 486 00:22:33,730 --> 00:22:36,660 Vaig a seguir endavant i demanar prestat una mica d'això HTML. 487 00:22:36,660 --> 00:22:40,910 Vaig a seguir endavant i crear un nou arxiu aquí. 488 00:22:40,910 --> 00:22:43,370 I anem a trucar a aquest rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Tenim desproporcionadament alguna cosa usat 491 00:22:48,916 --> 00:22:51,290 anomenat un rotllo de rick en aquest classe aquest any, no sé, 492 00:22:51,290 --> 00:22:53,880 simplement va succeir orgànicament. 493 00:22:53,880 --> 00:22:55,397 >> I ara va sortir de control. 494 00:22:55,397 --> 00:22:56,730 Així que només vaig a anar amb ell. 495 00:22:56,730 --> 00:22:59,700 I si vaig a Google Imatges i Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Si vostè no sap per què ho fem això, acabo de llegir a la Viquipèdia. 498 00:23:06,170 --> 00:23:11,520 Cada vegada que hagi fet clic a l'enllaç, algú ha estat rient d'alguna part. 499 00:23:11,520 --> 00:23:14,860 I me n'aniré ahead-- existeix anem, anem a veure aquesta imatge. 500 00:23:14,860 --> 00:23:16,750 >> Així que aquí tenim una imatge a Google. 501 00:23:16,750 --> 00:23:19,390 I anem a suposar que es tracta d' raonablement tot arreu a Internet. 502 00:23:19,390 --> 00:23:22,570 Així que vaig a assumir que està bé per a mi per posar en realitat això a la meva pàgina web. 503 00:23:22,570 --> 00:23:24,820 Vaig a seguir endavant i copiar URL de la imatge. 504 00:23:24,820 --> 00:23:28,600 I ara si em vaig de nou al núvol 9, anem a veure el que puc fer aquí. 505 00:23:28,600 --> 00:23:30,630 Així que aquí és només una pàgina web. 506 00:23:30,630 --> 00:23:39,020 Aquesta és Rick Astley, jaja, Vaig ara a tornar 507 00:23:39,020 --> 00:23:43,510 al meu navegador, torneu a carregar, i interessant. 508 00:23:43,510 --> 00:23:44,530 >> On és Rick? 509 00:23:44,530 --> 00:23:46,050 Així que permetin-me veure el que ha passat. 510 00:23:46,050 --> 00:23:49,114 En realitat, jo vaig a fer veure que jo no vaig fer això. 511 00:23:49,114 --> 00:23:50,280 [Inaudible] el va posar aquí. 512 00:23:50,280 --> 00:23:52,520 Tornarem a això en un moment. 513 00:23:52,520 --> 00:23:54,200 Així que aquí està rick.html. 514 00:23:54,200 --> 00:23:56,070 Així que això no és Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Així que resulta que puguem en realitat el afegir aquí. 516 00:23:59,680 --> 00:24:00,830 Es tracta de Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Jo vaig a dir que em donen una imatge el font és l'adreça URL que acabo de copiat, que 518 00:24:06,680 --> 00:24:09,110 pel que sembla, és un feliç aniversari una cosa o una altra. 519 00:24:09,110 --> 00:24:13,280 >> I ara vaig a tancar l'etiqueta així. 520 00:24:13,280 --> 00:24:15,170 Així que això és embolicar super llarg. 521 00:24:15,170 --> 00:24:17,740 Però noto que tot el que tinc fet imatge claudàtor obert és a dir, 522 00:24:17,740 --> 00:24:20,270 font amb un atribut d'aquest. 523 00:24:20,270 --> 00:24:21,530 I és una molt llarga URL. 524 00:24:21,530 --> 00:24:23,720 I al final, compte d'això. 525 00:24:23,720 --> 00:24:29,530 Slash Per què he fet forca en lloc de, com qualsevol altra etiqueta, 526 00:24:29,530 --> 00:24:33,590 tenir un suport obert, IMG, suport tancat? 527 00:24:33,590 --> 00:24:37,040 Només cal fer una conjectura fins i tot si no tenen familiaritat alguna 528 00:24:37,040 --> 00:24:40,410 amb HTML abans. 529 00:24:40,410 --> 00:24:42,710 >> Així és com es tanca la comanda, però per què 530 00:24:42,710 --> 00:24:45,850 ¿No realment fer intuïtiva sentit de fer alguna cosa una mica més 531 00:24:45,850 --> 00:24:48,820 verbose com prop d'imatge? 532 00:24:48,820 --> 00:24:51,400 Sí. 533 00:24:51,400 --> 00:24:52,000 Sí. 534 00:24:52,000 --> 00:24:55,620 Només semànticament, no hi ha sentit de a partir d'una imatge i acabant una imatge, 535 00:24:55,620 --> 00:24:56,870 és allà o no ho és. 536 00:24:56,870 --> 00:25:00,960 Per tant, no té sentit deixar un espai per a qualsevol altra cosa dins d'una imatge. 537 00:25:00,960 --> 00:25:02,010 Vostè simplement no pot fer això. 538 00:25:02,010 --> 00:25:03,720 I així la sintaxi seria generalment just 539 00:25:03,720 --> 00:25:07,910 fer la barra diagonal a l'interior de l'etiqueta oberta o l'etiqueta d'inici 540 00:25:07,910 --> 00:25:09,020 i després feu clic a Desa. 541 00:25:09,020 --> 00:25:13,350 >> Així que si ara torna a carregar l'arxiu, ara Tinc un bon lloc a Internet la pàgina de cuina aquí. 542 00:25:13,350 --> 00:25:15,100 I podríem sens dubte realment molestar la gent 543 00:25:15,100 --> 00:25:17,010 mitjançant la incorporació en comptes com un enllaç de YouTube. 544 00:25:17,010 --> 00:25:19,350 I de fet, en qualsevol moment Alguna vegada has anat a YouTube, 545 00:25:19,350 --> 00:25:22,190 i em va deixar realment accidentalment rick rodar jo aquí. 546 00:25:22,190 --> 00:25:25,770 Així que Rick roll. 547 00:25:25,770 --> 00:25:29,592 Així rick Roll-- vaig a anar aquí. 548 00:25:29,592 --> 00:25:31,900 >> [REPRODUCCIÓ DE MÚSICA] 549 00:25:31,900 --> 00:25:33,730 >> OK, una persona li agrada això. 550 00:25:33,730 --> 00:25:37,270 Així compte de tot aquest temps, si feu clic a l'enllaç Share, és clar 551 00:25:37,270 --> 00:25:41,390 obtenir la URL que pugui realment incrustar en un correu electrònic o una imatge forense 552 00:25:41,390 --> 00:25:43,730 o en un conjunt de problemes o en una diapositiva. 553 00:25:43,730 --> 00:25:49,055 I ara, si em vegada clic a embed, notar que tot aquest temps, aquestes coses 554 00:25:49,055 --> 00:25:49,680 ha estat allà. 555 00:25:49,680 --> 00:25:50,910 Vaig a seguir endavant i copiar aquest. 556 00:25:50,910 --> 00:25:54,000 >> I només perquè puguem veure millor, estic va a pegar en el meu editor de text. 557 00:25:54,000 --> 00:25:55,860 Tingueu en compte que això ho YouTube ha estat dient. 558 00:25:55,860 --> 00:25:57,693 Cada vegada que visita un Vídeo de YouTube, si 559 00:25:57,693 --> 00:26:00,410 desitgi incrustar el vídeo en el seu pàgina web, només ha de agafar això. 560 00:26:00,410 --> 00:26:03,350 Així que aquest és un altre Etiqueta HTML diu un iframe. 561 00:26:03,350 --> 00:26:04,590 O un marc en línia. 562 00:26:04,590 --> 00:26:08,680 Per tant, també es veu una mica més complex que tots els altres. 563 00:26:08,680 --> 00:26:11,950 Així que resulta que la imatge etiqueta i pel que sembla l'etiqueta iframe 564 00:26:11,950 --> 00:26:13,370 prendre el que són anomenats atributs. 565 00:26:13,370 --> 00:26:15,710 >> I aquest és un altre tros de sintaxi en HTML. 566 00:26:15,710 --> 00:26:19,240 A més de l'etiqueta de nom, nom d'etiqueta oberta del suport, 567 00:26:19,240 --> 00:26:23,780 es pot controlar el comportament de l'etiqueta per tenir un munt d'atributs 568 00:26:23,780 --> 00:26:24,860 igual valor. 569 00:26:24,860 --> 00:26:26,290 Atribut igual valor. 570 00:26:26,290 --> 00:26:28,100 I així, per exemple, YouTube ens està dient 571 00:26:28,100 --> 00:26:31,990 si voleu que l'ample d'aquest vídeo per a ser 420 píxels i l'alçada 572 00:26:31,990 --> 00:26:35,470 ser 315 píxels, això és com ho expresses en HTML. 573 00:26:35,470 --> 00:26:38,480 >> La font del vídeo es va estar tant de temps URL de YouTube 574 00:26:38,480 --> 00:26:40,830 i després algunes altres coses com la frontera del marc és zero, 575 00:26:40,830 --> 00:26:43,500 de manera que probablement vol dir que hi ha sense vora per la cosa. 576 00:26:43,500 --> 00:26:45,450 Permetre pantalla completa, probablement, significa que l'usuari 577 00:26:45,450 --> 00:26:47,840 pot fer clic en un botó i realment la pantalla completa del vídeo. 578 00:26:47,840 --> 00:26:52,870 Així que si realment vull ser impressionant aquí a Rick punt HTML, 579 00:26:52,870 --> 00:26:58,490 en lloc d'utilitzar l'etiqueta de la imatge, i molt em esborro que, en lloc enganxa aquest. 580 00:26:58,490 --> 00:27:00,810 I ara recarregar. 581 00:27:00,810 --> 00:27:02,500 I ara aquí anem de nou. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Molt bé, ja n'hi ha prou. 584 00:27:06,020 --> 00:27:08,970 Està bé així que intentaré difícil no fer-ho de nou. 585 00:27:08,970 --> 00:27:11,400 Quins són alguns dels robatoris de pilota d'aquí? 586 00:27:11,400 --> 00:27:15,130 Així HTML, tan lleig com aquestes pàgines web són, en realitat és bastant simple. 587 00:27:15,130 --> 00:27:16,467 No és un llenguatge de programació. 588 00:27:16,467 --> 00:27:17,550 No té funcions. 589 00:27:17,550 --> 00:27:18,410 No té bucles. 590 00:27:18,410 --> 00:27:19,535 No té condicions. 591 00:27:19,535 --> 00:27:22,900 Tot el que té és desenes de etiquetes diferents, cadascun dels quals 592 00:27:22,900 --> 00:27:24,620 té zero o més atributs. 593 00:27:24,620 --> 00:27:27,320 I de fet, el que és divertit sobre HTML com vostè comença a submergir-se en 594 00:27:27,320 --> 00:27:29,560 és que és acte ensenyable molt. 595 00:27:29,560 --> 00:27:32,880 >> Només es necessita una entesa del marc general d'HTML. 596 00:27:32,880 --> 00:27:36,510 Què és una etiqueta, què és un atribut, Com en realitat configura una pàgina web 597 00:27:36,510 --> 00:27:37,250 com segueix. 598 00:27:37,250 --> 00:27:40,720 I tota la resta és realment el resultat de mirar cap amunt en una referència en línia 599 00:27:40,720 --> 00:27:43,080 o googlejar com fer algunes tècnica o com hem vist, 600 00:27:43,080 --> 00:27:45,371 busca a la font de Facebook codi, mirant a un lloc web 601 00:27:45,371 --> 00:27:48,710 que t'agrada en ell és el codi font i la comprensió de com els desenvolupadors d'allà 602 00:27:48,710 --> 00:27:50,550 realment relaxat coses. 603 00:27:50,550 --> 00:27:52,180 >> Així que podem fer imatges també. 604 00:27:52,180 --> 00:27:53,994 I de fet, ho vam fer fa un moment. 605 00:27:53,994 --> 00:27:55,410 Déjame anar endavant i només et mostro. 606 00:27:55,410 --> 00:27:56,770 Aquests són alguns exemples de codi. 607 00:27:56,770 --> 00:27:58,380 Si alguna vegada vols veure gat rondinaire. 608 00:27:58,380 --> 00:28:00,620 Així que adonar-se que el que pugui tenir una etiqueta d'imatge aquí. 609 00:28:00,620 --> 00:28:02,090 I tinc un comentari sobre ella. 610 00:28:02,090 --> 00:28:04,490 Tinc una alternativa text per a l'accessibilitat. 611 00:28:04,490 --> 00:28:07,250 Així que algú que està utilitzant una pantalla lector per raons de vista 612 00:28:07,250 --> 00:28:10,172 en realitat pot llavors tenir la seva lector de pantalla dir gat rondinaire. 613 00:28:10,172 --> 00:28:11,880 Perquè si no poden veure la imatge, que 614 00:28:11,880 --> 00:28:14,504 almenys pot tenir el seu ordinador dir-los verbalment el que és. 615 00:28:14,504 --> 00:28:18,020 I la font d'aquest arxiu és cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Així que, de fet, si jo realment volia aconseguir llest, el que podria tenir done-- 617 00:28:22,472 --> 00:28:25,680 Prometo no anar a Rick Astley, per la qual Vaig a google per un gat al seu lloc. 618 00:28:25,680 --> 00:28:28,290 I si vaig a Google aquí, i anem a suposar 619 00:28:28,290 --> 00:28:30,040 que aquesta és una foto del meu gat. 620 00:28:30,040 --> 00:28:35,070 >> Suposem que tinc el control fa clic o la dreta clic en aquest, per accident 621 00:28:35,070 --> 00:28:35,630 esgarrifós. 622 00:28:35,630 --> 00:28:40,320 I cat.jpeg vaig per guardar en el meu escriptori. 623 00:28:40,320 --> 00:28:44,700 Permetin-me ara torno al núvol setembre. 624 00:28:44,700 --> 00:28:48,150 Tingueu en compte que aquí, pot anar a carregar els arxius locals. 625 00:28:48,150 --> 00:28:51,530 I si m'agafa aquest arxiu, cat.jpeg, previ avís 626 00:28:51,530 --> 00:28:54,674 que puc arrossegar i col·locar en el núvol setembre 627 00:28:54,674 --> 00:28:56,090 i que va a cridar a mi aquí. 628 00:28:56,090 --> 00:28:59,000 >> Perquè ja hem donat un arxiu cat.jpeg, 629 00:28:59,000 --> 00:29:01,430 però és molt fàcil de fer una foto que tens 630 00:29:01,430 --> 00:29:03,220 presa de Facebook o Flickr o similar 631 00:29:03,220 --> 00:29:05,678 i en realitat arrossegar en el núvol 9 i després fan 632 00:29:05,678 --> 00:29:07,970 part del seu propi personal pàgina web o problema 633 00:29:07,970 --> 00:29:10,442 establir set o vuit com a molt aviat veurem. 634 00:29:10,442 --> 00:29:12,150 I després, quan finalment visitar aquest gat, 635 00:29:12,150 --> 00:29:16,610 assumint que he descarregat aquest mateix gat, avís que-- que era adorable. 636 00:29:16,610 --> 00:29:19,160 >> El que es pot veure és una mena aquesta cara aquí. 637 00:29:19,160 --> 00:29:21,810 Així que els arxius que de referència dins d'una pàgina web 638 00:29:21,810 --> 00:29:26,050 o bé pot ser local en el seu propi compte o remot en algun altre servidor 639 00:29:26,050 --> 00:29:29,670 com en el cas de la Rick Foto Astley fa una mica. 640 00:29:29,670 --> 00:29:32,990 Llavors, on el else-- més podem fer aquí? 641 00:29:32,990 --> 00:29:34,890 Així que donem una ullada a la següent. 642 00:29:34,890 --> 00:29:36,160 Vostè sap el que està bastant guai? 643 00:29:36,160 --> 00:29:39,330 >> Fins ara hem estat fent pàgines web molt estàtica. 644 00:29:39,330 --> 00:29:41,830 Vull condimentar les coses de la següent manera. 645 00:29:41,830 --> 00:29:44,344 Vull fer el meu propi motor de cerca. 646 00:29:44,344 --> 00:29:47,010 Així que per fer un motor de cerca, anem a seguir endavant i començar a fer això. 647 00:29:47,010 --> 00:29:52,570 Vaig a seguir endavant i crear un nou arxiu anomenat search.html. 648 00:29:52,570 --> 00:29:54,890 I hem prefabed versions en línia. 649 00:29:54,890 --> 00:29:56,027 Vaja. 650 00:29:56,027 --> 00:29:57,610 No enganxar a la finestra del terminal. 651 00:29:57,610 --> 00:29:58,744 Versions muntades en línia. 652 00:29:58,744 --> 00:30:00,160 I jo vaig a començar la següent. 653 00:30:00,160 --> 00:30:04,490 Així que aquí està el començament de un arxiu anomenat search.html. 654 00:30:04,490 --> 00:30:07,510 Vaig a guardar-lo en directori d'origen d'avui. 655 00:30:07,510 --> 00:30:09,079 Vaig a trucar a aquesta cerca. 656 00:30:09,079 --> 00:30:10,370 En realitat, ho farem millor. 657 00:30:10,370 --> 00:30:13,600 CS50 Recerca i realment marca la mateixa. 658 00:30:13,600 --> 00:30:17,500 I ara, jo vaig a dir una mena H1 CS50 Cerca. 659 00:30:17,500 --> 00:30:20,930 I després aquí baix, H2 properament. 660 00:30:20,930 --> 00:30:23,230 I només per recapitular, H1 i H2 significa el respectivament? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Sí, per la gran i en negreta, i no tan gran, però encara negreta. 663 00:30:30,320 --> 00:30:37,375 Així que si puc guardar això i vaig per aquí, anem a veure la search.html arxiu. 664 00:30:37,375 --> 00:30:42,560 Molt bé, i aquest és dreta- [inaudible]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Prepareu-vos. 667 00:30:49,110 --> 00:30:49,945 David és confusa. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, és just aquí. 670 00:30:54,080 --> 00:30:54,860 David és un idiota. 671 00:30:54,860 --> 00:30:55,420 D'ACORD. 672 00:30:55,420 --> 00:30:56,660 Així que aquí està. 673 00:30:56,660 --> 00:30:58,350 Així CS50 recerca properament. 674 00:30:58,350 --> 00:31:00,370 Així que ara, anem a sintetitzar el que vam fer la setmana passada. 675 00:31:00,370 --> 00:31:03,400 >> Quan parlem de la mecànica menor nivell d'HTTP. 676 00:31:03,400 --> 00:31:05,780 I aquestes noves idees d'HTML, que és només 677 00:31:05,780 --> 00:31:08,890 Aquest llenguatge de marques en què explicar un navegador exactament què fer 678 00:31:08,890 --> 00:31:10,740 i implementar el nostre propi motor de cerca. 679 00:31:10,740 --> 00:31:12,520 Així que en lloc de només dient que ve aviat, estic 680 00:31:12,520 --> 00:31:14,810 va introduir cosa que es diu una etiqueta de formulari. 681 00:31:14,810 --> 00:31:19,610 I en aquesta forma, vaig a tenir alguna cosa com un camp d'entrada. 682 00:31:19,610 --> 00:31:22,450 >> I el nom d'aquesta entrada camp, vaig a dir-P. 683 00:31:22,450 --> 00:31:26,240 I el tipus d'aquest camp d'entrada Jo vaig a dir és "text". 684 00:31:26,240 --> 00:31:29,130 I un camp de text, com veurem veure, és només un quadre de text. 685 00:31:29,130 --> 00:31:32,830 I així no sentir aquí per tenir res dins d'ell en aquest moment. 686 00:31:32,830 --> 00:31:35,320 I així que estic simplement va per tancar l'etiqueta amb la qual 687 00:31:35,320 --> 00:31:38,099 barra diagonal just a la pròpia etiqueta. 688 00:31:38,099 --> 00:31:39,890 I després vaig a tenir una altra entrada. 689 00:31:39,890 --> 00:31:43,480 Tipus d'entrada és igual a presentar. 690 00:31:43,480 --> 00:31:45,320 I després vaig a tancar aquesta també. 691 00:31:45,320 --> 00:31:46,840 >> I ara vaig a tornar aquí. 692 00:31:46,840 --> 00:31:49,520 I ja veiem, encara que bastant lleig, tinc 693 00:31:49,520 --> 00:31:52,460 aconseguir els inicis de la meva pròpia pàgina de cerca aquí. 694 00:31:52,460 --> 00:31:55,150 De fet, vaig a tractar de netejar això una mica. 695 00:31:55,150 --> 00:31:57,330 Resulta que en el Introduir, puc tenir 696 00:31:57,330 --> 00:31:59,910 altre atribut anomenat marcador de posició. 697 00:31:59,910 --> 00:32:05,165 I podria veure alguna cosa com paraules clau, o més específicament, consulteu per q. 698 00:32:05,165 --> 00:32:07,820 >> I compte, ara, tinc aquest tipus de text gris 699 00:32:07,820 --> 00:32:10,440 que desapareix tan abans de començar a escriure, 700 00:32:10,440 --> 00:32:12,930 però és probable que hi hagi alguna cosa vostè ha vist en altres pàgines web. 701 00:32:12,930 --> 00:32:14,650 No m'agrada realment el botó Enviar. 702 00:32:14,650 --> 00:32:18,320 Així que estic realment va a donar el Botó Enviar un valor de cerca. 703 00:32:18,320 --> 00:32:21,680 I ara, si torno a carregar, observi que el meu botó es converteix en el nom de cerca. 704 00:32:21,680 --> 00:32:24,140 Saps, realment no em com el logo aquí. 705 00:32:24,140 --> 00:32:27,140 Així generador de Google Font. 706 00:32:27,140 --> 00:32:28,820 >> Vull donar-li vida a això encara més. 707 00:32:28,820 --> 00:32:30,660 Cerca per CS50. 708 00:32:30,660 --> 00:32:31,870 Déjame crear el meu propi logo. 709 00:32:31,870 --> 00:32:33,080 Sembla interessant. 710 00:32:33,080 --> 00:32:36,945 Així que ara anem a salvar aquest com-- anem. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 On va? 713 00:32:43,120 --> 00:32:43,620 Hi ha. 714 00:32:43,620 --> 00:32:44,160 D'ACORD. 715 00:32:44,160 --> 00:32:44,980 Perdut. 716 00:32:44,980 --> 00:32:47,740 Guardar com. 717 00:32:47,740 --> 00:32:49,470 Navegadors estúpid. 718 00:32:49,470 --> 00:32:51,700 Prepareu-vos, anem a arreglar això d'una vegada per totes. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Som-hi. 721 00:32:58,590 --> 00:32:59,090 Tot bé. 722 00:32:59,090 --> 00:32:59,600 Ho sento. 723 00:32:59,600 --> 00:33:00,750 Dia lliure. 724 00:33:00,750 --> 00:33:02,310 Ara bé, això és molt de moda. 725 00:33:02,310 --> 00:33:03,160 Surt de la pantalla completa. 726 00:33:03,160 --> 00:33:04,150 Tot bé. 727 00:33:04,150 --> 00:33:06,870 >> Ara, igual que un de normal persona, registrar la imatge. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Ara vaig a entrar en CS50IDE i Vaig a simplement agafar el logotip, 730 00:33:13,194 --> 00:33:15,360 Vaig a arrossegar-lo a el meu directori font 07:00, 731 00:33:15,360 --> 00:33:17,002 ja existeix l'arxiu, estic bé amb això. 732 00:33:17,002 --> 00:33:19,210 Així que vaig a anul·lar- perquè jo ja tenia. 733 00:33:19,210 --> 00:33:20,630 I ara, com puc desfer-me d'això? 734 00:33:20,630 --> 00:33:24,670 >> Seguirem endavant i fer aquí font d'imatge és igual logo.gif. 735 00:33:24,670 --> 00:33:25,490 Tancar aquesta. 736 00:33:25,490 --> 00:33:26,050 Save. 737 00:33:26,050 --> 00:33:30,560 I ara si em torno a la meva recerca pàgina, ara es veu bastant bé. 738 00:33:30,560 --> 00:33:33,610 Molt bé, pel que no té bastant fet res útil. 739 00:33:33,610 --> 00:33:37,000 De fet, vaig a intentar buscar per a un gat i veure què passa. 740 00:33:37,000 --> 00:33:38,890 Gats. 741 00:33:38,890 --> 00:33:39,420 Maleït sigui. 742 00:33:39,420 --> 00:33:41,400 No només funciona, pel que sembla. 743 00:33:41,400 --> 00:33:43,760 Quina és la peça clau que falta aquí? 744 00:33:43,760 --> 00:33:49,100 >> Dreta, encara que no sap res d'HTML, He començat a marcar el formulari de telèfon 745 00:33:49,100 --> 00:33:54,130 i jo he dit és com aconseguir entrades, dóna'm un quadre de text i un botó d'enviament, 746 00:33:54,130 --> 00:33:55,730 quina peça aparentment falta? 747 00:33:55,730 --> 00:33:58,975 Suposem que volem aconseguir realment aquesta cosa funcioni correctament. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Què necessitem fer? 750 00:34:05,360 --> 00:34:08,860 Tenim una necessitat d'implementar la part de darrere base de dades o el motor de recerca de si mateix, 751 00:34:08,860 --> 00:34:11,210 i això va a prendre un tot molt de temps, francament. 752 00:34:11,210 --> 00:34:13,380 >> Així recordem el que vam fer l'última vegada. 753 00:34:13,380 --> 00:34:18,230 Així que si vostè busca alguna cosa a Google i ha avançat desactivat, 754 00:34:18,230 --> 00:34:20,355 revocatori, cerca instantània. 755 00:34:20,355 --> 00:34:22,230 Així que permetin-me que fos de manera que en realitat això 756 00:34:22,230 --> 00:34:26,650 es comporta com un navegador de l'escola més antiga, si jo ara busco alguna cosa com gats, 757 00:34:26,650 --> 00:34:28,190 recordar el que l'URL es sembla. 758 00:34:28,190 --> 00:34:29,449 És bastant críptic. 759 00:34:29,449 --> 00:34:33,000 Però incrustat allà, record, és la recerca de tala. 760 00:34:33,000 --> 00:34:35,100 Signe d'interrogació q és igual als gats. 761 00:34:35,100 --> 00:34:37,760 >> I això em sembla donar un munt de resultats de cerca. 762 00:34:37,760 --> 00:34:39,134 Així que ja saps el que vaig a fer? 763 00:34:39,134 --> 00:34:41,650 Vaig a demanar prestat Google només per un minut. 764 00:34:41,650 --> 00:34:43,670 Vaig a anar més aquí i jo vaig a dir 765 00:34:43,670 --> 00:34:47,850 que aquesta forma d'acció o destí, per així dir-ho, 766 00:34:47,850 --> 00:34:49,330 literalment ha de ser Google. 767 00:34:49,330 --> 00:34:52,590 I el mètode que jo volia per a ús serà aconseguir. 768 00:34:52,590 --> 00:34:53,560 >> Llavors, què és l'acció? 769 00:34:53,560 --> 00:34:55,760 Acció està estranyament nomenat, però això només significa 770 00:34:55,760 --> 00:34:58,120 ¿Qui va a gestionar l'acció d'aquesta manera? 771 00:34:58,120 --> 00:35:00,820 Quan faig clic a Cerca, on si el resultat d'anar? 772 00:35:00,820 --> 00:35:05,300 I si ara torno a la meva forma aquí i recarregar la meva pàgina web 773 00:35:05,300 --> 00:35:09,000 i ara buscar alguna cosa com el gos, compta ara 774 00:35:09,000 --> 00:35:10,850 He re implementat Google. 775 00:35:10,850 --> 00:35:11,350 Oi? 776 00:35:11,350 --> 00:35:14,141 >> Si vull buscar alguna cosa una altra cosa, funciona per no només els gossos, 777 00:35:14,141 --> 00:35:16,400 també funciona per als gats. 778 00:35:16,400 --> 00:35:21,930 Això també funciona per CS50. 779 00:35:21,930 --> 00:35:24,310 I bé, això és només sota a sobre teu, no? 780 00:35:24,310 --> 00:35:25,920 Molt bé, però realment funciona. 781 00:35:25,920 --> 00:35:27,360 Així que el que està succeint realment? 782 00:35:27,360 --> 00:35:31,340 Així que m'he ensenyat al meu navegador, utilitzant HTML, per prendre la entrada de l'usuari 783 00:35:31,340 --> 00:35:35,810 i en realitat enviar aquesta entrada a un servidor remot a través d'HTTP. 784 00:35:35,810 --> 00:35:39,120 >> I perquè el meu navegador entén HTTP, que en realitat 785 00:35:39,120 --> 00:35:43,500 construir la URL perquè ho Acabo altra vegada en el meu navegador, 786 00:35:43,500 --> 00:35:45,660 adonar-se del que passa quan vaig buscar per al gos. 787 00:35:45,660 --> 00:35:49,270 Si faig clic a Cerca, observi que la URL canvia a mesura que pensava 788 00:35:49,270 --> 00:35:52,770 a google.com/search~~V consulta equival gos. 789 00:35:52,770 --> 00:35:56,020 I això és perquè la forma sap, perquè el mètode és obtenir, 790 00:35:56,020 --> 00:35:59,560 simplement afegir a aquesta URL allà. 791 00:35:59,560 --> 00:36:01,730 >> Ara, aquestes pàgines web són encara lleig. 792 00:36:01,730 --> 00:36:04,890 Així que anem a introduir un altre tros de sintaxi si podem avui. 793 00:36:04,890 --> 00:36:07,640 I això és una cosa conegut com les fulles d'estil en cascada. 794 00:36:07,640 --> 00:36:10,720 Així que permetin-me fer una ullada a aquest exemple aquí i veure 795 00:36:10,720 --> 00:36:12,380 si podem inferir el que està passant. 796 00:36:12,380 --> 00:36:14,520 Això és CSS0.html. 797 00:36:14,520 --> 00:36:16,532 I aquí és on les coses aconseguir una mica lleig. 798 00:36:16,532 --> 00:36:18,490 Perquè per desgràcia, en el món de la web, 799 00:36:18,490 --> 00:36:20,920 HTML per si sola no pot fer-ho tot. 800 00:36:20,920 --> 00:36:22,920 I així, si vols estilitzar la teva pàgina web, 801 00:36:22,920 --> 00:36:28,370 que realment necessita per centrar-se en el l'estètica d'una manera diferent. 802 00:36:28,370 --> 00:36:33,090 Així que aquí, tinc el cos de la meva web pàgina dins de la qual és un gran div. 803 00:36:33,090 --> 00:36:34,700 I un div només significa divisió. 804 00:36:34,700 --> 00:36:38,060 Així que és com un paràgraf però no té la mateixa semàntica 805 00:36:38,060 --> 00:36:39,180 d'un paràgraf de text. 806 00:36:39,180 --> 00:36:40,940 >> Això només significa que el navegador, aquí ve 807 00:36:40,940 --> 00:36:45,210 una regió rectangular gran de la meva web pàgina, vull manejar de forma especial. 808 00:36:45,210 --> 00:36:47,420 Ara, la línia 21 és on comença aquesta div. 809 00:36:47,420 --> 00:36:48,770 I acaba de prendre una conjectura. 810 00:36:48,770 --> 00:36:53,080 Quin és l'efecte de la línia 21 en el resta dels continguts de la pàgina? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Centrant. 813 00:36:56,311 --> 00:36:56,810 Això és tot. 814 00:36:56,810 --> 00:36:58,830 Així que no hem vist una forma de en realitat centrar el text. 815 00:36:58,830 --> 00:37:00,996 >> De fet, el meu motor de cerca, a diferència de l'actual Google, 816 00:37:00,996 --> 00:37:03,040 va ser tot justificat a l'esquerra. 817 00:37:03,040 --> 00:37:07,430 I pel que ara en la línia 21, que estic dient, hey navegador, crear una divisió de la pàgina. 818 00:37:07,430 --> 00:37:09,450 Només dóna'm un gran, rectangle invisible. 819 00:37:09,450 --> 00:37:11,490 Això és el que vull pensar en la pàgina web. 820 00:37:11,490 --> 00:37:13,870 I després estilitzar la següent manera. 821 00:37:13,870 --> 00:37:16,900 Dins d'aquestes cotitzacions, Ara, és un segon idioma 822 00:37:16,900 --> 00:37:19,969 que presentem avui trucades fulls d'estil en cascada. 823 00:37:19,969 --> 00:37:22,010 Afortunadament, també no és un llenguatge de programació, 824 00:37:22,010 --> 00:37:26,470 així que és molt limitat en la seva sintaxi, però També és molt limitat en la seva funcionalitat 825 00:37:26,470 --> 00:37:30,670 mentre que HTML està tot sobre el marcatge de les dades d'una pàgina web 826 00:37:30,670 --> 00:37:32,130 i l'estructura d'una pàgina web. 827 00:37:32,130 --> 00:37:35,320 CSS és generalment d'aproximadament el última milla, l'estètica, 828 00:37:35,320 --> 00:37:40,160 aconseguir la mida i el color i la col·locació exactament a la dreta en una pàgina web. 829 00:37:40,160 --> 00:37:43,000 I, de fet, està format amb parells de valors clau. 830 00:37:43,000 --> 00:37:46,290 >> Una propietat d'aquest tipus, el text alinear, seguit de dos punts, 831 00:37:46,290 --> 00:37:49,720 seguit pel valor d'aquest propietat, que en aquest cas és central. 832 00:37:49,720 --> 00:37:51,910 I ara adonar que Pot niar aquestes coses. 833 00:37:51,910 --> 00:37:56,780 Si volia tot en aquesta He destacat d'estar centrat, 834 00:37:56,780 --> 00:38:00,270 és per això que tinc la línia 21 i la línia corresponent 31. 835 00:38:00,270 --> 00:38:04,820 Però suposem ara volen dir John Harvard, benvingut a la meva pàgina d'inici. 836 00:38:04,820 --> 00:38:06,530 >> Símbol de copyright John Harvard. 837 00:38:06,530 --> 00:38:09,180 I suposo que vull la primera de aquestes línies per ser bastant gran. 838 00:38:09,180 --> 00:38:10,450 36 píxels. 839 00:38:10,450 --> 00:38:11,530 Així que això és una mida decent. 840 00:38:11,530 --> 00:38:13,240 I jo volia el seu pes a ser valents. 841 00:38:13,240 --> 00:38:15,450 Però llavors sota d'això, Vull text més petit. 842 00:38:15,450 --> 00:38:19,980 I sota d'això, vull text encara més petit. 843 00:38:19,980 --> 00:38:20,480 Ho sento. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Avui en dia se sent com un dia de descans. 846 00:38:26,940 --> 00:38:29,840 >> Així que ara, què estic fent per expressar això? 847 00:38:29,840 --> 00:38:34,580 Aquí a la línia 22 és una encastat div o div niat, si es vol. 848 00:38:34,580 --> 00:38:36,190 També té la seva pròpia etiqueta d'estil. 849 00:38:36,190 --> 00:38:38,160 Puc especificar una mida de font de 36. 850 00:38:38,160 --> 00:38:40,460 Puc especificar un pes de la font de negreta. 851 00:38:40,460 --> 00:38:43,360 Aquí sota, només puc especificar 24 píxels. 852 00:38:43,360 --> 00:38:45,960 I, finalment, en la línia 28, que especifiqui 12. 853 00:38:45,960 --> 00:38:49,070 Així que com una prova de seny ràpida i com una lectura humana això, 854 00:38:49,070 --> 00:38:52,545 que les paraules en la pantalla són en realitat va a ser audaç? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Quines línies són realment audaç? 857 00:38:58,760 --> 00:38:59,570 >> Només John Harvard. 858 00:38:59,570 --> 00:39:00,070 Oi? 859 00:39:00,070 --> 00:39:05,940 Perquè així com la línia 22 diu bo navegador, aquí hi ha una divisió de la pàgina. 860 00:39:05,940 --> 00:39:07,920 Que sigui la mida de font de 36 punts. 861 00:39:07,920 --> 00:39:09,460 Fer que el pes de la font negreta. 862 00:39:09,460 --> 00:39:11,920 Tan aviat com arribi a la etiqueta final corresponent 863 00:39:11,920 --> 00:39:15,340 o etiqueta de tancament a la línia 24, això vol dir, bé navegador, 864 00:39:15,340 --> 00:39:17,640 deixar de fer el que sigui que estigui fent. 865 00:39:17,640 --> 00:39:21,020 I fixin-se que quedi clar, tot i que línia 22 té tots aquests atributs 866 00:39:21,020 --> 00:39:24,430 com l'estil, quan tancar l'etiqueta en la línia 24, 867 00:39:24,430 --> 00:39:25,940 només s'esmenta el nom de l'etiqueta. 868 00:39:25,940 --> 00:39:29,990 >> No repetir l'estil paraula o tot el que hi ha dins d'aquestes cotitzacions. 869 00:39:29,990 --> 00:39:32,860 I pel que si em veig en aquest moment en el meu navegador, donem 870 00:39:32,860 --> 00:39:38,060 Una mirada a el resultat final. Deixa'm anar per davant d'aquest arxiu, que és CSS 0. 871 00:39:38,060 --> 00:39:41,814 I tot i així és força planer, però aconseguir força interessant. 872 00:39:41,814 --> 00:39:43,980 Però resulta que hi ha altres coses que puc fer aquí, 873 00:39:43,980 --> 00:39:46,490 i en el risc de fer aquesta completament horrible, 874 00:39:46,490 --> 00:39:48,630 notar aquí que en el meu cos de la meva pàgina web, 875 00:39:48,630 --> 00:39:53,930 Puc fer alguna cosa divertida com bg o color de fons. 876 00:39:53,930 --> 00:39:56,670 >> I ràpid, quin és el teu color preferit? 877 00:39:56,670 --> 00:39:57,720 Verd que vaig sentir. 878 00:39:57,720 --> 00:39:58,750 Tot bé. 879 00:39:58,750 --> 00:40:02,920 Així que ara, si em va colpejar recàrrega ara, tenim una pàgina web verd. 880 00:40:02,920 --> 00:40:04,710 Molt bé, així que no està malament. 881 00:40:04,710 --> 00:40:08,350 I ara, si vull fer això realment fresc, puc fer el color del meu text 882 00:40:08,350 --> 00:40:09,360 fins i tot vermell. 883 00:40:09,360 --> 00:40:10,870 Així que anem a veure el que això s'assembla. 884 00:40:10,870 --> 00:40:12,230 Ara es veu bastant bé. 885 00:40:12,230 --> 00:40:15,460 I aquí, si realment vol ficar-se amb algú 886 00:40:15,460 --> 00:40:17,487 o si vols ser una d'aquelles persones que 887 00:40:17,487 --> 00:40:20,570 tracta d'enganyar perquè visiti una web pàgina perquè han enganyat Google 888 00:40:20,570 --> 00:40:27,610 en el pensament que hi ha un munt de les paraules clau com-- veurem, tornar a carregar. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 On va ser? 891 00:40:30,680 --> 00:40:31,530 I no nosaltres. 892 00:40:31,530 --> 00:40:32,030 Tot bé. 893 00:40:32,030 --> 00:40:34,905 Per això dic això com un a part, anem a parlar d'aquestes coses en un parell de setmanes 894 00:40:34,905 --> 00:40:36,740 quan parlem de seguretat, si en realitat 895 00:40:36,740 --> 00:40:38,852 incrustar raïms sencers de paraules clau en una pàgina web, 896 00:40:38,852 --> 00:40:41,810 encara que no són visibles a un humana, algú com Google, per descomptat, 897 00:40:41,810 --> 00:40:43,250 encara pot realment trobar això. 898 00:40:43,250 --> 00:40:45,820 Molt bé, així que és bastant horrible amb força rapidesa. 899 00:40:45,820 --> 00:40:48,420 >> I, de fet, no ho és tot que gran diferència de la meva pròpia web 900 00:40:48,420 --> 00:40:51,480 pàgina com a estudiant, que Vaig començar buscant a Google voltant per trobar 901 00:40:51,480 --> 00:40:53,690 Les versions anteriors dels meus vells llocs web. 902 00:40:53,690 --> 00:40:54,500 Era bastant dolent. 903 00:40:54,500 --> 00:40:56,650 De fet, he trobat 1 just abans de la classe. 904 00:40:56,650 --> 00:40:58,620 Però no hi ha pitjor que hi ha. 905 00:40:58,620 --> 00:41:01,534 Pel que sembla, això va ser el meu pàgina d'inici en l'any 1996. 906 00:41:01,534 --> 00:41:04,200 Pel que sembla, vaig pensar que era apropiat per preguntar a la gent del seu nom 907 00:41:04,200 --> 00:41:05,991 abans que poguessin en realitat veure a la meva pàgina web. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> I llavors els vaig mostrar alguna cosa estúpid, probablement. 910 00:41:11,920 --> 00:41:13,450 Vaig a desenterrar més per a la propera vegada. 911 00:41:13,450 --> 00:41:16,220 Però per ara, anem a considerar una mica de disseny. 912 00:41:16,220 --> 00:41:17,444 Hem parlat d'estil. 913 00:41:17,444 --> 00:41:19,735 I aquesta pàgina fins al moment i gairebé tot el que he escrit 914 00:41:19,735 --> 00:41:21,890 és bastant net estilísticament. 915 00:41:21,890 --> 00:41:23,320 Però què passa amb el disseny? 916 00:41:23,320 --> 00:41:25,990 Bé, hi ha una gran quantitat de redundància en el que he estat fent aquí. 917 00:41:25,990 --> 00:41:28,156 >> He esmentat la paraula color en un parell de llocs. 918 00:41:28,156 --> 00:41:31,630 He esmentat la mida de font en un parell de llocs i audaç en un parell de llocs. 919 00:41:31,630 --> 00:41:34,870 I fonamentalment, sóc co barrejant dos idiomes. 920 00:41:34,870 --> 00:41:38,100 Tinc HTML amb els meus etiquetes i el meu atributs i després, de sobte, 921 00:41:38,100 --> 00:41:40,100 entre cometes, tinc la segona llengua d'avui 922 00:41:40,100 --> 00:41:43,830 anomenat CSS, que al seu torn, és només aquestes parells de valors clau o aquestes propietats 923 00:41:43,830 --> 00:41:45,280 separats per dos punts. 924 00:41:45,280 --> 00:41:47,700 >> Resulta que molt com en C on 925 00:41:47,700 --> 00:41:50,550 pot començar a factoritzar un codi en arxius de capçalera, 926 00:41:50,550 --> 00:41:53,520 així que podem fer el mateix en HTML. 927 00:41:53,520 --> 00:41:56,030 I un pas cap a la qual és com segueix. 928 00:41:56,030 --> 00:42:02,230 Recordeu que aquesta versió, és CSS1.html Estructuralment la mateixa pàgina web exacta. 929 00:42:02,230 --> 00:42:05,250 Així que tinc un munt de divs, però aquesta vegada, no tinc 930 00:42:05,250 --> 00:42:07,220 lliurat de l'embolcall div com veuràs. 931 00:42:07,220 --> 00:42:12,390 >> I m'he donat aquests tres divs superior, mitjana i inferior, identificadors únics. 932 00:42:12,390 --> 00:42:14,760 Això és bo, perquè per donant aquestes divisions 933 00:42:14,760 --> 00:42:18,715 de les pàgines identificadors únics, Puc fer referència a ells en altres llocs. 934 00:42:18,715 --> 00:42:19,215 On? 935 00:42:19,215 --> 00:42:21,070 Bé, deixa desplaçar-se cap amunt. 936 00:42:21,070 --> 00:42:24,070 I fins al moment, en qualsevol moment ens hem vist al capdavant d'una pàgina web, el que és 937 00:42:24,070 --> 00:42:28,560 l'única etiqueta que hem tingut en el cap d'una pàgina web? 938 00:42:28,560 --> 00:42:29,740 Una mica més fort. 939 00:42:29,740 --> 00:42:30,799 Només el títol fins al moment. 940 00:42:30,799 --> 00:42:32,590 Però resulta que hi ha algunes altres coses 941 00:42:32,590 --> 00:42:35,840 vostè pot posar en allà, un que es diu una etiqueta d'estil. 942 00:42:35,840 --> 00:42:37,850 Així que fa un moment, busquem a un atribut d'estil. 943 00:42:37,850 --> 00:42:39,150 Resulta que hi ha una etiqueta d'estil. 944 00:42:39,150 --> 00:42:41,200 Pertany interior el cap d'una pàgina web. 945 00:42:41,200 --> 00:42:42,840 I ara noto el que estic fent. 946 00:42:42,840 --> 00:42:46,540 Que tinc dins d'aquesta etiqueta d'estil el següent. 947 00:42:46,540 --> 00:42:51,190 Estic literalment esmentar en la línia 20 del nom d'una etiqueta que vull per estilitzar. 948 00:42:51,190 --> 00:42:53,489 >> Llavors tinc clau d'obertura i tancat claudàtor. 949 00:42:53,489 --> 00:42:56,030 Així similar a la de C, però de nou, aquesta no és una funció, 950 00:42:56,030 --> 00:42:57,796 això és només un detall sintàctica aquí. 951 00:42:57,796 --> 00:43:00,170 I després, per descomptat, jo estic dient el navegador, hey navegador, 952 00:43:00,170 --> 00:43:05,210 fer que tot el cos de la pàgina tenir una alineació de text de centre. 953 00:43:05,210 --> 00:43:06,930 I llavors això està dient el següent. 954 00:43:06,930 --> 00:43:12,600 Hey navegador, si vostè veu un HTML element o etiqueta a la pàgina que 955 00:43:12,600 --> 00:43:17,040 té un identificador únic de la part superior, per la qual cosa el símbol de hash aquí només significa 956 00:43:17,040 --> 00:43:21,010 idea única de la part superior, endavant i fer que la seva mida de font 36 957 00:43:21,010 --> 00:43:22,490 i el seu pes negreta. 958 00:43:22,490 --> 00:43:26,840 >> Hey navegador, un element la ID és mitjana, el converteixen en 24 píxels. 959 00:43:26,840 --> 00:43:31,070 I sent navegador, si vostè veu un idea de fons, el converteixen en 12 píxels. 960 00:43:31,070 --> 00:43:33,540 L'efecte en el final és exactament el sam. 961 00:43:33,540 --> 00:43:36,500 Si entro a CSS1, el pàgina té el mateix aspecte. 962 00:43:36,500 --> 00:43:39,810 Però estem un pas cap a una mica millor disseny. 963 00:43:39,810 --> 00:43:44,850 Permetin-me ara torno aquí per CSS2 i veig què més que he fet. 964 00:43:44,850 --> 00:43:48,030 >> Ara la pàgina està molt, molt net. 965 00:43:48,030 --> 00:43:50,730 De fet, puc encaixar tots el contingut d'una pàgina aquí. 966 00:43:50,730 --> 00:43:54,270 Però, ¿quina nova etiqueta he introduït, òbviament? 967 00:43:54,270 --> 00:43:54,770 Enllaç. 968 00:43:54,770 --> 00:43:57,853 I no és el millor nom per a una etiqueta, perquè no és un enllaç en el sentit 969 00:43:57,853 --> 00:44:00,780 que el coneixem, però això significa un enllaç en algun altre arxiu. 970 00:44:00,780 --> 00:44:02,890 Això és una cosa així com aguda inclouen en C. 971 00:44:02,890 --> 00:44:06,280 >> Aquesta és la manera en HTML per dir escolta navegador, 972 00:44:06,280 --> 00:44:10,240 anar a buscar els continguts de l'arxiu anomenat css2.css. 973 00:44:10,240 --> 00:44:12,880 La relació, per a mi, és que és un full d'estil. 974 00:44:12,880 --> 00:44:17,980 I de fet, això és el que el de la S d'estil en cascada enmig llençols. 975 00:44:17,980 --> 00:44:20,350 Es tracta d'un full d'estil. 976 00:44:20,350 --> 00:44:23,120 És només l'arxiu de text que conté un munt de propietat. 977 00:44:23,120 --> 00:44:25,940 És un munt d'estils que vol aplicar a una pàgina. 978 00:44:25,940 --> 00:44:28,860 >> I pel que aquest aparentment és referint-se a un segon arxiu. 979 00:44:28,860 --> 00:44:32,970 I si obro que, CSS2.css, adonar que tot el que he fet 980 00:44:32,970 --> 00:44:35,900 és copiar i enganxar tot d'això en aquest arxiu. 981 00:44:35,900 --> 00:44:38,220 I ara, fins i tot si vostè mai ha codificat aquestes coses abans, 982 00:44:38,220 --> 00:44:40,700 n'hi ha prou amb considerar la barret de l'enginyeria proverbial 983 00:44:40,700 --> 00:44:44,220 , Per què és això un millor disseny, probablement? 984 00:44:44,220 --> 00:44:48,910 Factoring aquestes propietats CSS, posar-los en el seu propi arxiu. 985 00:44:48,910 --> 00:44:51,330 Tot i que hem resolt aquest Fa problema com cinc minuts 986 00:44:51,330 --> 00:44:52,600 en la primera versió. 987 00:44:52,600 --> 00:44:55,730 >> Nosaltres no hem millorat la pàgina estilísticament, 988 00:44:55,730 --> 00:44:57,520 això és simplement millor disseny en algun sentit. 989 00:44:57,520 --> 00:44:58,990 Per què creus? 990 00:44:58,990 --> 00:45:01,510 Sí. 991 00:45:01,510 --> 00:45:02,260 Més flexible, com? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Sí. 994 00:45:05,540 --> 00:45:07,373 Així que si vols anar enrere i canviar les coses, 995 00:45:07,373 --> 00:45:09,540 Ara, vostè té un sol lloc on pot canviar les coses. 996 00:45:09,540 --> 00:45:11,622 I de fet, una cosa com a problema estableix set, 997 00:45:11,622 --> 00:45:13,690 on anem a implementar un lloc web de comerç de valors, 998 00:45:13,690 --> 00:45:15,523 això va a tenir un tota munt de pàgines. 999 00:45:15,523 --> 00:45:17,620 I seria molt molest si vostè decideix, hm, 1000 00:45:17,620 --> 00:45:21,630 Realment no m'agrada 24 píxels, vull que sigui 28 píxels o una mica més gran. 1001 00:45:21,630 --> 00:45:23,550 I després haver de fer un mundial buscar i reemplaçar 1002 00:45:23,550 --> 00:45:27,560 o obrir tots els arxius del seu lloc web simplement per canviar realment un valor. 1003 00:45:27,560 --> 00:45:31,290 En tenir aquests estils en un lloc central, 1004 00:45:31,290 --> 00:45:34,720 Ara vostè pot obrir un arxiu de text en CS50IDE en qualsevol programa, 1005 00:45:34,720 --> 00:45:36,479 canviar-lo, guardar-lo, i fet. 1006 00:45:36,479 --> 00:45:38,270 Vostè ha propagat els canvis a tot arreu. 1007 00:45:38,270 --> 00:45:42,450 I això seria el mateix en un arxiu dot h també. 1008 00:45:42,450 --> 00:45:46,697 Així que qualsevol pregunta per tant ara en aquesta sintaxi? 1009 00:45:46,697 --> 00:45:48,530 Molt bé, així que hem fet tot el que sembla 1010 00:45:48,530 --> 00:45:51,170 excepte en realitat aplicar hipervincles. 1011 00:45:51,170 --> 00:45:52,740 I així seguirem endavant i fer això. 1012 00:45:52,740 --> 00:45:54,830 Déjame anar endavant i crear un nou arxiu aquí. 1013 00:45:54,830 --> 00:45:59,970 Vaig a dir- link.html, posar en el codi actual. 1014 00:45:59,970 --> 00:46:03,000 >> I jo faré oberta suport de tipus doc html. 1015 00:46:03,000 --> 00:46:05,970 Com acotació al marge, aquesta cosa en la superior, aquesta declaració de tipus de document, 1016 00:46:05,970 --> 00:46:08,420 que és l'únic que és rar amb el signe d'exclamació. 1017 00:46:08,420 --> 00:46:12,100 Només has de fer-ho allà i vol dir que estem utilitzant la versió d'HTML 5. 1018 00:46:12,100 --> 00:46:14,460 Les versions anteriors de idioma tenia molt més llarg 1019 00:46:14,460 --> 00:46:16,400 cadenes que es necessitava per posar-hi. 1020 00:46:16,400 --> 00:46:18,620 Així que aquí és un exemple anomenat enllaç. 1021 00:46:18,620 --> 00:46:20,950 >> Necessito un cos de la meva pàgina web aquí. 1022 00:46:20,950 --> 00:46:29,770 I en aquest cas, un href iguals diguem HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 i el meu lloc web favorit, direm. 1024 00:46:35,420 --> 00:46:38,550 Molt bé, pel que una molt pàgina innocu, fàcil d'utilitzar. 1025 00:46:38,550 --> 00:46:42,950 Si ara entro en el meu directori llista aquí i obrir link.html, 1026 00:46:42,950 --> 00:46:44,780 tenim hiper text. 1027 00:46:44,780 --> 00:46:47,410 >> I de fet, aquí és on la h en HTTP ve. 1028 00:46:47,410 --> 00:46:51,580 Hypertext Transfer Protocol és sobre la transferència de text 1029 00:46:51,580 --> 00:46:53,840 que té enllaços a altres recursos. 1030 00:46:53,840 --> 00:46:58,210 I de fet, aquí està el familiar, si retro, blau enllaç que si es fa clic, 1031 00:46:58,210 --> 00:47:02,607 en realitat em porten a Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Ara, oh, això és que sortirà aviat. 1033 00:47:03,940 --> 00:47:08,970 Molt bé, així que ara, ¿quins són algunes de les conseqüències d'això? 1034 00:47:08,970 --> 00:47:11,610 >> I, francament, el món comença per aconseguir una mica més familiar 1035 00:47:11,610 --> 00:47:15,090 i també una mica més por però també una mica més 1036 00:47:15,090 --> 00:47:17,840 acte defensable una vegada que comenci per entendre aquestes coses. 1037 00:47:17,840 --> 00:47:21,610 A causa que les probabilitats són, alguns de vostès, si vas a través de la seva carpeta de correu brossa Gmail o fins i tot 1038 00:47:21,610 --> 00:47:23,990 la safata d'entrada, probablement aconseguit algun tipus de correu electrònic 1039 00:47:23,990 --> 00:47:26,980 que vostè està demanant de canviar el seu contrasenya verificar potser o potser 1040 00:47:26,980 --> 00:47:28,910 les seves credencials de PayPal o què sé jo. 1041 00:47:28,910 --> 00:47:34,510 >> I de fet, és possible que hagi rebut cosa que diu com fer clic aquí 1042 00:47:34,510 --> 00:47:42,260 per restablir la contrasenya de PayPal. 1043 00:47:42,260 --> 00:47:44,130 I ara, observi, si això no és Disney.com 1044 00:47:44,130 --> 00:47:51,600 però igual que badplace.com i recarregar, tingui en compte que el text aquí 1045 00:47:51,600 --> 00:47:53,710 podien dir res en absolut. 1046 00:47:53,710 --> 00:47:55,260 I de fet, això és només paraules. 1047 00:47:55,260 --> 00:48:04,610 Per què no puc ser realment molt maliciós i dir http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Feu clic aquí restablir la seva PayPal contrasenya i ara recarregar. 1049 00:48:14,090 --> 00:48:16,220 Això es veu molt legítim, no? 1050 00:48:16,220 --> 00:48:20,470 Vull dir, no em faci clic a un correu electrònic que només diu això. 1051 00:48:20,470 --> 00:48:22,450 Però notar la dicotomia aquí. 1052 00:48:22,450 --> 00:48:26,880 Diu www.paypal.com, i de fet, espera un minut, 1053 00:48:26,880 --> 00:48:29,210 sabem que vostè vol el s per a la seguretat. 1054 00:48:29,210 --> 00:48:35,450 Així que ara, aneu a www.paypal.com HTTPS, però si vostè mai ha fet això abans, 1055 00:48:35,450 --> 00:48:38,182 no entrar en l'hàbit de plana sobre petits que enllaça. 1056 00:48:38,182 --> 00:48:39,890 I és difícil de veure a la pantalla d'allà, 1057 00:48:39,890 --> 00:48:41,340 i no és tot el més fàcil aquí. 1058 00:48:41,340 --> 00:48:43,615 Però fins aquí a el petit racó petit 1059 00:48:43,615 --> 00:48:45,740 el navegador fa realitat que anem dir-li 1060 00:48:45,740 --> 00:48:48,850 a badplace.com lloc de Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Ara, ¿a on anem amb això? 1062 00:48:51,620 --> 00:48:54,859 Tots els exemples que hem fet avui, hem codificat i escrivim manualment dur. 1063 00:48:54,859 --> 00:48:56,900 El web és increïblement sense interès quan dura 1064 00:48:56,900 --> 00:48:59,844 codificar les seves pàgines web perquè el contingut és estàtic i mai canvia. 1065 00:48:59,844 --> 00:49:01,760 Per descomptat, tot el nostre llocs web favorits d'avui, 1066 00:49:01,760 --> 00:49:04,470 ja sigui Gmail o Twitter o Facebook o qualsevol nombre d'altres 1067 00:49:04,470 --> 00:49:05,290 són dinàmics. 1068 00:49:05,290 --> 00:49:07,340 Estan canviant en resposta a l'entrada d'usuari 1069 00:49:07,340 --> 00:49:08,840 de la mateixa manera que els resultats de cerca de Google. 1070 00:49:08,840 --> 00:49:12,415 >> I així, dimecres, el que fem és deixem HTML i CSS introducció 1071 00:49:12,415 --> 00:49:14,290 darrere de nosaltres i ens prenem per fet que ara 1072 00:49:14,290 --> 00:49:16,640 conèixer-la i introduïm un nou llenguatge de programació 1073 00:49:16,640 --> 00:49:19,050 anomenat PHP, el que li agrada C, se'ns va a donar 1074 00:49:19,050 --> 00:49:22,450 el poder de crear en realitat programes que ells mateixos generen sortida. 1075 00:49:22,450 --> 00:49:25,900 En aquest cas, utilitzarem PHP per generar dinàmicament web 1076 00:49:25,900 --> 00:49:27,340 pàgines amb aquest nou llenguatge. 1077 00:49:27,340 --> 00:49:28,989 Així que més que dimecres. 1078 00:49:28,989 --> 00:49:29,530 Ens veiem llavors. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [REPRODUCCIÓ DE MÚSICA] 1081 00:49:37,380 --> 00:52:38,864