[Powered by Google Translate] [Vecka 7, Fortsättning] [David J. Malan, Harvard University] [Detta är CS50.] [CS50.TV] Okej. Välkommen tillbaka. Detta är CS50, och detta är slutet på vecka 7. Så en av dessa dumma små saker som går runt på Internet och vi sörplade upp, och det bör nu göra lite nördiga meningsfullt för dig. Tja, det var roligare att den här killen än det var till er. På tal om, ja, killar, idag är Nates födelsedag. För att ge dig en känsla av hur bra Nate och jag är på webbutveckling baserad på måndagens klass och bygger nu på detta, Jag trodde att jag skulle dra upp Nate hemsida, om du inte har sett den ännu. Detta här IA Nates HTML. Så se hans källkod om du vill se hur man gör detta, och Nate, om vi kunde embarass du bara kort, fick personalen en liten sak Om du vill dela vissa dessert med några av barnen i klassen här. Om du vill komma ner. Ni applåderar alla och är mycket trevligt, men ingen sitter någonstans nära Nate, av någon anledning, i denna bakre zon. Så kanske du kan hitta några människor att njuta av dessa med. Grattis på födelsedagen, Nate. 

Ytterligare hellos: Vi visade ett par klipp från våra CS50x studenter. Om du vill se vilka andra är det i världen som är följer med, kan du bege dig till den här webbadressen, där Josef, en av våra TF, har satt ihop ett montage slags av alla som har att lämna dessa videor, bland dem Rick Astley. Och om du bläddrar igenom dessa, det är egentligen ganska inspirerande se mångfalden av länder och städer som människor tillkalla. Så om du vill ta en titt på det, kommer det att vara upp till slutet av terminen. Idag fortsätter vi vår blick på webben, webbprogrammering, HTML och liknande, och vi har också lunch kommer upp på fredag om du vill, och i synnerhet, inte har gjort det tidigare. Denna fredag ​​tema kommer att vara Nates födelsedag, så om du vill ha födelsedag lunch med Nate och andra, några av våra vänner från industrin, vänligen gå till denna URL där. Utrymme, som alltid, är begränsad. Även om du har glömt, inser att nästa vecka är sista datum för problemet som 4: s tipspromenad, varigenom efter att återhämta sig alla dessa JPEG-bilder från card.raw, du och dina kompisar avsnittet om du vill, kan försöka fotografera eftersom många av de datavetare från den minneskort som möjligt, och du och din avdelning kommer då att vinna en fantastisk pris. Pendling till pset 4 specifikation om vad att lämna och när. Dessutom, om du vill ha din hantverk förevigad på kursens hemsida och dess historia av kläder, vet att du är välkommen nu för att börja skicka mönster för årets T-shirts och sweatshirts och liknande. Vi ska göra vårt bästa för att ta så många som vi kan, men vi har några medlemmar av personalen granska alla de mönster att se till att de är förenliga med specifikationerna, och vi väljer då i allmänhet en handfull av dem att ställas ut. Så om du är konstruktionstypen, vet bara att kraven för grafik är PNG, minst 200 dpi, de bör inte vara mer än 4000 x 4000 pixlar, och inte mer än 10 MB, men du är välkommen att använda saker som Photoshop eller GIMP eller olika grafiska s program, vad du har till ditt förfogande. 

Också på horisonten är det slutliga projektet. Den slutliga projektet är verkligen höjdpunkten i 50, varigenom samtliga uppdrag i kursen, Det är din chans att verkligen göra din egen grej. Och det kan vara att helt enkelt göra något för skojs skull, det kan vara att lösa några akuta problem din student grupp har, för några nya hemsida, några nya kollektion mekanism för data. Det kan vara en mobil applikation för Android, för iOS. Verkligen, himlen är gränsen och under de närmaste veckorna, som vi övergången från C till dessa högre nivå språk som PHP och Javascript, hittar du dig själv mer förtrogen med några verkliga tekniker, Vissa verkliga verktyg, och komplettera det, vet att kursen har en historia av seminarier, varigenom under de kommande veckorna, några av lärarna och vänner vårt från på campus kommer att erbjuda valfria seminarier som går utöver vad som normalt görs i avsnitt att introducera dig till saker som Android-programmering, att introducera dig till saker som iOS programmering eller mer avancerade webb-utveckling tekniker. Det finns en hel historia av dessa redan på nätet. Om du går till cs50.net/seminars har vi gjort detta under ganska några år, och du kommer se att arkiveras här med PDF-filer och videoklipp och liknande finns flera dussin videor av seminarier. Förra året till exempel, hade vi ett seminarium om acing dina tekniska intervjuer, om du faktiskt vill gå ut och göra praktik eller heltid spelning. Windows Mobile utveckling, Android utveckling, Google Maps, API, CSS, utveckling för BlackBerry, Emacs. Verkligen, är du välkommen att ta en titt på någon av dessa seminarier på din bekvämlighet. Och vi kommer att hålla några nya denna termin, liksom. 

Så vad är vidare med den slutliga projektet? Jo, först, även om detta datum är något överhängande, Detta är egentligen bara en möjlighet att börja tänka på det slutgiltiga projektet helt realistiskt. Vi vet bara början på en del av vad vi kommer fortfarande att täcka i kursen, HTML, PHP och liknande, men du är alla bekanta med webben, och jag fördomar denna konversation mot webben bara för de flesta människor sluta göra webbaserade slutliga projekt, men det är ingalunda erforderlig. Använda C är bra, mål C, Java, något annat språk du kanske vet eller vill veta är ganska bra. Men för att få safter flödar initialt kommer vi förvänta inlämnandet av en preproposal som per PDF på hemsidan, som nu på cs50.net, och längst upp till vänster ser du lärdomsprov är specifikationen för den slutliga projektet, och det finns uppgifter om preproposal och liknande. Det ganska mycket handlar om att e-post till din undervisning karl bara för att slå upp en konversation med honom eller henne om vad du tänker. På projects.cs50.net är ett förråd av idéer från folk på campus Om du kämpar för att komma med en idé, och manual.cs50.net/APIs är ett förråd av länkar till API: er. 

Men vad är ett API? Vad är ett API? Jag har sagt det åtminstone två gånger, enligt transkript av de senaste veckorna. Vad är det? [Student, obegripligt] >> Okej, bra. Så något programmeringsgränssnitt. Application programming interface, vilket kan ta flera former, men vad detta egentligen handlar om är kod att någon annan hs skriftliga eller data som någon annan har samlats som görs tillgänglig för dig på något programmatiskt sätt. Du kan skriva kod i C, PHP, Python, Ruby, oavsett ditt språk val är typiskt, och du kan på något sätt bygga på någon annans funktionalitet eller någon annans datamängd. Till exempel, om jag går till den här länken här, och du kommer att se ett par länkar på den efterföljande sidan där vi har CS50 egen API, som är mycket Harvard-centrerad, och sedan tredje part API: er. Bland de tredje part API är verkligen användbara saker som att kunna skicka SMS till människor, kunna ta emot SMS från människor. Och saker som du kanske inte har någon aning om hur man ska genomföra själv, men tack vare tjänster, några gratis och några kommersiella, du kan bygga ovanpå dem och göra något av intresse för dig. Bland CS50: s API är dessa campus-centrerad saker som Harvard kurser, energi, evenemang, mat, kartor, nyheter, tweets och Shuttleboy egen, och dessa är API: er som ser lite ut så här. 

Låt mig dra upp HarvardFood API. Om du någonsin har varit i HUD webbplats har du varit förmodligen där att bara se vad som finns för middag eller för att se vad de timmar är för några d-hallen. Tja, det är inte särskilt lätt att navigera, och så vad vi gjorde för en tid sedan var vi skrev programvara, det råkar vara i PHP, som faktiskt skärmen skrapar hela HUD webbplats. Att sålla skrapa något innebär att skriva ett program i ett språk som PHP som låtsas vara en webbläsare, även om du kan köra det i en kommandotolk, som låtsas vara en webbläsare, ansluter till en webbplats, hämtar sin HTML, det språk på vilket den är skriven, och sedan läser det, eller mer specifikt, tolkar det uppifrån och ned, vänster till höger. Och vad vi gjorde var att vi skrev vår kod så att helst vi såg något i den HTML som såg ut som något på menyn, som hamburgare, skulle vi importerar så att i vår egen databas. Och varje gång vi såg näringsinnehåll, skulle vi importera i vår egen databas. Och vad vi gjorde var utnyttja det faktum att HUD: s hemsida, även om det kan vara lite av en utmaning för oss människor att navigera under huven, är alla HTML som genereras av egna datorprogram. Så alla deras HTML, även om det kan se rörigt, Liksom de flesta webbplatser under huven följer ett mönster. Så vi tillbringade bara ett par timmar att räkna ut detta mönster så att i slutändan kastar vi bort alla rörigt HTML, alla estetik fet inför och kursiv och liknande, och vad vi kan då göra är exponera samma data. Till exempel, på detta sätt. Så vi, enligt dokumentationen här, har meddelat världen att om du begär en URL som ser ut så här, food.cs50.net / något, och du ger vissa parametrar, som vi pratar om i dag, Liksom slutdatum tid, startdatum tid, måltid och så vidare, vad våra servrar kommer att återvända till dig, till exempel, är en CSV-fil, komma separted värden som en Excel-fil, innehåller allt för frukost på detta datum i mars förra året när jag råkade skriva upp denna dokumentation. 

