[MUSIK SPELA] 

DAVID J MALAN: Detta är CS50 och Detta är början på veckan 7. Så välkommen tillbaka. Och ni kanske minns att i problembild fyra, Det var lite av en skattjakt för några fantastiska priser vari när du återställa foton från personal både här och i New Haven, du utmanas att hitta så många av dessa datavetare som du kan. Och vi har fått en hel gäng inlagor. Trodde jag skulle dela några med er här i dag. 

Och vi kommer att lägga alla dessa online. Men framför allt, jag ville uppmärksamma er att-- väl man, Sam var en hel del av dem i allmänhet posera så här. Men det verkar det som om i morse, vinnaren var en viss person som heter Ken med 24 av de anställda som fångades på kamera eller några fler när du tar in konto flera anställda på bilderna. På bilden här är Ken nästa Maria i New Haven. 

Nu, Ken, fast, vänder ut är lite av ett hörn fall som har ännu inte hänt förut. Det visar sig att det inte förekommer till mig att sätta finstilta i problem ange fyra som säger att personalen är berättigade till de fantastiska priser eftersom Ken är, naturligtvis, en av fotograferna med vår personal. Nu, med det sagt, han ursprungligen skrev till mig att säga Skicka inte dessa bilder på nätet. Jag tror till stor del eftersom de flesta av bilderna att bilden tog ut lite ungefär så här. Och liknande. 

Men Ken vill att jag ska lugna dig att han är en mycket bra fotograf, Han är en professionell, tar han bilder som inte är suddiga, som är bättre i fokus, och han tog en hel del av vår egen personal. Men snarare än bara erkänna Ken, vad vi trodde vi skulle göra är att gå igenom listan över faktiska studenter som inkommit. Och det visar sig att Lance med 15 bilder per morse var vår vinnare. 

Och bilden här är Lance med Colton, med Skaz, med mig själv och med Sam. Men sedan visar det sig att i 11:46, så bara lite sedan, Jag gick tillbaka till min e-post och hittade att vi hade ännu en inlämning av en student vid namn Bonnie vars e sa bara detta. Kommer inte ljuga, jag göra detta under lektionstid. Och sedan fortsatte att fästa bara 14 bilder, en blyg av Lance s 15. 

Men i Bonnie foton, visar det ut fanns flera anställda, Sam bland dem, så vad vi trodde vi skulle göra är erkänner båda dessa. Så förutom att få Dropbox utrymme att alla som deltog får dessa två avsnitt kommer också få en trevlig tillgodoses lunch för dem och deras avsnitt parar den kommande veckan. Och så du kommer att höra från oss, Lance och Bonnie, om det. Så stort grattis till dem. Nu, de av er som skulle som lunch mer allmänt vet att CS50 lunch i Cambridge och New Haven är på fredag. Gå till CS50 hemsida snedstreck OSA. Och nu ett ord på seminarier. Mer curricularly. Så vi närmar punkt av terminen där du ska börja tänka på examensarbeten. Och faktiskt, på bara en bit, kommer så kallade pre förslag bero. Så pre förslag är tänkta att vara ganska låg påverkan och verkligen bara en möjlighet för du att komponera ett kort meddelande din undervisning karl att underrätta honom eller henne vad du tänker dig kanske vill göra för din slutprojekt. 

Nu, många studenter hamnar gör webbaserade examensarbeten. Och naturligtvis, vi är bara Nu förra veckan i detta och därefter dyka i webbprogrammering. Så inte oroa dig om du har absolut ingen aning om hur du skulle bygga de idéer som du kan ha i ditt sinne. Detta är egentligen bara en drivande funktionen att få dig att tänka och tala med TF om det. Men för att hjälpa dig med det, och med examensarbeten i slutändan, vet att CS50 har en tradition att erbjuda seminarier. 

Och dessa är valfria, händer på, eller föreläsning baserad på möjligheterna att lära sig mer om ämnen som är en liten underordnade kursens Planen, men icke desto mindre underbart material för att driva slutprojekt. Och så detta är den lista som är CS50 personal här i New Haven har kommit med för i år om iOS programmering, Android programmering, spelutveckling, och klasar av fler verktyg och språk och tekniker. 

Så håll ett öga på CS50: s webbplats. Och under tiden, om du vill registrera ditt intresse för någon av dessa, gå till CS50: s snedstreck register. Och vi kommer sedan att följa upp att den dagar och flygtider och platser och everything-- de flesta allt kommer vara strömmas och även tillgängliga på begäran efter om du faktiskt inte kan göra det. Så utan vidare, vi slutade förra gången med GET. 

Och det var som det budskap som var insidan av den virtuella kuvert, minns, att vi gått från router till router till router mellan en webbläsare och en webb servern. Och det budskapet såg lite ungefär så här. Detta var mer svårbegripliga budskap som var faktiskt inuti ett kuvert skrivet på ett papper vars första raden säger bokstavligen, få snedstreck. 

Och precis som en sanity check, vad gjorde snedstreck betecknar? Vad betyder slash menar när begär en hemsida? Du begär det hela tiden. De flesta någon gång du besöker en webbplats, du faktiskt inte skriva in ett filnamn. Du har förmodligen bara gå till Facebook.com, ange, gmail.com, eller liknande. Och vad snedstreck representerar? Vilken fil? Eller vilken sida, speciellt? 

Indexet, ja. Så standardsidan. Så om du inte anger en fil namn som vi kommer att börja se, du faktiskt bara begär ge mig standardsida för Facebook eller ge mig min inkorg eller ge mig standardsidan av nyheter på CNN: s hemsida eller liknande. Och en server svarar sedan på meddelandet med något så här, att säga ja, jag tala HTTP version 1.1. 

200, vilket är en status kod som vi människor sällan någonsin se att det är bra. Eftersom det innebär OK, begäran mottogs och hanteras på rätt sätt. Och typ innehållet uppenbarligen i svaret är ganska ofta, men inte alltid, text. Och specifikt HTML. Och det är faktiskt där vi tittar på i dag. 

Så i själva verket kommer jag att gå framåt och öppna upp en webbläsare. Jag kommer att använda Chrome, kan du använda de flesta någon webbläsaren i de kommande veckorna. Vi rekommenderar generellt Chrome eftersom det är särskilt bra för programutvecklare. Det har fått en hel del inbyggd verktyg som gör det lättare att utveckla inte bara HTML och CSS, saker som vi kommer att börja tala om i dag, men även andra språk. 

Och jag kommer att gå vidare och gå att-- Jag kommer att kontrollera Klicka eller höger klicka var som helst på en webbsida. Och jag kommer att gå till Inspektera Element. Och jag kommer att justera min skärm bara lite här. Låt mig att flytta detta till botten. Så det här är vad som kallas Chrome Inspector. Så det här är som en felsökning verktyg inbyggt i Chrome. 

