[Powered by Google Translate] [Uke 7, Fortsatt] [David J. Malan, Harvard University] [Dette er CS50.] [CS50.TV] OK. Velkommen tilbake. Dette er CS50, og dette er slutten av uke 7. Så en av disse dumme små ting som går rundt på Internett og vi slurpet opp, og det skal nå lage en liten bit av nerdete fornuftig for deg. Vel, det var morsommere med denne fyren enn det var for dere. Snakker av, vel, folkens, i dag er Nate bursdag. For å gi deg en følelse av hvor god Nate og jeg er på web utvikling basert på mandagens klasse og basert nå på dette, Jeg tenkte jeg skulle dra opp Nate hjemmeside, hvis du ikke har sett den ennå. Dette her ia Nate HTML. Så se hans kildekoden hvis du ønsker å se hvordan du gjør dette, og Nate, hvis vi kunne flau du bare en kort stund, fikk de ansatte noe til deg Hvis du ønsker å dele noen dessert med noen av barna i klassen her. Hvis du ønsker å komme ned. Du alle applaudere og er veldig hyggelig, men ingen sitter hvor som helst i nærheten av Nate, for noen grunn, i det tilbake sonen. Så kanskje du kan finne noen folk å nyte disse med. Happy Birthday, Nate. 

Ytterligere hellos: Vi viste et par klipp fra våre CS50x studenter. Hvis du ønsker å se hvem andre det er i verden som er følgende sammen, kan du ta turen til denne nettadressen, hvor Joseph, en av våre TFS, har satt sammen en montasje av sorterer av alle som har vært å sende disse videoene, blant dem Rick Astley. Og hvis du blar gjennom disse, er det egentlig ganske inspirerende å se mangfoldet av land og byer som folk hailing. Så hvis du ønsker å ta en titt på det, vil det være opp til slutten av semesteret. I dag fortsetter vi vår titt på nettet, web-programmering, HTML og lignende, og vi har også lunsj kommer opp denne fredag Hvis du ønsker, og spesielt, ikke har gjort det før. Dette fredagens tema vil være Nate bursdag, så hvis du ønsker å ha bursdag lunsj med Nate og andre, noen av våre venner fra industri, vennligst hodet til den URL'en der. Plass, som alltid, er begrenset. Også, hvis du har glemt, innse at neste uke er fristen for problemet satt 4s skattejakt, der etter å utvinne alle disse JPEG fra card.raw, du og din del mates, hvis du ønsker, kan du prøve å fotografere som mange av dataforskere fra at minnekort som mulig, og du og din del vil da vinne en fabelaktig premie. Se tilbake til pset 4 spesifikasjon om hva du skal sende og når. Også, hvis du ønsker å ha ditt verk foreviget på kurset hjemmeside og dens historie av klær, vet at du er velkommen nå for å begynne å sende design for årets T-skjorter og gensere og lignende. Vi vil gjøre vårt beste for å inkludere så mange som vi kan, men vi vil ha noen medlemmer av staben gjennom alle design å sørge for at de er i samsvar med spesifikasjonene, og vi deretter plukke vanligvis en håndfull av dem til å bli utstilt. Så hvis du er design type, bare vet at kravene for grafikk er PNG, minst 200 DPI, de bør ikke være mer enn 4000 x 4000 piksler, og ikke mer enn 10 MB, men du er velkommen til å bruke ting som Photoshop eller GIMP eller ulike grafiske sine programmer, uansett hva du har til disposisjon. 

Også på horisonten er det siste prosjektet. Det siste prosjektet er virkelig høydepunktet i 50, der av alle oppgavene i kurset, Det er din mulighet virkelig å gjøre dine egne ting. Og det kan være ganske enkelt å gjøre noe for moro skyld, det kan være å løse noen presserende problemet ditt studentgruppen har, for noen ny nettside, noen nye kolleksjon mekanisme for data. Det kan være en mobil applikasjon for Android, for iOS. Virkelig, er det ingen begrensninger, og i løpet av de neste ukene, som vi overgangen fra C til disse høyere nivå språk som PHP og JavaScript, du vil finne deg selv i økende grad kjent med noen virkelige verden teknikker, noen reelle verktøy, og å supplere det, vet at kurset har en historie med seminarer, der i løpet av de neste ukene, noen av lærerne og venner av oss fra på campus vil tilby valgfrie seminarer som går utover det som vanligvis gjøres i avsnitt å introdusere deg til ting som Android programmering, å introdusere deg til ting som iOS programmering eller mer avanserte web-utvikling teknikker. Det er en hel historie av disse allerede på nettet. Hvis du går til cs50.net/seminars, har vi gjort dette for en del år, og du vil se at arkiveres her med PDF-filer og videoer og lignende er flere dusin videoer av seminarer. I fjor, for eksempel, hadde vi et seminar om acing dine tekniske intervjuer, hvis du faktisk ønsker å gå av og gjøre et internship eller heltid gig. Windows mobile utvikling, Android utvikling, Google Maps, API, CSS, utvikling for BlackBerry, Emacs. Virkelig, er du velkommen til å ta en titt på noen av disse seminarene på din bekvemmelighet. Og vi skal holde noen nye dette semesteret, så vel. 

Så hva er foran med avsluttende prosjekt? Vel, først, selv om denne datoen er noe nært forestående, dette er egentlig bare en mulighet til å begynne å tenke på det avsluttende prosjekt ganske realistisk. Vi vet bare begynnelsen på noe av det vi vil fortsatt dekke i løpet, HTML, PHP og lignende, men du er alle kjent med på nettet, og jeg skjevhet denne samtalen mot nettet bare fordi de fleste ender opp med å gjøre Web-baserte endelige prosjekter, men det er på ingen måte nødvendig. Ved hjelp av C er fine, Objective C, Java, andre språk du kanskje vet eller ønsker å vite er ganske fin. Men for å få saftene renner i utgangspunktet, vil vi forvente at innlevering av preproposal som per i PDF på nettstedet, som er nå på cs50.net, og øverst til venstre vil du se avsluttende prosjekt er spesifikasjonen for det endelige prosjektet, og der er detaljer om preproposal og lignende. Det ganske mye koker ned til en e-post til din undervisning fellow bare for å innlede en samtale med ham eller henne om hva du tenker. På projects.cs50.net er et oppbevaringssted for ideer fra folk på campus Hvis du sliter med å komme opp med en ide, og manual.cs50.net/APIs er et oppbevaringssted for lenker til APIer. 

Hva, skjønt, er en API? Hva er en API? Jeg har sagt det minst to ganger, henhold til utskrifter av de siste ukene. Hva er det? [Student, uforståelig] >> Ok, bra. Så noe programmeringsgrensesnitt. Application programming interface, og dette kan ta flere former, men hva dette egentlig koker ned til er koden at noen andre hs skriftlig eller data som noen andre har samlet som er gjort tilgjengelig for deg på noen programmatisk måte. Du kan skrive kode i C, PHP, Python, Ruby, uansett språket er typisk, og du kan liksom bygge på andres funksjonalitet eller andres datasett. For eksempel, hvis jeg går til denne linken her, og du vil se et par linker på den påfølgende siden hvor vi har CS50 egen APIer, som er svært Harvard-sentrisk, og deretter tredjeparts API. Blant tredjeparts API-er er virkelig nyttige ting som å være i stand til å sende SMS til folk, å være i stand til å motta SMS-meldinger fra folk. Og ting som det som du kanskje har ingen anelse om hvordan å implementere selv, men takket være tjenester, noen gratis og noen kommersielle, du kan bygge oppå dem og gjøre noe av interesse for deg. Blant CS50 API-er disse campus-sentriske ting som Harvard kurs, energi, events, mat, kart, nyheter, tweets og Shuttleboy egen, og disse er APIer som ser litt noe sånt som dette. 

La meg trekke opp HarvardFood API. Hvis du har vært på HUD hjemmeside, har du sannsynligvis vært der å bare se hva som er til middag eller å se hva timene er for noen d-hallen. Vel, det er ikke særlig lett å navigere, og så hva vi gjorde for en tid siden ble vi skrev programvare, det skjer for å være i PHP, som faktisk skjermen skraper helheten av HUD nettsted. Å skjerme skrape noe betyr å skrive et program i et språk som PHP som later til å være en nettleser, selv om du kanskje kjøre den på en ledetekst, som later til å være en nettleser, kobles til et nettsted, laster sin HTML, hvilket språk det er skrevet, og leser deretter den, eller mer spesifikt, analyserer det topp til bunn, fra venstre mot høyre. Og hva vi gjorde var vi skrev vår kode på en slik måte at hver gang vi så noe i den HTML som så ut som noe på menyen, som hamburger, ville vi da importere det inn i vår egen database. Og hver gang vi så næringsinnhold, ville vi importerer det inn vår egen database. Og det vi gjorde var å utnytte det faktum at HUD nettsted, selv om det kan være litt av en utfordring for oss mennesker å navigere under panseret, alt av HTML generert av sine egne dataprogrammer. Så alle HTML deres, selv om det kan se rotete, som de fleste nettsteder under panseret følger det et mønster. Så vi bare brukte et par timer å finne ut at mønsteret slik at til slutt, kaster vi bort alle rotete HTML, alle estetikk fet vendte og kursiv og lignende, og hva vi er da i stand til å gjøre er å eksponere at samme data. For eksempel, på denne måten. Så vi ifølge dokumentasjon her, har meddelt verden at hvis du ber om en URL som ser ut som dette, food.cs50.net / noe, og du gir visse parametre, som vi vil snakke om i dag, som sluttdato tid, start-dato tid, måltid og så videre, hva våre servere vil komme tilbake til deg, for eksempel, er en CSV-fil, komma separted verdier som en Excel-fil, inneholder alt for frokost på denne datoen i mars i fjor når jeg kom til å skrive opp denne dokumentasjonen. 