För dem som är bekanta, är CSV inte den enda filformat. Det finns ett annat format som är allt mer mångsidig heter JSON, JavaScript Object Notation. Uppgifterna kan komma tillbaka i det formatet. Så takeaway här är att om du dyker in detta API eller någon annan av CS50: s eller något där ute på Internet, eller inte alls, inse att världen alltmer börjat standardisera hur maskiner KOMMUNICERA. Vi använder standardiserade dataformat som CSV eller JSON. Och vad detta betyder för dig är att du kan skriva intressanta delen av ett program som låter ditt användarnamn söka en matsal meny, som låter dem skapa listor över favoriter som låter dem få textvarningar när deras favorit måltid är på väg att serveras i vissa d-hallen genom att använda någon annans dataset och bygga på toppen av sin API: er. Så mer om detta i form av seminarier och dokumentation som du har här på nätet. Så de är alltså API: er. 

Det för oss tillbaka till HTML. Snabb återblick. Vad är HTML? [Student, obegripligt] >> Bra. HyperText Markup Language. Någon annan, vad är Hypertext Markup Language? HyperText Markup Language. Okej. Så HTML, HyperText. HyperText hänvisar bara till webben, för det mesta. Uppmärkning innebär att det är faktiskt inte ett programmeringsspråk, HTML. Det är inte ett språk som du kan uttrycka logik i. Det har inte slingor. Det har inte villkor. Det har inte funktioner, per se. Snarare har det dessa saker som kallas taggar eller mer korrekt, element. Och dessa delar har start-taggar och taggar slut, eller öppna taggar och stängda taggar och vad dessa taggar innebär generellt för en webbläsare är, börja göra något och sedan sluta göra något, men det finns undantag från denna. Ibland är det bara "sätta en radbrytning här" till exempel. Och vi såg exempel på att den andra dagen, mellan fet inför, radbrytningar och sedan ett par andra taggar. Så HTML är det språk som webbsidor skrivs. Så om jag går till något som Google.com och dra upp bara deras hemsida, ihåg att om du högerklicka eller kontrollera klicka och titta på Visa sida källan, vanligtvis Det är en fullständig röra dessa dagar under huven, men det beror på datorer bryr sig inte om blanktecken, så detta behöver inte se söt. Men om vi zooma in på delar av den, märker att Chrome, bara för att vara snäll, har färgkodade saker. I själva verket är detta den allra första tagg som vi såg på en webbsida. Och återigen, HTML 5, den senaste versionen av detta språk, har det här i början, <! DOCTYPE html, oavsett gemener eller versaler, men det är bara en slags standard som säger hej världen, här kommer en HTML-fil i version 5. 

Den intressanta delen börjar här. Så <html, och sedan var det två barn av HTML-element förra gången. Vilka var de två viktigaste barn? Huvud och kropp, precis som killen med tatuering för en stund sedan. Det finns två delar av webbsidan, huvud och kropp, och återkallande då att kanske det enklaste webbsida vi kunde göra ser ut så här. Och jag har indragna det bara att vara typ av snyggt och prydligt med min kod, men vad som verkligen är viktigt här är att det finns en viss hierarki till detta. Och varje tagg som jag har öppnat jag har stängt och att det är därför denna symmetri till alla markeringar som jag har skapat. Så förra gången vi började skriva webbsidor på min egen laptop. Jag öppnade textredigering, räddade jag filen som hello.html, Jag släpade sedan filen på min webbläsare, och voila, jag hade en sida på Internet. Nu är det inte riktigt är fallet, jag hade en sida på min hårddisk, och jag var bokstavligen den enda personen i världen som skulle se till att webbsidan i en webbläsare. 

Så idag presenterar vi en verklig webbserver och begreppet tjäna faktiskt innehåll på Internet och hur allt detta börjar passa ihop. Så det visar sig att hela den här tiden på CS50 apparaten du har haft en webbserver på din dator. Vi har, i rättvisans namn, bara använt det för gedit för klang, för GDB och liknande, men också installeras av oss till dig i apparaten är en webbserver, och att webbservern råkar vara fri, öppen källkod, en av de mest populära i världen, som kallas Apache. Dess mer tekniska namn är httpd, d vara för demonen här, som är en teknisk ord för en server. Så installeras i CS50 maskinen är en webbserver, och vad betyder det? Tja, är en webbserver, begreppsmässigt, vissa server på Internet som serverar webbinnehåll. När bad om en fil, spottar ut HTML som komponerar filen, och voila. Du ser lite webbplatsens startsida. Men en server är, närmare bestämt, en programvara. Det behöver inte vara på en fysisk maskin, har det bara vara en bit av programvara som körs. Så CS50 apparaten är naturligtvis en mjukvara även om det är typ av att låtsas vara en maskin. Det låtsas vara en dator inuti en dator, men det betyder bara att apparaten verkligen kan köra saker som webbservrar. Det kan faktiskt köra e-postservrar. Vi kunde köra en chattserver i apparaten om vi ville, och faktiskt, vi kör en annan typ av server, kallad databas Server, MySQL. Men mer om det nästa vecka. Det innebär att jag faktiskt kan besöka webbsidor insidan av min apparat med hjälp av en webbläsare inuti apparaten eller ens på min egen laptop, min Mac eller min dator. Så vad betyder det? Det visar sig att varje gång du kör en Linux-dator, dess smeknamn är "lokal värd." Det har inte ett domännamn eftersom vi inte har köpt ett domännamn för ungefär apparaten, så att dess Standardnamnet är lokal värd. 

Men för att få apparaten att börja tjäna upp webbsidor, Vi måste skapa dem först. Så låt oss göra det. Låt mig gå in ett terminalfönster här och märker att jag är på min typiska John Harvard prompten. Låt mig gå vidare och skriva ls, och vi kommer att se några bekanta saker från den här terminen, skrivbord, nedladdningar, Dropbox och så vidare, men nu börjar vi vänder vår uppmärksamhet mot ett par. På många Linux webbservrar finns denna mapp som heter offentliga html, men vi kommer att hoppa över att en för nu och fokusera på detta, vhosts. Någon som vet vad en vhost är? Bara dumma jargong för virtuell värd, och vad detta betyder är att på en typisk server Du kan faktiskt vara värd för flera webbplatser. Du kan köpa ett domännamn som foo.com, och du kan lägga upp den på en server. Men du kan också köpa bar.com och lägga upp den på samma server. Orsaken är, webbläsare är smart nog att informera servern när en användare begär någon webbsida, vilken domännamn användaren vill hemsidan för. Så vad är trevligt om detta är att du inte behöver en fysisk server eller en CS50 apparat för varje webbplats du kanske vill skapa. Du kan använda samma server och utveckla en hundra olika webbplatser. Och faktiskt, om du är en person som försöker starta en hemsida, oavsett för skojs skull eller för företag, oftast kommer du gå ut på Internet, och du betalar någon tio dollar i månaden, en hundra dollar i månaden att vara värd din webbplats för dig. Och det sätt som fungerar är de avgifter andra människor tio dollar per månad eller hundra spänn i månaden värd andras webbplatser på deras samma server. Anledningen till att de kan göra det är på grund av denna funktion som kallas bhosts, men mer om det när det blir dags för slutlig projekt. 

