[Powered by Google Translate] [Uge 7, Fortsat] [David J. Malan, Harvard University] [Dette er CS50.] [CS50.TV] Ok. Welcome Back. Dette er CS50, og det er i slutningen af ​​uge 7. Så en af ​​disse dumme små ting, der går rundt på internettet og vi slubrede op, og det skal nu gøre en lille smule af nørdede mening for dig. Nå, det var sjovere at denne fyr, end det var med jer. Apropos, godt, gutter, i dag er Nate fødselsdag. For at give dig en fornemmelse af, hvor godt Nate og jeg er på web-udvikling baseret på mandagens klasse og baseret nu på dette, Jeg troede, jeg ville trække op Nate hjemmeside, hvis du ikke har set det endnu. Dette her ia Nates HTML. Så se hans kildekode, hvis du gerne vil se, hvordan du gør dette, og Nate, hvis vi kunne embarass du lige kort, personalet fik du en lille ting hvis du gerne vil dele nogle dessert med nogle af børnene i klassen her. Hvis du gerne vil komme på ned. Du alle klappe og er meget rart, men ingen sidder overalt nær Nate, en eller anden grund. ved, at ryggen zone Så måske du kan finde nogle folk at nyde disse med. Happy Birthday, Nate. 

Yderligere hej'er: Vi viste et par klip fra vores CS50x studerende. Hvis du gerne vil se, hvem der ellers er i verden der er efter langs, kan du hovedet til denne webadresse, hvor Joseph, en af ​​vores TF'er, har sammensat en montage af en slags af alle, der har at indsende disse videoer, blandt dem Rick Astley. Og hvis du ruller gennem disse, det er virkelig ganske inspirerende at se de mange forskellige lande og byer, hvorfra folk rapporteringskrav. Så hvis du gerne vil tage et kig på det, vil det være op til slutningen af ​​semestret. I dag fortsætter vi vores kig på nettet, web-programmering, HTML og lignende, og vi har også frokost kommer op denne fredag hvis du gerne vil, og især ikke har gjort det før. Denne fredag ​​tema vil være Nate fødselsdag, så hvis du gerne vil have fødselsdag frokost med Nate og andre, nogle af vores venner fra industrien, bedes du hovedet til den pågældende webadresse dér. Space, som altid er begrænset. Også, hvis du har glemt, indse, at næste uge er sidste frist for problemet sæt 4 s skattejagt, hvorved efter at komme alle disse JPEGS fra card.raw, du og din afdeling hjælpere, hvis du ønsker, kan du prøve at fotografere som mange af de dataloger fra det hukommelseskort som muligt, og du og din afdeling vil derefter vinde en fabelagtig præmie. Vend tilbage til Pset 4 specifikation hvad at indsende og hvornår. Også, hvis du gerne vil have dit værk udødeliggjort på kursets hjemmeside og dens historie af tøj, vide, at du er velkommen nu at begynde at indsende designs for dette års T-shirts og sweatshirts og lignende. Vi vil gøre vores bedste for at inkludere så mange som vi kan, men vi vil have nogle medlemmer af personalet gennemgang samtlige mønstre at sikre, at de er i overensstemmelse med de specifikationer, og vi derefter vælge generelt en håndfuld af dem at blive udstillet. Så hvis du er den konstruktionstype, bare vide, at kravene for grafik er PNG, mindst 200 DPI, de bør ikke være mere end 4000 x 4000 pixels, og ikke mere end 10 MB, men du er velkommen til at bruge ting som Photoshop eller GIMP eller forskellige grafiske programmer, hvad du har til din rådighed. 

Også i horisonten, er det endelige projekt. Det endelige projekt virkelig er kulminationen på 50, hvorved alle de opgaver i kurset, det er din chance for virkelig at gøre dine egne ting. Og det kan simpelthen gøre noget for sjov, det kan være at løse nogle presserende problem din student gruppe har, for nogle nye hjemmeside. nogle nye kollektion mekanisme for data Det kan være en mobil applikation til Android, for iOS. Virkelig, himlen er den grænse, og i løbet af de næste par uger, som vi overgangen fra C til disse højere niveau sprog som PHP og JavaScript, vil du finde dig selv i stigende grad bekendt med nogle virkelige verden teknikker, nogle virkelige verden, og at supplere det, vide, at kurset har en historie af seminarer, hvorved løbet af de næste par uger, nogle af underviserne og af vores venner fra på campus vil tilbyde valgfrie seminarer der går ud over, hvad der typisk er foretaget under punkt at introducere dig til ting som Android programmering, at introducere dig til ting som iOS programmering eller mere avancerede web-udviklingsprojekter teknikker. Der er en hel historie om disse allerede online. Hvis du går til cs50.net/seminars, har vi gjort det i en hel del år, og du vil se, at arkiveret her med PDF-filer og videoer og lignende er flere dusin videoer af seminarer. Sidste år, for eksempel, havde vi et seminar om acing dine tekniske interviews, hvis du rent faktisk søger at gå ud og gøre en praktikplads eller fuld tid job. Windows mobile udvikling, Android udvikling, Google Maps, API, CSS, udvikling til BlackBerry, Emacs. Virkelig, er du velkommen til at tage et kig på nogen af ​​disse seminarer på din bekvemmelighed. Og vi vil holde nogle nye i dette semester, så godt. 

Så hvad er videre med det endelige projekt? Nå, det første, selv om denne dato er noget nært forestående, Dette er egentlig bare en mulighed for at begynde at tænke på det endelige projekt helt realistisk. Vi kender kun begyndelsen til noget af det, vi vil stadig være der dækker i kurset, HTML, PHP og lignende, men du er alle bekendt med internettet, og I forspænding denne samtale mod nettet kun fordi de fleste mennesker ender med at gøre webbaserede afgangsprojekter, men det er på ingen måde nødvendige. Brug C er fint, objektiv C, Java, ethvert andet sprog, du måske kender eller gerne vil vide er ganske fint. Men for at få safterne flyder indledningsvis, vil vi forvente, at indgivelse af en preproposal der, per PDF på hjemmesiden, som nu cs50.net, og øverst til venstre kan du se afgangsprojekt er specifikationen for det endelige projekt, og i der er oplysninger om preproposal og lignende. Det temmelig meget koges ned til en e-mail til din undervisning fyr bare for at finde en samtale med ham eller hende om, hvad du tænker. På projects.cs50.net er en samling af ideer fra folk på campus Hvis du kæmper med at komme op med en idé, og manual.cs50.net/APIs er en samling af links til API'er. 

Men hvad er en API? Hvad er en API? Jeg har sagt det mindst to gange, i henhold til udskrifterne af de sidste mange uger. Hvad er det? [Studerende, uforståelig] >> Okay, godt. Så noget programming interface. Application Programming Interface, og det kan tage flere former, men hvad det virkelig kan koges ned til, er kode at en anden hs skriftlige eller data, som andre har indsamlet der er gjort tilgængelig for dig på en eller anden programmatiske måde. Du kan skrive kode i C, PHP, Python, Ruby, uanset dit sprog valg typisk er, og du kan eller anden måde bygge videre på en andens funktionalitet eller en andens datasæt. For eksempel, hvis jeg går til dette link her og du vil se et par links på den efterfølgende side hvor vi har CS50 egen API'er, som er meget Harvard-centreret, og derefter tredjepart API'er. Blandt de tredjeparts API'er er virkelig nyttige ting som at være i stand til at sende SMS'er til mennesker, være i stand til at modtage SMS'er fra folk. Og sådan noget som du måske ikke har nogen idé om, hvordan man gennemfører selv, men takket være tjenester, nogle gratis og nogle kommercielle, du kan bygge oven på dem og gøre noget af interesse for dig. Blandt CS50 API'er er disse campus-centreret ting som Harvard kurser, energi, begivenheder, mad, kort, nyheder, tweets og Shuttleboy egne, og disse er API'er, der ser lidt noget som dette. 

Lad mig trække op HarvardFood API. Hvis du nogensinde har været til HUD hjemmeside, har du sikkert været der at bare se, hvad der er til middag eller at se, hvad timerne er for nogle d-hal. Tja, det er ikke særlig let at navigere, og så hvad vi gjorde for nogen tid siden var vi skrev software, Det sker for at være i PHP, der faktisk skærm skraber hele HUD hjemmeside. At screene skrabe noget betyder at skrive et program på et sprog som PHP der foregiver at være en browser, selvom du måske køre det fra en kommandoprompt, der foregiver at være en browser, opretter forbindelse til et websted, henter sin HTML, det sprog, som den er skrevet, og læser derefter den, eller mere specifikt, analyserer det top til bund, venstre mod højre. Og hvad vi gjorde, var vi skrev vores kode på en sådan måde, at helst vi så noget i denne HTML, der lignede noget på menuen, ligesom hamburger, ville vi derefter importere ind i vores egen database. Og helst så vi næringsindhold, ville vi importere det til vores egen database. Og hvad vi gjorde, var udnytte det faktum, at trylleri hjemmeside, selvom det kan være lidt af en udfordring for os mennesker at navigere under hætten, er alle HTML genereres af deres egne computerprogrammer. Så alle deres HTML, selvom det kan se rodet, ligesom de fleste hjemmesider nedenunder hætte følger et mønster. Så vi har lige brugt et par timer at finde ud af det mønster således at der i sidste ende, smider vi væk hele rodet HTML, alle æstetik fed vendende og kursiv og lignende, og hvad vi efterfølgende er i stand til at gøre, er at eksponere de samme data. For eksempel. På denne måde Så vi, ifølge dokumentationen her har meddelt verden, at hvis du beder om en URL der ligner dette, food.cs50.net / noget, og du giver visse parametre, som vi vil tale om i dag, ligesom slutdato tid, start-dato tid, mel og så videre, hvad vores servere vil vende tilbage til dig, for eksempel, er en CSV-fil, komma separted værdier som en Excel-fil, indeholder alt til morgenmad på netop denne dato i marts sidste år når jeg tilfældigvis skrive op denne dokumentation. 

