1 00:00:00,000 --> 00:00:03,486 >> [Speel van musiek] 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 die begin van die week 7. 4 00:00:14,250 --> 00:00:15,060 So welkom terug. 5 00:00:15,060 --> 00:00:17,540 En jy kan onthou dat in die probleem stel vier 6 00:00:17,540 --> 00:00:21,510 daar was 'n bietjie van 'n aasdier jag vir 'n paar fantastiese pryse waardeur 7 00:00:21,510 --> 00:00:24,219 nadat jy die herstel van die foto's van personeel hier en in New Haven, 8 00:00:24,219 --> 00:00:27,468 jy is uitgedaag om soveel as moontlik van vind diegene rekenaar wetenskaplikes as wat jy kan. 9 00:00:27,468 --> 00:00:29,550 En ons het 'n hele n klomp van die voorleggings. 10 00:00:29,550 --> 00:00:31,930 Gedink ek wil 'n paar te deel met jou vandag hier. 11 00:00:31,930 --> 00:00:35,100 >> En ons sal al hierdie post aanlyn. 12 00:00:35,100 --> 00:00:39,310 Maar in die besonder, ek wou vestig u aandag aan- en een 13 00:00:39,310 --> 00:00:42,670 Sam was in 'n hele paar van hulle algemeen poseer soos hierdie. 14 00:00:42,670 --> 00:00:45,750 Maar dit blyk dat as van vanoggend, die wenner 15 00:00:45,750 --> 00:00:51,170 is 'n sekere iemand met die naam Ken met 24 van die personeel op kamera vasgelê 16 00:00:51,170 --> 00:00:54,600 of 'n paar meer wanneer jy in rekening verskeie personeel in die foto's. 17 00:00:54,600 --> 00:00:58,300 Op die foto is Ken volgende Maria in New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Nou, Ken, al is, blyk uit is bietjie van 'n hoek geval 19 00:01:01,300 --> 00:01:02,880 dit is nog nie voorheen gebeur. 20 00:01:02,880 --> 00:01:05,713 Dit blyk dat dit nie plaasgevind het nie om met my te fynskrif in die probleem sit 21 00:01:05,713 --> 00:01:09,710 stel vier wat sê dat personeel nie in aanmerking vir die fantastiese pryse 22 00:01:09,710 --> 00:01:13,130 want Ken is, natuurlik, een van die fotograwe op ons personeel. 23 00:01:13,130 --> 00:01:16,820 Nou, met wat gesê het, het hy oorspronklik geskryf vir my om te sê 24 00:01:16,820 --> 00:01:19,180 asseblief nie hierdie foto's post aanlyn. 25 00:01:19,180 --> 00:01:21,630 Ek dink 'n groot deel omdat die meeste van die foto's 26 00:01:21,630 --> 00:01:24,499 dat dit fotograaf het kyk 'n bietjie iets soos hierdie. 27 00:01:24,499 --> 00:01:25,040 En dies meer. 28 00:01:25,040 --> 00:01:28,990 >> Maar Ken wil my om jou gerus te stel dat hy 'n baie goeie fotograaf, 29 00:01:28,990 --> 00:01:33,190 Hy is 'n professionele, neem hy foto's wat nie vaag is, 30 00:01:33,190 --> 00:01:37,270 wat beter in fokus, en hy het 'n hele paar van ons eie personeel. 31 00:01:37,270 --> 00:01:40,370 Maar eerder as net erken Ken, wat ons gedink ons ​​wil doen 32 00:01:40,370 --> 00:01:43,390 is deur die lys van werklike studente wat ingedien word. 33 00:01:43,390 --> 00:01:48,640 En dit blyk dat Lance met 15 foto's as van vanoggend 34 00:01:48,640 --> 00:01:50,030 was ons wenner. 35 00:01:50,030 --> 00:01:55,730 >> En hier uitgebeeld is Lance met Colton, met Skaz met myself, en met Sam. 36 00:01:55,730 --> 00:02:00,230 Maar dan is dit blyk dat as van 11:46, so net 'n bietjie gelede 37 00:02:00,230 --> 00:02:04,380 Ek gaan terug na my e-pos en gevind dat ons het toe nog een meer voorlegging 38 00:02:04,380 --> 00:02:08,300 deur 'n student met die naam Bonnie wie email gesê net dit. 39 00:02:08,300 --> 00:02:10,800 Gaan nie lieg nie, ek is om dit te doen in die klas. 40 00:02:10,800 --> 00:02:17,620 En toe voortgegaan om net te heg 14 foto's, een skaam van Lance se 15. 41 00:02:17,620 --> 00:02:22,690 >> Maar in Bonnie se foto's, dit blyk uit was verskeie personeellede, Sam 42 00:02:22,690 --> 00:02:25,960 onder hulle, so wat ons gedink het ons sou doen, is erken beide van hierdie. 43 00:02:25,960 --> 00:02:29,240 So in Benewens om die Dropbox ruimte wat almal wat deelgeneem 44 00:02:29,240 --> 00:02:33,900 ontvang, sal ook hierdie twee afdelings ontvang 'n mooi gesorg middagete vir hulle 45 00:02:33,900 --> 00:02:36,100 en hul afdeling spanmaats hierdie komende week. 46 00:02:36,100 --> 00:02:38,970 En so sal jy hoor van ons, Lance en Bonnie, oor dat. 47 00:02:38,970 --> 00:02:40,002 So groot Geluk aan hulle. 48 00:02:40,002 --> 00:02:42,210 Nou, dié van julle wat wil soos middagete algemeen 49 00:02:42,210 --> 00:02:45,320 weet dat CS50 middagete in Cambridge en New Haven is hierdie Vrydag. 50 00:02:45,320 --> 00:02:48,510 Gaan na CS50 se webwerf slash RSVP. 51 00:02:48,510 --> 00:02:49,800 En nou 'n woord oor die seminare. 52 00:02:49,800 --> 00:02:50,730 Meer curricularly. 53 00:02:50,730 --> 00:02:52,490 So ons nader die punt van die semester 54 00:02:52,490 --> 00:02:55,200 waar jy moet begin dink oor die finale projekte. 55 00:02:55,200 --> 00:02:59,309 En in die feit, in net 'n bietjie, sal sogenaamde pre voorstelle wees as gevolg. 56 00:02:59,309 --> 00:03:01,850 So pre voorstelle is bedoel om redelik lae impak en regtig 57 00:03:01,850 --> 00:03:04,109 net 'n geleentheid vir jy 'n kort nota komponeer 58 00:03:04,109 --> 00:03:06,900 jou onderrig mede te openbaar hom of haar wat jy dink jy 59 00:03:06,900 --> 00:03:09,140 wil dalk om te doen vir jou finale projek. 60 00:03:09,140 --> 00:03:11,730 >> Nou, baie studente beland doen web gebaseer finale projekte. 61 00:03:11,730 --> 00:03:13,800 En natuurlik, ons is net nou het verlede week in hierdie 62 00:03:13,800 --> 00:03:15,890 en verder duik in web ontwikkeling. 63 00:03:15,890 --> 00:03:18,200 So moenie bekommerd wees as jy het absoluut geen idee hoe 64 00:03:18,200 --> 00:03:21,594 sal jy die idees te bou wat jy mag hê in jou gedagtes. 65 00:03:21,594 --> 00:03:24,510 Dit is regtig net 'n funksie dwing te kry wat jy dink en praat 66 00:03:24,510 --> 00:03:25,650 met jou TF daaroor. 67 00:03:25,650 --> 00:03:28,810 Maar om jou te help met wat, en finale projekte uiteindelik 68 00:03:28,810 --> 00:03:31,750 weet dat CS50 het 'n tradisie van die aanbied van seminare. 69 00:03:31,750 --> 00:03:36,084 >> En dit is opsioneel, hande op, of lesings gebaseer op geleenthede 70 00:03:36,084 --> 00:03:39,000 om meer oor onderwerpe wat leer 'n bietjie aanvullend tot die kursus se 71 00:03:39,000 --> 00:03:43,310 leerplan, maar tog wonderlike materiaal te ry finale projekte. 72 00:03:43,310 --> 00:03:46,840 En so is dit die lys wat CS50 personeel hier in New Haven 73 00:03:46,840 --> 00:03:48,600 het gekom met vir vanjaar oor IOS 74 00:03:48,600 --> 00:03:50,730 programmering, Android programmering, die spel ontwikkeling, 75 00:03:50,730 --> 00:03:54,480 en trosse van meer gereedskap en tale en tegnieke. 76 00:03:54,480 --> 00:03:56,780 >> So 'n oog hou op die webwerf die CS50 se. 77 00:03:56,780 --> 00:04:00,110 En in die tussentyd, as jy wil registreer jou belangstelling in enige van hierdie, 78 00:04:00,110 --> 00:04:02,510 gaan na CS50 se slash register. 79 00:04:02,510 --> 00:04:05,770 En ons sal dit dan opvolg as die dae en vlug tye en plekke 80 00:04:05,770 --> 00:04:09,090 en everything-- meeste alles sal gestroom en ook beskikbaar op aanvraag 81 00:04:09,090 --> 00:04:11,750 Na As jy nie kan eintlik maak dit. 82 00:04:11,750 --> 00:04:15,800 So sonder verdere uitstel het, ons opgehou laaste tyd saam met AOO. 83 00:04:15,800 --> 00:04:19,610 >> En dit was soos die boodskap wat binnekant van die virtuele koevert, onthou, 84 00:04:19,610 --> 00:04:23,960 dat ons oorgegaan het uit die router om router router tussen 'n webblaaier en 'n web 85 00:04:23,960 --> 00:04:24,487 bediener. 86 00:04:24,487 --> 00:04:26,695 En dat die boodskap het 'n bietjie iets soos hierdie. 87 00:04:26,695 --> 00:04:29,700 Dit was die boodskap wat meer arcane was eintlik binnekant van 'n koevert 88 00:04:29,700 --> 00:04:34,440 geskryf op 'n stuk papier waarvan eerste reël sê letterlik, kry slash. 89 00:04:34,440 --> 00:04:37,830 >> En net as 'n gesonde verstand tjek, wat het slash dui? 90 00:04:37,830 --> 00:04:40,455 Wat beteken slash bedoel wanneer versoek om 'n webwerf? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Jy vra dit al die tyd. 93 00:04:44,250 --> 00:04:47,333 Die meeste enige tyd wat jy 'n webtuiste besoek, moet jy nie eintlik tik in 'n lêer naam. 94 00:04:47,333 --> 00:04:50,960 Jy het waarskynlik net na Facebook.com, betree, gmail.com, of die wil. 95 00:04:50,960 --> 00:04:52,260 En wat beteken slash verteenwoordig? 96 00:04:52,260 --> 00:04:53,506 Wat lêer? 97 00:04:53,506 --> 00:04:54,630 Of watter bladsy, spesifiek? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Die indeks, ja. 100 00:05:00,720 --> 00:05:01,810 So het die standaard bladsy. 101 00:05:01,810 --> 00:05:04,810 So, as jy nie 'n lêer spesifiseer noem as ons begin om te sien, 102 00:05:04,810 --> 00:05:07,750 jy is eintlik net versoek gee my die standaard bladsy van Facebook 103 00:05:07,750 --> 00:05:10,800 of gee my inbox of gee vir my die standaard bladsy van die nuus 104 00:05:10,800 --> 00:05:12,510 op die webwerf CNN se of die wil. 105 00:05:12,510 --> 00:05:15,220 En 'n bediener reageer dan dat die boodskap met iets 106 00:05:15,220 --> 00:05:18,420 soos hierdie, sê ja, ek spreek HTTP weergawe 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, wat 'n status kode wat ons mense selde 108 00:05:21,130 --> 00:05:22,790 ooit sien nie, want dit is goed. 109 00:05:22,790 --> 00:05:26,640 Want dit beteken OK, die versoek ontvang en behoorlik hanteer word. 110 00:05:26,640 --> 00:05:28,960 En die tipe inhoud blykbaar in die reaksie 111 00:05:28,960 --> 00:05:31,170 is dikwels, maar nie altyd nie, teks. 112 00:05:31,170 --> 00:05:32,580 En spesifiek, HTML. 113 00:05:32,580 --> 00:05:34,760 En dit is eintlik waar ons kyk na vandag. 114 00:05:34,760 --> 00:05:37,140 >> So in werklikheid, ek gaan om te gaan voor en maak 'n leser. 115 00:05:37,140 --> 00:05:40,410 Ek gaan Chrome gebruik, kan jy gebruik mees enige leser in die komende weke. 116 00:05:40,410 --> 00:05:42,410 Ons beveel die algemeen Chrome want dit is veral 117 00:05:42,410 --> 00:05:43,750 goed vir sagteware-ontwikkelaars. 118 00:05:43,750 --> 00:05:46,070 Dit het 'n baie gebou in gereedskap wat dit makliker maak 119 00:05:46,070 --> 00:05:49,800 om nie net HTML en CSS ontwikkel, dinge wat ons sal begin praat oor vandag, 120 00:05:49,800 --> 00:05:51,530 maar ook ander tale. 121 00:05:51,530 --> 00:05:55,530 >> En ek gaan om voort te gaan en te gaan aan- Ek gaan om te beheer of regs kliek 122 00:05:55,530 --> 00:05:57,210 Klik op enige plek op 'n webblad. 123 00:05:57,210 --> 00:05:59,070 En ek gaan om te gaan om te inspekteer element. 124 00:05:59,070 --> 00:06:03,850 En ek gaan aanpas my skerm net 'n bietjie hier. 125 00:06:03,850 --> 00:06:05,790 Laat my dit te skuif na die onderkant. 126 00:06:05,790 --> 00:06:08,140 So dit is wat genoem Chrome se inspekteur. 127 00:06:08,140 --> 00:06:11,010 So dit is soos 'n debugging instrument gebou in Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Almal van julle hierdie reeds as jy die gebruik van Chrome gewees het. 129 00:06:13,520 --> 00:06:17,169 En dit kan jy sien wat aangaan op onder die kap van 'n paar web bladsy. 130 00:06:17,169 --> 00:06:19,210 So laat eintlik 'n kyk na dit soos volg. 131 00:06:19,210 --> 00:06:21,251 Dit het meer funksies manier en ons omgee vandag. 132 00:06:21,251 --> 00:06:22,760 Maar daar is hierdie oortjies hier. 133 00:06:22,760 --> 00:06:25,890 Elemente, netwerk, bronne, tydlyn, en 'n paar ander dinge. 134 00:06:25,890 --> 00:06:27,800 Ek gaan om te klik op Netwerk vir 'n oomblik. 135 00:06:27,800 --> 00:06:30,500 >> En dit is 'n bietjie oorweldigend met die eerste oogopslag hier. 136 00:06:30,500 --> 00:06:34,190 Maar wat ek gaan doen, is laat my vereenvoudig dit 'n bietjie. 137 00:06:34,190 --> 00:06:37,560 Ek gaan om te draai op die opname lig, sodat dit is rooi. 138 00:06:37,560 --> 00:06:39,140 En ek gaan om te sê bewaar log. 139 00:06:39,140 --> 00:06:41,015 En dit is net 'n bietjie ding wat ek uitgepluis 140 00:06:41,015 --> 00:06:44,120 met verloop van tyd wat gaan om te red alles wat gebeur in die leser. 141 00:06:44,120 --> 00:06:50,030 En nou is ek gaan om te gaan om http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Eintlik, laat ons doen www vir 'n goeie mate, streep. 143 00:06:52,690 --> 00:06:53,643 Betree. 144 00:06:53,643 --> 00:06:56,180 So 'n URL wat baie van jy dalk besoek. 145 00:06:56,180 --> 00:06:58,830 En nou Facebook se web page kom aan die bokant. 146 00:06:58,830 --> 00:07:02,350 En dan 'n hele klomp van die dinge gevlieg deur aan die onderkant. 147 00:07:02,350 --> 00:07:04,830 En in die feit, dit blyk dat wanneer jy Facebook.com besoek, 148 00:07:04,830 --> 00:07:09,320 jy nie net die maak van 'n HTTP-versoek, dit blyk dat gaan Facebook.com 149 00:07:09,320 --> 00:07:14,320 stuur 41 van die koeverte, elk met sy eie get versoek 150 00:07:14,320 --> 00:07:18,360 soos aangedui, hoewel agter die skerm hier, aan die onderkant van die skerm, 151 00:07:18,360 --> 00:07:24,040 dit dui daarop dat, inderdaad, my leser gemaak 41 die versoeke. 152 00:07:24,040 --> 00:07:29,689 >> En in totaal, dit oorgedra 861 kilogrepe en dit het vir een of ander rede 153 00:07:29,689 --> 00:07:31,730 soveel as agt sekondes om al van daardie laai. 154 00:07:31,730 --> 00:07:33,790 So dit is eintlik 'n bietjie vreemd dat Facebook se webwerf sal neem dat 155 00:07:33,790 --> 00:07:35,600 lank, maar dit is so in hierdie geval. 156 00:07:35,600 --> 00:07:39,520 Nou, al hierdie ek het nie regtig omgee oor, behalwe vir die boonste versoek. 157 00:07:39,520 --> 00:07:46,440 So laat ons gaan om hierdie een reg hier en laat my uit zoom vir net 'n oomblik. 158 00:07:46,440 --> 00:07:47,754 >> En laat my zoom in op hierdie. 159 00:07:47,754 --> 00:07:50,670 So, wat ek gedoen het by verlaat, selfs al daar is 'n baie gaan op hier 160 00:07:50,670 --> 00:07:53,360 Ek het uitgelig word Facebook.com en dan 161 00:07:53,360 --> 00:07:56,540 sien dat ek blaai af, blaai af, blaai af, 162 00:07:56,540 --> 00:07:58,330 om kop te vra. 163 00:07:58,330 --> 00:08:01,720 En jy sal sien dat Chrome toon my wese die innerlike inhoud 164 00:08:01,720 --> 00:08:02,810 van die versoek wat ek gemaak het. 165 00:08:02,810 --> 00:08:06,130 Dit is nie opmaak in baie dieselfde manier, maar kennis van daar melding van te kry, 166 00:08:06,130 --> 00:08:09,481 sien daar is melding gemaak van die leër, Facebook.com, die pad, of streep 167 00:08:09,481 --> 00:08:10,730 wat is die lêer Ek versoek. 168 00:08:10,730 --> 00:08:12,930 >> En dan as ek blaai back-up, sal ons eintlik 169 00:08:12,930 --> 00:08:17,270 sien dat wat Facebook teruggekeer vir my is al hierdie headers. 170 00:08:17,270 --> 00:08:21,040 So binnekant van die virtuele koevert inderdaad is 'n baie belangrike waarde pare. 171 00:08:21,040 --> 00:08:23,130 'N woord, 'n dubbelpunt, en dan 'n waarde. 172 00:08:23,130 --> 00:08:25,050 'N woord, 'n dubbelpunt, en 'n waarde. 173 00:08:25,050 --> 00:08:26,160 Dit is genoem kop. 174 00:08:26,160 --> 00:08:31,860 En daar is hier manier meer detail as ons eintlik omgee nou. 175 00:08:31,860 --> 00:08:33,750 >> Maar dit is die tweede om laaste een af ​​daar, 176 00:08:33,750 --> 00:08:38,809 sien dat bediener Facebook.com se inderdaad hier gesê kom 'n paar teks HTML. 177 00:08:38,809 --> 00:08:41,409 So al hierdie dinge is om te sê dat wanneer jy versoek om 'n web 178 00:08:41,409 --> 00:08:44,300 bladsy uit 'n leser 'n bediener, die bediener reageer 179 00:08:44,300 --> 00:08:47,630 met 'n koevert van sy eie binnekant van wat teks. 180 00:08:47,630 --> 00:08:49,020 Met ander woorde, HTML. 181 00:08:49,020 --> 00:08:50,590 HyperText Markup Language. 182 00:08:50,590 --> 00:08:53,200 Wat is 'n ander taal wat ons vandag voer 183 00:08:53,200 --> 00:08:57,740 dat mense of rekenaars genereer om webblaaie te implementeer. 184 00:08:57,740 --> 00:08:59,580 >> Spesifiek, laat ons kyk na hierdie. 185 00:08:59,580 --> 00:09:03,277 Ek gaan nou terug te gaan webwerf Facebook se. 186 00:09:03,277 --> 00:09:05,360 En ek gaan net beheer kliek of regs kliek 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 selfs as jy nie gebruik Chrome, IE kan dit doen, Firefox kan dit doen, 189 00:09:10,550 --> 00:09:14,060 Safari kan dit doen, selfs al is die spyskaart opsies kan kyk 'n bietjie anders. 190 00:09:14,060 --> 00:09:18,990 En dit is die HTML wat Mark en maatskappy op Facebook geskryf het. 191 00:09:18,990 --> 00:09:24,640 >> En om gesamentlik, hierdie taal hier implemente die blou en wit bladsy 192 00:09:24,640 --> 00:09:26,370 wat ons gesien het 'n oomblik gelede. 193 00:09:26,370 --> 00:09:28,030 Nou, dit is 'n bietjie oorweldigend. 194 00:09:28,030 --> 00:09:31,400 Maar as ons kyk na links bo, ons is gaan om te begin om 'n paar patrone te sien. 195 00:09:31,400 --> 00:09:34,140 Dit lyk asof daar is 'n baie van hierdie oop hoek bracket 196 00:09:34,140 --> 00:09:35,970 en dan is daar hierdie navraag HTML. 197 00:09:35,970 --> 00:09:38,330 Hier is nog 'n oop hoek bracket en kop. 198 00:09:38,330 --> 00:09:41,560 >> Hier is, as ons scroll down en af ​​en af, ek is 199 00:09:41,560 --> 00:09:43,820 gaan om voort te gaan en probeer om te soek vir iets. 200 00:09:43,820 --> 00:09:48,510 Daar manier oor op die regte hier is oop bracket liggaam. 201 00:09:48,510 --> 00:09:50,800 En onthou van verlede keer dat ons voorgestelde 202 00:09:50,800 --> 00:09:53,364 dat die eenvoudigste webblad dat 'n mens kan skryf 203 00:09:53,364 --> 00:09:55,030 kan kyk 'n bietjie iets soos hierdie. 204 00:09:55,030 --> 00:09:58,430 Oop HTML tag, oop kop tag, oop titel tag, 205 00:09:58,430 --> 00:10:03,230 dan geslote titel, geslote hoof, oop liggaam tag, teks, gesluit liggaam 206 00:10:03,230 --> 00:10:04,720 geslote HTML. 207 00:10:04,720 --> 00:10:06,290 >> Maar 'n pouse hier vir net 'n oomblik. 208 00:10:06,290 --> 00:10:09,030 Hierdie kode, selfs as jy het dit nooit geskryf voordat 209 00:10:09,030 --> 00:10:11,864 maar nog steeds nie heeltemal verstaan wat gaan aan, lyk redelik goed. 210 00:10:11,864 --> 00:10:12,821 Reg, dit is baie skoon. 211 00:10:12,821 --> 00:10:14,120 Dit is baie stilisties nice. 212 00:10:14,120 --> 00:10:16,190 Baie van inkeping en wit ruimte. 213 00:10:16,190 --> 00:10:18,020 Facebook se is nie. 214 00:10:18,020 --> 00:10:23,190 So hoekom is Facebook soveel erger as wat ek by die skryf van HTML? 215 00:10:23,190 --> 00:10:24,310 Blykbaar. 216 00:10:24,310 --> 00:10:26,899 >> Reg, dit is soos een uit vyf vir styl. 217 00:10:26,899 --> 00:10:29,315 Daar is 'n oortuigende rede vir hulle om hierdie hoeke te sny. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Alle reg, sodat hulle nie wil maak dit makliker vir jou om dit te lees. 220 00:10:33,860 --> 00:10:36,940 So in 'n sekere sin, hulle is obfuscating dit soort van skommeling dit 221 00:10:36,940 --> 00:10:40,260 ten minste so esteties dat dit moeiliker vir Myspace 222 00:10:40,260 --> 00:10:42,705 om te gaan en rip off hul tuisblad en die HTML vir dit. 223 00:10:42,705 --> 00:10:45,080 Dit blyk dat met programme al, insluitend Chrome, 224 00:10:45,080 --> 00:10:47,020 ons kan hierdie super maklik skoon te maak. 225 00:10:47,020 --> 00:10:49,420 So dit is nie heeltemal wat as die rede. 226 00:10:49,420 --> 00:10:51,290 Wat anders kan die oorsaak wees. 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, wit spasie koste data. 230 00:10:55,890 --> 00:10:56,598 Wat bedoel jy? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Ja, presies. 233 00:11:02,979 --> 00:11:06,020 As jy die sleutel getref Tab 'n baie of die space bar, oorweeg die implikasies. 234 00:11:06,020 --> 00:11:10,060 So elke sleutel op u sleutelbord is 'n [Onhoorbaar] verteenwoordig as een greep. 235 00:11:10,060 --> 00:11:14,560 >> So dink dat Mark of enige van die devs hierdie dae treffers die spasiebalk net een keer 236 00:11:14,560 --> 00:11:17,899 in hierdie HTML bladsy wat verteenwoordig Facebook se tuisblad. 237 00:11:17,899 --> 00:11:19,690 En Facebook het 'n baie gebruikers van hierdie dae. 238 00:11:19,690 --> 00:11:24,030 So dink dat Facebook se tuisblad besoek deur 'n miljard mense vandag. 239 00:11:24,030 --> 00:11:27,020 En iemand by Facebook het druk die space bar net een keer. 240 00:11:27,020 --> 00:11:29,890 >> So een addisionele byte, 'n miljard versoeke, 241 00:11:29,890 --> 00:11:32,790 hoeveel te meer data is Facebook oordrag oor die internet 242 00:11:32,790 --> 00:11:37,160 omdat iemand druk op die spasiebalk op sy of haar sleutelbord? 243 00:11:37,160 --> 00:11:41,660 'N miljard grepe of een GB data is van Facebook bedieners gestuur 244 00:11:41,660 --> 00:11:43,626 om mense regoor die wêreld vir geen goeie rede. 245 00:11:43,626 --> 00:11:44,750 Nou, dit is net 'n ruimte. 246 00:11:44,750 --> 00:11:48,866 >> Stel jou voor dat ons dit eintlik skoon ding en ingekeep dit en bygevoeg 247 00:11:48,866 --> 00:11:50,990 'n baie wit ruimte en blad karakters en ruimtes, 248 00:11:50,990 --> 00:11:53,656 beland jy besteding GB, Indien nie terra grepe meer van die ruimte. 249 00:11:53,656 --> 00:11:56,640 En so super algemeen in die werklike wêreld van die web-ontwikkeling 250 00:11:56,640 --> 00:11:58,950 is om jou kode verskerp. 251 00:11:58,950 --> 00:12:01,280 En ons sal uiteindelik sien hoe jy dit kan doen. 252 00:12:01,280 --> 00:12:04,630 >> Maar vandag, sal ons begin skryf kode dit is eintlik gelees deur ons mense. 253 00:12:04,630 --> 00:12:10,120 Dit blyk uit, al is, as jy gaan terug hierdie instrument in Chrome Inspekteer Element, 254 00:12:10,120 --> 00:12:12,030 Voorheen was ons op die blad Network. 255 00:12:12,030 --> 00:12:15,430 Dit blyk dat as jy gaan na die elemente blad wat jy eintlik sien 256 00:12:15,430 --> 00:12:19,230 is Chrome se mooi gedrukte weergawe van dieselfde HTML. 257 00:12:19,230 --> 00:12:20,640 Dus het ons deobfuscated dit. 258 00:12:20,640 --> 00:12:22,472 So dit is nie opgewasse vir 'n rekenaar. 259 00:12:22,472 --> 00:12:24,430 En nou kan jy eintlik klik om en begin 260 00:12:24,430 --> 00:12:27,630 om die hiërargie wat 'n webblad te sien. 261 00:12:27,630 --> 00:12:28,780 So laat eintlik dit te doen. 262 00:12:28,780 --> 00:12:32,120 Ek gaan om voort te gaan en maak op my Mac 'n program genaamd teks wysig. 263 00:12:32,120 --> 00:12:35,490 En onthou dat dit is net 'n super eenvoudige teks program. 264 00:12:35,490 --> 00:12:37,490 Windows het notepad.exe. 265 00:12:37,490 --> 00:12:39,820 En ek gaan woordeliks tik die volgende. 266 00:12:39,820 --> 00:12:44,650 Doc tipe HTML, oop bracket HTML, gesluit bracket HTML, 267 00:12:44,650 --> 00:12:49,000 ons het die hoof van die bladsy hier, die einde van die hoof van die bladsy hier, 268 00:12:49,000 --> 00:12:52,310 'n titel sal wees soos, hello wêreld. 269 00:12:52,310 --> 00:12:56,660 >> En dan af hier, moet ons die liggaam van die webblad. 270 00:12:56,660 --> 00:12:58,050 Geslote liggaam. 271 00:12:58,050 --> 00:13:00,700 En dan hier, hello wêreld. 272 00:13:00,700 --> 00:13:01,270 Alles reg. 273 00:13:01,270 --> 00:13:03,350 So het ons 'n super vinnige webblad geskryf. 274 00:13:03,350 --> 00:13:06,675 Ek gaan om dit te red as hello.html op my lessenaar. 275 00:13:06,675 --> 00:13:09,050 My Mac se gaan om te kla, dink dat, wag 'n minuut, 276 00:13:09,050 --> 00:13:11,091 dit is 'n teks lêer, doen jy wil om dit te noem txt? 277 00:13:11,091 --> 00:13:13,300 Maar nee, ek wil dot HTML gebruik. 278 00:13:13,300 --> 00:13:16,140 >> En dan wat is lekker as ek net dubbel kliek op hierdie lêer, 279 00:13:16,140 --> 00:13:18,600 hello.html, hier is my webblad. 280 00:13:18,600 --> 00:13:22,564 Ongelukkig is ek die enigste persoon in die wêreld 281 00:13:22,564 --> 00:13:23,980 wat hierdie bladsy kan besoek nou. 282 00:13:23,980 --> 00:13:26,734 Omdat waar kom dit blykbaar woon? 283 00:13:26,734 --> 00:13:27,650 Dit is op my Mac, reg? 284 00:13:27,650 --> 00:13:28,470 Wat is nutteloos. 285 00:13:28,470 --> 00:13:30,390 Soos niemand in hierdie kamer laat staan ​​op die internet 286 00:13:30,390 --> 00:13:31,598 eintlik kan besoek die bladsy. 287 00:13:31,598 --> 00:13:33,820 So vandag, moet ons stel 'n ander element. 288 00:13:33,820 --> 00:13:36,720 >> En om dit te doen, gaan ek gaan voort en oop wolk 9. 289 00:13:36,720 --> 00:13:40,090 So wolk 9 is natuurlik 'n wolk-gebaseerde service-- CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Dit het al ons werkruimtes iewers op die internet hardloop. 291 00:13:44,890 --> 00:13:48,330 En dit beteken dat almal van ons lêers is reeds in die openbaar toeganklik. 292 00:13:48,330 --> 00:13:49,830 So laat ons gaan voort en doen dit. 293 00:13:49,830 --> 00:13:53,670 Ek gaan om voort te gaan en skep 'n nuwe lêer NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Ek gaan om dit te red as voorheen as hello.html en klik red. 295 00:13:58,819 --> 00:14:01,860 En nou net om tyd te bespaar, gaan ek om voort te gaan en 'n afskrif plak die kode 296 00:14:01,860 --> 00:14:03,470 eerder as tik dit. 297 00:14:03,470 --> 00:14:04,550 En stoor dit. 298 00:14:04,550 --> 00:14:07,550 En so het ek nou ' lêer genaamd hello.html. 299 00:14:07,550 --> 00:14:09,710 Maar hoe doen ek eintlik maak dit as 'n webblad? 300 00:14:09,710 --> 00:14:14,120 Wel, dit blyk uit die gebou in te CS50 IDE is nie net 'n samesteller soos klang 301 00:14:14,120 --> 00:14:16,670 en 'n debugger soos GDB en trosse van ander programme, 302 00:14:16,670 --> 00:14:21,140 daar is eintlik 'n volwaardig web server hardloop binne CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Almal van julle, dit wil sê, jou eie web server. 304 00:14:23,900 --> 00:14:26,850 En 'n web bediener is net 'n stuk sagteware waarvan die doel in die lewe 305 00:14:26,850 --> 00:14:28,220 is om te dien op webblaaie. 306 00:14:28,220 --> 00:14:32,490 Om vir versoeke van blaaiers luister en reageer met min virtuele koeverte 307 00:14:32,490 --> 00:14:35,290 binnekant van wat is die inhoud wat ek geskryf het. 308 00:14:35,290 --> 00:14:38,372 So hierdie web bediener is eintlik vry en open source. 309 00:14:38,372 --> 00:14:40,830 Waar open source beteken net sagteware wat iemand anders 310 00:14:40,830 --> 00:14:43,480 geskryf dat ons almal kan eintlik sien en af ​​te laai en selfs 311 00:14:43,480 --> 00:14:44,780 verander die bronkode. 312 00:14:44,780 --> 00:14:46,150 En dit genoem Apache. 313 00:14:46,150 --> 00:14:51,450 >> En ons het dit 'n bietjie makliker te maak gebruik in CS50IDE deur dit Apache 50. 314 00:14:51,450 --> 00:14:53,780 Sodat dit kan eintlik die volgende verstaan. 315 00:14:53,780 --> 00:14:56,560 Ek gaan Apache 50 begin sê. 316 00:14:56,560 --> 00:14:58,910 En dan is ek net gaan dot sê. 317 00:14:58,910 --> 00:15:01,080 En ons sien 'n paar ietwat arcane boodskap wat sê 318 00:15:01,080 --> 00:15:04,640 opstel Apache se dokument [? groep?] om die huis, ubuntu, wat dit ook al is, 319 00:15:04,640 --> 00:15:05,770 streep werkspasie. 320 00:15:05,770 --> 00:15:08,280 Begin web bediener Apache 2 suksesvol. 321 00:15:08,280 --> 00:15:11,330 >> So lang storie kort, ek het nou net 'n knoppie gedruk 322 00:15:11,330 --> 00:15:18,000 en draai op 'n web bediener wie is nou luister op die internet op TCP-poort 323 00:15:18,000 --> 00:15:20,587 80 op 'n spesifieke adres. 324 00:15:20,587 --> 00:15:22,420 En dit sê hier, en sal hierdie Based verander 325 00:15:22,420 --> 00:15:26,550 op jou gebruikersnaam en ander faktore, maar kyk nou as ek dit op, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard en so en so, sien dat al hierdie tyd 327 00:15:30,211 --> 00:15:31,960 vir die afgelope paar weke, kan jy 328 00:15:31,960 --> 00:15:35,200 opgemerk dat jou eie gebruikersnaam ingebed in die boonste regterkantste 329 00:15:35,200 --> 00:15:37,130 hoek van CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> En dat dit eintlik is al Tyd Die adres waar jy kan 331 00:15:41,050 --> 00:15:43,574 besoek van al jou lêers via die web. 332 00:15:43,574 --> 00:15:45,990 Tot nou toe het dit nie saak gemaak, want in C, jy in die algemeen 333 00:15:45,990 --> 00:15:48,073 wil dinge loop in 'n terminale, wat nie op die web. 334 00:15:48,073 --> 00:15:50,800 Maar vandag, het ons begin skryf web-gebaseerde kode 335 00:15:50,800 --> 00:15:53,350 wat ons wil toeganklike openbare URL's. 336 00:15:53,350 --> 00:15:56,100 So, wat ek gaan doen is kliek op hierdie URL. 337 00:15:56,100 --> 00:16:00,880 >> En agterkom dat ek sien 'n redelik lelike indeks, 'n gids lys, 338 00:16:00,880 --> 00:16:04,090 maar wat lêer spring uit by u waarskynlik? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Dit is omdat ek gered die lêer in my werkplek. 341 00:16:07,870 --> 00:16:12,310 En wat ek vertel het Apache die webbediener is kyk in Dawid se werkplek gids. 342 00:16:12,310 --> 00:16:15,300 En laat iemand in die wêreld te sien die lêers. 343 00:16:15,300 --> 00:16:19,050 >> En inderdaad, as ek nou klik op hello.html, 344 00:16:19,050 --> 00:16:22,180 Ek sien in hierdie blad presies die lêer. 345 00:16:22,180 --> 00:16:26,430 Nou sien, wolk 9 se toedoen iets 'n bietjie nuttig vir ons. 346 00:16:26,430 --> 00:16:29,480 Binne CS50 IDE, sien daar is skielik 'n adres bar. 347 00:16:29,480 --> 00:16:33,690 Dit is omdat selfs al is ons gebruik van Chrome te CS50IDE besoek, 348 00:16:33,690 --> 00:16:37,940 binnekant van CS50IDE is sy eie weergawe van 'n webblaaier nou. 349 00:16:37,940 --> 00:16:40,820 En so eerder as dinge bemoeilik as sodanig, 350 00:16:40,820 --> 00:16:42,955 Ek gaan om voort te gaan en net kopieer die URL. 351 00:16:42,955 --> 00:16:45,330 Ek gaan voort en gaan net my eie Chrome venster oop te maak. 352 00:16:45,330 --> 00:16:47,800 So daar is geen magic hier, geen CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Ek gaan net letterlik plak my J Harvard URL en druk Enter. 354 00:16:51,800 --> 00:16:54,750 En voila, nou is ek, en in teorie, almal 355 00:16:54,750 --> 00:16:57,700 op die internet, as ek het gekonfigureer regte toepaslik, 356 00:16:57,700 --> 00:16:58,720 Hierdie lêer kan besoek. 357 00:16:58,720 --> 00:17:03,230 En so nou, as ek sê hello.html, voila, daar 358 00:17:03,230 --> 00:17:06,366 is my ongelooflik underwhelming webblad. 359 00:17:06,366 --> 00:17:07,740 So kom ons doen 'n vinnige gesonde verstand tjek. 360 00:17:07,740 --> 00:17:09,710 Want al wat is konseptuele ingestel. 361 00:17:09,710 --> 00:17:13,180 En ons het eintlik nie regtig jy geleer hoe om te skryf HTML per se. 362 00:17:13,180 --> 00:17:16,084 Enige vrae wat tot dusver oor wat nou net gebeur? 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 Maak CS50 besit hierdie web bladsye? 367 00:17:25,800 --> 00:17:26,460 In watter sin? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Goeie vraag. 370 00:17:29,530 --> 00:17:32,429 So CS50 se besit CS50.io. 371 00:17:32,429 --> 00:17:33,970 Ons het inderdaad gekoop wat domein naam. 372 00:17:33,970 --> 00:17:37,240 En uit die aard van julle ouens meld by CS50IDE, 373 00:17:37,240 --> 00:17:39,270 julle almal te kry wat 'n subdomein genoem. 374 00:17:39,270 --> 00:17:46,840 >> So IDE50-Malan, of IDE50-Rob.CS50.io, dit is jou unieke adres binne 375 00:17:46,840 --> 00:17:47,730 ons domein naam. 376 00:17:47,730 --> 00:17:50,850 So vir die doeleindes van die kursus, jy jou eie unieke adres. 377 00:17:50,850 --> 00:17:55,150 Maar ons het dinge vereenvoudig deur die koop van die boonste vlak domein CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O en dan almal anders is binnekant van dat, om so te praat. 379 00:17:58,050 --> 00:17:59,890 En ons sal terug kom in 'n paar weke waarskynlik 380 00:17:59,890 --> 00:18:01,930 veral op finale projek tyd, toe sommige van julle 381 00:18:01,930 --> 00:18:03,596 dalk wil om jou eie domein name kry. 382 00:18:03,596 --> 00:18:06,270 Dit is eintlik relatief eenvoudig. 383 00:18:06,270 --> 00:18:06,770 Alles reg. 384 00:18:06,770 --> 00:18:07,880 So laat dit nou te doen. 385 00:18:07,880 --> 00:18:11,910 Ek gaan om terug te gaan na CS50IDE, waar my lêer nou, 386 00:18:11,910 --> 00:18:14,710 hello.html, is nie al wat interessant. 387 00:18:14,710 --> 00:18:17,130 Ek wil graag iets doen 'n bietjie mooier as dit. 388 00:18:17,130 --> 00:18:19,440 So ek gaan iets soos hierdie te doen nie. 389 00:18:19,440 --> 00:18:21,510 Laat my oop paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 So, dit is 'n lêer wat ek geskryf het in advance. 391 00:18:23,560 --> 00:18:26,480 Op die top van dit, soos altyd, ons het kommentaar. 392 00:18:26,480 --> 00:18:28,730 Maar in HTML, kommentaar kyk 'n bietjie anders. 393 00:18:28,730 --> 00:18:33,270 On line drie en lyn 14, het jy sien die sintaksis vir begin 'n opmerking 394 00:18:33,270 --> 00:18:34,020 en eindig 'n kommentaar. 395 00:18:34,020 --> 00:18:36,820 >> Maar nie een van die dinge wat in tussen sake funksioneel. 396 00:18:36,820 --> 00:18:40,250 Dis net 'n nota om 'n menslike wat gaan hier aan. 397 00:18:40,250 --> 00:18:43,040 En net as 'n vinnige gesonde verstand kyk, as ek rol af, 398 00:18:43,040 --> 00:18:46,820 Wat is die voor die hand liggend nuwe tag wat ons het voorgestel? 399 00:18:46,820 --> 00:18:52,130 Die tags dusver het ons gesien is oop bracket HTML, kop, titel, en liggaam. 400 00:18:52,130 --> 00:18:54,400 Maar wat is nou duidelik nuut? 401 00:18:54,400 --> 00:18:55,200 >> Ja, so p. 402 00:18:55,200 --> 00:18:57,320 Die p tag of paragraaf tag. 403 00:18:57,320 --> 00:19:01,182 En dan het ek net geleen verstek Latynse teks my paragrawe uitmaak. 404 00:19:01,182 --> 00:19:03,390 Want wat ek wil demonstreer hoe jy dalk 405 00:19:03,390 --> 00:19:05,859 verteenwoordig paragrawe van die teks in HTML. 406 00:19:05,859 --> 00:19:08,400 En so wat besig is om te gebeur hier is dat daar reeds 407 00:19:08,400 --> 00:19:09,657 'n patroon ontwikkel. 408 00:19:09,657 --> 00:19:10,990 En laat my gaan voort en doen dit. 409 00:19:10,990 --> 00:19:12,760 Laat my eerste afdraai Apache. 410 00:19:12,760 --> 00:19:17,340 En ek gaan om dit te vertel om homself te begin weer binne bron vandag se sewe 411 00:19:17,340 --> 00:19:18,420 m gids. 412 00:19:18,420 --> 00:19:20,100 Sodat ek toegang tot alles. 413 00:19:20,100 --> 00:19:22,230 >> En nou, as ek gaan terug na hierdie gids lys, 414 00:19:22,230 --> 00:19:24,846 sien ek elke lêer van vandag. 415 00:19:24,846 --> 00:19:26,720 En jy sal sien in die volgende probleem stel, sal ons 416 00:19:26,720 --> 00:19:28,594 gee jou instruksies om dit te doen presies dit. 417 00:19:28,594 --> 00:19:35,210 As ek oop paragraphs.html, kan dit sowel lyk soos 'n programmeertaal 418 00:19:35,210 --> 00:19:36,970 aan jou as jy praat nie of lees Latyn. 419 00:19:36,970 --> 00:19:40,525 Maar dit is net drie paragrawe van die teks wat op gemerk HTML. 420 00:19:40,525 --> 00:19:43,100 >> En kennis van die paragraaf breek tussen hulle. 421 00:19:43,100 --> 00:19:46,400 Omdat dit blyk, en selfs al is jy 422 00:19:46,400 --> 00:19:49,210 sou geneig wees om dit te doen, terwyl dit in die werklike wêreld, 423 00:19:49,210 --> 00:19:51,370 as jy wil lyn sit breek tussen dinge, 424 00:19:51,370 --> 00:19:55,680 jy dalk eenvoudig doen dit en druk Stoor. 425 00:19:55,680 --> 00:19:59,460 En nou, as ek herlaai hier, kennisgewing dat alles saam vervaag net 426 00:19:59,460 --> 00:20:01,100 in net een blob van die teks. 427 00:20:01,100 --> 00:20:03,570 Omdat HTML is 'n soort van 'n stom taal. 428 00:20:03,570 --> 00:20:07,230 >> Dit is bedoel om gebruik te word in so ' 'n manier dat die leser sal slegs 429 00:20:07,230 --> 00:20:09,920 doen uitdruklik wat jy vertel dit te doen. 430 00:20:09,920 --> 00:20:12,890 So as jy nie sê dit gee my 'n nuwe paragraaf, 431 00:20:12,890 --> 00:20:14,569 jy is nie van plan om 'n nuwe paragraaf te sien. 432 00:20:14,569 --> 00:20:16,360 En in die feit, wat die leser gaan doen 433 00:20:16,360 --> 00:20:20,020 selfs as jy druk Enter laat se weer en weer sê 434 00:20:20,020 --> 00:20:23,190 en weer beweeg hierdie teks manier af op die skerm en dan slaan 435 00:20:23,190 --> 00:20:26,610 en dan laai, die leser gaan om al daardie wit spasie ineenstort 436 00:20:26,610 --> 00:20:29,021 in net 'n enkele, sigbare spasie. 437 00:20:29,021 --> 00:20:29,520 Alles reg. 438 00:20:29,520 --> 00:20:30,869 So wat is die punt tag. 439 00:20:30,869 --> 00:20:32,910 En so wat is die patroon dit is die ontwikkeling van hier? 440 00:20:32,910 --> 00:20:37,450 Wel, dit blyk die geval te wees dat HTML is al oor die begin van 'n tag 441 00:20:37,450 --> 00:20:38,460 en eindig 'n tag. 442 00:20:38,460 --> 00:20:39,300 En wat is 'n tag? 443 00:20:39,300 --> 00:20:41,160 Wel, dit is net 'n stuk van sintaksis. 444 00:20:41,160 --> 00:20:44,400 Open bracket, 'n navraag, geslote bracket, is 'n 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 jy gedoen om jouself, 447 00:20:48,590 --> 00:20:52,300 soos in jy klaar is met die paragraaf, jy dit doen om die teenoorgestelde te praat. 448 00:20:52,300 --> 00:20:55,480 Maar die teenoorgestelde is nie heeltemal agteruit. 449 00:20:55,480 --> 00:21:00,630 >> Jy net voorvoegsel dieselfde tag se naam met 'n vorentoe skuinsstreep soos hierdie. 450 00:21:00,630 --> 00:21:01,130 Alles reg. 451 00:21:01,130 --> 00:21:02,570 So nie al wat opwindend. 452 00:21:02,570 --> 00:21:05,270 En in die feit, is ons nie die maak van die web alles wat meer interessant. 453 00:21:05,270 --> 00:21:07,630 Wat as ek wil maak dinge groter en vet? 454 00:21:07,630 --> 00:21:11,780 So dit blyk dat hier is 'n voorbeeld in headings.html waar in my liggaam, 455 00:21:11,780 --> 00:21:17,280 Ek het 'n H1 tag, H2, H3, vier, vyf, ses of, wat almal 456 00:21:17,280 --> 00:21:18,310 mooi lyk arcane. 457 00:21:18,310 --> 00:21:21,010 Maar as Ek weggaan oop hierdie Byvoorbeeld, kom ons neem 'n blik. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> So blaaier by verstek kan gee teks dit is 'n groot en sterk uiteenlopende groottes. 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 dan alles tussen in. 462 00:21:31,240 --> 00:21:34,170 So dit is interessant, maar nog steeds nie regtig die web wat ek ken. 463 00:21:34,170 --> 00:21:36,870 Wat as ons wil ek iets soos 'n lys. . 464 00:21:36,870 --> 00:21:40,190 So hier is 'n opsomming lys van drie van Harvard se huise. 465 00:21:40,190 --> 00:21:41,600 >> Hoe het jy te werk gaan om dit te doen? 466 00:21:41,600 --> 00:21:45,410 Wel, 'n blik op list.html. 467 00:21:45,410 --> 00:21:47,870 En hier, sien ons 'n bietjie funkiness 468 00:21:47,870 --> 00:21:49,630 maar laat ons kyk wat gebeur. 469 00:21:49,630 --> 00:21:56,182 So op grond van wat jy nou net gesien het, UL staan ​​vir On-geordende lys. 470 00:21:56,182 --> 00:21:57,640 On-geordende lys net beteken opsomming. 471 00:21:57,640 --> 00:21:58,431 Daar is geen getalle. 472 00:21:58,431 --> 00:22:01,850 Daar is ook iets genoem 'n geordende lys, wat 'n OL by tag. 473 00:22:01,850 --> 00:22:05,350 Dan Li, lys-item is al wat dit beteken. 474 00:22:05,350 --> 00:22:07,790 >> En so is dit outomaties getalle alles vir jou. 475 00:22:07,790 --> 00:22:11,270 Maar weereens, al my inkeping en wit spasie is net ter wille van my. 476 00:22:11,270 --> 00:22:13,050 Die leser is nie eintlik gaan om te sorg. 477 00:22:13,050 --> 00:22:16,670 So selfs al is jy nie kon doen dit, net om duidelik te wees, 478 00:22:16,670 --> 00:22:19,880 jy moet nie, selfs al is die leser sal steeds 479 00:22:19,880 --> 00:22:22,130 in staat wees om dit te verstaan ​​net mooi. 480 00:22:22,130 --> 00:22:24,590 Ek slaan herlaai in my leser, ek kliek herlaai 481 00:22:24,590 --> 00:22:26,760 en geen verandering gebeur omdat die leser steeds 482 00:22:26,760 --> 00:22:29,550 doen presies wat ek vertel om dit te doen. 483 00:22:29,550 --> 00:22:30,050 >> Alles reg. 484 00:22:30,050 --> 00:22:31,340 So dit is alles net teks. 485 00:22:31,340 --> 00:22:33,730 Nou laat iets meer interessant te doen. 486 00:22:33,730 --> 00:22:36,660 Ek gaan om voort te gaan en leen sommige van hierdie HTML. 487 00:22:36,660 --> 00:22:40,910 Ek gaan om voort te gaan en skep 'n nuwe lêer hier. 488 00:22:40,910 --> 00:22:43,370 En ons sal dit rick.html noem. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Ons het buite verhouding gebruikte iets 491 00:22:48,916 --> 00:22:51,290 bekend as 'n rick roll in hierdie klas vanjaar weet ek nie, 492 00:22:51,290 --> 00:22:53,880 dit is net organies gebeur. 493 00:22:53,880 --> 00:22:55,397 >> En nou is dit buite beheer geraak. 494 00:22:55,397 --> 00:22:56,730 So ek is net gaan om te gaan met dit. 495 00:22:56,730 --> 00:22:59,700 En as ek gaan na Google Beelde en Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 As jy nie weet hoekom ons doen hierdie, lees net op Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Elke keer as jy geklik het op die skakel, iemand se is iewers lag. 499 00:23:11,520 --> 00:23:14,860 En laat my ahead-- daar te gaan ons gaan, laat ons sien die beeld. 500 00:23:14,860 --> 00:23:16,750 >> So hier het ons 'n beeld in Google Images. 501 00:23:16,750 --> 00:23:19,390 En laat ons aanvaar dat dit is redelik oral op die internet. 502 00:23:19,390 --> 00:23:22,570 So ek gaan om te aanvaar dit is OK vir my hierdie eintlik sit in my webblad. 503 00:23:22,570 --> 00:23:24,820 Ek gaan om voort te gaan en kopieer beeld URL. 504 00:23:24,820 --> 00:23:28,600 As ek dan nou terug te gaan na Wolk 9, laat ons sien wat ek hier kan doen nie. 505 00:23:28,600 --> 00:23:30,630 So hier is net 'n web bladsy. 506 00:23:30,630 --> 00:23:39,020 Dit is Rick Astley, haha, Ek gaan nou terug te gaan 507 00:23:39,020 --> 00:23:43,510 om my leser, laai, en interessant. 508 00:23:43,510 --> 00:23:44,530 >> Waar is Rick? 509 00:23:44,530 --> 00:23:46,050 So laat my sien wat gebeur het. 510 00:23:46,050 --> 00:23:49,114 Eintlik, ek gaan voorgee asof ek nie doen nie. 511 00:23:49,114 --> 00:23:50,280 [Onhoorbaar] het hom in hier. 512 00:23:50,280 --> 00:23:52,520 Ons sal terug kom in 'n oomblik. 513 00:23:52,520 --> 00:23:54,200 So hier is rick.html. 514 00:23:54,200 --> 00:23:56,070 So dit is nie Rick Astley. 515 00:23:56,070 --> 00:23:59,680 So dit blyk ons ​​kan hom eintlik hier by. 516 00:23:59,680 --> 00:24:00,830 Dit is Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Ek gaan om te sê 'n beeld waarvan gee my bron is die URL Ek het net gekopieer, wat 518 00:24:06,680 --> 00:24:09,110 blykbaar is 'n gelukkige verjaardag iets of ander. 519 00:24:09,110 --> 00:24:13,280 >> En nou gaan ek sluit die tag soos hierdie. 520 00:24:13,280 --> 00:24:15,170 So is dit wikkel super lank. 521 00:24:15,170 --> 00:24:17,740 Maar let dat alles wat ek het gedoen is beeld oop bracket, 522 00:24:17,740 --> 00:24:20,270 bron met 'n kenmerk van hierdie. 523 00:24:20,270 --> 00:24:21,530 En dit is 'n baie lang URL. 524 00:24:21,530 --> 00:24:23,720 En aan die einde, dit agterkom. 525 00:24:23,720 --> 00:24:29,530 Hoekom het ek gedoen slash skuins bracket in plaas van, soos elke ander tag, 526 00:24:29,530 --> 00:24:33,590 met 'n oop bracket, IMG, gesluit bracket? 527 00:24:33,590 --> 00:24:37,040 Net 'n raaiskoot, selfs as jy het geen kennis hoegenaamd 528 00:24:37,040 --> 00:24:40,410 met HTML voor. 529 00:24:40,410 --> 00:24:42,710 >> Dit is so hoe dit sluit die opdrag, maar hoekom 530 00:24:42,710 --> 00:24:45,850 beteken dit nie regtig intuïtief sin om iets 'n bietjie meer te doen 531 00:24:45,850 --> 00:24:48,820 verbose soos naby beeld? 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 Net semanties, daar is geen sin van begin 'n beeld en eindig 'n beeld, 535 00:24:55,620 --> 00:24:56,870 dit is óf daar is of dit is nie. 536 00:24:56,870 --> 00:25:00,960 Sodat dit nie sin maak om 'n gaping te verlaat vir enigiets anders binnekant van 'n beeld. 537 00:25:00,960 --> 00:25:02,010 Jy kan net nie doen nie. 538 00:25:02,010 --> 00:25:03,720 En so het die sintaksis sou die algemeen net 539 00:25:03,720 --> 00:25:07,910 om slash binnekant doen van die oop tag of die begin tag 540 00:25:07,910 --> 00:25:09,020 en dan getref Save. 541 00:25:09,020 --> 00:25:13,350 >> So as ek nou herlaai hierdie lêer, nou Ek het hier 'n goeie webblad kook. 542 00:25:13,350 --> 00:25:15,100 En ons kon beslis regtig irriteer mense 543 00:25:15,100 --> 00:25:17,010 deur die inbedding plaas soos 'n YouTube-skakel. 544 00:25:17,010 --> 00:25:19,350 En in die feit, enige tyd jy al ooit gegaan het om YouTube, 545 00:25:19,350 --> 00:25:22,190 en laat my eintlik per ongeluk rick roll myself hier. 546 00:25:22,190 --> 00:25:25,770 So Rick roll. 547 00:25:25,770 --> 00:25:29,592 So rick roll-- ek gaan om hier te gaan. 548 00:25:29,592 --> 00:25:31,900 >> [Speel van musiek] 549 00:25:31,900 --> 00:25:33,730 >> OK, een persoon het daarvan gehou. 550 00:25:33,730 --> 00:25:37,270 So sien al hierdie tyd, as jy Klik op die skakel Deel jy natuurlik 551 00:25:37,270 --> 00:25:41,390 kry die URL wat jy kan eintlik embed in 'n e-pos of 'n forensiese beeld 552 00:25:41,390 --> 00:25:43,730 of in 'n probleem te stel of in 'n skyfie. 553 00:25:43,730 --> 00:25:49,055 En nou, as ek klik plaas op embed, sien dat al hierdie tyd, hierdie dinge 554 00:25:49,055 --> 00:25:49,680 is daar. 555 00:25:49,680 --> 00:25:50,910 Ek gaan om voort te gaan en 'n afskrif van hierdie. 556 00:25:50,910 --> 00:25:54,000 >> En net so kan ons dit beter te sien, ek is gaan om dit te plak in my teks editor. 557 00:25:54,000 --> 00:25:55,860 Let daarop dat dit wat YouTube is wat jy vertel. 558 00:25:55,860 --> 00:25:57,693 Elke keer as jy 'n besoek YouTube video, as jy 559 00:25:57,693 --> 00:26:00,410 wil die video op jou embed webblad, dit net te gryp. 560 00:26:00,410 --> 00:26:03,350 So dit is nog 'n HTML tag genoem 'n iframe. 561 00:26:03,350 --> 00:26:04,590 Of 'n in lyn raam. 562 00:26:04,590 --> 00:26:08,680 So dit lyk 'n bietjie meer te kompleks as al die ander. 563 00:26:08,680 --> 00:26:11,950 So dit blyk dat die beeld tag en blykbaar die iframe tag 564 00:26:11,950 --> 00:26:13,370 neem wat genoem eienskappe. 565 00:26:13,370 --> 00:26:15,710 >> En dit is 'n ander stuk sintaksis in HTML. 566 00:26:15,710 --> 00:26:19,240 In bykomend tot die tag se naam, oop bracket tag naam 567 00:26:19,240 --> 00:26:23,780 kan jy die gedrag van die tag beheer deur 'n hele klomp van die kenmerk 568 00:26:23,780 --> 00:26:24,860 gelyk waarde. 569 00:26:24,860 --> 00:26:26,290 Kenmerk gelyk waarde. 570 00:26:26,290 --> 00:26:28,100 En so byvoorbeeld YouTube is om ons te vertel 571 00:26:28,100 --> 00:26:31,990 as jy wil hê dat die wydte van hierdie video te wees 420 pixels en die hoogte 572 00:26:31,990 --> 00:26:35,470 te wees 315 pixels, dis hoe jy dit uit te druk in HTML. 573 00:26:35,470 --> 00:26:38,480 >> Die bron van die video gaan om so lank YouTube URL wees 574 00:26:38,480 --> 00:26:40,830 en dan 'n paar ander dinge soos raam grens nul is, 575 00:26:40,830 --> 00:26:43,500 so wat waarskynlik beteken daar is geen grens rondom die ding. 576 00:26:43,500 --> 00:26:45,450 Laat die volle screen waarskynlik beteken dat die gebruiker 577 00:26:45,450 --> 00:26:47,840 kan kliek op 'n knoppie en eintlik die volle screen die video. 578 00:26:47,840 --> 00:26:52,870 So as ek regtig wil wees indrukwekkende hier in Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 eerder as die gebruik van die beeld tag, laat my dat verwyder, dit in plaas plak. 580 00:26:58,490 --> 00:27:00,810 En nou herlaai. 581 00:27:00,810 --> 00:27:02,500 En nou hier gaan ons weer. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Alle reg, dit is genoeg. 584 00:27:06,020 --> 00:27:08,970 Alle reg, sodat ek sal probeer hard om dit nie te weer doen. 585 00:27:08,970 --> 00:27:11,400 So, wat is 'n paar van die wegneemetes hier? 586 00:27:11,400 --> 00:27:15,130 So HTML, so lelik soos die web bladsye is, is eintlik redelik eenvoudig. 587 00:27:15,130 --> 00:27:16,467 Dit is nie 'n programmeertaal. 588 00:27:16,467 --> 00:27:17,550 Dit maak nie funksies. 589 00:27:17,550 --> 00:27:18,410 Dit maak nie loops het. 590 00:27:18,410 --> 00:27:19,535 Dit maak nie toestande. 591 00:27:19,535 --> 00:27:22,900 Al wat dit het, is dekades van die verskillende etikette, wat elk 592 00:27:22,900 --> 00:27:24,620 nul of meer spesifieke eienskappe. 593 00:27:24,620 --> 00:27:27,320 En in die feit, wat is pret oor HTML as jy begin om te duik in 594 00:27:27,320 --> 00:27:29,560 is dat dit baie self leerbaar. 595 00:27:29,560 --> 00:27:32,880 >> Al wat dit neem is 'n begrip van die algemene raamwerk van HTML. 596 00:27:32,880 --> 00:27:36,510 Wat is 'n tag, wat is 'n kenmerk, hoe kan jy eintlik instel 'n webblad 597 00:27:36,510 --> 00:27:37,250 soos volg. 598 00:27:37,250 --> 00:27:40,720 En alles anders is regtig die resultaat van kyk in 'n aanlyn-verwysing 599 00:27:40,720 --> 00:27:43,080 of googlen hoe om sommige doen tegniek of soos ons gesien het, 600 00:27:43,080 --> 00:27:45,371 op soek na Facebook se bron kode, kyk na 'n webwerf 601 00:27:45,371 --> 00:27:48,710 wat jy wil op sy bron-kode en verstaan ​​hoe die ontwikkelaars daar 602 00:27:48,710 --> 00:27:50,550 eintlik gelê dinge uit. 603 00:27:50,550 --> 00:27:52,180 >> So kan ons beelde as goed doen. 604 00:27:52,180 --> 00:27:53,994 En in die feit, ons het dit 'n oomblik gelede. 605 00:27:53,994 --> 00:27:55,410 Laat my gaan voort en net jou wys. 606 00:27:55,410 --> 00:27:56,770 Hier is 'n paar voorbeeld kode. 607 00:27:56,770 --> 00:27:58,380 As jy ooit wil grumpy kat te sien. 608 00:27:58,380 --> 00:28:00,620 So sien dat ek kan 'n beeld tag hier. 609 00:28:00,620 --> 00:28:02,090 En ek het 'n opmerking bo dit. 610 00:28:02,090 --> 00:28:04,490 Ek het 'n alternatiewe het teks vir toeganklikheid. 611 00:28:04,490 --> 00:28:07,250 So iemand wat met behulp van 'n skerm leser vir redes van sig 612 00:28:07,250 --> 00:28:10,172 eintlik kan dan hul skerm leser sê grumpy kat. 613 00:28:10,172 --> 00:28:11,880 Want as hulle nie kan nie sien die beeld, wat hulle 614 00:28:11,880 --> 00:28:14,504 kan ten minste hul rekenaar hulle vertel mondelings wat dit is. 615 00:28:14,504 --> 00:28:18,020 En die bron van die lêer is cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 So in werklikheid, as ek regtig wou kry slim, wat ek kan hê done-- 617 00:28:22,472 --> 00:28:25,680 Ek belowe om nie te gaan na Rick Astley, so Ek gaan google vir 'n kat in plaas. 618 00:28:25,680 --> 00:28:28,290 En as ek gaan na Google Images hier, en ons sal aanneem 619 00:28:28,290 --> 00:28:30,040 dat dit 'n foto van my kat. 620 00:28:30,040 --> 00:28:35,070 >> Veronderstel dat ek beheer gekliek of reg het op hierdie, per ongeluk 621 00:28:35,070 --> 00:28:35,630 creepy. 622 00:28:35,630 --> 00:28:40,320 En cat.jpeg ek gaan om te bespaar op my lessenaar. 623 00:28:40,320 --> 00:28:44,700 Laat my nou gaan terug na wolk 9. 624 00:28:44,700 --> 00:28:48,150 Let daarop dat hier, ek kan gaan na die plaaslike lêers te laai. 625 00:28:48,150 --> 00:28:51,530 En as ek gryp hierdie lêer, cat.jpeg, kennisgewing 626 00:28:51,530 --> 00:28:54,674 dat ek dit kan sleep en gooi dit in die wolk 9 627 00:28:54,674 --> 00:28:56,090 en dit gaan gil op my hier. 628 00:28:56,090 --> 00:28:59,000 >> Want ons het reeds gegee 'n cat.jpeg lêer, 629 00:28:59,000 --> 00:29:01,430 maar dit is super maklik om te gryp 'n foto wat jy het 630 00:29:01,430 --> 00:29:03,220 geneem uit Facebook of Flickr of die wil 631 00:29:03,220 --> 00:29:05,678 en eintlik sleep in wolk 9 en dan maak dit 632 00:29:05,678 --> 00:29:07,970 deel van jou eie persoonlike webwerf of probleem 633 00:29:07,970 --> 00:29:10,442 stel sewe of agt as ons binnekort sal sien. 634 00:29:10,442 --> 00:29:12,150 En dan wanneer jy uiteindelik besoek dat die kat, 635 00:29:12,150 --> 00:29:16,610 veronderstelling ek afgelaai dieselfde kat, kennisgewing that-- wat adorable. 636 00:29:16,610 --> 00:29:19,160 >> Wat jy sal sien, is iets soos hierdie gesig hier. 637 00:29:19,160 --> 00:29:21,810 So die lêers wat jy verwysing binne 'n webblad 638 00:29:21,810 --> 00:29:26,050 kan óf plaaslike in jou eie wees rekening of remote op 'n ander bediener 639 00:29:26,050 --> 00:29:29,670 soos in die geval van die Rick Astley foto 'n bietjie gelede. 640 00:29:29,670 --> 00:29:32,990 So waar else-- wat anders kan ons hier doen? 641 00:29:32,990 --> 00:29:34,890 So laat ons neem 'n blik op die volgende. 642 00:29:34,890 --> 00:29:36,160 Jy weet wat se soort koel? 643 00:29:36,160 --> 00:29:39,330 >> Ons het tot dusver maak baie statiese web bladsye. 644 00:29:39,330 --> 00:29:41,830 Ek wil dinge soos volg kikker. 645 00:29:41,830 --> 00:29:44,344 Ek wil my eie soektog te maak. 646 00:29:44,344 --> 00:29:47,010 So 'n soektog te maak, laat gaan voort en begin om dit te doen. 647 00:29:47,010 --> 00:29:52,570 Ek gaan om voort te gaan en die skep 'n nuwe lêer genaamd search.html. 648 00:29:52,570 --> 00:29:54,890 En ons het prefabed weergawes aanlyn. 649 00:29:54,890 --> 00:29:56,027 Oeps. 650 00:29:56,027 --> 00:29:57,610 Moenie plak in jou terminale venster. 651 00:29:57,610 --> 00:29:58,744 Prefab weergawes aanlyn. 652 00:29:58,744 --> 00:30:00,160 En ek gaan om te begin as volg. 653 00:30:00,160 --> 00:30:04,490 So hier is die begin van 'n lêer genaamd search.html. 654 00:30:04,490 --> 00:30:07,510 Ek gaan om dit te red in vandag se bron gids. 655 00:30:07,510 --> 00:30:09,079 Ek gaan om te noem dit Search. 656 00:30:09,079 --> 00:30:10,370 Eintlik, sal ons dit beter te maak. 657 00:30:10,370 --> 00:30:13,600 CS50 Soek en eintlik merk dit. 658 00:30:13,600 --> 00:30:17,500 En nou, ek gaan om te sê iets soos H1 CS50 Search. 659 00:30:17,500 --> 00:30:20,930 En dan af hier, H2 kom gou. 660 00:30:20,930 --> 00:30:23,230 En net om saam te vat, H1 en H2 onderskeidelik wat? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Ja, so groot en vet, en nie so groot nie, maar nog steeds vet. 663 00:30:30,320 --> 00:30:37,375 So as ek dit red en gaan oor hier, laat ons sien die lêer search.html. 664 00:30:37,375 --> 00:30:42,560 Alle reg, en hierdie een is right-- [onhoorbaar]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Staan by. 667 00:30:49,110 --> 00:30:49,945 David is verward. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 O, dit is reg daar. 670 00:30:54,080 --> 00:30:54,860 David is 'n idioot. 671 00:30:54,860 --> 00:30:55,420 OK. 672 00:30:55,420 --> 00:30:56,660 So daar is dit. 673 00:30:56,660 --> 00:30:58,350 So CS50 soek binnekort. 674 00:30:58,350 --> 00:31:00,370 So nou, laat ons sintetiseer wat ons gedoen het verlede week. 675 00:31:00,370 --> 00:31:03,400 >> Waar het ons gepraat oor die laer vlak meganika van HTTP. 676 00:31:03,400 --> 00:31:05,780 En hierdie nuwe idees van HTML, wat net 677 00:31:05,780 --> 00:31:08,890 hierdie opmaak taal waar jy vertel 'n leser presies wat om te doen 678 00:31:08,890 --> 00:31:10,740 en implementeer ons eie soektog. 679 00:31:10,740 --> 00:31:12,520 So in plaas van net sê binnekort, ek is 680 00:31:12,520 --> 00:31:14,810 gaan stel iets genoem 'n vorm tag. 681 00:31:14,810 --> 00:31:19,610 En in hierdie vorm, ek gaan iets soos 'n invoer veld. 682 00:31:19,610 --> 00:31:22,450 >> En die naam van hierdie insette gebied, ek gaan om dit te noem Q. 683 00:31:22,450 --> 00:31:26,240 En die tipe van hierdie veld insette Ek gaan om te sê is net "teks". 684 00:31:26,240 --> 00:31:29,130 En 'n teks veld, soos ons sal sien is net 'n teks boks. 685 00:31:29,130 --> 00:31:32,830 En so is dit nie hier sin om enigiets binnekant van dit op hierdie punt. 686 00:31:32,830 --> 00:31:35,320 En so is ek net gaan om die tag met die toemaak 687 00:31:35,320 --> 00:31:38,099 vorentoe streep reg in die tag self. 688 00:31:38,099 --> 00:31:39,890 En dan gaan ek een ander insette. 689 00:31:39,890 --> 00:31:43,480 Tipe insette gelyk dien. 690 00:31:43,480 --> 00:31:45,320 En dan gaan ek hierdie een ook te sluit. 691 00:31:45,320 --> 00:31:46,840 >> En nou gaan ek hier terug te gaan. 692 00:31:46,840 --> 00:31:49,520 En al sien ons hoewel mooi lelik, ek het 693 00:31:49,520 --> 00:31:52,460 het die begin van die my eie search bladsy hier. 694 00:31:52,460 --> 00:31:55,150 In werklikheid, laat ek probeer om skoon dit op 'n bietjie. 695 00:31:55,150 --> 00:31:57,330 Dit blyk dat die insette hier, kan ek 696 00:31:57,330 --> 00:31:59,910 'n ander kenmerk genaamd plekhouer. 697 00:31:59,910 --> 00:32:05,165 En ek kan iets soos sleutelwoorde, of meer spesifiek, navraag vir q. 698 00:32:05,165 --> 00:32:07,820 >> En sien, nou, ek het hierdie soort van grys teks 699 00:32:07,820 --> 00:32:10,440 wat verdwyn as Sodra ek begin tik, 700 00:32:10,440 --> 00:32:12,930 maar dit is waarskynlik iets jy het gesien in ander webblaaie. 701 00:32:12,930 --> 00:32:14,650 Ek hou nie regtig die Submit knoppie. 702 00:32:14,650 --> 00:32:18,320 So ek eintlik gaan om die te gee Knoppie Stuur 'n waarde van die soektog. 703 00:32:18,320 --> 00:32:21,680 En nou, as ek herlaai, sien dat my knoppie raak vernoem search. 704 00:32:21,680 --> 00:32:24,140 Jy weet, ek het nie regtig soos die logo hier. 705 00:32:24,140 --> 00:32:27,140 So Google Font generator. 706 00:32:27,140 --> 00:32:28,820 >> Ek wil dit verder kikker. 707 00:32:28,820 --> 00:32:30,660 So CS50 soek. 708 00:32:30,660 --> 00:32:31,870 Laat my my eie logo te skep. 709 00:32:31,870 --> 00:32:33,080 Dit lyk mooi. 710 00:32:33,080 --> 00:32:36,945 So nou laat my behalwe hierdie as-- kom op. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Waar gaan dit? 713 00:32:43,120 --> 00:32:43,620 Daar. 714 00:32:43,620 --> 00:32:44,160 OK. 715 00:32:44,160 --> 00:32:44,980 Het dit gemis. 716 00:32:44,980 --> 00:32:47,740 Behalwe soos. 717 00:32:47,740 --> 00:32:49,470 Dom blaaiers. 718 00:32:49,470 --> 00:32:51,700 Staan, gaan ons Los hierdie eens en vir altyd. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Daar gaan ons. 721 00:32:58,590 --> 00:32:59,090 Alles reg. 722 00:32:59,090 --> 00:32:59,600 Jammer. 723 00:32:59,600 --> 00:33:00,750 Afdag. 724 00:33:00,750 --> 00:33:02,310 Nou is dit funky. 725 00:33:02,310 --> 00:33:03,160 Verlaat vol skerm. 726 00:33:03,160 --> 00:33:04,150 Alles reg. 727 00:33:04,150 --> 00:33:06,870 >> Nou, soos 'n normale persoon, behalwe beeld as. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Nou gaan ek in CS50IDE en om te gaan Ek gaan net gryp die logo, 730 00:33:13,194 --> 00:33:15,360 Ek is van plan om dit te sleep in my bron sewe gids, 731 00:33:15,360 --> 00:33:17,002 lêer bestaan ​​reeds, ek is ok met dit. 732 00:33:17,002 --> 00:33:19,210 So ek gaan om dit te ignoreer want ek het dit reeds. 733 00:33:19,210 --> 00:33:20,630 En nou hoe kry ek ontslae raak van hierdie? 734 00:33:20,630 --> 00:33:24,670 >> Kom ons gaan voort en doen hier image source gelyk logo.gif. 735 00:33:24,670 --> 00:33:25,490 Sluit hierdie. 736 00:33:25,490 --> 00:33:26,050 Red. 737 00:33:26,050 --> 00:33:30,560 As ek dan nou terug te gaan na my soek bladsy, nou is dit op soek na mooi goed. 738 00:33:30,560 --> 00:33:33,610 Alle reg, sodat dit het nie nogal iets nuttig gedoen. 739 00:33:33,610 --> 00:33:37,000 In werklikheid, laat ek probeer soek vir 'n kat en kyk wat gebeur. 740 00:33:37,000 --> 00:33:38,890 Katte. 741 00:33:38,890 --> 00:33:39,420 Vervloek Dit. 742 00:33:39,420 --> 00:33:41,400 Dit is nie net werk nie, blykbaar. 743 00:33:41,400 --> 00:33:43,760 So, wat is die sleutel stuk wat ontbreek hier? 744 00:33:43,760 --> 00:33:49,100 >> Reg, selfs as jy nie weet nie HTML, Ek het begin merk die telefoon vorm 745 00:33:49,100 --> 00:33:54,130 en ek het dit vertel hoe om insette te kry, gee my 'n teks boks en 'n stuur knoppie, 746 00:33:54,130 --> 00:33:55,730 wat stuk blykbaar ontbreek? 747 00:33:55,730 --> 00:33:58,975 Gestel ons wil eintlik kry hierdie ding korrek werk. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Wat moet ons doen? 750 00:34:05,360 --> 00:34:08,860 Ons het 'n behoefte om die implementering van die agterkant databasis of die soektog self, 751 00:34:08,860 --> 00:34:11,210 en wat gaan om 'n te neem n hele klomp van die tyd, eerlik. 752 00:34:11,210 --> 00:34:13,380 >> So onthou wat ons gedoen het die laaste keer. 753 00:34:13,380 --> 00:34:18,230 So as jy soek vir iets op Google en jy het vooruit afgeskakel, 754 00:34:18,230 --> 00:34:20,355 Onthou, direkte soek. 755 00:34:20,355 --> 00:34:22,230 So laat my draai dat af sodat dit werklik 756 00:34:22,230 --> 00:34:26,650 optree soos 'n ouer skool leser, as ek nou soek vir iets soos katte, 757 00:34:26,650 --> 00:34:28,190 onthou wat die URL lyk. 758 00:34:28,190 --> 00:34:29,449 Dit is redelik kripties. 759 00:34:29,449 --> 00:34:33,000 Maar ingebed in daar, Onthou, is slash soek. 760 00:34:33,000 --> 00:34:35,100 Vraagteken q gelyk katte. 761 00:34:35,100 --> 00:34:37,760 >> En dit sou lyk vir my te gee 'n hele klomp van die resultate. 762 00:34:37,760 --> 00:34:39,134 Sodat jy weet wat ek gaan doen? 763 00:34:39,134 --> 00:34:41,650 Ek gaan om te leen Google net vir 'n minuut. 764 00:34:41,650 --> 00:34:43,670 Ek gaan om te gaan oor hier en ek gaan om te sê 765 00:34:43,670 --> 00:34:47,850 dat dit vorm aksie of bestemming, so te sê, 766 00:34:47,850 --> 00:34:49,330 moet letterlik Google. 767 00:34:49,330 --> 00:34:52,590 En die metode wat ek wou gebruik gaan word te kry. 768 00:34:52,590 --> 00:34:53,560 >> So, wat is aksie? 769 00:34:53,560 --> 00:34:55,760 Aksie uitgesoekte naam, maar wat net beteken 770 00:34:55,760 --> 00:34:58,120 wie gaan om te hanteer die optrede van hierdie vorm? 771 00:34:58,120 --> 00:35:00,820 As ek op soek waar moet die uitslag gaan? 772 00:35:00,820 --> 00:35:05,300 En as ek nou terug te gaan na my vorm hier en herlaai my webblad 773 00:35:05,300 --> 00:35:09,000 en nou soek vir iets soos hond, kyk nou 774 00:35:09,000 --> 00:35:10,850 Ek het weer geïmplementeer Google. 775 00:35:10,850 --> 00:35:11,350 Reg? 776 00:35:11,350 --> 00:35:14,141 >> As ek wil om te soek vir iets anders, dit werk vir nie net honde, 777 00:35:14,141 --> 00:35:16,400 dit werk ook vir katte. 778 00:35:16,400 --> 00:35:21,930 Dit werk ook vir CS50. 779 00:35:21,930 --> 00:35:24,310 En OK, dit is net onder oorweldigende, is dit nie? 780 00:35:24,310 --> 00:35:25,920 Alle reg, maar dit eintlik werk. 781 00:35:25,920 --> 00:35:27,360 So, wat is eintlik aan die gang? 782 00:35:27,360 --> 00:35:31,340 So ek het my geleer leser, met behulp van HTML, om insette te neem van die gebruiker 783 00:35:31,340 --> 00:35:35,810 en eintlik stuur dat die insette na 'n afgeleë bediener met behulp van HTTP. 784 00:35:35,810 --> 00:35:39,120 >> En omdat my browser verstaan ​​HTTP, is dit eintlik 785 00:35:39,120 --> 00:35:43,500 bou die URL sodat wat Ek beland oor in my leser, 786 00:35:43,500 --> 00:35:45,660 Kyk wat gebeur wanneer ek gesoek vir die hond. 787 00:35:45,660 --> 00:35:49,270 As ek op Search, agterkom dat die URL verander soos ek bedoel 788 00:35:49,270 --> 00:35:52,770 om google.com/search~~V navraag gelyk hond. 789 00:35:52,770 --> 00:35:56,020 En dit is omdat die vorm weet, want die metode te kry, 790 00:35:56,020 --> 00:35:59,560 om net voeg dit dat daar URL. 791 00:35:59,560 --> 00:36:01,730 >> Nou, hierdie webblaaie is nog lelik. 792 00:36:01,730 --> 00:36:04,890 So laat stel een ander stuk sintaksis as ons kan vandag. 793 00:36:04,890 --> 00:36:07,640 En dit is iets wat bekend staan as cascading style sheets. 794 00:36:07,640 --> 00:36:10,720 So laat my 'n blik op hierdie voorbeeld hier, en kyk 795 00:36:10,720 --> 00:36:12,380 as ons kan aflei wat aangaan. 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 hier waar dinge kry 'n bietjie lelik. 798 00:36:16,532 --> 00:36:18,490 Omdat ongelukkig in die wêreld van die web, 799 00:36:18,490 --> 00:36:20,920 HTML alleen kan nie alles doen nie. 800 00:36:20,920 --> 00:36:22,920 En so as jy wil stileer jou webblad, 801 00:36:22,920 --> 00:36:28,370 jy eintlik nodig het om te fokus op die estetika in 'n ander manier. 802 00:36:28,370 --> 00:36:33,090 So hier, ek het die liggaam van my web bladsy binnekant van wat is 'n groot div. 803 00:36:33,090 --> 00:36:34,700 En 'n div beteken net verdeeldheid. 804 00:36:34,700 --> 00:36:38,060 So dit is soos 'n paragraaf maar dit nie dieselfde semantiek het 805 00:36:38,060 --> 00:36:39,180 van 'n paragraaf van die teks. 806 00:36:39,180 --> 00:36:40,940 >> Dit beteken net om die leser, hier kom 807 00:36:40,940 --> 00:36:45,210 'n groot reghoekige gebied van my web bladsy, ek wil dit spesiaal te hanteer. 808 00:36:45,210 --> 00:36:47,420 Nou, lyn 21 is waar dat div begin. 809 00:36:47,420 --> 00:36:48,770 En net 'n raaiskoot. 810 00:36:48,770 --> 00:36:53,080 Wat is die effek van die lyn 21 op die res van die inhoud van die bladsy? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Sentreer dit. 813 00:36:56,311 --> 00:36:56,810 Dit is al. 814 00:36:56,810 --> 00:36:58,830 So ons het nie 'n manier gesien die teks eintlik sentreer. 815 00:36:58,830 --> 00:37:00,996 >> In werklikheid, my soektog, In teenstelling met die werklike Google, 816 00:37:00,996 --> 00:37:03,040 is al geregverdig oor aan die linkerkant. 817 00:37:03,040 --> 00:37:07,430 En so nou in lyn 21, ek sê, hey leser, skep 'n afdeling van die bladsy. 818 00:37:07,430 --> 00:37:09,450 Gee my net 'n groot, onsigbare reghoek. 819 00:37:09,450 --> 00:37:11,490 Dit is hoe ek wil dink oor die webblad. 820 00:37:11,490 --> 00:37:13,870 En stileer dit dan as volg. 821 00:37:13,870 --> 00:37:16,900 Binnekant van die aanhalings, nou, is 'n tweede taal 822 00:37:16,900 --> 00:37:19,969 wat ons vandag bekendgestel genoem cascading style sheets. 823 00:37:19,969 --> 00:37:22,010 Gelukkig, dit is ook nie 'n programmeertaal, 824 00:37:22,010 --> 00:37:26,470 so dit is baie beperk in sy sintaksis maar ook baie beperk in sy funksies 825 00:37:26,470 --> 00:37:30,670 terwyl HTML is alles oor merk die data van 'n webblad 826 00:37:30,670 --> 00:37:32,130 en die struktuur van 'n webblad. 827 00:37:32,130 --> 00:37:35,320 CSS is oor die algemeen oor die laaste myl, die estetiese, 828 00:37:35,320 --> 00:37:40,160 kry die grootte en die kleur en die plasing presies reg in 'n web bladsy. 829 00:37:40,160 --> 00:37:43,000 En inderdaad, dit is gevorm met die sleutel waarde pare. 830 00:37:43,000 --> 00:37:46,290 >> A eiendom soos hierdie, teks pas, gevolg deur 'n dubbelpunt, 831 00:37:46,290 --> 00:37:49,720 gevolg deur die waarde van die eiendom, wat in hierdie geval is 'n sentrum. 832 00:37:49,720 --> 00:37:51,910 En nou sien jy kan nes hierdie dinge. 833 00:37:51,910 --> 00:37:56,780 As ek wou alles in daardie Ek het uitgelig word gesentreer, 834 00:37:56,780 --> 00:38:00,270 dis hoekom ek lyn 21 en die ooreenstemmende lyn 31. 835 00:38:00,270 --> 00:38:04,820 Maar veronderstel nou wil sê John Harvard, welkom om my tuisblad. 836 00:38:04,820 --> 00:38:06,530 >> Kopiereg simbool John Harvard. 837 00:38:06,530 --> 00:38:09,180 En dink ek wil die eerste van die lyne om mooi groot wees. 838 00:38:09,180 --> 00:38:10,450 36 pixels. 839 00:38:10,450 --> 00:38:11,530 So dit is 'n ordentlike grootte. 840 00:38:11,530 --> 00:38:13,240 En ek wou sy gewig dapper wees. 841 00:38:13,240 --> 00:38:15,450 Maar dan hieronder wat, Ek wil kleiner teks. 842 00:38:15,450 --> 00:38:19,980 En onder dit, ek wil selfs kleiner teks. 843 00:38:19,980 --> 00:38:20,480 Jammer. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 Vandag voel soos 'n off dag. 846 00:38:26,940 --> 00:38:29,840 >> So nou, wat doen ek om dit uit te druk? 847 00:38:29,840 --> 00:38:34,580 Hier op die lyn 22 is 'n ingeboude div of geneste div, as jy wil. 848 00:38:34,580 --> 00:38:36,190 Dit het ook sy eie styl tag. 849 00:38:36,190 --> 00:38:38,160 Ek gee 'n lettergrootte van 36. 850 00:38:38,160 --> 00:38:40,460 Ek het 'n font gewig van vet spesifiseer. 851 00:38:40,460 --> 00:38:43,360 Down hier, het ek net spesifiseer 24 pixels. 852 00:38:43,360 --> 00:38:45,960 En ten slotte, in ooreenstemming 28, ek spesifiseer 12. 853 00:38:45,960 --> 00:38:49,070 So net so 'n vinnige gesonde verstand tjek en as 'n mens dit lees, 854 00:38:49,070 --> 00:38:52,545 watter woorde op die skerm is eintlik gaan vet te wees? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Watter lyne is eintlik vet? 857 00:38:58,760 --> 00:38:59,570 >> Net John Harvard. 858 00:38:59,570 --> 00:39:00,070 Reg? 859 00:39:00,070 --> 00:39:05,940 Want net soos lyn 22 sê hey leser, hier is 'n afdeling van die bladsy. 860 00:39:05,940 --> 00:39:07,920 Maak dit lettergrootte 36 punt. 861 00:39:07,920 --> 00:39:09,460 Maak die font gewig vet. 862 00:39:09,460 --> 00:39:11,920 Sodra jy by die ooreenstemmende einde tag 863 00:39:11,920 --> 00:39:15,340 of geslote tag op die lyn 24, dit beteken, hey leser, 864 00:39:15,340 --> 00:39:17,640 ophou doen wat dit ookal is wat jy doen. 865 00:39:17,640 --> 00:39:21,020 En kennis om duidelik te wees, selfs al is lyn 22 het al hierdie eienskappe 866 00:39:21,020 --> 00:39:24,430 soos styl, wanneer jy sluit die tag in lyn 24, 867 00:39:24,430 --> 00:39:25,940 jy net noem die naam van die tag se. 868 00:39:25,940 --> 00:39:29,990 >> Jy hoef nie herhaal die woord styl of enigiets wat is binnekant van die aanhalingstekens. 869 00:39:29,990 --> 00:39:32,860 En so as ek kyk na dit nou in my browser, laat ons 870 00:39:32,860 --> 00:39:38,060 'n blik op die eindresultaat. Laat my gaan voor hierdie lêer, wat is CSS 0. 871 00:39:38,060 --> 00:39:41,814 En dit is nog redelik eenvoudig, maar om redelik interessant. 872 00:39:41,814 --> 00:39:43,980 Maar dit blyk daar is ander dinge wat ek kan doen hier, 873 00:39:43,980 --> 00:39:46,490 en op die risiko van die maak van hierdie heeltemal afskuwelike, 874 00:39:46,490 --> 00:39:48,630 sien hier in my liggaam van my webblad, 875 00:39:48,630 --> 00:39:53,930 Ek kan iets snaaks doen soos bg of agtergrond. 876 00:39:53,930 --> 00:39:56,670 >> En 'n vinnige, wat is jou gunsteling kleur? 877 00:39:56,670 --> 00:39:57,720 Groen ek gehoor het. 878 00:39:57,720 --> 00:39:58,750 Alles reg. 879 00:39:58,750 --> 00:40:02,920 So nou, as ek herlaai nou, ons het 'n groen webblad. 880 00:40:02,920 --> 00:40:04,710 Alle reg, so dit is nie sleg nie. 881 00:40:04,710 --> 00:40:08,350 En nou, as ek wil hierdie maak regtig Modern, ek kan die kleur van my teks te maak 882 00:40:08,350 --> 00:40:09,360 selfs rooi. 883 00:40:09,360 --> 00:40:10,870 So laat ons sien wat dit lyk soos. 884 00:40:10,870 --> 00:40:12,230 Nou is dit op soek na mooi goed. 885 00:40:12,230 --> 00:40:15,460 En hier sit, as jy regtig wil mors met iemand 886 00:40:15,460 --> 00:40:17,487 of as jy wil wees een van daardie mense wat 887 00:40:17,487 --> 00:40:20,570 probeer om jou te mislei met die besoek van 'n web bladsy omdat hulle het gekul Google 888 00:40:20,570 --> 00:40:27,610 in denke is daar 'n hele klomp van die belangrikste woorde like-- laat ons sien, op te laai. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Waar het dit gaan? 891 00:40:30,680 --> 00:40:31,530 En daar is dit ons. 892 00:40:31,530 --> 00:40:32,030 Alles reg. 893 00:40:32,030 --> 00:40:34,905 So ek sê dit as 'n eenkant, sal ons praat oor hierdie dinge in 'n paar weke 894 00:40:34,905 --> 00:40:36,740 wanneer ons praat oor sekuriteit, as jy eintlik 895 00:40:36,740 --> 00:40:38,852 insluit hele trosse dokumente in 'n web bladsy, 896 00:40:38,852 --> 00:40:41,810 selfs al is hulle nie sigbaar vir 'n mens, iemand soos Google, natuurlik, 897 00:40:41,810 --> 00:40:43,250 kan steeds eintlik vind. 898 00:40:43,250 --> 00:40:45,820 Alle reg, so dit is redelik redelik vinnig afskuwelike. 899 00:40:45,820 --> 00:40:48,420 >> En in die feit, dit is nie al dat baie in teenstelling met my eie web 900 00:40:48,420 --> 00:40:51,480 bladsy as 'n voorgraadse, wat Ek het begin om uit te vind googlen 901 00:40:51,480 --> 00:40:53,690 vorige weergawes van my ou webtuistes. 902 00:40:53,690 --> 00:40:54,500 Dit was baie sleg. 903 00:40:54,500 --> 00:40:56,650 In werklikheid, het ek een net voor die klas. 904 00:40:56,650 --> 00:40:58,620 Maar daar is erger daar buite. 905 00:40:58,620 --> 00:41:01,534 Dit was blykbaar my tuisblad terug in 1996. 906 00:41:01,534 --> 00:41:04,200 Blykbaar het ek gedink dit was gepas om mense te vra hul naam 907 00:41:04,200 --> 00:41:05,991 voordat hulle kon eintlik sien my webblad. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> En dan het ek iets onnosel, waarskynlik. 910 00:41:11,920 --> 00:41:13,450 Ek sal meer vir die volgende keer grawe. 911 00:41:13,450 --> 00:41:16,220 Maar vir nou, laat ons oorweeg om 'n bietjie van die ontwerp. 912 00:41:16,220 --> 00:41:17,444 Ons het gepraat oor die styl. 913 00:41:17,444 --> 00:41:19,735 En hierdie bladsy dusver en mees alles wat ek geskryf het 914 00:41:19,735 --> 00:41:21,890 is redelik skoon stilisties. 915 00:41:21,890 --> 00:41:23,320 Maar wat van die ontwerp? 916 00:41:23,320 --> 00:41:25,990 Wel, daar is 'n baie ontslag in wat ek hier doen. 917 00:41:25,990 --> 00:41:28,156 >> Ek het genoem dat die woord kleur in 'n paar van die plekke. 918 00:41:28,156 --> 00:41:31,630 Ek het genoem lettergrootte in 'n paar plekke en vet in 'n paar plekke. 919 00:41:31,630 --> 00:41:34,870 En fundamenteel, ek is mede vermenging twee tale. 920 00:41:34,870 --> 00:41:38,100 Ek het met my HTML tags en my eienskappe en dan is almal van 'n skielike, 921 00:41:38,100 --> 00:41:40,100 tussen aanhalings, ek het die tweede taal van vandag 922 00:41:40,100 --> 00:41:43,830 genoem CSS, wat weer, is net hierdie sleutel waarde pare of hierdie eienskappe 923 00:41:43,830 --> 00:41:45,280 geskei deur kommas. 924 00:41:45,280 --> 00:41:47,700 >> Dit blyk dat baie soos in C waar ons 925 00:41:47,700 --> 00:41:50,550 kan begin om uit faktor sommige kode in kop lêers, 926 00:41:50,550 --> 00:41:53,520 so kan ons dieselfde doen in HTML. 927 00:41:53,520 --> 00:41:56,030 En 'n stap in die rigting wat is soos volg. 928 00:41:56,030 --> 00:42:02,230 Let daarop dat hierdie weergawe, is CSS1.html Struktureel presies dieselfde webblad. 929 00:42:02,230 --> 00:42:05,250 So ek het 'n hele klomp het van divs, maar hierdie keer, ek het 930 00:42:05,250 --> 00:42:07,220 ontslae geraak van die omslag div soos jy sal sien. 931 00:42:07,220 --> 00:42:12,390 >> En ek het die drie divs gegee top, middel, en onder, unieke ID's. 932 00:42:12,390 --> 00:42:14,760 Dit is mooi, want deur gee daardie afdelings 933 00:42:14,760 --> 00:42:18,715 van die bladsy unieke identifiseerders, Ek kan hulle elders verwys. 934 00:42:18,715 --> 00:42:19,215 Waar? 935 00:42:19,215 --> 00:42:21,070 Wel, laat ek blaai up. 936 00:42:21,070 --> 00:42:24,070 En tot dusver, enige tyd wat ons het gekyk aan die hoof van 'n webblad, wat is 937 00:42:24,070 --> 00:42:28,560 die enigste tag ons gehad het die hoof van 'n webblad? 938 00:42:28,560 --> 00:42:29,740 'N bietjie harder. 939 00:42:29,740 --> 00:42:30,799 Net die titel tot dusver. 940 00:42:30,799 --> 00:42:32,590 Maar dit blyk daar is 'n paar ander dinge 941 00:42:32,590 --> 00:42:35,840 jy kan daar sit, een van wat dit genoem 'n styl tag. 942 00:42:35,840 --> 00:42:37,850 So 'n oomblik gelede, het ons gekyk 'n kenmerk styl. 943 00:42:37,850 --> 00:42:39,150 Blyk daar is 'n styl tag. 944 00:42:39,150 --> 00:42:41,200 Dit behoort binne die hoof van 'n webblad. 945 00:42:41,200 --> 00:42:42,840 En nou sien wat ek doen. 946 00:42:42,840 --> 00:42:46,540 Ek het binne hierdie styl tag die volgende. 947 00:42:46,540 --> 00:42:51,190 Ek is letterlik noem op die lyn 20 die naam van 'n tag wat ek wil stileer. 948 00:42:51,190 --> 00:42:53,489 >> Dan moet ek oop krullerige brace en gesluit krullerige brace. 949 00:42:53,489 --> 00:42:56,030 So soortgelyk in die gees aan C, maar Weereens, dit is nie 'n funksie, 950 00:42:56,030 --> 00:42:57,796 dit is net 'n sintaktiese detail hier. 951 00:42:57,796 --> 00:43:00,170 En dan natuurlik, ek sê die leser, hey leser, 952 00:43:00,170 --> 00:43:05,210 maak die hele liggaam van die bladsy het 'n teks belyning van sentrum. 953 00:43:05,210 --> 00:43:06,930 En dan is dit gesê die volgende. 954 00:43:06,930 --> 00:43:12,600 Hey leser, as jy sien 'n HTML element of tag in die bladsy wat 955 00:43:12,600 --> 00:43:17,040 het 'n unieke identifiseerder van die top, so die hash simbool hier net beteken 956 00:43:17,040 --> 00:43:21,010 unieke idee van top, gaan voort en maak sy lettergrootte 36 957 00:43:21,010 --> 00:43:22,490 en sy font gewig vet. 958 00:43:22,490 --> 00:43:26,840 >> Hey leser, 'n element waarvan ID is middel, maak dit 24 pixels. 959 00:43:26,840 --> 00:43:31,070 En hey leser, as jy sien 'n idee van onder, maak dit 12 pixels. 960 00:43:31,070 --> 00:43:33,540 Die effek op die ou end is presies die Sam. 961 00:43:33,540 --> 00:43:36,500 As ek gaan in CSS 1, die page lyk dieselfde. 962 00:43:36,500 --> 00:43:39,810 Maar ons is 'n stap in die rigting 'n effens beter ontwerp. 963 00:43:39,810 --> 00:43:44,850 Laat my nou terug te gaan hier om CSS2 en sien wat anders wat ek gedoen het. 964 00:43:44,850 --> 00:43:48,030 >> Nou is die bladsy is regtig, regtig skoon te maak. 965 00:43:48,030 --> 00:43:50,730 In werklikheid, kan ek al te pas die inhoud op 'n bladsy hier. 966 00:43:50,730 --> 00:43:54,270 Maar wat nuwe tag het ek bekendgestel, natuurlik? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 En dit is nie die beste naam vir 'n tag, want dit is nie 'n skakel in die sin 969 00:43:57,853 --> 00:44:00,780 dat ons dit ken nie, maar dit beteken 'n skakel in 'n ander lêer. 970 00:44:00,780 --> 00:44:02,890 Dit is soort van soos skerp sluit in C. 971 00:44:02,890 --> 00:44:06,280 >> Dit is die manier HTML om hey leser sê, 972 00:44:06,280 --> 00:44:10,240 gaan kry van die inhoud van die lêer genaamd css2.css. 973 00:44:10,240 --> 00:44:12,880 Die verhouding, vir my, is dat dit 'n styl neer. 974 00:44:12,880 --> 00:44:17,980 En inderdaad, dit is wat die een van die S se cascading style sheets beteken. 975 00:44:17,980 --> 00:44:20,350 Dit is 'n stylblad. 976 00:44:20,350 --> 00:44:23,120 Dis net die teks lêer met 'n hele klomp van die eiendom. 977 00:44:23,120 --> 00:44:25,940 Dit is 'n hele klomp van die style wat jy wil aansoek doen om 'n bladsy. 978 00:44:25,940 --> 00:44:28,860 >> En so gaan dit blykbaar is verwys na 'n tweede lêer. 979 00:44:28,860 --> 00:44:32,970 En as ek oop dat CSS2.css, sien dat alles wat ek gedoen het 980 00:44:32,970 --> 00:44:35,900 is kopieer en plak al van hierdie in die lêer. 981 00:44:35,900 --> 00:44:38,220 En nou, selfs as jy nog nooit voordat gekodeerde hierdie dinge, 982 00:44:38,220 --> 00:44:40,700 Dink aan die spreekwoordelike ingenieurswese hoed 983 00:44:40,700 --> 00:44:44,220 op, waarom is dit 'n beter ontwerp waarskynlik? 984 00:44:44,220 --> 00:44:48,910 Factoring uit die CSS eienskappe, om hulle in hul eie lêer. 985 00:44:48,910 --> 00:44:51,330 Selfs al het ons hierdie opgelos probleem soos vyf minute gelede 986 00:44:51,330 --> 00:44:52,600 in die heel eerste weergawe. 987 00:44:52,600 --> 00:44:55,730 >> Ons het nie die verbetering van die bladsy stilisties, 988 00:44:55,730 --> 00:44:57,520 dit is net 'n beter ontwerp in 'n sekere sin. 989 00:44:57,520 --> 00:44:58,990 Hoekom dink jy? 990 00:44:58,990 --> 00:45:01,510 Ja. 991 00:45:01,510 --> 00:45:02,260 Meer buigsame 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 So as jy wil om te gaan rug en dinge verander, 995 00:45:07,373 --> 00:45:09,540 nou, jy het een plek waar jy kan dinge verander. 996 00:45:09,540 --> 00:45:11,622 En in die feit, vir iets soos probleem stel sewe 997 00:45:11,622 --> 00:45:13,690 waar ons 'n sal implementeer -beurs webwerf, 998 00:45:13,690 --> 00:45:15,523 wat gaan om 'n het hele klomp van bladsye. 999 00:45:15,523 --> 00:45:17,620 En dit sou werklik irriterende as jy besluit, hm, 1000 00:45:17,620 --> 00:45:21,630 Ek hou nie regtig 24 pixels, ek wil dit moet wees 28 pixels of effens groter. 1001 00:45:21,630 --> 00:45:23,550 En dan moet 'n doen globale vind en te vervang 1002 00:45:23,550 --> 00:45:27,560 of al die lêers van jou webwerf se oop eenvoudig om werklik te verander een waarde. 1003 00:45:27,560 --> 00:45:31,290 Deur factoring uit hierdie style in een sentrale plek, 1004 00:45:31,290 --> 00:45:34,720 kan jy nou oop een tekslêer in CS50IDE in 'n program, 1005 00:45:34,720 --> 00:45:36,479 dit verander, behalwe dit, en gedoen het. 1006 00:45:36,479 --> 00:45:38,270 Jy het gepropageer diegene veranderinge oral. 1007 00:45:38,270 --> 00:45:42,450 En dit sou dieselfde wees in 'n dot h lêer as well. 1008 00:45:42,450 --> 00:45:46,697 So enige vrae dus ver oor hierdie sintaksis? 1009 00:45:46,697 --> 00:45:48,530 Alle reg, so ons het gedoen alles wat dit lyk 1010 00:45:48,530 --> 00:45:51,170 behalwe eintlik implementeer hiperskakels. 1011 00:45:51,170 --> 00:45:52,740 En so laat ons gaan voort en doen dit. 1012 00:45:52,740 --> 00:45:54,830 Laat my gaan voort en skep 'n nuwe lêer hier. 1013 00:45:54,830 --> 00:45:59,970 Ek gaan om dit te noem link.html, sit in vandag se kode. 1014 00:45:59,970 --> 00:46:03,000 >> En ek gaan oop om te doen bracket tipe doc html. 1015 00:46:03,000 --> 00:46:05,970 As 'n eenkant, hierdie ding by die top, hierdie dokument tipe verklaring 1016 00:46:05,970 --> 00:46:08,420 dit is die enigste een wat vreemd met die uitroepteken. 1017 00:46:08,420 --> 00:46:12,100 Jy moet net om dit daar te doen en dit beteken dat ons met behulp van HTML-weergawe 5. 1018 00:46:12,100 --> 00:46:14,460 Ouer weergawes van taal baie langer moes 1019 00:46:14,460 --> 00:46:16,400 snare wat jy nodig het om daar te sit. 1020 00:46:16,400 --> 00:46:18,620 So hier is 'n voorbeeld genoem skakel. 1021 00:46:18,620 --> 00:46:20,950 >> Ek het 'n liggaam van my webblad hier. 1022 00:46:20,950 --> 00:46:29,770 En hier, 'n href gelykes Kom ons sê HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 en my gunsteling webwerf, sal ons sê. 1024 00:46:35,420 --> 00:46:38,550 Alle reg, sodat 'n baie onskadelike, use bladsy. 1025 00:46:38,550 --> 00:46:42,950 As ek nou gaan in my gids lys hier en maak link.html, 1026 00:46:42,950 --> 00:46:44,780 ons het hiper teks. 1027 00:46:44,780 --> 00:46:47,410 >> En inderdaad, dit is waar die H in HTTP vandaan kom. 1028 00:46:47,410 --> 00:46:51,580 Hypertext Transfer Protocol is oor die oordrag teks 1029 00:46:51,580 --> 00:46:53,840 wat skakels na ander hulpbronne. 1030 00:46:53,840 --> 00:46:58,210 En inderdaad, hier is die bekende, As retro, blou skakel dat as gekliek, 1031 00:46:58,210 --> 00:47:02,607 sal eintlik lei my Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Nou, o, wat kom uit gou. 1033 00:47:03,940 --> 00:47:08,970 Alle reg, sodat nou, wat is 'n paar van die implikasies van hierdie? 1034 00:47:08,970 --> 00:47:11,610 >> En eerlik, die wêreld begin om 'n bietjie meer vertroud te kry 1035 00:47:11,610 --> 00:47:15,090 en ook 'n bietjie vreesaanjaend maar ook 'n bietjie meer 1036 00:47:15,090 --> 00:47:17,840 self te verdedig sodra jy begin om hierdie dinge te verstaan. 1037 00:47:17,840 --> 00:47:21,610 Omdat die kans is, sommige van julle, as jy gaan deur jou Gmail spam gids of selfs 1038 00:47:21,610 --> 00:47:23,990 jou posbus, jy het waarskynlik gekry 'n soort van e-pos 1039 00:47:23,990 --> 00:47:26,980 dit is wat vra dat jy verander jou wagwoord dalk of dalk verifieer 1040 00:47:26,980 --> 00:47:28,910 jou PayPal geloofsbriewe of iets anders. 1041 00:47:28,910 --> 00:47:34,510 >> En in die feit, kan jy ontvang iets wat sê soos, kliek hier 1042 00:47:34,510 --> 00:47:42,260 om jou PayPal wagwoord te herstel. 1043 00:47:42,260 --> 00:47:44,130 En nou, kennisgewing, indien dit is nie Disney.com 1044 00:47:44,130 --> 00:47:51,600 maar soos badplace.com en herlaai, daarop te let dat die teks hier 1045 00:47:51,600 --> 00:47:53,710 kon niks hoegenaamd te sê. 1046 00:47:53,710 --> 00:47:55,260 En in die feit, dit is net woorde. 1047 00:47:55,260 --> 00:48:04,610 Hoekom het ek nie eintlik super kwaadwillige en sê http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Klik hier weer jou PayPal wagwoord en nou herlaai. 1049 00:48:14,090 --> 00:48:16,220 Dit lyk mooi wettige, reg? 1050 00:48:16,220 --> 00:48:20,470 Ek bedoel, ek sou nie klik op n e-pos wat net sê dit. 1051 00:48:20,470 --> 00:48:22,450 Maar kennis van die digotomie hier. 1052 00:48:22,450 --> 00:48:26,880 Dit sê www.paypal.com, en in die feit, wag 'n minuut, 1053 00:48:26,880 --> 00:48:29,210 ons weet wat jy wil die s vir veiligheid. 1054 00:48:29,210 --> 00:48:35,450 So nou, gaan na www.paypal.com HTTPS, maar as jy dit nog nooit tevore gedoen het, 1055 00:48:35,450 --> 00:48:38,182 doen kry in die gewoonte hang oor bietjie links hier. 1056 00:48:38,182 --> 00:48:39,890 En dit is moeilik om te sien op die skerm is daar, 1057 00:48:39,890 --> 00:48:41,340 en dit is hier nie al wat makliker. 1058 00:48:41,340 --> 00:48:43,615 Maar pad af hier in die klein hoekie 1059 00:48:43,615 --> 00:48:45,740 doen die leser eintlik julle wat ons gaan vertel 1060 00:48:45,740 --> 00:48:48,850 om badplace.com plaas van Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Nou, waar gaan ons met hierdie? 1062 00:48:51,620 --> 00:48:54,859 Al die voorbeelde wat ons vandag gedoen het, ons het hard gekodeer en die hand getik. 1063 00:48:54,859 --> 00:48:56,900 Die web is ongelooflik oninteressant wanneer jy hard 1064 00:48:56,900 --> 00:48:59,844 kodeer jou webblaaie so dat die inhoud is staties en nooit verander. 1065 00:48:59,844 --> 00:49:01,760 Natuurlik, almal van ons gunsteling webwerwe vandag 1066 00:49:01,760 --> 00:49:04,470 of dit nou Gmail of Twitter of Facebook of enige aantal ander 1067 00:49:04,470 --> 00:49:05,290 dinamies. 1068 00:49:05,290 --> 00:49:07,340 Hulle is die verandering in reaksie op die gebruiker se toevoer 1069 00:49:07,340 --> 00:49:08,840 net soos die Google soek resultate. 1070 00:49:08,840 --> 00:49:12,415 >> En so op Woensdag, wat ons doen, is laat ons HTML en CSS bekendstelling 1071 00:49:12,415 --> 00:49:14,290 agter ons en ons neem vanselfsprekend dat ons nou 1072 00:49:14,290 --> 00:49:16,640 weet dit en ons stel 'n nuwe programmeertaal 1073 00:49:16,640 --> 00:49:19,050 genoem PHP, wat graag C, gaan ons te gee 1074 00:49:19,050 --> 00:49:22,450 die krag om werklik te skep programme wat hulself genereer uitset. 1075 00:49:22,450 --> 00:49:25,900 In hierdie geval, sal ons gebruik PHP dinamiese web te genereer 1076 00:49:25,900 --> 00:49:27,340 bladsye met hierdie nuwe taal. 1077 00:49:27,340 --> 00:49:28,989 Sodat meer op daardie Woensdag. 1078 00:49:28,989 --> 00:49:29,530 Sien jou dan. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [Speel van musiek] 1081 00:49:37,380 --> 00:52:38,864