För nu, låt oss bara dyka där. Så cd vhosts, och om jag skriver ls nu, märker att det finns en mapp där som heter lokal värd. Det beror som standard apparatens siffror du någonsin kommer att köra en webbplats på en apparat. Detta är egentligen inte den verkliga världen, det är inte en verklig webbserver. Så låt mig gå in lokal värd, och nu får vi se där en sista katalog som heter HTML. Så det är lite djup, hierarkin, men om och när du väljer att börja utveckla flera webbplatser under de kommande n månader eller år, denna typ av mappstruktur tenderar att vara till hjälp. Nu ska vi gå in HTML som jag just gjorde, typ LS, och ingenting är där. Så låt oss nu gå vidare och göra det. Låt mig öppna Chrome inuti apparaten och låt mig gå http://localhost. Så bokstavligen namnet på min apparat, skriv, och jag får index /. Detta är egentligen inte visa mig något av intresse, men det visar sig att det vi ser är att mappen HTML. Det finns inget inuti den mappen just nu, så istället, vad jag kommer att behöva göra är först skapa en fil. Skapa en HTML-fil som vi gjorde i måndags, men den här gången uttryckte det inuti apparaten. För er som försöker följa med bärbara datorer nu, Låt mig göra en åt sidan som kommer att täckas i den webbaserade pset, men för att få detta att fungera för allra första gången, du kommer att behöva köra detta kommando: sudo tjänst httpd start. Och detta, återigen, kommer upprepas i sista pset, men om du spelar tillsammans hemma nu, webbservern är avstängd i apparaten, och det är så att det inte SAP upp RAM och minne för 7 veckor av terminen när vi inte behöver det. Så du måste köra det här kommandot en gång, och du får en utgång på det sättet. Då ska du kunna spela med här. Nu låt oss gå tillbaka till den här mappen. Denna mapp är tom, så låt mig börja skapa en fil, gedit hello.html. 

Okej. Gedit är öppen, som vanligt. Låt mig göra DOCTYPE, html, html, låt mig få inför mig själv och börja stänga mina taggar i förväg. Nu har jag huvudet. Låt mig gå vidare och stänga huvudet, Låt mig nu göra titeln på sidan, hallå världen som förra gången, nära titel, låt mig göra en kropp. Här inne ska jag säga hej, världen med några exclams att klargöra att det är en annan sträng. Stäng kropp, och nu vill jag gå vidare och lämna spara. Låt mig gå tillbaka till min terminalfönster, och om jag skriver ls, Jag borde förmodligen se hello.html. Och jag gör det. Så låt oss nu gå tillbaka till min webbläsare, klicka ladda om, och du kan se att vi verkligen insidan av denna HTML-mapp. Jag ser en webbsida ännu, det är Apache, webbserver, bara visar mig på listan innehållet i den här katalogen. Precis som Mac OS eller Windows normalt skulle göra på din egen lokala hårddisk. Så om jag vill se den här webbsidan kan jag klicka på den här lilla länken här, hello.html, och faktiskt, det är vad jag hade förväntat mig att se. Nu, igen, detta är inte en URL som någon av er kan besöka just nu, eftersom det för dig, lokal värd, om du har en bärbar dator här, Det syftar på din egen instans av apparaten. Detta är på min egen personliga apparat, men detta är typ av dumt för mig att ha, ha en användare som jag själv klickar på hello.html att faktiskt se innehållet på denna sida. Det visar sig att webbservrar som Apache låta dig få en standard fil för varje webbserver. Observera Här har vi hello.html. Vad är kommandot i Linux för att byta namn på en fil? 

MV, för drag. Så låt mig göra det, och låt mig döpa hello.html till index.html. Låt mig skriva ls för att bekräfta det nu har blivit namn. Nu kommer att - om jag går tillbaka till lokala värden, märker nu att jag automatiskt är ser att webbsidan. Detta är identiskt med min faktiskt gör / index.html, men det fina är nu att webbservern är att räkna, åh, om du har en fil som, av mänskliga konventioner, kallas index.html, låt mig visa användaren att filen som standard snarare än några dumma kataloglistning som inte alls användarvänligt. I själva verket har de flesta webbplatser du besöker på Internet inte en lista över filer att klicka på, de visar bara du innehållet. Så det är hur vi kan göra det, index.html. Så detta är alla roliga och bra, men det är en ganska enkel webbsida. Låt mig gå vidare och öppna upp index.html i mina vhosts, lokala värdar, html katalog, och låt oss lägga till något av större intresse. Så det finns hej världen, låt oss i stället säga "Det här är CS50, Harvard College. . . " Så i början av kurskatalogen beskrivning av något slag där. Nu om jag laddar, skulle jag se detta i min hemsida. Okej, jag ser det, men antar att jag vill nu lista några mer innehåll i denna fil. Jag skulle kunna gå ner här och säga, förutsättningar ingen, även om vissa av er förmodligen vill, "Ha ha ha, inga förutsättningar." Men - officiellt. Så ladda, och nu har vi samma hyss som vi såg förra gången. Men varför är det? Det var en enkel fix. Varför är denna sida bruten? [Student, obegripligt] >> Ja, vi har löst detta innan genom att uttryckligen berätta webbläsaren sätta en radbrytning här. Och det beror återigen är en webbläsare kommer bara att göra uttryckligen vad märkspråk säger den att göra, så även om du kanske har tryck enter en eller två gånger eller till och med tio gånger, det kommer att kombinera att allt i en enda plats, bara genom konventionen. Så om du verkligen vill ha en radbrytning, måste du använda br-taggen, och nu varsel som måndag, lade jag / inuti denna tagg, bara för att det bara inte känns rätt att starta en radbrytning sedan stoppa den med ingenting mellan. 

Så konventionen i HTML är att öppna och stänga en tagg samtidigt. Som en sidoreplik ser du en hel del webbplatser i böcker inte göra det. Det är korrekt att göra eller att inte göra det, men vi menar att design-wise och stilistiskt är det bara bättre för då varje tagg är både öppnas och stängs på något sätt. Så nu ska vi spara och ladda om. Gå tillbaka till webbläsaren, okej. Nu gör vi vissa framsteg, men det är inte riktigt tillräckligt. Låt oss gå vidare och börja skriva i några längre textmassa. Så låt oss säga, "En snabb brun räv hoppar över en lat hund." Och nu vill jag bara kopiera och klistra in detta några gånger så att vi har ett textstycke. Låt mig gå tillbaka hit. Så det är inte ser mycket bra ut. Jag har en radbrytning, så det är okej, men nu, när vi komma till den punkt att ha en webbsida som har massor av innehåll och inte bara enstaka linjer att visa HTML, Vi kan börja tänka på dessa saker som faktiska stycken. Och vi kan börja strukturera vår hemsida lite mer rent. Och faktiskt, vad jag kan göra är att gå upp här inne i min kropp tag, och du vet vad, om "Det här är CS50. . . " verkligen demarks början av ett stycke, Nåväl, låt oss märka den som sådan. Låt mig strecksatsen texten, bara genom konvention, låt mig säga att denna punkt slutar här, och sedan i stället gör detta radbrytning, låt mig bara säga att detta hör hemma där och som en ny punkt, och jag ska bara snabbt strecksatsen genom att bara dunkardags allt det här. 

Så nu har vi ett indraget stycke där, och nu vår kod börjar få lite mer semantiskt linje med vad vi försöker göra. Vi har ett stycke, så låt oss kalla det ett stycke med p-taggen. Vi har en andra stycket, så låt oss kalla det ett stycke med p-taggen. Och nu, vad webbläsaren typiskt att göra är precis som i en engelsk bok eller uppsats, där du ser vanligtvis några radbrytningar mellan stycken. Webbläsare kommer att göra det åt dig automatiskt. Så nu har vi två stycken och vi kan fortsätta. Men, naturligtvis, på webben, när du har kroppar av text Det är inte normalt bara stora BLOB text. Det finns ofta hyperlänkar i det. Så om vi vill, till exempel omfatta några länkar där, anta vad som kan vara av intresse i vad webbsida jag skapar här är - Låt mig gå till Google.com, och låt mig söka efter en snabb brun räv. Gå till Google bilder och, vad sägs om - det är gulligt. Vi ska gå med detta. Så här har vi en snabb brun räv hoppar över en lat hund. Så vad jag ska göra här, bara för sakens skull demonstration, är anta att denna bild var på min server, och jag hade skapat dessa bilder. Vad jag gjorde var högerklicka eller kontrollera klicka på bilden, och vad du ser i de flesta webbläsare är lite meny - sluta med det - en liten meny som låter dig välja Kopiera länkadress eller Kopiera URL. Så låt mig gå tillbaka nu till min HTML och antar att jag vill ha till hyperlänk detta till en annan webbsida. 

Vad var märket heter för det? [Student, obegripligt] >> Ja. Så en href för Hyper referens. Låt mig gå vidare och klistra det i. Det är en ganska lång webbadress, så låt mig zooma ut. Stäng fästen, så nu märker jag vägen hit eftersom denna URL råkade vara ganska lång. Låt mig rulla hit till slutet av snabba bruna räven, och sedan låta mig avsluta denna tagg med </ a, där jag bara stängt namnet på etiketten. Låt mig gå vidare och spara filen, ladda om webbsidan, och nu, som standard, det är kommer att understrukna med blått för mig, men i själva verket kan jag klicka nu på detta och voila. Det finns den bilden. Och det behövde inte vara en bild, det kunde ha kopplat till någon annan slumpmässig hemsida på Internet. Jag kunde göra detta, till exempel med CS50, så en sista exempel här. "Detta är CS50" kan vara meningsfullt att gå en, href = http://www.cs50.net, nära citat, nära ankare. Så nu det är en ännu kortare URL och denna gång vi kommer inte att länka till en bild. Vi istället kommer att länka till en annan sida. Nu har vi en bild här. Det känns som att vi kan göra lite bättre än att bara länka till en bild. Tänk om vi vill faktiskt förkroppsligar det i vår egen webbsida? 