Alla ni redan har här Om du har använt Chrome. Och det gör att du kan se vad som händer på under huven på en viss webbsida. Så låt oss faktiskt ta en titta på detta på följande sätt. Den har långt fler funktioner och vi bryr oss om i dag. Men det finns dessa flikar hit. Elements, nätverk, källor, tidslinje, och några andra saker. Jag kommer att titta på Nätverk för ett ögonblick. 

Och det är lite överväldigande vid första anblicken här. Men vad jag ska göra är att låta mig förenkla det lite. Jag kommer att slå på inspelning ljus så att det är rött. Och jag kommer att säga bevara log. Och detta är bara en liten jag räknat ut över tid som kommer att spara allt som händer i webbläsaren. Och nu ska jag gå till http://facebook.com. 

Faktiskt, låt oss göra www för bra åtgärd, snedstreck. Enter. Så en webbadress som många av du kanske har besökt. Och nu Facebooks web sida kommer upp på toppen. Och sedan en massa grejer flög förbi längst ned. Och i själva verket visar det sig att när du besöker Facebook.com, du är inte bara att göra en HTTP-begäran, det visar sig att gå till Facebook.com sänder 41 av dessa höljen, alla med sin egen get begäran såsom indikeras, om än bakom skärmen här, vid den nedre delen av skärmen, Det tyder på att, ja, min webbläsare gjorde 41 ansökningarna. 

Och totalt överlät 861 kilobyte och det tog någon anledning så många som åtta sekunder för att ladda ner allt detta. Så det är faktiskt lite konstigt att Facebooks webbplats skulle ta det lång, men så var det i det här fallet. Nu, allt detta jag bryr mig egentligen inte om undantag för den översta begäran. Så låt oss gå till denna en rätt här och låt mig zooma ut för bara ett ögonblick. 

Och låt mig in på den här. Så vad jag har gjort till vänster trots det finns en hel del som pågår hit är jag har markerat Facebook.com och sedan märker att jag rulla ner, rulla ner, rulla ner, att begära rubriker. Och ser du att Chrome visar mig huvudsak inre innehåll av begäran jag gjorde. Det är inte formatering i riktigt samma sätt, men märker att det finns omnämnande av få, märka det finns omnämnande av värden, Facebook.com, banan, eller snedstreck, vilket är den fil jag begärde. 

Och sedan om jag rulla säkerhetskopiera, vi ska faktiskt se att det Facebook tillbaka för mig är alla dessa rubriker. Så inne i den virtuella kuvert faktiskt finns en hel del nyckelpar värde. Ett ord, ett kolon, och sedan ett värde. Ett ord, ett kolon och ett värde. Dessa är så kallade rubriker. Och det finns mycket mer i detalj här än vi faktiskt bryr sig om just nu. 

Men det är näst sista där nere, märker, att Facebook.com server, sannerligen sagt här kommer lite text HTML. Så allt detta är att säga att när du begär en webbsida sida från en webbläsare till en server, svarar servern med ett hölje av sin egen inuti vilket är text. Med andra ord, HTML. Hypertext Markup Language. Vilket är ett annat språk att vi inför i dag att människor eller datorer genererar för att genomföra webbsidor. 

Specifikt, låt oss titta på det här. Jag ska nu gå tillbaka Facebooks webbplats. Och jag ska bara kontroll klicka eller högerklicka och klicka på Visa Sidkälla. Och även om du inte använder Chrome, IE kan göra detta, Firefox kan göra detta, Safari kan göra detta, även om menyn alternativ kan se lite annorlunda ut. Och detta är HTML som Mark och företag på Facebook har skrivit. 

Och kollektivt, detta språk här implementerar den blå och vita sidan att vi såg för en stund sedan. Nu är detta lite överväldigande. Men om vi tittar upp på övre vänstra, vi är kommer att börja se vissa mönster. Det ser ut som det finns en hel del av dessa öppenvinkelfäste och sedan finns det här nyckelordet HTML. Här är en annan öppen vinkelfäste och huvud. 

Här är, om vi rulla ner och ner och ner, jag är kommer att gå vidare och prova att söka efter något. Det sätt över på höger här är öppen fästesstommen. Och minns från förra tid som vi föreslog att den enklaste webbsidan att en människa kan skriva kan se lite ungefär så här. Öppna HTML-tagg, öppna huvud tagg, öppna rubriktaggen, stänges sedan titel, sluten huvud, öppen body-taggen, lite text, sluten kropp, sluten HTML. 

Men en paus här bara ett ögonblick. Denna kod, även om du har aldrig skrivit det förut men fortfarande inte riktigt förstår vad som händer, ser ganska bra ut. Höger, det är mycket ren. Det är väldigt stilist trevligt. En hel del av indrag och vitt utrymme. Facebooks är det inte. Så varför är Facebook så mycket värre än jag på att skriva HTML? Tydligen. 

Höger, är detta som en av fem för stil. Det finns en övertygande skäl för dem att skära dessa hörn. Okej, så att de inte vill göra det lättare för dig att läsa den. Så i någon mening, de är fördunklar det slags förvränga det åtminstone estetiskt så att det är svårare för Myspace att gå och rip off sina hemsida och HTML för det. Det visar sig att med program men inklusive Chrome, vi kan städa upp det super lätt. Så det är inte riktigt så som orsak. Vad kan vara orsaken. Yeah. Ja, vita kostnader rymddata. Vad menar du? Ja, exakt. Om du trycker på tabbtangenten mycket eller mellanslagstangenten, överväga konsekvenserna. Så varje tangent på tangentbordet är ett [OHÖRBAR] representerade som ett byte. 

Så antar att Mark eller någon av de devs dessa dagar träffar mellanslagstangenten bara en gång i denna HTML-sida som representerar Facebooks hemsida. Och Facebook har en hel del av användare i dessa dagar. Så antar att Facebooks hemsida besöks av en miljard människor idag. Och någon på Facebook har tryck på mellanslagstangenten bara en gång. 

Så ett ytterligare byte, en miljard förfrågningar, hur mycket mer data Facebook överföring via Internet eftersom någon drabbade mellanslagstangenten på hans eller hennes tangentbord? En miljard byte, eller en gigabyte data skickas från Facebook-servrar till människor runt om i värld utan goda skäl. Nu är det bara en plats. 

Tänk om vi faktiskt rengöra grejen upp och indrag det och lagt en hel del tomt utrymme och tabbtecken och utrymmen, du hamna utgifterna gigabyte, om inte terra bytes mer utrymme. Och så super vanligt i faktiska värld av webbutveckling är att minify din kod. Och vi kommer så småningom se hur du kan göra detta. 

