[Musik spiller] 

David J MALAN: Dette er CS50 og dette er starten på uge 7. Så velkommen tilbage. Og du kan huske, at i problemer sæt fire, der var lidt af en skattejagt for nogle fantastiske præmier hvorved efter du gendanne billeder fra personale både her og i New Haven, du blev udfordret til at finde så mange af disse dataloger, som du kunne. Og vi har fået en hel bundt af indlæg. Tænkte jeg ville dele et par med jer her i dag. 

Og vi vil sende alle disse online. Men i særdeleshed, jeg ønskede at henlede Deres opmærksomhed at-- godt én, Sam var i en ganske få af dem generelt udgør som denne. Men det fremgår, at fra morges, vinderen blev en vis person ved navn Ken med 24 af de ansatte fanget på kamera eller et par mere, når man tager i tegner flere medarbejdere i billederne. På billedet her er Ken næste til Maria i New Haven. 

Nu, Ken, selv om, vender out er lidt af et hjørne sag der er endnu ikke sket før. Det viser sig, at det ikke forekomme til mig at sætte småt i problemer sæt fire, der siger, at personalet er berettiget til de fabelagtige præmier fordi Ken er naturligvis en af fotograferne på vores medarbejdere. Nu, med det sagt, han oprindeligt skrev til mig for at sige venligst ikke bogføre disse fotos online. Jeg tror en stor del fordi de fleste af de billeder at denne fotograf tog ser lidt noget som dette. Og lignende. 

Men Ken vil have mig til at berolige dig at han er en meget god fotograf, han er en professionel, han tager billeder, der ikke er sløret, som er bedre i fokus, og han tog en hel del af vores eget personale. Men i stedet for kun at anerkende Ken, hvad vi troede, vi ville gøre er at gå gennem listen over faktiske studerende, der indsendte. Og det viser sig, at Lance med 15 billeder pr morges var vores vinder. 

Og afbilledet her er Lance med Colton, med Skaz, med mig selv, og med Sam. Men så viser det sig, at fra 11:46, så bare en lille smule siden, Jeg gik tilbage til min e-mail og fundet at vi havde endnu et indsendelse af en studerende ved navn Bonnie hvis e-mail sagde kun dette. Vil ikke lyve, jeg er gøre dette under klasse. Og derefter fortsatte med at vedhæfte bare 14 billeder, en genert af Lances 15. 

Men i Bonnie s fotos, viser det sig ud var flere medarbejdere, Sam blandt dem, så hvad vi troede, vi ville gøre, er at anerkende begge disse. Så ud over at få Dropbox plads, at alle, der har deltaget modtager disse to sektioner vil også modtage en dejlig sørget frokost for dem og deres sektion hjælpere i den kommende uge. Og så du vil høre fra os, Lance og Bonnie, om der. Så store tillykke til dem. Nu, de af jer, der ville som frokost mere generelt ved, at CS50 frokost i Cambridge og New Haven er denne fredag. Gå til CS50 hjemmeside skråstreg RSVP. Og nu et ord på seminarer. Mere curricularly. Så vi nærmer sig punkt af semestret hvor du skal starte tænker endelige projekter. Og i virkeligheden, i bare en smule, vil såkaldt pre forslag skyldes. Så pre forslag er beregnet til være temmelig lav effekt og virkelig blot en mulighed for dig til at komponere en kort note din undervisning stipendiat at underrette ham eller hende, hvad du tænker dig måske ønsker at gøre for din endelige projekt. 

Nu, mange studerende ender gør webbaseret afgangsprojekter. Og selvfølgelig er vi bare nu i sidste uge i dette og ud over dykning i web programmering. Så ikke at bekymre dig, hvis du har absolut ingen idé om, hvordan du ville bygge de idéer, du kan have i dit sind. Dette er egentlig bare en tvinger funktion at få dig til at tænke og tale med din TF om det. Men for at hjælpe dig med det, og med afsluttende projekter i sidste ende, vide, at CS50 har en tradition for at tilbyde seminarer. 

Og disse er valgfrie, hænder på, eller foredrag baseret på muligheder at lære mere om emner, der er lidt underordnet kursets pensum, men ikke desto mindre vidunderlige materiale til at køre afgangsprojekter. Og så dette er den liste, der er CS50 ansatte her i New Haven er kommet op med for i år om iOS programmering, Android programmering, spiludvikling, og klaser af flere værktøjer og sprog og teknikker. 

Så hold øje med CS50 hjemmeside. Og i mellemtiden, hvis du gerne vil registrere din interesse i nogen af ​​disse, gå til CS50 s skråstreg registret. Og vi vil derefter følge op med hensyn til dage og flytider og steder og everything-- fleste alt vil streames, og også tilgængelige on-demand efter hvis du ikke rent faktisk kan gøre det. Så uden videre, vi slap sidste gang med GET. 

Og det var som det budskab, der var indersiden af ​​virtuelle konvolut, husker, at vi gik fra router til router til router mellem en webbrowser og en web server. Og det budskab kiggede lidt noget som dette. Dette var mere Arcane budskab, var faktisk inde i en konvolut skrevet på et stykke papir, hvis første linje siger bogstaveligt, får skråstreg. 

Og ligesom en tilregnelighed check, hvad gjorde skråstreg betegne? Hvad betyder slash mener, når anmoder om en hjemmeside? Du beder om det hele tiden. De fleste hver gang du besøger et websted, du faktisk ikke indtaste et filnavn. Du har sikkert bare gå til Facebook.com, Indtast, gmail.com eller lignende. Og hvad betyder skråstreg repræsenterer? Hvad fil? Hvad eller side, specielt? 

Indekset, ja. Så standardsiden. Så hvis du ikke angiver en fil navn, som vi vil begynde at se, du faktisk bare anmoder give mig standardsiden Facebook eller give mig min indbakke eller give mig standardsiden nyheder på CNN hjemmeside eller lignende. Og en server så reagerer på dette budskab med noget som dette, sige ja, jeg tale HTTP version 1.1. 

200, som er en status kode, som vi mennesker sjældent nogensinde se, fordi det er godt. Fordi det betyder OK, anmodningen blev modtaget og håndteres korrekt. Og den type indhold tilsyneladende i svaret er ganske ofte, men ikke altid, tekst. Og specifikt HTML. Og det er faktisk hvor vi ser på i dag. 

Så i virkeligheden, jeg kommer til at gå videre og åbne en browser. Jeg har tænkt mig at bruge Chrome, kan du bruge de fleste enhver browser i de kommende uger. Vi anbefaler generelt Chrome fordi det er især godt for software-udviklere. Det har fået en masse indbygget værktøjer, der gør det nemmere at udvikle ikke kun HTML og CSS, ting, vi vil begynde at tale om i dag, men også andre sprog. 

Og jeg har tænkt mig at gå videre og gå at-- Jeg har tænkt mig at styre klik eller højre Klik et vilkårligt sted på en webside. Og jeg har tænkt mig at gå til Undersøg Element. Og jeg har tænkt mig at nappe min skærmen bare en lille smule her. Lad mig flytte denne til bunden. Så dette er, hvad der kaldes Chromes Inspector. Så dette er ligesom en debugging værktøj indbygget i Chrome. 