For dem bekendt, er CSV ikke den eneste filformat. Der er et andet format, der er så meget desto mere alsidig kaldet JSON, JavaScript Object Notation. Dataene kan komme tilbage i dette format. Så takeaway her er, at uanset om du dykker ned i denne API eller andre af CS50-eller noget derude på internettet, eller slet ikke, indse, at verden i stigende grad er begyndt at standardisere hvordan maskiner kommunikere med hinanden. Vi bruger standard dataformater som CSV-eller JSON. Og hvad dette betyder for dig er, at du kan skrive den interessante del af et program der lader din bruger søge en spisesalen menu, der lader dem oprette lister over favoritter, der lader dem få tekstmeddelelser når deres favorit måltid er ved at blive serveret i nogle d-hall ved hjælp af en andens datasæt og bygge oven på deres API'er. Så mere om dette i form af seminarer og dokumentationen, som du har her online. Så dem, så er API'er. 

Det bringer os tilbage til HTML. Quick resumé. Hvad er HTML? [Studerende, uforståelig] >> Godt. HyperText Markup Language. Nogen, hvad er Hypertext Markup Language? HyperText Markup Language. Okay. Så HTML, HyperText. HyperText bare refererer til internettet, for det meste. Markup betyder, at det ikke er faktisk et programmeringssprog, HTML. Det er ikke et sprog, som du kan udtrykke logik i. Det behøver ikke løkker. Det behøver ikke betingelser. Det behøver ikke funktioner, per se. I stedet har disse ting kaldet tags, eller mere korrekt, elementer. Og disse elementer har start-tags og slut tags, eller åbne tags og lukkede tags, og hvad disse tags generelt betyde for en browser er, begynde at gøre noget, og derefter stoppe med at gøre noget, selvom der er undtagelser fra dette. Nogle gange er det bare 'sætte et linjeskift her, "for eksempel. Og vi så eksempler på, at den anden dag, mellem fed vendt, linjeskift, og derefter et par andre mærker. Så HTML er det sprog, som websider er skrevet. Så hvis jeg går til noget som Google.com og træk op bare deres hjemmeside, huske, at hvis du højreklikker eller kontrollere klik og se på visning side kilde, typisk det er en komplet rod i disse dage under kølerhjelmen, men det er fordi computere er ligeglad white space, så det behøver ikke at se pænt ud. Men hvis vi zoome ind på dele af det, bemærke, at Chrome, bare være rart, har farvekodede ting. Dette er nemlig den allerførste tag, som vi så i en webside. Og igen, HTML 5, den nyeste version af dette sprog, behøver det her i begyndelsen, <! DOCTYPE HTML, hvad enten små eller store, men det er bare en slags standard, der siger, hey verden, her kommer en HTML-fil i version 5. 

Den interessante del begynder her. Så <html, og så var der to børn af de HTML-elementer sidste gang. Hvad var de to vigtigste børn? Hoved og krop, ligesom den fyr med den tatovering for et øjeblik siden. Der er to dele af websiden, hoved og krop, og tilbagekaldelse altså, at måske den enkleste webside vi kunne gøre ser sådan ud. Og jeg har indrykket det bare at være slags pæne og ryddelige med min kode, men hvad der er virkelig vigtigt her er, at der er en vis hierarki til dette. Og enhver tag, jeg har åbnet Jeg har lukket, og at der er derfor denne symmetri til alle opmærkningen, som jeg har oprettet. Så sidste gang vi begyndte at skrive websider på min egen bærbare computer. Jeg åbnede op tekstredigering, jeg har gemt filen som hello.html, Jeg derefter trak filen på min browser, og voila, jeg havde en side på internettet. Nu er det ikke helt tilfældet, havde jeg en side på min harddisk, og jeg var bogstaveligt talt den eneste person i verden, der ville se, at websiden i en browser. 

Så i dag, introducerer vi et virkeligt webserver og begrebet faktisk tjener indhold på internettet og hvor det hele begynder at passe sammen. Så det viser sig, at al den tid i CS50 apparatet du har haft en web-server på din computer. Vi har i retfærdighed, kun anvendes det til gedit, for Dunk, for GDB og lignende, men også installeret af os til dig i apparatet er en web-server, og at webserveren sker for at være fri, et open source, en af ​​de mest populære i verden, kaldet Apache. Dets mere tekniske betegnelse er httpd, d er for daemon her, som er et teknisk ord for en server. Så installeret i CS50 apparatet er en webserver, og hvad betyder det? Tja, en web-server er, konceptuelt, nogle server på internettet, der disker op med webindhold. Når du bliver spurgt efter en fil, det spytter den HTML, der komponerer denne fil, og voila. Du ser nogle websteds startside. Men en server er, mere præcist, et stykke software. Det behøver ikke at være på en fysisk maskine, er det bare være et stykke software kører. Så CS50 apparatet naturligvis er et stykke software selvom det er slags foregiver at være en maskine. Det foregiver at være en computer inde i en computer, men det betyder blot, at apparatet sikkert kan køre ting som webservere. Det kan faktisk køre e-mail-servere. Vi kunne køre en instant messaging-server i apparatet, hvis vi ønskede at, og ja, vi køre en anden type server, kendt som en database-server, MySQL. Men mere om det i næste uge. Det betyder, at jeg rent faktisk kan besøge websider inde i mit apparat ved hjælp af en browser i maskinen eller endda på min egen bærbare computer. min Mac eller min pc Så hvad betyder dette? Det viser sig, at hver gang du kører en Linux-computer, dens kælenavn er "lokal vært." Det behøver ikke have et domænenavn, fordi vi ikke har købt et domænenavn for noget som apparatet, dens standard navn, så er lokal vært. 

Men for at få apparatet til at starte betjener op websider, vi nødt til at skabe dem først. Så lad os gøre det. Lad mig gå ind i en terminal vindue her og bemærke, at jeg er på min typiske John Harvard prompt. Lad mig gå videre og skriv ls, og vi vil se nogle velkendte ting fra dette semester, desktop, downloads, Dropbox og så videre, men nu starter vi vender vores opmærksomhed mod et par. På mange Linux webservere der er denne mappe, der hedder offentlig html, men vi vil springe over, at en for nu og fokus på dette, vhosts. Enhver ved, hvad en vhost er? Bare dum jargon for virtuel vært, og hvad det betyder, er, at på en typisk server du kan faktisk være vært for flere websteder. Du kan købe et domæne navn som foo.com, og du kan hoste det på en server. Men du kan også købe bar.com og hoste det på den samme server. Årsagen er, browsere er smart nok til at informere serveren når en bruger anmoder om nogle webside, hvilken domænenavn brugeren ønsker hjemmesiden for. Så hvad er rart om dette er at du ikke behøver én fysisk server eller én CS50 apparat for hvert websted, du måske ønsker at oprette. Du kan bruge den samme server og udvikle en hundrede forskellige hjemmesider. Og ja, hvis du er en person, der forsøger at starte en hjemmeside, hvad enten for sjov eller for erhvervslivet, du typisk vil gå ud på internettet, og du vil betale nogen ti bukke en måned, hundrede dollars om måneden at være vært for dit websted for dig. Og den måde, der virker, er de opkrævning andre mennesker ti bucks en måned eller hundrede bukke en måned at være vært andres hjemmesider på deres samme server. Grunden til at de kan gøre det er på grund af denne funktion, der hedder bhosts, men mere om, at når det drejer sig tid til afgangsprojekter. 