Men i dag, kommer vi att börja skriva kod det är faktiskt läsas av oss människor. Det visar sig, men om du går tillbaka till detta verktyg i Chrome Inspektera Element, tidigare var vi på fliken Network. Det visar sig att om du går till element fliken vad du faktiskt se är Chromes ganska tryckt version av samma HTML. Så vi har deobfuscated det. Så det är ingen match för en dator. Och nu kan du faktiskt klicka runt och börja att se hierarki som är en webbsida. Så låt oss faktiskt göra detta. Jag kommer att gå vidare och öppna upp min Mac ett program som heter textredigering. Och minns att detta är bara en super enkel textprogram. Windows har notepad.exe. Och jag kommer att ordagrant Skriv följande. Doc typ HTML, öppna fäste HTML, stängd fäste HTML, vi har huvudet på sidan här, I slutet av huvudet på sidan här, en titel kommer att se ut, hallå världen. 

Och sedan ner här, vi behöver kroppen av webbsidan. Slutet lastutrymme. Och sedan i här, hallå världen. Okej. Så vi har skrivit en supersnabb webbsida. Jag ska spara den som hello.html på mitt skrivbord. Min Mac kommer att klaga, tänker att, vänta en minut, Detta är en textfil, gör du vill kalla det .txt? Men nej, jag vill använda punkt HTML. 

Och vad är trevligt om jag bara dubbelklicka filen, hello.html, här är min webbsida. Tyvärr, jag är enda personen i världen vem som kan se den här sidan just nu. Eftersom vart tar det bor tydligen? Det är på min Mac, eller hur? Vilket är meningslöst. Som ingen i det här rummet låt ensam på internet kan faktiskt besöka den sidan. Så idag, måste vi införa ett annat element. 

Och för att göra detta, kommer jag att gå vidare och öppna upp moln 9. Så moln 9 är naturligtvis en moln baserat service-- CS50 IDE-- Det har alla våra arbetsytor körs någonstans på internet. Och det betyder att alla våra filer är redan tillgängliga för allmänheten. Så låt oss gå vidare och göra det. Jag kommer att gå vidare och skapa en ny fil NCS50IDE. Jag kommer att spara det som förut som hello.html och klicka på Spara. Och nu bara för att spara tid, jag kommer att gå vidare och kopiera koden klistra snarare än skriva om det. Och spara den. Och så nu har jag en fil som heter hello.html. Men hur gör jag faktiskt öppna den som en webbsida? Tja, visar det sig den inbyggd i CS50 IDE är inte bara en kompilator som clang och en debugger som GDB och knippen av andra program, det finns faktiskt ett fullfjädrat webbserver som kör inom CS50 IDE. 

Alla ni, det vill säga, ha en egen webbserver. Och en webbserver är bara en bit programvara vars syfte i livet är att tjäna upp webbsidor. Att lyssna efter förfrågningar från webbläsare och svara med små virtuella kuvert insida som är den innehåll som jag har skrivit. Så här webbserver är faktiskt gratis och öppen källkod. Om öppen källkod betyder bara mjukvara som någon annan har skrivit att vi alla kan faktiskt se och ladda ner och även ändra källkoden. Och det kallas Apache. 

Och vi har gjort det lite lättare att användning i CS50IDE genom att kalla den Apache 50. Så att det kan faktiskt förstå följande. Jag kommer att säga Apache 50 start. Och då jag ska bara säga prick. Och vi ser några något hemligt meddelande som säger inställning Apaches dokument [? grupp?] hem, ubuntu, vad det nu är, slash arbetsyta. Start webbserver Apache 2 framgångsrikt. 

Så lång historia kort, jag har bara drivit en knapp och vände på en webbserver som är nu lyssna på internet på TCP-port 80 vid en specifik adress. Och det står här, och detta kommer att ändras baserat på ditt användarnamn och andra faktorer, men märker nu om jag klickar på denna, IDE50 dot jharvard och så och så märker att hela tiden Under de senaste veckor, kanske du har märkt att ditt eget användarnamn är inbäddad i det övre högra hörn av CS50IDE. 

Och som faktiskt har varit allt detta tajma den adress där du kan besöka alla dina filer via webben. Hittills finns det ingen framhävde, eftersom det i C, du vanligtvis vill att saker som körs i en terminal, inte på nätet. Men i dag, vi börjar skriver webbaserad kod att vi vill ha tillgängliga på offentliga webbadresser. Så vad jag ska göra är att klicka här webbadressen. 

Och märker att jag ser en ganska ful index, en katalog notering, men vilken fil hoppar ut på dig förmodligen? Hello.html. Det beror på att jag sparade filen i min arbetsyta. Och vad jag har sagt Apache webbservern är att titta i Davids arbetsyta katalog. Och låt någon i världen se dessa filer. 

Och faktiskt, om jag nu klicka på hello.html, Jag ser i den här fliken just den filen. Nu märker, moln 9 har den blivit detta något lite hjälp för oss. Inom CS50 IDE, märker att det finns plötsligt en adressfält. Det beror på att även om vi är Chrome att besöka CS50IDE, insidan av CS50IDE är sin egen version av en webbläsare just nu. Och så i stället komplicera saker som sådan, Jag kommer att gå vidare och bara kopiera den här webbadressen. Jag kommer att gå vidare och bara öppna min egen Chrome-fönster. Så det finns ingen magi här, ingen CS50IDE. Jag kommer bara att bokstavligen klistra min J Harvard URL och tryck på Retur. Och voila, nu har jag, och i teorin, alla på internet, om jag har konfigurerat behörigheter på lämpligt sätt, kan besöka den här filen. Och så nu, om jag sa hello.html, voila, det är min otroligt underwhelming webbsida. Så låt oss göra en snabb kontroll förstånd. Eftersom allt detta är konceptuell inrättas. Och vi har faktiskt inte riktigt lärt dig hur man skriver HTML i sig. Några frågor hittills på vad som just hände? Ja. Har CS50 äger dessa webbsidor? På vilket sätt? Bra fråga. Så CS50: s äger CS50.io. Vi har faktiskt köpt domännamnet. Och som på grund av er logga in CS50IDE, ni alla får vad som kallas en underdomän. 