Alle jer allerede har denne hvis du har været bruger Chrome. Og det giver dig mulighed for at se, hvad der foregår på under kølerhjelmen af ​​en eller anden webside. Så lad os faktisk tage en se på dette som følger. Det har måde flere funktioner og vi interesserer os for i dag. Men der er disse faner herovre. Elementer, netværk, kilder, tidslinje, og nogle andre ting. Jeg har tænkt mig at klikke på Netværk for et øjeblik. 

Og det er lidt overvældende ved første øjekast her. Men hvad jeg har tænkt mig at gøre, er at lade mig forenkle det en lille smule. Jeg har tænkt mig at tænde for optage lys, så det er rødt. Og jeg har tænkt mig at sige bevare log. Og det er bare en lille smule ting jeg regnet ud over tid, der kommer til at spare alt hvad der sker i browseren. Og nu jeg har tænkt mig at gå til http://facebook.com. 

Faktisk, lad os gøre www for god foranstaltning, skråstreg. Enter. Så en webadresse, som mange af du måske har besøgt. Og nu Facebooks web side kommer op i toppen. Og så en hel masse stuff fløj ved nederst. Og i virkeligheden viser det sig, at når du besøger Facebook.com, du er ikke bare at gøre en HTTP-anmodning, Det viser sig, at gå til Facebook.com sender 41 af disse kuverter, hver med sin egen GET-anmodning, som anført, omend bag skærmen her, nederst på skærmen, betyder det, at, ja, min browser lavet 41 anmodningerne. 

Og i alt, det overførte 861 kilobyte og det tog en eller anden grund så mange som otte sekunder at downloade alt dette. Så det er faktisk lidt underligt at Facebook websted ville tage at lang, men så må det være i dette tilfælde. Nu, alt dette ved jeg ikke rigtig pleje over undtagen for den øverste anmodning. Så lad os gå til denne ene lige her og lad mig zoome ud for bare et øjeblik. 

Og lad mig zoome ind på dette. Så hvad jeg har gjort på venstre selvom der er en masse i gang herovre er jeg har fremhævet Facebook.com og derefter bemærke, at jeg rulle ned, rulle ned, rulle ned, at anmode overskrifter. Og du vil se, at Chrome viser me væsentlige de indre indhold af anmodningen jeg gjort. Det er ikke formatering i helt det samme måde, men bemærker at der er omtale af få, mærke der er omtale af værten, Facebook.com, stien eller skråstreg, som er den fil, jeg anmodede om. 

Og derefter, hvis jeg ruller sikkerhedskopiere, vil vi faktisk se, at hvad Facebook returnerede for mig er alle disse overskrifter. Så inde i den virtuelle kuvert faktisk er en masse vigtige værdipar. Et ord, et kolon, og derefter en værdi. Et ord, et kolon, og en værdi. Disse er kaldet overskrifter. Og der er langt mere detaljeret her end vi faktisk bekymrer sig om lige nu. 

Men dette er andet at sidste dernede, bemærke, at Facebook.com server, faktisk sagt her kommer noget tekst HTML. Så alt dette er at sige at når du anmoder om en web side fra en browser til en server, at serveren svarer med en konvolut af sine egne inden i hvilken er tekst. Med andre ord, HTML. HyperText Markup Language. Hvilket er et andet sprog at vi indfører i dag at mennesker eller computere genererer for at gennemføre websider. 

Konkret, lad os se på dette. Jeg har tænkt mig at nu gå tilbage til Facebooks hjemmeside. Og jeg har tænkt mig at bare klik kontrol eller højreklik og klik på Vis sidens kilde. Og selv hvis du ikke bruger Chrome, IE kan gøre dette, kan Firefox gøre dette, Safari kan gøre dette, selvom menuen muligheder ser måske lidt anderledes. Og dette er den HTML, som Mark og selskab på Facebook har skrevet. 

Og til kollektivt, dette sprog her implementerer den blå og hvide side at vi så et øjeblik siden. Nu, dette er en smule overvældende. Men hvis vi ser op på øverst til venstre, er vi vil begynde at se nogle mønstre. Det ser ud som om der er en masse af disse åbne vinkel beslag og så er der dette søgeord HTML. Her er en anden åben vinkelbeslag og hoved. 

Her er, hvis vi rulle ned og ned og ned, jeg er kommer til at gå videre og prøve at søge efter noget. Der vej over til højre her er åbneparentes organ. Og husker fra sidste gang, at vi foreslog at den enkleste webside at et menneske kunne skrive ser måske lidt noget som dette. Åbn HTML-tag, åbent hoved tag, åbne titel tag, derefter lukket titel, lukket hoved, åbne krop tag, noget tekst, lukket krop, lukket HTML. 

Men en pause her for et øjeblik. Denne kode, selvom du har aldrig skrevet det før men stadig ikke helt forstår hvad der foregår, ser temmelig godt. Ret, det er meget ren. Det er meget stilistisk rart. En masse af indrykning og hvide rum. Facebooks ikke. Så hvorfor er Facebook så meget værre end jeg til at skrive HTML? Tilsyneladende. 

Right, det er ligesom en ud af fem for stil. Der er en tvingende grund for dem at skære disse hjørner. Okay, så de ikke ønsker at gøre det lettere for dig at læse det. Så i en vis forstand, de er obfuscating det, en slags scrambling det mindst æstetisk så at det er sværere for Myspace at gå og rip off deres hjemmeside og HTML for det. Det viser sig, at med programmer selv om, herunder Chrome, Vi kan rense dette op super nemt. Så det er ikke helt det som årsag. Hvad andet kunne være årsagen. Ja. Ja, blanke koster data. Hvad mener du? Ja, præcis. Hvis du trykker på tabulatortasten et parti eller den mellemrumstasten, overveje konsekvenserne. Så hver tast på tastaturet er en [Uhørligt] repræsenteret som en byte. 

Så formoder, at Mark eller et af de udviklere disse dage rammer mellemrumstasten bare én gang i denne HTML-side, repræsenterer Facebooks hjemmeside. Og Facebook har en masse af brugere i disse dage. Så formoder, at Facebooks hjemmeside besøges af en milliard mennesker i dag. Og nogen på Facebook har ramte mellemrumstasten bare én gang. 

Så en yderligere byte, en milliard anmodninger hvor meget mere data Facebook overføre over internettet fordi nogen ramte mellemrumstasten på hans eller hendes tastatur? En milliard byte, eller en gigabyte data sendes fra Facebook-servere til folk rundt omkring i verden uden god grund. Nu, det er bare en plads. 

Tænk, hvis vi rent faktisk rense dette ting og indrykket det og tilføjet en masse hvidt rum og tabulatortegn og mellemrum, du ender udgifter gigabyte, hvis ikke terra bytes mere plads. Og så super udbredt i faktiske verden af ​​web-udvikling er at minify din kode. Og vi vil til sidst se hvordan du kan gøre dette. 