For nu, lad os bare dykke der. Så cd vhosts, og hvis jeg skriver ls nu, bemærke, at der er en mappe derinde kaldet lokale vært. Det er fordi, som standard, er apparatet tal du nogensinde vil komme til at køre en hjemmeside på et apparat. Dette er egentlig ikke den virkelige verden, det er ikke en real-verden webserver. Så lad mig gå ind i den lokale vært, og nu skal vi se derinde en sidste mappe kaldet HTML. Så det er en lidt dyb, hierarkiet, men hvis og når du beslutter dig for at begynde at udvikle flere websteder i løbet af de næste n måneder eller år, denne form for mappe struktur tendens til at være nyttig. Lad os nu gå ind i HTML, som jeg lige gjorde, type LS, og intet er der. Så lad os nu gå videre og gøre det. Lad mig åbne Chrome inde i apparatet, lad og mig gå til http://localhost. Så bogstaveligt navnet for mit apparat, indtaste, og jeg får indeks /. Dette er egentlig ikke viser mig noget af interesse, men det viser sig, at det, vi ser, er, at mappe, HTML. Der er intet i den pågældende mappe lige nu, så i stedet, hvad jeg har tænkt mig at skal gøre er først at oprette en fil. Opret en HTML-fil som vi gjorde i mandags, men denne gang sætte det ind i apparatet. For dem af jer, der forsøger at følge med laptops nu, lad mig gøre en side, der vil blive dækket i den web-baserede Pset, men for at få denne til at arbejde for allerførste gang, du er nødt til at køre denne kommando: sudo service httpd start. Og dette, igen vil blive gentaget i det sidste Pset, men hvis du spiller sammen derhjemme nu, webserveren er slukket i apparatet, og det er således, at det ikke sap op RAM og hukommelse i 7 uger ud af semesteret, hvor vi ikke har brug for det. Så du er nødt til at køre denne kommando én gang, og du vil få et output sådan. Så skulle du være i stand til at spille sammen her. Lad os nu gå tilbage i denne mappe. Denne mappe er tom, så lad mig starte med at oprette en fil, gedit hello.html. 

Ok. Gedit er åben som sædvanlig. Lad mig gøre doctype, html, html, lad mig komme foran mig og begynder at lukke mine tags i forvejen. Nu har jeg hovedet. Lad mig gå videre og lukke hovedet, lad mig nu gøre titlen på den side, hej verden ligesom sidste gang, luk titel, nu lad mig gøre en krop. Herinde vil jeg sige hej, verden med nogle exclams at gøre det klart, at det er en anden streng. Tæt krop, og lad mig nu gå videre og fil spare. Lad mig gå tilbage til min terminal vindue, og hvis jeg skriver ls, Jeg vil formodentlig se hello.html. Og det gør jeg. Så nu lad os gå tilbage til min browser, klik genindlæse, og du kan se, vi er faktisk inde i denne HTML mappe. Jeg kan ikke se en webside endnu, det er Apache, webserveren, bare vise mig listen indholdet af denne mappe. Ligesom Mac OS eller Windows vil typisk gøre på din egen lokale harddisk. Så hvis jeg ønsker at se denne webside, kan jeg klikke på dette lille link her, hello.html, og ja, det er, hvad jeg havde forventet at se. Nu, igen, dette er ikke en webadresse, som nogen af ​​jer kan besøge lige nu, fordi det for dig, host lokale, hvis du har en bærbar her, Det refererer til din egen instans af apparatet. Det er på min egen personlige apparat, men det er lidt dumt for mig at have, at have en bruger som mig klikke på hello.html til rent faktisk at se indholdet af denne side. Det viser sig, at webservere som Apache lad du har en standard fil til en webserver. Bemærk her har vi hello.html. Hvad er kommandoen i Linux til at omdøbe en fil? 

MV, for træk. Så lad mig gøre det, og lad mig omdøbe hello.html til index.html. Lad mig skrive ls for at bekræfte det er nu blevet omdøbt. Nu dette vil - hvis jeg gå tilbage til lokale vært, bemærke nu, at jeg automatisk er begyndt at se denne webside. Dette er identisk med min faktisk gør / index.html, men nice er nu, at webserveren er regne, åh, hvis du har en fil, der, af menneskelige konventioner, kaldes index.html, Lad mig vise brugeren, at filen som standard snarere end nogle dumme katalogliste der er slet ikke brugervenlig. Faktisk har de fleste websteder, du besøger på internettet ikke har en liste over filer at klikke på, de bare vise dig indholdet. Så det er, hvordan vi kan gøre det, index.html. Så dette er sjovt og godt, men det er en temmelig simpel webside. Lad mig gå videre og åbne index.html i mine vhosts, lokale værter, html bibliotek, og lad os tilføje noget af større interesse. Så der er hej verden, lad os i stedet sige "Dette er CS50, Harvard College er. . . ' Så i begyndelsen af ​​kursuskatalog beskrivelse af nogle slags der. Nu, hvis jeg genindlæse, skal jeg se det i min hjemmeside. Okay, og jeg kan se det, men formoder at jeg ønsker at nu vise nogle mere indhold i denne fil. Jeg kunne gå ned her og sige, forudsætninger ingen, selv om nogle af jer sikkert er ligesom, 'Ha ha ha, ingen forudsætninger. " Men - officielt. Så genindlæse, og nu har vi den samme ejendommelighed, som vi så sidste gang. Men hvorfor er det? Det var et simpelt fix. Hvorfor er denne side brudt? [Studerende, uforståelig] >> Ja, vi har løst det før ved udtrykkeligt at fortælle browseren 'sætte et linjeskift her. " Og det er fordi, igen, er en browser kun vil gøre eksplicit, hvad det kodesprog fortæller det at gøre, så selvom du måske har ramt indtaste én eller to gange eller endda ti gange, det kommer til at kombinere, at alle i et enkelt rum, blot ved konvention. Så hvis du virkelig ønsker et linjeskift, du nødt til at bruge br tag, og nu varsel, ligesom mandag, satte jeg den / indersiden af ​​dette mærke, kun fordi dette bare ikke føles rigtigt at starte et linjeskift og derefter stoppe det med noget i mellem. 

Så konventionen i HTML, er at åbne og lukke et tag samtidigt. Som en sidebemærkning, vil du se en masse hjemmesider i bøger ikke gør det. Det er korrekt at gøre eller ikke at gøre det, men vi vil hævde at design-wise og stilistisk, det er bare bedre fordi derefter hver tag er både åbnes og lukkes en eller anden måde. Så lad os nu gemme og genindlæse. Gå tilbage til browseren, okay. Nu er vi gør nogle fremskridt, men det er ikke helt nok. Lad os gå videre og begynde at skrive i nogle længere brødtekst. Så lad os sige, "En hurtig brun ræv springer over en doven hund. ' Og lad mig bare kopiere og indsætte det et par gange således at vi har et tekstafsnit. Lad mig gå tilbage herovre. Så det ser ikke meget god. Jeg har et linjeskift, så det er okay, men nu, når vi at komme til det punkt at have en webside der har masser af indhold og ikke blot enkelte linjer til at demonstrere HTML, kan vi begynde at tænke på disse ting som faktiske stykker. Og vi kan begynde at strukturere vores webside lidt mere rent. Og ja, hvad jeg kan gøre, er at gå op her inde i min krop tag, og ved du hvad, hvis 'Dette er CS50. . . ' virkelig demarks begyndelsen af ​​et afsnit, godt, lad os mærke det som sådan. Lad mig led teksten, blot ved konvention, lad mig sige at dette stykke slutter her, og derefter snarere end gør dette linjeskift, lad mig bare sige at dette hører til der, og som et nyt afsnit, og jeg vil bare hurtigt led ved bare clobbering alt dette ting. 

Så nu har vi en indrykket afsnit der, og nu er vores markup er begyndt at få lidt mere semantisk overensstemmelse med, hvad vi prøver at gøre. Vi har et afsnit, så lad os kalde det et afsnit med p tag. Vi har et andet stykke, så lad os kalde det et afsnit med p tag. Og nu, hvad browseren vil typisk gøre er ligesom i en engelsk bog eller essay, hvor du typisk se nogle linjeskift mellem afsnit. Browsere vil gøre det for dig automatisk. Så nu har vi to stykker, og vi kan fortsætte dette. Men, selvfølgelig, på internettet, når du har organer tekst Det er ikke typisk bare enorme klatter af tekst. Der er ofte hyperlinks derinde. Så hvis vi ønsker at for eksempel indeholde nogle links der, Antag, hvad der kunne være af interesse uanset webside Jeg skaber her er - Lad mig gå til Google.com, og lad mig søge efter en hurtig brun ræv. Gå til Google billeder, og hvad med - det er nuttet. Vi vil gå med dette. Så her har vi en hurtig brun ræv springer over en doven hund. Så hvad jeg har tænkt mig at gøre her, blot af hensyn til demonstration, er Antag, at dette billede var på min server, og jeg havde været at skabe disse billeder. Hvad jeg vidste bare var højreklikke eller kontrollere klik på billedet, og hvad du vil se i de fleste browsere er lidt menu - stoppe med at gøre det - en lille menu, der giver dig mulighed for at vælge kopiere link placering eller kopiere URL. Så lad mig gå tilbage nu til min HTML, og formoder, at jeg vil til hyperlink dette til en anden webside. 

Hvad var det mærke opfordret til det? [Studerende, uforståelig] >> Yeah. Så a href for hyper reference. Lad mig gå videre og indsæt det i. Det er en temmelig lang URL, så lad mig ind ud. Luk parentes, så nu mærke til jeg er helt herover fordi den pågældende webadresse tilfældigvis være temmelig lang. Lad mig rulle over her til slutningen af ​​hurtige brune ræv, og så lad mig lukke dette tag med </ a, hvor jeg kun lukket navnet på mærket. Lad mig nu gå videre og gemme denne fil, genindlæse websiden, og nu, som standard, er der vil blive understreget med blåt for mig, men ja, kan jeg nu klikke på denne og voila. Der er det billede. Og det behøvede ikke at være et billede, det kunne have knyttet til nogle andre tilfældige hjemmeside på internettet. Jeg kunne gøre det, for eksempel med CS50, så en sidste eksempel her. 'Dette er CS50 "kan give mening at gå en, href = http://www.cs50.net tæt citat, tæt anker. Så nu det er en endnu kortere URL, og denne gang vi kommer ikke til at linke til et billede. Vi i stedet kommer til at linke til en anden side. Nu har vi et billede her. Jeg mener ligesom vi kan gøre det lidt bedre end blot at linke til et billede. Hvad hvis vi ønsker at rent faktisk legemliggøre det i vores egen webside? 

