1 00:00:00,000 --> 00:00:03,486 >> [Musik spiller] 2 00:00:03,486 --> 00:00:10,460 3 00:00:10,460 --> 00:00:14,250 >> David J MALAN: Dette er CS50 og dette er starten på uge 7. 4 00:00:14,250 --> 00:00:15,060 Så velkommen tilbage. 5 00:00:15,060 --> 00:00:17,540 Og du kan huske, at i problemer sæt fire, 6 00:00:17,540 --> 00:00:21,510 der var lidt af en skattejagt for nogle fantastiske præmier hvorved 7 00:00:21,510 --> 00:00:24,219 efter du gendanne billeder fra personale både her og i New Haven, 8 00:00:24,219 --> 00:00:27,468 du blev udfordret til at finde så mange af disse dataloger, som du kunne. 9 00:00:27,468 --> 00:00:29,550 Og vi har fået en hel bundt af indlæg. 10 00:00:29,550 --> 00:00:31,930 Tænkte jeg ville dele et par med jer her i dag. 11 00:00:31,930 --> 00:00:35,100 >> Og vi vil sende alle disse online. 12 00:00:35,100 --> 00:00:39,310 Men i særdeleshed, jeg ønskede at henlede Deres opmærksomhed at-- godt én, 13 00:00:39,310 --> 00:00:42,670 Sam var i en ganske få af dem generelt udgør som denne. 14 00:00:42,670 --> 00:00:45,750 Men det fremgår, at fra morges, vinderen 15 00:00:45,750 --> 00:00:51,170 blev en vis person ved navn Ken med 24 af de ansatte fanget på kamera 16 00:00:51,170 --> 00:00:54,600 eller et par mere, når man tager i tegner flere medarbejdere i billederne. 17 00:00:54,600 --> 00:00:58,300 På billedet her er Ken næste til Maria i New Haven. 18 00:00:58,300 --> 00:01:01,300 >> Nu, Ken, selv om, vender out er lidt af et hjørne sag 19 00:01:01,300 --> 00:01:02,880 der er endnu ikke sket før. 20 00:01:02,880 --> 00:01:05,713 Det viser sig, at det ikke forekomme til mig at sætte småt i problemer 21 00:01:05,713 --> 00:01:09,710 sæt fire, der siger, at personalet er berettiget til de fabelagtige præmier 22 00:01:09,710 --> 00:01:13,130 fordi Ken er naturligvis en af fotograferne på vores medarbejdere. 23 00:01:13,130 --> 00:01:16,820 Nu, med det sagt, han oprindeligt skrev til mig for at sige 24 00:01:16,820 --> 00:01:19,180 venligst ikke bogføre disse fotos online. 25 00:01:19,180 --> 00:01:21,630 Jeg tror en stor del fordi de fleste af de billeder 26 00:01:21,630 --> 00:01:24,499 at denne fotograf tog ser lidt noget som dette. 27 00:01:24,499 --> 00:01:25,040 Og lignende. 28 00:01:25,040 --> 00:01:28,990 >> Men Ken vil have mig til at berolige dig at han er en meget god fotograf, 29 00:01:28,990 --> 00:01:33,190 han er en professionel, han tager billeder, der ikke er sløret, 30 00:01:33,190 --> 00:01:37,270 som er bedre i fokus, og han tog en hel del af vores eget personale. 31 00:01:37,270 --> 00:01:40,370 Men i stedet for kun at anerkende Ken, hvad vi troede, vi ville gøre 32 00:01:40,370 --> 00:01:43,390 er at gå gennem listen over faktiske studerende, der indsendte. 33 00:01:43,390 --> 00:01:48,640 Og det viser sig, at Lance med 15 billeder pr morges 34 00:01:48,640 --> 00:01:50,030 var vores vinder. 35 00:01:50,030 --> 00:01:55,730 >> Og afbilledet her er Lance med Colton, med Skaz, med mig selv, og med Sam. 36 00:01:55,730 --> 00:02:00,230 Men så viser det sig, at fra 11:46, så bare en lille smule siden, 37 00:02:00,230 --> 00:02:04,380 Jeg gik tilbage til min e-mail og fundet at vi havde endnu et indsendelse 38 00:02:04,380 --> 00:02:08,300 af en studerende ved navn Bonnie hvis e-mail sagde kun dette. 39 00:02:08,300 --> 00:02:10,800 Vil ikke lyve, jeg er gøre dette under klasse. 40 00:02:10,800 --> 00:02:17,620 Og derefter fortsatte med at vedhæfte bare 14 billeder, en genert af Lances 15. 41 00:02:17,620 --> 00:02:22,690 >> Men i Bonnie s fotos, viser det sig ud var flere medarbejdere, Sam 42 00:02:22,690 --> 00:02:25,960 blandt dem, så hvad vi troede, vi ville gøre, er at anerkende begge disse. 43 00:02:25,960 --> 00:02:29,240 Så ud over at få Dropbox plads, at alle, der har deltaget 44 00:02:29,240 --> 00:02:33,900 modtager disse to sektioner vil også modtage en dejlig sørget frokost for dem 45 00:02:33,900 --> 00:02:36,100 og deres sektion hjælpere i den kommende uge. 46 00:02:36,100 --> 00:02:38,970 Og så du vil høre fra os, Lance og Bonnie, om der. 47 00:02:38,970 --> 00:02:40,002 Så store tillykke til dem. 48 00:02:40,002 --> 00:02:42,210 Nu, de af jer, der ville som frokost mere generelt 49 00:02:42,210 --> 00:02:45,320 ved, at CS50 frokost i Cambridge og New Haven er denne fredag. 50 00:02:45,320 --> 00:02:48,510 Gå til CS50 hjemmeside skråstreg RSVP. 51 00:02:48,510 --> 00:02:49,800 Og nu et ord på seminarer. 52 00:02:49,800 --> 00:02:50,730 Mere curricularly. 53 00:02:50,730 --> 00:02:52,490 Så vi nærmer sig punkt af semestret 54 00:02:52,490 --> 00:02:55,200 hvor du skal starte tænker endelige projekter. 55 00:02:55,200 --> 00:02:59,309 Og i virkeligheden, i bare en smule, vil såkaldt pre forslag skyldes. 56 00:02:59,309 --> 00:03:01,850 Så pre forslag er beregnet til være temmelig lav effekt og virkelig 57 00:03:01,850 --> 00:03:04,109 blot en mulighed for dig til at komponere en kort note 58 00:03:04,109 --> 00:03:06,900 din undervisning stipendiat at underrette ham eller hende, hvad du tænker dig 59 00:03:06,900 --> 00:03:09,140 måske ønsker at gøre for din endelige projekt. 60 00:03:09,140 --> 00:03:11,730 >> Nu, mange studerende ender gør webbaseret afgangsprojekter. 61 00:03:11,730 --> 00:03:13,800 Og selvfølgelig er vi bare nu i sidste uge i dette 62 00:03:13,800 --> 00:03:15,890 og ud over dykning i web programmering. 63 00:03:15,890 --> 00:03:18,200 Så ikke at bekymre dig, hvis du har absolut ingen idé om, hvordan 64 00:03:18,200 --> 00:03:21,594 du ville bygge de idéer, du kan have i dit sind. 65 00:03:21,594 --> 00:03:24,510 Dette er egentlig bare en tvinger funktion at få dig til at tænke og tale 66 00:03:24,510 --> 00:03:25,650 med din TF om det. 67 00:03:25,650 --> 00:03:28,810 Men for at hjælpe dig med det, og med afsluttende projekter i sidste ende, 68 00:03:28,810 --> 00:03:31,750 vide, at CS50 har en tradition for at tilbyde seminarer. 69 00:03:31,750 --> 00:03:36,084 >> Og disse er valgfrie, hænder på, eller foredrag baseret på muligheder 70 00:03:36,084 --> 00:03:39,000 at lære mere om emner, der er lidt underordnet kursets 71 00:03:39,000 --> 00:03:43,310 pensum, men ikke desto mindre vidunderlige materiale til at køre afgangsprojekter. 72 00:03:43,310 --> 00:03:46,840 Og så dette er den liste, der er CS50 ansatte her i New Haven 73 00:03:46,840 --> 00:03:48,600 er kommet op med for i år om iOS 74 00:03:48,600 --> 00:03:50,730 programmering, Android programmering, spiludvikling, 75 00:03:50,730 --> 00:03:54,480 og klaser af flere værktøjer og sprog og teknikker. 76 00:03:54,480 --> 00:03:56,780 >> Så hold øje med CS50 hjemmeside. 77 00:03:56,780 --> 00:04:00,110 Og i mellemtiden, hvis du gerne vil registrere din interesse i nogen af ​​disse, 78 00:04:00,110 --> 00:04:02,510 gå til CS50 s skråstreg registret. 79 00:04:02,510 --> 00:04:05,770 Og vi vil derefter følge op med hensyn til dage og flytider og steder 80 00:04:05,770 --> 00:04:09,090 og everything-- fleste alt vil streames, og også tilgængelige on-demand 81 00:04:09,090 --> 00:04:11,750 efter hvis du ikke rent faktisk kan gøre det. 82 00:04:11,750 --> 00:04:15,800 Så uden videre, vi slap sidste gang med GET. 83 00:04:15,800 --> 00:04:19,610 >> Og det var som det budskab, der var indersiden af ​​virtuelle konvolut, husker, 84 00:04:19,610 --> 00:04:23,960 at vi gik fra router til router til router mellem en webbrowser og en web 85 00:04:23,960 --> 00:04:24,487 server. 86 00:04:24,487 --> 00:04:26,695 Og det budskab kiggede lidt noget som dette. 87 00:04:26,695 --> 00:04:29,700 Dette var mere Arcane budskab, var faktisk inde i en konvolut 88 00:04:29,700 --> 00:04:34,440 skrevet på et stykke papir, hvis første linje siger bogstaveligt, får skråstreg. 89 00:04:34,440 --> 00:04:37,830 >> Og ligesom en tilregnelighed check, hvad gjorde skråstreg betegne? 90 00:04:37,830 --> 00:04:40,455 Hvad betyder slash mener, når anmoder om en hjemmeside? 91 00:04:40,455 --> 00:04:43,070 92 00:04:43,070 --> 00:04:44,250 Du beder om det hele tiden. 93 00:04:44,250 --> 00:04:47,333 De fleste hver gang du besøger et websted, du faktisk ikke indtaste et filnavn. 94 00:04:47,333 --> 00:04:50,960 Du har sikkert bare gå til Facebook.com, Indtast, gmail.com eller lignende. 95 00:04:50,960 --> 00:04:52,260 Og hvad betyder skråstreg repræsenterer? 96 00:04:52,260 --> 00:04:53,506 Hvad fil? 97 00:04:53,506 --> 00:04:54,630 Hvad eller side, specielt? 98 00:04:54,630 --> 00:04:59,642 99 00:04:59,642 --> 00:05:00,720 >> Indekset, ja. 100 00:05:00,720 --> 00:05:01,810 Så standardsiden. 101 00:05:01,810 --> 00:05:04,810 Så hvis du ikke angiver en fil navn, som vi vil begynde at se, 102 00:05:04,810 --> 00:05:07,750 du faktisk bare anmoder give mig standardsiden Facebook 103 00:05:07,750 --> 00:05:10,800 eller give mig min indbakke eller give mig standardsiden nyheder 104 00:05:10,800 --> 00:05:12,510 på CNN hjemmeside eller lignende. 105 00:05:12,510 --> 00:05:15,220 Og en server så reagerer på dette budskab med noget 106 00:05:15,220 --> 00:05:18,420 som dette, sige ja, jeg tale HTTP version 1.1. 107 00:05:18,420 --> 00:05:21,130 >> 200, som er en status kode, som vi mennesker sjældent 108 00:05:21,130 --> 00:05:22,790 nogensinde se, fordi det er godt. 109 00:05:22,790 --> 00:05:26,640 Fordi det betyder OK, anmodningen blev modtaget og håndteres korrekt. 110 00:05:26,640 --> 00:05:28,960 Og den type indhold tilsyneladende i svaret 111 00:05:28,960 --> 00:05:31,170 er ganske ofte, men ikke altid, tekst. 112 00:05:31,170 --> 00:05:32,580 Og specifikt HTML. 113 00:05:32,580 --> 00:05:34,760 Og det er faktisk hvor vi ser på i dag. 114 00:05:34,760 --> 00:05:37,140 >> Så i virkeligheden, jeg kommer til at gå videre og åbne en browser. 115 00:05:37,140 --> 00:05:40,410 Jeg har tænkt mig at bruge Chrome, kan du bruge de fleste enhver browser i de kommende uger. 116 00:05:40,410 --> 00:05:42,410 Vi anbefaler generelt Chrome fordi det er især 117 00:05:42,410 --> 00:05:43,750 godt for software-udviklere. 118 00:05:43,750 --> 00:05:46,070 Det har fået en masse indbygget værktøjer, der gør det nemmere 119 00:05:46,070 --> 00:05:49,800 at udvikle ikke kun HTML og CSS, ting, vi vil begynde at tale om i dag, 120 00:05:49,800 --> 00:05:51,530 men også andre sprog. 121 00:05:51,530 --> 00:05:55,530 >> Og jeg har tænkt mig at gå videre og gå at-- Jeg har tænkt mig at styre klik eller højre 122 00:05:55,530 --> 00:05:57,210 Klik et vilkårligt sted på en webside. 123 00:05:57,210 --> 00:05:59,070 Og jeg har tænkt mig at gå til Undersøg Element. 124 00:05:59,070 --> 00:06:03,850 Og jeg har tænkt mig at nappe min skærmen bare en lille smule her. 125 00:06:03,850 --> 00:06:05,790 Lad mig flytte denne til bunden. 126 00:06:05,790 --> 00:06:08,140 Så dette er, hvad der kaldes Chromes Inspector. 127 00:06:08,140 --> 00:06:11,010 Så dette er ligesom en debugging værktøj indbygget i Chrome. 128 00:06:11,010 --> 00:06:13,520 >> Alle jer allerede har denne hvis du har været bruger Chrome. 129 00:06:13,520 --> 00:06:17,169 Og det giver dig mulighed for at se, hvad der foregår på under kølerhjelmen af ​​en eller anden webside. 130 00:06:17,169 --> 00:06:19,210 Så lad os faktisk tage en se på dette som følger. 131 00:06:19,210 --> 00:06:21,251 Det har måde flere funktioner og vi interesserer os for i dag. 132 00:06:21,251 --> 00:06:22,760 Men der er disse faner herovre. 133 00:06:22,760 --> 00:06:25,890 Elementer, netværk, kilder, tidslinje, og nogle andre ting. 134 00:06:25,890 --> 00:06:27,800 Jeg har tænkt mig at klikke på Netværk for et øjeblik. 135 00:06:27,800 --> 00:06:30,500 >> Og det er lidt overvældende ved første øjekast her. 136 00:06:30,500 --> 00:06:34,190 Men hvad jeg har tænkt mig at gøre, er at lade mig forenkle det en lille smule. 137 00:06:34,190 --> 00:06:37,560 Jeg har tænkt mig at tænde for optage lys, så det er rødt. 138 00:06:37,560 --> 00:06:39,140 Og jeg har tænkt mig at sige bevare log. 139 00:06:39,140 --> 00:06:41,015 Og det er bare en lille smule ting jeg regnet ud 140 00:06:41,015 --> 00:06:44,120 over tid, der kommer til at spare alt hvad der sker i browseren. 141 00:06:44,120 --> 00:06:50,030 Og nu jeg har tænkt mig at gå til http://facebook.com. 142 00:06:50,030 --> 00:06:52,690 >> Faktisk, lad os gøre www for god foranstaltning, skråstreg. 143 00:06:52,690 --> 00:06:53,643 Enter. 144 00:06:53,643 --> 00:06:56,180 Så en webadresse, som mange af du måske har besøgt. 145 00:06:56,180 --> 00:06:58,830 Og nu Facebooks web side kommer op i toppen. 146 00:06:58,830 --> 00:07:02,350 Og så en hel masse stuff fløj ved nederst. 147 00:07:02,350 --> 00:07:04,830 Og i virkeligheden viser det sig, at når du besøger Facebook.com, 148 00:07:04,830 --> 00:07:09,320 du er ikke bare at gøre en HTTP-anmodning, Det viser sig, at gå til Facebook.com 149 00:07:09,320 --> 00:07:14,320 sender 41 af disse kuverter, hver med sin egen GET-anmodning, 150 00:07:14,320 --> 00:07:18,360 som anført, omend bag skærmen her, nederst på skærmen, 151 00:07:18,360 --> 00:07:24,040 betyder det, at, ja, min browser lavet 41 anmodningerne. 152 00:07:24,040 --> 00:07:29,689 >> Og i alt, det overførte 861 kilobyte og det tog en eller anden grund 153 00:07:29,689 --> 00:07:31,730 så mange som otte sekunder at downloade alt dette. 154 00:07:31,730 --> 00:07:33,790 Så det er faktisk lidt underligt at Facebook websted ville tage at 155 00:07:33,790 --> 00:07:35,600 lang, men så må det være i dette tilfælde. 156 00:07:35,600 --> 00:07:39,520 Nu, alt dette ved jeg ikke rigtig pleje over undtagen for den øverste anmodning. 157 00:07:39,520 --> 00:07:46,440 Så lad os gå til denne ene lige her og lad mig zoome ud for bare et øjeblik. 158 00:07:46,440 --> 00:07:47,754 >> Og lad mig zoome ind på dette. 159 00:07:47,754 --> 00:07:50,670 Så hvad jeg har gjort på venstre selvom der er en masse i gang herovre 160 00:07:50,670 --> 00:07:53,360 er jeg har fremhævet Facebook.com og derefter 161 00:07:53,360 --> 00:07:56,540 bemærke, at jeg rulle ned, rulle ned, rulle ned, 162 00:07:56,540 --> 00:07:58,330 at anmode overskrifter. 163 00:07:58,330 --> 00:08:01,720 Og du vil se, at Chrome viser me væsentlige de indre indhold 164 00:08:01,720 --> 00:08:02,810 af anmodningen jeg gjort. 165 00:08:02,810 --> 00:08:06,130 Det er ikke formatering i helt det samme måde, men bemærker at der er omtale af få, 166 00:08:06,130 --> 00:08:09,481 mærke der er omtale af værten, Facebook.com, stien eller skråstreg, 167 00:08:09,481 --> 00:08:10,730 som er den fil, jeg anmodede om. 168 00:08:10,730 --> 00:08:12,930 >> Og derefter, hvis jeg ruller sikkerhedskopiere, vil vi faktisk 169 00:08:12,930 --> 00:08:17,270 se, at hvad Facebook returnerede for mig er alle disse overskrifter. 170 00:08:17,270 --> 00:08:21,040 Så inde i den virtuelle kuvert faktisk er en masse vigtige værdipar. 171 00:08:21,040 --> 00:08:23,130 Et ord, et kolon, og derefter en værdi. 172 00:08:23,130 --> 00:08:25,050 Et ord, et kolon, og en værdi. 173 00:08:25,050 --> 00:08:26,160 Disse er kaldet overskrifter. 174 00:08:26,160 --> 00:08:31,860 Og der er langt mere detaljeret her end vi faktisk bekymrer sig om lige nu. 175 00:08:31,860 --> 00:08:33,750 >> Men dette er andet at sidste dernede, 176 00:08:33,750 --> 00:08:38,809 bemærke, at Facebook.com server, faktisk sagt her kommer noget tekst HTML. 177 00:08:38,809 --> 00:08:41,409 Så alt dette er at sige at når du anmoder om en web 178 00:08:41,409 --> 00:08:44,300 side fra en browser til en server, at serveren svarer 179 00:08:44,300 --> 00:08:47,630 med en konvolut af sine egne inden i hvilken er tekst. 180 00:08:47,630 --> 00:08:49,020 Med andre ord, HTML. 181 00:08:49,020 --> 00:08:50,590 HyperText Markup Language. 182 00:08:50,590 --> 00:08:53,200 Hvilket er et andet sprog at vi indfører i dag 183 00:08:53,200 --> 00:08:57,740 at mennesker eller computere genererer for at gennemføre websider. 184 00:08:57,740 --> 00:08:59,580 >> Konkret, lad os se på dette. 185 00:08:59,580 --> 00:09:03,277 Jeg har tænkt mig at nu gå tilbage til Facebooks hjemmeside. 186 00:09:03,277 --> 00:09:05,360 Og jeg har tænkt mig at bare klik kontrol eller højreklik 187 00:09:05,360 --> 00:09:07,634 og klik på Vis sidens kilde. 188 00:09:07,634 --> 00:09:10,550 Og selv hvis du ikke bruger Chrome, IE kan gøre dette, kan Firefox gøre dette, 189 00:09:10,550 --> 00:09:14,060 Safari kan gøre dette, selvom menuen muligheder ser måske lidt anderledes. 190 00:09:14,060 --> 00:09:18,990 Og dette er den HTML, som Mark og selskab på Facebook har skrevet. 191 00:09:18,990 --> 00:09:24,640 >> Og til kollektivt, dette sprog her implementerer den blå og hvide side 192 00:09:24,640 --> 00:09:26,370 at vi så et øjeblik siden. 193 00:09:26,370 --> 00:09:28,030 Nu, dette er en smule overvældende. 194 00:09:28,030 --> 00:09:31,400 Men hvis vi ser op på øverst til venstre, er vi vil begynde at se nogle mønstre. 195 00:09:31,400 --> 00:09:34,140 Det ser ud som om der er en masse af disse åbne vinkel beslag 196 00:09:34,140 --> 00:09:35,970 og så er der dette søgeord HTML. 197 00:09:35,970 --> 00:09:38,330 Her er en anden åben vinkelbeslag og hoved. 198 00:09:38,330 --> 00:09:41,560 >> Her er, hvis vi rulle ned og ned og ned, jeg er 199 00:09:41,560 --> 00:09:43,820 kommer til at gå videre og prøve at søge efter noget. 200 00:09:43,820 --> 00:09:48,510 Der vej over til højre her er åbneparentes organ. 201 00:09:48,510 --> 00:09:50,800 Og husker fra sidste gang, at vi foreslog 202 00:09:50,800 --> 00:09:53,364 at den enkleste webside at et menneske kunne skrive 203 00:09:53,364 --> 00:09:55,030 ser måske lidt noget som dette. 204 00:09:55,030 --> 00:09:58,430 Åbn HTML-tag, åbent hoved tag, åbne titel tag, 205 00:09:58,430 --> 00:10:03,230 derefter lukket titel, lukket hoved, åbne krop tag, noget tekst, lukket krop, 206 00:10:03,230 --> 00:10:04,720 lukket HTML. 207 00:10:04,720 --> 00:10:06,290 >> Men en pause her for et øjeblik. 208 00:10:06,290 --> 00:10:09,030 Denne kode, selvom du har aldrig skrevet det før 209 00:10:09,030 --> 00:10:11,864 men stadig ikke helt forstår hvad der foregår, ser temmelig godt. 210 00:10:11,864 --> 00:10:12,821 Ret, det er meget ren. 211 00:10:12,821 --> 00:10:14,120 Det er meget stilistisk rart. 212 00:10:14,120 --> 00:10:16,190 En masse af indrykning og hvide rum. 213 00:10:16,190 --> 00:10:18,020 Facebooks ikke. 214 00:10:18,020 --> 00:10:23,190 Så hvorfor er Facebook så meget værre end jeg til at skrive HTML? 215 00:10:23,190 --> 00:10:24,310 Tilsyneladende. 216 00:10:24,310 --> 00:10:26,899 >> Right, det er ligesom en ud af fem for stil. 217 00:10:26,899 --> 00:10:29,315 Der er en tvingende grund for dem at skære disse hjørner. 218 00:10:29,315 --> 00:10:31,069 219 00:10:31,069 --> 00:10:33,860 Okay, så de ikke ønsker at gøre det lettere for dig at læse det. 220 00:10:33,860 --> 00:10:36,940 Så i en vis forstand, de er obfuscating det, en slags scrambling det 221 00:10:36,940 --> 00:10:40,260 mindst æstetisk så at det er sværere for Myspace 222 00:10:40,260 --> 00:10:42,705 at gå og rip off deres hjemmeside og HTML for det. 223 00:10:42,705 --> 00:10:45,080 Det viser sig, at med programmer selv om, herunder Chrome, 224 00:10:45,080 --> 00:10:47,020 Vi kan rense dette op super nemt. 225 00:10:47,020 --> 00:10:49,420 Så det er ikke helt det som årsag. 226 00:10:49,420 --> 00:10:51,290 Hvad andet kunne være årsagen. 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, blanke koster data. 230 00:10:55,890 --> 00:10:56,598 Hvad mener du? 231 00:10:56,598 --> 00:11:02,250 232 00:11:02,250 --> 00:11:02,979 Ja, præcis. 233 00:11:02,979 --> 00:11:06,020 Hvis du trykker på tabulatortasten et parti eller den mellemrumstasten, overveje konsekvenserne. 234 00:11:06,020 --> 00:11:10,060 Så hver tast på tastaturet er en [Uhørligt] repræsenteret som en byte. 235 00:11:10,060 --> 00:11:14,560 >> Så formoder, at Mark eller et af de udviklere disse dage rammer mellemrumstasten bare én gang 236 00:11:14,560 --> 00:11:17,899 i denne HTML-side, repræsenterer Facebooks hjemmeside. 237 00:11:17,899 --> 00:11:19,690 Og Facebook har en masse af brugere i disse dage. 238 00:11:19,690 --> 00:11:24,030 Så formoder, at Facebooks hjemmeside besøges af en milliard mennesker i dag. 239 00:11:24,030 --> 00:11:27,020 Og nogen på Facebook har ramte mellemrumstasten bare én gang. 240 00:11:27,020 --> 00:11:29,890 >> Så en yderligere byte, en milliard anmodninger 241 00:11:29,890 --> 00:11:32,790 hvor meget mere data Facebook overføre over internettet 242 00:11:32,790 --> 00:11:37,160 fordi nogen ramte mellemrumstasten på hans eller hendes tastatur? 243 00:11:37,160 --> 00:11:41,660 En milliard byte, eller en gigabyte data sendes fra Facebook-servere 244 00:11:41,660 --> 00:11:43,626 til folk rundt omkring i verden uden god grund. 245 00:11:43,626 --> 00:11:44,750 Nu, det er bare en plads. 246 00:11:44,750 --> 00:11:48,866 >> Tænk, hvis vi rent faktisk rense dette ting og indrykket det og tilføjet 247 00:11:48,866 --> 00:11:50,990 en masse hvidt rum og tabulatortegn og mellemrum, 248 00:11:50,990 --> 00:11:53,656 du ender udgifter gigabyte, hvis ikke terra bytes mere plads. 249 00:11:53,656 --> 00:11:56,640 Og så super udbredt i faktiske verden af ​​web-udvikling 250 00:11:56,640 --> 00:11:58,950 er at minify din kode. 251 00:11:58,950 --> 00:12:01,280 Og vi vil til sidst se hvordan du kan gøre dette. 252 00:12:01,280 --> 00:12:04,630 >> Men i dag, vil vi begynde at skrive kode det er faktisk læses af os mennesker. 253 00:12:04,630 --> 00:12:10,120 Det viser sig dog, hvis du går tilbage til dette værktøj i Chrome Undersøg Element, 254 00:12:10,120 --> 00:12:12,030 tidligere, var vi på fanen Netværk. 255 00:12:12,030 --> 00:12:15,430 Det viser sig, at hvis du går til Fanen elementer, hvad du faktisk se 256 00:12:15,430 --> 00:12:19,230 er Chromes temmelig trykt version af den samme HTML. 257 00:12:19,230 --> 00:12:20,640 Så vi har deobfuscated det. 258 00:12:20,640 --> 00:12:22,472 Så det er ingen match for en computer. 259 00:12:22,472 --> 00:12:24,430 Og nu kan du faktisk klikke rundt og start 260 00:12:24,430 --> 00:12:27,630 at se hierarkiet, som er en webside. 261 00:12:27,630 --> 00:12:28,780 Så lad os rent faktisk gør dette. 262 00:12:28,780 --> 00:12:32,120 Jeg har tænkt mig at gå videre og åbne op på min Mac et program kaldet tekstredigering. 263 00:12:32,120 --> 00:12:35,490 Og minde om, at dette er bare en super simpel tekst-program. 264 00:12:35,490 --> 00:12:37,490 Windows har notepad.exe. 265 00:12:37,490 --> 00:12:39,820 Og jeg har tænkt mig at Verbatim skrive følgende. 266 00:12:39,820 --> 00:12:44,650 Doc typen HTML, åben konsol HTML, lukkede beslag HTML, 267 00:12:44,650 --> 00:12:49,000 vi har lederen af ​​siden her, enden af ​​hovedet på siden her, 268 00:12:49,000 --> 00:12:52,310 en titel vil være som, hej verden. 269 00:12:52,310 --> 00:12:56,660 >> Og derefter ned her, vi har brug for kroppen af ​​websiden. 270 00:12:56,660 --> 00:12:58,050 Lukket organ. 271 00:12:58,050 --> 00:13:00,700 Og derefter i her, hej verden. 272 00:13:00,700 --> 00:13:01,270 Okay. 273 00:13:01,270 --> 00:13:03,350 Så vi har skrevet en super hurtig webside. 274 00:13:03,350 --> 00:13:06,675 Jeg har tænkt mig at gemme det som hello.html på mit skrivebord. 275 00:13:06,675 --> 00:13:09,050 Min Mac vil klage, tænker, at, vent et minut, 276 00:13:09,050 --> 00:13:11,091 dette er en tekstfil, gøre du ønsker at kalde det .txt? 277 00:13:11,091 --> 00:13:13,300 Men nej, jeg vil bruge dot HTML. 278 00:13:13,300 --> 00:13:16,140 >> Og hvad er rart, hvis jeg bare dobbeltklikke på filen, 279 00:13:16,140 --> 00:13:18,600 hello.html, her er min webside. 280 00:13:18,600 --> 00:13:22,564 Desværre, jeg er den eneste person i verden 281 00:13:22,564 --> 00:13:23,980 der kan besøge denne side lige nu. 282 00:13:23,980 --> 00:13:26,734 Fordi hvor betyder det bor tilsyneladende? 283 00:13:26,734 --> 00:13:27,650 Det er på min Mac, ikke? 284 00:13:27,650 --> 00:13:28,470 Hvilket er ubrugelig. 285 00:13:28,470 --> 00:13:30,390 Ligesom ingen i dette rum endsige på internettet 286 00:13:30,390 --> 00:13:31,598 kan faktisk besøge den pågældende side. 287 00:13:31,598 --> 00:13:33,820 Så i dag, er vi nødt til at indføre et andet element. 288 00:13:33,820 --> 00:13:36,720 >> Og for at gøre dette, vil jeg gå videre og åbne cloud 9. 289 00:13:36,720 --> 00:13:40,090 Så cloud 9 er naturligvis et cloud baserede service-- CS50 290 00:13:40,090 --> 00:13:44,890 IDE-- Det har alle vores arbejdsområder kører et sted på internettet. 291 00:13:44,890 --> 00:13:48,330 Og det betyder, at alle vores filer er offentligt tilgængelige allerede. 292 00:13:48,330 --> 00:13:49,830 Så lad os gå videre og gøre dette. 293 00:13:49,830 --> 00:13:53,670 Jeg har tænkt mig at gå videre og oprette en ny fil NCS50IDE. 294 00:13:53,670 --> 00:13:58,819 Jeg har tænkt mig at gemme det som før som hello.html og klik på Gem. 295 00:13:58,819 --> 00:14:01,860 Og nu bare for at spare tid, vil jeg at gå videre og kopiere indsætte denne kode 296 00:14:01,860 --> 00:14:03,470 snarere end genindtaste det. 297 00:14:03,470 --> 00:14:04,550 Og gem den. 298 00:14:04,550 --> 00:14:07,550 Og så nu har jeg en fil kaldet hello.html. 299 00:14:07,550 --> 00:14:09,710 Men hvordan gør jeg faktisk åbne det som en webside? 300 00:14:09,710 --> 00:14:14,120 Tja, det viser sig den indbygget i CS50 IDE er ikke kun en compiler som klang 301 00:14:14,120 --> 00:14:16,670 og en debugger som GDB og klaser af andre programmer, 302 00:14:16,670 --> 00:14:21,140 der er faktisk et fuldt udbygget webserver køre inden CS50 IDE. 303 00:14:21,140 --> 00:14:23,900 >> Alle jer, der vil sige, har din egen webserver. 304 00:14:23,900 --> 00:14:26,850 Og en web-server er bare et stykke software, hvis formål i livet 305 00:14:26,850 --> 00:14:28,220 er at tjene op websider. 306 00:14:28,220 --> 00:14:32,490 At lytte efter forespørgsler fra browsere og reagere med lidt virtuelle kuverter 307 00:14:32,490 --> 00:14:35,290 inden i hvilken er indhold, som jeg har skrevet. 308 00:14:35,290 --> 00:14:38,372 Så dette web-server er faktisk gratis og open source. 309 00:14:38,372 --> 00:14:40,830 Hvor open source betyder blot software, som en anden har 310 00:14:40,830 --> 00:14:43,480 skrevet, at vi alle kan faktisk se og downloade og endda 311 00:14:43,480 --> 00:14:44,780 ændre kildekoden. 312 00:14:44,780 --> 00:14:46,150 Og det hedder Apache. 313 00:14:46,150 --> 00:14:51,450 >> Og vi har gjort det lidt lettere at brug i CS50IDE ved at kalde det Apache 50. 314 00:14:51,450 --> 00:14:53,780 Så det kan faktisk forstå følgende. 315 00:14:53,780 --> 00:14:56,560 Jeg har tænkt mig at sige Apache 50 start. 316 00:14:56,560 --> 00:14:58,910 Og så jeg bare sige prik. 317 00:14:58,910 --> 00:15:01,080 Og vi ser nogle lidt Arcane besked mundheld 318 00:15:01,080 --> 00:15:04,640 indstilling Apache dokument [? gruppe?] på hjemmet, ubuntu, hvad det så er, 319 00:15:04,640 --> 00:15:05,770 slash arbejdsområde. 320 00:15:05,770 --> 00:15:08,280 Starting webserver Apache 2 med succes. 321 00:15:08,280 --> 00:15:11,330 >> Så lang historie kort, jeg har netop skubbet en knap 322 00:15:11,330 --> 00:15:18,000 og vendte på en webserver, der er nu lytter på internettet på TCP-port 323 00:15:18,000 --> 00:15:20,587 80 på en bestemt adresse. 324 00:15:20,587 --> 00:15:22,420 Og det siger her, og dette vil ændre baseret 325 00:15:22,420 --> 00:15:26,550 på dit brugernavn og andre faktorer, men bemærker nu, hvis jeg klikker på denne, 326 00:15:26,550 --> 00:15:30,211 IDE50 dot jharvard og så og så, bemærke, at al denne tid 327 00:15:30,211 --> 00:15:31,960 for de sidste mange uger, kan du have 328 00:15:31,960 --> 00:15:35,200 bemærket, at dit eget brugernavn er indlejret i øverste højre 329 00:15:35,200 --> 00:15:37,130 hjørne af CS50IDE. 330 00:15:37,130 --> 00:15:41,050 >> Og der rent faktisk har været alt dette anden har den adresse, hvor du kan 331 00:15:41,050 --> 00:15:43,574 besøge alle dine filer via internettet. 332 00:15:43,574 --> 00:15:45,990 Indtil nu har det ikke gjaldt, fordi i C, du generelt 333 00:15:45,990 --> 00:15:48,073 ønsker tingene kører i en terminalen, ikke på nettet. 334 00:15:48,073 --> 00:15:50,800 Men i dag, starter vi skriver webbaseret kode 335 00:15:50,800 --> 00:15:53,350 at vi ønsker tilgængelige på offentlige webadresser. 336 00:15:53,350 --> 00:15:56,100 Så hvad jeg har tænkt mig at gøre, er at klikke på dette webadresse. 337 00:15:56,100 --> 00:16:00,880 >> Og bemærk, at jeg ser en temmelig grimme indeks, en mappe notering, 338 00:16:00,880 --> 00:16:04,090 men hvad fil springer ud på du sikkert? 339 00:16:04,090 --> 00:16:05,210 Hello.html. 340 00:16:05,210 --> 00:16:07,870 Det er fordi jeg gemte filen i mit arbejdsområde. 341 00:16:07,870 --> 00:16:12,310 Og hvad jeg har fortalt Apache webserveren er kigge i Davids arbejdsområde mappe. 342 00:16:12,310 --> 00:16:15,300 Og lad nogen i verden se disse filer. 343 00:16:15,300 --> 00:16:19,050 >> Og ja, hvis jeg nu klik på hello.html, 344 00:16:19,050 --> 00:16:22,180 Jeg ser inden for denne fane netop denne fil. 345 00:16:22,180 --> 00:16:26,430 Bemærk nu, cloud 9 er dette kommet noget lidt nyttigt for os. 346 00:16:26,430 --> 00:16:29,480 Inden CS50 IDE, mærke at der er pludselig en adresselinjen. 347 00:16:29,480 --> 00:16:33,690 Det er fordi selvom vi er bruger Chrome til at besøge CS50IDE, 348 00:16:33,690 --> 00:16:37,940 indersiden af ​​CS50IDE er sin egen version af en webbrowser lige nu. 349 00:16:37,940 --> 00:16:40,820 Og så i stedet for komplicere tingene som sådan, 350 00:16:40,820 --> 00:16:42,955 Jeg har tænkt mig at gå videre og bare kopiere denne URL. 351 00:16:42,955 --> 00:16:45,330 Jeg har tænkt mig at gå videre og bare åbne min egen Chrome-vindue. 352 00:16:45,330 --> 00:16:47,800 Så der er ingen magi her, ingen CS50IDE. 353 00:16:47,800 --> 00:16:51,800 Jeg vil blot bogstaveligt indsætte min J Harvard URL og tryk Enter. 354 00:16:51,800 --> 00:16:54,750 Og voila, nu har jeg, og i teorien, alle 355 00:16:54,750 --> 00:16:57,700 på internettet, hvis jeg har konfigureret tilladelser korrekt, 356 00:16:57,700 --> 00:16:58,720 kan besøge denne fil. 357 00:16:58,720 --> 00:17:03,230 Og så nu, hvis jeg sagde hello.html, voila, der 358 00:17:03,230 --> 00:17:06,366 er min utroligt underwhelming webside. 359 00:17:06,366 --> 00:17:07,740 Så lad os gøre en hurtig tilregnelighed check. 360 00:17:07,740 --> 00:17:09,710 Fordi alt dette er konceptuelle oprettet. 361 00:17:09,710 --> 00:17:13,180 Og vi har faktisk ikke rigtig lært dig hvordan man skriver HTML per se. 362 00:17:13,180 --> 00:17:16,084 Eventuelle spørgsmål hidtil om, hvad der lige er sket? 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 Er CS50 ejer disse websider? 367 00:17:25,800 --> 00:17:26,460 I hvilken forstand? 368 00:17:26,460 --> 00:17:28,947 369 00:17:28,947 --> 00:17:29,530 Godt spørgsmål. 370 00:17:29,530 --> 00:17:32,429 Så CS50 s ejer CS50.io. 371 00:17:32,429 --> 00:17:33,970 Vi har faktisk købt dette domænenavn. 372 00:17:33,970 --> 00:17:37,240 Og i kraft af jer logge ind CS50IDE, 373 00:17:37,240 --> 00:17:39,270 I alle får, hvad der kaldes et underdomæne. 374 00:17:39,270 --> 00:17:46,840 >> Så IDE50-Malan, eller IDE50-Rob.CS50.io, det er din unikke adresse inden 375 00:17:46,840 --> 00:17:47,730 vores domænenavn. 376 00:17:47,730 --> 00:17:50,850 Så i forbindelse med kurset, du har din egen unikke adresse. 377 00:17:50,850 --> 00:17:55,150 Men vi har forenklet tingene ved købe det øverste niveau domæne, CS50 dot 378 00:17:55,150 --> 00:17:58,050 I / O og derefter alle andre er indersiden af ​​denne, så at sige. 379 00:17:58,050 --> 00:17:59,890 Og vi vil komme tilbage til det i et par uger formentlig, 380 00:17:59,890 --> 00:18:01,930 især ved afgangsprojekt tid, når nogle af jer 381 00:18:01,930 --> 00:18:03,596 måske ønsker at få dit eget domænenavn. 382 00:18:03,596 --> 00:18:06,270 Det er faktisk relativt ligetil. 383 00:18:06,270 --> 00:18:06,770 Okay. 384 00:18:06,770 --> 00:18:07,880 Så lad os nu gøre dette. 385 00:18:07,880 --> 00:18:11,910 Jeg har tænkt mig at gå tilbage til CS50IDE, hvor min fil lige nu, 386 00:18:11,910 --> 00:18:14,710 hello.html, er ikke alt, interessant. 387 00:18:14,710 --> 00:18:17,130 Jeg vil gerne gøre noget lidt pænere end det. 388 00:18:17,130 --> 00:18:19,440 Så jeg har tænkt mig at gøre noget som dette. 389 00:18:19,440 --> 00:18:21,510 Lad mig åbne paragraphs.html. 390 00:18:21,510 --> 00:18:23,560 Så dette er en fil jeg skrev på forhånd. 391 00:18:23,560 --> 00:18:26,480 På toppen af ​​det, ligesom altid, vi har kommentarer. 392 00:18:26,480 --> 00:18:28,730 Men i HTML, kommentarer ser lidt anderledes ud. 393 00:18:28,730 --> 00:18:33,270 On line tre og linie 14, du se syntaksen for at starte en kommentar 394 00:18:33,270 --> 00:18:34,020 og afslutte en kommentar. 395 00:18:34,020 --> 00:18:36,820 >> Men ingen af ​​de ting i mellem sager funktionelt. 396 00:18:36,820 --> 00:18:40,250 Det er bare en note til en menneske, hvad der foregår her. 397 00:18:40,250 --> 00:18:43,040 Og ligesom en hurtig tilregnelighed kontrollere, om jeg rulle ned, 398 00:18:43,040 --> 00:18:46,820 hvad er det indlysende nye tag, som vi har indført? 399 00:18:46,820 --> 00:18:52,130 De således langt vi har set tags er åbne beslag HTML, hoved, titel og krop. 400 00:18:52,130 --> 00:18:54,400 Men hvad er selvfølgelig nyt nu? 401 00:18:54,400 --> 00:18:55,200 >> Ja, så s. 402 00:18:55,200 --> 00:18:57,320 P-tag eller afsnit tag. 403 00:18:57,320 --> 00:19:01,182 Og så vil jeg lige lånt nogle standard Latinske tekst til at udgøre mine stykker. 404 00:19:01,182 --> 00:19:03,390 Fordi hvad jeg ønskede at demonstrere er, hvordan du måske 405 00:19:03,390 --> 00:19:05,859 repræsentere stykker i tekst i HTML. 406 00:19:05,859 --> 00:19:08,400 Og så hvad er begyndt at ske her er, at der er allerede 407 00:19:08,400 --> 00:19:09,657 et mønster udvikling. 408 00:19:09,657 --> 00:19:10,990 Og lad mig gå videre og gøre dette. 409 00:19:10,990 --> 00:19:12,760 Lad mig først slukke Apache. 410 00:19:12,760 --> 00:19:17,340 Og jeg har tænkt mig at fortælle det til at starte selv igen inde i dagens kilde syv 411 00:19:17,340 --> 00:19:18,420 m mappe. 412 00:19:18,420 --> 00:19:20,100 Så at jeg har adgang til alt. 413 00:19:20,100 --> 00:19:22,230 >> Og nu, hvis jeg går tilbage til denne mappe registrerede enhed, 414 00:19:22,230 --> 00:19:24,846 mærke til jeg ser hver fil fra i dag. 415 00:19:24,846 --> 00:19:26,720 Og du vil se i næste problem sæt, vi får 416 00:19:26,720 --> 00:19:28,594 give dig vejledning for at gøre netop dette. 417 00:19:28,594 --> 00:19:35,210 Hvis jeg åbner paragraphs.html, dette kan samt at ligne et programmeringssprog 418 00:19:35,210 --> 00:19:36,970 til dig, hvis du ikke taler eller læse latin. 419 00:19:36,970 --> 00:19:40,525 Men dette er blot tre stykker tekst, der er markeret i HTML. 420 00:19:40,525 --> 00:19:43,100 >> Og mærke til punkt pauser mellem dem. 421 00:19:43,100 --> 00:19:46,400 Fordi det viser sig, og selvom du 422 00:19:46,400 --> 00:19:49,210 kunne være tilbøjelig til at gøre dette, henviser i den virkelige verden, 423 00:19:49,210 --> 00:19:51,370 Hvis du ønsker at sætte line pauser mellem ting, 424 00:19:51,370 --> 00:19:55,680 du måske ganske enkelt gøre dette og ramte Gem. 425 00:19:55,680 --> 00:19:59,460 Og nu, hvis jeg genindlæse her, varsel at alt bare slører sammen 426 00:19:59,460 --> 00:20:01,100 på blot en klat tekst. 427 00:20:01,100 --> 00:20:03,570 Fordi HTML er lidt af en dum sprog. 428 00:20:03,570 --> 00:20:07,230 >> Det er beregnet til at blive anvendt på en sådan måde, at browseren vil kun 429 00:20:07,230 --> 00:20:09,920 gør udtrykkeligt hvad du fortæller det at gøre. 430 00:20:09,920 --> 00:20:12,890 Så hvis du ikke fortæller det give mig et nyt stykke, 431 00:20:12,890 --> 00:20:14,569 du kommer ikke til at se et nyt afsnit. 432 00:20:14,569 --> 00:20:16,360 Og i virkeligheden, hvad browser kommer til at gøre 433 00:20:16,360 --> 00:20:20,020 er selv hvis du trykker på Enter, lad os sige igen og igen 434 00:20:20,020 --> 00:20:23,190 og igen, flytte denne tekst måde ned på skærmen, og derefter gemme 435 00:20:23,190 --> 00:20:26,610 og læg, browseren går at skjule alt det hvide rum 436 00:20:26,610 --> 00:20:29,021 i blot en enkelt, synligt mellemrum. 437 00:20:29,021 --> 00:20:29,520 Okay. 438 00:20:29,520 --> 00:20:30,869 Så det er det punkt tag. 439 00:20:30,869 --> 00:20:32,910 Og så hvad er det mønster, der er at udvikle her? 440 00:20:32,910 --> 00:20:37,450 Tja, det synes at være tilfældet, at HTML er alt om at starte et tag 441 00:20:37,450 --> 00:20:38,460 og slutter et tag. 442 00:20:38,460 --> 00:20:39,300 Og hvad er et tag? 443 00:20:39,300 --> 00:20:41,160 Tja, det er bare en luns af syntaks. 444 00:20:41,160 --> 00:20:44,400 Åbn beslag, et søgeord, lukket beslag, er et tag. 445 00:20:44,400 --> 00:20:45,510 Eller starte tag. 446 00:20:45,510 --> 00:20:48,590 Og så, når du er gjort udtrykke dig selv, 447 00:20:48,590 --> 00:20:52,300 som i du er færdig med afsnittet, du gør så at sige modsatte. 448 00:20:52,300 --> 00:20:55,480 Men det modsatte er ikke helt bagud. 449 00:20:55,480 --> 00:21:00,630 >> Du skal blot præfiks samme tag s navn med en skråstreg som denne. 450 00:21:00,630 --> 00:21:01,130 Okay. 451 00:21:01,130 --> 00:21:02,570 Så ikke alt, spændende. 452 00:21:02,570 --> 00:21:05,270 Og i virkeligheden, er vi ikke gør web alt, mere interessant. 453 00:21:05,270 --> 00:21:07,630 Hvad hvis jeg ønsker at gøre ting større og fed? 454 00:21:07,630 --> 00:21:11,780 Så det viser sig, at her er et eksempel i headings.html, hvor i min krop, 455 00:21:11,780 --> 00:21:17,280 Jeg har fået en H1-tag, H2, H3, fire, fem eller seks, som alle 456 00:21:17,280 --> 00:21:18,310 synes temmelig mystiske. 457 00:21:18,310 --> 00:21:21,010 Men hvis jeg går åbne denne eksempel, lad os tage et kig. 458 00:21:21,010 --> 00:21:22,490 Headings.html. 459 00:21:22,490 --> 00:21:27,030 >> Så browsere som standard kan give dig tekst der er stor og fed af forskellige størrelser. 460 00:21:27,030 --> 00:21:28,070 H1 er stor. 461 00:21:28,070 --> 00:21:31,240 H6 er mindre og derefter alt andet i mellem. 462 00:21:31,240 --> 00:21:34,170 Så det er interessant, men stadig ikke rigtig på nettet jeg kender. 463 00:21:34,170 --> 00:21:36,870 Hvad nu, hvis vi ønsker at jeg har noget som en liste. . 464 00:21:36,870 --> 00:21:40,190 Så her er en punktopstilling over tre af Harvards huse. 465 00:21:40,190 --> 00:21:41,600 >> Hvordan har du gå om at gøre dette? 466 00:21:41,600 --> 00:21:45,410 Nå, tage et kig på list.html. 467 00:21:45,410 --> 00:21:47,870 Og her ser vi en lille smule af funkiness 468 00:21:47,870 --> 00:21:49,630 men lad os overveje, hvad der sker. 469 00:21:49,630 --> 00:21:56,182 Så baseret på, hvad du lige har set, UL står for uordnet liste. 470 00:21:56,182 --> 00:21:57,640 Uordnet liste blot betyder punktopstilling. 471 00:21:57,640 --> 00:21:58,431 Der er ingen tal. 472 00:21:58,431 --> 00:22:01,850 Der er også noget, der hedder en bestilt liste, som er en OL på tag. 473 00:22:01,850 --> 00:22:05,350 Så LI, listeelement er alt, hvad det betyder. 474 00:22:05,350 --> 00:22:07,790 >> Og så den automatisk tal alt for dig. 475 00:22:07,790 --> 00:22:11,270 Men igen, alle mine indrykning og hvide rum er bare for min skyld. 476 00:22:11,270 --> 00:22:13,050 Browseren er ikke faktisk vil pleje. 477 00:22:13,050 --> 00:22:16,670 Så selv om du ikke kunne gøre dette, bare for at være klar, 478 00:22:16,670 --> 00:22:19,880 du bør ikke selvom browseren vil stadig 479 00:22:19,880 --> 00:22:22,130 være i stand til at forstå det bare fint. 480 00:22:22,130 --> 00:22:24,590 Jeg rammer reload i min browser, jeg klikke reload 481 00:22:24,590 --> 00:22:26,760 og ingen ændring sker fordi browseren stadig 482 00:22:26,760 --> 00:22:29,550 gør præcis, hvad jeg fortæller det at gøre. 483 00:22:29,550 --> 00:22:30,050 >> Okay. 484 00:22:30,050 --> 00:22:31,340 Så dette er alle bare tekst. 485 00:22:31,340 --> 00:22:33,730 Lad os nu gøre noget mere interessant. 486 00:22:33,730 --> 00:22:36,660 Jeg har tænkt mig at gå videre og låne nogle af denne HTML. 487 00:22:36,660 --> 00:22:40,910 Jeg har tænkt mig at gå videre og oprette en ny fil her. 488 00:22:40,910 --> 00:22:43,370 Og vi vil kalde denne rick.html. 489 00:22:43,370 --> 00:22:46,190 490 00:22:46,190 --> 00:22:48,916 Vi har uforholdsmæssigt brugt noget 491 00:22:48,916 --> 00:22:51,290 kaldes en Rick roll i denne klasse i år, ved jeg ikke, 492 00:22:51,290 --> 00:22:53,880 det netop er sket økologisk. 493 00:22:53,880 --> 00:22:55,397 >> Og nu er det kommet ud af kontrol. 494 00:22:55,397 --> 00:22:56,730 Så jeg bare kommer til at gå med det. 495 00:22:56,730 --> 00:22:59,700 Og hvis jeg går til Google Billeder og Rick Astley. 496 00:22:59,700 --> 00:23:02,450 497 00:23:02,450 --> 00:23:06,170 Hvis du ikke ved, hvorfor vi gør dette, bare læse op på Wikipedia. 498 00:23:06,170 --> 00:23:11,520 Hver gang du har klikket på linket, nogen er blevet griner et eller andet sted. 499 00:23:11,520 --> 00:23:14,860 Og lad mig gå ahead-- der vi går, lad os se billede. 500 00:23:14,860 --> 00:23:16,750 >> Så her har vi en billede i Google Billeder. 501 00:23:16,750 --> 00:23:19,390 Og lad os antage, at dette er rimelighed overalt på internettet. 502 00:23:19,390 --> 00:23:22,570 Så jeg har tænkt mig at antage, det er OK for mig til rent faktisk at sætte dette i min hjemmeside. 503 00:23:22,570 --> 00:23:24,820 Jeg har tænkt mig at gå videre og kopier billedets webadresse. 504 00:23:24,820 --> 00:23:28,600 Og nu, hvis jeg gå tilbage til Cloud 9, lad os se, hvad jeg kan gøre her. 505 00:23:28,600 --> 00:23:30,630 Så her er blot en webside. 506 00:23:30,630 --> 00:23:39,020 Dette er Rick Astley, haha, Jeg har tænkt mig at nu gå tilbage 507 00:23:39,020 --> 00:23:43,510 til min browser, genindlæse, og interessant. 508 00:23:43,510 --> 00:23:44,530 >> Hvor er Rick? 509 00:23:44,530 --> 00:23:46,050 Så lad mig se, hvad der skete. 510 00:23:46,050 --> 00:23:49,114 Faktisk, vil jeg foregive, at jeg ikke gjorde det. 511 00:23:49,114 --> 00:23:50,280 [Uhørligt] sætte ham i her. 512 00:23:50,280 --> 00:23:52,520 Vi vil vende tilbage til om et øjeblik. 513 00:23:52,520 --> 00:23:54,200 Så her er rick.html. 514 00:23:54,200 --> 00:23:56,070 Så det er ikke Rick Astley. 515 00:23:56,070 --> 00:23:59,680 Så det viser sig, vi kan faktisk tilføje ham her. 516 00:23:59,680 --> 00:24:00,830 Dette er Rick Astley. 517 00:24:00,830 --> 00:24:06,680 Jeg har tænkt mig at sige give mig et billede, hvis kilde er den webadresse jeg bare kopieret, hvilket 518 00:24:06,680 --> 00:24:09,110 tilsyneladende er en glad fødselsdag eller andet. 519 00:24:09,110 --> 00:24:13,280 >> Og nu jeg har tænkt mig at lukke tag som dette. 520 00:24:13,280 --> 00:24:15,170 Så dette er indpakningen super lang. 521 00:24:15,170 --> 00:24:17,740 Men se, at alt jeg har gjort, er åben beslag billede, 522 00:24:17,740 --> 00:24:20,270 kilde med en egenskab ved denne. 523 00:24:20,270 --> 00:24:21,530 Og det er en rigtig lang URL. 524 00:24:21,530 --> 00:24:23,720 Og til allersidst, bemærke dette. 525 00:24:23,720 --> 00:24:29,530 Hvorfor har jeg gjort skråstreg vinklet beslag i stedet for, ligesom alle andre tag, 526 00:24:29,530 --> 00:24:33,590 har en åben konsol, IMG, lukkede beslag? 527 00:24:33,590 --> 00:24:37,040 Bare tage et gæt, selvom du har ingen kendskab overhovedet 528 00:24:37,040 --> 00:24:40,410 med HTML før. 529 00:24:40,410 --> 00:24:42,710 >> Så det er, hvordan det lukker kommandoen, men hvorfor 530 00:24:42,710 --> 00:24:45,850 betyder det ikke virkelig gøre intuitivt mening at gøre noget lidt mere 531 00:24:45,850 --> 00:24:48,820 verbose ligesom tæt billede? 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 Bare semantisk, er der ingen følelse af starter et billede og slutter et billede, 535 00:24:55,620 --> 00:24:56,870 det er enten der eller er det ikke. 536 00:24:56,870 --> 00:25:00,960 Så det giver ikke mening at efterlade et hul for noget andet inde i et billede. 537 00:25:00,960 --> 00:25:02,010 Du kan bare ikke gøre det. 538 00:25:02,010 --> 00:25:03,720 Og så syntaksen generelt ville være lige 539 00:25:03,720 --> 00:25:07,910 til at gøre det skråstreg inde af den åbne tag eller start-tag 540 00:25:07,910 --> 00:25:09,020 og derefter ramte Gem. 541 00:25:09,020 --> 00:25:13,350 >> Så hvis jeg nu genindlæse denne fil, nu Jeg har fået en god webside madlavning her. 542 00:25:13,350 --> 00:25:15,100 Og vi kunne helt sikkert virkelig irritere folk 543 00:25:15,100 --> 00:25:17,010 ved at indlejre i stedet som en YouTube-link. 544 00:25:17,010 --> 00:25:19,350 Og faktisk enhver tid du nogensinde har gået til YouTube, 545 00:25:19,350 --> 00:25:22,190 og lad mig faktisk ved et uheld rick roll mig her. 546 00:25:22,190 --> 00:25:25,770 Så Rick roll. 547 00:25:25,770 --> 00:25:29,592 Så Rick Roll-- jeg har tænkt mig at gå her. 548 00:25:29,592 --> 00:25:31,900 >> [Musik spiller] 549 00:25:31,900 --> 00:25:33,730 >> OK, én person ønsket at. 550 00:25:33,730 --> 00:25:37,270 Så mærke al den tid, hvis du Klik på Share link, du selvfølgelig 551 00:25:37,270 --> 00:25:41,390 få den webadresse, som du kan faktisk integrere i en e-mail eller en retsmedicinsk billede 552 00:25:41,390 --> 00:25:43,730 eller i et problem sæt eller i et dias. 553 00:25:43,730 --> 00:25:49,055 Og nu, hvis jeg i stedet klikker på embed, bemærke, at al denne tid, det her 554 00:25:49,055 --> 00:25:49,680 har været der. 555 00:25:49,680 --> 00:25:50,910 Jeg har tænkt mig at gå videre og kopiere dette. 556 00:25:50,910 --> 00:25:54,000 >> Og bare så vi kan se det bedre, er jeg kommer til at indsætte den i min tekst editor. 557 00:25:54,000 --> 00:25:55,860 Bemærk at det, hvad YouTube har fortalt dig. 558 00:25:55,860 --> 00:25:57,693 Hver gang du besøger en YouTube-video, hvis du 559 00:25:57,693 --> 00:26:00,410 ønsker at integrere video på din webside, skal du blot gribe dette. 560 00:26:00,410 --> 00:26:03,350 Så det er endnu en HTML-tag kaldet en iframe. 561 00:26:03,350 --> 00:26:04,590 Eller en på linje ramme. 562 00:26:04,590 --> 00:26:08,680 Så det også ser lidt mere komplekse end alle de andre. 563 00:26:08,680 --> 00:26:11,950 Så det viser sig, at billedet tag og tilsyneladende iframe-tag 564 00:26:11,950 --> 00:26:13,370 tage det, der kaldes attributter. 565 00:26:13,370 --> 00:26:15,710 >> Og det er en anden stykke syntaks i HTML. 566 00:26:15,710 --> 00:26:19,240 Ud over etikettens navn, åben konsol tag navn, 567 00:26:19,240 --> 00:26:23,780 du kan styre adfærden af ​​tag ved at have en hel masse attribut 568 00:26:23,780 --> 00:26:24,860 lig værdi. 569 00:26:24,860 --> 00:26:26,290 Egenskab lig værdi. 570 00:26:26,290 --> 00:26:28,100 Og så for eksempel, YouTube fortæller os 571 00:26:28,100 --> 00:26:31,990 hvis du vil have bredden af ​​denne video at være 420 pixels og højden 572 00:26:31,990 --> 00:26:35,470 at være 315 pixels, der er hvordan du udtrykker det i HTML. 573 00:26:35,470 --> 00:26:38,480 >> Kilden til videoen vil at være, at lange YouTube URL 574 00:26:38,480 --> 00:26:40,830 og derefter nogle andre ting Ligesom rammekanten er nul, 575 00:26:40,830 --> 00:26:43,500 så formentlig betyder, at der er ingen kant omkring de ting. 576 00:26:43,500 --> 00:26:45,450 Tillad fuld skærm sandsynligvis betyder, at brugeren 577 00:26:45,450 --> 00:26:47,840 kan klikke på en knap og faktisk fuld skærm videoen. 578 00:26:47,840 --> 00:26:52,870 Så hvis jeg virkelig ønsker at være imponerende her i Rick dot HTML, 579 00:26:52,870 --> 00:26:58,490 snarere end at bruge billedet tag, så lad mig slette, i stedet indsætte dette. 580 00:26:58,490 --> 00:27:00,810 Og nu genindlæse. 581 00:27:00,810 --> 00:27:02,500 Og nu her vi gå igen. 582 00:27:02,500 --> 00:27:04,979 583 00:27:04,979 --> 00:27:06,020 Okay, det er nok. 584 00:27:06,020 --> 00:27:08,970 Okay, så jeg vil forsøge svært ikke at gøre det igen. 585 00:27:08,970 --> 00:27:11,400 Så hvad er nogle af de grillbarer her? 586 00:27:11,400 --> 00:27:15,130 Så HTML, så grim som disse web-sider er, er faktisk ret simpelt. 587 00:27:15,130 --> 00:27:16,467 Det er ikke et programmeringssprog. 588 00:27:16,467 --> 00:27:17,550 Det har ikke funktioner. 589 00:27:17,550 --> 00:27:18,410 Det har ikke løkker. 590 00:27:18,410 --> 00:27:19,535 Det behøver ikke forhold. 591 00:27:19,535 --> 00:27:22,900 Alt det har, er snesevis af forskellige mærker, som hver 592 00:27:22,900 --> 00:27:24,620 har nul eller flere attributter. 593 00:27:24,620 --> 00:27:27,320 Og i virkeligheden, hvad der er sjovt om HTML, når du begynder at dykke ned i 594 00:27:27,320 --> 00:27:29,560 er, at det er meget self lærenem. 595 00:27:29,560 --> 00:27:32,880 >> Alt det kræver er en forståelse af den generelle ramme for HTML. 596 00:27:32,880 --> 00:27:36,510 Hvad er en tag, hvad der er en attribut, hvordan kan du faktisk konfigurere en webside 597 00:27:36,510 --> 00:27:37,250 som følger. 598 00:27:37,250 --> 00:27:40,720 Og alt andet er virkelig resultatet for at kigge op i en online henvisning 599 00:27:40,720 --> 00:27:43,080 eller googling hvordan man gør nogle teknik eller som vi har set, 600 00:27:43,080 --> 00:27:45,371 ser på Facebooks kilde kode, ser på en hjemmeside 601 00:27:45,371 --> 00:27:48,710 at du kan lide på det kildekode og forstå, hvordan udviklerne dér 602 00:27:48,710 --> 00:27:50,550 faktisk lagt tingene ud. 603 00:27:50,550 --> 00:27:52,180 >> Så vi kan gøre billederne så godt. 604 00:27:52,180 --> 00:27:53,994 Og i virkeligheden, vi gjorde det for et øjeblik siden. 605 00:27:53,994 --> 00:27:55,410 Lad mig gå videre og bare vise dig. 606 00:27:55,410 --> 00:27:56,770 Her er nogle eksempler på kode. 607 00:27:56,770 --> 00:27:58,380 Hvis du nogensinde ønsker at se grumpy cat. 608 00:27:58,380 --> 00:28:00,620 Så mærke til, at jeg kan har et billede tag her. 609 00:28:00,620 --> 00:28:02,090 Og jeg har fået en kommentar ovenover. 610 00:28:02,090 --> 00:28:04,490 Jeg har fået et alternativ tekst til tilgængelighed. 611 00:28:04,490 --> 00:28:07,250 Så en person, der er ved hjælp af en skærm læseren af ​​hensyn til syne 612 00:28:07,250 --> 00:28:10,172 kan faktisk derefter have deres skærmlæser siger grumpy cat. 613 00:28:10,172 --> 00:28:11,880 For hvis de ikke kan se billedet, de 614 00:28:11,880 --> 00:28:14,504 kan i det mindste have deres computer fortælle dem verbalt, hvad det er. 615 00:28:14,504 --> 00:28:18,020 Og kilden til denne fil er cat.jpeg. 616 00:28:18,020 --> 00:28:22,472 Så i virkeligheden, hvis jeg virkelig ønskede at får kloge, hvad jeg kunne have done-- 617 00:28:22,472 --> 00:28:25,680 Jeg lover ikke at gå til Rick Astley, så Jeg har tænkt mig at google for en kat i stedet. 618 00:28:25,680 --> 00:28:28,290 Og hvis jeg går til Google Billeder her, og vi vil antage 619 00:28:28,290 --> 00:28:30,040 at dette er et billede af min kat. 620 00:28:30,040 --> 00:28:35,070 >> Antag, at jeg har kontrol klikkede eller højre klikkede på dette, ved et uheld 621 00:28:35,070 --> 00:28:35,630 uhyggelig. 622 00:28:35,630 --> 00:28:40,320 Og cat.jpeg jeg har tænkt mig at spare på mit skrivebord. 623 00:28:40,320 --> 00:28:44,700 Lad mig nu vende tilbage til cloud 9. 624 00:28:44,700 --> 00:28:48,150 Bemærk, at her, jeg kan gå til uploade lokale filer. 625 00:28:48,150 --> 00:28:51,530 Og hvis jeg gribe denne fil, cat.jpeg, varsel 626 00:28:51,530 --> 00:28:54,674 at jeg kan trække det og drop det i cloud 9 627 00:28:54,674 --> 00:28:56,090 og det kommer til at råbe på mig her. 628 00:28:56,090 --> 00:28:59,000 >> Fordi vi har allerede givet dig en cat.jpeg fil, 629 00:28:59,000 --> 00:29:01,430 men det er super nemt at snuppe et billede, du har 630 00:29:01,430 --> 00:29:03,220 taget fra Facebook eller Flickr eller lignende 631 00:29:03,220 --> 00:29:05,678 og faktisk trække og slippe det i cloud 9 og derefter gøre det 632 00:29:05,678 --> 00:29:07,970 en del af din egen personlige hjemmeside eller et problem 633 00:29:07,970 --> 00:29:10,442 sæt syv eller otte, som vi snart vil se. 634 00:29:10,442 --> 00:29:12,150 Og så når du endelig besøge dette kat, 635 00:29:12,150 --> 00:29:16,610 antager jeg hentede den samme kat, varsel at-- det var sød. 636 00:29:16,610 --> 00:29:19,160 >> Hvad du ville se, er noget som dette ansigt her. 637 00:29:19,160 --> 00:29:21,810 Så de filer, du henvisning på en webside 638 00:29:21,810 --> 00:29:26,050 kan enten være lokale i dit eget konto eller fjernbetjening på en anden server 639 00:29:26,050 --> 00:29:29,670 som i tilfældet med Rick Astley foto lidt siden. 640 00:29:29,670 --> 00:29:32,990 Så hvor else-- hvad kan vi ellers gøre her? 641 00:29:32,990 --> 00:29:34,890 Så lad os tage et kig på følgende. 642 00:29:34,890 --> 00:29:36,160 Du ved, hvad der er slags cool? 643 00:29:36,160 --> 00:29:39,330 >> Vi har hidtil været at gøre meget statiske websider. 644 00:29:39,330 --> 00:29:41,830 Jeg ønsker at spice tingene op som følger. 645 00:29:41,830 --> 00:29:44,344 Jeg vil gerne gøre min egen søgemaskine. 646 00:29:44,344 --> 00:29:47,010 Så for at gøre en søgemaskine, lad os gå videre og begynde at gøre dette. 647 00:29:47,010 --> 00:29:52,570 Jeg har tænkt mig at gå videre og skabe en ny fil kaldet search.html. 648 00:29:52,570 --> 00:29:54,890 Og vi har prefabed versioner online. 649 00:29:54,890 --> 00:29:56,027 Hovsa. 650 00:29:56,027 --> 00:29:57,610 Må ikke indsætte i din terminal vindue. 651 00:29:57,610 --> 00:29:58,744 Præfabrikerede versioner online. 652 00:29:58,744 --> 00:30:00,160 Og jeg har tænkt mig at starte som følger. 653 00:30:00,160 --> 00:30:04,490 Så her er begyndelsen på en fil kaldet search.html. 654 00:30:04,490 --> 00:30:07,510 Jeg har tænkt mig at gemme den i dagens kilde mappe. 655 00:30:07,510 --> 00:30:09,079 Jeg har tænkt mig at kalde denne søgning. 656 00:30:09,079 --> 00:30:10,370 Faktisk, vil vi gøre det bedre. 657 00:30:10,370 --> 00:30:13,600 CS50 Søg og faktisk mærke det. 658 00:30:13,600 --> 00:30:17,500 Og nu, jeg har tænkt mig at sige noget som H1 CS50 Søg. 659 00:30:17,500 --> 00:30:20,930 Og derefter ned her, H2 kommer snart. 660 00:30:20,930 --> 00:30:23,230 Og bare for at opsummere, H1 og H2 mener, hvad henholdsvis? 661 00:30:23,230 --> 00:30:26,750 662 00:30:26,750 --> 00:30:30,320 >> Ja, så store og fed, og ikke så stor, men stadig fed. 663 00:30:30,320 --> 00:30:37,375 Så hvis jeg gemme denne og gå over her, lad os se filen search.html. 664 00:30:37,375 --> 00:30:42,560 Okay, og denne ene er right-- [uhørligt]. 665 00:30:42,560 --> 00:30:46,980 666 00:30:46,980 --> 00:30:49,110 Stå ved. 667 00:30:49,110 --> 00:30:49,945 David er forvirret. 668 00:30:49,945 --> 00:30:52,610 669 00:30:52,610 --> 00:30:54,080 Åh, det er lige der. 670 00:30:54,080 --> 00:30:54,860 David er en idiot. 671 00:30:54,860 --> 00:30:55,420 OK. 672 00:30:55,420 --> 00:30:56,660 Så der er det. 673 00:30:56,660 --> 00:30:58,350 Så CS50 søgning kommer snart. 674 00:30:58,350 --> 00:31:00,370 Så nu, lad os syntetisere hvad vi gjorde i sidste uge. 675 00:31:00,370 --> 00:31:03,400 >> Hvor vi talte om lavere niveau mekanik af HTTP. 676 00:31:03,400 --> 00:31:05,780 Og disse nye ideer af HTML, som er lige 677 00:31:05,780 --> 00:31:08,890 dette kodesprog, hvor du fortælle en browser, præcis hvad de skal gøre 678 00:31:08,890 --> 00:31:10,740 og gennemføre vores egen søgemaskine. 679 00:31:10,740 --> 00:31:12,520 Så i stedet for bare siger kommer snart, jeg er 680 00:31:12,520 --> 00:31:14,810 kommer til at indføre noget, der hedder en form tag. 681 00:31:14,810 --> 00:31:19,610 Og i denne form, vil jeg have noget som et input felt. 682 00:31:19,610 --> 00:31:22,450 >> Og navnet på denne indgang felt, jeg har tænkt mig at kalde det Q. 683 00:31:22,450 --> 00:31:26,240 Og typen af ​​dette input felt Jeg har tænkt mig at sige, er bare "tekst". 684 00:31:26,240 --> 00:31:29,130 Og et tekstfelt, som vi får se, er blot en tekstboks. 685 00:31:29,130 --> 00:31:32,830 Og så betyder det ikke fornemmer her for at have noget inde i det på dette tidspunkt. 686 00:31:32,830 --> 00:31:35,320 Og så jeg simpelthen at gå at lukke tag med at 687 00:31:35,320 --> 00:31:38,099 frem skråstreg lige i tag selv. 688 00:31:38,099 --> 00:31:39,890 Og så vil jeg har en anden indgang. 689 00:31:39,890 --> 00:31:43,480 Input typen lig indsende. 690 00:31:43,480 --> 00:31:45,320 Og så vil jeg lukke denne ene også. 691 00:31:45,320 --> 00:31:46,840 >> Og nu jeg har tænkt mig at gå tilbage her. 692 00:31:46,840 --> 00:31:49,520 Og allerede ser vi, omend temmelig grim, jeg har 693 00:31:49,520 --> 00:31:52,460 fik begyndende min egen søgeside her. 694 00:31:52,460 --> 00:31:55,150 Faktisk, lad mig prøve at rydde dette op en lille smule. 695 00:31:55,150 --> 00:31:57,330 Det viser sig, at der på input her, kan jeg have 696 00:31:57,330 --> 00:31:59,910 en anden attribut kaldet pladsholder. 697 00:31:59,910 --> 00:32:05,165 Og jeg kunne se noget som søgeord, eller mere specifikt, forespørge for q. 698 00:32:05,165 --> 00:32:07,820 >> Og læg mærke til, nu, jeg har denne form for grå tekst 699 00:32:07,820 --> 00:32:10,440 der forsvinder som snart jeg begynder at skrive, 700 00:32:10,440 --> 00:32:12,930 men det er nok noget du har set i andre web-sider. 701 00:32:12,930 --> 00:32:14,650 Jeg kan ikke rigtig lide knappen Send. 702 00:32:14,650 --> 00:32:18,320 Så jeg faktisk tænkt mig at give den Indsend knap en værdi af søgning. 703 00:32:18,320 --> 00:32:21,680 Og nu, hvis jeg genindlæse, bemærke, at min knap bliver opkaldt søgning. 704 00:32:21,680 --> 00:32:24,140 Du ved, jeg ikke rigtig ligesom logo her. 705 00:32:24,140 --> 00:32:27,140 Så Google Font generator. 706 00:32:27,140 --> 00:32:28,820 >> Jeg ønsker at pifte det op yderligere. 707 00:32:28,820 --> 00:32:30,660 Så CS50 søgning. 708 00:32:30,660 --> 00:32:31,870 Lad mig skabe min egen logo. 709 00:32:31,870 --> 00:32:33,080 Det ser pænt ud. 710 00:32:33,080 --> 00:32:36,945 Så lad mig gemme denne as-- tændes. 711 00:32:36,945 --> 00:32:40,710 712 00:32:40,710 --> 00:32:43,120 Hvor er det? 713 00:32:43,120 --> 00:32:43,620 Der. 714 00:32:43,620 --> 00:32:44,160 OK. 715 00:32:44,160 --> 00:32:44,980 Mistede den. 716 00:32:44,980 --> 00:32:47,740 Gem som. 717 00:32:47,740 --> 00:32:49,470 Dumme browsere. 718 00:32:49,470 --> 00:32:51,700 Stand by, vil vi løse dette én gang for alle. 719 00:32:51,700 --> 00:32:57,650 720 00:32:57,650 --> 00:32:58,590 Der vi går. 721 00:32:58,590 --> 00:32:59,090 Okay. 722 00:32:59,090 --> 00:32:59,600 Undskyld. 723 00:32:59,600 --> 00:33:00,750 Off dag. 724 00:33:00,750 --> 00:33:02,310 Nu er dette er funky. 725 00:33:02,310 --> 00:33:03,160 Afslut fuld skærm. 726 00:33:03,160 --> 00:33:04,150 Okay. 727 00:33:04,150 --> 00:33:06,870 >> Nu som en normal person gem billede som. 728 00:33:06,870 --> 00:33:08,810 Logo.gif. 729 00:33:08,810 --> 00:33:13,194 Nu vil jeg gå ind CS50IDE og Jeg har tænkt mig at bare få fat i logoet, 730 00:33:13,194 --> 00:33:15,360 Jeg har tænkt mig at trække det ind min kilde syv mappe, 731 00:33:15,360 --> 00:33:17,002 findes filen allerede, jeg er OK med det. 732 00:33:17,002 --> 00:33:19,210 Så jeg har tænkt mig at tilsidesætte den fordi jeg allerede havde det. 733 00:33:19,210 --> 00:33:20,630 Og nu, hvordan får jeg slippe af med denne? 734 00:33:20,630 --> 00:33:24,670 >> Lad os gå videre her og gøre image source lig logo.gif. 735 00:33:24,670 --> 00:33:25,490 Luk dette. 736 00:33:25,490 --> 00:33:26,050 Gem. 737 00:33:26,050 --> 00:33:30,560 Og nu, hvis jeg gå tilbage til min søgning side, nu er det ser temmelig godt. 738 00:33:30,560 --> 00:33:33,610 Okay, så det ikke har ganske gjort noget nyttigt. 739 00:33:33,610 --> 00:33:37,000 Faktisk, lad mig prøve at søge for en kat og se hvad der sker. 740 00:33:37,000 --> 00:33:38,890 Katte. 741 00:33:38,890 --> 00:33:39,420 For pokker. 742 00:33:39,420 --> 00:33:41,400 Det er ikke bare arbejde, tilsyneladende. 743 00:33:41,400 --> 00:33:43,760 Så hvad er den vigtig brik der mangler her? 744 00:33:43,760 --> 00:33:49,100 >> Ret, selv hvis du ikke kender nogen HTML, Jeg er begyndt markerer telefonen formular 745 00:33:49,100 --> 00:33:54,130 og jeg har fortalt det, hvordan man får input, give mig en tekstboks og en send-knappen, 746 00:33:54,130 --> 00:33:55,730 hvad brik tilsyneladende mangler? 747 00:33:55,730 --> 00:33:58,975 Antag at vi ønsker at faktisk få denne ting fungerer korrekt. 748 00:33:58,975 --> 00:34:02,420 749 00:34:02,420 --> 00:34:05,360 Hvad skal vi gøre? 750 00:34:05,360 --> 00:34:08,860 Vi har et behov for at gennemføre bagenden database eller søgemaskinen selv, 751 00:34:08,860 --> 00:34:11,210 og det kommer til at tage en hel masse tid, helt ærligt. 752 00:34:11,210 --> 00:34:13,380 >> Så husk hvad vi gjorde sidste gang. 753 00:34:13,380 --> 00:34:18,230 Så hvis du søger efter noget på Google og du har på forhånd slået fra, 754 00:34:18,230 --> 00:34:20,355 tilbagekaldelse, instant søgning. 755 00:34:20,355 --> 00:34:22,230 Så lad mig slå det fra således at dette rent faktisk 756 00:34:22,230 --> 00:34:26,650 opfører sig som en ældre skole browser hvis jeg nu søger efter noget som katte, 757 00:34:26,650 --> 00:34:28,190 huske, hvad URL'en ser ud. 758 00:34:28,190 --> 00:34:29,449 Det er temmelig kryptisk. 759 00:34:29,449 --> 00:34:33,000 Men indlejret i der, tilbagekaldelse, er skråstreg søgning. 760 00:34:33,000 --> 00:34:35,100 Spørgsmålstegn q lig katte. 761 00:34:35,100 --> 00:34:37,760 >> Og det synes at give mig en hel masse søgeresultater. 762 00:34:37,760 --> 00:34:39,134 Så du ved, hvad jeg har tænkt mig at gøre? 763 00:34:39,134 --> 00:34:41,650 Jeg har tænkt mig at låne Google for blot et minut. 764 00:34:41,650 --> 00:34:43,670 Jeg har tænkt mig at gå over her, og jeg har tænkt mig at sige 765 00:34:43,670 --> 00:34:47,850 at dette danner handling eller destination, så at sige, 766 00:34:47,850 --> 00:34:49,330 bør bogstavelig talt være Google. 767 00:34:49,330 --> 00:34:52,590 Og den metode, jeg ønskede til brug bliver få. 768 00:34:52,590 --> 00:34:53,560 >> Så hvad er handling? 769 00:34:53,560 --> 00:34:55,760 Handling er underligt navngivet, men det betyder bare, 770 00:34:55,760 --> 00:34:58,120 der kommer til at håndtere virkningen af ​​denne formular? 771 00:34:58,120 --> 00:35:00,820 Når jeg klikker på Søg, hvor bør resultatet hen? 772 00:35:00,820 --> 00:35:05,300 Og hvis jeg nu gå tilbage til min formular her og genindlæse min webside 773 00:35:05,300 --> 00:35:09,000 og nu søge efter noget som hund, mærke nu 774 00:35:09,000 --> 00:35:10,850 Jeg har re implementeret Google. 775 00:35:10,850 --> 00:35:11,350 Højre? 776 00:35:11,350 --> 00:35:14,141 >> Hvis jeg ønsker at søge efter noget andet, det virker for ikke bare hunde, 777 00:35:14,141 --> 00:35:16,400 det virker også for katte. 778 00:35:16,400 --> 00:35:21,930 Det virker også for CS50. 779 00:35:21,930 --> 00:35:24,310 Og OK, det er bare under imponerende, er det ikke? 780 00:35:24,310 --> 00:35:25,920 Okay, men det rent faktisk virker. 781 00:35:25,920 --> 00:35:27,360 Så hvad der faktisk er foregået? 782 00:35:27,360 --> 00:35:31,340 Så jeg har lært min browser, ved hjælp af HTML, for at tage input fra brugeren 783 00:35:31,340 --> 00:35:35,810 og faktisk sende denne indgang til en ekstern server via HTTP. 784 00:35:35,810 --> 00:35:39,120 >> Og fordi min browser forstår HTTP, det faktisk 785 00:35:39,120 --> 00:35:43,500 konstruere webadresse, så at det Jeg ender ovre i min browser, 786 00:35:43,500 --> 00:35:45,660 mærke til, hvad der sker da jeg søgte efter hunden. 787 00:35:45,660 --> 00:35:49,270 Hvis jeg klikker på Søg, bemærke, at URL'en skifter som jeg hensigten 788 00:35:49,270 --> 00:35:52,770 at google.com/search~~V forespørgsel lig hund. 789 00:35:52,770 --> 00:35:56,020 Og det er fordi formen ved, fordi metoden er at få, 790 00:35:56,020 --> 00:35:59,560 blot tilføje det til den pågældende webadresse der. 791 00:35:59,560 --> 00:36:01,730 >> Nu er disse websider stadig grim. 792 00:36:01,730 --> 00:36:04,890 Så lad os introducere et andet stykke syntaks, hvis vi kan i dag. 793 00:36:04,890 --> 00:36:07,640 Og det er noget kendt som cascading style sheets. 794 00:36:07,640 --> 00:36:10,720 Så lad mig tage et kig på dette eksempel her og se 795 00:36:10,720 --> 00:36:12,380 hvis vi kan udlede, hvad der foregår. 796 00:36:12,380 --> 00:36:14,520 Dette er CSS0.html. 797 00:36:14,520 --> 00:36:16,532 Og det er her tingene få lidt grimt. 798 00:36:16,532 --> 00:36:18,490 Fordi desværre, i verden af ​​internettet, 799 00:36:18,490 --> 00:36:20,920 HTML alene kan ikke gøre alt. 800 00:36:20,920 --> 00:36:22,920 Og så hvis du ønsker at stilisere din webside, 801 00:36:22,920 --> 00:36:28,370 du faktisk har brug for at fokusere på den æstetik på en anden måde. 802 00:36:28,370 --> 00:36:33,090 Så her, jeg har kroppen af ​​min web side inden i hvilken er en stor div. 803 00:36:33,090 --> 00:36:34,700 Og en div betyder bare division. 804 00:36:34,700 --> 00:36:38,060 Så det er ligesom et stykke, men det ikke har de samme semantik 805 00:36:38,060 --> 00:36:39,180 af et stykke tekst. 806 00:36:39,180 --> 00:36:40,940 >> Det betyder blot, at den browser, her kommer 807 00:36:40,940 --> 00:36:45,210 en stor rektangulær region min web side, jeg ønsker at håndtere det specielt. 808 00:36:45,210 --> 00:36:47,420 Nu, linie 21, når denne starter div. 809 00:36:47,420 --> 00:36:48,770 Og bare tage et gæt. 810 00:36:48,770 --> 00:36:53,080 Hvad er effekten af ​​linje 21 på Resten af ​​indholdet på siden? 811 00:36:53,080 --> 00:36:55,640 812 00:36:55,640 --> 00:36:56,311 Centrering det. 813 00:36:56,311 --> 00:36:56,810 Det er alt. 814 00:36:56,810 --> 00:36:58,830 Så har vi ikke set en måde at faktisk centrering af teksten. 815 00:36:58,830 --> 00:37:00,996 >> Faktisk min søgemaskine, i modsætning til den faktiske Google, 816 00:37:00,996 --> 00:37:03,040 blev alle berettigede over til venstre. 817 00:37:03,040 --> 00:37:07,430 Og så nu på linje 21, jeg siger, hey browser, skal du oprette en afdeling på siden. 818 00:37:07,430 --> 00:37:09,450 Bare giv mig en stor, usynlig rektangel. 819 00:37:09,450 --> 00:37:11,490 Det er sådan jeg ønsker at tænke på websiden. 820 00:37:11,490 --> 00:37:13,870 Og så stilisere det som følger. 821 00:37:13,870 --> 00:37:16,900 Inde i disse citater, nu, er et andet sprog 822 00:37:16,900 --> 00:37:19,969 at vi introducerede dag kaldet cascading style sheets. 823 00:37:19,969 --> 00:37:22,010 Heldigvis er det også ikke et programmeringssprog, 824 00:37:22,010 --> 00:37:26,470 så det er meget begrænset i sin syntaks, men også meget begrænset i sin funktionalitet 825 00:37:26,470 --> 00:37:30,670 mens HTML handler om opmærke data fra en webside 826 00:37:30,670 --> 00:37:32,130 og strukturen af ​​en webside. 827 00:37:32,130 --> 00:37:35,320 CSS er generelt om sidste mile, æstetik, 828 00:37:35,320 --> 00:37:40,160 få størrelse og farve og placering helt rigtige i en webside. 829 00:37:40,160 --> 00:37:43,000 Og ja, det er dannet med centrale værdi par. 830 00:37:43,000 --> 00:37:46,290 >> En ejendom som denne, tekst justere, efterfulgt af et kolon, 831 00:37:46,290 --> 00:37:49,720 efterfulgt af værdien af ​​denne ejendom, som i dette tilfælde er centrum. 832 00:37:49,720 --> 00:37:51,910 Og nu mærke, at du kan indlejre disse ting. 833 00:37:51,910 --> 00:37:56,780 Hvis jeg ønskede alt det Jeg har fremhævet for at være centreret, 834 00:37:56,780 --> 00:38:00,270 det er derfor jeg har linje 21 og den tilsvarende linje 31. 835 00:38:00,270 --> 00:38:04,820 Men formoder nu ønsker at sige John Harvard, velkommen til min startside. 836 00:38:04,820 --> 00:38:06,530 >> Copyright symbol John Harvard. 837 00:38:06,530 --> 00:38:09,180 Og formoder jeg vil have den første af disse linjer at være temmelig stor. 838 00:38:09,180 --> 00:38:10,450 36 pixels. 839 00:38:10,450 --> 00:38:11,530 Så det er en anstændig størrelse. 840 00:38:11,530 --> 00:38:13,240 Og jeg ønskede sin vægt til at være fed. 841 00:38:13,240 --> 00:38:15,450 Men derefter under dette, Jeg vil have mindre tekst. 842 00:38:15,450 --> 00:38:19,980 Og under det, jeg vil endnu mindre tekst. 843 00:38:19,980 --> 00:38:20,480 Undskyld. 844 00:38:20,480 --> 00:38:24,490 845 00:38:24,490 --> 00:38:26,940 I dag føles som en slukket dag. 846 00:38:26,940 --> 00:38:29,840 >> Så nu, hvad gør jeg for at udtrykke dette? 847 00:38:29,840 --> 00:38:34,580 Her på linje 22 er en integreret div eller indlejret div, hvis du vil. 848 00:38:34,580 --> 00:38:36,190 Det har også sin egen stil tag. 849 00:38:36,190 --> 00:38:38,160 Jeg angive en skriftstørrelse på 36. 850 00:38:38,160 --> 00:38:40,460 Jeg angive en skrifttype vægt fed. 851 00:38:40,460 --> 00:38:43,360 Hernede, kun jeg angive 24 pixels. 852 00:38:43,360 --> 00:38:45,960 Og endelig, på linje 28, jeg angive 12. 853 00:38:45,960 --> 00:38:49,070 Så bare som en hurtig tilregnelighed kontrol og som menneske læser dette, 854 00:38:49,070 --> 00:38:52,545 hvilke ord på skærmen er faktisk kommer til at være fed? 855 00:38:52,545 --> 00:38:56,100 856 00:38:56,100 --> 00:38:58,760 Hvilke linjer er faktisk fed? 857 00:38:58,760 --> 00:38:59,570 >> Bare John Harvard. 858 00:38:59,570 --> 00:39:00,070 Højre? 859 00:39:00,070 --> 00:39:05,940 Fordi ligesom linje 22 siger hej browser, her er en division af siden. 860 00:39:05,940 --> 00:39:07,920 Gør det skriftstørrelse 36 point. 861 00:39:07,920 --> 00:39:09,460 Gør skrifttypen vægt fed. 862 00:39:09,460 --> 00:39:11,920 Så snart du nå tilsvarende ende tag 863 00:39:11,920 --> 00:39:15,340 eller lukket tag på linie 24, det betyder, hej browser, 864 00:39:15,340 --> 00:39:17,640 stoppe med at gøre, hvad det er du gør. 865 00:39:17,640 --> 00:39:21,020 Og varsel at være klar, selvom linie 22 har alle disse egenskaber 866 00:39:21,020 --> 00:39:24,430 agtig stil, når du lukke tag på linje 24, 867 00:39:24,430 --> 00:39:25,940 du kun nævner tag navn. 868 00:39:25,940 --> 00:39:29,990 >> Du behøver ikke gentage ordet stil eller noget, der er inde i disse citater. 869 00:39:29,990 --> 00:39:32,860 Og så hvis jeg ser på det nu i min browser, lad os tage 870 00:39:32,860 --> 00:39:38,060 Et kig på slutresultatet. Lad mig gå videre til denne fil, som er CSS 0. 871 00:39:38,060 --> 00:39:41,814 Og det er stadig temmelig almindelig, men at få temmelig interessant. 872 00:39:41,814 --> 00:39:43,980 Men det viser sig at der er andre ting, jeg kan gøre her, 873 00:39:43,980 --> 00:39:46,490 og risiko for at gøre dette helt hæslige, 874 00:39:46,490 --> 00:39:48,630 bemærke her, at i min krop på min webside, 875 00:39:48,630 --> 00:39:53,930 Jeg kan gøre noget sjovt ligesom bg eller baggrundsfarve. 876 00:39:53,930 --> 00:39:56,670 >> Og hurtig, hvad er dit foretrukne farve? 877 00:39:56,670 --> 00:39:57,720 Grøn jeg hørte. 878 00:39:57,720 --> 00:39:58,750 Okay. 879 00:39:58,750 --> 00:40:02,920 Så nu, hvis jeg ramte reload nu vi har en grøn webside. 880 00:40:02,920 --> 00:40:04,710 Okay, så det er ikke dårligt. 881 00:40:04,710 --> 00:40:08,350 Og nu, hvis jeg ønsker at gøre dette virkelig cool, jeg kan gøre farven på min tekst 882 00:40:08,350 --> 00:40:09,360 endda rød. 883 00:40:09,360 --> 00:40:10,870 Så lad os se, hvad det ser ud. 884 00:40:10,870 --> 00:40:12,230 Nu er det ser temmelig godt. 885 00:40:12,230 --> 00:40:15,460 Og hernede, hvis du virkelig ønsker at rode med nogen 886 00:40:15,460 --> 00:40:17,487 eller hvis du ønsker at være en af ​​de mennesker, der 887 00:40:17,487 --> 00:40:20,570 forsøger at narre dig til at besøge en web side, fordi de har narret Google 888 00:40:20,570 --> 00:40:27,610 til at tro, der er en hel masse af nøgleordene like-- lad os se, genindlæse. 889 00:40:27,610 --> 00:40:29,020 890 00:40:29,020 --> 00:40:30,680 Hvor blev det af? 891 00:40:30,680 --> 00:40:31,530 Og der er det os. 892 00:40:31,530 --> 00:40:32,030 Okay. 893 00:40:32,030 --> 00:40:34,905 Så jeg siger dette som en sidebemærkning, vi får taler om det her i et par uger 894 00:40:34,905 --> 00:40:36,740 når vi taler om sikkerhed, hvis du rent faktisk 895 00:40:36,740 --> 00:40:38,852 indlejre hele klaser af søgeord i en webside, 896 00:40:38,852 --> 00:40:41,810 selv om de ikke er synlige for en menneske, en som Google, selvfølgelig, 897 00:40:41,810 --> 00:40:43,250 kan stadig faktisk finde dette. 898 00:40:43,250 --> 00:40:45,820 Okay, så det er temmelig hæslige temmelig hurtigt. 899 00:40:45,820 --> 00:40:48,420 >> Og i virkeligheden, det er ikke alle at meget i modsætning til min egen web 900 00:40:48,420 --> 00:40:51,480 side som en bachelor, som Jeg begyndte at google rundt for at finde 901 00:40:51,480 --> 00:40:53,690 tidligere versioner af mine gamle hjemmesider. 902 00:40:53,690 --> 00:40:54,500 Det var temmelig dårlig. 903 00:40:54,500 --> 00:40:56,650 Faktisk fandt jeg én lige før klassen. 904 00:40:56,650 --> 00:40:58,620 Men der er værre derude. 905 00:40:58,620 --> 00:41:01,534 Dette var tilsyneladende min hjemmeside tilbage i 1996. 906 00:41:01,534 --> 00:41:04,200 Tilsyneladende troede jeg, det var hensigtsmæssigt at bede folk deres navn 907 00:41:04,200 --> 00:41:05,991 før de kunne faktisk se min webside. 908 00:41:05,991 --> 00:41:09,380 909 00:41:09,380 --> 00:41:11,920 >> Og så er jeg viste dem noget dumt, sandsynligvis. 910 00:41:11,920 --> 00:41:13,450 Jeg vil grave mere til næste gang. 911 00:41:13,450 --> 00:41:16,220 Men for nu, lad os overveje lidt af design. 912 00:41:16,220 --> 00:41:17,444 Vi har talt om stil. 913 00:41:17,444 --> 00:41:19,735 Og denne side hidtil, og de fleste alt, hvad jeg har skrevet 914 00:41:19,735 --> 00:41:21,890 er temmelig ren stilistisk. 915 00:41:21,890 --> 00:41:23,320 Men hvad med design? 916 00:41:23,320 --> 00:41:25,990 Tja, der er en masse redundans i det, jeg har gjort her. 917 00:41:25,990 --> 00:41:28,156 >> Jeg har nævnt ordet farve i et par steder. 918 00:41:28,156 --> 00:41:31,630 Jeg har nævnt skriftstørrelse i et par steder og fed i et par steder. 919 00:41:31,630 --> 00:41:34,870 Og fundamentalt, jeg er co blander to sprog. 920 00:41:34,870 --> 00:41:38,100 I got HTML med mine tags og min attributter og så lige pludselig, 921 00:41:38,100 --> 00:41:40,100 anførselstegn, jeg har det andet sprog i dag 922 00:41:40,100 --> 00:41:43,830 kaldet CSS, som igen, er blot disse centrale value par eller disse egenskaber 923 00:41:43,830 --> 00:41:45,280 adskilt af kolon. 924 00:41:45,280 --> 00:41:47,700 >> Det viser sig, at meget ligesom i C, hvor vi 925 00:41:47,700 --> 00:41:50,550 kan begynde at faktor ud noget kode ind i header-filer, 926 00:41:50,550 --> 00:41:53,520 så kan vi gøre det samme i HTML. 927 00:41:53,520 --> 00:41:56,030 Og et skridt i retning, der er som følger. 928 00:41:56,030 --> 00:42:02,230 Bemærk, at denne version, CSS1.html er Strukturelt nøjagtig samme webside. 929 00:42:02,230 --> 00:42:05,250 Så jeg har fået en hel masse af divs, men denne gang, jeg har 930 00:42:05,250 --> 00:42:07,220 fået slippe af indpakningen div, som du vil se. 931 00:42:07,220 --> 00:42:12,390 >> Og jeg har givet disse tre divs top, midt og bund, unikke id'er. 932 00:42:12,390 --> 00:42:14,760 Det er rart, fordi ved giver disse divisioner 933 00:42:14,760 --> 00:42:18,715 af siden entydige identifikatorer, Jeg kan henvise dem andre steder. 934 00:42:18,715 --> 00:42:19,215 Hvor? 935 00:42:19,215 --> 00:42:21,070 Nå, lad mig rulle op. 936 00:42:21,070 --> 00:42:24,070 Og hidtil, når som helst vi har set i spidsen for en webside, hvad der er 937 00:42:24,070 --> 00:42:28,560 det eneste tag, vi har haft i hovedet af en webside? 938 00:42:28,560 --> 00:42:29,740 Lidt højere. 939 00:42:29,740 --> 00:42:30,799 Bare titlen hidtil. 940 00:42:30,799 --> 00:42:32,590 Men det viser sig at der er et par andre ting 941 00:42:32,590 --> 00:42:35,840 du kan sætte i der, en af som det hedder en stil-tag. 942 00:42:35,840 --> 00:42:37,850 Så for et øjeblik siden, vi kiggede på en stil attribut. 943 00:42:37,850 --> 00:42:39,150 Viser sig der er en stil-tag. 944 00:42:39,150 --> 00:42:41,200 Det tilhører indersiden af hovedet af en webside. 945 00:42:41,200 --> 00:42:42,840 Og nu mærke til, hvad jeg gør. 946 00:42:42,840 --> 00:42:46,540 Jeg har inde i denne stil tag følgende. 947 00:42:46,540 --> 00:42:51,190 Jeg bogstaveligt talt at nævne på linje 20 i navn på et tag, som jeg ønsker at stilisere. 948 00:42:51,190 --> 00:42:53,489 >> Så har jeg åben krøllet tandbøjle og lukkede krøllet tandbøjle. 949 00:42:53,489 --> 00:42:56,030 Så ligner i ånden til C, men igen, det er ikke en funktion, 950 00:42:56,030 --> 00:42:57,796 dette er blot en syntaktisk detaljer her. 951 00:42:57,796 --> 00:43:00,170 Og så selvfølgelig, jeg fortæller browseren, hey browser, 952 00:43:00,170 --> 00:43:05,210 at hele kroppen af ​​siden har en tekst tilpasning af centret. 953 00:43:05,210 --> 00:43:06,930 Og så siger følgende. 954 00:43:06,930 --> 00:43:12,600 Hey browser, hvis du ser en HTML element eller tag i den side, 955 00:43:12,600 --> 00:43:17,040 har en unik identifikator for top, så hash symbolet betyder her bare 956 00:43:17,040 --> 00:43:21,010 unikke idé om top, gå videre og gøre sin skriftstørrelse 36 957 00:43:21,010 --> 00:43:22,490 og dens tekstvægt fed. 958 00:43:22,490 --> 00:43:26,840 >> Hey browser, et element, hvis ID er midten, gør det 24 pixels. 959 00:43:26,840 --> 00:43:31,070 Og hey browser, hvis du ser en tanken om bunden, gør det 12 pixels. 960 00:43:31,070 --> 00:43:33,540 Effekten i sidste ende er præcis den sam. 961 00:43:33,540 --> 00:43:36,500 Hvis jeg går ind i CSS 1, den side ser ens. 962 00:43:36,500 --> 00:43:39,810 Men vi er et skridt i retning en lidt bedre design. 963 00:43:39,810 --> 00:43:44,850 Lad mig nu gå tilbage her til CSS2 og se, hvad jeg ellers har gjort. 964 00:43:44,850 --> 00:43:48,030 >> Nu siden er virkelig, virkelig ren. 965 00:43:48,030 --> 00:43:50,730 Faktisk kan jeg passe alle indholdet på en side her. 966 00:43:50,730 --> 00:43:54,270 Men hvad nyt tag har jeg indført, naturligvis? 967 00:43:54,270 --> 00:43:54,770 Link. 968 00:43:54,770 --> 00:43:57,853 Og det er ikke det bedste navn til et tag, fordi det ikke er et link i den forstand 969 00:43:57,853 --> 00:44:00,780 at vi ved det, men det betyder et link på en anden fil. 970 00:44:00,780 --> 00:44:02,890 Det er lidt ligesom skarpe omfatter i C. 971 00:44:02,890 --> 00:44:06,280 >> Dette er den måde, HTML at sige hej browser, 972 00:44:06,280 --> 00:44:10,240 gå få indholdet af filen hedder css2.css. 973 00:44:10,240 --> 00:44:12,880 Forholdet til mig, er, at det er et typografiark. 974 00:44:12,880 --> 00:44:17,980 Og ja, det er hvad en af ​​de S 'i Cascading Style Sheets midler. 975 00:44:17,980 --> 00:44:20,350 Dette er en stil ark. 976 00:44:20,350 --> 00:44:23,120 Det er bare den tekst fil, der indeholder en hel masse ejendom. 977 00:44:23,120 --> 00:44:25,940 Det er en hel masse af stilarter at du ønsker at anvende til en side. 978 00:44:25,940 --> 00:44:28,860 >> Og så dette tilsyneladende er der henvises til en anden fil. 979 00:44:28,860 --> 00:44:32,970 Og hvis jeg åbner det, CSS2.css, mærke til, at alt jeg har gjort 980 00:44:32,970 --> 00:44:35,900 er kopiere og indsætte alle dette i denne fil. 981 00:44:35,900 --> 00:44:38,220 Og nu, selvom du aldrig har kodet det her før, 982 00:44:38,220 --> 00:44:40,700 lige overveje med legendariske ingeniør hat 983 00:44:40,700 --> 00:44:44,220 på, hvorfor er det et bedre design sandsynligvis? 984 00:44:44,220 --> 00:44:48,910 Factoring ud disse CSS egenskaber, sætte dem ind i deres egen fil. 985 00:44:48,910 --> 00:44:51,330 Selvom vi løst dette problem som for fem minutter siden 986 00:44:51,330 --> 00:44:52,600 i den allerførste version. 987 00:44:52,600 --> 00:44:55,730 >> Vi har ikke forbedret side stilmæssigt, 988 00:44:55,730 --> 00:44:57,520 det er bare bedre design i en vis forstand. 989 00:44:57,520 --> 00:44:58,990 Hvorfor tror du? 990 00:44:58,990 --> 00:45:01,510 Ja. 991 00:45:01,510 --> 00:45:02,260 Mere fleksibel hvordan? 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 Så hvis du ønsker at gå tilbage og ændre tingene, 995 00:45:07,373 --> 00:45:09,540 nu, har du ét sted hvor du kan ændre tingene. 996 00:45:09,540 --> 00:45:11,622 Og i virkeligheden, for noget lignende problem sæt syv, 997 00:45:11,622 --> 00:45:13,690 hvor vi vil gennemføre en bestand handel hjemmeside, 998 00:45:13,690 --> 00:45:15,523 der kommer til at have en hel masse sider. 999 00:45:15,523 --> 00:45:17,620 Og det ville være virkelig irriterende, hvis du beslutter, hm, 1000 00:45:17,620 --> 00:45:21,630 Jeg kan ikke rigtig lide 24 pixels, jeg ønsker at det er 28 pixel eller lidt større. 1001 00:45:21,630 --> 00:45:23,550 Og så nødt til at gøre en globale finde og erstatte 1002 00:45:23,550 --> 00:45:27,560 eller åbne alle dine hjemmeside filer blot til rent faktisk at ændre en værdi. 1003 00:45:27,560 --> 00:45:31,290 Ved at factoring disse stilarter i en centralt sted, 1004 00:45:31,290 --> 00:45:34,720 du kan nu åbne en tekstfil i CS50IDE ind i ethvert program, 1005 00:45:34,720 --> 00:45:36,479 ændre det, gemme det, og gjort. 1006 00:45:36,479 --> 00:45:38,270 Du har formeret dem ændringer overalt. 1007 00:45:38,270 --> 00:45:42,450 Og det ville være den samme i en prik h fil så godt. 1008 00:45:42,450 --> 00:45:46,697 Så nogen spørgsmål således langt på denne syntaks? 1009 00:45:46,697 --> 00:45:48,530 Okay, så vi har gjort alt det forekommer 1010 00:45:48,530 --> 00:45:51,170 undtagen rent faktisk at gennemføre hyperlinks. 1011 00:45:51,170 --> 00:45:52,740 Og så lad os gå videre og gøre dette. 1012 00:45:52,740 --> 00:45:54,830 Lad mig gå videre og oprette en ny fil her. 1013 00:45:54,830 --> 00:45:59,970 Jeg har tænkt mig at kalde det link.html, sat i dagens kode. 1014 00:45:59,970 --> 00:46:03,000 >> Og jeg har tænkt mig at gøre åbne beslag doc typen html. 1015 00:46:03,000 --> 00:46:05,970 Som en sidebemærkning, denne ting på top, denne doc typen erklæring, 1016 00:46:05,970 --> 00:46:08,420 det er den eneste, der er underligt med udråbstegn. 1017 00:46:08,420 --> 00:46:12,100 Du skal bare nødt til at gøre det der, og det betyder, at vi bruger HTML-version 5. 1018 00:46:12,100 --> 00:46:14,460 Ældre versioner af sprog havde meget længere 1019 00:46:14,460 --> 00:46:16,400 strenge, du behov for at sætte der. 1020 00:46:16,400 --> 00:46:18,620 Så her er et eksempel hedder link. 1021 00:46:18,620 --> 00:46:20,950 >> Jeg har brug for et organ af min webside her. 1022 00:46:20,950 --> 00:46:29,770 Og herinde, en href ligemænd lad os sige HTTP://www.disney.com 1023 00:46:29,770 --> 00:46:35,420 og min favorit hjemmeside, vil vi sige. 1024 00:46:35,420 --> 00:46:38,550 Okay, så en meget uskadelige, brugervenlig side. 1025 00:46:38,550 --> 00:46:42,950 Hvis jeg nu går ind i min mappe notering her og åbne op link.html, 1026 00:46:42,950 --> 00:46:44,780 vi har hyper tekst. 1027 00:46:44,780 --> 00:46:47,410 >> Og ja, det er her, H i HTTP kommer fra. 1028 00:46:47,410 --> 00:46:51,580 Hypertext Transfer Protocol handler om at overføre tekst 1029 00:46:51,580 --> 00:46:53,840 der har hyperlinks til andre ressourcer. 1030 00:46:53,840 --> 00:46:58,210 Og ja, her er den velkendte, hvis retro, blå link, hvis der klikkes, 1031 00:46:58,210 --> 00:47:02,607 rent faktisk vil føre mig til Disney.com. 1032 00:47:02,607 --> 00:47:03,940 Nu, åh, der kommer ud snart. 1033 00:47:03,940 --> 00:47:08,970 Okay, så nu, hvad er nogle af konsekvenserne af denne? 1034 00:47:08,970 --> 00:47:11,610 >> Og helt ærligt, starter verden at få lidt mere fortrolig 1035 00:47:11,610 --> 00:47:15,090 og også lidt skræmmende men også lidt mere 1036 00:47:15,090 --> 00:47:17,840 selv undskyldende når du begynder at forstå disse ting. 1037 00:47:17,840 --> 00:47:21,610 Fordi odds er, nogle af jer, hvis du går gennem mappen Gmail spam eller endda 1038 00:47:21,610 --> 00:47:23,990 din indbakke, har du sandsynligvis fået en slags email 1039 00:47:23,990 --> 00:47:26,980 der er beder dig om at ændre din adgangskode måske eller måske verificere 1040 00:47:26,980 --> 00:47:28,910 din PayPal legitimationsoplysninger eller whatnot. 1041 00:47:28,910 --> 00:47:34,510 >> Og i virkeligheden, har du måske fået noget, der siger ligesom klik her 1042 00:47:34,510 --> 00:47:42,260 at nulstille din PayPal-adgangskode. 1043 00:47:42,260 --> 00:47:44,130 Og nu, varsel, hvis dette er ikke Disney.com 1044 00:47:44,130 --> 00:47:51,600 men ligesom badplace.com og reload, opmærksom på, at teksten her 1045 00:47:51,600 --> 00:47:53,710 kunne sige noget overhovedet. 1046 00:47:53,710 --> 00:47:55,260 Og i virkeligheden er det bare ord. 1047 00:47:55,260 --> 00:48:04,610 Hvorfor ikke jeg faktisk være super ondsindet og sige http://www.paypal.com. 1048 00:48:04,610 --> 00:48:14,090 >> Klik her nulstille din PayPal adgangskode og nu genindlæse. 1049 00:48:14,090 --> 00:48:16,220 Dette ser temmelig legitime, ikke? 1050 00:48:16,220 --> 00:48:20,470 Jeg mener, jeg ville ikke klikke på en e-mail, der bare siger dette. 1051 00:48:20,470 --> 00:48:22,450 Men bemærk dikotomi her. 1052 00:48:22,450 --> 00:48:26,880 Den siger www.paypal.com, og i virkeligheden, vent et minut, 1053 00:48:26,880 --> 00:48:29,210 vi ved, at du vil s for sikkerhed. 1054 00:48:29,210 --> 00:48:35,450 Så nu, gå til www.paypal.com HTTPS, men hvis du aldrig har gjort det før, 1055 00:48:35,450 --> 00:48:38,182 får ind i vane med svævende over små links her. 1056 00:48:38,182 --> 00:48:39,890 Og det er svært at se på skærmen der, 1057 00:48:39,890 --> 00:48:41,340 og det er ikke alle, der lettere her. 1058 00:48:41,340 --> 00:48:43,615 Men vejen ned her i den lille lille hjørne 1059 00:48:43,615 --> 00:48:45,740 gør browseren faktisk fortælle dig, at vi vil 1060 00:48:45,740 --> 00:48:48,850 at badplace.com stedet for Paypal.com. 1061 00:48:48,850 --> 00:48:51,620 Nu hvor skal vi hen med dette? 1062 00:48:51,620 --> 00:48:54,859 Alle de eksempler, vi har gjort i dag, vi har hårdt kodet og indtastes manuelt. 1063 00:48:54,859 --> 00:48:56,900 Den web er utrolig uinteressant, når du hårdt 1064 00:48:56,900 --> 00:48:59,844 kode dine websider, således at indholdet er statisk og aldrig ændre sig. 1065 00:48:59,844 --> 00:49:01,760 Selvfølgelig alle vores foretrukne hjemmesider i dag, 1066 00:49:01,760 --> 00:49:04,470 uanset om det er Gmail eller Twitter eller Facebook eller en række andre 1067 00:49:04,470 --> 00:49:05,290 er dynamiske. 1068 00:49:05,290 --> 00:49:07,340 De er ved at ændre i reaktion på brugerinput 1069 00:49:07,340 --> 00:49:08,840 ligesom Googles søgeresultater. 1070 00:49:08,840 --> 00:49:12,415 >> Og så på onsdag, hvad vi gør, er vi forlader HTML og CSS introduktion 1071 00:49:12,415 --> 00:49:14,290 bag os, og vi tager for givet, at vi nu 1072 00:49:14,290 --> 00:49:16,640 kender det, og vi indfører et nyt programmeringssprog 1073 00:49:16,640 --> 00:49:19,050 kaldet PHP, der ligesom C, kommer til at give os 1074 00:49:19,050 --> 00:49:22,450 beføjelse til rent faktisk at skabe programmer at selv generere output. 1075 00:49:22,450 --> 00:49:25,900 I dette tilfælde vil vi bruge PHP til at generere dynamisk web 1076 00:49:25,900 --> 00:49:27,340 sider ved hjælp af denne nye sprog. 1077 00:49:27,340 --> 00:49:28,989 Så mere om det på onsdag. 1078 00:49:28,989 --> 00:49:29,530 Så ses vi. 1079 00:49:29,530 --> 00:49:33,130 1080 00:49:33,130 --> 00:49:37,380 >> [Musik spiller] 1081 00:49:37,380 --> 00:52:38,864