Men i dag, vil vi begynde at skrive kode det er faktisk læses af os mennesker. Det viser sig dog, hvis du går tilbage til dette værktøj i Chrome Undersøg Element, tidligere, var vi på fanen Netværk. Det viser sig, at hvis du går til Fanen elementer, hvad du faktisk se er Chromes temmelig trykt version af den samme HTML. Så vi har deobfuscated det. Så det er ingen match for en computer. Og nu kan du faktisk klikke rundt og start at se hierarkiet, som er en webside. Så lad os rent faktisk gør dette. Jeg har tænkt mig at gå videre og åbne op på min Mac et program kaldet tekstredigering. Og minde om, at dette er bare en super simpel tekst-program. Windows har notepad.exe. Og jeg har tænkt mig at Verbatim skrive følgende. Doc typen HTML, åben konsol HTML, lukkede beslag HTML, vi har lederen af ​​siden her, enden af ​​hovedet på siden her, en titel vil være som, hej verden. 

Og derefter ned her, vi har brug for kroppen af ​​websiden. Lukket organ. Og derefter i her, hej verden. Okay. Så vi har skrevet en super hurtig webside. Jeg har tænkt mig at gemme det som hello.html på mit skrivebord. Min Mac vil klage, tænker, at, vent et minut, dette er en tekstfil, gøre du ønsker at kalde det .txt? Men nej, jeg vil bruge dot HTML. 

Og hvad er rart, hvis jeg bare dobbeltklikke på filen, hello.html, her er min webside. Desværre, jeg er den eneste person i verden der kan besøge denne side lige nu. Fordi hvor betyder det bor tilsyneladende? Det er på min Mac, ikke? Hvilket er ubrugelig. Ligesom ingen i dette rum endsige på internettet kan faktisk besøge den pågældende side. Så i dag, er vi nødt til at indføre et andet element. 

Og for at gøre dette, vil jeg gå videre og åbne cloud 9. Så cloud 9 er naturligvis et cloud baserede service-- CS50 IDE-- Det har alle vores arbejdsområder kører et sted på internettet. Og det betyder, at alle vores filer er offentligt tilgængelige allerede. Så lad os gå videre og gøre dette. Jeg har tænkt mig at gå videre og oprette en ny fil NCS50IDE. Jeg har tænkt mig at gemme det som før som hello.html og klik på Gem. Og nu bare for at spare tid, vil jeg at gå videre og kopiere indsætte denne kode snarere end genindtaste det. Og gem den. Og så nu har jeg en fil kaldet hello.html. Men hvordan gør jeg faktisk åbne det som en webside? Tja, det viser sig den indbygget i CS50 IDE er ikke kun en compiler som klang og en debugger som GDB og klaser af andre programmer, der er faktisk et fuldt udbygget webserver køre inden CS50 IDE. 

Alle jer, der vil sige, har din egen webserver. Og en web-server er bare et stykke software, hvis formål i livet er at tjene op websider. At lytte efter forespørgsler fra browsere og reagere med lidt virtuelle kuverter inden i hvilken er indhold, som jeg har skrevet. Så dette web-server er faktisk gratis og open source. Hvor open source betyder blot software, som en anden har skrevet, at vi alle kan faktisk se og downloade og endda ændre kildekoden. Og det hedder Apache. 

Og vi har gjort det lidt lettere at brug i CS50IDE ved at kalde det Apache 50. Så det kan faktisk forstå følgende. Jeg har tænkt mig at sige Apache 50 start. Og så jeg bare sige prik. Og vi ser nogle lidt Arcane besked mundheld indstilling Apache dokument [? gruppe?] på hjemmet, ubuntu, hvad det så er, slash arbejdsområde. Starting webserver Apache 2 med succes. 

Så lang historie kort, jeg har netop skubbet en knap og vendte på en webserver, der er nu lytter på internettet på TCP-port 80 på en bestemt adresse. Og det siger her, og dette vil ændre baseret på dit brugernavn og andre faktorer, men bemærker nu, hvis jeg klikker på denne, IDE50 dot jharvard og så og så, bemærke, at al denne tid for de sidste mange uger, kan du have bemærket, at dit eget brugernavn er indlejret i øverste højre hjørne af CS50IDE. 

Og der rent faktisk har været alt dette anden har den adresse, hvor du kan besøge alle dine filer via internettet. Indtil nu har det ikke gjaldt, fordi i C, du generelt ønsker tingene kører i en terminalen, ikke på nettet. Men i dag, starter vi skriver webbaseret kode at vi ønsker tilgængelige på offentlige webadresser. Så hvad jeg har tænkt mig at gøre, er at klikke på dette webadresse. 

Og bemærk, at jeg ser en temmelig grimme indeks, en mappe notering, men hvad fil springer ud på du sikkert? Hello.html. Det er fordi jeg gemte filen i mit arbejdsområde. Og hvad jeg har fortalt Apache webserveren er kigge i Davids arbejdsområde mappe. Og lad nogen i verden se disse filer. 

Og ja, hvis jeg nu klik på hello.html, Jeg ser inden for denne fane netop denne fil. Bemærk nu, cloud 9 er dette kommet noget lidt nyttigt for os. Inden CS50 IDE, mærke at der er pludselig en adresselinjen. Det er fordi selvom vi er bruger Chrome til at besøge CS50IDE, indersiden af ​​CS50IDE er sin egen version af en webbrowser lige nu. Og så i stedet for komplicere tingene som sådan, Jeg har tænkt mig at gå videre og bare kopiere denne URL. Jeg har tænkt mig at gå videre og bare åbne min egen Chrome-vindue. Så der er ingen magi her, ingen CS50IDE. Jeg vil blot bogstaveligt indsætte min J Harvard URL og tryk Enter. Og voila, nu har jeg, og i teorien, alle på internettet, hvis jeg har konfigureret tilladelser korrekt, kan besøge denne fil. Og så nu, hvis jeg sagde hello.html, voila, der er min utroligt underwhelming webside. Så lad os gøre en hurtig tilregnelighed check. Fordi alt dette er konceptuelle oprettet. Og vi har faktisk ikke rigtig lært dig hvordan man skriver HTML per se. Eventuelle spørgsmål hidtil om, hvad der lige er sket? Ja. Er CS50 ejer disse websider? I hvilken forstand? Godt spørgsmål. Så CS50 s ejer CS50.io. Vi har faktisk købt dette domænenavn. Og i kraft af jer logge ind CS50IDE, I alle får, hvad der kaldes et underdomæne. 

Så IDE50-Malan, eller IDE50-Rob.CS50.io, det er din unikke adresse inden vores domænenavn. Så i forbindelse med kurset, du har din egen unikke adresse. Men vi har forenklet tingene ved købe det øverste niveau domæne, CS50 dot I / O og derefter alle andre er indersiden af ​​denne, så at sige. Og vi vil komme tilbage til det i et par uger formentlig, især ved afgangsprojekt tid, når nogle af jer måske ønsker at få dit eget domænenavn. Det er faktisk relativt ligetil. Okay. Så lad os nu gøre dette. Jeg har tænkt mig at gå tilbage til CS50IDE, hvor min fil lige nu, hello.html, er ikke alt, interessant. Jeg vil gerne gøre noget lidt pænere end det. Så jeg har tænkt mig at gøre noget som dette. Lad mig åbne paragraphs.html. Så dette er en fil jeg skrev på forhånd. På toppen af ​​det, ligesom altid, vi har kommentarer. Men i HTML, kommentarer ser lidt anderledes ud. On line tre og linie 14, du se syntaksen for at starte en kommentar og afslutte en kommentar. 