Tja, vad jag kan göra här är, snarare än länkar till den här bilden, Låt mig i stället klippa URL, och vi ska bli av med den hyperlänk och städa upp det här. Och vi kommer att gå ner här och bli av med denna. Vi behöver verkligen alla dessa meningar nu, så låt mig förkorta sidan lite. Och sedan ner hit låt mig gå vidare i ett nytt stycke, säga att jag inte vill att texten nu, jag vill ha en bild vars källa kommer att vara den webbadressen. En bild, som en radbrytning, är antingen det eller är det inte. Så låt mig omedelbart stänga den taggen. Låt mig gå vidare nu och stäng det stycke som jag är inne, och om allt går bra med hej, värld, om jag ladda nu, Jag faktiskt se rakt i min egen hemsida en bild. Så nu har vi en bild tagg, ett ankare tag och liknande, och för bra åtgärd, låt mig göra en annan sak som ofta försummas på webbplatser dessa dagar: Låt oss ge några beskrivande text för denna bild för människor som är på en mobil enhet och därför inte skulle kunna ladda ner denna bild mycket snabbt, för människor som är blinda och kanske inte kan se bilden men de kan ha en skärmläsare som kan berätta för dem vad den här bilden är. Och att göra det, det finns en annan egenskap för bild-taggar kallas alt, för alternativ text. Och vad jag kan göra här är att säga, "Detta är en sammanfattning av brun räv." Så att även om det mänskliga inte kan se bilden på skärmen, han eller hon kan åtminstone höra, som med viss mjukvara, vad som faktiskt finns på skärmen. 

Det kommer inte att förändra estetik sidan, men det är verkligen god praxis för användarna. Okej, låt oss lämna denna webbsida i dess nuvarande form, men låt oss se om vi inte kan nu presentera några bättre metoder för att skriva dessa webbsidor, några lektioner som kommer att tjäna oss och våra sidor blir mer och mer komplexa. Vad vi inte tänker göra under de närmaste veckorna är att gå igenom alla de dussintals HTML-taggar som finns. Ungefär som i början tillbaka vecka 0, det förmodligen räcker att ge en hög nivå översikt över några av de begrepp, en snabb rundtur i några av blocken du var antagligen, ganska bekvämt att navigera på egen hand, de olika pusselbitar. Och det kommer att hända igen i HTML, troligen, varigenom det finns gott om resurser på webben som vi peka dig i, olika läroböcker, om du föredrar att läsa en lärobok, som kommer att gå igenom alla de olika saker du kan göra med HTML, men egentligen har vi sett hittills i HTML flesta av de grundläggande begreppen. Vi har begreppet taggar öppnas, varvid taggarna stängda. Vissa taggar som både öppnas och stängs i den meningen att de är tomma, det bör finnas något inne i dem som en bild-tagg eller en radbrytning, som är bara där. Vi har också tittat redan vid begreppet ett attribut, som alt eller källa. Observera att dessa ord har en tendens av konvention vara kort och koncis. 

Vi har inte bestämmanderätt över vad dessa saker kallas, någon annan som uppfann HTML kom upp med dessa namn. Så du måste bara börja känna eller se upp, när du behöver dem, vilka namnen är för dessa taggar och attribut. I fallet med dessa attribut, attribut allmänhet ändra beteendet för vissa taggen. I det här fallet, säger källan attributet bildtaggen vad källan bilden ska vara. Attributet href berättar ankarkod vad det egentligen borde länka till. Men när det gäller strukturen hos en webbsida, trots Facebook och Google och liknande ser ut som en enda röra under huven vid en första anblick, om du börjar läsa igenom det mer metodiskt, följ de alla denna grundläggande, grundläggande struktur. Men vi kan förbättra stilisering av dessa saker. Så låt mig gå till några exempel som jag beredd i förväg. Låt mig gå vidare och kopiera dem från en annan mapp här och sätta dem i den här katalogen. I förväg, vad jag gjorde var förbereda några filer: search0, SEARCH1, search2 och search3 och 4. Låt mig gå vidare och öppna upp den första av dessa filer, och låt oss se om vi inte kan börja skapa vår egen sökmotor. På toppen av denna fil, som vanligtvis är fallet i klassen, bara en massa kommentarer. I HTML, men de medel som du startar en kommentar är <-! och då är du inne i en kommentar, en multi-line kommentar. När du är redo att stoppa den kommentaren, kan du göra ->. Så allt upptill i blått är bara en kommentar. 

Detta är min doctype deklaration, som återigen du kan bara kopiera och klistra in på tro, för nu. Detta talar bara webbläsaren, "Här kommer lite HTML 5." Därunder, på ledningen 14, är den första av mina faktiska taggar, och detta säger precis som tidigare, här kommer lite HTML, här kommer chefen för min sida, här kommer titeln, och sedan omvänt, det är det för titeln, det är det för huvudet. Här kommer nu huvudtexten på min webbsida. Så ett par nya taggar nu: H1 står för rubrik 1. Det finns en tradition i HTML för många år tillbaka att ha olika storlekar av text. Och tillbaka i dag, menade var och en, generellt, bara stor och fet. Men det finns också h2, som är stor men inte riktigt lika stor och fet. Det finns H3, som är typ av stora men inte alls lika stor och fet, och så vidare, hela vägen ner till h6. Dessa dagar, dock är H1, H2 och H3 verkligen betydde att ha mer semantisk innebörd för dem, varigenom h1 är verkligen en rubrik: rubriken på en webbsida, rubriken till en kolumn eller något liknande text. Så jag har medvetet sagt h1 CS50 Sök> h1 att specifiy att detta verkligen rubriken, titeln på min sida. Inte titeln i namnlisten mening, men det namn som du faktiskt ser på webbsidan själv, i kroppen. Nu kan du nog gissa vad det är, även om vi har några nya bitar av syntaxen. Detta är en form. Så webben blir riktigt intressant när webbplatser tar indata från användarna. I denna klass, i problemet ligger på webbprogrammering, Vi kommer inte att göra en hemsida, per se, med statiskt innehåll som visar fotografier som du har tagit, eller det är min CV och saker om mig, eftersom dessa saker är relativt lätt att sätta ihop. Det är svårt att göra saker vackra på webben, men åtminstone sätta upp innehåll är ganska trivialt. Men saker och ting bli riktigt intressant när någon kan besöka din webbplats och ge input och kan fylla i formulär, kan bocka av kryssrutorna och kan interagera med din webbplats. Och faktiskt, förmodligen varje webbplats du bryr dig om dessa dagar, i detalj, är något interaktivt. Facebook, Google och liknande, som tar indata och producera anpassad utsignal. 

Så låt oss börja göra det nu. Låt oss övergång nu från bara använda HTML för uppmärkning av statiskt innehåll som i stället en leverans mekanism för dynamiskt innehåll. Och mot detta syfte, låt oss genomföra vår egen sökmotor. Låt oss göra det på följande sätt. Här är formuläret taggen. Åtgärdsprogrammet attribut anger att när användaren fyller i det här formuläret med sin tangentbordet kommer det att lämnas till denna URL här. Så jag är typ av fusk. Det kommer att ta oss lite längre än en klass att genomföra hela sökmotorn, så vi ska bara göra fronten, så att säga. Vi gör den del som låter användaren söka, och vi kommer sorts Punt till Google det svåra att hitta sökresultaten, men, särskilt, jag ska prata med Googles webbserver använda en av två mycket populära metoder. En är att få en annan, att vi så småningom får se, som post, även om det finns andra som är mindre ofta används. Så får bara frammanar tanken på, jag vill få lite innehåll, få lite sökresultat. Detta kan du gissa kanske vad det gör. Detta är ett slags ingång, är det i själva verket, kommer att se ut ett textfält, och namnet på den ingången, namnet på den variabeln, så att säga, kommer att Q för frågan enligt konvention. Och återigen är den typ av denna ingång kommer inte att vara en kryssruta; det kommer inte att bli en meny, det kommer att bli ett textfält som betecknas med detta attribut här, och den här textrutan, som en radbrytning, antingen där eller inte. Så vi har ett tomt element med snedstreck inuti den taggen. Sen ska jag sätta en radbrytning och du kan kanske gissa vad detta kommer att göra. Detta är en annan typ av formulär ingång. 

