>> [MUSIC SPILLE]
>> DAVID J MALAN: Dette er CS50 og Dette er starten på uken 7.
Så velkommen tilbake.
Og du husker kanskje at i oppgavesettet fire,
Det var litt av en gatefeier jakten for noen flotte premier hvorved
etter at du gjenopprette bilder av ansatte både her og i New Haven,
du ble utfordret til å finne så mange av disse dataforskere som du kunne.
Og vi har fått en hel haug med innleveringer.
Tenkte jeg skulle dele noen med deg her i dag.
>> Og vi vil legge ut alle disse online.
Men spesielt, jeg ønsket å trekke oppmerksomheten to-- vel en,
Sam var i ganske mange av dem generelt poserer som dette.
Men det viser seg at som av morges, vinneren
ble et visst noen som heter Ken med 24 av de ansatte fanget på kamera
eller noen flere når du tar i kontoen flere ansatte i bildene.
Avbildet her er Ken neste til Mary i New Haven.
>> Nå, Ken, skjønt, snur ut er litt av et hjørne saken
det er ennå ikke skjedd før.
Det viser seg at det ikke forekomme til meg å sette fine print i problem
satt fire som sier at personalet er ikke kvalifisert for flotte premier
fordi Ken er, selvfølgelig, en av fotografene på våre ansatte.
Nå, med det sagt, han opprinnelig skrev meg å si
vennligst ikke legge disse bildene på nettet.
Jeg tror i stor grad fordi de fleste av bildene
at denne fotografen tok ser litt noe sånt som dette.
O.l.
>> Men Ken ønsker meg å berolige deg at han er en veldig god fotograf,
Han er en profesjonell, tar han Bilder som ikke er uklare,
som er bedre i fokus, og han tok ganske mange av våre egne ansatte.
Men heller enn å bare erkjenne Ken, hva vi trodde vi skulle gjøre
er å gå gjennom listen over faktiske studenter som sendes inn.
Og det viser seg at Lance med 15 bilder per i morges
var vår vinner.
>> Og avbildet her er Lance med Colton, med Skaz, med meg selv, og med Sam.
Men så viser det seg at fra og med 11:46, så bare litt siden,
Jeg gikk tilbake til min e-post og funnet at vi hadde enda en innlevering
av en student som heter Bonnie hvis e sa bare dette.
Ikke kommer til å lyve, jeg er gjøre dette i klassen.
Og deretter fortsatte å feste bare 14 bilder, en sjenert av Lance 15.
>> Men i Bonnies bilder, viser det ut var flere medarbeidere, Sam
blant dem, så hva vi trodde vi ville gjøre er erkjenner begge disse.
Så i tillegg til å få Dropbox plass at alle som deltok
mottar disse to avsnittene vil også motta en hyggelig se lunsj for dem
og deres seksjon parrer denne kommende uken.
Og så vil du høre fra oss, Lance og Bonnie, om det.
Så store congrats til dem.
Nå, de av dere som ville som lunsj mer generelt
vet at CS50 lunsj i Cambridge og New Haven er denne fredagen.
Gå til CS50 hjemmeside slash RSVP.
Og nå et ord på seminarer.
Mer curricularly.
Så vi nærmer seg punkt av semesteret
hvor du skal begynne tenker endelige prosjekter.
Og faktisk, på bare litt, vil såkalte pre forslag påløpe.
Så pre forslag er ment å være ganske lav innflytelse og virkelig
bare en mulighet for du vil skrive en liten notis
undervisningen stipendiat apprise ham eller henne hva du tenker deg
kanskje ønsker å gjøre for det endelige prosjektet.
>> Nå, mange studenter ender opp gjør webbasert endelige prosjekter.
Og selvfølgelig, vi er bare nå sist uke i dette
og utover dykke inn i web-programmering.
Så ikke bekymre deg hvis du har absolutt ingen anelse om hvordan
du vil bygge ideene som du kan ha i tankene dine.
Dette er egentlig bare en tvinge funksjon å få deg å tenke og snakke
med TF om det.
Men for å hjelpe deg med det, og med endelige prosjekter slutt,
vet at CS50 har tradisjon tilby seminarer.
>> Og disse er valgfrie, hender på, eller foredrag basert på muligheter
for å lære mer om temaer som er litt ordnet i forhold til kursets
pensum, men likevel fantastisk materiale til å kjøre finale prosjekter.
Og så dette er en liste som er CS50 ansatte her i New Haven
har kommet opp med for dette året om iOS
programmering, Android programmering, spillutvikling,
og bunter av flere verktøy og språk og teknikker.
>> Så hold et øye på CS50 hjemmeside.
Og i mellomtiden, hvis du ønsker å melde din interesse i noen av disse,
gå til CS50 er slash register.
Og vi vil deretter følge opp med hensyn til dager og flytider og steder
og everything-- mest alt vil streames og også tilgjengelig på forespørsel
etter hvis du ikke kan faktisk gjøre det.
Så uten videre, vi slapp sist gang med GET.
>> Og dette var som den meldingen som var innsiden av den virtuelle konvolutt, husker,
at vi gått fra ruter til ruter til ruter mellom en nettleser og en web
server.
Og den meldingen så en litt noe sånt som dette.
Dette var mer uforståelige meldingen som var faktisk inne i en konvolutt
skrevet på et stykke papir som første linje sier bokstavelig, får strek.
>> Og akkurat som en mental helse sjekk, hva gjorde slash betegne?
Hva betyr strek når ber om en nettside?
Du ber om det hele tiden.
De fleste noen gang du besøker et nettsted, du ikke skriv inn et filnavn.
Du har sannsynligvis bare gå til Facebook.com, enter, gmail.com, eller lignende.
Og hva betyr strek representerer?
Hva fil?
Eller hva side, spesielt?
>> Indeksen, ja.
Så standardsiden.
Så hvis du ikke angir en fil navn som vi vil begynne å se,
du faktisk bare ber om gi meg standard siden av Facebook
eller gi meg min innboks eller gi meg standard siden av nyheter
på CNNs nettside eller lignende.
Og en server reagerer deretter at meldingen med noe
som dette, sier ja, jeg snakke HTTP versjon 1.1.
>> 200, som er en status kode som vi mennesker sjelden
gang se fordi det er bra.
Fordi det betyr OK, forespørselen ble mottatt og behandlet riktig.
Og innholdstype tilsynelatende i respons
er ganske ofte, men ikke alltid, tekst.
Og spesielt, HTML.
Og det er faktisk der vi ser på i dag.
>> Så faktisk, jeg kommer til å gå videre og åpne opp en nettleser.
Jeg kommer til å bruke Chrome, kan du bruke mest alle nettlesere i ukene som kommer.
Vi anbefaler generelt Chrome fordi det er spesielt
bra for programvareutviklere.
Det fikk en rekke innebygde verktøy som gjør det enklere
å utvikle ikke bare HTML og CSS, ting vi skal begynne å snakke om i dag,
men også andre språk også.
>> Og jeg kommer til å gå videre og gå to-- Jeg kommer til å kontrollere klikk eller høyre
klikk hvor som helst på en nettside.
Og jeg kommer til å gå til Inspiser Element.
Og jeg kommer til å finpusse min skjermen bare litt her.
La meg flytte denne til bunnen.
Så dette er det som kalles Chrome Inspector.
Så dette er som en debugging verktøy innebygd i Chrome.
>> Alle dere allerede har dette hvis du har vært bruker Chrome.
Og det tillater deg å se hva som skjer på under panseret på noen web-side.
Så la oss faktisk ta en se på dette som følger.
Den har veien flere funksjoner og vi bryr oss om i dag.
Men det er disse kategoriene over her.
Elements, nettverk, kilder, tidslinje, og noen andre ting.
Jeg kommer til å klikke på Nettverk for et øyeblikk.
>> Og det er litt overveldende ved første øyekast her.
Men hva jeg skal gjøre er å la meg forenkle det litt.
Jeg kommer til å slå på innspilling lys slik at det er rødt.
Og jeg kommer til å si bevare logg.
Og dette er bare en liten ting jeg funnet ut
over tid som kommer til å redde alt som skjer i nettleseren.
Og nå kommer jeg til å gå til http://facebook.com.
>> Egentlig, la oss gjøre www for godt mål, skråstrek.
Enter.
Så en URL som mange av du kanskje har besøkt.
Og nå Facebooks nettside siden kommer opp på toppen.
Og så en hel haug med ting fløy av nederst.
Og i virkeligheten viser det seg at når du besøker Facebook.com,
du er ikke bare å lage en HTTP-forespørsel, det viser seg at å gå til Facebook.com
sender 41 av disse konvoluttene, hver med sin egen komme forespørsel,
som angitt, om enn bak skjermen her, i bunnen av skjermen,
det indikerer at, ja, min Nettleseren gjort 41 forespørsler.
>> Og totalt, det overført 861 kilobyte, og det tok en eller annen grunn
så mange som åtte sekunder å laste ned alt dette.
Så det er faktisk litt rart at Facebooks side ville ta den
lang, men så bli det i dette tilfellet.
Nå, alt dette jeg egentlig ikke bryr seg om bortsett fra den øverste forespørsel.
Så la oss gå til denne retten her og la meg zoome ut for bare et øyeblikk.
>> Og la meg zoome inn på dette.
Så det jeg har gjort på igjen selv om det er mye som skjer her borte
er jeg har uthevet Facebook.com og deretter
merker at jeg rulle ned, rulle ned, rulle ned,
å be om overskrifter.
Og du vil se at Chrome viser me hovedsak de indre innholdet
av anmodningen jeg gjorde.
Det er ikke formatering i helt samme måte, men legger merke til det er omtale av få,
merker det er omtale av verten, Facebook.com, banen, eller skråstrek,
som er den filen jeg ba om.
>> Og så hvis jeg blar sikkerhetskopi, vil vi faktisk
se at hva Facebook returnert for meg er alle disse overskriftene.
Så innsiden av det virtuelle konvolutt faktisk er mange viktige verdi-par.
Et ord, et kolon, og deretter en verdi.
Et ord, et kolon, og en verdi.
Disse kalles overskrifter.
Og det er måten mer detalj her enn vi faktisk bryr seg om akkurat nå.
>> Men dette er uten siste der nede,
legge merke til, at Facebook.com server, faktisk sagt her kommer litt tekst HTML.
Så alt dette er å si at når du ber om en web
side fra en nettleser til en server, svarer den serveren
med en omhylling av sin egen innsiden av som er tekst.
Med andre ord, HTML.
Hypertext Markup Language.
Som er et annet språk at vi introduserer i dag
at mennesker eller datamaskiner generere for å iverksette nettsider.
>> Spesifikt, la oss se på dette.
Jeg skal nå gå tilbake til Facebook hjemmeside.
Og jeg kommer til å like kontroll klikk eller høyreklikk
og klikk på Vis sidekilde.
Og selv om du ikke bruker Chrome, IE kan gjøre dette, kan Firefox gjøre dette,
Safari kan gjøre dette, selv om menyen alternativene kan se litt annerledes.
Og dette er HTML som Mark og Selskapet på Facebook har skrevet.
>> Og kollektivt, dette språket her implementerer den blå og den hvite siden
at vi så et øyeblikk siden.
Nå, dette er litt overveldende.
Men hvis vi ser opp øverst til venstre, er vi kommer til å begynne å se noen mønstre.
Det ser ut som det er mye av disse åpen vinkelbrakett
og så er det dette søkeordet HTML.
Her er en annen åpen vinkeljern og hode.
>> Her er, hvis vi bla nedover og ned og ned, jeg er
kommer til å gå videre og prøve å søke etter noe.
Det helt over på høyre her er åpen brakett kroppen.
Og husker fra sist tide at vi foreslo
at den enkleste nettside at et menneske kan skrive
kan se litt noe sånt som dette.
Åpne HTML-kode, åpen hodet tag, åpne tittelen tag,
så lukket tittel, lukket hode, åpen body tag, tekst, lukket kropp,
lukket HTML.
>> Men en pause her for bare et øyeblikk.
Denne koden, selv om du har aldri skrevet det før
men fortsatt ikke helt forstår hva som skjer, ser ganske bra.
Rett, det er veldig rent.
Det er veldig stilistisk hyggelig.
Mange innrykk og tomrom.
Facebooks er det ikke.
Så hvorfor er Facebook så mye verre enn jeg på å skrive HTML?
Tilsynelatende.
>> Høyre, er dette som en av fem for stil.
Det er en overbevisende grunn for dem å kutte disse hjørnene.
All right, slik at de ikke ønsker å gjøre det lettere for deg å lese den.
Så i en viss forstand, er de obfuscating det, liksom scrambling det
minst estetisk så at det er vanskeligere for Myspace
å gå og rive av deres hjemmesiden og HTML for det.
Det viser seg at med programmer skjønt, inkludert Chrome,
vi kan rydde opp dette super enkelt.
Så det er ikke helt det som årsak.
Hva annet kan være årsaken.
Yeah.
Ja, tomrom kostnader data.
Hva mener du?
Ja, akkurat.
Hvis du treffer på Tab-tasten mye eller space bar, vurdere virkningene.
Så hver tast på tastaturet er en [Uhørbart] representert som en byte.
>> Så antar at Mark eller noen av de devs disse dager treffer mellomromstasten bare en gang
i denne HTML-side som representerer Facebook hjemmeside.
Og Facebook har mye av brukerne i disse dager.
Så antar at Facebook sin hjemmeside får besøk av en milliard mennesker i dag.
Og noen på Facebook har traff mellomromstasten bare én gang.
>> Så en ekstra byte, en milliard forespørsler,
hvor mye mer data er Facebook overføring over Internett
fordi noen treffer mellomromstasten på hans eller hennes tastatur?
En milliard byte, eller én gigabyte data sendes fra Facebook-servere
til folk rundt verden for ingen god grunn.
Nå, det er bare én plass.
>> Tenk om vi faktisk rent dette ting opp og rykket det og lagt
mye hvitt plass og tabulatortegn og mellomrom,
du ende opp med å tilbringe gigabyte, hvis ikke terra byte mer plass.
Og så super vanlig i faktiske verden av webutvikling
er å minify koden din.
Og vi vil til slutt se hvordan du kan gjøre dette.
>> Men i dag, vil vi begynne å skrive kode det er faktisk leses av oss mennesker.
Det viser seg, men hvis du går tilbake dette verktøyet i Chrome Inspiser Element,
tidligere, var vi på kategorien Nettverk.
Det viser seg at hvis du går til elementer kategorien, hva du faktisk se
er Chrome ganske trykt versjon av det samme HTML.
Så vi har deobfuscated det.
Så det er ingen match for en datamaskin.
Og nå kan du faktisk klikke seg rundt og begynne
å se hierarkiet som er en nettside.
Så la oss faktisk gjør dette.
Jeg kommer til å gå videre og åpne opp på min Mac et program som heter tekstredigering.
Og minner om at dette er bare en super enkel tekstprogram.
Windows har notepad.exe.
Og jeg kommer til å Verbatim skriver følgende.
Doc typen HTML, åpen brakett HTML, lukket brakett HTML,
vi har hodet på siden her, enden av hodet på siden her,
en tittel vil være som, hallo verden.
>> Og deretter ned her, vi trenger kroppen av websiden.
Lukket kropp.
Og så i her, hallo verden.
Greit.
Så vi har skrevet en super rask nettside.
Jeg kommer til å lagre det som hello.html på skrivebordet mitt.
My Mac kommer til å klage, tenker at, vent litt,
dette er en tekstfil, gjøre du vil kalle det .txt?
Men nei, jeg vil bruke dot HTML.
>> Og hva er fint hvis jeg bare dobbeltklikker denne filen,
hello.html, her er min nettside.
Dessverre er jeg den eneste personen i verden
som kan gå til denne siden akkurat nå.
Fordi der lever det tilsynelatende?
Det er på min Mac, ikke sant?
Som er ubrukelig.
Som ingen i dette rommet la alene på internett
faktisk kan besøke denne siden.
Så i dag, må vi innføre et annet element.
>> Og for å gjøre dette, kommer jeg til å gå videre og åpne opp cloud ni.
Så cloud 9 er selvfølgelig en cloud basert service-- CS50
IDE-- Det har alle våre arbeidsområder kjører et sted på internett.
Og det betyr at alle våre filer er offentlig tilgjengelig allerede.
Så la oss gå videre og gjøre dette.
Jeg kommer til å gå videre og opprette en ny fil NCS50IDE.
Jeg kommer til å lagre det som før som hello.html og klikk lagre.
Og nå bare for å spare tid, jeg kommer å gå videre og kopier lim inn denne koden
snarere enn gjentar det.
Og lagre det.
Og så nå har jeg en fil som heter hello.html.
Men hvordan gjør jeg faktisk åpne den som en web-side?
Vel, det viser seg at bygget inn i CS50 IDE er ikke bare en kompilator som klang
og en debugger som GDB og bunter av andre programmer,
det er faktisk en fullverdig webserveren kjører innenfor CS50 IDE.
>> Alle dere, det vil si, har din egen web server.
Og en web server er bare et stykke av programvare som har som formål i livet
er å tjene opp nettsider.
Å lytte etter forespørsler fra nettlesere og svare med små virtuelle konvolutter
på innsiden av disse er innhold som jeg har skrevet.
Så denne web server er faktisk gratis og åpen kildekode.
Hvor åpen kildekode betyr bare programvare som noen andre har
skrevet at alle av oss kan faktisk se og laste ned og selv
endre kildekoden.
Og det heter Apache.
>> Og vi har gjort det litt lettere å bruker i CS50IDE ved å kalle det Apache 50.
Slik at det faktisk kan forstå følgende.
Jeg kommer til å si Apache 50 start.
Og da er jeg bare kommer til å si prikk.
Og vi ser noen noe uforståelige melding som sier
sette Apache dokument [? gruppe?] hjemmet, ubuntu, uansett hva det er,
slash arbeidsområde.
Starter web server Apache to hell.
>> Så lang historie kort, jeg har nettopp trykket på en knapp
og slått på en webserver som er nå lytte på internett på TCP port
80 ved en bestemt adresse.
Og det står her, og dette vil endre baserte
på brukernavnet ditt og andre faktorer, men merker nå hvis jeg klikker på denne,
IDE50 dot jharvard og så og I så fall merke til at hele denne tiden
For de siste uker, kan du ha
lagt merke til at ditt eget brukernavn er innebygd i høyre hånd
hjørne av CS50IDE.
>> Og som faktisk har vært alt dette tids hvilken adresse du kan
besøke alle dine filer via web.
Til nå har det ikke betydde noe, fordi i C, du vanligvis
vil ha ting som kjører i en terminal, ikke på nettet.
Men i dag, starter vi skriver web-basert kode
at vi ønsker tilgjengelig på offentlige URLer.
Så hva jeg kommer til å gjøre er å klikke på denne nettadressen.
>> Og legg merke til at jeg ser en ganske stygg indeksen, en katalogoppføring,
men hva filen hopper ut av deg sannsynligvis?
Hello.html.
Det er fordi jeg lagret filen i mitt arbeidsområde.
Og hva jeg har fortalt Apache web server er å se i Davids arbeidsområde katalogen.
Og la noen i verden se disse filene.
>> Og faktisk, hvis jeg nå klikk på hello.html,
Jeg ser i denne kategorien akkurat den filen.
Legg merke til nå, cloud 9 er dette gjort noe litt nyttig for oss.
Innenfor CS50 IDE, merke det plutselig en adresse bar.
Det er fordi selv om vi er bruker Chrome for å besøke CS50IDE,
innsiden av CS50IDE er sin egen versjon av en nettleser akkurat nå.
Og så heller enn komplisere ting som sådan,
Jeg kommer til å gå videre og bare kopiere denne nettadressen.
Jeg kommer til å gå videre og bare åpne min egen Chrome-vinduet.
Så det er ingen magi her, ingen CS50IDE.
Jeg skal bare bokstavelig talt lime min J Harvard URL og trykk Enter.
Og voila, nå jeg, og i teorien, alle
på internett, hvis jeg har konfigurert rettighetene på den,
kan besøke denne filen.
Og så nå, hvis jeg sa hello.html, voila, der
er min utrolig uimponerende nettside.
Så la oss gjøre en rask tilregnelighet sjekk.
På grunn av at alle er konseptuelt sett opp.
Og vi har faktisk ikke egentlig lært deg hvordan du skal skrive HTML per se.
Eventuelle spørsmål så langt om hva som skjedde?
Ja.
Betyr CS50 eier disse websidene?
I hvilken forstand?
Godt spørsmål.
Så CS50 sin eier CS50.io.
Vi har faktisk kjøpt dette domenenavnet.
Og av naturen av dere logge inn CS50IDE,
dere alle får det som kalles et underdomene.
>> Så IDE50-Malan, eller IDE50-Rob.CS50.io, det er din unike adresse innen
vår domenenavn.
Så i forbindelse med kurset, du har din egen unike adresse.
Men vi har forenklet ting ved kjøpe toppnivådomenet, CS50 dot
I / O og deretter alle andre er på innsiden av det, så å si.
Og vi vil komme tilbake til dette i et par uker sannsynligvis,
spesielt på siste prosjektet tid, da noen av dere
kanskje få ditt eget domenenavn.
Det er faktisk relativt grei.
Greit.
Så la oss nå gjøre dette.
Jeg kommer til å gå tilbake til CS50IDE, hvor filen min akkurat nå,
hello.html, er ikke alle som interessant.
Jeg vil gjerne gjøre noe litt hyggeligere enn det.
Så jeg kommer til å gjøre noe som dette.
La meg åpne paragraphs.html.
Så dette er en fil jeg skrev på forhånd.
På toppen av det, som alltid, har vi kommentarer.
Men i HTML, kommentarer ser litt annerledes.
På linje tre og linje 14, du se syntaksen for å starte en kommentar
og avslutte en kommentar.
>> Men ingen av sakene i mellom saker funksjonelt.
Det er bare et notat til en menneskelige hva som skjer her.
Og akkurat som en rask sunn fornuft sjekk, hvis jeg ruller nedover,
hva som er den åpenbare nye tag som vi har innført?
Kodene så langt vi har sett er åpen brakett HTML, hode, tittel og kropp.
Men hva er tydeligvis nytt nå?
>> Ja, så s.
Den p tag eller avsnitt tag.
Og da jeg bare lånt noen standard Latinske teksten å utgjøre mine avsnitt.
Fordi det jeg ønsket å demonstrere er hvordan du kan
representere tekstavsnitt i HTML.
Og så hva som begynner å skje her er at det allerede
et mønster utvikling.
Og la meg gå videre og gjøre dette.
La meg først slå av Apache.
Og jeg kommer til å fortelle det til å starte seg selv igjen inne dagens kilde sju
m katalogen.
Slik at jeg har tilgang til alt.
>> Og nå, hvis jeg går tilbake til denne katalogoppføring,
merker jeg ser hver fil fra i dag.
Og du vil se i neste problem sett, vil vi
gi deg instruksjoner for å gjøre akkurat dette.
Hvis jeg åpner paragraphs.html, kan dette også se ut som et programmeringsspråk
til deg hvis du ikke snakke eller lese latin.
Men dette er bare tre avsnitt av teksten som er merket opp i HTML.
>> Og legg merke til avsnittet pauser mellom dem.
Fordi det viser seg, og selv om du
kan være tilbøyelig til å gjøre dette, mens det i den virkelige verden,
Hvis du ønsker å sette linjen pauser mellom ting,
du kanskje rett og slett gjøre dette og traff Lagre.
Og nå, hvis jeg laster her, varsel at alt tåkelegger bare sammen
i bare ett blob av tekst.
Fordi HTML er en slags stum språk.
>> Den er ment å bli brukt i slike måte at leseren vil bare
gjøre eksplisitt hva du ber den om.
Så hvis du ikke forteller det gi meg et nytt avsnitt,
du kommer ikke til å se et nytt avsnitt.
Og faktisk, hva Nettleseren kommer til å gjøre
er selv om du trykker på Enter, la oss si igjen og igjen
og igjen, flytter denne teksten måte ned på skjermen og deretter lagre
og legg, nettleseren kommer å kollapse alle som white space
til bare et enkelt, synlig mellomrom.
Greit.
Så det er avsnittet tag.
Og så hva er mønsteret som er utviklet her?
Vel, synes det å være slik at HTML handler om å starte en tag
og avslutte en tag.
Og hva er et merke?
Vel, det er bare en del av syntaksen.
Åpne brakett, et nøkkelord, lukket braketten, er en tag.
Eller start tag.
Og så når du er gjort uttrykke deg selv,
som i du er ferdig med ledd du gjør så å si motsatt.
Men det motsatte er ikke helt bakover.
>> Du bare prefiks samme tag nevne med en skråstrek som dette.
Greit.
Så det er ikke alt som er spennende.
Og faktisk, vi er ikke noe som gjør det web alt som mer interessant.
Hva om jeg ønsker å gjøre ting større og fet?
Så det viser seg at her er et eksempel i headings.html, hvor i kroppen min,
Jeg har en H1 tag, H2, H3, fire, fem eller seks, som alle
synes ganske uforståelige.
Men hvis jeg går åpne denne eksempel, la oss ta en titt.
Headings.html.
>> Så nettlesere som standard kan gi deg tekst det er stor og fet av ulike størrelser.
H1 er stor.
H6 er mindre og deretter alt i mellom.
Så det er interessant, men fortsatt egentlig nettet jeg vet.
Hva hvis vi ønsker å jeg har noe som en liste. .
Så her er en punktliste over tre av Harvards hus.
>> Hvordan fikk du gå om du gjør dette?
Vel, ta en titt på list.html.
Og her ser vi en Litt funkiness
men la oss vurdere hva som skjer.
Så basert på det du nettopp har sett, UL står for sorterte liste.
Sorterte liste bare betyr punkt.
Det finnes ingen tall.
Det er også noe som kalles en sortert liste, som er et OL på tag.
Deretter LI, er listeelement alt det innebærer.
>> Og så den automatisk tallene alt for deg.
Men igjen, alle mine innrykk og tomrom er bare for min skyld.
Nettleseren er ikke faktisk kommer til å vare.
Så selv om du ikke kunne gjøre dette, bare for å være klar,
du bør ikke selv om leseren vil fortsatt
være i stand til å forstå det helt fint.
Jeg trykket reload i min leseren, jeg klikke reload
og ingen endring skjer fordi nettleseren fortsatt
gjør akkurat det jeg ber den om.
>> Greit.
Så dette er alt bare tekst.
Nå la oss gjøre noe mer interessant.
Jeg kommer til å gå videre og låne noen av HTML.
Jeg kommer til å gå videre og opprette en ny fil her.
Og vi vil kalle dette rick.html.
Vi har uforholdsmessig brukte noe
kalles en rick roll i denne klasse i år, vet jeg ikke,
det bare skjedde organisk.
>> Og nå er det kommet ut av kontroll.
Så jeg skal bare gå med det.
Og hvis jeg går til Google Bilder og Rick Astley.
Hvis du ikke vet hvorfor vi gjør dette, bare lese på Wikipedia.
Hver gang du har klikket på linken, noen har vært ler et sted.
Og la meg gå ahead-- det vi går, la oss se dette bildet.
>> Så her har vi en bilde i Google Images.
Og la oss anta at dette er rimelig overalt på internett.
Så jeg kommer til å anta at det er OK for meg å faktisk sette dette i min nettside.
Jeg kommer til å gå videre og kopiere bildenettadressen.
Og nå hvis jeg går tilbake til Cloud 9, la oss se hva jeg kan gjøre her.
Så her er bare en nettside.
Dette er Rick Astley, haha, Jeg skal nå gå tilbake
til nettleseren min, laste, og interessant.
>> Hvor er Rick?
Så la meg se hva som har skjedd.
Egentlig kommer jeg til å late som om jeg ikke gjorde det.
[Uhørbart] satte ham inn her.
Vi vil komme tilbake til det i et øyeblikk.
Så her er rick.html.
Så det er ikke Rick Astley.
Så det viser seg at vi kan faktisk legge ham inn her.
Dette er Rick Astley.
Jeg kommer til å si gi meg et bilde som kilden er webadressen jeg bare kopiert, som
tilsynelatende er en glad bursdag eller annet.
>> Og nå kommer jeg til å lukke tag som dette.
Så dette er å pakke super lang.
Men legg merke til at alt jeg har gjort er åpen brakett image,
kilde med en egenskap av dette.
Og det er en veldig lang URL.
Og helt på slutten, merke dette.
Hvorfor har jeg gjort slash vinklet brakett i stedet for, som alle andre tag,
som har en åpen hylle, IMG, lukket brakett?
Bare ta en gjetning selv om du har ingen kjennskap overhodet
med HTML før.
>> Så det er slik det stenger kommandoen, men hvorfor
det gjør egentlig ikke gjøre intuitive fornuftig å gjøre noe litt mer
ordrik som nært bilde?
Yeah.
Bare semantisk, er det ingen følelse av starter et bilde og slutter et bilde,
det er enten det eller er det ikke.
Så det ikke fornuftig å forlate et gap for noe annet inne i et bilde.
Du kan bare ikke gjøre det.
Og så syntaksen generelt vil være like
å gjøre skråstreken inne av den åpne tag eller start tag
og deretter traff Lagre.
>> Så hvis jeg nå laste denne filen, nå Jeg har en god nettside matlaging her.
Og vi kunne sikkert virkelig irritere folk
ved å bygge i stedet som en YouTube link.
Og faktisk, helst du noen gang gått til YouTube,
og la meg faktisk et uhell rick rulle meg selv her.
Så Rick roll.
Så rick roll-- jeg kommer til å gå her.
>> [MUSIC SPILLE]
>> OK, en person likte det.
Så legger merke til all denne tiden, hvis du klikk på koblingen Del, du selvfølgelig
få nettadressen som du faktisk kan bygge inn i en e-post eller et rettsmedisinsk bilde
eller i en oppgavesettet eller i et lysbilde.
Og nå, hvis jeg klikker i stedet på embed, Legg merke til at all denne tiden, denne ting
har vært der.
Jeg kommer til å gå videre og kopiere dette.
>> Og bare så vi kan se det bedre, jeg er kommer til å lime det inn i min tekst editor.
Legg merke til at dette er hva YouTube har fortalt deg.
Hver gang du besøker en YouTube-video, hvis du
ønsker å bygge inn videoen på din web side, bare ta dette.
Så dette er nok et HTML kode kalles en iframe.
Eller en linje i rammen.
Slik at det også ser litt mer komplekst enn alle de andre.
Slik at det viser seg at bildet tag og tilsynelatende iframe tag
ta det som kalles attributter.
>> Og dette er en annen stykke syntaks i HTML.
I tillegg til merkets navn, åpen brakett kodenavn,
du kan kontrollere oppførselen til tag ved å ha en hel haug med attributt
lik verdi.
Attributt er lik verdi.
Og så for eksempel, YouTube er å fortelle oss
hvis du vil at bredden på denne videoen å være 420 piksler og høyden
å være 315 piksler, som er hvordan du uttrykker det i HTML.
>> Kilden av videoen går å være så lang YouTube URL
og litt andre ting som rammekanten er null,
slik som sannsynligvis betyr at det er ingen ramme rundt ting.
Tillate full skjerm sannsynligvis betyr at brukeren
kan klikke på en knapp og faktisk fullskjerm videoen.
Så hvis jeg virkelig ønsker å være imponerende her i Rick dot HTML,
heller enn å bruke bildekode, la meg slette det, i stedet lime dette.
Og nå lesse.
Og nå er vi i gang igjen.
Greit, det er nok.
All right, så jeg vil prøve vanskelig ikke å gjøre det igjen.
Så hva er noen av gatekjøkken her?
Så HTML, så stygg som disse websider er, er faktisk ganske enkelt.
Det er ikke et programmeringsspråk.
Det har ikke funksjoner.
Det har ikke sløyfer.
Det har ikke forhold.
Alt den har er dusinvis av forskjellige koder, som hver
har null eller flere attributter.
Og faktisk, det er morsomt om HTML når du begynner å dykke inn
er at det er veldig selvlærevillig.
>> Alt som trengs er en forståelse av den generelle rammen av HTML.
Hva er en tag, hva er et attributt, hvordan du faktisk konfigurere en nettside
som følger.
Og alt annet er egentlig resultatet av å se opp i et online henvisning
eller googling hvordan å gjøre noen teknikk eller som vi har sett,
ser på Facebook kilde kode, ser på en nettside
som du liker ved det er kildekoden og forstå hvordan utviklerne der
faktisk lagt ut ting.
>> Så vi kan gjøre bildene også.
Og faktisk, vi gjorde det en stund siden.
La meg gå videre og bare vise deg.
Her er noen eksempelkode.
Hvis du noensinne vil se gretten katt.
Så merker at jeg kan har et bilde tag her.
Og jeg har fått en kommentar ovenfor det.
Jeg har fått et alternativ tekst for tilgjengelighet.
Så noen som er ved hjelp av en skjerm leseren på grunn av synet
faktisk kan da ha sin skjermleser sier gretten katt.
Fordi hvis de ikke kan se bildet, de
kan i det minste ha sin datamaskin fortelle dem verbalt hva det er.
Og kilden til denne filen er cat.jpeg.
Så faktisk, hvis jeg virkelig ønsket å få flink, hva jeg kunne ha done--
Jeg lover å ikke gå til Rick Astley, så Jeg kommer til å google for en katt i stedet.
Og hvis jeg går til Google Images her, og vi vil anta
at dette er et bilde av katten min.
>> Anta at jeg har kontroll klikket eller høyre klikket på dette, ved et uhell
skummel.
Og cat.jpeg jeg kommer å spare på skrivebordet mitt.
La meg nå gå tilbake til cloud 9.
Legg merke til at her, jeg kan går å laste opp lokale filer.
Og hvis jeg gripe denne fil, cat.jpeg, varsel
at jeg kan dra den og slippe den inn cloud 9
og det kommer til å kjefte på meg her.
>> Fordi vi allerede har gitt deg en cat.jpeg fil,
men det er super enkelt å ta et bilde som du har
tatt fra Facebook eller Flickr eller lignende
og faktisk dra og slippe det inn cloud 9 og deretter gjøre det
en del av din egen personlige nettside eller problem
satt syv eller åtte som vi vil snart se.
Og så når du endelig gå som katten,
forutsatt at jeg lastet ned den samme katten, varsel at-- som var søt.
>> Hva du vil se er noe sånt som dette ansiktet her.
Så de filene du referanse innen en nettside
kan enten være lokale i din egen konto eller fjern på en annen server
som i tilfelle av Rick Astley bildet litt siden.
Så hvor else-- hva annet kan vi gjøre her?
Så la oss ta en titt på følgende.
Du vet hva som er litt kult?
>> Vi har så langt vært å gjøre veldig statiske nettsider.
Jeg ønsker å krydre ting opp som følger.
Jeg ønsker å lage min egen søkemotor.
Så for å gjøre en søkemotor, la oss gå videre og begynne å gjøre dette.
Jeg kommer til å gå videre og skape en ny fil som heter search.html.
Og vi har prefabed versjoner online.
Uff da.
Ikke lim inn i terminalvinduet.
Prefab versjoner online.
Og jeg kommer til å starte som følger.
Så her er begynnelsen på en fil som heter search.html.
Jeg kommer til å lagre den i dagens kilde katalogen.
Jeg kommer til å kalle dette Search.
Egentlig vil vi gjøre det bedre.
CS50 Søk og faktisk helt det.
Og nå, jeg kommer til å si noe som H1 CS50 Search.
Og deretter ned her, H2 kommer snart.
Og bare for å oppsummere, H1 og H2 betyr henholdsvis hva?
>> Ja, så stor og fet, og ikke så stor, men fortsatt fet.
Så hvis jeg lagrer dette og gå over her, la oss se filen search.html.
Greit, og dette er right-- [uhørbart].
Vent litt.
David er forvirret.
Åh, det er akkurat der.
David er en idiot.
OK.
Så det er det.
Så CS50 søk kommer snart.
Så nå, la oss syntetisere hva vi gjorde i forrige uke.
>> Hvor vi snakket om lavere nivå mekanikerne av HTTP.
Og disse nye ideer av HTML, som er like
Dette kodespråk der du forteller en leser nøyaktig hva du skal gjøre
og gjennomføre vår egen søkemotor.
Så i stedet for bare sier kommer snart, er jeg
kommer til å introdusere noe som kalles en form tag.
Og i dette skjemaet, kommer jeg til å har noe sånt som en inngang felt.
>> Og navnet på denne inngangen felt, kommer jeg til å kalle det Q.
Og hvilken type dette inndatafeltet Jeg kommer til å si er bare "tekst".
Og et tekstfelt, som vi vil se, er bare en tekstboks.
Og slik er det ikke ane her for å ha noe på innsiden av det på dette punktet.
Og så jeg bare kommer å lukke kode med den
skråstrek midt i koden selv.
Og så kommer jeg til å har en annen inngang.
Input type tilsvarer send.
Og så kommer jeg til å lukke dette også.
>> Og nå kommer jeg til å dra tilbake hit.
Og allerede ser vi, riktignok ganske stygg, har jeg
fikk begynnelsen av min egen søkeside her.
Faktisk, la meg prøve å rydde opp litt.
Det viser seg at på innspill her, kan jeg ha
en annen egenskap som kalles plassholder.
Og jeg kan se noe som søkeord, eller mer spesifikt, spørring for q.
>> Og legg merke til, nå har jeg denne typen grått tekst
som forsvinner som snart jeg begynner å skrive,
men det er nok noe du har sett i andre nettsider.
Jeg vet egentlig ikke liker Send-knappen.
Så jeg faktisk kommer til å gi Send-knappen en verdi på søk.
Og nå, hvis jeg laste, legge merke til at min knapp blir oppkalt søk.
Du vet, jeg gjør egentlig ikke som logo her.
Så Google Font generator.
>> Jeg ønsker å krydre dette opp videre.
Så CS50 søk.
La meg lage min egen logo.
Det ser bra ut.
Så nå la meg lagre denne as-- kommer på.
Hvor er det hen?
Der.
OK.
Savnet det.
Lagre som.
Dumme nettlesere.
Stand by, skal vi fikse dette en gang for alle.
Det vi går.
Greit.
Unnskyld.
Av dag.
Nå er dette funky.
Avslutt full skjerm.
Greit.
>> Nå, som en normal person, lagre bildet som.
Logo.gif.
Nå kommer jeg til å gå inn CS50IDE og Jeg skal rett og slett ta tak i logoen,
Jeg kommer til å dra den inn min kilde sju katalog,
filen allerede eksisterer, jeg er OK med det.
Så jeg kommer til å overstyre det fordi jeg allerede hadde det.
Og nå hvordan får jeg kvitt dette?
>> La oss gå videre her og gjøre image kilde lik logo.gif.
Lukk dette.
Lagre.
Og nå hvis jeg går tilbake til mitt søk side, nå det ser ganske bra.
Greit, så det har ikke ganske gjort noe nyttig.
Faktisk, la meg prøve å søke for en katt og se hva som skjer.
Katter.
Pokker.
Det betyr ikke bare fungerer, tilsynelatende.
Så hva er nøkkelen brikke som mangler her?
>> Høyre, selv om du ikke kjenner noen HTML, Jeg har begynt å merke opp telefonen skjema
og jeg har fortalt det hvordan du får innganger, gi meg en tekstboks og en send-knappen,
hva stykket er tilsynelatende mangler?
Anta at vi ønsker å faktisk få denne tingen fungerer.
Hva trenger vi å gjøre?
Vi har et behov for å iverksette bakenden database eller søkemotoren selv,
og som kommer til å ta en hel masse tid, ærlig.
>> Så husk hva vi gjorde forrige gang.
Så hvis du søker etter noe på Google og du har på forhånd slått av,
tilbakekalling, instant søk.
Så la meg slå det av slik at dette faktisk
oppfører seg som en eldre skole nettleser, hvis jeg nå søke etter noe som katter,
huske hva nettadressen ser ut.
Det er ganske kryptisk.
Men innebygd i det, husker, er skråstrek søk.
Spørsmålstegn q lik katter.
>> Og det synes å gi meg en hel haug av søkeresultatene.
Så du vet hva jeg skal gjøre?
Jeg kommer til å låne Google for bare et minutt.
Jeg kommer til å gå over her og jeg kommer til å si
at dette danner handling eller destinasjon, så å si,
skal bokstavelig talt være Google.
Og metoden jeg ønsket til bruk kommer til å være få.
>> Så hva er handling?
Handling er nifs navngitt, men det betyr bare
som kommer til å håndtere virkningen av dette skjemaet?
Når jeg klikker Søk, der bør resultatet reise?
Og hvis jeg nå gå tilbake til formen min her og oppdater min nettside
og nå søker etter noe som hund, merker nå
Jeg har re implementert Google.
Høyre?
>> Hvis jeg ønsker å søke etter noe annet, fungerer det for ikke bare hunder,
det fungerer også for katter.
Det fungerer også for CS50.
Og OK, dette er bare henhold overveldende, er det ikke?
Greit, men det fungerer faktisk.
Så hva er egentlig foregått?
Så jeg har lært min nettleser, ved hjelp HTML, for å ta input fra brukeren
og faktisk sende den inngangen til en ekstern server ved hjelp av HTTP.
>> Og fordi nettleseren min forstår HTTP, det faktisk
konstruere URL, slik at det Jeg ender opp med over i nettleseren min,
Legg merke til hva som skjer når jeg søkte på hunden.
Hvis jeg klikker Søk, legge merke til at URL endringer som jeg ment
å google.com/search~~V spør lik hund.
Og det er fordi formen vet, fordi fremgangsmåten er å få,
å bare legge det til at URL der.
>> Nå, disse nettsidene er fortsatt stygg.
Så la oss introdusere en annen stykke syntaks hvis vi kan i dag.
Og dette er noe kjent så gjennomgripende stilark.
Så la meg ta en titt på dette eksempelet her og se
hvis vi kan antyde hva som skjer.
Dette er CSS0.html.
Og det er her ting få litt stygge.
Fordi dessverre, i verden av Internett,
HTML alene kan ikke gjøre alt.
Og så hvis du ønsker å stilisere din webside,
du faktisk trenger å fokusere på estetikk på en annen måte.
Så her, jeg har kroppen til min web side inne i som er en stor div.
Og en div betyr bare divisjon.
Så det er som et avsnitt, men det har ikke de samme semantikk
av et tekstavsnitt.
>> Dette betyr like nettleser, her kommer
et stort rektangulært område av min web side, jeg ønsker å håndtere det spesielt.
Nå er linje 21 hvor det div starter.
Og bare ta en gjetning.
Hva er effekten av linjen 21 i Resten av innholdet på siden?
Sentre det.
Det er alt.
Så vi har ikke sett en måte faktisk sentre teksten.
>> Faktisk min søkemotor, i motsetning til selve Google,
ble all rettferdiggjort over til venstre.
Og så nå på linje 21, jeg sier hei nettleser, opprette en avdeling av siden.
Bare gi meg en stor, usynlig rektangel.
Det er slik jeg ønsker å tenke på websiden.
Og så stilisere det som følger.
Innsiden av disse sitater, nå, er andrespråk
som vi introduserte i dag kalt Cascading Style Sheets.
Heldigvis, for det er ikke et programmeringsspråk,
så det er veldig begrenset i sin syntaks, men også svært begrenset i sin funksjonalitet
mens HTML handler om merking opp data fra en nettside
og strukturen av en webside.
CSS er generelt om siste mil, estetikk,
får den størrelse og farge, og den plassering akkurat midt i en webside.
Og ja, det er dannet med sentrale verdiparene.
>> En eiendom som dette, tekst justere, etterfulgt av et kolon,
etterfulgt av verdien av denne egenskap, som i dette tilfellet er målet.
Og nå legger merke til deg kan neste disse tingene.
Hvis jeg ønsket alt i at Jeg har fremhevet å være sentrert,
det er derfor jeg har linje 21 og tilsvarende linje 31.
Men sett nå ønsker å si John Harvard, velkommen til hjemmesiden min.
>> Copyright symbol John Harvard.
Og da mener jeg ønsker den første av disse linjene til å være ganske stor.
36 piksler.
Så det er en anstendig størrelse.
Og jeg ønsket vekten å være dristig.
Men så under det, Jeg ønsker mindre tekst.
Og under det, jeg vil ha enda mindre tekst.
Unnskyld.
I dag føles som en av dag.
>> Så nå, hva gjør jeg for å uttrykke dette?
Her på linje 22 er en innebygd div eller nestet div, hvis du vil.
Det har også sin egen stil tag.
Jeg spesifisere en skriftstørrelse på 36.
Jeg angir en font vekten av fet.
Her nede, jeg bare angi 24 piksler.
Og til slutt, på linje 28, jeg spesifisere 12.
Så akkurat som en rask tilregnelighet sjekk og som en menneskelig leser dette,
hvilke ord på skjermen er faktisk kommer til å være fet?
Hvilke linjer er faktisk fet?
>> Bare John Harvard.
Høyre?
Fordi like linje 22 sier hei browser, her er en divisjon av siden.
Gjør det skriftstørrelse 36 punkt.
Gjøre skriften vekt fet.
Så snart du kommer til tilsvarende end tag
eller lukket tag on line 24 det betyr, hei nettleser,
slutte å gjøre hva det er du gjør.
Og legg merke til å være klar, selv om linje 22 har alle disse attributtene
aktig stil, når du lukke tag på linje 24,
du bare nevner tag navn.
>> Du trenger ikke gjenta ordet stil eller alt som er inni disse sitatene.
Og så hvis jeg ser på dette nå i nettleseren min, la oss ta
en ser på sluttresultatet. La meg gå fremover til denne filen, som er CSS 0.
Og det er fortsatt ganske vanlig, men får ganske interessant.
Men det viser seg at det er andre ting jeg kan gjøre her,
og at risikoen for å gjøre dette helt skrekkelig,
merke til her at i min Kroppen min webside,
Jeg kan gjøre noe morsomt som bg eller bakgrunnsfarge.
>> Og rask, hva er din favoritt farge?
Grønn jeg hørt.
Greit.
Så nå, hvis jeg treffer reload nå, vi har en grønn nettside.
Greit, så det er ikke ille.
Og nå, hvis jeg ønsker å gjøre dette virkelig kult, jeg kan gjøre fargen på min tekst
selv rødt.
Så la oss se hva dette ser ut.
Nå det ser ganske bra.
Og her nede, hvis du virkelig ønsker å rote med noen
eller hvis du ønsker å være en av dem som
prøver å lure deg til å besøke en nettside side fordi de har lurt Google
til å tro at det er en hel haug av stikkord like-- la oss se, lesse.
Hvor ble den av?
Og der det oss.
Greit.
Så jeg sier dette som en side, vil vi snakke om slike ting i et par uker
når vi snakker om sikkerhet, hvis du faktisk
embed hele bunter av søkeord i en webside,
selv om de ikke er synlige for en menneske, en som Google, selvfølgelig,
kan fortsatt faktisk finne dette.
Greit, så det er ganske heslig ganske raskt.
>> Og faktisk, det er ikke alt at mye i motsetning til min egen web
side som en undervisning som Jeg begynte googling rundt for å finne
tidligere versjoner av mine gamle nettsteder.
Det var ganske ille.
Faktisk fant jeg en like før klassen.
Men det er verre der ute.
Dette var tydeligvis min hjemmesiden tilbake i 1996.
Angivelig jeg trodde det var hensiktsmessig å spørre folk deres navn
før de kunne faktisk se min nettside.
>> Og da jeg viste dem noe dumt, sannsynligvis.
Jeg skal grave opp mer til neste gang.
Men for nå, la oss vurdere en bit av design.
Vi har snakket om stil.
Og denne siden så langt, og nesten alt jeg har skrevet
er ganske rent stilistisk.
Men hva med design?
Vel, det er mye redundans i det jeg har gjort her.
>> Jeg har nevnt ordet farge i et par steder.
Jeg har nevnt skriftstørrelse i et par steder og fet i et par steder.
Og fundamentalt, jeg er co mingling to språk.
Jeg har HTML med mine koder og mitt attributter og deretter plutselig,
mellom sitater, har jeg det andre språket i dag
kalles CSS, som igjen er bare disse sentrale verdi par eller disse egenskapene
atskilt med kolon.
>> Det viser seg at mye som i C hvor vi
kan begynne å faktor ut noen kode i header-filer,
så kan vi gjøre det samme i HTML.
Og et skritt mot som er som følger.
Legg merke til at denne versjonen, er CSS1.html Strukturelt nøyaktig samme nettside.
Så jeg har fått en hel haug av divs, men denne gangen har jeg
blitt kvitt den wrapper div som du ser.
>> Og jeg har gitt de tre divs toppen, midten og bunnen, unike ID-er.
Dette er fint, fordi ved gi disse avdelingene
av side unike identifikatorer, Jeg kan referere til dem andre steder.
Hvor?
Vel, la meg bla opp.
Og så langt, hver gang vi har sett på hodet av en web-side, hva er
den eneste tag vi har hatt i hodet av en web-side?
En litt høyere.
Bare tittelen så langt.
Men det viser seg at det er et par andre ting
du kan sette inn der, en av som det kalles en stil tag.
Så et øyeblikk siden, har vi sett på en stil attributt.
Det viser seg at det er en stil tag.
Den tilhører innsiden av hodet av en web-side.
Og nå merke til hva jeg gjør.
Jeg har innsiden av denne stil tag følgende.
Jeg bokstavelig talt å nevne på linje 20 i navnet på et merke som jeg ønsker å stilisere.
>> Da har jeg åpen klammeparentes og lukket krøllete brace.
Så like i ånden til C, men Igjen, dette er ikke en funksjon
dette er bare en syntaktisk detalj her.
Og så selvfølgelig, jeg forteller leseren, hei nettleser,
gjøre hele kroppen på siden har en tekstjustering av sentrum.
Og så dette er å si følgende.
Hei nettleser, hvis du ser en HTML element eller tag på siden som
har en unik identifikator for toppen, så hash symbol her betyr bare
unik idé av toppen, gå videre og gjøre sin skriftstørrelse 36
og dens font vekt fet.
>> Hei nettleser, et element som ID er sentralt, gjør det 24 piksler.
Og hei nettleser, hvis du ser en Ideen om bunnen, gjør det 12 piksler.
Effekten i ende er akkurat det sam.
Hvis jeg går inn i CSS 1, den siden ser det samme.
Men vi er et skritt mot en litt bedre design.
La meg nå gå tilbake hit for å CSS2 og se hva annet jeg har gjort.
>> Nå siden er virkelig, virkelig ren.
Faktisk kan jeg passe alle innholdet på en side her.
Men hva nye tag har jeg introdusert, selvsagt?
Link.
Og det er ikke det beste navnet på en tag, fordi det ikke er et ledd i den forstand
at vi vet det, men dette betyr en kobling i en annen fil.
Dette er typen som skarp inkludere i C.
>> Dette er måten i HTML å si hei nettleser,
hente innholdet i filen som heter css2.css.
Forholdet, for meg, er at det er et stilark.
Og ja, det er hva en av de S 'i Cascading Style Sheets midler.
Dette er et stilark.
Det er bare tekstfilen inneholder en hel haug av eiendom.
Det er en hel haug med stiler som du vil bruke på en side.
>> Og så dette tilsynelatende er refererer til en andre fil.
Og hvis jeg åpner det, CSS2.css, Legg merke til at alt jeg har gjort
er å kopiere og lime inn alle av dette i denne filen.
Og nå, selv om du aldri har kodet slike ting før,
bare vurdere med velkjente ingeniør hat
på, hvorfor er dette en bedre design sannsynligvis?
Facto ut disse CSS egenskaper, sette dem inn i sin egen fil.
Selv om vi løst dette problem som fem minutter siden
i den aller første versjonen.
>> Vi har ikke forbedret side stilistisk,
dette er bare bedre utforming i en viss forstand.
Hvorfor tror du?
Yeah.
Mer fleksibel hvordan?
Yeah.
Så hvis du ønsker å gå tilbake og endre ting,
nå, har du ett sted hvor du kan endre ting.
Og faktisk, for noe som problem satt syv,
hvor vi vil gjennomføre en aksjehandel nettside,
som kommer til å ha en hel haug med sider.
Og det ville være veldig irriterende hvis du bestemmer deg, hm,
Jeg vet egentlig ikke liker 24 piksler, jeg vil ha det å være 28 piksler eller litt større.
Og så må gjøre en global finne og erstatte
eller åpne alle nettstedets filer bare for å faktisk endre en verdi.
Ved facto ut disse stilene til ett sentralt sted,
Du kan nå åpne en tekstfil i CS50IDE inn noe program,
endre det, lagre det, og gjort.
Du har spredd dem endringer overalt.
Og det ville være det samme i en prikk h filen også.
Så noen spørsmål dermed langt på denne syntaksen?
Greit, så vi har gjort alt det virker
bortsett faktisk gjennomføre hyperkoblinger.
Og så la oss gå videre og gjøre dette.
La meg gå videre og opprette en ny fil her.
Jeg kommer til å kalle det link.html, satt i dagens kode.
>> Og jeg kommer til å gjøre åpen brakett doc typen html.
Som en side, denne tingen på topp, dette doc typen erklæringen,
det er den eneste som er rart med utropstegn.
Du må bare gjøre det der og det betyr at vi ved hjelp av HTML-versjon 5.
Eldre versjoner av språk hatt mye lenger
strenger som du trenger for å sette det.
Så her er et eksempel kalt link.
>> Jeg trenger en kropp av min nettside her.
Og her inne, a href equals la oss si HTTP://www.disney.com
og min favoritt nettside, vil vi si.
Greit, så en veldig ufarlige, brukervennlig side.
Hvis jeg nå går inn i min katalog notering her og åpne opp link.html,
vi har hyper tekst.
>> Og ja, dette er hvor H i HTTP kommer fra.
Hypertext Transfer Protocol er i ferd med å overføre tekst
som har hyperkoblinger til andre ressurser.
Og ja, her er det kjente, hvis retro, blå lenke at hvis klikket,
faktisk vil føre meg til Disney.com.
Nå, oh, som kommer ut snart.
Ok, så nå, hva er noen av konsekvensene av dette?
>> Og ærlig talt, begynner verden å bli litt mer kjent
og også litt skumlere men også litt mer
selv forsvarlig når du begynner å forstå disse tingene.
Fordi oddsen er, noen av dere, hvis du går gjennom Gmail spam-mappen eller
innboksen din, har du sannsynligvis fått noen form for e-post
som ber deg om å endre passord kanskje eller kanskje verifisere
PayPal legitimasjon eller whatnot.
>> Og faktisk, kanskje du har mottatt noe som sier at klikk her
å tilbakestille din PayPal-passordet.
Og nå, merke, hvis Dette er ikke Disney.com
men som badplace.com og laste, merk at teksten her
kunne si noe som helst.
Og faktisk, dette er bare ord.
Hvorfor ikke jeg faktisk være super skadelig og si http://www.paypal.com.
>> Klikk her for å tilbakestille PayPal passord og nå lesse.
Dette ser ganske legitimt, ikke sant?
Jeg mener, jeg ville ikke klikk på en e-post som bare sier dette.
Men legg merke til dikotomien her.
Det sier www.paypal.com, og faktisk, vent litt,
vi vet at du ønsker s for sikkerheten.
Så nå, gå til www.paypal.com HTTPS, men hvis du aldri har gjort dette før,
får det til en vane svever over små lenker her.
Og det er vanskelig å se på skjermen der
og det er ikke alle som enklere her.
Men veien ned her i den lille lille hjørne
gjør leseren faktisk fortelle deg at vi kommer
til badplace.com istedenfor Paypal.com.
Nå, hvor skal vi med dette?
Alle eksemplene vi har gjort i dag, vi har hardkodet og skrevet ut manuelt.
Nettet er utrolig uinteressant når du hardt
kode websidene dine slik at innhold er statisk og aldri forandrer seg.
Selvfølgelig, alle våre favoritt nettsteder i dag,
enten det er Gmail eller Twitter eller Facebook eller en rekke andre
er dynamiske.
De er i endring i respons på brukerundersøkelser
akkurat som Googles søkeresultater.
>> Og så på onsdag, det vi gjør er vi forlater HTML og CSS innføring
bak oss, og vi tar for gitt at vi nå
vet det, og vi introduserer et nytt programmeringsspråk
heter PHP, som liker C, kommer til å gi oss
makt til å faktisk lage programmer som selv genererer utgang.
I dette tilfellet vil vi bruke PHP å generere dynamisk web
sider ved hjelp av dette nye språket.
Så mer om det på onsdag.
Ser deg da.
>> [MUSIC SPILLE]