Men ingen af ​​de ting i mellem sager funktionelt. Det er bare en note til en menneske, hvad der foregår her. Og ligesom en hurtig tilregnelighed kontrollere, om jeg rulle ned, hvad er det indlysende nye tag, som vi har indført? De således langt vi har set tags er åbne beslag HTML, hoved, titel og krop. Men hvad er selvfølgelig nyt nu? 

Ja, så s. P-tag eller afsnit tag. Og så vil jeg lige lånt nogle standard Latinske tekst til at udgøre mine stykker. Fordi hvad jeg ønskede at demonstrere er, hvordan du måske repræsentere stykker i tekst i HTML. Og så hvad er begyndt at ske her er, at der er allerede et mønster udvikling. Og lad mig gå videre og gøre dette. Lad mig først slukke Apache. Og jeg har tænkt mig at fortælle det til at starte selv igen inde i dagens kilde syv m mappe. Så at jeg har adgang til alt. 

Og nu, hvis jeg går tilbage til denne mappe registrerede enhed, mærke til jeg ser hver fil fra i dag. Og du vil se i næste problem sæt, vi får give dig vejledning for at gøre netop dette. Hvis jeg åbner paragraphs.html, dette kan samt at ligne et programmeringssprog til dig, hvis du ikke taler eller læse latin. Men dette er blot tre stykker tekst, der er markeret i HTML. 

Og mærke til punkt pauser mellem dem. Fordi det viser sig, og selvom du kunne være tilbøjelig til at gøre dette, henviser i den virkelige verden, Hvis du ønsker at sætte line pauser mellem ting, du måske ganske enkelt gøre dette og ramte Gem. Og nu, hvis jeg genindlæse her, varsel at alt bare slører sammen på blot en klat tekst. Fordi HTML er lidt af en dum sprog. 

Det er beregnet til at blive anvendt på en sådan måde, at browseren vil kun gør udtrykkeligt hvad du fortæller det at gøre. Så hvis du ikke fortæller det give mig et nyt stykke, du kommer ikke til at se et nyt afsnit. Og i virkeligheden, hvad browser kommer til at gøre er selv hvis du trykker på Enter, lad os sige igen og igen og igen, flytte denne tekst måde ned på skærmen, og derefter gemme og læg, browseren går at skjule alt det hvide rum i blot en enkelt, synligt mellemrum. Okay. Så det er det punkt tag. Og så hvad er det mønster, der er at udvikle her? Tja, det synes at være tilfældet, at HTML er alt om at starte et tag og slutter et tag. Og hvad er et tag? Tja, det er bare en luns af syntaks. Åbn beslag, et søgeord, lukket beslag, er et tag. Eller starte tag. Og så, når du er gjort udtrykke dig selv, som i du er færdig med afsnittet, du gør så at sige modsatte. Men det modsatte er ikke helt bagud. 

Du skal blot præfiks samme tag s navn med en skråstreg som denne. Okay. Så ikke alt, spændende. Og i virkeligheden, er vi ikke gør web alt, mere interessant. Hvad hvis jeg ønsker at gøre ting større og fed? Så det viser sig, at her er et eksempel i headings.html, hvor i min krop, Jeg har fået en H1-tag, H2, H3, fire, fem eller seks, som alle synes temmelig mystiske. Men hvis jeg går åbne denne eksempel, lad os tage et kig. Headings.html. 

Så browsere som standard kan give dig tekst der er stor og fed af forskellige størrelser. H1 er stor. H6 er mindre og derefter alt andet i mellem. Så det er interessant, men stadig ikke rigtig på nettet jeg kender. Hvad nu, hvis vi ønsker at jeg har noget som en liste. . Så her er en punktopstilling over tre af Harvards huse. 

Hvordan har du gå om at gøre dette? Nå, tage et kig på list.html. Og her ser vi en lille smule af funkiness men lad os overveje, hvad der sker. Så baseret på, hvad du lige har set, UL står for uordnet liste. Uordnet liste blot betyder punktopstilling. Der er ingen tal. Der er også noget, der hedder en bestilt liste, som er en OL på tag. Så LI, listeelement er alt, hvad det betyder. 

Og så den automatisk tal alt for dig. Men igen, alle mine indrykning og hvide rum er bare for min skyld. Browseren er ikke faktisk vil pleje. Så selv om du ikke kunne gøre dette, bare for at være klar, du bør ikke selvom browseren vil stadig være i stand til at forstå det bare fint. Jeg rammer reload i min browser, jeg klikke reload og ingen ændring sker fordi browseren stadig gør præcis, hvad jeg fortæller det at gøre. 

Okay. Så dette er alle bare tekst. Lad os nu gøre noget mere interessant. Jeg har tænkt mig at gå videre og låne nogle af denne HTML. Jeg har tænkt mig at gå videre og oprette en ny fil her. Og vi vil kalde denne rick.html. Vi har uforholdsmæssigt brugt noget kaldes en Rick roll i denne klasse i år, ved jeg ikke, det netop er sket økologisk. 

Og nu er det kommet ud af kontrol. Så jeg bare kommer til at gå med det. Og hvis jeg går til Google Billeder og Rick Astley. Hvis du ikke ved, hvorfor vi gør dette, bare læse op på Wikipedia. Hver gang du har klikket på linket, nogen er blevet griner et eller andet sted. Og lad mig gå ahead-- der vi går, lad os se billede. 

Så her har vi en billede i Google Billeder. Og lad os antage, at dette er rimelighed overalt på internettet. Så jeg har tænkt mig at antage, det er OK for mig til rent faktisk at sætte dette i min hjemmeside. Jeg har tænkt mig at gå videre og kopier billedets webadresse. Og nu, hvis jeg gå tilbage til Cloud 9, lad os se, hvad jeg kan gøre her. Så her er blot en webside. Dette er Rick Astley, haha, Jeg har tænkt mig at nu gå tilbage til min browser, genindlæse, og interessant. 

Hvor er Rick? Så lad mig se, hvad der skete. Faktisk, vil jeg foregive, at jeg ikke gjorde det. [Uhørligt] sætte ham i her. Vi vil vende tilbage til om et øjeblik. Så her er rick.html. Så det er ikke Rick Astley. Så det viser sig, vi kan faktisk tilføje ham her. Dette er Rick Astley. Jeg har tænkt mig at sige give mig et billede, hvis kilde er den webadresse jeg bare kopieret, hvilket tilsyneladende er en glad fødselsdag eller andet. 