Nå, hvad jeg kan gøre her er, snarere end link til denne grafik, Lad mig i stedet skære URL'en, og vi vil slippe af med den hyperlink og rydde op. Og vi vil gå ned her og slippe af med dette. Vi har ikke rigtig brug for alle disse sætninger nu, så lad mig forkorte den side en lille smule. Og derefter ned her lad mig gå videre i et nyt stykke, sige, at jeg ønsker ikke tekst nu, jeg vil have et billede, hvis kilde vil være, at URL. Et billede, som et linjeskift, er enten der eller det er ikke. Så lad mig straks lukke det mærke. Lad mig gå videre nu, og luk det afsnit, jeg er inde, og hvis alt går godt med hej, verden, hvis jeg genindlæse nu, Jeg, ja, se til højre inde i min egen webside et billede. Så nu har vi et billede tag, et anker-tag og lignende, og for god foranstaltning, så lad mig gøre en anden ting, der er ofte overset på hjemmesider i disse dage: Lad os give nogle beskrivende tekst til dette billede for folk, der er på en mobil enhed og derfor måske ikke være i stand til at downloade billedet meget hurtigt, for folk der er blinde og kan ikke være i stand til at se billedet men de kan have en skærmlæser, der kan fortælle dem, hvad dette billede er af. Og at gøre det, der er en anden egenskab for billedet tags kaldet alt for alternativ tekst. Og hvad jeg kan gøre her er at sige, 'Dette er en hurtig brun ræv.' Således at selv om humane kan ikke se billedet på skærmen, han eller hun kan i det mindste hører, som med en vis stykke software, hvad der faktisk er der på skærmen. 

Det vil ikke ændre æstetik siden, men det er bestemt god praksis for brugerne. Okay, lad os forlade denne webside i sin nuværende form, men lad os se om vi ikke kan nu præsentere nogle bedre metoder til at skrive disse websider, nogle erfaringer, der vil tjene os godt som vores sider får mere og mere kompleks. Hvad vi ikke vil gøre i løbet af de næste par uger er at gå dig gennem alle de snesevis af HTML-tags, at der er. Meget gerne i bunden tilbage i uge 0, er det sandsynligvis vil være tilstrækkeligt at give et højt niveau overblik over nogle af de begreber, en hurtig rundvisning i nogle af blokkene du var sandsynligvis i stand til, temmelig komfortabelt, til at navigere på egen hånd, de forskellige puslespilsbrikker. Og det kommer til at ske igen i HTML, mest sandsynligt, hvorved der er rigelige ressourcer på internettet, at vi vil pege dig på, forskellige lærebøger, hvis du foretrækker at læse en lærebog, der vil lede dig gennem alle de forskellige ting, du kan gøre med HTML, men virkelig, vi har set hidtil i HTML fleste af de grundlæggende begreber. Vi har begrebet tags, der åbnes, bliver tags lukket. Nogle mærker, der både åbnes og lukkes i den forstand, at de er tomme, og der bør ikke være noget inde i dem som et billede tag eller et linjeskift, der er lige der. Vi har også set allerede på begrebet en attribut, ligesom alt eller kilde. Bemærk, at disse ord har en tendens efter sædvane være til korte og koncise. 

Vi har ikke diskretion over, hvad disse ting kaldes, en anden, der opfandt HTML kom op med disse navne. Så du bare nødt til at begynde at vide eller se op, når som helst du har brug for dem, hvad navnene er for disse tags og attributter. I forbindelse med disse egenskaber, tilskriver generelt ændre adfærd af nogle tag. I dette tilfælde fortæller kildeattributten billedet tag hvad kilden af ​​billedet bør være. Href-attributten fortæller ankerkode hvad det burde faktisk være linker til. Men med hensyn til strukturen af ​​en web-side, selv om Facebook og Google og lignende ligne en komplet rod under emhætten ved første øjekast, hvis du begynder at læse igennem det mere metodisk, de alle følge denne grundlæggende, grundlæggende struktur. Men vi kan forbedre stilisering af disse ting. Så lad mig gå til nogle eksempler, som jeg forberedt på forhånd. Lad mig gå videre og kopiere dem fra en anden mappe her og sætte dem ind i denne mappe. På forhånd var, hvad jeg gjorde forberede et par filer: search0, search1, search2, og search3 og 4. Lad mig gå videre og åbne den første af disse filer, og lad os se om vi ikke kan begynde at skabe vores egen søgemaskine. Øverst i denne fil, er som normalt er tilfældet i klassen, bare en masse kommentarer. I HTML, selv om de måder, hvorpå du starter en kommentar er <-! og så er du inde i en kommentar, en multi-line kommentar. Når du er klar til at stoppe denne kommentar, kan du gøre ->. Så alt i toppen i blå er bare en kommentar. 

Dette er min doctype erklæring, som igen, kan du bare kopiere og indsætte på tro, for nu. Dette blot fortæller browseren, 'Her kommer nogle HTML 5 «. Nedenfor dette, på linie 14 er den første af mine faktiske koder, og det bare siger, som før, her kommer nogle HTML, her kommer lederen af ​​min side, her kommer titlen, og derefter omvendt, det er det for den titel, det er det for hovedet. Her nu kommer kroppen af ​​min side. Så et par nye mærker nu: h1 står for udgiftsområde 1. Der er en tradition i HTML for mange år tilbage at have forskellige størrelser af tekst. Og tilbage i dag, hver enkelt betød generelt bare stor og fed. Men der er også h2, som er store, men ikke helt så stor og fed. Der er h3, som er form for store, men ikke nær så stor og fed, og så videre, helt ned til H6. Disse dage, dog er h1, h2 og h3 virkelig betød at have mere semantisk betydning for dem, hvorved h1 er virkelig en overskrift: overskriften på en webside, overskriften i en kolonne eller sådan noget af teksten. Så jeg har bevidst sagt h1 CS50 søgning> h1 at Præcisér at dette virkelig overskriften, titlen på min side. Ikke titlen i titellinjen forstand, men den titel, som du faktisk se på selve websiden, i kroppen. Nu dette, kan du sikkert gætte, hvad det er, selv om vi har et par nye stykker af syntaks. Dette er en form. Så nettet virkelig bliver interessant når websites tage input fra brugerne. I denne klasse, i det problem sat på web programmering Vi kommer ikke til at lave en hjemmeside, per se, med statisk indhold, der viser fotografier, som du har taget, eller det er min cv, og ting om mig, fordi disse ting er relativt nemme at sætte sammen. Det er svært at gøre tingene smukke på nettet, men i det mindste sætte op indhold er temmelig triviel. Men tingene bliver virkelig interessant, når nogen kan besøge din hjemmeside og give input og kan udfylde formularer, kan afkrydse afkrydsningsfelterne og kan interagere med din hjemmeside. Og ja, sandsynligvis hvert websted, du holder af disse dage, i detaljer, er en eller anden måde interaktiv. Facebook, Google og lignende, der tager input fra brugeren og frembringe tilpassede output. 

Så lad os begynde at gøre det nu. Lad os overgang nu fra blot ved hjælp af HTML til markup af statisk indhold som i stedet en leverance mekanisme til dynamisk indhold. Og mod dette formål, så lad os gennemføre vores egen søgemaskine. Lad os gøre det på følgende måde. Her er den form tag. Handlingen attribut angiver, at når brugeren udfylder denne formular med deres tastatur, vil det blive forelagt til denne webadresse her. Så jeg er lidt snyd. Det kommer til at tage os lidt længere end én klasse at gennemføre hele søgemaskine, så vi vil bare gøre den forreste ende, så at sige. Vi vil gøre den del, der lader brugeren søge, og vi vil sortere i punt til Google den hårde del af at finde søgeresultater, men specifikt, jeg vil tale med Googles webserver ved hjælp af en af ​​to meget populære metoder. Én er få, en anden, at vi til sidst vil se, at post, selv om der er andre, der så ofte bruges. Så få bare fremmaner ideen om, jeg ønsker at få noget indhold, få nogle søgeresultater. Dette, kan du måske gætte, hvad dette betyder. Dette er en form for input, er det i virkeligheden kommer til at ligne et tekstfelt, og navnet på den indgang, navnet på denne variabel, så at sige, vil blive Q for forespørgsel ved overenskomst. Og igen, er typen af ​​dette input vil ikke være et afkrydsningsfelt; det kommer ikke til at være en menu, det vil være et tekstfelt som angivet ved denne attribut her, og denne tekstboks, ligesom et linjeskift, er enten der eller ej. Så vi har en tom element med skråstreg inde at mærke. Så jeg har tænkt mig at sætte et linjeskift, og du kan måske gætte, hvad det vil gøre. Det er en anden form for formular input. 