Så IDE50-Malan eller IDE50-Rob.CS50.io, det är din unika adress inom vårt domännamn. Så när det gäller kursen du har en egen unik adress. Men vi har förenklat saker genom köpa toppdomänen, CS50 dot I / O och sedan alla andra är insidan av det, så att säga. Och vi ska återkomma till det i ett par veckor förmodligen särskilt vid slutprojekt tid, då en del av er kanske vill få din egen domännamn. Det är faktiskt relativt okomplicerad. Okej. Så låt oss nu göra detta. Jag kommer att gå tillbaka till CS50IDE, där min fil just nu, hello.html, är inte så intressant. Jag skulle vilja göra något lite trevligare än så. Så jag kommer att göra något sånt här. Låt mig öppna paragraphs.html. Så det här är en fil som jag skrev i förväg. På toppen av det, som alltid, har vi synpunkter. Men i HTML, kommentarer ser lite annorlunda ut. På rad tre och linje 14, du se syntaxen för starta en kommentar och avsluta en kommentar. 

Men ingen av de saker i mellan frågor som funktionellt. Det är bara en anteckning till en människa vad som händer här. Och precis som en snabb sanity kontrollera, om jag bläddra ner, Vad är det uppenbara nya tagg som vi har infört? Taggarna hittills har vi sett är öppna fäste HTML, huvud, titel och kropp. Men vad är uppenbarligen nya nu? 

Ja, så p. P-taggen eller punkt tag. Och då jag lånade bara några standard Latinska texten att utgöra mina punkter. För vad jag ville visa är hur du kan representera textstycken i HTML. Och så vad börjar hända här är att det finns redan ett mönster utvecklas. Och låt mig gå vidare och göra det. Låt mig först stänga av Apache. Och jag kommer att tala om det för att starta själv igen inne i dagens källa sju m katalog. Så att jag har tillgång till allt. 

Och nu, om jag går tillbaka till den här katalogen notering, märker jag ser varje fil från idag. Och du kommer att se i nästa problem set, vi ska ge dig instruktioner för att göra just detta. Om jag öppnar paragraphs.html, kanske detta samt ser ut som ett programmeringsspråk till dig om du inte talar eller läser latin. Men detta är bara tre stycken text som är kodad i HTML. 

Och lägg märke till stycket pauser mellan dem. Eftersom det visar sig, och även om du kan vara benägna att göra detta, medan det i den verkliga världen, Om du vill lägga linje pauser mellan saker, du kanske helt enkelt göra detta och tryck på Spara. Och nu, om jag ladda här, meddelande att allt bara suddar ihop på bara en klump text. Eftersom HTML är typ av en dum språk. 

Det är tänkt att användas i en sådan ett sätt att webbläsaren kommer endast gör uttryckligen vad du säger den att göra. Så om du inte berättar det ge mig ett nytt stycke, du kommer inte att se ett nytt stycke. Och faktiskt, vad webbläsare kommer att göra är även om du trycker på Retur, låt oss säga om och om igen och igen, flyttar denna text sätt ner på skärmen och sedan spara och sedan ladda om, webbläsaren går att kollapsa allt detta vita rymden i bara en enda synlig blanksteg. Okej. Så det är punkt tag. Och så vad är mönstret som är att utveckla här? Tja, det verkar vara så att HTML handlar om att starta en tagg och slutar en tagg. Och vad är en tagg? Tja, det är bara en del av syntax. Öppna konsol, ett nyckelord, sluten fäste, är en tagg. Eller börja tag. Och sedan när du är gjort uttrycka dig, som i du är klar med stycket, du gör så att säga motsatsen. Men motsatsen är inte helt bakåt. 

Du prefix helt enkelt samma taggens namn med ett snedstreck som denna. Okej. Så inte så spännande. Och i själva verket är vi inte göra webb allt mer intressant. Vad händer om jag vill göra saker större och djärva? Så visar det sig att här är ett exempel i headings.html, var i min kropp, Jag har en H1-tagg, H2, H3, fyra, fem, eller sex, vilka alla verkar ganska svårbegripliga. Men om jag går öppna exempel, låt oss ta en titt. Headings.html. 

Så webbläsare som standard kan ge dig text som är stora och djärva av disparata storlekar. H1 är stor. H6 är mindre och sedan allt annat däremellan. Så det är intressant men ändå inte riktigt på webben jag vet. Vad händer om vi vill jag ha något som en lista. . Så här är en punktlista över tre av Harvards hus. 

Hur gick ni om det här? Tja, ta en titt på list.html. Och här ser vi en lite funkiness men låt oss fundera på vad som händer. Så bygger på vad du just har sett, UL står för oordnad lista. Oordnad lista betyder bara punkt. Det finns inga siffror. Det finns också något som kallas en ordnad lista, vilket är en OL på taggen. Då LI, är listobjekt allt det innebär. 

Och så det automatiskt nummer allt för dig. Men återigen, alla mina indrag och vitt utrymme är bara för min skull. Webbläsaren är inte faktiskt går till vård. Så även om du inte kunde gör det, bara för att vara tydlig, Du bör inte trots webbläsaren kommer fortfarande kunna förstå det bara bra. Jag slår reload i mitt webbläsare, jag klickar reload och ingen förändring sker eftersom webbläsaren fortfarande gör exakt som jag säger det att göra. 

Okej. Så det här är allt bara text. Nu göra något mer intressant. Jag kommer att gå vidare och låna en del av denna HTML. Jag kommer att gå vidare och skapa en ny fil här. Och vi kommer att kalla detta rick.html. Vi har oproportionerligt begagnade något kallas en rick rulla i detta klass i år, vet jag inte, Det bara hände organiskt. 

Och nu har fått utom kontroll. Så jag ska bara gå med det. Och om jag går till Google Bilder och Rick Astley. Om du inte vet varför vi gör detta, bara läsa på Wikipedia. Varje gång du har klickat på länken, någon har skrattat någonstans. Och låt mig gå ahead-- dit vi går, låt oss se den här bilden. 

Så här har vi en bild i Google Bilder. Och låt oss anta att det är rimligen överallt på internet. Så jag kommer att anta att det är OK för mig att faktiskt sätta detta i min webbsida. Jag kommer att gå vidare och kopian URL. Och nu om jag går tillbaka till Cloud 9, låt oss se vad jag kan göra här. Så här är bara en webbsida. Detta är Rick Astley, haha, Jag ska nu gå tillbaka min webbläsare, ladda, och intressant. 

Var är Rick? Så låt mig se vad som har hänt. Faktiskt, jag ska låtsas som om jag inte gjorde det. [OHÖRBAR] satte honom i här. Vi ska återkomma till det om en stund. Så här är rick.html. Så det är inte Rick Astley. Så visar det sig att vi kan faktiskt lägga honom här. Detta är Rick Astley. Jag kommer att säga ge mig en bild vars källan är webbadressen jag bara kopierat, som tydligen är en glad födelsedag något eller andra. 