Og nu jeg har tænkt mig at lukke tag som dette. Så dette er indpakningen super lang. Men se, at alt jeg har gjort, er åben beslag billede, kilde med en egenskab ved denne. Og det er en rigtig lang URL. Og til allersidst, bemærke dette. Hvorfor har jeg gjort skråstreg vinklet beslag i stedet for, ligesom alle andre tag, har en åben konsol, IMG, lukkede beslag? Bare tage et gæt, selvom du har ingen kendskab overhovedet med HTML før. 

Så det er, hvordan det lukker kommandoen, men hvorfor betyder det ikke virkelig gøre intuitivt mening at gøre noget lidt mere verbose ligesom tæt billede? Ja. Ja. Bare semantisk, er der ingen følelse af starter et billede og slutter et billede, det er enten der eller er det ikke. Så det giver ikke mening at efterlade et hul for noget andet inde i et billede. Du kan bare ikke gøre det. Og så syntaksen generelt ville være lige til at gøre det skråstreg inde af den åbne tag eller start-tag og derefter ramte Gem. 

Så hvis jeg nu genindlæse denne fil, nu Jeg har fået en god webside madlavning her. Og vi kunne helt sikkert virkelig irritere folk ved at indlejre i stedet som en YouTube-link. Og faktisk enhver tid du nogensinde har gået til YouTube, og lad mig faktisk ved et uheld rick roll mig her. Så Rick roll. Så Rick Roll-- jeg har tænkt mig at gå her. 

[Musik spiller] 

OK, én person ønsket at. Så mærke al den tid, hvis du Klik på Share link, du selvfølgelig få den webadresse, som du kan faktisk integrere i en e-mail eller en retsmedicinsk billede eller i et problem sæt eller i et dias. Og nu, hvis jeg i stedet klikker på embed, bemærke, at al denne tid, det her har været der. Jeg har tænkt mig at gå videre og kopiere dette. 

Og bare så vi kan se det bedre, er jeg kommer til at indsætte den i min tekst editor. Bemærk at det, hvad YouTube har fortalt dig. Hver gang du besøger en YouTube-video, hvis du ønsker at integrere video på din webside, skal du blot gribe dette. Så det er endnu en HTML-tag kaldet en iframe. Eller en på linje ramme. Så det også ser lidt mere komplekse end alle de andre. Så det viser sig, at billedet tag og tilsyneladende iframe-tag tage det, der kaldes attributter. 

Og det er en anden stykke syntaks i HTML. Ud over etikettens navn, åben konsol tag navn, du kan styre adfærden af ​​tag ved at have en hel masse attribut lig værdi. Egenskab lig værdi. Og så for eksempel, YouTube fortæller os hvis du vil have bredden af ​​denne video at være 420 pixels og højden at være 315 pixels, der er hvordan du udtrykker det i HTML. 

Kilden til videoen vil at være, at lange YouTube URL og derefter nogle andre ting Ligesom rammekanten er nul, så formentlig betyder, at der er ingen kant omkring de ting. Tillad fuld skærm sandsynligvis betyder, at brugeren kan klikke på en knap og faktisk fuld skærm videoen. Så hvis jeg virkelig ønsker at være imponerende her i Rick dot HTML, snarere end at bruge billedet tag, så lad mig slette, i stedet indsætte dette. Og nu genindlæse. Og nu her vi gå igen. Okay, det er nok. Okay, så jeg vil forsøge svært ikke at gøre det igen. Så hvad er nogle af de grillbarer her? Så HTML, så grim som disse web-sider er, er faktisk ret simpelt. Det er ikke et programmeringssprog. Det har ikke funktioner. Det har ikke løkker. Det behøver ikke forhold. Alt det har, er snesevis af forskellige mærker, som hver har nul eller flere attributter. Og i virkeligheden, hvad der er sjovt om HTML, når du begynder at dykke ned i er, at det er meget self lærenem. 

Alt det kræver er en forståelse af den generelle ramme for HTML. Hvad er en tag, hvad der er en attribut, hvordan kan du faktisk konfigurere en webside som følger. Og alt andet er virkelig resultatet for at kigge op i en online henvisning eller googling hvordan man gør nogle teknik eller som vi har set, ser på Facebooks kilde kode, ser på en hjemmeside at du kan lide på det kildekode og forstå, hvordan udviklerne dér faktisk lagt tingene ud. 

Så vi kan gøre billederne så godt. Og i virkeligheden, vi gjorde det for et øjeblik siden. Lad mig gå videre og bare vise dig. Her er nogle eksempler på kode. Hvis du nogensinde ønsker at se grumpy cat. Så mærke til, at jeg kan har et billede tag her. Og jeg har fået en kommentar ovenover. Jeg har fået et alternativ tekst til tilgængelighed. Så en person, der er ved hjælp af en skærm læseren af ​​hensyn til syne kan faktisk derefter have deres skærmlæser siger grumpy cat. For hvis de ikke kan se billedet, de kan i det mindste have deres computer fortælle dem verbalt, hvad det er. Og kilden til denne fil er cat.jpeg. Så i virkeligheden, hvis jeg virkelig ønskede at får kloge, hvad jeg kunne have done-- Jeg lover ikke at gå til Rick Astley, så Jeg har tænkt mig at google for en kat i stedet. Og hvis jeg går til Google Billeder her, og vi vil antage at dette er et billede af min kat. 

Antag, at jeg har kontrol klikkede eller højre klikkede på dette, ved et uheld uhyggelig. Og cat.jpeg jeg har tænkt mig at spare på mit skrivebord. Lad mig nu vende tilbage til cloud 9. Bemærk, at her, jeg kan gå til uploade lokale filer. Og hvis jeg gribe denne fil, cat.jpeg, varsel at jeg kan trække det og drop det i cloud 9 og det kommer til at råbe på mig her. 

Fordi vi har allerede givet dig en cat.jpeg fil, men det er super nemt at snuppe et billede, du har taget fra Facebook eller Flickr eller lignende og faktisk trække og slippe det i cloud 9 og derefter gøre det en del af din egen personlige hjemmeside eller et problem sæt syv eller otte, som vi snart vil se. Og så når du endelig besøge dette kat, antager jeg hentede den samme kat, varsel at-- det var sød. 

Hvad du ville se, er noget som dette ansigt her. Så de filer, du henvisning på en webside kan enten være lokale i dit eget konto eller fjernbetjening på en anden server som i tilfældet med Rick Astley foto lidt siden. Så hvor else-- hvad kan vi ellers gøre her? Så lad os tage et kig på følgende. Du ved, hvad der er slags cool? 

Vi har hidtil været at gøre meget statiske websider. Jeg ønsker at spice tingene op som følger. Jeg vil gerne gøre min egen søgemaskine. Så for at gøre en søgemaskine, lad os gå videre og begynde at gøre dette. Jeg har tænkt mig at gå videre og skabe en ny fil kaldet search.html. Og vi har prefabed versioner online. Hovsa. Må ikke indsætte i din terminal vindue. Præfabrikerede versioner online. Og jeg har tænkt mig at starte som følger. Så her er begyndelsen på en fil kaldet search.html. Jeg har tænkt mig at gemme den i dagens kilde mappe. Jeg har tænkt mig at kalde denne søgning. Faktisk, vil vi gøre det bedre. CS50 Søg og faktisk mærke det. Og nu, jeg har tænkt mig at sige noget som H1 CS50 Søg. Og derefter ned her, H2 kommer snart. Og bare for at opsummere, H1 og H2 mener, hvad henholdsvis? 