Denne ene kommer til at blive brugt til at sende formularen. Så det vil være den store knap, som brugeren kan klikke at sende formularen, og etiketten på denne knap vil være "CS50 Søg '. Luk form, luk organ, tæt HTML. Lad os se hvad vi har i form af denne webside. Så lad mig gå til min browser, lad mig gå, stadig, at lokale vært. Det er stadig index.html, så hvis jeg ønsker at se denne fil, der hedder search0, Jeg kan simpelthen gøre / search0.html, enter - og den første af mine fejltagelser. Hvad sker der? Jeg helt klart ikke har tilladelse at få adgang til denne fil, en eller anden grund. Men det er fordi, i modsætning til arbejde, vi har gjort hidtil i C, hvor de programmer, du skriver antages at være runable af dig, eksekverbare af dig, det er faktisk ikke tilfældet på internettet, hvorved nogle gange er du måske ønsker at oprette filer på en server, men du ikke ønsker, at hele verden skal kunne se dem. Snarere, du ønsker i verden for at se nogle filer men ikke andre, bare for privatlivets fred skyld. Så det er mere af en opt-in, når du gør ting på internettet. Og så lad mig faktisk skrive ls her, og du kan se de filer jeg har, men huske på, at hvis jeg gør ls-l for længe, Jeg får en længere liste, der giver mig nogle flere detaljer om disse filer der er nu faktisk for første gang relevant for os. Bemærk, at på den yderste højrefløj er navnene på mine filer, og derefter det tidspunkt, hvor de senest blev ændret eller kopieret. Dette antal her er hvad? Kan du huske? Størrelsen i bytes, hvor stor filen er. 

Så jeg synes at have en vis form for logo herinde, der er større end alle de andre filer. Det er hvem jeg er, det er hvad jeg er og hvad gruppe jeg er i. Men så herovre til venstre er en smule kryptisk sekvens, og vi talte, tror jeg, kort om dette i fortiden, men dette har at gøre med tilladelser. Og selv hvis det er lidt diset, RW betyder sandsynligvis læse & skrive. Så viser det sig, at disse bindestreger betegner forskellige sæt tilladelser for forskellige mennesker. Og mønstret er det væsentlige, som følger. Når du ser en sekvens af streger her, de ser som følger. Der er en streg, så er der tre yderligere tankestreger, så er der endnu tre, så er der en anden tre. Den første er enten en bindestreg eller det er annonce for mappe. Så man er ret nemt. Hvis det er en mappe, der står d, ellers er det en bindestreg. Der er et par andre sager, men for nu vil vi bare bekymre sig om filer og mapper. Disse næste tre streger - og jeg har kunstigt indsat rummene. De var naturligvis ikke der når vi så dem for et øjeblik siden. Disse er filen ejer tilladelser, og huske fra en anden siden, at det blev læst & skrive. Det var fordi jeg som den person, der oprettede denne fil for et øjeblik siden, I, lige som standard, på en Linux-computer har evnen til at fortsætte med at læse og skrive denne fil. 

Så operativsystemet bare giver mig RW automatisk. De midterste dem vedrører min gruppe, nemlig de studerende, som er en slags meningsløs på apparatet, fordi jeg er den eneste person, der bruger apparatet. Så lad mig bare vinke mine hænder på det for nu. Men de sidste er vigtigst for internettet. Det er alle andre i verden, og det faktum, at der er --- betyder, at ingen andre i verden har nogen tilladelser til denne fil. Det er klart et problem, så jeg er nødt til at løse dette ved en eller anden måde give verden, hvad? Læse & skrive? Det er nok dum, right? Jeg vil ikke have nogen på nettet at gå til at besøge min side og på en måde ændre denne fil, selv om de virkelig kunne ikke med en HTML-fil, men bare i princippet, sandsynligvis bare have dem til at være i stand til at læse det. Hvad vil det sige at læse det? Det betyder ikke, at de kommer til at bekymre sig om den egentlige HTML, men browseren skal være i stand til at parse det kodesprog, top til bund, venstre mod højre. Så nogen på nettet skal være i stand til at læse det, så jeg minimalt nødt til at give det r.. Jeg kan gøre dette i et par forskellige måder, men måske Det enkleste er at køre denne kommando her. Chmod, change mode, så en + r, så alle, alle i verden + læse, og derefter navnet på filen, search0.html. 

Men når jeg gør ls-l igen, bemærke, at denne fil er ændret, og ja, jeg har slået r for alle. Jeg har også slået det for min gruppe, men det er fint, fordi hvis jeg vendte ind på for alle, min gruppe er en delmængde af det. Så det er også fint. Det betyder blot, at computeren har nu gjort det læsbar. Lad mig nu vende tilbage til min browser, skal du klikke reload. Ah-ha. Vi har nu CS50 Søg. Jeg har zoomet ind lidt kunstigt - temmelig hæslige søgemaskine. Men lad os se om det rent faktisk virker. Først, lad mig gøre en hurtig tilregnelighed check, lad mig styre klik og se side kilde. Bemærk, at indenfor Chrome vi ser nu den samme HTML, som jeg selv har oprettet. Bliv ikke forvirret her, selv om. Jeg kan ikke begynde at ændre koden her, fordi browseren har en skrivebeskyttet visning af denne kode. Browseren har netop bedt lokal vært for en fil kaldet search0.html. Det er nu rent tilfælde, at apparatet sker for at være på den samme computer som min browser. Jeg kunne bare have, ækvivalent, har indtastet www.facebook.com/search0.html, og hvis Facebook havde en fil kaldet det, ville jeg da være at se deres HTML. Og selvfølgelig kan jeg ikke ændre den fil, der kommer tilbage fra Facebook, enten. Så nu er vi slags udviske linjerne. Apparatet er både en server, der tjener op websider, men det er også en klient i den forstand, at jeg bruger en browser til rent faktisk at tale med denne server. Så lad os se, om min Google-søgemaskinen virker. Lad mig gå videre og søge efter hurtige brune ræv, skal du indtaste. Og voila, jeg har nu min egen søgemaskine. 

Men hvordan fungerer det? Bit af en strækning, men - og nu kan du ikke se, præcist den del, der er af interesse. Læg mærke til hvad der sker. Læg mærke til webadressen. Det viser sig, at denne metode, kaldet får, er super-simpelt. Når du angiver i en formular, som du ønsker at 'få' resultater fra nogle server, hvad det kommer til at gøre, er at tage hvad du har skrevet i formularen og sætte det i webadressen. Det kommer til at standardisere, hvordan det bliver sat i URL'en som følger. Bemærk at dette er den webadresse, var værdien af ​​min handling attribut. Det er der, jeg ønskede formularen til ende. Men så bemærke dette spørgsmålstegn. Dette er en konvention på nettet for derved at give input fra brugeren til en hjemmeside, tilføje dig til webadressen et spørgsmålstegn, og så har du en hel bunke af nøgle-værdi par. Navnet på en nøgle, ellers kendt som en parameter i Web, så har du et lighedstegn, så har du værdien af ​​denne parameter. Så det er hovedsageligt et variabelnavn og en variabel værdi, men dem variabel navne og værdier kom fra HTML form. Hvorfor er plusser der, tror du? Fordi jeg ikke skrive + i mellem mine ord. [Studerende, uforståelig] >> Ja, det er bare for afstand. Odds er, når du har set en URL, Der er aldrig nogen mellemrum i det, hvis det kun fordi hvis der var, kunne du ikke rigtig kopiere og indsætte den ind i en IM eller i en e-mail, fordi det ville bryde. Du ønsker det hele til at være en sammenhængende streng af tegn. 

Så browseren er smart nok til at indse, uh-uh. Må ikke bare sætte en plads der. Lad mig indkode rummet i nogle standard måde. En af de konventioner for at gøre det er at få browseren automatisk sætte et +, hvor du ellers ville have en plads. Så nu har varsel Google været slags brugervenligt. Jeg er bestemt ikke skabe denne webside, men de har indsat på deres tekstfelt med hvad, præcist, jeg har skrevet i. Antag jeg ønsker at søge efter noget andet, ligesom en doven hund. Jeg kan blot skrive dette her, re-search. Bemærk, at webadressen skifter op her, men bemærker så at jeg rent faktisk kan søge efter hvad jeg vil bare ved at forstå, hvordan webadresser arbejde. Jeg kunne gøre doven kat, enter, og bemærk nu får jeg en meget doven - skal vi? Jeg føler mig som vi burde. Jeg får en meget doven kat. Ok. Dette er en af ​​de dummeste ting, vi har gjort. Men det er en doven kat. Under alle omstændigheder, hvad er nøglen takeaway her? Nu er vi er en slags spille i verden af ​​HTTP. HTML er netop denne markup sprog, åben tag, tæt tag, der fortæller en browser hvordan man kan gøre indhold på en webside. Men når du begynder at sende oplysninger via internettet mellem browser og server, er, at hvor denne protokol kendt som HyperText Transfer Protocol overtager. Det er den slags menneskelig konvention, da Sam og jeg gav hinanden hånden på mandag, starte en forbindelse og derefter lukke en forbindelse, samme idé her. Hvordan Googles resultater kommer tilbage til mig? Hvordan bliver min formularafsendelse går til Google? Nå, huske fra den anden dag, at hvad der virkelig sker under emhætten, når du anmoder om en webside er, din browser sender en noget-kryptisk besked som GET / HTTP/1.1 for standard hjemmeside. 

