>> [Glazbom]
DAVID J Malan: U redu, dobrodošao natrag.
Ovo je CS50.
To je kraj tjedna sedam.
I to je kraj tog čistača lova od problema postaviti četiri
da biste mogli sjetiti.
Nakon oporavka sve ti JPEG osoblja,
ste bili izazvani, ako želite, da se fotografirati sa što više
od tih ljudi kao što možete.
Imamo hrpu podnesaka tijekom posljednjih nekoliko tjedana,
zapravo, dosta neposredno prije podne Danas, neki od kojih su oni ovdje
uhvaćen ovdje in-- izgleda like-- Annenberg Dvorana na radnog vremena, jedan ovdje
u Lowell House s Nickom.
Evo Ramon što je uhvaćen na telefon.
To je u CS50 ručak.
To je bio Jason Skyping s više kreativni kolegica,
koji ga je nazvao na ovaj način.
Mi ne znamo što je to.
>> [Smijeh]
>> DAVID J Malan: Ali to je vrijedno gigabajt.
Ovdje je Chang, koji je doslovno pobjegla s pozornice
kako bi se izbjeglo se fotografirali jedno dan, ali na kraju je uhvaćen.
Ovdje je Nick.
I ovdje je Alison dolje po poljima.
I Zamyla čak je pronađena na ballroom natjecanju.
Tako ćemo proći ove fotografije, shvatiti
koji je podnio najviše Najraniji, i nagrada
jedan nevjerojatan nagrada, kao što je obećao u spec.
I također ćemo pratiti oko prostor koji je bio uključen.
>> Par announcements-- tako ručka je, opet, ovog petka u 13:15.
Ako želite da nam se pridružite, RSVP na toj URL ovdje.
Jason ponovno pojavljuje ovdje iz jednog od sekcija par godina
natrag, što se dogodilo pasti na Noć vještica.
I doista, bio odjeven kao bundeve toj godini.
Ako ste gledati ovaj odjeljak njegova od 2011. sekciji
osam, ako ste znatiželjni, na CS50.tv, mislim
ovo je godina u kojoj njegova pumpa za zrak radi.
>> Ako zatim gledati Sličan poglavlje u 2012.,
ćete vidjeti ovaj Jasona mnogo deflacioniranog, budući odijelo više nije funkcionirao,
što je samo reći ovog petka, ako bih
vole da izgrade bundeva s Daven i Gabe i drugi, svoj dolazak na glavama
na cs50.harvard.edu adresu.
On obećava da će biti zabavno.
Daven, mi smo rekli, je uklesan Bundeva cijeloga života.
Gabriel iz Brazila nikada izrezbario bundevu za Noć vještica.
Dakle, biti tamo s njima kao što je on uči.
>> Seminari, meanwhile-- pa ćete brzo naučiti
o tome što su naša očekivanja za konačni projekt, koji se u bitnome
će se svode na osmišljavanju i provedbi
većina bilo projekt od interesa za ti, iako uz suglasnost
i smjernice iz svog nastavnog kolegama.
Pred kraj semestar, uvodimo niz
seminara, koji su izborni klase na čelu s nastavnim novaci i Harvardu
osoblje, prijatelji i naravno diljem kampusa, na raznim temama koje
se dodiruje temeljni plan i program TEČAJ-a
ali ipak je moguće, zabavno, i različit za potencijalne krajnje projekte.
>> Na primjer, prvo, ako želite registrirati, glavu na tom URL tamo.
A to je postava za ovogodišnji seminari sama.
No shvatili smo desetke seminari iz proteklih godina, od kojih svi
povezani u izborniku Seminari Mogućnost stranicama tečaja je.
Dakle, ako razmišljate o tome ide izvan vaše zone udobnosti
ili branje gore neke nove vještine, primjerice, programiranje iPhone
aplikacije s Swift, novi jezik Apple ili Objective-C
ili Android aplikacije ili programiranje [? napomena?] žarulje, ili bilo koje od tema
ovdje i više, zbog provjera iz stranice registraciju.
>> Tako smo počeli i zaključio na Ponedjeljak uz gledajući HTTP.
Tako brzo refresher-- HTTP, HyperText Transfer Protocol.
No, što to zapravo znači?
Što to zapravo znači?
Je li to ruka?
Znam da ste samo grebanje glavu.
No, želite predložiti ono što je HTTP?
>> PUBLIKA: Kako računala komunicirati s [nečujan].
DAVID J Malan: Propustio sam zadnji dio.
Kako računala komuniciraju with--
>> PUBLIKA: Internet poslužitelji.
DAVID J Malan: Good-- s interneta poslužitelji, i posebno, web poslužitelja.
Zbog povlačenja, postoji hrpa usluga na internetu, od kojih su neki
Koristite vjerojatno svakodnevno između chat i poruka, chat i web i e-mail,
i slično.
I HTTP je samo protokol koji web preglednici
govoriti kada komunikaciji s Web poslužitelji, i obrnuto.
I u analogni ljudski svijet mogao biti,
Izražavam svoju ruku tresti neke druga ljudska i on ili ona
priznaje produljenjem njegov ili njezin ruku kao dobro.
Dakle, to je samo protokol, skup konvencija.
>> A što su oni doista konvencije?
Pa, to samo svodi na slanje poruka natrag i naprijed,
kao što je prikazano ovdje.
A postoji nekoliko načina na koji možete poslati ove poruke.
A možda najviše zajedničko je poznat kao get.
A mi ćemo vidjeti kontrast to prije dugo.
>> No GET zahtjev iz preglednika na poslužitelju samo izgleda ovako.
To je hrpa teksta koji se stavlja unutar virtualnog omotnici.
Na vanjskoj strani omotnice toga ići par komada detalje.
Ono što treba ići na omotnicu, da tako kažemo,
kako bi dobili zahtjev kao to od mene na web poslužitelju?
Da.
>> PUBLIKA: Vaša IP adresa.
>> DAVID J Malan: Moja IP adresa u Od terenu, da tako kažemo,
i naravno, primatelja IP adresa.
No, u slučaju web paketa, trebamo malo više detalja
Nije dovoljno samo pošaljite omotnicu na poslužitelj,
jer to poslužitelj može biti slušanje za različite vrste
internet prometa.
Pa što još trebamo osim primatelja IP?
Da?
>> PUBLIKA: Je li TCP?
DAVID J Malan: Dobro.
TCP--
>> PUBLIKA: Adresa.
>> DAVID J Malan: Adresa, ili luka, kako se zove.
Blizu, ali broj TCP priključak.
A tu je hrpa tih.
No, sigurno je većina upoznati trebali na kraju
bilo 80, što je zadana on koristi za web prometa.
I još jedna poznata on će uskoro biti 443,
koji se koristi za sigurnu webu prometa, URL-ova koje počinju s https.
>> Dakle, to je ono što se događa unutar tog okvira.
I dobiti / samo znači, daju mi web stranica zadana.
Daj mi korijen tvrdi voziti na toj web poslužitelju.
I nadamo se, web poslužitelj će odgovoriti, OK
a broj 200, što je samo Konvencija govoreći, da, sve
je doista u redu.
Evo stranica.
Vrsta web stranice će se biti tekst, ali točnije, HTML,
koji smo o tome roniti natrag u.
I dot dot dot jednostavno znači, ovdje je HTML.
A to je gdje smo pokupiti priču danas,
zapravo pisanje HTML, HyperText Markup Language, što
je jezik na kojem web stranice su napisane.
To nije programski jezik.
Nema funkcije ili petlje ili uvjeta.
To je jezik za označavanje, kao i danas opet vidim,
koji vam omogućuje da odredite kako strukturirati i stilizira
estetski web stranica.
>> Dakle, to je bio jedan a samo stranica mi stvarno
pogledala, ako se nakratko, u ponedjeljak.
I primijetite neke Istaknute značajke.
Ima puno otvorenih nagnuti Nosač i zatvoriti kutnog držača.
Između onih koji pod kutom nosači su riječi.
A mi ćemo početi nazivajući te riječi oznake.
Tako otvorene glavu nosač i zatvorena zagrada glavu
su otvoreni i zatvoreni oznaka, ili početak i kraj oznake
odnosno, od HTML elementa, kako ćemo ga nazvati, nazvao glavu.
A isto vrijedi i žargona na tijelu u HTML i tako dalje.
>> A ono što je lijepo je HTML-- i doista, mi ćemo
potrošiti užasno malo vremena na njemu, zato što govore samo ćete shvatiti
što ga ima ima kad vas zapravo imaju konkretnog problema
da solve-- vidjet ćete da preglednik je prilično glupo.
To samo će do-- ne za razliku computer-- što to kažem.
I tako kad imate otvorene nosač HTML na samom vrhu
postoji, da je bitno samo znači, hej, preglednik,
ovdje dolazi web stranica napisana u HTML.
>> Kad se vidi otvoren nosač glavu, to samo znači,
hej, preglednik, ovdje dolazi glavu, ili najviši dio moje web stranice.
Kada se vidi zatvorenu nosač glavu, to samo znači, hej,
to je to za glavu.
Stanje pripravnosti za nešto drugo.
A to je nešto drugo očito će biti tijelo.
A kad nemate oznaku, kao imate samo zdravo, zarez, svijet,
samo da će biti sirovi tekst koji u konačnici se prikazuje na zaslonu.
>> Sada, primijetit ćete previše otiska ovdje.
Vjerojatno možete zaključiti kako ćemo ga stylizing.
Svaki put kad otvorite oznaku, da tako kažem, ja uvukli.
I svaki put sam zatvoriti oznaka, sam izvuci,
slični u duhu do vitičastim zagradama.
I dalje od toga, ja sam vrsta korištenja moju presudu.
Obavijest da ja ne zamaram udaranje Unesite unutar tog oznaka.
Zašto?
Pa, upravo sam odlučio to izgledalo malo čišći mi, ljudski,
samo ne smeta da radi.
Pa opet, ima nekih Presuda poziva jednostavno
kao da je u C ili bilo kojem jeziku.
>> Ali primijetite da je to previše udubljenje posuđuje sama na mentalnom modelu,
da ne pretjerate komplicirati ga.
Ali stablo, zar ne?
Ako mislite o web stranica, očito napisano
ovako, kao lijepo razvedena na taj način,
gotovo da možete misliti na otvorenom nosača HTML zatvorena zagrada oznaka u označavanju
korijen čvor, obiteljsko stablo stil čvor u stilu stabala
Gledali smo prošlog petka.
>> I doista, mi smo na upravo ovdje ono što ćemo nazvati DOM, D-O-M, dokument
objektni model, fancy način govoreći: stablo koje predstavlja taj HTML.
I primijetiti da HTML ima, mi ćemo reći, kao obiteljsko stablo, dvoje djece.
Na lijevoj strani je glava.
Na desnoj strani je tijelo.
>> I baš kao što bezumnom misli vježbe, Glava, naravno, ima koliko djece
prema ovoj strukturi?
Dakle, samo jedan, title-- i to je razlog zašto smo
strelica ide od glave do naslova.
Dakle, to je kao da toj osobi u Obiteljsko stablo je imao samo jednu potomstvo.
A onda i sam naslov može se reći da imaju dijete previše.
>> Sjetite se da je imao HTML Pozdrav, zarez, svijet ispod njega.
A ja jednostavno nisam ga izvući u roku ovalni umjesto pravokutnika jednostavno
prenijeti semantički da iako to je čvor u stablu, da tako kažemo,
to je vrsta bitno razlikuju.
To nije oznaka.
Ili točnije, to nije elementa.
To je samo tekst čvor, ako hoćete.
No, to su posve proizvoljne ljudske konvencije.
Ovo je samo sada moj način predstavlja ono što ću kao agregat
nazvati dokument.
>> I kao na stranu, stvar na super gornjem lijevom kutu,
otvoreni nosač uskličnik doc tipa HTML, ovo izgleda kao krpa,
ali to je glupo kutak slučaj gdje da je upravo tamo, kopirati i zalijepiti
ukazati na preglednike ovo je HTML verzija 5.
Svijet se mijenja, što je prva linija koda na stranici bi trebao biti.
To samo znači verziju 5.
Dakle, to ne sasvim izgleda kao i ostali.
>> U redu, tako da s tim je rekao, sada ćete cijeniti
to prilično glupo ovo tetovaža je netko dobio.
>> [Smijeh]
>> DAVID J Malan: U redu, i sad neka je zapravo roniti
učini nešto s tim.
Vi ćete se sjetiti da je zadnji put Ja otvorio CS50 Appliance
i ja učinio nešto što je jednostavan kao otvaranje gedit.
I ja spasio datoteku čak i na moj desktop-- nigdje special--
kao hello.html.
>> Pa neka mi to again-- hello.html Enter.
A sada u ovoj datoteci, idem ići naprijed i ponoviti ono što smo upravo
saw-- doc tipa HTML Onda ću to open bracket html zatvorena zagrada.
A onda ću preventivno otvaranje i zatvaranje oznaku.
Zašto?
Samo da ne zaboravite kasnije.
To je samo dobra praksa, kao što je otvaranje i zatvaranje vitičastim zagradama odjednom.
>> I što onda je došao sljedeći?
Možete misliti tetovaža.
>> PUBLIKA: glava.
>> DAVID J Malan: glava.
A onda ovdje, ja imao naslov, mislim.
A naslov je proizvoljno, Pozdrav, svijet blizu naslova.
A onda ovdje, tijelo, course-- onda smo zatvorili tijelo oznaku.
I onda samo nešto redundantly, Imao sam istu stvar ovdje.
>> Dakle, tvrdim da je ovo web stranica.
To je nešto što Sada bi mogao živjeti na webu,
iako, naravno, to je doslovno žive na mojoj površini upravo sada.
Ali doista, ako bi se smanjili gedit, Vidjet ću na moj desktop njegova ikona.
Iako je to aparat, možete to učiniti na Mac OS
bez TextEdit ili Windows Notepad s čak.
>> I ako sam ići naprijed i dvaput kliknite da je čak i select-- dobro, neka je
Ne odabir jer Chrome ne otvara.
Idemo naprijed i otvoriti Chrome.
A onda Zapovjedno-O za otvorene A navigaciju na moj desktop
i otvorite tu datoteku.
Tako je preglednik interpretira HTML, od vrha do dna, s lijeva na desno.
Hej, ovdje je HTML preglednik.
Evo glava.
Evo naslov.
Evo tijela.
I doista, to je kako to čini tu web-stranicu.
>> Ali primijetiti URL.
Nitko od vas mogao podići ovu specifičnu stranicu na svojim prijenosnim računalima upravo sada,
čak i unutar svoje Uređaj se putem tog URL-a,
jer datoteku: // ukazuje da je zapravo na moj datotečnom sustavu, moj hard disk,
nije tvoje.
Dakle, to nije sve što je korisno.
>> Ajmo sad pomaknuti prema korištenjem stvarni web poslužitelja.
I to ispada u CS50 Appliance je više nego samo okruženje u kojem
možete pisati C koda i sastaviti i pokrenite ga kao što ste radili.
Također je konfiguriran Osoblje da predstavljaju tipičnu web
poslužitelj koji je na internetu, onaj koji možda platiti
ili onaj koji je u tzv oblaku.
>> I to je trčanje standardni besplatni open source
softver, na primjer, nešto zove Apache, što je možda
dalje najpopularniji web poslužiteljskog softvera u svijetu
da tisuće web stranica danas koriste.
I to je također još ima softver poput MySQL,
što je poslužitelj baze podataka da smo na kraju ćete doći do,
što je samo reći Mogu početi liječenje
moj aparat kao punopravnog poslužitelju da ja ne plaćam negdje drugdje.
To samo živi na mojoj laptop za razvoj i praktičnost svrhe.
>> Dakle, idemo naprijed i iskoristite to.
Ja ću ići naprijed i otvorite prozor terminala.
I ja ću ići naprijed i move-- zapravo, prvo sam
ide za navigaciju na moj desktop.
Ako radim ls, postoji hello.html.
I ja ću otići naprijed i početi koristiti
Novi katalog imamo Ne koristiti prije i danas.
>> hello.html-- ću pomaknuti da ../vhosts za virtualni hosts--
više o tome u future-- a zatim u imenik pod nazivom localhost,
što je nadimak koji je dobio gotovo bilo kojeg računala, bilo da je Mac, PC,
ili Linux računalo, a zatim posebno u imenik da smo,
Osoblje je već stvoren za vas kada ste preuzeli aparat zove
javnosti.
I kao što mu ime sugerira, ništa Stavio sam u ovoj mapi, u teoriji,
će sada biti javnosti, barem za ljude
koji imaju izravan priključak na računalu.
>> Pa sad neka mi ići naprijed i napraviti cd toj istoj imenik
tako da mogu vidjeti što je događa i tipa ls.
I doista, to je Jedino tamo.
Tvrdim da sada, jer sam stavio ovo podnijeti hello.html unutar imenik
zove javnosti unutar imenik zove localhost unutar imenik
nazivaju vhosts, koji zahvaljujući CS50 osoblja
je pre-konfiguriran da bude korijen svoj web poslužitelj,
Ja sada mogu nadamo se to učiniti.
>> Idem otvoriti novu karticu.
I ja ću otići da ne podnese: //.
Ja ću koristiti stvarna http / localhost, koji
Ponovno je nadimak za moj vlastiti server.
A onda ću ići na ono što naziv datoteke, samo da bude jasno?
Gdje je ova priča vjerojatno ide?
hello.html.
>> Dakle, drugim riječima, želim sada ovo je moj računalo, moj vlastiti aparat,
kao da je to stvarna poslužitelja.
Njegov nadimak je localhost.
Ali mislim da je localhost kao poput Facebook.com google.com, god.
To je samo moj lokalni naziv.
A onda konačni želim u Korijen tvrdom disku, da tako kažemo,
ili korijen web poslužitelja, ergo kosu crtu, a zatim
naziv datoteke hello.html.
>> Dopustite mi da smanjivanje i pritisnite Enter.
I doista, tu je sada moja web stranica.
Tako da je malo drugačiji.
I to je samo kao underwhelming.
Ovo je stara verzija.
Dopustite mi ustuknuti font.
To je stara.
Ovo je nova.
No, ono bitno što se događa Sada je da HTTP se koristi.
>> Učinimo to malo jasnije, ili, ako hoćete, malo kompliciranije.
Pusti me da u donjem desnom kutu mog aparata.
I primijetiti da sve to Vrijeme, tu je bio broj.
To je jedinstvena adresa Vaše CS50 Appliance.
To je privatna adresa, što implicira 172,16,
što samo znači samo da ste fizički mogu pristupiti ovoj web poslužitelja.
Sve je firewallom i lijepo zaštićena od ostatka
svijeta zbog toga adresiranje.
>> A sada primijetiti ali ako idem ovu adresu, a ne u mom aparatu,
ali Mac OS-- idem vratiti ovamo.
Ovo je moj Mac sada.
A sada ću otvoriti ova verzija Chrome ovdje.
I ja ću ići na http: //172.16.25 / I ja zaboraviti rest-- 133.
>> Zato ću posjetiti iz mog Mac da je IP adresa /hello.html Enter.
I sada vidim iz mog Mac da je moj CS50 Appliance, koji je
IP adresa je da broj, doista se ponaša
kao web server na internetu.
To ne mora lijepo lako zapamtite ime kao Facebook.com,
ali je koristeći HTTP očito, iako Chrome
je vrsta pojednostavljenje svijet za nas, ali nas ne pokazuje HTTP.
No, to je doista upravo to.
Chrome je samo štedi neke tipke ovih dana.
I to je ono što sada vidimo.
>> Tako da je sve u redu i dobro.
Ali to je prilično underwhelming stranica.
Pusti me otići i učiniti nešto malo drugačiji sada.
Pa me pustiti natrag u gedit.
I umjesto da pozdravi, Svijet, neka stavi sliku.
I sam tvrdio od before-- me pusti u moj localhost imenik javnosti.
I neka mi ići naprijed i kopirati cijela hrpa datoteka od danas
iz mog Dropbox mape u ovdje.
>> Sad kad bih upisati ls, izgleda na svim tim datotekama
da sam distribuiraju Naravno web je prije danas,
jedan od kojih je i dalje hello.html.
Dakle, postoji taj jedan.
A sjećam ovo glupo jedan od prošle time-- cat.jpg.
Pa neka mi pokušati položiti cat.jpg u mojoj web stranici.
>> Ja ću ići naprijed i to cat.jpg, spasiti.
Pusti me da se vratim na Chrome.
I neka mi uvećanje font i sada ponovno.
Ups, gdje sam stavio ovo?
Standby-- sam još uvijek imaju stari Verzija iz mog desktop opena.
Dakle, pustite me u moj vhost, moj localhost, moja javnosti i hello.html.
Pa sad neka mi ići naprijed i kažu cat.jpg unutar tijela
gdje želim da bude Prikazuje i ponovno.
Naravno, to nije točno.
>> Dakle, moram reći pregledniku malo više namjerno što želim to učiniti.
Jednostavno upišete ime očito nije dovoljno.
Tako se sjetiti da je postojao još jedan oznaka, slika, img skraćeno.
To je samo zato što ljudi ne kao tip pune riječi.
A onda možemo učiniti izvor = "cat.jpg".
>> A sada ću učiniti jedna stvar drugačija.
Iako sve naši oznake do sada imamo
je ovaj pojam start tag i završna oznaka,
da se zapravo ne bi Osjećaj za sliku, zar ne?
Slika je ili postoji ili ne postoji.
I tako su ljudi došli se s jednostavnijim konvenciji.
Kada imate oznaku koja može i započeti i završiti na istom time--
to može biti prazna, tako da bi samo speak-- staviti kosu crtu unutar oznake
na samom kraju.
Sada ću se vratiti na moju pregledniku.
Hit Reload K vragu, nešto nije u redu.
Vjerojatno ste vidjeli povremeno na webu,
čak i ako to nije bila tvoja krivnja.
To je na web poslužitelju kriv.
Što Odes to čini za označavanje?
To je slomljena.
To je mjesto gdje je slika pripada.
Da?
>> PUBLIKA: Ali to ne imati pristup na slici.
>> DAVID J Malan: To ne imati pristup na slici.
To, ili još gore, možda to uopće ne postoji.
Idemo vidjeti ako mi se ne može dijagnosticirati to.
Sjetite se od prošlog puta da ako u Chromeu, u aparat,
ili čak na vašem Mac ili PC, idete na izbornik Developer
i ići na Razvojni alati opcija koja vjerojatno ste
ne koristi puno ili nikad.
A ako odem Network i ponovno učitati stranicu,
neka je zapravo pogled na HTTP zahtjeva da se napravi.
>> Izgleda hello.html je Doista redu, pa 200.
No cat.jpg je 403.
Dakle, to nije 404.
Datoteka vjerojatno postoji.
403 znači zabranjeno.
Dakle, ovo je malo zbunjujuće.
Ja ću se vratiti na moj prozor terminala.
Dopustite mi uvećanje ovdje.
I neka mi to an ls.
Tu je te iste datoteke.
>> Sada neka mi učiniti LS-l, što ste vjerojatno
koristiti prije pogledati datoteke Veličine možda i vremenske oznake.
I vidimo cijela hrpa neodoljiv informacije.
Ali primijetiti nekoliko detalja.
Evo hello.html u tome red ovdje i ovdje je cat.jpg.
I to je samo aparat se user friendly naglašavajući JPEG-a
U ljubičasta kao što je ovaj.
No, što je još drugačije osim veličina datoteke i naziv datoteke?
>> PUBLIKA: [nečujan].
DAVID J Malan: Da, postoji još dva R-a ovamo.
Obavijest ono hello.html se događa.
Tako ispada da je ime ovaj katalog javnosti je važno.
Sve što u ovom direktoriju je značilo da se javnosti.
Ali to nije dovoljno Samo ispustiti datoteke tamo.
Također je potrebno mijenjati Način datoteke,
mijenjati dozvole file proaktivno ne
biti zadana postavka, a to je da samo ja mogu čitati
i to napisati, ja kao vlasnik.
Želim cijeli svijet da svi moći pročitati moje datoteka, da se tako izrazim.
Pročitajte samo znači da bi je vidjeli.
>> I doista, kao što ćete vidjeti u problemu postaviti sedam, to je ono što znači ovo R-a.
Ove dvije R-a srednja neka svatko drugdje u svijetu i to pročitati,
pogotovo sada kada to je u ovom direktoriju.
Dakle, najjednostavniji način kako bi riješili ovaj je ići na moj upit i napraviti chmod za promjene
Način rada, a zatim napraviti + R, uopce, svi, svi, plus r za čitanje,
a zatim cat.jpg Enter.
Ništa čini se dogoditi, što obično znači dobru stvar.
Dakle, LS-l again-- sada Pogledajmo cat.jpg.
A to dopuštenje Čini se da su se promijenili.
Kao na stranu, ako bi pogreška i što, na primjer,
Upravo je napravio your-- Ne know-- esej javno dostupne slučajno,
možete učiniti suprotno, chmod a-r.
Iako iskreno, to ne bi trebalo biti u javni imenik
svejedno ako je to briga.
>> Tako sada idemo natrag moja preglednik i reload.
A ja ću kliknuti Malo Ghostbusters
Simbol očistiti taj dio zaslon tako da možemo vidjeti nove zahtjeve.
I doista, ovdje je Grump Mačka od prije.
Ali što je još važnije, Tehnički, postoji
broj 200, koji je znači imamo to u redu.
U redu, tako da je sve u redu i dobro.
Ali mi ne čineći najbolje web stranice,
niti ćemo pokušati previše teško čine fanciest web stranica danas.
Ali neka je barem nešto učiniti super upoznati prije zveckanje
off nekoliko drugih oznaka.
Dakle, pretpostavimo Ne samo želim mačku ovdje.
Pretpostavimo da sam zapravo želim to mačka povezati s nečim.
>> Ja bi, na primjer učinite nešto ovako.
za sidro href za hiper referentni equals--
i neka je samo nešto učiniti poput www.google.com blizu
citat zatvoriti nosač.
A sada tražiti mačke.
Zatvori sidro tag.
Dakle, to ima samo jednu vrstu od temelja novi detalj.
Tag naravno, razlikuje.
To je naziv za sidro href ili hiper referenca.
>> Ali što je još važnije, postoji ova sintaktička značajka ovdje.
To je ono što ćemo početi zovete Ne tag, ali atribut.
A atribut je nešto što mijenja ponašanje oznake.
I ovaj atribut, href, sredstva mijenja ponašanje ovog sidra
tako da kada se to pritisne, to ide na ovaj URL ovdje.
I naravno, da je URL Google.
>> U međuvremenu, što je ovo tekst ovdje će biti?
Pa, što će biti ono ljudsko zapravo
vidi kao podcrtani veza, kao jednostavan kao taj.
Dakle, pokušajmo to.
Dopustite mi da ga spasi.
Ja sam još uvijek u hello.html.
No, u verzijama online, vidjet ćete stvarna imena datoteka smo unaprijed pripremljena.
Dopustite mi ići naprijed i ponovno.
I sada je vrlo underwhelming stranica dalje.
Ali ako sam pređite preko there-- i to je malo mali,
but-- možete vidjeti na dnu lijevom kutu zaslona,
to doista će google.com.
A ako kliknem da, to će umutiti mi put do stvarne Googleu.
>> Ali primijetite ovdje prilika za iskorištavanja, baš kao stranu.
A mi ćemo se vratiti na drugom pitanja sigurnosti prije dugo.
Budući da je ovo dihotomija između gdje idete i što reći,
što bi mogao učiniti nešto slično this-- http://www.google.com.
U redu, a sad kad bih ponovno Nakon spremanja tu stranicu,
izgleda da ću ići na Googleu.
Ali nema razloga da morati ići na Google, zar ne?
Zapravo sam mogao ići na nešto slično badguy.com, ponovno učitati stranicu ovamo.
I napomena, to još uvijek izgleda kao Google.
I samo ako sam oštra dovoljno da lebde ovamo
ne vidim ga još će ići na drugo mjesto.
>> Dakle, ako ste ikada stečen e, a posebno
jedan od Paypal, ili naizgled iz Paypal
Vas traži da se prijavite na svoj račun, to
Zato što ne bi smjeli ikada kliknite linkove u e-poštu,
Iskreno, sve veze u e-pošti.
Ako znate da imate stvarna Novac na Paypal ili banci
Amerike ili vjernost ili bilo web stranice, ručno upisati.
Jer pogledaj kako je lako trik nekoga u ono što predstavljanja
izgleda kao link.
Ali, to je zapravo mogla ići apsolutno nigdje.
>> I tu je daleko veći prijetnje od toga.
U stvari, to je malo od tangente sada, ali jedna
od najboljih koje sam ikada vidio što je u međuvremenu zatvoren,
Je li netko na čelu ljudi to-- tako da to može reći,
kliknite ovdje za prijavu u svoj račun, bankovni račun.
A to je banka na Zapadu.
>> Tako je netko kupio ovo.
I to je malo lakše vidjeti to u mono razmaknute font zumirati
u na 30 metara projektora.
Ali, kad je mali font u e da primate,
ovo izgleda kao bankofthewest.com, Ne bankofthevvest.com,
koji je netko platio 10 dolara za kupnju.
A onda ih je to dovelo do ekvivalent neke loše web stranice.
>> I vidjet ćete too-- zapravo možemo učiniti this-- ako idem na stvarni website,
bankofthewest.com, opet, Opoziv od zadnjeg puta
da, ako je to njihova web stranica i ti si znatiželjan kako se to radi,
sigurno možete ići Chrome razvojne alate.
A možete vidjeti sve HTML lijepo oblikovane tamo.
>> No, što je još važnije, što cam-- ćemo zatvoriti
this-- možete ići Pogledaj Programer View Source.
Zašto ne bih jednostavno kopirati sve to i onda sam
Možete ići u moj mali gedit prozoru ovdje i napraviti svoju web stranicu.
Spremi u hello.html.
I vjerojatno će se to slomiti, jer to nije to lako obično.
Ali sada, ako sam ponovno svoju stranicu na moja CS50 aparati i udario reload,
OK, neke stvari razbio.
Ali ja sam vrlo blizu s moja bankarstva web stranice, zar ne?
Sve to HTML--
>> [Smijeh]
>> DAVID J Malan: --I nije actually-- i vi
znati da postoji netko tamo tko bi zapravo kliknite ove linkove previše.
Pa jasno, neke stvari razbio.
No, što će dovesti nas u raspravu,
nepotrebno upravo sada, što bi CSS, kaskadno stil listova, su,
i koliko vas zapravo preuzeti ostale HTML datoteke
i JPEG datoteka GIF datoteke Web stranice mogu se koristiti.
No, sve to je accomplishable.
Ali, to stvarno svodi na ove vrlo jednostavne heuristike.
>> Pa sad neka je samo prelistati Nekoliko drugih primjera HTML
samo da vam dati osjećaj onoga što još možete učiniti.
Na primjer, to je list.html.
Pretpostavimo da sam htio napraviti web stranicu s popisom kuća u quad.
Možda ću koristiti ul oznaku za neuređen Popis, a zatim stavku popisa dijete
a zatim ponoviti over-- ili popis, rather-- kuće u pitanju.
>> I ako sam otvoriti ovaj gore, učinimo to.
Idemo ne hello.html, ali list.html.
Prokletstvo.
Kako mogu popraviti ovo?
To je isto pitanje kao i prije, zar ne?
Pa neka mi ne chmod-- oops-- chmod + r list.html.
I sad kad bih se vratiti na moju pregledniku i pritisnite Reload, tu je.
Dakle, ako ste ikada htjeli napraviti Popis s grafičkim oznakama, možete to učiniti.
Ako želite biti super fancy i napraviti naredio popis, ne neuređen popis,
promijeniti one olu, učitajte stranicu, i Sada preglednik će ga prebrojiti za vas.
>> Što još možemo učiniti?
Pa, ako je par others-- imaš duge odlomke text--
na primjer, neki Latinski tekst kao this--
a vi ga želite u odvojenim točkama, otvoreni p, u blizini p za stav oznaku.
I opet i opet učiniti.
A ako ja sada otvoriti ovu datoteku, paragraphs.html, dobro, to
postaje neugodno.
Pa sad neka je samo vratiti na mom brz, chmod a + R r zvijezdu .html--
lijepo malo wild card da se tako izrazim.
To bi trebao popraviti sve ti problemi za mene.
Idemo ponovno.
Ima tri stavke.
>> A sada idemo naprijed i otvoriti jedno drugo.
Kako o stol?
Primijetit ćete tablica izgleda malo složeniji.
Ali to je isto idea-- otvoreni tag, otvoreni oznaka,
otvoreni, otvoreni, otvoreni, u neposrednoj blizini tag, otvoreni oznaka.
A to se dogoditi da odstoji stol, čija granica je očito
će biti debljine 1-- god da means-- stol red, stolni
Podaci, što znači stanice.
A ako idem natrag u svom pregledniku ovdje i ići na table.html,
možete vidjeti nešto ovako, odvratan.
No, mi ćemo doći do točke gdje smo zapravo može
bi stvari ljepše od toga.
>> Pa neka mi propisuje za sada.
Postoji grozdovima od više oznaka.
A HTML je divno pokupiti jer, iskreno, sve što trebate učiniti
je pogled na postojećim web stranicama s kojima ste upoznati.
A ti si kao, oh, to je kako napravili su to estetski.
>> Ili možete pogledati bilo koji online resursa kako HTML radi,
i vidjet ćete da postoji Cijeli vokabular druge oznake.
No, s jednostavnom mentalnom modelu Samo da gotovo svaki tag otvorite
mora biti zatvorena, to stvarno dovoljan da se čovjek uči
HTML nakon razumiju ove osnovne ideje oznake
i osobine i dobro formedness da smo razgovarali o tome,
zatvaranja nešto što bismo mogli otvoriti tako da mi ne zbunjuju preglednika.
Tako ćemo sada uzeti to više zanimljivih razini
odlaskom na stvarna.
I idemo na moj Mac Ovdje, na google.com.
A sada notice-- učinimo to.
Ja sam gong ići na Postavke, Postavke pretraživanja.
Želim isključiti ovu dosadne trenutak Rezultati stvar gdje se odmah
počinje reagirati na tipkanja.
Učinimo ovo stariju školu, tako mi zapravo vidimo što se događa.
>> Zato ću spasiti moj Google Postavke ovdje.
I sada notice-- ću tražiti nešto poput mačke.
I to još uvijek radi auto potpuna ovdje, ali na temelju stvari
Ljudi su se upisali u prošlosti.
Ali primijetite što će se dogoditi.
>> U URL u ovom trenutku je to, samo google.com.
I tehnički, to je Slash.
Google je upravo se štedi lik a ne nas tu pokazuje.
Oni pokazuju nam https, samo biti super ohrabrujuća da smo
na sigurno ili šifrirane stranice.
>> Pa neka mi ići naprijed i tražiti mačke.
Sada je to dobio stvarno neodoljiv brzo.
Pogledajte duljini ovaj URL.
No, ispada da je većina ovih stvari URL je zapravo prilično beskoristan.
Ja ću početi brisanja stvari koje ja ne razumijem.
Vidim mačke.
Razumijem mačke.
Ne znam zašto se mačke su tamo opet.
Ja stvarno ne znam što je to glupost je.
Dakle Samo ću zadržati isticanje i brisanje stvari
da ja ne razumijem, destilacijom URL u upravo to.
>> Sad neka mi se ponovo ući.
Izgleda da Google i dalje radi.
Dakle, iz nekog razloga, oni su dodavanjem Mnogo stvari na svoje URL-a po defaultu.
No, to nije strogo potrebno.
Dakle, ono što je lijepo o tome?
Pa, neka mi ići naprijed i otvaraju inspektor Chrome.
Tu je mali miš prečac za njega.
>> Idite na karticu Network.
I sad neka mi ponovno ovu stranicu još jednom.
I držim Shift.
Kao na stranu, preglednici skloni cache ili spremiti
Informacije samo zbog učinkovitosti u.
Ali obično, držeći Shift i pretovara će prisiliti sve
početi ispočetka.
I to je ono što želim učiniti ovdje.
>> I primijetiti sve ove reci da je samo pojavile.
Ispada da je u bilo kojem web stranica, tu bi moglo biti samo jedna datoteka
involved-- hello.html-- ili postoji može biti 52, kao u ovom slučaju.
Kad sam posjetiti google.com, očito, moja preglednik
započinje 52 zasebnih HTTP zahtjeve.
Zašto je to tako?
>> Pa, pogledaj što je unutra ove web stranice do vrha.
Postoji ne samo tekst, ali postoji stvarna slika
mačaka više udesno.
Postoji šareni logotip ovdje na lijevoj strani.
Tu je sve ove ikone za mikrofon i tako dalje.
Ima puno komada, izgradnju blokovi, scratch komada, ako hoćete,
na ovoj web stranici.
A što browser radi o dobivanje prvu datoteku koja
je to red ovdje, to je u biti iterating preko HTML vrh
do dna, s lijeva na desno, u potrazi za stvari kao što su slike oznake ili druge oznake
da su spomenuti druge datoteke i kad ih vidi, ide te ih dohvaća
putem HTTP, održiva cijeli omotnice metafora,
a zatim ih prikazuje u Odgovarajuće mjesto na web stranici.
>> Ali primijetite ovdje ako sam se usredotočiti na prvi bacanje, pretraživanje mačke,
primijetiti da, doista je korištenjem HTTP 1.1.
I na žalost, Google Chrome upravo sada u verziji 39
je vrsta dumbing stvari dolje i nam ne prikazuje stvarni zaglavlja.
Ali ono što je doista poslala je zahtjev Nije za udarac, ali / traži? q = mačke.
>> Sad, zašto je to važno?
Pa, ja ću zaključiti Iz ovoga proizlazi da ako Google
podržava upite ovog obrasca, zašto ja ne provoditi svoju pretragu
motor za CS50, ali samo prednja kraj, samo grafičko korisničko sučelje.
A mi ćemo outsource stražnji kraj, stvarne rezultate pretraživanja na Googleu.
>> Pa kako mogu to učiniti?
Pa, dopustite mi da odem u gedit ovamo.
I neka mi ići naprijed i otvoriti do, recimo, novu datoteku.
A ja ću spasiti ova privremeno kao pretraživanja-0.html.
I onda na kraju, mi ćemo brzo naprijed u jednom sam pre-pripremljen.
>> A ja ću Brzo ščepati tip doc
HTML otvorena zagrada HTML u blizini html nosač.
Tada ću učiniti glavu u blizini glave otvorene naslov CS50
Traži umjesto Google pretraživanja.
Ovdje ću imati Tijelo, ovdje u blizini tijela.
I sad moram CS50 Traži.
I zapravo, neka je graditi to postupno.
Ja ću ići naprijed i zatvoriti ovu i zapravo ga staviti u mojoj javni imenik.
Pa daj mi samo jedan trenutak.
potraga-0.html-- ću vremenski ga zovu search.html.
Ja ću ga chmod a + r search.html.
A sada ću ga otvoriti.
U redu, to je bilo brzo.
No, cilj je bio jednostavno da nas doći do točke
vlasništvo ovaj tekst podnijeti zove search.html.
Dakle, ne puno gledati još.
Doista, ako idem na moj preglednik, i ići na search.html, to je sve što je.
Ali, znate što?
Mogu biti malo ljubitelj.
Čitao sam u knjizi da postoji naslov tag pod nazivom H1.
I ja ću ići naprijed i koristiti taj otvoreni H1 i bliski H1.
Osvježi stranicu.
A sada je veći i hrabriji, nije sve što je zanimljivo,
ali barem strukturno više zanimljiv.
Ali sada neka mi predstaviti još jednu oznaku.
Ispada da postoji oblik oznaka.
I neka mi zatvoriti tu oznaku.
I ispada da postoji ulazna oznaka koja
ima atribut zove tipa, koji je vrsta podataka na terenu,
ako hoćete.
A će biti tipa teksta.
I njegova vrijednost se događa biti CS50 pretrage.
Zatvori oznaka.
I tu će biti pojam otvaranje i zatvaranje s posebnim oznakama.
>> Pusti me da se vratim ovdje i vidjeti što se događa, ponovno.
Dobivanje zanimljiva.
To izgleda kao da je tekst polje.
A zapravo, nisam htio staviti vrijednost ima još.
Pusti me da se vratim ovdje i zaista dobiti osloboditi ove vrijednosti i dalje ostane jednostavan.
Umjesto vrijednosti, ono što sam htio dati ovu stvar je ime.
A ja ne znam što je to, pa ću se vratiti na to.
>> Ali ispod toga, želim učiniti vrstu unosa = podnijeti.
A ova vrijednost će biti CS50 pretrage.
A vidjet ćemo zašto sam preselio vrijednost na to.
Kad sam ponovno, čini mi se da sada imam počeci moje vlastite potrage
motor, super strašan, iako iskreno, to je
Nije daleko od onoga bacanje Google je zadana stranica izgleda.
>> Ako odem sada ovdje, ja mogu upisati mačke i nadamo kliknite na Traži.
Ali nisam baš učinio još, jer nisam provodi,
Očito, baze podataka.
Nisam indeksirati Web za rezultate pretraživanja.
Dakle, trebam outsource da je Google.
Pa kako mogu to učiniti?
>> Pa, prije svega I. treba dodati i akcije
pripisuju mom oblik oznaka je http://www.google.com/search.
I znam da su samo iz potrebe zaključiti gledajući usko
na njihove URL-a.
A sada uzeti pogodak.
Ono što bi trebao ovaj tekst polje Vjerojatno zvati, ovisno o tome gdje smo došli
od prije?
>> PUBLIKA:? Q.
>> DAVID J Malan:? Q.
A mi zapravo ne treba pitanje obilježiti ispada, ali je q doista,
q za upit vjerojatno po zadana, samo zato što je to
ono Larry i Sergey smislio godina.
Pa sad neka mi ponovno odaberete ovu stranicu.
To ne izgleda sve što je drugačije.
Ali sada gledati što se događa.
>> Ako sam upisati mačke i miša CS50 Traži i pustiti,
primijetiti da se tuče daleko da stvarni Googleu.
Sada, Google je biti malo neugodno u da su oni
dodavanjem dodatni parametar, ako hoćete, na URL.
To je sve događa automatski na Google strani.
>> Važan dio je da sam činiti da su generirani ovaj zahtjev ovdje.
I doista, to je ono što se događa.
Kada imate HTML da izgleda ovako, to
je vrsta web programere zapis za govoreći, ići naprijed i stvoriti obrazac
da kada je podnesen, to će ići na ovaj URL.
A kad URL pružio Vrijednosti za stvari poput q,
ne idu baš na ovaj URL.
Zapravo, prijeđite na pitanje oznaka, a zatim q = mačke.
Priložena parametar, HTTP parametar kao što je to.
>> I samo da se super precizna, ono što je zaključen here--
ali ja ću biti više explicit-- je da je metoda želim koristiti
je dobiti, umjesto da nešto slično nakon što smo na kraju ćemo vidjeti.
Tako je u kratko, jednostavno razumijevanje HTML i korištenje neke prilično jednostavne oznake,
sada možemo početi stvarati naša vlastita prednji kraj korisnika
sučelje uz pretraživanje motor iza njega.
>> No to, naravno, prilično odvratan.
Pa neka mi zapravo otvaraju nešto bolja verzija.
To je jedan sam pripremio u unaprijed da ima neke komentare.
No, vidjet ćete da ja uglavnom to ponovno.
Dakle, ovo je već dostupan na internetu.
A ja nisam slučajno preventivno ići na https samo da i dalje ostane jednostavan.
>> A sada ćemo otvoriti Sljedeća iteracija toga.
Je verzija 1 umjesto 0.
Ono što skače na vas kao nešto različite u ovom primjeru?
>> PUBLIKA: [nečujan].
>> Da, tu je ovaj tekst align centar.
To je malo čudno ovdje.
Ali ovo je doista novo.
A možda pogodite što će se dogoditi.
Ako idem na moj e sada i posjetite search-1.html,
to je gotovo ista stvar.
No, to je korak bliže biti malo više lijepa.
To je još uvijek ružna, ali ljepše da barem sada sve je usmjereno.
>> Tako ispada da je ono što sam pomoću je drugi jezik uopce zove
CSS, kaskadno style listova.
I CSS, iskreno, je vrsta o, po mom osobnom mišljenju,
atrociously dizajniran jezik.
To je vrlo neugodno zapamtiti sve različite pojedinosti.
Ali, to je ono što stilizira Cijeli svijetu web danas.
Sam uvrijedio nekoga.
U redu.
Tako ćemo se vratiti ovdje i vidjeti kako mi zapravo koristimo ovu.
I to ispada, barem je to zapravo prilično jednostavan jezik.
To je samo ključne parova vrijednosti, svojstva i vrijednosti, svojstva i vrijednosti.
Doista, ovdje je jedan kao i vrijednost nekretnina.
>> Jednostavno pomoću stil atribut na mom tijelu oznaku
i dajući joj vrijednost Riječ debelog crijeva i još jedna riječ,
ili imovine i vrijednosti, Mogu utjecati na estetiku
na web stranici, a ne nužno još struktura,
ali estetika njega.
I samo Googling okolo, shvaćam da CSS, kaskadno stil listova,
podržava nekretninu zove text-align, čija se vrijednost može
biti lijevo, desno ili centar, na primjer.
>> Dakle, sada kada sam ponovno ovu stranicu, što nisam mogao
bio usmjeren stranica, ali još uvijek prilično ružno.
Idemo naprijed i otvoriti do verzije 2. Traži.
A sada primijetiti da sam učinio nešto više.
Uočite da je ovdje unutar glave oznaka, ne može biti više od naslova.
Zapravo, tu je stil oznaka.
I ovo je mjesto gdje to samo dobiva malo neuredan viđenje CSS ponekad.
>> Obavijest da izgledaju kao da imaju nešto da je strukturalno izgleda vrlo različite.
No, ovdje je naziv tag želim stilizirane.
Ovdje su naši stari prijatelji kovrčava aparatić i zatvorena kovrčava braće.
A onda ovdje je da vlasništvo i njegova vrijednost.
>> Ako sam učitati ovu datoteku, search2.html, krajnji rezultat je identičan.
No, to je korak prema boljem dizajnu.
Po faktoring ovaj CSS, imam Nije ga pomiješanih s mojim HTML.
I doista, kao što ćemo vidjeti, što sam mogao ponovno ta svojstva i vrijednosti.
Ako sam htjela napraviti grozdove dijelovi moje web stranice u središtu,
Ne moram upisati style = text-align Centar sve više mjesta.
Ja mogu staviti na jednom mjestu možda, vole se na vrhu.
>> No, ni to nije najbolji dizajn.
U stvari, jedna od stvari koje ćete naučiti kao što ćete potrošiti više vremena s
Web programiranje je da što više možete modularize stvari i faktora stvari
kao .h datoteka neka nam faktor stvari van, sviđa helpers.c neka nam faktor stvari
nekoliko psets prije.
Isto tako, možda smo želim da se to postigne.
>> Dakle, primijetite u verziji tri search.html Imam
očistio glava stranicu i samo staviti
u tome, veza oznaka, koji je suprotnosti s imenom,
ne daje vam hipervezu.
On povezuje na drugu datoteku putem href čija vrijednost u ovom slučaju,
je potraga-3.css
Tako shvaćam idemo brzo.
No, sve što radim je vrsta pokretnih stvari okolo.
Neka mi otvoreni za pretraživanje-3.css.
Tu je, ništa stvarno na njega.
Upravo sam kopirati i zalijepiti u novi podnijeti, baš kao i mi uračunata stvari iz
u druge datoteke prije.
I result-- potpuno underwhelming--
će biti isti.
No, mi smo se kreće toward-- ne, to nije.
Oh, znam zašto.
>> Dakle, čini se da je bug.
I to je u nekom smislu.
No, dopustite mi da otvori svoju karticu Network.
Dopustite mi da ponovno učitati stranicu.
Ah, zašto je CSS ne primjenjuje?
Pa, CSS datoteku, isto tako, ima da se svijet može čitati, da se tako izrazim.
A i ona je trenutno zabranjeno.
Pa neka mi učiniti chmod a + r od zvijezde dot CSS-- whoops--
smo dot CSS je samo ekstenzija datoteke za CSS datoteke.
Sada ću se vratiti moja preglednik i reload.
OK, malo bolje.
>> Sad neka mi učiniti jednu stvar.
U potrazi-4.html.
Imam verziju da sam samo mislio je put hladnije, premda više puta
komplicirano.
Pogledajmo rezultat prvog.
Zatvorite to nam dati više prostora.
Promijenite to traži-4, Enter.
>> I sada hrpa stvari su razbijeni.
Ja ću se vratiti u moj direktorij ovdje.
A sad sam upravo ću to učiniti chmod o + r na file--
jer znam da exists-- zove logo.gif, što je slika.
A sada ponovno.
I wow-- pa sad sam prilično blizu, iskreno,
sviđa verziju iz 1999. godine od Googlea, a iskreno, 2014 verzija Google,
zar ne?
>> Tako da se sada ide na svoje web stranice, u konačnici, ako sam tražiti mačke.
I doista je.
No, ono što sam uradio drugačije U ovoj verziji 4?
Dakle, nećemo boraviti previše o tome ovdje.
Vi ćete vidjeti u problemu postaviti sedam kraju.
Ali primijetite sam nekoliko stvari.
>> I uveo div tag, što je podjela,
slični u duhu do stavka oznaku.
No, podjela je baš kao i, evo pravokutna nevidljiva regija
zaslona.
Dajmo mu jedinstven identifikator, footer, samo
tako da možemo govoriti o da u našem HTML drugdje.
Ovdje je još jedan div stranice čiji ID će biti zadovoljan.
To je sadržaj stranice.
I ovdje je u zaglavlju stranice.
>> Drugim riječima, sam uglavnom u HTML am psihički
Gledate ovu web-stranicu kao tri komponente, zaglavlje
ovdje s ovim nevidljivim pravokutnik, Sadržaj u sredini, a zatim
podnožje dolje, čak iako mi ne vidimo te stvari.
Zato želim da u mojoj glavi Stranica ovdje, ili u .css datoteku,
Mogu koristiti ovaj sintaksu.
>> Zaglavlja nije oznaka.
To je ID, tako ispada da radeći #header,
Ja sada mogu prijaviti jednu ili više svojstva zaglavlja.
Ja mogu učiniti isti sadržaj, Isto za sadržaj ovdje.
>> Tako na primjer, u podnožju, obavijesti svih tih svojstava sam dodavanje.
I znam da oni postoje samo čitanje se na dokumentaciji za CSS.
Veličina slova će biti smaller-- tako da neki relativna veličina slova.
Težina će biti hrabar.
Margin-- koliko piksela oko it-- je 20 piksela.
I to će biti usmjeren.
>> Ali upravo sada, stranica izgleda ovako.
Ako nisam zadovoljan moj primjerak ima pravo,
Mogao bih napraviti nešto poput crvene boje.
I onda ja mogu spasiti ovo, ponovno, i sad sam stilizirane podnožje.
Dakle, ovo je samo aludirati na snazi onoga što možete učiniti na web-stranici
mijenjati stvari oko sebe.
>> Pa čak i hladnije od toga, ako želite probiti okolo sa stvarnim web stranice,
ne možete trajno ih mijenjati.
Ali, ako sam otvoriti Ponovno inspektor Chrome
i ja ići ne na lijevoj strani Ovdje, što pokazuje Facebooka HTML,
ali prikazuje na desnoj strani Ruka strana sve svoje CSS,
Možete i promijeniti stvari na letjeti.
Pa neka mi ići naprijed i učiniti.
>> Dopustite mi ići naprijed i kontrola kliknite na ovaj slučajnim riječi ovdje,
potpisati i kliknite Pregledajte element.
Chrome vrlo povoljno skokovima H1 tag da Facebook koristi.
I ovdje primijetiti Facebook ima vrsta lijeno
Teško kodirani veličinu fonta kao imovine ovdje.
>> Dakle, super stvar, iako je da, ako sam zapravo ići ovdje
i kažu, oh, Facebook, ne sviđa 64 piksela, sada možemo promijeniti Facebook.
Naravno, mi samo smo ga mijenja za mene osobno u ovom trenutku.
No, to je samo još jedan alat u našoj komplet alata
što će nam omogućiti da ugađanje i shvatiti i dijagnosticirati
problemi u našim vlastitim web stranicama.
I mi isto tako mogli ići preko Ovdje, što je ista stvar.
Ako stvarno želite dobiti fancy, ja znači, sada stvarno može mutirati stranicu
i raditi lude stvari.
>> Pa zašto je sve to korisno?
Pa, u konačnici, mi smo će htjeti biti
mogućnosti za stvaranje web stranice koje su vođeni vlastitim leđima krajevima,
ne samo Google i outsourcing stražnji kraj tamo.
Mi zapravo žele vrijednosti, na primjer,
djelovanja naše tražilice atribut otići ne netko drugi,
ali nešto poput search.php, search.php gdje je na vlastitom poslužitelju,
ne na tuđe.
>> I tako doći, mi zapravo potrebno uvesti novi jezik.
Tako smo već gledali na jedan novi jezik ovdje, ili dva stvarno, HTML
i CSS.
Ali oni zapravo su samo strukturne i estetske jezika.
Nisu programiranje jezik sam po sebi.
I to je otprilike koliko formalno Vrijeme što ćemo potrošiti na njih.
Zato ćemo započeti odmah za prijelaz na PHP.
>> Dakle, PHP je stvarna programski jezik.
To je skriptni jezik U smislu da
trebao biti lakši težina nego nešto poput C.
I to je tumačiti jezik, što znači da nije sastavljen.
Tako je u Ukratko, što je to značilo kad smo koristili jezik poput C
i morali smo ga sastaviti?
Što to znači sastaviti C izvorni kod?
PUBLIKA: [nečujan].
DAVID J Malan: Ponovit?
PUBLIKA: [nečujan].
DAVID J Malan: Savršeno.
To ga pretvara u binarnom.
To ga pretvara u nule i one iz stvarnog Engleski-poput izvornog koda.
A onda možemo zapravo pokrenuti one nule i one
ih prolazu CPU dvostrukim klikom ikona
ili trčanje naredbu.
>> PHP i Python i Ruby i Perl i JavaScript
a grozdovi drugi jezici su interpretirani
jezika, što je za reći ne ih sastaviti.
Umjesto toga, možete ih hraniti kao informacija Program se zove tumača.
I to tumač, koji je netko drugi napisao,
čita izvorni kod vrha do dna, lijeva na desno i samo interpretira
one linije i čini ono što ti kažeš.
>> Dakle, ako naiđete linija koja kaže ispisa,
to ne mora nužno pretvoriti ispis u odgovarajuće nula i jedinica.
To je upravo ovaj prevoditelj poput velika ako uvjet da kaže,
Ako poduka programer je ispisa, a zatim učinite sljedeće.
Tako da ga tumači samo po vrsti rasuđivanja
kroz ono što joj govore učiniti.
>> A PHP je jedan od tih jezika.
I prije PHP godina je osmišljen upravo za web programiranje.
I to je u početku vrlo neuredno neuredan jezik.
I doista, postoji ogromna Iznos loših PHP koda vani.
No, sama jezik sazrio tijekom godina,
i to toliko da je sada to zapravo divno sljedeći korak
pedagoški iz C jer je tako prokleto poznato sve
upravo ste vidjeli u posljednjih nekoliko tjedana.
>> Jedna inicijalna razlika vidjet ćemo je nema glavna funkcija više.
Kada počnete pisanje koda, to je samo će se izvršiti bez obzira na sve,
kao što ćemo vidjeti u jednom trenutku.
U međuvremenu, evo što varijabla izgleda u PHP.
To je malo drugačiji, ali samo jedva.
>> U PHP-u, ne postoji jaka tipkati.
Postoji tjedna tipkanje, što samo znači da postoji
su vrste podataka poput žice i brojevi i druge stvari.
Ali ne smetaju navodeći ono što su oni više.
PHP to figure out za vas.
Dolar znak je samo odluka da su ljudi napravili PHP godina
Prije takav da se bilo koja varijabla u PHP Upravo počinje s znak za dolar.
To je zapravo vrsta korisna u tome skače na vas malo više.
>> No, nakon toga, ova je stanje u PHP-u.
U čemu je razlika u odnosu na C?
Trik question-- ništa, što je zapravo jako lijepo.
Boolean izrazi u PHP-- isto.
Boolean izrazi sa i naspram ili, prekidači, petlje, petlje, loops-- redu,
ovo je drugačije.
>> Tako ispada da postoji nekoliko drugih značajki u PHP.
Jedan od njih je zapravo to, što je predivno zgodan.
Ako $ brojeva je niz koji ste ranije je izjavio u programu,
Imate li ovaj maštu za svaki konstrukt da, umjesto da radiš sve to
neugodno sam jednak 0, sam je manje od toga, [? Ja ++?]
za svaku brojevima kao broj, gdje je svaki od tih znakova vrijednosti dolar je samo
varijabla, a potonji možete misliti kako je I.
Ti bi mogao nazvati sve što želite.
Nazvao sam ga broj.
To će se ponoviti više Niz zove brojeve.
I na svakoj iteraciji, to je će se automatski ažurirati
za tebe dolar znak broj promjenjiva, tako da se stalno
imaju pristup varijable želite bez potrebe za napraviti bilo koji kvadrat nosač
zapis ili indeksiranje u nizu.
>> Osim toga, čak imamo stvari poput polja, koje izgledaju gotovo isto,
osim što je vrlo čest, kao što ćemo vidi, kako u PHP i JavaScript
pre inicijalizirati niz pomoću uglate zagrade.
C koristi vitičastim zagradama.
Dakle, to je malo drugačiji, iako mi stvarno nisu koristili taj trik puno.
>> No, još snažno, PHP ima asocijativne nizove,
što je fancy način govoreći hash tablice.
U stvari, ako želite proglasiti mljeveno meso stol u PHP-u, za razliku od C-- koliko
linija koda trebalo da se zapravo provesti hash tablicu u C?
Ili koliko linija koda je to uzimanje provesti hash tablicu u C?
Dakle, to je vjerojatno puno, zar ne?
To je nekoliko desetaka, možda i 100 ili 200.
To je svaki bitan.
Ili se radi o biti, kao što je ćete uskoro vidjeti, Netrivijalno
provesti hash tablicu [Nečujan] i probati.
No, u PHP-- i iskreno, ja Vjerojatno ne treba ti ovo
dok Monday-- u PHP, ako je želite stol, učinjeno.
To je mljeveno meso table-- tako s jedne linije koda.
A
>> Mnogo jezika učiniti.
Zabavite se s pset pet.
Dakle, puno jezika učiniti.
Oni vam dati ove apstrakcije da drugim ljudima, drugim programera,
stvorili za vas, tako da možete stajati na svojim ramenima
i početi koristiti ideje koje su super uvjerljiv, kao što su hash tablica i stabala
i pokuša.
Ali ne moraju nužno provedbu tih stvari sami.
>> I tako u konačnici, ono što ćemo koristiti za PHP
je potencijalno pisanje programa od tzv naredbenog retka.
Mogli smo stvoriti svaki program smo napisao ovaj semestar do sada,
osim možda Bijeg koji koristi SPL, koje je specifično za C u trenutku.
Ali svaki drugi problem postaviti, Sigurno Mario i Caesar
i Vigenere i [? Ispucati?] I dalje, mi
mogao ponovno provesti u PHP i Vjerojatno malo lakše.
>> Ali što ćemo u konačnici ćemo koristiti PHP za web programiranje.
A mi ćemo predstaviti sljedeći Tjedan mentalni model, paradigma zove
MVC, pogled Model kontroler, što ako ste učinili programiranje
ili prije u Pythonu Ruby ili negdje drugdje, što
Možda znate ovog tima s Šine i Django i slično.
Ali, ako ste novi u ovo previše, vidjet ćete
da je to zapravo vrlo prirodno proširenje faktorizaciju
i vrsta dizajna koda koji imamo
radili u C. ćemo sada primijeniti neke od tih lekcija u PHP
tako da se u konačnici, mi smo provedbi vlastite web stranice.
A ako ste vrsta hipnotiziran ili zaprepašteni
da ćemo učiniti sve tako brzo,
shvate da je gotovo svaka semestar, gotovo 90%
đačkog CS50, uključujući i one koji nikada nisu programirali prije,
završiti izradu konačne projekte koji temelje se na web programiranja.
I tako ćete vidjeti da se vraća su visoke u tjednima koji dolaze.
Zato ćemo vas vidjeti onda u ponedjeljak.
>> SPEAKER 1: A sada, duboko Misli po Daven Farnham.
Hash tablice.
>> [Smijeh]