Ja, så store og fed, og ikke så stor, men stadig fed. Så hvis jeg gemme denne og gå over her, lad os se filen search.html. Okay, og denne ene er right-- [uhørligt]. Stå ved. David er forvirret. Åh, det er lige der. David er en idiot. OK. Så der er det. Så CS50 søgning kommer snart. Så nu, lad os syntetisere hvad vi gjorde i sidste uge. 

Hvor vi talte om lavere niveau mekanik af HTTP. Og disse nye ideer af HTML, som er lige dette kodesprog, hvor du fortælle en browser, præcis hvad de skal gøre og gennemføre vores egen søgemaskine. Så i stedet for bare siger kommer snart, jeg er kommer til at indføre noget, der hedder en form tag. Og i denne form, vil jeg have noget som et input felt. 

Og navnet på denne indgang felt, jeg har tænkt mig at kalde det Q. Og typen af ​​dette input felt Jeg har tænkt mig at sige, er bare "tekst". Og et tekstfelt, som vi får se, er blot en tekstboks. Og så betyder det ikke fornemmer her for at have noget inde i det på dette tidspunkt. Og så jeg simpelthen at gå at lukke tag med at frem skråstreg lige i tag selv. Og så vil jeg har en anden indgang. Input typen lig indsende. Og så vil jeg lukke denne ene også. 

Og nu jeg har tænkt mig at gå tilbage her. Og allerede ser vi, omend temmelig grim, jeg har fik begyndende min egen søgeside her. Faktisk, lad mig prøve at rydde dette op en lille smule. Det viser sig, at der på input her, kan jeg have en anden attribut kaldet pladsholder. Og jeg kunne se noget som søgeord, eller mere specifikt, forespørge for q. 

Og læg mærke til, nu, jeg har denne form for grå tekst der forsvinder som snart jeg begynder at skrive, men det er nok noget du har set i andre web-sider. Jeg kan ikke rigtig lide knappen Send. Så jeg faktisk tænkt mig at give den Indsend knap en værdi af søgning. Og nu, hvis jeg genindlæse, bemærke, at min knap bliver opkaldt søgning. Du ved, jeg ikke rigtig ligesom logo her. Så Google Font generator. 

Jeg ønsker at pifte det op yderligere. Så CS50 søgning. Lad mig skabe min egen logo. Det ser pænt ud. Så lad mig gemme denne as-- tændes. Hvor er det? Der. OK. Mistede den. Gem som. Dumme browsere. Stand by, vil vi løse dette én gang for alle. Der vi går. Okay. Undskyld. Off dag. Nu er dette er funky. Afslut fuld skærm. Okay. 

Nu som en normal person gem billede som. Logo.gif. Nu vil jeg gå ind CS50IDE og Jeg har tænkt mig at bare få fat i logoet, Jeg har tænkt mig at trække det ind min kilde syv mappe, findes filen allerede, jeg er OK med det. Så jeg har tænkt mig at tilsidesætte den fordi jeg allerede havde det. Og nu, hvordan får jeg slippe af med denne? 

Lad os gå videre her og gøre image source lig logo.gif. Luk dette. Gem. Og nu, hvis jeg gå tilbage til min søgning side, nu er det ser temmelig godt. Okay, så det ikke har ganske gjort noget nyttigt. Faktisk, lad mig prøve at søge for en kat og se hvad der sker. Katte. For pokker. Det er ikke bare arbejde, tilsyneladende. Så hvad er den vigtig brik der mangler her? 

Ret, selv hvis du ikke kender nogen HTML, Jeg er begyndt markerer telefonen formular og jeg har fortalt det, hvordan man får input, give mig en tekstboks og en send-knappen, hvad brik tilsyneladende mangler? Antag at vi ønsker at faktisk få denne ting fungerer korrekt. Hvad skal vi gøre? Vi har et behov for at gennemføre bagenden database eller søgemaskinen selv, og det kommer til at tage en hel masse tid, helt ærligt. 

Så husk hvad vi gjorde sidste gang. Så hvis du søger efter noget på Google og du har på forhånd slået fra, tilbagekaldelse, instant søgning. Så lad mig slå det fra således at dette rent faktisk opfører sig som en ældre skole browser hvis jeg nu søger efter noget som katte, huske, hvad URL'en ser ud. Det er temmelig kryptisk. Men indlejret i der, tilbagekaldelse, er skråstreg søgning. Spørgsmålstegn q lig katte. 

Og det synes at give mig en hel masse søgeresultater. Så du ved, hvad jeg har tænkt mig at gøre? Jeg har tænkt mig at låne Google for blot et minut. Jeg har tænkt mig at gå over her, og jeg har tænkt mig at sige at dette danner handling eller destination, så at sige, bør bogstavelig talt være Google. Og den metode, jeg ønskede til brug bliver få. 

Så hvad er handling? Handling er underligt navngivet, men det betyder bare, der kommer til at håndtere virkningen af ​​denne formular? Når jeg klikker på Søg, hvor bør resultatet hen? Og hvis jeg nu gå tilbage til min formular her og genindlæse min webside og nu søge efter noget som hund, mærke nu Jeg har re implementeret Google. Højre? 

Hvis jeg ønsker at søge efter noget andet, det virker for ikke bare hunde, det virker også for katte. Det virker også for CS50. Og OK, det er bare under imponerende, er det ikke? Okay, men det rent faktisk virker. Så hvad der faktisk er foregået? Så jeg har lært min browser, ved hjælp af HTML, for at tage input fra brugeren og faktisk sende denne indgang til en ekstern server via HTTP. 

Og fordi min browser forstår HTTP, det faktisk konstruere webadresse, så at det Jeg ender ovre i min browser, mærke til, hvad der sker da jeg søgte efter hunden. Hvis jeg klikker på Søg, bemærke, at URL'en skifter som jeg hensigten at google.com/search~~V forespørgsel lig hund. Og det er fordi formen ved, fordi metoden er at få, blot tilføje det til den pågældende webadresse der. 

Nu er disse websider stadig grim. Så lad os introducere et andet stykke syntaks, hvis vi kan i dag. Og det er noget kendt som cascading style sheets. Så lad mig tage et kig på dette eksempel her og se hvis vi kan udlede, hvad der foregår. Dette er CSS0.html. Og det er her tingene få lidt grimt. Fordi desværre, i verden af ​​internettet, HTML alene kan ikke gøre alt. Og så hvis du ønsker at stilisere din webside, du faktisk har brug for at fokusere på den æstetik på en anden måde. Så her, jeg har kroppen af ​​min web side inden i hvilken er en stor div. Og en div betyder bare division. Så det er ligesom et stykke, men det ikke har de samme semantik af et stykke tekst. 