Eller i dette tilfælde, fordi jeg specifikt anmodet om tidligere search0.html, dette ville være den noget-kryptisk besked at min browser sender til apparatet. Eller i dette tilfælde af Google, hvad der faktisk sendt er en anmodning til / søgning, og derefter? q = doven kat, med et plus der. Så dette budskab, at jeg, det menneskelige, er aldrig skrive, men er ved at blive sendt af min browser, det er sådan HTTP sker. Dette svarer til vores have rystet hænder. Det er den anmodning, og serveren er ved at sende et svar. Så lad os tage et kig på denne under hætten. Som før kan vi åbne op denne særlige felt i en browser. Se side, inspicere elementer. Så under inspicere element, bemærke, at hvad der er sket i Chrome, og IE og Firefox har lignende mekanismer, vi har disse udviklingsværktøjer tilgængelige for os. Normale mennesker ikke anvender disse faner. Men vi, nu er interesseret i, hvad der foregår under hætten på netværksniveau. Så hvis jeg trækker op af netværket niveau her, Lad mig gå videre og udvide dette vindue, åbne denne post her, og se på overskrifterne. Så hvad sker der, når jeg beder om en fil fra en webserver er min browser sender en hel masse ting. Og lad mig se kilde. Så under overskrifter i anmodninger, Og det er netop krom viser mig nogle diagnostiske output, lidt ligesom en debugger af en slags, bemærke, at det, jeg har fremhævet her, er netop, hvad Chrome sender til serveren for at anmode om en fil kaldet search0.html. Det er sigende, at serveren, hvad den mener dens navn er, takket være denne vært kolon område, så er der nogle temmelig esoterisk ting herinde, som noget at gøre med datoer og klokkeslæt, noget at gøre med de sprog, som browseren forstår, men de virkelig vigtige linjer er disse første to her. 

Hvad betyder serveren svare med? Tja, hvis vi rulle ned her og se kilden til denne ting, bemærk at serveren har reageret med en noget kryptisk besked så godt, 304 ikke ændres. Det er lidt underligt, lad mig faktisk forsøger at løse dette. Lad mig holde shift og klik genindlæse op her at tvinge browseren til rent faktisk at gøre denne anmodning for første gang. Så lad mig zoome ind, og vi vil se nu, at serverens svar, fordi jeg holdt shift, er 200 OK. Så du har sikkert aldrig set det nummer 200 I forbindelse med internettet, men hvilke numre har du nogle gange set uventet fra en server? 404, filen blev ikke fundet, 403, forbudt, 500, serverfejl. Så der er disse numeriske koder, som verden bruger i Web at betegne fejl, ligesom C-funktioner kan returnere fejl og vigtigste kan vende tilbage exit koder. 200, selv om, du sjældent ser, fordi det betyder alt er godt. Og 304 du sandsynligvis aldrig se, fordi hvad er det der betyder? At intet har - lad os se om vi kan simulere dette igen - Åh, nu er det ikke samarbejder. 304 sagde ikke ændret, så hvorfor var serveren selv svarer? Tja, for effektivitet, en webserver automatisk for dig Hvis filen ikke er ændret, vil det ikke retransmittere hele HTML-fil. Det vil bare fortælle browseren, den har ikke ændret sig. Bare bruge den kopi, du allerede har. Så der er denne forestilling om caching på nettet for ydeevne, at så du ikke spilder tid og affald båndbredde henter filer igen og igen unødigt. 

Men denne webside, nu var super-simpel, og det kun viste mig den HTML, der kom tilbage. Lad os faktisk bruger nettet fanen nu at lave en Google søgning som hurtige brune ræv. Lad mig derefter klikke CS50 søgning, og nu, mærke i bunden her en hel masse ting kom tilbage fordi når jeg besøger en rigtig hjemmeside som Google.com, de har billeder, de har tekst, har de et sprog kaldes JavaScript der. Så hver række i denne tabel hernede repræsenterer noget, som Google spytte ud svar på min enkelt anmodning. Den ene jeg holder af, er dog dette første. Og hvis jeg går til søgningen, anmodning, skal du klikke på Vis kilde her, bemærke, at, ja, det kryptiske budskab, at min browser har sendt til Google var disse to linjer her, efterfulgt af nogle mystiske information hernede, som vi vil ignorere for nu. Men bemærk også, hvad Chrome er temmelig handy med, det er også viser mig søgestrengen, der blev sendt i. Så i stedet vise mig dette, som var bogstaveligt sendt, hvis jeg ser det afkodes, Chrome, bare for debugging formål, for udviklere som os, det er bare viser mig en menneskelig-venlig version af - det er ikke sådan du staver ræv, tilsyneladende. Jeg er bare lagt mærke til nu - men det viser dig, hvad jeg, åbenbart, maskinskrevet. Desuden har reaktionen, der kom tilbage fra serveren er igen 200 OK. Men optaget på denne reaktion, selvfølgelig, hvis vi rent faktisk se sidens HTML - Beklager, det er en lille tastaturgenvej gået galt i dag. 

Jeg vil beskæftige sig med dette senere. Så hvis vi rent faktisk se siden kilde, som jeg kan gøre hernede ved at klikke på svar, dette er hvad der faktisk blev spytte tilbage, ud over at kryptiske 200 OK meddelelse fra serveren. Lidt kryptisk, men hvor er alt dette kommer fra? Nå, lad os gøre en anden ting her. En anden lidt-kryptisk kommando, men denne ene er lidt pæn i det åbenbarer os præcis, hvad der foregår under kølerhjelmen. Så jeg er tilbage på min Mac her, har jeg tilsluttede med et program kaldet SSH, Secure Shell, til en anden server fordi de fleste af Harvards computere blokere kommando, vi er ved at løbe fordi der er denne kommando på nogle servere kaldet traceroute der giver dig mulighed for at spore ruten mellem punkterne A og B, og hidtil har vi taget helt for givet at jeg kan skrive i Google.com og på en måde få data tilbage fra halvvejs gennem landet eller halvvejs rundt om jorden. Med traceroute kan vi faktisk dykke i en lidt dybere om, hvordan internettet fungerer, se og hvad der sker under kølerhjelmen. Så lad os gå videre og vilkårligt spore en rute til, sige, Stanford.edu, som er på tværs af landet, og tryk enter. Denne kommando kan være super-hurtig eller super-slow, men hvad vi ser nu, linje for linje, er hver eneste af de skridt og humle mellem os og Palo Alto, eller Stanford, hvor de har deres webserver. Så hvad betyder hver af disse linier repræsenterer mere konkret, selvom? Et stykke jargon fra internettet? [Studerende, uforståelig] >> Hvad er det? [Studerende, uforståelig] >> Åh, så der er tidspunkter, men hvad betyder hver række - hvad mener jeg med hop? 

Nå, der er disse ting på internettet kaldet routere. Og routere, som navnet antyder, rute oplysninger fra punkt A til punkt B. Men der er flere punkter over a og b. Der er c og d og e og f mellem række 1, som tilfældigvis er min computers IP-adresse, eller min numerisk adresse, der entydigt identificerer min computer, og trin 15, som faktisk er den sjette webserver, tilsyneladende, som jeg udlede af dette, eller version 6 af deres web server på Stanford. Men hvad er lidt pæn er, kan vi se stien at min 0 s og 1 s tager fra min computer til Stanford. Så trin 1 er min egen computers adresse. Hver computer på internettet har en unik identifikator, der ligner denne. Number.number.number.number. Et eller andet sted på denne campus, sandsynligvis i science center, er en router kaldet Core Gateway 2-te83, hvad det så end betyder, så dette er en af ​​Harvards store fancy routere, der dirigerer en masse af deres trafik. Her er en anden af ​​Harvards routere, denne ene er Border Gateway, grænseoverskridende betydning er det sandsynligvis på periferien af ​​campus eller andet sted. Så er der nox en, række 4, der er Northern Crossroads, som er en stor internetudbyder, Internet-udbyder, at steder som Harvard tilslutte op til. Men så tingene bliver lidt interessant på linje 6. Hvor er mine bits lige pludselig? Kansas. Verden har en vane med at bruge lufthavnen koder i en masse af disse ting, eller i det mindste forkortelser for stater eller byer, så det ligner, på bare 60 ms, en pakke af oplysninger, 0 s og 1 er fra min laptop fik hele vejen til Kansas, og igen, i 60 ms. 