For de som kjenner, er CSV ikke den eneste filformat. Det er et annet format som er enda mer allsidig kalt JSON, JavaScript Object Notation. Dataene kan komme tilbake i dette formatet. Så takeaway her er at om du dykke inn i dette API eller noen andre av CS50-eller noe der ute på Internett, eller ikke i det hele tatt, innse at verden har stadig begynt å standardisere hvordan maskinene intercommunicate. Vi bruker standard dataformater som CSV eller JSON. Og hva dette betyr for deg er at du kan skrive den interessante delen av et program som gjør at brukeren søke en spisesalen menyen som lar dem lage lister over favoritter som lar dem få tekstmeldinger når deres favoritt måltid er i ferd med å bli servert i noen d-hall ved hjelp av andres datasett og bygge på toppen av APIer deres. Så mer på det i form av seminarer og dokumentasjonen som du har her på nettet. Så de er altså APIer. 

Det bringer oss tilbake til HTML. Rask oppsummering. Hva er HTML? [Student, uforståelig] >> Good. HyperText Markup Language. Noen andre, hva er Hypertext Markup Language? HyperText Markup Language. Okay. Så HTML, HyperText. HyperText refererer bare til Internett, for det meste. Markup betyr at det er faktisk ikke et programmeringsspråk, HTML. Det er ikke et språk som du kan uttrykke logikk i. Det har ikke løkker. Det har ikke betingelser. Det har ikke funksjoner, per se. Snarere har det disse tingene som kalles tags, eller mer riktig, elementer. Og disse elementene har start-tagger og sluttkoder, eller åpne koder og lukkede koder, og hva disse kodene betyr generelt for en nettleser er, begynne å gjøre noe, og så slutte å gjøre noe, selv om det finnes unntak til det. Noen ganger er det bare "sette et linjeskift her, for eksempel. Og vi så eksempler på at den andre dagen, mellom fet overfor, linjeskift, og deretter et par andre koder. Så HTML er språket som nettsidene er skrevet. Så hvis jeg går til noe sånt Google.com og trekk opp bare deres hjemmeside, husker at hvis du høyreklikker eller Kontroll-klikk og se på utsikten side kilde, typisk det er en komplett rot i disse dager under panseret, men det er fordi datamaskiner ikke bryr seg om tomrom, så dette trenger ikke å se pen. Men hvis vi zoome inn på deler av den, merke til at Chrome, bare for å være hyggelig, har fargekodet ting. Faktisk er dette den aller første tag som vi så i en nettside. Og igjen, HTML 5, den nyeste versjonen av dette språket, har denne tingen i begynnelsen, <! DOCTYPE html, enten små eller store bokstaver, men det er bare en slags standard som sier hei verden, her kommer en HTML-fil i versjon 5. 

Det interessante begynner her. Så <html, og så var det to barn av HTML-elementene sist. Hva var de to viktigste barn? Hode og kropp, akkurat som fyren med tatovering for et øyeblikk siden. Det er to deler av websiden, hode og kropp, og tilbakekalling, da, at kanskje den enkleste nettside vi kunne gjøre ser slik ut. Og jeg har rykket det bare for å være snill av pent og ryddig med koden min, men hva er egentlig viktig her er at det er noen hierarki til dette. Og hvilken som helst kode som jeg har åpnet har jeg lukket, og at det er derfor denne symmetrien til alle markeringen som jeg har laget. Så siste gang vi begynte å skrive websider på min egen laptop. Jeg åpnet opp tekstredigering, reddet jeg filen som hello.html, Jeg så dratt filen på nettleseren min, og voila, jeg hadde en side på Internett. Nå er det ikke helt tilfelle, jeg hadde en side på harddisken min, og jeg var bokstavelig talt den eneste personen i verden som ville se denne nettsiden i en nettleser. 

Så i dag introduserer vi en faktisk webserver og oppfatningen av faktisk serverer innhold på Internett og hvordan dette begynner å passe sammen. Så det viser seg at hele denne tiden i CS50 apparatet du har hatt en webserver på din datamaskin. Vi har, i rettferdighet, bare brukt det for gedit, for Clang, for GDB og lignende, men også installert av oss for deg i apparatet er en web-server, og at webserveren skjer for å være fri, åpen kildekode, en av de mest populære i verden, kalt Apache. Dens mer teknisk navn er httpd, d blir for daemon her, som er en teknisk ord for en server. Så installert i CS50 apparatet er en web server, og hva betyr det? Vel, er en web-server, konseptuelt, noen server på Internett som serverer webinnhold. Når du blir spurt etter en fil, spytter den ut HTML som komponerer denne filen, og voila. Du ser noen nettside hjemmeside. Men en server er, mer presist, et stykke programvare. Det trenger ikke å være på en fysisk maskin, har det bare for å være et stykke programvare kjører. Så CS50 apparatet, selvfølgelig, er et stykke programvare selv om det er liksom late som en maskin. Det later til å være en datamaskin innsiden av en datamaskin, men det betyr bare at apparatet kan sikkert kjøre ting som webservere. Det kan faktisk kjøre e-postservere. Vi kunne kjøre en chat-server i apparatet hvis vi ønsket å, og ja, vi kjører en annen type server, kjent som en database server, MySQL. Men mer om det i neste uke. Dette betyr at jeg faktisk kan gå til websider innsiden av maskinen min ved hjelp av en nettleser inne i apparatet eller på min egen laptop, min Mac eller min PC. Så hva betyr dette? Det viser seg at hver gang du kjører en Linux-datamaskin, sitt kallenavn er "lokal vert." Det har ikke et domenenavn fordi vi ikke har kjøpt et domenenavn for noe som apparatet, så det standardnavnet er lokale verten. 

Men for å få apparatet til å starte serverer nettsider, Vi må skape dem først. Så la oss gjøre det. La meg gå inn i en terminal vindu her og merker at jeg er på min typisk John Harvard spørsmål. La meg gå videre og skriv ls, og vi vil se noen kjente ting fra dette semesteret, desktop, nedlastinger, dropbox og så videre, men nå begynner vi å snu oppmerksomheten mot et par. På mange Linux webservere det er denne mappen som heter offentlig html, men vi kommer til å hoppe over at en for nå og fokusere på dette, vhosts. Noen som vet hva en vhost er? Bare dumt sjargong for virtuell host, og hva dette betyr er at på en typisk server du kan faktisk være vert for flere nettsteder. Du kan kjøpe et domenenavn som foo.com, og du kan legge det ut på en server. Men du kan også kjøpe bar.com og vert det på samme server. Årsaken er, nettlesere er smart nok til å informere serveren når en bruker ber om noen nettside, hva domenenavn brukeren ønsker hjemmesiden for. Så hva er fint om dette er at du ikke trenger en fysisk server eller en CS50 apparatet for hvert nettsted du kanskje ønsker å skape. Du kan bruke den samme serveren og utvikle hundre forskjellige nettsteder. Og ja, hvis du er en person som prøver å starte et nettsted, enten for gøy eller for virksomheten, typisk vil gå ut på Internett, og du må betale noen ti dollar i måneden, hundre dollar i måneden å være vert for nettstedet for deg. Og måten som fungerer er de tar andre mennesker ti dollar i måneden eller hundre dollar i måneden å være vert andres nettsteder på sin samme server. Grunnen til at de kan gjøre det er på grunn av denne funksjonen kalles bhosts, men mer om det når det gjelder tid for siste prosjekter. 