Det betyder blot, at den browser, her kommer en stor rektangulær region min web side, jeg ønsker at håndtere det specielt. Nu, linie 21, når denne starter div. Og bare tage et gæt. Hvad er effekten af ​​linje 21 på Resten af ​​indholdet på siden? Centrering det. Det er alt. Så har vi ikke set en måde at faktisk centrering af teksten. 

Faktisk min søgemaskine, i modsætning til den faktiske Google, blev alle berettigede over til venstre. Og så nu på linje 21, jeg siger, hey browser, skal du oprette en afdeling på siden. Bare giv mig en stor, usynlig rektangel. Det er sådan jeg ønsker at tænke på websiden. Og så stilisere det som følger. Inde i disse citater, nu, er et andet sprog at vi introducerede dag kaldet cascading style sheets. Heldigvis er det også ikke et programmeringssprog, så det er meget begrænset i sin syntaks, men også meget begrænset i sin funktionalitet mens HTML handler om opmærke data fra en webside og strukturen af ​​en webside. CSS er generelt om sidste mile, æstetik, få størrelse og farve og placering helt rigtige i en webside. Og ja, det er dannet med centrale værdi par. 

En ejendom som denne, tekst justere, efterfulgt af et kolon, efterfulgt af værdien af ​​denne ejendom, som i dette tilfælde er centrum. Og nu mærke, at du kan indlejre disse ting. Hvis jeg ønskede alt det Jeg har fremhævet for at være centreret, det er derfor jeg har linje 21 og den tilsvarende linje 31. Men formoder nu ønsker at sige John Harvard, velkommen til min startside. 

Copyright symbol John Harvard. Og formoder jeg vil have den første af disse linjer at være temmelig stor. 36 pixels. Så det er en anstændig størrelse. Og jeg ønskede sin vægt til at være fed. Men derefter under dette, Jeg vil have mindre tekst. Og under det, jeg vil endnu mindre tekst. Undskyld. I dag føles som en slukket dag. 

Så nu, hvad gør jeg for at udtrykke dette? Her på linje 22 er en integreret div eller indlejret div, hvis du vil. Det har også sin egen stil tag. Jeg angive en skriftstørrelse på 36. Jeg angive en skrifttype vægt fed. Hernede, kun jeg angive 24 pixels. Og endelig, på linje 28, jeg angive 12. Så bare som en hurtig tilregnelighed kontrol og som menneske læser dette, hvilke ord på skærmen er faktisk kommer til at være fed? Hvilke linjer er faktisk fed? 

Bare John Harvard. Højre? Fordi ligesom linje 22 siger hej browser, her er en division af siden. Gør det skriftstørrelse 36 point. Gør skrifttypen vægt fed. Så snart du nå tilsvarende ende tag eller lukket tag på linie 24, det betyder, hej browser, stoppe med at gøre, hvad det er du gør. Og varsel at være klar, selvom linie 22 har alle disse egenskaber agtig stil, når du lukke tag på linje 24, du kun nævner tag navn. 

Du behøver ikke gentage ordet stil eller noget, der er inde i disse citater. Og så hvis jeg ser på det nu i min browser, lad os tage Et kig på slutresultatet. Lad mig gå videre til denne fil, som er CSS 0. Og det er stadig temmelig almindelig, men at få temmelig interessant. Men det viser sig at der er andre ting, jeg kan gøre her, og risiko for at gøre dette helt hæslige, bemærke her, at i min krop på min webside, Jeg kan gøre noget sjovt ligesom bg eller baggrundsfarve. 

Og hurtig, hvad er dit foretrukne farve? Grøn jeg hørte. Okay. Så nu, hvis jeg ramte reload nu vi har en grøn webside. Okay, så det er ikke dårligt. Og nu, hvis jeg ønsker at gøre dette virkelig cool, jeg kan gøre farven på min tekst endda rød. Så lad os se, hvad det ser ud. Nu er det ser temmelig godt. Og hernede, hvis du virkelig ønsker at rode med nogen eller hvis du ønsker at være en af ​​de mennesker, der forsøger at narre dig til at besøge en web side, fordi de har narret Google til at tro, der er en hel masse af nøgleordene like-- lad os se, genindlæse. Hvor blev det af? Og der er det os. Okay. Så jeg siger dette som en sidebemærkning, vi får taler om det her i et par uger når vi taler om sikkerhed, hvis du rent faktisk indlejre hele klaser af søgeord i en webside, selv om de ikke er synlige for en menneske, en som Google, selvfølgelig, kan stadig faktisk finde dette. Okay, så det er temmelig hæslige temmelig hurtigt. 

Og i virkeligheden, det er ikke alle at meget i modsætning til min egen web side som en bachelor, som Jeg begyndte at google rundt for at finde tidligere versioner af mine gamle hjemmesider. Det var temmelig dårlig. Faktisk fandt jeg én lige før klassen. Men der er værre derude. Dette var tilsyneladende min hjemmeside tilbage i 1996. Tilsyneladende troede jeg, det var hensigtsmæssigt at bede folk deres navn før de kunne faktisk se min webside. 

Og så er jeg viste dem noget dumt, sandsynligvis. Jeg vil grave mere til næste gang. Men for nu, lad os overveje lidt af design. Vi har talt om stil. Og denne side hidtil, og de fleste alt, hvad jeg har skrevet er temmelig ren stilistisk. Men hvad med design? Tja, der er en masse redundans i det, jeg har gjort her. 

Jeg har nævnt ordet farve i et par steder. Jeg har nævnt skriftstørrelse i et par steder og fed i et par steder. Og fundamentalt, jeg er co blander to sprog. I got HTML med mine tags og min attributter og så lige pludselig, anførselstegn, jeg har det andet sprog i dag kaldet CSS, som igen, er blot disse centrale value par eller disse egenskaber adskilt af kolon. 

Det viser sig, at meget ligesom i C, hvor vi kan begynde at faktor ud noget kode ind i header-filer, så kan vi gøre det samme i HTML. Og et skridt i retning, der er som følger. Bemærk, at denne version, CSS1.html er Strukturelt nøjagtig samme webside. Så jeg har fået en hel masse af divs, men denne gang, jeg har fået slippe af indpakningen div, som du vil se. 

Og jeg har givet disse tre divs top, midt og bund, unikke id'er. Det er rart, fordi ved giver disse divisioner af siden entydige identifikatorer, Jeg kan henvise dem andre steder. Hvor? Nå, lad mig rulle op. Og hidtil, når som helst vi har set i spidsen for en webside, hvad der er det eneste tag, vi har haft i hovedet af en webside? Lidt højere. Bare titlen hidtil. Men det viser sig at der er et par andre ting du kan sætte i der, en af som det hedder en stil-tag. Så for et øjeblik siden, vi kiggede på en stil attribut. Viser sig der er en stil-tag. Det tilhører indersiden af hovedet af en webside. Og nu mærke til, hvad jeg gør. Jeg har inde i denne stil tag følgende. Jeg bogstaveligt talt at nævne på linje 20 i navn på et tag, som jeg ønsker at stilisere. 