Den här kommer att användas för att skicka formuläret. Så detta kommer att bli den stora knappen som användaren kan klicka på för att skicka formuläret, och etiketten på den knappen kommer att vara "CS50 Sök." Stäng formuläret, nära kroppen, nära HTML. Låt oss se vad vi har i form av den här webbsidan. Så låt mig gå i min webbläsare, Låt mig gå, fortfarande, till lokal värd. Detta är fortfarande index.html, så om jag vill se den här filen heter search0, Jag kan helt enkelt göra / search0.html anger - och den första av mina misstag. Vad händer? Jag tydligt har inte behörighet att få tillgång till den här filen av någon anledning. Men det beror på, till skillnad från det arbete vi har gjort hittills i C, där de program du skriver antas vara runable av dig, körbara av dig, det är inte riktigt fallet på webben, där ibland du kanske vill skapa filer på en server, men du vill inte att hela världen ska kunna se dem. Snarare vill du världen att se några filer men inte andra, bara för privatlivet skull. Så det är mer av en opt-in basis när du gör saker på webben. Och så låt mig faktiskt skriver ls här, och du ser de filer jag har, men minns att om jag gör ls-l för länge, Jag får en längre lista som ger mig lite mer information om dessa filer som nu, verkligen, för första gången är relevant för oss. Observera att längst till höger är namnen på mina filer, och sedan den tidpunkt då de senast ändrades eller kopieras. Detta nummer här är vad? Minns du? Storleken i byte, hur stor filen är. 

Så jag verkar ha någon form av logo i här som är större än alla de andra filerna. Det är vem jag är, det är vad jag är och vilken grupp jag är i. Men sedan, här borta till vänster är lite kryptiskt sekvens, och vi pratade, tror jag, kort om detta tidigare, men detta har att göra med behörigheter. Och även om det är lite disigt, RW betyder förmodligen läsa och skriva. Så det visar sig att dessa streck betecknar olika uppsättningar behörigheter för olika människor. Och mönstret är i huvudsak enligt följande. När du ser en sekvens av streck här, de ser som följer. Det finns ett streck, så finns det ytterligare tre streck, så finns det ytterligare tre, så det finns en annan tre. Den första är antingen ett bindestreck eller dess annons för katalogen. Så att en är ganska enkelt. Om det är en mapp, säger d, annars är det ett bindestreck. Det finns ett par andra fall, men nu ska vi bara bryr oss om filer och kataloger. Dessa tre streck - och jag har artificiellt insatt utrymmen. De var naturligtvis inte det när vi såg dem för en stund sedan. Dessa är filen ägarens tillstånd, och hämta från en andra sedan att det var läsa & skriva. Det var för att jag, som den person som skapade den här filen en stund sedan, Jag bara som standard på en Linux-dator, har förmågan att fortsätta läsa och skriva filen. 

Så operativsystemet ger mig bara RW automatiskt. De mellersta dem avser min grupp, nämligen studenter, som är typ av meningslös på apparaten eftersom jag är den enda person som använder apparaten. Så låt mig bara vifta mina händer på det för nu. Men de sista är viktigast för webben. Detta är alla andra i världen, och det faktum att det är --- betyder att ingen annan i världen har några rättigheter till den här filen. Uppenbarligen ett problem, så jag måste fixa det här genom något som ger världen vad? Läs & skriv? Det är förmodligen dum, eller hur? Jag vill inte att någon på webben att gå att besöka min sida och på något sätt förändra den filen, även om de kunde verkligen inte med en HTML-fil, men bara i princip, förmodligen bara vill att de ska kunna läsa den. Vad innebär det att läsa den? Det betyder inte att de kommer att bry sig om den faktiska HTML, men webbläsaren måste kunna tolka det märkningsspråk, uppifrån och ned, vänster till höger. Så någon på webben måste kunna läsa den, så jag minimalt måste ge det r. Jag kan göra detta i ett par olika sätt, men kanske det enklaste är att köra det här kommandot här. Chmod, ändra läge, då en + r så alla, alla i världen + läsa, och sedan namnet på filen, search0.html. 

Nu om jag gör ls-l igen märker att filen har ändrats, och faktiskt har jag aktiverat r för alla. Jag har också aktiverat för min grupp, men det är bra, för om jag vände på för alla, är min grupp en delmängd av det. Så det är också bra. Det betyder bara att datorn nu har gjort det läsbart. Låt mig gå tillbaka till min webbläsare, klicka ladda om. Ah-ha. Vi har nu CS50 Sök. Jag har zoomat in lite artificiellt - ganska ohyggliga sökmotor. Men låt oss se om det verkligen fungerar. Låt mig först göra en snabb sanity check, låt mig kontrollera klicka och visa sidan källan. Observera att i Chrome vi nu ser samma HTML som jag själv har skapat. Bli inte förvirrad här, men. Jag kan inte börja ändra koden här, eftersom webbläsaren har en skrivskyddad vy av denna kod. Webbläsaren har just bett lokal värd för en fil som heter search0.html. Det är nu ren slump att apparaten råkar vara på samma dator som min webbläsare. Jag kunde bara motsvarande, har skrivit in www.facebook.com/search0.html, och om Facebook hade en fil som heter det, skulle jag då få se deras HTML. Och naturligtvis kan jag inte ändra filen som kommer tillbaka från Facebook heller. Så nu är vi typ av suddar ut gränserna. Apparaten är både en server, serverar webbsidor, men det är också en klient i den bemärkelsen att jag använder en webbläsare att faktiskt prata med den servern. Så låt oss se om min Googles sökmotor fungerar. Låt mig gå vidare och leta efter snabba bruna räven skriver. Och voila, har jag nu min egen sökmotor. 

Men hur fungerar det? Lite av en sträcka, men - och nu kan du inte se just den del som är av intresse. Lägg märke till vad som händer. Lägg märke till URL: en. Det visar sig att denna metod, heter får, är super-enkelt. När du anger i ett formulär som du vill "komma" resultat från några servern, vad det kommer att göra är att ta vad du skrev i formuläret och placera den i webbadressen. Det kommer att standardisera hur det blir sätts i URL som följer. Observera att detta är den webbadress som var värdet av min handling attribut. Det var där jag ville formuläret för att hamna. Men sedan märker detta frågetecken. Detta är en konvention på webben där för att ge indata till en webbplats, lägg dig URL ett frågetecken, och då har du en massa nyckelvärdepar. Namnet på en nyckel, annars känd som en parameter i webben, så har du ett likhetstecken, så har du värdet på den parametern. Så det är i huvudsak ett variabelnamn och ett variabelt värde, men de rörliga s namn och värden kom från HTML-formulär. Varför är plussidan finns, tror du? Eftersom jag inte skriver + i mellan mina ord. [Student, obegripligt] >> Ja, det är bara för avstånd. Oddsen är, när du har sett en URL, det finns aldrig några blanksteg i det, om så bara för om det fanns, du kunde inte riktigt kopiera och klistra till ett snabbmeddelande eller i ett e-postmeddelande eftersom det skulle gå sönder. Du vill att hela sak att vara en sammanhängande sträng av tecken. 

Så webbläsaren är smart nog att inse, uh-uh. Inte bara sätta ett mellanslag där. Låt mig koda utrymmet på något standardiserat sätt. En av konventioner för detta är att ha webbläsaren automatiskt sätta ett + där man annars skulle ha ett mellanslag. Så nu har varsel Google varit ganska användarvänligt. Jag verkligen inte skapa denna webbsida, men de har prepopulated egen textfält med vad, exakt, jag skrev in Anta att jag vill söka efter något annat, som en lat hund. Jag kan bara skriva det här, forskning. Observera att webbadressen växlar upp här, men märker då att jag faktiskt kan söka efter vad jag vill bara genom att förstå hur webbadresser arbete. Jag kunde göra lat katt, ange, och märker nu jag får en mycket lata - ska vi? Jag tycker vi borde. Jag får en väldigt lat katt. Okej. Detta är en av de dummaste sakerna vi gjort. Men det är en lat katt. Hur som helst, vad är nyckeln takeaway här? Nu är vi typ av att spela i en värld av HTTP. HTML är just detta märkspråk, öppna tagg, nära tag, som berättar en webbläsare hur att göra innehåll på en webbsida. Men när du börjar sända data över Internet mellan webbläsare och servern, det är där detta protokoll kallas HyperText Transfer Protocol tar över. Detta är den typ av människor konvention, när Sam och jag skakade hand på måndag, starta en anslutning och sedan stänga en anslutning samma idé här. Hur Googles resultat kommer tillbaka till mig? Hur är min formulär går till Google? Tja, hämta från häromdagen att vad som verkligen händer under huven när du begär en webbsida är, webbläsaren skickar en något-kryptiskt meddelande som GET / HTTP/1.1 för standardstartsidan. 