For nå, la oss bare dykke i det. Så cd vhosts, og hvis type I ls nå, merke til at det er en mappe der som heter lokale verten. Det er fordi, som standard, apparatet tallene du noen gang kommer til å kjøre en nettside på et apparat. Dette er ikke egentlig den virkelige verden, det er ikke en reell web server. Så la meg gå inn lokale verten, og nå får vi se der en siste katalog kalt HTML. Så det er litt dypt, hierarkiet, men hvis og når du bestemmer deg for å begynne å utvikle flere nettsteder i løpet av de neste n måneder eller år, denne typen mappestruktur tendens til å være nyttig. Nå la oss gå inn HTML som jeg nettopp gjorde, Skriv inn ls, og ingenting er der. Så la oss nå gå videre og gjøre dette. La meg åpne opp Chrome innsiden av maskinen, og la meg gå til http://localhost. Så bokstavelig navnet for enheten min, gå inn, og jeg får indeks /. Dette er egentlig ikke viser meg noe av interesse, men det viser seg at det vi ser er at mappen, HTML. Det er ingenting inne den mappen akkurat nå, så i stedet, hva jeg nødt til å gjøre er å først lage en fil. Opprett en HTML-fil som vi gjorde på mandag, men denne gangen satt det inne i apparatet. For de av dere som prøver å følge med bærbare datamaskiner nå, la meg gjøre en side som vil bli dekket i det web-baserte pset, men for å få dette til å fungere for aller første gang, du er nødt til å kjøre denne kommandoen: sudo tjenesten httpd start. Og dette, igjen, vil bli gjentatt i siste pset, men hvis du spiller sammen hjemme nå, webserveren er slått av i apparatet, og det er slik at det ikke tappe opp RAM og minne for 7 uker ut i semesteret når vi ikke trenger det. Så du trenger for å kjøre denne kommandoen en gang, og du vil få en utgang sånn. Da bør du være i stand til å spille sammen her. Nå la oss gå tilbake til denne mappen. Denne mappen er tom, så la meg begynne å lage en fil, gedit hello.html. 

OK. Gedit er åpen, som vanlig. La meg gjøre doctype, html, html, la meg komme i forkant av meg selv og begynne å lukke mine tags på forhånd. Nå har jeg hodet. La meg gå videre og lukke hodet, la meg nå gjør tittelen på siden, hallo verden som forrige gang, nær tittelen, nå la meg gjøre en kropp. Her vil jeg si hei, verden med noen exclams å gjøre det klart at det er en annen streng. Lukk kroppen, og nå la meg gå videre og fil lagre. La meg gå tilbake til min terminal-vinduet, og hvis jeg skriver ls, Jeg burde antagelig se hello.html. Og jeg gjør. Så nå la oss gå tilbake til nettleseren min, klikk på nytt, og du kan se vi er faktisk inne i denne HTML mappen. Jeg ser ikke en nettside ennå, dette er Apache, web server, bare viser meg listen innholdet i denne katalogen. Akkurat som Mac OS eller Windows vanligvis ville gjøre på ditt eget lokale harddisken. Så hvis jeg ønsker å se denne nettsiden, kan jeg klikke på denne lille koblingen her, hello.html, og faktisk, det er hva jeg hadde ventet å se. Nå, igjen, dette er ikke en URL som noen av dere kan besøke akkurat nå, fordi for deg, lokale verten, hvis du har en laptop her, den viser til en egen instans av apparatet. Dette er på min egen personlige apparatet, men dette er slags dum for meg å ha, for å ha en bruker som meg klikke på hello.html å faktisk se innholdet på denne siden. Det viser seg at webservere som Apache la deg ha en standard fil for alle web server. Legg merke her har vi hello.html. Hva er kommandoen i Linux for å endre navn på en fil? 

MV, for farten. Så la meg gjøre det, og la meg endre navn hello.html til index.html. La meg skrive ls for å bekrefte det er nå blitt omdøpt. Nå er dette kommer til å - hvis jeg går tilbake til lokal vert, merker nå at jeg automatisk ser at nettsiden. Dette er identisk med min faktisk gjør / index.html, men det fine er nå at webserveren er å finne, oh, hvis du har en fil som, ved menneskelige konvensjoner, heter index.html, la meg vise brukeren at filen som standard snarere enn noen dum katalogoppføring som ikke i det hele tatt brukervennlig. Faktisk har de fleste nettstedene du besøker på Internett, ikke har en liste over filer å klikke på, de bare vise deg innholdet. Så det er hvordan vi kan gjøre det, index.html. Så dette er alle morsomme og bra, men dette er en ganske enkel nettside. La meg gå videre og åpne opp index.html i mine vhosts, lokale verter, html katalogen, og la oss legge noe av større interesse. Så det er hallo verden, la oss i stedet si «Dette er CS50, Harvard College. . ». Så i begynnelsen av kurskatalogen beskrivelse av noe slag der. Nå hvis jeg laste, bør jeg se dette i min startside. Ok, og jeg ser det, men antar at jeg vil nå liste opp noen mer innhold i denne filen. Jeg kunne gå ned her og si, forutsetninger ingen, selv om noen av dere er sikkert liker, 'Ha ha ha, ingen forutsetninger. Men - offisielt. Så legg, og nå har vi den samme innfall som vi så forrige gang. Men hvorfor er det? Det var en enkel løsning. Hvorfor er denne siden brutt? [Student, uforståelig] >> Ja, vi har løst dette før ved å eksplisitt fortelle nettleseren sette et linjeskift her. Og det er fordi, igjen, er en leser bare kommer til å gjøre eksplisitt hva kodespråk forteller det å gjøre, så selv om du kanskje har truffet inn én eller to ganger eller ti ganger, det kommer til å kombinere det hele inn i en enkelt mellomrom, like ved konvensjonen. Så hvis du virkelig ønsker et linjeskift, må du bruke br tag, og nå varsel, som mandag, satte jeg / innsiden av denne koden, bare fordi dette bare ikke føles riktig å starte et linjeskift deretter stoppe den med ingenting i mellom. 

Så konvensjonen i HTML er å åpne og lukke en tag samtidig. Som en side, vil du se en rekke nettsteder i bøker ikke gjør det. Det er riktig å gjøre eller ikke gjøre det, men vi vil hevde at design-messig og stilistisk er dette bare bedre fordi da hver tag er både åpnet og lukket eller annen måte. Så nå la oss lagre og laste. Gå tilbake til nettleseren, ok. Nå vi gjør noen fremgang, men det er ikke helt nok. La oss gå videre og begynne å skrive på noen lengre kropp av tekst. Så la oss si, 'En rask brune reven hopper over en lat hund. Og nå la meg bare kopiere og lime dette noen ganger slik at vi har et avsnitt med tekst. La meg gå tilbake hit. Så det er ikke ser veldig bra ut. Jeg har et linjeskift, så det er greit, men nå, når vi får til poenget med å ha en nettside som har massevis av innhold og ikke bare enkle linjer å demonstrere HTML, Vi kan begynne å tenke på disse tingene som faktiske avsnitt. Og vi kan begynne å strukturere vår nettside litt mer renslig. Og ja, hva jeg kan gjøre er å gå opp her inne av kroppen min tag, og vet du hva, hvis "Dette er CS50. . ». virkelig demarks begynnelsen av et avsnitt, vel, la oss merke det som sådan. La meg rykke teksten, bare ved konvensjonen, la meg si Bestemmelsene i dette punkt slutter her, og deretter heller enn å gjøre dette linjeskift, la meg bare si at dette hører til der, og som et nytt avsnitt, og jeg vil bare raskt rykke ved bare clobbering alt dette ting. 

Så nå har vi et innrykket avsnitt der, og nå vår markering begynner å få litt mer semantisk konsistent med hva vi prøver å gjøre. Vi har et avsnitt, så la oss kalle det et avsnitt med p-taggen. Vi har en annet ledd, så la oss kalle det et avsnitt med p-taggen. Og nå, hva leseren vil typisk gjøre er akkurat som i en engelsk bok eller essay, der du vanligvis ser noen linjeskift mellom avsnitt. Nettlesere vil gjøre det for deg automatisk. Så nå har vi to avsnitt, og vi kan fortsette denne. Men, selvfølgelig, på Internett, når du har en kropp av tekst det er ikke typisk bare store blobs med tekst. Det er ofte hyperkoblinger i det. Så hvis vi vil, for eksempel inkludere noen linker der, anta hva som kan være av interesse i hva nettside Jeg oppretter her er - la meg gå til Google.com, og la meg søke etter en rask brune reven. Gå til Google bilder, og, hva med - dette er søt. Vi vil gå med dette. Så her har vi en rask brune reven hopper over en lat hund. Så det jeg skal gjøre her, bare for moro skyld for demonstrasjonen, er vel at dette bildet var på serveren min, og jeg hadde vært å skape disse bildene. Hva jeg gjorde var høyreklikk eller Kontroll-klikk på bildet, og hva du vil se i de fleste nettlesere er en liten meny - slutte å gjøre det - en liten meny som lar deg velge Copy Link Location eller kopiere URL. Så la meg gå tilbake nå til HTML min, og antar at jeg vil til hyperkobling dette til en annen nettside. 

Hva var koden kalt for det? [Student, uforståelig] >> Ja. Så en href for hyper referanse. La meg gå videre og lime den inn Det er en ganske lang URL, så la meg zoome ut igjen. Lukk parentes, så nå merker jeg er veien hit fordi denne nettadressen skjedde til å være ganske lang. La meg bla over her til slutten av rask brune reven, og deretter la meg lukke denne taggen med </ a, der jeg bare lukket navnet på taggen. Nå la meg gå videre og lagre filen, laster websiden, og nå som standard, som kommer til å bli understreket i blått for meg, men ja, jeg kan nå klikke på dette og voila. Det er det bildet. Og det gjorde ikke å være et bilde, det kunne ha knyttet til noen andre tilfeldige hjemmeside på Internett. Jeg kunne gjøre dette, for eksempel med CS50, så en siste eksempel her. 'Dette er CS50' kan være fornuftig å gå en, href = http://www.cs50.net, nær sitat, nær anker. Så nå er det en enda kortere URL, og denne gangen har vi ikke kommer til å linke til et bilde. Vi istedenfor å gå å koble til en annen side. Nå har vi et bilde her. Jeg føler at vi kan gjøre det litt bedre enn bare å koble til et bilde. Hva hvis vi ønsker å faktisk det legemliggjøre i vår egen nettside? 