Och nu ska jag till Stäng taggen så här. Så det här är linda superlång. Men märker att allt jag har gjort är öppen fäste bild, källa med ett attribut av detta. Och det är en riktigt lång webbadress. Och i slutet, märka detta. Varför har jag gjort snedstreck vinklad konsol i stället för, liksom varje annan tagg, som har en öppen hållare, IMG, stängd fäste? Ta bara en gissning, även om du har ingen kännedom helst med HTML innan. 

Så det är hur det stängs kommandot, men varför det inte verkligen göra intuitivt meningsfullt att göra något lite mer Verbose som nära bilden! Yeah. Yeah. Bara semantiskt, det finns ingen känsla av starta en bild och slutar en bild, det är antingen det eller är det inte. Så det inte meningsfullt att lämna ett gap för något annat av bilden. Du kan bara inte kan göra det. Och så syntaxen skulle generellt vara precis att göra snedstreck inne av den öppna etiketten eller starttaggen och då slå Spara. 

Så om jag nu ladda den här filen, nu Jag har en bra webbsida matlagning här. Och vi kunde säkert verkligen irritera folk genom inbäddning i stället som en YouTube-länk. Och faktiskt, helst du någonsin gått till YouTube, och låt mig faktiskt av misstag rick rulla mig här. Så Rick rulle. Så rick Roll-- jag ska gå hit. 

[MUSIK SPELA] 

OK, en person gillade att. Så märker hela tiden, om du Klicka på Dela länk, du naturligtvis få adressen som du faktiskt kan bädda in i ett e-postmeddelande eller en rättsmedicinsk bild eller i en problembild eller en bild. Och nu, om jag klickar istället på bädda, märker att hela tiden, det här har varit där. Jag kommer att gå vidare och kopiera denna. 

Och bara så att vi kan se det bättre, jag är kommer att klistra in den på min textredigerare. Lägg märke till att detta vad YouTube har att berätta. Varje gång du besöker en YouTube-video, om du vill bädda in video på din webbsida, helt enkelt ta den här. Så det här är ännu en HTML-taggen som kallas en iframe. Eller en i linje ram. Så det också ser lite mer komplexa än alla de andra. Så visar det sig att bilden tagg och tydligen iframe-taggen ta vad är kallade attribut. 

Och detta är en annan bit syntax i HTML. Förutom den taggens namn, öppna fäste kodnamn, Du kan styra beteendet hos taggen genom att ha en hel del attribut lika värde. Attribut lika värde. Och så exempelvis YouTube talar om för oss om du vill att bredden på den här videon att vara 420 pixlar och höjden att vara 315 pixlar, det är hur du uttrycker det i HTML. 

Källan till videon går vara att långa YouTube URL och sedan några andra saker liknande ram gränsen är noll, så som förmodligen innebär att det finns ingen kantlinje runt saken. Tillåt helskärm förmodligen innebär att användaren kan klicka på en knapp och faktiskt helskärm videon. Så om jag verkligen vill vara imponerande här i Rick dot HTML, snarare än att använda bildtaggen, låt mig ta bort det, istället klistra in den här. Och nu ladda om. Och nu här går vi igen. Okej, det räcker. Okej, så jag ska försöka svårt att inte göra det igen. Så vad är några av de hämtställen här? Så HTML, så ful som dessa webbsidor är är faktiskt ganska enkelt. Det är inte ett programmeringsspråk. Det har inte funktioner. Det har inte slingor. Det har inte förutsättningar. Allt har är dussintals olika taggar, som var och en har noll eller flera attribut. Och i själva verket, vad är roligt om HTML när du börjar att dyka in är att det är väldigt själv läraktiga. 

Allt som krävs är en förståelse av den allmänna ramen för HTML. Vad är en tagg, vad är ett attribut, hur gör du faktiskt konfigurera en webbsida som följer. Och allt annat är verkligen resultatet se upp i en online-referens eller googla hur man gör något teknik eller som vi har sett, tittar på Facebook källa kod, tittar på en webbplats som du gillar när det är källkod och förstå hur utvecklarna där faktiskt anges saker. 

Så vi kan göra bilder. Och faktiskt, vi gjorde det för en stund sedan. Låt mig gå vidare och bara visa dig. Här är några exempel kod. Om du någonsin vill se grumpy katt. Så märker att jag kan har en bild-tagg här. Och jag har fått en kommentar ovanför. Jag har ett alternativ text för tillgänglighet. Så någon som är med hjälp av en skärm läsaren på grund av synen kan faktiskt sedan har deras skärmläsare säger grumpy katt. För om de inte kan se bilden, de kan åtminstone ha sin dator berätta för dem verbalt vad det är. Och källan till den filen är cat.jpeg. Så i själva verket, om jag verkligen ville få smart, vad jag kunde ha done-- Jag lovar att inte gå till Rick Astley, så Jag kommer att google för en katt i stället. Och om jag går till Google Images här, och vi kommer att anta att detta är en bild av min katt. 

Antag att jag har kontroll klickade eller höger klickat på detta, av misstag obehagligt. Och cat.jpeg jag tänker att spara på mitt skrivbord. Låt mig nu gå tillbaka till moln nio. Lägg märke till att här, jag kan gå att ladda upp lokala filer. Och om jag ta tag i detta fil, cat.jpeg, märka att jag kan dra den och släppa den i moln 9 och det kommer att skrika på mig här. 

Eftersom vi har redan gett dig en cat.jpeg fil, men det är super lätt att ta ett foto som du har tagen från Facebook eller Flickr eller liknande och faktiskt dra och släpp den i moln 9 och sedan göra det del av din egen personliga webbplats eller problem set sju eller åtta som vi snart får se. Och sedan när du äntligen besöka den katt, förutsatt att jag hämtat samma katt, meddelande that-- det var bedårande. 

Vad du kan se är något liknande detta ansikte här. Så de filer som du referens på en webbsida kan antingen vara lokal i ditt eget konto eller fjärrkontrollen på någon annan server såsom i fallet med Rick Astley foto lite sedan. Så var else-- vad annars kan vi göra här? Så låt oss ta en titt på följande. Du vet vad typ av kyla? 

Hittills har vi gjort mycket statiska webbsidor. Jag vill krydda upp saker och ting på följande sätt. Jag vill göra min egen sökmotor. Så för att göra en sökmotor, låt oss gå vidare och börja göra detta. Jag kommer att gå vidare och skapa en ny fil som heter search.html. Och vi har prefabed versioner på nätet. Hoppsan. Inte klistra in i din terminalfönster. Prefab versioner på nätet. Och jag kommer att starta på följande sätt. Så här är början på en fil som heter search.html. Jag kommer att spara det i dagens källkatalog. Jag kommer att kalla denna sökning. Egentligen ska vi göra det bättre. CS50 Sök och faktiskt helt det. Och nu, jag kommer att säga något som H1 CS50 Search. Och sedan ner här, H2 kommer snart. Och bara för att sammanfatta, H1 och H2 menar vad respektive? 