Eller, i det här fallet, eftersom jag begärde uttryckligen tidigare search0.html, detta sedan skulle vara något, kryptiskt meddelande att min webbläsare skickar till apparaten. Eller, i detta fall av Google, är vad som faktiskt skickas är en begäran till / sökning och sedan? q = lat katt, med ett plus där. Så detta budskap, att jag, människan, aldrig mig att skriva, men sänds av min webbläsare, detta är hur HTTP händer. Detta motsvarar att vi har skakat hand. Detta är begäran och servern är på väg att skicka ett svar. Så låt oss ta en titt på denna under huven. Liksom tidigare kan vi öppna upp denna speciella fält i en webbläsare. Visa sidan inspektera element. Så under inspektera element märker att det som hänt i Chrome, och IE och Firefox har liknande mekanismer, Vi har dessa utvecklingsverktyg tillgängliga för oss. Normala människor inte använder de här flikarna. Men vi, nu är intresserad av vad som händer under huven på nätnivå. Så om jag drar upp nätverksnivå här, Låt mig gå vidare och expandera detta fönster, öppna den här posten här och titta på rubrikerna. Så vad händer när jag begär en fil från en webbserver är min webbläsare skickar en massa saker. Och låt mig visa källa. Så under begäran rubriker, Och detta är bara Chrome visar mig några diagnostiska utgång, ungefär som en debugger av något slag, märker att det jag har markerat här är precis vad Chrome skickar till servern för att begära en fil som heter search0.html. Det är talande servern vad den tror att dess namn är, tack vare denna värd kolon fältet, så finns det en del ganska esoterisk grejer här, som något att göra med datum och tider, något att göra med de språk som webbläsaren förstår, men de verkligt viktiga linjerna dessa första två här. 

Vad svarar servern med? Tja, om vi rulla ner här och visa källan till denna sak, märker att servern har svarat med en något kryptiskt meddelande också, 304 modifierat inte. Det är lite konstigt, låt mig faktiskt försöka fixa det här. Låt mig hålla ned SKIFT och klicka ladda upp här att tvinga webbläsaren att faktiskt göra denna begäran för första gången. Låt mig zooma in, och vi ser nu att serverns svar, eftersom jag höll skift, är 200 OK. Så du har förmodligen aldrig sett numret 200 I samband med webben, men vad siffrorna har du sett ibland oväntat från en server? 404, fil hittades inte, 403, förbjudet, 500, serverfel. Så det är dessa numeriska koder som världen använder på webben att beteckna fel, precis som C-funktioner kan returnera fel och viktigaste kan återvända exit-koder. 200, men ser du sällan eftersom det innebär allt är bra. Och 304 du förmodligen aldrig se eftersom det är det betecknar? Att inget har - låt oss se om vi kan simulera det igen - Åh, nu är det inte samarbetar. 304 sa inte ändras, så varför var servern svarar med? Jo, för effektivitet, en webbserver automatiskt för dig, Om filen inte har ändrats, kommer den återutsända inte hela HTML-filen. Det kommer bara berätta webbläsaren har inte förändrats. Använd bara den kopia du redan har. Så det finns denna föreställning om cache på webben för prestanda, så att du inte slösa tid och avfall bandbredd nedladdning av filer och om igen i onödan. 

Men denna webbsida, nu var super-enkel, och det visade bara mig HTML som kom tillbaka. Låt oss faktiskt använder nätet fliken nu att göra en Google-sökning som snabba bruna räven. Låt mig klicka CS50 sök, och nu märker i botten här en hel massa saker kom tillbaka för när jag besöker en riktig webbplats som Google.com, De har bilder, de har text, de har ett språk som kallas Javascript där. Så varje rad i denna tabell här nere representerar något som Google spotta ut som svar på min enda begäran. Det enda jag bryr mig om, är dock denna första. Och om jag går till sökandet, begäran klickar du på Visa källa här, märka det, sannerligen, kryptiskt meddelande om att min webbläsare skickade till Google var dessa två rader här, följt av några svårbegripliga uppgifter här nere som vi kommer att ignorera för nu. Men varsel, även vad Chrome är ganska praktiskt med, det är också visar mig frågesträngen som skickades in Så snarare än att visa mig detta, som bokstavligen sändes, om jag visa det avkodas, Chrome, bara för felsökning, för utvecklare som oss, det visar bara mig en mänsklig version av - det är inte hur du stavar räv, tydligen. Jag bara märker detta nu - men det visar dig vad jag, tydligen, skrivit. Samtidigt är det svar som kom tillbaka från servern igen 200 OK. Men ingår i detta svar, naturligtvis, Om vi ​​ser verkligen sidans HTML - ledsen, är detta en liten tangentbordsgenväg gått snett idag. 

Jag tar hand om det här senare. Så om vi ser verkligen sidans källkod, som jag kan göra här nere genom att klicka på svar, Detta är vad som faktiskt var spotta tillbaka, förutom att kryptiska 200 OK meddelande från servern. Lite kryptisk, men var allt detta kommer från? Nåväl, låt oss göra en sak här. Annan något-kryptisk kommando, men den här är ganska snyggt eftersom det avslöjar för oss exakt vad som händer under huven. Så jag är tillbaka på min Mac här har jag kopplad via ett program som heter SSH, Secure Shell, till en annan server eftersom de flesta av Harvard datorer blockerar kommandot vi ska köra eftersom det är detta kommando på vissa servrar som kallas traceroute som tillåter dig att spåra vägen mellan punkterna A och B, och hittills har vi tagit helt för givet att jag kan skriva i Google.com och på något sätt få tillbaka data från halvvägs över landet eller halvvägs över världen. Med traceroute kan vi faktiskt dyka i lite djupare om hur Internet fungerar, och se vad som händer under huven. Så låt oss gå vidare och godtyckligt spåra en väg till, säg, Stanford.edu, som är över hela landet, och tryck enter. Detta kommando kan vara super-snabb eller super-långsam, men vad vi ser nu, rad för rad, är var och en av de steg eller hopp mellan oss och Palo Alto, eller Stanford, där de har sitt webbserver. Så vad var och en av dessa linjer representerar mer konkret, men? En bit av jargong från Internet? [Student, obegripligt] >> Vad är det? [Student, obegripligt] >> Åh, så det finns tider, men vad betyder varje rad - vad jag menar med hopp? 

Nåväl, det är dessa saker på Internet som kallas routrar. Och routrar, som namnet antyder, väg information från punkt A till punkt B. Men det finns flera punkter bortom a och b. Det finns c och d och e och f mellan rad 1, som råkar vara min dators IP-adress, eller min numerisk adress som unikt identifierar datorn, och steg 15, som faktiskt är den sjätte webbserver, tydligen, som jag dra slutsatsen av detta, eller version 6 av sin webbserver på Stanford. Men vad är ganska snyggt är, kan vi se sökvägen att min 0 s och 1 s tar från min dator till Stanford. Så steg 1 är min egen dator adress. Varje dator på Internet har en unik identifierare som ser ut så här. Number.number.number.number. Någonstans på detta campus, troligen i science center, är en router kallas Kärna Gateway 2-te83, vad det nu betyder, så detta är en av Harvards stora fina routrar som dirigerar mycket av sin trafik. Här är en annan av Harvards routrar är detta en Border Gateway, gränsen mening är det förmodligen i utkanten av campus någonstans. Sedan finns NOx ett, rad 4, som är Norra Crossroads, som är en stor leverantör, Internet Service Provider, att platser som Harvard ansluta upp till. Men sedan saker och ting blir lite intressant i linje 6. Var är mina bitar plötsligt? Kansas. Världen har en vana att använda flygplatsen koder i många av dessa saker, eller åtminstone förkortningar för stater eller städer, så det ser ut, på bara 60 ms, ett paket av information, är 0 s och 1 från min laptop fick hela vägen till Kansas, och igen, i 60 ms. 