Vel, hva jeg kan gjøre her er, snarere enn link til dette grafisk, la meg i stedet kutte URL, og vi vil bli kvitt det hyperkoblingen og rydde opp. Og vi vil gå ned her og bli kvitt dette. Vi trenger egentlig ikke alle disse setningene nå, så la meg forkorte siden litt. Og deretter ned her la meg gå videre i et nytt avsnitt, sier at jeg ikke vil at teksten nå, vil jeg et bilde som kilde kommer til å være at nettadressen. Et bilde, som et linjeskift, er enten det eller er det ikke. Så la meg med en gang lukke denne koden. La meg gå videre nå og lukk avsnittet som jeg er inne, og hvis alt går bra med Hello, world, hvis jeg på nytt nå, Jeg faktisk se rett inni min egen nettside et bilde. Så nå har vi et bilde tag, en ankerkode og lignende, og for godt mål, la meg gjøre en annen ting som ofte neglisjert på nettsteder i disse dager: La oss gi noen beskrivende tekst for dette bildet for folk som er på en mobil enhet og derfor ikke kan være i stand til å laste ned dette bildet svært raskt, for folk som er blinde og kan ikke være i stand til å se bildet men de kan ha en skjermleser som kan fortelle dem hva dette bildet er av. Og for å gjøre det, det er en annen egenskap for bilde koder kalt alt, for alternativ tekst. Og hva jeg kan gjøre her er å si: "Dette er en rask brune reven. Slik at selv om den menneskelige ikke kan se bildet på skjermen, han eller hun kan i det minste høre, som med noen stykke programvare, hva er egentlig det på skjermen. 

Det vil ikke endre estetikk på siden, men det er absolutt god praksis for brukerne. Greit, la oss forlate denne nettsiden i sin nåværende form, men la oss se om vi ikke kan nå presentere noen bedre tilnærminger til å skrive disse nettsidene, noen leksjoner som kommer til å tjene oss godt som våre sider blir mer og mer komplekse. Hva vi ikke kommer til å gjøre i løpet av de neste ukene er leder deg gjennom alle de flere dusin HTML-kodene som det er. Mye som i grunnen tilbake i uke 0, er det sannsynligvis vil være nok å gi et høyt nivå oversikt over noen av konseptene, en rask gjennomgang av noen av de blokkene du var sannsynligvis i stand, ganske komfortabelt, for å navigere på egen hånd, de ulike brikkene. Og det kommer til å skje igjen i HTML, mest sannsynlig, der det er rikelig med ressurser på nettet som vi vil henvise deg til, ulike lærebøker, hvis du foretrekker å lese en lærebok, som vil lede deg gjennom alle de forskjellige tingene du kan gjøre med HTML, men egentlig har vi sett så langt i HTML fleste av de grunnleggende begreper. Vi har den oppfatningen av koder som blir åpnet, blir kodene stengt. Noen koder som er både åpnet og lukket i den forstand at de er tomme, og det bør være noe inne i dem som et bilde tag eller et linjeskift, som er akkurat det. Vi har også sett allerede på forestillingen om en attributt, som alt eller kilde. Legg merke til at disse ordene har en tendens, etter konvensjonen, for å være kort og konsis. 

Vi har ikke skjønn over hva disse tingene er kalt, noen andre som oppfant HTML kom opp med disse navnene. Så du må bare begynne å vite eller slå opp hver gang du trenger dem, hva navnene er for disse kodene og attributter. I tilfelle av disse attributtene, attributter generelt endre oppførselen til noen tag. I dette tilfellet, forteller kildeattributtet bildet taggen hva kilden av bildet skal være. Href-attributtet forteller ankerkoden hva det faktisk skal være å linke til. Men i forhold til strukturen i en nettside, selv om Facebook og Google og lignende ser ut som en komplett rot under panseret ved første øyekast, hvis du begynner å lese gjennom det mer metodisk, de følger dette grunnleggende, grunnleggende struktur. Men vi kan forbedre stilisering av disse tingene. Så la meg gå til noen eksempler som jeg forberedt på forhånd. La meg gå videre og kopiere dem fra en annen mappe her og sette dem inn i denne katalogen. På forhånd hva jeg gjorde var å forberede noen filer: search0, search1, search2, og search3 og 4. La meg gå videre og åpne opp den første av disse filene, og la oss se om vi ikke kan begynne å lage vår egen søkemotor. På toppen av denne filen, som vanligvis er tilfelle i klassen, bare en haug med kommentarer. I HTML, men midlene som du starter en kommentar er <- og så er du inne i en kommentar, en multi-line kommentar. Når du er klar til å stoppe den kommentaren, kan du gjøre ->. Så alt øverst i blått er bare en kommentar. 

Dette er min doctype erklæringen, som igjen du kan bare kopiere og lime inn på tro, for nå. Dette forteller bare nettleseren, her kommer noen HTML 5. Under det, på linje 14, er den første av de faktiske koder, og dette sier bare, som før, her kommer noen HTML, her kommer hodet på siden min, her kommer tittelen, og deretter omvendt, det er det for tittelen, det er det for hodet. Her kommer nå hovedteksten på siden min. Så et par nye koder nå: h1 står for overskrift 1. Det er en tradisjon i HTML for mange år tilbake for å ha forskjellige størrelser med tekst. Og tilbake i dag, mente hver enkelt, generelt, akkurat stor og fet. Men det er også h2, som er stor, men ikke fullt så stor og fet. Det er H3, som er slags stor, men ikke på langt nær så stor og fet, og så videre, helt ned til h6. I disse dager, men er h1, h2 og h3 egentlig mente å ha mer semantisk mening til dem, hvor h1 er virkelig en overskrift: overskriften på en nettside, overskriften i en kolonne eller noe sånt av teksten. Så jeg har bevisst sagt h1 CS50 søk> h1 å spesifisere at dette er virkelig overskriften, tittelen på siden min. Ikke tittelen i tittellinjen forstand, men tittelen at du faktisk ser i selve nettsiden, i kroppen. Nå dette, kan du sikkert gjette hva det er, selv om vi har et par nye stykker av syntaks. Dette er et skjema. Så nettet blir veldig interessant når nettsteder tar innspill fra brukerne. I denne klassen, i problemet satt på web-programmering, Vi kommer ikke til å lage en nettside, per se, med statisk innhold som viser fotografier som du har tatt, eller dette er min CV, og ting om meg, fordi disse tingene er relativt enkelt å sette sammen. Det er vanskelig å gjøre ting vakker på nettet, men minst sette opp innholdet er ganske trivielt. Men ting blir virkelig interessant når noen kan besøke nettstedet ditt og gi innspill og kan fylle ut skjemaer, kan krysse av boksene og kan samhandle med ditt nettsted. Og faktisk, sannsynligvis hver nettside du bryr deg om i disse dager, i detalj, er noe interaktivt. Facebook, Google og lignende, som tar brukerundersøkelser og produsere tilpasset produksjon. 

Så la oss begynne å gjøre det nå. La oss overgang nå fra bare å bruke HTML for markering av statisk innhold som i stedet en levering mekanisme for dynamisk innhold. Og mot dette målet, la oss gjennomføre vår egen søkemotor. La oss gjøre det slik. Her er skjemaet tag. Handlingen attributtet angir at når brukeren fyller ut dette skjemaet med tastaturet sitt, vil det bli sendt til denne adressen her. Så jeg er litt juks. Det kommer til å ta oss litt lenger enn én klasse å implementere hele søkemotor, så vi får bare gjøre fronten, så å si. Vi vil gjøre den delen som lar brukeren søke, og vi vil liksom punt til Google den harde delen av å finne søkeresultatene, men, spesielt, jeg skal snakke med Googles webserver ved hjelp av en av to svært populære metoder. En blir få, en annen at vi vil til slutt se, blir innlegget, selv om det er andre som er sjeldnere brukt. Så får bare maner opp tanken på, ønsker jeg å få litt innhold, få noen søkeresultater. Dette, kan du kanskje gjette hva dette betyr. Dette er en slags inngang, er det faktisk kommer til å se ut som et tekstfelt, og navnet på den inngangen, navnet på den variabelen, så å si, kommer til å bli q for spørring ved konvensjonen. Og igjen, er den type denne inngangen ikke kommer til å være en avmerkingsboks; det er ikke til å være en meny, det kommer til å bli et tekstfelt som vist ved dette attributtet her, og dette tekstboks som et linjeskift, er enten det eller ikke. Så vi har et tomt element med skråstrek inni denne koden. Så jeg kommer til å sette et linjeskift, og du kan kanskje gjette hva dette kommer til å gjøre. Dette er en annen slags form input. 

