>> [Muusika mängimine]
DAVID J Humala: Olgu, tere tulemast tagasi.
See on CS50.
See on nädala lõpuks seitse.
Ja see on lõpuks, et tänavapühkija hunt alates probleemi, neli
et sa võiksid meelde tuletada.
Pärast taastumas kõik need JPEG personali,
sa olid vaidlustanud, kui soovite, pildistada ennast nii palju
need inimesed, kui suudad.
Meil on terve hulk ettepanekuid Viimase paari nädala jooksul,
tõepoolest üsna vähe vahetult enne keskpäeva Täna, millest mõned on need siin
püütud siin in-- välja like-- Annenberg Hall tööaega, üks siin
Lowell House koos Nick.
Siin on Ramon püütud telefon.
See oli CS50 lõunasöök.
See oli Jason Skyping koos loovam klassivend,
kes helistas talle sel viisil.
Me ei tea, mis see oli.
>> [NAER]
>> DAVID J Humala: Aga mis on väärt GB.
Siin on Chang, kes sõna otseses mõttes jooksis lavalt
vältida pildistatud üks päevas, kuid lõpuks püütud.
Siin on Nick.
Ja siin on Alison nähtud väljad.
Ja Zamyla isegi leiti kell ballisaal konkurentsi.
Nii et me läheme läbi need pildid, nuputada
kes esitasid kõige esimesel ja tasu
üks vapustav auhinna, kui lubas spec.
Ja me ka järelmeetmete kohta ruumi, mis oli seotud.
>> Paar announcements-- nii lõuna- on taas sellel reedel kell 13:15.
Kui soovite meiega liituda, RSVP sel URL siia.
Jason ilmub jälle siin ühest Need osad, paar aastat
tagasi, mis juhtus sattuda Halloween.
Ja tõepoolest, ta riietunud kõrvits kõnealusel aastal.
Kui vaadata käesoleva paragrahvi tema alates 2011. lõik
kaheksa, kui teil on uudishimulik, kell CS50.tv, ma arvan
See oli aasta, mil tema õhupump töötas.
>> Kui seejärel vaadata sarnane lõik 2012. aastal
näete seda Jason palju tühjendatakse kuna ülikond enam toiminud,
mis on ainult öelda sel reedel, kui soovite
meeldib kitsenduse kõrvits koos Daven ja Gabe ja teised, RSVP juhtidele
kell cs50.harvard.edu aadress.
See tõotab tulla väga lõbus.
Daven, me rääkinud, on nikerdatud kõrvitsad kõik oma elu.
Gabriel Brasiilia on kunagi nikerdatud kõrvitsa jaoks Halloween.
Nii et seal koos nendega, kui ta õpib.
>> Seminarid, meanwhile-- nii õpite kiiresti
mida meie oodatav lõplik projekt, mis sisuliselt
mis taanduvad kavandamisel ja rakendamisel
kõige tahes projekt huvi pakkuda sa, kuigi heaks kiitma
ja juhiseid oma õpetusega mehe.
Lõpupoole semester, tutvustame number
Seminaride, mis on vabatahtlik klasside juhitud õpetamise stipendiaatide ja Harvard
töötajad, sõbrad kursuse üle campus, erinevatel teemadel, mis
on tangentsiaalne Muidugi on aluseks õppekava
kuid siiski kohaldatav, lõbus ja erinevate võimalike lõplik projekte.
>> Näiteks esimene, kui soovid registreerida, pea et URL seal.
Ja see on tootevalik Tänavuse seminari üksi.
Aga siis on meil kümneid seminaride aastaid varem, mis kõik
on omavahel seotud Seminarid menüü võimalus käigus kodulehel.
Nii et kui sa mõtled läheb kaugemale oma mugavuse tsoonist
või pealevõtmine mõned uued oskused, Näiteks programmeerimine iPhone
rakendusi Swift, uus keel Apple või Objective-C
või Android apps või programmi [? kii?] lambid, või mis tahes teemadel
siin ja rohkem, sest kontroll välja registreerimise leht.
>> Nii me alustasime ja sõlmiti Esmaspäeval vaadates HTTP.
Nii kiire refresher-- HTTP, HyperText Transfer Protocol.
Aga mida see tegelikult tähendab?
Mida see tegelikult tähendab?
Kas see käsi?
Ma tean, et sa oled lihtsalt kriimustada oma peaga.
Kuid sa tahad teha ettepanekuid, mida HTTP on?
>> Sihtrühm: Kuidas arvutid suhelda [kuuldamatu].
DAVID J Humala: Ma igatsesin viimane osa.
Kuidas arvuteid suhelda with--
>> Sihtrühm: Internet servereid.
DAVID J Humala: Good-- Internet serverite ja konkreetselt, veebiserverid.
Kuna turult, seal on kamp teenuseid internetis, millest mõned
kasutate ilmselt iga päev vahel chat ja sõnumi, vestelda, ja veebi ja e-posti,
ja teised sarnased.
Ja HTTP on alles protokoll, mis brausereid
rääkida suhtlemisel veebiserverite, ja vastupidi.
Ja analoog inimese maailm võib olla,
Ma laiendada mu kätt raputada mõned teiste inimese ja ta
tunnistab, laiendades tema käsi samuti.
Nii et see on just see protokoll, komplekt konventsioonidega.
>> Ja mis tõepoolest on need konventsioonid?
Noh, see lihtsalt taandub Saates sõnumeid edasi-tagasi,
nagu me siin on kujutatud.
Ja seal on paar võimalust sisse mis saab saata need sõnumid.
Ja võib-olla kõige ühine tuntakse saada.
Ja me näeme kontrasti sellele enne pikk.
>> Aga get taotluse brauseris et server lihtsalt näeb välja selline.
See on hunnik teksti, et see paneb sees virtuaalne ümbrikus.
On väljaspool ümbrik minna paar tükki üksikasju.
Mida on vaja minna ümbrik, niiöelda,
selleks, et saada taotluse nagu see minult veebiserver?
Jah.
>> Sihtrühm: Sinu IP-aadress.
>> DAVID J Humala: Minu IP aadress From valdkonnas, nii et rääkida,
ja muidugi saaja IP-aadress.
Aga kui tegemist on web paketi vajame veidi täpsemalt
See ei ole piisav lihtsalt Kirjuta ümbrik serverisse
sest see server võib olla kuulates erinevaid
Interneti liiklus.
Mis siis veel tegema peame Peale saaja IP?
Jah?
>> Sihtrühm: Kas see TCP?
DAVID J Humala: Hea.
TCP--
>> Sihtrühm: Aadress.
>> DAVID J Humala: Aadress, või sadamast, seda nimetatakse.
Sulge, kuid TCP pordi number.
Ja seal on hunnik neid.
Aga kindlasti kõige tuttav peaks lõpuks
80, mis on vaikimisi ühe kasutatud kodulehekülg liiklust.
Ja teine ​​tuttav üks peagi 443
mida kasutatakse turvalise web liiklus, URL, mis algavad https.
>> Nii et see on see, mis läheb sees ümbrik.
Ja saada / lihtsalt tähendab, anna mulle vaikimisi veebilehele.
Anna mulle just raske sõita, et veebiserver.
Ja loodetavasti veebis server reageerib, OK
ja number 200, mis on vaid konventsioon ütleb jah, kõik
on tõesti OK.
Siin lehel.
Tüüpi veebileht läheb olla teksti, kuid täpsemalt, HTML,
mis me parasjagu sukelduda tagasi.
Ja dot dot dot lihtsalt vahendeid, siin on HTML.
Ja see, kui me kiirenemist lugu täna
tegelikult kirjalikult HTML, HyperText Markup Language, mis
on keel, milles veebilehti on kirjutatud.
See ei ole programmeerimise keel.
Ei ole mingit funktsiooni ega silmuseid ega tingimusi.
See on märgistuskeel, samuti jälle näeme täna,
mis võimaldab määrata kuidas ehitada ja Stilisoida
esteetiliselt veebilehele.
>> Nii see oli üks ja ainult lehe tõesti
vaadeldi, kui lühidalt, esmaspäeval.
Ja teate mõne olulisemad omadused.
Seal on palju avatud nurgaga sulg ja lähedal nurga külge.
Vahel need angled Sulgudes on sõnad.
Ja me ei kavatse hakata kutsudes neid sõnu sildid.
Nii avatud sulg juht ja suletud sulg juht
on avatud ja suletud silte või alguse ja lõpu sildid
eestvaates, HTML element, nagu me nimetame seda, mida nimetatakse pea.
Ja sama kõnepruuki kehtib keha HTML ja nii edasi.
>> Ja mis kena on HTML-- ja tõepoolest jagame
kulutada kohutavalt vähe aega peal, sest sa oled enamasti lihtsalt aru saada,
milliseid funktsioone see on, kui sa tegelikult on konkreetne probleem
et solve-- leiad, et brauser on päris loll.
See lihtsalt läheb do-- ole erinevalt computer-- mida sa öelda tahad.
Ja kui teil on avatud sulg HTML tipus
seal, et sisuliselt tähendab lihtsalt, hei, brauser,
siin on veebileht kirjutatud HTML.
>> Kui ta näeb avatud sulg pea, see tähendab lihtsalt,
hei, brauser, siin on head või tähtsaim osa minu veebilehele.
Kui ta näeb suletud sulg pea, see tähendab lihtsalt, hei,
Ongi pea.
Ooterežiim midagi muud.
Ja et midagi on ilmselt saab olema keha.
Ja kui sul ei ole tag, nagu sa pead lihtsalt tere, koma maailmas
See on lihtsalt saab olema toores tekst lõpuks kuvatakse ekraanile.
>> Nüüd märkad liiga taandus siin.
Saate ilmselt järeldada, kuidas me stylizing ta.
Iga kord, kui ma avan tag nii rääkida, ma taandega.
Ja iga kord, kui ma sulen silt, ma taanduse,
sarnase sisuga lokkis traksid.
Ja pärast seda, ma olen selline kasutades minu otsus.
Pange tähele, et ma ei viitsinud pihta Sisesta sees, et pealkiri tag.
Miks?
Noh, ma lihtsalt otsustasin, et see tundus vähe puhtamaks mulle inimene,
lihtsalt ei viitsinud seda tehes.
Nii et jällegi, seal on mõned otsus nõuab ainult
nagu seal on C või mistahes keeles.
>> Aga teate ka seda, et kõnealused kumerus sobiv vaimne mudel,
mitte üle keeruliseks.
Aga puu, eks?
Kui te arvate, web lehekülg, ilmselt kirjutatud
niimoodi, nagu oleks kenasti liigestatud niimoodi,
saab peaaegu mõtle avatud sulg HTML suletud sulg tag piiritlemise
juur sõlme, sugupuu stiili sõlme stiilis puud
me vaatasime eelmisel reedel.
>> Ja tõepoolest, meil on siin mida me kutsume DOM, D-O-M, dokument
objekti mudeli, fancy viis öelda puu, mis kinnitab, et HTML.
Ja teate, et HTML on, ütleme, nagu sugupuu, kaks last.
Vasakul on peas.
Paremal on keha.
>> Ja nagu meeletu mõtte liikumine, pea, on muidugi, kui palju lapsi
vastavalt sellele struktuur?
Nii lihtsalt üks, title-- ja sellepärast on meil
nool läheb peast pealkiri.
Nii et see on, nagu oleks see isik sugupuu oli ainult üks järglastele.
Ja siis pealkiri ise ei öelda, et on laps ka.
>> Tuletame meelde, et HTML tuli tere, koma maailma selle all.
Ja ma olen lihtsalt joonistatud jooksul ovaalne asemel ristkülik lihtsalt
edasi semantiliselt et kuigi see on sõlme puu, niiöelda
see on omamoodi täiesti erinev.
See ei ole tag.
Või õigemini, see ei ole element.
See on lihtsalt tekst tipp, kui soovite.
Aga need on täiesti suvalise inimese konventsioonidega.
See on just minu viis esindavate mida ma agregaadina
helistage dokument.
>> Ja kui kõrvale, asi on super üleval vasakus nurgas,
avatud sulg hüüumärk doc tüüp HTML, see näeb välja nagu tag
aga see on loll nurgas juhul, kui mis on just seal, kopeerida ja kleepida
näidata brauserid see on HTML versioon 5.
Maailma pidevalt muutub, mida esimene rida koodi lehel peaks olema.
See tähendab lihtsalt, versioon 5.
Nii et see ei ole päris nägema teistega.
>> Olgu, nii selle ütles, oled nüüd hindan
Selle üsna loll tätoveering keegi sai.
>> [NAER]
>> DAVID J Humala: Olgu, ja nüüd lähme tegelikult sukelduda
arvesse midagi sellega.
Sul on tuletada meelde, et viimane aeg Ma avanud CS50 Appliance
ja ma tegin midagi nii lihtne avamise gedit.
Ja ma salvestatud faili isegi minu desktop-- kuhugi special--
kui hello.html.
>> Nii et lubage mul seda teha again-- hello.html Enter.
Ja nüüd see fail, ma lähen minna ja korrata, mida me lihtsalt
saw-- doc tüüp html Siis ma lähen teha avatud sulg html suletud sulg.
Ja siis ma lähen preemptively avada ja sulgeda tag.
Miks?
Just nii ma ei unusta hiljem.
See on lihtsalt hea tava, nagu avamine ja sulgemise looksulg korraga.
>> Ja mis siis tuli järgmine?
Sa ei mõtle tätoveering.
>> Sihtrühm: peas.
>> DAVID J Humala: peas.
Ja siis siin, ma oli pealkiri, ma arvan.
Ja pealkiri oli omavoliliselt, hello, world lähedal pealkiri.
Ja siis siin, keha, ning course-- siis me lõpetame body.
Ja siis lihtsalt mõnevõrra liigselt, Mul oli sama asi siin.
>> Nii et ma väita, et see on veebilehele.
See on midagi, nüüd võimalus elada veebis
kuigi muidugi, see on sõna otseses mõttes elab minu töölaual kohe.
Aga tõesti, kui ma minimeerida gedit, Ma vaatan minu töölaual selle ikoonil.
Kuigi see on seade, sa võiksid seda teha Mac OS
ilma TextEdit või Windows Notepad isegi.
>> Ja kui ma minna ja topeltklõps et isegi, ja select-- noh, olgem
ei vali, et kuna Chrome on avamata.
Lähme edasi ja avage Chrome.
Ja siis teha Command-O avatud Ja navigeerida minu töölaual
ja seda faili avada.
See, kuidas brauser tõlgendab HTML, ülevalt alla, vasakult paremale.
Hei, brauser siin on HTML.
Siin on head.
Siin on pealkiri.
Siin on keha.
Ja tõepoolest, see on, kuidas see muudab selle veebilehe.
>> Aga teate URL.
Ükski võid tõmba selle konkreetse lehel oma sülearvutid just nüüd,
isegi sees oma seadme kaudu, et URL,
sest file: // näitab, et ta on tegelikult minu failisüsteemi, mu kõvaketas,
mitte sinu.
Nii et see ei ole nii kasulik.
>> Olgem nüüd liigud kasutades tegelikku veebiserver.
Ja selgub CS50 Appliance on rohkem kui lihtsalt keskkonnas, kus
võite kirjutada C ja kompileerida ja kasutada seda nagu sa oled teinud.
Samuti on konfigureeritud töötajate esindamiseks tüüpiline web
server, mis on internetis, üks, et võite maksma
või üks, mis on ka nn pilve.
>> Ja see töötab standard vabavaraline
tarkvara, näiteks midagi nimega Apache, mis on võib-olla
veel populaarsemaid web server tarkvara maailmas
et tuhanded veebisaidid kasutavad täna.
Ja see ka on isegi tarkvara nagu MySQL,
mis on andmebaasi server et me lõpuks saada,
mis on ainult öelda Saan alustada ravivad
minu seade nagu küps server et ma ei maksa mujal.
See lihtsalt elab oma sülearvuti arengut ja heaolu eesmärgil.
>> Nii et lähme edasi ja seda ära.
Ma lähen edasi minna ja avada terminali aknas.
Ja ma lähen edasi minna ja move-- tegelikult esimene Ma olen
läheb navigeerida minu töölaual.
Kui ma ls, seal on hello.html.
Ja ma lähen minna ja hakata kasutama
uus kataloog me oleme ei ole kasutatud enne täna.
>> hello.html-- ma lähen liikuda et ../vhosts virtuaalse hosts--
rohkem, et future-- ja seejärel arvesse kataloog nimega localhost,
mis on hüüdnime pöörata peaaegu mis tahes arvuti, kas see on Mac, PC,
või Linuxi arvuti ja seejärel spetsiifiliselt arvesse kataloog, et me
personali juba loodud teile, kui sa alla laadida seadet nimega
avalik.
Ja nagu nimigi ütleb, midagi Panin selle kausta, teoreetiliselt
läheb nüüd avalik, vähemalt inimesed
kellel on otsene Seoses minu arvuti.
>> Nüüd lubage mul minna ja teha cd Sama kataloog
et ma saaks näha, mis on toimub ja tüüp ls.
Ja tõepoolest, see on Ainuke asi seal.
Väidan, et nüüd, sest ma olen panna see esitada hello.html sees kataloog
nimetatakse avaliku sees kataloog nimetatakse localhost sees kataloog
nimetatakse vhosts, mis tänu CS50 töötajad
on eelnevalt konfigureeritud just oma veebiserver,
Nüüd saan loodetavasti teha.
>> Ma lähen avada uus sakk.
Ja ma lähen ei file: //.
Ma lähen, et kasutada tegelikke http / localhost, mis
jällegi hüüdnime minu enda server.
Ja siis ma lähen, mida faili nimi, lihtsalt et oleks selge?
Kus on see lugu ilmselt läheb?
hello.html.
>> Nii et teiste sõnadega, ma tahan nüüd seda on minu arvuti, minu aparaat,
nagu ta on tegelik server.
Tema hüüdnimi on localhost.
Aga mõtle localhost samasuguste Facebook.com google.com, mis iganes.
See on lihtsalt minu koha nimi.
Ja siis lõpliku tahan on Juur kõvaketas, niiöelda
või root veebiserver, Ergo kaldkriipsuga ja seejärel
faili nimi hello.html.
>> Lubage mul välja suumida ja vajuta Enter.
Ja tõepoolest, nüüd on minu veebilehele.
Nii et see on veidi erinevad.
Ja see on lihtsalt nii underwhelming.
See on vana versioon.
Lubage mul kahaneb font tagasi.
See on vana.
See on uus.
Aga mis on põhimõtteliselt juhtub Nüüd on see HTTP kasutatakse.
>> Teeme seda veidi selgemaks või kui soovite, veidi keerulisem.
Lubage mul minna põhja õigus nurgas minu aparaat.
Ja teate, et see kõik aeg, seal on olnud mitmeid.
See on unikaalne aadress Teie CS50 Appliance.
See on era-aadressi, Nagu võib järeldada 172,16,
mis tähendab lihtsalt, ainult sa füüsiliselt pääseb see veebiserver.
Kõik on tulemüüri ja kenasti kaitstud ülejäänu
maailma, sest see on suunatud.
>> Ja nüüd teate küll, kui ma lähen see aadress, mitte minu aparaat,
kuid Mac OS-- ma lähen minna tagasi siia.
See on minu Mac nüüd.
Ja nüüd ma lähen avama Selle versiooni Chrome siin.
Ja ma lähen http: //172.16.25 / Ja ma unustan rest-- 133.
>> Ma lähen külastama minu Mac et IP aadress /hello.html Enter.
Ja nüüd ma näen, minu Mac et minu CS50 Appliance, kes on
IP-aadress on see, et number, on tõepoolest käituvad
nagu web server internetis.
See ei ole kena lihtne mäletan nime nagu Facebook.com,
aga see on HTTP ilmselt, kuigi Chrome
on selline lihtsustamine maailma meil aga ei näita meile HTTP.
Aga see on tõesti just nii.
Chrome on lihtsalt säästa mõned klahvivajutused nendel päevadel.
Ja see, mida me praegu näeme.
>> Nii et kõik on hästi ja hea.
Aga see on päris underwhelming lehel.
Lubage mul minna ja teha midagi veidi teistsugune nüüd.
Nii et lubage mul minna tagasi gedit.
Ja selle asemel, hello, maailmas, paneme pildi.
Ja ma nõuda before-- lase mul minna minu localhost kataloog avalik.
Ja lubage mul minna ja kopeerida terve hunnik faile täna
minu Dropbox kaust siin.
>> Nüüd, kui ma tüüpi ls, vaata kõiki neid faile
et olen jaotatavast Muidugi veebilehel enne täna
millest üks on ikka hello.html.
Nii et see on üks.
Ja meenutada seda rumal üks Eelmise AEG_ cat.jpg.
Nii et lubage mul proovida kinnistada cat.jpg sees minu veebilehele.
>> Ma lähen edasi minna ja teha cat.jpg salvestada.
Lubage mul minna tagasi Chrome.
Ja las ma suumida font ja nüüd uuesti laadida.
Vabandust, kui ma panen selle?
Standby-- mul on veel vana versioon minu töölaua avatud.
Nii et lubage mul minna minu vhost, minu localhost, minu avalik ja hello.html.
Nüüd lubage mul minna ja öelda cat.jpg korpuse sees
kui ma tahan, et see oleks kuvatakse ja uuesti laadida.
Muidugi, see ei ole õige.
>> Nii et ma pean ütlema brauseri vähe rohkem teadlikult, mida ma tahan seda teha.
Lihtsalt kirjutades nimi on ilmselt ei piisa.
Nii et tuletada meelde, et seal oli veel tag, pilt, img lühikeseks.
See on lihtsalt sellepärast, et inimestel ei meeldi tüüp täis sõnu.
Ja siis me saame teha, source = "cat.jpg".
>> Ja nüüd ma lähen tegema üks asi erinev siin.
Kuigi kõik Meie silte siiani on
oli see mõiste start tag ja end tag,
et tegelikult ei tee mõistlik pilt, eks?
Pilt on kas seal on olemas või mitte.
Ja nii inimestel tulnud üles lihtsama konventsioon.
Kui teil on silt, et saab nii alustamine ja lõpetamine samal AEG_
see võib olla tühi, nii et speak-- lihtsalt pane kaldkriipsuga sees tag
päris lõpus.
Nüüd lubage mul minna tagasi oma brauserit.
Tulemus Reload Kurat, midagi on valesti.
Te olete ilmselt näinud seda aeg-ajalt veebis
isegi kui see ei ole sinu süü.
See on veebiserver süü.
Mida oodid see ei näi?
See on katki.
See, kui pilt kuulub.
Jah?
>> Sihtrühm: Aga see ei ole juurdepääs pilt.
>> DAVID J Humala: See ei ole juurdepääs pilt.
See, või veel hullem, võib-olla ta isegi ei eksisteeri.
Vaatame, kas me ei saa diagnoosida seda.
Meenuta viimast korda, et kui Kroomitud, et seadme
või isegi oma Mac või PC, lähete Arendaja menüü
ja minna Developer Tools variant, mis ilmselt olete
ei kasutata palju või kunagi varem.
Ja kui ma lähen Võrk ja laadige leht uuesti,
olgem tegelikult vaadata HTTP nõuab, et tehakse.
>> Tundub hello.html on tõesti OK, seega 200.
Aga cat.jpg on 403.
Nii see ei ole 404.
Faili ilmselt olemas.
403 tähendab keelatud.
Nii et see on veidi segane.
Ma lähen tagasi minu terminali aknas.
Lubage mul suumimiseks siin.
Ja las ma teen ls.
Seal on need samad failid.
>> Nüüd lubage mul teha ls-l, mis oled ilmselt
kasutada enne vaadata faili suurused äkki või loomisaja.
Ja me näeme terve hunnik Valdav teavet.
Aga teate mõned detailid.
Siin hello.html selles rida siin ja siin cat.jpg.
Ja see on lihtsalt seade on kasutajasõbralikud, rõhutades JPEG
lillaga niimoodi.
Aga mida muud on erinev kõrval faili suurus ja faili nimi?
>> Sihtrühm: [kuuldamatu].
DAVID J Humala: Jah, seal on kaks R on siin.
Pane tähele, mida hello.html on pooleli.
Nii selgub, et nimi Selles kataloogis Avalikkus on oluline.
Midagi selle kataloogi on mõeldud avalikkusele.
Aga see ei ole piisav lihtsalt tilk faile seal.
Teil on vaja ka muuta ¾ faili,
muuta lubade Faili ennetavalt ei
olema Vaikeseadistusel mis on see, et ainult Saan aru
ja kirjutada seda, ma ei ole laeva omanik.
Ma tahan kogu maailm kõigil suutma lugeda minu faili, nii rääkida.
Loe tähendab lihtsalt seda vaadata.
>> Ja tõepoolest, nagu te näete probleemi pani seitse, see on, mida need Ri keskmine.
Need kaks Ri keskmine lasta kõik mujal maailmas ka seda lugeda,
eriti nüüd, see on selle kataloogi.
Nii et lihtsaim viis seda parandada on mine minu kiire ja teha chmod muutusteks
režiimi ja tehke + r, kokku, kõik, kõik, pluss r lugemiseks,
ja siis cat.jpg Enter.
Miski tundub juhtuda, mis Tavaliselt tähendab see hea asi.
Nii ls-l again-- nüüd Vaatame cat.jpg.
Ja see luba tundub, et on muutunud.
Nagu kõrvale, kui teete viga ja sa näiteks
just your-- Ma ei sead ühendit väljakirjutada essee avalikkusele kättesaadav õnnetus,
saate teha vastupidine, chmod-r.
Kuigi ausalt öeldes, ei tohiks olema avalik kataloog
anyway, kui see on probleem.
>> Nüüd lähme tagasi minu brauser ja uuesti laadida.
Ja ma lähen kliki vähe Ghostbusters
sümbol selge, et osa ekraan nii näeme uusi taotlusi.
Ja tõepoolest, siin on Grump Kass oli enne.
Kuid mis veel tähtsam, tehniliselt on
number 200, mis tähendab, me saime ta OK.
Olgu, nii et kõik on hästi ja hea.
Aga me ei tee parim veebilehed,
ega me siis proovige liiga raske teha uhkemad veebilehed täna.
Kuid olgem vähemalt midagi teha super tuttav enne korisev
välja mõned teised sildid.
Nii et arvan, et ma lihtsalt ei taha kass siin.
Oletame, et ma tegelikult tahan seda kass linkida midagi.
>> Ma võiks näiteks midagi sellist teha.
ankur href eest hüper viide equals--
ja olgem lihtsalt midagi teha nagu www.google.com lähedal
tsiteerin lähedal sulg.
Ja nüüd otsida kassid.
Sulge ankrusildi.
Nii et see on ainult üks sort on täiesti uus detail.
Tag on muidugi erinevad.
See on nimi, ankur href või hüper viitega.
>> Kuid mis veel tähtsam, seal on see süntaktiline funktsioon siin.
See on see, mida me alustada kutsudes ei tag, aga atribuut.
Ja omadus on midagi, muudab käitumist tag.
Ja seda omadust, href, vahendid muuta käitumist selle ankru
nii et kui see on klõpsatud, see läheb see URL siia.
Ja muidugi, et URL on Google.
>> Vahepeal mis see on Kirjuta siia läheb?
Noh, see saab olema mida inimene tegelikult
näeb kui allajoonitud link, nii lihtne see ongi.
Nii et proovime seda.
Lubage mul salvestada.
Ma olen ikka veel hello.html.
Aga versioonid online, näete tegelik faili nimesid me ettevalmistatud.
Lubage mul minna ja uuesti laadida.
Ja nüüd on see väga underwhelming lehekülg ikka.
Aga kui ma hover üle there-- ja see on natuke väike,
Aga-- näete alt vasakus nurgas oma ekraan,
see on tõepoolest kavatse google.com.
Ja kui ma vajutan, et see sebima mind viis tegeliku Google.
>> Aga teate siin võimalus kasutamine, just nagu kõrvale.
Ja me tuleme tagasi teiste julgeolekuküsimused enne pikk.
Sest seal on see kahestumine vahel, kuhu minna ja mida sa ütled,
mida võiks teha midagi see-- http://www.google.com.
OK, ja nüüd, kui ma uuesti laadida Pärast salvestamist, et lehel
tundub, et ma lähen minema Google.
Aga seal ei ole põhjus, miks ma pean minema Google, eks?
Ma võiks tegelikult minna midagi badguy.com, laadige leht siin.
Ja teate, see ikka näeb välja nagu Google.
Ja ainult siis, kui ma olen terav piisavalt tiirutama üle siin
ma näen on see isegi läheb minna teise kohta.
>> Nii et kui te olete kunagi saanud talle, eriti
üks Paypal või näiliselt Paypal
palub teil sisse logida oma kontole, seda
miks sa ei tohi kunagi kunagi kliki linke e-kirju,
ausalt, kõik seosed kirju.
Kui sa tead, teil on tegelik raha Paypal või Bank
Ameerikas või Fidelity või veebilehel, käsitsi kirjuta see.
Sest vaadake, kui lihtne on trikk kellegi esitades mida
näeb välja nagu link.
Aga tegelikult võiks minna absoluutselt kõikjal.
>> Ja seal on palju suurem ohte kui see.
Tegelikult on see natuke puutuja nüüd, kuid üks
parim, mida ma kunagi näinud mis on vahepeal suletud
on keegi viinud inimesed mina-- nii et see võiks öelda,
kliki siia, et sisse logida konto, pangakonto.
Ja see oli Bank of the West.
>> Nii et kui keegi ostis selle.
Ja see on natuke lihtsam vaadata see mono vahedega font suumitud
aastal 30-foot projektor.
Aga kui see on väike font Kirjuta, mis te saate,
see näeb välja nagu bankofthewest.com, ei bankofthevvest.com,
mis keegi oli maksnud 10 $ osta.
Ja siis see viis nad samaväärne halbu veebilehel.
>> Ja näete too-- tegelikult me ​​saame teha see-- kui ma lähen tegelik veebilehel,
bankofthewest.com jällegi tagasikutsumise viimast korda
et kui see on nende veebilehel ja sa oled uudishimulik, kuidas see töötab,
saate kindlasti minna Chrome'i arendaja tööriistu.
Ja näed kõiki HTML kenasti vormindatud seal.
>> Aga rohkem punkti, sa cam-- olgem sulgeda
see-- võite minna Vaata Arendaja View Source.
Miks ma ei kopeeri kõik see Ja siis ma
ei lähe mu väike gedit aknas siin ja teha oma veebilehel.
Salvesta see sisse hello.html.
Ja ilmselt see läheb katki, sest see ei ole nii lihtne tavaliselt.
Aga nüüd, kui ma uuesti minu lehel minu CS50 Appliance ja vajuta reload,
OK, mõned asjad murdis.
Aga ma olen üsna lähedal, mille minu pangandus veebilehel, eks?
Kõik see HTML--
>> [NAER]
>> DAVID J Humala: -I ei actually-- ja sa
tean, et keegi seal, kes tegelikult kliki neid linke ka.
Nii selgelt, mõned asjad murdis.
Aga see läheb juhtima meid arutelu
asjatult kohe, missugust CSS, kaskaadlaadistikke, on
ja kuidas te tegelikult alla laadida teiste HTML faile
ja JPEG-failid GIF failid Veebilehe võivad olla kasutades.
Aga kõik see on teostatav.
Aga see tõesti taandub Nende väga lihtne heuristika.
>> Nüüd lähme lihtsalt sirvida Paar teisi näiteid HTML
lihtsalt anda teile tunne mida veel saab teha.
Näiteks on see list.html.
Oletame, et ma tahtsin teha veebilehe nimekirja majade quad.
Ma võiks kasutada ul silt järjestamata nimekirja ja siis loendiüksusele laps
ja siis kinnitada, over-- või nimekirjast rather-- majade küsimus.
>> Ja kui ma avan selle üles, teeme seda.
Lähme mitte hello.html, vaid list.html.
Kurat.
Kuidas seda parandada?
See on sama teema nagu varem, eks?
Nii et lubage mul teha chmod-- oops-- chmod a + r list.html.
Ja nüüd, kui ma lähen tagasi oma brauseris ja klõpsa Laadi uuesti, siin see on.
Nii et kui sa oled kunagi tahtnud teha täpploendit, saate seda teha.
Kui sa tahad olla super fancy ja teha järjestuses, ei ebakorrapärane nimekirja
muuta neid, et ol, laadige leht uuesti ja nüüd brauser number seda sinu jaoks.
>> Mida muud me teha saame?
Noh, paar others-- kui sul on pikad lõiked text--
Näiteks mõned Ladina teksti nagu see--
ja sa tahad seda eraldi lõiked, avatud p tihe p lõikes tag.
Ja seda ikka ja jälle.
Ja kui ma nüüd avada seda faili paragraphs.html, noh, see
muutub tüütu.
Nüüd lähme lihtsalt minema tagasi oma kiire, chmod a + r r täht .html--
toreda metamärkidega nii rääkida.
Tuleb määrata kõiki need probleemid minu jaoks.
Olgem laadida.
Seal on kolm lõiget.
>> Ja nüüd lähme edasi ning avada veel ühe.
Kuidas lauale?
Märkad tabeli välimus natuke keerulisemaks.
Aga see on sama idea-- avatud sildi, avatud sildi
Avatud, avatud, avatud, lähedane sildi, avatud tag.
Ja need juhtuvad seisma tabel, mille piir on ilmselt
saab olema paksus 1-- iganes et means-- tabeli rida tabelis
andmete, mis tähendab rakk.
Ja kui ma lähen tagasi oma brauseris siin ja minna table.html,
näete midagi meeldib see, kole.
Aga me jõuame punkti, kus me saame tegelikult
Et asi ilusam kui see.
>> Nii et lubage mul ette näha nüüd.
Seal kobarad rohkem silte.
Ja HTML on imeline kiirenemist sest ausalt öeldes on kõik, mida vaja teha,
on vaadata olemasolevaid veebilehti kellega te olete juba tuttav.
Ja sa oled nagu, oh, see on, kuidas nad tegid seda esteetiliselt.
>> Või saate otsida mis tahes online- ressurss, kuidas HTML toimib,
ja sa näed, et seal on kogu sõnavara teiste siltidega.
Aga lihtne vaimne mudel Ainult, et peaaegu iga tag avate
on suletavad, see tõesti ei piisa, et õpetada ennast
HTML pärast aru Nende põhilised ideed silte
ning atribuutide ja trimmisuse et oleme rääkinud,
sulgemise midagi, et me võiks avada nii et me ei segadusse brauserit.
Nii et olgem nüüd seda, et huvitavam tasandil
minnes tegelik.
Ja lähme minu Mac siin, et google.com.
Ja nüüd notice-- teeme seda.
Ma gong minna Seaded Otsi Seaded.
Ma tahan, et lülitada see tüütu instant Tulemused asi, kus ta kohe
hakkab vastates oma kirjutades.
Teeme ära vanemad koolis nii me tegelikult näha, mis toimub.
>> Ma lähen, et päästa oma Google seadeid siin.
Ja nüüd notice-- ma lähen otsi midagi kassidele.
Ja see on ikka teeme auto täielik siin, kuid põhinevad asjad
inimesed on kirjutatud ka varem.
Aga teate, mis juhtub.
>> URL hetkel on see lihtsalt google.com.
Ja tehniliselt on see kaldkriips.
Google lihtsalt säästa tegelane ja ei näita meile, et.
Nad näitavad meile https, lihtsalt olema super rahustav, et me oleme
on turvaline ja krüpteeritud lehel.
>> Nii et lubage mul minna ja otsida kassid.
Nüüd sain tõesti Valdav kiiresti.
Vaata pikkus selle URL.
Aga selgub, et kõige selle kraami URL on tegelikult üsna mõttetu.
Ma lähen alustada kustutamist asju, mida ma ei mõista.
Ma näen kassid.
Ma saan aru, kassid.
Ma ei tea, miks kassid on seal uuesti.
Ma tõesti ei tea mida see jama on.
Nii et ma lihtsalt hoida rõhutades ja kustutada kraami
et ma ei saa aru, destilleerimise URL just seda.
>> Nüüd lubage mul saada sisestage uuesti.
Tundub, et Google töötab.
Nii et mingil põhjusel nad lisades palju asju, et nende URL vaikimisi.
Aga see ei ole tingimata vajalik.
Mis on tore see on?
Noh, lubage mul minna ja avada Chrome'i inspektor.
Seal on väike hiir otsetee ta.
>> Mine Network sakk.
Ja nüüd lubage mul uuesti see leht veel kord.
Ja ma hoian Shift.
Nagu kõrvale, brauserid kipuvad vahemälu või salvestada
teavet ainult efektiivsuse huvides.
Aga tavaliselt, hoides Shift ja pealelaadimisel sunnib kõik
alustada otsast peale.
Ja see, mida ma tahan teha siin.
>> Ja teate kõik need rida, et just ilmunud.
Selgub, et mis tahes web lehekülg, seal võib olla ainult üks fail
involved-- hello.html-- või seal võiks olla 52, nagu käesoleval juhul.
Kui ma külastada google.com, ilmselt minu brauser
avalöögi 52 eraldi HTTP päringuid.
Miks see nii on?
>> Noh, vaata, mis on sees Selle veebilehe up top.
Seal ei ole ainult teksti, kuid seal on tegelik pilte
koertest üle paremale.
Seal on värvikas logo siin vasakul.
Seal on kõik need ikoonid võtta mikrofoni ja nii edasi.
Seal on palju tükki, hoone plokid, nullist tükki, kui soovite,
sellele veebilehele.
Ja mida brauser läheb peale saada kõige esimene fail, mis
on see rida siin, see on sisuliselt iterating üle HTML top
alla, vasakult paremale, otsin asju nagu pildi siltide või muude silte
mis viitavad teistele failidele ja kui ta näeb neid läheb ja tõmbab need
HTTP, elujõuline kogu ümbrik metafoor,
ja siis kuvab need sobiv asukoht veebilehel.
>> Aga teate siin, kui ma keskenduda esimese visata, otsing kassid,
märkate, et tõepoolest see on HTTP 1.1.
Ja kahjuks Google Chrome kohe versioonis 39
on selline dumbing asju ette ja ei näita meie tegelikku pealkirjad.
Aga mis oli tegelikult saatnud on taotluse mitte kärpida, kuid / otsing? q = kassidele.
>> Nüüd, miks on see oluline?
Noh, ma lähen järeldavad sellest, et kui te Google
toetab päringuid selle vormi, siis miks ma ei rakendada oma otsingut
mootor CS50, vaid lihtsalt ees lõpuks, just graafilise kasutajaliidese.
Ja me tellivad kolp, tegelik otsingutulemuste Google.
>> Niisiis, kuidas ma seda teen?
Noh, lubage mul minna gedit siin.
Ja lubage mul minna ja avada up, oletame, uus fail.
Ja ma lähen salvestada ajutiselt nagu search-0.html.
Ja siis lõpuks, siis me kiiresti ootama üks I ettevalmistatud.
>> Ja ma lähen kiiresti kokku klopsima doc tüüp
html avatud sulg html lähedal sulg html.
Siis ma lähen tegema head lähedal pea avatud pealkiri CS50
Otsing asemel Google otsing.
Siin ma lähen on keha, siin lähedal keha.
Ja nüüd ma pean CS50 otsing.
Ja tegelikult, olgem ehitada see järk-järgult.
Ma lähen edasi minna ja sulgege see ja tegelikult pane see minu avalik kataloog.
Nii et anna mulle üks hetk.
search-0.html-- ma lähen ajaliselt nimetame seda search.html.
Ma lähen chmod see + r search.html.
Ja nüüd ma lähen seda avada.
Olgu, nii et oli kiire.
Aga eesmärk lihtsalt oli et meid punktini
võttes selle teksti fail nimega search.html.
Nii et ei ole palju vaadata veel.
Tõepoolest, kui ma lähen oma brauseri ja minna search.html, see on kõik see on.
Aga tead mis?
Ma võin olla natuke Kasvataja.
Ma lugesin raamatut, mis seal on Pealkirja sildi h1.
Ja ma lähen edasi minna ja kasutada, et avatud h1 ja tihe h1.
Värskenda lehel.
Ja nüüd see on suurem ja julgem, ei ole kõik nii huvitav,
kuid vähemalt on struktuurilt põnevamaks.
Aga nüüd lubage mul tutvustada teine ​​silt.
Selgub, seal on vormi tag.
Ja las ma sulgeda, et tag.
Ja selgub, et tema sisend tag et
omab atribuuti nimega tüüp, mis on andmete tüüpi väljale
kui soovite.
Ja läheb tüübiks on tekst.
Ja selle raha läheb olema CS50 otsing.
Sulge tag.
Ja seal saab olema mingit mõistet avamise ja sulgemise eraldi sildid.
>> Lubage mul minna tagasi siia ja näha, mis toimub, uuesti laadida.
Kuidas huvitav.
Tundub, et see tekstiväljale.
Ja tegelikult, ma ei tahtnud panna raha sinna veel.
Lubage mul minna siia tagasi ja tegelikult saada lahti seda väärtust hoida lihtsa.
Selle asemel, et raha, mida ma tahtsin anda see asi oli nimi.
Ja ma ei tea, mis see on, nii et ma tulen tagasi selle.
>> Aga alla selle, ma tahan teha input type = submit.
Ja see väärtus on CS50 otsing.
Ja me näeme, miks ma kolis väärtus sellele.
Kui ma uuesti, ma ilmselt nüüd alustab oma otsingut
mootor, super kole, kuigi ausalt öeldes, see on
mitte kaugele visata, mida Google'i vaikimisi lehe välja näeb.
>> Kui ma lähen siin nüüd, ma ei kirjuta kassid ja loodetavasti valige Otsi.
Aga ma ei ole see veel aga, sest ma ei ole rakendatud,
Ilmselt andmebaasi.
Ma ei ole roomas veebist otsingutulemustes.
Nii et mul on vaja tellida, et Google'ile.
Niisiis, kuidas ma seda teen?
>> Noh, esiteks ma on vaja lisada ja tegevus
omistada mu vorm tag et on http://www.google.com/search.
Ja ma tean, et ainult omamast järeldada, vaadates tähelepanelikult
oma URL.
Ja nüüd võta vist.
Mida peaks antud välja arvatavasti seda nimetatakse, lähtudes sellest, kuhu me tulime
alates varem?
>> Sihtrühm:? Q.
>> DAVID J Humala:? Q.
Ja me tegelikult ei vaja küsimus märgi selgub, aga q on tõepoolest see,
q päringule arvatavasti Vaikimisi lihtsalt sellepärast, et see on
mida Larry ja Sergey tulid aastat tagasi.
Nüüd lubage mul laadige leht uuesti.
See ei näe nii erinevad.
Aga nüüd vaadata, mis juhtub.
>> Kui ma kirjuta kasside ja kliki CS50 Otsi ja lase minna,
teate ma saan pühitakse ära tegelik Google.
Nüüd Google on vähe tüütu, et nad on
lisades lisaparameetrist, kui soovite, et URL.
Ongi kõik juhtub automaatselt Google'i poolelt.
>> Oluline osa on see, et ma ilmselt et on tekkinud selle taotluse siin.
Ja tõepoolest, see, mis juhtub.
Kui teil on HTML, et näeb välja selline, see
on omamoodi veebiarendajad märke ütlen, edasi minna ja luua vormi
et kui see on esitatud, see läheb minema see URL.
Ja kui URL on andnud väärtused asjad q,
ei lähe just see URL.
Tegelikult, jätkake küsimusega märk ja siis q = kassidele.
Lisage parameeter, HTTP parameeter niimoodi.
>> Ja lihtsalt olla super täpne, mis kuramuse järeldada siin--
aga ma tulen veel explicit-- on et meetod soovin kasutada
on saada, selle asemel, et midagi post, mis me lõpuks näha.
Lühidalt öeldes lihtsalt arusaam HTML ja kasutades mõned üsna lihtne silte
saame hakata looma meie ees lõppkasutaja
liides otsing mootori taga.
>> Aga see on muidugi üsna kole.
Nii et lubage mul tegelikult avada veidi parem versioon.
See on üks I valmistati edasi, et on mõned kommentaarid.
Aga näete, et ma päris palju taasloodi see.
Nii et see on juba kättesaadavad Internetis.
Ja ma juhtumisi preemptively minge https lihtsalt hoida lihtsa.
>> Ja nüüd lähme avada Järgmise iteratsiooni see.
Kas versioon 0 asemel 1.
Mis hüppab välja ennast kergelt erinevad selles näites?
>> Sihtrühm: [kuuldamatu].
>> Jah, seal on see tekst align center.
See on natuke imelik siin.
Aga see on tõesti uus.
Ja võib-olla arvata, mis juhtuma hakkab.
Kui ma lähen oma brauseri nüüd ja külastada search-1.html,
see on peaaegu sama asi.
Aga see on samm lähemale on natuke rohkem päris.
See on ikka kole, kuid ilusam selles vähemalt kõik on nüüd keskel.
>> Nii selgub, et see, mida ma kasutan on teises keeles kokku kutsutud
CSS, kaskaadlaadistikke.
Ja CSS, ausalt öeldes on selline on minu isiklik arvamus,
atrociously mõeldud keelt.
On väga tüütu meeles pidada kõiki erinevaid detaile.
Aga see on see, mida stylizes kogu maailma veebis täna.
Ma solvunud keegi.
Hea küll.
Nii et lähme tagasi siia ja vaata kuidas me tegelikult kasutab seda.
Ja selgub, vähemalt see on tegelikult päris lihtne keel.
See on lihtsalt põhiväärtus paari, omadused ja väärtusi, omadusi ja väärtusi.
Tõepoolest, siin on üks sellise vara ja raha.
>> Lihtsalt abil stiil atribuut mu keha tag
ja annab talle väärtuse Sõna koolon ja teise sõna,
või vara ja väärtus, Ma ei mõjuta esteetika
veebilehe, ei tingimata struktuuri veel
kuid esteetika ta.
Ja just Google'i abil ümber, ma mõistan et CSS, kaskaadlaadistikke,
toetab vara kutsus text-align, mille väärtus on
tuleb vasakule, paremale või keskele, näiteks.
>> Nüüd, kui ma uuesti laadida see leht, mida ma ei saa
oli keskendunud lehel aga ikka päris kole.
Lähme edasi ja avage kuni 2. versiooni Otsi.
Ja nüüd teate ma olen teinud natuke rohkem.
Pange tähele, et siin sees, pea tag, ei saa olla rohkem kui pealkiri.
Tegelikult, seal on stiil tag.
Ja see on koht, kus see lihtsalt muutub väike räpane nägemine CSS mõnikord.
>> Pange tähele, et ma tundub, et on midagi mis struktuurilt tundub väga erinevad.
Aga siin on nimi tag tahan stiliseeritud.
Siin on meie vanad sõbrad lokkis traksid ja suletud lokkis traksidega.
Ja siis siin on see, et vara ja selle väärtus.
>> Kui ma laadida see fail, search2.html, lõpptulemus on sama.
Aga see on samm parema disainiga.
Autor faktooring välja see CSS, ma olen ei segata seda oma HTML.
Ja tõepoolest, kui me näeme, suutsin taaskasutada neid omadusi ja väärtusi.
Kui ma tahtsin teha kobarad osad mu veebilehe keskne,
Ma ei pea sisestama style = text-align keskus kogu koht.
Ma võin panna ühes kohas võibolla meeldib up ülaosas.
>> Kuid isegi see ei ole parim disain.
Tegelikult on üks neist asjadest, saate teada, kui sa kulutad rohkem aega koos
veebi programmeerimine, et mida rohkem saad Modularize asju ja tegur asjad
nagu .h failid olgem tegur kraami välja, meeldib helpers.c olgem tegur asjad
paari psets tagasi.
Samamoodi võiks me tahad saavutada.
>> Nii teate versioon kolm search.html ma olen
puhastada juht lehele ja lihtsalt panna
selles, link tag, mis vastuolus nimi,
ei anna teile hüperlingi.
See ühendab teise faili teel href mille väärtus sel juhul
on otsing-3.css
Nii et ma mõistan, me ei kavatse kiiresti.
Aga kõik, mida ma teen on selline liikuvaid asju ümber.
Lubage mul avatud search-3.css.
Siin see on, midagi tõesti ta.
Ma lihtsalt kopeerida ja kleepida see uude esitada meelega me tegureid kraami välja
teiste faile enne.
Ja result-- täiesti underwhelming--
saab olema täpselt sama.
Aga me liigume toward-- ei, see ei ole.
Oh, ma tean, miks.
>> Nii et see tundub olevat viga.
Ja see on mõnes mõttes.
Kuid lubage mul avada minu Network sakk.
Lubage mul laadige leht uuesti.
Ah, miks CSS kohaldamata jätmise?
Noh, CSS faili, samamoodi on olla maailma loetav, nii rääkida.
Ja seda ka praegu keelatud.
Nii et lubage mul teha chmod a + r star dot CSS-- whoops--
me oleme dot CSS on lihtsalt faililaiend CSS faile.
Nüüd lubage mul minna tagasi minu brauser ja uuesti laadida.
OK, natuke parem.
>> Nüüd lubage mul teha üks viimane asi.
In search-4.html.
Mul on versioon, et ma lihtsalt mõtlesin oli viis jahedamaks, kuigi nii rohkem
keeruline.
Vaatame tulemus esimesena.
Sulge see annab meile rohkem ruumi.
Muuda seda otsida-4, Enter.
>> Ja nüüd hunnik asju on katki.
Ma lähen tagasi minu kataloog siin.
Ja nüüd ma olen lihtsalt kavatse teha chmod kohta + r on file--
sest ma tean, et see exists-- nimetatakse logo.gif, mis on pilt.
Ja nüüd uuesti.
Ja wow-- nii nüüd olen päris lähedal, öeldes,
meeldima 1999. aasta versioon Google, ja ausalt, 2014 versioon Google,
õige?
>> Nii et see on nüüd oma veebilehel, lõpuks, kui ma otsin kassi.
Ja tõepoolest on.
Aga mida ma teha teistmoodi selles versioonis 4?
Nii et me ei ela liiga palju siin.
Näete seda probleemi pani seitse lõpuks.
Aga teate ma tegin mõned asjad.
>> I tutvustas div tag, mis on jaotus,
sarnase sisuga lõik tag.
Aga jaotus on nagu, siin ristkülikukujulise nähtamatu piirkonna
ekraani.
Anname talle kordumatu tunnus, jalus, vaid
nii et me võime rääkida see meie HTML mujal.
Siin on veel üks div lehel kelle ID saab olema sisu.
See on lehe sisu.
Ja siin on päises lehel.
>> Teisisõnu, ma olen sisuliselt HTML olen vaimselt
vaatavad veebilehe kolme komponendi kaudu
siin selle nähtamatu ristkülik, sisu keskel ja siis
jalus allapoole, isegi kuigi me ei näe neid asju.
Sest ma tahan minu juht leht siin või .css faili
Võin seda süntaksit.
>> Päise ei ole tag.
See ID nii selgub välja, et seda tehes #header,
Nüüd saan taotleda ühe või mitme omadused päises.
Ma võin teha sama sisu, sama sisu siin.
>> Nii näiteks jalus, teade kõik need omadused, ma olen lisades.
Ja ma tean, et nad on olemas lihtsalt lugemine üles dokumentatsiooni CSS.
Fondi suurus saab olema smaller-- nii et mõned fondi suhteline suurus.
Kaal saab olema julge.
Margin-- mitu pikslit umbes it-- on 20 pikslit.
Ja see saab olema keskne.
>> Aga praegu, leht näeb välja selline.
Kui ma ei ole rahul minu koopia seal,
Ma võiks teha midagi punast värvi.
Ja siis ma võib päästa see, reload, ja nüüd ma olen stiliseeritud jalus.
Nii et see on lihtsalt vihjab võimu mida saate teha veebilehe
seisu muutmiseks.
>> Ja isegi lahedam kui see, kui sa tahad tuhnima tegelike veebilehed,
sa ei saa jäädavalt muuta.
Aga kui ma avada Chrome'i inspektor uuesti
ja ma lähen mitte vasakul pool siin, mis näitab Facebooki HTML,
kuid näitab paremal pool kõik oma CSS,
saate kas ja asju muuta lennult.
Nii et lubage mul minna ja seda teha.
>> Lubage mul minna ja kontroll siis see juhuslik sõna siin,
kirjutada, ja klõpsake nuppu Kontrolli Element.
Chrome väga mugavalt hüppab H1 tag et Facebook kasutab.
Ja teate siin Facebook on omamoodi laisalt
kõva kodeeritud kirja suurust kui vara siin.
>> Nii lahe asi, kuigi on et kui ma tegelikult minna siin
ja öelda, oh, Facebook, mulle ei meeldi, et 64 pikslit, saame muuta Facebook.
Muidugi, me ainult selle muutmist mulle isiklikult hetkel.
Aga see on lihtsalt üks vahendiks meie tööriistakomplekt
mis toimub, mis võimaldab meil näpistama ja aru saada ja ka diagnoosida
küsimusi oma veebilehekülgedele.
Ja me võiksime samamoodi minna üle siin, mis on sama asi.
Kui sa tõesti tahad saada väljamõeldud, ma Tähendab, nüüd saab tõesti muteeruda lehekülg
ja teha hullud asjad.
>> Miks see kõik kasulik?
Noh, lõpuks, me oleme kavatse soovite olla
võimalik luua veebilehti, mis on ajendatud meie endi tagasi otsad,
mitte ainult Google ja allhanke kolp seal.
Me tegelikult tahavad väärtus, näiteks
Meie otsingumootori tegevus atribuut minna mitte keegi teine,
kuid midagi search.php, kus search.php on meie enda server,
mitte kellegi teise.
>> Ja nii, et sinna jõuda, me tegelikult on vaja kehtestada uus keel.
Nii et me oleme juba uurinud ühte uus keelt siin või kaks tõesti, HTML
ja CSS.
Aga nad tegelikult on lihtsalt struktuuri- ja esteetiline keeles.
Nad ei programmeerimine keelte per se.
Ja see on umbes sama palju ametlikke ajal, kui me kulutame nende kohta.
Kuna hakkame nüüd üleminek PHP.
>> Nii et PHP on tegelik programmeerimiskeelt.
See on skript keel selles mõttes, et see on
pidi olema kergem kaal kui midagi C.
Ja see on tõlgendanud keeles mis tähendab, et see ei ole koostatud.
Nii et lühidalt öeldes, mida see tähendas kui me kasutasime keelt nagu c
ja me pidime kompileerida?
Mis see tähendab, et koostama C lähtekoodi?
Sihtrühm: [kuuldamatu].
DAVID J Humala: Ütle seda uuesti?
Sihtrühm: [kuuldamatu].
DAVID J Humala: Perfect.
Selgub see binaarne.
Selgub see nullidega ja need tegelikest inglise moodi lähtekoodi.
Ja siis me saame tegelikult käivitada need nullidega ja need
lastes neid läbi CPU topeltklõpsuga ikooni
või töötab käsk.
>> PHP ja Python ja Ruby ja Perl ja JavaScript
ja kobarad muu keeli tõlgendada
keeles, mis tähendab, sa ei koguma neid.
Pigem sa toita neid sisendina programmi nimega tõlk.
Ja et tõlk mis keegi kirjutas,
loeb oma lähtekoodi ülalt alla, vasakult paremale ja siis tõlgendab
need liinid ja teeb seda, mida sa ütled.
>> Nii et kui sul tekib rida, mis ütleb, print,
see ei pruugi teisendada print vastavaks nullid ja ones.
See lihtsalt on see tõlk nagu suur kui tingimus, mis ütleb:
kui programmeerija õpe printida, siis tehke järgmist.
Seega tõlgendab seda lihtsalt poolt loogikat
läbi, mida sa räägid seda teha.
>> Ja PHP on üks nendest keeltest.
Ja PHP aastat tagasi oli kavandatud just veebi programmeerimine.
Ja see oli algselt väga lohakas räpane keel.
Ja tõepoolest, seal on suur summa halb PHP kood seal.
Aga keel ise on küpsenud aastate jooksul
nii palju, et nüüd on see tegelikult imeline järgmine samm
pedagoogiliselt C, sest see on nii darned tuttavad kõik
sa oled näinud viimase paari nädala jooksul.
>> Üks esialgsest vahest me näha kas on olemas mingit põhiülesanne enam.
Kui hakkate kirjalikult koodi, see on lihtsalt hakka täide ükskõik mida,
nagu me näeme ühel hetkel.
Vahepeal siin on, mida muutuja näeb PHP.
See on veidi erinev, vaid vaevu.
>> PHP, ei ole tugev kirjutades.
Seal on nädal kirjutama, mis tähendab lihtsalt seal
on andmetüübid nagu stringid ja numbreid ja muid asju.
Aga sa ei viitsinud täpsustades mida nad on enam.
PHP ise selle peale teile.
Dollari märk on lihtsalt otsuse et PHP inimesed teinud aastaid
tagasi nii, et iga muutuja PHP lihtsalt algab dollari märk.
See on tegelikult omamoodi kasulik, ta hüppab välja ennast natuke rohkem.
>> Kuid pärast seda, selle Tingimuseks on, PHP.
Mis on erinev võrreldes C?
Komm question-- midagi, mis on tegelikult väga kena.
Loogiline väljendeid PHP-- sama.
Loogiline väljendeid ja vastu või lülitid, silmad, silmad, loops-- OK,
see üks on erinev.
>> Nii selgub seal paar muud funktsioonid PHP.
Üks neist on tegelikult selles, mis on imeliselt mugav.
Kui $ numbrid on massiiv, et olete deklareeritud varem programmi
teil on see väljamõeldud iga konstrukt selle asemel, et teeme kõik, et
tüütu I võrdub 0, I alla selle, [? Ma ++?]
iga numbrite arvu, kus iga Nende dollari märk väärtused on lihtsalt
varieeruv ja viimane sa ei mõtle nagu I.
Sa võid nimetada seda kõike, mida sa tahad.
Ma kutsusin ta number.
See läheb itereerima üle massiivi nimetatakse numbrid.
Ja iga iteratsiooni, see on läheb automaatselt uuendada
Teile dollari märk number muutuv, nii et sa pidevalt
juurdepääs muutuja soovid ilma teha mis tahes nurksulg
märke või indekseerimise massiivi.
>> Peale selle, meil on isegi asjad massiivid, mis näevad välja peaaegu sama,
välja arvatud see on väga tavaline, kui jagame vaata nii PHP ja JavaScript
eelnevalt initsialiseerida massiivi kasutades nurksulgudes.
C kasutab lokkis traksid.
Nii et see on veidi erinev, kuigi me tegelikult ei kasuta, et trikk palju.
>> Kuid veelgi võimsamalt, PHP on assotsiatiivne massiivid
mis on fancy viis öelda hash tabeleid.
Tegelikult, kui sa tahad kuulutada hash tabeli PHP erinevalt C-, kui palju
rida koodi kulus kuni tegelikult ellu hash tabeli C?
Või kui palju ridu koodi on see võttes rakendama hash tabeli C?
Nii et see on ilmselt palju, eks?
See on mõnikümmend, võib-olla 100 või 200.
See on nontrivial.
Või on see umbes olla, kui saate kohe näha, nontrivial
rakendada hash tabelit [Kuuldamatu] ja ka proovida.
Aga PHP-- ja ausalt öeldes, ma ilmselt ei tohiks seda sulle öelda
kuni Monday-- PHP, kui soovite tabeli teha.
See on hash table-- nii ühe rida koodi.
Ning
>> Palju keeli teha.
Nautige pset viis.
Nii palju keeli teha.
Nad annavad teile need veevõtu et teised inimesed, teised programmeerijad
loonud teid nii, et te ei saa seista oma õlgadele
ja hakata kasutama ideid, mis on super kaalukad, nagu hash tabelid ja puud
ning püüab.
Aga sa ei pea rakendada neid asju ise.
>> Ja nii lõpuks, mida me ei kavatse kasutada PHP jaoks
potentsiaalselt kirjalikult programmid selle nn käsurealt.
Me võiksime uuesti iga programmi oleme kirjutanud selle semestri seni
välja arvatud ehk Breakout mis kasutab SPL, mis on spetsiifiline C hetkel.
Kuid iga muu probleem määrata, kindlasti Mario ja Caesar
ja Vigenere ja [? Crack?] Ja edasi oleme
võib uuesti rakendada PHP, ja ilmselt vähe kergemini.
>> Aga mida me lõpuks läheb kasutada PHP on veebi programmeerimine.
Ja me ei kavatse kehtestada järgmise nädal vaimne mudel, paradigma nimetatakse
MVC mudel vaade kontroller, mis siis, kui sa oled teinud programmeerimine
enne Python või Ruby või mujal, siis
võiksid teada selle meeskond Rails ja Django jms.
Aga kui sa oled uus ka see, näete
et see on tegelikult väga loomulik pikendamine teguriteks
ja omamoodi disain kood, mis me oleme
teinud C. Me läheme nüüd kehtivad mõned neist lugu PHP
nii et lõpuks oleme rakendades oma veebilehed.
Ja kui sa oled omamoodi mesmerized või üllatunud
et me ei kavatse teha kõik nii kiiresti,
mõistma, et peaaegu iga semester, ligi 90%
õpilased CS50, sealhulgas kes ei ole kunagi programmeeritud enne,
lõpuks teha lõplik projekte, mis põhinevad veebi programmeerimine.
Ja nii sa näed, et naaseb on kõrge lähinädalatel.
Nii et me näeme siis esmaspäeval.
>> SPEAKER 1: Ja nüüd, Deep Mõtted, mida Daven Farnham.
Hash tabelites.
>> [NAER]