Dessutom, efter Kansas, tog de en tur genom Houston, förmodligen, som föreslagits av namnet på denna server. Så precis som en server på Internet måste ha en numerisk adress, den kan också eventuellt ha en något mer mänsklig-vänlig adress att människor kom med. Nu i steg 8, vet vi inte vad det är. Ibland routrar bara typ av ignorera dig, och de bara inte svara på frågorna, så det är bra. Det en efter steg 8 är tydligen där? L.A. Kallelse endast 78 ms, vad tar oss människor som 6 + timmar att göra fysiskt, tar paket med information på Internet 78 ms att resa så långt. Steg 10 är i LA också, och steg 11 verkar ha gått norrut, upp nära Stanford. Detta är deras gräns router eller gränsrouter. Ett par steg vid Stanford som ignorerar oss, och slutligen når vi webbservern på bara 87 ms. Nu är alla dessa siffror, som en sidoreplik, bara berätta för dig hur lång tid det tar för data att komma från mig till var och en av dessa routrar, och det är inte ackumulerbara. Vad detta program gör är skickar den först ett meddelande, i huvudsak, den första routern. Sedan en till den andra routern och sedan en till den tredje routern, mätning varje gång. Så i teorin, kommer dessa tider att växa eller åtminstone ganska nära varandra, och faktiskt de som är här på campus är super-small. Så snart du börjar gå över hela landet, det tar uppgifter lite längre tid att resa, närmare 100 ms, ge eller ta. Men låt oss gå åt andra hållet nu. Vad sägs om Cambridge University i Storbritannien? Låt mig istället köra traceroute för www.cam för Cambridge, . Ac för akademiska,. Storbritannien, och tryck enter här. Det var jäkligt snabb. Mina uppgifter gick bokstavligen till Cambridge, England, i den bråkdels sekund av tiden. 

Så låt oss se den väg som det tog. Harvard, Harvard, Harvard, Norra Crossroads, som är en ISP och då är norra Crossroads, och sedan pang. Vad finns i mellan stegen 6 och 7, router 6 och 7? Atlanten. Och vi dra slutsatsen detta från det faktum att Vi går från 20 ms här 80 ms här. Så något tog 60 ms, ge eller ta, för att komma över. Och det var nog en stor mängd vatten. Vad händer efter det? Tja, här är vi i London, bara 88 ms senare. More London, mer London, inte säker på var det är, men vi antar att det är utanför London, Cambridge här, och slutligen vi - bokstavligen, University of Cambridge . Something.net, och sedan slutligen i linje 16, deras webbserver är tydligen kallas Scorpius under huven, även om vi vet att det som www. Typ av otrolig, tror jag. Första gången jag någonsin gjorde detta, blåste det helt mig. Olyckligtvis, blockerar Harvard denna typ av trafik, typiskt, på nätverket. Så du kan inte göra det super enkelt. Inse, men är detta här möjligt. Okej. Låt oss ta vår 5-minuters paus här. Vi ska komma tillbaka och dyka i djupare. Så vi är tillbaka, och vi har typ av ambled om i några olika riktningar här. Så låt oss sammanfatta exakt vad som har hänt här. Vi började samtalet prata om detta språk kallas HTML. Igen, inte ett programmeringsspråk. Det är bara en märkningsspråk som till stor del om estetik och strukturering av innehåll i form av en webbsida. Men HTML behöver därför någon form av mekanism för resor mellan webbläsare och server. HTML-typ därför rider på toppen av detta andra språk, eller mer korrekt, ett protokoll, som kallas HTTP. 

Och HTTP, som vi har sett det hittills, är typ av analog med denna mänskliga konvention att skaka hand. När en webbläsare vill begära en sida från en server, sänder att "få" begäran från webbläsaren till servern, och sedan servern svarar med ett antal som 200, är ​​allt okej, liksom HTML eller några dåliga nummer som 404, fil hittades inte. Men under tiden, är HTTP själv inte Internet i sig. HTTP är bara en tjänst, en funktion av Internet likt G chatt är en annan tjänst, ungefär som e-post är en annan tjänst. Det finns alla möjliga saker som vi kan göra på Internet. HTTP är bara en av dessa ansökningar. Så på toppen av - HTTP är på toppen av något annat som vi inte nämnde vid namn, kanske du har hört talas om vid namn, TCP / IP. Så historien vi bara veta att det handlar om hur data färdas från punkt A till punkt B. Och i detta fall, såg vi på en mycket låg nivå router till router till router till router, hur data faktiskt överförs. Men längs vägen, kommer det att stöta på olika hinder. Förutom dessa routrar, det finns saker som kallas brandväggar på Internet, och så data som att vi var bara överföra från mig till Stanford, från mig till Cambridge, skickas till, på denna nivå, kallas något en IP-adress. Vi såg detta för en stund sedan, och en IP-adress är bara en numerisk adress av formen w.x.y.z, där var och en av dessa är mellan, ge eller ta, 0 och 255, om du inte kan riktigt använda alla dessa siffror. Men var och en av dessa platshållare är ett tal mellan 0 och 255. Så en IP-adress i dessa dagar är 32 bitar. 

Nu, som ger oss hur många möjliga IP-adresser i världen? Ungefär 4 miljarder, eftersom varje gång vi räknar i befogenheter 2 hela vägen upp till 32 av något, som ger oss vanligtvis 4 miljarder. Så det är en hel del IP-adresser, men du kanske har läst, eller du kanske nu märker i den populära pressen, en push mot en ny version av IP som kallas IPv6. Just nu vi använder version 4. Det finns verkligen inte varit en version 5, vi hoppar bara rätt till 6. Version 6 kommer att använda 128 bitar för IP-adresser, vilket freaking enorm. Vi bör inte ta slut ganska länge nu, men vi har börjat slut på version 4 IP-adresser, eftersom vi alla har inte bara saker som bärbara och stationära datorer, många av oss har telefoner, många av oss har andra enheter Liksom TiVo och liknande som har IP-adresser själva. Harvard själv har tiotusentals datorer. Så världen verkligen slut på IP-adresser, åtminstone i detta formulär. Så under de närmaste åren, kommer ni att se adresserna på dina egna datorer förmodligen långsamt förändras eftersom fler och fler företag och universitet börjar stödja den nyare versionen. Men en IP-adress är inte tillräckligt för datorn en att begära data från dator B. Eftersom dator B kan vara en server, och en server, som jag nämnde tidigare, kan göra klasar av saker. Den kan vara värd webbsidor, kan det vara en e-postserver, det kan vara en Skypeservern, kan det vara en G chattserver. 

Alla dessa olika tjänster som kan tillhandahållas på en server kunde alla, fysiskt vara på samma maskin. Så förutom IP-adresser, världen har saker som kallas portar på Internet. En port är bara ett nummer, så det är ett unikt nummer för HTTP. Dess nummer är 80. HTTP använder också nummer 443, men mer specifikt för krypterade HTTPS. När du ser s, för säker, är att använda ett annat nummer. Det finns andra siffror, som 25, som används för något som kallas SMTP, annars känd som e-post. Det finns något som kallas 22 för SSH, och det finns en hel massa andra hamnar där ute. Nu vi människor ser sällan dessa nummer. Men när du skriver in en adress som http://www.facebook.com, webbläsaren hemlighet sätter 80, eftersom du använder HTTP. Om du istället typ HTTPS, det sätter hemlighet 443. Och vi kan typ av se detta manuellt om jag dra upp en Brower och gå till http://www.facebook.com:80. Därför uttryckligen citerar inte bara namnet på webbplatsen men porten som jag vill tala med och tryck enter. Märker det försvinner, eftersom webbläsaren förutsätter Åh, 80, jag är inte ens kommer att bry visar att till dig. Men anledningen till detta är att om jag verkligen ville skicka någon e-post, Jag skulle verkligen vara att skicka det till dem på port 25, att vara SMTP. En bit av en grov förenkling, men några av er har vänner som faktiskt arbetar på Facebook, och de likaså har servrar som tar emot e-post. 

Varje gång du skickar ett e-postmeddelande, vad gmail gör för dig eller Outlook eller vad programmet du använder, Det blir liksom hemlighet sätta den siffran också, 25 i så fall. Det är denna kombination av IP-adress och nummer som unikt identifierar en dator på Internet och en viss tjänst på datorn. Nu, naturligtvis, har de flesta av oss förmodligen aldrig skrivit IP-adressen manuellt. Kanske du har i maskinen, men i den verkliga världen, inte så mycket. Varför skriver vi inte IP-adresser i webbläsare? Det skulle fungera, i själva verket kan vi se detta, låt mig visa dig en annan kommando som ska fungera mest var som helst på Harvards campus på en Mac eller PC. Det är detta kommando kallas nslookup, namnserver uppslag. Om jag tittar upp www.cnn.com, visar det sig att CNN har - Åh, intressant. CNN har börjat använda Amazon Web Services. Du kanske känner till cloud computing, Amazons ett av de stora aktörerna inom cloud computing. Vad jag just gjorde var, jag sa: "Ge mig adressen till CNN: s webbserver" men det visar sig att CNN: s webbserver hanteras av Amazon, Amazon Web Services, tyder detta. Och adressen till den server är det här. Så jag är inte säker på om detta kommer att fungera, eftersom de inte använde Amazon. Men låt oss försöka detta, http://, IP-adress, ange, och - kommer det att fungera? Ja. Det kommer att fungera. Internet är super-slow idag. Men i ett ögonblick, kommer du att se några nyhet. Där kör vi. Bank of America är att bli stämd. Okej. 