Ja, så stor och fet, och inte så stor, men ändå djärvt. Så om jag spara och gå hit, låt oss se filen search.html. Okej, och detta är right-- [OHÖRBAR]. Stand by. David är förvirrad. Åh, det är rätt där. David är en idiot. OK. Så det är. Så CS50 sökning kommer snart. Så nu, låt oss syntetisera vad vi gjorde förra veckan. 

Där vi pratade om lägre nivå mekanik HTTP. Och dessa nya idéer HTML, som är bara denna märkspråk där du berättar en webbläsare exakt vad de ska göra och implementera vår egen sökmotor. Så istället för att bara säger kommer snart, jag är kommer att presentera något som kallas en form tagg. Och i denna form, kommer jag att har något som liknar en inmatningsfält. 

Och namnet på denna ingång fält, jag ska kalla det Q. Och vilken typ av denna inmatningsfältet Jag kommer att säga är bara "text". Och ett textfält, som vi ska se, är bara en textruta. Och så det inte känner för att ha något inuti det på denna punkt. Och så jag bara gå att stänga taggen med det snedstreck rätt i taggen själv. Och sedan kommer jag att har en andra ingång. Input type lika skicka. Och sedan kommer jag att stäng här också. 

Och nu ska jag gå tillbaka hit. Och redan ser vi, om än ganska ful, jag har fick början av min egen söksidan här. I själva verket, låt mig försöka städa upp detta lite. Det visar sig att det på ingång här, kan jag ha ett annat attribut som kallas platshållare. Och jag kan se något liknas vid nyckelord, eller mer specifikt fråga efter q. 

Och lägg märke till, nu har jag denna typ av grå text som försvinner som fort jag börjar skriva, men det är förmodligen något du har sett i andra webbsidor. Jag vet inte riktigt gillar knappen Skicka. Så jag faktiskt kommer att ge Skicka-knappen ett värde av sökning. Och nu, om jag ladda om, märker att min knapp blir uppkallad sökning. Du vet, jag vet inte riktigt som logotypen här. Så Google Font generator. 

Jag vill krydda upp detta ytterligare. Så CS50 sökning. Låt mig att skapa min egen logotyp. Det ser trevligt. Så nu vill jag spara as-- kom igen. Var är det? Där. OK. Missade det. Spara som. Dumma webbläsare. Stand by, ska vi fixa detta en gång för alla. Det går vi. Okej. Förlåt. Ledig dag. Nu är funky. Avsluta helskärmsläge. Okej. 

Nu, som en normal person, spara bild som. Logo.gif. Nu ska jag gå in CS50IDE och Jag ska bara ta logotypen, Jag kommer att dra den till min källa sju katalog, Filen finns redan, jag är OK med det. Så jag kommer att åsidosätta det eftersom jag redan hade det. Och nu hur får jag bli av med detta? 

Låt oss gå vidare här och göra bildkälla lika logo.gif. Stäng detta. Spara. Och nu om jag går tillbaka till min sökning sida, nu är det ser ganska bra. Okej, så det har inte ganska gjort något användbart. I själva verket, låt mig försöka att söka för en katt och se vad som händer. Katter. Jäklar. Det är inte bara fungerar, tydligen. Så vad är nyckeln stycket som saknas här? 

Rätt, även om du inte vet någon HTML, Jag har börjat märka upp telefonen formuläret och jag har sagt det hur man får ingångar, ge mig en textruta och en Skicka-knappen, vilken pjäs är uppenbarligen saknas? Antag att vi vill faktiskt få denna sak fungerar. Vad behöver vi göra? Vi har ett behov av att genomföra den bakre änden databas eller sökmotorn själv, och det kommer att ta en hel del tid, ärligt talat. 

Så kom ihåg vad vi gjorde förra gången. Så om du söker efter något på Google och du har i förväg avstängd återkallande, snabbsökning. Så låt mig inaktivera som så att detta faktiskt beter sig som en äldre skola webbläsare, Om jag söker nu efter något som katter, ihåg vad URL ser ut. Det är ganska kryptisk. Men inbäddade i det, minns, är slash sökning. Frågetecken q lika katter. 

Och det verkar ge mig en hel massa sökresultat. Så du vet vad jag ska göra? Jag kommer att låna Google för bara en minut. Jag kommer att gå över här och jag kommer att säga att detta utgör åtgärder eller destination, så att säga, bör bokstavligen vara Google. Och metoden jag ville till användning kommer att bli få. 

Så vad är handling? Åtgärder weirdly namnges, men det betyder bara som kommer att hantera verkan av denna form? När jag klickar på Sök, där bör resultatet gå? Och om jag nu går tillbaka till min formuläret här och ladda min webbsida och nu söka efter något som hund, märker nu Jag har åter genomfört Google. Höger? 

Om jag vill söka efter något annars fungerar det för inte bara hundar, det fungerar även för katter. Det fungerar även för CS50. Och OK, detta är bara enligt whelming, är inte det? Okej, men det faktiskt fungerar. Så vad är egentligen pågått? Så jag har lärt min webbläsare, genom att använda HTML, för att ta inmatning från användaren och faktiskt skicka den ingång till en fjärrserver via HTTP. 

Och eftersom min webbläsare förstår HTTP, det faktiskt konstruera webbadressen så att det Jag hamnar över i min webbläsare, märke till vad som händer när jag sökte efter hund. Om jag klickar på Sök, märker att URL förändras som jag tänkt att google.com/search~~V frågan lika hund. Och det beror på att formen vet, eftersom metoden är att få, att helt enkelt lägga till den adressen där. 

Nu, dessa webbsidor är fortfarande ful. Så låt oss presentera en annan bit syntax om vi kan i dag. Och detta är något som kallas som Cascading Style Sheets. Så låt mig ta en titt på detta exempel här och se om vi kan sluta vad som händer. Detta är CSS0.html. Och det är där saker få lite ful. För tyvärr, i världen av webben, HTML ensam inte kan göra allt. Och så om du vill stilisera din webbsida, du faktiskt behöver för att fokusera på estetik på ett annorlunda sätt. Så här, jag har kroppen av min web sida inuti vilket är en stor div. Och en div betyder bara division. Så det är som ett stycke, men det inte har samma semantik av ett stycke text. 

Det betyder bara att webbläsare, här kommer en stor rektangulärt område av min web sida, jag vill hantera det speciellt. Nu är linje 21 när denna div startar. Och bara ta en gissning. Vad är effekten av linjen 21 på resten av innehållet på sidan? Centre det. Det var allt. Så vi har inte sett ett sätt faktiskt centrering av texten. 