Dette kommer til å bli brukt til å sende inn skjemaet. Så dette kommer til å bli den store knappen som brukeren kan klikke for å sende inn skjemaet, og etiketten på denne knappen kommer til å være "CS50 Søk. Lukk form, tett kropp, nær HTML. La oss se hva vi har i form av denne nettsiden. Så la meg gå til nettleseren min, la meg gå, fortsatt, til lokale verten. Dette er fortsatt index.html, så hvis jeg ønsker å se denne filen som heter search0, Jeg kan rett og slett gjøre / search0.html, enter - og den første av mine feil. Hva skjer? Jeg åpenbart ikke har tillatelse å få tilgang til denne filen, eller annen grunn. Men det er fordi, i motsetning til arbeidet vi har gjort så langt i C, der programmene du skriver antas å være runable av deg, kjørbar av deg, det er egentlig ikke tilfelle på nettet, der noen ganger kan det være lurt å opprette filer på en server, men du ikke vil at hele verden skal kunne se dem. Snarere vil du verden for å se noen filer men ikke andre, bare for personvern skyld. Så det er mer av en opt-in basis når du gjør ting på nettet. Og så la meg faktisk skriver ls her, og du ser filene jeg har, men husker at hvis jeg gjør ls-l for lenge, Jeg får en lenger liste som gir meg noen flere detaljer om disse filene som er nå, egentlig, for første gang er relevant for oss. Legg merke til at helt til høyre er navnene på filene mine, og deretter tidspunktet de sist ble endret eller kopieres. Dette nummeret her er hva? Husker du? Størrelsen i byte, hvor stor filen er. 

Så jeg synes å ha noen form for logo her som er større enn alle de andre filene. Dette er hvem jeg er, dette er hva jeg er og hva gruppen jeg er i. Men så, over her til venstre er litt av kryptisk sekvens, og vi snakket, tror jeg, kort om dette i det siste, men dette har å gjøre med tillatelser. Og selv om det er litt disig, RW betyr sannsynligvis lese og skrive. Så det viser seg at disse streker betegne ulike sett av rettigheter for forskjellige mennesker. Og mønsteret er, i hovedsak, som følger. Når du ser en sekvens av streker her, de ser ut som følger. Det er en strek, så er det tre flere streker, så er det en annen tre, så er det et annet tre. Den første er enten en dash eller det annonse for katalogen. Slik at man er ganske enkelt. Hvis det er en mappe, sier det d, ellers er det en bindestrek. Det er et par andre tilfeller, men for nå vil vi bare bryr seg om filer og kataloger. Disse neste tre streker - og jeg har kunstig satt inn mellomrom. De var åpenbart ikke det når vi så dem for et øyeblikk siden. Dette er filen eierens tillatelser, og husker fra en annen siden at det ble lest og skrive. Det var fordi jeg, som den personen som opprettet denne filen et øyeblikk siden, Jeg, bare som standard, på en Linux-datamaskin, har evnen til å fortsette å lese og skrive den filen. 

Slik at operativsystemet gir bare meg RW automatisk. Den midterste seg forholde seg til min gruppe, nemlig studentene, som er slags meningsløst på apparatet fordi jeg er den eneste personen som bruker apparatet. Så la meg bare bølge hendene mine på det for nå. Men de siste som er viktigst for Internett. Dette er alle andre i verden, og det faktum at det er --- betyr at ingen andre i verden har noen tillatelser til denne filen. Klart et problem, så jeg trenger å fikse dette ved en eller annen måte gi verden hva? Lese og skrive? Det er nok dum, ikke sant? Jeg vil ikke at noen på nettet å gå for å besøke min side og liksom endre denne filen, selv om de egentlig ikke kunne gjort med en HTML-fil, men bare i prinsippet, sannsynligvis bare vil at de skal være i stand til å lese den. Hva betyr det å lese den? Det betyr ikke at de kommer til å bry seg om den faktiske HTML, men leseren må være i stand til å analysere det kodespråk, topp til bunn, fra venstre mot høyre. Så noen på nettet må være i stand til å lese den, så jeg minimalt behov for å gi den r. Jeg kan gjøre dette i et par forskjellige måter, men kanskje det enkleste er å kjøre denne kommandoen her. Chmod, endre modus, deretter en + r så alt, alle i verden + lese, og så navnet på filen, search0.html. 

Nå hvis jeg gjør ls-l igjen, merker at filen er endret, og ja, jeg har slått på r for alle. Jeg har også slått den på for min gruppe, men det er fint, fordi hvis jeg slått på for alle, er min gruppe en undergruppe av det. Så det er greit også. Dette betyr bare at datamaskinen har nå gjort det lesbart. Nå la meg gå tilbake til nettleseren min, klikker laste. Ah-ha. Vi har nå CS50 Søk. Jeg har zoomet inn litt kunstig - ganske heslig søkemotor. Men la oss se om det faktisk fungerer. Først, la meg gjøre en rask sunn fornuft sjekk, la meg styre klikk og se siden kilden. Legg merke til at i Chrome vi nå ser det samme HTML som jeg selv opprettet. Ikke bli forvirret her, skjønt. Jeg kan ikke begynne å endre koden her, fordi nettleseren har en skrivebeskyttet visning av denne koden. Leseren har nettopp bedt lokal vert for en fil som heter search0.html. Det er nå en ren tilfeldighet at apparatet skjer for å være på samme datamaskin som min nettleser. Jeg kunne bare ha, ekvivalent, har skrevet i www.facebook.com/search0.html, og hvis Facebook hadde en fil som heter det, ville jeg da bli å se deres HTML. Og, selvfølgelig, jeg kan ikke endre filen som kommer tilbake fra Facebook, heller. Så nå er vi liksom viske ut linjene. Apparatet er både en server, serverer nettsider, men det er også en klient i den forstand at jeg bruker en nettleser å faktisk snakke med denne serveren. Så la oss se om Google søkemotor fungerer. La meg gå videre og søke etter rask brune reven, skriver. Og voila, jeg har nå min egen søkemotor. 

Men hvordan fungerer dette? Litt av en strekk, men - og nå kan du ikke se, nettopp, den delen som er av interesse. Legg merke til hva som skjer. Legg merke til nettadressen. Det viser seg at denne metoden, kalt får, er super-enkel. Når du angir i en form som du ønsker å 'komme' resultater fra noen server, hva det kommer til å gjøre er å ta det du skrev inn i skjemaet og sette den i nettadressen. Det kommer til å standardisere hvordan det blir satt inn i URL som følger. Legg merke til at dette er nettadressen som var verdien av min handling attributt. Det er der jeg ønsket skjemaet for å ende opp. Men så oppdager dette spørsmålstegn. Dette er en konvensjon på nettet der for å gi brukeren innspill til et nettsted, føyer du til URL et spørsmålstegn, og da har du en hel haug med nøkkelverdipar. Navnet på en tast, ellers kjent som en parameter i nettet, da har du et likhetstegn, da har du verdien av denne parameteren. Så det er egentlig en variabel navn og en variabel verdi, men de variablene navn og verdier kom fra HTML-skjemaet. Hvorfor er addisjonstegn det, tror du? Fordi jeg ikke skriver + i mellom mine ord. [Student, uforståelig] >> Ja, det er bare for avstand. Odds er, når du har sett en URL, Det er aldri noen mellomrom i den, hvis bare fordi hvis det var, kunne du ikke virkelig kopiere og lime den inn i en IM eller inn i en e-post fordi det ville bryte. Du vil hele greia for å være en sammenhengende rekke med tegn. 

Så nettleseren er smart nok til å innse, uh-uh. Ikke bare sette en plass der. La meg kode plass i noen standard måte. En av de konvensjoner for å gjøre det er å ha nettleseren automatisk sette en + der du ellers ville ha en plass. Så nå har varsel Google vært litt brukervennlig. Jeg absolutt ikke har opprettet denne nettsiden, men de har utfylt sin egen tekstfelt med hva, nettopp, jeg skrev i. Anta at jeg skal søke etter noe annet, som en lat hund. Jeg kan bare skrive dette her, re-søk. Legg merke til at nettadressen endrer seg her, men merker da at jeg faktisk kan søke etter hva jeg vil bare ved å forstå hvordan nettadresser arbeid. Jeg kunne gjøre lat katt, enter, og merker nå har jeg fått en veldig lat - skal vi? Jeg føler at vi burde. Jeg får en veldig lat katt. OK. Dette er en av de dummeste tingene vi har gjort. Men det er en lat katt. Uansett, hva er nøkkelen takeaway her? Nå er vi liksom spille i verden av HTTP. HTML er nettopp dette kodespråk, åpne tag, sluttkode, som forteller en nettleser hvordan å gjengi innholdet på en nettside. Men når du begynner å overføre data over Internett mellom nettleser og server, det er der denne protokollen kjent som HyperText Transfer Protocol overtar. Dette er den typen menneske konvensjonen, når Sam og jeg håndhilste på mandag, starter en tilkobling, og deretter avslutning av en forbindelse, samme ideen her. Hvordan er Googles resultater kommer tilbake til meg? Hvordan blir min skjemainnsending kommer til Google? Vel, husker fra den andre dagen at det som egentlig skjer under panseret når du ber om en nettside er, nettleseren sender en noe-kryptisk melding som GET / HTTP/1.1 for standard hjemmeside. 