Så har jeg åben krøllet tandbøjle og lukkede krøllet tandbøjle. Så ligner i ånden til C, men igen, det er ikke en funktion, dette er blot en syntaktisk detaljer her. Og så selvfølgelig, jeg fortæller browseren, hey browser, at hele kroppen af ​​siden har en tekst tilpasning af centret. Og så siger følgende. Hey browser, hvis du ser en HTML element eller tag i den side, har en unik identifikator for top, så hash symbolet betyder her bare unikke idé om top, gå videre og gøre sin skriftstørrelse 36 og dens tekstvægt fed. 

Hey browser, et element, hvis ID er midten, gør det 24 pixels. Og hey browser, hvis du ser en tanken om bunden, gør det 12 pixels. Effekten i sidste ende er præcis den sam. Hvis jeg går ind i CSS 1, den side ser ens. Men vi er et skridt i retning en lidt bedre design. Lad mig nu gå tilbage her til CSS2 og se, hvad jeg ellers har gjort. 

Nu siden er virkelig, virkelig ren. Faktisk kan jeg passe alle indholdet på en side her. Men hvad nyt tag har jeg indført, naturligvis? Link. Og det er ikke det bedste navn til et tag, fordi det ikke er et link i den forstand at vi ved det, men det betyder et link på en anden fil. Det er lidt ligesom skarpe omfatter i C. 

Dette er den måde, HTML at sige hej browser, gå få indholdet af filen hedder css2.css. Forholdet til mig, er, at det er et typografiark. Og ja, det er hvad en af ​​de S 'i Cascading Style Sheets midler. Dette er en stil ark. Det er bare den tekst fil, der indeholder en hel masse ejendom. Det er en hel masse af stilarter at du ønsker at anvende til en side. 

Og så dette tilsyneladende er der henvises til en anden fil. Og hvis jeg åbner det, CSS2.css, mærke til, at alt jeg har gjort er kopiere og indsætte alle dette i denne fil. Og nu, selvom du aldrig har kodet det her før, lige overveje med legendariske ingeniør hat på, hvorfor er det et bedre design sandsynligvis? Factoring ud disse CSS egenskaber, sætte dem ind i deres egen fil. Selvom vi løst dette problem som for fem minutter siden i den allerførste version. 

Vi har ikke forbedret side stilmæssigt, det er bare bedre design i en vis forstand. Hvorfor tror du? Ja. Mere fleksibel hvordan? Ja. Så hvis du ønsker at gå tilbage og ændre tingene, nu, har du ét sted hvor du kan ændre tingene. Og i virkeligheden, for noget lignende problem sæt syv, hvor vi vil gennemføre en bestand handel hjemmeside, der kommer til at have en hel masse sider. Og det ville være virkelig irriterende, hvis du beslutter, hm, Jeg kan ikke rigtig lide 24 pixels, jeg ønsker at det er 28 pixel eller lidt større. Og så nødt til at gøre en globale finde og erstatte eller åbne alle dine hjemmeside filer blot til rent faktisk at ændre en værdi. Ved at factoring disse stilarter i en centralt sted, du kan nu åbne en tekstfil i CS50IDE ind i ethvert program, ændre det, gemme det, og gjort. Du har formeret dem ændringer overalt. Og det ville være den samme i en prik h fil så godt. Så nogen spørgsmål således langt på denne syntaks? Okay, så vi har gjort alt det forekommer undtagen rent faktisk at gennemføre hyperlinks. Og så lad os gå videre og gøre dette. Lad mig gå videre og oprette en ny fil her. Jeg har tænkt mig at kalde det link.html, sat i dagens kode. 

Og jeg har tænkt mig at gøre åbne beslag doc typen html. Som en sidebemærkning, denne ting på top, denne doc typen erklæring, det er den eneste, der er underligt med udråbstegn. Du skal bare nødt til at gøre det der, og det betyder, at vi bruger HTML-version 5. Ældre versioner af sprog havde meget længere strenge, du behov for at sætte der. Så her er et eksempel hedder link. 

Jeg har brug for et organ af min webside her. Og herinde, en href ligemænd lad os sige HTTP://www.disney.com og min favorit hjemmeside, vil vi sige. Okay, så en meget uskadelige, brugervenlig side. Hvis jeg nu går ind i min mappe notering her og åbne op link.html, vi har hyper tekst. 

Og ja, det er her, H i HTTP kommer fra. Hypertext Transfer Protocol handler om at overføre tekst der har hyperlinks til andre ressourcer. Og ja, her er den velkendte, hvis retro, blå link, hvis der klikkes, rent faktisk vil føre mig til Disney.com. Nu, åh, der kommer ud snart. Okay, så nu, hvad er nogle af konsekvenserne af denne? 

Og helt ærligt, starter verden at få lidt mere fortrolig og også lidt skræmmende men også lidt mere selv undskyldende når du begynder at forstå disse ting. Fordi odds er, nogle af jer, hvis du går gennem mappen Gmail spam eller endda din indbakke, har du sandsynligvis fået en slags email der er beder dig om at ændre din adgangskode måske eller måske verificere din PayPal legitimationsoplysninger eller whatnot. 

Og i virkeligheden, har du måske fået noget, der siger ligesom klik her at nulstille din PayPal-adgangskode. Og nu, varsel, hvis dette er ikke Disney.com men ligesom badplace.com og reload, opmærksom på, at teksten her kunne sige noget overhovedet. Og i virkeligheden er det bare ord. Hvorfor ikke jeg faktisk være super ondsindet og sige http://www.paypal.com. 

Klik her nulstille din PayPal adgangskode og nu genindlæse. Dette ser temmelig legitime, ikke? Jeg mener, jeg ville ikke klikke på en e-mail, der bare siger dette. Men bemærk dikotomi her. Den siger www.paypal.com, og i virkeligheden, vent et minut, vi ved, at du vil s for sikkerhed. Så nu, gå til www.paypal.com HTTPS, men hvis du aldrig har gjort det før, får ind i vane med svævende over små links her. Og det er svært at se på skærmen der, og det er ikke alle, der lettere her. Men vejen ned her i den lille lille hjørne gør browseren faktisk fortælle dig, at vi vil at badplace.com stedet for Paypal.com. Nu hvor skal vi hen med dette? Alle de eksempler, vi har gjort i dag, vi har hårdt kodet og indtastes manuelt. Den web er utrolig uinteressant, når du hårdt kode dine websider, således at indholdet er statisk og aldrig ændre sig. Selvfølgelig alle vores foretrukne hjemmesider i dag, uanset om det er Gmail eller Twitter eller Facebook eller en række andre er dynamiske. De er ved at ændre i reaktion på brugerinput ligesom Googles søgeresultater. 

Og så på onsdag, hvad vi gør, er vi forlader HTML og CSS introduktion bag os, og vi tager for givet, at vi nu kender det, og vi indfører et nyt programmeringssprog kaldet PHP, der ligesom C, kommer til at give os beføjelse til rent faktisk at skabe programmer at selv generere output. I dette tilfælde vil vi bruge PHP til at generere dynamisk web sider ved hjælp af denne nye sprog. Så mere om det på onsdag. Så ses vi. 

[Musik spiller]