I själva verket, min sökmotor, till skillnad från den faktiska Google, var alla motiverat över till vänster. Och så nu i linje 21, säger jag, hey webbläsare, skapa en uppdelning på sidan. Ge mig en stor, osynlig rektangel. Det är så jag vill tänka på webbsidan. Och sedan stilisera den på följande sätt. Inuti dessa citat, nu, är ett andra språk att vi lanserar idag kallas CSS. Tack och lov, också är det inte ett programmeringsspråk, så det är mycket begränsad i sin syntax men också mycket begränsad i sin funktionalitet medan HTML handlar om märka upp data från en webbsida och strukturen på en webbsida. CSS är allmänt om sista kilometern, estetik, få storlek och färg och placering exakt rätt på en webbsida. Och faktiskt, det bildas med nyckelpar värde. 

En fastighet som denna, text justera, följt av ett kolon, följt av värdet på denna egenskap, som i detta fall är centrum. Och nu märker du kan kapsla dessa saker. Om jag ville ha allt att Jag har markerat att vara centrerad, det är därför jag har ledningen 21 och motsvarande rad 31. Men anta nu vill säga John Harvard, välkommen till min hemsida. 

Copyright symbol John Harvard. Och antar att jag vill den första av dessa linjer för att vara ganska stor. 36 pixlar. Så det är en anständig storlek. Och jag ville dess vikt att vara djärv. Men sedan under den, Jag vill ha mindre text. Och under det, jag vill ha ännu mindre text. Förlåt. Idag känns som en off dag. 

Så nu, vad gör jag för att uttrycka det? Här på linje 22 är en inbäddad div eller kapslade div, om ni så vill. Det har också sin egen stil tag. Jag anger en teckenstorlek på 36. Jag anger ett teckensnitt vikt fetstil. Här nere, jag bara ange 24 pixlar. Och slutligen, i linje 28, jag anger 12. Så precis som en snabb kontroll sanity och som en mänsklig läser detta, vilka ord på skärmen är faktiskt kommer att vara djärv? Vilka linjer är faktiskt fet? 

Bara John Harvard. Höger? Eftersom precis som linje 22 säger hej webbläsare, här är en uppdelning av sidan. Gör det teckenstorlek 36 poäng. Gör tecken vikt fetstil. Så fort du når motsvarande sluttagg eller sluten tagg på ledningen 24, det betyder, hej webbläsare, sluta göra vad det är du gör. Och meddelande att vara tydlig, även om linje 22 har alla dessa attribut liknande stil, när du stänga taggen i linje 24, du bara nämna taggens namn. 

Du behöver inte upprepa ordet stil eller något som är inne i dessa citat. Och så om jag ser på detta nu i min webbläsare, låt oss ta En titt på slutresultatet. Låt mig gå Inför den här filen, som är CSS 0. Och det är fortfarande ganska vanligt, men få ganska intressant. Men det visar sig att det finns andra saker som jag kan göra här, och med risk för att detta helt avskyvärda, märker här att i mitt huvudtexten på min webbsida, Jag kan göra något roligt som bg eller bakgrundsfärg. 

Och snabb, vad är din favoritfärg? Grön Jag hörde. Okej. Så nu, om jag slog reload nu, Vi har en grön webbsida. Okej, så det är inte dåligt. Och nu, om jag vill göra detta riktigt cool, jag kan göra färgen på min text även rött. Så låt oss se vad det ser ut. Nu är det ser ganska bra. Och här nere, om du verkligen vill bråka med någon eller om du vill vara en av dem som försöker lura dig att besöka en webbsida sida eftersom de har lurat Google att tro att det finns en hel drös av nyckelord like-- låt oss se, ladda om. Vart tog den vägen? Och där oss. Okej. Så jag säger detta som en sidoreplik, vi ska prata om det här i ett par veckor när vi talar om säkerhet, om du verkligen bädda hela klasar av sökord i en webbsida, även om de inte är synliga för en mänsklig, någon som Google, naturligtvis, kan fortfarande faktiskt hitta detta. Okej, så det är ganska ohyggliga ganska snabbt. 

Och i själva verket är det inte alla så mycket till skillnad från min egen webb sida som ett grundutbildningsprogram, som Jag började googla runt för att hitta tidigare versioner av mina gamla webbplatser. Det var ganska dåligt. Faktum är att jag tycker en precis innan klassen. Men det är värre därute. Detta var tydligen min hemsidan redan 1996. Tydligen jag trodde det var lämpligt att fråga folk deras namn innan de kunde faktiskt se min webbsida. 

Och sedan jag visade dem något dumt, förmodligen. Jag ska gräva upp mer för nästa gång. Men nu, låt oss överväga lite av design. Vi har pratat om stil. Och den här sidan hittills och det mesta jag har skrivit är ganska ren stilistiskt. Men hur är det design? Tja, det finns en hel del redundans i vad jag har gjort här. 

Jag har nämnt ordet färg i ett par ställen. Jag har nämnt teckenstorleken i ett par platser och djärv i ett par ställen. Och i grunden är jag co mingel två språk. Jag har HTML med mina taggar och min attribut och sedan helt plötsligt, mellan offerter, har jag andraspråks idag kallas CSS, som återigen är bara dessa nyckelpar värde eller dessa egenskaper åtskilda med kolon. 

Det visar sig att mycket som i C, där vi kan börja faktor ut någon kod i header-filer, så att vi kan göra samma sak i HTML. Och ett steg i riktning mot detta är följande. Lägg märke till att denna version, är CSS1.html Strukturellt exakt samma webbsida. Så jag har en massa av Divar, men den här gången, jag har blivit av omslaget div som du ser. 

Och jag har gett dessa tre divs top, mitten och botten, unika ID. Detta är trevligt, eftersom de genom ger dessa divisioner av sidan unika identifierare, Jag kan referera dem någon annanstans. Var? Nåväl, låt mig rulla upp. Och så långt, när vi har tittat i spetsen för en webbsida, vad är det enda tagg som vi har haft i huvudet på en webbsida? Lite högre. Bara titeln hittills. Men det visar sig att det finns några andra saker Du kan sätta in där, en av som det kallas en stil tagg. Så för en stund sedan, vi såg vid en stilattribut. Det visade sig att det finns en stil tagg. Den tillhör insidan av huvudet på en webbsida. Och nu märke till vad jag gör. Jag har insidan av denna stil tag följande. Jag bokstavligen nämner på rad 20 i namnet på en tagg som jag vill stilisera. 

