1 00:00:00,000 --> 00:00:03,486 >> [Muziek] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> DAVID J MALAN: Dit is CS50 en Dit is het begin van week 7. 4 00:00:14,250 --> 00:00:15,060 Dus welkom terug. 5 00:00:15,060 --> 00:00:17,540 En je kan herinneren dat in probleem set vier, 6 00:00:17,540 --> 00:00:21,510 er was een beetje een speurtocht voor een aantal fantastische prijzen, waarbij 7 00:00:21,510 --> 00:00:24,219 na het herstellen van de foto's van personeel, zowel hier als in New Haven, 8 00:00:24,219 --> 00:00:27,468 je uitgedaagd om zoveel mogelijk van vinden die informatici als je kon. 9 00:00:27,468 --> 00:00:29,550 En we hebben een hele stelletje inzendingen. 10 00:00:29,550 --> 00:00:31,930 Dacht dat ik een paar delen met u hier vandaag. 11 00:00:31,930 --> 00:00:35,100 >> En we zullen al deze online te plaatsen. 12 00:00:35,100 --> 00:00:39,310 Maar in het bijzonder, ik wilde vestigen uw aandacht to-- goed één, 13 00:00:39,310 --> 00:00:42,670 Sam was in een flink aantal van hen over het algemeen stellen als dit. 14 00:00:42,670 --> 00:00:45,750 Maar het blijkt dat vanaf deze morgen, de winnaar 15 00:00:45,750 --> 00:00:51,170 werd een zeker iemand met de naam Ken met 24 van de medewerkers vastgelegd op camera 16 00:00:51,170 --> 00:00:54,600 of een paar meer als je rekening rekening meerdere medewerkers in de foto's. 17 00:00:54,600 --> 00:00:58,300 Hier afgebeeld is Ken volgende Maria in New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Nu, Ken, hoewel, blijkt out is beetje een hoek geval 19 00:01:01,300 --> 00:01:02,880 dat is nog niet eerder gebeurd. 20 00:01:02,880 --> 00:01:05,713 Het blijkt dat het niet optreden aan mij om de kleine lettertjes in de problemen brengen 21 00:01:05,713 --> 00:01:09,710 set van vier die zegt dat het personeel zijn niet in aanmerking voor de fantastische prijzen 22 00:01:09,710 --> 00:01:13,130 omdat Ken is natuurlijk één van fotografen op onze medewerkers. 23 00:01:13,130 --> 00:01:16,820 Nu, met dat gezegd, hij oorspronkelijk schreef me om te zeggen 24 00:01:16,820 --> 00:01:19,180 alsjeblieft niet deze foto's online plaatsen. 25 00:01:19,180 --> 00:01:21,630 Ik denk dat een groot deel omdat de meeste van de foto's 26 00:01:21,630 --> 00:01:24,499 dat deze fotograaf nam kijken een beetje iets als dit. 27 00:01:24,499 --> 00:01:25,040 En dergelijke. 28 00:01:25,040 --> 00:01:28,990 >> Maar Ken wil ik u geruststellen dat hij een zeer goede fotograaf, 29 00:01:28,990 --> 00:01:33,190 Hij is een professionele, neemt hij foto's die niet wazig zijn, 30 00:01:33,190 --> 00:01:37,270 die beter zijn in focus, en hij nam een ​​flink aantal van onze eigen medewerkers. 31 00:01:37,270 --> 00:01:40,370 Maar in plaats van alleen maar te erkennen Ken, wat we dachten dat we zouden doen 32 00:01:40,370 --> 00:01:43,390 wordt door de lijst van werkelijke studenten die ingediend. 33 00:01:43,390 --> 00:01:48,640 En het blijkt dat Lance met 15 foto's als van vanochtend 34 00:01:48,640 --> 00:01:50,030 was onze winnaar. 35 00:01:50,030 --> 00:01:55,730 >> En hier afgebeeld is Lance met Colton, met Skaz, met mezelf en met Sam. 36 00:01:55,730 --> 00:02:00,230 Maar dan blijkt dat met ingang van 11:46, dus gewoon een beetje geleden, 37 00:02:00,230 --> 00:02:04,380 Ik ging terug naar mijn e-mail en gevonden dat we nog één inzending 38 00:02:04,380 --> 00:02:08,300 door een student met de naam Bonnie wier e-mail zei slechts dit. 39 00:02:08,300 --> 00:02:10,800 Niet gaan liggen, ik ben dit te doen tijdens de les. 40 00:02:10,800 --> 00:02:17,620 En dan ging om gewoon hechten 14 foto's, een verlegen van Lance's 15. 41 00:02:17,620 --> 00:02:22,690 >> Maar in Bonnie de foto's, zo blijkt out waren meerdere medewerkers, Sam 42 00:02:22,690 --> 00:02:25,960 onder hen, dus wat we dachten dat we zou doen is erkennen beide. 43 00:02:25,960 --> 00:02:29,240 Dus in aanvulling op het krijgen van de Dropbox ruimte dat iedereen die deelnamen 44 00:02:29,240 --> 00:02:33,900 ontvangt, zal ook deze twee secties krijgen een mooie verzorgde lunch voor hen 45 00:02:33,900 --> 00:02:36,100 en hun sectie paart deze komende week. 46 00:02:36,100 --> 00:02:38,970 En zo hoort u van ons, Lance en Bonnie, over. 47 00:02:38,970 --> 00:02:40,002 Zo groot proficiat aan hen. 48 00:02:40,002 --> 00:02:42,210 Nu, degenen onder u die zou als lunch meer in het algemeen 49 00:02:42,210 --> 00:02:45,320 weten dat CS50 lunch in Cambridge en New Haven is deze vrijdag. 50 00:02:45,320 --> 00:02:48,510 Ga naar de website van CS50 slash RSVP. 51 00:02:48,510 --> 00:02:49,800 En nu een woord op seminars. 52 00:02:49,800 --> 00:02:50,730 Meer curricularly. 53 00:02:50,730 --> 00:02:52,490 Dus we naderen het punt van het semester 54 00:02:52,490 --> 00:02:55,200 waar je moet beginnen denken over afstudeerprojecten. 55 00:02:55,200 --> 00:02:59,309 En in feite, in slechts een beetje, zal zogenaamde pre voorstellen te wijten zijn. 56 00:02:59,309 --> 00:03:01,850 Dus pre voorstellen zijn bedoeld om behoorlijk lage impact en echt 57 00:03:01,850 --> 00:03:04,109 gewoon een kans voor kunt u een kort briefje te componeren 58 00:03:04,109 --> 00:03:06,900 uw onderwijs mede om de hoogte te stellen hem of haar wat je denkt u 59 00:03:06,900 --> 00:03:09,140 zou willen doen voor uw afstudeerproject. 60 00:03:09,140 --> 00:03:11,730 >> Nu, vele studenten belanden het doen van web-based afstudeerprojecten. 61 00:03:11,730 --> 00:03:13,800 En natuurlijk, we zijn gewoon Nu vorige week in deze 62 00:03:13,800 --> 00:03:15,890 en verder duiken in web programmeren. 63 00:03:15,890 --> 00:03:18,200 Dus geen zorgen te maken als je heb absoluut geen idee hoe 64 00:03:18,200 --> 00:03:21,594 zou je de ideeën op te bouwen die u zou kunnen hebben in je geest. 65 00:03:21,594 --> 00:03:24,510 Dit is eigenlijk gewoon een dwingen functie om je aan het denken en praten 66 00:03:24,510 --> 00:03:25,650 met uw TF over. 67 00:03:25,650 --> 00:03:28,810 Maar om u te helpen, en met afstudeerprojecten uiteindelijk, 68 00:03:28,810 --> 00:03:31,750 weten dat CS50 heeft een traditie het aanbieden van seminars. 69 00:03:31,750 --> 00:03:36,084 >> En deze zijn optioneel, de handen op, of lezing op basis van kansen 70 00:03:36,084 --> 00:03:39,000 voor meer informatie over onderwerpen die te leren een beetje ondergeschikt aan de cursus 71 00:03:39,000 --> 00:03:43,310 syllabus, maar toch prachtig materiaal om te rijden afstudeerprojecten. 72 00:03:43,310 --> 00:03:46,840 En dus dit is de lijst die is CS50 personeel hier in New Haven 73 00:03:46,840 --> 00:03:48,600 zijn gekomen voor dit jaar over iOS 74 00:03:48,600 --> 00:03:50,730 programmering, Android programmering, de ontwikkeling van games, 75 00:03:50,730 --> 00:03:54,480 en trossen van meer hulpmiddelen en talen en technieken. 76 00:03:54,480 --> 00:03:56,780 >> Dus hou een oogje op de website van de CS50's. 77 00:03:56,780 --> 00:04:00,110 En in de tussentijd, als u wilt registreer hier uw interesse in een van deze, 78 00:04:00,110 --> 00:04:02,510 ga naar CS50's slash register. 79 00:04:02,510 --> 00:04:05,770 En dan zullen we follow-up met betrekking tot de dagen en vluchttijden en locaties 80 00:04:05,770 --> 00:04:09,090 en everything-- meeste alles zal worden gestreamd en ook beschikbaar op aanvraag 81 00:04:09,090 --> 00:04:11,750 na als je niet kunt eigenlijk maken. 82 00:04:11,750 --> 00:04:15,800 Dus zonder verder oponthoud, we ophield laatste tijd met GET. 83 00:04:15,800 --> 00:04:19,610 >> En dit was de boodschap die was binnenzijde van de virtuele envelop, herinneren, 84 00:04:19,610 --> 00:04:23,960 dat we overgegaan van router naar router router tussen een webbrowser en een web 85 00:04:23,960 --> 00:04:24,487 server. 86 00:04:24,487 --> 00:04:26,695 En die boodschap leek een iets als dit. 87 00:04:26,695 --> 00:04:29,700 Dit was de meest mysterieuze boodschap die eigenlijk binnen een envelop 88 00:04:29,700 --> 00:04:34,440 geschreven op een stuk papier, waarvan eerste regel zegt letterlijk, krijgen slash. 89 00:04:34,440 --> 00:04:37,830 >> En net als een sanity check, wat heb slash te duiden? 90 00:04:37,830 --> 00:04:40,455 Wat betekent slash bedoel als het aanvragen van een website? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 U vraagt ​​het de hele tijd. 93 00:04:44,250 --> 00:04:47,333 Vrijwel elke keer dat u een website bezoekt, u eigenlijk niet het type in een bestandsnaam. 94 00:04:47,333 --> 00:04:50,960 Je hebt waarschijnlijk gewoon naar Facebook.com, voeren gmail.com of dergelijke. 95 00:04:50,960 --> 00:04:52,260 En wat doet slash vertegenwoordigen? 96 00:04:52,260 --> 00:04:53,506 Welk bestand? 97 00:04:53,506 --> 00:04:54,630 Of op welke pagina, in het bijzonder? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> De index, ja. 100 00:05:00,720 --> 00:05:01,810 Zodat de standaard pagina. 101 00:05:01,810 --> 00:05:04,810 Dus als je niet beschikt over een bestand op te geven noemen als we beginnen te zien, 102 00:05:04,810 --> 00:05:07,750 je bent eigenlijk alleen aanvragen geef mij de standaard pagina van Facebook 103 00:05:07,750 --> 00:05:10,800 of geef me mijn inbox of geef me van de standaardpagina van het nieuws 104 00:05:10,800 --> 00:05:12,510 op de website van CNN's of iets dergelijks. 105 00:05:12,510 --> 00:05:15,220 En een server reageert vervolgens naar die boodschap met iets 106 00:05:15,220 --> 00:05:18,420 als dit, ja zeggen, ik spreken HTTP versie 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, die de status code die wij mensen zelden 108 00:05:21,130 --> 00:05:22,790 ooit, want het is goed. 109 00:05:22,790 --> 00:05:26,640 Want het betekent OK, het verzoek werd ontvangen en goed behandeld. 110 00:05:26,640 --> 00:05:28,960 En het type inhoud blijkbaar de reactie 111 00:05:28,960 --> 00:05:31,170 is vaak, maar niet altijd, tekst. 112 00:05:31,170 --> 00:05:32,580 En bijzonder HTML. 113 00:05:32,580 --> 00:05:34,760 En dat is eigenlijk waar we kijken naar vandaag. 114 00:05:34,760 --> 00:05:37,140 >> Dus in feite, ik ga om te gaan vooruit en openen van een browser. 115 00:05:37,140 --> 00:05:40,410 Ik ga Chrome gebruiken, kunt u gebruik maken van vrijwel elke browser in de komende weken. 116 00:05:40,410 --> 00:05:42,410 We raden over het algemeen Chrome want het is bijzonder 117 00:05:42,410 --> 00:05:43,750 goed voor software-ontwikkelaars. 118 00:05:43,750 --> 00:05:46,070 Het heeft een heleboel ingebouwde hulpmiddelen die het makkelijker 119 00:05:46,070 --> 00:05:49,800 niet alleen HTML en CSS te ontwikkelen, dingen die we zullen beginnen te praten over vandaag, 120 00:05:49,800 --> 00:05:51,530 maar ook andere talen. 121 00:05:51,530 --> 00:05:55,530 >> En ik ga om verder te gaan en ga to-- Ik ga naar Control klik of rechts 122 00:05:55,530 --> 00:05:57,210 klik ergens op een webpagina. 123 00:05:57,210 --> 00:05:59,070 En ik ga naar Inspect Element. 124 00:05:59,070 --> 00:06:03,850 En ik ga om te tweaken mijn scherm maar een klein beetje hier. 125 00:06:03,850 --> 00:06:05,790 Laat me dit naar de onderkant. 126 00:06:05,790 --> 00:06:08,140 Dus dit is wat heet Chrome Inspecteur. 127 00:06:08,140 --> 00:06:11,010 Dus dit is als een debugging instrument ingebouwd in Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Ieder van jullie dit al als je met behulp van Chrome zijn geweest. 129 00:06:13,520 --> 00:06:17,169 En het laat je zien wat er gebeurt op onder de motorkap van een aantal webpagina. 130 00:06:17,169 --> 00:06:19,210 Dus laten we daadwerkelijk een kijken naar dit als volgt. 131 00:06:19,210 --> 00:06:21,251 Het heeft veel meer functies en we de zorg over vandaag. 132 00:06:21,251 --> 00:06:22,760 Maar er is deze tabbladen hier. 133 00:06:22,760 --> 00:06:25,890 Elementen, netwerk, bronnen, tijdlijn, en een aantal andere dingen. 134 00:06:25,890 --> 00:06:27,800 Ik ga om te klikken op Netwerk voor een moment. 135 00:06:27,800 --> 00:06:30,500 >> En het is een beetje overweldigend op het eerste gezicht hier. 136 00:06:30,500 --> 00:06:34,190 Maar wat ik ga doen is laten me vereenvoudigen het een beetje. 137 00:06:34,190 --> 00:06:37,560 Ik ga aan te zetten de het opnemen van licht, zodat het rood. 138 00:06:37,560 --> 00:06:39,140 En ik ga zeggen behouden logboek. 139 00:06:39,140 --> 00:06:41,015 En dit is slechts een klein wat ik bedacht 140 00:06:41,015 --> 00:06:44,120 de tijd dat gaat redden alles wat er gebeurt in de browser. 141 00:06:44,120 --> 00:06:50,030 En nu ga ik om te gaan naar http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Eigenlijk, laten we www voor een goede maatregel, slash. 143 00:06:52,690 --> 00:06:53,643 Enter. 144 00:06:53,643 --> 00:06:56,180 Zodat een URL die vele je zou kunnen hebben bezocht. 145 00:06:56,180 --> 00:06:58,830 En nu Facebook web pagina komt aan de top. 146 00:06:58,830 --> 00:07:02,350 En dan een hele hoop spul vloog door aan de onderkant. 147 00:07:02,350 --> 00:07:04,830 En in feite, blijkt dat wanneer u Facebook.com bezoeken, 148 00:07:04,830 --> 00:07:09,320 je bent niet alleen het maken van een HTTP-verzoek, het blijkt dat naar Facebook.com 149 00:07:09,320 --> 00:07:14,320 zendt 41 van de enveloppen, elk met een eigen get verzoek 150 00:07:14,320 --> 00:07:18,360 zoals vermeld, zij achter het scherm Hier, aan de onderkant van het scherm, 151 00:07:18,360 --> 00:07:24,040 betekent dat inderdaad mijn browser maakte 41 van de verzoeken. 152 00:07:24,040 --> 00:07:29,689 >> En in totaal, is overgedragen 861 kilobytes en het duurde om wat voor reden 153 00:07:29,689 --> 00:07:31,730 wel acht seconden dat allemaal downloaden. 154 00:07:31,730 --> 00:07:33,790 Dus dat is eigenlijk een beetje raar dat Facebook de site zou nemen dat 155 00:07:33,790 --> 00:07:35,600 lang, maar het zij zo in dit geval. 156 00:07:35,600 --> 00:07:39,520 Nu, dit alles heb ik niet echt schelen over behalve de bovenste verzoek. 157 00:07:39,520 --> 00:07:46,440 Dus laten we naar deze ene hier en laat me uit te zoomen voor slechts een moment. 158 00:07:46,440 --> 00:07:47,754 >> En laat me inzoomen op dit. 159 00:07:47,754 --> 00:07:50,670 Dus wat ik heb gedaan bij linkerzijde, ook al er is veel gaande hier 160 00:07:50,670 --> 00:07:53,360 is dat ik heb gemarkeerd Facebook.com en vervolgens 161 00:07:53,360 --> 00:07:56,540 opmerken dat ik naar beneden te scrollen, scroll naar beneden, naar beneden te scrollen, 162 00:07:56,540 --> 00:07:58,330 headers te vragen. 163 00:07:58,330 --> 00:08:01,720 En je zult zien dat Chrome toont me wezen binnenste inhoud 164 00:08:01,720 --> 00:08:02,810 van het verzoek dat ik maakte. 165 00:08:02,810 --> 00:08:06,130 Het is niet het formatteren op precies dezelfde weg, maar merken er is sprake van te krijgen, 166 00:08:06,130 --> 00:08:09,481 merkt er melding gemaakt van de gastheer, Facebook.com, het pad, of slash, 167 00:08:09,481 --> 00:08:10,730 dat is het bestand dat ik gevraagd. 168 00:08:10,730 --> 00:08:12,930 >> En dan als ik blader back-up, zullen we eigenlijk 169 00:08:12,930 --> 00:08:17,270 zien dat wat Facebook terug voor mij is al deze headers. 170 00:08:17,270 --> 00:08:21,040 Zodat de binnenkant van die virtuele envelope inderdaad veel sleutelwaarde paren. 171 00:08:21,040 --> 00:08:23,130 Een woord, een dubbele punt, en dan een waarde. 172 00:08:23,130 --> 00:08:25,050 Een woord, een dubbele punt, en een waarde. 173 00:08:25,050 --> 00:08:26,160 Dit zijn zogenaamde headers. 174 00:08:26,160 --> 00:08:31,860 En er is hier veel meer detail dan we eigenlijk zorg over nu. 175 00:08:31,860 --> 00:08:33,750 >> Maar dit is tweede aan laatste daar beneden, 176 00:08:33,750 --> 00:08:38,809 opmerken, dat de server Facebook.com's, inderdaad hier gezegd komt wat tekst HTML. 177 00:08:38,809 --> 00:08:41,409 Dus dit alles is om te zeggen dat wanneer u een verzoek van een web 178 00:08:41,409 --> 00:08:44,300 pagina van een browser aan een server, die server reageert 179 00:08:44,300 --> 00:08:47,630 met een envelop eigen binnenkant van die tekst. 180 00:08:47,630 --> 00:08:49,020 Met andere woorden, HTML. 181 00:08:49,020 --> 00:08:50,590 HyperText Markup Language. 182 00:08:50,590 --> 00:08:53,200 Dat is een andere taal die we vandaag introduceren 183 00:08:53,200 --> 00:08:57,740 dat mensen of computers te genereren om webpagina's te implementeren. 184 00:08:57,740 --> 00:08:59,580 >> In het bijzonder, laten we eens kijken naar dit. 185 00:08:59,580 --> 00:09:03,277 Ik ga nu terug te gaan naar de website van Facebook. 186 00:09:03,277 --> 00:09:05,360 En ik ga gewoon controle klik of klik met de rechtermuisknop 187 00:09:05,360 --> 00:09:07,634 en klik op View Page Source. 188 00:09:07,634 --> 00:09:10,550 En zelfs als u geen gebruik maken van Chrome, IE kan dit doen, Firefox kan dit doen, 189 00:09:10,550 --> 00:09:14,060 Safari kan dit doen, hoewel het menu opties ziet er misschien een beetje anders. 190 00:09:14,060 --> 00:09:18,990 En dit is de HTML dat Mark en vennootschap op Facebook hebben geschreven. 191 00:09:18,990 --> 00:09:24,640 >> En collectief, deze taal hier implementeert de blauwe en de witte pagina 192 00:09:24,640 --> 00:09:26,370 dat zagen we een ogenblik geleden. 193 00:09:26,370 --> 00:09:28,030 Nu, dit is een beetje overweldigend. 194 00:09:28,030 --> 00:09:31,400 Maar als we kijken naar linksboven, we zijn gaan om te beginnen met een aantal patronen te zien. 195 00:09:31,400 --> 00:09:34,140 Het lijkt erop dat er veel van deze open hoek beugel 196 00:09:34,140 --> 00:09:35,970 en dan is er dit zoekwoord HTML. 197 00:09:35,970 --> 00:09:38,330 Hier is een ander open hoekijzer en hoofd. 198 00:09:38,330 --> 00:09:41,560 >> Hier is, als we naar beneden scrollen en naar beneden en naar beneden, ik ben 199 00:09:41,560 --> 00:09:43,820 gaan om verder te gaan en probeer om te zoeken naar iets. 200 00:09:43,820 --> 00:09:48,510 Er weg over rechts Hier staat open beugel lichaam. 201 00:09:48,510 --> 00:09:50,800 En oproepen van de laatste tijd die we voorgesteld 202 00:09:50,800 --> 00:09:53,364 dat de eenvoudigste webpagina dat een mens zou kunnen schrijven 203 00:09:53,364 --> 00:09:55,030 ziet er misschien een beetje iets als dit. 204 00:09:55,030 --> 00:09:58,430 Open HTML-tag, open hoofd tag, geopend titel tag, 205 00:09:58,430 --> 00:10:03,230 Toen sloot titel, gesloten hoofd, geopend body-tag, wat tekst, gesloten lichaam, 206 00:10:03,230 --> 00:10:04,720 gesloten HTML. 207 00:10:04,720 --> 00:10:06,290 >> Maar een pauze hier voor slechts een moment. 208 00:10:06,290 --> 00:10:09,030 Deze code, zelfs als je hebt nooit geschreven vóór 209 00:10:09,030 --> 00:10:11,864 maar nog steeds niet helemaal begrijpen wat er gaande is, ziet er goed uit. 210 00:10:11,864 --> 00:10:12,821 Juist, het is zeer schoon. 211 00:10:12,821 --> 00:10:14,120 Het is heel stilistisch leuk. 212 00:10:14,120 --> 00:10:16,190 Veel inspringen en witte ruimte. 213 00:10:16,190 --> 00:10:18,020 Facebook is niet. 214 00:10:18,020 --> 00:10:23,190 Dus waarom is Facebook zoveel erger dan ik bij het schrijven van HTML? 215 00:10:23,190 --> 00:10:24,310 Blijkbaar. 216 00:10:24,310 --> 00:10:26,899 >> Rechts, dit is als een van de vijf voor stijl. 217 00:10:26,899 --> 00:10:29,315 Er is een dwingende reden voor hen om deze bezuinigen. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Oké, zodat ze niet willen maken het makkelijker voor u om het te lezen. 220 00:10:33,860 --> 00:10:36,940 Dus in zekere zin, ze zijn verdoezelen het, soort van versluiering te 221 00:10:36,940 --> 00:10:40,260 tenminste zo esthetisch dat het moeilijker voor Myspace 222 00:10:40,260 --> 00:10:42,705 te gaan en rip off van hun homepage en de HTML voor het. 223 00:10:42,705 --> 00:10:45,080 Het blijkt dat met de programma's hoewel, met inbegrip van Chrome, 224 00:10:45,080 --> 00:10:47,020 we kunnen dit super eenvoudig opruimen. 225 00:10:47,020 --> 00:10:49,420 Dus het is niet helemaal zo als reden. 226 00:10:49,420 --> 00:10:51,290 Wat kan de oorzaak zijn. 227 00:10:51,290 --> 00:10:51,790 Ja. 228 00:10:51,790 --> 00:10:54,680 229 00:10:54,680 --> 00:10:55,890 Ja, witte ruimte kosten van gegevens. 230 00:10:55,890 --> 00:10:56,598 Wat bedoel je? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Ja, precies. 233 00:11:02,979 --> 00:11:06,020 Als u de Tab-toets raakte een partij of de spatiebalk, rekening houden met de gevolgen. 234 00:11:06,020 --> 00:11:10,060 Dus elke toets op het toetsenbord is een [Onhoorbaar] voorgesteld als één byte. 235 00:11:10,060 --> 00:11:14,560 >> Dus stel dat Mark of een van de devs deze dagen hits op de spatiebalk maar een keer 236 00:11:14,560 --> 00:11:17,899 In dit HTML-pagina die vertegenwoordigt Facebook homepage. 237 00:11:17,899 --> 00:11:19,690 En Facebook heeft veel van deze dagen. 238 00:11:19,690 --> 00:11:24,030 Dus stel dat Facebook de homepage wordt bezocht door een miljard mensen vandaag de dag. 239 00:11:24,030 --> 00:11:27,020 En iemand heeft op Facebook druk op de spatiebalk maar een keer. 240 00:11:27,020 --> 00:11:29,890 >> Dus een extra byte, een miljard verzoeken, 241 00:11:29,890 --> 00:11:32,790 hoeveel meer gegevens Facebook overbrengen via internet 242 00:11:32,790 --> 00:11:37,160 omdat iemand raakte de spatiebalk op zijn of haar toetsenbord? 243 00:11:37,160 --> 00:11:41,660 Een miljard bytes, of één gigabyte gegevens van Facebook-servers worden verzonden 244 00:11:41,660 --> 00:11:43,626 aan mensen over de wereld zonder goede reden. 245 00:11:43,626 --> 00:11:44,750 Nu, dat is slechts een ruimte. 246 00:11:44,750 --> 00:11:48,866 >> Stel je voor dat we dit eigenlijk schoon ding en ingesprongen het en voegde 247 00:11:48,866 --> 00:11:50,990 veel witte ruimte en tab tekens en spaties, 248 00:11:50,990 --> 00:11:53,656 je uiteindelijk de uitgaven gigabytes, zoniet terra bytes meer ruimte. 249 00:11:53,656 --> 00:11:56,640 En zo super gebruikelijk in de werkelijke wereld van web ontwikkeling 250 00:11:56,640 --> 00:11:58,950 is uw code minify. 251 00:11:58,950 --> 00:12:01,280 En we zullen uiteindelijk zien hoe je dit zou kunnen doen. 252 00:12:01,280 --> 00:12:04,630 >> Maar vandaag, zullen we beginnen met het schrijven van code dat is eigenlijk leesbaar door ons mensen. 253 00:12:04,630 --> 00:12:10,120 Het blijkt dat, hoewel, als je terug om deze tool in Chrome Inspect Element, 254 00:12:10,120 --> 00:12:12,030 eerder, waren we op het tabblad Netwerk. 255 00:12:12,030 --> 00:12:15,430 Het blijkt dat als je naar de elementen tab, wat je eigenlijk zien 256 00:12:15,430 --> 00:12:19,230 is Chrome behoorlijk gedrukt versie van datzelfde HTML. 257 00:12:19,230 --> 00:12:20,640 Dus we hebben deobfuscated het. 258 00:12:20,640 --> 00:12:22,472 Dus het is geen partij voor een computer. 259 00:12:22,472 --> 00:12:24,430 En nu kunt u eigenlijk klikken om en beginnen 260 00:12:24,430 --> 00:12:27,630 de hiërarchie, dat is een webpagina te zien. 261 00:12:27,630 --> 00:12:28,780 Dus laten we eigenlijk doen. 262 00:12:28,780 --> 00:12:32,120 Ik ga om te gaan en open te stellen op mijn Mac een programma genaamd tekstbewerking. 263 00:12:32,120 --> 00:12:35,490 En herinneren dat dit slechts een super eenvoudige tekst programma. 264 00:12:35,490 --> 00:12:37,490 Windows heeft notepad.exe. 265 00:12:37,490 --> 00:12:39,820 En ik ga Verbatim typt u het volgende. 266 00:12:39,820 --> 00:12:44,650 Doc soort HTML, geopend beugel HTML, gesloten beugel HTML, 267 00:12:44,650 --> 00:12:49,000 we hebben het hoofd van de pagina hier het einde van de kop van de pagina hier 268 00:12:49,000 --> 00:12:52,310 een titel zal zijn als, hello wereld. 269 00:12:52,310 --> 00:12:56,660 >> En dan naar beneden hier, moeten we het lichaam van de webpagina. 270 00:12:56,660 --> 00:12:58,050 Gesloten lichaam. 271 00:12:58,050 --> 00:13:00,700 En dan hier, hello wereld. 272 00:13:00,700 --> 00:13:01,270 Prima. 273 00:13:01,270 --> 00:13:03,350 Dus hebben we een super snelle webpagina geschreven. 274 00:13:03,350 --> 00:13:06,675 Ik ga het op te slaan als hello.html op mijn bureaublad. 275 00:13:06,675 --> 00:13:09,050 Mijn Mac's gaan om te klagen, denken dat, wacht eens even, 276 00:13:09,050 --> 00:13:11,091 dit is een tekstbestand, doe je wilt noemen .txt? 277 00:13:11,091 --> 00:13:13,300 Maar nee, ik wil dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> En wat is dan mooi zijn als ik gewoon dubbelklikken op dit bestand, 279 00:13:16,140 --> 00:13:18,600 hello.html, hier is mijn webpagina. 280 00:13:18,600 --> 00:13:22,564 Helaas, ik ben de enige persoon in de wereld 281 00:13:22,564 --> 00:13:23,980 die deze pagina kunt bezoeken op dit moment. 282 00:13:23,980 --> 00:13:26,734 Want waar gaat het blijkbaar leven? 283 00:13:26,734 --> 00:13:27,650 Het is op mijn Mac, toch? 284 00:13:27,650 --> 00:13:28,470 Dat is nutteloos. 285 00:13:28,470 --> 00:13:30,390 Als niemand in deze kamer laat staan ​​op het internet 286 00:13:30,390 --> 00:13:31,598 kan eigenlijk bezoeken die pagina. 287 00:13:31,598 --> 00:13:33,820 Dus vandaag, moeten we introduceren een ander element. 288 00:13:33,820 --> 00:13:36,720 >> En om dit te doen, ga ik ga je gang en open cloud 9. 289 00:13:36,720 --> 00:13:40,090 Dus cloud 9 is natuurlijk een cloudgebaseerde service-- CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Dat heeft al onze werkplekken ergens op internet draaien. 291 00:13:44,890 --> 00:13:48,330 En dat betekent dat al onze bestanden zijn al publiek toegankelijk. 292 00:13:48,330 --> 00:13:49,830 Dus laten we verder gaan en doen dit. 293 00:13:49,830 --> 00:13:53,670 Ik ga om te gaan en maak een nieuw bestand NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Ik ga het redden als voorheen als hello.html en klik op opslaan. 295 00:13:58,819 --> 00:14:01,860 En nu alleen maar om tijd te besparen, ga ik om verder te gaan en kopieer plak deze code 296 00:14:01,860 --> 00:14:03,470 in plaats van overtypen het. 297 00:14:03,470 --> 00:14:04,550 En opslaan. 298 00:14:04,550 --> 00:14:07,550 En nu heb ik een bestand genaamd hello.html. 299 00:14:07,550 --> 00:14:09,710 Maar hoe kan ik eigenlijk openen als een webpagina? 300 00:14:09,710 --> 00:14:14,120 Nou, het blijkt dat de ingebouwde om CS50 IDE is niet alleen een compiler als clang 301 00:14:14,120 --> 00:14:16,670 en een debugger als GDB en trossen van andere programma's, 302 00:14:16,670 --> 00:14:21,140 er is eigenlijk een volwaardige webserver loopt binnen CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> U allen, dat wil zeggen, uw eigen webserver. 304 00:14:23,900 --> 00:14:26,850 En een webserver is gewoon een stuk van software waarvan het doel in het leven 305 00:14:26,850 --> 00:14:28,220 is om te dienen tot webpagina's. 306 00:14:28,220 --> 00:14:32,490 Om voor verzoeken van browsers luisteren en reageren met weinig virtuele enveloppen 307 00:14:32,490 --> 00:14:35,290 binnenkant waarvan de content die ik heb geschreven. 308 00:14:35,290 --> 00:14:38,372 Dus dit webserver eigenlijk gratis en open source. 309 00:14:38,372 --> 00:14:40,830 Waar open source betekent alleen software die iemand anders 310 00:14:40,830 --> 00:14:43,480 geschreven dat ieder van ons kan daadwerkelijk te zien en te downloaden en zelfs 311 00:14:43,480 --> 00:14:44,780 veranderen de broncode. 312 00:14:44,780 --> 00:14:46,150 En het heet Apache. 313 00:14:46,150 --> 00:14:51,450 >> En we hebben het een beetje makkelijker gemaakt Gebruik in CS50IDE door noemde het Apache 50. 314 00:14:51,450 --> 00:14:53,780 Zodat het kan eigenlijk begrijpen het volgende. 315 00:14:53,780 --> 00:14:56,560 Ik ga Apache 50 aanvang zeggen. 316 00:14:56,560 --> 00:14:58,910 En dan ga ik gewoon gaan dot zeggen. 317 00:14:58,910 --> 00:15:01,080 En we zien een aantal enigszins geheimzinnige melding 318 00:15:01,080 --> 00:15:04,640 het instellen van Apache document [? group?] naar huis, ubuntu, wat dat ook is, 319 00:15:04,640 --> 00:15:05,770 slash werkruimte. 320 00:15:05,770 --> 00:15:08,280 Beginnend webserver Apache 2 met succes. 321 00:15:08,280 --> 00:15:11,330 >> Zo lang verhaal kort te maken, ik heb net geduwd een knop 322 00:15:11,330 --> 00:15:18,000 en draaide op een webserver die nu luisteren op het internet op TCP-poort 323 00:15:18,000 --> 00:15:20,587 80 op een bepaald adres. 324 00:15:20,587 --> 00:15:22,420 En hier staat, en zal dit op basis veranderen 325 00:15:22,420 --> 00:15:26,550 op uw gebruikersnaam en andere factoren, maar merken nu als ik hierop klikt, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard en zo en zo, merken dat al die tijd 327 00:15:30,211 --> 00:15:31,960 voor de afgelopen weken, moet u 328 00:15:31,960 --> 00:15:35,200 gemerkt dat je eigen gebruikersnaam is ingebed in de rechterbovenhoek 329 00:15:35,200 --> 00:15:37,130 hoek van CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> En dat dit ook daadwerkelijk is geweest alle timen het adres waar u kunt 331 00:15:41,050 --> 00:15:43,574 Bezoek al uw bestanden via het web. 332 00:15:43,574 --> 00:15:45,990 Tot nu toe is het niet toe deed, want in C, je over het algemeen 333 00:15:45,990 --> 00:15:48,073 wil de dingen die in een terminal, niet op het web. 334 00:15:48,073 --> 00:15:50,800 Maar vandaag, we beginnen het schrijven van web-based code 335 00:15:50,800 --> 00:15:53,350 dat we willen te bereiken op de openbare URL's. 336 00:15:53,350 --> 00:15:56,100 Dus wat ik ga doen is op deze URL. 337 00:15:56,100 --> 00:16:00,880 >> En merk dat ik zie een vrij lelijke index, een directory listing, 338 00:16:00,880 --> 00:16:04,090 maar wat bestand springt uit bij u waarschijnlijk? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Dat is omdat ik gered het bestand in mijn werkruimte. 341 00:16:07,870 --> 00:16:12,310 En wat ik heb verteld Apache webserver is kijken in Davids werkruimte directory. 342 00:16:12,310 --> 00:16:15,300 En laat iedereen in de wereld te zien die bestanden. 343 00:16:15,300 --> 00:16:19,050 >> En inderdaad, als ik nu klik op hello.html, 344 00:16:19,050 --> 00:16:22,180 Ik zie in dit tabblad precies dat bestand. 345 00:16:22,180 --> 00:16:26,430 Nu merken, cloud 9 doet iets nuttig voor ons. 346 00:16:26,430 --> 00:16:29,480 Binnen CS50 IDE, ziet er plotseling een adresbalk. 347 00:16:29,480 --> 00:16:33,690 Dat komt omdat ook al zijn we met behulp van Chrome CS50IDE bezoeken, 348 00:16:33,690 --> 00:16:37,940 binnenin CS50IDE zijn eigen versie van een browser op dit moment. 349 00:16:37,940 --> 00:16:40,820 En dus in plaats van dingen compliceren als zodanig, 350 00:16:40,820 --> 00:16:42,955 Ik ga om te gaan en kopieer deze URL. 351 00:16:42,955 --> 00:16:45,330 Ik ga je gang en gewoon gaan Mijn eigen Chrome-venster te openen. 352 00:16:45,330 --> 00:16:47,800 Dus er is geen magische hier geen CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Ik ga gewoon letterlijk plakken mijn J Harvard URL en druk op Enter. 354 00:16:51,800 --> 00:16:54,750 En voila, nu heb ik, en in theorie iedereen 355 00:16:54,750 --> 00:16:57,700 op het internet, als ik heb geconfigureerd toestemmingen adequaat, 356 00:16:57,700 --> 00:16:58,720 Dit bestand kan bezoeken. 357 00:16:58,720 --> 00:17:03,230 En nu, als ik zei hello.html, voila, daar 358 00:17:03,230 --> 00:17:06,366 is mijn ongelooflijk underwhelming webpagina. 359 00:17:06,366 --> 00:17:07,740 Dus laten we snel sanity check. 360 00:17:07,740 --> 00:17:09,710 Door dat alles is conceptuele set up. 361 00:17:09,710 --> 00:17:13,180 En we hebben eigenlijk niet echt je geleerd hoe te schrijven HTML per se. 362 00:17:13,180 --> 00:17:16,084 Eventuele vragen tot nu toe over wat er net gebeurd? 363 00:17:16,084 --> 00:17:18,549 364 00:17:18,549 --> 00:17:19,049 Ja. 365 00:17:19,049 --> 00:17:24,290 366 00:17:24,290 --> 00:17:25,800 Heeft CS50 bezitten deze webpagina's? 367 00:17:25,800 --> 00:17:26,460 Op welke manier? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Goede vraag. 370 00:17:29,530 --> 00:17:32,429 Dus CS50's bezit CS50.io. 371 00:17:32,429 --> 00:17:33,970 We hebben inderdaad gekocht die domeinnaam. 372 00:17:33,970 --> 00:17:37,240 En door de aard van jullie loggen in CS50IDE, 373 00:17:37,240 --> 00:17:39,270 je alles wat een subdomein genoemd. 374 00:17:39,270 --> 00:17:46,840 >> Dus IDE50-Malan, of IDE50-Rob.CS50.io, dat is uw unieke adres binnen 375 00:17:46,840 --> 00:17:47,730 onze domeinnaam. 376 00:17:47,730 --> 00:17:50,850 Dus voor de doeleinden van de cursus je hebt je eigen unieke adres. 377 00:17:50,850 --> 00:17:55,150 Maar we hebben dingen vereenvoudigd door het kopen van de top level domain, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O en dan iedereen anders is binnenin die zogezegd. 379 00:17:58,050 --> 00:17:59,890 En we zullen terug naar die komen in een paar weken waarschijnlijk, 380 00:17:59,890 --> 00:18:01,930 vooral bij afstudeerproject tijd, toen sommigen van jullie 381 00:18:01,930 --> 00:18:03,596 misschien wilt u uw eigen domeinnamen te krijgen. 382 00:18:03,596 --> 00:18:06,270 Het is eigenlijk relatief ongecompliceerd. 383 00:18:06,270 --> 00:18:06,770 Prima. 384 00:18:06,770 --> 00:18:07,880 Dus laten we dit nu doen. 385 00:18:07,880 --> 00:18:11,910 Ik ga om terug te gaan naar CS50IDE, waar mijn dossier nu, 386 00:18:11,910 --> 00:18:14,710 hello.html, is niet zo interessant. 387 00:18:14,710 --> 00:18:17,130 Ik wil graag iets doen een beetje mooier dan dat. 388 00:18:17,130 --> 00:18:19,440 Dus ik ga iets doen als dit. 389 00:18:19,440 --> 00:18:21,510 Laat me geopend paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 Dus dit is een bestand schreef ik op voorhand. 391 00:18:23,560 --> 00:18:26,480 Aan de bovenkant ervan, zoals altijd, we hebben opmerkingen. 392 00:18:26,480 --> 00:18:28,730 Maar in HTML, opmerkingen ziet er een beetje anders. 393 00:18:28,730 --> 00:18:33,270 Op lijn drie en lijn 14, u zie de syntaxis voor het starten van een reactie 394 00:18:33,270 --> 00:18:34,020 en eindigen geplaatst. 395 00:18:34,020 --> 00:18:36,820 >> Maar geen van de spullen in tussen zaken functioneel. 396 00:18:36,820 --> 00:18:40,250 Het is gewoon een notitie naar een menselijk wat hier aan de hand. 397 00:18:40,250 --> 00:18:43,040 En net als een snelle geestelijke gezondheid controleren, als ik naar beneden scrollen, 398 00:18:43,040 --> 00:18:46,820 wat is voor de hand liggende nieuwe tag die we hebben ingevoerd? 399 00:18:46,820 --> 00:18:52,130 De tags tot nu toe hebben we gezien zijn open beugel HTML, hoofd, titel, en het lichaam. 400 00:18:52,130 --> 00:18:54,400 Maar wat is er nu natuurlijk nieuw? 401 00:18:54,400 --> 00:18:55,200 >> Ja, dus p. 402 00:18:55,200 --> 00:18:57,320 De p-tag of paragraaf tag. 403 00:18:57,320 --> 00:19:01,182 En dan heb ik gewoon geleend enkele standaard Latijnse tekst aan mijn leden vormen. 404 00:19:01,182 --> 00:19:03,390 Want wat ik wilde laten zien is hoe je zou kunnen 405 00:19:03,390 --> 00:19:05,859 vertegenwoordigen de leden van de tekst in HTML. 406 00:19:05,859 --> 00:19:08,400 En dus wat begint te gebeuren hier is dat er al 407 00:19:08,400 --> 00:19:09,657 een patroon ontwikkelen. 408 00:19:09,657 --> 00:19:10,990 En laat me gaan en doen dit. 409 00:19:10,990 --> 00:19:12,760 Laat ik eerst uit te schakelen Apache. 410 00:19:12,760 --> 00:19:17,340 En ik ga het vertellen om zichzelf te beginnen weer binnenkant van de bron van vandaag zeven 411 00:19:17,340 --> 00:19:18,420 m directory. 412 00:19:18,420 --> 00:19:20,100 Zodat ik toegang tot alles. 413 00:19:20,100 --> 00:19:22,230 >> En nu, als ik ga terug naar Deze directory listing, 414 00:19:22,230 --> 00:19:24,846 merk ik zie elke file vanaf nu. 415 00:19:24,846 --> 00:19:26,720 En je zult zien in de volgende probleem set, zullen we 416 00:19:26,720 --> 00:19:28,594 geef je instructies voor het doen precies dit. 417 00:19:28,594 --> 00:19:35,210 Als ik open paragraphs.html, dit zou ook uitzien als een programmeertaal 418 00:19:35,210 --> 00:19:36,970 voor u als u niet spreken of lezen Latijn. 419 00:19:36,970 --> 00:19:40,525 Maar dit is slechts drie punten van de tekst die zijn opgemaakt in HTML. 420 00:19:40,525 --> 00:19:43,100 >> En let op de paragraaf onderbrekingen daartussen. 421 00:19:43,100 --> 00:19:46,400 Want het blijkt, en hoewel je 422 00:19:46,400 --> 00:19:49,210 misschien geneigd dit te doen, terwijl in de echte wereld, 423 00:19:49,210 --> 00:19:51,370 als je wilt online zetten pauzes tussen de dingen, 424 00:19:51,370 --> 00:19:55,680 je misschien gewoon dit doen en raakte opslaan. 425 00:19:55,680 --> 00:19:59,460 En nu, als ik opnieuw hier, bericht dat alles samen vervaagt net 426 00:19:59,460 --> 00:20:01,100 in slechts een blob van tekst. 427 00:20:01,100 --> 00:20:03,570 Omdat HTML is een soort van een domme taal. 428 00:20:03,570 --> 00:20:07,230 >> Het is bedoeld voor gebruik in dergelijke wijze dat de browser zal alleen 429 00:20:07,230 --> 00:20:09,920 doen expliciet wat je hem vertelt wat te doen. 430 00:20:09,920 --> 00:20:12,890 Dus als je niet vertellen geef me een nieuwe paragraaf, 431 00:20:12,890 --> 00:20:14,569 je bent niet van plan om een ​​nieuwe paragraaf te zien. 432 00:20:14,569 --> 00:20:16,360 En inderdaad, wat browser gaat doen 433 00:20:16,360 --> 00:20:20,020 zelfs als je op enter, laten we opnieuw en opnieuw zeggen 434 00:20:20,020 --> 00:20:23,190 en nogmaals, het verplaatsen van deze tekst weg onderaan op het scherm en vervolgens opslaan 435 00:20:23,190 --> 00:20:26,610 en vervolgens opnieuw de browser gaat om al die witte ruimte instorten 436 00:20:26,610 --> 00:20:29,021 in slechts een enkele, zichtbare witruimte. 437 00:20:29,021 --> 00:20:29,520 Prima. 438 00:20:29,520 --> 00:20:30,869 Dus dat is de paragraaf tag. 439 00:20:30,869 --> 00:20:32,910 En dus wat is het patroon dat is het ontwikkelen van hier? 440 00:20:32,910 --> 00:20:37,450 Nou, het lijkt het geval te zijn dat HTML is alles over het starten van een tag 441 00:20:37,450 --> 00:20:38,460 en het beëindigen van een tag. 442 00:20:38,460 --> 00:20:39,300 En wat is een tag? 443 00:20:39,300 --> 00:20:41,160 Nou, het is gewoon een stuk van de syntaxis. 444 00:20:41,160 --> 00:20:44,400 Open beugel, een trefwoord, gesloten beugel, is een tag. 445 00:20:44,400 --> 00:20:45,510 Of begin tag. 446 00:20:45,510 --> 00:20:48,590 En dan wanneer je bent gedaan jezelf uit te drukken, 447 00:20:48,590 --> 00:20:52,300 net als in je klaar bent met de paragraaf, doet u dit aan tegenovergestelde zeggen. 448 00:20:52,300 --> 00:20:55,480 Maar het omgekeerde is niet helemaal naar achteren. 449 00:20:55,480 --> 00:21:00,630 >> Je moet gewoon voorvoegsel dezelfde tag naam met een schuine streep als deze. 450 00:21:00,630 --> 00:21:01,130 Prima. 451 00:21:01,130 --> 00:21:02,570 Dus niet zo spannend. 452 00:21:02,570 --> 00:21:05,270 En in feite, we zijn niet het maken van de web dat alles interessanter. 453 00:21:05,270 --> 00:21:07,630 Wat als ik wil maken dingen groter en vet? 454 00:21:07,630 --> 00:21:11,780 Dus het blijkt dat hier een voorbeeld in headings.html waar in mijn lichaam, 455 00:21:11,780 --> 00:21:17,280 Ik heb een tag H1, H2, H3, vier, vijf of zes, allemaal 456 00:21:17,280 --> 00:21:18,310 lijken vrij mysterieus. 457 00:21:18,310 --> 00:21:21,010 Maar als ik ga open deze Bijvoorbeeld, laten we eens een kijkje nemen. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Dus browsers standaard kan geven je tekst dat is groot en vet van uiteenlopende grootte. 460 00:21:27,030 --> 00:21:28,070 H1 is groot. 461 00:21:28,070 --> 00:21:31,240 H6 is kleiner en vervolgens alles wat daar tussen zit. 462 00:21:31,240 --> 00:21:34,170 Dus dat is interessant, maar nog steeds niet echt het web die ik ken. 463 00:21:34,170 --> 00:21:36,870 Wat als we willen Ik heb zoiets als een lijst. . 464 00:21:36,870 --> 00:21:40,190 Dus hier is een lijst met opsommingstekens van drie van de Harvard's huizen. 465 00:21:40,190 --> 00:21:41,600 >> Hoe heb je dat doen? 466 00:21:41,600 --> 00:21:45,410 Nou, neem een ​​kijkje op list.html. 467 00:21:45,410 --> 00:21:47,870 En hier zien we een beetje funkiness 468 00:21:47,870 --> 00:21:49,630 maar laten we eens kijken wat er gebeurt. 469 00:21:49,630 --> 00:21:56,182 Dus op basis van wat je net hebt gezien, UL staat voor ongeordende lijst. 470 00:21:56,182 --> 00:21:57,640 Ongeordende lijst betekent gewoon opsommingstekens. 471 00:21:57,640 --> 00:21:58,431 Er is geen aantallen. 472 00:21:58,431 --> 00:22:01,850 Er is ook zoiets als een geordende lijst, dat is een OL op tag. 473 00:22:01,850 --> 00:22:05,350 Dan LI lijst item is alles wat het betekent. 474 00:22:05,350 --> 00:22:07,790 >> En zo is het automatisch nummers alles voor je. 475 00:22:07,790 --> 00:22:11,270 Maar nogmaals, al mijn inspringen en witte ruimte is alleen voor mijn bestwil. 476 00:22:11,270 --> 00:22:13,050 De browser is niet daadwerkelijk gaat om de zorg. 477 00:22:13,050 --> 00:22:16,670 Dus ook al kon je niet Dit doen, alleen maar om duidelijk te zijn, 478 00:22:16,670 --> 00:22:19,880 moet je niet, ook al de browser zal nog 479 00:22:19,880 --> 00:22:22,130 in staat zijn om het te begrijpen prima. 480 00:22:22,130 --> 00:22:24,590 Ik ben raken reload in mijn browser, ik klikken reload 481 00:22:24,590 --> 00:22:26,760 en geen verandering gebeurt omdat de browser nog steeds 482 00:22:26,760 --> 00:22:29,550 doet precies wat ik vertel het aan te doen. 483 00:22:29,550 --> 00:22:30,050 >> Prima. 484 00:22:30,050 --> 00:22:31,340 Dus dit is allemaal gewoon tekst. 485 00:22:31,340 --> 00:22:33,730 Laten we nu eens iets interessanter te doen. 486 00:22:33,730 --> 00:22:36,660 Ik ga om te gaan en lenen van deze HTML. 487 00:22:36,660 --> 00:22:40,910 Ik ga om te gaan en maak een nieuw bestand hier. 488 00:22:40,910 --> 00:22:43,370 En we zullen dit rick.html noemen. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 We hebben onevenredig gebruikte iets 491 00:22:48,916 --> 00:22:51,290 riep een rick roll in deze klasse dit jaar, weet ik niet, 492 00:22:51,290 --> 00:22:53,880 het gewoon organisch gebeurd. 493 00:22:53,880 --> 00:22:55,397 >> En nu is het uit de hand gelopen. 494 00:22:55,397 --> 00:22:56,730 Dus ik ga gewoon om te gaan met het. 495 00:22:56,730 --> 00:22:59,700 En als ik naar Google Afbeeldingen en Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Als je niet weet waarom we doen dit, net gelezen op Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Elke keer dat u hebt geklikt op de link, iemand is al ergens lachen. 499 00:23:11,520 --> 00:23:14,860 En laat me ahead-- daar te gaan we gaan, laten we zien dit beeld. 500 00:23:14,860 --> 00:23:16,750 >> Dus hier hebben we een afbeelding in Google Images. 501 00:23:16,750 --> 00:23:19,390 En laten we aannemen dat dit redelijkerwijs overal op het internet. 502 00:23:19,390 --> 00:23:22,570 Dus ik ga ervan uit te gaan dat het OK voor mij om dit ook daadwerkelijk te zetten in mijn webpagina. 503 00:23:22,570 --> 00:23:24,820 Ik ga om te gaan en kopieer het URL. 504 00:23:24,820 --> 00:23:28,600 En nu als ik ga terug naar Cloud 9, laten we eens kijken wat ik hier kan doen. 505 00:23:28,600 --> 00:23:30,630 Dus hier is gewoon een webpagina. 506 00:23:30,630 --> 00:23:39,020 Dit is Rick Astley, haha, Ik ga nu terug te gaan 507 00:23:39,020 --> 00:23:43,510 mijn browser, herladen, en interessant. 508 00:23:43,510 --> 00:23:44,530 >> Waar is Rick? 509 00:23:44,530 --> 00:23:46,050 Dus laat me zien wat er gebeurd is. 510 00:23:46,050 --> 00:23:49,114 Eigenlijk, ga ik doen alsof ik dat niet. 511 00:23:49,114 --> 00:23:50,280 [Onverstaanbaar] hem hier. 512 00:23:50,280 --> 00:23:52,520 We komen terug naar die komen in een moment. 513 00:23:52,520 --> 00:23:54,200 Dus hier is rick.html. 514 00:23:54,200 --> 00:23:56,070 Dus dat is niet Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Dus het blijkt dat we kunnen hem daadwerkelijk toe te voegen hier. 516 00:23:59,680 --> 00:24:00,830 Dit is Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Ik ga zeggen een beeld waarvan geef me bron is de URL ik gewoon gekopieerd, die 518 00:24:06,680 --> 00:24:09,110 blijkbaar is een gelukkig verjaardag het een of ander. 519 00:24:09,110 --> 00:24:13,280 >> En nu ga ik sluit de tag als deze. 520 00:24:13,280 --> 00:24:15,170 Dus dit is het verpakken super lang. 521 00:24:15,170 --> 00:24:17,740 Maar merken dat alles wat ik heb gedaan is het geopend beugel 522 00:24:17,740 --> 00:24:20,270 bron een attribuut van dit. 523 00:24:20,270 --> 00:24:21,530 En het is een heel lange URL. 524 00:24:21,530 --> 00:24:23,720 En aan het eind, merkt dit. 525 00:24:23,720 --> 00:24:29,530 Waarom heb ik gedaan slash hoekige beugel in plaats van, zoals elke andere tag, 526 00:24:29,530 --> 00:24:33,590 met een open beugel IMG, gesloten beugel? 527 00:24:33,590 --> 00:24:37,040 Neem gewoon een gok, zelfs als je hebben geen enkele bekendheid 528 00:24:37,040 --> 00:24:40,410 HTML voor. 529 00:24:40,410 --> 00:24:42,710 >> Het is dus hoe het sluit het commando, maar waarom 530 00:24:42,710 --> 00:24:45,850 is het niet echt intuïtief zin om iets meer te doen 531 00:24:45,850 --> 00:24:48,820 verbose zoals dicht afbeelding? 532 00:24:48,820 --> 00:24:51,400 Ja. 533 00:24:51,400 --> 00:24:52,000 Ja. 534 00:24:52,000 --> 00:24:55,620 Slechts semantisch, er is geen gevoel van het starten van een afbeelding en het beëindigen van een beeld, 535 00:24:55,620 --> 00:24:56,870 Het is er of het is het niet. 536 00:24:56,870 --> 00:25:00,960 Dus het heeft geen zin om een ​​gat te verlaten voor iets anders binnenkant van een beeld. 537 00:25:00,960 --> 00:25:02,010 Je kan het gewoon niet doen. 538 00:25:02,010 --> 00:25:03,720 En dus is de syntax zou meestal gewoon 539 00:25:03,720 --> 00:25:07,910 aan de slash binnenkant doen van de open tag of de start tag 540 00:25:07,910 --> 00:25:09,020 en dan druk op Opslaan. 541 00:25:09,020 --> 00:25:13,350 >> Dus als ik nu opnieuw dit bestand, nu Ik heb hier een goede webpagina koken. 542 00:25:13,350 --> 00:25:15,100 En we konden zeker echt ergeren mensen 543 00:25:15,100 --> 00:25:17,010 door inbedding plaats als een YouTube-link. 544 00:25:17,010 --> 00:25:19,350 En in feite altijd je ooit gegaan naar YouTube, 545 00:25:19,350 --> 00:25:22,190 en laat me eigenlijk per ongeluk rick roll mezelf hier. 546 00:25:22,190 --> 00:25:25,770 Dus Rick roll. 547 00:25:25,770 --> 00:25:29,592 Dus rick Roll-- ik ga hier naartoe te gaan. 548 00:25:29,592 --> 00:25:31,900 >> [Muziek] 549 00:25:31,900 --> 00:25:33,730 >> OK, een persoon vond het leuk dat. 550 00:25:33,730 --> 00:25:37,270 Zo merkt al die tijd, als je klik op de Share koppeling, u natuurlijk 551 00:25:37,270 --> 00:25:41,390 krijgen de URL die je kunt eigenlijk insluiten in een e-mail of een forensisch afbeelding 552 00:25:41,390 --> 00:25:43,730 of een probleem stellen of een schuif. 553 00:25:43,730 --> 00:25:49,055 En nu, als ik klik in plaats daarvan op embed, merken dat al die tijd, dit spul 554 00:25:49,055 --> 00:25:49,680 is er. 555 00:25:49,680 --> 00:25:50,910 Ik ga om te gaan en kopieer deze. 556 00:25:50,910 --> 00:25:54,000 >> En net zo kunnen we het beter te zien, ik ben ga het plakken in mijn tekstverwerker. 557 00:25:54,000 --> 00:25:55,860 Merk op dat dit wat YouTube is je te vertellen. 558 00:25:55,860 --> 00:25:57,693 Elke keer dat u een bezoek YouTube-video, als je 559 00:25:57,693 --> 00:26:00,410 de video wilt insluiten op uw webpagina, dit is gewoon te grijpen. 560 00:26:00,410 --> 00:26:03,350 Dus dit is nog een andere HTML-tag wel een iframe. 561 00:26:03,350 --> 00:26:04,590 Of een in-lijn frame. 562 00:26:04,590 --> 00:26:08,680 Dus het ziet er ook een beetje meer complexer dan alle anderen. 563 00:26:08,680 --> 00:26:11,950 Zo blijkt dat de afbeelding tag en blijkbaar de iframe-tag 564 00:26:11,950 --> 00:26:13,370 nemen wat zijn zogenaamde attributen. 565 00:26:13,370 --> 00:26:15,710 >> Dit is een stuk van de syntaxis in HTML. 566 00:26:15,710 --> 00:26:19,240 Naast de tag naam, geopend beugel tag naam, 567 00:26:19,240 --> 00:26:23,780 U kunt het gedrag van de tag te controleren door het hebben van een heleboel attribuut 568 00:26:23,780 --> 00:26:24,860 is gelijk aan de waarde. 569 00:26:24,860 --> 00:26:26,290 Attribuut is gelijk aan de waarde. 570 00:26:26,290 --> 00:26:28,100 Zo bijvoorbeeld, YouTube is ons te vertellen 571 00:26:28,100 --> 00:26:31,990 als u wilt dat de breedte van deze video om 420 pixels en de hoogte 572 00:26:31,990 --> 00:26:35,470 om 315 pixels, dat hoe je het uit te drukken in HTML. 573 00:26:35,470 --> 00:26:38,480 >> De bron van de video gaat zo lang YouTube URL 574 00:26:38,480 --> 00:26:40,830 en dan nog wat andere dingen achtige frame grens nul is, 575 00:26:40,830 --> 00:26:43,500 zodat waarschijnlijk betekent dat er geen rand rond de zaak. 576 00:26:43,500 --> 00:26:45,450 Sta volledig scherm waarschijnlijk betekent dat de gebruiker 577 00:26:45,450 --> 00:26:47,840 kan op een knop en eigenlijk het volledige scherm van de video. 578 00:26:47,840 --> 00:26:52,870 Dus als ik echt wil zijn indrukwekkende hier Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 in plaats van gebruik maken van de image-tag, laat me dat te verwijderen, deze plaats plakken. 580 00:26:58,490 --> 00:27:00,810 En nu opnieuw. 581 00:27:00,810 --> 00:27:02,500 En nu hier gaan we weer. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Oké, dat is genoeg. 584 00:27:06,020 --> 00:27:08,970 Oké, dus ik zal proberen niet moeilijk om dat nog eens te doen. 585 00:27:08,970 --> 00:27:11,400 Dus wat zijn enkele van de afhaalrestaurants hier? 586 00:27:11,400 --> 00:27:15,130 Dus HTML, zo lelijk als deze webpagina's zijn, is eigenlijk vrij eenvoudig. 587 00:27:15,130 --> 00:27:16,467 Het is geen programmeertaal. 588 00:27:16,467 --> 00:27:17,550 Het heeft geen functies hebben. 589 00:27:17,550 --> 00:27:18,410 Het hoeft geen lussen. 590 00:27:18,410 --> 00:27:19,535 Het heeft geen voorwaarden. 591 00:27:19,535 --> 00:27:22,900 Alles wat het is tientallen verschillende markeringen, die elk 592 00:27:22,900 --> 00:27:24,620 heeft nul of meer attributen. 593 00:27:24,620 --> 00:27:27,320 En in feite, wat is leuk over HTML als je begint te duiken in 594 00:27:27,320 --> 00:27:29,560 is dat het zeer zelf leergierig. 595 00:27:29,560 --> 00:27:32,880 >> Al duurt het is een begrip van het algemene kader van HTML. 596 00:27:32,880 --> 00:27:36,510 Wat is een label, wat een attribuut, hoe doe je eigenlijk configureren van een webpagina 597 00:27:36,510 --> 00:27:37,250 als volgt. 598 00:27:37,250 --> 00:27:40,720 En alles is echt het resultaat van het opzoeken in een online referentie 599 00:27:40,720 --> 00:27:43,080 of googlen hoe om wat te doen techniek of zoals we hebben gezien, 600 00:27:43,080 --> 00:27:45,371 op zoek naar Facebook's de bron code, op zoek naar een website 601 00:27:45,371 --> 00:27:48,710 dat je bij het broncode en begrijpen hoe de ontwikkelaars er 602 00:27:48,710 --> 00:27:50,550 eigenlijk aangelegd dingen uit. 603 00:27:50,550 --> 00:27:52,180 >> Dus we kunnen beelden ook doen. 604 00:27:52,180 --> 00:27:53,994 En in feite, we hebben het even geleden. 605 00:27:53,994 --> 00:27:55,410 Laat me gaan en gewoon laten zien. 606 00:27:55,410 --> 00:27:56,770 Hier zijn enkele voorbeelden van code. 607 00:27:56,770 --> 00:27:58,380 Als je ooit wilt knorrige kat zien. 608 00:27:58,380 --> 00:28:00,620 Zo merken dat ik kan een beeld tag hier. 609 00:28:00,620 --> 00:28:02,090 En ik heb een reactie erboven. 610 00:28:02,090 --> 00:28:04,490 Ik heb een alternatief gekregen tekst voor toegankelijkheid. 611 00:28:04,490 --> 00:28:07,250 Dus iemand die met behulp van een scherm reader om redenen van het zicht 612 00:28:07,250 --> 00:28:10,172 kan eigenlijk hebben dan hun schermlezer zeggen knorrige kat. 613 00:28:10,172 --> 00:28:11,880 Want als ze dat niet kunnen zie het beeld, zij 614 00:28:11,880 --> 00:28:14,504 kan op zijn minst hun computer vertel hen verbaal wat het is. 615 00:28:14,504 --> 00:28:18,020 De bron van die bestand cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Dus in feite, als ik echt wilde krijgen slim, wat ik zou kunnen hebben done-- 617 00:28:22,472 --> 00:28:25,680 Ik beloof niet naar Rick Astley, dus Ik ga naar google voor een kat in plaats daarvan. 618 00:28:25,680 --> 00:28:28,290 En als ik naar Google Afbeeldingen hier, en we zullen aannemen 619 00:28:28,290 --> 00:28:30,040 dat dit is een foto van mijn kat. 620 00:28:30,040 --> 00:28:35,070 >> Stel dat ik controle geklikt of rechts aangeklikt dit per ongeluk 621 00:28:35,070 --> 00:28:35,630 griezelig. 622 00:28:35,630 --> 00:28:40,320 En cat.jpeg ik ga om te besparen op mijn bureaublad. 623 00:28:40,320 --> 00:28:44,700 Laat me nu gaan terug naar cloud 9. 624 00:28:44,700 --> 00:28:48,150 Merk op dat hier, ik kan ga dan naar de lokale bestanden te uploaden. 625 00:28:48,150 --> 00:28:51,530 En als ik grijp deze bestand, cat.jpeg, bericht 626 00:28:51,530 --> 00:28:54,674 dat ik het kan slepen en zet het in cloud 9 627 00:28:54,674 --> 00:28:56,090 en het gaat om te schreeuwen bij mij hier. 628 00:28:56,090 --> 00:28:59,000 >> Want we hebben al krijgt u een cat.jpeg bestand 629 00:28:59,000 --> 00:29:01,430 maar het is super eenvoudig te pak een foto die je hebt 630 00:29:01,430 --> 00:29:03,220 ontleend aan Facebook of Flickr of iets dergelijks 631 00:29:03,220 --> 00:29:05,678 en eigenlijk slepen en neerzetten in de cloud 9 en maak het dan 632 00:29:05,678 --> 00:29:07,970 een deel van uw eigen persoonlijke website of probleem 633 00:29:07,970 --> 00:29:10,442 set zeven of acht als we binnenkort zullen zien. 634 00:29:10,442 --> 00:29:12,150 En dan wanneer je eindelijk te bezoeken die kat, 635 00:29:12,150 --> 00:29:16,610 veronderstelling Ik downloadde diezelfde kat, kennisgeving dat-- dat was schattig. 636 00:29:16,610 --> 00:29:19,160 >> Wat je zou zien is zoiets gezicht hier. 637 00:29:19,160 --> 00:29:21,810 Zodat de bestanden die u referentie binnen een webpagina 638 00:29:21,810 --> 00:29:26,050 kan zowel lokaal in uw eigen kunnen account of afstandsbediening op een andere server 639 00:29:26,050 --> 00:29:29,670 zoals in het geval van Rick Astley foto een beetje geleden. 640 00:29:29,670 --> 00:29:32,990 Dus waar else-- wat anders kunnen we hier doen? 641 00:29:32,990 --> 00:29:34,890 Dus laten we eens kijken naar het volgende. 642 00:29:34,890 --> 00:29:36,160 Je weet wat er wel cool? 643 00:29:36,160 --> 00:29:39,330 >> We hebben tot nu toe is het maken zeer statische webpagina's. 644 00:29:39,330 --> 00:29:41,830 Ik wil dingen als volgt kruid. 645 00:29:41,830 --> 00:29:44,344 Ik wil mijn eigen zoekmachine te maken. 646 00:29:44,344 --> 00:29:47,010 Dus om een ​​zoekmachine te maken, laten we ga je gang en beginnen met dit te doen. 647 00:29:47,010 --> 00:29:52,570 Ik ga om te gaan en te creëren een nieuw bestand met de naam search.html. 648 00:29:52,570 --> 00:29:54,890 En we hebben prefabed versies online. 649 00:29:54,890 --> 00:29:56,027 Whoops. 650 00:29:56,027 --> 00:29:57,610 Niet plakken in je terminal venster. 651 00:29:57,610 --> 00:29:58,744 Prefab versies online. 652 00:29:58,744 --> 00:30:00,160 En ik ga om te beginnen als volgt. 653 00:30:00,160 --> 00:30:04,490 Dus hier is het begin van een bestand genaamd search.html. 654 00:30:04,490 --> 00:30:07,510 Ik ga om het op te slaan in de huidige bron directory. 655 00:30:07,510 --> 00:30:09,079 Ik ga noemen dit zoeken. 656 00:30:09,079 --> 00:30:10,370 Eigenlijk, zullen we het beter te maken. 657 00:30:10,370 --> 00:30:13,600 CS50 zoeken en eigenlijk merk het. 658 00:30:13,600 --> 00:30:17,500 En nu, ik ga zeggen iets als H1 CS50 zoeken. 659 00:30:17,500 --> 00:30:20,930 En dan naar beneden hier, H2 binnenkort. 660 00:30:20,930 --> 00:30:23,230 En alleen maar om samen te vatten, en H1 H2 onderscheidenlijk wat? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Ja, zo groot en vet, en niet zo groot, maar nog steeds vet. 663 00:30:30,320 --> 00:30:37,375 Dus als ik dit op te slaan en ga dan hier, laten we zien het bestand search.html. 664 00:30:37,375 --> 00:30:42,560 Oké, en deze is right-- [onverstaanbaar]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Stand-by. 667 00:30:49,110 --> 00:30:49,945 David is in de war. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Oh, het is daar. 670 00:30:54,080 --> 00:30:54,860 David is een idioot. 671 00:30:54,860 --> 00:30:55,420 OK. 672 00:30:55,420 --> 00:30:56,660 Dus daar is het. 673 00:30:56,660 --> 00:30:58,350 Dus CS50 zoeken binnenkort. 674 00:30:58,350 --> 00:31:00,370 Dus nu, laten we synthetiseren wat we deden vorige week. 675 00:31:00,370 --> 00:31:03,400 >> Waar hadden we het over de lager niveau mechanica van HTTP. 676 00:31:03,400 --> 00:31:05,780 En deze nieuwe ideeën van HTML, dat is gewoon 677 00:31:05,780 --> 00:31:08,890 Deze opmaaktaal waar u vertel een browser precies wat te doen 678 00:31:08,890 --> 00:31:10,740 en implementeren van onze eigen zoekmachine. 679 00:31:10,740 --> 00:31:12,520 Dus in plaats van alleen zeggende binnenkort, ik ben 680 00:31:12,520 --> 00:31:14,810 zal introduceren zoiets als een vorm tag. 681 00:31:14,810 --> 00:31:19,610 En in deze vorm, ga ik hebben iets als een invoerveld. 682 00:31:19,610 --> 00:31:22,450 >> En de naam van deze input gebied, ik ga noemen Q. 683 00:31:22,450 --> 00:31:26,240 En het type van het invoerveld Ik ga zeggen is gewoon "tekst". 684 00:31:26,240 --> 00:31:29,130 En een tekstveld, zoals we zullen zie, is gewoon een tekstvak. 685 00:31:29,130 --> 00:31:32,830 En zo werkt het hier niet het gevoel te hebben iets erin op dit punt. 686 00:31:32,830 --> 00:31:35,320 En dus ben ik gewoon gaan naar de tag met die sluiten 687 00:31:35,320 --> 00:31:38,099 slash midden in de tag zelf. 688 00:31:38,099 --> 00:31:39,890 En dan ga ik één andere ingang. 689 00:31:39,890 --> 00:31:43,480 Input type is gelijk aan te leggen. 690 00:31:43,480 --> 00:31:45,320 En dan ga ik deze ook sluiten. 691 00:31:45,320 --> 00:31:46,840 >> En nu ga ik hier terug te gaan. 692 00:31:46,840 --> 00:31:49,520 En nu al zien we, zij vrij lelijk, ik heb 693 00:31:49,520 --> 00:31:52,460 kreeg het begin van Mijn eigen zoekpagina hier. 694 00:31:52,460 --> 00:31:55,150 In feite, laat me proberen te schoon dit een beetje. 695 00:31:55,150 --> 00:31:57,330 Het blijkt dat op de ingang, kan ik 696 00:31:57,330 --> 00:31:59,910 een ander attribuut placeholder. 697 00:31:59,910 --> 00:32:05,165 En ik misschien iets als zoekwoorden, of meer specifiek, te vragen voor de q. 698 00:32:05,165 --> 00:32:07,820 >> En merk, nu, ik heb dit soort grijze tekst 699 00:32:07,820 --> 00:32:10,440 dat verdwijnt Zodra ik begin te typen, 700 00:32:10,440 --> 00:32:12,930 maar het is waarschijnlijk iets je hebt gezien in andere webpagina's. 701 00:32:12,930 --> 00:32:14,650 Ik hou niet echt de knop Verzenden. 702 00:32:14,650 --> 00:32:18,320 Dus ik ben eigenlijk van plan om het te geven Submit knop een waarde van search. 703 00:32:18,320 --> 00:32:21,680 En nu, als ik herladen, merken dat mijn knop wordt de naam zoeken. 704 00:32:21,680 --> 00:32:24,140 Weet je, ik niet echt net als de logo hier. 705 00:32:24,140 --> 00:32:27,140 Zodat Google Font generator. 706 00:32:27,140 --> 00:32:28,820 >> Ik wil dit verder te animeren. 707 00:32:28,820 --> 00:32:30,660 Dus CS50 zoeken. 708 00:32:30,660 --> 00:32:31,870 Laat me mijn eigen logo te creëren. 709 00:32:31,870 --> 00:32:33,080 Dat ziet er leuk uit. 710 00:32:33,080 --> 00:32:36,945 Dus nu laat ik bewaar dit as-- branden. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Waar gaat het naartoe? 713 00:32:43,120 --> 00:32:43,620 Er. 714 00:32:43,620 --> 00:32:44,160 OK. 715 00:32:44,160 --> 00:32:44,980 Gemist. 716 00:32:44,980 --> 00:32:47,740 Opslaan als. 717 00:32:47,740 --> 00:32:49,470 Dom browsers. 718 00:32:49,470 --> 00:32:51,700 Stand-by, we gaan fix dit eens en voor altijd. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Daar gaan we. 721 00:32:58,590 --> 00:32:59,090 Prima. 722 00:32:59,090 --> 00:32:59,600 Sorry. 723 00:32:59,600 --> 00:33:00,750 Vrije dag. 724 00:33:00,750 --> 00:33:02,310 Nu is dit funky. 725 00:33:02,310 --> 00:33:03,160 Verlaat volledig scherm. 726 00:33:03,160 --> 00:33:04,150 Prima. 727 00:33:04,150 --> 00:33:06,870 >> Nu, als een gewone persoon, afbeelding opslaan als. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Nu ga ik naar CS50IDE en te gaan Ik ga gewoon pak het logo, 730 00:33:13,194 --> 00:33:15,360 Ik ga het slepen in mijn bron zeven directory, 731 00:33:15,360 --> 00:33:17,002 bestand al bestaat, ik ben OK met dat. 732 00:33:17,002 --> 00:33:19,210 Dus ik ga het overschrijven omdat ik het had al. 733 00:33:19,210 --> 00:33:20,630 En nu hoe krijg ik ontdoen van deze? 734 00:33:20,630 --> 00:33:24,670 >> Laten we doorgaan hier en doen image bron gelijk logo.gif. 735 00:33:24,670 --> 00:33:25,490 Sluit deze. 736 00:33:25,490 --> 00:33:26,050 Opslaan. 737 00:33:26,050 --> 00:33:30,560 En nu als ik ga terug naar mijn zoekopdracht pagina, nu is het ziet er goed uit. 738 00:33:30,560 --> 00:33:33,610 Oké, dus het heeft niet heel iets nuttigs gedaan. 739 00:33:33,610 --> 00:33:37,000 In feite, laat me proberen te zoeken voor een kat en zie wat er gebeurt. 740 00:33:37,000 --> 00:33:38,890 Katten. 741 00:33:38,890 --> 00:33:39,420 Verdomme. 742 00:33:39,420 --> 00:33:41,400 Het is niet alleen werken, blijkbaar. 743 00:33:41,400 --> 00:33:43,760 Dus wat is het belangrijkste stuk dat ontbreekt hier? 744 00:33:43,760 --> 00:33:49,100 >> Recht, zelfs als je niet weet welke HTML, Ik ben begonnen met het markeren van de telefoon vorm 745 00:33:49,100 --> 00:33:54,130 en ik heb hem verteld hoe om input te krijgen, geef me een tekstvak en een submit knop, 746 00:33:54,130 --> 00:33:55,730 welk stuk blijkbaar ontbreekt? 747 00:33:55,730 --> 00:33:58,975 Stel dat we willen eigenlijk dit ding goed werkt. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Wat moeten we doen? 750 00:34:05,360 --> 00:34:08,860 We hebben behoefte aan de uitvoering van de back-end database of de zoekmachine zelf, 751 00:34:08,860 --> 00:34:11,210 en dat gaat om een ​​te nemen heel veel tijd, eerlijk gezegd. 752 00:34:11,210 --> 00:34:13,380 >> Dus onthoud wat we deden vorige keer. 753 00:34:13,380 --> 00:34:18,230 Dus als u op zoek naar iets op Google en je hebt te voren uitgeschakeld, 754 00:34:18,230 --> 00:34:20,355 recall, instant search. 755 00:34:20,355 --> 00:34:22,230 Dus laat me zetten dat uit zodat dit in feite 756 00:34:22,230 --> 00:34:26,650 gedraagt ​​zich als een oudere scholen browser, als ik nu zoeken naar iets als katten, 757 00:34:26,650 --> 00:34:28,190 herinneren wat de URL eruit ziet. 758 00:34:28,190 --> 00:34:29,449 Het is vrij cryptisch. 759 00:34:29,449 --> 00:34:33,000 Maar ingebed in daar, recall, is slash zoeken. 760 00:34:33,000 --> 00:34:35,100 Vraagteken q gelijk aan katten. 761 00:34:35,100 --> 00:34:37,760 >> En dat lijkt me een hele hoop van de zoekresultaten. 762 00:34:37,760 --> 00:34:39,134 Zodat je weet wat ik ga doen? 763 00:34:39,134 --> 00:34:41,650 Ik ga om te lenen Google voor slechts een minuut. 764 00:34:41,650 --> 00:34:43,670 Ik ga om te gaan over hier en ik ga zeggen 765 00:34:43,670 --> 00:34:47,850 dat dit vormt actie of bestemming zogezegd, 766 00:34:47,850 --> 00:34:49,330 moet letterlijk Google. 767 00:34:49,330 --> 00:34:52,590 En de methode die ik wilde gebruik gaat worden krijgen. 768 00:34:52,590 --> 00:34:53,560 >> Dus wat is actie? 769 00:34:53,560 --> 00:34:55,760 Actie is vreemd genoemd, maar dat betekent 770 00:34:55,760 --> 00:34:58,120 wie gaat behandelen de actie van dit formulier? 771 00:34:58,120 --> 00:35:00,820 Als ik klik zoeken, waarbij moet het resultaat heen? 772 00:35:00,820 --> 00:35:05,300 En als ik ga nu terug naar mijn vorm hier en laad mijn webpagina 773 00:35:05,300 --> 00:35:09,000 en nu zoeken naar iets achtige hond, merkt nu 774 00:35:09,000 --> 00:35:10,850 Ik heb opnieuw geïmplementeerd Google. 775 00:35:10,850 --> 00:35:11,350 Rechts? 776 00:35:11,350 --> 00:35:14,141 >> Als ik wil om te zoeken naar iets anders, het werkt niet alleen voor honden, 777 00:35:14,141 --> 00:35:16,400 Het werkt ook voor katten. 778 00:35:16,400 --> 00:35:21,930 Het werkt ook voor de CS50. 779 00:35:21,930 --> 00:35:24,310 En OK, dit is gewoon onder whelming, is het niet? 780 00:35:24,310 --> 00:35:25,920 Oké, maar het eigenlijk werkt. 781 00:35:25,920 --> 00:35:27,360 Dus wat er daadwerkelijk aan de hand? 782 00:35:27,360 --> 00:35:31,340 Dus ik heb mijn browser geleerd, met behulp HTML, om input te nemen van de gebruiker 783 00:35:31,340 --> 00:35:35,810 en eigenlijk stuur die ingang naar een externe server via HTTP. 784 00:35:35,810 --> 00:35:39,120 >> En omdat mijn browser begrijpt HTTP, het eigenlijk 785 00:35:39,120 --> 00:35:43,500 construeren URL zodat wat Ik uiteindelijk meer dan in mijn browser, 786 00:35:43,500 --> 00:35:45,660 let op wat er gebeurt toen ik naar de hond. 787 00:35:45,660 --> 00:35:49,270 Als ik klik zoeken, merken dat de URL verandert als ik van plan was 788 00:35:49,270 --> 00:35:52,770 om google.com/search~~V vraag is gelijk aan de hond. 789 00:35:52,770 --> 00:35:56,020 En dat komt omdat het formulier weet, omdat de methode te krijgen, 790 00:35:56,020 --> 00:35:59,560 om gewoon te voegen aan die URL daar. 791 00:35:59,560 --> 00:36:01,730 >> Nu, deze webpagina's zijn nog steeds lelijk. 792 00:36:01,730 --> 00:36:04,890 Dus laten we introduceren één andere stuk van de syntax als we kunnen vandaag. 793 00:36:04,890 --> 00:36:07,640 En dit is iets bekend als cascading style sheets. 794 00:36:07,640 --> 00:36:10,720 Dus laat me een kijkje nemen op dit voorbeeld hier en te zien 795 00:36:10,720 --> 00:36:12,380 als we kunnen afleiden wat er gaande is. 796 00:36:12,380 --> 00:36:14,520 Dit is CSS0.html. 797 00:36:14,520 --> 00:36:16,532 En dit is waar de dingen een beetje lelijk. 798 00:36:16,532 --> 00:36:18,490 Want helaas, in de wereld van het web, 799 00:36:18,490 --> 00:36:20,920 HTML alleen kan niet alles doen. 800 00:36:20,920 --> 00:36:22,920 En dus als je wilt stileren uw webpagina, 801 00:36:22,920 --> 00:36:28,370 je eigenlijk nodig hebt om zich te concentreren op de esthetiek op een andere manier. 802 00:36:28,370 --> 00:36:33,090 Dus hier heb ik het lichaam van mijn web pagina binnenkant van dat is een grote div. 803 00:36:33,090 --> 00:36:34,700 En een div betekent gewoon divisie. 804 00:36:34,700 --> 00:36:38,060 Dus het is als een paragraaf, maar het niet dezelfde semantiek hebben 805 00:36:38,060 --> 00:36:39,180 van een paragraaf van de tekst. 806 00:36:39,180 --> 00:36:40,940 >> Dit betekent dat alleen maar om de browser, hier komt 807 00:36:40,940 --> 00:36:45,210 een groot rechthoekig gebied van mijn web pagina, ik wil het speciaal behandelen. 808 00:36:45,210 --> 00:36:47,420 Nu, lijn 21 is waar dat div begint. 809 00:36:47,420 --> 00:36:48,770 En gewoon een gok. 810 00:36:48,770 --> 00:36:53,080 Wat is het effect van de lijn 21 aan de rest van de inhoud van de pagina? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Gecentreerd. 813 00:36:56,311 --> 00:36:56,810 Dat is alles. 814 00:36:56,810 --> 00:36:58,830 Dus we hebben niet een manier van zien de tekst eigenlijk centreren. 815 00:36:58,830 --> 00:37:00,996 >> In feite, mijn zoekmachine, in tegenstelling tot de feitelijke Google, 816 00:37:00,996 --> 00:37:03,040 was allemaal gerechtvaardigd naar links. 817 00:37:03,040 --> 00:37:07,430 En nu in de lijn 21, ik zeg, hey browser, het creëren van een afdeling van de pagina. 818 00:37:07,430 --> 00:37:09,450 Geef me een grote, onzichtbare rechthoek. 819 00:37:09,450 --> 00:37:11,490 Dat is hoe ik wil na te denken over de webpagina. 820 00:37:11,490 --> 00:37:13,870 En stileren vervolgens als volgt. 821 00:37:13,870 --> 00:37:16,900 Binnenkant van de citaten, nu, is een tweede taal 822 00:37:16,900 --> 00:37:19,969 dat we vandaag geïntroduceerd heet cascading style sheets. 823 00:37:19,969 --> 00:37:22,010 Gelukkig, het is ook niet een programmeertaal, 824 00:37:22,010 --> 00:37:26,470 dus het is zeer beperkt in de syntax, maar Ook een zeer beperkte functionaliteit 825 00:37:26,470 --> 00:37:30,670 terwijl HTML is alles over markeren van de gegevens van een webpagina 826 00:37:30,670 --> 00:37:32,130 en de structuur van een webpagina. 827 00:37:32,130 --> 00:37:35,320 CSS doorgaans in laatste mijl, de esthetiek, 828 00:37:35,320 --> 00:37:40,160 het verkrijgen van de maat en de kleur en de plaatsing precies midden in een webpagina. 829 00:37:40,160 --> 00:37:43,000 Inderdaad, het is gevormd met belangrijke waarde paren. 830 00:37:43,000 --> 00:37:46,290 >> Een eigenschap als dit, tekst uitlijnen, gevolgd door een dubbele punt, 831 00:37:46,290 --> 00:37:49,720 gevolgd door de waarde van deze eigenschap, die in dit geval center. 832 00:37:49,720 --> 00:37:51,910 En nu merk je kunnen nestelen deze dingen. 833 00:37:51,910 --> 00:37:56,780 Als ik wilde alles in die Ik heb gewezen te worden gecentreerd, 834 00:37:56,780 --> 00:38:00,270 dat is waarom ik heb lijn 21 en de bijbehorende lijn 31. 835 00:38:00,270 --> 00:38:04,820 Maar stel nu willen zeggen John Harvard, welkom op mijn homepage. 836 00:38:04,820 --> 00:38:06,530 >> Copyright symbool John Harvard. 837 00:38:06,530 --> 00:38:09,180 En stel dat ik wil dat de eerste van die lijnen te behoorlijk groot zijn. 838 00:38:09,180 --> 00:38:10,450 36 pixels. 839 00:38:10,450 --> 00:38:11,530 Dus dat is een behoorlijke omvang. 840 00:38:11,530 --> 00:38:13,240 En ik wilde het gewicht vet te zijn. 841 00:38:13,240 --> 00:38:15,450 Maar daaronder Ik wil kleinere tekst. 842 00:38:15,450 --> 00:38:19,980 En onder dat, ik wil nog kleiner tekst. 843 00:38:19,980 --> 00:38:20,480 Sorry. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Vandaag voelt als een slechte dag. 846 00:38:26,940 --> 00:38:29,840 >> Dus nu, wat moet ik doen om dit uit te drukken? 847 00:38:29,840 --> 00:38:34,580 Hier op lijn 22 is een geïntegreerde div of geneste div, als je wil. 848 00:38:34,580 --> 00:38:36,190 Het heeft ook zijn eigen stijl tag. 849 00:38:36,190 --> 00:38:38,160 Ik geef een lettergrootte van 36. 850 00:38:38,160 --> 00:38:40,460 Ik een lettertype gewicht van vet te geven. 851 00:38:40,460 --> 00:38:43,360 Hier beneden, ik alleen maar geef 24 pixels. 852 00:38:43,360 --> 00:38:45,960 En tenslotte, in de lijn 28, ik geef 12. 853 00:38:45,960 --> 00:38:49,070 Dus gewoon als een snelle sanity check en als mens te lezen dit, 854 00:38:49,070 --> 00:38:52,545 welke woorden op het scherm zijn daadwerkelijk gaat vet zijn? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Welke lijnen zijn eigenlijk vet? 857 00:38:58,760 --> 00:38:59,570 >> Gewoon John Harvard. 858 00:38:59,570 --> 00:39:00,070 Rechts? 859 00:39:00,070 --> 00:39:05,940 Want net als lijn 22 zegt hey browser, hier is een divisie van de pagina. 860 00:39:05,940 --> 00:39:07,920 Maak er lettergrootte 36 punt. 861 00:39:07,920 --> 00:39:09,460 Maak het lettertype gewicht vet. 862 00:39:09,460 --> 00:39:11,920 Zodra u bij de corresponderende eindtag 863 00:39:11,920 --> 00:39:15,340 of gesloten tag op lijn 24, dat betekent, he browser, 864 00:39:15,340 --> 00:39:17,640 stoppen met het doen wat het ook is je doet. 865 00:39:17,640 --> 00:39:21,020 En kennisgeving om duidelijk te zijn, ook al lijn 22 heeft al deze attributen 866 00:39:21,020 --> 00:39:24,430 achtige stijl, als je sluit de tag in de lijn 24, 867 00:39:24,430 --> 00:39:25,940 u alleen vermelden de naam van de tag. 868 00:39:25,940 --> 00:39:29,990 >> Je hoeft niet te herhalen het woord stijl of alles wat er binnen in de quotes. 869 00:39:29,990 --> 00:39:32,860 En dus als ik kijk naar dit nu in mijn browser, laten we 870 00:39:32,860 --> 00:39:38,060 Een blik op het eindresultaat. Laat me gaan vooruit naar dit bestand, dat is CSS 0. 871 00:39:38,060 --> 00:39:41,814 En het is nog steeds vrij eenvoudig, maar al behoorlijk interessant. 872 00:39:41,814 --> 00:39:43,980 Maar het blijkt dat er's andere dingen die ik kan doen hier, 873 00:39:43,980 --> 00:39:46,490 en op het risico van het maken van Dit volledig afschuwelijk, 874 00:39:46,490 --> 00:39:48,630 merkt hier dat in mijn lichaam van mijn webpagina, 875 00:39:48,630 --> 00:39:53,930 Ik kan iets grappigs doen zoals bg of achtergrondkleur. 876 00:39:53,930 --> 00:39:56,670 >> En snel, wat is je favoriete kleur? 877 00:39:56,670 --> 00:39:57,720 Groen Ik hoorde. 878 00:39:57,720 --> 00:39:58,750 Prima. 879 00:39:58,750 --> 00:40:02,920 Dus nu, als ik raakte reload nu, We hebben een groene webpagina. 880 00:40:02,920 --> 00:40:04,710 Oké, dus dat is niet slecht. 881 00:40:04,710 --> 00:40:08,350 En nu, als ik wil dit echt maken cool, ik kan de kleur van mijn tekst te maken 882 00:40:08,350 --> 00:40:09,360 zelfs rood. 883 00:40:09,360 --> 00:40:10,870 Dus laten we zien hoe dit eruit ziet. 884 00:40:10,870 --> 00:40:12,230 Nu is het ziet er goed uit. 885 00:40:12,230 --> 00:40:15,460 En hier beneden, als je echt willen knoeien met iemand 886 00:40:15,460 --> 00:40:17,487 of als u wilt worden één van die mensen die 887 00:40:17,487 --> 00:40:20,570 probeert u te verleiden tot een bezoek aan een web pagina, omdat ze bedrogen Google 888 00:40:20,570 --> 00:40:27,610 te denken is er een hele hoop sleutelwoorden like-- laten we eens kijken, herladen. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Waar ging het? 891 00:40:30,680 --> 00:40:31,530 En daar is het ons. 892 00:40:31,530 --> 00:40:32,030 Prima. 893 00:40:32,030 --> 00:40:34,905 Dus ik zeg dit als een terzijde, zullen we praten over dit soort dingen in een paar weken 894 00:40:34,905 --> 00:40:36,740 als we praten over veiligheid, als u daadwerkelijk 895 00:40:36,740 --> 00:40:38,852 insluiten hele trossen zoekwoorden in een webpagina, 896 00:40:38,852 --> 00:40:41,810 zelfs als ze niet zichtbaar voor een mens, iemand als Google, natuurlijk, 897 00:40:41,810 --> 00:40:43,250 kan nog steeds dit ook daadwerkelijk te vinden. 898 00:40:43,250 --> 00:40:45,820 Oké, dus dat is mooi vrij snel afschuwelijk. 899 00:40:45,820 --> 00:40:48,420 >> En in feite, het is niet allemaal die veel in tegenstelling tot mijn eigen web 900 00:40:48,420 --> 00:40:51,480 pagina als een undergraduate, die Ik begon googlen om uit te vinden 901 00:40:51,480 --> 00:40:53,690 eerdere versies van mijn oude websites. 902 00:40:53,690 --> 00:40:54,500 Het was nogal slecht. 903 00:40:54,500 --> 00:40:56,650 In feite, vond ik een net voor de les. 904 00:40:56,650 --> 00:40:58,620 Maar er is nog erger die er zijn. 905 00:40:58,620 --> 00:41:01,534 Dit was blijkbaar mijn startpagina in 1996. 906 00:41:01,534 --> 00:41:04,200 Blijkbaar vond ik het geschikt om mensen te vragen hun naam 907 00:41:04,200 --> 00:41:05,991 voordat ze konden eigenlijk zie mijn webpagina. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> En vervolgens liet I iets stoms, waarschijnlijk. 910 00:41:11,920 --> 00:41:13,450 Ik zal meer voor de volgende keer graven. 911 00:41:13,450 --> 00:41:16,220 Maar voor nu, laten we overwegen een beetje van het ontwerp. 912 00:41:16,220 --> 00:41:17,444 We hebben gesproken over de stijl. 913 00:41:17,444 --> 00:41:19,735 En deze pagina tot nu toe en de meeste van alles wat ik heb geschreven 914 00:41:19,735 --> 00:41:21,890 is vrij schoon stilistisch. 915 00:41:21,890 --> 00:41:23,320 Maar hoe zit het ontwerp? 916 00:41:23,320 --> 00:41:25,990 Nou, er is veel redundantie in wat ik hier heb gedaan. 917 00:41:25,990 --> 00:41:28,156 >> Ik heb gezegd het woord kleur in een paar plaatsen. 918 00:41:28,156 --> 00:41:31,630 Ik heb gezegd lettergrootte in een paar plaatsen en vet in een paar plaatsen. 919 00:41:31,630 --> 00:41:34,870 En fundamenteel, ik ben co vermenging van twee talen. 920 00:41:34,870 --> 00:41:38,100 Ik heb met mijn HTML-tags en mijn attributen en dan ineens, 921 00:41:38,100 --> 00:41:40,100 tussen aanhalingstekens, ik heb de tweede taal van vandaag 922 00:41:40,100 --> 00:41:43,830 genaamd CSS, die weer, is alleen deze key waarde paren of deze eigenschappen 923 00:41:43,830 --> 00:41:45,280 gescheiden door dubbele punten. 924 00:41:45,280 --> 00:41:47,700 >> Het blijkt dat veel zoals in C, waar we 925 00:41:47,700 --> 00:41:50,550 kan beginnen om uit factor enkele code in header-bestanden, 926 00:41:50,550 --> 00:41:53,520 dus kunnen we hetzelfde doen in HTML. 927 00:41:53,520 --> 00:41:56,030 En een stap in de richting die als volgt. 928 00:41:56,030 --> 00:42:02,230 Merk op dat deze versie, CSS1.html is Structureel exact dezelfde webpagina. 929 00:42:02,230 --> 00:42:05,250 Dus ik heb een heleboel gekregen van divs, maar deze keer heb ik 930 00:42:05,250 --> 00:42:07,220 weggedaan van de wikkel div zoals u zult zien. 931 00:42:07,220 --> 00:42:12,390 >> En ik heb die drie divs gegeven boven, midden en onderaan, unieke ID's. 932 00:42:12,390 --> 00:42:14,760 Dit is mooi, want door het geven van die afdelingen 933 00:42:14,760 --> 00:42:18,715 van de pagina unieke identifiers, Ik kan ze elders verwijzen. 934 00:42:18,715 --> 00:42:19,215 Waar? 935 00:42:19,215 --> 00:42:21,070 Nou, laat me scrollen. 936 00:42:21,070 --> 00:42:24,070 En tot nu toe, wanneer we hebben gekeken aan het hoofd van een webpagina, wat is 937 00:42:24,070 --> 00:42:28,560 de enige tag we hebben gehad het hoofd van een webpagina? 938 00:42:28,560 --> 00:42:29,740 Een beetje luider. 939 00:42:29,740 --> 00:42:30,799 Gewoon de titel tot nu toe. 940 00:42:30,799 --> 00:42:32,590 Maar het blijkt dat er's een paar andere dingen 941 00:42:32,590 --> 00:42:35,840 U kunt daar zetten, een van waarin het heet een stijl tag. 942 00:42:35,840 --> 00:42:37,850 Dus even geleden, keken we bij een attribuut stijl. 943 00:42:37,850 --> 00:42:39,150 Blijkt dat er een stijl tag. 944 00:42:39,150 --> 00:42:41,200 Het behoort binnen van het hoofd van een webpagina. 945 00:42:41,200 --> 00:42:42,840 En let nu op wat ik doe. 946 00:42:42,840 --> 00:42:46,540 Ik heb binnenkant van deze stijl tag de volgende. 947 00:42:46,540 --> 00:42:51,190 Ik ben letterlijk vermelden op lijn 20 de de naam van een tag die ik wil stileren. 948 00:42:51,190 --> 00:42:53,489 >> Dan heb ik geopend accolade en gesloten accolade. 949 00:42:53,489 --> 00:42:56,030 Zo vergelijkbaar in de geest naar C, maar nogmaals, dit is niet een functie, 950 00:42:56,030 --> 00:42:57,796 dit is slechts een syntactische detail hier. 951 00:42:57,796 --> 00:43:00,170 En dan natuurlijk, ik zeg de browser, hey browser, 952 00:43:00,170 --> 00:43:05,210 maken het hele lichaam van de pagina hebben een tekst uitlijning van het centrum. 953 00:43:05,210 --> 00:43:06,930 En dan dit zegt het volgende. 954 00:43:06,930 --> 00:43:12,600 Hey browser, als je een HTML element of tag in de pagina die 955 00:43:12,600 --> 00:43:17,040 heeft een unieke identificatie van de top, dus de hash symbool hier betekent gewoon 956 00:43:17,040 --> 00:43:21,010 uniek idee van de top, ga je gang en maak de lettergrootte 36 957 00:43:21,010 --> 00:43:22,490 en het lettertype gewicht vet. 958 00:43:22,490 --> 00:43:26,840 >> Hey browser, een element waarvan ID is midden, maken het 24 pixels. 959 00:43:26,840 --> 00:43:31,070 En hey browser, als je een idee van bodem, maken het 12 pixels. 960 00:43:31,070 --> 00:43:33,540 Het effect uiteindelijk is precies sam. 961 00:43:33,540 --> 00:43:36,500 Als ik in CSS 1, de pagina ziet er hetzelfde uit. 962 00:43:36,500 --> 00:43:39,810 Maar we zijn een stap in de richting een iets beter ontwerp. 963 00:43:39,810 --> 00:43:44,850 Laat me nu weer gaan hier naar CSS2 en zie wat ik heb gedaan. 964 00:43:44,850 --> 00:43:48,030 >> Nu is de pagina is echt, echt schoon. 965 00:43:48,030 --> 00:43:50,730 In feite, kan ik alle passen de inhoud van een pagina in. 966 00:43:50,730 --> 00:43:54,270 Maar wat nieuwe tag heb ik ingebracht, uiteraard? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 En het is niet de beste naam voor een tag, want het is niet een schakel in de zin 969 00:43:57,853 --> 00:44:00,780 dat we weten het, maar dit betekent een schakel in een ander bestand. 970 00:44:00,780 --> 00:44:02,890 Dit is een soort scherpe omvatten in C. 971 00:44:02,890 --> 00:44:06,280 >> Dit is de manier waarop in HTML hey browser zeggen, 972 00:44:06,280 --> 00:44:10,240 haal de inhoud van het bestand met de naam css2.css. 973 00:44:10,240 --> 00:44:12,880 De relatie, voor mij, is dat het een stylesheet. 974 00:44:12,880 --> 00:44:17,980 En inderdaad, daar één van de S in cascading style sheets middelen. 975 00:44:17,980 --> 00:44:20,350 Dit is een style sheet. 976 00:44:20,350 --> 00:44:23,120 Het is gewoon de tekst bestand met een hele hoop van het pand. 977 00:44:23,120 --> 00:44:25,940 Het is een hele hoop stijlen dat u wilt toepassen op een pagina. 978 00:44:25,940 --> 00:44:28,860 >> En dus dit is blijkbaar verwijzend naar een tweede bestand. 979 00:44:28,860 --> 00:44:32,970 En als ik open dat CSS2.css, merken dat alles wat ik heb gedaan 980 00:44:32,970 --> 00:44:35,900 is kopiëren en plakken alle van deze in dit bestand. 981 00:44:35,900 --> 00:44:38,220 En nu, zelfs als je nog nooit hebt gecodeerd voordat dit spul, 982 00:44:38,220 --> 00:44:40,700 maar eens kijken bij de spreekwoordelijke techniek hoed 983 00:44:40,700 --> 00:44:44,220 op, waarom is dit een beter ontwerp waarschijnlijk? 984 00:44:44,220 --> 00:44:48,910 Factoring uit de CSS-eigenschappen, ze in hun eigen bestand. 985 00:44:48,910 --> 00:44:51,330 Hoewel we dit opgelost probleem als vijf minuten geleden 986 00:44:51,330 --> 00:44:52,600 in de eerste versie. 987 00:44:52,600 --> 00:44:55,730 >> We hebben niet een verbetering van de pagina stilistisch, 988 00:44:55,730 --> 00:44:57,520 dit is gewoon beter ontwerp in zekere zin. 989 00:44:57,520 --> 00:44:58,990 Waarom denk je dat? 990 00:44:58,990 --> 00:45:01,510 Ja. 991 00:45:01,510 --> 00:45:02,260 Flexibeler hoe? 992 00:45:02,260 --> 00:45:05,040 993 00:45:05,040 --> 00:45:05,540 Ja. 994 00:45:05,540 --> 00:45:07,373 Dus als je wilt gaan rug en dingen veranderen, 995 00:45:07,373 --> 00:45:09,540 Nu, heb je één plek waar je kunt dingen veranderen. 996 00:45:09,540 --> 00:45:11,622 En inderdaad, iets zoals probleem stelde zeven, 997 00:45:11,622 --> 00:45:13,690 waar we zullen implementeren aandelenhandel website, 998 00:45:13,690 --> 00:45:15,523 dat gaat een hebben heleboel pagina's. 999 00:45:15,523 --> 00:45:17,620 En het zou echt vervelend als je besluit, hm, 1000 00:45:17,620 --> 00:45:21,630 Ik hou niet echt 24 pixels, ik wil dat het is 28 pixels of iets groter. 1001 00:45:21,630 --> 00:45:23,550 En dan moet je een doen globaal zoeken en vervangen 1002 00:45:23,550 --> 00:45:27,560 of alle bestanden van uw website te openen gewoon om daadwerkelijk te veranderen één waarde. 1003 00:45:27,560 --> 00:45:31,290 Door factoring uit deze stijlen in een centrale plaats, 1004 00:45:31,290 --> 00:45:34,720 U kunt nu een tekstbestand in CS50IDE in een programma, 1005 00:45:34,720 --> 00:45:36,479 veranderen, opslaan, en gedaan. 1006 00:45:36,479 --> 00:45:38,270 Je hebt gepropageerd die veranderingen overal. 1007 00:45:38,270 --> 00:45:42,450 En dat zou hetzelfde zijn in een punt h bestand ook. 1008 00:45:42,450 --> 00:45:46,697 Dus vragen dus ver op deze syntax? 1009 00:45:46,697 --> 00:45:48,530 Oké, dus we hebben alles gedaan wat het lijkt 1010 00:45:48,530 --> 00:45:51,170 behalve daadwerkelijk implementeren hyperlinks. 1011 00:45:51,170 --> 00:45:52,740 En dus laten we verder gaan en doen dit. 1012 00:45:52,740 --> 00:45:54,830 Laat me gaan en maak een nieuw bestand hier. 1013 00:45:54,830 --> 00:45:59,970 Ik ga noemen link.html, zet in de huidige code. 1014 00:45:59,970 --> 00:46:03,000 >> En ik ga open doen beugel soort doc html. 1015 00:46:03,000 --> 00:46:05,970 Even terzijde, dit ding aan de top, dit document type declaratie, 1016 00:46:05,970 --> 00:46:08,420 het is het enige dat is raar met het uitroepteken. 1017 00:46:08,420 --> 00:46:12,100 Je moet het gewoon doen er en het betekent dat we met behulp van HTML-versie 5. 1018 00:46:12,100 --> 00:46:14,460 Oudere versies van taal veel langer had 1019 00:46:14,460 --> 00:46:16,400 strings die je nodig had om daar te zetten. 1020 00:46:16,400 --> 00:46:18,620 Dus hier is een voorbeeld genoemd link. 1021 00:46:18,620 --> 00:46:20,950 >> Ik heb een lichaam van mijn webpagina hier. 1022 00:46:20,950 --> 00:46:29,770 En hier, a href gelijken laten we zeggen HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 en mijn favoriete website, zullen we zeggen. 1024 00:46:35,420 --> 00:46:38,550 Oké, dus een zeer onschuldig, gebruiksvriendelijke pagina. 1025 00:46:38,550 --> 00:46:42,950 Als ik nu ga in mijn directory Vermelding hier en open link.html, 1026 00:46:42,950 --> 00:46:44,780 we hebben hyper tekst. 1027 00:46:44,780 --> 00:46:47,410 >> En inderdaad, dit is waar H HTTP komt. 1028 00:46:47,410 --> 00:46:51,580 Hypertext Transfer Protocol is over het overbrengen van tekst 1029 00:46:51,580 --> 00:46:53,840 dat heeft hyperlinks naar andere middelen. 1030 00:46:53,840 --> 00:46:58,210 En inderdaad, hier is de bekende, als retro, blauwe link die wanneer geklikt, 1031 00:46:58,210 --> 00:47:02,607 zal daadwerkelijk leiden mij tot Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Nu, oh, dat is coming out soon. 1033 00:47:03,940 --> 00:47:08,970 Oké, dus nu, wat zijn sommige van de gevolgen van deze? 1034 00:47:08,970 --> 00:47:11,610 >> En eerlijk gezegd, de wereld begint om een ​​beetje meer vertrouwd te krijgen 1035 00:47:11,610 --> 00:47:15,090 en ook een beetje enger maar ook een beetje 1036 00:47:15,090 --> 00:47:17,840 zichzelf te verdedigen als je eenmaal begint om deze dingen te begrijpen. 1037 00:47:17,840 --> 00:47:21,610 Omdat de kansen zijn, sommigen van jullie, als je via je Gmail spam folder of zelfs 1038 00:47:21,610 --> 00:47:23,990 uw inbox, je hebt waarschijnlijk gekregen een soort van e-mail 1039 00:47:23,990 --> 00:47:26,980 dat vraagt ​​u om te veranderen van uw wachtwoord misschien of misschien controleren 1040 00:47:26,980 --> 00:47:28,910 uw PayPal referenties of zo. 1041 00:47:28,910 --> 00:47:34,510 >> En in feite zou je hebt ontvangen iets dat zegt als klik hier 1042 00:47:34,510 --> 00:47:42,260 om uw PayPal wachtwoord te resetten. 1043 00:47:42,260 --> 00:47:44,130 En nu, ziet, indien dit is niet Disney.com 1044 00:47:44,130 --> 00:47:51,600 maar net als badplace.com en herladen, er rekening mee dat de tekst hier 1045 00:47:51,600 --> 00:47:53,710 kon wat dan ook zeggen. 1046 00:47:53,710 --> 00:47:55,260 En in feite is dit alleen maar woorden. 1047 00:47:55,260 --> 00:48:04,610 Waarom heb ik niet echt super kwaadaardige en zeggen: http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Klik hier reset uw PayPal wachtwoord en nu herladen. 1049 00:48:14,090 --> 00:48:16,220 Dit ziet er legitiem, toch? 1050 00:48:16,220 --> 00:48:20,470 Ik bedoel, ik zou het niet op Een e-mail die gewoon zegt dit. 1051 00:48:20,470 --> 00:48:22,450 Maar let op de tweedeling hier. 1052 00:48:22,450 --> 00:48:26,880 Het zegt www.paypal.com, en in feite, wacht eens even, 1053 00:48:26,880 --> 00:48:29,210 we weten dat u wilt het is voor de veiligheid. 1054 00:48:29,210 --> 00:48:35,450 Dus nu, ga naar www.paypal.com HTTPS, maar als je nog nooit eerder gedaan, 1055 00:48:35,450 --> 00:48:38,182 krijg in de gewoonte van zweefde over weinig links hier. 1056 00:48:38,182 --> 00:48:39,890 En het is moeilijk om te zien op het scherm is er, 1057 00:48:39,890 --> 00:48:41,340 en het is hier niet zo eenvoudig. 1058 00:48:41,340 --> 00:48:43,615 Maar weg hier in de kleine hoekje 1059 00:48:43,615 --> 00:48:45,740 doet de browser eigenlijk je dat we gaan vertellen 1060 00:48:45,740 --> 00:48:48,850 om badplace.com plaats van Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Nu, waar gaan we heen met dit? 1062 00:48:51,620 --> 00:48:54,859 Alle voorbeelden die we hebben gedaan vandaag, we hebben hard gecodeerd en handmatig uitgetypt. 1063 00:48:54,859 --> 00:48:56,900 Het web is ongelooflijk oninteressant als je hard 1064 00:48:56,900 --> 00:48:59,844 code van uw webpagina's, zodat de inhoud is statisch en nooit veranderen. 1065 00:48:59,844 --> 00:49:01,760 Natuurlijk, al onze favoriete websites van vandaag, 1066 00:49:01,760 --> 00:49:04,470 of het nu Gmail of Twitter of Facebook of een aantal anderen 1067 00:49:04,470 --> 00:49:05,290 zijn dynamisch. 1068 00:49:05,290 --> 00:49:07,340 Ze veranderen in reactie op gebruikersinvoer 1069 00:49:07,340 --> 00:49:08,840 net als de zoekresultaten van Google. 1070 00:49:08,840 --> 00:49:12,415 >> En zo op woensdag, wat we doen is verlaten we HTML en CSS introductie 1071 00:49:12,415 --> 00:49:14,290 achter ons en we nemen vanzelfsprekend dat we nu 1072 00:49:14,290 --> 00:49:16,640 weet het en we introduceren een nieuwe programmeertaal 1073 00:49:16,640 --> 00:49:19,050 genaamd PHP, die graag C, zal ons 1074 00:49:19,050 --> 00:49:22,450 de kracht om daadwerkelijk te creëren programma's die zichzelf genereren output. 1075 00:49:22,450 --> 00:49:25,900 In dit geval zullen we met behulp van PHP om dynamisch web te genereren 1076 00:49:25,900 --> 00:49:27,340 pagina's met behulp van deze nieuwe taal. 1077 00:49:27,340 --> 00:49:28,989 Zodat er meer op dat op woensdag. 1078 00:49:28,989 --> 00:49:29,530 Zie je dan. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [Muziek] 1081 00:49:37,380 --> 00:52:38,864