Hertil kommer, efter Kansas, tog de en tur gennem Houston, sandsynligvis, som foreslået af navnet på denne server. Så bare som en server på internettet, skal have en numerisk adresse, det kan også eventuelt have en lidt mere menneskelig-venlig adresse som mennesker kom op med. Nu, i trin 8, ved vi ikke, hvad det er. Sommetider routere bare slags ignorere dig, og de bare ikke besvare de spørgsmål, så det er fint. Den ene efter trin 8 er tilsyneladende hvor? L.A. Meddelelse i kun 78 ms, hvad tager os mennesker som 6 + timer at gøre fysisk, tager pakker af information på internettet 78 ms til at rejse så langt. Trin 10 er i LA så godt, og trin 11 synes at være gået mod nord, op nær Stanford. Dette er deres grænse router, eller grænse router. Et par trin på Stanford, der ignorerer os, og endelig kommer vi til webserveren på bare 87 ms. Nu er alle disse tal, som en sidebemærkning, bare fortælle dig, hvor lang tid det tager for data at komme fra mig til hver af disse routere, og det er ikke akkumulerende. Hvad dette program gør, er, det først sender en besked i det væsentlige til den første router. Derefter ene til den anden router, derefter en til den tredje router, måling hver gang. Så i teorien, vil disse tider være voksende eller i det mindste ret tæt på hinanden, og, ja, dem der er lige her på campus er super-small. Så snart du begynder at gå over hele landet, det tager data lidt længere tid at rejse, tættere på 100 ms, give eller tage. Men lad os gå den anden retning nu. Hvad med Cambridge University i Storbritannien? Lad mig i stedet køre traceroute for www.cam for Cambridge, . Ac for akademisk. Dk, og tryk enter her. Det var pretty damn hurtigt. Mine data bogstaveligt gik til Cambridge, England, i denne splitsekund af tiden. 

Så lad os se den sti, det tog. Harvard, Harvard, Harvard, Northern Crossroads, som er en internetudbyder, og derefter dette er Northern Crossroads, og derefter bam. Hvad er i mellem trin 6 og 7, router 6 og 7? The Atlantic Ocean. Og vi udlede dette fra det faktum, at vi går fra 20 ms her til 80 ms her. Så noget tog 60 ms, give eller tage, for at komme over. Og det var sandsynligvis en stor vandmasse. Hvad sker der bagefter? Tja, her er vi i London, kun 88 ms senere. Mere London, more London, ikke sikker på, hvor det er, men vi vil antage det er uden for London, Cambridge her, og endelig har vi - bogstaveligt talt, University of Cambridge . Something.net og derefter endelig i ledningen 16, deres webserver er tilsyneladende kaldet Scorpius under hætten, selv om vi kender det som www. Kind of mind-blowing, tror jeg. Første gang jeg nogensinde gjorde det, det helt blæste mit sind. Desværre Harvard blokerer denne type trafik, typisk på netværket. Så du kan ikke gøre det super nemt. Indse dog, det her er muligt. Ok. Lad os tage vores 5-minutters pause her. Vi vil komme tilbage og dykke dybere. Så vi er tilbage, og vi har slags luntede omkring i et par forskellige retninger her. Så lad os opsummere, hvad der er foregået her. Vi startede samtalen taler om dette sprog kaldet HTML. Igen, ikke et programmeringssprog. Det er bare et kodesprog der er i høj grad om æstetik og strukturering af indhold i form af en webside. Men HTML derfor brug for nogle form for mekanisme for at rejse mellem web-browser og server. HTML derfor slags rider på toppen af ​​denne andet sprog, eller mere korrekt, en protokol, kendt som HTTP. 

Og HTTP, som vi har set det hidtil, er en slags analog med denne menneskelige konvention af rystende hænder. Når en browser ønsker at anmode om en side fra en server, det sender at "få" anmodning fra browseren til serveren, og derefter serveren svarer med en række lignende 200, alt er okay, samt HTML eller nogle dårlige tal som 404, fil ikke fundet. Men i mellemtiden, HTTP selv er ikke internettet, per se. HTTP er blot en tjeneste, en funktion af internettet meget gerne G chat er en anden tjeneste, meget gerne e-mail er en anden tjeneste. Der er alle mulige ting, vi kan gøre på internettet. HTTP er blot én af disse ansøgninger. Så oven på - HTTP er oven på noget andet som vi ikke nævne ved navn, har du måske hørt om ved navn, TCP / IP. Så den historie, vi bare vide, at der handler om hvordan data bevæger sig fra punkt A til punkt B. Og i dette tilfælde, så vi på et meget lavt niveau router til router til router til router, hvordan dataene rent faktisk transmitteres. Men hen ad vejen, er det vil støde på forskellige hindringer. Ud over disse routere, er der ting kaldet firewalls på internettet, og så data, såsom at vi var bare sende fra mig til Stanford, fra mig til Cambridge, sendes til, på dette niveau, noget, der hedder en IP-adresse. Vi så for et øjeblik siden, og en IP-adresse er blot en numerisk adresse af typen w.x.y.z, hvor hver af disse er mellem, give eller tage, 0 og 255, selvom du ikke kan helt bruge alle disse numre. Men hver af disse pladsholdere er et tal mellem 0 og 255. Så en IP-adresse i disse dage er 32 bit. 

Nu, det giver os, hvor mange mulige IP-adresser i verden? Omkring 4 mia fordi enhver tid vi tælling i potenser af 2 hele vejen op til 32 af noget, der normalt giver os 4 mia. Så der er en masse af IP-adresser, men du måske har læst, eller du kan nu mærke i den populære presse, et skub i retning af en ny version af IP kaldet IPv6. Lige nu bruger vi version 4. Der er virkelig ikke har været en version 5, er vi bare hoppe ret til 6. Version 6 kommer til at bruge 128 bit til IP-adresser, der er freaking enorme. Vi bør ikke løbe ud i temmelig lang tid nu, men vi er begyndt at løbe ud af version 4 IP-adresser, fordi vi alle har ikke kun ting som bærbare og stationære computere, mange af os har telefoner, en masse af os har andre enheder ligesom TiVo og lignende, der har IP-adresser selv. Harvard selv har titusindvis af computere. Så verden er virkelig at løbe tør for IP-adresser, i hvert fald i denne form. Så i løbet af de næste par år, vil du se de adresser på dine egne computere sandsynligvis langsomt ændre som flere og flere virksomheder og universiteter begynder at understøtte den nyere version. Men en IP-adresse ikke er tilstrækkelig for computer en at anmode om data fra computer B. Fordi computer b kunne være en server, og en server, som jeg nævnte tidligere, kan gøre klaser af tingene. Det kan være vært for websider, kan det være en e-mail-server, det kan være en Skype server, kan det være en G chatserver. 

Alle disse forskellige tjenester, som kan leveres på en server kunne alle, fysisk, være på den samme maskine. Så ud over IP-adresser, verden har ting kaldet porte på internettet. En havn er bare et nummer, så der er et unikt nummer for HTTP. Dets nummer er 80. HTTP bruger også nummer 443, men mere specifikt for krypterede HTTPS. Når du ser s, for sikker, er, at bruge et andet nummer. Der er andre numre, såsom 25, der anvendes til noget, der hedder SMTP, også kendt som e-mail. Der er noget, der hedder 22 for SSH, og der er en hel masse andre havne derude. Nu er vi mennesker sjældent ser disse tal. Men når du skriver i en adresse som http://www.facebook.com, browseren er hemmeligt indsætte 80, fordi du bruger HTTP. Hvis du i stedet typen HTTPS, er det hemmeligt indsætte 443. Og vi kan slags se denne manuelt, hvis jeg trækker op en Brower og gå til http://www.facebook.com:80. Derfor udtrykkeligt at citere ikke bare navnet på hjemmesiden men den port, som jeg ønsker at tale med, og tryk enter. Bemærker den forsvinder, fordi browseren antager, oh, 80, jeg ikke engang gider vise det til dig. Men grunden til dette er, at hvis jeg rent faktisk ønskede at sende en person en e-mail, Jeg ville virkelig være at sende det til dem på port 25, nemlig SMTP. Lidt af en forsimpling, men nogle af jer har venner der faktisk arbejder på Facebook, og de, ligeledes, har servere, der modtager e-mail. 

Hver gang du sender en e-mail, hvad gmail gør for dig eller Outlook eller hvad program du bruger, Det er slags hemmeligt indsætte dette tal så godt, 25, i dette tilfælde. Det er denne kombination af IP-adresse og nummer, der entydigt identificerer en computer på internettet og en særlig tjeneste på den pågældende computer. Nu, selvfølgelig, har de fleste af os nok aldrig skrevet manuelt en IP-adresse. Måske har du i apparatet, men i den virkelige verden, ikke så meget. Hvorfor har vi ikke skrive IP-adresser i browsere? Det ville virke, i virkeligheden, kan vi se dette, lad mig vise dig en anden kommando, der skal arbejde mest overalt på Harvards campus på en Mac eller en PC. Der er denne kommando kaldet nslookup, name server lookup. Hvis jeg kigger op www.cnn.com, viser det sig, at CNN har - oh, interessant. CNN er begyndt at bruge Amazon Web Services. Du kan vide af cloud computing, Amazon er en af ​​de store spillere i cloud computing. Hvad jeg vidste bare var, jeg sagde, 'Giv mig adressen på CNN webserver,' men det viser sig, at CNN webserver administreres af Amazon, Amazon Web Services, tyder dette. Og adressen på denne server er det her. Så jeg er ikke sikker på, om dette vil arbejde, fordi de ikke plejede at bruge Amazon. Men lad os prøve dette, http://, IP-adresse, indtast, og - er det vil virke? Ja. Det kommer til at arbejde. Internettet er super-slow i dag. Men i et øjeblik, vil du se nogle nyhedshistorie. Der vi går. Bank of America er ved at blive sagsøgt. Ok. 