Detta beror på att denna IP-adress bara råkar genom synonymt med www.cnn.com. Naturligtvis skulle det vara hemskt marknadsföring att säga, besök oss på webben på 50.112.94.127. Du skulle aldrig komma ihåg. Så även i dessa dagar kanske du minns saker Liksom 1-800-COLLECT eller mnemonics världen kom med för telefonnummer. Som före mobiltelefoner, var ganska svårt att komma ihåg tills du kan bara skriva in den och glömma det. Så webben också har denna konvention av namn och IP-adresser, och det är dessa saker där ute som heter DNS-servrar, domännamn system servrar, som översätter IP-adresser till namn och vice versa. Så det är vad som händer under huven. I slutändan har vi TCP / IP, som är denna mycket låga nivå protokoll det, egentligen, blir bara 0 s och 1 s över Internet, och den gör det genom att sätta dem i en virtuell kuvert, om du vill, och skriva på utsidan av kuvertet IP-adressen för destinationen liksom den numeriska portnummer av tjänsten på den destination som man vill prata med. Samtidigt på kuvertet finns också något som kallas en returadress, som är din IP-adress, så att när CNN får ett informationspaket från dig, öppnar denna virtuella kuvert, ser att du vill att hemsidan, det vet från avsändaren del av denna virtuella kuvert som att skicka HTML-tillbaka till. Så låt oss ta en titt på denna i lite mer detalj. Detta är från ett företag som heter Ericson från ett par år tillbaka. Och de tog några friheter med hur Internet faktiskt fungerar, men det ger en mycket mer visuell bild än bara krita upp här. Så jag ger dig "en bit av internet." 

[Berättare] För första gången i historien, människor och maskiner arbetar tillsammans, förverkliga en dröm. En sammanhållande kraft som inte känner några geografiska gränser. Utan hänsyn till ras, religion eller färg. En ny era där kommunikation verkligen sammanför människor. Detta är Gryningen av nätet. Vill du veta hur det fungerar? Klicka här för att börja din resa till nätet. Nu hände exakt vad när du klickade på länken? Du startade ett flöde av information. Denna information färdas ner till din egen personliga postrummet där Mr IP-paket det märker det, och skickar den på väg. Varje paket är begränsad i sin storlek. Postrummet måste bestämma hur man kan dela informationen och hur man paketerar den. Nu behöver paketet en etikett som innehåller viktig information såsom avsändarens adress, mottagarens adress och vilken typ av paket det är. Eftersom denna paket går ut på Internet, det blir också en adress för proxyservern, som har en speciell funktion, som vi kommer att se senare. Paketet är nu lanseras på ditt lokala nätverk eller LAN. Detta nätverk används för att ansluta alla de lokala datorer " routrar, skrivare, etc, för informationsutbyte inom de fysiska byggnadens väggar. LAN är en ganska okontrollerad plats, och tyvärr, olyckor kan hända. Motorvägen av LAN är fullmatad med alla typer av information. Dessa är IP-paket, Novell paket, AppleTalk-paket. De går emot trafik som vanligt. Den lokala routern läser adressen och, om så är nödvändigt, lyfter paketet till ett annat nätverk. Ah, routern. En symbol för kontroll i en till synes oorganiserat värld. [Router mummel och pratar med sig själv] 

[Berättare] Där är han, systematisk, likgiltig, metodisk, konservativ och ibland inte riktigt upp farten. Men åtminstone han är exakt, för det mesta. Eftersom paketen lämnar routern, de gör sig in i företagets Internet och chef för routern switch. Lite mer effektiv än routern spelar routern omkopplaren snabbt och löst med IP-paket, skickligt leda dem längs vägen. En digital-flipperspel guiden "om man så vill. [Router omkopplare talar för sig själv] [Berättare] Som paket når sin destination, de är plockas upp av nätverksgränssnittet, redo att skickas till nästa nivå. I detta fall, proxyn. Fullmakten används av många företag som en slags mellanhand För att minska belastningen på Internet-anslutningen och av säkerhetsskäl, liksom. Som ni kan se, paketen är alla olika storlekar beroende på deras innehåll. Fullmakten öppnar paketet och ser till en webbadress eller URL. Beroende på huruvida adressen är acceptabel, paketet sänds på Internet. Det finns dock vissa adresser som inte uppfyller efter godkännande av ombudet. Det vill säga, företag eller förvaltning riktlinjer. Dessa summariskt behandlas. Vi får inget av detta. För dem som gör det, det är på väg igen. 

Nästa upp, brandväggen. Företagets brandvägg tjänar två syften. Det förhindrar några ganska elaka saker från Internet från att komma in på intranätet, och det kan också förhindra att känslig företagsinformation från att sändas ut på Internet. När genom brandväggen, plockar en router upp paketet och placerar den på en mycket smalare väg, eller bandbredd, som vi säger. Självklart är vägen inte bred nog att ta dem alla. Nu kanske du undrar vad som händer med alla de paket som inte gör det på vägen. Jo, det när Mr IP inte får en bekräftelse att ett paket har mottagits i rätt tid, han sänder helt enkelt en ersättning paket. Vi är nu redo att gå in i världen av internet. En spiderweb sammankopplade nät som spänner hela vår glob. Här routrar och switchar upprätta förbindelser mellan näten. Nu är nätet en helt annan miljö än du hittar inom de skyddande väggarna i ditt nätverk. Här ute är det Vilda Västern. Gott om utrymme, massor av möjligheter, massor av saker att utforska och platser att gå. Tack vare mycket liten kontroll och reglering, nya idéer finner bördig jord för att tänja på gränserna för sina möjligheter. Men på grund av denna frihet, vissa faror lurar också. Du kommer aldrig veta när du möter den fruktade Ping of Death, en speciell version av en vanlig begäran ping, som någon idiot trodde upp att röra upp intet ont anande värdar. Vägen våra paket tar kan vara via satellit, telefonlinjer, trådlösa, eller ens transoceana kabel. De tar inte alltid den snabbaste eller kortaste rutterna möjligt, men de kommer att få det så småningom. Kanske det är därför det kallas ibland "World Wide Wait." Men när allt fungerar smidigt, Du kan kringgå jorden fem gånger vid släpp av en hatt, bokstavligen. Och alla för kostnaden för ett lokalsamtal eller mindre. Nära slutet av vår destination, hittar vi en annan brandvägg. 

Beroende på ditt perspektiv som ett datapaket, brandväggen kan vara en bastion för säkerhet eller en fruktad motståndare. Det beror helt på vilken sida du är på och vad dina avsikter är. Brandväggen är utformad för att släppa in endast de paket som uppfyller dess kriterier. Denna brandvägg fungerar på portarna 80 och 25. Alla försök att komma in genom andra portar är stängda för företag. Port 25 används för e-paket, medan porten 80 är ingången för paket från Internet till webbservern. Innanför brandväggen är paket screenas mer ingående. Vissa paket gör det lätt genom tullen, medan andra ser bara lite tveksam. Nu är brandväggen officer inte lätt luras, som t.ex. när det Ping of Death paket försöker dölja sig som en normal ping paket. [Brandvägg officer talar med paket] [Berättare] För dessa paket lyckliga nog att göra det här långt, resan är nästan över. Det är bara en linje upp på gränssnittet som skall tas upp i webbservern. Numera kan en webbserver köras på många saker, från en stordator till en webbkamera till datorn på skrivbordet. Varför inte ditt kylskåp? Med rätt inställningar kan du ta reda på om du har ärendes för kyckling Cacciatore, eller om du måste gå och handla. Kom ihåg, detta gryningen av nätet. Nästan allt är möjligt. En efter en, är paketen emot, öppnas och packas upp. Den information de innehåller, det vill säga din begäran om information, skickas vidare till webbservern programmet. Paketet i sig är återvunnet, redo att användas igen, och fylld med begärd information, upp, och skickade ut på väg tillbaka till dig. Tillbaka förbi brandväggen, routrar, och vidare genom till Internet. Tillbaka genom företagets brandvägg och på ditt gränssnitt, redo att leverera din webbläsare med den information du har begärt. Det vill säga den här filmen. Nöjda med sina insatser, och lita bättre värld, våra trogna datapaket rida ut lyckligt i solnedgången på en annan dag, vet helt de har tjänat sina herrar väl. Nu är inte det ett lyckligt slut? [Malan] Okej, det räcker. Vi ses nästa vecka. [CS50.TV]