Eller, i dette tilfellet, fordi spesielt jeg ba tidligere search0.html, dette vil da være noe-kryptiske meldingen at nettleseren min sender til apparatet. Eller, i dette tilfellet av Google, er hva som faktisk sendes er en forespørsel til / søk, og deretter? q = lat katt, med et pluss der. Så denne meldingen, at jeg, den menneskelige, er aldri å skrive, men blir sendt av nettleseren min, dette er hvordan HTTP skjer. Dette tilsvarer våre har rystet hender. Dette er forespørselen, og serveren er i ferd med å sende et svar. Så la oss ta en titt på denne under panseret. Som før, kan vi åpne opp dette spesielle feltet i en nettleser. Se siden, inspisere elementer. Så under inspisere element, merker at det har skjedd i Chrome, og IE og Firefox har lignende mekanismer, vi har disse utviklerverktøy tilgjengelig for oss. Normale mennesker ikke bruker disse fanene. Men vi nå, er interessert i hva som skjer under panseret på nettverksnivå. Så hvis jeg drar opp nettverket nivå her, la meg gå videre og utvide dette vinduet, åpne opp denne oppføringen her, og se på overskriftene. Så hva skjer når jeg ber om en fil fra en webserver er nettleseren min sender en hel haug med ting. Og la meg vise kilde. Så under forespørselstopptekster, og dette er bare Chrome viser meg noen diagnostiske utgang, liksom som en debugger av noe slag, merker at det jeg har uthevet her er nettopp hva Chrome sender til serveren for å be om en fil som heter search0.html. Det er å fortelle serveren hva den mener det heter, takket være denne verten kolon feltet, så er det noen ganske esoteriske ting her, som noe å gjøre med datoer og klokkeslett, noe å gjøre med de språkene at nettleseren forstår, men de virkelig viktige linjer er disse to første her. 

Hva svarer serveren med? Vel, hvis vi bla nedover her og vise kilden til denne tingen, legge merke til at serveren har reagert med en noe kryptisk melding også, 304 ikke endret. Det er litt rart, la meg faktisk prøve å fikse dette. La meg holde nede shift og klikk på nytt opp her å tvinge nettleseren til å faktisk gjøre denne forespørselen for første gang. Så la meg zoome inn, og vi vil se nå at serveren respons, fordi jeg holdt shift, er 200 OK. Så du har sannsynligvis aldri sett nummer 200 I forbindelse med nettet, men hva tallene har du noen ganger sett uventet fra en server? 404, finner ikke filen, 403, forbidden, 500, server error. Så det er disse tallkoder at verden bruker i nettet å betegne feil, akkurat som C-funksjoner kan returnere feil og viktigste kan returnere exit koder. 200, skjønt, du sjelden se fordi det betyr at alt er bra. Og 304 har du sannsynligvis aldri se fordi det er det som betyr? At ingenting har - la oss se om vi kan simulere dette igjen - Å, nå er det ikke samarbeider. 304 sa ikke endret, så hvorfor ble serveren selv svarer? Vel, for effektivitet, en web-server automatisk for deg, hvis filen ikke er endret, vil det ikke videresende hele HTML-fil. Det vil bare fortelle leseren at det ikke har endret seg. Bare bruke kopien du allerede har. Så det er denne oppfatningen av caching på nettet for ytelse, slik at du ikke kaster bort tid og avfall båndbredde laste ned filer igjen og igjen unødvendig. 

Men denne nettsiden nå, var super-enkle, og det bare viste meg HTML som kom tilbake. La oss faktisk bruker nettet kategorien nå for å gjøre et Google-søk som raskt brune reven. La meg deretter CS50 søk, og nå, merker i bunnen her en hel haug med ting kom tilbake fordi når jeg besøker en ekte nettside som Google.com, de har bilder, de har tekst, har de et språk som kalles JavaScript der. Så hver rad i denne tabellen her nede representerer noe som Google spytter ut som svar på min enkelt forespørsel. Den jeg bryr meg om, selv om dette er første. Og hvis jeg går til søket, anmodning, klikker vis kilde her, merke til at, ja, det kryptiske melding om at nettleseren sendte til Google var disse to linjene her, etterfulgt av noen uforståelige informasjon her nede som vi vil ignorere for nå. Men legg merke til, også, hva Chrome er ganske hendig med, det er også viser meg søkestrengen som ble sendt i. Så i stedet for å vise meg dette, som bokstavelig talt ble sendt, hvis jeg viser det dekodes, Chrome, bare for debugging formål, for utviklere som oss, det er bare å vise meg et menneske-vennlig versjon av - det er ikke hvordan du stave rev, tilsynelatende. Jeg bare merke dette nå - men det viser deg hva jeg, tilsynelatende, skrevet. Samtidig er svaret som kom tilbake fra serveren på nytt 200 OK. Men inngår i dette svaret, selvfølgelig, hvis vi faktisk viser sidens HTML - Beklager, dette er en liten hurtigtast gått galt i dag. 

Jeg skal ta dette senere. Så hvis vi faktisk viser sidens kildekode, som jeg kan gjøre her nede ved å klikke svar, Dette er hva som faktisk spytte tilbake, i tillegg til at kryptisk 200 OK meldingen fra serveren. Litt kryptisk, men hvor alt dette kommer fra? Vel, la oss gjøre en annen ting her. En annen noe-kryptisk kommando, men dette er slags ryddig i at det viser oss nøyaktig hva som skjer under panseret. Så jeg er tilbake på Mac min her, har jeg koblet via et program som heter SSH, Secure Shell, til en annen server fordi de fleste av Harvard datamaskiner blokkere kommandoen vi er i ferd med å kjøre fordi det er denne kommandoen på noen servere kalt traceroute som lar deg spore ruten mellom punkt A og B, og så langt vi har tatt helt for gitt at jeg kan skrive inn Google.com og liksom få data tilbake fra halvveis over hele landet eller halvveis over hele verden. Med traceroute kan vi faktisk dykke i litt dypere om hvordan Internett fungerer, og se hva som skjer under panseret. Så la oss gå videre og vilkårlig spore en rute til, si, Stanford.edu, som ligger over hele landet, og trykk enter. Denne kommandoen kan være super-rask eller super-slow, men det vi ser nå, linje for linje, er hver og en av de trinn eller humle mellom oss og Palo Alto, eller Stanford, der de har sine web server. Så hva gjør hver av disse linjene representerer mer konkret, skjønt? Et stykke av sjargong fra Internett? [Student, uforståelig] >> Hva er det? [Student, uforståelig] >> Å, så det er tider, men hva betyr hver rad - hva mener jeg med hop? 

Vel, det er disse tingene på internett kalt rutere. Og rutere, som navnet antyder, ruteinformasjon fra punkt a til punkt b.. Men det er flere punkter utover a og b. Det er c og d og e og f mellom rad 1, som skjer for å være min datamaskinens IP-adresse, eller min numerisk adresse, som unikt identifiserer datamaskinen min, og trinn 15, som faktisk er den sjette web server, tilsynelatende, som jeg inferring fra dette, eller versjon 6 av sin webserver ved Stanford. Men hva er slags ryddig er, kan vi se banen at min 0 og 1-ere tar fra datamaskinen til Stanford. Så trinn 1 er min egen datamaskin adresse. Hver datamaskin på Internett har en unik identifikator som ser slik ut. Number.number.number.number. Et sted på denne campus, sannsynligvis i science center, er en ruter som kalles Core-Gateway 2-te83, uansett hva det betyr, så dette er en av Harvards store fancy rutere som ruter mye av trafikken på dem. Her er en annen av Harvards rutere, er dette en Border Gateway, grensen betyr det sannsynligvis i utkanten av campus sted. Så er det en nox, rad 4, som er Nord-Crossroads, som er en stor leverandør, Internett-leverandøren, at steder som Harvard koble opp til. Men så ting blir litt interessant i linje 6. Hvor er mine biter plutselig? Kansas. Verden har en vane med å bruke flyplassen koder i mange av disse tingene, eller i det minste forkortelser for stater eller byer, så det ser ut som, på bare 60 ms, en informasjonspakke, er 0 og 1 fra min laptop fikk hele veien til Kansas, og igjen, i 60 ms. 