Sen har jag öppna klammerparentes och stängt klammerparentes. Så i samma anda som C, men igen, detta är inte en funktion, detta är bara en syntaktisk detalj här. Och sedan naturligtvis, säger jag webbläsaren, hej webbläsare, göra hela kroppen på sidan har en textjustering centrum. Och då detta säger följande. Hej webbläsare, om du ser en HTML element eller tagg i sidan som har en unik identifierare för toppen, så hash symbolen här betyder bara unik idé av toppen, gå vidare och göra sin teckenstorlek 36 och dess textvikt fetstil. 

Hej webbläsare, ett element vars ID är mitt, gör det 24 pixlar. Och hey webbläsare, om du ser en tanken på botten, gör det 12 pixlar. Effekten i slutet är exakt sam. Om jag går in CSS 1, den sidan ser likadan ut. Men vi är ett steg mot en något bättre design. Låt mig nu gå tillbaka hit till CSS2 och se vad jag har gjort. 

Nu sidan är verkligen, verkligen rena. I själva verket kan jag passar alla innehållet på en sida här. Men vad nya tag har jag introduceras, uppenbarligen? Link. Och det är inte det bästa namnet för en tagg, eftersom det inte är en länk i den mening att vi vet det, men det innebär en länk i någon annan fil. Detta är ungefär som kraftiga ingå i C. 

Detta är det sätt på HTML säga hej webbläsare, gå och hämta innehållet i filen heter css2.css. Förhållandet till mig, är att det är en formatmall. Och faktiskt, det är vad en av de S i Cascading Style Sheets medel. Detta är en formatmall. Det är bara textfil som innehåller en hel del egendom. Det är en massa stilar som du vill ansöka till en sida. 

Och så detta tydligen är med hänvisning till en andra fil. Och om jag öppnar det, CSS2.css, märker att allt jag har gjort är att kopiera och klistra in alla av detta i den här filen. Och nu, även om du har aldrig kodad det här förut, bara betrakta med ökända ingenjörs hatt på, varför är detta en bättre utformning förmodligen? Factoring ut de CSS-egenskaper, sätta dem i sin egen fil. Även om vi löst detta problem som fem minuter sedan i den allra första versionen. 

Vi har inte förbättrat sida stilist, detta är bara bättre design i någon mening. Varför tror du? Yeah. Mer flexibel hur? Yeah. Så om du vill gå tillbaka och ändra saker, nu har du en plats där du kan ändra saker. Och faktiskt, för något liknande problem set sju, där vi ska genomföra ett aktiehandel webbplats, som kommer att ha en massa sidor. Och det skulle vara riktigt irriterande om du bestämmer dig, hm, Jag vet inte riktigt gillar 24 pixlar, jag vill att det ska vara 28 pixlar eller något större. Och sedan måste göra en globala söka och ersätta eller öppna alla webbplatsens filer bara för att faktiskt ändra ett värde. Genom facto ut dessa stilar till en central plats, Du kan nu öppna en textfil i CS50IDE i något program, ändra den, spara den, och gjort. Du har förökats de förändringar överallt. Och det skulle vara densamma i en punkt h filen. Så några frågor därmed långt på denna syntax? Okej, så vi har gjort allt det verkar utom faktiskt genomföra hyperlänkar. Och så låt oss gå vidare och göra det. Låt mig gå vidare och skapa en ny fil här. Jag kommer att kalla det link.html, lägg i dagens kod. 

Och jag kommer att göra öppna fäste doc typ html. Som en sidoreplik, denna sak på topp, denna doc typ deklaration, det är det enda som är konstigt med utropstecken. Du behöver bara göra det där och det innebär att vi använder HTML version 5. Äldre versioner av språk hade mycket längre strängar som du behövs för att sätta dit. Så här är ett exempel som kallas länk. 

Jag behöver en kropp av min webbsida här. Och här inne, en href jämlikar låt oss säga HTTP://www.disney.com och min favorit webbplats, kommer vi att säga. Okej, så en mycket ofarlig, användarvänliga sida. Om jag nu går in i min katalog notering här och öppna upp link.html, Vi har hyper text. 

Och faktiskt, det är här H HTTP kommer ifrån. Hypertext transfer protocol handlar om att överföra text som har hyperlänkar till andra källor. Och faktiskt, här är det välbekanta, om retro, blå länken att om du klickar faktiskt kommer att leda mig till Disney.com. Nu, åh, som kommer ut snart. Okej, så nu, vad är några om konsekvenserna av detta? 

Och ärligt talat, börjar världen att få lite mer bekant och även lite skrämmande men också lite mer självförsvarbart när du börjar att förstå dessa saker. Eftersom oddsen är, några av er, om du går genom din skräppostmapp Gmail eller ens inkorgen, har du förmodligen fått någon form av e-post som frågar dig att ändra ditt lösenord kanske eller kanske kontrollera ditt PayPal referenser eller whatnot. 

Och i själva verket kan du ha fått något som säger som klicka här att återställa ditt PayPal-lösenord. Och nu märker, om detta är inte Disney.com men som badplace.com och ladda, observera att text här kunde säga något alls. Och i själva verket är detta bara ord. Varför inte jag faktiskt vara super skadlig och säga http://www.paypal.com. 

Klicka här återställa ditt PayPal lösenord och nu ladda om. Detta ser ganska legitimt, eller hur? Jag menar, jag skulle inte titta på ett e-postmeddelande som bara säger det. Men märker dikotomin här. Det säger www.paypal.com, och i själva verket, vänta en minut, Vi vet att du vill s för säkerheten. Så nu går till www.paypal.com HTTPS, men om du aldrig har gjort det förut, får in i vanan att svävar över små länkar hit. Och det är svårt att se på skärmen där, och det är inte så lätt här. Men här vägen ner i den lilla lilla hörn gör webbläsaren faktiskt berätta att vi tänker att badplace.com stället för Paypal.com. Nu, vart är vi på väg med detta? Alla exempel som vi har gjort i dag, Vi har hårdkodade och skrev ut manuellt. Webben är otroligt ointressant när du hårt koda dina webbsidor så att innehållet är statisk och aldrig förändras. Naturligtvis, alla våra favoritwebbplatser i dag, oavsett om det är Gmail eller Twitter eller Facebook eller valfritt antal andra är dynamiska. De förändras svar på användarinmatning precis som Googles sökresultat. 

Och så på onsdag, vad vi gör är Vi lämnar HTML och CSS introduktion bakom oss och vi tar för givet att vi nu vet det och vi introducerar ett nytt programmeringsspråk kallas PHP, som gillar C, kommer att ge oss befogenhet att faktiskt skapa program att själva generera utdata. I det här fallet, kommer vi att använda PHP för att generera dynamiskt web sidor med denna nya språk. Så mer om det på onsdag. Ser du sedan. 

[MUSIK SPELA]