Dette skyldes, at denne IP-adresse bare tilfældigvis ved synonymt med www.cnn.com. Selvfølgelig ville det være forfærdeligt markedsføring til at sige, kan du besøge os på internettet på 50.112.94.127. Du ville aldrig huske. Så selv disse dage vil du måske huske ting ligesom 1-800-COLLECT eller aliaser verden kom op med for telefonnumre. Hvilket, før mobiltelefoner, var temmelig svært at huske indtil du bare kunne skrive det i og glemme alt om det. Så nettet, også har denne konvention af navne og IP-adresser, og der er disse ting derude kaldet DNS-servere, domaenenavnesystemer servere, der oversætter IP-adresser til navne og omvendt. Så det er hvad der sker under kølerhjelmen. I sidste ende har vi TCP / IP, som er dette meget lavt niveau protokol at, virkelig, bare får 0 s og 1 s via internettet, og det gør det ved at sætte dem ind i en virtuel kuvert, hvis du vil, skrive og på ydersiden af ​​konvolutten IP-adressen på destinationen, samt den numeriske portnummer af tjenesten på denne destination, som det ønsker at tale med. I mellemtiden på kuverten er der også noget kendt som en returadresse, som er din IP-adresse, så når CNN får en pakke af oplysninger fra dig, åbner dette virtuelle kuvert, ser, at du vil have hjemmesiden, det kender fra afsenderen del af denne virtuelle kuvert hvem de skal sende HTML tilbage til. Så lad os tage et kig på denne i en lidt mere detaljeret. Det er fra et firma kaldet Ericson, fra et par år tilbage. Og de tog nogle friheder med hvordan internettet rent faktisk virker, men det giver et langt mere visuelt billede end blot kridt op her. Så jeg giver dig "A Bit of internettet." 

[Fortæller] For første gang i historien, mennesker og maskiner arbejder sammen, realisere en drøm. En samlende kraft, der kender ingen geografiske grænser. Uden hensyn til race, tro eller farve. En ny æra, hvor kommunikation virkelig bringer mennesker sammen. Dette er Den Dawn of the Net. Ønsker du at vide, hvordan det virker? Klik her for at begynde din rejse ind i nettet. Nu, præcis hvad der skete, da du klikkede på det link? Du startede en strøm af information. Denne information rejser ned til din egen personlige postrum hvor Mr. IP pakker det, mærker den, og sender det på vej. Hver pakke er begrænset i sin størrelse. Postrummet skal beslutte, hvordan at opdele oplysningerne og hvordan at pakke det. Nu pakken har brug for en etiket, som indeholder vigtige oplysninger såsom afsenderens adresse, modtagerens adresse, og den type pakke, den er. Fordi denne særlige pakke går ud på Internettet, det får også en adresse for proxy-server, som har en særlig funktion, som vi vil se senere. Pakken er nu lanceret på dit lokale netværk, eller LAN. Dette netværk anvendes til at forbinde alle de lokale computere ' routere, printere, etc., for udveksling af oplysninger inden for de fysiske mure af bygningen. Den LAN er en temmelig ukontrolleret sted, og desværre ulykker kan ske. Motorvejen af ​​LAN er pakket med alle typer information. Det er IP-pakker, Novell pakker, AppleTalk pakker. De gĺr imod trafik, som sædvanlig. Den lokale router læser adressen og, om nødvendigt, løfter pakken på et andet net. Ah, routeren. Et symbol på kontrol i en tilsyneladende uorganiseret verden. [Router mumler og taler til sig selv] 

[Narrator] Der er han, systematisk, ufølsom, metodisk, konservativ, og nogle gange ikke helt på omgangshøjde. Men han er eksakt, for det meste. Da pakkerne forlader router, de gør deres vej ind i virksomhedernes Internet og hoved for routeren switch. Lidt mere effektiv end den routeren, routeren switch spiller kispus med IP-pakker, behændigt routing dem langs deres vej. En digital 'pinball wizard, "hvis du vil. [Router switch taler til sig selv] [Narrator] Som pakker ankommer til deres destination, de er plukket af netværksinterface, klar til at blive sendt til det næste niveau. I dette tilfælde. Proxy Fuldmagten bliver brugt af mange virksomheder som en slags midt mand for at mindske belastningen på internetforbindelse og af sikkerhedsmæssige årsager,. samt Som du kan se, pakkerne er alle af forskellige størrelser afhængig af deres indhold. Fuldmægtigen åbner pakken og ser på webadressen eller URL. Afhængigt af om adressen er acceptabel, Den pakke sendes videre til internettet. Der er dog nogle adresser, der ikke opfylder med godkendelse af proxy. Det vil sige, selskaber eller ledelse retningslinjer. Disse er summarisk behandlet. Vi vil ikke vide af det. For dem, der gør det, er det på vej igen. 

Næste op, firewall. Virksomhedens firewall tjener to formål. Det forhindrer nogle ret grimme ting fra internettet i at komme ind på intranettet, og det kan også forhindre, at følsomme firmaoplysninger fra at blive sendt ud på internettet. Når gennem firewallen, samler en router op pakken og placerer den på et meget snævrere vej, eller båndbredde, som vi siger. Det er klart, vejen er ikke bred nok til at tage dem alle. Nu kan du spekulerer på, hvad der sker med alle de pakker, som ikke gør det hen ad vejen. Tja, når Mr. IP ikke modtager en kvittering at en pakke er blevet modtaget i rette tid, han blot sende en udskiftning pakke. Vi er nu klar til at træde verden af ​​internettet. En spindelvæv af sammenkoblede net, der spænder hele vores verden. Her routere og switche etablere forbindelser mellem netværk. Nu Net er et helt andet miljø end du vil finde indenfor de beskyttende mure dit LAN. Herude er det det vilde vesten. Masser af plads, masser af muligheder, masser af ting at udforske og steder at gå. Takket være meget lidt kontrol og regulering, nye ideer finde frugtbar jord at skubbe kuvert af deres muligheder. Men på grund af denne frihed, visse farer også lure. Du vil aldrig vide, hvornår du vil møde den frygtede ping af død, en særlig version af en normal anmodning ping, som nogle idiot udtænkt at rod op intetanende værter. Stien vore pakker tager kan være via satellit, telefonlinjer, trådløst eller endda flyver på transatlantiske kabel. De behøver ikke altid tage den hurtigste eller korteste rute muligt, men de vil få der til sidst. Måske det er derfor, det kaldes "The World Wide Wait". Men når alt fungerer gnidningsløst, du kan omgå kloden fem gange på dråbe af en hat, bogstaveligt talt. Og alt for omkostningerne ved et lokalt opkald eller mindre. Nær slutningen af ​​vores destination, vil vi finde en anden firewall. 

Afhængig af din perspektiv som en datapakke, firewall'en kunne være en bastion for sikkerhed eller en frygtet modstander. Det hele afhænger af, hvilken side du er på, og hvad dine hensigter er. Firewallen er designet til at lade i kun de pakker, der opfylder dens kriterier. Denne firewall kører på port 80 og 25 år. Alle forsøg på at komme igennem andre porte er lukkede for erhvervslivet. Port 25 bruges til e-mail-pakker, mens port 80 er indgangen for pakker fra internettet til webserveren. Inde i firewall, der pakker screenes mere grundigt. Nogle pakker gør det nemt igennem tolden, mens andre ser bare en smule tvivlsom. Nu er firewall officer ikke let narre, såsom når denne ping af død pakke forsøger at skjule sig som et normalt ping-pakke. [Firewall officer taler til pakker] [Narrator] For disse pakker heldige nok til at gøre det så langt, rejsen er næsten slut. Det er bare en linje op på grænsefladen, der skal tages op i webserveren. I dag kan en webserver køre på mange ting, fra en mainframe til en web cam til computeren på dit skrivebord. Hvorfor ikke dit køleskab? Med den rette opsætning, kan du finde ud af om du har makings for Kylling Cacciatore, eller hvis du er nødt til at gå på indkøb. Husk, at dette er begyndelsen på nettet. Næsten alt er muligt. En efter en er de pakker modtaget, åbnet, og pakkes ud. De oplysninger, de indeholder, det vil sige Deres anmodning om oplysninger, sendes videre til webserveren applikation. Selve pakken er genanvendt, klar til at blive brugt igen og fyldt med din ønskede oplysninger, behandlet, og sendt ud på sin vej tilbage til dig. Tilbage forbi firewall, routere, og videre gennem til internettet. Tilbage gennem virksomhedens firewall og på din interface, klar til at levere din webbrowser med de oplysninger, du har anmodet om. Dvs. denne film. Tilfreds med deres indsats, og at stole på bedre verden, vores trofaste datapakker rider ud saligt ind i solnedgangen på en anden dag, kende fuldt ud de har tjent deres mestre godt. Nu er det ikke en lykkelig slutning? [Malan] Okay, det er nok. Vi vil se dig i næste uge. [CS50.TV]