Dessuten, etter Kansas, tok de en tur gjennom Houston, sannsynligvis, som foreslått av navnet på denne serveren. Så akkurat som en server på Internett må ha en numerisk adresse, det kan også eventuelt ha en litt mer menneskevennlige adresse som mennesker kom opp med. Nå, i trinn 8, vet vi ikke hva dette er. Noen ganger rutere bare slags ignorere deg, og de bare ikke svare på spørsmål, så det er fint. Den ene etter trinn 8 er tilsynelatende der? L.A. Merke til i bare 78 ms, hva tar oss mennesker som 6 + timer å gjøre fysisk, tar pakker av informasjon på Internett 78 ms å reise så langt. Trinn 10 er i LA også, og steg 11 ser ut til å ha gått nordover, opp i nærheten av Stanford. Dette er deres grense ruter eller grensen router. Et par trinn ved Stanford som ignorerer oss, og til slutt, når vi webserveren i bare 87 ms. Nå, alle disse tallene, som en side, bare fortelle deg hvor lang tid det tar for data å komme fra meg til hver av disse ruterne, og det er ikke akkumulere. Hva dette programmet gjør er, sender den første meldingen, i hovedsak, til den første ruteren. Deretter en til den andre ruter, deretter en til den tredje ruteren, måle hver gang. Så i teorien, vil disse tider være økende eller i det minste temmelig nær til hverandre, og, faktisk, de som er her på campus er super-liten. Så snart du begynner å gå over hele landet, tar det data litt lenger å reise, nærmere 100 ms, gi eller ta. Men la oss gå den andre retningen nå. Hva med Cambridge University i Storbritannia? La meg i stedet kjøre traceroute av www.cam for Cambridge, . Ac for akademisk,. Uk, og trykk enter her. Det var ganske forbanna fort. Mine data bokstavelig talt gikk til Cambridge, England, ved at split sekund av gangen. 

Så la oss se på banen som det tok. Harvard, Harvard, Harvard, Northern Crossroads, som er en ISP, og så er dette Nord Crossroads, og deretter bam. Hva er i mellom trinn 6 og 7, router 6 og 7? Atlanterhavet. Og vi inferring dette fra det faktum at vi går fra 20 her ms til 80 ms her. Så noe tok 60 ms, gi eller ta, for å komme over. Og det var sannsynligvis en stor kropp av vann. Hva foregår etter det? Vel, her er vi i London, bare 88 ms senere. More London, mer London, ikke sikker på hvor dette er, men vi vil anta at det er utenfor London, Cambridge her, og til slutt vi - bokstavelig talt, University of Cambridge . Something.net, og så, endelig, i linje 16, deres web server er tilsynelatende kalt Scorpius under panseret, selv om vi vet det som www. Kind of mind-blowing, tror jeg. Første gang jeg noensinne gjorde dette, det er helt blåste hodet mitt. Dessverre, blokkerer Harvard denne type trafikk, typisk, i nettverket. Så du kan ikke gjøre det super enkelt. Skjønner, skjønt, er dette her mulig. OK. La oss ta vår 5-minutters pause her. Vi vil komme tilbake og dykke dypere. Så vi er tilbake, og vi har slags ambled om i et par forskjellige retninger her. Så la oss oppsummere hva som har skjedd her. Vi startet samtalen snakker om dette språket kalles HTML. Igjen, ikke et programmeringsspråk. Det er bare et kodespråk som i stor grad om estetikk og strukturering av innhold i form av en webside. Men HTML derfor trenger noen slags mekanisme for å reise mellom nettleser og server. HTML derfor slags ritt på toppen av dette andre språket, eller mer korrekt, en protokoll, kjent som HTTP. 

Og HTTP, som vi har sett det så langt, er slags analogt til denne menneskelige konvensjonen for å håndhilse. Når en leser ønsker å be om en side fra en server, den sender som "få" forespørsel fra nettleseren til serveren, og deretter serveren svarer med et tall som 200, er alt i orden, samt HTML eller noen dårlige nummer som 404, fil ikke funnet. Men i mellomtiden er HTTP selv ikke Internett, per se. HTTP er bare en tjeneste, en funksjon av Internett mye som G chat er en annen tjeneste, omtrent som e-post er en annen tjeneste. Det er alle slags ting vi kan gjøre på Internett. HTTP er bare ett av disse programmene. Så på toppen av - HTTP er på toppen av noe annet som vi ikke nevner ved navn, har du kanskje hørt om ved navn, TCP / IP. Så den historien vi fortalte det handler om hvordan data reiser fra punkt a til punkt b.. Og i dette tilfellet, så vi på et svært lavt nivå ruter til ruter til ruter til ruter, hvordan dataene faktisk blir overført. Men underveis, det kommer til å møte ulike hindringer. I tillegg til disse ruterne, er det ting som kalles brannmurer på internett, og så data, for eksempel at vi var bare sender fra meg til Stanford, fra meg til Cambridge, sendes til, på dette nivået, heter noe en IP-adresse. Vi så dette for et øyeblikk siden, og en IP-adresse er bare en numerisk adresse på formen w.x.y.z, der hver av disse er mellom, gi eller ta, 0 og 255, selv om du ikke kan ganske bruke alle disse tallene. Men hver av disse plassere holdere er et tall mellom 0 og 255. Så en IP-adresse i disse dager er 32 bits. 

Nå, som gir oss hvor mange mulige IP-adresser i verden? Omtrent 4 milliarder kroner, fordi hver gang vi er telle i kraft av 2 hele veien opp til 32 av noe, gir som regel oss 4 milliarder kroner. Så det er mye av IP-adresser, men du har kanskje lest, eller du kan nå legge merke til i den populære pressen, en push mot en ny versjon av IP kalt IPV6. Akkurat nå er vi med versjon 4. Det egentlig ikke har vært en versjon 5, er vi bare hoppe rett til 6. Versjon 6 skal bruke 128 bits for IP-adresser, som er freaking stor. Vi bør ikke kjøre ut i ganske lang tid nå, men vi har begynt å kjøre ut av versjon 4 IP-adresser, fordi alle av oss har ikke bare ting som bærbare og stasjonære, har mange av oss telefoner, mange av oss har andre enheter som TiVo o.l. som har IP-adresser selv. Harvard selv har titusenvis av datamaskiner. Så verden er genuint kjører tom for IP-adresser, i det minste av dette skjemaet. Så i løpet av de neste årene, skal du se adressene på dine egne datamaskiner trolig sakte endring som flere og flere bedrifter og universiteter begynner å støtte den nyere versjonen. Men en IP-adresse ikke er tilstrekkelig for datamaskinen en å be data fra datamaskinen b. Fordi datamaskinen b kan være en server, og en server, som jeg nevnte tidligere, kan gjøre bunter av ting. Det kan være vert nettsider, kan det være en e-postserver, det kan være en Skype server, kan det være en G chat server. 

Alle disse forskjellige tjenester som kan utføres på server kunne alle, fysisk, være på samme maskin. Så i tillegg til IP-adresser, verden har ting som kalles porter på Internett. En port er bare et tall, så det er et unikt nummer for HTTP. Dens nummer er 80. HTTP bruker også nummer 443, men mer spesifikt, for krypterte HTTPS. Når du ser s, for sikker, er at bruk av et annet nummer. Det er andre tall, som 25, som brukes til noe som kalles SMTP, ellers kjent som e-post. Det er noe som heter 22 for SSH, og det er en hel haug med andre havner der ute. Nå, vi mennesker sjelden ser disse tallene. Men når du skriver inn en adresse som http://www.facebook.com, nettleseren hemmelighet setter 80, fordi du bruker HTTP. Hvis du i stedet, skriver HTTPS, er det i hemmelighet setter 443. Og vi kan slags se dette manuelt hvis jeg trekke opp en Brower og gå til http://www.facebook.com:80. Derfor eksplisitt siterer ikke bare navnet på nettstedet men porten som jeg ønsker å snakke med, og trykk enter. Legg merke til den forsvinner, fordi nettleseren forutsetter, oh, 80, er jeg ikke engang kommer til å bry viser at til deg. Men grunnen til dette er at hvis jeg faktisk ønsket å sende noen en e-post, Jeg ville virkelig være å sende det til dem på port 25, at det å være SMTP. En bit av en overforenkling, men noen av dere har venner som faktisk fungerer på Facebook, og de, på samme måte, har servere som mottar e-post. 

Hver gang du sender en e-post, hva gmail gjør for deg eller Outlook eller hva program du bruker, Det er liksom hemmelighet sette det tallet også, 25, i så fall. Det er denne kombinasjonen av IP-adresse og nummer som identifiserer en datamaskin på Internett og en bestemt tjeneste på den aktuelle datamaskinen. Nå, selvfølgelig, har de fleste av oss sannsynligvis aldri skrevet manuelt en IP-adresse. Kanskje du har i skapet, men i den virkelige verden, ikke så mye. Hvorfor kan vi ikke skrive IP-adresser i nettlesere? Det ville fungere, faktisk, kan vi se dette, la meg vise deg en annen kommando som skal fungere mest hvor som helst på Harvard campus på en Mac eller en PC. Det er denne kommandoen kalles nslookup, navnserver oppslag. Hvis jeg ser opp www.cnn.com, viser det seg at CNN har - oh, interessant. CNN har begynt å bruke Amazon Web Services. Du kanskje vet av cloud computing, Amazon er en av de store aktørene i cloud computing. Hva jeg nettopp gjorde var, sa jeg, «Gi meg adressen til CNNs web server, ' men det viser seg at CNN webserver ledes av Amazon, Amazon Web Services, tyder dette. Og adressen til denne maskinen er dette her. Så jeg er ikke sikker på om dette vil fungere, fordi de ikke pleide å bruke Amazon. Men la oss prøve dette, http://, IP-adresse, skriver, og - går det å jobbe? Ja. Det kommer til å fungere. Internett er super-slow i dag. Men, i et øyeblikk, vil du se noen nyhet. Det vi går. Bank of America som blir saksøkt. OK. 

Dette er fordi denne IP-adressen bare skjer til av synonymt med www.cnn.com. Selvfølgelig ville det være fryktelig markedsføring for å si, kan du besøke oss på nettet på 50.112.94.127. Du ville aldri huske. Så selv disse dager du kanskje husker ting som 1-800-COLLECT eller mnemonics verden kom opp med for telefonnumre. Som før mobiltelefoner, var ganske vanskelig å huske før du kan bare skrive det inn og glemme det. Så Web, også har denne konvensjonen av navn og IP-adresser, og det er disse tingene der ute som heter DNS-servere, domenenavn systemer servere, som oversetter IP-adresser til navn og vice versa. Så det er hva som skjer under panseret. Til slutt har vi TCP / IP, som er denne svært lavt nivå protokollen det, egentlig, får bare 0 og 1-ere over Internett, og det gjør det ved å sette dem inn i en virtuell konvolutt, hvis du vil, og skrive på utsiden av konvolutten IP adressen til bestemmelsesstedet, samt den numeriske portnummeret av tjenesten på denne destinasjonen som den ønsker å snakke med. I mellomtiden, på konvolutten er det også noe som kalles en returadresse, som er din IP-adresse, slik at når CNN får en informasjonspakke fra deg, åpner denne virtuelle konvolutt, ser at du ønsker hjemmesiden, det vet fra avsenderen del av denne virtuelle konvolutt som å sende HTML tilbake til. Så la oss ta en titt på dette i litt mer detalj. Dette er fra et firma som heter Ericson, fra et par år tilbake. Og de tok noen friheter med hvordan Internett faktisk fungerer, men det skaper en mye mer visuelt bilde enn bare kritt opp her. Så jeg gir deg "A Bit av Internett." 

[NEF] For første gang i historien, mennesker og maskiner jobber sammen, å realisere en drøm. En samlende kraft som kjenner ingen geografiske grenser. Uten hensyn til rase, tro eller farge. En ny æra der kommunikasjon virkelig bringer folk sammen. Dette er Dawn of the Net. Vil du vite hvordan det fungerer? Klikk her for å begynne din reise inn i nettet. Nå skjedde nøyaktig hva når du klikket på denne linken? Du startet en strøm av informasjon. Denne informasjonen reiser ned til din egen personlige postrommet hvor Mr. IP-pakker det, merker det, og sender det på sin måte. Hver pakke er begrenset i sin størrelse. E-posten Rommet skal bestemme hvordan å dele informasjon og hvordan å pakke den. Nå må pakke en etikett som inneholder viktig informasjon som avsenderadresse, mottakerens adresse, og den type pakke det er. Fordi denne spesielle pakken kommer ut på Internett, det blir også en adresse til proxy-serveren, som har en spesiell funksjon, som vi skal se senere. Pakken er nå lansert på det lokale nettverket, eller LAN. Dette nettverket brukes til å koble alle de lokale datamaskiner ' rutere, skrivere, etcetera, for informasjonsutveksling innen de fysiske veggene av bygningen. Den LAN er en ganske ukontrollert sted, og, dessverre, ulykker kan skje. Motorveien av LAN er fullpakket med alle typer informasjon. Dette er IP-pakker, Novell pakker, AppleTalk pakker. De kommer mot trafikk, som vanlig. Den lokale ruteren leser adressen, og om nødvendig, løfter pakkene videre til et annet nettverk. Ah, ruteren. Et symbol på kontroll i en tilsynelatende uorganisert verden. [Router mumler og snakker med seg selv] 

[Forteller] Der er han, systematisk, uncaring, metodisk, konservativ, og noen ganger ikke helt opp til hastighet. Men minst han er nøyaktig, for det meste. Som pakkene forlate ruteren, gjør de seg inn i bedriftens Internett og leder for ruteren bryteren. Litt mer effektiv enn ruteren, spiller ruteren bryteren raskt og løs med IP-pakker, deftly ruting dem på veien. Et digitalt 'Pinball Wizard ", hvis du vil. [Router bryter snakke til seg selv] [Forteller] Som pakker ankommer sin destinasjon, de er plukket opp av nettverksgrensesnittet, klar til å sendes til neste nivå. I dette tilfellet, proxy. Fullmakten blir brukt av mange selskaper som slags en middelaldrende mann for å minske belastningen på Internett-forbindelsen og sikkerhetsmessige grunner, så vel. Som du kan se, pakkene er alle forskjellige størrelser avhengig innholdet. Proxy åpner pakken og ser for web-adresse eller URL. Avhengig av om adressen er akseptabel, pakken sendes videre til Internett. Det er imidlertid noen adresser som ikke oppfyller med godkjenning av fullmakten. Det vil si, corporate eller ledelse retningslinjer. Disse er summarisk behandlet. Vi vil ikke ha noe av det. For de som gjør det, er det på veien igjen. 

Neste opp, brannmur. Bedriftens brannmur tjener to formål. Det hindrer noen ganske ekle ting fra Internett fra å komme inn til intranett, og det kan også hindre sensitiv informasjon blir sendt ut på Internett. Gang gjennom brannmuren, plukker en ruter opp pakken og plasserer det på en mye smalere vei, eller båndbredden, som vi sier. Selvfølgelig, er veien ikke bred nok til å ta dem alle. Nå lurer du kanskje på hva som skjer med alle disse pakkene som ikke gjør det underveis. Vel, når Mr. IP ikke mottar en bekreftelse at en pakke er mottatt i rett tid, han sender ganske enkelt en erstatning pakke. Vi er nå klare til å gå inn i verden av Internett. En spiderweb sammenhengende nettverk som spenner hele kloden. Her rutere og svitsjer etablere forbindelser mellom nettverkene. Nå er Net en helt annet miljø enn du finner innenfor de beskyttende veggene i lokalnettet. Her ute, er det Wild West. God plass, masse muligheter, nok av ting å utforske og steder å gå. Takket være svært lite kontroll og regulering, nye ideer finner grobunn for å skyve konvolutten av sine muligheter. Men på grunn av denne friheten, visse farer også ligge på lur. Du vil aldri vite når du møter den fryktede ping of death, en spesiell versjon av en normal anmodning ping, som noen idiot trodde opp å rote opp intetanende verter. Banen våre pakker tar kan være via satellitt, telefonlinjer, trådløst eller med transoceanic kabel. De ikke alltid tar de raskeste eller korteste rute mulig, men de vil få det til slutt. Kanskje det er derfor det er noen ganger kalt "The World Wide Wait". Men når alt fungerer, Du kan omgå verden fem ganger ved slipp av en lue, bokstavelig talt. Og alt for prisen av en lokal samtale eller mindre. Nær slutten av vår destinasjon, vil vi finne en annen brannmur. 

Avhengig ditt perspektiv som en datapakke, brannmuren kan være en bastion for sikkerhet eller en fryktet motstander. Det hele avhenger av hvilken side du er på og hva dine intensjoner er. Brannmuren er utviklet for å slippe inn bare de pakkene som oppfyller kriteriene. Denne brannmuren opererer på port 80 og 25 år. Alle forsøk på å taste gjennom andre porter er stengt for virksomheten. Port 25 brukes for Mail pakker, mens port 80 er inngangen for pakker fra Internett til webserveren. Innsiden av brannmuren, pakker vist mer grundig. Noen pakker gjør det enkelt gjennom tollen, mens andre ser bare litt tvilsom. Nå er brannmuren offiser ikke lettlurte, for eksempel når denne ping of death pakke prøver å skjule seg selv som en normal ping-pakke. [Firewall offiser snakke med pakker] [Forteller] For disse pakkene heldige nok til å gjøre det så langt, reisen er nesten over. Det er bare en linje opp på grensesnittet for å bli tatt opp i webserveren. I dag kan en web server kjøre på mange ting, fra en stormaskin til en web cam til datamaskinen på pulten din. Hvorfor ikke kjøleskapet? Med korrekt oppsett, kan du finne ut om du har makings for Chicken Cacciatore, eller hvis du har å gå og shoppe. Husk, dette er starten på nettet. Nesten alt er mulig. En etter en blir de pakker mottatt, åpnet, og pakket. Den informasjonen de inneholder, det vil si din forespørsel om informasjon, sendes videre til webserveren programmet. Pakken selv er resirkulert, klar til å bli brukt igjen, og fylt med nødvendig informasjon, adressert og sendt ut på vei tilbake til deg. Tilbake forbi brannmuren, rutere, og videre gjennom til Internett. Tilbake gjennom bedriftens brannmur og på grensesnittet, klar til å levere nettleseren med den informasjonen du har bedt om. Det vil si, denne filmen. Fornøyd med sin innsats, og å stole på bedre verden, våre trofaste datapakker ri blissfully inn i solnedgangen på en annen dag, vet fullt de har tjent sine mestere godt. Nå er ikke det en lykkelig slutt? [Malan] Ok, det er nok. Vi får se deg neste uke. [CS50.TV]